@charset "utf-8";


/*================================

スプラッシュ

================================*/

@media screen and (max-width: 768px) {
body{
	overflow-x:hidden;
	}
	}

#wrapper{
	display: none;
	}
 
#fade {
	width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:100;
}
#splash{
	width: 100%;
	height:100%;
	margin-top:0;
	margin-left: 0;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	z-index:101;
	background:url(../images/splash.jpg) bottom center no-repeat;
	background-size: cover;
	}
@media screen and (max-width: 768px) {
#splash{
	width: 150%;
	left: -20%;
	}
	}
@media screen and (max-width: 480px) {
#splash{
	width: 170%;
	left: -30%;
	}
	}

#splash img{
	width: 100%;
	}



/*================================

shelf

================================*/

#shelf{
	width:760px;
	height:auto;
	min-height:1px;
	max-height:9999px;
	margin:80px auto 0;
	font-size:14px;
	}

@media screen and (max-width: 768px) {
#shelf{
	width:90%;
	margin:60px auto 0;
	font-size:12px;
	}
	}

@media screen and (max-width: 480px) {
#shelf{
	width:90%;
	margin:60px auto 0;
	font-size:11px;
	}
	}

#shelf a{
	float: left;
	width:340px;
	height: 280px;
	min-height:1px;
	max-height:9999px;
	text-align: center;
	display: block;
	}

@media screen and (max-width: 768px) {
#shelf a{
	width:45%;
	height: auto;
	}
	}

@media screen and (max-width: 480px) {
#shelf a{
	float: none;
	margin:0 auto;
	width:80%;
	height: auto;
	}
	}

#shelf a:nth-child(2n){
	float: right;
	}

@media screen and (max-width: 480px) {
#shelf a:nth-child(2n){
	float: none;
	}
	}

#shelf a img{
	width:300px;
	height:185px;
	min-height:1px;
	max-height:9999px;
	}

@media screen and (max-width: 768px) {
#shelf a img{
	width:90%;
	height:auto;
	}
	}

#shelf a p{
	width:100%;
	height:auto;
	min-height:1px;
	max-height:9999px;
	border-top:1px solid #cccdcf;
	padding-top:25px;
	}

@media screen and (max-width: 768px) {
#shelf a p{
	padding-top:10px;
	padding-bottom:30px;
	}
	}