@charset "UTF-8";



*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, li { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

button, a {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
em, i, cite, dfn { font-style: normal; }
table { border-collapse: collapse; }



html { font-size: calc(100vw / 192); overflow-x: hidden; }
@media (max-width: 767px) {
  html { font-size: calc(var(--vw, 100vw) / 37.5); overflow-y: scroll; }
}

:root {
  
  --ts: max(calc(100vw / 192), 5px);

  
  --color-ink:            #0d131a;   
  --color-white:          #ffffff;
  --color-brand-yellow:   #fdd000;   
  
  --color-accent-yellow:  #ffe100;
  --color-alert-red:      #e50012;   
  --color-mv-bg:          #f0ede6;
  --color-about-grad-a:   #fff0aa;
  --color-about-grad-b:   #fdd000;
  --color-notice-grad-a:  #87bbff;
  --color-notice-grad-b:  #326ebe;
  --color-info-grad-a:    #ffa014;
  --color-info-grad-b:    #eb5514;
  --color-items1:         #00a63c;
  --color-items2:         #e73921;
  --color-items3:         #77bbe0;
  --color-slide-mid:      #8c8c8c;   
  --color-note-gray:      #a0a0a0;   
  --color-note-gray2:     #aaaaaa;   
  --color-note-bg:        #efefef;
  --color-loading-a:      #0d131a;
  --color-loading-b:      #282d37;
  
  --color-pager-off:      rgba(13, 19, 26, .35);

  
  --ff-jp:      "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-jp-disp: "M PLUS 1p", "Noto Sans JP", sans-serif;
  --ff-disp:    "MuseoModerno", "M PLUS 1p", sans-serif;
  --ff-cond:    "Anton", "Futura", "Arial Narrow", sans-serif; 
  

  
  --fs-floor:        10px;
  --fs-display:      calc(10 * var(--ts));   
  --fs-body:         calc(2.8 * var(--ts));  
  --fs-bnr-label:    calc(2.8 * var(--ts));  
  --fs-h3:           calc(3.2 * var(--ts));  
  --fs-note:         calc(2 * var(--ts));    
  --fs-acc-ttl:      calc(3.5 * var(--ts));  
  --fs-acc-tx:       calc(2.6 * var(--ts));  
  --fs-lead:         calc(3.8 * var(--ts));  
  --fs-item-no:      calc(12 * var(--ts));   
  --fs-item-name:    calc(3.8 * var(--ts));  
  --fs-price:        calc(3.5 * var(--ts));  
  --fs-tax:          calc(2 * var(--ts));    
  
  --fs-btn:          calc(2.4 * var(--ts));  
  --fs-btn-card:     calc(2.4 * var(--ts));  
  --fs-btn-lg:       calc(2.5 * var(--ts));  
  --fs-btn-info:     calc(2.2 * var(--ts));  
  --fs-card-name:    calc(2.4 * var(--ts));  
  --fs-card-size:    max(calc(1.6 * var(--ts)), var(--fs-floor));  
  --fs-copyright:    max(calc(1.6 * var(--ts)), var(--fs-floor));  
  --fs-mv-copyright: max(calc(1.4 * var(--ts)), var(--fs-floor));  
  
  
  --fs-loading:      calc(5.8 * var(--ts));  
  
  --fs-tag:          calc(3.8 * var(--ts));  
  --fs-tag-sm:       calc(2.6 * var(--ts));  
  --fs-nolabel:      max(calc(1.8 * var(--ts)), var(--fs-floor));  

  
  
  
  --mvarw-loop:  2s;
  
  --ld-min: 4640ms;
  
  --ld-row-ease: cubic-bezier(.2, .2, .8, .8);
  --ld-hop:      .6s;
  --ld-cycle:    1.8s;
  
  --ld-tx-cycle:  1.2s;  
  --ld-arw-cycle: 1.2s;  
  --ld-loop:     calc(var(--ld-tx-cycle) + var(--ld-arw-cycle));  
  --ld-tx-wipe:  100%;   
  --ld-tx-bleed: 100%;   
  --ld-tx-ease:  cubic-bezier(.45, 0, .25, 1);   
  --ld-tx-skip:  .06667; 
  --ld-arw-idle: 0;      
  
  --mv-start:      .35s;   
  --mv-chara-dur:  .9s;    
  --mv-chara-step: .45s;   
  --mv-chara-from: .55;    
  
  --mv-chara-bounce: 1.6;
  
  --mv-chara-ease: cubic-bezier(.34, var(--mv-chara-bounce), .64, 1);
  --mv-no-wait:    .1s;    
  --mv-no-dur:     .8s;    
  --mv-no-wipe:    100%;   
  --mv-no-ease:    cubic-bezier(.16, 1, .3, 1);    
  
  --gnav-dur:    .5s;
  --gnav-ease:   cubic-bezier(.4, 0, .2, 1);
  
  
  --btn-dur:     .35s;
  --btn-ease:    cubic-bezier(.2, .7, .3, 1);
  --btn-scale:   1.04;     
  --btn-arw-move: 1.8rem;  
  
  --deck-dur:    .4s;
  --deck-ease:   cubic-bezier(.3, 0, .2, 1);
  --deck-swing:  4rem;
  --deck-tilt:   7deg;
  --deck-pop:    1.03;
  --deck-drop:   .6rem;
  
  --tx-dur:      .18s;
  --tx-ease:     ease;
  
  --slide-dur:   .3s;
  --slide-ease:  ease;
  
  --ui-dur:      .4s;
  --ui-ease:     cubic-bezier(.2, .7, .3, 1);
  
  --ui-scale:    1.04;
  
  --rv-dur:      .8s;
  --rv-ease:     cubic-bezier(.2, .7, .3, 1);
  --rv-move:     3rem;
  --rv-margin:   12%;
  --rv-stagger:  .06s;
  
  
  --ab-reveal:     90%;
  --ab-delay:      0s;
  --ab-gap:        .28s;
  
  --ab-dur:        .9s;
  --ab-ease:       cubic-bezier(.22, .85, .28, 1);
  --ab-rot-1:      -12deg;
  --ab-rot-2:      14deg;
  --ab-scale-from: 1.24;
  --ab-bounce:     .06;
  --ab-move:       1rem;
  --ab-origin:     50% 50%;
  
  --mq-dur:      30s;

  
  --stripe-btn:    repeating-linear-gradient(180deg, rgba(255,255,255,.15) 0 .2rem, transparent .2rem .6rem);
  
  --stripe-card:   repeating-linear-gradient(180deg, transparent 0 .8rem, rgba(255,255,255,.20) .8rem 1.2rem);
  --stripe-notice: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 .4rem, transparent .4rem 1.2rem);
  
  --stripe-load:   repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 .4rem, transparent .4rem 1.2rem);
}

