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

/*color palette
#000000
	/* Hex 
	color: #000000 ;
	/* RGB
	color: rgba( 0,0,0 , 1 ) ;

#7e7e7f
	/* Hex
	color: #7e7e7f ;
	/* RGB
	color: rgba( 126,126,127 , 1 ) ;

#72d0eb
	/* Hex
	color: #72d0eb ;
	/* RGB
	color: rgba( 114,208,235 , 1 ) ;
*/


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

General Settings

------------------------------------ */
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:none}ins,mark{background-color:#ff9;color:#000}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}ul{list-style-type:none;}

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: #666666;
	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:-.1em}

.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;}
.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 !important; margin-bottom: 10px !important;}
.fontR { color: rgba(252,36,40,1.00)}
.fontP { color: #db6882}
.fontB { color: #6e96ca;}
.fontOR { color: #f4b200;}
.fontG { color: #46a659;}
.fontLB { color: #72d0eb}
a { color: #72d0eb;}

.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;}
.txtBox { width: 90vw; margin: 0 auto;}
p {
	margin: 10px auto;
	font-size: 1.0rem;
	line-height: 1.75em;
}
.HL { background: linear-gradient(transparent 40%, rgba(255,235,97, 0.7) 40%);}
.UL { border-bottom: 1px solid #7e7e7f; }
.caption {
	font-size: 0.8em;
	line-height: 1.0rem;
	display:inline-block;
}

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

Layout

------------------------------------ */
article#container { width: 100vw; margin: 0 auto; position: relative;}
#container section:nth-child(n+2) { width: 100vw; margin: 60px auto; position: relative; padding: 60px 0;}
section h2 { width: 95vw; margin: 0 auto;}
/*#container section:nth-child(even){
	background: #f5f5f5;
}*/
#container section:nth-child(odd){
	background: #f5f5f5;
}
 #container section.firstView {
	background: #ffffff;
}

div.bnr {width:95vw; margin: -20vw auto 20px auto; padding: 0;}
.flexbox { display: flex;}
.flexbox.jc-center { justify-content: center;}
.flexbox.jc-btw { justify-content: space-between;}
.flexbox.jc-spa { justify-content: space-around;}
.flexbox.ai-start { align-items: flex-start;}
.flexbox.ai-end { align-items: flex-end;}

.bnr_news { width: 90%; margin: 40px auto; }

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

chapternavi

------------------------------------ */
.chapternavi{
    background: rgba(242,242,242,0.7);
    overflow: hidden;
    padding: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    text-align: center;
    height: 86px;
    z-index: 9987;
}
.chapternavi ul.flexbox {
	width: 80vw;
	margin: 0 auto;
	height: 86px;
	
	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: flex-start;
	-webkit-align-items: flex-start;	
}
.chapternavi ul.flexbox li { text-align: center; margin: 0 2px;}
.chapternavi ul.flexbox li img { display: block; max-height: 54px; width: auto; margin: 0 auto;}
.chapternavi ul.flexbox li span { display: inline-block; font-size: 0.6em; text-align: center; margin-top: 10px; color: #666666; margin-bottom: 0; line-height: 1.1em;}


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

MainVisual

------------------------------------ */
#logo { margin: 10px 0 15px 10px; width: 50vw; }
a.head_btn {
    display: block;
	position: absolute;
	top: 5px ; right: 5px;
    padding: 2px 8px ;
    min-width: 76px;
    color: #ffffff;
    line-height: 24px;
    text-align: center;
    background-color: #fff;
    -webkit-border-radius: 4px;
    border-radius: 4px;
	background-color: rgba( 126,126,127 , 0.8 );

    border: 0px none;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
.firstView {
	width: 100vw;
	margin: 20px auto;
	text-align: center;

}
.ttlBox { width: 90%; margin: 0 auto;}
.mvBox { width: 80%; margin: 0 auto;}
.copyBox { width: 90%; margin: 0 auto; margin-top: -20vw;}
.firstView a.buyBnr { width: 90%; display: block; margin: 20px auto; z-index: 999; text-align: center; position: relative;}
.firstView.up0524 .mvBox{ width: 100%;}
.firstView.up0524 .copyBox{ margin-top: -10vw;}

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

haigo

------------------------------------ */
.haigo .txtBox.flexbox p { width: 45vw; }
.haigo .bottle { width: 40vw; }

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

seibun

------------------------------------ */
.seibunBox { width: 95vw; margin: 40px auto;}
.seibunBox > div { margin-top: 40px;}
.seibunBox .seibunImg { width: 48%; margin-right: 5px;}
.seibunBox .flexbox .txtBox { width: 50%;}
.seibunBox h4 { font-size: 1.2em;}
.seibunBox h5 { font-size: 1.0em; font-weight: normal;}

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

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

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

experiment

------------------------------------ */
.experiment .txtBox.bottle { width: 50%; margin: 0 auto;}

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

Buy

------------------------------------ */
.buyBox {
	width: 85%;
	padding: 3vw;
	border-radius: 15vw 15vw 10px 10px;
	margin: 0 auto;
	margin-top: 40px;
	background-color: #ffffff;
}

/*ボックスのボーダー*/
.buyBox { border: 1px solid #7e7e7f;}

/*補足情報*/
.buyInfo { 
	width: 100%;
	margin: 0 auto;
	
	display: flex;
	-webkit-display: flex;
	
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;

	justify-content: space-between;
	-webkit-justify-content: space-between;	
	
	margin-bottom: 10px;
}
.buyInfo p { height: 26px;  border: 1px solid #666666; padding: 2px; margin: 10px 0 0 0; width: 46%; border-radius: 5px; }
.buyInfo p span { font-size: 0.7em; line-height: 1.2em; display: table-cell; text-align: center; vertical-align: middle; width: 46%; height: 26px;}


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

SlideShowBox

------------------------------------ */
.buyBox .image-gallery ul{
	list-style: none outside none;
	padding-left: 0;
	margin: 0;
}
.buyBox .SlideShowBox .item{
	margin: 0 auto 20px auto;
	width: 100%;
}
ul.lSPager.lSGallery { padding: 0 !important;}
ul.lSPager.lSGallery li { margin-right: 0 !important;}

.buyBox .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-radius: 5px;
	border: 2px solid #72d0eb;
}


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

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

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

Qa

------------------------------------ */
.qa_inner {
	width: 95%; margin:  20px auto;
}
.qa_inner dl {margin:10px 0 0 0;padding-top:15px; }
.qa_inner dl dt{font-size:14px;font-weight:bold;line-height:20px;background: url(../img/icn_open.png) no-repeat right center;background-size:26px 9px;border-radius:4px;padding:15px 30px 15px 15px;border: 2px solid #e6e6e6; border-radius:4px;}
.qa_inner dl dt.open{background: url(../img/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;}

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

package

------------------------------------ */
.package .txtBox img { border: 2px solid #e6e6e6;}

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

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

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

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


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

お知らせ

------------------------------------ */
.news2018 {
	width: 90% ;
	margin: 0 auto 100px auto !important;
	background-color: #f2b3b3; padding: 20px 10px;
	border-radius: 10px;
	color: #000000;
}
.news2018.Pall { margin-top: 0 !important;}
.news2018 dt {
	cursor: pointer;
	position: relative;
	width: 95%;
	margin: 0 auto;
}/*
.news2018 dt::after {
	content:"\f106";
	font-family: FontAwesome;
	color: #ffffff;
	font-size: 1.4em;
	position: absolute;
	right: -2%;
	top: 0; bottom: 0;
	margin: auto;
	height: 1.4em;
}
.news2018 dt.open::after {
	content:"\f107";
}*/
.news2018 dd {
	margin: 20px auto;
	padding: 20px;
}
.news2018 dd a {
	color: #ffffff;
}