/* === 一時非表示（ギャラリー・特典）。戻すにはこの1ブロックを削除、または各要素の temp-hide クラスを外す === */
.temp-hide{display:none !important}

    :root {
      /* ★くすみパレット：白を混ぜた低彩度トーン。元に戻す場合は旧値
         (bg #1a2042 / bg-2 #232a55 / bg-3 #2f3870 / line #3c4790 / paper #edecf4 /
          muted #a6acd4 / coral #ff7884 / aqua #5fe3d9 / gold #f6cd78 / rec #ff4d57) */
      --bg: #d7d7d5;
      --bg-2: #e4e4e2;
      --bg-3: #eeeeec;
      --line: #a9a9a5;
      --paper: #2f2f2d;
      --muted: #6f6f6b;
      --coral: #b9646d;
      --aqua: #3e8b83;
      --gold: #9a8a64;
      --rec: #d0454e;
      /* ★フォント：百千鳥VF(Adobe Fonts)を第一候補。未設定/未読込のときはゴシック(Zen Kaku Gothic New)で表示。
         元の明朝に戻すには --mincho を "Zen Old Mincho", serif に戻すだけ。 */
      --mincho: "momochidori-variable", "Zen Kaku Gothic New", sans-serif;
      --gothic: "momochidori-variable", "Zen Kaku Gothic New", sans-serif;
      --latin: "Cormorant Garamond", serif;
      --mono: "Share Tech Mono", monospace;
      --maxw: 1180px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }
    }

    body {
      background: var(--bg);
      color: var(--paper);
      font-family: var(--gothic);
      line-height: 1.9;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body.locked {
      overflow: hidden;
      height: 100svh
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      display: block;
      max-width: 100%
    }

    .field {
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      /* ★アップ画像準拠：中心ほぼ白 → 縁グレーの無彩色ラジアル */
      background:
        radial-gradient(72% 82% at 50% 46%, #fbfbfb 0%, #e9e9e7 38%, #cbcbc9 68%, #969694 100%);
    }

    /* ★スクロールで移り変わる背景レイヤー（JSが .bgf を生成）。
       濃さ・切替の速さは js/script-B.js の BGFLOW_MAX / BGFLOW_BLEND で調整 */
    .bgflow {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none
    }

    .bgflow .bgf {
      position: absolute;
      inset: 0;
      /* ★背景の表示位置：--bgf-x(横 0%=左端/50%=中央/100%=右端), --bgf-y(縦) */
      background-position: var(--bgf-x, 50%) var(--bgf-y, 50%);
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0;
      will-change: opacity
    }

    /* ★スマホでの背景ごとの位置調整はここ（--bgf-x を 0〜100% で。縦は --bgf-y） */
    @media (max-width:760px) {
      .bgf[data-bg="story"] {
        --bgf-x: 50%
      }

      .bgf[data-bg="character1"] {
        --bgf-x: 24%
      }

      .bgf[data-bg="character2"] {
        --bgf-x: 77%
      }

      .bgf[data-bg="gallery"] {
        --bgf-x: 50%
      }

      .bgf[data-bg="product"] {
        --bgf-x: 50%
      }

      .bgf[data-bg="tokuten"] {
        --bgf-x: 50%
      }

      .bgf[data-bg="spec"] {
        --bgf-x: 50%
      }

      .bgf[data-bg="other"] {
        --bgf-x: 50%
      }
    }


    .grain {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .07;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .scan {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .5;
      background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
    }

    .intro {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: radial-gradient(75% 80% at 50% 46%, #f4f4f2 0%, #d9d9d7 55%, #a9a9a7 100%);
      display: grid;
      place-items: center;
      overflow: hidden;
      transition: opacity .8s ease
    }

    .intro.gone {
      opacity: 0;
      pointer-events: none
    }

    .jacket-art {
      position: absolute;
      inset: -5%;
      z-index: 0;
      pointer-events: none;
      background:
        url('../main-visual.jpg') center/cover no-repeat,
        radial-gradient(38% 28% at 72% 24%, rgba(246, 205, 120, .5), transparent 60%),
        radial-gradient(60% 50% at 50% 8%, rgba(255, 255, 255, .5), transparent 65%),
        linear-gradient(180deg, #ececea 0%, #dfdfdd 42%, #cfcfcd 78%, #c1c1bf 100%);
      background-size: cover;
      background-position: center;

      filter: saturate(.95) brightness(.82) contrast(1.04);
      opacity: .6;
      animation: mvbleed 2.8s .15s cubic-bezier(.22, 1, .36, 1) both, handheld 9s ease-in-out infinite
    }

    .jacket-art::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(120% 100% at 50% 38%, transparent 45%, rgba(88, 88, 86, .35) 100%),
        linear-gradient(180deg, transparent 55%, rgba(88, 88, 86, .22) 100%);
      opacity: 1
    }

    .jacket-blur {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      display: none
    }

    .intro-vid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      object-fit: cover;
      object-position: center center;
      opacity: .6;
      filter: saturate(.95) brightness(.82) contrast(1.04);
      pointer-events: none
    }

    @media (max-width:760px) {

      .jacket-art {
        background:
          url('../main-visual.jpg') center / contain no-repeat;
        background-color: transparent
      }

      .intro-vid {
        object-fit: contain
      }

      .jacket-blur {
        display: none
      }
    }

    @keyframes handheld {

      0%,
      100% {
        transform: translate(0, 0) scale(1.09)
      }

      33% {
        transform: translate(.8%, -.6%) scale(1.11)
      }

      66% {
        transform: translate(-.6%, .5%) scale(1.10)
      }
    }

    /* 軽量化：blurアニメは全画面の再描画が重いため、opacityのみのフェードに変更 */
    @keyframes mvbleed {
      0% {
        opacity: 0
      }

      30% {
        opacity: .3
      }

      62% {
        opacity: .55
      }

      100% {
        opacity: .6
      }
    }

    .intro-grade {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(96, 96, 94, .5) 100%),
        linear-gradient(120deg, rgba(255, 170, 120, .06), transparent 40%),
        linear-gradient(300deg, rgba(70, 200, 210, .08), transparent 45%);
    }

    .vf-grain {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: .1;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      animation: flick .4s steps(2) infinite
    }

    .vf-scan {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .6;
      background: repeating-linear-gradient(to bottom, rgba(95, 227, 217, .05) 0 1px, transparent 1px 4px);
    }

    @keyframes flick {
      0% {
        transform: translate(0, 0)
      }

      100% {
        transform: translate(-2px, 1px)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .jacket-art {
        animation: none
      }
    }

    .glitch-fx {
      position: fixed;
      inset: 0;
      z-index: 130;
      pointer-events: none;
      opacity: 0;
      overflow: hidden
    }

    .glitch-fx.run {
      animation: gx-base .75s steps(1, end) forwards;
      background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px)
    }

    .glitch-fx.run::before,
    .glitch-fx.run::after {
      content: "";
      position: absolute;
      inset: 0;
      mix-blend-mode: screen
    }

    .glitch-fx.run::before {
      background: linear-gradient(rgba(95, 227, 217, .45), rgba(95, 227, 217, .05));
      animation: gx-cyan .75s steps(9, end) forwards
    }

    .glitch-fx.run::after {
      background: linear-gradient(rgba(255, 90, 120, .45), rgba(255, 90, 120, .05));
      animation: gx-mag .75s steps(9, end) forwards
    }

    @keyframes gx-base {
      0% { opacity: 1; filter: brightness(2.2) }
      6% { opacity: .15 }
      14% { opacity: 1; filter: brightness(1) }
      72% { opacity: 1 }
      100% { opacity: 0 }
    }

    @keyframes gx-cyan {
      0% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 82% 0) }
      12% { opacity: .8; transform: translateX(-14px); clip-path: inset(8% 0 62% 0) }
      28% { opacity: .5; transform: translateX(16px); clip-path: inset(44% 0 34% 0) }
      44% { opacity: .8; transform: translateX(-9px); clip-path: inset(68% 0 14% 0) }
      62% { opacity: .4; transform: translateX(11px); clip-path: inset(28% 0 56% 0) }
      80% { opacity: .6; transform: translateX(-5px); clip-path: inset(85% 0 4% 0) }
      100% { opacity: 0; transform: translateX(0) }
    }

    @keyframes gx-mag {
      0% { opacity: 0; transform: translateX(0); clip-path: inset(72% 0 6% 0) }
      12% { opacity: .8; transform: translateX(13px); clip-path: inset(55% 0 28% 0) }
      28% { opacity: .5; transform: translateX(-17px); clip-path: inset(20% 0 60% 0) }
      44% { opacity: .8; transform: translateX(8px); clip-path: inset(4% 0 80% 0) }
      62% { opacity: .4; transform: translateX(-12px); clip-path: inset(48% 0 36% 0) }
      80% { opacity: .6; transform: translateX(6px); clip-path: inset(12% 0 74% 0) }
      100% { opacity: 0; transform: translateX(0) }
    }

    @media (prefers-reduced-motion:reduce) {
      .glitch-fx.run { animation: none; opacity: 0 }
      .glitch-fx.run::before,
      .glitch-fx.run::after { animation: none; opacity: 0 }
    }

    .rec,
    .tc,
    .vf-foot,
    .vf-foot2,
    .vf-cross {
      z-index: 2
    }

    .vf-corner {
      position: absolute;
      width: 46px;
      height: 46px;
      border: 2px solid rgba(66, 66, 64, .6)
    }

    .vf-corner.tl {
      top: 24px;
      left: 24px;
      border-right: 0;
      border-bottom: 0
    }

    .vf-corner.tr {
      top: 24px;
      right: 24px;
      border-left: 0;
      border-bottom: 0
    }

    .vf-corner.bl {
      bottom: 24px;
      left: 24px;
      border-right: 0;
      border-top: 0
    }

    .vf-corner.br {
      bottom: 24px;
      right: 24px;
      border-left: 0;
      border-top: 0
    }

    .rec {
      position: absolute;
      top: 30px;
      left: 80px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: .18em;
      color: #fff
    }

    .rec .dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--rec);
      box-shadow: 0 0 12px var(--rec);
      animation: blink 1s steps(1) infinite
    }

    @keyframes blink {
      50% {
        opacity: .15
      }
    }

    .tc {
      position: absolute;
      top: 30px;
      right: 80px;
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: .12em;
      color: #fff
    }

    .vf-foot {
      position: absolute;
      bottom: 34px;
      left: 80px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .22em;
      color: rgba(255, 255, 255, .55)
    }

    .vf-foot2 {
      position: absolute;
      bottom: 34px;
      right: 80px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .22em;
      color: rgba(255, 255, 255, .55)
    }

    .vf-cross {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 30px;
      transform: translate(-50%, -50%);
      opacity: .4;
      pointer-events: none
    }

    .vf-cross::before,
    .vf-cross::after {
      content: "";
      position: absolute;
      background: rgba(66, 66, 64, .62)
    }

    .vf-cross::before {
      left: 50%;
      top: 0;
      width: 1px;
      height: 100%;
      transform: translateX(-.5px)
    }

    .vf-cross::after {
      top: 50%;
      left: 0;
      height: 1px;
      width: 100%;
      transform: translateY(-.5px)
    }

    .intro-stage {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 20px
    }

    .intro-logo {
      display: inline-block;
      filter: blur(26px);
      opacity: .12;
      transform: scale(1.08);
      animation: focuspull 2.6s 1.1s cubic-bezier(.22, 1, .36, 1) forwards
    }

    .logo-img {
      width: min(86vw, 660px);
      height: auto;
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 0 45px rgba(95, 227, 217, .3))
    }

    .logo-fallback {
      display: none;
      font-family: var(--mincho);
      font-weight: 900;
      line-height: 1.05;
      font-size: clamp(46px, 11vw, 128px);
      letter-spacing: .04em;
      color: var(--paper)
    }

    .logo-fallback .accent {
      color: var(--aqua)
    }

    @keyframes focuspull {
      0% {
        filter: blur(26px);
        opacity: .12;
        transform: scale(1.08)
      }

      55% {
        filter: blur(6px);
        opacity: .7;
        transform: scale(1.02)
      }

      78% {
        filter: blur(1.5px)
      }

      100% {
        filter: blur(0);
        opacity: 1;
        transform: scale(1)
      }
    }

    .intro-sub {
      margin-top: 18px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: .3em;
      color: var(--aqua);
      opacity: 0;
      animation: fadein .8s 3.4s forwards
    }

    .gate {
      margin-top: 42px;
      opacity: 0;
      transform: translateY(12px);
      animation: fadein .9s 3.8s forwards
    }

    .gate p {
      font-family: var(--mincho);
      font-size: clamp(14px, 2.4vw, 17px);
      letter-spacing: .14em;
      margin-bottom: 22px;
      color: #3a3a36
    }

    .gate .btns {
      display: flex;
      gap: 16px;
      justify-content: center
    }

   .gate button {
  font-family: var(--mincho);
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--paper);
  cursor: pointer;
  padding: 13px 42px;
  border: 1px solid var(--line);
  /* ★いびつな輪郭：横4隅の丸み / 縦4隅の丸み（値を変えると歪み方が変わる） */
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: rgba(255, 255, 255, .55);
  transition: all .3s;
  /* ★わずかに傾ける（-0.6度）。「いいえ」側は下で逆に傾ける */
  transform: rotate(-0.6deg);
}

