/*
  MOVEMENT (Home / Program)
  - Home: Scroll-synced “Movement Theater”
  - Tone: White / Minimal / Silver / Champagne
*/

:root{
  --bg: #fbfbfb;
  --fg: #0f0f10;
  --muted: rgba(15,15,16,0.64);
  --line: rgba(15,15,16,0.14);
  --line2: rgba(15,15,16,0.08);
  --glass: rgba(255,255,255,0.64);
  --glass2: rgba(255,255,255,0.86);

  --silver: #c3c6cc;
  --silver2: #d7dae0;
  --champagne: #d8c9a8;

  --radius: 22px;
  --v: 0;
  --p: 0;

  /* Home uses the shared header (nav-common.css).
     Keep the theater padding/offsets in sync with the actual header height. */
  --headerH: var(--mvg-navH, 72px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: inherit; text-decoration: none; }
a:focus-visible{ outline: 2px solid rgba(15,15,16,0.22); outline-offset: 3px; border-radius: 10px; }

.skipLink{
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 9999;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--glass2);
  border-radius: 999px;
  transform: translateY(-140%);
  transition: transform .2s ease;
}
.skipLink:focus{ transform: translateY(0); }

/* Header */
.siteHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--headerH);
  z-index: 200;
}
.headerInner{
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(16px, 3vw, 32px);
  background: color-mix(in oklab, var(--glass) 82%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line2) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-width: 0;
}
.brandLogo{
  height: 22px;
  width: auto;
  opacity: 0.92;
}
.brandName{
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: var(--fs, 12px);
  color: rgba(15,15,16,0.62);
}

.nav{
  justify-self: center;
  display: inline-flex;
  gap: 22px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--line2) 70%, transparent);
  background: color-mix(in oklab, var(--glass) 50%, transparent);
}
.navLink{
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 10px 10px;
  border-radius: 999px;
  color: rgba(15,15,16,0.62);
  position: relative;
}
.navLink.isActive{ color: rgba(15,15,16,0.88); }
.navLink.isActive::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1px;
  background: color-mix(in oklab, var(--fg) 42%, transparent);
}

.reserveBtn{
  justify-self: end;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--silver) 58%, var(--line) 30%);
  background: color-mix(in oklab, var(--glass2) 88%, transparent);
  overflow: hidden;
  transform: translateZ(0);
}
.reserveBtnLabel{
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.88);
}
.reserveBtnGlow{
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 30% 40%, rgba(216,201,168,0.38), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(195,198,204,0.32), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}
.reserveBtn:hover .reserveBtnGlow{ opacity: 1; }

/* Theater */
.theater{
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  padding-top: var(--headerH);
  overflow: hidden;
  /* 3D camera swings (Chapter 01) */
  perspective: 1200px;
  transform-style: preserve-3d;
}
.layer{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ------------------------------------------------------------------
   CHAPTER 01 RIG (Highest firepower)
   - injected by JS (no HTML edits)
   - huge screen-space motion (grid / slabs / sweep / flash)
------------------------------------------------------------------- */
.ch1Rig{
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: multiply;
  will-change: transform, opacity;
}

.ch1Grid{
  position: absolute;
  inset: -18%;
  background:
    repeating-linear-gradient(90deg,
      rgba(15,15,16,0.06) 0,
      rgba(15,15,16,0.06) 1px,
      transparent 1px,
      transparent 120px
    ),
    repeating-linear-gradient(0deg,
      rgba(15,15,16,0.05) 0,
      rgba(15,15,16,0.05) 1px,
      transparent 1px,
      transparent 120px
    );
  opacity: 0;
  filter: blur(0.35px);
  transform: translate3d(0,0,0);
}

.ch1Slabs{
  position: absolute;
  inset: -30%;
  opacity: 1;
}

.ch1Slab{
  position: absolute;
  inset: -18%;
  border-radius: 999px;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(15,15,16,0.06) 34%,
    rgba(216,201,168,0.16) 62%,
    rgba(255,255,255,0) 100%
  );
  box-shadow: 0 30px 120px rgba(15,15,16,0.06);
  filter: blur(1.4px);
  opacity: 0.95;
  transform: translate3d(0,0,0);
}

.ch1Slab.s2{
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(195,198,204,0.20) 32%,
    rgba(15,15,16,0.05) 58%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0.88;
}

.ch1Slab.s3{
  border-radius: 42px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(15,15,16,0.06) 28%,
    rgba(195,198,204,0.24) 55%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0.78;
}

.ch1Sweep{
  position: absolute;
  top: -22%;
  bottom: -22%;
  width: 58%;
  left: -80%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.80) 45%, transparent 100%);
  mix-blend-mode: screen;
  filter: blur(10px);
  opacity: 0;
  transform: translate3d(0,0,0);
}

.ch1Flash{
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.90), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0);
}


/* ------------------------------------------------------------------
   CHAPTER 02 RIG (Higher firepower)
   - injected by JS (no HTML edits)
   - rotor / curtains / flash
------------------------------------------------------------------- */
.ch2Rig{
  pointer-events: none;
  z-index: 60;
  will-change: transform, opacity;
}

.ch2Bg{
  position: absolute;
  inset: -12%;
  background:
    /* Lighter + more “champagne / silver” (avoid ominous blacks) */
    radial-gradient(circle at 30% 35%, rgba(15,15,16,0.04), rgba(15,15,16,0) 60%),
    radial-gradient(circle at 68% 40%, rgba(216,201,168,0.22), rgba(216,201,168,0) 66%),
    radial-gradient(circle at 50% 70%, rgba(195,198,204,0.18), rgba(195,198,204,0) 64%);
  mix-blend-mode: normal;
  opacity: 0;
  /* blur on huge layers is expensive; keep crisp */
  filter: none;
  transform: translate3d(0,0,0);
}

.ch2Rotor{
  position: absolute;
  /* smaller surface area = less overdraw */
  inset: -32%;
  opacity: 0;
  mix-blend-mode: normal;
  transform: translate3d(0,0,0);
  filter: none;
}

.ch2Blade{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vmax;
  height: 18vmax;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg));
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(195,198,204,0.16) 30%,
    rgba(216,201,168,0.26) 54%,
    rgba(195,198,204,0.14) 70%,
    rgba(255,255,255,0) 100%
  );
  box-shadow: 0 18px 90px rgba(15,15,16,0.04);
  opacity: 0.58;
}

.ch2Curtain{
  position: absolute;
  inset: -24%;
  border-radius: 999px;
  background: linear-gradient(
    112deg,
    rgba(255,255,255,0) 0%,
    rgba(195,198,204,0.14) 36%,
    rgba(216,201,168,0.16) 62%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
  filter: none;
  mix-blend-mode: normal;
  transform: translate3d(0,0,0);
}

.ch2Curtain.c2{
  background: linear-gradient(
    108deg,
    rgba(255,255,255,0) 0%,
    rgba(216,201,168,0.20) 30%,
    rgba(195,198,204,0.16) 58%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
}

.ch2Flash{
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.88), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0);
}

