:root{
    --green:#25FF74;
    --green-hi:#7bffb0;
    --green-dk:#0a3a22;
    --ink-on-green:#06311c;
    --pink:#FF00CC;
    --bg:#07060c;
    --panel:#0a0910;
    --ink:#ffffff;
    --muted:#f3f3f3;
    --sb: clamp(calc(var(--px) * 158), 15.5vw, calc(var(--px) * 196));
    --pad: calc(var(--px) * 14);

    --font-lores: "lores-9-wide", sans-serif;

    --design-width: 1200;
    --px: calc(100vw / var(--design-width));

  }

  @media (max-width: 767px){
    :root{ --design-width: 375; }
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family: 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    font-weight: 700;
  }
  body.no-scroll{ overflow:hidden; }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
  :focus-visible{ outline:calc(var(--px) * 3) solid var(--green); outline-offset:calc(var(--px) * 2); }
  li{list-style: none;}
  .u-br-sp {display: none;}

  img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  }
  a,
  button,
  img {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }

  a:focus,
  a:focus-visible,
  a:active,
  button:focus,
  button:focus-visible,
  button:active {
    outline: none;
  }

  @media (max-width: 767px) {
    .u-br-pc { display: none;}
    .u-br-sp { display: inline;}
  }

   /* ===================== アニメーション ===================== */
  .glitch-reveal {
    opacity: 0;
    visibility: hidden;
  }

  .glitch-reveal.is-glitching,
  .glitch-reveal.is-visible {
    visibility: visible;
    opacity: 1;
  }

  .glitch-reveal.is-glitching > img,
  .glitch-reveal.is-glitching {
    filter: contrast(1.8) brightness(1.4);
    animation: glitchReveal .45s steps(2, end) 1;
  }

  @keyframes glitchReveal {
  0% { clip-path: inset(0 0 80% 0); transform: translateX(calc(var(--px) * -8)); }
  25% { clip-path: inset(30% 0 30% 0); transform: translateX(calc(var(--px) * 6)); }
  50% { clip-path: inset(70% 0 0 0); transform: translateX(calc(var(--px) * -4)); }
  75% { clip-path: inset(10% 0 60% 0); transform: translateX(calc(var(--px) * 3)); }
  100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
  }

  /* ===================== HERO / MV ===================== */
  .hero{
    position:relative;
    height:100vh;
    min-height: calc(var(--px) * 600);
    max-height: calc(var(--px) * 1200);
    margin-right:var(--sb);
    background:var(--bg);
    overflow:hidden;
    image-rendering:pixelated;
    image-rendering:-moz-crisp-edges;
  }
  .hero__bg{ position:absolute; inset:0; display:block; }
  .hero__bg img{ display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
  .hero__float{ position:absolute; left:50%; transform:translateX(-50%); pointer-events:none; }
  .hero__float img{ display:block; width:100%; height:auto;  will-change:transform,opacity; image-rendering:pixelated; }
  .hero__logo{ top: calc(50% - 22%); transform: translate(-50%, -50%); width:calc(var(--px) * 554); z-index:2; }
  .hero__set { top: calc(50% - -18%); transform: translate(-50%, -50%); width:calc(var(--px) * 444); z-index:1; }
  .hero__scroll{
    position:absolute;
    left:50%;
    top: calc(50% + 41%);
    transform: translate(-50%, -50%);
    width: calc(var(--px) * 50);
    z-index:3;
    display:block;
    image-rendering:pixelated;
  }

@media (prefers-reduced-motion: reduce){
  .hero__bg, .hero__logo, .hero__scroll{ animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
  .hero__set{ animation: none !important; opacity: 1 !important; transform: translate(-50%, -50%) !important; }
  .hero__bg{ transform: none !important; }
}



  /* ===================== PC SIDEBAR ===================== */
  .sidebar{
    position:fixed;
    top:0; right:0;
    width: calc(var(--px) * 181);
    height:100vh;
    height:100dvh;
    z-index:50;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(78,230,143,.06), transparent 60%),
      linear-gradient(180deg, #0c0b14 0%, #08070e 100%);
    border-left:calc(var(--px) * 1) solid rgba(255,255,255,.06);
    box-shadow:calc(var(--px) * -8) 0 calc(var(--px) * 30) rgba(0,0,0,.55);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:clamp(calc(var(--px) * 8),1.7vh,calc(var(--px) * 14));
    padding: clamp(calc(var(--px) * 27), 1.6vh, calc(var(--px) * 25)) calc(var(--px) * 10);
    overflow-y:auto;
  }
  .sb-logo{ padding:calc(var(--px) * 2) calc(var(--px) * 6) calc(var(--px) * 4); }
  .sb-logo img{ width:100%; image-rendering:pixelated; }

  .sb-nav{ display:flex; flex-direction:column; gap:clamp(calc(var(--px) * 7),1vh,calc(var(--px) * 11)); }
  .nav-btn{
    position: relative;
    z-index: 0;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    font-family:"Press Start 2P", monospace;
    font-size: calc(var(--px) * 10);
    letter-spacing: calc(var(--px) * 0.5);
    color: var(--ink);
    padding: clamp(calc(var(--px) * 18), 2.95vh, calc(var(--px) * 28)) calc(var(--px) * 6);
    background: transparent;
    border: none;
    /* text-shadow: 0 0 calc(var(--px) * 6) rgba(255,255,255,.5); */
    transition: filter .15s ease, transform .12s ease;
  }

  /* ボタンの色付き本体（クリップされた六角形の形はここに持たせる） */
  .nav-btn::after{
    content:"";
    position:absolute;
    inset: 0;
    z-index:-2;
    background: var(--ink);
    clip-path: polygon(calc(var(--px) * 10) 0, 100% 0, 100% calc(100% - calc(var(--px) * 10)), calc(100% - calc(var(--px) * 10)) 100%, 0 100%, 0 calc(var(--px) * 10));
    pointer-events:none;
  }

  .nav-btn.is-active::after{
    background: var(--green);
  }

  .nav-btn::before{
    content:"";
    position:absolute;
    inset: calc(var(--px) * 1);
    z-index:-1;
    background:#000;
    clip-path: polygon(calc(var(--px) * 10) 0, 100% 0, 100% calc(100% - calc(var(--px) * 10)), calc(100% - calc(var(--px) * 10)) 100%, 0 100%, 0 calc(var(--px) * 10));
    pointer-events:none;
  }

  .nav-btn.is-active::before{
    inset: calc(var(--px) * 1);
  }

  .nav-btn:hover{ transform:translateY(calc(var(--px) * -2)); }
  .nav-btn:active{ transform:translateY(calc(var(--px) * 1)); }

  /* .nav-btn自体にはclip-pathを付けていないので、filterの影が形に沿って外側までちゃんと出る */
  .nav-btn.is-active{
    color: var(--green);
    filter: drop-shadow(calc(var(--px) * 4) calc(var(--px) * 4) 0 color-mix(in srgb, var(--green) 70%, transparent));
  }

  .lang{
    display:flex; align-items:center; justify-content:center; gap:calc(var(--px) * 6);
    font-family:"Press Start 2P", monospace; font-size: calc(var(--px) * 10);
        padding: calc(var(--px) * 20) 0 calc(var(--px) * 4);
  }
  .lang button, .lang a{ color:#3f3f3f; transition:color .12s; text-decoration:none; }
  .lang button.is-active, .lang a.is-active{ color:var(--ink); text-shadow:0 0 calc(var(--px) * 8) rgba(78,230,143,.6); }
  .lang button:hover, .lang a:hover{ color:var(--green-hi); }
  .lang .sep{ color:#3f3f3f; }

  .sb-links{font-family: var(--font-lores); text-align: center; display:flex; flex-direction:column; gap:calc(var(--px) * 0); padding:calc(var(--px) * 2) calc(var(--px) * 2); }
  .sb-links a{ font-size:calc(var(--px) * 10); color:var(--muted); letter-spacing:calc(var(--px) * 0.3); transition:color .12s; }
  .sb-links a:hover{ color:var(--green); }

  .stores{ display:flex; flex-direction:column; align-items:center; gap:calc(var(--px) * 13); margin-top:calc(var(--px) * 2); }

  .store--appstore   img{ width: calc(var(--px) * 111); height:auto; }
  .store--googleplay img{ width: calc(var(--px) * 140); height:auto; } 

  .pagetop{ margin-top:auto; align-self:center; padding-top:calc(var(--px) * 8); }
  .pagetop img{ width:clamp(calc(var(--px) * 58),9.5vw,calc(var(--px) * 106)); image-rendering:pixelated;
    transition:transform .15s ease; }
  .pagetop:hover img{ transform:translateY(calc(var(--px) * -3)); }

  .sp-fixed-links {
    display: none;
  }

    @media (max-width: 767px){
      .drawer{ gap: calc(var(--px) * 12);}
      .nav-btn{padding-block: calc(var(--px) * 24);}
      .sp-fixed-links {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        align-items: flex-end;
        gap: calc(var(--px) * 8);
        padding: 0 0 calc(var(--px) * 10) calc(var(--px) * 10);
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none;
        transition: transform .35s ease, opacity .35s ease;
        background: linear-gradient(to top, var(--bg) 67%, transparent 67%);
      }
      .sp-fixed-links.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
      }
      .sp-fixed-links::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
      }
      .sp-fixed-links__store,
      .sp-fixed-links__pagetop {
        position: relative;
        z-index: 1;
      }
      .sp-fixed-links__store img {
        display: block;
        width: calc(var(--px) * 113);
        height: auto;
      }
      .sp-fixed-links__store--google img {
        width: calc(var(--px) * 142);
      }
      .sp-fixed-links__pagetop img {
        display: block;
        width: calc(var(--px) * 94);
        height: auto;
        image-rendering: pixelated;
      }
      .lang{
            padding: calc(var(--px) * 10) 0 calc(var(--px) * 0);
      }
    }

  /* ===================== SP HAMBURGER ===================== */
  .hamburger {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 120;
    width: calc(var(--px) * 58);
    height: calc(var(--px) * 56.6);
    border: 0;
    border-radius: 0;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M0 0H80V80H18L0 62Z' fill='rgba(0,0,0,0.55)'/%3E%3Cpath d='M0 0V62L18 80H80' fill='none' stroke='%2325FF74' stroke-width='3'/%3E%3C/svg%3E")
      center / 100% 100% no-repeat;
    backdrop-filter: none;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--px) * 4.15);

    padding-left: calc(var(--px) * 5);
    padding-bottom: calc(var(--px) * 4);
  }

  .hamburger span {
    position: relative;
    z-index: 1;
    width: calc(var(--px) * 29.5);
    height: calc(var(--px) * 2.3);
    background: var(--green);
    border-radius: 0;
    transition: transform .25s ease, opacity .2s ease;
  }

  /* 3本の間隔 */
  .hamburger {
    gap: calc(var(--px) * 4.15);
  }

  .hamburger.is-open span:nth-child(1) {
    transform: translateY(calc(var(--px) * 6.15)) rotate(20deg);
  }

  .hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.is-open span:nth-child(3) {
    transform: translateY(calc(var(--px) * -6.15)) rotate(-20deg);
  }

  /* ===================== SP DRAWER ===================== */
  .overlay{
    position:fixed; inset:0; z-index:100;
    background:rgba(2,2,6,.6); backdrop-filter:blur(calc(var(--px) * 2));
    opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
  }
  .overlay.is-open{ opacity:1; visibility:visible; }
  .drawer{
    position:fixed; top:0; right:0; z-index:110;
    width: calc(var(--px) * 240); height:100vh; height:100dvh;
    background:linear-gradient(180deg,#0c0b14,#08070e);
    border-left:calc(var(--px) * 1) solid rgba(255,255,255,.08);
    box-shadow:calc(var(--px) * -12) 0 calc(var(--px) * 40) rgba(0,0,0,.6);
    transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; gap:calc(var(--px) * 14);
    padding:calc(var(--px) * 74) calc(var(--px) * 34) calc(var(--px) * 26);
    overflow-y:auto;
  }
  .drawer.is-open{ transform:translateX(0); }

  /* ===================== RESPONSIVE ===================== */
  @media (max-width:768px){
    .hero{ margin-right:0; }

    .hero__bg img{ transform: scale(1) translateY(-8%);
    object-position: center center;}

    .hero__logo{ top: calc(50% - 20%); transform: translate(-50%, -50%); width:calc(var(--px) * 344); }
    .hero__set { top: calc(50% - -9%); transform: translate(-50%, -50%); width:calc(var(--px) * 341);}
    .hero__scroll{ top: calc(50% + 28%); bottom:auto; transform: translate(-50%, -50%); width: calc(var(--px) * 40);}

    .sidebar{ display:none; }
    .hamburger{ display:flex; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ transition:none !important; animation:none !important; }
  }

  .p-sec02 {
  position: relative;
  overflow: hidden;
  overflow: clip; /* hiddenはstickyを無効化するため、対応ブラウザではclipを使う */
  margin-right: var(--sb);
  padding: calc(var(--px) * 120) 0 calc(var(--px) * 440);
}

/* 背景のスクロール追従はJSではなくstickyに任せる（スマホのガタつき対策）。
   このラッパーが「画面1枚ぶんの窓」としてスクロールに同期し、
   中の .p-sec02__bg はこの窓の中でバウンドするだけになる */
.p-sec02__bg-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  /* セクションのpadding-top分だけ上に食い込ませ、セクション最上部から背景を敷く */
  margin-top: calc(var(--px) * -120);
  /* 自身の専有高さを打ち消して、後続コンテンツのレイアウトに影響させない */
  margin-bottom: calc(-100vh + var(--px) * 120);
  z-index: 1;
  pointer-events: none;
}