/* 「いいえ」だけ逆方向に傾けて対称っぽさを崩す */
.gate button.no {
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  transform: rotate(0.5deg);
}

    .gate button:hover,
    .gate button:focus-visible {
      border-color: var(--aqua);
      color: #fff;
      box-shadow: 0 0 22px rgba(95, 227, 217, .25);
      outline: none
    }

    .gate button.no:hover,
    .gate button.no:focus-visible {
      border-color: var(--coral);
      box-shadow: 0 0 22px rgba(255, 120, 132, .22)
    }

    .bye {
      font-family: var(--mincho);
      font-size: clamp(16px, 3vw, 22px);
      letter-spacing: .16em;
      color: var(--coral);
      opacity: 0;
      animation: fadein .8s forwards
    }

    @keyframes fadein {
      to {
        opacity: 1;
        transform: none
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .intro-logo {
        animation: none;
        filter: none;
        opacity: 1;
        transform: none
      }

      .intro-sub,
      .gate {
        animation: none;
        opacity: 1;
        transform: none
      }

      .vf-grain {
        animation: none
      }
    }

    @media (max-width:600px) {
      .rec {
        left: 30px;
        top: 60px
      }

      .tc {
        right: 30px;
        top: 60px
      }

      .vf-foot {
        left: 30px
      }

      .vf-foot2 {
        right: 30px
      }
    }

    .notif-stack {
      position: fixed;
      top: 84px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 80;
      width: min(92vw, 430px);
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none
    }

    .notif {
      pointer-events: auto;
      background: rgba(252, 252, 250, .8);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(16px);
      
      border-radius: 20px;
      padding: 14px 16px 15px;
      box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
      opacity: 0;
      transform: translateY(-26px) scale(.96);
      transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1)
    }

    .notif.in {
      opacity: 1;
      transform: none
    }

    .notif.out {
      opacity: 0;
      transform: translateY(-46px) scale(.95)
    }

    .notif-head {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--ヒラギノ角ゴ);
      font-size: 11px;
      letter-spacing: .18em;
      color: var(--aqua);
      margin-bottom: 6px
    }

    .notif-head .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--aqua);
      box-shadow: 0 0 8px var(--aqua)
    }

    .notif-head .time {
      margin-left: auto;
      color: var(--muted);
      letter-spacing: .05em;
      font-size: 10px
    }

    .notif.t2 .notif-head,
    .notif.t3 .notif-head {
      color: var(--aqua)
    }

    .notif.t3 .notif-head .dot {
      background: var(--aqua);
      box-shadow: 0 0 8px var(--aqua)
    }

    .notif-body {
      font-size: 13.5px;
      color: var(--paper);
      line-height: 1.6;
      letter-spacing: .02em;
      font-family: var(--ヒラギノ角ゴ)
    }

    @media (prefers-reduced-motion:reduce) {
      .notif {
        transition: opacity .3s linear
      }
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px clamp(16px, 4vw, 40px)
      
    }

    header::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(233, 233, 231, .94), rgba(233, 233, 231, 0));
      transition: background .3s
    }

    header.solid::before {
      background: rgba(240, 240, 238, .93);
      border-bottom: 1px solid var(--line);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px)
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mincho);
      font-weight: 700;
      letter-spacing: .16em;
      font-size: 15px
    }

    .brand .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .16em;
      color: #fff;
      padding: 3px 8px;
      border: 1px solid rgba(255, 77, 87, .6);
      border-radius: 2px;
      background: rgba(255, 77, 87, .08)
    }

    .brand .tag .rd {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--rec);
      box-shadow: 0 0 8px var(--rec);
      animation: blink 1s steps(1) infinite
    }

    .brand b {
      color: var(--aqua)
    }

    .brand-logo {
      height: 60px;
      width: auto;
      display: block;
      filter: drop-shadow(0 0 14px rgba(95, 227, 217, .28))
    }

    .brand-ph {
      display: none;
      align-items: center;
      height: 26px;
      padding: 0 14px;
      border: 1px dashed var(--line);
      border-radius: 3px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .28em;
      color: var(--muted)
    }

    @media (max-width:560px) {

      .brand-logo,
      .brand-ph {
        height: 22px
      }
    }

    nav.menu {
      display: flex;
      gap: clamp(6px, 1vw, 14px);
      align-items: center
    }

    nav.menu a {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 9px 13px;
      color: var(--muted);
      transition: color .25s
    }

    nav.menu a i {
      font-style: normal;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .16em;
      color: var(--aqua);
      opacity: .7
    }

    nav.menu a .lb {
      font-family: var(--gothic);
      font-weight: 500;
      font-size: 12.5px;
      letter-spacing: .14em
    }

    nav.menu a small {
      font-family: var(--mono);
      font-size: 8px;
      letter-spacing: .22em;
      color: var(--aqua);
      opacity: 0;
      transition: opacity .25s
    }

    nav.menu a:hover,
    nav.menu a:focus-visible {
      color: #fff;
      outline: none
    }

    nav.menu a:hover small,
    nav.menu a:focus-visible small {
      opacity: .9
    }

    nav.menu a:hover i,
    nav.menu a:focus-visible i {
      opacity: 1
    }

    nav.menu a::before,
    nav.menu a::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1.5px solid var(--aqua);
      opacity: 0;
      transition: opacity .25s, transform .25s;
      pointer-events: none
    }

    nav.menu a::before {
      top: 3px;
      left: 3px;
      border-right: 0;
      border-bottom: 0;
      transform: translate(5px, 5px)
    }

    nav.menu a::after {
      bottom: 3px;
      right: 3px;
      border-left: 0;
      border-top: 0;
      transform: translate(-5px, -5px)
    }

    nav.menu a:hover::before,
    nav.menu a:hover::after,
    nav.menu a:focus-visible::before,
    nav.menu a:focus-visible::after {
      opacity: 1;
      transform: none
    }

    .hud {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--mono);
      color: var(--muted)
    }

    .hud .bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 13px
    }

    .hud .bars i {
      width: 3px;
      background: var(--aqua);
      opacity: .85
    }

    .hud .bars i:nth-child(1) {
      height: 5px
    }

    .hud .bars i:nth-child(2) {
      height: 9px
    }

    .hud .bars i:nth-child(3) {
      height: 13px
    }

    .hud em {
      font-style: normal;
      font-size: 11px;
      letter-spacing: .1em;
      color: #fff
    }

    .rightgrp {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: 0;
      cursor: pointer;
      padding: 8px
    }

    .burger i {
      width: 24px;
      height: 2px;
      background: var(--paper);
      display: block;
      transition: .3s
    }

    .hero {
      min-height: 100svh;
      display: grid;
      place-items: end center;
      
      position: relative;
      padding: 90px 20px clamp(70px, 16vh, 150px)
    }

    .hero-bg {
      /* ★メインビジュアル動画(main-visual2)の表示調整【PC】。
         --mv-scale : 拡大率（1=等倍 / 上げると黒帯を隠せる。例 1.45）
         --mv-x     : 横位置（0=中央 / +で右 / -で左。例 -40px）
         --mv-y     : 縦位置（0=中央 / +で下 / -で上。例 40px） */
      --mv-scale: 1.45;
      --mv-x: 0px;
      --mv-y: 80px;
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      
      background-image:
        url('../main-visual2.png'),
        radial-gradient(60% 50% at 50% 28%, rgba(255, 255, 255, .5), transparent 70%),
        linear-gradient(180deg, #e6e6e4 0%, #cbcbc9 100%);
      background-size: contain, cover, cover;
      background-position: center center, center, center;
      background-repeat: no-repeat;
      filter: saturate(.95) brightness(.85) contrast(1.03);
      opacity: .6;
      /* ★入室後 MV_CLEAR_DELAY(js) 経過で .mv-clear が付き、白さがゆっくり抜ける */
      transition: opacity 1.8s ease, filter 1.8s ease
    }

    .hero-bg.mv-clear {
      filter: none
    }

    .hero-bg::after {
      transition: opacity 1.8s ease
    }

    .hero-bg.mv-clear::after {
      opacity: 0
    }

    .hero-vid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center center;
      transform: translate(var(--mv-x, 0px), var(--mv-y, 0px)) scale(var(--mv-scale, 1));
      transform-origin: center center;
      z-index: 0
      
    }

    .hero-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        radial-gradient(120% 100% at 50% 38%, transparent 45%, rgba(90, 90, 88, .3) 100%),
        linear-gradient(180deg, transparent 52%, rgba(90, 90, 88, .35) 100%)
    }

    .hero-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      display: none
    }

    @media (max-width:760px) {

      /* ★入室後メインビジュアルを 16:9 (1920×1080) のバナーで表示（横幅いっぱい）。
         タイトル等はバナーの下に積む。高さは aspect-ratio 16/9 で自動。 */
      .hero {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 78px 0 92px
      }

      .hero-bg {
        /* ★メインビジュアル動画の表示調整【スマホ】。--mv-scale=拡大率 / --mv-x=横(0=中央) / --mv-y=縦(0=中央,+で下) */
        --mv-scale: 1;
        --mv-x: 0px;
        --mv-y: 0px;
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 1920 / 1366;
        height: auto;
        margin: 0 0 26px;
        background-image: url('../main-visual2.png');
        background-size: cover;
        background-position: center center;
        background-color: #cfcfcd
      }

      .hero-vid {
        object-fit: cover;
        object-position: center center;
        transform: translate(var(--mv-x, 0px), var(--mv-y, 0px)) scale(var(--mv-scale, 1));
        transform-origin: center center;
        z-index: 1
      }

      .hero-inner {
        padding: 0 20px
      }

      .hero-bg::before {
        display: none
      }

      .hero-bg::after {
        z-index: 2
      }
    }

    .hero-inner {
      text-align: center;
      position: relative;
      z-index: 2
    }

    .eyebrow {
      font-family: var(--latin);
      font-style: italic;
      font-size: clamp(14px, 2vw, 20px);
      letter-spacing: .2em;
      color: var(--aqua);
      margin-bottom: 18px
    }

    .logo {
      display: inline-block
    }

    .logo .logo-img {
      width: min(90vw, 760px);
      filter: drop-shadow(0 0 60px rgba(95, 227, 217, .25))
    }

    .logo .logo-fallback {
      font-size: clamp(52px, 12vw, 148px);
      text-shadow: 0 0 60px rgba(95, 227, 217, .25)
    }

    .tagline {
      margin-top: 26px;
      font-size: clamp(13px, 2.2vw, 17px);
      letter-spacing: .1em;
      color: var(--paper)
    }

    .genre {
      margin-top: 18px;
      display: inline-block;
      font-family: var(--mono);
      font-size: clamp(11px, 1.8vw, 13px);
      letter-spacing: .28em;
      color: var(--aqua);
      border: 1px solid var(--line);
      padding: 7px 18px;
      border-radius: 99px
    }

    .tagline .div {
      color: var(--muted);
      margin: 0 .4em
    }

    .release {
      margin-top: 30px;
      display: inline-flex;
      flex-direction: column;
      gap: 6px;
      padding: 14px 30px;
      border: 1px solid var(--line);
      border-radius: 2px;
      background: rgba(255, 255, 255, .5)
    }

    .release b {
      font-family: var(--mincho);
      
      font-size: clamp(24px, 5.2vw, 36px);
      letter-spacing: .08em;
      color: var(--paper)
    }

    .release small {
      font-size: 11px;
      letter-spacing: .3em;
      color: var(--muted)
    }

    .scrollcue {
      position: absolute;
      bottom: 26px;
      left: 50%;
      transform: translateX(-50%);
      writing-mode: vertical-rl;
      font-family: var(--latin);
      font-style: italic;
      letter-spacing: .15em;
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 12px
    }

    .scrollcue::after {
      content: "";
      width: 1px;
      height: 48px;
      background: linear-gradient(var(--aqua), transparent);
      animation: drop 2s infinite
    }

    @keyframes drop {
      0% {
        transform: scaleY(0);
        transform-origin: top
      }

      50% {
        transform: scaleY(1);
        transform-origin: top
      }

      51% {
        transform-origin: bottom
      }

      100% {
        transform: scaleY(0);
        transform-origin: bottom
      }
    }

    section {
      position: relative;
      padding: clamp(70px, 11vw, 130px) clamp(18px, 5vw, 40px)
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto
    }

    /* ★セクション見出し：HUDラベル(英字mono)を上、日本語見出しを下の左寄せ構成 */
    .sec-head {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 48px
    }

    .sec-head .jp {
      order: 2;
      font-family: var(--mincho);
      font-weight: 700;
      font-size: clamp(28px, 5vw, 46px);
      letter-spacing: .1em;
      /* ★見出しの装飾（明るい背景＝既定）：ドロップシャドウ主体＋控えめな白 */
      text-shadow:
        0 0 3px rgba(255, 255, 255, .6),
        0 1px 2px rgba(40, 40, 38, .35),
        0 4px 16px rgba(40, 40, 38, .3);
      transition: text-shadow .6s ease, color .6s ease
    }

    /* ★暗い背景が来ている時（JSが自動判定で body.bg-dark を付与）：白い光彩に切替 */
    body.bg-dark .sec-head .jp {
      text-shadow:
        0 0 3px rgba(255, 255, 255, .95),
        0 0 14px rgba(255, 255, 255, .9),
        0 0 34px rgba(255, 255, 255, .55)
    }

    .sec-head .en {
      order: 1;
      font-family: var(--mono);
      font-style: normal;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: .34em;
      color: var(--aqua);
      padding: 0;
      /* ★英字ラベルの光彩（明背景既定） */
      text-shadow: 0 0 6px rgba(255, 255, 255, .8), 0 1px 8px rgba(40, 40, 38, .3);
      transition: text-shadow .6s ease
    }

    body.bg-dark .sec-head .en {
      text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 255, 255, .7)
    }

    .sec-head::after {
      content: "";
      order: 3;
      width: 64px;
      height: 1px;
      background: linear-gradient(90deg, var(--aqua), transparent);
      margin-top: 8px
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .8s ease, transform .8s ease
    }

    /* 見出しはキビッと（速く・短く）、カード類はゆったり＝出方に強弱 */
    .sec-head.reveal {
      transform: translateY(10px);
      transition-duration: .45s
    }

    .card.reveal,
    .info-card.reveal {
      transition-duration: 1.05s
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    @media (prefers-reduced-motion:reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none
      }
    }

    .story .lead {
      font-family: var(--mincho);
      font-size: clamp(18px, 2.6vw, 26px);
      /* ★本文の視認性：太さ・色・白ハロー（キャラ紹介文と同仕様） */
      font-weight: 600;
      color: #2e2e2a;
      line-height: 2.2;
      letter-spacing: .06em;
      max-width: 760px;
      text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9), 0 1px 10px rgba(255, 255, 255, .7)
    }

    .story .lead em {
      font-style: normal;
      color: var(--aqua)
    }

    /* ★ストーリー本文の座布団：製品概要と同系の額装（二重線＋四隅ダイヤ＋白パネル）。
       白の濃さ=linear-gradientの.72/.55、線の濃さ=borderと::before */
    .story-panel {
      position: relative;
      max-width: 820px;
      border: 1px solid rgba(60, 60, 56, .5);
      background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") left -5px top -5px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") right -5px top -5px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") left -5px bottom -5px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") right -5px bottom -5px no-repeat,
        linear-gradient(180deg, rgba(252, 252, 250, .72), rgba(244, 244, 242, .55));
      padding: clamp(26px, 4vw, 42px) clamp(20px, 3.5vw, 40px)
    }

    .story-panel::before {
      content: "";
      position: absolute;
      inset: 5px;
      border: 1px solid rgba(60, 60, 56, .22);
      pointer-events: none
    }

    /* ★ストーリー本文（プレーンな<p>）：キャラ紹介文と同じ視認性装飾 */
    .story .wrap p {
      font-family: var(--mincho);
      font-size: clamp(15px, 2vw, 17px);
      font-weight: 600;
      color: #2e2e2a;
      line-height: 2.1;
      letter-spacing: .04em;
      max-width: 760px;
      text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9), 0 1px 10px rgba(255, 255, 255, .7)
    }

    .story .body {
      margin-top: 34px;
      max-width: 680px;
      color: #4a4a46;
      font-size: 15px;
      letter-spacing: .04em
    }

    .story .quote {
      margin-top: 46px;
      font-family: var(--mincho);
      font-style: normal;
      font-size: clamp(22px, 4vw, 38px);
      color: var(--aqua);
      letter-spacing: .04em
    }

    .char-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(18px, 3vw, 200px);
      max-width: 1180px;
      margin: 0 auto
    }

    .card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(230px, 300px) 1fr;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 3px;
      overflow: hidden;
      background: linear-gradient(160deg, var(--bg-2), var(--bg));
      transition: transform .4s, border-color .4s
    }

    .card:hover {
      transform: translateY(-6px);
      border-color: var(--aqua)
    }

    .portrait {
      position: relative;
      aspect-ratio: 4/5;
      display: grid;
      place-items: center;
      overflow: hidden;
      transition: opacity .8s ease
    }

    .portrait .ph {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .2em;
      background: radial-gradient(70% 60% at 50% 18%, rgba(95, 227, 217, .18), transparent 60%), linear-gradient(180deg, var(--bg-3), var(--bg))
    }

    .portrait .silhouette {
      width: 62%;
      height: 80%;
      align-self: end;
      border-radius: 46% 46% 0 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
      box-shadow: inset 0 30px 60px rgba(95, 227, 217, .12)
    }

    .portrait .no {
      position: absolute;
      top: 12px;
      left: 14px;
      font-family: var(--latin);
      font-style: italic;
      font-size: 34px;
      color: rgba(255, 255, 255, .18)
    }

    .portrait .char-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 1
    }

    /* ★現像後に切り替わる立ち絵（char-dev）。元の立ち絵(char-img)の上に重ねてクロスフェード */
    .portrait .char-dev {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      z-index: 2;
      opacity: 0;
      transition: opacity .8s ease;
      pointer-events: none
    }

    .char-shot.char-swapped .char-dev {
      opacity: 1
    }

    .char-shot.char-swapped .char-img {
      opacity: 0;
      transition: opacity .8s ease
    }

    .toku-hero .pic img,
    .shop-card .pic img,
    .orig-card .pic img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1
    }

    .card .info {
      min-width: 0;
      overflow-wrap: anywhere;
      padding: 22px clamp(16px, 2vw, 26px) 26px
    }

    .card .info .line {
      font-family: var(--mincho);
      color: var(--aqua);
      font-size: 13px;
      letter-spacing: .05em;
      margin-bottom: 12px;
      min-height: 2.6em
    }

    .card .info h3 {
      font-family: var(--mincho);
      font-weight: 700;
      font-size: clamp(22px, 3vw, 30px);
      letter-spacing: .1em
    }

    .card .info .en {
      font-family: var(--mono);
      font-style: normal;
      text-transform: uppercase;
      color: var(--muted);
      font-size: 15px;
      letter-spacing: .08em;
      margin-bottom: 14px
    }

    .card .info p {
      font-size: 13.5px;
      color: #4a4a46;
      letter-spacing: .03em
    }

    .card .info .meta {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
      color: var(--muted)
    }

    .card .info .meta span {
      border: 1px solid var(--line);
      padding: 4px 10px;
      border-radius: 99px;
      letter-spacing: .08em
    }

    .card .info .profile {
      margin-top: 18px;
      border-top: 1px solid var(--line);
      padding-top: 14px
    }

    .card .info .profile .ttl {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .22em;
      color: var(--aqua);
      margin-bottom: 11px
    }

    .card .info .profile dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 7px 16px;
      margin: 0;
      font-size: 12.5px
    }

    .card .info .profile dt {
      color: var(--muted);
      letter-spacing: .06em;
      white-space: nowrap
    }

    .card .info .profile dd {
      margin: 0;
      color: var(--paper);
      letter-spacing: .03em
    }

    .card.sub {
      opacity: .72;
      filter: saturate(.85)
    }

    .card.sub:hover {
      opacity: 1;
      filter: none
    }

    .card.sub .info h3 {
      font-size: clamp(18px, 2.4vw, 23px);
      color: #3a3a36
    }

    .card.sub .portrait .ph {
      background: linear-gradient(180deg, var(--bg-2), var(--bg))
    }

    #character {
      overflow: hidden
    }

    .char-shot {
      position: relative;
      min-height: 100svh;
      display: grid;
      align-items: center;
      padding: clamp(40px, 7vh, 90px) 0
    }

    .shot-bg {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 100vw;
      
      transform: translateX(-50%);
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      transition: opacity .9s ease;
      
      -webkit-mask-image: radial-gradient(150% 130% at 50% 46%, #000 72%, transparent 100%);
      mask-image: radial-gradient(150% 130% at 50% 46%, #000 72%, transparent 100%);
    }

    .shot-bg-img {
      position: absolute;
      inset: 0;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      filter: saturate(.9) brightness(.75) contrast(1.02);
      transform: scale(1.05);
      
      background-color: transparent;
    }

    .shot-bg-vid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      z-index: 1;
      
      filter: saturate(.9) brightness(.75) contrast(1.02);
      transform: scale(1.05)
    }

    .shot-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(60% 55% at 50% 36%, rgba(95, 227, 217, .10), transparent 72%),
        radial-gradient(72% 60% at 70% 64%, rgba(255, 120, 132, .08), transparent 74%);
    }

    .shot-stage {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: clamp(260px, 38vw, 460px) 1fr;
      gap: clamp(28px, 5vw, 72px);
      align-items: center;
      max-width: 1040px;
      width: 100%;
      margin: 0 auto
    }

    .char-shot:nth-child(even) .shot-stage {
      grid-template-columns: 1fr clamp(260px, 38vw, 460px)
    }

    .char-shot:nth-child(even) .shot-photo {
      order: 2
    }

    .shot-photo {
      position: relative;
      width: 100%;
      transition: transform .8s cubic-bezier(.22, 1, .36, 1), background .8s ease, padding .8s ease, box-shadow .8s ease
    }

    .shot-photo .portrait {
      position: relative;
      aspect-ratio: 2657 / 4657;
      
      overflow: hidden;
      background: transparent;
      
      border: 1px solid transparent;
      
      opacity: 0;
      
      transition: border-color .8s ease, opacity .8s ease
    }

    /* ★現像の中身：背後の背景(shot-bg)をこの位置で切り抜いた絵。現像完了でフッと定着する
       （切り抜きの位置合わせはJSが --cut-* 変数で自動同期） */
    .shot-photo .portrait::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: var(--cut-img, none);
      background-repeat: no-repeat;
      background-size: var(--cut-size, cover);
      background-position: var(--cut-pos, center);
      opacity: 0;
      transition: opacity 1.1s ease
    }

    .char-shot.developed .portrait::before {
      opacity: 1
    }

    /* 現像演出：現像直後、写真表面をツヤが一度だけ走る */
    .shot-photo .portrait::after {
      content: "";
      position: absolute;
      inset: -30% -60%;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .35) 50%, transparent 58%);
      transform: translateX(-70%)
    }

    .char-shot.developed .portrait::after {
      animation: glosssweep 1.15s .55s ease both
    }

    @keyframes glosssweep {
      0% {
        opacity: 0;
        transform: translateX(-70%)
      }

      18% {
        opacity: 1
      }

      100% {
        opacity: 0;
        transform: translateX(70%)
      }
    }

    .portrait-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 1;
      
      filter: saturate(1) brightness(.96) contrast(1.02);
      transition: filter 1.2s ease, opacity .8s ease;
      
      background-color: #dcdcda
    }

    .char-shot.developed .portrait-bg {
      opacity: 1
    }

    .char-shot:not(.developed) .shot-photo {
      background: transparent;
      padding: 0;
      box-shadow: none
    }

    .char-shot:not(.developed) .portrait {
      border-color: transparent
    }

    .shot-photo .develop {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      mix-blend-mode: screen;
      background: linear-gradient(180deg, rgba(180, 205, 215, .9), rgba(120, 145, 165, .6))
    }

    .shot-photo .shutter {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
      overflow: hidden
    }

    .shot-photo .shutter span {
      position: absolute;
      left: 0;
      right: 0;
      height: 52%;
      background: #04060e;
      transform: scaleY(0)
    }

    .shot-photo .shutter span:first-child {
      top: 0;
      transform-origin: top
    }

    .shot-photo .shutter span:last-child {
      bottom: 0;
      transform-origin: bottom
    }

    .shot-photo .flash {
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      background: #fff;
      opacity: 0
    }

    /* キャプションはチェキの白フチ（下の余白）に、手書きメモ風のインクで */
    .shot-photo .cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 18px;
      z-index: 7;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 0 20px;
      opacity: 0;
      transition: opacity .5s .35s;
      font-family: var(--mono);
      color: #57564f
    }

    .shot-photo .cap .cam {
      font-size: 10px;
      letter-spacing: .2em;
      color: #8f8e85
    }

    .shot-photo .cap .nm {
      font-size: 12px;
      letter-spacing: .14em
    }

    .char-shot.snap .shutter span {
      animation: blade .44s ease
    }

    .char-shot.snap .flash {
      animation: flashfx .5s ease
    }

    @keyframes blade {
      0% {
        transform: scaleY(0)
      }

      42% {
        transform: scaleY(1.02)
      }

      58% {
        transform: scaleY(1.02)
      }

      100% {
        transform: scaleY(0)
      }
    }

    @keyframes flashfx {
      0%, 12% {
        opacity: 0
      }

      18% {
        opacity: .96
      }

      55% {
        opacity: 0
      }

      100% {
        opacity: 0
      }
    }

    .char-shot.developing .develop {
      animation: devwash 1.6s ease forwards
    }

    .char-shot.developing .char-img {
      animation: devimg 1.7s ease both
    }

    @keyframes devwash {
      0% {
        opacity: .9
      }

      100% {
        opacity: 0
      }
    }

    @keyframes devimg {
      0% {
        filter: saturate(0) brightness(1.5) contrast(.6)
      }

      100% {
        filter: saturate(1) brightness(1) contrast(1)
      }
    }

    
    /* ★チェキ風の白フレーム：紙色=background / 縁の厚み=padding（下辺を厚く） */
    .char-shot.developed .shot-photo {
      background: linear-gradient(180deg, #fcfbf8, #f4f2ec);
      padding: 14px 14px 58px;
      border-radius: 2px;
      border: 1px solid rgba(60, 60, 56, .08);
      box-shadow: 0 18px 42px rgba(40, 40, 38, .3), 0 3px 10px rgba(40, 40, 38, .18);
      transform: rotate(-1.4deg)
    }

    .char-shot:nth-child(even).developed .shot-photo {
      transform: rotate(1.4deg)
    }

    .char-shot.developed .portrait {
      border-color: rgba(60, 60, 56, .1)
    }

    .char-shot.developed .cap {
      opacity: 1
    }

    .shot-info {
      min-width: 0;
      position: relative;
      isolation: isolate
    }

    .shot-info .info-vid {
      position: absolute;
      top: -7%;
      left: -6%;
      width: 112%;
      max-width: none;
      height: 114%;
      
      z-index: -2;
      
      object-fit: cover;
      object-position: var(--info-vid-x, 0%) center;
      
      border-radius: 14px;
      pointer-events: none;
      opacity: 0;
      
      transition: opacity 1s ease;
      
      -webkit-mask-image: radial-gradient(140% 125% at 50% 45%, #000 55%, transparent 100%);
      mask-image: radial-gradient(140% 125% at 50% 45%, #000 55%, transparent 100%)
    }

    .shot-info.in .info-vid {
      opacity: var(--info-vid-strength, .85)
    }

    .info-pad {
      position: absolute;
      inset: -7% -6%;
      z-index: -1;
      pointer-events: none;
      /* ★破れた紙のようなギザギザ輪郭（clip-pathの座標をいじると破れ方が変わる） */
      clip-path: polygon(1.2% 3%, 6% .6%, 14% 2.2%, 23% .8%, 31% 2.6%, 42% .4%, 53% 2.1%, 63% .9%, 72% 2.4%, 83% .7%, 92% 2.8%, 99% 1.4%, 98.2% 12%, 99.6% 24%, 97.9% 37%, 99.4% 52%, 98.1% 66%, 99.7% 79%, 98.4% 91%, 99% 98.6%, 90% 97.6%, 79% 99.5%, 68% 97.8%, 56% 99.6%, 45% 98%, 33% 99.7%, 21% 98.1%, 11% 99.4%, 3% 98.2%, .8% 90%, 2.3% 77%, .5% 63%, 2% 49%, .6% 36%, 2.4% 22%, .9% 10%);
      background:
        linear-gradient(160deg, transparent 34%, rgba(70, 70, 66, .06) 35%, transparent 37%),
        linear-gradient(100deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .5));
      filter: drop-shadow(0 10px 22px rgba(40, 40, 38, .18));
      transform: scale(0) rotate(-2deg);
      transform-origin: 50% 44%;
      transition: transform .8s cubic-bezier(.34, 1.25, .45, 1)
    }

    .shot-info.in .info-pad {
      transform: scale(1) rotate(-.45deg)
    }

    @media (prefers-reduced-motion: reduce) {
      .info-pad {
        transform: scale(1) rotate(-.45deg);
        transition: none
      }

      .shot-info .info-vid {
        opacity: var(--info-vid-strength, .85);
        transition: none
      }

      .shot-bg,
      .shot-photo .portrait {
        transition: none
      }
    }

    .shot-info .info-vid {
      display: none;
      position: absolute;
      top: -7%;
      left: -6%;
      width: 112%;
      max-width: none;
      height: 114%;
      z-index: -2;
      
      object-fit: cover;
      object-position: var(--mob-info-bg-x, 50%) center;
      border-radius: 14px;
      pointer-events: none;
      opacity: var(--info-vid-strength, .85);
      -webkit-mask-image: radial-gradient(140% 125% at 50% 45%, #000 55%, transparent 100%);
      mask-image: radial-gradient(140% 125% at 50% 45%, #000 55%, transparent 100%)
    }

    .shot-info .step {
      opacity: 0;
      transform: translate(-20px, 16px);
      filter: blur(4px);
      transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1), filter .55s ease
    }

    .shot-info .step.in {
      opacity: 1;
      transform: none;
      filter: none
    }

    .shot-info .line {
      font-family: var(--mincho);
      color: var(--aqua);
      /* ★キャッチコピーの大きさ・太さ */
      font-size: clamp(16px, 2.4vw, 19px);
      font-weight: 700;
      letter-spacing: .05em;
      line-height: 1.7;
      margin-bottom: 14px
    }

    .shot-info h3 {
      font-family: var(--mincho);
      font-weight: 700;
      font-size: clamp(26px, 4vw, 38px);
      letter-spacing: .1em
    }

    .shot-info .en {
      font-family: var(--mono);
      font-style: normal;
      text-transform: uppercase;
      color: var(--muted);
      font-size: 16px;
      letter-spacing: .08em;
      margin: 4px 0 16px
    }

    .shot-info p {
      font-size: 14px;
      /* ★紹介文の視認性：太さ(600)・色の濃さ・白ハロー(text-shadow)で背景を隠さず文字を浮かせる */
      font-weight: 600;
      color: #2e2e2a;
      letter-spacing: .03em;
      line-height: 1.95;
      text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9), 0 1px 10px rgba(255, 255, 255, .7)
    }

    .shot-info .profile {
      margin-top: 20px;
      border-top: 1px solid var(--line);
      padding-top: 16px;
      /* ★プロフィール欄のフォント：百千鳥VF（未読込時はゴシックにフォールバック） */
      font-family: var(--mincho)
    }

    /* ★プロフィール見出し：シンプルでシャープな1本線の下線（文字幅ぴったり）。
       線の太さ・色は border-bottom、文字の大きさは font-size で調整 */
    .shot-info .profile .ttl {
      display: inline-block;
      font-family: var(--mincho);
      font-weight: 600;
      font-size: 13.5px;
      letter-spacing: .3em;
      color: #3c3c38;
      padding: 0 1px 7px;
      border-bottom: 1px solid #3c3c38;
      margin-bottom: 13px
    }

    /* ★プロフィール行の下線：レース（スカラップ＋小さなドット）。SVGの色 %236fb3aa を変えると色替え */
    .shot-info .prow {
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 6px 14px;
      padding: 7px 0 10px;
      background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='7' viewBox='0 0 18 7'><path d='M0 1 Q4.5 6.5 9 1 Q13.5 6.5 18 1' fill='none' stroke='%236fb3aa' stroke-width='1'/><circle cx='9' cy='5.6' r='.7' fill='%236fb3aa'/></svg>") left bottom repeat-x;
      font-size: 13px
    }

    .shot-info .prow .k {
      color: #5a5a55;
      font-weight: 500;
      letter-spacing: .06em;
      text-shadow: 0 0 5px rgba(255, 255, 255, .85)
    }

    .shot-info .prow .v {
      color: #2e2e2a;
      font-weight: 600;
      letter-spacing: .03em;
      text-shadow: 0 0 5px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .85)
    }

    @media (max-width:820px) {

      .shot-info .info-vid {
        display: block
      }

      .shot-bg-img {
        background-position: var(--mob-photo-bg-x, 50%) center
      }

      .shot-bg-vid {
        object-position: var(--mob-photo-bg-x, 50%) center
      }

      .shot-stage,
      .char-shot:nth-child(even) .shot-stage {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 58px
        
      }

      .char-shot:nth-child(even) .shot-photo {
        order: 0
      }

      .char-shot {
        min-height: auto;
        padding: 64px 0
      }
    }

    .gal {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px
    }

    .gal .cell {
      aspect-ratio: 1;
      border: 1px solid var(--line);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      background: linear-gradient(135deg, var(--bg-2), var(--bg-3));
      transition: transform .35s
    }

    .gal .cell::after {
      content: "GALLERY";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--latin);
      font-style: italic;
      color: rgba(255, 255, 255, .16);
      font-size: 13px;
      letter-spacing: .15em
    }

    .gal .cell:hover {
      transform: scale(1.04)
    }

    .gal .cell:nth-child(3n)::after {
      content: "CG"
    }

    .gal .cell img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 2;
      transition: transform .4s
    }

    .gal .cell:hover img {
      transform: scale(1.05)
    }

    .gal .cell .gno {
      position: absolute;
      top: 8px;
      left: 10px;
      z-index: 3;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      color: rgba(255, 255, 255, .55)
    }

    @media (max-width:760px) {
      .gal {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .stage-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 3vw, 46px)
    }

    .stage-item {
      border-top: 1px solid var(--line);
      padding-top: 24px
    }

    .stage-item .pic {
      aspect-ratio: 16/10;
      border-radius: 3px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--bg-3), var(--bg));
      border: 1px solid var(--line)
    }

    .stage-item .pic::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(60% 80% at 70% 20%, rgba(246, 205, 120, .14), transparent)
    }

    .stage-item h3 {
      font-family: var(--mincho);
      font-size: clamp(20px, 3vw, 26px);
      letter-spacing: .1em;
      margin-bottom: 6px
    }

    .stage-item .en {
      font-family: var(--latin);
      font-style: italic;
      color: var(--aqua);
      font-size: 13px;
      letter-spacing: .1em;
      margin-bottom: 14px
    }

    .stage-item p {
      font-size: 14px;
      color: #4a4a46;
      letter-spacing: .03em
    }

    .spec-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(24px, 4vw, 60px)
    }

    /* ★製品情報などの額装フレーム：外線＋内線の二重線、四隅にダイヤの飾り。
       線の濃さ＝border と ::before、四隅の飾り＝background の svg（%233c3c38 が色） */
    .spec-block {
      position: relative;
      border: 1px solid rgba(60, 60, 56, .55);
      background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") left -5px top -5px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") right -5px top -5px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") left -5px bottom -5px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11'><rect x='2.3' y='2.3' width='6.4' height='6.4' transform='rotate(45 5.5 5.5)' fill='%233c3c38'/></svg>") right -5px bottom -5px no-repeat,
        linear-gradient(180deg, rgba(252, 252, 250, .72), rgba(243, 243, 241, .5));
      padding: 30px 24px 24px
    }

    .spec-block::before {
      content: "";
      position: absolute;
      inset: 5px;
      border: 1px solid rgba(60, 60, 56, .25);
      pointer-events: none
    }

    /* 見出しは枠の上線に乗せる（額のネームプレート風） */
    .spec-block h3 {
      position: absolute;
      top: -11px;
      left: 18px;
      margin: 0;
      padding: 0 12px;
      background: #f0f0ee;
      font-family: var(--mincho);
      font-size: 15px;
      letter-spacing: .18em;
      color: var(--paper);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .spec-block h3::before {
      content: "◆";
      color: var(--aqua);
      font-size: 8px
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px
    }

    th,
    td {
      text-align: left;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      letter-spacing: .03em
    }

    th {
      color: var(--muted);
      font-weight: 500;
      white-space: nowrap;
      width: 38%
    }

    td {
      color: var(--paper)
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(14px, 2vw, 22px)
    }

    .info-card {
      position: relative;
      display: block;
      border: 1px solid var(--line);
      border-radius: 3px;
      padding: 26px clamp(20px, 3vw, 30px);
      background: linear-gradient(160deg, var(--bg-2), var(--bg));
      transition: transform .35s, border-color .35s, box-shadow .35s
    }

    .info-card:hover {
      transform: translateY(-4px);
      border-color: var(--aqua);
      box-shadow: 0 0 26px rgba(95, 227, 217, .12)
    }

    .info-card i {
      font-style: normal;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .2em;
      color: var(--aqua)
    }

    .info-card h3 {
      font-family: var(--mincho);
      font-size: clamp(18px, 2.6vw, 22px);
      letter-spacing: .08em;
      margin: 8px 0 8px
    }

    .info-card p {
      font-size: 13px;
      color: #4a4a46;
      letter-spacing: .03em
    }

    .info-card .go {
      display: inline-block;
      margin-top: 16px;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .18em;
      color: var(--aqua)
    }

    .toku-tier {
      font-family: var(--mincho);
      font-weight: 700;
      font-size: clamp(17px, 2.6vw, 22px);
      letter-spacing: .1em;
      color: var(--paper);
      margin: 48px 0 22px;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .toku-tier::before {
      content: "＜";
      color: var(--aqua)
    }

    .toku-tier::after {
      content: "＞";
      color: var(--aqua);
      margin-left: -4px
    }

    .toku-tier:first-of-type {
      margin-top: 0
    }

    .toku-hero {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: clamp(20px, 3vw, 40px);
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 4px;
      overflow: hidden;
      background: linear-gradient(160deg, var(--bg-2), var(--bg))
    }

    .toku-hero .pic {
      aspect-ratio: 4/3;
      position: relative;
      background: linear-gradient(135deg, var(--bg-3), var(--bg));
      border-right: 1px solid var(--line)
    }

    .toku-hero .pic::after {
      content: "VISUAL";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--latin);
      font-style: italic;
      color: rgba(255, 255, 255, .16);
      letter-spacing: .2em
    }

    .toku-hero .txt {
      padding: clamp(22px, 3vw, 40px)
    }

    .toku-hero .txt .badge {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .22em;
      color: var(--aqua);
      border: 1px solid var(--line);
      padding: 5px 12px;
      border-radius: 99px;
      display: inline-block;
      white-space: nowrap;
      
      margin-bottom: 16px
    }

    @media (max-width:760px) {
      .toku-hero {
        grid-template-columns: 1fr
      }

      .toku-hero .txt {
        text-align: center
      }

      .toku-hero .txt .badge {
        margin-left: auto;
        margin-right: auto
      }
    }

    .toku-hero .txt h4 {
      font-family: var(--mincho);
      font-size: clamp(20px, 3vw, 28px);
      letter-spacing: .06em;
      margin-bottom: 14px
    }

    .toku-hero .txt p {
      font-size: 14px;
      color: #4a4a46;
      letter-spacing: .03em
    }

    .toku-shops {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(14px, 2vw, 22px)
    }

    .shop-card {
      border: 1px solid var(--line);
      border-radius: 3px;
      overflow: hidden;
      background: linear-gradient(160deg, var(--bg-2), var(--bg));
      transition: transform .35s, border-color .35s
    }

    .shop-card:hover {
      transform: translateY(-5px);
      border-color: var(--aqua)
    }

    .shop-card .pic {
      aspect-ratio: 3/4;
      position: relative;
      background: linear-gradient(135deg, var(--bg-3), var(--bg))
    }

    .shop-card .pic::after {
      content: "TAPESTRY";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--latin);
      font-style: italic;
      color: rgba(255, 255, 255, .15);
      font-size: 12px;
      letter-spacing: .18em
    }

    .shop-card .body {
      padding: 18px 20px 22px
    }

    .shop-card .body .where {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--aqua)
    }

    .shop-card .body h5 {
      font-family: var(--mincho);
      font-size: 18px;
      letter-spacing: .06em;
      margin: 6px 0 8px
    }

    .shop-card .body p {
      font-size: 12.5px;
      color: #4a4a46
    }

    .shop-card .body .go {
      display: inline-block;
      margin-top: 14px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .16em;
      color: var(--aqua)
    }

    .toku-orig {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px
    }

    .orig-card {
      border: 1px solid var(--line);
      border-radius: 3px;
      overflow: hidden;
      background: linear-gradient(160deg, var(--bg-2), var(--bg));
      transition: transform .3s, border-color .3s
    }

    .orig-card:hover {
      transform: translateY(-4px);
      border-color: var(--aqua)
    }

    .orig-card .pic {
      aspect-ratio: 16/10;
      position: relative;
      background: linear-gradient(135deg, var(--bg-3), var(--bg))
    }

    .orig-card .pic::after {
      content: "BONUS";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--latin);
      font-style: italic;
      color: rgba(255, 255, 255, .14);
      font-size: 11px;
      letter-spacing: .16em
    }

    .orig-card .body {
      padding: 14px 16px 18px
    }

    .orig-card .body .where {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .16em;
      color: var(--aqua)
    }

    .orig-card .body h5 {
      font-family: var(--mincho);
      font-size: 14px;
      letter-spacing: .04em;
      margin: 5px 0 0
    }

    footer {
      padding: 60px 20px 40px;
      text-align: center;
      border-top: 1px solid var(--line);
      margin-top: 40px
    }

    footer .fl {
      font-family: var(--mincho);
      letter-spacing: .2em;
      font-size: 14px;
      margin-bottom: 14px
    }

    footer .copy {
      display: block;
      font-family: var(--mono);
      color: var(--paper);
      font-size: 12px;
      letter-spacing: .14em;
      margin-bottom: 8px
    }

    footer .note {
      display: block;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: .06em
    }

    @media (max-width:1000px) {
      nav.menu {
        position: fixed;
        inset: 0 0 0 auto;
        width: 74%;
        max-width: 340px;
        flex-direction: column;
        justify-content: center;
        gap: 22px;
        background: rgba(238, 238, 236, .97);
        backdrop-filter: blur(10px);
        transform: translateX(100%);
        transition: transform .4s;
        border-left: 1px solid var(--line);
        padding: 40px;
        z-index: 55
      }

      nav.menu.open {
        transform: none
      }

      nav.menu a {
        font-size: 16px;
        flex-direction: row;
        gap: 10px;
        padding: 6px
      }

      nav.menu a .lb {
        font-size: 17px
      }

      nav.menu a small {
        opacity: .7
      }

      nav.menu a::before,
      nav.menu a::after {
        display: none
      }

      .hud {
        display: none
      }

      .burger {
        display: flex;
        z-index: 60
      }
    }

    @media (max-width:760px) {
       .char-grid {
        grid-template-columns: 1fr
      }

      .card {
        grid-template-columns: 1fr
      }

      .toku-shops {
        grid-template-columns: 1fr
      }

      .spec-grid {
        grid-template-columns: 1fr
      }

      .info-grid {
        grid-template-columns: 1fr
      }

      .sec-head {
        gap: 7px
      }
    }

    @media (max-width:560px) {
      .toku-orig {
        grid-template-columns: repeat(2, 1fr)
      }
    }