/* 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/top_bg/img1.jpg) no-repeat;
background-attachment:fixed;
min-width:1000px;
}

body::before {
  background:url(../img/top_bg/img1.jpg) 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;
}   


/* bbsloder */

#mainc {width:100%; height:610px;background:url(../img/top/bl.png) repeat; margin-bottom:100px;}
#main {width:964px; margin:0 auto;}
#main .pager {display:none;}

@media screen and (max-width: 500px) {
	
	#mainc {margin-bottom:30px; height:auto;}
	#main {width:100%;}
}


/* 水を取り込む～3点セット～　*/

#wt {
	width:964px;
	height:310px;
	margin:0 auto;
	position:relative;
}

	#st1 {width:133px; height:305px; position:absolute; top:15px; left:814px;}
	#st1 h1 {width:133px; height:305px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../img/top/st1.png) no-repeat;}
	
	#st1p {width:320px; height:121px; position:absolute; top:15px; left:20px;}
	#st1p p {width:320px; height:121px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../img/top/st1p.png) no-repeat;}
	
/*　くりーむ　*/
	
	#cream {
		width:403px;
		height:270px;
		position:absolute;
		top:209px;
		left:20px;
		background:url(../img/top/cream.png) no-repeat;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	
	
	#cream a {
		width:403px;
		height:270px;
		display:block;
	}
	
	#cream_btn {
		width:187px;
		height:76px;
		position:absolute;
		top:490px;
		left:150px;
	}
	
		#cream_btn h2 {
			width:187px;
			height:14px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
			background:url(../img/top/ct.png) no-repeat;
			margin:0 0 10px 0;
		}
		
		#cream_btn a {
			width:187px;
			height:24px;
			display:block;
			margin-bottom:5px;
		}			
		
		#cream_btn a.cr {background:url(../img/top/cl.png) no-repeat;text-indent:100%;	white-space:nowrap; overflow:hidden;}
		#cream_btn a.crs {background:url(../img/top/cb.png) no-repeat;text-indent:100%;	white-space:nowrap; overflow:hidden;}

/*　ローション　*/
	#lotion {
		width:280px;
		height:459px;
		position:absolute;
		top:12px;
		left:393px;
		background:url(../img/top/lotion.png) no-repeat;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	
	#lotion a {
		width:280px;
		height:459px;
		display:block;
	}
	
	#lotion_btn {
		width:122px;
		height:76px;
		position:absolute;
		top:490px;
		left:390px;
	}
	
		#lotion_btn h2 {
			width:122px;
			height:14px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
			background:url(../img/top/lt.png) no-repeat;
			margin:0 0 10px 0;
		}
		
		#lotion_btn a {
			width:122px;
			height:24px;
			display:block;
			margin-bottom:5px;
		}			
		
		#lotion_btn a.lr {background:url(../img/top/ll.png) no-repeat;text-indent:100%;	white-space:nowrap; overflow:hidden;}
		#lotion_btn a.lrs {background:url(../img/top/lb.png) no-repeat;text-indent:100%;	white-space:nowrap; overflow:hidden;}

/*　洗顔フォーム　*/
	
	#form {
		width:291px;
		height:450px;
		position:absolute;
		top:12px;
		left:557px;
		background:url(../img/top/form.png) no-repeat;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	
	#form a {
		width:291px;
		height:450px;
		display:block;
	}
	
	#form_btn {
		width:170px;
		height:76px;
		position:absolute;
		top:490px;
		left:570px;
	}
	
		#form_btn h2 {
			width:170px;
			height:14px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
			background:url(../img/top/ft.png) no-repeat;
			margin:0 0 10px 0;
		}
		
		#form_btn a {
			width:170px;
			height:24px;
			display:block;
			margin-bottom:5px;
		}			
		
		#form_btn a.fr {background:url(../img/top/fl.png) no-repeat;text-indent:100%;	white-space:nowrap; overflow:hidden;}
		#form_btn a.frs {background:url(../img/top/fb.png) no-repeat;text-indent:100%;	white-space:nowrap; overflow:hidden;}

#wt2 {
	width:100%;
	height:184px;
	background:url(../img/top/wave.png) repeat-x center top;
	padding:300px 0 0 0;
}

	#wt2in {
		width:804px;
		height:156px;
		margin:0 auto;
	}
	
	#wt2in h1 {
		width:804px;
		height:156px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		background:url(../img/top/gb.png) no-repeat;
	}


