/* CSS Document */

@import url(navi.css);
@import url(common.css);

body {
margin:0;
padding:0;
color:#333;
line-height:180%;
font-size:1em;
font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS UI Gothic,Osaka,sans-serif;
overflow:hidden;
}




/* --1段目------------------------------------------------------------- */

#fl1 {background:url(../img/lineup/back1.jpg) no-repeat left bottom; margin:0; padding:20px 0; width:100%; height:auto;}
#fl2 {background:url(../img/lineup/back3.jpg) no-repeat right bottom; margin:0; padding:0; width:100%; height:auto;}

@media screen and (max-width: 1100px) {
#fl1 {background-size:50%;}
#fl2 {background-size:50%;}
}


#select {
	width:90%;
	max-width:600px;
	height:80px;
	margin:20px auto;
}

	#select ul {
		width:100%;
		height:80px;
	}
	
	#select ul li {
		width:50%;
		height:80px;
		float:left;
		text-align:center;
	}
	
	#select ul li a {
		width:100%;
		height:80px;
		display:block;
	}
	
	#select ul li.slc {background-color:#d6d6d6;}
	#select ul li.nml {}
	#select ul li.nml:hover {background-color:#cccccc;}


	#select ul li img {width:100%; height:auto; max-width:250px;}
	
@media screen and (max-width: 400px) {
	
	
#select {
	height:60px;

}

	#select ul {
		height:auto;
	}
	
	#select ul li {
		height:auto;
	}
	
	#select ul li a {
		height:auto;
	}
}




/* --共通------------------------------------------------------------- */


.waku {width:1000px; margin:0 auto;}
.righ {float:right; margin:0 0 0 30px; border:1px solid #FFFFFF;}


#cpr p {color:#000000;}

a.btn {
	width:180px;
	background:url(../img/lineup/skincare/yaji.png) no-repeat left #FFFFFF;
	padding:5px 20px;
	display:block;
	box-shadow: 2px 2px 2px #333333;
-webkit-box-shadow: 2px 2px 2px #333333;
-moz-box-shadow: 2px 2px 2px #333333; 
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-size:0.8em;
text-decoration:none;
border:1px solid #d6d6d6;
}

a.btn:hover {
	width:180px;
	background:url(../img/lineup/skincare/yaji.png) no-repeat left #f6f6f6;
	box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none; 
}

.prc {
	font-size:1.6em;
	font-family: 'Lora', serif;
}


@media screen and (max-width: 500px) {
	
	.waku {width:90%; margin:0 auto;}
	.righ {float:none; margin:0 0 20px 0; width:100%; height:auto;}
	
a.btn {
	width:auto;
}

a.btn:hover {
	width:auto;
}
}

/* --2段目------------------------------------------------------------- */

#prd1 {
	width:100%;
	background:url(../img/lineup/back4.png) no-repeat right #D00018;
	padding:50px 0 20px 0;
}

	#prd1 h1 {
		width:252px;
		height:62px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		margin:0 0 20px 0;
		background:url(../img/lineup/skincare/st1.png) no-repeat;
	}
	
	#prd1 p {margin:0 0 20px 0; padding:0; color:#FFFFFF; font-size:0.9em; line-height:200%;}
	#prd1 p.sm {font-size:0.8em; line-height:180%;}


@media screen and (max-width: 500px) {
	
#prd1 {
	width:100%;
	background-image:none;
	padding:20px 0 20px 0;
}

	#prd1 h1 {
		width:135px;
		height:34px;
		background-size:contain;
	}
	
	#prd1 p {font-size:0.9em; line-height:180%;}
	#prd1 p.sm {font-size:0.8em; line-height:170%;}
	
	#prd1 img {width:100%; height:auto;}
}





/* --3段目------------------------------------------------------------- */