/* ------------------------------------------------------------------
   CHAPTER 03–04 RIG (Clean / Calibration)
   - injected by JS (no HTML edits)
   - ultra clean grid / frame / shutters
------------------------------------------------------------------- */
.ch34Rig{
  pointer-events: none;
  will-change: transform, opacity;
}

.ch34Bg{
  position: absolute;
  inset: -14%;
  opacity: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(195,198,204,0.22), rgba(195,198,204,0) 62%),
    radial-gradient(circle at 70% 30%, rgba(216,201,168,0.26), rgba(216,201,168,0) 60%),
    radial-gradient(circle at 50% 78%, rgba(15,15,16,0.03), rgba(15,15,16,0) 58%);
  transform: translate3d(0,0,0);
}

.ch34Grid{
  position: absolute;
  inset: -18%;
  opacity: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(15,15,16,0.04) 0,
      rgba(15,15,16,0.04) 1px,
      transparent 1px,
      transparent 120px
    ),
    repeating-linear-gradient(0deg,
      rgba(15,15,16,0.035) 0,
      rgba(15,15,16,0.035) 1px,
      transparent 1px,
      transparent 120px
    );
  transform: translate3d(0,0,0);
}

.ch34Frame{
  position: absolute;
  left: 50%;
  top: 52%;
  /* Wider so the HOME chapter text block can sit inside even on smaller viewports */
  width: min(92vmin, 860px);
  height: min(54vmin, 540px);
  transform: translate(-50%, -50%);
  border-radius: 18px;
  border: 1px solid rgba(15,15,16,0.16);
  box-shadow: 0 30px 90px rgba(15,15,16,0.03);
  opacity: 0;
  background: rgba(255,255,255,0.16);
}

.ch34Frame::before{
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,15,16,0.08);
  opacity: 0.9;
}

.ch34Corner{
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: 0.95;
}
.ch34Corner.c1{
  left: 10px;
  top: 10px;
  border-left: 1px solid rgba(15,15,16,0.22);
  border-top: 1px solid rgba(15,15,16,0.22);
  border-radius: 12px 0 0 0;
}
.ch34Corner.c2{
  right: 10px;
  top: 10px;
  border-right: 1px solid rgba(15,15,16,0.22);
  border-top: 1px solid rgba(15,15,16,0.22);
  border-radius: 0 12px 0 0;
}
.ch34Corner.c3{
  left: 10px;
  bottom: 10px;
  border-left: 1px solid rgba(15,15,16,0.22);
  border-bottom: 1px solid rgba(15,15,16,0.22);
  border-radius: 0 0 0 12px;
}
.ch34Corner.c4{
  right: 10px;
  bottom: 10px;
  border-right: 1px solid rgba(15,15,16,0.22);
  border-bottom: 1px solid rgba(15,15,16,0.22);
  border-radius: 0 0 12px 0;
}

.ch34Cross{
  position: absolute;
  background: rgba(15,15,16,0.085);
  opacity: 0.85;
}
.ch34Cross.x{
  left: 12px;
  right: 12px;
  top: 50%;
  height: 1px;
  transform: translateY(-0.5px);
}
.ch34Cross.y{
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
}

.ch34Panels{
  position: absolute;
  inset: -16%;
  opacity: 0;
  transform: translate3d(0,0,0);
}

.ch34Panel{
  position: absolute;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(15,15,16,0.08);
  box-shadow: 0 30px 90px rgba(15,15,16,0.04);
  transform: translate3d(0,0,0);
}

.ch34Panel.p1{
  left: -10%;
  right: -10%;
  top: -10%;
  height: 62%;
}
.ch34Panel.p2{
  left: -10%;
  right: -10%;
  bottom: -10%;
  height: 62%;
}
.ch34Panel.p3{
  top: -10%;
  bottom: -10%;
  left: -10%;
  width: 56%;
}
.ch34Panel.p4{
  top: -10%;
  bottom: -10%;
  right: -10%;
  width: 56%;
}

.ch34Shutters{
  position: absolute;
  inset: -16%;
  opacity: 0;
  transform: translate3d(0,0,0);
}

.ch34Strip{
  position: absolute;
  top: -10%;
  bottom: -10%;
  width: calc(100% / var(--n) + 1.2%);
  left: calc(var(--i) * (100% / var(--n)) - 0.6%);
  background: rgba(255,255,255,0.92);
  border-left: 1px solid rgba(15,15,16,0.06);
  border-right: 1px solid rgba(15,15,16,0.03);
  box-shadow: 0 20px 60px rgba(15,15,16,0.03);
  transform: translate3d(0,0,0);
}

.ch34Strip::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(216,201,168,0.10) 46%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

.ch34Scan{
  position: absolute;
  top: -22%;
  bottom: -22%;
  width: 52%;
  left: -80%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.90) 45%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(12deg);
}

.ch34Flash{
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.90), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0);
}


/* ------------------------------------------------------------------
   CHAPTER 05 RIG (Typo Curtain / Max Firepower)
   - injected by JS (no HTML edits)
   - no photos: typography + geometry only
   - a dense text curtain sweeps from right, pushing the scene
------------------------------------------------------------------- */
.ch5Rig{
  pointer-events: none;
  z-index: 70;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.ch5Back{
  position: absolute;
  inset: -18%;
  opacity: 0;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.98), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 78% 32%, rgba(216,201,168,0.22), rgba(216,201,168,0) 62%),
    radial-gradient(circle at 48% 78%, rgba(195,198,204,0.20), rgba(195,198,204,0) 66%);
  transform: translate3d(0,0,0);
}

.ch5Curtain{
  position: absolute;
  top: -22%;
  bottom: -22%;
  left: -22%;
  right: -62%;
  display: flex;
  gap: clamp(10px, 1.2vw, 26px);
  opacity: 0;
  transform: translate3d(0,0,0);
  transform-style: preserve-3d;
}

.ch5Col{
  position: relative;
  flex: 1 1 0;
  min-width: clamp(28px, 5.0vw, 86px);
  border-left: 1px solid rgba(15,15,16,0.07);
  border-right: 1px solid rgba(15,15,16,0.03);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.90) 0%,
      rgba(255,255,255,0.58) 48%,
      rgba(216,201,168,0.06) 100%
    );
  box-shadow: 0 40px 120px rgba(15,15,16,0.04);
  border-radius: 16px;
  overflow: hidden;
  transform: translate3d(0,0,0);
  transform-style: preserve-3d;
}