.p-sec02__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 130vh;
  background-image: url(../img/sec02/sec02-bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
  filter: none;
}

.p-sec02__scrim {
  display: none;
}

.p-sec02__inner {
  position: relative; z-index: 2;
  margin: 0 auto;
  padding: 0 clamp(calc(var(--px) * 24),5vw,calc(var(--px) * 64));
}

.p-sec02__head { position: relative; margin-bottom: clamp(calc(var(--px) * 30),3.8vw,calc(var(--px) * 46)); }

.p-sec02__en {
  display: block; width: fit-content; margin: 0;
  font-family: "lores-9-wide","Press Start 2P",monospace;
  font-size: calc(var(--px) * 60); line-height: 1;
  font-weight: 600;
  color: color-mix(in srgb, var(--green) 50%, transparent);
  transform: rotate(355deg); transform-origin: left center;
  letter-spacing: -7%;
}

.p-sec02__sub {
  position: relative; z-index: 2;
  display: block; width: fit-content;
  margin: -1.7em 0 0 clamp(calc(var(--px) * 52),9.7vw,calc(var(--px) * 140)); 
  font-family: "M PLUS 1p",sans-serif; font-weight: 800;
  font-size: calc(var(--px) * 26);
  transform: rotate(1deg) scale(.85, 1); transform-origin: left center;
}

.p-sec02__title { margin: clamp(calc(var(--px) * 26),4vw,calc(var(--px) * 48)) 0 clamp(calc(var(--px) * 22),3vw,calc(var(--px) * 34)); }
.p-sec02__title img {width: clamp(
        calc(var(--px) * 294),
        38vw, 
        calc(var(--px) * 431)
    ); height: auto; }