@media screen and (max-width: 500px) {
	
#wt {width:100%; height:auto; position:static;}
			
			
	#st1 {width:86px; height:196px; position:static; margin:0 auto;}
	#st1 h1 {width:86px; height:196px; background-size:contain;}
	
	#st1p {width:256px; height:97px; position:static; top:15px; left:20px; margin:20px auto 0 auto;}
	#st1p p {width:256px; height:97px; background-size:contain;}
	

	

/*　3種 ローションとフォームは見せない（クリーム部分に）　*/
	
	#form,
	#lotion {display:none;}
	

	#cream {
		width:100%;
		height:300px;
		position:static;
		background:url(../img/top/creams.png) no-repeat center bottom;
		background-size:contain;
		margin:20px 0 0 0;
	}
	
	#cream_btn {
		width:100%;
		height:auto;
		position:static;
	}
	
	#lotion_btn {
		width:100%;
		height:auto;
		position:static;
	}
	
	#form_btn {
		width:100%;
		height:auto;
		position:static;
	}
	
	#cream_btn h2,
	#lotion_btn h2,
	#form_btn h2 {
			width:100%;
			height:auto;
			font-weight:normal;
			text-align:center;
			color:#FFFFFF;
			font-size:0.9em;
			background:none;
			text-indent:0;
		}
	
		#cream_btn a,
		#lotion_btn a,
		#form_btn a {
			width:90%;
			height:25px;
			display:block;
			margin:0 auto 5px auto;
		}			
		
		#cream_btn a.cr,
		#lotion_btn a.lr,
		#form_btn a.fr {
			background-image:none;
			font-size:0.8em;
			text-indent:0;
			color:#FFFFFF;
			background-color:#000;
			white-space:pre-wrap;
			text-align:center;
			text-decoration:none;
			-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
		}
		
		#cream_btn a.crs {display:none;}
		#lotion_btn a.lrs {display:none;}
		#form_btn a.frs {display:none;}
	

	#wt2 {
	width:100%;
	height:auto;
	background:url(../img/top/wave.png) repeat-x center top;
	background-size:180%;
	padding:20px 0 0 0;
}

	#wt2in {
		width:100%;
		height:110px;
		margin:0 auto;
	}
	
	#wt2in h1 {
		width:100%;
		height:110px;
		background-size:contain;
		background-position:center;
	}





}


/* 商品一覧　---------------------------------------------------------------------------*/

#all {
	width:100%;
	height:444px;
	background:url(../img/top/back.png) repeat-x center top #FFFFFF;
	padding:0 0 50px 0;
}

	#allin {
		width:964px;
		height:444px;
		margin:0 auto;
		position:relative;
	}
	
	#allin p {text-align:center; color:#0046A5; font-size:0.9em; margin:0; padding:5px 0;}
	
	#lin1 {width:144px; height:327px; position:absolute; top:117px; left:112px; text-align:center;}
	#lin2 {width:144px; height:262px; position:absolute; top:117px; left:262px; text-align:center;}
	#lin3 {width:144px; height:426px; position:absolute; top:18px; left:412px; text-align:center;}
	#lin4 {width:144px; height:426px; position:absolute; top:18px; left:562px; text-align:center;}
	#lin5 {width:144px; height:426px; position:absolute; top:18px; left:713px; text-align:center;}
	
	#mar1 {width:170px; height:170px; position:absolute; top:-10px; left:110px; text-align:center;}
	#mar2 {width:170px; height:170px; position:absolute; top:-10px; left:410px; text-align:center;}
	
		#mar1 h2 {
			width:170px;
			height:170px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
			background:url(../img/top/maru1.png) no-repeat;
		}
		
		#mar2 h2 {
			width:170px;
			height:170px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
			background:url(../img/top/maru2.png) no-repeat;
		}
		
	#pearl {
		width:605px;
		height:78px;
		position:absolute;
		top:260px;
		left:120px;
	}
	
	#rose {
	width: 438px;
	height: 209px;
	position: absolute;
	top: 430px;
	left: 710px;
	}
	
	#rose1 {
		width:58px;
		height:59px;
		position:absolute;
		top:480px;
		left:0px;
	}
	
	#rose2 {
		width:76px;
		height:75px;
		position:absolute;
		top:550px;
		left:-40px;
	}
	
	#rose3 {
		width:87px;
		height:83px;
		position:absolute;
		top:630px;
		left:-30px;
	}
	
	
@media screen and (max-width: 500px) {

#all {
	height:auto;
	background:#FFFFFF;
	padding:0;

}

	#allin {
		width:100%;
		height:auto;
		margin:0 auto;
		position:static;
	}
	
	
	#lin1 {width:30%; height:auto; position:static; float:left; margin:0 0 0 18%;z-index:10000;}
	#lin2 {width:30%; height:auto; position:static; float:right; margin:0 18% 0 0;z-index:10000;}
	#lin3 {width:30%; height:auto; position:static; float:left; margin:0 1% 0 4%;}
	#lin4 {width:30%; height:auto; position:static; float:left;}
	#lin5 {width:30%; height:auto; position:static; float:right; margin:0 4% 0 1%;}
	
	#lin1 img,
	#lin2 img,
	#lin3 img,
	#lin4 img,
	#lin5 img {width:100%; height:auto;}
	
	#mar1 {width:100%; height:auto; position:static;}
	#mar2 {width:100%; height:auto; position:static;}
	
		#mar1 h2,
		#mar2 h2 {
			width:90%;
			height:auto;
			clear:both;
			text-indent:0;
			white-space:pre-wrap;
			background:none;
			margin:0 5% 10px 5%;
			padding:30px 0 15px 0;
			border-bottom:1px solid #d6d6d6;
			font-weight:normal;
			line-height:180%;
			font-size:1em;
			text-align:left;
		}


	#pearl {display:none;}
	#rose1 {display:none;}	
	#rose2 {display:none;}
	#rose3 {display:none;}
	#rose {display:none;}
	

			

}