.ch5Col::after{
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(255,255,255,0.70) 42%,
      transparent 100%
    );
  opacity: 0.35;
  transform: translate3d(0,0,0) rotate(12deg);
  pointer-events: none;
}

.ch5Lines{
  position: absolute;
  inset: -10%;
  padding: clamp(16px, 2.2vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transform: translate3d(0,0,0);
}

.ch5Line{
  font-size: 12px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.48);
  white-space: nowrap;
  opacity: 0.88;
}

.ch5Line:nth-child(2n){
  color: rgba(15,15,16,0.34);
}

.ch5Sweep{
  position: absolute;
  top: -22%;
  bottom: -22%;
  width: 56%;
  left: -80%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.92) 45%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(14deg);
}

.ch5Flash{
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0);
}



/* ------------------------------------------------------------------
   CHAPTER 06–07 RIG (Finale / Clean Max Firepower)
   - injected by JS (no HTML edits)
   - CH6 starts with NO “MOVEMENT” word
   - build a white mechanical portal, then release into final CTA
------------------------------------------------------------------- */
.ch67Rig{
  pointer-events: none;
  z-index: 80;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.ch67Back{
  position: absolute;
  inset: -18%;
  opacity: 0;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,255,255,0.98), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 74% 28%, rgba(216,201,168,0.22), rgba(216,201,168,0) 66%),
    radial-gradient(circle at 45% 78%, rgba(195,198,204,0.18), rgba(195,198,204,0) 68%);
  transform: translate3d(0,0,0);
}

.ch67Wipe{
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -35%;
  width: 170%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.96) 38%,
    rgba(255,255,255,0.96) 62%,
    rgba(255,255,255,0) 100%
  );
  box-shadow: 0 40px 160px rgba(15,15,16,0.06);
  opacity: 0;
  transform: translate3d(0,0,0);
}

.ch67Plates{
  position: absolute;
  inset: -18%;
  opacity: 0;
  transform-style: preserve-3d;
}

.ch67Plate{
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(120vmax, 1500px);
  height: clamp(90px, 12vmax, 180px);
  transform: translate3d(-50%, -50%, 0);
  border-radius: 999px;
  background: linear-gradient(115deg,
    rgba(255,255,255,0.0) 0%,
    rgba(255,255,255,0.96) 38%,
    rgba(216,201,168,0.20) 60%,
    rgba(195,198,204,0.22) 78%,
    rgba(255,255,255,0.0) 100%
  );
  border: 1px solid rgba(15,15,16,0.08);
  box-shadow: 0 40px 140px rgba(15,15,16,0.06);
  opacity: 0;
  transform-style: preserve-3d;
}

.ch67Plate::after{
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.70) 46%,
    transparent 100%
  );
  opacity: 0.32;
  transform: rotate(14deg);
  pointer-events: none;
}

.ch67Portal{
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(74vmin, 920px);
  height: min(44vmin, 560px);
  transform: translate(-50%, -50%);
  border-radius: 22px;
  opacity: 0;
  transform-style: preserve-3d;
}

.ch67Frame{
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 1px solid rgba(15,15,16,0.18);
  background: rgba(255,255,255,0.30);
  box-shadow: 0 30px 90px rgba(15,15,16,0.03);
  opacity: 0;
}

.ch67Core{
  position: absolute;
  inset: 2px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.94), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 70% 30%, rgba(216,201,168,0.18), rgba(216,201,168,0) 66%),
    radial-gradient(circle at 50% 80%, rgba(195,198,204,0.14), rgba(195,198,204,0) 70%);
  opacity: 0;
}

.ch67Blinds{
  position: absolute;
  inset: 2px;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0,0,0);
}

.ch67Blind{
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(100% / var(--n) + 0.6%);
  left: calc(var(--i) * (100% / var(--n)) - 0.3%);
  background: rgba(255,255,255,0.96);
  border-left: 1px solid rgba(15,15,16,0.05);
  border-right: 1px solid rgba(15,15,16,0.02);
  box-shadow: 0 16px 40px rgba(15,15,16,0.03);
  transform: translate3d(0,0,0);
}

.ch67Blind::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(216,201,168,0.10) 52%,
    transparent 100%
  );
  opacity: 0.55;
  pointer-events: none;
}

.ch67Sweep{
  position: absolute;
  top: -25%;
  bottom: -25%;
  width: 58%;
  left: -90%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.92) 45%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(14deg);
}

.ch67Flash{
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.94), rgba(255,255,255,0) 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(0,0,0);
}


/* Background */
.orbs{
  position: absolute;
  inset: -20vmax;
  pointer-events: none;
}
.orb{
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.28;
  mix-blend-mode: multiply;
  transform: translate3d(0,0,0);
}
.o1{
  left: -18vmax;
  top: -20vmax;
  background: radial-gradient(circle at 35% 35%, rgba(215,218,224,0.95), rgba(215,218,224,0) 62%);
}
.o2{
  right: -18vmax;
  top: -10vmax;
  background: radial-gradient(circle at 50% 50%, rgba(216,201,168,0.78), rgba(216,201,168,0) 62%);
}
.o3{
  left: 18vmax;
  bottom: -26vmax;
  background: radial-gradient(circle at 50% 50%, rgba(195,198,204,0.75), rgba(195,198,204,0) 66%);
}

.grain{
  position: absolute;
  inset: -30%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: grainMove 9s steps(10) infinite;
}
@keyframes grainMove{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-18%, -18%, 0); }
}

.vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, transparent 0%, transparent 56%, rgba(15,15,16,0.06) 100%);
}

/* Canvas particles */
#fxCanvas{
  opacity: 0.62;
  mix-blend-mode: multiply;
  filter: blur(calc(var(--v) * 1.6px));
}

/* Lines */
.lines{ opacity: 0.85; }
.lines path{
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: rgba(15,15,16,0.18);
  stroke-width: 1.1;
}
#axis{
  stroke: rgba(15,15,16,0.22);
  stroke-width: 1.5;
}

/* Content */
.content{
  position: absolute;
  inset: 0;
  pointer-events: none;
}



/* Home Copy (Japanese captions) */
.homeCopyLayer{
  pointer-events: none;
  z-index: 70;
  opacity: 0.28;
}

.homeCopy{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: normal;
}

.homeCopyGroup{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: var(--w, min(560px, 82vw));
  max-width: var(--maxw, 44ch);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity, filter;
  text-align: left;
}

.homeCopyMainRow{
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.homeCopyGroup.alignRight .homeCopyMainRow{ justify-content: flex-start; }

.homeCopyGroup.alignCenter .homeCopyMainRow{ justify-content: flex-start; }

.homeCopyEn{
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.62);
}

