@charset url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);

/*color palette
#6fa422
#496c16
#e6f5d0
#c81430
#ef5063
#f09dac
#464b3d
*/

/*------------------------------------ 

General Settings

------------------------------------ */
body {
	-webkit-text-size-adjust: 100%;/* テキストサイズバグ回避 */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	font-size: 87.5%;
	font-family: 'Noto Sans','游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #2e2e2e;
	letter-spacing: 0.1em;
	line-height: 1.75em;
	
	margin: 0 !important;
}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}

.noto-light     { font-weight: 200; }
.noto-demiLight { font-weight: 300; }
.noto-regular   { font-weight: 400; }
.noto-medium    { font-weight: 500; }
.noto-bold      { font-weight: 700; }

.txt120 { font-size: 1.2rem;}
.mt00 { margin-top: 0 !important;}
.mt-10 { margin-top: -10px !important;}
.mt-20 { margin-top: -20px !important;}
.mt10 { margin-top: 10px !important;}
.mt20 { margin-top: 20px !important;}
.mt40 { margin-top: 40px !important;}
.mt60 { margin-top: 60px !important;}
.mt80 { margin-top: 80px !important;}
.mtb10 { margin-top: 10px; margin-bottom: 10px;}
.fontR { color: rgba(252,36,40,1.00)}
.fontP { color: #db6882}
a { color: #db6882;}
.font-large { font-size: 1.5em;}

.left { float: left !important;}
.right { float: right !important;}
.center { text-align: center;}
.clearfix:after,.clear { content: ""; clear: both; display: block;}

img { width: 100%; height: auto;}
p {
	font-size: 1.0rem;
	line-height: 1.75em;
}
.caption {
	font-size: 0.8em;
	line-height: 1.0rem;
	display:inline-block;
}
@media screen and (min-width: 414px) {.pls6{display:block;}.nrml6{display:none;}}
@media screen and (max-width: 410px) {.pls6{display:none;}.nrml6{display:block;}}

/*------------------------------------ 

Layout

------------------------------------ */
article#container { width: 100vw; margin: 0 auto;}
#container section { width: 95vw; margin: 10px auto 20vh auto; position: relative;}
#container section.noBorder { margin: -15vh auto 20vh auto}
#container section:last-child { margin: 10px auto 2vh auto; }
/*section.history { margin-bottom: 0 !important;}*/
section.Premium { /*width: 95vw !important; margin: 0 ; padding: 30vh 2.5vw 10vh 2.5vw; margin-top: -300px !important;*/ position: relative; z-index: 1; /*background-color: #f1fedc;*/
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e6f5d0 25%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#e6f5d0 25%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#e6f5d0 25%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6f5d0',GradientType=0 ); /* IE6-9 */
}
section.Premium.up0407 { /*margin-top: 0 !important; padding: 10vh 2.5vw;*/ background: #e3c433;
width: 95%; margin: 0 auto; padding: 5vh 0 ;
}
/*section.Premium.up0407 .inner { width: 95%; margin: 0 auto; padding: 1vw 2%; background-color: #cbb343;}*/
.overSized { width: 100vw !important; margin-left: -2.5vw;}
/*----- フェードイン -----
.inviewfadeIn { opacity: 0;	transition: .8s;}
.fadeIn { opacity: 1.0;}
/**/

/*------------------------------------ 

Common in sections

------------------------------------ */
section h2 { width: 95vw; margin: 0 auto;}
section h3 { font-size: 1.2rem;}
section h2+h3 { margin-top: -10px; }
section h3+h2 { margin-top: -10px; }
section h2+h4 { margin-top: 40px; position: relative; z-index: 1;}
section h4 { font-size: 1.1rem; line-height: 1.75rem;}
section .bodyTxt p { margin-top: 20px; }
.flexbox { display: flex; -webkit-display: flex;}

#container section::after {
	background-image: url(../../img/mt/stop_mt.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;	top: -12vh; right: 0; bottom: 0; left: 0; content: ' ';
	z-index: -1;
}
#container section.noBorder::after { background-image: none;}


/*------------------------------------ 

MainVisual

------------------------------------ */
.logo { width: 25vw; position: absolute; top: 1vh;}
.top h1 { width: 100%; position: absolute; top: 20vh; margin: 0;}
.top .gennaiLogo { width: 100%; position: absolute; bottom: 10vh; }

.e0524 .logo { width: 70vw; position: absolute; top: 1vh;}
.e0524.top h1 { width: 100%; position: absolute; top: 18vh; margin: 0;}
.e0524.top p { width: 100%; position: absolute; bottom: 10vh; text-align: center; color: #496c16; }

/*20191224*/
.price-wrap { width: 60%; position: absolute; bottom: 20vh; right: 0;}

/* iPhoneX */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
{
.price-wrap { width: 60%; position: absolute; bottom: 16vh; right: 0;}
.e0524.top p { width: 100%; position: absolute; bottom: 8vh; text-align: center; color: #496c16; }
}


/*------------------------------------ 

BuyArea

------------------------------------ */
.buyArea h4.teiki { border: 2px solid #c81430; margin-top: 20px; padding: 0;}
.buyArea h4.once { border: 2px solid #7a7a7a; margin-top: 40px; padding: 0;}
.buyArea h4 img { display: inherit;}
.buyArea.Premium.up0407 h4.teiki, .buyArea.Premium.up0407 h4.once { width: 95%; margin: 0 auto; border: 2px solid #ffffff; margin-top: 20px; padding: 0;
/* box-shadow */
box-shadow:0px 0px 4px 0px #847b50,0px 0px 4px 0px #847b50 inset;
-moz-box-shadow:0px 0px 4px 0px #847b50,0px 0px 4px 0px #847b50 inset;
-webkit-box-shadow:0px 0px 4px 0px #847b50,0px 0px 4px 0px #847b50 inset;}
.buyArea.Premium.up0407.e0726_2 h4.once { border: 2px solid #073463; margin-top: 40px; padding: 0; box-shadow: none;}


.buyBundle { width: 90%; margin: 20px auto; text-align: center; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px solid #464b3d; position: relative;}
.buyBundle .prdctImg { margin: 10px auto;}
.buyBundle dl dt { padding: 5px 0; border-top: 1px solid #c81430; border-left: 1px solid #c81430; border-right: 4px solid #c81430; border-bottom: 4px solid #c81430; }
.onceArea .buyBundle dl dt { padding: 5px 0; border-top: 1px solid #7a7a7a; border-left: 1px solid #7a7a7a; border-right: 4px solid #7a7a7a; border-bottom: 4px solid #7a7a7a; }
.buyArea.Premium.up0407 .buyBundle dl dt,
.buyArea.onceArea.Premium.up0407.buyBundle dl dt 
{ padding: 5px 0; border-top: 1px solid #073463; border-left: 1px solid #073463; border-right: 4px solid #073463; border-bottom: 4px solid #073463; } 

.buyBundle dl dt::before {content: "\f0da"; font-family: FontAwesome; margin-right: 5px; }
.buyBundle dl dt.open::before {content: "\f0d7"; font-family: FontAwesome; margin-right: 2px;}
.buyBundle dl dd{ padding:15px;}
.buyBundle { margin-bottom: 40px;}
.btn_line, .btn_buy, .buy_list dt { margin-top: 10px;}
.buy_box { 
	display: flex;
	-webkit-display: flex;
	
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;

	justify-content: space-between;
	-webkit-justify-content: space-between;	
	
	margin-bottom: 10px;
}
.buy_box div.waku { border: 1px solid #c81430; display: inline-block; padding: 2px; margin-top: 10px ; width: 46%; text-align: center; line-height: 1.2em; display: table; min-height: 40px; }
.buy_box div.waku span{ display: table-cell;  vertical-align: middle;}
.onceArea .buyBundle .buy_box div.waku{ border: 1px solid #7a7a7a; display: inline-block; padding: 2px; margin-top: 10px ; width: 46%; text-align: center; line-height: 1.2em; display: table; min-height: 40px; }
.buyArea.Premium.up0407 .buy_box div.waku,
.buyArea.onceArea.Premium.up0407 .buy_box div.waku{ border: 1px solid #073463; }

.buyBundle dt, .buyBundle span { font-size: 0.7rem; color: #c81430;}
.onceArea .buyBundle dt, .onceArea .buyBundle span { font-size: 0.7rem; color: #7a7a7a;}
.buyArea.Premium.up0407 .buyBundle dt, .buyArea.Premium.up0407 .buyBundle span,
.buyArea.Premium.up0407 .onceArea .buyBundle dt,
.buyArea.Premium.up0407 .onceArea .buyBundle span { color: #ffffff;}
.buyArea.Premium.up0407.e0726_2 .onceArea .buyBundle span { color: #073463;}

@media screen and (max-width: 320px) {.buyBundle dt, .buyBundle span { font-size: 0.7rem; }}
.buyBundle dl dd h4 { font-size: 1.0rem; line-height: 1.25rem; }
.buyBundle dl dd img { display: block;}
.buyBundle dl dd ul.flexbox{ 
	flex-wrap: no-wrap;
	-webkit-flex-wrap: no-wrap;
	
	justify-content: center;
	-webkit-justify-content: center;
	
	align-items: center;
	-webkit-align-items: center;
	
	list-style-type: none;
	text-align: left;
	margin: 10px auto;
}
.buyBundle dl dd ol {text-align: left; margin: 10px auto; list-style-position: inside; text-indent: -1.0em; margin-left: 1.0em;}
.buyBundle dl dd ul.flexbox li, .buyBundle dl dd ol li { margin: 5px; font-size: 0.8rem; line-height: 1.0rem;}
.buyBundle dl dd p { text-align: left; font-size: 0.8rem; margin-top: 10px;}
.buyBundle p.caption { text-align: left; text-indent: -1.0em; margin-left: 1.0em;}

.buyBundle .icon_buy { width: 20vw; position: absolute;}
.buyBundle .icon_buy.teiki.women, .buyBundle .icon_buy.teiki.men { top: -15px; left: 5vw;}
.buyBundle .icon_buy.teiki.couple { top: -25px; left: -6vw;}
.buyBundle .icon_buy.once.women, .buyBundle .icon_buy.once.men { width: 15vw; top: -15px; left: 17vw;}
.buyBundle .icon_buy.once.couple { width: 15vw; top: -15px; left: 7vw;}
.buyBundle .icon_buy.pre.women, .buyBundle .icon_buy.pre.men { top: -8px; left: -3vw;}
.buyBundle .icon_buy.pre.couple { top: -8px; left: -6vw;}

/* 粒説明画像 */
.tb { width: 100%; border-radius: 5px; padding: 0; position: relative; }
.ala.up0407 .tb { width: 95%; margin: 20px auto;}
.tb img { display: block;}
.teikiArea .tb, .capsule .tb { border: 1px solid #c81430;}
.onceArea .tb { border: 1px solid #7a7a7a; }
.Premium.up0407 .tb, .ala.up0407 .tb { border: 1px solid #073463; }
.tbB { width: 30%;  margin-left: 29%; margin-right: 0; position: absolute; top: 0;}
.teikiArea .tbB, .capsule .tbB { border-left: 1px dotted #c81430; border-right: 1px dotted #c81430;}
.onceArea .tbB, .ala.up0407 .tbB { border-left: 1px dotted #7a7a7a; border-right: 1px dotted #7a7a7a;}
.Premium.up0407 .tbB { border-left: 1px dotted #073463; border-right: 1px dotted #073463;}


/*------------------------------------ 

Ingredients

------------------------------------ */
.ingredients .st_inner dl dt{ background:#f7f7f7;border-radius:5px; margin-top:15px; padding: 10px; position: relative;}
.ingredients .st_inner dl dt img { display: block; width: 95%; }
.ingredients .st_inner dl dt::after {content: "\f054"; font-family: FontAwesome; position: absolute; top: 50%; right: 10px; margin-top: -12px;}
.ingredients .st_inner dl dt.open::after {content: "\f078"; font-family: FontAwesome;}
.ingredients .st_inner dl dd{padding:15px;}
.ingredients .st_inner {margin-bottom: 40px;}
.ingredients .st_inner dd p { margin-bottom: 20px;}
.ingredients .st_inner.edit0410 dl dt img { display: block; width: 100%; }
.ingredients .st_inner.edit0410 dl dt::after {content: none; /*font-family: FontAwesome; position: absolute; top: 50%; right: 10px; margin-top: -12px;*/}
.ingredients .st_inner.edit0410 dl dt.open::after {content: none; font-family: FontAwesome;}

/*------------------------------------ 

power

------------------------------------ */
.power h2 { width: 100%; position: absolute; top: 13vh; margin: 0;}
.power .txt { width: 100%; position: absolute; top: 35vh; }
.power.up0414 h2 { width: 95%; position: relative; margin: 40px auto; }
.power.up0414 .bodyTxt { width: 95%; position: relative; margin: 120px auto 0 auto;}
.power.up0414 { background-image:url(../../img/mt/img_sec08_01.png); background-repeat: no-repeat; background-size: 100%; padding-bottom: 60px; }


/*------------------------------------ 

History

------------------------------------ */
.history .bodyTxt { z-index: 1; position: relative;}
.chrono { margin-top: -100px; z-index: 0; position: relative;}
.chrono img { margin: 0; padding: 0; display: block;}
.history.up1128 {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #cff5ae 30%, #9be37d 50%, #70c24d 70%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#cff5ae 30%,#9be37d 50%,#70c24d 70%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#cff5ae 30%,#9be37d 50%,#70c24d 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#70c24d',GradientType=0 ); /* IE6-9 */
	
	padding: 20px 0;
}
.history.up1128 .bodyTxt { width: 95%; margin: 0 auto; /*background: rgba(255,255,255,0.7)*/ color: #ffffff;}


/*------------------------------------ 

ALA

------------------------------------ */
.ala .alaPKG { width: 60%; margin: 20px auto;}
.ala { position:relative; z-index: 2;}

.ala.up0407 {
	/*width: 95vw !important; margin: 0 ; padding: 20px 2.5vw 100px 2.5vw;*/ position: relative; z-index: 1; 
	padding: 20px 0 40px 0;
	background-color: #fee054;
	background-image: url(../../img/mt/img_sec14_bg.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.ala.up0407 h2, .ala.up0407 h3, .egao h2 { width: 95%; margin-left: auto; margin-right: auto;}
.ala.up0407 .bodyTxt { color: #ffffff; width: 90%; margin: 0 auto; padding: 15px 2%; background-color: rgba( 203,179,67 , 0.5 );}
.ala.up0407 .bodyTxt p { margin-top: 0;}

.egao {
	/*width: 95vw !important; margin: -20vh 0 0 0 !important; padding: 50vw 2.5vw 20vw 2.5vw; */position: relative; z-index: 1; 
	margin-top: -20vh !important;
	padding: 50vw 0 20vw 0;
	background-color: #073463;
	background-image: url(../../img/mt/img_sec25_bg.png);
	background-size: contain;
	background-repeat: no-repeat;
}
.egao .bodyTxt { color: #ffffff; width: 90%; margin: 0 auto; padding: 10px 2%;}


/*------------------------------------ 

Premium

------------------------------------ */

/*------------------------------------ 

footer

------------------------------------ */
#fNavi { width: 100vw;}
#fNavi ul { width: 100vw; text-align: center;}
#fNavi ul li a { display: block; width: 100vw; padding: 10px 0; font-weight: 700;text-decoration: none; color: #666666; border-top: 1px solid #a3a3a3;}
#fNavi ul li:last-child a { border-bottom: 1px solid #a3a3a3;}

p.copyright { font-size: 0.6rem; text-align: center;}
.gennaiLogo { width: 60%; margin: 10px auto; }
.privacyMark { width: 100px; margin: 20px auto; }

/*------------------------------------ 

Slider

------------------------------------ */
.doc {
	width: 100%;
	margin: 10px auto;
	
	display: flex;
	-webkit-display: flex;
	
	flex-wrap: no-wrap;
	-webkit-flex-wrap: no-wrap;
	
	justify-content: center;
	-webkit-justify-content: center;
	
	align-items: center;
	-webkit-align-items: center;	
}
.doc img {
	border: 1px solid #cccccc;
	width: 90%;
	display: block;
	margin: 0 auto;
}


/*------------------------------------ 

Safety

------------------------------------ */
.topSafety dl dt { width: 20%; }
.topSafety dl dd { width: 75%; }
.topSafety dl {
	margin: 20px auto;
	display: flex;
	-webkit-display: flex;
	
	flex-wrap: no-wrap;
	-webkit-flex-wrap: no-wrap;
	
	justify-content: space-between;
	-webkit-justify-content: space-between;
	
	align-items: flex-start;
	-webkit-align-items: flex-start;	
}
.anshinAnzenMark { width: 95%; margin: 20px auto;
	display: flex;
	-webkit-display: flex;
	
	flex-wrap: no-wrap;
	-webkit-flex-wrap: no-wrap;
	
	justify-content: space-between;
	-webkit-justify-content: space-between;
	
	align-items: flex-start;
	-webkit-align-items: flex-start;	
}
.anshinAnzenMark div { margin: 0 5px;}

/*------------------------------------ 

Teiki

------------------------------------ */
.teiki h2 { margin-bottom: 20px;}
.teiki dl { margin-bottom: 60px;}
.teiki dl dt { width: 25%; }
.teiki dd p { font-size: 0.9em; margin-top: -2vw !important;}

/*------------------------------------ 

ShippingInfo

------------------------------------ */
.shippingInfo h4 { color:#496c16; background-color:#e6f5d0; padding: 2px; margin-top: 20px; margin-bottom: 10px;}
.shippingInfo h4 i { margin-right: 2px;}

/*------------------------------------ 

Ingredients

------------------------------------ */
.component p { font-weight: 200; font-size: 0.9em; width: 95%; margin: 10px auto;}
.ingredients ul { list-style-type: none; width: 100%; background-color: #ffffff; padding-top: 20px;}
.ingredients ul li { font-size: 0.9em; line-height: 1.5em;}
.ingredients ul li sub{bottom:-.2em;}
.ingredients ul li::before { content: '●';}

.component {width: 95%; margin: 20px auto; background-color:rgba(255,246,204,0.70);}
.component dt{/*background: url(../../img/mt/icn_open.png) no-repeat right center;background-size:20px 7px;*/border-radius:4px;font-size:14px;font-weight:bold;line-height:17px;padding:6px 30px 6px 15px;}
.component dt.close{/*background: url(../../img/mt/icn_close.png) no-repeat right center;background-size:20px 7px;*/}
.component dt span{display:inline-block;font-size:11px;line-height:14px;}
/*.component dd{display:none;}*/

.component dd { border-top: 1px dashed #666666; padding-bottom: 5px;}

/*------------------------------------ 

Qa

------------------------------------ */
.qa_inner dl, .st_inner dl{margin:0;padding-top:15px;}
.qa_inner dl dt{font-size:14px;font-weight:bold;line-height:20px;background:#f7f7f7 url(../../img/mt/icn_open.png) no-repeat right center;background-size:26px 9px;border-radius:4px;padding:15px 30px 15px 15px; margin-top:15px;}
.qa_inner dl dt.open{background:#f7f7f7 url(../../img/mt/icn_close.png) no-repeat right center;background-size:26px 9px;}
.qa_inner dl dd{font-size:14px;line-height:23px;padding:15px; /*display:none;*/}

/*------------------------------------ 

Reason

------------------------------------ */
.reason h4 { text-align: center; margin-top: 30px;}
.reason div img { margin: 10px auto;}

/*------------------------------------ 

Story

------------------------------------ */
.story .st_inner dl dt{font-size:1.2em;font-weight:bold;line-height:1.5em;background:#f7f7f7;border-radius:4px;padding:15px; text-indent: -1.0em; padding-left: 2.0em; margin-top: 15px;}
/*.story .st_inner dl dt::before {content: "\f061"; font-family: FontAwesome; margin-right: 5px; }
.story .st_inner dl dt.open::before {content: "\f063"; font-family: FontAwesome; margin-right: 5px;}*/
.story .st_inner dl dd{padding:15px;}
.st_inner {margin-bottom: 40px;}
.story .st_inner dd p { margin-bottom: 20px;}
.story img.sign { display: block;}
.story .st_inner dl.st_list02 dt::before { content: "　"; margin-right: 0; }

/*------------------------------------ 

Gnavi

------------------------------------ */
#gNavi {
	width: 100vw;
	height: 10vh;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	z-index: 9999;
	box-shadow:0px 0px 6px 0px rgba(124,124,124,0.50);
	-moz-box-shadow:0px 0px 6px 0px rgba(124,124,124,0.50);
	-webkit-box-shadow:0px 0px 6px 0px rgba(124,124,124,0.50);
	
	display: flex;
	-webkit-display: flex;
	
	flex-wrap: no-wrap;
	-webkit-flex-wrap: no-wrap;
	
	justify-content: space-around;
	-webkit-justify-content: space-around;
	
	align-items: center;
	-webkit-align-items: center;	
}
#gNavi div {
	width: 15vw;
}

/*------------------------------------ 

Slider

------------------------------------ */
.doc {
	width: 100%;
	margin: 10px auto;
	
	display: flex;
	-webkit-display: flex;
	
	flex-wrap: no-wrap;
	-webkit-flex-wrap: no-wrap;
	
	justify-content: center;
	-webkit-justify-content: center;
	
	align-items: center;
	-webkit-align-items: center;	
}
.doc img {
	border: 1px solid #cccccc;
	width: 90%;
	display: block;
	margin: 0 auto;
}
.item img { box-sizing:border-box; border:1px solid #cccccc; width: 100%; margin: 0 auto; display: block;}

.item { width: 95%; margin: 10px auto; text-align: center;}


/*------------------------------------ 

questionnaire

------------------------------------ */
.chartttl{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5em;
    background: #f7f7f7;
    border-radius: 4px;
    padding: 10px;	
}

/*------------------------------------ 

movie

------------------------------------ */
.mov {
	width: 95%;
	margin: 0 auto;
	padding: 0;
	
	position: relative;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	padding-bottom: 50%;
	padding-top: 69px;
	overflow: visible;
}

.mov iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	border: 1px solid #E1E1E1;
}





.accordion-country dt{
	width: 80%;
	margin: 0 auto;
	padding: 15px 10px;
	border-radius: 10px;
	background-color: #6fa422;
	color: #ffffff;
	text-align: center;
}
.accordion-country dl dt::before {content: "\f0da"; font-family: FontAwesome; margin-right: 5px; }
.accordion-country dl dt.open::before {content: "\f0d7"; font-family: FontAwesome; margin-right: 2px;}