@charset "UTF-8";
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');

/* スタイルリセット　共通スタイル
----------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	font-size: 100%;
}
.clear{ clear:both;}
li {list-style-type: none;}

/*clearfix*/
.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix {display:inline-table;}

/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

.clear{clear: both;}

body {
	font:17px/1.8  "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "Osaka", sans-serif ;
	*font-size:small;
	*font:x-small;
	font/*\**/: 17px/1.8\9;
	vertical-align:baseline;
	font-style: normal;
	letter-spacing: normal;
	color: #42210B;
	background: #F8F5E6;
	}

/* リンク指定
----------------------------------------------- */
a:link {color: #FF6666; text-decoration: none;}
a:visited {color: #FF9EB3;text-decoration: none;}
a:hover {color: #F78700; text-decoration: underline;}
a img{ border: none;}
.btn-l { max-width: 100%; margin: auto; text-align: center; margin: 0; padding: 0; line-height: 1.3em;}
.btn-l a{ text-align: center; display: block; margin: auto; background: #22B373; color: #FFF;  font-weight: bold; padding: 0.6em 0.4em; font-size: 1.74rem;border-radius: 12px;line-height: 1.2em;}
.btn-subtex{text-align: center; font-size: 0.9rem; margin: 0; padding: 0; line-height: 1.3em;}
.btn-subtex a{color: #22B373}

#btn_buy_fixed{ position: fixed; bottom: 0.4em; right: 1%; background: #68c756; height: 120px; width: 120px; border-radius: 50%; box-shadow: 0px 1px 6px dimgray;color: #FFF; text-align: center; z-index: 9999;}
#btn_buy_fixed a{ color: #FFF; text-decoration: none; }
#btn_buy_fixed .product-name{ font-size: 0.6em; margin: 1.6em 0 0; line-height: 1.1em;}
#btn_buy_fixed .price{ font-size: 1.2em; margin: 0.3em;line-height: 1.1em;}
#btn_buy_fixed .buynow{font-weight: bold;font-size: 1.1em;line-height: 1.0em; }
#btn_buy_fixed .linenow{ margin-top: 1.8em; line-height: 1.3em;}

/* TYPEKIT 
----------------------------------------------- */
html {visibility: hidden;}
html.wf-active {visibility: visible;}

.lp-content{max-width: 800px; width: 98%; margin: auto;}
header .lp-content{width: 100%; }
.lp-content img{max-width: 100%; height: auto;}
.font-chibi{font-family: "tbchibirgothicplusk-pro",sans-serif; font-weight: 400;}
.font-s{font-size: 0.86em;}
.img-right{ float: right; margin: 0 0 0 0; }
.img-left{ float:left; margin: 0 0 0 0;}


.block1,.block3{ padding: 60px 0;}
.p-1-right{ float: right; max-width: 210px; width: 26.2%;}

.main-left-cont1{ overflow: hidden;}
.main-right-cont1{ overflow: hidden;}
.block1 h2{ font-size: 1.84em; line-height: 1.3em; font-feature-settings : "palt"; margin-bottom: 1.0em;}
.block1 p,.block-cream p{margin-bottom: 1.0em}


.block2{ max-width: 1400px; width: 100%; min-height: 460px; margin: auto;}
.photobar1{ background: url(/img/lp/shampoo/p_bar1.jpg) no-repeat center top fixed ; background-size: cover;  }

.title-c{ font-size: 3.0rem; text-align: center; line-height: 1.0em; margin-bottom: 1.0em; font-feature-settings : "palt"; }
.title-a{font-family: 'Quicksand', sans-serif;  font-size: 3.0rem; text-align: center; line-height: 1.3em; margin-bottom: 1.0em}
h2.title-c{}
h3.title-c{ font-size: 1.70em;}

.point1 {margin-bottom: 6.0em}
.point1 li{ text-indent: 0; padding-left: -40px; margin-bottom: 2.0em;background: url(/img/lp/shampoo/icon_star.png) no-repeat left 4px; padding: 0 0 0 40px; background-size: 36px 35px}
.point1 p{ margin-left: 1.0em;}
.point1 h3 { font-size: 2.0rem; background: url(/img/lp/shampoo/underbar1.png)  repeat-x left bottom; background-size: contain; display: inline-block; line-height: 1.2em; padding-bottom: 0.3em; font-feature-settings : "palt"; margin-bottom: 0.3em;}
/*.point1 li::before{ background: url(/img/lp/shampoo/icon_star.png) no-repeat center center; content: "おお  "; width: 40px; height: 40px; background-size: contain; }*/
.point1 .attention{ color: #22B373; font-weight: 600;}
.review{ display: flex; justify-content: flex-start; flex-wrap: wrap; margin: 2.0em 0 0.0em 1.0em;}
.review li{ margin: 1.6em 2% 16px; padding: 0 16px 16px 0; width: 43%}
.review li:nth-child(odd){background: url(/img/lp/shampoo/bg_blue.png) right bottom; }
.review li:nth-child(even){background: url(/img/lp/shampoo/bg_green.png) right bottom; }
.review li div{ padding: 1.4em 1.2em; margin: -16px 0 0 -16px; border-radius: 3px;}
.review li:nth-child(odd) div{ background: #AFDDE7; }
.review li:nth-child(even) div{ background: #D3DF3A; }
.review li h4{ font-size: 1.3em;font-weight: bold; line-height: 1.3em; margin-bottom: 0.8em;font-feature-settings : "palt"; }
.review li p{ font-size: 0.86em;}
.review li  .riviewer{ text-align: right; margin: 1.0em 0 0 0;}
.point2 { clear: both; display: flex; flex-wrap: wrap; justify-content:center; margin-bottom: 2.0em;}
.point2 li{ text-align: center; width: 15%; margin: 0 0.5%; }
.block-cream{ background: #E7DDAF; padding: 60px 0;}
.block-ecocert p { font-size: 1.4em; font-weight: bold;}
.block-ecocert p span{ background: url(/img/lp/shampoo/underline_brown.png) repeat-x bottom;}
.ecocert-summary{ background: #FFF; padding: 1.8em; font-size: 0.8rem; font-weight: normal; margin: 2.0em 0;}
.block-ecocert  .img-right{ width: 36%;}
.block-ecocert  .ecocert-summary .img-right{ width: 20%;}
.block-hello{ position: relative;}
.block-hello h2{ font-size: 3.8rem;}
.block-hello h3{ text-align: center; font-size: 2.0rem; line-height: 1.5em; }
.block-hello h3 span{background: url(/img/lp/shampoo/underline_dot_blue.png) repeat-x left bottom; padding: 0 -0.28em 0.2em; display: inline-block; margin: 0 0.3em;}
.block-hello  .lead{ text-align: center; font-size: 1.4rem; margin: 2.0em auto; max-width: 680px;}
.block-hello .p-right{ position: absolute; top:80px; right: 0; z-index: -1}
.block-hello .p-left{position: absolute; top:300px; left: 0;z-index: -1}
.block-hello .p-right img,.block-hello .p-left img{ width: 272px; height: auto; }
.step123{ display: flex; flex-wrap: nowrap; justify-content: space-between}
.step123 li{ margin: 0 1%; width:calc(31.3% - 22.6px); position: relative;}
.step123  .arrow{ background: url(/img/lp/shampoo/icon_arrow_blue.png) no-repeat center center; width: 34px; background-size: contain;}
.step123 li h4{ font-size: 0.9em; height: 3.8em; line-height: 1.3em; margin-bottom: 0.6em;}
.step123 li p{ font-size: 0.8em;}
.step123 li p.btn-l{position: absolute; bottom: 0; width: 100%; }
.step123 li p.btn-l a{font-size: 1.1em;}
.step123 li .font-s{ font-size: 0.8em;}
.step123 li .hosoku{ margin-bottom: 6.0em; }
.block-about .main-right-cont1{ margin-bottom: 1.0em;}
.block-about .p-1-left{clear: both; width: 300px; float: left;margin: 0 1.8em 0 0;}
.block-about .main-left-cont1{clear: right; }
.block-about::after{clear: both; display: block; content: ""; height: 0; }
.block-no1{ font-size: 1.7em;}
.block-no1 .p-1-right{clear: both; width: 300px;margin: 0 0 0 1.0em;}

.excucse{ font-size: 0.8em; margin: 0 0 2.0em 0;}
.cashless{color:#f31e1e; text-align: center; font-weight: bold; font-size: 1.0rem;}
.cashless::before{ content: ""; padding: 0 0em 0 0; margin: 0 0.2em 0 0;width:18px; height: 17px;display: inline-block; background: url(/img/ec/icon_cashless.png) no-repeat; background-size: contain;vertical-align: middle;}

@media screen and (max-width : 768px){
	.block-hello .p-right img,.block-hello .p-left img{ width: 172px; height: auto; }
	.photobar1{ background: url(/img/lp/shampoo/p_bar1.jpg) no-repeat center top ; background-size: contain;}
}

@media screen and (max-width : 500px){
	.lp-content{width: 96%;}
	.main-left-cont1{ overflow: visible;}
	.block1{ padding: 20px 0 60px; overflow: hidden;}
	.block2{ min-height: 25vh;}
	.point1 h3 { font-size: 1.76rem; }
	.point1 p{ margin-left: 0em;}
	.review{ margin-bottom: 0em;}
	.review li{ margin: 1.6em 5% 16px;  width: 90%}
	.point2 li{ text-align: center; width: 25%; margin: 0 0.5%; }
	
	
	.block-ecocert h2{ line-height: 1.2em; font-size: 2.0em;}
	.block-ecocert  .img-right{ width: 80%; float: none; margin: auto;}
	.block-hello .p-right img{ width: 142px; height: auto; }
	.block-hello .p-left img{ width: 122px; height: auto; }
	.block-hello .p-right{ position: absolute; top:0px; right: 0; z-index: -1}
	.block-hello .p-left{position: absolute; top:200px; left: 0;z-index: -1}
	.block-hello  .lead{ text-align: left; font-size: 1.08rem;  max-width:auto; font-weight: bold;}
	.step123{flex-wrap: wrap; }
	.step123 li{ margin: 0 auto; width:90%; }
	.step123  .arrow{ margin: 0 auto; width:90%; }
	.step123 li p.btn-l{position: relative; bottom: auto; width: 100%; margin-bottom: 4.0em }
	.block-about h2{line-height: 1.2em; font-size: 2.0em;}
	.block-about .p-1-right,.block-about .p-1-left,.block-no1 .p-1-right{clear: both; width: 80%;margin: 0 auto; float: none;}
	.block-no1 p{ line-height: 1.3em;}
	
}