.homeCopyGroup.alignCenter{ text-align: left; }
.homeCopyGroup.alignRight{ text-align: left; }

.homeCopyMain{
  font-size: var(--mainSize, clamp(18px, 1.7vw, 24px));
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.55;
  color: rgba(15, 15, 16, 0.86);
  text-wrap: balance;
  text-transform: uppercase;
}

.homeCopySub{
  margin-top: 10px;
  font-size: var(--subSize, clamp(13px, 1.05vw, 16px));
  letter-spacing: 0.20em;
  line-height: 1.8;
  color: rgba(15, 15, 16, 0.66);
  text-transform: uppercase;
}

/* =========================================================
   HOME: Main INFO blocks (long form / editorial / no box)
   ========================================================= */
.homeInfoLayer{
  pointer-events: none;
  z-index: 72;
}

.homeInfo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.homeInfoGroup{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;

  width: var(--w, min(720px, 88vw));
  max-width: var(--maxw, 62ch);

  pointer-events: none;
  will-change: transform, opacity, filter;
  isolation: isolate; /* for ::before layering */
}

/* subtle readability halo (not a "card") */
.homeInfoGroup::before{
  content: "";
  position: absolute;
  inset: -26px -34px -26px -34px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.82), rgba(255,255,255,0));
}

.homeInfoTitle{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.40);
}

.homeInfoTitle::before{
  content: "+";
  color: rgba(15,15,16,0.36);
}

.homeInfoLead{
  margin-top: 14px;
  font-size: clamp(22px, 1.95vw, 30px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: rgba(15,15,16,0.92);
  text-wrap: balance;
}

.homeInfoBody{
  margin-top: 14px;
  font-size: clamp(14px, 1.12vw, 16px);
  letter-spacing: 0.08em;
  line-height: 2.0;
  color: rgba(15,15,16,0.68);
}

.homeInfoBody p{
  margin: 0 0 14px;
}
.homeInfoBody p:last-child{
  margin-bottom: 0;
}

/* CTA: small minimal pill (button only, not a card) */
.homeInfoBtn{
  pointer-events: auto;
  margin-top: 18px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 34px;
  padding: 0 14px;
  border-radius: 999px;

  border: 1px solid rgba(15,15,16,0.18);
  background: rgba(255,255,255,0.32);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);

  text-decoration: none;
  color: rgba(15,15,16,0.86);

  font: 800 11px/1 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial;
  letter-spacing: 0.20em;
  text-transform: uppercase;

  box-shadow: 0 12px 26px rgba(15,23,42,0.08);
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.homeInfoBtn:hover{
  transform: translate3d(0,-1px,0);
  background: rgba(15,15,16,0.92);
  color: #fff;
  border-color: rgba(15,15,16,0.12);
}

.homeInfoBtnArrow{
  opacity: .78;
  transition: transform .18s ease, opacity .18s ease;
}

.homeInfoBtn:hover .homeInfoBtnArrow{
  transform: translate3d(2px,0,0);
  opacity: .92;
}

/* =========================================================
   HOME: Chapter CTA buttons (HOME -> PROGRAM anchor)
   ========================================================= */
.homeChapterCta{
  pointer-events: auto; /* homeCopyLayer が pointer-events:none でも押せるように */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  margin-top: 16px;

  border-radius: 999px;
  border: 1px solid rgba(15, 15, 16, 0.18);
  background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);

  text-decoration: none;
  color: rgba(15, 15, 16, 0.78);

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  touch-action: manipulation;
}

.homeChapterCta:hover{
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(15, 15, 16, 0.28);
  color: rgba(15, 15, 16, 0.88);
  transform: translate3d(0, -1px, 0);
}

.homeChapterCta:active{
  transform: translate3d(0, 0, 0);
}

/* Prefer single CTA per chapter (use INFO card button) */
.homeChapterCta{ display:none !important; }

/* 日本語本文の折り返し品質 */
.js-jp-wrap {
  line-break: strict;     /* 禁則寄り */
  word-break: normal;
  overflow-wrap: normal;
}

/* 句読点ごとに分けた “塊” の中では折り返さない */
.js-jp-wrap .jpSeg {
  white-space: nowrap;
}

.homeCopyMain .jpSeg,
.homeCopySub .jpSeg{
  white-space: normal;
}


