#mainImg{background:url(../img/mainImg_bg.webp) no-repeat center;background-size:cover;padding:12.5rem 0}
#mainImg .wrap{display:flex;align-items:flex-end;justify-content:space-between}
#mainImg .ttlBox{position:relative;z-index:10;flex-shrink:0;width:68rem}
#mainImg .ttlBox .name{display:flex;align-items:center;margin-bottom:6rem}
#mainImg .ttlBox .name .logo{width:38.5rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:scale(1.3);opacity:0}
#mainImg .ttlBox .name .catch{width:22rem;margin-left:3.2rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:scale(1.3);opacity:0}
#mainImg .ttlBox p.lead{font-family:var(--serif);font-size:2rem;line-height:1.7;letter-spacing:.08em;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
#mainImg .ttlBox p.en{font-family:var(--serif);font-weight:var(--fontSemiBold);color:var(--gold500);font-size:1.4rem;margin-top:2.5rem;letter-spacing:.05em;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
#mainImg .ttlBox p.en em{display:block;font-size:1.8rem;margin-bottom:1rem}
#mainImg .imgBox{position:relative;flex-shrink:0;z-index:1;width:65.9rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateX(3rem);opacity:0}
#mainImg .imgBox .smokeImg{position:absolute;top:-20rem;left:2rem;z-index:10;width:55.1rem}
#mainImg .imgBox .smokeImg .smoke{position:absolute;top:0;left:0;pointer-events:none;opacity:0}
#mainImg.is-anim .ttlBox .name .logo{will-change:opacity,transform;transform:scale(1);opacity:1}
#mainImg.is-anim .ttlBox .name .catch{will-change:opacity,transform;transition-delay:.3s;transform:scale(1);opacity:1}
#mainImg.is-anim .ttlBox p.lead{will-change:opacity,transform;transition-delay:.6s;transform:translateY(0);opacity:1}
#mainImg.is-anim .ttlBox p.en{will-change:opacity,transform;transition-delay:.6s;transform:translateY(0);opacity:1}
#mainImg.is-anim .imgBox{will-change:opacity,transform;transition-delay:.6s;transform:translateX(0);opacity:1}
#anker{background:#090909}
#anker ul{display:grid;place-content:center;grid-template-columns:repeat(3,minmax(0,25%));column-gap:.4rem;row-gap:0;text-align:center;font-family:var(--serif)}
#anker ul li{position:relative;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
#anker ul li:after{content:'';position:absolute;margin:auto;bottom:-.8rem;left:0;right:0;width:1.5rem;height:.9rem;background:#f2d96e;clip-path:polygon(50% 100%,0 0,100% 0)}
#anker ul li a{position:relative;display:block;font-weight:var(--fontSemiBold);font-size:1rem;letter-spacing:.05em;padding:2rem 0 2.4rem}
#anker ul li a:after,#anker ul li a:before{content:'';position:absolute;margin:auto;left:0;background:var(--goldGrad01);width:100%;height:1px}
#anker ul li a:before{top:0}
#anker ul li a:after{bottom:0}
#anker ul li a em{display:block;font-size:2.2rem;font-weight:var(--fontMedium);letter-spacing:.1em;background:var(--goldGrad01);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#anker ul.is-anim li{will-change:opacity,transform;transform:translateY(0);opacity:1}
#anker ul.is-anim li:nth-child(0){transition-delay:0s}
#anker ul.is-anim li:nth-child(1){transition-delay:95ms}
#anker ul.is-anim li:nth-child(2){transition-delay:.19s}
#anker ul.is-anim li:nth-child(3){transition-delay:285ms}
#anker ul.is-anim li:nth-child(4){transition-delay:.38s}
#secret{padding-top:17rem}
#secret .box{position:relative;display:flex;align-items:center;justify-content:space-between}
#secret .box.box02{flex-direction:row-reverse;margin-top:14rem}
#secret .box.box02 .imgBox picture{transform:translateX(-3rem)}
#secret .box .txtBox{font-family:var(--serif);flex-shrink:0;width:49rem}
#secret .box .txtBox p.num{color:var(--gold500);text-align:center;margin-bottom:3rem}
#secret .box .txtBox p.num>span{display:inline-block;width:14.6rem;height:14.6rem;padding-top:4.3rem;letter-spacing:.05em;background:url(../img/secret_num_bg.webp) no-repeat center;background-size:100% auto;line-height:1.2;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:scale(1.3);opacity:0}
#secret .box .txtBox p.num>span em{display:block;font-size:4rem;background:var(--goldGrad01);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.05em}
#secret .box .txtBox p.num>span span.en{display:block;font-size:1rem}
#secret .box .txtBox h2.lead{display:flex;justify-content:center;font-size:4rem;font-weight:var(--fontRegular);line-height:1.3;letter-spacing:.05em;margin-bottom:4rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
#secret .box .txtBox h2.lead span em{font-size:5.2rem}
#secret .box .txtBox p.txt{font-size:1.8rem;letter-spacing:.05em;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
#secret .box .imgBox{width:51.7rem}
#secret .box .imgBox picture{border-radius:4rem;overflow:clip;border:2px solid var(--gold500);transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateX(3rem);opacity:0}
#secret .box.is-anim .txtBox p.num>span{will-change:opacity,transform;transform:scale(1);opacity:1}
#secret .box.is-anim .txtBox h2.lead{will-change:opacity,transform;transform:translateY(0);opacity:1;transition-delay:.6s}
#secret .box.is-anim .txtBox p.txt{will-change:opacity,transform;transform:translateY(0);opacity:1;transition-delay:.75s}
#secret .box.is-anim .imgBox picture{will-change:opacity,transform;transform:translateX(0);opacity:1;transition-delay:.3s}
#pickup{padding-top:22rem}
#pickup .article a{display:block;border-radius:4rem;overflow:clip}
#local{padding-top:22rem}
#local .swiper{overflow:visible;margin:0 -6rem}
#local .swiper .swiper-wrapper .swiper-slide{display:flex;align-items:center;justify-content:space-between;padding:0 6rem}
#local .swiper .swiper-wrapper .swiper-slide .map{flex-shrink:0}
#local .swiper .swiper-wrapper .swiper-slide .map img{width:41.6rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen{width:70rem;min-height:55rem;font-family:var(--serif)}
#local .swiper .swiper-wrapper .swiper-slide .ramen h3.name{font-weight:var(--fontRegular);font-size:4rem;letter-spacing:.05em;line-height:1.3;margin-bottom:3rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen h3.name span{display:block;font-size:3rem;margin-bottom:.5rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen p.txt{line-height:1.8;letter-spacing:.05em}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img{display:flex;align-items:center;justify-content:space-between;margin-top:3rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .product{flex-shrink:0;text-align:center}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .product img{width:40.1rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .store{width:24.9rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .store .thumb{border-radius:1.2rem;overflow:clip}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .store p.link{margin-top:2rem;text-align:center}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .store p.link a{font-family:var(--gothic);display:inline-block;font-size:1.4rem;color:var(--gold500);padding:.2rem 3rem;letter-spacing:.05em;border-radius:9rem;border:1px solid var(--gold500)}
#local .swiper .swiper-button-next,#local .swiper .swiper-button-prev{width:4rem;height:4rem;border-radius:9rem;border:1px solid var(--gold600)}
#local .swiper .swiper-button-next:after,#local .swiper .swiper-button-prev:after{content:'';position:absolute;margin:auto;width:.5rem;height:1rem;background:var(--gold600);mask:url(../img/i_arr.svg) no-repeat center;mask-size:cover}
#local .swiper .swiper-button-prev{left:6rem}
#local .swiper .swiper-button-prev:after{transform:rotate(180deg)}
#local .swiper .swiper-button-next{right:auto;left:46.5rem}
#local .swiper .swiper-pagination{bottom:3rem;left:0;z-index:10;width:60rem;line-height:0}
#local .swiper .swiper-pagination span{position:relative;background:var(--gold600);opacity:1;width:.7rem;height:.7rem;margin:0 .5rem}
#local .swiper .swiper-pagination span:after{content:'';position:absolute;margin:auto;top:-.4rem;left:-.4rem;width:1.5rem;height:1.5rem;border-radius:9rem;border:1px solid var(--gold600);transition:opacity .3s;opacity:0}
#local .swiper .swiper-pagination span.swiper-pagination-bullet-active:after{opacity:1}
#lineup{padding-top:22rem}
#lineup .ttlArea{margin-bottom:9rem}
#lineup .ttlArea h2.ttl{margin-bottom:0}
#lineup .lineupArea{position:relative;height:61.8rem;overflow:clip;background:url(../img/lineup_bg_dark.webp) no-repeat center;background-size:cover!important;color:#583e1b}
#lineup .lineupArea .wrap{display:flex;align-items:center;justify-content:flex-start;height:100%}
#lineup .lineupArea picture.ramen{position:absolute;top:-7rem;right:-60rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateX(5rem);opacity:0}
#lineup .lineupArea picture.ramen img{width:119.8rem}
#lineup .lineupArea .txtBox{width:68rem}
#lineup .lineupArea .txtBox h3.name{font-family:var(--serif);display:flex;align-items:center;column-gap:2rem;line-height:1.3;margin-bottom:3rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
#lineup .lineupArea .txtBox h3.name i.icon{display:flex;align-items:center;justify-content:center;width:8rem;height:8rem;border-radius:9rem;text-align:center;font-size:1.4rem;letter-spacing:.05em;color:var(--white100)}
#lineup .lineupArea .txtBox h3.name i.icon.-red{background:var(--red600)}
#lineup .lineupArea .txtBox h3.name i.icon.-blue{background:#0f4074}
#lineup .lineupArea .txtBox h3.name span.inner{font-size:3.3rem}
#lineup .lineupArea .txtBox h3.name span.inner span{display:block;font-size:2.6rem}
#lineup .lineupArea .txtBox .value{position:relative;padding-right:31.5rem;transition:transform .9s var(--easeOutCubic),opacity .9s var(--easeOutCubic);transform:translateY(3rem);opacity:0}
#lineup .lineupArea .txtBox .value .product{position:absolute;top:0;right:0}
#lineup .lineupArea .txtBox .value .product img{width:28rem}
#lineup .lineupArea .txtBox .value .product p.type{display:flex;align-items:center;justify-content:center;position:absolute;bottom:0;right:0;z-index:10;width:6.7rem;height:6.7rem;border-radius:9rem;background:var(--gold600);color:var(--white100);font-size:1.4rem;letter-spacing:.05em;font-weight:var(--fontSemiBold)}
#lineup .lineupArea .txtBox .value p.txt{text-align:justify;text-justify:inter-ideograph;line-height:1.7;letter-spacing:.05em;font-weight:var(--fontMedium)}
#lineup .lineupArea .txtBox .value p.txt small{display:block;font-size:1.4rem}
#lineup .lineupArea .txtBox .value p.link{text-align:center;margin-top:3rem}
#lineup .lineupArea .txtBox .value p.link span{display:inline-block;background:var(--goldGrad01);padding:2px;border-radius:9rem}
#lineup .lineupArea .txtBox .value p.link span a{display:block;font-weight:var(--fontSemiBold);padding:.7rem 9rem;letter-spacing:.05em;background:var(--white100);color:var(--gold600);border-radius:9rem}
#lineup .lineupArea .txtBox .value p.link span a:hover{opacity:1}
#lineup .lineupArea:nth-child(even){background:url(../img/lineup_bg_light.webp) no-repeat center}
#lineup .lineupArea:nth-child(even) picture.ramen{left:-60rem;right:auto;transform:translateX(-5rem)}
#lineup .lineupArea:nth-child(even) .wrap{justify-content:flex-end}
#lineup .lineupArea.is-anim picture.ramen{will-change:opacity,transform;transform:translateX(0);opacity:1}
#lineup .lineupArea.is-anim .txtBox h3.name{will-change:opacity,transform;transform:translateY(0);opacity:1;transition-delay:.3s}
#lineup .lineupArea.is-anim .txtBox .value{will-change:opacity,transform;transform:translateY(0);opacity:1;transition-delay:375ms}
@media screen and (max-width:767px){
#mainImg{padding:4rem 0 2rem}
#mainImg .wrap{flex-direction:column;align-items:center}
#mainImg .ttlBox{width:100%}
#mainImg .ttlBox .name{padding:0 .8rem;margin-bottom:3rem}
#mainImg .ttlBox .name .logo{width:22rem}
#mainImg .ttlBox .name .catch{width:12.4rem;margin-left:auto}
#mainImg .ttlBox p.lead{font-size:1.3rem}
#mainImg .ttlBox p.en{font-size:1rem;margin-top:2rem}
#mainImg .ttlBox p.en em{font-size:1.3rem;margin-bottom:.3rem}
#mainImg .imgBox{width:36rem;margin-top:1rem}
#mainImg .imgBox .smokeImg{top:auto;bottom:7rem;left:-5.5rem;margin:auto;width:43rem}
#anker ul{grid-template-columns:repeat(2,minmax(0,50%));column-gap:.6rem;row-gap:0}
#anker ul li:nth-child(n+3) a:before{display:none}
#anker ul li a{font-size:.8rem;padding:1.5rem 0}
#anker ul li a em{font-size:1.6rem}
#secret{padding-top:12rem}
#secret .box{flex-direction:column;flex-direction:column-reverse;padding-top:11rem}
#secret .box.box02{flex-direction:column-reverse;margin-top:8rem}
#secret .box.box02 .txtBox h2.lead{text-align:center}
#secret .box .txtBox{width:100%;margin-top:4rem}
#secret .box .txtBox p.num{position:absolute;top:0;left:0;width:100%;margin:0}
#secret .box .txtBox p.num>span{width:8.4rem;height:8.4rem;padding-top:2.6rem}
#secret .box .txtBox p.num>span em{font-size:2.3rem}
#secret .box .txtBox p.num>span span.en{font-size:.6rem}
#secret .box .txtBox h2.lead{font-size:3rem;margin-bottom:2rem}
#secret .box .txtBox h2.lead span em{font-size:4rem}
#secret .box .txtBox p.txt{font-size:1.4rem}
#secret .box .imgBox{width:100%}
#secret .box .imgBox picture{border-radius:2rem}
#pickup{padding-top:15rem}
#pickup .article a{border-radius:2rem}
#local{padding-top:15rem}
#local .swiper .swiper-wrapper .swiper-slide{flex-direction:column}
#local .swiper .swiper-wrapper .swiper-slide .map img{width:32rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen{width:100%;margin-top:7rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen h3.name{font-size:3rem;text-align:center;margin-bottom:2rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen h3.name span{font-size:2rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img{flex-direction:column}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .product img{width:28.4rem}
#local .swiper .swiper-wrapper .swiper-slide .ramen .img .store{margin-top:3rem}
#local .swiper .swiper-button-next,#local .swiper .swiper-button-prev{top:14rem;bottom:auto}
#local .swiper .swiper-button-next{left:auto;right:6rem}
#local .swiper .swiper-pagination{top:36rem;bottom:auto;width:100%}
#lineup{padding-top:15rem}
#lineup .ttlArea{margin-bottom:5rem}
#lineup .lineupArea{height:auto}
#lineup .lineupArea .wrap{padding:9rem 1.5rem 28rem}
#lineup .lineupArea picture.ramen{top:auto;bottom:-13rem;right:auto;left:-5rem;margin:auto}
#lineup .lineupArea picture.ramen img{width:50rem}
#lineup .lineupArea .txtBox h3.name{justify-content:center;column-gap:1rem}
#lineup .lineupArea .txtBox h3.name i.icon{width:5.3rem;height:5.3rem;font-size:.9rem}
#lineup .lineupArea .txtBox h3.name span.inner{font-size:2.2rem}
#lineup .lineupArea .txtBox h3.name span.inner span{font-size:1.8rem}
#lineup .lineupArea .txtBox .value{padding:0}
#lineup .lineupArea .txtBox .value .product{position:relative;text-align:center}
#lineup .lineupArea .txtBox .value .product p.type{right:3.5rem}
#lineup .lineupArea .txtBox .value p.txt{margin-top:2rem}
#lineup .lineupArea .txtBox .value p.link{margin-top:2rem}
#lineup .lineupArea .txtBox .value p.link span a{padding:.8rem 9rem;font-size:1.6rem}
#lineup .lineupArea:nth-child(even) picture.ramen{right:auto;left:-5rem}
}
/*# sourceMappingURL=style.css.map */