.p-sec02__text {
  font-family: "M PLUS 1p",sans-serif; font-weight: 800;
  font-size: calc(var(--px) * 15); line-height: 2.47;
}
.p-sec02__text p { font-size: calc(var(--px) * 17); margin: 0; transform: scale(.9,1); transform-origin: left top; width: 117.65%; }
.p-sec02__text--second { margin-top: clamp(calc(var(--px) * 20),2.6vw,calc(var(--px) * 32)); }

.p-sec02__lead { margin-top: clamp(calc(var(--px) * 42),7vw,calc(var(--px) * 96)); }
.p-sec02__lead img { width: clamp(calc(var(--px) * 300),46vw,calc(var(--px) * 560)); height: auto; }

.p-sec02__glitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: normal;
}

.p-sec02__glitch-rgb {
  position: absolute;
  inset: 0;
  background-image: url(../img/sec02/sec02-bg.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  mix-blend-mode: normal;
  will-change: transform, opacity;
}

.p-sec02__glitch-rgb--cyan {
  filter: saturate(1.6) hue-rotate(125deg);
}

.p-sec02__glitch-rgb--magenta {
  filter: saturate(1.7) hue-rotate(-32deg);
}

.p-sec02__glitch-bands {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.p-sec02__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent calc(var(--px) * 2),
      rgba(0, 0, 0, .18) calc(var(--px) * 2),
      rgba(0, 0, 0, .18) calc(var(--px) * 4)
    );
}

.p-sec02__grain {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: normal;
  background-repeat: repeat;
  image-rendering: pixelated;
  pointer-events: none;
}

.p-sec02__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .p-sec02__glitch {
    display: none;
  }
}

/* ビジュアル：リング＋キャッチ＋スマホ */
.p-sec02__visual { position: relative; padding-top: clamp(calc(var(--px) * 40),6vw,calc(var(--px) * 86)); }
.p-sec02__ring {
  position: absolute; z-index: -1; left: 50%; top: 0; 
  transform: translateX(-50%) translate(calc(var(--px) * -140), calc(var(--px) * 0));
  width: clamp(calc(var(--px) * 260),65vw,calc(var(--px) * 840)); height: auto; pointer-events: none;
  filter: drop-shadow(0 0 calc(var(--px) * 22) rgba(70,150,255,.5)); opacity: 50%;
}
.p-sec02__catch { position: relative; z-index: 2; text-align: center; margin: 0 0 clamp(calc(var(--px) * 0),2.6vw,calc(var(--px) * 34)); transform: translate(calc(var(--px) * -160), calc(var(--px) * 70)); }
.p-sec02__catch-img { display: inline-block; width: clamp(calc(var(--px) * 230),45.5vw,calc(var(--px) * 546)); height: auto; }

.p-sec02__imgs {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(calc(var(--px) * 14),1.8vw,calc(var(--px) * 26)); margin-top: clamp(calc(var(--px) * 22),3.2vw,calc(var(--px) * 42));
}
.p-sec02__img {
  position: relative; margin: 0; flex: 0 0 auto;
  width: clamp(
    calc(var(--px) * 161),
    22vw,
    calc(var(--px) * 300)
  );
    aspect-ratio: 9 / 16.6;
    overflow: hidden;
    border-radius: 15px;
}

.p-sec02__img--left {
  transform: translateY(calc(var(--px) * 125));
  border: 3px solid var(--pink);
}

.p-sec02__img--right {
  border: 3px solid var(--green);
}
.p-sec02__img img, .p-sec02__img video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 768px) {
  .p-sec02 { margin-right: 0; padding: calc(var(--px) * 75) 0 calc(var(--px) * 240);}
  .p-sec02__bg-sticky {
    margin-top: calc(var(--px) * -75);
    margin-bottom: calc(-100vh + var(--px) * 75);
  }
  .p-sec02__inner { max-width: calc(var(--px) * 540); padding: 0 calc(var(--px) * 22); }
  .p-sec02__en { font-size: calc(var(--px) * 41); margin-left: -2vw;}
  .p-sec02__sub {
    font-size: calc(var(--px) * 21.88);
    margin: calc(var(--px) * -32) auto 0;
    text-align: center;
    transform-origin: center center;
  }
  .p-sec02__text { max-width: none; font-size: calc(var(--px) * 13); }
  .p-sec02__text p { max-width: none; font-size: calc(var(--px) * 12); line-height: 1.9;}
  .p-sec02__title img { width: min(89%, calc(var(--px) * 340)); }
  .p-sec02__lead img { width: min(100%, calc(var(--px) * 420)); }
  .p-sec02__ring {
    left: 50%;
    top: calc(var(--px) * 20);
    width: calc(var(--px) * 520);
    max-width: none;
    transform: translateX(-50%) translate(
      calc(var(--px) * 13),
      calc(var(--px) * -72)
    );
  }
  .p-sec02__catch{transform: none; text-align: center; margin-bottom: 0;}
  .p-sec02__catch-img { display: block;
    width: calc(var(--px) * 375);
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%); }
  .p-sec02__imgs {
    justify-content: flex-start;
    margin-top: calc(var(--px) * -13);
/*     transform: translateX(calc(var(--px) * -6)); */
  }
/*     .p-sec02__img { width: calc(var(--px) * 181); } */
  .p-sec02__bg {
    background-image: url(../img/sec02/sec02-bg-sp.webp);
    width: 150%;
    height: 130vh;
    }
  }

.p-sec03 {
  position: relative;
  overflow: hidden;
  background:
    url(../img/sec03/bg.webp) center top / cover no-repeat;
  margin-right: var(--sb);
}

.p-sec03__inner {
  position: relative;
  max-width: calc(var(--px) * 980);
  min-height: calc(var(--px) * 1600);
  margin: calc(var(--px) * 70) auto 0;
  padding: calc(var(--px) * 28) calc(var(--px) * 21) calc(var(--px) * 54);
}

.p-sec03__head {
  position: relative;
  z-index: 2;
  margin-left: calc(var(--px) * 355);
  text-align: center;
}

.p-sec03__en {
  display: block; width: fit-content; margin: auto;
  font-family: "lores-9-wide","Press Start 2P",monospace;
  font-size: calc(var(--px) * 55); line-height: 1;
  font-weight: 600;
  color: color-mix(in srgb, var(--pink) 50%, transparent);
  transform: rotate(365deg); transform-origin: center center;
  letter-spacing: -7%;
}

.p-sec03__sub {
  position: relative; z-index: 2;
  display: block; 
  margin: -1.2em 0 0 -0.9em;
  font-family: "M PLUS 1p",sans-serif; font-weight: 800;
  font-size: calc(var(--px) * 26);
  transform: rotate(1deg) scale(.85, 1); transform-origin: center center;
}

.p-sec03__cards {
  position: relative;
  z-index: 2;
  height: calc(var(--px) * 690);
}