.homeCopyMain,
.homeCopySub{
  overflow-wrap: normal;
  line-break: strict;
}
@media (max-width: 520px){
  /* HOME: keep mobile readable / no break */
  .heroType{
    left: 50%;
    top: clamp(104px, 18vh, 148px);
    max-width: calc(100vw - 24px);
    text-align: center;
    /* iOS Safari can render the stacked/blurred headline a bit "double".
       On mobile we keep it crisp + stable (no velocity blur). */
    transform: translate3d(-50%, 0, 0);
    filter: none;
  }

  /* Keep the huge MOVEMENT headline readable and fully inside the viewport */
  .big{
    font-size: clamp(44px, 13vw, 96px);
  }

  /* Mobile: keep the headline styling consistent with desktop.
     - Opening: outline only (GSAP keeps .bigFill hidden at t=0)
     - After scroll begins: GSAP fades .bigFill in */
  .kicker{
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.26em;
  }
  .subline{
    justify-content: center;
    gap: 8px;
  }
  .pill{
    padding: 9px 12px;
    font-size: 11px;
    letter-spacing: 0.22em;
  }

  /* Flavor copy can clutter on small screens */
  .homeCopyLayer{ display: none; }

  /* Long-form info blocks: avoid clipping */
  .homeInfoGroup{
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }

  /* Chapter 03 sits over the central frame: keep its block slightly narrower
     so the copy stays inside the frame on very small screens. */
  .homeInfoGroup.g3{
    width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
  }

  .homeInfoGroup::before{
    inset: -18px -18px -18px -18px;
  }
  .homeInfoLead{
    font-size: clamp(20px, 5.2vw, 26px);
  }
  .homeInfoBody{
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1.95;
  }

  /* Tighten vertical rhythm a touch so CTAs don't fall below the fold */
  .homeInfoBody p{ margin: 0 0 10px; }
  .homeInfoBtn{ margin-top: 14px; }

  /* Reduce heavy blend cost */
  #fxCanvas{
    mix-blend-mode: normal;
    opacity: 0.42;
    filter: none;
  }
  .grain{ animation: none; opacity: 0.045; }

  /* Mobile perf: keep orb motion, but cheaper blur/blend */
  .orb{
    filter: blur(26px);
    mix-blend-mode: normal;
    opacity: 0.24;
  }

  /* CH5 mobile perf: reduce heavy shadows + stabilize 3D rendering */
  .ch5Col{
    box-shadow: 0 28px 80px rgba(15,15,16,0.035);
  }

  .ch5Curtain, .ch5Col, .ch5Lines{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* iOS: avoid expensive blend while keeping look similar */
  .ch5Sweep,
  .ch5Flash{
    mix-blend-mode: normal !important;
  }

  /* iOS Safari: disable velocity-driven blur on mobile */
  .heroType{
    filter: none !important;
    will-change: transform;
  }
  .bigFill,
  .axisWords,
  #fxCanvas{
    filter: none !important;
  }

  /* =========================================================
     iOS Safari fix:
     PROGRAM大ボタンの薄い写真（::before）が左上に縮むグリッチ対策
     - backdrop-filter + pseudo-element bg + filter の組み合わせを避ける
     - 見た目はほぼ維持（背景を少し濃くして補う）
     ========================================================= */
  .page-home .ctaLayer .ctaProgramArrow,
  .page-home .ctaLayer .ctaProgram.ctaProgramArrow{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,0.92) !important;
  }

  .page-home .ctaLayer .ctaProgramArrow::before,
  .page-home .ctaLayer .ctaProgram.ctaProgramArrow::before{
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% 58% !important;

    /* iOSの合成バグ避け（レイヤーを安定化） */
    transform: translate3d(0,0,0);
    will-change: transform, opacity;

    /* ここが地味に重い＆グリッチ起点になりやすいのでモバイルでは切る */
    filter: none !important;

    border-radius: inherit;
  }

  /* Remove side rail for safety */
  .rail{ display: none; }

  /* Mobile HOME: hide the SCROLL hint so it doesn't overlap copy
     (Base .scrollHint styles are defined later in this file, so use !important.) */
  .scrollHint{ display: none !important; }

  /* Mobile HOME CH1 (PRICING): lift the block to avoid Safari bottom UI */
  .homeInfoGroup.g1{
    margin-top: calc(-1 * clamp(32px, 6vh, 80px));
    margin-top: calc(-1 * clamp(32px, 6svh, 80px));
  }

  /* Tighten CH1 so the CTA doesn't get pushed down */
  .homeInfoGroup.g1 .homeInfoBody p{ margin-bottom: 10px; }
  .homeInfoGroup.g1 .homeInfoBtn{ margin-top: 12px; }

  /* Keep the calibration frame centered relative to the text block */
  .ch34Frame{ top: 50%; }

  .homeCopyGroup{
    width: var(--w, min(520px, 88vw));
    max-width: var(--maxw, 48ch);
  }
}

/* Tablet/Small desktop widths: the flavor copy tends to collide with INFO blocks.
   Keep the page clean and readable. */
@media (max-width: 820px){
  .homeCopyLayer{ display:none; }
}

.heroType{
  position: absolute;
  left: clamp(18px, 6vw, 72px);
  top: clamp(110px, 22vh, 190px);
  max-width: min(1000px, 92vw);
  will-change: transform, filter;
  transform: translate3d(0, calc(var(--v) * -10px), 0);
  filter: blur(calc(var(--v) * 3px));
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.62);
}
.kicker .dot{ opacity: 0.55; }

.big{
  margin: 10px 0 0;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 700;
  font-size: clamp(56px, 11.2vw, 172px);
  position: relative;
}
.bigStroke,
.bigFill{
  display: block;
  white-space: nowrap;
}
.bigStroke{
  color: transparent;
  -webkit-text-stroke: 1px rgba(15,15,16,0.22);
  text-stroke: 1px rgba(15,15,16,0.22);
  opacity: 0.95;
}
.bigFill{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: transparent;
  background: linear-gradient(115deg,
    rgba(15,15,16,0.94) 0%,
    rgba(15,15,16,0.55) 30%,
    rgba(216,201,168,0.7) 62%,
    rgba(195,198,204,0.88) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  filter: blur(calc(var(--v) * 1px));
}

.subline{
  margin-top: 18px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pill{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15,15,16,0.16);
  background: color-mix(in oklab, var(--glass2) 75%, transparent);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.78);
}

.axisWords{
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  gap: 22px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.46);
  filter: blur(calc(var(--v) * 1.2px));
  opacity: 0;
}

.counter{
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  top: calc(var(--headerH) + clamp(12px, 2.2vh, 24px));
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.52);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.counterNow{
  color: rgba(15,15,16,0.82);
}

.scrollHint{
  position: absolute;
  left: calc(clamp(18px, 6vw, 72px) + env(safe-area-inset-left));
  bottom: calc(clamp(18px, 4vh, 42px) + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.44);
}
.scrollHintLine{
  width: clamp(80px, 12vw, 140px);
  height: 1px;
  background: rgba(15,15,16,0.18);
  transform-origin: left center;
  transform: scaleX(calc(0.38 + (var(--v) * 0.9)));
}

/* Space reveal panel */
.spaceReveal{
  position: absolute;
  inset: clamp(84px, 12vh, 120px) clamp(14px, 6vw, 72px) clamp(86px, 12vh, 120px) clamp(14px, 6vw, 72px);
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  clip-path: inset(46% 46% 46% 46% round var(--radius));
  filter: saturate(0.92) contrast(1.04);
  box-shadow: 0 30px 90px rgba(15,15,16,0.06);
}
.spaceReveal::before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(15,15,16,0.12);
  border-radius: var(--radius);
  pointer-events: none;
}
.spaceImg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
}
.spaceImg.img1{ background-image: radial-gradient(circle at 30% 40%, rgba(216,201,168,0.20), transparent 62%), radial-gradient(circle at 70% 55%, rgba(195,198,204,0.18), transparent 66%), linear-gradient(120deg, rgba(255,255,255,0.82), rgba(255,255,255,0.38)); }
.spaceImg.img2{ background-image: radial-gradient(circle at 40% 35%, rgba(195,198,204,0.22), transparent 62%), radial-gradient(circle at 62% 75%, rgba(216,201,168,0.18), transparent 66%), linear-gradient(120deg, rgba(255,255,255,0.82), rgba(255,255,255,0.38)); }
.spaceSweep{
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 44%;
  left: -60%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 45%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(8px);
}
.spaceCaption{
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.84);
  text-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* CTA */
