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

body[data-device="pc"] .headDiv nav[role="navigation"] section[data-device="pc"]{display:none;}
:root{
--mainColor:#000;
--subColor:#fff;
--axColor:#b90004;
--baseWidth:clamp(100px,100vw,1000px);
--kvSize:clamp(100px,50svw,640px);
}

html{scroll-behavior:smooth;}
main .wrap#character{display:block;max-width:unset;width:clamp(100px,100%,100svw);;overflow:hidden;}
main .wrap#character .lpMain{background:var(--subColor);color::var(--mainColor);font:clamp(10px,4vw,40px) / 1 'LINE Seed JP';}
main .wrap#character .lpMain>section{margin:0 auto;padding-top:60px;}
main .wrap#character .lpMain>section{height:100svh;position:relative;box-sizing:border-box;}

main section>img{width:100%;}
figure{margin:unset;}

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


#character section#chraKV{
background:
linear-gradient(0deg, transparent 0%,#ffffff20 0%,#ffffff20 10%,transparent 10%) repeat-Y 0% 0% / 100% 1em,
linear-gradient(90deg, transparent 0%,#ffffff40 0%,#ffffff40 10%,transparent 10%) repeat-x 0% 0% / 1em 100%,
linear-gradient(0deg,#face00 50%, transparent 50%) repeat 0% 0% / 1em 2em,
linear-gradient(90deg,#ffffff20 50%, transparent 50%) repeat 0% 0% / 2em 1em;
background-color:#face00;}
#character section:nth-of-type(2n){background:#dcc6c0;}
#character section:nth-of-type(2n+1){background:#ffffdd;}

main .wrap#character .lpMain>section{overflow-y:auto;display:flex;align-items:center;justify-content:left;}
main .wrap#character .box{height:100%;margin:0 auto;max-width:1280px;z-index:1;position:relative;box-sizing:border-box;padding-bottom:2em;}

.contactMADA{display:none;}
footer{display:none;}
[data-ready="fire"] .contactMADA{display:block;}
[data-ready="fire"] footer{display:block;}

/*-------------------------------*/
#character section#chra00{height:calc(100svh - 60px);overflow:hidden;padding-top:0;z-index:99;position:relative;}
#character section#chra00 .box{width:100%;justify-content:center;align-items:center;display:flex;}
[data-device="pc"] #character section#chra00 .box{width:100%;max-width:600px;margin:0 auto;}
[data-device="pc"] #character section#chra00{height:100svh;}

#character section#chra00 .box figure{width:100%;display:block;padding:0;border-radius:0;}
#character section#chra00 .box figure img{width:100%;display:block;padding:0;}

/*-------------------------------*/
main .wrap#character #chraKV .box{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 auto;width:clamp(100px,100%,1280px);}
#chraKV .box>div.text{width:50%;box-sizing:border-box;padding:0em;}
#chraKV .box>div.text>.pop{font:800 1em / 1 'LINE Seed JP';text-shadow:2px 2px #fff,2px 2px 2px #fff,2px 2px 2px #fff;margin:0.5em 0;}
#chraKV .box>div.text>.pop span{font-size:1.25em;line-height:1.5;}
#chraKV .box>div.text>.pop span+span{font-size:1.5em;color:var(--axColor);}

#chraKV .note{font:400 1em / 1 'LINE Seed JP';display:flex;justify-content:right;padding:0.5em;padding-left:0;position:relative;z-index:4;overflow:hidden;}
#chraKV .note p{;font-size:0.5em;letter-spacing:0.08em;line-height:1.75;background: #351f19;padding:0.5em;border-radius:0.5em;position:relative;color:#fff;width:100%;}
#chraKV .note p::after{content:'';display:block;width:2em;height:1em;position:absolute;background:linear-gradient(30deg,transparent 50%,#351f19 50%);transform:skewX(-45deg) rotateY(45deg);top:1em;right:-1.5em;transform-origin:0 0;}
#chraKV .text h2{border-radius:4em;margin-top:0.5em;justify-content:left;align-items:center;width:100%;height:4em;}
#chraKV .text h2>span{display:none;}
#chraKV .text h2{background:#e3007f url(kv_name.png) no-repeat 50% 50% / auto 80%;}

#chraKV .box>div.img{width:50%;}
#chraKV .box>div.img figure{display:flex;justify-content:center;align-items:center;position:relative;z-index:1;}
#chraKV .box>div.img figure img{display:block;width:90%;height:90%;background:#fff;border-radius:100%;}
#chraKV .box>div.img figure::after{content:"";display:block;width:80%;height:80%;background:url(cv_01.png) no-repeat 100% 100% / auto 100%;position:absolute;}


[data-device="smp"] #chraKV .box{flex-flow:column;}
[data-device="smp"] #chraKV .box>div.text{width:80%;}
[data-device="smp"] #chraKV .box>div.text>.pop{text-align:center;line-height:2;margin:0.5em 0;}
[data-device="smp"] #chraKV .box>div.text .note{transform:translate(0,64svw);position:absolute;left:0;width:100svw;justify-content:center;margin:0;}
[data-device="smp"] #chraKV .box>div.text .note p{transform:unset;font-size:0.75em;width:80%;}
[data-device="smp"] #chraKV .note p::after{transform: rotate(-90deg) skewX(40deg) rotateY(20deg);top:2em;left:1em;right:unset;transform-origin:0 0;z-index:-1;}


[data-device="smp"] #chraKV .box>div.img{width:80%;height:60%;}
/*-------------------------------*/
main .wrap#character .lpMain>section>h2{position:absolute;font:600 0.8em / 1 'LINE Seed JP';padding:0.5em 1em;}
main .wrap#character .lpMain>section>h2{background:#000;border-radius:0 0 0.5em 0.5em;top:0;color:#fff;z-index:1;}
main .wrap#character .lpMain>section{position:relative;justify-content:center;}
[data-device="smp"] main .wrap#character .lpMain>section>h2{top:60px;font-size:1.2em;border-radius:0.5em;}

#chra02{}
#chra02 .box{display:flex;width:clamp(100px,100%,1280px);align-items:center;}
#chra02 .box .note{width:70%;}
#chra02 .box .img{width:30%;}
#chra02 .box .img figure{display:block;
background:url(sc02.png) no-repeat 50% 50% / 100% auto;}
#chra02 .box .img figure img{width:100%;}

#profile dl{display:flex;margin:1em 0 0;flex-wrap:wrap;align-items:center;font:600 0.6em / 1 'LINE Seed JP'}
#profile dl>dt{background:#e3007f;color:#fff;padding:0.25em 1em;border-radius:2em;}
#profile dl>dd{padding:0.25em 0.5em;}


[data-device="smp"] #chra02 .box{flex-flow:column;justify-content:center;align-items:center;align-content:center;padding:0 2vw;}
[data-device="smp"] #chra02 .box .note{width:100%;order:2;font-size:1.2em;}
[data-device="smp"] #chra02 .box .img{width:50%;order:1}

/*-------------------------------*/
#chra03{}
#chra03 .box{display:flex;flex-flow:wrap row;justify-content:center;align-items:center;gap:2%;width:100%;}
#chra03 .secret{display:flex;width:49%;font:600 0.6em / 1 'LINE Seed JP';width:48%;flex-flow:column;align-items:center;justify-content:start;position:relative;flex-wrap:wrap;}
#chra03 .secret figure{width:clamp(100px,60%,300px);order:1;border-radius:100%;padding:0;box-shadow:0 0 5px #ccc;margin:1em auto;}
#chra03 .secret figure img{width:100%;}
#chra03 .secret dl{order:2;width:80%;}
#chra03 .secret dl dt{text-align:center;font-size:1em;padding:0.5em;border-radius:3em;background:#e3007f;color:#fff;width:80%;margin: 0 auto;}
#chra03 .secret dl dd{position:absolute;top:-2em;left:10%;background:#fff;display:block;border-radius:1em;width:80%;z-index:2;
padding:1em;box-sizing:border-box;justify-content:center;align-items:center;flex-wrap:wrap;display:flex;height:5em;filter:drop-shadow(1px 1px 5px  #ccc)}
#chra03 .secret dl dd::before{content:"";width:calc(100% - 2em);height:1em;top:-.5em;left:1em;position:absolute;z-index:-1;background: -webkit-gradient(radial, 50% 120%, 0,50% 120%, 50, from(#fff), color-stop(0.49, #fff), color-stop(0.51, transparent), to(transparent));-webkit-background-size:10% auto;transform:scaleY(0.5);}
#chra03 .secret dl dd::after{content:"";width:calc(100% - 2em);height:1em;bottom:-.5em;right:1em;position:absolute;z-index:-1;background: -webkit-gradient(radial, 50% 120%, 0,50% 120%,50, from(#fff), color-stop(0.49, #fff), color-stop(0.51, transparent), to(transparent));-webkit-background-size:10% auto;transform:scaleY(0.5) rotate(180deg);}


#chra03 .secret#scp01 figure{background:#fff url(cv_01.png) no-repeat 25% 0% / 200% auto;}
#chra03 .secret#scp02 figure{background:#fff url(cv_01.png) no-repeat 10% 80% / auto 250%;}

[data-device="smp"] #chra03 .box{justify-content:center;align-content:center;padding:0 2vw;}
[data-device="smp"] #chra03 .secret{display:flex;width:100%;padding:2em 1em 1em;}
[data-device="smp"] #chra03 .secret>figure{width:20svh}
[data-device="smp"] #chra03 .secret>dl{width:80%;}
[data-device="smp"] #chra03 .secret dl dt{font-size:2em;}
[data-device="smp"] #chra03 .secret dd{width:60%;margin-left:10%;top:1em;height:unset;line-height:1.5;}
[data-device="smp"] #chra03 .secret dd::after,
[data-device="smp"] #chra03 .secret dd::before{display:none;}


/*-------------------------------*/
#chra04 .box{display:flex;flex-flow:wrap row;justify-content:center;align-items:center;gap:2%;width:100%;}

#stampgallery{display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:2%;width:100%;}
#stampgallery>dl{width:32%;text-align:center;font:100 0.6em / 1 'LINE Seed JP';padding:0.5em 0.5em 0;box-sizing:border-box;border-radius:0.5em;}
#stampgallery>dl dt{font:600 1.2em / 1 'LINE Seed JP';border-radius:0.5em;background:#fff;padding:0.5em 0;margin:0 0 0.5em;position:relative;}
#stampgallery>dl ul{display:flex;flex-wrap:wrap;gap:2%;justify-content:center;align-items:center;}
#stampgallery>dl ul>li{display: block;width:32%;background:#fff;margin-bottom:2%;border-radius:0.5em;overflow:hidden;}
#stampgallery>dl ul>li figure{display:block;}
#stampgallery>dl ul>li img{display:block;width:100%;height:100%;}

#chra04 .box #stampgallery{position:relative;}
#stampgallery>dl ul>li{cursor:pointer;}
#stampgallery>dl ul>li.on{background-color:transparent;display:flex;justify-content:center;align-items:center;}
#stampgallery>dl ul>li.on:before{content:"";display:flex;border-radius:100%;
background-color:transparent;
background-image:linear-gradient(45deg,transparent 48%,#fff 48%,#fff 52%,transparent 52%),
linear-gradient(-45deg,transparent 48%,#fff 48%,#fff 52%,transparent 52%);
background-size:2em 2em;
width:2em;height:2em;justify-content:center;align-items:center;font-size:2em;}
#stampgallery>dl ul>li figure{transition:1s top;left:50%;top:-50%;border-radius:0.5em;box-shadow:0 0 5px #ccc;background-color:#fff;}

#stampgallery>dl ul>li.on figure{width:50svh;position:absolute;left:calc(50% - 25svh);top:calc(50% - 25svh);z-index:999;height:50svh;}
[data-device="smp"] #stampgallery>dl ul>li.on figure{width:50svw;left:calc(50% - 25svw);top:calc(50% - 25svw);height:50svw;}


#stampgallery>dl:nth-of-type(1){background-color:#f40080;}
#stampgallery>dl:nth-of-type(2){background-color:#fdd405;}
#stampgallery>dl:nth-of-type(3){background-color:#172437;}

[data-stamp] figure{background:transparent no-repeat 50% 100% / 100% auto;display:block;}
[data-stamp="01"] figure{background-image:url(stamp_01a.png);}
[data-stamp="02"] figure{background-image:url(stamp_02a.png);}
[data-stamp="04"] figure{background-image:url(stamp_04a.png);}
[data-stamp="06"] figure{background-image:url(stamp_06a.png);}
[data-stamp="08"] figure{background-image:url(stamp_08a.png);}
[data-stamp="09"] figure{background-image:url(stamp_09a.png);}

[data-stamp="03"] figure{background-image:url(stamp_03b.png);}
[data-stamp="05"] figure{background-image:url(stamp_05b.png);}
[data-stamp="15"] figure{background-image:url(stamp_15b.png);}
[data-stamp="18"] figure{background-image:url(stamp_18b.png);}
[data-stamp="21"] figure{background-image:url(stamp_21b.png);}
[data-stamp="23"] figure{background-image:url(stamp_23b.png);}

[data-stamp="07"] figure{background-image:url(stamp_07c.png);}
[data-stamp="24"] figure{background-image:url(stamp_24c.png);}
[data-stamp="26"] figure{background-image:url(stamp_26c.png);}
[data-stamp="27"] figure{background-image:url(stamp_27c.png);}
[data-stamp="29"] figure{background-image:url(stamp_29c.png);}
[data-stamp="31"] figure{background-image:url(stamp_31c.png);}
[data-stamp="32"] figure{background-image:url(stamp_32c.png);}


[data-device="smp"] #stampgallery{padding:0 2vw;gap:4%;}
[data-device="smp"] #stampgallery>dl{width:48%;margin-top:3%;}
[data-device="smp"] #stampgallery>dl:nth-of-type(1){width:48%;margin:0 4%;}


/*-------------------------------*/
#chra05{}
#chra05 .box{display:flex;flex-flow:wrap row;justify-content:center;align-content:center;width:100%;}
#chra05 .box .note{height:unset;padding:1em;}

#chra05 .box .note{font:800 clamp(10px,4vw,40px) / 1 'LINE Seed JP';}
#chra05 .box .note{text-shadow:2px 2px 0 #fff;;}

#chra05 .box .card{height:60%;width:100%;}
#chra05 .box .card>ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2%;margin:2% 0 0}
#chra05 .box .card>ul>li{display:flex;flex-flow:wrap column;position:relative;width:32%;padding:0;margin:7 0 2em;justify-items:center;align-items:center;align-content:center;}
#chra05 .box .card>ul>li figure{display:block;width:100%;background:#eee;border:1px solid #ccc;border-radius:0.5em;box-sizing:border-box;}
#chra05 .box .card>ul>li figure img{display:block;width:100%;}

#chra05 .box .card>ul>li:nth-of-type(2) figure img{background: url(../choco-sal/10b_sal.png) no-repeat 50% 50% / 50% auto;filter:blur(5px) grayscale(1)}
#chra05 .box .card>ul>li:nth-of-type(1) figure img{background: url(../choco-sal/09b_04.png) no-repeat 50% 50% / auto 80%;filter:blur(5px) grayscale(1)}


#chra05 .box .card>ul>li p{display:block;position:absolute;width:unset;bottom:0;padding:0.5em;font:800 0.6em / 1.2 'LINE Seed JP';}

[data-device="smp"] #chra05 .card{padding:0 2vw;}
[data-device="smp"] #chra05 .box .card>ul{gap:0 4%}
[data-device="smp"] #chra05 .box .card>ul>li{width:48%;}


/*-------------------------------*/
[data-device="pc"]{}
[data-device="smp"]{}


@media(max-width:800px){
:root{--kvSize:clamp(80px,48svw,360px);}
}
@media(max-width:1300px){}

[data-device="smp"] main .wrap#character .lpMain>section{height:calc(100svh - 90px);position:relative;box-sizing:border-box;}
[data-device="smp"] main .wrap#character .lpMain>section#chraKV{height:calc(100svh - 60px);padding-top:0;}
[data-device="pc"] main .wrap#character .lpMain>section#chraKV{height:100svh;padding-top:0;}
[data-device="smp"] main .wrap#character .lpMain>section:last-of-type{min-height:unset;}
main .wrap#character .lpMain>section .nextBtn p{display:flex;cursor:pointer;width:clamp(200px,96%,960px);margin:0 auto;justify-content:center;align-items:center;background:transparent;padding:0.5em 0;border-radius:0.5em 0.5em 0 0;color:var(--mainColor);font-size:clamp(12px,3vw,18px)}
main .wrap#character .lpMain>section .nextBtn{position:absolute;width:clamp(200px,100svw,100%);bottom:0px;left:0%;z-index:1}
main .wrap#character .lpMain>section .nextBtn span{display:none;}
main .wrap#character .lpMain>section .nextBtn p::before{content:"▼";font-size:2em;}

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