.p-sec03-card {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* 
.p-sec03-card img {
  display: block;
  width: 100%;
  height: auto;
} */

/* =============================
   sec03 character cards layered
============================= */

.p-sec03-card {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.p-sec03-card img {
  display: block;
  height: auto;
  max-width: none;
}

.p-sec03-card__bg {
  position: relative;
  z-index: 1;
}

.p-sec03-card__chara,
.p-sec03-card__name,
.p-sec03-card__lead,
.p-sec03-card__button {
  position: absolute;
}

.p-sec03-card__chara { z-index: 2; }
.p-sec03-card__name { z-index: 4; }
.p-sec03-card__lead { z-index: 5; }
.p-sec03-card__button { z-index: 6; }

/* LURKY */
.p-sec03-card--lurky {
  width: calc(var(--px) * 373);
  top: calc(var(--px) * 0);
  left: calc(var(--px) * 0);
}

.p-sec03-card--lurky .p-sec03-card__bg {
  width: calc(var(--px) * 455);
}

.p-sec03-card--lurky .p-sec03-card__chara {
  width: calc(var(--px) * 342);
  left: calc(var(--px) * 49);
  top: calc(var(--px) * 107);
}

.p-sec03-card--lurky .p-sec03-card__name {
  width: calc(var(--px) * 267);
  left: calc(var(--px) * -19);
  top: calc(var(--px) * -25);
}

.p-sec03-card--lurky .p-sec03-card__lead {
  width: calc(var(--px) * 338);
  right: calc(var(--px) * -114);
  bottom: calc(var(--px) * -12);
}

.p-sec03-card--lurky .p-sec03-card__button {
  width: calc(var(--px) * 119);
  left: calc(var(--px) * 29);
  bottom: calc(var(--px) * 35);
}

/* LEOPAUNCY */
.p-sec03-card--leopauncy {
  width: calc(var(--px) * 373);
  top: calc(var(--px) * 200);
  right: calc(var(--px) * 70);
}

.p-sec03-card--leopauncy .p-sec03-card__bg {
  width: calc(var(--px) * 424.75);
}

.p-sec03-card--leopauncy .p-sec03-card__chara {
  width: calc(var(--px) * 345);
  left: calc(var(--px) * 20);
  top: calc(var(--px) * 69);
}

.p-sec03-card--leopauncy .p-sec03-card__name {
  width: calc(var(--px) * 319);
  right: calc(var(--px) * -82);
  top: calc(var(--px) * -50);
}

.p-sec03-card--leopauncy .p-sec03-card__lead {
  width: calc(var(--px) * 341);
  left: calc(var(--px) * -54);
  bottom: calc(var(--px) * -16);
}

.p-sec03-card--leopauncy .p-sec03-card__button {
  width: calc(var(--px) * 119);
  right: calc(var(--px) * -50);
  bottom: calc(var(--px) * 54);
}

/* WEEZAP */
.p-sec03-card--weezap {
  width: calc(var(--px) * 373);
  top: calc(var(--px) * 660);
  left: calc(var(--px) * 10);
}

.p-sec03-card--weezap .p-sec03-card__bg {
  width: calc(var(--px) * 441.5);
}

.p-sec03-card--weezap .p-sec03-card__chara {
  width: calc(var(--px) * 327.7);
  left: calc(var(--px) * 52);
  top: calc(var(--px) * 65);
}

.p-sec03-card--weezap .p-sec03-card__name {
  width: calc(var(--px) * 295);
  left: calc(var(--px) * -25);
  top: calc(var(--px) * -42);
}

.p-sec03-card--weezap .p-sec03-card__lead {
  width: calc(var(--px) * 330);
  right: calc(var(--px) * -95);
  bottom: calc(var(--px) * -9);
}

.p-sec03-card--weezap .p-sec03-card__button {
  width: calc(var(--px) * 119);
  left: calc(var(--px) * 35);
  bottom: calc(var(--px) * 43);
}

/* KOMODROP */
.p-sec03-card--komodrop {
  width: calc(var(--px) * 373);
  top: calc(var(--px) * 830);
  right: calc(var(--px) * 70);
}

.p-sec03-card--komodrop .p-sec03-card__bg {
  width: calc(var(--px) * 424.75);
}

.p-sec03-card--komodrop .p-sec03-card__chara {
  width: calc(var(--px) * 330);
  left: calc(var(--px) * 55);
  top: calc(var(--px) * 55);
}

.p-sec03-card--komodrop .p-sec03-card__name {
  width: calc(var(--px) * 358);
  right: calc(var(--px) * -25);
  top: calc(var(--px) * -55);
}

.p-sec03-card--komodrop .p-sec03-card__lead {
  width: calc(var(--px) * 323);
  left: calc(var(--px) * -55);
  bottom: calc(var(--px) * -48);
}

.p-sec03-card--komodrop .p-sec03-card__button {
  width: calc(var(--px) * 119);
  right: calc(var(--px) * -35);
  bottom: calc(var(--px) * 45);
}

@media (max-width: 767px) {
  .p-sec03 {
    background:
      url(../img/sec03/bg-sp.webp) center top / cover no-repeat;
      margin-right: 0;
  }

  .p-sec03__inner {
    max-width: calc(var(--px) * 375);
    min-height: calc(var(--px) * 2050);
    margin: calc(var(--px) * 40) auto 0;
    padding: calc(var(--px) * 28) calc(var(--px) * 8) calc(var(--px) * 46);
  }

  .p-sec03__head {
    margin-left: calc(var(--px) * 45);
    text-align: center;
  }

  .p-sec03__en {
    font-size: calc(var(--px) * 41);
  }

  .p-sec03__sub {
    margin-top: calc(var(--px) * -14);
    font-size: calc(var(--px) * 18);
  }

  .p-sec03__cards {
    height: calc(var(--px) * 700);
  }

  .p-sec03-card {
    width: calc(var(--px) * 164);
  }

  .p-sec03-card--lurky {
    top: calc(var(--px) * 52);
    left: calc(var(--px) * 12);
    width: calc(var(--px) * 350);
  }

  .p-sec03-card--lurky .p-sec03-card__bg {
    width: calc(var(--px) * 335);
  }

  .p-sec03-card--lurky .p-sec03-card__name {
    width: calc(var(--px) * 217);
    left: calc(var(--px) * -12);
    top: calc(var(--px) * -25);
  }

  .p-sec03-card--lurky .p-sec03-card__chara {
    width: calc(var(--px) * 262);
    left: calc(var(--px) * 39);
    top: calc(var(--px) * 76);
  }

  .p-sec03-card--lurky .p-sec03-card__button {
    width: calc(var(--px) * 98);
    left: calc(var(--px) * 13);
    bottom: calc(var(--px) * 30);
  }

  .p-sec03-card--lurky .p-sec03-card__lead {
    width: calc(var(--px) * 238);
    right: calc(var(--px) * -3);
    bottom: calc(var(--px) * 0);
  }

  .p-sec03-card--leopauncy {
    top: calc(var(--px) * 515);
    right: calc(var(--px) * 0);
    width: calc(var(--px) * 340);
  }

  .p-sec03-card--leopauncy .p-sec03-card__bg{
    width: calc(var(--px) * 324);
  }

  .p-sec03-card--leopauncy .p-sec03-card__name {
    width: calc(var(--px) * 249);
    right: calc(var(--px) * -4);
    top: calc(var(--px) * -40);
  }

  .p-sec03-card--leopauncy .p-sec03-card__chara {
    width: calc(var(--px) * 284);
    left: calc(var(--px) * 12);
    top: calc(var(--px) * 49);
  }

  .p-sec03-card--leopauncy .p-sec03-card__lead {
    width: calc(var(--px) * 251);
    left: calc(var(--px) * -20);
    bottom: calc(var(--px) * -27);
  }

  .p-sec03-card--leopauncy .p-sec03-card__button {
    width: calc(var(--px) * 98);
    right: calc(var(--px) * 5);
    bottom: calc(var(--px) * 38);
  }

  .p-sec03-card--weezap {
    top: calc(var(--px) * 973);
    left: calc(var(--px) * 16);
    width: calc(var(--px) * 350);
  }

  .p-sec03-card--weezap .p-sec03-card__bg {
    width: calc(var(--px) * 325);
  }

  .p-sec03-card--weezap .p-sec03-card__name {
    width: calc(var(--px) * 226);
    left: calc(var(--px) * -18);
    top: calc(var(--px) * -28);
  }

  .p-sec03-card--weezap .p-sec03-card__lead {
    width: calc(var(--px) * 242);
    right: calc(var(--px) * 10);
    bottom: calc(var(--px) * -22);
  }

  .p-sec03-card--weezap .p-sec03-card__chara {
    width: calc(var(--px) * 254);
    left: calc(var(--px) * 36);
    top: calc(var(--px) * 50);
  }

  .p-sec03-card--weezap .p-sec03-card__button {
    width: calc(var(--px) * 98);
    left: calc(var(--px) * 4);
    bottom: calc(var(--px) * 25);
  }

  .p-sec03-card--komodrop {
    top: calc(var(--px) * 1440);
    right: calc(var(--px) * -8);
    width: calc(var(--px) * 350);
  }

  .p-sec03-card--komodrop .p-sec03-card__bg {
    width: calc(var(--px) * 325);
  }

  .p-sec03-card--komodrop .p-sec03-card__name {
    width: calc(var(--px) * 278);
    right: calc(var(--px) * 6);
    top: calc(var(--px) * -35);
  }

  .p-sec03-card--komodrop .p-sec03-card__chara {
    width: calc(var(--px) * 256);
    left: calc(var(--px) * 45);
    top: calc(var(--px) * 46);
  }

  .p-sec03-card--komodrop .p-sec03-card__lead {
    width: calc(var(--px) * 263);
    left: calc(var(--px) * -26);
    bottom: calc(var(--px) * -48);
  }

  .p-sec03-card--komodrop .p-sec03-card__button {
    width: calc(var(--px) * 98);
    right: calc(var(--px) * 11);
    bottom: calc(var(--px) * 20);
  }
}

.p-character-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  color: #fff;
}

.p-character-modal.is-open {
  display: block;
}

.p-character-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgb(0, 0, 0);
}