.ctaLayer{
  position: absolute;
  left: calc(clamp(18px, 6vw, 72px) + env(safe-area-inset-left));
  bottom: calc(clamp(18px, 4vh, 42px) + 36px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.ctaReserve{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border: 1px solid rgba(15,15,16,0.16);
  background: color-mix(in oklab, var(--glass2) 85%, transparent);
  overflow: hidden;
  border-color: color-mix(in oklab, var(--champagne) 52%, rgba(15,15,16,0.18));
}
.ctaReserve::after{
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle at 30% 30%, rgba(216,201,168,0.42), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(195,198,204,0.34), transparent 62%);
  opacity: 0;
  transition: opacity .25s ease;
}
.ctaReserve:hover::after{ opacity: 1; }

.ctaSub{
  font-size: 10px;
  letter-spacing: 0.34em;
  opacity: 0.58;
}

.ctaProgram{
  border-color: rgba(15,15,16,0.18);
  color: rgba(15,15,16,0.86);
}

/* Rail */
.rail{
  position: absolute;
  right: clamp(10px, 2.5vw, 20px);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.railDots{
  display: grid;
  gap: 10px;
}
.railDots span{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(15,15,16,0.18);
  background: rgba(255,255,255,0.56);
  opacity: 0.55;
}
.railDots span.isActive{
  background: rgba(15,15,16,0.74);
  opacity: 0.92;
  box-shadow: 0 0 0 8px rgba(216,201,168,0.18);
}

/* Exit section */
.exit{
  position: relative;
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: 120px 18px;
  border-top: 1px solid rgba(15,15,16,0.08);
}
.exitInner{
  width: min(980px, 92vw);
  border: 1px solid rgba(15,15,16,0.10);
  border-radius: calc(var(--radius) + 10px);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(22px, 4vw, 42px);
  display: grid;
  gap: 16px;
}
.exitLabel{
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.56);
}
.exitLink{
  font-size: clamp(44px, 7vw, 80px);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 0.95;
  color: rgba(15,15,16,0.92);
}
.exitMeta{
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.5);
}

/* Program page */
.programMain{ padding-top: var(--headerH); }
.programHero{
  min-height: 74vh;
  display: grid;
  place-items: center;
  padding: 120px 18px 80px;
  border-bottom: 1px solid rgba(15,15,16,0.08);
}
.programHeroInner{ width: min(980px, 92vw); }
.programKicker{
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.56);
}
.programTitle{
  margin: 18px 0 0;
  font-size: clamp(36px, 5.2vw, 62px);
  letter-spacing: -0.02em;
  line-height: 1.06;
}
.programLead{
  margin: 18px 0 0;
  color: rgba(15,15,16,0.64);
  line-height: 1.9;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}
.programActions{
  margin-top: 26px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ghostBtn,
.solidBtn{
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border: 1px solid rgba(15,15,16,0.16);
}
.ghostBtn{ background: rgba(255,255,255,0.68); }
.solidBtn{
  border-color: color-mix(in oklab, var(--champagne) 52%, rgba(15,15,16,0.18));
  background: color-mix(in oklab, var(--glass2) 92%, transparent);
}

.programGrid{
  width: min(980px, 92vw);
  margin: 0 auto;
  padding: 70px 0 110px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border: 1px solid rgba(15,15,16,0.10);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px;
  display: grid;
  gap: 12px;
}
.cardLabel{
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.56);
}
.cardBig{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cardText{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.58);
}

.siteFooter{
  border-top: 1px solid rgba(15,15,16,0.08);
  padding: 40px 18px;
}
.footerInner{
  width: min(980px, 92vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.footerMeta{
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(15,15,16,0.56);
  margin-top: 10px;
}
.footerLinks{
  display: inline-flex;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15,15,16,0.58);
}
.footerLinks a{ border-bottom: 1px solid rgba(15,15,16,0.14); padding-bottom: 2px; }

/* Responsive */
@media (max-width: 900px){
  .headerInner{ grid-template-columns: 1fr auto; }
  .nav{ display: none; }
}

@media (max-width: 980px){
  .programGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  .brandName{ display: none; }
  .reserveBtn{ padding: 11px 14px; }
  .reserveBtnLabel{ letter-spacing: 0.28em; }
  .ctaLayer{ flex-wrap: wrap; }
  .spaceReveal{ inset: 112px 14px 132px 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .grain{ animation: none; }
  #fxCanvas{ display: none; }
}


/* ------------------------------------------------------------------
   CHAPTER 06–07 RIG v10 (Typo Storm + Outline Finale)
   - White-first, maximal motion via typography (no photos).
   - Motifs: tape conveyors + stacked cue + burst chips + logo stamps.
   - No blur, no frames, no mix-blend.
   - injected by JS (no HTML edits)
------------------------------------------------------------------- */

.ch67Rig{
  pointer-events: none;
  z-index: 80;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  perspective: 1400px;
}

/* Soft white stage (depth without blur) */
.ch67Field{
  position: absolute;
  inset: -14%;
  opacity: 0;
  background:
    radial-gradient(circle at 24% 28%, rgba(255,255,255,0.98), rgba(255,255,255,0) 62%),
    radial-gradient(circle at 78% 26%, rgba(216,201,168,0.12), rgba(216,201,168,0) 66%),
    radial-gradient(circle at 54% 78%, rgba(195,198,204,0.16), rgba(195,198,204,0) 70%),
    linear-gradient(135deg, rgba(15,15,16,0.04) 0%, rgba(255,255,255,0) 55%, rgba(15,15,16,0.03) 100%);
  transform: translate3d(0,0,0);
  pointer-events: none;
}

.ch67Field::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(15,15,16,0.04) 0 1px, rgba(255,255,255,0) 1px 220px),
    repeating-linear-gradient(180deg, rgba(15,15,16,0.03) 0 1px, rgba(255,255,255,0) 1px 170px);
  opacity: 0.12;
}

/* Mega cue word (minimal but high-impact) */

/* Mega outline (stroke-only) */
.ch67MegaOutline{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(120px, 18vw, 420px);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(15,15,16,0.18);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.ch67Mega{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(120px, 18vw, 420px);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(15,15,16,0.08);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Tape conveyors */
.ch67Tapes{
  position: absolute;
  inset: -18%;
  opacity: 0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

.ch67Tape{
  position: absolute;
  left: 50%;
  top: var(--t, 50%);
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) scale(var(--s, 1));
  font-size: clamp(15px, 1.95vw, 28px);
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c, rgba(15,15,16,0.12));
  opacity: 1;
  will-change: transform, opacity;
  text-rendering: geometricPrecision;
}

/* Stack cue (readable center) */
.ch67Stack{
  transform-style: preserve-3d;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
}

.ch67StackWord{
  transform-style: preserve-3d;
  display: block;
  text-transform: uppercase;
  white-space: nowrap;
  will-change: transform, opacity;
}

.ch67StackWord.w1{
  font-size: clamp(26px, 4.6vw, 72px);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(15,15,16,0.22);
}


.ch67StackWord.w1b{
  margin-top: -0.52em; /* parallel line close to w1 */
  font-size: clamp(26px, 4.6vw, 72px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(15,15,16,0.22);
}


.ch67StackWord.w2{
  margin-top: 12px;
  font-size: clamp(12px, 1.35vw, 18px);
  font-weight: 500;
  letter-spacing: 0.48em;
  color: rgba(15,15,16,0.18);
}

.ch67StackWord.w3{
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.44em;
  color: rgba(15,15,16,0.16);
}

/* Burst chips */
.ch67Cloud{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0,0,0);
}

.ch67Chip{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c, rgba(15,15,16,0.14));
  opacity: 0;
  will-change: transform, opacity;
}


