@charset "utf-8";

/* 共通 ------------ */
.inner,.w_inner { width: 90%; margin: 0 auto; }

.imgTtl { text-align: center; }
.imgTtl img { width: 100%; }
.waveTtl { margin-bottom: 1.5em; }

.bg_castella { background: url(../img/bg_castella.jpg); }

.wave { position: relative; padding:100px 0 70px; }
.wave::before,.wave::after { content:""; position: absolute; left: 0; right: 0; width: 100%; height: 90px; background: url("../img/wave_y.png") no-repeat center /cover; }

.wave::before { top:-80px; }
.wave::after { bottom:-80px; background-image: url("../img/wave_y2.png"); }

.conTbl { width: 100%; margin: 0 auto; border: 1px solid #c5c5c5; background: #ffffff; }
.conTbl > tbody > tr:not(:last-child) { border-bottom: 1px solid #c5c5c5; }
.conTbl th { padding: 1em; background: #eee; }
.conTbl td { padding: 1em; }

.linkBtn { margin: 40px auto 0; }
.linkBtn a { position: relative;
    display: inline-block;
        min-width: 260px;
    padding: 1em;
    border-radius: 50px;
    text-align: center;
    font-weight: bold;color: #fff;
    text-decoration: none;
    background: #56331f;border: 2px solid #56331f;  }
.linkBtn a span {     position: relative;
    padding-left: 2em; }

.linkBtn a span::before,.linkBtn a span::after { content: "";
    position: absolute; }
.linkBtn a span::before {     top: 50%;
    left: 0;
    width: 23px;
    height: 23px;
    margin-top: -12px;
    border-radius: 50%;
    background-color: #fff; }
.linkBtn a span::after { top: 50%;
    left:7px;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: #56331f;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }

.linkBtn a:hover { background: #fff; color:#56331f;   }
.linkBtn a:hover span::before {  background-color: #56331f; }
.linkBtn a:hover span::after { border-color: #fff; }


/* フローティング ------------ */
.floBox { z-index: 999; position: fixed; right: 0; }
.floBox * { padding: 0; margin: 0; }

/* MV ------------ */
#main { position: relative; background: url("../img/bg_brick.jpg") center / cover; }
#main .catch { padding: 50px 0 0; text-align:center; }
#main .catch span { padding: 60px 0 100px; z-index: 0; display: inline-block; position: relative ; }
#main .catch span::before { content: ""; z-index: -1;
  position: absolute; top: 0; left: -70px; 
  background: url("../img/illust_clock.png") no-repeat; 
  width: 113px; height: 113px; }
#main .imgBox {padding-bottom: 80px; background: url("../img/bg_wood.jpg") center / cover; }
#main .imgBox figure { width: 48%; margin-top: -50px; }



/* お悩み ------------ */
#onayami { padding: 80px 0 160px; 
  background-size: auto auto; 
  background-color: rgba(241, 238, 221, 1);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(244, 241, 228, 1) 8px, rgba(244, 241, 228, 1) 15px ); 
}
#onayami h2 { margin-bottom: 2em; }
[class^="comic-"] { z-index: 0; position: relative; width:100%; background: #fff; }
[class^="comic-"] h3 { padding: 40px; background: #ddd6ae; }
[class^="comic-"] .comic { padding:20px; background: #fff; }
[class^="comic-"] .btn { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);
  width: 60%; margin: 0 auto; text-align: center; }
[class^="comic-"] .btn a { display: block; padding: .5em 0 1em; background: #fff; border: 2px solid #00a896; border-radius: 100px; }
[class^="comic-"] .btn a span { position: relative; padding-right: 1.5em;}
[class^="comic-"] .btn a span::before { content: ""; position: absolute; top: 70%; right: 0;
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #00a896; transform: translateY(-50%); }

.comic-hitomi .btn a { border-color: #ffa000; }
.comic-hitomi .btn a span::before { border-top-color: #ffa000; }


/* 商品紹介 キオクカステラ ------------ */
#product_kioku { padding-bottom: 80px; }
#product_kioku .imgTtl img { margin-top: -80px; }
#product_kioku .imgTtl { margin-bottom: 70px; }

.pointBox { margin-bottom: 100px!important; }
.pointBox > li { margin-bottom: 50px; }
.pointBox .txt h4 { z-index: 0; position: relative; margin-bottom: 1em; font-size:2em; color: #00a896; }
.pointBox .txt h4 span { display: block; }
/*.pointBox .txt h4::before { z-index: -1; content: ""; 
  position: absolute; top: 0; left: -30px;
  width: 50px; height: 50px; background: #fdd528;
  }*/
.pointBox .txt p { padding-left: 1.5em; margin: 0 auto 1em; font-weight: 400; color: #333333; letter-spacing: .05em; }
.pointBox .img { text-align: center; }

.nasa { z-index: 0; position: relative; margin-bottom: 50px!important; background: #fff; border: 1px solid #00a896; }
.nasa::before { z-index: 1; content: ""; position: absolute; left: -50px; bottom: -30px;
  background: url("../img/illust_hakase2.png") no-repeat; width: 144px; height: 169px;
  }
.nasa::after { z-index: 1; content: ""; position: absolute; right: -110px; bottom: -50px;
  background: url("../img/illust_family.png") no-repeat; width: 194px; height: 178px;
  }

.nasa > .img { text-align: center; }




/* 商品紹介 ひとみカステラ ------------ */
#product_hitomi { padding-bottom: 80px; }
#product_hitomi .imgTtl { margin-bottom: 70px; }
#product_hitomi .pointBox .txt h4 { color: #ffa000; }


/* 初回購入限定 ------------ */
#purchase { background: #fdd528; }
.ribbonBox { position: relative; padding: 30px 20px 20px; border: 3px solid #eb6153; border-radius: 20px; background: #fff; }
.ribbonTtl { position: absolute; top: -60px; left: 50%;transform: translateX(-50%);width: 100%; }
.ribbonBox .txt { padding-top: 10px; }
.ribbonBox button { width: 100%; margin: 20px auto 0; padding: 0; }


/* お客様の声 ------------ */
#voice { margin-top: 160px; }
#voice h2 { margin-bottom: 2em; }
.voiceList > li { position: relative; width: 32%; margin: 60px 0 30px; padding: 60px 20px 20px; background: #fff; border-radius: 20px; }
.voiceList > li .ttl { font-weight: bold; font-size: 1.12em; text-align: center; line-height: 1.5; }
.voiceList > li figure { position: absolute; top: -45px; left: 50%; width: 100px; transform: translateX(-50%); }


/* よくある質問 ------------ */
#faq { padding: 80px 0; }
#faq h2 { margin-bottom: 2em; }
.faqList>div:first-child::before { background-image: url(../img/q1.png) ; }
.faqList>div:nth-child(2)::before { background-image: url(../img/q2.png) ; }
.faqList>div:nth-child(3)::before { background-image: url(../img/q3.png) ; }


/* 詳細 ------------ */
#details { padding: 40px 0 100px; background: #fff; }
.deList { margin: 50px auto; font-size: .75em; color: #777;}
.deList > li { margin-bottom: 1em; }


/* footer ------------ */
#footer { position: relative; padding: 20px; background: #ffe862; }
#footer::before { content: ""; position: absolute; left: 0; right: 0; top: -50px;
background: url("../img/illust_footer.png") no-repeat center /cover; 
width: 100%; height: 50px; }

#copy { color: #585858; font-size: .75em; letter-spacing: .1em; }


/* dropdown */
.dropdown>div { position: relative; padding-left: 60px; margin-bottom:30px; background:#fff; }
.dropdown>div::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; background-repeat: no-repeat; }

.dropdown>div>dt,.dropdown>div>dd { position:relative; }
.dropdown>div>dt { margin-bottom:1em; padding: .8em 1.5em; font-size:1.1em; font-weight:400; }
.dropdown>div>dt:hover { cursor:pointer; }
.dropdown>div>dt::after { content:"";
  position:absolute; top:50%; right:2em;
  width:10px; height:10px;
  border-top:2px solid #fcb534; border-right:2px solid #fcb534;
  transform:rotate(135deg) translate(-50%,0);
  -webkit-transform:rotate(135deg) translate(-50%,0);
  -ms-transition:all .5s; transition:all .5s;
}

.dropdown>div>dt.active { border-bottom:1px dashed #eee; }
.dropdown>div>dt.active::after { transform:rotate(-45deg); }
.dropdown>div>dd { display:none; padding:1em 2em; }


.notfound { padding: 60px 0 150px; }
.notfound .con_ttl { font-size: 1.2em; }
.notfound .btn_continue a { display: inline-block; }




/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  
  .wave { padding: 150px 0 80px; }
  
  .conTbl th { border-right: 1px solid #c5c5c5; }

  
  #main .catch { padding: 40px 0 120px; }
  
  
  #onayami h2 { margin-bottom: 80px; }
  
  
  [class^="comic-"] {  width:48%; }
  
  
  
  .pointBox > li { display: flex; -webkit-display: flex; justify-content: space-between; -webkit-justify-content: space-between; }
  .pointBox > li > * { width: 49%; }
  .pointBox > li:nth-child(3) > .txt { width: 64%; }
  .pointBox > li:nth-child(3) > .img { width: 35%; }
  
  .pointBox > li:nth-child(2n) > .txt { order: 2; }
  
  .nasa > * { width: 50%; }
  .nasa > .img { position: relative; top: -30px; }
  .nasa > .txt { padding: 20px 30px 0 0; }
  
  
  .ribbonBox {  padding:40px 30px 30px; }
  .ribbonBox .img { width: 35%; }
  .ribbonBox .txt { width: 60%; }
  .ribbonBox .txt p { margin-bottom: 1.3em; }
  .ribbonBox .lead { margin: 1em 0 2.5em;}
  .ribbonBox .detail { margin-bottom: 1.2em; gap: 1em; align-items: center;}
  .ribbonBox .detail p { margin: 0; line-height: 1;}
  .ribbonBox .btn_online { margin-top: 2em;}
  
  
  
  
  
  #details { padding:80px 0 250px; }
  
  
  #footer { padding: 40px 0; }
  #footer::before { top: -180px; height: 180px; }
  
  
  .dropdown>div>dt {height: 60px;} 
  
  
  .notfound { padding: 60px 0 250px; }
  .notfound .con_ttl { font-size: 1.5em; }

}

/* 960px以上(PC) */
@media screen and (min-width: 960px) {
  
  .floBox { top: 30%; transform: translateY(-50%);  }
  
  [class^="comic-"]::before { z-index: -1; content: url("../img/illust_woman.png"); position: absolute; left: 0; top: -150px; }
  [class^="comic-"] h3 { padding: 40px 0; }
  [class^="comic-"] .comic { padding: 40px 0 20px;}
  .comic-hitomi::before { content: url("../img/illust_man.png"); right: 0; left: auto; }

}


/* 1000px以上(PC) */
@media screen and (min-width: 1000px) {
  .w_inner { width: 1100px; margin: 0 auto; }
  .inner { width: 1000px; margin: 0 auto; }
  
}



/* ================================================================
  タブレット
=================================================================== */
/* 1024以下 (タブレット横以下) */
@media screen and (max-width: 1024px) {


}

/* 959以下 (タブレット以下) */
@media screen and (max-width: 959px) {
  .floBox { bottom: 50px; }
  
  [class^="comic-"] h3 img { height: 50px; }
  [class^="comic-"] .comic img {height: 370px;  }


}

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  
  .imgTtl img { transform: scale(1.5); }
  .waveTtl img { height: 60px; }
  .txtTtl img { height: 40px; }
  
  .wave::before, .wave::after { background-size: 100%; }
  .wave::before { top: -58px; }
  .wave::after { bottom: -58px; }
  
  .conTbl th { border-bottom: 1px solid #c5c5c5; }
  .conTbl th,.conTbl td { display: block; width: 100%; padding: .5em; }
  
  
  .floBox { bottom: 0; left: 0; right: 0; }
  .floBox .flobtn { display: block;
    width: 96%; margin: 0 auto -2px; padding: .5em 0 1em;
    text-decoration: none; text-align: center;
    color: #fff;
    border: 2px solid #008073;
    border-top-right-radius: 10px; border-top-left-radius: 10px;
    font-size: 1.2em; font-weight: 400; letter-spacing: .1em;
    background: #00a896; }
  .floBox .flobtn img { height: 30px; }
  
  #main .catch { width: 90%; margin: 0 auto; padding: 80px 0 0; }
  #main .catch span { padding: 80px 0 120px; }
  #main .catch span::before { left: 50%; background-size: 80px; width: 80px; height: 80px; transform: translateX(-50%);}
  #main .imgBox .inner { width: 100%; }
  
  #onayami { padding: 80px 0 120px; }
  [class^="comic-"] { margin-bottom: 80px; }
  
  #product_kioku { padding-bottom: 110px; }
  .pointBox .txt p { padding-left: 1em; letter-spacing: 0; font-size: .95em;}
  
  .nasa { padding:20px 20px 80px; }
  .nasa::before { bottom: -30px; left: 0; width: 100px; height: 118px; background-size: 100px; }
  .nasa::after { right: -10px;bottom:-20px;  width: 110px; height: 102px; background-size: 110px;}
  
  #product_hitomi { padding-bottom: 50px; }
  
  .ribbonTtl { top: -30px; transform: translateX(-50%) scale(1.1); }
  
  #voice { margin-top: 100px; }
  .voiceList { width: 100%; margin: 0 auto; }
  .voiceList > li { width: 100%; margin: 40px 0 30px; padding: 44px 20px 20px; }
  .voiceList > li figure { top: -45px; width: 90px; text-align: center; }
  
  
  #details { padding: 60px 0 80px; }
  
  #footer { padding-bottom: 80px; }
  #footer::before { background-size: 100%; }

  .ribbonBox .lead { margin: 0.5em 0 2.2em;}
  .ribbonBox .lead img { width: 85%;}
  .ribbonBox .img { text-align: center;}
  .ribbonBox .img img { width: 85%;}
  .ribbonBox .detail { flex-direction: column-reverse; gap: 0.7em; margin-bottom: 1em;}
  .ribbonBox .detail p { margin: 0;}
  .ribbonBox .detail p:nth-child(1) img { width: 77%;}
  .ribbonBox .detail p:nth-child(2) img { width: 60%;}
  
  
  /*dropdown*/
  .dropdown>div { margin-bottom:20px; }
  .dropdown>div::before { height: 100%; background-color: #fcc900; }
  
  .dropdown>div>dt { font-weight: 500; letter-spacing: .05em; line-height: 1.5; padding: .8em 2.5em .8em 1em; }
  .dropdown>div>dt::after { right:1.5em; }
  .dropdown>div>dd { padding:0 1.5em 1em; }
  
  
  
}