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

	naeiro graphica

	FILE NAME: style.css
	AUTHOR: naeiro graphica sana*
	
	UPDATE: 2024/07/01

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

/*==========================================================
1:Common Style
==========================================================*/
* {	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { 
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight:normal;
vertical-align: baseline; background: transparent; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { width: 100%; min-width: 320px; line-height: 1.5; font-size:16px; -webkit-text-size-adjust: 100%;}

header, footer, nav, section, article, figure, aside, main { display: block;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;  margin: 0; padding: 0; font-weight:normal;}
p, ul, ol, dl, table, pre, dl ,li , dt, dd { margin: 0; padding: 0; }
ul, ol{ list-style:none;}
table { font-size: 100%; padding: 0; border-collapse: collapse; border-spacing: 0;}
th { font-weight: normal;}
th, td { padding: 0; text-align: left;}
blockquote { border-left: #eee solid 5px; margin: 0.5em 0 0.5em 1em; padding: 0 0 0 1em;}
pre { font-size: 0.9em; max-width: 100%; overflow: auto; padding: 0.5em;}
abbr, acronym { border-bottom: 1px dotted #666; cursor: help;}
sup, sub { font-size:0.7em; height: 0; line-height: 0; position: relative; vertical-align: baseline;}
sup { bottom: 1ex;}
sub { top: .5ex;}
embed, iframe, object { max-width: 100%;}
hr{ border: 0; height: 0; margin: 0; padding: 0; border-top: 1px dashed rgba(0, 0, 0, 0.2);}

video,
img { border: none;max-width: 100%; height: auto; vertical-align: top;}
table img { }

/*LINK*/
#menuBTN{ -webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease; text-decoration:none;}
a img { border: none;}
a{ color:#3A7CA7;}
a,a img {-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
/*HOVER*/
a:hover img, a:hover{opacity:0.9; color: #777;}

/*form*/
/*

*/
/*==========================================================
2:Base Style
==========================================================*/
body{color:#333; background:rgba(232,222,180,.2);}
*{font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}

.PC{display:block;}
.SP{display:none;}

main{ width: 100%; margin: 0 auto;}
article{max-width: 700px; margin: 0 auto; text-align: center; box-shadow: 0px 0px 20px #aaa; background: #fff;}
.BTN{ width: 80%; margin: 50px auto 80px;}

video{ width: 96%; height: auto; margin: 30px auto 50px;}
.GIFanime{ margin: 30px 0; width: 80%; height: auto;}

@media screen and (max-width:1024px) {
.PC{display:none;}
.SP{display:block;}

article{max-width: 100%;width: 100%;}
*{font-size: 18px;}
video{ width: 90%; height: auto; margin: 20px auto 30px;}
.BTN{ width: 80%; margin: 30px auto;}

/**/}
/*---*/
.buy_wrapper {
  position: relative;
}

.buy_wrapper a {
  animation: glow 0.5s infinite alternate;
  position: absolute;
  display: block;
  width: 100%;
}

.buy_wrapper a:hover{
    transform: scale(1.1);
}
/*
.buy_wrapper a img{
  width: 50%;
}*/

.buy_wrapper .inner_01 {
  width: 50%;
}
.buy_wrapper .inner_02 {
  width: 85%;
}

.care_wrapper {
    position: relative;
    margin: auto;
    width: 100%;
    text-align: center;
}
.care_wrapper .inbox{
  position: absolute;
    display: flex;
    width: 95%;
    margin: auto;
    text-align: center;
    justify-content:flex-end;
    flex-wrap: wrap;
    top:32%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.care_wrapper .inbox img {
    display: block;
    width: 45%;
    margin: auto;
}

#Ingredient{
    background-image: url('../images/bg_03.png');
    /*background-color: #FAF0EA;*/
    background-size: cover; 
    background-repeat: no-repeat;
    background-position:bottom; 
    max-width: 1080px;
}

#Ingredient h3{
    font-size: 24px;
    font-weight: 600;
    width: 80%;
    box-sizing: border-box;
    margin: auto;
    text-align: center;
    padding: 1em 0;
}
#Ingredient p{
    width: 80%;
    text-align: left;
    margin: auto;
    box-sizing: border-box;
    padding-bottom: 2.5em;
}

@media screen and (max-width:767px) {
    #Ingredient{
        width: 100%;
    }

    #Ingredient h3{
    font-size: 16px;
    }

    #Ingredient p{
        font-size: 12px;
        line-height: 1.2;
        width: 85%;

    }
}
/*---*/

/*FAQ========================================*/
.FAQ{ margin: 0px auto; padding: 80px 0; text-align: left;background: rgba(101,146,132,0.10) ;}
.FAQ h2{ text-align:center; font-size: 30px;color: #7e5626; font-weight: bold; padding: 0 0 30px 0 ;}
.FAQ dl {position: relative;margin: 10px auto; max-width: 640px; cursor: pointer; font-size: 18px;}
.FAQ dl:first-child{margin-top: 0;}

.FAQ dl dt{border-top: 1px solid #eee;}
.FAQ dl dt::after{position: absolute; top: 27px;right: 26px;
display: block;width: 7px; height: 7px; margin: auto;content: '';
transform: rotate(135deg); border-top: 2px solid #000;border-right: 2px solid #000;}
.FAQ dl dt.OP::after{transform: rotate(-45deg);}
.FAQ dl dt{background:rgba(255,255,255,0.80); border-radius: 20px 20px 0 0;
position: relative;margin: 0;padding: 20px 20px 20px 60px;font-weight: bold;}
.FAQ dl dt::before{font-size: 24px;line-height: 1;
position: absolute; top: 20px;left: 20px;display: block; content: 'Q.'; color: #23746a;}

.FAQ dl dd::before{ font-size: 24px; position: absolute;line-height: 1.5;
left: 20px; top:15px;display: block;content: 'A.';font-weight: bold; color: #23746a;}
.FAQ dl dd{background:rgba(255,255,255,0.50);border-radius:0 0 20px 20px;line-height: 1.5;
position: relative;margin: 0; padding: 20px 20px 20px 60px;font-weight: bold;font-size: 16px;
border-bottom: 1px solid #aaa;}

@media screen and (max-width:1024px) {
.FAQ dl{margin: 10px auto;width: 90%; max-width: none;text-align: left;font-size: 22px;}
.FAQ dl dt:after{top: 20px;right: 15px;width: 7px;height: 7px;}
.FAQ dl dt {padding: 16px 39px 16px 50px;font-size: 14px; line-height: 1.4;}
.FAQ dl dt::before {font-size: 14px;top: 20px;left: 20px;}
.FAQ dl dd::before{font-size: 14px;left: 20px;margin-top: 5px;}
.FAQ dl dd {margin: 0;padding: 16px 16px 16px 50px;line-height: 1.4;}

/**/}

/*DATA========================================*/
.DATA{ margin: 0px auto; background: rgba(240,240,240,0.8); padding: 40px 2em; text-align: left; line-height: 1.5;}
.DATA h3{  text-align: center; font-size: 1.8em; padding: 1em; letter-spacing: 0.2em;}
.DATA p{line-height: 1.7; text-align: justify; font-size: 0.8em}

/*footer========================================*/
footer{ background: #666; color: #fff; }
footer h1{ font-size: 26px; padding: 1em; line-height: 1.3;}

footer a{ color:#fff; text-decoration: none;}
footer a:hover{ color:#000; text-decoration: none;}

.address { margin: 0 auto 1em; font-size: 0.8em; line-height: 1.8;}
.copyright{ background: #888; padding: 1em; margin: 10px 0 0 0; font-size: 0.8em;}

footer ul.SNS { margin: 10px auto 10px;}
footer ul.SNS .SNSfb {}
footer ul { margin: 0 auto 10px;}
footer ul li{ display: inline-block;}
footer ul li a{ font-size: 0.8em; padding: 0.5em;}