/* シャンプーエリア　　*/

#sp {
	width:890px;
	margin:50px auto;
	background:url(../img/top/b2.png) repeat;
	padding:25px;
}

	#spl {
		width:406px;
		float:left;
	}
	
		#spl h1 {
			width:406px;
			height:102px;
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
			background:url(../img/top/st2.png) no-repeat;
			
		}
		
		#spl p {
			padding:20px 0 20px 20px;
			margin:0;
			font-size:0.8em;
			color:#FFFFFF;
		}
		
		.shdw {
			    -moz-box-shadow:0px 0px 5px #000;
    			-webkit-box-shadow:0px 0px 5px #000;
    			box-shadow:0px 0px 5px #000;
		}
		
	#spr {
		width:417px;
		float:right;
	}
	
@media screen and (max-width: 500px) {
	
#sp {
	width:100%;
	margin:0;
	padding:20px 0;	
	}

	#spl {width:100%;	float:none;}
	
		#spl h1 {
			width:90%;
			padding:20px 5%;
			height:auto; text-indent:0; white-space:pre-wrap; background:none; text-align:left;
			 color:#FFFFFF; font-size:1.2em; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-weight:normal;
			 background:url(../img/top/bl.png) repeat;
			 margin:0;
			 }

		
		#spl p {font-size:1em;}
		
	#spr {
		width:100%;
		float:none;
		text-align:center;
	}
	
	
	.shdw {display:none;}
	
	#spr img {
		width:90%;
		height:auto;
		max-width:417px;
	}
}
	

/*　泡立ち解説　　　*/

#awa {
	width:860px;
	margin:50px auto;
}

	#awa img.bimg {
		float:right;
		margin:-150px -80px 0 30px;
		-moz-box-shadow:0px 0px 5px #000;
    	-webkit-box-shadow:0px 0px 5px #000;
    	box-shadow:0px 0px 5px #000;
	}
	

	
	#awa h1 {
		width:405px;
		height:160px;
		background:url(../img/top/st3.png) no-repeat;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}
	
	#awa p {
		margin:0;
		padding:20px 0 0 5px;
		color:#FFFFFF;
		font-size:0.9em;
	}

@media screen and (max-width: 500px) {
	
	#awa {
	width:100%;
	text-align:center;
}

	#awa img.bimg {
		float:none;
		margin:0 auto;
		-moz-box-shadow:none;
    	-webkit-box-shadow:none;
    	box-shadow:none;
		width:100%;
		height:auto;
		max-width:472px;
	}
	

	
	#awa h1 {
		width:90%;
		padding:20px 5%;
		height:auto; 
		text-indent:0; 
		white-space:pre-wrap; 
		background:none; 
		text-align:left;
		color:#FFFFFF; 
		font-size:1.2em; 
		font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		font-weight:normal;
		background:url(../img/top/bl.png) repeat;
		margin:0;
		}
			
	#awa p {
		margin:0;
		padding:20px 5% 0 5%;
		color:#FFFFFF;
		font-size:0.9em;
		text-align:left;
	}
	
}
/* 浮いた薔薇　*/
	
#roseb {
		width:212px;
		height:100px;
		margin:0 auto;
	}
	
	#roseb img {margin:-112px 0 0 0;}
	
	
@media screen and (max-width: 500px) {
	
	#roseb {
		width:100%;
		height:50px;
		text-align:center;
	}
	
	#roseb img {margin:-50px 0 0 0;}
	
}
	
/* last ------------------------------------------------*/

#last {
	width:100%;
	background:url(../img/top/bl.png) repeat;
}

	#lastin {
		background:url(../img/top/last1.jpg) no-repeat left top;
		margin:0 auto;
		padding:70px 10px 0 503px;
		width:443px;
		height:490px;
	}
	
	#lastin h1 {
		width:388px;
		height:109px;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
		background:url(../img/top/st4.png) no-repeat;
	}
	
	#lastin p {
		margin:0;
		padding:20px 0;
		color:#FFFFFF;
		font-size:0.9em;
	}
	
@media screen and (max-width: 500px) {
	
	#lastin {
		background-position:center top;
		margin:0 auto;
		padding:560px 0 0 0;
		width:100%;
		height:auto;
	}
	
	#lastin h1 {
		width:90%;
		padding:20px 5%;
		height:auto;
		text-indent:0; 
		white-space:pre-wrap; 
		background:none; 
		text-align:left; 
		color:#FFFFFF; 
		font-size:1.6em; 
		font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; 
		font-weight:normal;
		background:url(../img/top/bl.png) repeat;
		}
		
			
	#lastin p {
		margin:0;
		width:90%;
		padding:20px 5%;
		color:#FFFFFF;
		font-size:0.9em;
	}
	
}