﻿@charset "utf-8";
/* CSS Document */

:root{
--tsx01:-0.1em 0 0.02em #fff,-0.05em -0.05em 0.02em #fff,0 -0.1em 0.02em #fff,0.05em -0.05em 0.02em #fff,0.1em 0 0.02em #fff,0.05em 0.05em 0.02em #fff,0.1em 0 0.02em #fff,0.05em 0.05em 0.02em #fff,0 0.1em 0.02em #fff,-0.05em 0.05em 0.02em #fff,0 0.2em #d5cb97;
--tsx02:-0.075em 0 0.02em #fff,-0.05em -0.05em 0em #fff,0 -0.075em 0.02em #fff,0.05em -0.05em 0em #fff,0.075em 0 0.02em #fff,0.05em 0.05em 0em #fff,0.075em 0 0.02em #fff,0.05em 0.05em 0em #fff,0 0.075em 0.02em #fff,-0.05em 0.05em 0em #fff,0 0.135em #d5cb97;
}
body[data-device="pc"] nav[data-nav="menu"]{display:none;}
main .wrap#choco-sal{display:block;max-width:unset;width:clamp(100px,100%,100svw);background:#ffffcd;}
main .wrap#choco-sal .lpMV>*{width:clamp(100px,100%,1600px);display:block;margin:0 auto;}
main .wrap#choco-sal .lpCnts{margin:0 auto;}
main .wrap#choco-sal .lpCnts{width:clamp(80px,80svw,1000px);}

/*--------------
#cosalParts
---------------*/

#choco-sal div.cosalHD{position:relative;z-index:2;}
#choco-sal div.cosalHD>p{position:relative;z-index:1;background:url(popmsg_bg.png) no-repeat  0 0 / 100% 100%;font-size:0.7em;line-height:1.2;padding:0 0.6em 0.2em 0.3em;text-align:center;color:#5b2339;}
#choco-sal div.cosalHD::before{z-index:1;background:url(popmsg_01.png) no-repeat 0 0 / 100% auto;height:0.38em;content:"";display:block;margin-bottom:-0.03em;}
#choco-sal div.cosalHD::after{z-index:1;background:url(popmsg_02.png) no-repeat 0 0 / 100% auto;height:1.25em;content:"";display:block;margin-bottom:-0.1em;}

/*--------------
#cosal02
---------------*/
#cosal02{padding-top:5vw;}
#cosal02>div{display:block;font:800 clamp(10px,10vw,120px) / 1 'LINE Seed JP';}
#cosal02>div.cosalBox{background:#fff;border:0;border-radius:0.1em;box-shadow:0 0 0 0.1em #5b2339;padding:0.05em;box-sizing:content-box;margin:0.1em;z-index:3;position:relative;}

section#cosal02a{position:relative;display:flex;flex-flow:column wrap;justify-content:center;align-items:center;height:3em;color:#583902;}
section#cosal02a{background:url(02_01.png) no-repeat 50% 0 / 100% auto;padding:0 0 0.05em;}

#cosal02a::after{background:url(02a.png) no-repeat 0 0% /  100% auto;content:"";display:block;height:4em;width:52%;position:absolute;left:0;top:0;z-index:1;}
#cosal02a::before{background:url(02b.png) no-repeat 0 0% /  100% auto;content:"";display:block;height:4em;width:52%;position:absolute;left:0;top:0;z-index:1;}

section#cosal02a span{color:#c00;}
section#cosal02a p{font-size:0.38em;width:60%;margin-left:auto;line-height:1.2;}
section#cosal02a p{-webkit-text-stroke: 0.2em #fff; text-stroke: 0.2em #fff; paint-order: stroke;}
section#cosal02a ul{font-size:0.27em;width:60%;margin-left:auto;padding:0.5em 0;line-height:1.2;}
section#cosal02a ul>li{display:block;padding:0.25em 0 0;}
section#cosal02a ul>li{-webkit-text-stroke: 0.2em #fff; text-stroke: 0.2em #fff; paint-order: stroke;}

section#cosal02b p{font-size:0.26em;font-weight:400;text-align:center;line-height:1.4em;padding:0.4em 0;}
section#cosal02b #cosal02img{background:url(02_02.png) no-repeat 0 0% /  100% auto;content:"";display:block;height:2.4em;}
section#cosal02b #cosal02img p{display:none;}