.p-character-modal__content {
  position: relative;
  overflow-y: auto;
  height: 100dvh;
  margin: 0 auto;
  background:
    url(../img/sec03/modal-bg.webp) center / cover no-repeat;
}

.p-character-modal__content--lurky {
  background: url(../img/modal/lurky/bg-pc.webp) center top / cover no-repeat;
}

.p-character-modal__content--leopauncy {
  background: url(../img/modal/leopauncy/bg-pc.webp) center top / cover no-repeat;
}

.p-character-modal__content--weezap {
  background: url(../img/modal/weezap/bg-pc.webp) center top / cover no-repeat;
}

.p-character-modal__content--komodrop {
  background: url(../img/modal/komodrop/bg-pc.webp) center top / cover no-repeat;
}

.p-character-modal__lead img {
  width: 100%;
  height: auto;
}

.p-character-modal__deco {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.p-character-modal__deco--01 {
  top: calc(var(--px) * -31);
  right: calc(var(--px) * 47);
  width: calc(var(--px) * 165);
}

.p-character-modal__deco--02 {
  left: calc(var(--px) * 21);
  bottom: calc(var(--px) * -45);
  width: calc(var(--px) * 168);
}

.p-character-modal__back {
  position: fixed;
  top: calc(var(--px) * 28);
  left: calc(var(--px) * 33);
  z-index: 5;
  width: calc(var(--px) * 111);
  height: calc(var(--px) * 34);
  cursor: pointer;
}

.p-character-modal__inner {
  display: grid;
  grid-template-columns: 47% 53%;
  min-height: calc(var(--px) * 563);
  padding: calc(var(--px) * 0) calc(var(--px) * 0) calc(var(--px) * 100);
  margin: 0 calc(var(--px) * 30) 0 calc(var(--px) * 30);
}

.p-character-modal__main {
  position: relative;
}

.p-character-modal__chara {
  position: absolute;
  top: calc(var(--px) * 65);
  width: calc(var(--px) * 567);
  margin: 0;
  z-index: 1;
}

.p-character-modal__chara img {
  display: block;
  width: 100%;
  height: auto;
}

.p-character-modal__body {
  padding-top: calc(var(--px) * 50);
}

.p-character-modal__lead{
  margin-bottom: calc(var(--px) * 42);;
  display: block;
}



.p-character-modal-box {
  position: relative;
  width: calc(var(--px) * 505);
  padding: calc(var(--px) * 41) calc(var(--px) * 36) calc(var(--px) * 50) calc(var(--px) * 41) ;
  border: calc(var(--px) * 1) dashed rgba(255, 255, 255, .45);
  border-radius: calc(var(--px) * 22);
  background: rgba(0, 0, 0, .42);
}

.p-character-modal-box + .p-character-modal-box {
  margin-top: calc(var(--px) * 34);
  padding-bottom: calc(var(--px) * 56);
}

.p-character-modal-box h4 {
  font-family: "Press Start 2P", monospace;
  margin: 0 0 calc(var(--px) * 15);
  font-size: calc(var(--px) * 13);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--green);
}

.p-character-modal-box:nth-of-type(2) h4 {
  color: var(--pink);
}

.p-character-modal-box p {
  margin: 0;
  font-size: calc(var(--px) * 12);
  line-height: 1.9;
  font-weight: 700;
}

.p-character-modal-box p + p {
  margin-top: calc(var(--px) * 10);
}



@media (max-width: 767px) {
.p-character-modal__content {
    width: min(100%, calc(var(--px) * 375));
    background-color: var(--bg);
    background-image: none;
  }

  .p-character-modal.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  #modal-lurky.is-open::before     { background-image: url(../img/modal/lurky/bg-sp.webp); }
  #modal-leopauncy.is-open::before { background-image: url(../img/modal/leopauncy/bg-sp.webp); }
  #modal-weezap.is-open::before    { background-image: url(../img/modal/weezap/bg-sp.webp); }
  #modal-komodrop.is-open::before  { background-image: url(../img/modal/komodrop/bg-sp.webp); }

  .p-character-modal__deco--01{
    right: calc(var(--px) * 19);
    width: calc(var(--px) * 145);
  }
  
  
  .p-character-modal__deco--02{
    left: calc(var(--px) * 5);
    bottom: calc(var(--px) * -54);
    width: calc(var(--px) * 158);
  }

  .p-character-modal__back {
    top: calc(var(--px) * 18);
    left: calc(var(--px) * 17);
    max-width: calc(var(--px) * 95);
    min-width: calc(var(--px) * 54);
    height: calc(var(--px) * 18);
  }

  .p-character-modal__inner {
    display: block;
    margin: 0;
    padding: calc(var(--px) * 42) calc(var(--px) * 0) calc(var(--px) * 115);
    position: relative;
    z-index: 2;
  }

  .p-character-modal__main {
    padding-top: 0;
  }

  .p-character-modal__chara {
    position: relative;
    left: calc(var(--px) * -4);
    top: auto;
    width: calc(var(--px) * 218);
    margin-top: calc(var(--px) * 12);
  }

  .p-character-modal__lead{
    display: none;
  }

  .p-character-modal__body {
    width: calc(var(--px) * 342);
    margin: calc(var(--px) * 28) auto 0;
    padding-top: 0;
  }




  .p-character-modal-box {
    width: 100%;
    padding: calc(var(--px) * 38) calc(var(--px) * 25) calc(var(--px) * 37);
  }

  .p-character-modal-box + .p-character-modal-box {
    margin-top: calc(var(--px) * 18);
    padding-bottom: calc(var(--px) * 30);
  }

  .p-character-modal-box h4 {
    margin-bottom: calc(var(--px) * 14);
    font-size: calc(var(--px) * 11);
  }

  .p-character-modal-box p {
    font-size: calc(var(--px) * 12);
    line-height: 2.1;
  }


}

.p-sec04 {
  position: relative;
  overflow: hidden;
  margin-right: var(--sb);
  background: url(../img/sec04/sub-bg.webp) center top / cover no-repeat;
  border-radius: 0 calc(var(--px) * 305) 0 0;
}

.p-sec04__inner {
  position: relative;
  max-width: calc(var(--px) * 900);
  min-height: calc(var(--px) * 492);
  margin: 0 auto;
  padding: calc(var(--px) * 150) calc(var(--px) * 45) calc(var(--px) * 250);
}

.p-sec04__head {
  position: relative;
  z-index: 2;
  margin-bottom: calc(var(--px) * 26);
}