.ch67Chip.isOutline{
  color: transparent;
  -webkit-text-stroke: 1px var(--c, rgba(15,15,16,0.16));
}


/* Logo stamps (provided assets in root) */
.ch67Logos{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(0,0,0);
  pointer-events: none;
}

.ch67Logo{
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(140px, 22vw, 360px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform, opacity;
}

/* Clean sweep highlight */
.ch67Sweep{
  position: absolute;
  top: -24%;
  bottom: -24%;
  width: 62%;
  left: -90%;
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.96) 44%,
    rgba(216,201,168,0.18) 54%,
    rgba(255,255,255,0) 100%
  );
  transform: translate3d(0,0,0) rotate(18deg);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Blackout (final “nucleus” hit) */
.ch67Blackout{
  position: absolute;
  inset: -12%;
  opacity: 0;
  background: rgba(18,18,18,1);
  transform: translate3d(0,0,0);
  z-index: 80;
  pointer-events: none;
}

/* White flash (exposure) */
.ch67Flash{
  position: absolute;
  inset: -12%;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.98), rgba(255,255,255,0) 62%);
  transform: translate3d(0,0,0);
  z-index: 80;
  pointer-events: none;
}

@media (max-width: 640px){
  .ch67Tape{ letter-spacing: 0.40em; }
  .ch67StackWord.w3{ font-size: 11px; }
  .ch67Chip{ font-size: 11px; letter-spacing: 0.30em; }
}



/* =========================================================
   PROGRAM CTA (plain / clarity-first)
   - Remove the mosaic images
   - Make the button unmistakably clickable
   - Optional: subtle interior photo inside (IMG_4606.JPG)
   ========================================================= */
.ctaProgramArrow,
.ctaProgram.ctaProgramArrow{
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  width: min(880px, calc(100vw - 64px));
  max-width: 880px;
  min-height: 132px;

  padding: 24px 26px;
  border: 1px solid rgba(20,20,24,0.18);
  border-radius: 26px;

  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  text-decoration: none;
  color: #141418;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

/* Subtle interior photo (place IMG_4606.JPG in /img) */
.ctaProgramArrow::before,
.ctaProgram.ctaProgramArrow::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ctaProgramPhoto, url("../../img/IMG_4606.JPG"));
  background-size: cover;
  background-position: 50% 58%;
  opacity: 0.16;
  filter: saturate(0.9) contrast(1.05) brightness(1.08);
  pointer-events: none;
}

.ctaProgramArrowText,
.ctaProgramArrowTip{
  position: relative;
  z-index: 1;
}

.ctaProgramArrowText{
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ctaProgramArrowKicker{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20,20,24,0.55);
}

.ctaProgramArrowTitle{
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ctaProgramArrowDesc{
  font-size: 14px;
  line-height: 1.65;
  color: rgba(20,20,24,0.62);
}

.ctaProgramArrowDesc .jpSeg{
  display: inline-block;
  white-space: nowrap;
}

.ctaProgramArrowTip{
  flex: 0 0 auto;
  font-size: 22px;
  color: rgba(20,20,24,0.64);
}

/* Safety: if the old mosaic markup remains in some environments, hide it. */
.ctaProgramArrowInner,
.ctaProgramArrowGrid,
.ctaProgramArrowOverlay{
  display: none !important;
}

.ctaProgramArrow:hover,
.ctaProgram.ctaProgramArrow:hover{
  border-color: rgba(20,20,24,0.32);
  background: rgba(255,255,255,0.92);
  transform: translate3d(0,-1px,0);
  box-shadow: 0 12px 34px rgba(0,0,0,0.07);
}

.ctaProgramArrow:hover::before,
.ctaProgram.ctaProgramArrow:hover::before{
  opacity: 0.20;
}

.ctaProgramArrow:active,
.ctaProgram.ctaProgramArrow:active{
  transform: translate3d(0,0,0);
}

.ctaProgramArrow:focus-visible,
.ctaProgram.ctaProgramArrow:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(20,20,24,0.16),
    0 10px 30px rgba(0,0,0,0.06);
}

@media (max-width: 540px){
  .ctaProgramArrow,
  .ctaProgram.ctaProgramArrow{
    width: calc(100vw - 36px);
    min-height: 124px;
    padding: 20px 18px;
    border-radius: 22px;
    gap: 16px;
  }

  .ctaProgramArrowTitle{ font-size: 23px; }
  .ctaProgramArrowDesc{ font-size: 13px; }
}

@media (prefers-reduced-motion: reduce){
  .ctaProgramArrow:hover,
  .ctaProgram.ctaProgramArrow:hover,
  .ctaProgramArrow:active,
  .ctaProgram.ctaProgramArrow:active{
    transform: none;
  }
}

/* =========================================================
   PROGRAM CTA — Emphasis Override (HOME end screen)
   - Make PROGRAM button undeniably large
   - Make RESERVE a compact text link + arrow
   ========================================================= */
.page-home .ctaLayer .ctaProgram.ctaProgramArrow,
.page-home .ctaLayer .ctaProgramArrow{
  width: min(980px, calc(100vw - 64px)) !important;
  max-width: 980px !important;
  min-height: 164px !important;
  padding: 30px 34px !important;
  border-radius: 30px !important;
  gap: 28px !important;
}

.page-home .ctaLayer .ctaProgramArrowTitle{
  font-size: clamp(26px, 2.2vw, 32px) !important;
}

.page-home .ctaLayer .ctaProgramArrowDesc{
  font-size: clamp(14px, 1.1vw, 15px) !important;
}

.page-home .ctaLayer .ctaProgramArrowTip{
  font-size: 24px !important;
}

.page-home .ctaLayer .ctaReserve{
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  color: rgba(20,20,24,0.78);
}

.page-home .ctaLayer .ctaReserve::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: rgba(20,20,24,0.18);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.page-home .ctaLayer .ctaReserve::after{
  content: "\2192";
  position: relative;
  inset: auto;
  display: inline-block;
  background: none;
  opacity: 0.72;
  transform: translate3d(0,0,0);
  transition: transform 200ms ease, opacity 200ms ease;
}

.page-home .ctaLayer .ctaReserve:hover::before{
  transform: scaleX(1);
}