@media (max-width: 767px) {
  :root {
    --ts: 1rem;
    --fs-display:      calc(4.8 * var(--ts));
    --fs-body:         calc(1.6 * var(--ts));
    --fs-bnr-label:    calc(1.3 * var(--ts));
    --fs-h3:           calc(1.9 * var(--ts));
    --fs-note:         calc(1.4 * var(--ts));
    --fs-acc-ttl:      calc(1.8 * var(--ts));
    --fs-acc-tx:       calc(1.5 * var(--ts));
    --fs-lead:         calc(2.2 * var(--ts));
    --fs-item-no:      calc(6 * var(--ts));
    --fs-item-name:    calc(2 * var(--ts));
    --fs-price:        calc(2.2 * var(--ts));
    --fs-tax:          calc(1.2 * var(--ts));
    --fs-btn:          calc(1.6 * var(--ts));
    --fs-btn-card:     calc(1.4 * var(--ts));
    --fs-btn-lg:       calc(1.6 * var(--ts));
    --fs-btn-info:     calc(1.6 * var(--ts));
    --fs-card-name:    calc(1.4 * var(--ts));
    --fs-card-size:    calc(1.2 * var(--ts));
    --fs-copyright:    calc(1.6 * var(--ts));
    
    --fs-mv-copyright: max(calc(1 * var(--ts)), var(--fs-floor));
    --fs-loading:      calc(3 * var(--ts));
    --fs-tag:          calc(1.8 * var(--ts));   
    --fs-tag-sm:       calc(1.2 * var(--ts));   
    --fs-nolabel:      max(calc(1 * var(--ts)), var(--fs-floor));

    
    --ab-dur:        .62s;   
    --ab-rot-1:      -7deg;
    --ab-rot-2:      9deg;
    --ab-scale-from: 1.08;
    --ab-move:       .8rem;

    
    --mq-dur: 52s;

    
    --deck-swing: 1.9rem;
    --deck-drop:  .3rem;

    
    --stripe-card:   repeating-linear-gradient(180deg, transparent 0 .4rem, rgba(255,255,255,.20) .4rem .6rem);
    
    --stripe-notice: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 .2rem, transparent .2rem .6rem);
    
    --stripe-load:   repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 .2rem, transparent .2rem .6rem);
  }
}


