@charset "utf-8";

/*-----------------------------------------------------------------
Reset
-----------------------------------------------------------------*/

html { overflow-y: scroll; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h3,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,nav { margin:0; padding:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:normal; }
table {	border-collapse: collapse; border-spacing: 0; }
img,abbr,acronym,fieldset { border: 0; }
ul,li { list-style:none; text-align: left;	}
q:before,q:after { content:''; }
abbr,acronym { border:0; }

/*-----------------------------------------------------------------
Base
-----------------------------------------------------------------*/

/*for IE 5.5-7*/
div{ zoom:1; }
/*for modern browser*/
* html div,
* html .clearer { display: inline-block; }
* { box-sizing: border-box; }
html { font-size: 62.5%;height: 100%; word-break: break-word;-webkit-appearance: none;-webkit-tap-highlight-color: transparent;}
body { font-size: 1rem; color: #111; text-align: center; font-family:  "Noto Sans JP",system-ui, -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.8;letter-spacing: 0.08rem;  }
a:link,a:visited,a:active,a:focus { color:#111; text-decoration:none; }
a:hover { text-decoration:underline; } 
img { width: 100%; vertical-align: bottom; }

body::before { background: url('https://www.ce-parfait.com/kombucha/images/product/0_bg_pc.jpg') no-repeat center center; background-size: cover; display: block; position: fixed; top: 0; left: 0px; width: 100%; height: 100%; content: ""; z-index: -1; will-change: transform;}


.section_wrap { max-width: 700px; margin: 0 auto; margin-bottom:20%; }

.txtSS{ font-size: 7px; margin-left: -6px; }
.txtS{ font-size: 65%; }
.txtRED{  color: #ff3333; }
	
#logo { height: 100dvh; height: calc(var(--dvh, 1dvh) * 100); margin:0 auto; display: flex; align-items: center; justify-content: center; }
#logo img { width:300px; }


.bgWrap { background-position: center; background-repeat: no-repeat; background-size: cover; padding: 10%; }


.tt_img{ width: 560px; margin: 0 auto; }
.midashi { font-size: 2.6em; font-weight: 700; }
.message { font-size: 2em; margin-top: 6%;}

#order .teikiwrap  { max-width:700px; background-color: #d9b88b; padding: 2%; }
#order .teikiwrap .inner { background-color: #fff; padding-bottom:4%; }
#order .tanpinwrap { max-width:600px; margin: 0 auto; margin-top: 6%; }
#order .tanpinwrap img { margin-top: 6%; }


#order .juyo_box { max-width: 92%; margin: 0 auto; font-size: 1.4em; margin-top: 1em;}
#order .juyo_box .juyo_btn { background-color: #e6e9e1; padding:  0.3em 0.5em; text-align: center; cursor: pointer; }
#order .juyo_box .juyo_txt { display: none; background-color: #edf0e6; opacity:0.8; padding: 1em 2em; text-align: left; text-align: justify; word-break: break-all; }



#section1 { margin-bottom: 20%; max-width: 100%; background-color:#FFF; background-image:url(../images/section1_bg.jpg) ; background-repeat:no-repeat; background-position:left bottom; background-size:cover;  }
#section1 .inner {  max-width: 660px; margin: 0 auto;  padding: 8% 0; }

#section2 { max-width: 700px; margin: 0 auto; margin-bottom: 20%; } 
#section2 .midashi { background:rgba(255,255,255,0.7); } 


#section3 .inner{ background:rgba(255,255,255,0.7); margin: 0 auto; max-width:720px; margin-bottom: 20%; padding: 8%; }

#section4 { width:100%; margin:0 auto; background:#FFCC00; padding:8%; }	
#section4 p{ margin: 0 auto; text-align: center; font-size: 2em;}
#section4 .inner { max-width: 700px; margin: 0 auto; }

#section4 .onlysp{ display: none; }
#section4 .onlypc{ margin-bottom: 20%; }
#section4 span{ display:inline-block; }

.col_2{ width: 100%; display: flex; flex-wrap: wrap; align-items: center;}
.col_2 > *{ width: calc( 50% - 10px ) ;  margin-right: 20px;}
.col_2 > *:nth-child(2n){ margin-right: auto;}
.col_2 > * > *{ position: relative; overflow: hidden }
@media screen and (max-width: 768px) {
    .col_2 > *{ width: 100%; margin-right: auto; }
    #section4 .onlypc{display: none; }
    #section4 .onlysp{display:block;}
}

#section5 { background-color:#FFF; background-image:url(../images/section5_ttbg.png) ; background-repeat:no-repeat; background-position:left top; background-size:50%;  }
#section5 .inner { max-width:660px; margin: 0 auto; padding-bottom: 6%; margin-bottom: 20%;}
#section5 img{ margin-bottom:6%; }
#section5 p { font-size:1.8em; }

#section6 { background-color: #fff; margin-bottom: 20%; }

#section7{ background-color: #f5e6d1; }
#section7 p{ font-size: 2em; padding: 4%; }
#section7_1,#section7_2 { margin-top: 6%;}


#section8 { background-color: #fff; margin-bottom: 20%; }

#section9 { background-color: #111; }


#section9,#section10 { margin-bottom: 20%; }

#section11 { background:rgba(255,255,255,0.7); margin-bottom: 20%; }
#section11 .subtt { margin-bottom: 6%; }
#section11 .twobox { width: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.8em; margin-bottom: 8%; }
#section11 .twobox .imgbox{ width: 40%; flex-grow: 1; }
#section11 .twobox .txtbox{ flex-grow: 0; }
@media screen and (max-width:768px) { 
#section11 .twobox { font-size: 1.6em; }
}




#section12 { margin-bottom: 20%; }


#chuushaku { background:rgba(255,255,255,0.7);  margin-bottom: 8%; padding: 2em; text-align: left; }

/* ==========================
モーダル（ポップアップ）
========================== */
.js_modalWrap {
display: none;
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overscroll-behavior-y: contain; /* スクロール可能な要素に付与する必要有り */
}
.js_modalBG {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
.js_modalContInner {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 100%;
background-color: #fff;
max-height: 600px;
padding: 3em;
}
.js_modalCont {
overflow-y: scroll;
overflow-x: hidden;
max-height: 520px;
}
.js_modalCont > * + * {
margin-top: 10px;
}
.js_modalCont img{
width: 300px;
}
.js_modalCont .box{
position: relative;
}
.js_modalCont .capCont{
width: 100%;
background-color: rgba(256, 256, 256, 0.7);
padding-top:3em;
bottom: 0;
text-align: left;
}
.js_modalCont .name{ font-size: 1.8em; margin-bottom: 0.5em; font-weight: bold; }
.js_modalCont .desc{ font-size: 1.6em; }

.js_modalContInner > .js_modalClose + * {
margin-top: 0;
}
.js_modalClose {
display: block;
position: absolute;
top: 10.5px;
right: 10.5px;
width: 20px;
height: 20px;
overflow: hidden;
cursor: pointer;
z-index: 1001;
}
.js_modalClose::before,
.js_modalClose::after {
content: "";
background-color: #222;
position: absolute;
top: -5px;
right: 10px;
width: 1px;
height: 30px;
}
.js_modalClose::before {
transform: rotate(45deg);
}
.js_modalClose::after {
transform: rotate(-45deg);
}

/* ==========================
コンテンツの中身
.ly_inner {
width: 100%;
max-width: 1080px;
margin: 100px auto;
padding: 40px;
background-color: #ccc;
}
.ly_inner h2 {
font-size: 150%;
font-weight: bold;
margin-bottom: 30px;
}
.md_textblock > * + * {
margin-top: 10px;
}
.md_textblock > * + .js_modalBtnWrap {
margin-top: 20px;
}
.md_linkBtnWrap {
max-width: 100%;
margin: 10px auto 0;
text-align: center;
}
.md_linkBtnCont {
display: block;
color: #000;
border: 1px solid #000;
padding: 15px 5px;
transition: 0.3s;
}
.md_linkBtnCont:hover,
.md_linkBtnCont:focus {
color: #fff;
background-color: #000;
}
========================== */



#section6 .inner,#section8 .inner,#section11 .inner { padding: 6%; }



#gaiyo { background-color: #f5e6d1; max-width: 700px; margin: 0 auto;  font-size:1.6em;}
.gaiyo__box dt { width: 92%; height: 2em; margin: 0 auto; background-color: #fff; text-align: center; line-height: 2em; }
.gaiyo__box dd { width: 90%; margin: 0 auto; text-align: center; padding: 1em 0; }
.gaiyo__box dd:nth-of-type(2) { text-align: left; }
.gaiyo__box dd:nth-of-type(5) { padding-bottom: 2em; }
	
#footer_kom { background-color: #f5e6d1; max-width: 700px; margin: 0 auto; margin-bottom: 20%;  font-size:1.6em;}
.footer_kom__box dt { width: 92%; height: 2em; margin: 0 auto; background-color: #fff; text-align: center; line-height: 2em; }
.footer_kom__box dd { width: 90%; margin: 0 auto; text-align: center; padding: 1em 0; }
.footer_kom__box dd:nth-of-type(2) { text-align: left; }
.footer_kom__box dd:nth-of-type(5) { padding-bottom: 2em; }	

.footer__link {background-color: #ebcfaa;  padding: 0 0 3em 0;  font-family: 'Noto+Sans+JP', sans-serif;  font-style: normal;  color: #fff;  font-weight: 200;  line-height: 2.5em;  font-size: 0.9em;}
.footer__link img {  width: 100%;  vertical-align: bottom;}
.footer__link  li:first-of-type{padding:2em 0 0 2em;}
.footer__link  li{padding:0 0 0 2em;}
/* ** */
@media screen and (max-width:768px) { /*　画面幅767px以下 */
/* #footerWrap
-----------------------------------------------------------------*/


body { font-size: 65%; }
ruby > rt { font-size:7px; }

.txtSS{ font-size: 5px; }

#logo img { width:150px; }

.tt_img{ width: 80%; }


#section1 .inner {  padding: 16% 4%; }

#order .juyo_box { max-width: 92%;font-size: 1.2em; }
#order .tanpinwrap img { max-width: 80%; }

#section3 img{ margin: 0 auto; }
#section3 .inner{ background:rgba(255,255,255,0.7); margin: 0 auto; max-width:94%; margin-bottom: 20%; padding: 8% 4%; }


#section4 { padding:8% 4%; }	
#section4 img{ margin-bottom:6%; }

#section5 p { padding: 0 4%; }

#section6 .inner,#section8 .inner,#section11 .inner { padding: 4%; }

#chuushaku { max-width: 80%; background:rgba(255,255,255,0.7);  margin-bottom: 8%; padding: 2em; text-align: left; }


.js_modalCont img{ width: 280px; }