/* ===================================================================
CSS information
 file name  :  common.css
 style info :  基本構造（common.css）
 admin info :  Design office RIVER
=================================================================== */


body {
	font-family:"游明朝 Light", "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,Georgia,serif;
	font-weight: 200;
	background:#FFFFFF;
	font-size: 1.4rem;
	line-height:200%;
	color: #666;
}
#wrapper {
	width:100%;
	margin:0 auto;
}
#header {
	background: rgba(255,255,255,0.8);
	width:100%;
	height:70px;
	position:fixed;
	display: flex;
}
#header ul{
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: 10px;
}
#header h1 {
	background:url(../common_images/M_logo_header.png) no-repeat;
	text-indent:-9999px;
	width:176px;
	height:38px;
	top:18px;
	left:20px;
}
#header .btn_lecture a{
	font-size: 1.2rem;
	text-decoration: none;
	color: #666;
	transition: .5s;
}
#header .btn_lecture a:hover{
	opacity: .5;
}
.containar{ padding-top:70px;}

.fit{ width:100%; margin:0;}
#read{ text-align:center;}

a,
a:link,
a:visited{ color:#0194D7;}

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

Home

=====================*/
#home {  padding-bottom:100px; }
#home #main {margin-bottom:20px;}
#home #contents {width:1000px; margin:0 auto; overflow:hidden; }
#home #read{ font-size:2rem; line-height:5rem;}
#home #read h3{ color:#85592E; font-size:3rem; line-height:7rem;}
#home .catch{ border-top:#000 3px solid; text-align:center; margin-top:40px; padding-top:40px; font-size:2rem; letter-spacing:1rem; color:#000;}

#home #product{ margin-right:-50px; overflow: hidden;}
#home #product li {
    position: relative;
    overflow: hidden;
    text-align: center;
	width:300px;
	height:300px;
	float: left;
	margin-top:50px;
	margin-right:50px;
	
}
#home #product li:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
    transition: all .3s ease-out;
}
#home #product li:hover:after {
    opacity: 0.9;
    transform: scale(1.1);
}
#home #product li .inner {
	z-index: 1;
	position: relative;
	display:block;
	width:300px;
	height:300px;
	display: table-cell;
	vertical-align: middle;
	margin:0 auto;
}

#home #product li.himitsu:after{background: url(../images/bn_himitsu.jpg) no-repeat center center;}
#home #product li.sousou:after{background: url(../images/bn_sousou.jpg) no-repeat center center;}
#home #product li.tsuyatsuya:after{background: url(../images/bn_tsuyatsuya.jpg) no-repeat center center;}
#home #product li.kaikaku:after{background: url(../images/bn_kaikaku.jpg) no-repeat center center;}
#home #product li.emerlia:after{background: url(../images/bn_emerlia.jpg) no-repeat center center;}
#home #product li.noni:after{background: url(../images/bn_noni.jpg) no-repeat center center;}

#home .purpose.set ul{ display:flex; justify-content: center;}

#home .purpose{ border:#ddd 1px solid; padding:20px; margin:20px 0; overflow:hidden;}
#home .purpose h3{ text-align:center;  margin:20px; display:block; font-size:2rem;}
#home .purpose li { float:left; margin:10px 10px 0 0;}
#home .purpose li a{background:#000;padding:1rem 1.5rem; display:inline-block; color:#ddd; text-decoration:none;  transition: all .5s ease-out; border-radius: 8px;}
#home .purpose li a:hover{background:#666;padding:1rem 2rem; display:inline-block; color:#ddd; text-decoration:none;}

#home #aboutus{background:url(../images/about_bg.jpg) no-repeat top right -400px; padding-bottom:100px; }
#home #aboutus .text_wrap{width:1000px; margin:0 auto;}
#home #aboutus h4{ font-size:4rem; line-height:6rem; margin:3rem 0 1rem 0;}
#home #aboutus p{  line-height:2.8rem; width:650px; }

#home #info{width:1000px; margin:0 auto; overflow:hidden;}
#home #info .catch{ margin-top:0; margin-bottom:2em;}
#home #info dt{ float:left; margin-bottom:1em;}
#home #info dd{ margin-left:6em; margin-bottom:1em;}