body {
  font-family: var(--ff-jp);
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-white);
  
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.l-wrap { position: relative; width: 100%; overflow-x: clip; }
.u-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.c-display {
  position: relative;
  height: 8rem;            
  font-family: var(--ff-disp);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 8rem;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
}

.c-display picture { display: block; }
.c-display img {
  position: absolute;
  left: 50%;
  top: calc(4rem - .40333em);       
  width: calc(var(--dw) * 1em);
  height: .86667em;
  margin-left: calc(var(--dx) * 1em);
  max-width: none;                  
}
.p-notice__ttl { --dw: 4.14333; --dx: -2.096667; }
.p-items__ttl  { --dw: 3.62;    --dx: -1.836667; }
.p-info__ttl   { --dw: 8.52333; --dx: -4.296667; }

@media (max-width: 767px) {
  .c-display {
    height: 3.5rem; line-height: 3.5rem;
    
    letter-spacing: .05em;
  }
  .c-display img { top: calc(1.75rem - .41319em); height: .875em; }
  .p-notice__ttl { --dw: 4.104167; --dx: -2.072917; }
  .p-items__ttl  { --dw: 3.590278; --dx: -1.8159722; }
  
  .p-info__ttl   { --dw: 8.350877; --dx: -4.1973684; }
  .p-info__ttl img { top: calc(1.6rem - .43em); height: .921053em; }
}


.c-outline {
  color: var(--color-white);
  -webkit-text-stroke: .6rem var(--color-ink);
  paint-order: stroke fill;
}
@media (max-width: 767px) { .c-outline { -webkit-text-stroke: .3rem var(--color-ink); } }


.c-btn-pill {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 15rem;
  background-color: var(--color-ink);
  background-image: var(--stripe-btn);
  color: var(--color-white);
  font-family: var(--ff-jp-disp);
  font-weight: 800;
  font-size: var(--fs-btn);
  
  line-height: max(2.4rem, 1em);
  letter-spacing: .03em;
  
  text-align: center;
  transition: transform .2s ease, filter .2s ease;
}

.c-btn-pill:focus-visible { filter: brightness(1.35); }
@media (hover: hover) {
  .c-btn-pill:hover { filter: brightness(1.35); }
}




.c-btn-yellow {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 15rem;
  background: var(--color-brand-yellow);
  border: .4rem solid var(--color-ink);
  color: var(--color-ink);
  font-family: var(--ff-jp-disp);
  
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;   
  
  transition: transform var(--btn-dur) var(--btn-ease);
}
.c-btn-yellow__arrow {
  position: absolute; top: 50%; right: 4rem; width: 5.2rem; height: 1.6rem;
  transform: translateY(-50%);
  transition: transform var(--btn-dur) var(--btn-ease);
}

@media (min-width: 768px) and (hover: hover) {
  .c-btn-yellow:has(.c-btn-yellow__arrow):hover,
  .c-btn-yellow:has(.c-btn-yellow__arrow):focus-visible {
    transform: scale(var(--btn-scale));
  }
  .c-btn-yellow:has(.c-btn-yellow__arrow):hover  .c-btn-yellow__arrow,
  .c-btn-yellow:has(.c-btn-yellow__arrow):focus-visible .c-btn-yellow__arrow {
    transform: translate(var(--btn-arw-move), -50%);
  }
}
@media (max-width: 767px) {
  .c-btn-yellow { border-width: .2rem; }
  .c-btn-yellow__arrow { right: 2rem; width: 2.6rem; height: .8rem; }
}


.c-pcard { position: relative; }
.c-pcard__face {
  position: absolute; inset: 0;
  background: var(--color-white);
  border: .4rem solid var(--color-ink);
  border-radius: 3rem;
}
.c-pcard__body { position: relative; z-index: 2; }
@media (max-width: 767px) {
  .c-pcard__face { border-width: .2rem; border-radius: 1.5rem; }
}