.page-home .ctaLayer .ctaReserve:hover::after{
  transform: translate3d(2px,0,0);
  opacity: 0.92;
}

.page-home .ctaLayer .ctaSub{
  font-size: 12px;
  letter-spacing: 0.28em;
  opacity: 0.56;
}

@media (max-width: 540px){
  .page-home .ctaLayer .ctaProgram.ctaProgramArrow,
  .page-home .ctaLayer .ctaProgramArrow{
    min-height: 136px !important;
    padding: 22px 18px !important;
    border-radius: 24px !important;
    gap: 18px !important;
  }
}


/* =========================================================
   PROGRAM CTA — Super Emphasis Override (v3)
   - Force visible size change regardless of viewport
   - Expand CTA layer to have BOTH left & right so the card can grow
   ========================================================= */
.page-home .ctaLayer{
  right: clamp(18px, 6vw, 72px) !important;
}

.page-home .ctaLayer .ctaProgram.ctaProgramArrow,
.page-home .ctaLayer .ctaProgramArrow{
  width: 100% !important;
  max-width: none !important;
  min-height: 196px !important;
  padding: 36px 40px !important;
  border-radius: 34px !important;
  gap: 30px !important;
  background: rgba(255,255,255,0.84) !important;
}

.page-home .ctaLayer .ctaProgramArrowText{
  max-width: 760px;
}

.page-home .ctaLayer .ctaProgramArrowTitle{
  font-size: clamp(28px, 2.4vw, 36px) !important;
}

.page-home .ctaLayer .ctaProgramArrowDesc{
  font-size: clamp(14px, 1.15vw, 16px) !important;
}

.page-home .ctaLayer .ctaProgramArrowTip{
  font-size: 26px !important;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20,20,24,0.16);
  background: rgba(255,255,255,0.55);
}

@media (max-width: 820px){
  .page-home .ctaLayer{
    right: 18px !important;
  }
  .page-home .ctaLayer .ctaProgram.ctaProgramArrow,
  .page-home .ctaLayer .ctaProgramArrow{
    min-height: 168px !important;
    padding: 26px 22px !important;
    border-radius: 28px !important;
    gap: 18px !important;
  }
  .page-home .ctaLayer .ctaProgramArrowTip{
    width: 48px;
    height: 48px;
    font-size: 24px !important;
  }
  .page-home .ctaLayer .ctaProgramArrowText{
    max-width: none;
  }
}

/* =========================================================
   HOME (iOS) perf: CH5 curtain end -> final screen
   - shrink overscan area (invisible but expensive)
   - flatten nested 3D (outer 3D stays)
   ========================================================= */
@media (max-width: 520px){
  .page-home .ch5Back{ inset: -12%; }

  /* 元: top/bottom/left -22% / right -62%
     → 見えてない領域を少しだけ縮めてレイヤー面積を減らす */
  .page-home .ch5Curtain{
    top: -16%;
    bottom: -16%;
    left: -16%;
    right: -52%;
  }

  .page-home .ch5Sweep{
    top: -16%;
    bottom: -16%;
  }

  .page-home .ch5Flash{
    inset: -10%;
  }

  /* 子要素の preserve-3d をやめて合成コストを落とす（見た目はほぼ維持） */
  .page-home .ch5Rig,
  .page-home .ch5Curtain,
  .page-home .ch5Col{
    transform-style: flat !important;
  }
}

@media (max-width: 520px){
  /* iOS crash guard: will-changeがGPUメモリを取りすぎることがある */
  .ch1Rig,
  .ch2Rig,
  .ch34Rig,
  .ch5Rig{
    will-change: auto !important;
  }

  /* blendの影響範囲を閉じる（見た目ほぼ不変で合成が安定しやすい） */
  .theater{ isolation: isolate; }
  .layer.bg{ isolation: isolate; }
}

/* =========================================================
   CH5 mobile perf (keep the look, reduce paint cost)
   ========================================================= */
@media (max-width: 520px){
  /* 10列にしても“密度”が落ちて見えないよう、列を少し細く＆gapを詰める */
  .page-home .ch5Curtain{
    gap: clamp(8px, 0.9vw, 18px);
  }
  .page-home .ch5Col{
    min-width: clamp(22px, 4.2vw, 72px);

    /* 影は見た目の割に重いので、さらに軽量化（完全OFFでもOK） */
    box-shadow: 0 18px 56px rgba(15,15,16,0.028);

    /* iOSは hidden より clip の方が軽いことがある（対応端末だけ） */
  }
  @supports (overflow: clip){
    .page-home .ch5Col{ overflow: clip; }
  }

  /* 各列のハイライト疑似要素は“無くてもほぼ分からない”割に重い */
  .page-home .ch5Col::after{
    display: none;
  }

  /* テキスト面積（inset/padding）を少し減らしてテクスチャを小さくする */
  .page-home .ch5Lines{
    inset: -6%;
    padding: clamp(12px, 2vw, 22px);
  }

  /* ほんの少し小さくしても見た目はほぼ同じ（ラスタライズ量が減る） */
  .page-home .ch5Line{
    font-size: 11px;
    letter-spacing: 0.34em;
  }
}

/* iOS crash guard: do NOT force huge headline onto a persistent GPU layer */
@media (max-width: 520px){
  .heroType{
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    will-change: auto !important;
    filter: none !important;
    text-align: center;
  }
}

/* =========================================================
   iOS crash guard (mobile):
   - huge blur + blend surfaces are the #1 GPU memory killer
   - keep the vibe, shrink the surface + avoid blend where possible
   ========================================================= */
@media (max-width: 520px){
  /* Orbs: reduce offscreen surface size (invisible but expensive) */
  .page-home .orbs{
    inset: -16vmax; /* base: -20vmax */
  }
  .page-home .orb{
    width: 60vmax;   /* base: 70vmax */
    height: 60vmax;  /* base: 70vmax */
    filter: blur(32px);          /* base: 48px */
    opacity: 0.22;               /* slight compensate */
    mix-blend-mode: normal;      /* base: multiply (heavier) */
    transform: none !important;  /* avoid forcing an extra compositing layer */
  }

  /* Grain: keep it (static), but stop animating + avoid blend */
  .page-home .grain{
    animation: none !important;
    opacity: 0.045;              /* base: 0.06 */
    mix-blend-mode: normal;
  }

  /* Canvas: blend is expensive; normal is more stable on iOS.
     (Opacity tweak keeps the look close.) */
  .page-home #fxCanvas{
    mix-blend-mode: normal;
    opacity: 0.55;               /* base: 0.62 */
  }
}

/* HOTFIX: iOSでblur要素が重くなる原因（transform none）を打ち消す */
@media (max-width: 520px){
  .page-home .orb{
    transform: translate3d(0,0,0) !important;
  }
}