/*readmore*/
#home .readmore {
    max-height: 220px;
    overflow: hidden;
}
 
.readmore dd:last-child {margin-bottom: 0;}

a.opnbtn,
a.clsbtn {
	text-decoration:none;
	color:#eee;
	text-align:center;
    display: block;
    margin: 20px 0;
    padding: 10px 0;
    z-index: 0;
	background:#000;
	border-radius:8px;
 transition:0.3s;
	width:100px;
}
 a:hover.opnbtn,
a:hover.clsbtn {
	color:#eee;
	background:#666;
}


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

美的秘密

=====================*/
#biteki_himitsu #read{ font-size:1.8rem; line-height:250%;}
#biteki_himitsu #read p{ margin:50px 0;}
#biteki_himitsu #read .attention{ font-size:6rem; line-height:150%; color:#863928;}
#biteki_himitsu #material{ background:url(../biteki_himitsu/images/img_02.jpg) no-repeat; background-size:cover; width:100%; min-height:853px; color:#fff; }
#biteki_himitsu #material h3{ font-size:6rem; line-height:200%;padding:50px 0 0 100px; }
#biteki_himitsu #material p{ font-size:3rem; line-height:200%;padding:0 0 0 100px; text-shadow:0px 0px 10px #000; }
#biteki_himitsu #patent{ background:url(../biteki_himitsu/images/img_03.jpg) no-repeat top right; width:100%;  padding:100px 0; background-size:80%;}
#biteki_himitsu #patent h3{ font-size:4rem; line-height:200%; width:800px; margin-left:100px;}
#biteki_himitsu #patent .cap{ font-size:50%;}
#biteki_himitsu #patent p{ font-size:2rem; line-height:200%; width:800px; margin-left:100px;}
#biteki_himitsu #patent p.small{ font-size:1.4rem; line-height:200%; margin-bottom:2em; }
#biteki_himitsu #carrot{ background:url(../biteki_himitsu/images/img_04.jpg) no-repeat; background-size:cover; width:100%; min-height:853px; color:#fff; text-align: right;}
#biteki_himitsu #carrot h3{ font-size:4rem; line-height:200%;padding:50px 100px 0 0; }
#biteki_himitsu #carrot p{ font-size:2rem; line-height:200%;padding:0 100px 0 0; text-shadow:0px 0px 10px #000; }
#biteki_himitsu #item_detail_wrap{ background:#5A5D66;}
#biteki_himitsu #item_detail{ background:url(../biteki_himitsu/images/item_detail_bg.jpg) no-repeat; width:100%; min-height:853px; padding:50px 0; color:#fff;}
#biteki_himitsu #item_detail h3,
#biteki_himitsu #item_detail p{margin:0 20px 0 420px; }
#biteki_himitsu #item_detail h3{ font-size:3rem; line-height:200%; padding-top:3rem;}
#biteki_himitsu #item_detail p{ font-size:2rem; line-height:200%;}



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

美的爽爽

=====================*/
#biteki_sousou #read{ font-size:4rem; line-height:200%;}
#biteki_sousou #read p{ margin:50px 0;}
#biteki_sousou #read .attention{ font-size:6rem; line-height:200%; color:#377919;}
#biteki_sousou #read .small{ font-size:1.8rem; line-height:250%;}
#biteki_sousou .cut{ padding:50px 0; }
#biteki_sousou #power{ font-size:4rem; line-height:200%; text-align:center; }
#biteki_sousou #power .cut{ padding:25px 0; }
#biteki_sousou #power4 h3{font-size:6rem; color:#000; text-align:center; line-height:200%; padding-top:50px;}
#biteki_sousou #power4 {line-height:0; }
#biteki_sousou #item_detail_wrap{ background:#5A5D66;}
#biteki_sousou #item_detail{ background:url(../biteki_sousou/images/item_detail_bg.jpg) no-repeat; width:100%; min-height:853px; padding:50px 0 0 0 ; color:#fff;}
#biteki_sousou #item_detail h3,
#biteki_sousou #item_detail p{margin:0 20px 0 420px; }
#biteki_sousou #item_detail h3{ font-size:3rem; line-height:200%; padding-top:3rem;}
#biteki_sousou #item_detail p{ font-size:2rem;  line-height:200%;}



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

