/* 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;
background:url(../img/lineup/clean/back.png) no-repeat;
background-attachment:fixed;
overflow:hidden;
}

body::before {
  background:url(../img/lineup/clean/back.png) no-repeat left top;
  background-size:cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 108px;
  content: "";
  z-index: -1;
}   



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



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

	#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;
}
}




/* -商品------------------------------------------------------------- */


#spcial {}

	#spth1 {
		width:531px;
		height:84px;
		margin:60px auto;
	}
	
	#spth1 h2 {
		width:531px;
		height:84px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		background:url(../img/lineup/clean/title.png) no-repeat;
	}
		
	
#spcial .box {
	width:690px;
	padding:43px 95px;
	margin:40px auto;
	border:2px solid #FFFFFF;
	background:url(../img/lineup/clean/box.png) repeat;
		box-shadow: 2px 2px 8px #666;
-webkit-box-shadow: 2px 2px 8px #666;
-moz-box-shadow: 2px 2px 8px #666; 
}

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

#spcial .boxr {
	width:520px;
	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/clean/st1.png) no-repeat;}
		#sph12 {background:url(../img/lineup/clean/st2.png) no-repeat;}
		#sph13 {background:url(../img/lineup/clean/st3.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) {
	
	#spth1 {
		width:80%;
		height:auto;
		margin:20px auto;
	}
	
	#spth1 h2 {
		width:98%;
		height:60px;
		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;
}	
	
}