.p-sec04__en {
    display: block;
    width: fit-content;
    margin: 0;
    font-family: "lores-9-wide", "Press Start 2P", monospace;
    font-size: calc(var(--px) * 45.2);
    line-height: 1;
    font-weight: 600;
    color: color-mix(in srgb, var(--ink) 50%, transparent);
    transform: rotate(355deg);
    transform-origin: left center;
    letter-spacing: -7%;
}

.p-sec04__sub {
    position: relative;
    z-index: 2;
    display: block;
    width: fit-content;
    margin: -1.7em 0 0 clamp(calc(var(--px) * 52), 9.7vw, calc(var(--px) * 140));
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 800;
    font-size: calc(var(--px) * 26);
    transform: rotate(1deg) scale(.85, 1);
    transform-origin: left center;
}

.p-sec04__list {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--px) * 256));
  gap: calc(var(--px) * 20) 0;
  justify-content: center;
  padding: 0;
}

.p-sec04-card {
  position: relative;
}

@media (min-width: 768px){
  .p-sec04-card:nth-child(-n + 3) {
    transform: translateX(calc(var(--px) * 28));
  }
  .p-sec04-card:nth-child(n + 4) {
    transform: translateX(calc(var(--px) * -28));
  }
}

.p-sec04-card__visual {
  position: relative;
  width: 100%;
}

.p-sec04-card__player {
  position: relative;
  z-index: 1;
  width: 100%;
}

.p-sec04-card__record {
  position: absolute;
  z-index: 2;
  top: calc(var(--px) * 18);
  left: 50%;
  width: calc(var(--px) * 205);
  transform: translateX(-50%);
}

/* 再生中：レコードを回転（translateX(-50%)を保ったまま回す） */
@keyframes recordSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
.p-sec04-card.is-playing .p-sec04-card__record {
  animation: recordSpin 4s linear infinite;
  will-change: transform;
}

.p-sec04-card__deco {
  position: absolute;
  z-index: 3;
  top: calc(var(--px) * 84);
  left: 50%;
  width: calc(var(--px) * 56);
  transform: translateX(-50%);
}

.p-sec04-card__title {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--px) * 88);
  width: calc(var(--px) * 185);
  transform: translateX(-50%);
}

.p-sec04-card__button {
  position: absolute;
  z-index: 5;
  left: calc(var(--px) * 26);
  bottom: calc(var(--px) * 43);
  width: calc(var(--px) * 47);
  padding: 0;
  border: 0;
  background: transparent;
}

.p-sec04-card__button::after {
  content: "";
  position: absolute;
  left: calc(var(--px) * -44);
  top: calc(var(--px) * -30);
  width: calc(var(--px) * 48);
  height: calc(var(--px) * 41);
  background: url(../img/sec04/sec04-push.webp) center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0; 
  transition: opacity .25s ease; 
}

.p-sec04-card.is-playing .p-sec04-card__button::after {
  opacity: 0 !important;
}

@keyframes sec04PushBeat {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.12); }  /* 1回目の「ドッ」 */
  16%  { transform: scale(0.98); }
  24%  { transform: scale(1.08); }  /* 2回目の「ドッ」（少し弱め） */
  36%  { transform: scale(1); }
  100% { transform: scale(1); }     /* 残りは休符 */
}


.p-sec04-card__button img {
  width: 100%;
}

/* 再生バー（プレイヤー画像の切り抜きから覗く） */
.p-sec04-card__bar {
  position: absolute;
  z-index: 0;
  left: 31.8%;
  top: 78%;
  width: 53%;
  height: 6%;
  background: #0a0a0a;
  overflow: hidden;
  pointer-events: none;
}
.p-sec04-card__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--green);
  transition: width .1s linear;
}

/* ボタンの青ハイライト除去 */
.p-sec04-card__button {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.p-sec04-card__button:focus { outline: none; }
.p-sec04-card__button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.p-sec04__arrow,
.p-sec04__dots {
  display: none;
}
.p-sec04__dots span {
  cursor: pointer;
}

@media (min-width: 768px) {
  .p-sec04.is-inview .p-sec04-card:first-child .p-sec04-card__button::after {
    opacity: 1;
    transition: opacity .8s ease .2s;                      /* ふわっと表示 */
    animation: sec04PushBeat 1.8s ease-in-out 1s infinite; /* 鼓動はふわっと後に開始 */
  }
}

@media (max-width: 767px) {
  .p-sec04{
    margin-right: 0;
    border-radius: 0 calc(var(--px) * 175) 0 0;
  }

  .p-sec04__inner {
    max-width: calc(var(--px) * 375);
    min-height: calc(var(--px) * 563);
    padding: calc(var(--px) * 70) 0 calc(var(--px) * 90);
  }

  .p-sec04__head {
    margin-left: calc(var(--px) * 110);
    margin-bottom: calc(var(--px) * 43);
  }

  .p-sec04__en {
    font-size: calc(var(--px) * 41);
    margin-left: calc(var(--px) * -94);
  }

  .p-sec04__sub {
    margin-top: calc(var(--px) * -19);
    margin-left: calc(var(--px) * -26);
    font-size: calc(var(--px) * 18);
  }

  .p-sec04__slider {
    position: relative;
  }

  .p-sec04__list {
    display: flex;
    justify-content: flex-start;
    margin-inline: calc(var(--px) * -24);
    gap: calc(var(--px) * 0);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 calc(var(--px) * 70) calc(var(--px) * 48);
    scroll-padding-inline: calc(var(--px) * 70);
    scrollbar-width: none;
  }

  .p-sec04__list::-webkit-scrollbar {
    display: none;
  }

  .p-sec04-card {
    flex: 0 0 calc(var(--px) * 283);
    scroll-snap-align: center;
    position: relative;
  }
  

  .p-sec04-card img {
    display: block;
    height: auto;
  }
  
  .p-sec04-card__player{
    width: calc(var(--px) * 283);
  }

  .p-sec04-card__record{
    top: calc(var(--px) * 22);
    width: calc(var(--px) * 225);
  }

  .p-sec04-card__deco{
    top: calc(var(--px) * 96);
    width: calc(var(--px) * 60);
  }

  .p-sec04-card__title{
    bottom: calc(var(--px) * 97);
    width: calc(var(--px) * 222);
  }

  .p-sec04-card__button{
    left: calc(var(--px) * 28);
    bottom: calc(var(--px) * 46);
    width: calc(var(--px) * 53);
  }

    .p-sec04-card.is-active .p-sec04-card__button::after {
    opacity: 1;
    transition: opacity .6s ease .30s;
    animation: sec04PushBeat 1.8s ease-in-out .45s infinite;
  }

  .p-sec04__arrow {
    position: absolute;
    z-index: 3;
    bottom: calc(var(--px) * 11);
    display: block;
    width: calc(var(--px) * 21.88);
    height: calc(var(--px) * 27);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .p-sec04__arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/sec04/sec04-arrow-prev.svg) center / contain no-repeat;
  }

  .p-sec04__arrow--prev {
    left: calc(var(--px) * 96);
  }

  .p-sec04__arrow--next {
    right: calc(var(--px) * 96);
  }

  .p-sec04__arrow--next::before {
    background-image: url(../img/sec04/sec04-arrow-next.svg);
  }

  .p-sec04__dots {
    position: absolute;
    left: 50%;
    bottom: calc(var(--px) * 22);
    display: flex;
    gap: calc(var(--px) * 8);
    transform: translateX(-50%);
  }

  .p-sec04__dots span {
    width: calc(var(--px) * 6);
    height: calc(var(--px) * 6);
    background: var(--muted);
  }

  .p-sec04__dots span.is-active {
    background: var(--green);
  }
}

.p-sec05 {
  position: relative;
  overflow: hidden;
  background: url(../img/sec05/bg.webp) center top / cover no-repeat;
  margin-right: calc(var(--px) * 185);
}