美的艶々

=====================*/
#biteki_tsuyatsuya #read{ font-size:4rem; line-height:250%;}
#biteki_tsuyatsuya #read p{ margin:50px 0;}
#biteki_tsuyatsuya #read .attention{ font-size:6rem; line-height:150%; color:#863928; }
#biteki_tsuyatsuya #about{ background:url(../biteki_tsuyatsuya/images/img_02.jpg) no-repeat top left; height:800px;}
#biteki_tsuyatsuya #about p{ font-size:3rem; line-height:200%; text-align:right; padding:100px;}
#biteki_tsuyatsuya #process_wrap{ background:#000; text-align:center;}
#biteki_tsuyatsuya #process{ background:url(../biteki_tsuyatsuya/images/img_03.jpg) no-repeat; width:100%; min-height:853px; padding:50px 0 ; color:#fff;}
#biteki_tsuyatsuya #process h3{ padding:25px 0;}
#biteki_tsuyatsuya #process p{ font-size:3rem; margin:1em 0; }
#biteki_tsuyatsuya #process dl{ text-align:left; margin:0 50px 0 700px;}
#biteki_tsuyatsuya #process dt{ font-size:3rem;}
#biteki_tsuyatsuya #process dd{  margin:0.7em 0 2em 0;}
#biteki_tsuyatsuya #item_detail_wrap{ background:#000;}
#biteki_tsuyatsuya #item_detail{ background:url(../biteki_tsuyatsuya/images/img_04.jpg) no-repeat; width:100%; min-height:853px; padding:50px 0; color:#fff;}
#biteki_tsuyatsuya #item_detail h3,
#biteki_tsuyatsuya #item_detail p{margin-left:500px;   margin-right:50px;}
#biteki_tsuyatsuya #item_detail p.border{ border-top:#666 1px solid;  border-bottom:#666 1px solid; margin:1em 50px 1em 500px; padding:1em 0;}
#biteki_tsuyatsuya #item_detail span.center{ display:block; text-align:center; margin-top:20px;}
#biteki_tsuyatsuya #item_detail h3{ font-size:3rem; line-height:200%; padding-top:3rem;}
#biteki_tsuyatsuya #item_detail h3.catch{ text-align:center; width:auto; margin:auto;}
#biteki_tsuyatsuya #item_detail p{ font-size:2rem; line-height:200%;}



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

美的改革

=====================*/
/*#biteki_kaikaku .column{ line-height:0;}*/
#biteki_kaikaku #read{ font-size:4rem; line-height:250%;}
#biteki_kaikaku #read p{ margin:50px 0;}
#biteki_kaikaku #read .attention{ font-size:6rem; line-height:150%; color:#F86C9D; }
#biteki_kaikaku #read .small{ font-size:1.8rem; line-height:250%;}
#biteki_kaikaku #about{ background:url(../biteki_kaikaku/images/img_02.jpg) no-repeat top; background-size: cover; min-height:742px;}
#biteki_kaikaku #about p{ color:#fff; font-size:2rem; line-height:200%;  padding:100px 50px;}

#biteki_kaikaku .item_detail{ width:1000px; margin:0 auto; padding:50px 0; overflow:hidden; }
#biteki_kaikaku .item_detail .text{ max-width:500px; float:right; margin-right:50px;}
#biteki_kaikaku .item_detail p{ font-size:1.4rem; line-height:180%;}
#biteki_kaikaku .item_detail p.outline{ font-size:2rem;}
#biteki_kaikaku .item_detail h3{ font-size:4rem; line-height:200%; padding-top:1rem; color:#FC6B9D;}
#biteki_kaikaku .item_detail h4{ font-size:2rem; line-height:200%; padding-top:1rem; color:#FC6B9D;}
#biteki_kaikaku #plan{ line-height:200%;}



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

エメリア

