.fv #mainImg{background:url(../img/mainImg_bg.webp) repeat-x center top;background-size:7rem auto!important;height:67.5rem;overflow:clip}
.fv #mainImg .wrap{height:100%}
.fv #mainImg .anniversary60th{position:absolute;top:0;left:-13.5rem;z-index:10;width:16.1rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(-3rem);opacity:0}
.fv #mainImg .product{width:64.4rem;margin:0 auto;padding-top:25rem}
.fv #mainImg .product .name{position:absolute;top:5.5rem;left:0;z-index:10;width:100%;text-align:center;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:scale(1.2);opacity:0}
.fv #mainImg .product .name img{width:51rem}
.fv #mainImg .product .udon{transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
.fv #mainImg .product picture.character{position:absolute;right:5rem;bottom:1rem;z-index:10;width:39.5rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:scale(1.2);opacity:0}
.fv #mainImg .blow{position:absolute;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
.fv #mainImg .blow picture{animation:fuwafuwa 1.8s ease-in-out infinite alternate-reverse}
.fv #mainImg .blow.-blow01{top:7.5rem;left:8rem;width:22.2rem}
.fv #mainImg .blow.-blow02{top:34rem;left:5rem;width:17.4rem}
.fv #mainImg .blow.-blow03{top:2rem;right:8rem;width:23.2rem}
.fv #mainImg .blow.-blow04{top:19rem;right:-5rem;width:26.3rem}
.fv #anker{background:var(--brown500);padding:2rem 0}
.fv #anker ul.btn{display:flex;align-items:center;justify-content:center;column-gap:3rem;line-height:0}
.fv #anker ul.btn li{transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
.fv #anker ul.btn li a{display:inline-block}
.fv #anker ul.btn li a img{width:auto;height:3.9rem;border-radius:.5rem}
#campaign .pickup{top:7rem;left:0}
#campaign .bg{position:relative;z-index:15;background:url(../img/campaign_bg.webp) top left;background-size:17.9rem auto;padding:14rem 0 16rem;mask-image:url(../img/mask_wave_bottom.svg),linear-gradient(#fff 0 0);mask-repeat:repeat-x;mask-position:center calc(100% + .15rem);mask-size:18rem auto;mask-composite:exclude}
#campaign .bg h2.ttl{margin-bottom:5rem}
#campaign .bg .overview{position:relative;text-align:center}
#campaign .bg .overview h3{font-size:5.8rem;margin-bottom:4rem}
#campaign .bg .overview .anniversary60th{position:absolute;bottom:0;left:2rem;text-align:center}
#campaign .bg .overview .anniversary60th img{width:25.8rem}
#campaign .bg .overview p.txt{font-size:1.8rem;line-height:1.9;font-family:var(--kaku)}
#campaign .bg .overview .character{position:absolute;bottom:-4rem;right:3rem}
#campaign .bg .overview .character img{width:23.6rem}
#campaign .bg .exhibition{margin-top:15rem}
#campaign .bg .exhibition .row{display:flex}
#campaign .bg .exhibition .row .left{flex-shrink:0;display:flex;width:60rem}
#campaign .bg .exhibition .row .left .poster{width:38.4rem}
#campaign .bg .exhibition .row .left h3.hd{width:15.5rem;margin-left:auto}
#campaign .bg .exhibition .row .right{width:43rem;margin-left:auto}
#campaign .bg .exhibition .row .right .data dl{position:relative;display:flex;align-items:center;border-top:1px solid var(--black800)}
#campaign .bg .exhibition .row .right .data dl:before{content:'';position:absolute;margin:auto;top:-.2rem;left:0;width:7rem;height:.3rem;background:var(--black800)}
#campaign .bg .exhibition .row .right .data dl dt{flex-shrink:0;width:7rem;font-weight:var(--fontBold);padding:1.8rem 0}
#campaign .bg .exhibition .row .right .data dl dd{padding:1.8rem 0 1.8rem 1.5rem}
#campaign .bg .exhibition .row .right .data dl dd p.day{line-height:1.5;font-size:2.2rem;font-weight:var(--fontBold)}
#campaign .bg .exhibition .row .right .data dl dd .icon{display:flex;column-gap:2rem;margin-top:.5rem}
#campaign .bg .exhibition .row .right .data dl dd .icon span{display:flex;align-items:center;column-gap:.8rem}
#campaign .bg .exhibition .row .right .data dl dd .icon span img{flex-shrink:0;width:2.7rem}
#campaign .bg .exhibition .row .right .data dl:last-child{border-bottom:1px solid var(--black800)}
#campaign .bg .exhibition .row .right .data dl:last-child:after{content:'';position:absolute;margin:auto;bottom:-.2rem;left:0;width:7rem;height:.3rem;background:var(--black800)}
#campaign .bg .exhibition .row .right .instagram{margin-top:2.5rem}
#campaign .bg .exhibition .row .right .instagram a{display:flex;align-items:center;justify-content:center;column-gap:1rem;font-family:var(--kaku);background:var(--white100);border-radius:1rem;text-align:center;padding:1rem}
#campaign .bg .exhibition .row .right .instagram a span.icon{width:4.6rem}
#campaign .bg .exhibition .row .right p.notes{margin-top:1.5rem}
#campaign .bg .exhibition .map{margin-top:4rem}
#campaign .bg .exhibition .map iframe{width:100%;height:33rem;border-radius:2rem;filter:drop-shadow(.4rem .4rem 0 rgba(79, 39, 8, .3))}
#campaign .bg .exhibition .map p.btn{text-align:center;margin-top:3rem}
#campaign .bg .exhibition .map p.btn a{display:inline-block;font-size:1.4rem}
#campaign .bg .exhibition .map p.btn a i{position:relative;top:.4rem;display:inline-block;width:2rem;height:2rem;background:var(--brown500);border-radius:9rem;margin-right:1rem}
#campaign .bg .exhibition .map p.btn a i:before{content:'';position:absolute;margin:auto;top:0;left:0;z-index:10;width:2rem;height:2rem;background:var(--yellow500);mask:url(../img/i_arr.svg) no-repeat center;mask-size:1.2rem auto}
#lineup{margin-top:-3rem}
#lineup .pickup{top:7rem;right:0}
#lineup .bg{position:relative;z-index:14;background:url(../img/lineup_bg.webp) top left;background-size:17.9rem auto;padding:14rem 0 16rem;mask-image:url(../img/mask_wave_bottom.svg),linear-gradient(#fff 0 0);mask-repeat:repeat-x;mask-position:center calc(100% + .15rem);mask-size:18rem auto;mask-composite:exclude}
#lineup .bg .product{margin-top:5rem;display:flex;justify-content:space-between;text-align:center}
#lineup .bg .product>div{width:39.9rem;font-size:2rem;font-weight:var(--fontBold);transition:opacity .7s,transform .7s var(--easeOutCubic);transform:translateY(4rem);opacity:0}
#lineup .bg .product.is-anim>div{will-change:opacity,transform;transform:translateY(0);opacity:1}
#lineup .bg .product.is-anim>div:nth-child(1){transition-delay:75ms}
#lineup .bg .product.is-anim>div:nth-child(2){transition-delay:.15s}
#lineup .bg .product.is-anim>div:nth-child(3){transition-delay:225ms}
#lineup .bg p.notes{text-align:right;margin-top:5rem;font-size:1.2rem}
#recipe{margin-top:-13rem}
#recipe .pickup{top:6rem;left:0}
#recipe .bg{position:relative;z-index:13;background:url(../img/recipe_bg.webp);background-size:17.9rem auto;padding:24rem 0 16rem;mask-image:url(../img/mask_wave_bottom.svg),linear-gradient(#fff 0 0);mask-repeat:repeat-x;mask-position:center calc(100% + .15rem);mask-size:18rem auto;mask-composite:exclude}
#recipe .bg ul.list{display:grid;grid-template-columns:repeat(2,minmax(0,50%));column-gap:2rem;row-gap:2rem;padding:0 6rem}
#recipe .bg ul.list li{transition:opacity .7s,transform .7s var(--easeOutCubic);transform:translateY(4rem);opacity:0}
#recipe .bg ul.list li a{display:block;padding:.5rem;border-radius:2rem;color:var(--yellow500);font-weight:var(--fontBold);background:var(--brown500);text-align:center;box-shadow:0 0 1.4rem .5rem rgba(51,21,7,.2)}
#recipe .bg ul.list li a picture{overflow:clip;border-radius:1.5rem}
#recipe .bg ul.list li a p.name{padding:2rem 0 1.5rem}
#recipe .bg ul.list li a p.name:before{content:'';display:inline-block;position:relative;top:.3rem;width:1.8rem;height:1.8rem;background:var(--yellow500);mask:url(../img/i_arr02.svg) no-repeat center;mask-size:100% auto;margin-right:1rem}
#recipe .bg ul.list.is-anim>li{will-change:opacity,transform;transform:translateY(0);opacity:1}
#recipe .bg ul.list.is-anim>li:nth-child(1){transition-delay:75ms}
#recipe .bg ul.list.is-anim>li:nth-child(2){transition-delay:.15s}
#recipe .bg ul.list.is-anim>li:nth-child(3){transition-delay:225ms}
#recipe .bg ul.list.is-anim>li:nth-child(4){transition-delay:.3s}
#recipe .bg p.btn{margin-top:5rem;text-align:center}
#recipe .bg p.btn a{display:inline-block;background:var(--brown500);color:var(--yellow500);border-radius:2rem;padding:2rem 3rem;font-weight:var(--fontBold)}
#recipe .bg p.btn a:before{content:'';display:inline-block;position:relative;top:.3rem;width:1.8rem;height:1.8rem;background:var(--yellow500);mask:url(../img/i_arr02.svg) no-repeat center;mask-size:100% auto;margin-right:.5rem}
#history{margin-top:-3rem}
#history .pickup{top:10rem;right:0}
#history .bg{position:relative;z-index:12;background:url(../img/history_bg.webp);background-size:17.9rem auto;padding:14rem 0 22rem;color:var(--white100);mask-image:url(../img/mask_wave_bottom.svg),linear-gradient(#fff 0 0);mask-repeat:repeat-x;mask-position:center calc(100% + .15rem);mask-size:18rem auto;mask-composite:exclude}
#history .bg .flow{position:relative;text-align:center;margin-top:6rem}
#history .bg .flow h3.hd{margin-bottom:4rem}
#history .bg .flow h3.hd img{width:9.8rem}
#history .bg .flow ul{position:relative;display:flex;flex-direction:row-reverse;flex-wrap:wrap;padding:0 21.6rem}
#history .bg .flow ul:before{content:'';position:absolute;margin:auto;top:0;left:50%;width:.2rem;height:85%;background:url(../img/history_flow_before.webp);background-size:100% auto}
#history .bg .flow ul li{position:relative;width:38.4rem}
#history .bg .flow ul li.flow01{top:-11rem;left:-.5rem}
#history .bg .flow ul li.flow02{right:-.5rem}
#history .bg .flow ul li.flow03{top:-5rem;left:-.5rem}
#history .bg .flow ul li.flow04{right:-.5rem}
#history .bg .flow ul li.flow05{top:-2rem;left:-.5rem}
#history .bg .flow .end .anniversary60th{position:absolute;bottom:-8rem;left:22rem;width:28.9rem;transition:opacity 1.2s,transform 1.2s var(--easeSpring);transform:scale(.8);opacity:0}
#history .bg .flow .end .character{position:absolute;bottom:0;left:0;width:18.7rem;transition:opacity 1.2s,transform 1.2s var(--easeSpring);transform-origin:bottom left;transform:rotate(-20deg);opacity:0}
#history .bg .flow .end.is-anim .anniversary60th{transform:scale(1);opacity:1}
#history .bg .flow .end.is-anim .character{transform:rotate(0);opacity:1}
#secret{margin-top:-23rem}
#secret .pickup{top:2rem;left:0}
#secret .bg{position:relative;z-index:11;background:url(../img/secret_bg.webp);background-size:17.9rem auto;padding:34rem 0 18rem}
#secret .bg ul.list{display:flex;justify-content:center;flex-wrap:wrap;margin-top:2rem;text-align:center}
#secret .bg ul.list li{width:20%;transition:opacity .7s,transform .7s var(--easeOutCubic);transform:translateY(4rem);opacity:0}
#secret .bg ul.list li .img img{width:14rem}
#secret .bg ul.list li p.txt{display:flex;justify-content:center;align-items:center;height:2em;font-size:1.7rem;font-weight:var(--fontBold);line-height:1.1;margin-top:1.5rem}
#secret .bg ul.list li h4.name{margin-top:1rem}
#secret .bg ul.list li h4.name img{width:auto;height:2.9rem}
#secret .bg ul.list.is-anim>li{will-change:opacity,transform;transform:translateY(0);opacity:1}
#secret .bg ul.list.is-anim>li:nth-child(1){transition-delay:75ms}
#secret .bg ul.list.is-anim>li:nth-child(2){transition-delay:.15s}
#secret .bg ul.list.is-anim>li:nth-child(3){transition-delay:225ms}
#secret .bg ul.list.is-anim>li:nth-child(4){transition-delay:.3s}
#secret .bg ul.list.is-anim>li:nth-child(5){transition-delay:375ms}
#secret .bg .buy{margin-top:10rem}
#secret .bg .buy h3{font-size:3.8rem;text-align:center;margin-bottom:4rem}
#secret .bg .buy .row{display:flex;justify-content:center;text-align:center;column-gap:3rem}
#secret .bg .buy .row>div{width:34rem}
#secret .bg .buy .row>div a{display:block;font-size:1.9rem;font-weight:var(--fontBold);background:var(--yellow500);border-radius:9rem;padding:1.2rem 0;border:.5rem solid var(--brown500);box-shadow:.3rem .3rem 0 var(--brown500)}
@media screen and (min-width:768px){
.fv.is-anim #mainImg .anniversary60th{transform:translateY(0);opacity:1;transition-delay:30ms}
.fv.is-anim #mainImg .product .name{transform:scale(1);opacity:1;transition-delay:.6s}
.fv.is-anim #mainImg .product .udon{transform:translateY(0);opacity:1;transition-delay:.3s}
.fv.is-anim #mainImg .product picture.character{transform:scale(1);opacity:1;transition-delay:1.8s}
.fv.is-anim #mainImg .blow{transform:translateY(0);opacity:1}
.fv.is-anim #mainImg .blow.-blow01{transition-delay:1.2s}
.fv.is-anim #mainImg .blow.-blow02{transition-delay:1.27s}
.fv.is-anim #mainImg .blow.-blow03{transition-delay:1.34s}
.fv.is-anim #mainImg .blow.-blow04{transition-delay:1.41s}
.fv.is-anim #anker ul.btn li{transform:translateY(0);opacity:1}
.fv.is-anim #anker ul.btn li:nth-child(1){transition-delay:2.3s}
.fv.is-anim #anker ul.btn li:nth-child(2){transition-delay:2.4s}
.fv.is-anim #anker ul.btn li:nth-child(3){transition-delay:2.5s}
.fv.is-anim #anker ul.btn li:nth-child(4){transition-delay:2.6s}
.fv.is-anim #anker ul.btn li:nth-child(5){transition-delay:2.7s}
.fv.is-anim #anker ul.btn li:nth-child(6){transition-delay:2.8s}
}
@media screen and (max-width:767px){
.fv #mainImg .anniversary60th{top:-1rem;left:0;width:9rem}
.fv #mainImg .product{width:100%;padding-top:29rem}
.fv #mainImg .product .name{top:18rem;padding:0 3rem}
.fv #mainImg .product .name img{width:100%}
.fv #mainImg .product .udon{display:flex;justify-content:center}
.fv #mainImg .product .udon img{width:54.8rem}
.fv #mainImg .product picture.character{right:2rem;bottom:1.5rem;width:13.1rem}
.fv #mainImg .blow.-blow01{top:3.5rem;left:9.5rem;width:9.7rem}
.fv #mainImg .blow.-blow02{top:12rem;left:1rem;width:8.7rem}
.fv #mainImg .blow.-blow03{top:1rem;right:5.5rem;width:12.1rem}
.fv #mainImg .blow.-blow04{top:11.2rem;right:1rem;width:7.8rem}
.fv #mainImg.is-anim .anniversary60th{transform:translateY(0);opacity:1;transition-delay:30ms}
.fv #mainImg.is-anim .product .name{transform:scale(1);opacity:1;transition-delay:.6s}
.fv #mainImg.is-anim .product .udon{transform:translateY(0);opacity:1;transition-delay:.3s}
.fv #mainImg.is-anim .product picture.character{transform:scale(1);opacity:1;transition-delay:1.8s}
.fv #mainImg.is-anim .blow{transform:translateY(0);opacity:1}
.fv #mainImg.is-anim .blow.-blow01{transition-delay:1.2s}
.fv #mainImg.is-anim .blow.-blow02{transition-delay:1.27s}
.fv #mainImg.is-anim .blow.-blow03{transition-delay:1.34s}
.fv #mainImg.is-anim .blow.-blow04{transition-delay:1.41s}
.fv #anker{padding:1.5rem 0 2rem}
.fv #anker ul.btn{flex-wrap:wrap;column-gap:0;row-gap:1rem;text-align:center}
.fv #anker ul.btn li{width:50%}
.fv #anker ul.btn li a img{height:3.2rem}
.fv #anker ul.btn li.buy a img{height:2.6rem}
.fv #anker.is-anim ul.btn li{transform:translateY(0);opacity:1}
.fv #anker.is-anim ul.btn li:nth-child(2){transition-delay:.1s}
.fv #anker.is-anim ul.btn li:nth-child(3){transition-delay:.2s}
.fv #anker.is-anim ul.btn li:nth-child(4){transition-delay:.3s}
.fv #anker.is-anim ul.btn li:nth-child(5){transition-delay:.4s}
.fv #anker.is-anim ul.btn li:nth-child(6){transition-delay:.5s}
#campaign .pickup{top:2rem}
#campaign .bg{padding:28rem 0 16rem;mask-size:8.5rem auto}
#campaign .bg h2.ttl{margin-bottom:2rem}
#campaign .bg .overview h3{font-size:3.8rem;margin-bottom:1rem}
#campaign .bg .overview .anniversary60th{position:static}
#campaign .bg .overview .anniversary60th img{width:19rem}
#campaign .bg .overview p.txt{font-size:1.4rem;margin-top:2rem}
#campaign .bg .overview .character{position:static;margin-top:2rem}
#campaign .bg .overview .character img{width:16.2rem}
#campaign .bg .exhibition{margin-top:3rem}
#campaign .bg .exhibition .row{display:block}
#campaign .bg .exhibition .row .left{width:100%}
#campaign .bg .exhibition .row .left .poster{width:24.5rem}
#campaign .bg .exhibition .row .left h3.hd{width:10rem}
#campaign .bg .exhibition .row .right{width:100%;margin-top:2rem}
#campaign .bg .exhibition .row .right .data dl:before{width:6rem}
#campaign .bg .exhibition .row .right .data dl dt{width:6rem}
#campaign .bg .exhibition .row .right .data dl dd{padding:1.8rem 0 1.8rem 3rem}
#campaign .bg .exhibition .row .right .data dl dd p.day{font-size:1.6rem}
#campaign .bg .exhibition .row .right .data dl dd .icon span img{width:2.4rem}
#campaign .bg .exhibition .row .right .data dl:last-child:after{width:6rem}
#campaign .bg .exhibition .row .right .instagram a span.icon{width:4rem}
#campaign .bg .exhibition .row .right p.notes{margin-top:2rem;text-align:center}
#campaign .bg .exhibition .map{margin-top:3rem}
#campaign .bg .exhibition .map iframe{height:20rem}
#lineup{margin-top:-13rem}
#lineup .pickup{top:2rem}
#lineup .bg{padding:28rem 0 16rem;mask-size:8.5rem auto}
#lineup .bg .product{flex-wrap:wrap;justify-content:center;row-gap:3.5rem}
#lineup .bg .product>div{width:31rem;font-size:1.6rem}
#lineup .bg p.notes{text-align:center;margin-top:4rem;font-size:1rem}
#recipe{margin-top:-10rem}
#recipe .pickup{top:2rem}
#recipe .bg{padding:28rem 0 16rem;mask-size:8.5rem auto}
#recipe .bg ul.list{grid-template-columns:repeat(1,minmax(0,100%));row-gap:1.5rem}
#recipe .bg ul.list{padding:0}
#recipe .bg ul.list li a p.name{font-size:1.6rem}
#recipe .bg p.btn a{font-size:1.5rem}
#history{margin-top:-13rem}
#history .pickup{top:2rem}
#history .bg{padding:28rem 0 34rem;mask-size:8.5rem auto}
#history .bg .flow{margin-top:3rem}
#history .bg .flow h3.hd{margin-bottom:1.5rem}
#history .bg .flow h3.hd img{width:5.4rem}
#history .bg .flow ul{padding:0}
#history .bg .flow ul li{width:18.2rem}
#history .bg .flow ul li.flow01{top:-4rem}
#history .bg .flow ul li.flow02{top:6rem}
#history .bg .flow ul li.flow03{top:0}
#history .bg .flow ul li.flow04{top:6rem}
#history .bg .flow .end .anniversary60th{bottom:-17rem;left:3rem;width:16.4rem}
#history .bg .flow .end .character{bottom:-17rem;left:auto;right:3rem;width:13.5rem}
#secret{margin-top:-10rem}
#secret .pickup{top:2rem}
#secret .bg{padding:30rem 0 10rem}
#secret .bg ul.list{row-gap:3rem;margin-top:1rem}
#secret .bg ul.list li{width:50%}
#secret .bg ul.list li .img img{width:11.8rem}
#secret .bg ul.list li p.txt{height:auto;font-size:1.4rem}
#secret .bg ul.list li h4.name img{height:2.2rem}
#secret .bg .buy{margin-top:14rem}
#secret .bg .buy h3{font-size:2.7rem;margin-bottom:3rem}
#secret .bg .buy .row{flex-direction:column;row-gap:2rem;padding:0 1.5rem}
}
/*# sourceMappingURL=style.css.map */