.p-sec05__inner {
  position: relative;
  min-height: calc(var(--px) * 454);
  margin: 0 auto;
  padding: calc(var(--px) * 115) 0 calc(var(--px) * 115);
}

.p-sec05__head {
  position: relative;
  z-index: 2;
  margin-left: calc(var(--px) * 110);
  margin-bottom: calc(var(--px) * 47);
}

.p-sec05__en {
  display: block;
  width: fit-content;
  margin: 0;
  font-family: "lores-9-wide", "Press Start 2P", monospace;
  font-size: calc(var(--px) * 45.2);
  line-height: 1;
  font-weight: 600;
  color: 
color-mix(in srgb, var(--ink) 50%, transparent);
  transform: rotate(355deg);
  transform-origin: left center;
  letter-spacing: -7%;
}

.p-sec05__sub {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: -1.7em 0 0 clamp(calc(var(--px) * 52), 9.7vw, calc(var(--px) * 140));
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-size: calc(var(--px) * 26);
  transform: rotate(1deg) scale(.85, 1);
  transform-origin: left center;
}

.p-sec05__slider {
  position: relative;
  overflow: hidden;
}

.p-sec05__track {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 40);
  width: max-content;
  padding: 0 0 calc(var(--px) * 55) 0;
  animation: sec05Marquee 50s linear infinite;
  will-change: transform;
}

@keyframes sec05Marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.p-sec05__board {
  flex: 0 0 auto;
  width: calc(var(--px) * 119);
  margin: 0;
  scroll-snap-align: center;
  filter: drop-shadow(0 0 calc(var(--px) * 8) rgba(255, 255, 255, .45));
}

.p-sec05__board img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .p-sec05{
    margin-right: 0;
  }

  .p-sec05__inner {
    max-width: calc(var(--px) * 375);
    min-height: calc(var(--px) * 511);
    margin: 0;
    padding: calc(var(--px) * 90) 0 calc(var(--px) * 49);
  }

  .p-sec05__head {
    margin-left: calc(var(--px) * 50);
    margin-bottom: calc(var(--px) * 42);
  }

  .p-sec05__en {
    font-size: calc(var(--px) * 41);
    margin-left: calc(var(--px) * -34);
  }

  .p-sec05__sub {
    margin-top: calc(var(--px) * -19);
    margin-left: calc(var(--px) * 29);
    font-size: calc(var(--px) * 18);
  }

  .p-sec05__track {
    gap: calc(var(--px) * 19);
    padding: 0 0 calc(var(--px) * 61) 0;
  }

  .p-sec05__board {
    width: calc(var(--px) * 110);
  }
}

.l-footer {
position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,.8) 70%,
      #000 100%
    ),
    url(../img/common/bg.webp) center top / cover no-repeat;
    margin-right: calc(var(--px) * 185);
}

.l-footer__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--px) * 1200);
  margin: 0 auto;
  padding: calc(var(--px) * 145) calc(var(--px) * 48) calc(var(--px) * 26);
  text-align: center;
}

.l-footer__logo-main {
  width: calc(var(--px) * 503);
  margin: 0 auto calc(var(--px) * 36);
}

.l-footer__logo-main img,
.l-footer__store img,
.l-footer__characters img,
.l-footer__brand img,
.l-footer__sns img {
  display: block;
  width: 100%;
  height: auto;
}

.l-footer__store {
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 22);
  margin-bottom: calc(var(--px) * 33);
}

.l-footer__store-link {
  display: block;
}

.l-footer__store-link--gp{
  width: calc(var(--px) * 257);
}

.l-footer__store-link--as{
  width: calc(var(--px) * 204);
}

.l-footer__nav {
  font-family: var(--font-lores);
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 43);
  margin-bottom: calc(var(--px) * 48);
}

.l-footer__nav a {
  font-size: calc(var(--px) * 12);
  line-height: 1;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.l-footer__characters {
  width: calc(var(--px) * 314);
  margin: 0 auto calc(var(--px) * 35);
}

.l-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 34);
  margin-bottom: calc(var(--px) * 19);
}

.l-footer__brand {
  width: calc(var(--px) * 185);
  margin: 0;
}

.l-footer__sns {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 22);
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-footer__sns a {
  display: block;
  width: calc(var(--px) * 51);
}

.l-footer__copy {
  margin: 0;
  font-size: calc(var(--px) * 10);
}

@media (max-width: 767px) {
  .l-footer{
    margin-right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .8) 50%, #000 100%), url(../img/common/bg.webp) center top / cover no-repeat;
  }
  .l-footer__inner {
    max-width: calc(var(--px) * 375);
    min-height: calc(var(--px) * 690);
    padding: calc(var(--px) * 92) calc(var(--px) * 22) calc(var(--px) * 100);
  }

  .l-footer__logo-main {
    width: calc(var(--px) * 315);
    margin-bottom: calc(var(--px) * 55);
  }

  .l-footer__store {
    gap: calc(var(--px) * 25);
    margin-bottom: calc(var(--px) * 65);
  }

  .l-footer__store-link--gp{
    width: calc(var(--px) * 148);
  }
  
  .l-footer__store-link--as{
    width: calc(var(--px) * 120);
  }

  .l-footer__nav {
    display: grid;
    gap: calc(var(--px) * 40);
    margin-bottom: calc(var(--px) * 76);
  }

  .l-footer__nav a {
    font-size: calc(var(--px) * 12);
    letter-spacing: .1em;
  }

  .l-footer__characters {
    width: calc(var(--px) * 264);
    margin-bottom: calc(var(--px) * 63);
  }

  .l-footer__bottom {
    display: block;
    margin-bottom: calc(var(--px) * 32);
  }

  .l-footer__brand {
    width: calc(var(--px) * 209);
    margin: 0 auto calc(var(--px) * 31);
  }

  .l-footer__sns {
    justify-content: center;
    gap: calc(var(--px) * 23);
  }

  .l-footer__sns a {
    width: calc(var(--px) * 35);
  }

  .l-footer__copy {
    font-size: calc(var(--px) * 10);
    line-height: 1.5;
  }
}

/* ===== グリッチ（テキスト用 / KASSO色） ===== */
.animation-glitch{
  --glitch-c1: var(--pink);
  --glitch-c2: var(--green);
  --glitch-dur: .45s;
}
.animation-glitch::before,
.animation-glitch::after{
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  will-change: clip-path, transform;
}
.animation-glitch.is-glitching::before{
  color: var(--glitch-c1);
  opacity: .9;
  animation: glitch-a var(--glitch-dur) steps(2, end) infinite;
}
.animation-glitch.is-glitching::after{
  color: var(--glitch-c2);
  opacity: .9;
  animation: glitch-b var(--glitch-dur) steps(2, end) infinite;
}
@keyframes glitch-a{
  0%  { clip-path: inset(18% 0 62% 0); transform: translateX(-3px); }
  50% { clip-path: inset(70% 0 6% 0);  transform: translateX(2px); }
  100%{ clip-path: inset(42% 0 38% 0); transform: translateX(-1px); }
}
@keyframes glitch-b{
  0%  { clip-path: inset(64% 0 10% 0); transform: translateX(3px); }
  50% { clip-path: inset(8% 0 76% 0);  transform: translateX(-2px); }
  100%{ clip-path: inset(46% 0 34% 0); transform: translateX(1px); }
}
@media (prefers-reduced-motion: reduce){
  .animation-glitch.is-glitching::before,
  .animation-glitch.is-glitching::after{ animation: none; opacity: 0; }
}