section#cosal02c p{font-size:0.2em;font-weight:400;text-align:center;line-height:1.25em;padding:0.25em 0;}
section#cosal02c p span.marker{background:linear-gradient(0deg,#fc0 50%,transparent 50%) no-repeat;padding:0 0.25em;}
section#cosal02c p.sbj{font-size:0.32em;font-weight:900;text-align:center;color:#e61673;line-height:1.25;padding:0.25em 0 1em;}
section#cosal02c p.sbj strong{box-shadow:0 0.1em 0;display:inline-block;}

[data-device="smp"] main section#cosal02b #cosal02img{height:2.6em;}

/*--------------
#cosal03
---------------*/
#cosal03{padding-top:5vw;}
#cosal03>div{display:block;font:800 clamp(10px,10vw,120px) / 1 'LINE Seed JP';}

#cosal03>div.cosalHD strong{color:#e61673;}
#cosal03>div.cosalHD span{box-shadow:0 0.05em;}

div#cosal03a{padding:0 0 0.2em;position:relative;}
div#cosal03a p{font-size:0.48em;transform:rotate(-3deg);line-height:1.5;text-align:center;}
div#cosal03a p:nth-of-type(2){text-indent:0.3em;}
div#cosal03a p span.marker{background:linear-gradient(0deg,#fc0 50%,transparent 50%) no-repeat;padding:0 0.2em;}
div#cosal03a p:nth-of-type(2){display:flex;height:2em;justify-content:center;align-items:center;}
div#cosal03a p span.img{display:flex;justify-content:center;align-items:center;height:2em;width:2em;margin-right:-0.5em;}
div#cosal03a p span.img::before{background:url(03a.png) no-repeat 0 0% /  100% auto;content:"";display:block;height:2em;width:2em;}

div#cosal03b{background:url(03b.png) no-repeat 50% 0 / 100% auto;}
div#cosal03b ul{height:6.5em;}
[data-device="smp"] main div#cosal03b ul{height:7.5em;}
div#cosal03b ul>li{display:none;}

/*--------------
#cosal04
---------------*/
#cosal04{padding-top:5vw;}
#cosal04>div{display:block;font:800 clamp(10px,10vw,120px) / 1 'LINE Seed JP';}

#cosal04>div.cosalHD strong{color:#e61673;}
#cosal04>div.cosalHD span{box-shadow:0 0.05em;}


#cosal04>div.cosalBox{background:url(04_bg.png) no-repeat 50% 0 / 100% auto;height:7.5em;}
#cosal04>div.cosalBox #cosal04a{padding:0.2em;text-align:center;}
#cosal04a{height:3.5em;display:flex;flex-flow:column;align-items:center;justify-content:center;position:relative;z-index:1}
#cosal04a::before{position:absolute;left:0.2em;bottom:-0.2em;content:'';display:block;width:1.5em;height:1.6em;}
#cosal04a::before{background: url(04a.png) no-repeat 50% 50% / auto 100%;z-index:-1}
#cosal04a p{font-size:0.36em;line-height:1.5}
#cosal04a p:nth-of-type(1) strong{font-size:2em;color:#c00;}
#cosal04a p:nth-of-type(2){padding:0.5em 0;}
#cosal04a p span.red{color:#c00;}
#cosal04a p span.pnk{color:#e61673;}
#cosal04a p{-webkit-text-stroke: 0.2em #fff; text-stroke: 0.2em #fff; paint-order: stroke;}


#cosal04b{position:relative;z-index:1;}
#cosal04b ul{background:url(04b.png) no-repeat 50% 0 / 100% auto;height:3em;}
#cosal04b li{display:none;}

#cosal04b::before{position:absolute;right:0.2em;top:-0.8em;content:'';display:block;width:1.1em;height:1.1em;}
#cosal04b::before{background: url(chocosal.png) no-repeat 50% 50% / auto 100%;z-index:-1;transform:rotate(16deg)}

[data-device="smp"] #cosal04>div.cosalBox{height:8.5em;}
[data-device="smp"] main #cosal04a{height:4em;}
[data-device="smp"] main #cosal04b>ul{height:3.5em;}

/*--------------
#cosal05
---------------*/


#cosal05{padding-top:5vw;}
#cosal05>div{display:block;font:800 clamp(10px,10vw,120px) / 1 'LINE Seed JP';}