=====================*/
#emerlia #read{ font-size:4rem; line-height:250%; text-align:center;}
#emerlia #read p{ margin:50px 0;}
#emerlia #about{ margin:0 auto; text-align:center;}
#emerlia #step { margin:0 auto; background:url(../emerlia/images/img_03.jpg) no-repeat center  200px; }
#emerlia #step dl{ width:900px; margin:0 auto; padding:50px;  }
#emerlia #step h3{ font-size:3rem; line-height:250%; text-align:center; color:#FC6B9D;}
#emerlia #step dt{ font-size:4rem; line-height:70%;  color:#FC6B9D;}
#emerlia #step dt span{  font-size:2rem; line-height:100%; display:inline-block;}
#emerlia #step dd{ font-size:2rem; line-height:200%; margin:0.5em 0 4em 0;  }
#emerlia #component { background:url(../emerlia/images/img_04.jpg) no-repeat;}
#emerlia #component h3{ font-size:6rem; line-height:50%; color:#000; margin:0 50px 0 auto; width:700px;}
#emerlia #component h3 span{  font-size:1.4rem; line-height:100%; display:inline-block; color:#666;}
#emerlia #component dl{ width:700px; padding:50px 0; margin:0 50px 0 auto;}
#emerlia #component dt{ font-size:2rem; line-height:200%;}
#emerlia #component dd{ font-size:1.4rem; line-height:200%; margin:0 0 2em 0;  }

#emerlia  h3.catch_item_detail{ font-size:6rem; color:#000; padding:50px 0; text-align:center; margin-top:50px;}
#emerlia .item_detail{ width:1000px; margin:0 auto; padding:50px 0; overflow:hidden; }
#emerlia .item_detail .text{ width:750px; float:right;}
#emerlia .item_detail p{ font-size:1.4rem; line-height:180%;}
#emerlia .item_detail p.outline{ font-size:2rem;}
#emerlia .item_detail h4{ font-size:4rem; line-height:200%; padding-top:1rem; color:#FC6B9D;}
#emerlia .item_detail h5{ font-size:2rem; line-height:200%; padding-top:1rem; color:#FC6B9D;}



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

ノニ&野草酵素

=====================*/
#noni #read{ font-size:4rem; line-height:200%;}
#noni #read p{ margin:50px 0;}
#noni #read .attention{ font-size:6rem; line-height:200%; color:#896B33;}
#noni #read .small{ font-size:1.8rem; line-height:250%;}
#noni #potential{ background:url(../noni/images/img_02.jpg) no-repeat top; background-size: cover; }
#noni #potential .text{ width:500px; padding:50px; color:#fff; margin-left:auto; }
#noni #potential h3{ font-size:6rem;line-height:120%;}
#noni #potential p{ font-size:2rem;line-height:200%;}

#noni #type{ background:url(../noni/images/img_03.jpg) no-repeat center center; background-size: cover;}
#noni #type .text{  color:#fff; text-align:center; padding:200px 0; }
#noni #type h3{font-size:6rem; line-height:140%;}
#noni #type p{ font-size:2rem; line-height:200%; }
#noni #item_detail_wrap{ background:#5A5D66 url(../noni/images/img_04.jpg) no-repeat; width:100%; min-height:1717px;}
#noni #item_detail{ width:800px; margin-left:auto;  padding:50px 0 0 0 ; color:#fff;}
#noni #item_detail h3,
#noni #item_detail p{width:750px;}
#noni #item_detail h3{ font-size:3rem; line-height:250%; padding-top:3rem;}
#noni #item_detail p{ font-size:2rem;  line-height:200%;}



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

その他コンテンツ

=====================*/
#etc h2{ text-align:center; font-size:4rem; background:#0194D7; padding:2em 0; color:#fff;}
#etc #contents{ width:800px; margin:0 auto; padding-bottom:100px;}
#etc #contents h3{ text-align:center; font-size:3rem; border-top:#ddd 1px solid; margin-top:50px; padding:50px 0;}
#etc #contents h4{ font-size:2rem;  margin-top:25px; padding:25px 0;}
#etc .outline .read{ text-align:center; font-size:3rem; color:#0194D7; line-height:180%;}
#etc #ideology,
#etc #data{}