.c-mq {
  position: relative;
  width: 100%;
  height: 14rem;
  background: var(--color-brand-yellow);
  border-top: .4rem solid var(--color-ink);
  border-bottom: .4rem solid var(--color-ink);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.c-mq__track { display: flex; flex: none; margin-left: -3rem; animation: mq-slide var(--mq-dur) linear infinite; }
.c-mq__set { display: flex; flex: none; }

.c-mq__item { flex: none; width: 26.008rem; }
.c-mq__item:nth-child(odd)  { margin-right: 3.98399rem; }  
.c-mq__item:nth-child(even) { margin-right: 3.8rem; }      

.c-mq__word {
  display: block; width: 100%; height: 7.498rem; overflow: visible;
  stroke-width: 8; stroke-linejoin: round;
  paint-order: stroke fill;
}

#mq-pc, #mq-sp { overflow: visible; }
.c-mq--white { background: var(--color-white); }
.c-mq__item:nth-child(odd)  .c-mq__word { fill: var(--color-ink);   stroke: transparent; }
.c-mq__item:nth-child(even) .c-mq__word { fill: var(--color-white); stroke: var(--color-ink); }

.c-mq--blink .c-mq__word { animation: mq-swap 2.4s steps(1, end) infinite; }
.c-mq--blink .c-mq__item:nth-child(odd)  .c-mq__word { animation-delay: 0s; }
.c-mq--blink .c-mq__item:nth-child(even) .c-mq__word { animation-delay: -1.2s; }
@keyframes mq-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mq-swap {
  0%, 49.99% { fill: var(--color-ink);   stroke: transparent; }
  50%, 100%  { fill: var(--color-white); stroke: var(--color-ink); }
}
@media (max-width: 767px) {
  .c-mq { height: 6.9rem; border-top-width: .2rem; border-bottom-width: .2rem; }
  
  .c-mq__track { margin-left: -1.6rem; }
  
  .c-mq__item, .c-mq__item:nth-child(odd), .c-mq__item:nth-child(even) { width: 13.2rem; margin-right: 1.5rem; }
  
  .c-mq__word { height: 3.8rem; stroke-width: 4; }
}



.c-arw { position: absolute; overflow: visible; }
.c-arw path { fill: none; stroke: currentColor; stroke-linecap: square; }

.p-mv__chev .c-arw path, .p-loading__arw .c-arw path, .p-mv__arwsp .c-arw path { stroke-linecap: butt; }
.c-arw__c { opacity: 0; animation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; }


.c-arw--3 .c-arw__c {
  opacity: 1;
  animation: none;
}



.c-arw--ld .c-arw__c {
  opacity: 1;
  animation: none;
}


@keyframes arwld-lp-1 {
  0%               { opacity: .2; animation-timing-function: steps(1, end); }
  6.667%, 49.995%  { opacity: var(--ld-arw-idle); }  
  50%,     70.828% { opacity: 1; }    
  70.833%, 91.662% { opacity: .5; }
  91.667%, 100%    { opacity: .2; }
}
@keyframes arwld-lp-2 {
  0%               { opacity: .5; animation-timing-function: steps(1, end); }
  6.667%, 49.995%  { opacity: var(--ld-arw-idle); }
  50%,     70.828% { opacity: 0; }
  70.833%, 91.662% { opacity: 1; }
  91.667%, 100%    { opacity: .5; }
}
@keyframes arwld-lp-3 {
  0%               { opacity: 1; animation-timing-function: steps(1, end); }
  6.667%, 49.995%  { opacity: var(--ld-arw-idle); }
  50%,     91.662% { opacity: 0; }
  91.667%, 100%    { opacity: 1; }
}

@keyframes arwld-1 {
  0%,   24.99% { opacity: 0; }
  25%,  49.99% { opacity: 1; }
  50%,  74.99% { opacity: .5; }
  75%,  100%   { opacity: .2; }
}
@keyframes arwld-2 {
  0%,   49.99% { opacity: 0; }
  50%,  74.99% { opacity: 1; }
  75%,  100%   { opacity: .5; }
}
@keyframes arwld-3 {
  0%,   74.99% { opacity: 0; }
  75%,  100%   { opacity: 1; }
}
@keyframes arw3-1 {
  0%,   24.99% { opacity: 0; }
  25%,  49.99% { opacity: 1; }
  50%,  74.99% { opacity: .8; }
  75%,  100%   { opacity: .5; }
}
@keyframes arw3-2 {
  0%,   49.99% { opacity: 0; }
  50%,  74.99% { opacity: 1; }
  75%,  100%   { opacity: .8; }
}
@keyframes arw3-3 {
  0%,   74.99% { opacity: 0; }
  75%,  100%   { opacity: 1; }
}


.c-arw--4 .c-arw__c {
  opacity: 1;
  animation: none;
}



.p-mv__chev,
.p-mv__arwsp {
  animation: mvarw-wipe var(--mvarw-loop) var(--ld-row-ease) infinite;
}

.p-mv__arwsp:nth-of-type(2) {
  animation-name: mvarw-wipe-2;
}
@keyframes mvarw-wipe {
  0%, 15% {   
    -webkit-clip-path: inset(-100% 100% -100% 0%);
            clip-path: inset(-100% 100% -100% 0%);
  }
  47.5%, 100% {   
    -webkit-clip-path: inset(-100% 0% -100% 0%);
            clip-path: inset(-100% 0% -100% 0%);
  }
}
@keyframes mvarw-wipe-2 {
  0%, 47.5% {   
    -webkit-clip-path: inset(-100% 100% -100% 0%);
            clip-path: inset(-100% 100% -100% 0%);
  }
  80%, 100% {   
    -webkit-clip-path: inset(-100% 0% -100% 0%);
            clip-path: inset(-100% 0% -100% 0%);
  }
}



.c-arw--4 .c-arw__c {
  opacity: 1;
  animation: none;
}


@keyframes arw4-1 {
  0%,   19.99% { opacity: 0; }
  20%,  39.99% { opacity: 1; }
  40%,  59.99% { opacity: .8; }
  60%,  79.99% { opacity: .5; }
  80%,  100%   { opacity: .2; }
}
@keyframes arw4-2 {
  0%,   39.99% { opacity: 0; }
  40%,  59.99% { opacity: 1; }
  60%,  79.99% { opacity: .8; }
  80%,  100%   { opacity: .5; }
}
@keyframes arw4-3 {
  0%,   59.99% { opacity: 0; }
  60%,  79.99% { opacity: 1; }
  80%,  100%   { opacity: .8; }
}
@keyframes arw4-4 {
  0%,   79.99% { opacity: 0; }
  80%,  100%   { opacity: 1; }
}


.p-loading {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-image: var(--stripe-load),
    linear-gradient(180deg, var(--color-loading-a) 40%, var(--color-loading-b) 100%);
  transition: opacity .6s ease, visibility .6s ease;
}
.p-loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.p-loading__inner {
  position: absolute; left: 0; right: 0; top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.p-loading__balls { display: flex; align-items: flex-end; gap: 5rem; height: 8.1rem; }

.p-loading__ball {
  width: 8rem; height: 8.1rem;
     
}




@keyframes ball-hop {
  0%       { transform: translateY(0);
             animation-timing-function: cubic-bezier(.2, .6, .35, 1); }   
  23.333%  { transform: translateY(-2.4rem);
             animation-timing-function: cubic-bezier(.55, 0, .9, .45); }  
  33.333%, 100% { transform: translateY(0); }                             
}


.p-loading__row { display: flex; align-items: flex-start; gap: 2rem; margin-top: 8rem; }
.p-loading__tx {
  animation: ld-wipe var(--ld-loop) var(--ld-tx-ease)
             calc(-1 * var(--ld-tx-skip) * var(--ld-loop))
             infinite backwards;
}
.p-loading__arw {
  animation: ld-arw-wipe var(--ld-loop) var(--ld-tx-ease)
             calc(-1 * var(--ld-tx-skip) * var(--ld-loop))
             infinite backwards;
}


.p-loading__tx {
  font-family: var(--ff-disp);
  font-weight: 800;
  font-size: var(--fs-loading);
  line-height: 4rem;   
  letter-spacing: .03em;
  color: var(--color-white);
  
  
}

@keyframes ld-wipe {
  0% {   
    -webkit-clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
            clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
    animation-timing-function: steps(1, end);
  }
  6.667%, 10% {   
    -webkit-clip-path: inset(calc(-1 * var(--ld-tx-bleed)) var(--ld-tx-wipe) calc(-1 * var(--ld-tx-bleed)) 0%);
            clip-path: inset(calc(-1 * var(--ld-tx-bleed)) var(--ld-tx-wipe) calc(-1 * var(--ld-tx-bleed)) 0%);
    
  }
  50%, 100% {   
    -webkit-clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
            clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
  }
}

@media (scripting: none) {
  .p-loading__tx {
    animation: none;
    -webkit-clip-path: none; clip-path: none;
    opacity: 1;
  }
  
  
  .p-loading .p-loading__tx,
  .p-loading .p-loading__arw {
    animation: none;
    -webkit-clip-path: none; clip-path: none;
  }
}



.p-loading.is-hidden .p-loading__tx,
.p-loading.is-hidden .p-loading__arw {
  animation: none;
  -webkit-clip-path: none; clip-path: none;
}


.p-loading__arw {
  position: relative; width: 9.2rem; height: 4.3rem; margin-top: -.15rem; color: var(--color-white);
  
}
@keyframes ld-arw-wipe {
  0% {   
    -webkit-clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
            clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
    animation-timing-function: steps(1, end);   
  }
  6.667%, 50% {   
    -webkit-clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 100% calc(-1 * var(--ld-tx-bleed)) 0%);
            clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 100% calc(-1 * var(--ld-tx-bleed)) 0%);
    
  }
  90%, 100% {   
    -webkit-clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
            clip-path: inset(calc(-1 * var(--ld-tx-bleed)) 0% calc(-1 * var(--ld-tx-bleed)) 0%);
  }
}
@media (max-width: 767px) {
  
  .p-loading__balls { gap: 2rem; height: 4rem; }
  .p-loading__ball { width: 4rem; height: 4rem; }
  .p-loading__row { gap: 1rem; margin-top: 4rem; }
  .p-loading__tx { line-height: 2rem; }
  
  .p-loading__arw { width: 5rem; height: 2.4rem; margin-top: 0; }
  
  @keyframes ball-hop {
    0%       { transform: translateY(0);
               animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
    23.333%  { transform: translateY(-1.2rem);
               animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
    33.333%, 100% { transform: translateY(0); }
  }
}



.p-menubtn { position: fixed; top: 0; right: 0; z-index: 700; width: 13.4rem; height: 9.4rem; }

.p-menubtn.is-autofocus:focus,
.p-menubtn.is-autofocus:focus-visible { outline: none; }
.p-menubtn img { width: 100%; height: 100%; }
.p-menubtn.is-open { display: none; }


.p-cta {
  position: fixed; right: 0; bottom: 16.6rem; z-index: 690; width: 25.9rem; height: 12.3rem;
  
  transform-origin: 100% 50%;
  transition: transform var(--ui-dur) var(--ui-ease);
}
.p-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-cta__ico { position: absolute; left: 7.4rem; top: 3.9rem; width: 3.5rem; height: 3.5rem; }  

.p-cta__tx {
  position: absolute; left: 12.4rem; top: 2.8rem; width: 12rem;
  font-family: var(--ff-jp-disp); font-weight: 800;
  font-size: calc(2.2 * var(--ts)); line-height: max(2.8rem, 1em); letter-spacing: .1em;
  text-align: center; white-space: nowrap;   
  color: var(--color-white);
}
.p-cta img.p-cta__sp { display: none; }


.p-pagetop {
  position: fixed; right: 2.8rem; bottom: 3.8rem; z-index: 690; width: 9.4rem; height: 9.4rem;
  transform-origin: 50% 50%;   
  transition: transform var(--ui-dur) var(--ui-ease);
}
.p-pagetop img { width: 100%; height: 100%; }


.p-cta.is-reveal, .p-pagetop.is-reveal {
  opacity: 0;
  visibility: hidden;
  transition: transform var(--ui-dur) var(--ui-ease),
              opacity var(--ui-dur) var(--ui-ease),
              visibility 0s linear var(--ui-dur);
}
.p-cta.is-reveal.is-shown, .p-pagetop.is-reveal.is-shown {
  opacity: 1; visibility: visible; transition-delay: 0s;
}


@media (min-width: 768px) and (hover: hover) {
  .p-cta:hover, .p-cta:focus-visible,
  .p-pagetop:hover, .p-pagetop:focus-visible { transform: scale(var(--ui-scale)); }
}

@media (max-width: 767px) {
  
  .p-menubtn { top: 0; right: 0; width: 6.7rem; height: 4.7rem; }
  
  .p-cta { right: 0; bottom: 7.8rem; width: 12.3rem; height: 5.4rem; }
  .p-cta__bg, .p-cta__ico, .p-cta__tx { display: none; }
  .p-cta img.p-cta__sp { display: block; width: 100%; height: 100%; }
  
  .p-pagetop { right: 1.4rem; bottom: 1.9rem; width: 4.7rem; height: 4.7rem; }
}



.p-gnav {
  position: fixed; inset: 0; z-index: 800;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--gnav-dur);
}
.p-gnav.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.p-gnav__panel {
  position: absolute; top: -1rem; bottom: -1rem;
  width: 60.5rem;
  background: var(--color-ink);
  border: .4rem solid var(--color-white);
  
  right: -61.6rem;
  
  transition: right var(--gnav-dur) var(--gnav-ease);
  display: grid;
  align-content: center;
}

.p-gnav.is-open .p-gnav__panel { right: -1.1rem; }

.p-gnav__close { position: absolute; top: .6rem; right: .7rem; z-index: 3; width: 13.4rem; height: 9.4rem; }
.p-gnav__close img { width: 100%; height: 100%; }
.p-gnav__list { position: relative; z-index: 2; padding-left: 9.6rem; }
.p-gnav__item + .p-gnav__item { margin-top: 6rem; }
.p-gnav__link {
  display: flex; align-items: flex-start; gap: 3rem;
  height: 4rem;                     
  color: var(--color-white);
  transition: color .2s ease;
  width: max-content;
}

.p-gnav__label { display: block; flex: none; }

.p-gnav__glyph { display: block; width: 100%; height: 100%; }
.p-gnav__item:nth-child(1) .p-gnav__label {
  width: 15.4192rem; height: 3.97915rem; margin: -.0295rem 0 0 .0303rem;
}
.p-gnav__item:nth-child(2) .p-gnav__label {
  width: 15.8303rem; height: 3.99923rem; margin: -.0303rem 0 0 .2697rem;
}
.p-gnav__item:nth-child(3) .p-gnav__label {
  width: 13.2469rem; height: 3.97407rem; margin: -.0303rem 0 0 .2697rem;
}
.p-gnav__item:nth-child(4) .p-gnav__label {
  width: 32.4469rem; height: 3.97309rem; margin: -.0303rem 0 0 .2697rem;
}

.p-gnav__ball { position: relative; margin-top: .2rem; width: 3.5rem; height: 3.5rem; flex: none; }
.p-gnav__ball img { position: absolute; inset: 0; width: 100%; height: 100%; }

.p-gnav__ball img.is-on { opacity: 0; }
@media (hover: hover) {
  .p-gnav__link:hover { color: var(--color-brand-yellow); }
}
@media (min-width: 768px) and (hover: hover) {
  .p-gnav__link:hover .p-gnav__ball img.is-off { opacity: 0; }
  .p-gnav__link:hover .p-gnav__ball img.is-on  { opacity: 1; }
}

.p-gnav__link:focus-visible .p-gnav__ball img.is-off { opacity: 0; }
.p-gnav__link:focus-visible .p-gnav__ball img.is-on  { opacity: 1; }
.p-gnav__link:focus-visible { color: var(--color-brand-yellow); outline: none; }

@media (max-width: 767px) {
  
  .p-gnav__panel { top: 0; right: -100%; bottom: 0; width: 100%; border: 0; }
  .p-gnav.is-open .p-gnav__panel { right: 0; }
  
  .p-gnav__close { top: 0; right: 0; width: 6.7rem; height: 4.7rem; }
  .p-gnav__list { padding-left: 5rem; }
  .p-gnav__item + .p-gnav__item { margin-top: 5rem; }
  .p-gnav__link { gap: 2rem; height: 3rem; }   
  
  .p-gnav__ball { margin-top: .5rem; width: 2rem; height: 2rem; }
  
  .p-gnav__item:nth-child(1) .p-gnav__label {
    width: 9.2661rem; height: 2.39125rem; margin: .3004rem 0 0 .0169rem;
  }
  .p-gnav__item:nth-child(2) .p-gnav__label {
    width: 9.5005rem; height: 2.40013rem; margin: .3rem 0 0 .1697rem;
  }
  .p-gnav__item:nth-child(3) .p-gnav__label {
    width: 7.9374rem; height: 2.38122rem; margin: .3033rem 0 0 .1697rem;
  }
  .p-gnav__item:nth-child(4) .p-gnav__label {
    width: 19.5303rem; height: 2.39147rem; margin: .3rem 0 0 .1697rem;
  }
  
  .p-gnav__link:focus-visible {
    color: var(--color-white);
    outline: .2rem solid var(--color-white);
    outline-offset: .6rem;
  }
  .p-gnav__link:focus-visible .p-gnav__ball img.is-off { opacity: 1; }
  .p-gnav__link:focus-visible .p-gnav__ball img.is-on  { opacity: 0; }
  .p-gnav.is-autofocus .p-gnav__link:focus-visible { outline: none; }

  
  @media (hover: hover) { .p-gnav__link:hover { color: var(--color-white); } }
}


.l-footer { position: relative; }
.l-footer__pokemon { background: var(--color-white); height: 35.6rem; position: relative; }

.l-footer__logo { position: absolute; left: 78.6rem; top: 8rem; width: 34.8rem; height: 12rem; }

.l-footer__rights {
  position: absolute; left: 0; right: 0; top: 24rem;
  text-align: center;
  font-size: var(--fs-copyright); font-weight: 500; line-height: 1.6rem; letter-spacing: .05em;
  color: var(--color-ink);
}
.l-footer__3coins { background: var(--color-ink); height: 45.6rem; position: relative; }

.l-footer__3logo { position: absolute; left: 86.2rem; top: 10rem; width: 19.7rem; height: 4rem; }
.l-footer__3logo img { width: 100%; height: 100%; }
.l-footer__sns { position: absolute; left: 80.6rem; top: 20rem; width: 30.8rem; height: 6rem; }
.l-footer__sns a { position: absolute; top: 0; }
.l-footer__sns a:nth-child(1) { left: 0; width: 6rem; height: 6rem; }
.l-footer__sns a:nth-child(2) { left: 12rem; top: .2rem; width: 5.2rem; height: 5.5rem; }
.l-footer__sns a:nth-child(3) { left: 22.2rem; width: 8.6rem; height: 6rem; }
.l-footer__sns img { width: 100%; height: 100%; }
.l-footer__copy {
  position: absolute; left: 0; right: 0; top: 32rem;
  text-align: center;
  font-size: var(--fs-copyright); font-weight: 500; line-height: 1.6rem; letter-spacing: .05em;
  color: var(--color-white);
}
@media (max-width: 767px) {
  .l-footer__pokemon { height: 18.1rem; }
  
  .l-footer__logo { left: 10.1rem; top: 0; width: 17.4rem; height: 6rem; }
  
  .l-footer__rights { left: 2.5rem; right: 2.5rem; top: 7.5rem; line-height: 2.8rem; }
  .l-footer__copy   { left: 2.5rem; right: 2.5rem; }
  
  .l-footer__3coins { height: 35rem; }
  .l-footer__3logo { left: 13.3rem; top: 5.1rem; width: 10.8rem; height: 2.2rem; }
  .l-footer__sns { left: 9.5rem; top: 10.8rem; width: 18.3rem; height: 3.5rem; }
  .l-footer__sns a:nth-child(1) { left: 0; width: 3.5rem; height: 3.5rem; }
  .l-footer__sns a:nth-child(2) { left: 7.1rem; top: .2rem; width: 3rem; height: 3.2rem; }
  .l-footer__sns a:nth-child(3) { left: 13.3rem; width: 5rem; height: 3.5rem; }
  .l-footer__copy { top: 17.3rem; }
}


.js-rv {
  opacity: 0;
  translate: 0 var(--rv-move);
  transition: opacity var(--rv-dur) var(--rv-ease),
              translate var(--rv-dur) var(--rv-ease);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-stagger));
}
.js-rv.is-in { opacity: 1; translate: none; }