#cosal05>div.cosalHD strong{color:#e61673;}
#cosal05>div{text-shadow:var(--tsx02);color:#5b2339;}
#cosal05a>p{font-size:0.36em;line-height:1.5;text-align:center;}

#cosal05b>figure{margin:0;display:block;}
#cosal05>div#cosal05c{display:flex;flex-wrap:wrap;justify-content:right;align-items:end;}
#cosal05c::before{content:'';display:block;width:30%;height:2em;background:url(05c.png) no-repeat 50% 50% / auto 100%;}
#cosal05c>p{font-size:0.27em;line-height:1.75;width:70%;text-align:center;}
#cosal05c>p>span{color:#e61673;text-decoration:underline;}
/*--------------
#cosal07
---------------*/
#cosal07{padding-top:2vw;}
#cosal07>div{display:block;font:800 clamp(10px,10vw,120px) / 1 'LINE Seed JP';}
#cosal07>div{text-shadow:var(--tsx02);color:#5b2339;}

#cosal07a,#cosal07b{position:relative;z-index:2;}

#cosal07>div{padding:0;}
#cosal07>div p>span.pnkudl{color:#ff3c66;text-decoration:underline;}
#cosal07>div#cosal07a{padding-bottom:0.2em;}

#cosal07a>p{font-size:0.32em;line-height:1.4;text-align:center;}
#cosal07a>p strong{font-size:1.4em;}


#cosal07b>p{font-size:0.38em;text-align:center;line-height:1.4;}
#cosal07>div#cosal07b::before{background:url(07_g.png) no-repeat 0 0% /  100% auto;content:"";display:block;height:3.8em;width:100%;position:absolute;left:0;top:0;z-index:-1;}
#cosal07>div#cosal07b::after{background:url(07_y.png) no-repeat 0 0% /  100% auto;content:"";display:block;height:3.8em;width:100%;position:absolute;left:0;top:0;z-index:-1;}
#cosal07>div#cosal07b{background:url(07_bg.png) no-repeat  0 0.5em /  100% auto;}
#cosal07>div#cosal07b{height:3.8em;display:flex;justify-content:center;align-items:end;box-sizing:content-box;padding-bottom:0.5em;flex-wrap:wrap;}
#cosal07>div#cosal07b>p{z-index:1;}
#cosal07>div#cosal07b p>strong{color:#c00;}

/*--------------
#cosal08
---------------*/
#cosal08>div{background:#fff;border:0;border-radius:1em;box-shadow:0 0 0 1em #5b2339;padding:1em;box-sizing:content-box;margin:1em;font-size:clamp(5px,1vw,10px);}
#cosal08>div dl{font:600 clamp(12px,3vw,18px) / 1.5 "Noto sans jp";}
#cosal08>div dl>dt{font-weight:900;font-size:1.1em;}
#cosal08>div dl>dt{display:flex;justify-content:left;align-items:center;color:#d1286d;}
#cosal08>div dl>dd{box-shadow:-0.3em -0.3em 0 #21c2cc inset;border-radius:0 0 2em 0;padding:0em 1.5em 1.5em 0em;}
#cosal08>div dl>dd{position:relative;z-index:1;margin-top:0.5em;}
#cosal08>div dl>dd:after{content:"";width:2em;height:2em;display:inline-block;vertical-align:top;}
#cosal08>div dl>dd:before{position:absolute;right:1em;bottom:1em;content:"";width:2em;height:2em;background:url(faq_a.jpg) no-repeat 50% 50% / auto 100%;z-index:-1;}

#cosal08>div dl{position:relative;z-index:1;padding-left:3.3em;margin:1em;}
#cosal08>div dl{z-index:1;background:linear-gradient(0,#553000 20%) repeat-y 1.6em 0 / 0.22em auto;}
#cosal08>div dt{display:flex;;align-items:center;width:100%;position:relative;min-height:3em;}
#cosal08>div dt::before{content:'';background:url(faq_q.jpg) no-repeat 50% 50% / contain;display:block;width:3em;height:3em;position:absolute;left:-3em;top:0em;}