.listTABLE{ text-align:left; width:100%;}
.listTABLE th,
.listTABLE td{ padding:1em; border:#ddd 1px solid;}
.listTABLE th{ background:#eee;}


.privacy .shop-info__lead{ margin-top:50px; padding:50px 0;}
.privacy .shop-info-list__title{ font-size:2rem;  margin-top:25px; padding:25px 0;}
.privacy .shop-info-list__note{}

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

コンテンツ内共通

=====================*/
#plan{ border:#B50000 5px solid; text-align:center; padding:50px 0;}
#plan h3{ font-size:4rem; margin-bottom:50px; line-height:150%;}
#plan p{ padding-bottom:50px;}
#plan span{ padding-top:50px; font-size:4rem; line-height:150%; display:inline-block;}
#plan strong{ color:#B20001; font-weight:bold;}

#plan2{ border:#B50000 5px solid; text-align:center; padding:50px 0; margin: 0 auto; width: 950px; margin-bottom: 100px;}
#plan2 h3{ font-size:4rem; margin-bottom:50px; line-height:150%;}
#plan2 p{ /*padding-bottom:50px;*/
/*210929///クレカ決済・代引きの上下がわかりやすくなるよう線引：クレカの方*/
    padding-bottom: 50px;
    margin: 50px;
    border-bottom: 1px #B50000 solid
}
#plan2 span{ /*padding-top:50px;*/ font-size:4rem; line-height:150%; display:inline-block;}
#plan2 strong{ color:#B20001; font-weight:bold;}


/*カート周り*/
#buy{ width:800px; margin:0 auto;  overflow:hidden; padding:50px 0; /*text-align:center;*/ }
/*カート周り:セット用*/
.buy{ width:600px; margin:0 auto;  overflow:hidden; padding:50px 0; /*text-align:center;*/ }
/*横並び時.cart_area { display:flex; justify-content:space-around; margin-top:25px;}*/

.cart_area { margin:25px 0 0 25px; width:350px; float:right;}
#biteki_kaikaku .cart_area,
#emerlia .cart_area { margin:25px 0 0 0px; float:none;}

.cartjs_box{font-size:1.4rem; color:#333;text-align:left; line-height:250%; margin-bottom:50px;}

#plan2 .cartjs_box{
/*210929///クレカ決済・代引きの上下がわかりやすくなるよう線引：代引きの方*/
    margin: 0 25px 50px 25px;
    padding-bottom: 50px;
    border-bottom: 1px #B50000 solid;
}
.cartjs_product_name{ font-size:1.4rem;}
.cartjs_product_input_txt,
.cartjs_cart_in input{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
.cartjs_cart_in{ padding-top:10px; }
.cartjs_product_input_txt{font-size:2rem; background:#eee; border:#ddd 1px solid; padding:5px;}
.cartjs_cart_in input,
a.colorme-repeat-checkout{ background:#000; color:#eee; font-size:2rem; padding:1em 2em; border-radius: 8px; transition: all .5s ease-out; }
.cartjs_cart_in input:hover,
a.colorme-repeat-checkout:hover{ background:#555;  }

.cartjs_product_input_txt,
.cartjs_cart_in input{font-family: Georgia,"游明朝 Light", "游明朝","Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}

/*通常購入の「購入タイプ（定期便、まごころ）」は別枠のリピートが出来たため不要になったので非表示*/
.cart_area tr.cartjs_option.cartjs_option1 {display: none;}

/*定期便のボタンなど*/
a.colorme-repeat-checkout{display:inline-block;text-decoration:none;}
.repeat_txt{ color:#333; font-weight:bold; line-height:1.8; margin-bottom:.5em;}

.imgfloat_left{margin-right:12px;float:left;}
.imgfloat_right{margin-left:12px;float:right;}

/*定期便の中のカートだけセンター揃え*/
#plan2 .cartjs_product_table table{ margin: auto;}
#plan2 .cartjs_cart_in{ text-align: center;}
#plan2 .cartjs_product_num{display: none;}/*購入数は非表示*/

#footer {
	background-color:#0096D7;
	color:#fff;
	width:100%;
	text-align:center;
	padding:100px 0;
}
#footer small{ display:block; margin-top:25px;}


.red{ color:red;}
.cap{ font-size:1.4rem !important;}
.cap_small{font-size:1.2rem !important;}
.soldout{
  display: inline-block;
  padding: 0.3em 1em;
  line-height: 1;
  background: #B50000;
  color: #fff;
  border-radius: 16px;
  font-size: 150%;
}