#prd2 {
	width:100%;
	background:url(../img/lineup/back4.png) no-repeat right #9D0009;
	padding:50px 0 20px 0;
}

	#prd2 h1 {
		width:453px;
		height:63px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		margin:0 0 20px 0;
		background:url(../img/lineup/skincare/st2.png) no-repeat;
	}
	
	#prd2 p {margin:0 0 20px 0; padding:0; color:#FFFFFF; font-size:0.9em; line-height:200%;}
	#prd2 p.sm {font-size:0.8em; line-height:160%;}




@media screen and (max-width: 500px) {
	
#prd2 {
	width:100%;
	background-image:none;
	padding:20px 0 20px 0;
}

	#prd2 h1 {
		width:242px;
		height:34px;
		background-size:contain;
	}
	
	#prd2 p {font-size:0.9em; line-height:180%;}
	#prd2 p.sm {font-size:0.8em; line-height:170%;}
	
	#prd2 img {width:100%; height:auto;}
}





/* -その他のケア商品------------------------------------------------------------- */


#fl5 {background:url(../img/lineup/back5.jpg) no-repeat right top; margin:0; padding:20px 0 0 0; width:100%; height:auto;}
#fl6 {background:url(../img/lineup/back6.jpg) no-repeat left top; margin:0; padding:0; width:100%; height:auto;}

@media screen and (max-width: 1100px) {
#fl5 {background-size:50%;}
#fl6 {background-size:50%;}
}

#spcial {}

#prdw {
	width:258px;
	height:65px;
	padding:50px 0 20px 0;
	margin:0 auto;
}

	#prdw h2 {
		width:258px;
		height:65px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		margin:0 0 20px 0;
		background:url(../img/lineup/skincare/st3.png) no-repeat;
	}
	
#spcial .box {
	width:690px;
	border:3px double #d6d6d6;
	padding:43px 95px;
	margin:40px auto;
}

#spcial .boxl {
	width:94px;
	float:left;
	padding:0
}

#spcial .boxr {
	width:550px;
	float:right;
}

#spcial .boxc {
	clear:both;
	text-align:center;
	width:100%;
	padding:10px 0 0 0;
}

	#spcial h1 {
		width:303px;
		height:55px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		margin:0 0 20px 0;
	}
	
		#sph11 {background:url(../img/lineup/skincare/st4.png) no-repeat;}
		#sph12 {background:url(../img/lineup/skincare/st5.png) no-repeat;}
		#sph13 {background:url(../img/lineup/skincare/st6.png) no-repeat;}


	#spcial p {margin:0 0 20px 0; padding:0; font-size:0.9em; line-height:200%;}
	#spcial p.sm {font-size:0.8em; line-height:160%;}


@media screen and (max-width: 500px) {
	
#prdw {
	width:207px;
	height:52px;
	padding:50px 0 20px 0;
	margin:0 auto;
}

	#prdw h2 {
		width:207px;
		height:52px;
		background-size:contain;
	}
	
#spcial .box {
	width:80%;
	padding:20px 5%;
	margin:40px 5%;
}

#spcial .boxl {
	width:22%;
	max-width:60px;
	text-align:right;
}

#spcial .boxl img {width:95%; height:auto;}

#spcial .boxr {
	width:75%;
	float:right;
}

#spcial .boxc img {width:100%; height:auto;}

	#spcial h1 {
		width:195px;
		height:36px;
		text-indent:150%;
	}
	
		#sph11 {background-size:contain;}
		#sph12 {background-size:contain;}
		#sph13 {background-size:contain;}


	#spcial p {margin:0 0 20px 0; padding:0; font-size:0.9em; line-height:200%;}
	#spcial p.sm {font-size:0.8em; line-height:160%;}	
	
	
	
}



/* last ------------------------------------------------------------*/

#detox {
	width:550px;
	height:76px;
	background:url(../img/lineup/detox.png) no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	margin:60px auto;
}

	#detox p {margin:0; padding:0;}


@media screen and (max-width: 500px) {
	
	
#detox {
	width:90%;
	height:60px;
	background-size:contain;
	background-position:center;
	margin:30px auto;
}	
	
}