[data-device="smp"] main .wrap#choco-sal .lpCnts{width:clamp(100px,90svw,800px);box-sizing:border-box;}
[data-device="smp"] main .wrap#choco-sal .lpMV{height:calc(50svw + 60px);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
[data-device="smp"] main .wrap#choco-sal .lpMV picture{height:100%;display:block;width:100%;}
[data-device="smp"] main .wrap#choco-sal .lpMV picture img{display:none;}
[data-device="smp"] main .wrap#choco-sal .lpMV picture{background:url(mv.jpg) no-repeat 50% 100% / auto 100%;}

/*--------------
#cosal09
---------------*/
#cosal09{padding-top:2vw;}
#cosal09>div{display:block;font:800 clamp(10px,10vw,120px) / 1 'LINE Seed JP';padding:0.5em 0;}

#cosal09>div#cosal09a{background:url(09a.png) no-repeat 50% 0 / 100% auto;display:block;position:relative;z-index:1;height:6em;display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;padding:0em 0 0.5em;box-sizing:border-box;}
#cosal09>div#cosal09a::before{content:'';display:block;position:absolute;left:0;bottom:0em;height:100%;width:30%;background:url(09a_01.png) no-repeat 0% 100% / 100% auto;}
#cosal09>div#cosal09a::after{content:'';display:block;position:absolute;right:0;bottom:0em;height:100%;width:30%;background:url(09a_02.png) no-repeat 0% 100% / 100% auto;}

#cosal09a>p{width:100%;font-size:0.34em;line-height:1.2;text-align:center;margin:0 auto;color:#623100;}
#cosal09a>p>strong{display:inline-block;color:#c00;background:linear-gradient(0deg,#c00 10% , transparent 10%) repeat 0 100% / 0.2em 1.2em;}

[data-device="smp"] #cosal09>div#cosal09a>p{margin-top:1em;}

#cosal09>div#cosal09b{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;position:relative;z-index:1;padding-top:0.5em;}
#cosal09>div#cosal09b .wmvrl{display:flex;height:8em;}
#cosal09>div#cosal09b .wmvrl p{font-size:0.45em;text-shadow:var(--tsx01);line-height:1.2;color:#5e3501;letter-spacing:0.05em;height:100%;}
#cosal09>div#cosal09b .wmvrl p>strong{font-size:1.45em;color:#c10001}
#cosal09>div#cosal09b .wmvrl p>span{font-size:1.25em;color:#ff3c66}
#cosal09>div#cosal09b .wmvrl p{writing-mode:vertical-rl;display:block;}

#cosal09>div#cosal09b::before{content:"";display:block;width:32%;height:50%;position:absolute;left:0;top:0;background:url(09b_01.png) no-repeat 0% 0% / 100% auto;z-index:1;}
#cosal09>div#cosal09b::after{content:"";display:block;width:32%;height:50%;position:absolute;right:0;top:0;background:url(09b_02.png) no-repeat 0% 0% / 100% auto;z-index:1;}
#cosal09>div#cosal09b .wmvrl::before{content:"";display:block;width:32%;height:50%;position:absolute;left:0;bottom:0;background:url(09b_03.png) no-repeat 0% 0% / 100% auto;z-index:2;}
#cosal09>div#cosal09b .wmvrl::after{content:"";display:block;width:32%;height:50%;position:absolute;right:0;bottom:0;background:url(09b_04.png) no-repeat 0% 0% / 100% auto;z-index:2;}

#cosal09>div#cosal09c{display:block;background:url(09c_01.png) no-repeat 50% 0% / 3.2em auto;z-index:1;height:4em;}
#cosal09>div#cosal09c{padding:0;box-sizing:border-box;position:relative;z-index:1;top:-0.5em;}

#cosal09>div#cosal09c p{width:3em;height:3em;position:relative;margin:0 auto;}
#cosal09>div#cosal09c p>span{text-shadow:var(--tsx01);color:#ff3c66;font-size:1.75em;}
#cosal09>div#cosal09c p>span:nth-of-type(1){transform:rotate(-5deg);display:block;position:absolute;top:0.2em;left:-0.2em;z-index:2;}
#cosal09>div#cosal09c p>span:nth-of-type(2){transform:rotate(-5deg);display:block;position:absolute;bottom:0em;right:0.1em;z-index:1;}


#cosal09>div#cosal09c p::before{content:"";display:block;height:1.25em;width:1.25em;background:url(chocosal.png) no-repeat 50% 50% / auto 100%;;
transform:translate(1.2em,0.4em) rotate(15deg);}
/*--------------
/*--------------
#cosal10
---------------*/
#cosal10>div{display:block;font:800 clamp(10px,10vw,120px) / 1 'LINE Seed JP';padding:0.5em 0;}