/* ===== HERO アニメーション（登場フェード＋せり上がり → 常時フロート → 背景パララックス） ===== */
@keyframes heroBgIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes heroRise{
  from{ opacity:0; transform: translateX(-50%) translateY(calc(var(--px) * 30)); }
  to  { opacity:1; transform: translateX(-50%) translateY(0); }
}
@keyframes heroFloat{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%    { transform: translateX(-50%) translateY(calc(var(--px) * -10)); }
}
@keyframes heroScrollBounce{
  0%,100%{ transform: translateX(-50%) translateY(0); opacity:.85; }
  50%    { transform: translateX(-50%) translateY(calc(var(--px) * 8)); opacity:1; }
}
.hero__bg{ animation: heroBgIn 1s ease both; transform-origin: top center; }
.hero__set{ animation: heroBgIn .9s ease .2s both; }
.hero__scroll{ animation: heroScrollBounce 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .hero__bg, .hero__set, .hero__logo, .hero__scroll{ animation: none !important; opacity: 1 !important; transform: translateX(-50%) !important; }
  .hero__bg{ transform: none !important; }
}

/* ===== 汎用グリッチFX（sec03/04/05 背景用 / sec02を一般化） ===== */
.fx-glitch{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
/* sec03の背景URLはインラインstyleではなくここで定義（CSS変数の相対URLはstyle.css基準で解決されるため） */
.p-sec03 .fx-glitch{ --fx-bg:url(../img/sec03/bg.webp); }
.fx-glitch__rgb{ position:absolute; inset:0; background-image:var(--fx-bg); background-position:center top; background-repeat:no-repeat; background-size:cover; opacity:0; will-change:transform,opacity; }
.fx-glitch__rgb--cyan{ filter:saturate(1.6) hue-rotate(125deg); }
.fx-glitch__rgb--magenta{ filter:saturate(1.7) hue-rotate(-32deg); }
.fx-glitch__bands{ position:absolute; inset:0; overflow:hidden; }
.fx-glitch__scanlines{ position:absolute; inset:0; opacity:0; background:repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--px)*2), rgba(0,0,0,.18) calc(var(--px)*2), rgba(0,0,0,.18) calc(var(--px)*4)); }
.fx-glitch__grain{ position:absolute; inset:0; opacity:0; background-repeat:repeat; image-rendering:pixelated; pointer-events:none; }
.fx-glitch__noise{ position:absolute; inset:0; width:100%; height:100%; opacity:0; }
@media (prefers-reduced-motion: reduce){ .fx-glitch{ display:none; } }
/* グリッチを背景の上・コンテンツの下に正しく重ねる（z-index:-1がセクション背景に隠れるのを防止） */
.p-sec03, .p-sec04, .p-sec05{ isolation: isolate; }

/* ===== 汎用：その場で時間差フェード登場 ===== */
.is-fade-init{ opacity:0; }
.is-fade-in{ animation: heroBgIn .3s ease both; }
/* 元から半透明な要素（リング等）は 0→.5 で戻す（濃くなりすぎ防止） */
@keyframes heroBgInHalf{ from{ opacity:0 } to{ opacity:.5 } }
.p-sec02__ring.is-fade-in{ animation: heroBgInHalf .3s ease both; }

/* sec03カード内の画像：時間差がはっきり分かるよう、ふわっと下から浮き上がる動きを付与 */
@keyframes cardImgIn{
  from{ opacity:0; transform: translateY(calc(var(--px) * 14)); }
  to  { opacity:1; transform: translateY(0); }
}
.p-sec03-card__bg.is-fade-init,
.p-sec03-card__chara.is-fade-init,
.p-sec03-card__name.is-fade-init,
.p-sec03-card__lead.is-fade-init,
.p-sec03-card__button.is-fade-init{
  opacity: 0;
  transform: translateY(calc(var(--px) * 14));
}
.p-sec03-card__bg.is-fade-in,
.p-sec03-card__chara.is-fade-in,
.p-sec03-card__name.is-fade-in,
.p-sec03-card__lead.is-fade-in,
.p-sec03-card__button.is-fade-in{
  animation: cardImgIn .55s cubic-bezier(.2,.8,.2,1) both;
}

@media (prefers-reduced-motion: reduce){
  .is-fade-init{ opacity:1; animation:none; }
  .p-sec02__ring.is-fade-init{ opacity:.5; }
  .p-sec03-card__bg.is-fade-init,
  .p-sec03-card__chara.is-fade-init,
  .p-sec03-card__name.is-fade-init,
  .p-sec03-card__lead.is-fade-init,
  .p-sec03-card__button.is-fade-init{ opacity:1; transform:none; }
}

/* ===== 英語ページ（index-en.html）用 =====
   本文フォントを futura-pt に。... */
html[lang="en"] body {
  font-family: "alfabet", sans-serif;
}

html[lang="en"] .l-footer__copy {
  font-family: "futura-pt", sans-serif;
}

html[lang="en"] .p-sec02__sub {
  transform: rotate(2deg);
  font-family: "alfabet", sans-serif;
  font-size: calc(var(--px) * 22);
}

html[lang="en"] .p-sec02__text p {
  font-family: "alfabet", sans-serif;
  font-size: calc(var(--px) * 16);
  transform: none;
  width: 100%;
}

html[lang="en"] .p-character-modal-box p {
  font-family: "alfabet", sans-serif;
  font-size: calc(var(--px) * 12);
}

html[lang="en"] .p-sec02__lead {
  margin-top: clamp(calc(var(--px) * 35), 5.5vw, calc(var(--px) * 96));
}

html[lang="en"] .p-sec03-card--lurky .p-sec03-card__lead {
  width: calc(var(--px) * 371);
  right: calc(var(--px) * -128);
  bottom: calc(var(--px) * 12);
}

html[lang="en"] .p-sec03-card--leopauncy .p-sec03-card__lead {
  width: calc(var(--px) * 370);
  left: calc(var(--px) * -69);
  bottom: calc(var(--px) * -6);
}

html[lang="en"] .p-sec03-card--weezap .p-sec03-card__lead {
  width: calc(var(--px) * 380);
  right: calc(var(--px) * -105);
  bottom: calc(var(--px) * -1);
}

html[lang="en"] .p-sec03-card--weezap .p-sec03-card__button{
  left: calc(var(--px) * 5);
}

html[lang="en"] .p-sec03-card--komodrop .p-sec03-card__lead {
  width: calc(var(--px) * 295);
  left: calc(var(--px) * -18);
  bottom: calc(var(--px) * -7);
}

html[lang="en"] #modal-lurky .p-character-modal__lead {
  width: calc(var(--px) * 536);
}

html[lang="en"] #modal-leopauncy .p-character-modal__lead {
  width: calc(var(--px) * 506);
}

html[lang="en"] #modal-weezap .p-character-modal__lead {
  width: calc(var(--px) * 536);
}

html[lang="en"] #modal-komodrop .p-character-modal__lead {
  width: calc(var(--px) * 483);
}

@media (max-width: 767px) {
  html[lang="en"] .p-sec02__sub{
    font-size: calc(var(--px) * 14);
    margin: calc(var(--px) * -25) auto 0;
  }
  html[lang="en"] .p-sec02__text p {
    font-size: calc(var(--px) * 12);
  }

  html[lang="en"] .p-character-modal-box p {
    font-size: calc(var(--px) * 12);
  }

    html[lang="en"] .p-sec03-card--lurky .p-sec03-card__lead {
    width: calc(var(--px) * 260);
    right: calc(var(--px) * -3);
    bottom: calc(var(--px) * 10);
  }

  html[lang="en"] .p-sec03-card--leopauncy .p-sec03-card__lead {
    width: calc(var(--px) * 251);
    left: calc(var(--px) * -20);
    bottom: calc(var(--px) * -5);
  }

  html[lang="en"] .p-sec03-card--weezap .p-sec03-card__lead {
    width: calc(var(--px) * 251);
    right: calc(var(--px) * 10);
    bottom: calc(var(--px) * -1);
  }

  html[lang="en"] .p-sec03-card--komodrop .p-sec03-card__lead {
    width: calc(var(--px) * 220);
    left: calc(var(--px) * -13);
    bottom: calc(var(--px) * -9);
  }

}