@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  
  
  .p-cta, .p-pagetop { opacity: 1 !important; visibility: visible !important; }
  .c-arw__c { opacity: 1 !important; }
  
  .p-mv__chev, .p-mv__arwsp {
    animation: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
    opacity: 1 !important;
  }
  
  .p-loading__arw {
    animation: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
  }
  
  .p-loading__tx {
    animation: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
    opacity: 1 !important;   
  }
  
  .js-rv { opacity: 1 !important; translate: none !important; }
  
  .p-about__card1, .p-about__card2 {
    animation: none !important;
    opacity: 1 !important; translate: none !important;
    rotate: none !important; scale: none !important;
  }
}


.nomotion .p-loading { display: none; }
.nomotion .c-mq__track { animation: none; }
.nomotion .c-mq__word { animation: none; }
.nomotion .c-arw__c { animation: none; opacity: 1; }

.nomotion .p-mv__chev,
.nomotion .p-mv__arwsp {
  animation: none;
  -webkit-clip-path: none; clip-path: none;
  opacity: 1;
}

.nomotion .p-loading__tx,
.nomotion .p-loading__arw {
  animation: none;
  -webkit-clip-path: none; clip-path: none;
}

.nomotion .p-loading__ball { animation: none; }

.nomotion .p-loading__tx {
  animation: none;
  -webkit-clip-path: none; clip-path: none;
  opacity: 1;
}

.nomotion .p-cta, .nomotion .p-pagetop { opacity: 1; visibility: visible; }

.nomotion .js-rv { opacity: 1; translate: none; transition: none; }

.nomotion .p-about__card1, .nomotion .p-about__card2 {
  animation: none; opacity: 1;
  translate: none; rotate: none; scale: none;
}


.c-arw { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-mv__chev, .p-loading__arw, .p-mv__arwsp, .p-about__arw { position: relative; display: block; }
.p-mv__chev, .p-about__arw { position: absolute; }


.u-sp { display: none; }
br.u-pc { display: inline; }
br.u-sp { display: none; }
.u-spflex { display: none !important; }
@media (max-width: 767px) {
  .u-pc { display: none; }
  .u-sp { display: block; }
  br.u-pc { display: none; }
  br.u-sp { display: inline; }
  .u-pcflex { display: none !important; }
  .u-spflex { display: flex !important; }
}