#cosal10>div#cosal10a{color:#5e3500;}
#cosal10>div#cosal10a p{font-size:0.60em;line-height:1.4;text-align:center;text-shadow:var(--tsx01);}

#cosal10>div#cosal10b{color:#5b2339;}
#cosal10>div#cosal10b>div{position:relative;background:url(10b_bg.png) no-repeat 50% 1.2em / 100% auto;padding:0 0.25em;}
#cosal10>div#cosal10b>div::before{content:"";height:3.6em;width:4em;margin:0 auto;display:block;overflow:hidden;position:relative;}
#cosal10>div#cosal10b>div::before{background:url(10b_sal.png) no-repeat 50% 0 / auto 100%;}
#cosal10>div#cosal10b p{font-size:0.8em;line-height:1.4;text-align:right;text-shadow:var(--tsx01);position:relative;top:-0.2em;}
#cosal10>div#cosal10b>div>p::before{position:absolute;background:url(10b_dkr.png) no-repeat 50% 0 / 100% auto;height:3em;width:4em;content:"";font-size:0.8em;left:0;top:-2em;}
#cosal10>div#cosal10b>div>span{font-size:0;display:none;}

#cosal10>div#cosal10c{color:#5b2339;padding-top:0;}
#cosal10>div#cosal10c p{font-size:0.75em;line-height:1.4;text-align:center;text-shadow:var(--tsx01);}
#cosal10>div#cosal10c p>strong{font-size:1.25em;}
#cosal10>div#cosal10c p>strong>span{font-size:1.5em;color:#ff3c65;}

#cosal10>div#cosal10d{display:block;position:relative;padding:0;}
#cosal10>div#cosal10d>div[id="10d1"]{position:absolute;width:3em;height:3em;left:calc(50% - 1.5em);top:0;display:flex;font-size:clamp(10px,10vw,100px);flex-wrap:wrap;}
#cosal10>div#cosal10d>div[id="10d1"]>p{font-size:0;display:block;width:100%;height:100%;background:url(10d01.png) no-repeat 50% 50% / contain;}
#cosal10>div#cosal10d>div[id="10d1"]::before,
#cosal10>div#cosal10d>div[id="10d1"]::after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:transparent no-repeat 50% 50% / contain;}
#cosal10>div#cosal10d>div[id="10d1"]::before{background-image:url(10d01b.png);}
#cosal10>div#cosal10d>div[id="10d1"]::after{background-image:url(10d01a.png);}

#cosal10>div#cosal10d>div[id="10d2"]{display:block;height:clamp(100px,54vw,540px);background:url(10d_bg.png) no-repeat 50% 100% / 100% auto;}
#cosal10>div#cosal10d{position:relative;z-index:1;}
#cosal10>div#cosal10d a{width:clamp(100px,90%,900px);font:clamp(16px,4vw,50px) / 1  'LINE Seed JP';display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-items:center;justify-content:start;position:absolute;bottom:0.2em;left:5%;padding:0.25em 0 0.5em;cursor:pointer;}
#cosal10>div#cosal10d a span{font-size:1em;font-weight:700;color:#5b2339;padding:0.5em 0;}
#cosal10>div#cosal10d a strong{font-size:1.25em;font-weight:700;display:block;padding:0 1em;border:0.1em dashed;color: #ff3c65;line-height:1.5em;
transition:0.4s;}
#cosal10>div#cosal10d a::before{content:"";width:2em;height:3em;display:block;position:absolute;background:url(10d_cs.png) no-repeat 50% 50% / auto 100%;right:0.5em;bottom:-1em;transform:translateX(0.5em);opacity:0;}
[data-device="smp"] #cosal10>div#cosal10d a{font-size:clamp(12px,4.6vw,46px);}

#cosal10>div#cosal10e{}
#cosal10>div#cosal10e p{font-size:0.4em;line-height:1.4;color:#ff3c65;text-align:center;text-shadow:var(--tsx01);}

#cosal10>div#cosal10d a:hover strong{background:#ff3c65;border-style:solid;color:#fff;transition:0.4s;}

@media screen and (max-width:480px) {}

