:root{
  --navH:60px;
  --navy:#0a1220; --coal:#0e1522; --concrete:#0f1722; --steel:#172234;
  --ink:#f1f4f9; --muted:#a9b7cd; --accent:#7baeff; --hair: rgba(255,255,255,.12);

  /* 画像変数（初期値） */
  --img-hero: none;
  --img-impact: none;
  --img-method: none;
  --img-power: none;
  --img-join: none;
  --img-prog-c1: none;
  --img-prog-c2: none;
  --img-prog-c3: none;
  --img-fac-1: none;
  --img-fac-2: none;
  --img-fac-3: none;
  --img-prog-amb: none;
}

/* reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--navy); color:var(--ink);
  font:15px/1.65 'Inter',system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{
  font-family:"Barlow Condensed",system-ui,sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
}
a{color:inherit; text-decoration:none}
.gpu{will-change:transform,opacity; backface-visibility:hidden; transform:translateZ(0)}
section{
  position:relative;
  width:100%;
  isolation:isolate;
  contain:layout paint;
  z-index:1;
  overflow:hidden;
}
section.is-active{ z-index:10; }

/* Fixed background host for Scoped Weave */
#bgHost{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(123,174,255,.12), transparent 60%),
    radial-gradient(900px 700px at 80% 90%, rgba(225,194,95,.10), transparent 60%),
    linear-gradient(180deg, #0a1220, #0e1522);
  transition: opacity .2s ease, clip-path .24s ease;
}
html.weave-hero   #bgHost{ clip-path:circle(42vmin at 50% 48%);   opacity:.78; }
html.weave-method #bgHost{ clip-path:inset(8% 6% 10% 42% round 14px); opacity:.78; }
html.is-scrolling #bgHost{ opacity:.55; }

/* ゆっくり動くオーロラっぽい背景（軽量） */
#bgHost::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 10% 10%, rgba(123,174,255,.25), transparent 60%),
    radial-gradient(900px 700px at 90% 80%, rgba(232,201,106,.20), transparent 60%),
    radial-gradient(800px 600px at 50% 0%,  rgba(63,151,255,.18), transparent 60%);
  opacity:.45;
  mix-blend-mode:screen;
  transform:translate3d(0,0,0);
  animation:bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%   { transform:translate3d(-3%, 0, 0)   scale(1);    }
  50%  { transform:translate3d(3%, -4%, 0)  scale(1.05); }
  100% { transform:translate3d(-4%, 3%, 0)  scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  #bgHost{ opacity:.25; }
  #bgHost::after{ animation:none; opacity:.25; }
}

/* Top Nav */
nav{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--navH);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background:rgba(10,18,32,.55);
  backdrop-filter: blur(4px) saturate(112%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{
  font-weight:700;
  color:var(--ink);
  letter-spacing:.20em;
  font-size:13px;
}
.progress{
  width:min(36vw,380px);
  height:2px;
  background:rgba(255,255,255,.08);
  border-radius:2px;
  overflow:hidden;
}
.bar{
  height:100%;
  width:auto;
  transform-origin:left center;
  transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),#bfe0ff);
}
.ctaNav{
  display:inline-grid;
  place-items:center;
  height:34px;
  padding:0 14px;
  margin-left:14px;
  border-radius:18px;
  font:800 11px/1 'Inter';
  letter-spacing:.12em;
  background:rgba(255,255,255,.92);
  color:#0f1522;
  border:1px solid rgba(0,0,0,.28);
}
/* Nav: Interior quick button (replaces progress bar) */
nav .navInteriorBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  text-decoration:none;
  font:800 11px/1 'Inter';
  letter-spacing:.12em;
  text-transform: uppercase;
}

/* common bits */
.gridLayer{
  position:absolute;
  inset:-6% -6%;
  pointer-events:none;
  background:
    linear-gradient(transparent 96%, rgba(255,255,255,.05) 96%) 0 0/100% 7.6vh,
    linear-gradient(90deg, transparent 96%, rgba(255,255,255,.05) 96%) 0 0/7.6vw 100%;
  opacity:.14;
  mix-blend-mode:overlay;
}
.eyebrow{
  font:700 10px/1 'Inter';
  letter-spacing:.28em;
  color:var(--muted);
  text-transform:uppercase;
}
.hr{
  height:1px;
  background:var(--hair);
  width:100%;
  margin:14px 0;
}

/* HERO */
#hero{
  height:106vh;
  display:grid;
  place-items:center;
  background:rgba(10,18,32,.72);
}
#hero .rings{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
#hero .ring{
  width:min(84vmin,880px);
  height:min(84vmin,880px);
  border:1.6px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:
    inset 0 0 18px rgba(132,182,255,.08),
    0 0 28px rgba(132,182,255,.06);
}
#hero .ring.r2{
  width:min(60vmin,640px);
  height:min(60vmin,640px);
  border-color:rgba(255,255,255,.08);
}
#hero h1{
  line-height:.96;
  text-align:center;
  z-index:3;
}
#hero .l1,#hero .l2{
  display:block;
  font-size:clamp(26px,6.6vw,78px);
}
#hero .l2{
  color:var(--accent);
  letter-spacing:.22em;
}
#hero .lead{
  margin-top:14px;
  font-size:14px;
  color:#dfe7f5;
  letter-spacing:.02em;
  text-align:center;
  max-width:860px;
  position:relative;
  z-index:3;
}
.hint{
  position:absolute;
  bottom:26px;
  font-size:10px;
  letter-spacing:.24em;
  color:var(--muted);
}
.shockRing{
  position:absolute;
  left:50%;
  top:50%;
  width:48vmin;
  height:48vmin;
  transform:translate(-50%,-50%) scale(.3);
  border-radius:50%;
  border:1.8px solid rgba(180,205,255,.9);
  opacity:0;
  pointer-events:none;
}

.quickLinks{
  margin-top:16px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  position:relative;
  z-index:3;
}
.quickLinks a{
  display:inline-grid;
  place-items:center;
  height:40px;
  padding:0 16px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px) saturate(115%);
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  box-shadow:
    0 2px 8px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.14);
  font:700 12.5px/1 'Inter';
  letter-spacing:.10em;
  color:#eef3ff;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.quickLinks a[href="#join"]{
  background:linear-gradient(135deg, var(--accent), #bfe0ff);
  color:#0f1522;
  font-weight:800;
  border:1px solid rgba(0,0,0,.28);
}

.scrollWord{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:1;
  pointer-events:none;
  font-family:"Barlow Condensed",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  color:rgba(255,255,255,.08);
  text-transform:uppercase;
  line-height:.86;
  font-size:18vw;
  opacity:0;
  transform:scale(.85);
  mix-blend-mode:normal;
}
.scrollThin{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
  font:500 12px/1 'Inter';
  letter-spacing:.42em;
  color:rgba(255,255,255,.75);
  opacity:0;
}

/* HERO 背景画像（軽量版） */
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,16,28,.20), rgba(10,16,28,.60)),
    var(--img-hero);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.35;
  transition:opacity .25s ease;
}
@media (max-width: 900px){
  #hero::before{ opacity:.42; }
}

/* IMPACT */
#impact{
  height:100vh;
  display:grid;
  place-items:center;
  background:rgba(14,21,34,.74);
}
#impact .bw{
  display:block;
  font-size:clamp(28px,7.2vw,90px);
}

/* METHOD (light / minimal) */
#method{
  padding:12vh 9vw;
  min-height:116vh;
  background:rgba(246,249,255,.9);
  color:#0f1722;
  --method-curtain: 0%;
  position:relative;
}

#method header{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:18px;
}

#method h2{
  font-size:36px;
  color:var(--accent);
}

/* 2カラムレイアウト：左レール＋右テキスト */
#method .methodBody{
  position:relative;
  z-index:2;
  display:grid;
  /* 左：縦の帯（methodRail）だけのカラムを固定幅にする */
  grid-template-columns:96px minmax(0,1fr);
  gap:32px; /* 帯とテキストの間のスキマを少し詰める */
  align-items:flex-start;
}

/* 縦レール（装飾） */
#method .methodRail{
  position:relative;
  align-self:stretch;
  width:1px;
  margin-top:12px;
  background:linear-gradient(
    to bottom,
    rgba(148,163,184,0),
    rgba(148,163,184,.7),
    rgba(148,163,184,0)
  );
}
#method .methodRail::before,
#method .methodRail::after{
  content:"";
  position:absolute;
  left:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.7);
  background:#f8fafc;
  transform:translateX(-50%);
}
#method .methodRail::before{ top:-4px; }
#method .methodRail::after{ bottom:-4px; }

/* テキスト群 */
#method .points{
  position:relative;
  max-width:720px;   /* 少しだけワイドに */
  padding-left:0;    /* 左の余白をゼロにして帯に寄せる */
  margin-left:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}

#method .methodTag{
  font:600 11px/1 'Inter';
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(148,163,184,.95);
  margin-bottom:4px;
}

/* 1本ぶんのポイント */
#method .point{
  position:relative;
  font-size:21px;
  font-weight:800;
  padding-left:0;   /* 左インデントを完全になしに */
}

#method .u{
  position:relative;
  display:inline-block;
  letter-spacing:.08em;
}

/* 下線アニメはそのまま維持 */
#method .u::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:2px;
  background:linear-gradient(90deg,var(--accent), transparent);
  transform-origin:left;
  transform:scaleX(0);
}

#method .desc{
  margin-top:4px;
  font-size:15px;
  color:#2f4158;
  line-height:1.9;
  font-weight:500;
}

/* 強調系 */
#method .desc strong{
  color:#203354;
}
#method .desc em{
  font-style:normal;
  color:#203354;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(123,174,255,.80);
}

/* 右側の人物画像：フィルターなしでくっきり表示 */
#method::before{
  content:"";
  position:absolute;
  inset:10% 6% 10% 52%;
  z-index:0;
  pointer-events:none;
  opacity:1;
  background-image: var(
    --img-method,
    image-set(
      url("img/method-wide@1x.webp") 1x,
      url("img/method-wide@2x.webp") 2x
    )
  );
  background-size: cover;
  background-position: center right;
}

/* 左から迫る「白いシート」：テキスト側だけ白く、右側は画像をそのまま見せる */
#method::after{
  content:"";
  position:absolute;
  inset:-4% 0 -4% 0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(246,249,255,1)   0%,
      rgba(246,249,255,1)   42%,
      rgba(246,249,255,.9)  55%,
      rgba(246,249,255,0)   75%,
      rgba(246,249,255,0)   100%
    );
  transform:translateX(calc(var(--method-curtain, 0%) - 100%));
  opacity:1;
  z-index:1;
}

/* レスポンシブ */
@media (max-width: 900px){
  #method{
    padding:10vh 7vw;
  }
  #method .methodBody{
    grid-template-columns:minmax(0,1fr);
    gap:26px;
  }
  #method .methodRail{
    display:none;
  }
  #method::before{
    inset:48% 6% 4% 6%;
    opacity:1;
  }
  /* ★SP時はテキスト側の白エリアを少し広げる */
  #method::after{
    background:
      linear-gradient(
        90deg,
        rgba(246,249,255,1)   0%,
        rgba(246,249,255,1)   70%,
        rgba(246,249,255,.96) 85%,
        rgba(246,249,255,0)   100%
      );
  }
}

/* 左レール全体の器 */
#method .methodRail {
  position: relative;
  min-width: 72px; /* 左の余白をしっかり確保 */
}

/* 細い縦ライン */
#method .methodRailLine {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.05)
  );
  opacity: 0.7;
}

/* ノード（未アクティブ状態） */
#method .railNode {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 0 rgba(123, 167, 255, 0);
  transform: scale(0.7);
  opacity: 0.45;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.35s ease,
    background-color 0.35s ease;
}

/* ノードの縦位置：ざっくり等間隔で */
#method .railNode[data-step="1"] { top: 4%; }
#method .railNode[data-step="2"] { top: 22%; }
#method .railNode[data-step="3"] { top: 40%; }
#method .railNode[data-step="4"] { top: 58%; }
#method .railNode[data-step="5"] { top: 76%; }
#method .railNode[data-step="6"] { top: 94%; }

/* アクティブになったノード */
#method .railNode.is-on {
  opacity: 1;
  transform: scale(1);
  background: rgba(123, 167, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(123, 167, 255, 0.25);
}

/* セクション全体が is-linked になったとき、レールも少し光らせる */
#method.is-linked .methodRailLine {
  opacity: 1;
  box-shadow: 0 0 25px rgba(90, 140, 255, 0.15);
}

/* METHOD: テキスト左の大きい丸＆コネクタを消す */
#method .points .point {
  padding-left: 0;
}

#method .points .point::before,
#method .points .point::after {
  content: none !important;
}

/* METHOD レイアウト微調整：レールとテキストの距離を詰める */
#method .methodBody {
  gap:32px;
}

/* テキストブロック自体を気持ちレール側へ */
#method .points {
  max-width: 720px;
  padding-left: 0;
  margin-left: 0;
}

/* PROGRAMS */
#programs{
  padding:12vh 9vw 8vh;
  min-height:116vh;
  background:rgba(246,249,255,.80);
  color:#0f1722;
  /* 最初はカーテンをかぶせておく */
  --programs-curtain: 100%;
}
#programs header{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:24px;
}
#programs h2{font-size:36px; color:#8db8ff}
#programs .bgbar{
  position:absolute; inset:0 -20%; z-index:0;
  background:
    radial-gradient(60vw 72vh at -10% 50%, rgba(18,28,46,.30), rgba(18,28,46,0) 66%),
    linear-gradient(135deg, rgba(123,174,255,.30), rgba(123,174,255,0) 60%);
  opacity:.92;
}

/* PROGRAMS：左から迫るカーテン */
#programs::before{
  content:"";
  position:absolute;
  inset:-4% 0 -4% 0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(10,16,28,0) 0%,
      rgba(10,16,28,.35) 40%,
      rgba(10,16,28,.85) 100%);
  mix-blend-mode:multiply;
  transform:translateX(calc(var(--programs-curtain, 0%) - 100%));
  opacity:.78;                    /* ほんの少しだけ軽く */
  will-change: transform, opacity;/* GPU 合成に乗せてカクつき軽減 */
  z-index:2;
}

.grid{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.card{
  flex:1 1 calc(33.333% - 18px);
  min-width:260px;
  border-radius:12px;
  padding:18px;
  background: linear-gradient(180deg, #1b2435, #0f1522);
  color:#e9effb;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 16px rgba(17,24,39,.22);
  position:relative;
  overflow:hidden;
}
.badge{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, var(--accent), #bfe0ff);
  color:#0f1522;
  font:900 10px/1 'Inter';
  letter-spacing:.08em;
  margin-bottom:8px;
}
.card h3{
  font-size:21px;
  margin-bottom:8px;
  color:#eef3ff;
  text-shadow:0 1px 2px rgba(0,0,0,.38);
}
.card p{
  font-size:16px;
  line-height:1.82;
  color:#e6edf9;
  margin-bottom:10px;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.mini{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:14.4px;
  line-height:1.78;
  color:#d8e2f5;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.mini .row{
  display:flex;
  align-items:center;
  gap:8px;
}
.mini .row .tick{
  width:6px;
  height:6px;
  border:1px solid var(--accent);
  transform:rotate(45deg);
}

/* program cards artwork overlay */
#c1::after,#c2::after,#c3::after{
  content:"";
  position:absolute;
  inset:10% 8% 14% 8%;
  pointer-events:none;
  border-radius:12px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:auto, cover;
  opacity:.12;
  filter:saturate(.9) brightness(1.06);
}
#c1::after{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,16,28,.24) 100%),
    var(--img-prog-c1, url('./img/shape-up2.png'));
}
#c2::after{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,16,28,.24) 100%),
    var(--img-prog-c2, url('./img/gym-dumbbell.png'));
}
#c3::after{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,16,28,.24) 100%),
    var(--img-prog-c3, url('./img/water11.png'));
}

/* Programs footer */
.progFoot{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  font-size:12px;
}

/* PROGRAMS の予約チップは一旦非表示 */
#progFoot{
  display:none !important;
}
.pill{
  border-radius:999px;
  padding:6px 12px;
  background:linear-gradient(180deg,#151e2c,#0c1320);
  color:#e9effa;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 22px rgba(2,8,23,.16);
}
.ops{
  margin-top:18px;
  width:100%;
}
.ops header{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0 8px;
}
.ops h3{
  font-size:16px;
  letter-spacing:.18em;
  color:#8db8ff;
}
.opsGrid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.op{
  grid-column: span 4;
  border-radius:12px;
  padding:14px;
  background:linear-gradient(180deg,#1b2435,#0f1522);
  color:#e9effb;
  border:1px solid rgba(255,255,255,.10);
}
.op h4{
  font-size:12px;
  letter-spacing:.2em;
  color:#eaf1ff;
  margin-bottom:6px;
}
.op p,.op li{
  font-size:13.4px;
  color:#d8e2f5;
  line-height:1.9;
}
.op ul{padding-left:16px}
@media (max-width: 980px){
  .op{grid-column: span 6;}
}
@media (max-width: 680px){
  .op{grid-column: span 12;}
}

/* FLOW (pinned stepper) */
#flow{
  padding:10vh 9vw;
  background:rgba(10,18,32,.90);
  color:#e9effb;
}
#flow header{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:14px;
}
#flow h2{font-size:30px; color:#8db8ff}
.flowWrap{position:relative}
.flowProg{
  position:sticky;
  top:calc(var(--navH) + 10px);
  z-index:5;
  height:8px;
  background:rgba(255,255,255,.12);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:16px;
}
.flowProg .fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),#bfe0ff);
}
.steps{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  margin-top:6px;
}
.s{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:12px;
  background:linear-gradient(180deg,#151e2c,#0c1320);
  min-height:82px;
  filter:saturate(.94);
}
.s .no{
  position:absolute;
  left:10px;
  top:-12px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#bfe0ff);
  color:#0f1522;
  font:900 11px/1 'Inter';
}
.s p{font-size:13.5px; color:#d7e6ff}
.s.active{
  outline:2px solid rgba(123,174,255,.62);
  box-shadow:0 6px 14px rgba(0,0,0,.24);
}
.route{
  position:absolute;
  left:0; right:0; top:-20px;
  height:140px;
  z-index:0;
  opacity:.6;
  pointer-events:none;
}
@media (max-width: 980px){
  .steps{grid-template-columns: repeat(3,1fr);}
  .route{display:none}
}
@media (max-width: 680px){
  .steps{grid-template-columns: 1fr;}
}

/* FACILITY */
#facility{
  height:88vh;
  background:rgba(15,23,34,.78);
}
#facility header{
  position:absolute;
  top:calc(var(--navH) + 16px);
  left:9vw;
  display:flex;
  align-items:baseline;
  gap:12px;
  z-index:5;
}
#facility h2{font-size:34px; color:#8db8ff}
.hwrap{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  display:flex;
  align-items:center;
  will-change:transform;
  pointer-events:none;
}
.slide{
  flex:0 0 70vw;
  height:52vh;
  margin-right:9vw;
  border-radius:10px;
  padding:18px;
  display:grid;
  place-items:end start;
  color:#0e1520;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  background:linear-gradient(180deg, #2a3650, #1a2331);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.slide h3{font-size:16px; margin-bottom:4px}
.slide p{font-size:12.5px; color:#f5f7fa}

/* POWER */
#power{
  height:92vh;
  background:rgba(23,34,52,.74);
}
#power .band{
  position:absolute;
  transform:rotate(-14deg) translateX(-140%);
  filter:saturate(110%);
  z-index:1;
}
#power .band.b1{inset:-30% -4% -34% -12%; background:#223046;}
#power .band.b2{inset:-20% -8% -28% -10%; background:#1a2638;}
#power .band.b3{inset:-10% -12% -22% -8%; background:linear-gradient(90deg,var(--accent),#bfe0ff);}
#power .label{
  position:absolute;
  right:9vw;
  bottom:18vh;
  text-align:right;
  z-index:6;
}
#power .label .eyebrow{
  display:block;
  margin-bottom:8px;
}
#power .label h3{
  font-size:30px;
  color:var(--ink);
  letter-spacing:.16em;
}
#power .meta{
  justify-content:flex-end;
  margin-top:8px;
  font-size:11px;
  color:#d7e1f3;
}

/* JOIN */

/* ACCESS (Google map section) */
#access{
  background: radial-gradient(circle at top, rgba(15,23,42,.95), rgba(10,18,32,1));
  padding: 10vh 9vw 12vh;
  color: #cfd9ef;
}

#access .access-inner{
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: center;
}

#access .access-text .eyebrow{
  display:inline-block;
  margin-bottom:8px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(148,163,184,.9);
}

#access .access-text h2{
  font-size:24px;
  letter-spacing:.14em;
  margin:0 0 8px;
  color:#e5edff;
}

#access .access-text p{
  font-size:13px;
  line-height:1.8;
  color:#cbd5f5;
}

#access .access-map-frame{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:70%; /* アスペクト比（だいたい 7:10） */
  border-radius:20px;
  overflow:hidden;
  box-shadow:
    0 24px 60px rgba(0,0,0,.85),
    0 0 0 1px rgba(15,23,42,.6);
  background:#020617;
}

/* 地図本体：ほぼモノクロ＋少しだけ締める */
#access .access-map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  filter:
    grayscale(.9)      /* ほぼ白黒 */
    contrast(1.05)     /* ちょっとだけコントラストUP */
    brightness(.94);   /* うっすら暗めに */
}

/* 上からごく控えめなネイビーのオーバーレイだけ */
#access .access-map-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 0%, rgba(96,165,250,.26) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(15,23,42,.78) 0, transparent 60%);
  mix-blend-mode:soft-light;
  opacity:.9;
}

/* mobile layout */
@media (max-width: 900px){
  #access{
    padding: 9vh 6vw 11vh;
  }
  #access .access-inner{
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  #access .access-map{
    order: 2;
  }
}

/* JOIN 内のフッタは「最下部フッタ」に移したので非表示にする */
#join .foot{
  display:none;
}

/* ==== Global footer at very bottom ==== */
#siteFooter{
  background:#020618;
  padding:18px 9vw 26px;
  color:#9ca3b8;
  font-size:11px;
  position: relative;
  z-index: 40;
}

#siteFooter .inner{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  align-items:center;
  justify-content:space-between;
}

#siteFooter .left{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  align-items:center;
}

#siteFooter .footerBrand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:0;
}

#siteFooter .footerLogo{
  height:34px;
  width:auto;
  display:block;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

#siteFooter .copy{
  white-space:nowrap;
}

#siteFooter .legalLinks{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

#siteFooter .legalLinks button{
  border:0;
  padding:0;
  margin:0;
  background:none;
  font:inherit;
  color:#9ca3b8;
  cursor:pointer;
}

#siteFooter .legalLinks button:hover{
  color:#e5edff;
  text-decoration:underline;
}

#siteFooter .credit{
  font-size:10px;
  opacity:.7;
  white-space:nowrap;
}

@media (max-width: 768px){
  #siteFooter .inner{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
}

/* --- Footer should always be visible --- */
#siteFooter,
.siteFooter{
  opacity: 1 !important;
  transform: none !important;
}

/* html.is-scrolling の有無に関係なく常に表示 */
html.is-scrolling #siteFooter,
html.is-scrolling .siteFooter{
  opacity: 1 !important;
}
#join{
  background:rgba(10,18,32,.78);
  padding:14vh 9vw 14vh;
  min-height:88vh;
  display:grid;
  place-items:center;
  text-align:center;
}
#join header{
  display:grid;
  gap:6px;
  place-items:center;
  margin-bottom:10px;
  position:relative;
  z-index:5;
}
#join h2{
  font-size:32px;
  color:#8db8ff;
  letter-spacing:.16em;
}
#join .subjp{
  font:500 12px/1 'Inter';
  letter-spacing:.18em;
  color:#cfd9ef;
}
#join p{
  max-width:820px;
  color:#cfd9ef;
  margin-top:10px;
  margin-bottom:16px;
  font-size:14px;
  position:relative;
  z-index:5;
}
.cta{
  display:inline-grid;
  place-items:center;
  gap:4px;
  padding:12px 26px;
  border-radius:22px;
  background:linear-gradient(135deg,var(--accent),#bfe0ff);
  color:#0f1522;
  font-weight:800;
  letter-spacing:.02em;
  border:1px solid rgba(0,0,0,.28);
  position:relative;
  z-index:5;
  overflow:hidden;
  transform-origin:50% 50%;
}
.cta .en{
  font-weight:900;
  letter-spacing:.08em;
  font-size:12px;
}
.cta .ja{
  font:500 11px/1 'Inter';
  letter-spacing:.16em;
}
.shine{
  position:absolute;
  top:-120%;
  bottom:-120%;
  left:-40%;
  width:28%;
  background:linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-20deg) translateX(-160%);
  pointer-events:none;
}
.foot{
  position:absolute;
  bottom:20px;
  left:9vw;
  right:9vw;
  display:flex;
  justify-content:space-between;
  color:#aeb9ce;
  font-size:11px;
  z-index:5;
}
.foot a{text-decoration:underline; color:#aeb9ce}

.gate{
  position:absolute;
  z-index:1;
  pointer-events:none;
}
.g1,.g2{
  top:0; bottom:0;
  width:52vw;
  background:#0d1725;
}
.g1{left:0; transform:translateX(-100%)}
.g2{right:0; transform:translateX(100%)}
.g3{
  left:0; right:0;
  height:54vh;
  bottom:0;
  background:linear-gradient(90deg,#0f1c2d,#0b1727);
  transform:translateY(100%);
}
.fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}
.burst{
  position:absolute;
  left:50%; top:50%;
  width:76vmin; height:76vmin;
  transform:translate(-50%,-50%) scale(.5);
  border-radius:50%;
  background:radial-gradient(circle, rgba(132,182,255,.72), rgba(132,182,255,0) 60%);
  opacity:0;
  filter:blur(.3px);
}
.rings{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.rings .ring{
  position:absolute;
  border-radius:50%;
  border:2.2px solid rgba(132,182,255,.52);
  opacity:0;
  box-shadow:
    0 0 28px rgba(132,182,255,.22),
    inset 0 0 12px rgba(132,182,255,.10);
}
.rings .r1{width:min(88vmin,900px); height:min(88vmin,900px)}
.rings .r2{width:min(64vmin,680px); height:min(64vmin,680px); border-color:rgba(232,201,106,.56)}
.rings .r3{width:min(44vmin,480px); height:min(44vmin,480px)}
.rings .r4{width:min(28vmin,320px); height:min(28vmin,320px); border-color:rgba(232,201,106,.62)}
.blades{
  position:absolute;
  inset:0;
  display:block;
}
.blade{
  position:absolute;
  left:50%; top:50%;
  width:2.2px;
  height:52vh;
  transform-origin:50% 100%;
  background:linear-gradient(180deg,
    rgba(232,201,106,.0),
    rgba(232,201,106,1) 55%,
    rgba(232,201,106,.0));
  opacity:0;
  filter:drop-shadow(0 10px 20px rgba(232,201,106,.35));
}

/* lazy image binding 初期値 */
:root{
  --img-fac-1:none;
  --img-fac-2:none;
  --img-fac-3:none;
  --img-power:none;
}
#facility .slide:nth-child(1),
#facility .slide:nth-child(2),
#facility .slide:nth-child(3){
  background:
    linear-gradient(180deg, rgba(245,248,255,.18), rgba(8,12,20,.42)),
    var(--img-fac-1);
  background-size:auto, cover;
  background-position:center;
  background-repeat:no-repeat;
}
#facility .slide:nth-child(2){
  background-image:
    linear-gradient(180deg, rgba(245,248,255,.18), rgba(8,12,20,.42)),
    var(--img-fac-2);
}
#facility .slide:nth-child(3){
  background-image:
    linear-gradient(180deg, rgba(245,248,255,.18), rgba(8,12,20,.42)),
    var(--img-fac-3);
}
#power::before{
  content:"";
  position:absolute;
  right:6vw;
  bottom:12vh;
  width:min(64vw,820px);
  height:min(42vw,520px);
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,16,28,.06), rgba(10,16,28,.30)),
    var(--img-power);
  background-size:auto, cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.12;
  transition:opacity .35s ease;
}
#power.bg-warm::before{ opacity:.16; }
#power.bg-hot::before{ opacity:.22; }

/* スクロール中は重い backdrop-filter を切る */
html.is-scrolling nav,
html.is-scrolling #hero .quickLinks a{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* micro interaction 系 */
nav .brand{
  transition: letter-spacing .2s ease, opacity .2s ease;
}
nav:hover .brand{
  letter-spacing:.24em;
  opacity:.96;
}
.quickLinks a:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:0 4px 12px rgba(0,0,0,.35),
             inset 0 1px rgba(255,255,255,.18);
}
.quickLinks a:active{
  transform: translateY(0) scale(.98);
  box-shadow:0 1px 4px rgba(0,0,0,.4),
             inset 0 1px rgba(255,255,255,.10);
}
.quickLinks a[href="#join"]:hover{
  filter: brightness(1.05);
}
.ctaNav{
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ctaNav:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  background: rgba(255,255,255,1);
}
.ctaNav:active{
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,.30);
}
#join .cta{
  transition:transform .16s ease, box-shadow .16s ease;
}
#join .cta:hover{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 10px 26px rgba(0,0,0,.40);
}
#join .cta:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

/* responsive 調整 */
@media (max-width: 900px){
  .progress{display:none}
  .blade{height:44vh}

  /* Facility：スマホは縦積み＆アニメなし */
  #facility{
    height:auto;
    padding:12vh 9vw 10vh;
  }
  #facility header{
    position:static;
    margin-bottom:18px;
  }
  .hwrap{
    position:static;
    height:auto;
    pointer-events:auto;
    transform:none !important;
    display:block;          /* flex をやめて縦積みにする */
  }
  #facility .slide{
    /* 横並び前提の flex を解除 */
    flex:none;

    /* 1枚をコンテンツ幅いっぱいに */
    width:100%;
    height:auto;
    min-height:240px;       /* 画像をそれなりに大きく見せたいので少し高さを確保 */
    margin:0 0 16px 0;
  }
}

/* ───────── 全体連動スクロール：チャプターナビ ───────── */

#chapters{
  position:fixed;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:900;
  pointer-events:none;
}
#chapters ol{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}
#chapters button{
  all:unset;
  cursor:pointer;
  pointer-events:auto;
  position:relative;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.40);
  background:rgba(10,18,32,.65);
  transition:
    background-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    opacity .18s ease;
  opacity:.55;
}
#chapters button::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--accent),#bfe0ff);
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  transform:scale(.4);
}
#chapters button::after{
  content:attr(data-label);
  position:absolute;
  right:140%;
  top:50%;
  transform:translateY(-50%);
  font:700 9px/1 'Inter';
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(226,234,255,.82);
  opacity:0;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
#chapters button.is-active{
  opacity:1;
  border-color:rgba(255,255,255,.88);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65),
    0 0 12px rgba(123,174,255,.65);
  transform:scale(1.15);
}
#chapters button.is-active::before{
  opacity:1;
  transform:scale(.95);
}
#chapters button:hover::after{
  opacity:1;
  transform:translateY(-50%) translateX(-4px);
}
@media (max-width: 900px){
  #chapters{ display:none; }
}

/* ───────── 全体連動スクロール：レール＋AIボタン ───────── */

#scrollRail{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:900;
  pointer-events:none;
  font-family:'Inter',system-ui,sans-serif;
}

/* 中央の縦ライン（マシンのシャフトイメージ） */
#scrollRail::before{
  content:"";
  position:absolute;
  left:50%;
  top:-24px;
  bottom:-24px;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,
    rgba(255,255,255,.18),
    rgba(255,255,255,.04));
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
  opacity:.75;
}

#scrollRail .railList{
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* 1ドット = 1セクション */
#scrollRail .railList li{
  position:relative;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;
}

#scrollRail .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(10,16,28,.9));
  box-shadow:0 0 0 1px rgba(0,0,0,.60);
  opacity:.55;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    opacity .18s ease;
}

/* レールのラベル：常に「内側」（左側）に出す */
#scrollRail .label{
  position:absolute;
  right:calc(100% + 8px);   /* ドットから内側に 8px 離して配置 */
  top:50%;
  transform:translateY(-50%);
  padding:4px 7px;
  border-radius:999px;
  background:rgba(10,16,28,.94);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
  font:700 9px/1 'Inter';
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(226,234,255,.94);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

/* アクティブ or ホバー時だけふわっと出す */
#scrollRail .railList li.is-active .label,
#scrollRail .railList li:hover .label{
  opacity:1;
  transform:translateY(-50%) translateX(-2px); /* ちょっとだけ左にスライド */
}

@media (max-width: 900px){
  #scrollRail{ display:none; }
}

/* ───────── AI コンシェルジュ ボタン（ミニマル） ───────── */

.railChat{
  all:unset;
  cursor:pointer;
  pointer-events:auto;
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

/* 丸ボタン本体 */
.railChat-main{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font:800 13px/1 'Inter';
  letter-spacing:.18em;
  color:#eaf1ff;
  text-transform:uppercase;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.40), transparent 60%),
    linear-gradient(135deg,#111827,#020617);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
  position:relative;
}

/* ホバー時の淡いグロー */
.railChat-main::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
  border:1px solid rgba(123,174,255,.8);
  opacity:0;
  transform:scale(.8);
  transition:opacity .18s ease, transform .18s ease;
}
.railChat:hover .railChat-main::after{
  opacity:1;
  transform:scale(1);
}

/* 下に出る「CONCIERGE」文字 */
.railChat-sub{
  font:700 7px/1 'Inter';
  letter-spacing:.20em;
  text-transform:uppercase;
  color:rgba(199,213,255,.9);
}

@media (max-width: 900px){
  .railChat{ display:none; }
}

/* === HERO polish === */

/* ブランドタグ（NAKAMEGURO / PERSONAL GYM） */
#hero .heroTag{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
  padding:8px 18px;
  border-radius:999px;
  font:600 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(241,244,249,.9);
  border:1px solid rgba(123,174,255,.7);
  background:
    radial-gradient(circle at top, rgba(123,174,255,.28), rgba(10,18,32,.9));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 16px 36px rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
#hero .heroTag::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:10px;
  background:linear-gradient(135deg, #7baeff, #c9ffea);
}

/* タイトルをもう一段ドカンと */
#hero h1{
  line-height:1.02;
  text-align:center;
}
#hero .l1{
  display:block;
  font-family:"Barlow Condensed", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.08em;
  font-size:clamp(32px, 7.4vw, 90px);
}
#hero .l2{
  display:block;
  margin-top:.18em;
  font-size:clamp(18px, 4.2vw, 40px);
  letter-spacing:.30em;
  text-transform:uppercase;
  color:rgba(140,181,255,.96);
}

@media (max-width: 900px){
  #hero .heroTag{
    padding:6px 14px;
    font-size:10px;
    letter-spacing:.20em;
    margin-bottom:14px;
  }
  #hero .l1{
    font-size:clamp(26px, 8.4vw, 40px);
  }
  #hero .l2{
    letter-spacing:.22em;
  }
}

/* HERO リード：カードをやめて、素のテキスト＋細いラインだけに */
#hero .lead{
  margin-top:24px;
  max-width:720px;
  font-size:13px;
  line-height:1.9;
  letter-spacing:.03em;
  text-align:center;
  color:#dfe7f5;
  position:relative;
  z-index:3;
  text-shadow:0 2px 14px rgba(0,0,0,.65); /* 背景に埋もれないようにだけ少し影 */
}

/* 上に一本だけヘアラインを入れて“芯”を通す */
#hero .lead::before{
  content:"";
  position:absolute;
  left:50%;
  top:-16px;
  width:72px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    rgba(148,163,184,0),
    rgba(191,219,254,.9),
    rgba(148,163,184,0)
  );
  opacity:.9;
}

#hero .lead strong{
  color:#fff;
}

/* クイックリンクを少しだけ強調 */
.quickLinks{
  margin-top:30px;
  gap:14px;
}
.quickLinks a{
  height:42px;
  padding:0 22px;
  font-size:12.5px;
  letter-spacing:.16em;
}
.quickLinks a[href="#join"]{
  transform:translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.4),
    0 12px 28px rgba(0,0,0,.55);
}
.quickLinks a:hover{
  transform:translateY(-2px);
}

/* 背景写真を少しだけ見せる（暗さを軽く） */
#hero::before{
  opacity:.26;
}

/* Hero を少しだけ明るく＋オーロラっぽく */

#hero{
  position:relative;
  overflow:hidden;
}

/* 中央〜上部をふわっと明るくするレイヤー */
#hero::after{
  content:"";
  position:absolute;
  inset:-10vh 0 0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 30%, rgba(140, 195, 255, .42), transparent 65%),
    linear-gradient(120deg, rgba(80, 150, 255, .32), rgba(180, 240, 255, 0) 55%);
  mix-blend-mode:screen;
  opacity:.9;
  animation:heroAurora 18s ease-in-out infinite alternate;
}

/* ゆっくり揺れるオーロラっぽい動き */
@keyframes heroAurora{
  0%{
    transform:translate3d(-2%, -2%, 0);
  }
  50%{
    transform:translate3d(1%, 3%, 0);
  }
  100%{
    transform:translate3d(3%, -1%, 0);
  }
}

/* 動きに弱い人向けにカット */
@media (prefers-reduced-motion: reduce){
  #hero::after{
    animation:none;
  }
}

/* QuickLinks：リストの「・」を消す＆ボタン化 */

#hero .quickLinks,
#hero .quickLinks li{
  margin:0;
  padding:0;
  list-style:none;
}

#hero .quickLinks{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

/* ベースのボタンスタイル */
#hero .quickLinks a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  height:40px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.16em;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.38);
  color:rgba(242,247,255,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease,
    color .25s ease;
}

#hero .quickLinks a:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  border-color:rgba(255,255,255,.32);
  background:rgba(12,40,88,.9);
}

/* 「体験予約」だけグラデ＆シャイン付きの主役ボタンに */
#hero .quickLinks a.is-primary{
  background:linear-gradient(120deg,#3fa7ff,#89e3ff);
  color:#020612;
  border-color:transparent;
  box-shadow:0 20px 50px rgba(0,0,0,.75);
  overflow:hidden;
}

/* シャインエフェクト */
#hero .quickLinks a.is-primary::before{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:linear-gradient(
    120deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.9),
    rgba(255,255,255,0)
  );
  transform:skewX(-20deg);
  opacity:0;
}

#hero .quickLinks a.is-primary:hover::before{
  animation:heroPrimaryShine .9s ease-out;
}

@keyframes heroPrimaryShine{
  0%   { transform:translateX(-150%) skewX(-20deg); opacity:0; }
  15%  { opacity:1; }
  100% { transform:translateX(220%)  skewX(-20deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  #hero .quickLinks a.is-primary::before{
    animation:none !important;
  }
}

/* === JOIN: CTA row + AI button === */

#join .ctaRow{
  margin-top:24px;
  margin-bottom:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  position:relative;
  z-index:5;
}
#join .ctaRow .cta{
  margin:0; /* 既存の余白はここで管理 */
}

#join .ctaAi{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 22px;
  border-radius:999px;
  border:1px solid rgba(140,186,255,.75);
  background:rgba(5,12,28,.92);
  color:#dde6ff;
  font:600 11px/1.8 "Inter", system-ui, sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.6);
}
#join .ctaAi::before{
  content:"AI";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:linear-gradient(135deg,#3fa7ff,#89e3ff);
  color:#020612;
  font-size:10px;
  font-weight:700;
}
#join .ctaAi .en{
  font-size:9px;
  opacity:.85;
}
#join .ctaAi .ja{
  font-size:11px;
  letter-spacing:.08em;
}
#join .ctaAi:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(0,0,0,.75);
}
#join .ctaAi:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(0,0,0,.6);
}

@media (max-width: 720px){
  #join .ctaRow{
    gap:10px;
  }
  #join .ctaRow .cta,
  #join .ctaAi{
    width:100%;
  }
}

/* === JOIN footer legal links === */

#join .foot .legalLinks{
  display:inline-flex;
  gap:4px;
  align-items:center;
  font-size:11px;
}
#join .foot .legalLinks button{
  border:0;
  padding:0;
  margin:0;
  background:none;
  font:inherit;
  color:#a4b2d6;
  cursor:pointer;
}
#join .foot .legalLinks button:hover{
  color:#ffffff;
  text-decoration:underline;
}

/* === Modal (Privacy / Terms / Tokusho / AI) === */

.modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease-out;
}
.modal.is-open{
  opacity:1;
  pointer-events:auto;
}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,10,20,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.modal__panel{
  position:relative;
  max-width:760px;
  width:min(760px, 92vw);
  max-height:80vh;
  padding:22px 26px 22px;
  border-radius:24px;
  background:
    radial-gradient(circle at top, rgba(123,174,255,.18), rgba(8,14,30,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.14);
  color:#e0e7ff;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.modal__title{
  font-size:16px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#aecdff;
}
.modal__body{
  font-size:13px;
  line-height:1.9;
  overflow:auto;
  padding-right:4px;
}
.modal__body h4{
  margin-top:12px;
  margin-bottom:4px;
  font-size:13px;
  color:#cfe2ff;
}
.modal__body p{
  margin:4px 0;
}
.modal__close{
  position:absolute;
  top:10px;
  right:14px;
  border:0;
  background:none;
  color:#cfd6ea;
  font-size:20px;
  cursor:pointer;
  padding:4px;
}
.modal__close:hover{
  color:#ffffff;
}

/* 背景スクロール抑制 */
html.is-modal-open,
body.is-modal-open{
  overflow:hidden;
}

/* METHOD：テキスト色（連結前 / 後） */
#method .point .u,
#method .point .desc{
  transition: color .28s ease-out;
}

/* 連結前（まだ薄め） */
#method .point .u{
  color: rgba(18, 28, 50, .55);
}
#method .point .desc{
  color: rgba(18, 28, 50, .70);
}

/* 連結後（スクロールでギミックが進んだあと） */
#method .point.is-linked .u,
#method .point.is-linked .desc{
  color: rgba(7, 15, 36, .98);
}

/* PROGRAMS：OPERATIONS 見出しを強めに */
#programs .ops header{
  display:flex;
  flex-direction:column;
  gap:4px;
}

#programs .ops header .eyebrow{
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  opacity:.75;
}

#programs .ops header h3{
  font-size:clamp(18px, 2.1vw, 22px);
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* FLOW 見出し（英字版） */
#flow header .eyebrow{
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  opacity:.75;
}

#flow header h2{
  font-size:clamp(20px, 2.6vw, 26px);
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* METHOD：ギミック前後で色変化 */
#method .point,
#method .desc{
  transition: color .25s ease-out;
}

/* ギミック発動「前」：少し薄く */
#method .point{
  color: rgba(24,39,59,.40);
}
#method .desc{
  color: rgba(36,52,79,.58);
}

/* ギミック発動「後」：読みやすい本番色 */
#method.is-linked .point{
  color:#18273b;
}
#method.is-linked .desc{
  color:#2f4158;
}

/* FLOW：ルート線の位置を少し下げて数字とかぶらないように */
.route{
  top: 18px; /* お好みで 10〜22px くらいで微調整OK */
}

/* FLOW：進捗バーと番号バッジがかぶらないように余白調整 */
#flow .flowProg{
  margin-bottom: 32px; /* 元は 16px なので、少し多めに下げる */
}

#flow .steps{
  margin-top: 10px;    /* 元は 6px。ほんの少しだけ下に */
}

/* PROGRAMS：カーテンを少し薄く＆ソフトに */
#programs{
  background: linear-gradient(
    180deg,
    rgba(246,249,255,.96),
    rgba(238,244,255,.92)
  );
}

#programs .bgbar{
  opacity: .78; /* 背景バーも ちょい軽く */
}

/* カーテンの上書き（アニメーションはそのまま） */
#programs::before{
  content:"";
  position:absolute;
  inset:-4% 0 -4% 0;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(10,16,28,0)   0%,
      rgba(10,16,28,.22) 40%,
      rgba(10,16,28,.60) 100%);
  /* mix-blend-mode:multiply;  ← 使わないので削除 */
  transform:translateX(calc(var(--programs-curtain, 0%) - 100%));
  opacity:.55;               /* 濃ければ .45〜.50 に下げてもOK */
  z-index:2;
  will-change: transform, opacity;  /* スクロール中のtransformを軽くする */
}

/* PROGRAMS：カードとOPSを少しだけライトに */
#programs .card{
  background: linear-gradient(180deg,#1d2638,#101624);
  box-shadow:0 8px 22px rgba(15,23,42,.24);
}

#programs .op{
  background: linear-gradient(180deg,#151f31,#0d1322);
  box-shadow:0 6px 18px rgba(15,23,42,.22);
}

/* ===== OPENING SEQUENCE (Movement intro) ===== */

html.is-intro,
body.is-intro{
  overflow:hidden;
}

#introMovement{
  position:fixed;
  inset:0;
  z-index:1400;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:1;
}

/* 背景：ネイビー〜ブラック。真ん中だけ少し明るく */
#introMovement .mi-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(59,130,246,.9), transparent 60%),
    radial-gradient(circle at 50% 120%, #020617, #020617 70%);
}

/* 中央コア（丸ごと拡大用のコンテナ） */
#introMovement .mi-core{
  position:relative;
  z-index:1;
  width:min(480px, 80vw);
  height:min(480px, 80vw);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 中央の塗りつぶしサークル（ドット → 拡大の主役） */
#introMovement .mi-circleBase{
  position:absolute;
  left:50%;
  top:50%;
  width:230px;
  height:230px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 25%, #eff6ff, #1e293b 55%, #020617 100%);
  box-shadow:
    0 0 80px rgba(59,130,246,.85),
    0 0 120px rgba(15,23,42,1);
}

/* 内側・外側のリング。ゴールドは外側の一部だけに */
#introMovement .mi-circleRing{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.7);
  transform:translate(-50%, -50%);
}

#introMovement .mi-circleRing{
  width:260px;
  height:260px;
  box-shadow:0 0 0 1px rgba(15,23,42,.8);
}

#introMovement .mi-circleRing--outer{
  width:320px;
  height:320px;
  border-color:rgba(148,163,184,.5);
  box-shadow:0 0 40px rgba(15,23,42,.9);
}

/* 外側リングの上側だけ、薄いゴールドのアーク */
#introMovement .mi-circleRing--outer::before{
  content:"";
  position:absolute;
  inset:24px;
  border-radius:inherit;
  border-top:2px solid rgba(250,204,21,.8);
  opacity:.8;
}

/* タイポグラフィ（中央に乗せる） */
#introMovement .mi-type{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  color:#e5e7eb;
}

#introMovement .mi-tag,
#introMovement .mi-sub{
  font:600 11px/1 "Inter", system-ui, sans-serif;
  letter-spacing:.30em;
  text-transform:uppercase;
}

#introMovement .mi-tag{
  margin-bottom:12px;
  color:rgba(199,210,254,.96);
}

#introMovement .mi-sub{
  margin-top:12px;
  color:rgba(148,163,184,.96);
}

#introMovement .mi-main{
  font-family:"Barlow Condensed", system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(32px, 6.2vw, 54px);
  letter-spacing:.32em;
  text-transform:uppercase;
}

/* モバイル微調整 */
@media (max-width: 768px){
  #introMovement .mi-core{
    width:min(360px, 80vw);
    height:min(360px, 80vw);
  }
  #introMovement .mi-circleBase{
    width:190px;
    height:190px;
  }
  #introMovement .mi-circleRing{
    width:220px;
    height:220px;
  }
  #introMovement .mi-circleRing--outer{
    width:280px;
    height:280px;
  }
  #introMovement .mi-tag,
  #introMovement .mi-sub{
    letter-spacing:.22em;
    font-size:10px;
  }
}

/* Opening intro：中央サークルを少しフラットに */

#introMovement .mi-circleBase{
  background:
    radial-gradient(circle at 50% 28%,
      rgba(255,255,255,.20),
      rgba(37,99,235,.9) 52%,
      rgba(15,23,42,1) 86%);
  box-shadow:
    0 0 40px rgba(37,99,235,.65);
}

/* リングは線メインにして立体感を抑える */
#introMovement .mi-circleRing,
#introMovement .mi-circleRing--outer{
  background: none;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(148,163,184,.75);
  box-shadow: 0 0 32px rgba(15,23,42,.9);
}

/* 外側リングのゴールドは細いアークだけ */
#introMovement .mi-circleRing--outer::before{
  border-top-color: rgba(245,208,120,.8);
}

/* タイポはシャドウを切って、線で勝負 */
#introMovement .mi-type{
  text-shadow: none;
}
#introMovement .mi-main{
  letter-spacing: .34em;
}

/* 中央サークルが迫ってくる時のバースト */
#introMovement .mi-burst{
  position:absolute;
  left:50%;
  top:50%;
  width:120%;
  height:120%;
  transform:translate(-50%,-50%) scale(.3);
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.85) 0,
      rgba(251,191,36,.42) 26%,
      rgba(15,23,42,0) 60%);
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
}

/* Movement intro：青の彩度を落として、インク寄りのネイビーに */

#introMovement .mi-bg{
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(96, 165, 250, .45),
      rgba(15, 23, 42, 1) 65%
    ),
    radial-gradient(
      circle at 50% 120%,
      #020617,
      #020617 75%
    );
}

/* 中央の円：もっとフラット＆低彩度に */
#introMovement .mi-circleBase{
  background:
    radial-gradient(
      circle,
      rgba(248, 250, 252, .10),
      #243b5e 55%,
      #020617 100%
    );
  box-shadow:
    0 0 40px rgba(37, 99, 235, .35),
    0 0 80px rgba(15, 23, 42, .9);
}

/* リング：線メイン＋ゴールドはごく薄く */
#introMovement .mi-circleRing{
  border-color: rgba(148, 163, 184, .55);
  box-shadow: 0 0 30px rgba(15, 23, 42, .8);
}

#introMovement .mi-circleRing--outer{
  border-color: rgba(148, 163, 184, .35);
  box-shadow: 0 0 40px rgba(15, 23, 42, .9);
}

/* ゴールドは細いアークだけ（彩度も落とす） */
#introMovement .mi-circleRing--outer::before{
  border-top-color: rgba(248, 215, 129, .6);
}

/* バースト：金より“白い光”寄りに */
#introMovement .mi-burst{
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, .95) 0,
      rgba(148, 163, 184, .40) 26%,
      rgba(15, 23, 42, 0) 60%
    );
}

/* =========================
   CUSTOM CURSOR
   ========================= */

/* 入力系は標準カーソルに戻す */
input,
textarea,
button[disabled],
[contenteditable="true"] {
  cursor: auto !important;
}

/* カーソル本体 */
#cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-9999px,-9999px,0);
  opacity: 0;
  transition: opacity .25s ease;
  mix-blend-mode: screen;
}

#cursor.is-visible {
  opacity: 1;
}

/* 中の小さい点 */
#cursor .cursor-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #e5f0ff;
  box-shadow: 0 0 8px rgba(147, 197, 253, .9);
}

/* 外側のリング */
#cursor .cursor-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(148, 163, 184, .45);
  box-shadow: 0 0 20px rgba(15, 23, 42, .65);
  background: radial-gradient(circle, rgba(56, 189, 248, .16) 0%, transparent 60%);
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    transform .25s ease,
    opacity .25s ease;
  opacity: .9;
}

/* 通常のホバー（a, button）で少しだけ大きく明るく */
#cursor.is-hot .cursor-ring {
  transform: translate(-50%, -50%) scale(1.40);
  border-color: rgba(191, 219, 254, .9);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, .4),
    0 0 30px rgba(59, 130, 246, .7);
}

/* CTA / AI 用の“ご褒美”モード（data-cursor="primary"） */
#cursor[data-mode="primary"] .cursor-ring {
  transform: translate(-50%, -50%) scale(1.60);
  border-color: rgba(248, 250, 252, .95);
  box-shadow:
    0 0 0 1px rgba(219, 234, 254, .6),
    0 0 26px rgba(59, 130, 246, .9),
    0 0 40px rgba(219, 190, 120, .85);
  background: radial-gradient(circle,
    rgba(56, 189, 248, .32) 0%,
    rgba(219, 190, 120, .35) 35%,
    transparent 62%);
}

/* HERO など暗い背景でだけ少し大きくしたい場合 （任意） */
html.sec-hero-active #cursor .cursor-ring {
  opacity: 1;
}

/* --- Visibility boost for custom cursor (overlay stays above all) --- */
#cursor{
  mix-blend-mode: normal; /* 画面に埋もれないよう通常合成に */
  z-index: 14000;         /* 念のため最前面へ */
}
#cursor .cursor-core{
  width: 6px;
  height: 6px;
  background: #f9fbff;
  box-shadow: 0 0 18px rgba(147, 197, 253, 1);
}
#cursor .cursor-ring{
  width: 30px;
  height: 30px;
  border-color: rgba(226, 238, 255, 1);
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, .65),
    0 0 36px rgba(59, 130, 246, .95),
    0 0 54px rgba(123, 174, 255, .7);
  background: radial-gradient(circle,
    rgba(255, 255, 255, .30) 0%,
    rgba(123, 174, 255, .32) 38%,
    transparent 70%);
  opacity: 1;
}

/* PROGRAMS：WHO / GOAL / STYLE ミニ比較帯 */
.progCompare{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(15,23,42,.08);   /* 細いヘアラインだけ。枠は増やさない */
  display:flex;
  flex-wrap:wrap;
  gap:20px clamp(18px,4vw,32px);
  font-size:13px;
  color:#111827;
}

.pc-col{
  flex:1 1 220px;
  min-width:0;
}

.pc-label{
  font:700 10px/1 'Inter';
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(107,114,128,.9);
  margin-bottom:8px;
}

.progCompare p{
  margin:0;
  line-height:1.9;
  color:#111827;
}

.progCompare p strong{
  color:#020617;
}

@media (max-width: 720px){
  .progCompare{
    flex-direction:column;
    padding-top:16px;
  }
}


/* =========================================================
   WHITE RESKIN (delicate / white-based)
   - Keep all layout & GSAP gimmicks as-is
   - Override only “look & feel” (color / surface / shadow)
   ========================================================= */

/* --- Palette --- */
:root{
  /* Base surfaces */
  --navy:#fbfbfa;         /* paper */
  --coal:#f4f5f7;         /* soft surface */
  --concrete:#ffffff;     /* pure */
  --steel:#e7e8ec;        /* border */

  /* Text */
  --ink:#111827;          /* main text */
  --muted:#6b7280;        /* secondary */

  /* Accents (silver + champagne) */
  --accent:#7F93A9;       /* silver-blue (desaturated) */
  --accentRGB: 127,147,169;
  --accentGold:#b59f79;   /* champagne gold */
  --gold:#A8893A;         /* deeper gold (optional) */

  /* Lines */
  --hair: rgba(17,24,39,.12);
}

html{
  color-scheme: light;
}

body{
  background:var(--navy);
  color:var(--ink);
}

/* --- Background weave (fixed) --- */
#bgHost{
  background:
    radial-gradient(1200px 900px at 18% 12%, rgba(var(--accentRGB),.14), transparent 62%),
    radial-gradient(900px 700px at 84% 86%, rgba(181,159,121,.14), transparent 60%),
    linear-gradient(180deg, #ffffff, #f3f4f6);
  opacity:.95;
}
#bgHost::after{
  opacity:.34;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(1200px 900px at 10% 10%, rgba(var(--accentRGB),.22), transparent 60%),
    radial-gradient(900px 700px at 90% 80%, rgba(181,159,121,.20), transparent 60%),
    radial-gradient(800px 600px at 50% 0%,  rgba(148,163,184,.18), transparent 60%);
}

/* --- Top Nav (glass on white) --- */
nav{
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 16px 40px rgba(15,23,42,.06);
}
.brand{ color: var(--ink); }
.progress{ background: rgba(17,24,39,.10); }
.bar{ background: linear-gradient(90deg, var(--accent), rgba(var(--accentRGB),.38)); }

/* “RESERVE” は白基調でも迷子にならないように、インク色のピルに */
.ctaNav{
  background: rgba(17,24,39,.92);
  color: #ffffff;
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 26px rgba(15,23,42,.14);
}
.ctaNav:hover{
  background: rgba(17,24,39,1);
}

/* --- Common grid overlay --- */
.gridLayer{
  background:
    linear-gradient(transparent 96%, rgba(17,24,39,.06) 96%) 0 0/100% 7.6vh,
    linear-gradient(90deg, transparent 96%, rgba(17,24,39,.06) 96%) 0 0/7.6vw 100%;
  opacity:.18;
  mix-blend-mode:multiply;
}

/* =========================================================
   HERO
   ========================================================= */

#hero{
  background: transparent;
  color: var(--ink);
}

/* 背景写真は“白いヴェール”越しに、うっすらだけ見せる */
#hero::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.94)),
    var(--img-hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: saturate(.78) brightness(1.18) contrast(1.02);
}

/* オーロラは白基調では“気配”だけに */
#hero::after{
  background:
    radial-gradient(circle at 50% 30%, rgba(var(--accentRGB),.14), transparent 64%),
    radial-gradient(circle at 15% 90%, rgba(181,159,121,.12), transparent 60%);
  mix-blend-mode: multiply;
  opacity: .55;
}

/* リングは薄いグレーに */
#hero .ring{
  border-color: rgba(17,24,39,.12);
  box-shadow:
    inset 0 0 18px rgba(var(--accentRGB),.06),
    0 0 22px rgba(var(--accentRGB),.05);
}
#hero .ring.r2{
  border-color: rgba(17,24,39,.08);
}

/* タイトル */
#hero .l1{ color: var(--ink); }
#hero .l2{ color: rgba(var(--accentRGB),.92); }

/* ブランドタグ（上のピル） */
#hero .heroTag{
  color: rgba(17,24,39,.82);
  border-color: rgba(var(--accentRGB),.30);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
#hero .heroTag::before{
  background: linear-gradient(135deg, var(--accent), rgba(181,159,121,.55));
}

/* リード文（影は最小） */
#hero .lead{
  color: rgba(17,24,39,.78);
  text-shadow: none;
}
#hero .lead strong{ color: rgba(17,24,39,.96); }

/* SCROLL の巨大文字 */
.scrollWord{ color: rgba(17,24,39,.05); }
.scrollThin{ color: rgba(17,24,39,.58); }

/* QuickLinks：白いガラスカード */
#hero .quickLinks a{
  border-color: rgba(17,24,39,.12);
  background: rgba(255,255,255,.72);
  color: rgba(17,24,39,.86);
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
}
#hero .quickLinks a:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(var(--accentRGB),.28);
  box-shadow: 0 18px 46px rgba(15,23,42,.10);
}
#hero .quickLinks a.is-primary{
  background: linear-gradient(135deg, rgba(17,24,39,.94), rgba(17,24,39,.86));
  color:#ffffff;
  box-shadow: 0 22px 56px rgba(15,23,42,.14);
}

/* =========================================================
   IMPACT
   ========================================================= */

#impact{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
#impact .bw{ letter-spacing: .08em; }

/* =========================================================
   METHOD / PROGRAMS (light already, align to palette)
   ========================================================= */

#method,
#programs{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,245,247,.92));
  color: var(--ink);
}

#method h2,
#programs h2{ color: var(--accent); }

/* METHOD 右の背景画像も白寄せ */
#method::before{
  filter: saturate(.80) brightness(1.14) contrast(1.02);
  opacity: .52;
}

/* METHOD レール：白→グレーへ */
#method .methodRailLine{
  background: linear-gradient(
    to bottom,
    rgba(17,24,39,0),
    rgba(17,24,39,.16),
    rgba(17,24,39,0)
  );
  opacity: .9;
}
#method .railNode{
  border-color: rgba(17,24,39,.24);
  background: rgba(255,255,255,.72);
}
#method .railNode.is-on{
  background: rgba(var(--accentRGB),.95);
  box-shadow: 0 0 0 4px rgba(var(--accentRGB),.18);
}

/* PROGRAMS：カードを白いカードに */
#programs .card,
#programs .op{
  background: rgba(255,255,255,.78);
  color: var(--ink);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 18px 50px rgba(15,23,42,.08);
}
#programs .card h3,
#programs .op h4{ color: rgba(17,24,39,.92); text-shadow:none; }
#programs .card p,
#programs .mini,
#programs .op p,
#programs .op li{ color: rgba(17,24,39,.72); text-shadow:none; }

/* カード内のアートワークはさらに薄く */
#c1::after,#c2::after,#c3::after{ opacity: .08; filter: saturate(.8) brightness(1.12); }

/* PROGRAMS カーテン：暗い幕→薄い影に */
#programs::before{
  background: linear-gradient(100deg,
    rgba(17,24,39,0) 0%,
    rgba(17,24,39,.06) 40%,
    rgba(17,24,39,.12) 100%);
  opacity: .55;
}

/* =========================================================
   FLOW
   ========================================================= */

#flow{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
#flow h2{ color: var(--accent); }
#flow .flowProg{ background: rgba(17,24,39,.10); }
#flowPath{ stroke: rgba(17,24,39,.14); }

#flow .s{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
}
#flow .s p{ color: rgba(17,24,39,.72); }
#flow .s.active{
  outline: 2px solid rgba(var(--accentRGB),.28);
  box-shadow: 0 18px 46px rgba(15,23,42,.10);
}

/* =========================================================
   FACILITY
   ========================================================= */

#facility{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
#facility h2{ color: var(--accent); }

#facility .slide{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 24px 60px rgba(15,23,42,.10);
  color: var(--ink);
}
#facility .slide p{ color: rgba(17,24,39,.70); }

/* 画像背景（lazy binding）も白いヴェールに */
#facility .slide:nth-child(1),
#facility .slide:nth-child(2),
#facility .slide:nth-child(3){
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.94)),
    var(--img-fac-1);
  background-blend-mode: screen;
}
#facility .slide:nth-child(2){
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.94)),
    var(--img-fac-2);
}
#facility .slide:nth-child(3){
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.94)),
    var(--img-fac-3);
}

/* =========================================================
   POWER
   ========================================================= */

#power{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}

/* 斜めバンド：濃色→淡い面に */
#power .band.b1{ background: rgba(17,24,39,.06); }
#power .band.b2{ background: rgba(17,24,39,.04); }
#power .band.b3{ background: linear-gradient(90deg, rgba(var(--accentRGB),.65), rgba(181,159,121,.35)); }

#power .label h3{ color: var(--ink); }
#power .meta{ color: rgba(17,24,39,.62); }

/* うっすら写真 */
#power::before{
  opacity: .20;
  filter: saturate(.78) brightness(1.18) contrast(1.02);
}

/* =========================================================
   JOIN
   ========================================================= */

#join{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
#join h2{ color: var(--ink); }
#join .subjp,
#join p{ color: rgba(17,24,39,.72); }

/* 予約CTA：白基調では“インク＋微アクセント” */
#join .cta{
  background: linear-gradient(135deg, rgba(17,24,39,.94), rgba(17,24,39,.86));
  color:#ffffff;
  border: 1px solid rgba(17,24,39,.12);
  box-shadow: 0 22px 56px rgba(15,23,42,.14);
}

#join .ctaAi{
  background: rgba(255,255,255,.78);
  color: rgba(17,24,39,.82);
  border: 1px solid rgba(var(--accentRGB),.26);
  box-shadow: 0 18px 46px rgba(15,23,42,.10);
}

/* JOIN のゲート：暗幕→白いシート */
#join .g1,
#join .g2{
  background: rgba(255,255,255,1);
  box-shadow: 0 0 0 1px rgba(17,24,39,.06);
}
#join .g3{
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(244,245,247,1));
  box-shadow: 0 -1px 0 rgba(17,24,39,.06);
}

/* =========================================================
   ACCESS
   ========================================================= */

#access{
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
#access .access-text h2{ color: var(--ink); }
#access .access-text p{ color: rgba(17,24,39,.72); }

#access .access-map-frame{
  background: #ffffff;
  box-shadow:
    0 24px 60px rgba(15,23,42,.10),
    0 0 0 1px rgba(17,24,39,.08);
}
#access .access-map-frame iframe{
  filter: grayscale(.95) contrast(1.02) brightness(.98);
}
#access .access-map-frame::after{
  opacity: .35;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--accentRGB),.18) 0, transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(181,159,121,.18) 0, transparent 60%);
}

/* =========================================================
   FOOTER
   ========================================================= */

#siteFooter{
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.60);
  border-top: 1px solid rgba(17,24,39,.08);
}
#siteFooter .legalLinks button{ color: rgba(17,24,39,.60); }
#siteFooter .legalLinks button:hover{ color: rgba(17,24,39,.92); }

/* =========================================================
   MODAL
   ========================================================= */

.modal__backdrop{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.modal__panel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
  box-shadow: 0 30px 80px rgba(15,23,42,.14);
  color: var(--ink);
}
.modal__title{ color: rgba(17,24,39,.86); }
.modal__body h4{ color: rgba(17,24,39,.86); }
.modal__close{ color: rgba(17,24,39,.58); }
.modal__close:hover{ color: rgba(17,24,39,.92); }

/* =========================================================
   SCROLL RAIL (右のドットナビ)
   ========================================================= */

#scrollRail::before{
  background: linear-gradient(to bottom,
    rgba(17,24,39,.16),
    rgba(17,24,39,.04));
  box-shadow: none;
  opacity: .6;
}

#scrollRail .dot{
  border-color: rgba(17,24,39,.22);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(244,245,247,1));
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}

#scrollRail .label{
  background: rgba(255,255,255,.92);
  border-color: rgba(17,24,39,.10);
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
  color: rgba(17,24,39,.78);
}

/* アクティブは“点”もわかるように（ギミックはそのまま） */
#scrollRail .railList li.is-active .dot,
#scrollRail .railList li:hover .dot{
  opacity: 1;
  transform: scale(1.25);
  border-color: rgba(var(--accentRGB),.55);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(var(--accentRGB),.25));
  box-shadow:
    0 0 0 1px rgba(var(--accentRGB),.16),
    0 10px 24px rgba(15,23,42,.10);
}

/* AIボタンも白基調へ */
.railChat-main{
  color: rgba(17,24,39,.92);
  background: rgba(255,255,255,.92);
  border-color: rgba(17,24,39,.10);
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
}
.railChat-sub{ color: rgba(17,24,39,.62); }
.railChat-main::after{ border-color: rgba(var(--accentRGB),.45); }

/* =========================================================
   OPENING INTRO (center circle)
   ========================================================= */

#introMovement .mi-bg{
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--accentRGB),.18), transparent 60%),
    radial-gradient(circle at 70% 92%, rgba(181,159,121,.16), transparent 60%),
    linear-gradient(180deg, #ffffff, #f3f4f6);
}

#introMovement .mi-circleBase{
  background:
    radial-gradient(circle at 50% 25%, #ffffff, #f3f4f6 66%, #e5e7eb 100%);
  box-shadow:
    0 26px 70px rgba(15,23,42,.12),
    0 0 0 1px rgba(17,24,39,.08);
}

#introMovement .mi-circleRing{
  border-color: rgba(17,24,39,.18);
  box-shadow: none;
}

#introMovement .mi-circleRing--outer{
  border-color: rgba(17,24,39,.12);
  box-shadow: none;
}

#introMovement .mi-circleRing--outer::before{
  border-top-color: rgba(181,159,121,.55);
}

#introMovement .mi-type{ color: rgba(17,24,39,.86); }
#introMovement .mi-tag{ color: rgba(17,24,39,.62); }
#introMovement .mi-sub{ color: rgba(17,24,39,.50); }

#introMovement .mi-burst{
  mix-blend-mode: normal;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.92) 0,
      rgba(var(--accentRGB),.22) 26%,
      rgba(15,23,42,0) 62%);
}

/* =========================================================
   CURSOR (white base)
   ========================================================= */

#cursor .cursor-core{
  background: rgba(17,24,39,.92);
  box-shadow: 0 0 18px rgba(var(--accentRGB),.35);
}

#cursor .cursor-ring{
  border-color: rgba(17,24,39,.28);
  box-shadow:
    0 0 0 1px rgba(17,24,39,.10),
    0 18px 40px rgba(15,23,42,.10);
  background: radial-gradient(circle,
    rgba(var(--accentRGB),.14) 0%,
    transparent 62%);
}


/* =========================================================
   WHITE RESKIN v3 — TYPOGRAPHY + NO-IMAGE MODE
   - 目的：強すぎない「ミニマル未来」/ 繊細さ
   - 画像：クライアント共有待ちのため全OFF（CSSだけで無効化）
   ========================================================= */

:root{
  /* Unified typeface (already included in HTML: Inter) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-display: var(--font-sans);

  /* Disable all image tokens (also overrides JS lazy-bind) */
  --img-hero: none !important;
  --img-impact: none !important;
  --img-method: none !important;
  --img-power: none !important;
  --img-join: none !important;
  --img-prog-c1: none !important;
  --img-prog-c2: none !important;
  --img-prog-c3: none !important;
  --img-fac-1: none !important;
  --img-fac-2: none !important;
  --img-fac-3: none !important;
  --img-prog-amb: none !important;
}

body{
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.82;
}

/* Headings: use the same family (Barlow → Inter) */
h1,h2,h3{
  font-family: var(--font-display) !important;
  font-weight: 600;
  letter-spacing: .06em;
}

/* Big display words (hero / intro / background scroll word) */
.scrollWord,
#hero .l1,
#introMovement .mi-main{
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Secondary lines / small caps */
#hero .l2,
.eyebrow,
#method .methodTag,
#hero .heroTag,
.railChat-sub,
#scrollRail .label{
  font-family: var(--font-sans) !important;
  font-weight: 600;
  letter-spacing: .22em;
}

/* Brand + UI text：少しだけ力を抜く */
.brand{
  font-weight: 600;
  letter-spacing: .16em;
}

/* 強調（strong）を“太すぎない”方向へ */
strong, b{ font-weight: 600; }

/* Method 本文の見出しが強すぎるので少しだけ整える */
#method .point{
  font-weight: 600;
}

/* CTA / バッジ類：900 → 700 あたりに */
.badge{ font-weight: 700; }
#flow .no{ font-weight: 700; }
.ctaNav{ font-weight: 700; }

/* Hero の文字幅が増えるので、ほんの少しだけ詰める（ヒーロー差し替え予定なら後で調整OK） */
#hero .l1{
  letter-spacing: .02em;
  font-size: clamp(30px, 7.0vw, 86px);
}
#hero .l2{
  letter-spacing: .20em;
}

/* 画像を使っていた疑似要素も念のためOFF（変な残りを防ぐ） */
#method::before,
#power::before,
#hero::before{
  background-image: none !important;
}
#c1::after,#c2::after,#c3::after{
  background-image: none !important;
}
#facility .slide:nth-child(1),
#facility .slide:nth-child(2),
#facility .slide:nth-child(3){
  background-image: none !important;
}

/* ===== Small additions (text-only) ===== */

/* HERO: add a subtle 3rd line (minimal / clean) */
#hero .subline{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  line-height:1.85;
  color: rgba(17,24,39,.60);
  letter-spacing:.02em;
}

/* PROGRAMS: header action button (Pricing) */
#programs header{
  flex-wrap:wrap;
}

#programs .pillBtn{
  margin-left:auto;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(15,23,42,.14) !important;
  background: rgba(255,255,255,.78) !important;
  color: rgba(17,24,39,.84) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.06) !important;
  padding:7px 12px;
  border-radius:999px;
  font:inherit;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

#programs .pillBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(15,23,42,.10) !important;
}

#programs .pillBtn:active{
  transform:translateY(0);
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}

@media (max-width: 680px){
  #programs .pillBtn{
    margin-left:0;
  }
}


/* =========================================================
   WHITE RESKIN v7 — HEADER LOGO + CLEAN CAPS
   - Header: add logo mark (transparent) without any frame
   - Type: adopt the "A P P R O A C H ..." clean tracking as a base
   ========================================================= */

:root{
  --caps-track: .42em;
  --caps-color: rgba(17,24,39,.58);
}

/* Header brand (logo + name) */
nav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--ink);
  letter-spacing: 0 !important; /* prevent hover jitter from legacy rules */
  transition: opacity .2s ease;
}

nav .brandLogo{
  height:22px;
  width:auto;
  display:block;
}

nav .brandText{
  display:block;
  font-weight:600;
  letter-spacing:.12em;
  transition: letter-spacing .2s ease, opacity .2s ease;
}

nav:hover .brandText{
  letter-spacing:.14em;
  opacity:.96;
}

@media (max-width: 520px){
  nav .brandLogo{ height:20px; }
  nav .brandText{ letter-spacing:.08em; }
}

/* Clean micro-caps baseline */
.eyebrow,
#method .methodTag,
.pc-label,
#hero .heroTag,
.railChat-sub{
  letter-spacing: var(--caps-track) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
}

.eyebrow{ color: var(--caps-color) !important; }

/* Scroll rail labels: slightly less tracking for compactness */
#scrollRail .label{
  letter-spacing: .34em !important;
  font-weight: 600 !important;
}

/* Pricing button: align to the same caps rhythm */
#programs .pillBtn{
  letter-spacing: .34em !important;
}

/* =========================================================
   EXTRA MICRO GIMMICKS v1
   1) ACCESS reveal helpers + frame line
   3) METHOD point accent when .is-on
   4) Scroll rail active pulse
   ========================================================= */

/* 1) ACCESS: slight perf hint (no visual change by itself) */
#access .access-text,
#access .access-map{
  will-change: transform, opacity;
}

/* 1) ACCESS: frame line (SVG overlay) */
#access .access-map-frame{
  position: relative;
}
#access .accessFrame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#access .accessFrame rect{
  fill: none;
  stroke: rgba(var(--accentRGB), 0.38);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  /* fallback: hidden until JS sets real length */
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
}

/* 3) METHOD: add a clean accent when each point becomes active (.is-on)
   - underline expands
   - small “shine” passes once */
#method .point .u::after{
  transition: transform .45s ease, opacity .45s ease;
  opacity: 0.72;
}
#method .point.is-on .u::after{
  transform: scaleX(1);
  opacity: 1;
}

#method .point .u{
  position: relative;
}
#method .point .u::before{
  content: "";
  position: absolute;
  left: -0.22em;
  right: -0.22em;
  top: 50%;
  height: 1.35em;
  transform: translateY(-50%) translateX(-18%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--accentRGB), 0.18),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}

#method .point.is-on .u::before{
  animation: methodShine .75s ease-out 1;
}

@keyframes methodShine{
  0%   { opacity: 0; transform: translateY(-50%) translateX(-18%); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) translateX(18%); }
}

/* 4) Scroll rail: active dot gets a subtle pulse ring */
#scrollRail .dot{
  position: relative;
}
#scrollRail .dot::after{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accentRGB), 0.22);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

#scrollRail .railList li.is-active .dot::after{
  opacity: 1;
  animation: railPulse 1.9s ease-out infinite;
}

@keyframes railPulse{
  0%   { transform: scale(0.6); opacity: 0.42; }
  70%  { opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Reduced motion: stop pulsing (keep active style) */
@media (prefers-reduced-motion: reduce){
  #scrollRail .railList li.is-active .dot::after{ animation: none; opacity: 0; }
  #method .point.is-on .u::before{ animation: none; }
}

/* FAQ */
#faq .sectionHead{
  max-width: 980px;
  margin: 0 auto 18px;
  padding: 0 24px;
}

.faqList{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  gap: 12px;
}

.faqItem{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  overflow: hidden;
}

.faqItem summary{
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  color: rgba(17,24,39,.86);
}

.faqItem summary::-webkit-details-marker{ display: none; }

.faqItem summary::after{
  content: "";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid rgba(17,24,39,.45);
  border-bottom: 1.5px solid rgba(17,24,39,.45);
  transform: rotate(45deg);
  transition: transform .22s ease, border-color .22s ease;
}

.faqItem[open]{
  border-color: rgba(var(--accentRGB), .22);
  box-shadow: 0 26px 56px rgba(0,0,0,.09);
}

.faqItem[open] summary::after{
  transform: rotate(225deg);
  border-color: rgba(var(--accentRGB), .55);
}

.faqItem .q{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(17,24,39,.78);
  background: rgba(var(--accentRGB), .10);
  box-shadow: inset 0 0 0 1px rgba(var(--accentRGB), .18);
}

.faqBody{
  padding: 0 18px 16px 56px;
  color: rgba(17,24,39,.68);
  line-height: 1.85;
  animation: faqIn .22s ease-out both;
}

@keyframes faqIn{
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   PATCH: METHOD - remove underline gimmick
   + replace with minimal "soft band" accent
   ========================================================= */

/* 1) 下線ギミックを完全停止（どこで定義されていても勝つ） */
#method .u::after,
#method .point .u::after{
  content: none !important;
  display: none !important;
}

/* 2) 既存の“shine”も合わない場合が多いので停止（不要なら外してOK） */
#method .u::before,
#method .point .u::before{
  content: none !important;
  display: none !important;
}

/* 3) 代替ギミック：アクティブ時だけ、薄い帯ハイライト（上品・軽量） */
#method .point .u{
  padding: 0 .22em;
  border-radius: 999px;

  background-image: linear-gradient(90deg,
    transparent,
    rgba(var(--accentRGB), 0.12),
    transparent
  );
  background-repeat: no-repeat;
  background-position: 50% 72%;
  background-size: 0% 0.9em;

  transition: background-size .35s ease;
}

#method .point.is-on .u{
  background-size: 100% 0.9em;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  #method .point .u{ transition: none; }
}

/* =========================================================
   RESKIN STEP1 (palette): De-blue → Silver/Champagne Neutral
   目的：青みを抜いて、白/黒/銀/シャンパンに統一する（色のみ）
   ========================================================= */

:root{
  /* 基本色 */
  --inkRGB: 15,17,20;                 /* soft black */
  --paper: #ffffff;
  --paperWarm: #fbfaf7;               /* 温白（紙感） */

  /* アクセント（青→銀/シャンパンへ） */
  --accentRGB: 155,148,137;           /* greige-silver（主にUIのアクティブ） */
  --champRGB: 214,205,190;            /* champagne wash（背景の霞） */
  --silverRGB: 182,184,188;           /* neutral silver（必要なら） */

  /* 既存CSSがこれらを参照してても崩れないように“別名”も用意 */
  --accent2RGB: var(--champRGB);
  --goldRGB: var(--champRGB);

  /* 互換用（既存で使っているなら効く） */
  --ink: rgb(var(--inkRGB));
  --muted: rgba(var(--inkRGB), .58);
  --hair: rgba(var(--inkRGB), .08);
  --hair2: rgba(var(--inkRGB), .045);
  --accent: rgb(var(--accentRGB));
  --accent2: rgb(var(--accent2RGB));
}

/* 全体の地色を“紙っぽい温白”へ（青みを抑える） */
body{
  background: linear-gradient(180deg, var(--paper) 0%, var(--paperWarm) 100%);
  color: rgb(var(--inkRGB));
}

/* 背景ホスト（青いオーロラが残ってる場合の主犯）を低彩度に上書き */
#bgHost{
  background:
    radial-gradient(1100px 800px at 20% 12%, rgba(var(--champRGB), .20), transparent 62%),
    radial-gradient(1000px 760px at 85% 18%, rgba(var(--accentRGB), .14), transparent 64%),
    linear-gradient(180deg, var(--paper) 0%, var(--paperWarm) 100%);
}

/* #bgHost::after がある場合も “青系 → 中立色” に寄せる（動きは既存のまま） */
#bgHost::after{
  background:
    radial-gradient(1100px 800px at 18% 10%, rgba(var(--champRGB), .22), transparent 62%),
    radial-gradient(900px 700px at 90% 85%, rgba(var(--accentRGB), .16), transparent 62%);
}

/* グリッドの線を“銀の細線”に（青みが出る場合を抑える） */
.gridLayer{
  background:
    linear-gradient(transparent 96%, rgba(var(--inkRGB), .035) 96%) 0 0/100% 7.6vh,
    linear-gradient(90deg, transparent 96%, rgba(var(--inkRGB), .035) 96%) 0 0/7.6vw 100%;
  opacity: .18;
  mix-blend-mode: normal;
}

/* プログレス等の“青っぽい強調”が残る場合の上書き（クラスが存在すれば効く） */
.bar{
  background: linear-gradient(90deg,
    rgba(var(--accentRGB), 1),
    rgba(var(--champRGB), 1)
  );
}

/* =========================================================
   2030 Minimal Clean — No-Frame / No-Blur Shadow (Step 2)
   styles.css の末尾に追記
   ========================================================= */

/* 1) 青みをさらに抜く（残ってる青系アクセントを “銀” に寄せる） */
:root{
  /* ここだけ上書き：銀寄りのニュートラル */
  --accent:#9AA3AD;            /* silver */
  --accentRGB:154,163,173;
}

/* 2) “空気感”サーフェス（枠無しで面だけで分離） */
:root{
  --surfaceA: rgba(255,255,255,.72);
  --surfaceB: rgba(255,255,255,.58);
  --surfaceC: rgba(255,255,255,.84);
  --hairline: rgba(17,24,39,.10);

  /* 影は “ボカし” をやめて1pxの線だけ（=平成感の主因を潰す） */
  --shadowLine: 0 1px 0 rgba(17,24,39,.08);
}

/* -----------------------------
   NAV：ぼかし影を消して、線だけ
----------------------------- */
nav{
  box-shadow: none !important;
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(17,24,39,.08) !important;
}

/* 進捗バーも“青”を消して銀×シャンパンへ */
.bar{
  background: linear-gradient(
    90deg,
    rgba(var(--accentRGB), .95),
    rgba(181,159,121,.45)
  ) !important;
}

/* CTA：立体感は線1本だけに（ぼかし禁止） */
.ctaNav{
  border: 0 !important;
  box-shadow: var(--shadowLine) !important;
}

/* -----------------------------
   ピル系：枠とぼかし影を撤去
   (料金/メソッド/設備/体験予約、NAKAMEGUROタグ 等)
----------------------------- */
#hero .heroTag,
#hero .quickLinks a,
.pill,
.pillBtn{
  border: 0 !important;
  box-shadow: none !important;
  background: var(--surfaceA) !important;

  /* ガラスブラーも“平成感”の原因になりやすいのでOFF */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* hover：色だけ少し変える（影で誤魔化さない） */
#hero .heroTag:hover,
#hero .quickLinks a:hover,
.pill:hover,
.pillBtn:hover{
  background: var(--surfaceC) !important;
}

/* 選択（体験予約などの黒ピル）はそのまま強く */
#hero .quickLinks a.is-primary{
  background: rgba(17,24,39,.92) !important;
  color: #fff !important;
  box-shadow: var(--shadowLine) !important;
}

/* -----------------------------
   PRICING / OPERATIONS：カード枠とぼかし影を撤去
----------------------------- */
#programs .card,
#programs .op{
  border: 0 !important;
  box-shadow: none !important;
  background: var(--surfaceB) !important;
}

/* カード内の区切り線：ボーダーじゃなく“薄い線”に */
#programs .card hr,
#programs .op hr{
  border: 0 !important;
  height: 1px;
  background: rgba(17,24,39,.10);
  opacity: .7;
}

/* -----------------------------
   FLOW：箱の枠/影を撤去、背景コントラストで成立させる
----------------------------- */
#flow{
  background: rgba(246,247,248,.92) !important; /* うっすら面 */
}
#flow .s{
  border: 0 !important;
  box-shadow: none !important;
  background: var(--surfaceA) !important;
}
#flow .s.active{
  outline: none !important;      /* 枠強調はやめる */
  background: var(--surfaceC) !important;
}

/* -----------------------------
   FACILITY：枠/影を撤去
----------------------------- */
#facility{
  background: rgba(246,247,248,.92) !important;
}
#facility .slide{
  border: 0 !important;
  box-shadow: none !important;
  background: var(--surfaceB) !important;
}

/* -----------------------------
   FAQ：枠/影を撤去（details.faqItem 前提）
----------------------------- */
#faq{
  background: rgba(246,247,248,.92) !important;
}
#faq details.faqItem{
  border: 0 !important;
  box-shadow: none !important;
  background: var(--surfaceA) !important;
}
#faq details.faqItem[open]{
  background: var(--surfaceC) !important;
}

/* =========================================================
   STEP 3: AIR LAYOUT (No-cards)
   「囲む」を捨てて、余白＋ヘアラインで情報を区切る
   ========================================================= */

:root{
  --airX: clamp(22px, 3.2vw, 54px);
  --airY: clamp(56px, 8vh, 110px);
  --hair: rgba(17,24,39,.10);
  --hair2: rgba(17,24,39,.06);
}

/* セクション自体の“ベタ面”を消して、全体背景に溶かす */
#programs, #flow, #faq, #facility{
  background: transparent !important;
  padding-top: var(--airY) !important;
  padding-bottom: var(--airY) !important;
}

/* =========================================================
   HERO 下のクイックリンク（囲み→テキスト寄り）
   ※「体験予約（主ボタン）」だけは残してOK
   ========================================================= */
#hero .heroTag{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ボタン群の“囲い”をやめる */
#hero .quickLinks{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: clamp(16px, 2.2vw, 22px) !important;
}

/* 非プライマリ：文字＋ヘアラインだけ */
#hero .quickLinks a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
  position: relative;
}

/* hoverで薄い下線（囲わない） */
#hero .quickLinks a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
#hero .quickLinks a:hover::after{ transform: scaleX(1); }

/* 主ボタン（体験予約など）：黒ピルを残す（UX的に必要） */
#hero .quickLinks a[data-cursor="primary"],
#hero .quickLinks a.is-primary{
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(17,24,39,.92) !important;
  color: #fff !important;
}
#hero .quickLinks a[data-cursor="primary"]::after,
#hero .quickLinks a.is-primary::after{ display:none !important; }

/* =========================================================
   PRICING / OPERATIONS：カード（白い板）を消して
   3カラムを「余白＋ヘアライン」で区切る
   ========================================================= */

/* カードの“板”を消す */
#programs .card,
#programs .op{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 内部のHRなどが“枠っぽさ”になるので消す */
#programs .card hr,
#programs .op hr{ display:none !important; }

/* PC：列の間にだけヘアライン（囲わない） */
@media (min-width: 901px){
  #programs .cards{ gap: var(--airX) !important; }
  #programs .ops{ gap: var(--airX) !important; }

  #programs .cards > .card,
  #programs .ops > .op{
    padding: 0 var(--airX) 0 0 !important;
  }

  #programs .cards > .card:not(:last-child),
  #programs .ops > .op:not(:last-child){
    border-right: 1px solid var(--hair2) !important;
  }

  #programs .cards > .card:last-child,
  #programs .ops > .op:last-child{
    padding-right: 0 !important;
  }
}

/* SP：縦積みになるので、下だけヘアライン */
@media (max-width: 900px){
  #programs .cards > .card,
  #programs .ops > .op{
    padding: 0 0 var(--airX) 0 !important;
  }

  #programs .cards > .card:not(:last-child),
  #programs .ops > .op:not(:last-child){
    border-bottom: 1px solid var(--hair2) !important;
    margin-bottom: var(--airX) !important;
  }
}

/* =========================================================
   FLOW：箱を消して“浮かせない”
   ========================================================= */
#flow .s{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================================================
   FAQ：カードUI→「リスト（ヘアライン区切り）」へ
   ========================================================= */
#faq details.faqItem{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* 行区切り（囲わない） */
#faq details.faqItem + details.faqItem{
  border-top: 1px solid var(--hair2) !important;
}

/* 余白で見せる */
#faq details.faqItem summary{
  padding: 22px 0 !important;
}

/* 回答側：インデントだけで階層を作る（箱にしない） */
#faq details.faqItem .faqA{
  padding: 0 0 22px 34px !important;
}
/* もし .faqA じゃない構造でも効くように保険 */
#faq details.faqItem > div{
  padding: 0 0 22px 34px !important;
}

/* =========================================================
   Typographic Fog behind #impact (Program)
   - lightweight / no blend / no mask
   - only works when .typeField exists
   ========================================================= */

:root{
  /* 濃さ調整：0.10〜0.22 あたりで調整すると良い */
  --typeFogOpacity: 0.39;
}

/* #impact 内だけに限定 */
#impact{
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* 背景文字 */
#impact .typeField{
  position: absolute;
  inset: -18%;
  z-index: -1;
  pointer-events: none;

  /* Alphabet version (backup) */
  /* background-image: url("img/type-field.alpha.svg"); */

  /* Brand words version (recommended) */
  background-image: url("img/type-field.brand.svg");
  background-repeat: repeat;
  background-size: 560px 360px;

  opacity: var(--typeFogOpacity);
  will-change: transform;
  transform: translate3d(0,0,0);

  /* 背景ごとゆっくり移動（background-positionは使わない＝軽め） */
  animation: typeFogDrift 15s linear infinite;
}

/* 端を自然にフェード（maskは使わず、薄い白グラデで消す） */
#impact .typeField::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 52%,
    rgba(255,255,255,1) 78%
  );
}

/* 560x360 の高さ(360px)でループすると綺麗に戻る */
@keyframes typeFogDrift{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(0,-360px,0); }
}

/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion: reduce){
  #impact .typeField{ animation: none; }
}



/* Header page nav (HOME / PROGRAM) */
.navMenu{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right: 14px;
}

.navLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  text-decoration:none;
  font-size:12px;
  letter-spacing: var(--caps-track, .42em);
  text-transform: uppercase;
  color: rgba(17,24,39,.62);
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}

/* =========================================================
   PROGRAM HERO (v15 lens drift) FIX
   - #hero(既存HOMEヒーロー)の flex/余白 を無効化
   - section の overflow/contain が sticky を殺すので解除
   ========================================================= */

.page-program #hero{
  /* HOMEの#heroスタイルが残っていると上下センター寄せになり、
     ヒーロー前後に「謎の空間」が出ます */
  display: block;
  padding: 0;
  height: auto;

  /* sticky（position: sticky）が効く条件を満たす */
  overflow: visible;
  contain: none;
}

/* もし #hero の中に mv-lensdrift-hero を “入れ子” で置いている場合も保険 */
.page-program #hero .mv-lensdrift-hero{
  overflow: visible;
  contain: none;
}

/* もし v15 ヒーロー自体に id="hero" を付けている場合も保険 */
.page-program #hero.mv-lensdrift-hero{
  overflow: visible;
  contain: none;
  padding: 0;
}

.page-program .mv-lensdrift-hero{
  overflow: visible;
  contain: none;
}

.navLink:hover{
  background: rgba(var(--accentRGB), .10);
  color: rgba(17,24,39,.80);
}

.navLink[aria-current="page"]{
  background: rgba(var(--accentRGB), .14);
  color: rgba(17,24,39,.88);
  box-shadow: inset 0 0 0 1px rgba(var(--accentRGB), .18);
}

/* =======================================================================
   PROGRAM page: 2030 Minimal micro-tuning
   Scope: program.html only (body.page-program)
   目的：
   - 「囲み」を消して余白で構成
   - 影のブラーを消す（平成感カット）
   - 青みをさらに抜いて silver / champagne に統一
   ======================================================================= */

.page-program{
  /* ---- palette (minimal / no-blue) ---- */
  --ink: #111318;
  --inkMuted: rgba(17, 19, 24, .62);
  --line: rgba(17, 19, 24, .10);
  --lineSoft: rgba(17, 19, 24, .06);
  --silver: rgba(130, 135, 145, .85);
  --champagne: rgba(187, 170, 140, .90);

  /* 既存CSSに “青系トークン” がある場合の吸収（あっても害なし） */
  --blue: var(--silver);
  --primary: var(--silver);
  --accent: var(--silver);
  --brand: var(--silver);
  --link: var(--ink);
}

/* 背景（rings）の青みをさらに抜く：silver / champagne の空気感に寄せる */
.page-program .rings{
  background:
    radial-gradient(55% 45% at 50% 18%, rgba(130, 135, 145, .16) 0%, rgba(130, 135, 145, 0) 66%),
    radial-gradient(42% 36% at 18% 58%, rgba(187, 170, 140, .14) 0%, rgba(187, 170, 140, 0) 64%),
    radial-gradient(38% 34% at 86% 60%, rgba(160, 165, 175, .12) 0%, rgba(160, 165, 175, 0) 66%);
}

/* -----------------------------------------------------------------------
   FLOW：ステップを「箱」から「線＋余白」に（囲み感を消す）
   - flowSteps wrapper が無い場合：#flow 内で6個並んでいる親に class="flowSteps" を付けると確実
   ----------------------------------------------------------------------- */

.page-program #flow .flowSteps > *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative;
}

/* ステップ間のセパレータ（縦のhairline） */
.page-program #flow .flowSteps > *::after{
  content:"";
  position:absolute;
  top: 22%;
  bottom: 22%;
  right: 0;
  width: 1px;
  background: var(--lineSoft);
  pointer-events:none;
}
.page-program #flow .flowSteps > *:last-child::after{
  display:none;
}

/* FLOW上部のバー（青グラデ→champagne/silverへ）
   ※要素のclass名が環境で違う可能性があるので “網” を張っています */
.page-program #flow .flowBar,
.page-program #flow .flow-bar,
.page-program #flow .progressBar,
.page-program #flow .progress-bar,
.page-program #flow .flowTrack,
.page-program #flow .flow-track{
  background: linear-gradient(90deg,
    rgba(187, 170, 140, .55),
    rgba(130, 135, 145, .55)
  ) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ステップ番号の丸（青→ニュートラルに）
   これも命名差があるので候補を並べています */
.page-program #flow .stepNo,
.page-program #flow .stepNum,
.page-program #flow .stepIndex,
.page-program #flow .flowNum{
  background: rgba(17, 19, 24, .04) !important;
  border: 1px solid var(--lineSoft) !important;
  color: rgba(17, 19, 24, .65) !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------
   FAQ：開いた時に出る “白い面” を消して、ずっと線＋余白で統一
   （details.faqItem はあなたの環境で実在することが確認済み）
   ----------------------------------------------------------------------- */

.page-program #faq details.faqItem{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* summary（質問行）も透明に */
.page-program #faq details.faqItem > summary{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* open時にだけ出る「白いボックス感」を殺す */
.page-program #faq details.faqItem[open]{
  background: transparent !important;
}

/* 回答ブロック（summary直後の要素）も透明にして余白だけで見せる */
.page-program #faq details.faqItem > summary + *{
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------
   FACILITY：カード/枠/影 をまとめて抑制（クラス名が違っても効く保険）
   ----------------------------------------------------------------------- */

.page-program #facility [class*="card"],
.page-program #facility [class*="Card"],
.page-program #facility [class*="panel"],
.page-program #facility [class*="Panel"],
.page-program #facility [class*="box"],
.page-program #facility [class*="Box"],
.page-program #facility [class*="tile"],
.page-program #facility [class*="Tile"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* もし facility の“大きい画像枠”が class を持たず残る場合の最終保険：
   #facility 内の「明らかに枠っぽい大きいブロック」を airBlock クラスで指定してください */
.page-program .airBlock{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: none !important;
}

/* =========================================================
   IMPACT
   - Use native sticky instead of ScrollTrigger pin
   - Prevents the "one-frame jump" on momentum scroll
   - Keeps the max scale (16) behavior intact
   ========================================================= */

/* Outer wrapper: creates scroll length (equivalent to pin + 200%) */
.page-program #impact{
  /* position: sticky breaks if any ancestor has overflow != visible.
     section{} has overflow:hidden by default, so override here. */
  overflow: visible;

  /* contain: layout/paint can make sticky/pin jittery on some browsers */
  contain: none;

  /* 100vh (visible) + 200% scroll length = 300vh wrapper */
  height: auto;
  min-height: 300vh;
  /* iOSなどの動的UIでのズレ対策（対応ブラウザでは svh を優先） */
  min-height: calc(100svh * 3);

  /* the visible surface is handled by .impactSticky */
  background: transparent;
  display: block;
}

/* Sticky viewport surface (this is what the user sees) */
.page-program #impact .impactSticky{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;

  background: rgba(255,255,255,.92);
  color: var(--ink);
}

/* Make sure fog sits behind the headline but above the surface background */
.page-program #impact .impactSticky .typeField{ z-index: 0; }
.page-program #impact .impactSticky > h2{ position: relative; z-index: 1; }

/* Heavily scaled text: pre-hint for smoother compositor behavior */
.page-program #impact .bw{
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Scroll中は背景ドリフトを一時停止（慣性スクロールのズレを避ける） */
html.is-scrolling .page-program #impact .typeField{
  animation-play-state: paused;
}

/* =========================================================
   METHOD
   Fix: the section title (header) was getting covered by the
   moving curtain overlay (#method::after, z-index: 1).
   Keep the header above the curtain during the gimmick.
   ========================================================= */

.page-program #method header{
  position: relative;
  z-index: 3;
}



/* =========================================================
   CHAMPAGNE TONE PASS (Program + Global accents)
   - Remove any remaining blue accents
   - Bring PROGRAM closer to HOME champagne metallic vibe
   ========================================================= */

/* Global accent tuning (warm silver/greige + champagne gold) */
:root{
  --accentGold: #b59f79;
  --accentGoldRGB: 181,159,121;

  /* warm silver / greige (avoid blue cast) */
  --accentRGB: 175,165,150;
  --accent: rgb(var(--accentRGB));

  /* keep these (used by fog/background) */
  --champRGB: 214,205,190;
  --silverRGB: 182,184,188;

  /* reusable metallic gradient */
  --titleGrad: linear-gradient(90deg,
    rgba(var(--accentGoldRGB), .96) 0%,
    rgba(var(--champRGB), .92) 45%,
    rgba(var(--silverRGB), .96) 100%);
}

/* PROGRAM: warm up PRICING background (remove cool/blue tint) */
.page-program #programs{
  background:
    radial-gradient(1100px 760px at 16% 0%,
      rgba(var(--champRGB), .20),
      transparent 62%),
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      rgba(251,250,247,.94) 100%);
}

/* PRICING: bgbar also champagne (no blue) */
.page-program #programs .bgbar{
  background:
    radial-gradient(60vw 72vh at -10% 50%,
      rgba(var(--champRGB), .22),
      rgba(var(--champRGB), 0) 66%),
    linear-gradient(135deg,
      rgba(var(--accentGoldRGB), .16),
      rgba(var(--accentGoldRGB), 0) 60%);
  opacity: .70;
}

/* METHOD: linked state text should be neutral (avoid navy/blue cast) */
.page-program #method.is-linked .point{
  color: rgba(var(--inkRGB), .74);
}
.page-program #method.is-linked .desc{
  color: rgba(var(--inkRGB), .62);
}

/* OPERATIONS: title should never be blue */
.page-program .ops h3{
  color: rgba(var(--inkRGB), .70);
}

/* Gold/silver “AI” badge (JOIN CTA) */
.page-program #join .ctaAi::before{
  background: linear-gradient(135deg,
    rgba(var(--accentGoldRGB), 1),
    rgba(var(--champRGB), 1) 55%,
    rgba(var(--silverRGB), 1));
  color: rgba(var(--inkRGB), .88);
}

/* Focus ring: remove blue focus outline (use champagne) */
:where(a,button,[role="button"],input,textarea,select,summary):focus-visible{
  outline: 2px solid rgba(var(--accentGoldRGB), .55);
  outline-offset: 3px;
}

/* Section headings: subtle metallic gradient (fallback = ink gray) */
.page-program section > header > h2,
.page-program section > header > h3,
.page-program #programs > header > h2,
.page-program .ops > header > h3{
  color: rgba(var(--inkRGB), .68);
}

@supports (-webkit-background-clip:text) or (background-clip:text){
  .page-program section > header > h2,
  .page-program section > header > h3,
  .page-program #programs > header > h2,
  .page-program .ops > header > h3{
    background: var(--titleGrad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}



/* PROGRAM: purge legacy blue fills (badges / flow progress / step numbers) */
.page-program .badge{
  background: linear-gradient(135deg,
    rgba(var(--champRGB), .62),
    rgba(var(--silverRGB), .55));
  border: 1px solid rgba(var(--inkRGB), .10);
  color: rgba(var(--inkRGB), .78);
}

/* FLOW progress fill (no blue) */
.page-program #flow .flowProg .fill{
  background: linear-gradient(90deg,
    rgba(var(--accentRGB), .95),
    rgba(var(--accentGoldRGB), .55));
}

/* FLOW step number bubble (no blue) */
.page-program #flow .s .no{
  background: linear-gradient(135deg,
    rgba(var(--accentGoldRGB), .70),
    rgba(var(--champRGB), .55) 55%,
    rgba(var(--silverRGB), .70));
  color: rgba(var(--inkRGB), .86);
  border: 1px solid rgba(var(--inkRGB), .10);
}

.page-program #flow .s p{
  color: rgba(var(--inkRGB), .72);
}

.page-program #flow .s.active{
  outline: 2px solid rgba(var(--accentGoldRGB), .40);
  box-shadow: 0 10px 26px rgba(15,17,20,.10);
}


/* =========================================================
   METHOD: remove remaining cool/blue cast during the curtain gimmick
   - The original METHOD surface used rgba(246,249,255,...) which reads blue.
   - When the curtain slides in, that tint becomes obvious.
   - Override the surface + curtain to warm paper / champagne.
   ========================================================= */

.page-program #method{
  background: rgba(251,250,247,.94);
}

.page-program #method::after{
  background:
    linear-gradient(
      90deg,
      rgba(251,250,247,1)   0%,
      rgba(251,250,247,1)   42%,
      rgba(251,250,247,.92) 55%,
      rgba(251,250,247,0)   75%,
      rgba(251,250,247,0)   100%
    );
}

@media (max-width: 900px){
  .page-program #method::after{
    background:
      linear-gradient(
        90deg,
        rgba(251,250,247,1)   0%,
        rgba(251,250,247,1)   70%,
        rgba(251,250,247,.96) 85%,
        rgba(251,250,247,0)   100%
      );
  }
}

/* rail highlight: champagne/silver instead of blue */
.page-program #method .railNode.is-on{
  opacity: 1;
  transform: scale(1);
  background: linear-gradient(135deg,
    rgba(var(--accentGoldRGB), .92),
    rgba(var(--champRGB), .92) 55%,
    rgba(var(--silverRGB), .92)
  );
  box-shadow: 0 0 0 4px rgba(var(--champRGB), .28);
}

/* linked glow: champagne instead of blue */
.page-program #method.is-linked .methodRailLine{
  box-shadow: 0 0 25px rgba(var(--champRGB), .18);
}

/* emphasis underline: champagne (no blue) */
.page-program #method .desc em{
  text-decoration-color: rgba(var(--accentGoldRGB), .55);
}

/* =========================================================
   PROGRAM: Ambient background motion (lightweight)
   目的：ページ全体に「動く背景」感を追加（青ゼロ／シャンパン寄り）
   - transform のみをアニメするので比較的軽量
   - スクロール中は一時停止（html.is-scrolling）
   - reduced-motion では停止
   ========================================================= */

/* 1) うっすら“光の膜”を追加（シャンパンの反射っぽい） */
.page-program #bgHost::before{
  content:"";
  position:absolute;
  inset:-28%;
  pointer-events:none;

  /* champagne / greige / silver のみに限定 */
  background:
    radial-gradient(1100px 820px at 24% 34%, rgba(var(--champRGB), .24), transparent 64%),
    radial-gradient(1200px 900px at 76% 62%, rgba(var(--accentRGB), .18), transparent 66%),
    radial-gradient(1400px 900px at 55% 12%, rgba(var(--silverRGB), .14), transparent 68%),
    linear-gradient(115deg,
      transparent 0%,
      rgba(var(--champRGB), .10) 38%,
      rgba(var(--accentRGB), .06) 52%,
      transparent 70%
    );

  opacity:.42;
  transform:translate3d(0,0,0);
  animation:bgChampVeil 68s ease-in-out infinite alternate;
}

@keyframes bgChampVeil{
  0%   { transform:translate3d(-2.2%,  1.2%,0) scale(1.03); }
  45%  { transform:translate3d( 1.6%, -2.0%,0) scale(1.06); }
  100% { transform:translate3d( 2.4%,  1.6%,0) scale(1.04); }
}

/* 2) 既存のオーロラ（::after）の色味を保持したまま、より“ゆっくり”に */
.page-program #bgHost::after{
  /* 既存定義が mix-blend-mode:screen の場合、青み/白飛びが出ることがあるので中立へ */
  mix-blend-mode: normal;
  opacity: .34;
  animation: bgChampDrift 78s ease-in-out infinite alternate;
}

@keyframes bgChampDrift{
  0%   { transform:translate3d(-3.0%,  0.6%,0) scale(1.02); }
  55%  { transform:translate3d( 2.6%, -2.4%,0) scale(1.05); }
  100% { transform:translate3d(-2.2%,  2.2%,0) scale(1.03); }
}

/* 3) スクロール中は一時停止（ScrollTriggerが多いので体感を守る） */
html.is-scrolling .page-program #bgHost::before,
html.is-scrolling .page-program #bgHost::after{
  animation-play-state: paused;
}

/* 4) 動きが苦手な方向け */
@media (prefers-reduced-motion: reduce){
  .page-program #bgHost::before,
  .page-program #bgHost::after{
    animation: none !important;
    opacity: .18;
  }
}

/* 5) モバイルはさらに控えめに */
@media (max-width: 900px){
  .page-program #bgHost::before{ opacity: .30; }
  .page-program #bgHost::after{ opacity: .22; }
}

/* =========================================================
   AI CHAT DOCK (Kazera embed)
   - Right bottom floating button
   - Desktop: expands to smartphone-like window
   - Mobile: fullscreen
   ========================================================= */

.aiDock{
  position: fixed;
  right: 18px;
  bottom: 18px;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 99999;
}

.aiDock__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(var(--inkRGB), .08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.aiDock.is-open .aiDock__backdrop{
  opacity: 1;
  /* visual-only (allow page scroll & interaction while open) */
  pointer-events: none;
}

.aiDock__shell{
  /* Taller, more obvious vertical pill */
  --w: 76px;
  --h: 128px;
  --r: 999px;

  width: var(--w);
  height: var(--h);
  border-radius: var(--r);

  position: relative;
  overflow: hidden;
  transform: translateZ(0);

  background:
    linear-gradient(180deg,
      rgba(var(--champRGB), .28) 0%,
      rgba(255,255,255,.92) 52%,
      rgba(var(--silverRGB), .14) 100%
    );
  border: 1px solid rgba(var(--inkRGB), .12);
  box-shadow:
    0 14px 30px rgba(var(--inkRGB), .16),
    0 0 0 1px rgba(var(--champRGB), .18);

  transition:
    width .36s cubic-bezier(.2,.8,.2,1),
    height .36s cubic-bezier(.2,.8,.2,1),
    border-radius .36s cubic-bezier(.2,.8,.2,1),
    box-shadow .36s cubic-bezier(.2,.8,.2,1);
}

.aiDock__shell::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: radial-gradient(60% 60% at 50% 20%,
    rgba(var(--accentGoldRGB), .30) 0%,
    rgba(var(--champRGB), .16) 35%,
    rgba(255,255,255,0) 70%
  );
  pointer-events:none;
  opacity:.85;
}

.aiDock.is-open .aiDock__shell{
  --w: min(420px, calc(100vw - 36px));
  --h: min(760px, calc(100vh - 36px));
  --r: 22px;
  box-shadow:
    0 18px 46px rgba(var(--inkRGB), .20);
}

/* Mobile: fullscreen */
@media (max-width: 680px){
  .aiDock{
    right: 12px;
    bottom: 12px;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Slightly smaller pill on phones */
  .aiDock__shell{
    --w: 68px;
    --h: 116px;
  }
  .aiDock.is-open{
    right: 0;
    bottom: 0;
  }
  .aiDock.is-open .aiDock__shell{
    --w: 100vw;
    --h: 100vh;
    --r: 0px;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    box-shadow: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

.aiDock__fab{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}

.aiDock__fabInner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.aiDock__fabBadge{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 14px;
  background: var(--titleGrad);
  color: rgba(var(--inkRGB), .86);
  border: 1px solid rgba(var(--inkRGB), .08);
}

.aiDock__fabLabel{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(var(--inkRGB), .55);
}

.aiDock.is-open .aiDock__fab{
  opacity: 0;
  pointer-events: none;
  transform: scale(.96);
}

.aiDock__panel{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.96);
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}

.aiDock.is-open .aiDock__panel{
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.aiDock__head{
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--inkRGB), .08);
  background: linear-gradient(135deg,
    rgba(var(--champRGB), .18),
    rgba(var(--silverRGB), .10)
  );
}

.aiDock__headLeft{
  display: flex;
  align-items: center;
  gap: 10px;
}

.aiDock__headBadge{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  background: var(--titleGrad);
  color: rgba(var(--inkRGB), .86);
  border: 1px solid rgba(var(--inkRGB), .08);
}

.aiDock__headTitle{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--inkRGB), .62);
}

.aiDock__headRight{
  display: flex;
  align-items: center;
  gap: 10px;
}

.aiDock__ext{
  font-size: 11px;
  color: rgba(var(--inkRGB), .56);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--inkRGB), .10);
  background: rgba(255,255,255,.75);
}
.aiDock__ext:hover{
  background: rgba(255,255,255,.95);
}

.aiDock__close{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(var(--inkRGB), .10);
  background: rgba(255,255,255,.78);
  color: rgba(var(--inkRGB), .72);
  font-size: 18px;
  line-height: 0;
  cursor: pointer;
}
.aiDock__close:hover{
  background: rgba(255,255,255,.96);
}

.aiDock__body{
  position: relative;
  flex: 1;
}

.aiDock__frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.aiDock__loading{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(255,255,255,.92);
  color: rgba(var(--inkRGB), .60);
}

.aiDock__spinner{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(var(--inkRGB), .16);
  border-top-color: rgba(var(--accentGoldRGB), .55);
  animation: aiSpin 0.9s linear infinite;
}

@keyframes aiSpin{
  to{ transform: rotate(360deg); }
}

.aiDock.is-loaded .aiDock__loading{
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* When chat is open: hide custom cursor overlay (panel open on all devices) */
html.is-ai-panel-open #cursor{ opacity: 0; }

/* Keep page scrollable on desktop; lock only on small screens (fullscreen mode) */
@media (max-width: 680px){
  html.is-ai-open,
  body.is-ai-open{
    overflow: hidden;
  }
  body.is-ai-open{
    padding-right: var(--sbw, 0px);
  }
}

@media (prefers-reduced-motion: reduce){
  .aiDock__shell,
  .aiDock__fab,
  .aiDock__panel,
  .aiDock__backdrop{
    transition: none !important;
  }
}

/* =========================================================
   Instagram floating button (above AI CHAT)
   ========================================================= */
.igFab{
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 128px + 12px);
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(var(--inkRGB), .10);
  box-shadow: 0 24px 60px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483640;
  color: rgba(var(--inkRGB), .86);
  text-decoration: none;
  transition: transform .22s ease, opacity .22s ease;
}

.igFab svg{
  width: 28px;
  height: 28px;
}

.igFab:hover{ transform: translateY(-2px); }
.igFab:active{ transform: translateY(0) scale(.98); }

/* Hide when AI panel is open (avoid overlap) */
.aiDock.is-open + .igFab{
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

@media (max-width: 680px){
  .igFab{
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 116px + 10px);
    width: 72px;
    height: 72px;
  }
}

/* =========================================================
   LINE floating button (above Instagram button)
   ========================================================= */
.lineFab{
  position: fixed;
  right: max(18px, env(safe-area-inset-right));

  /* (AI button height 128) + gap 12 + (IG size 76) + gap 12 */
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 128px + 12px + 76px + 12px);

  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(var(--inkRGB), .10);
  box-shadow: 0 24px 60px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483640;

  /* ←ここで黒系に統一（IGと同じ） */
  color: rgba(var(--inkRGB), .86);

  text-decoration: none;
  transition: transform .22s ease, opacity .22s ease;
}

/* アイコンサイズをIGと同じに */
.lineFab svg{
  width: 28px;
  height: 28px;
  display: block;
}

.lineFab:hover{ transform: translateY(-2px); }
.lineFab:active{ transform: translateY(0) scale(.98); }

/* Hide when AI panel is open (avoid overlap) */
.aiDock.is-open + .igFab + .lineFab{
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

@media (max-width: 680px){
  .lineFab{
    right: max(12px, env(safe-area-inset-right));
    /* (AI 116) + gap 10 + (IG 72) + gap 10 */
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 116px + 10px + 72px + 10px);
    width: 72px;
    height: 72px;
  }
}




/* =========================================================
   FACILITY: interior photos (selected)
   - Keep it minimal (no heavy shadows)
   - Optimized WebP + JPG fallback
   ========================================================= */
.page-program #facility .slide{
  /* 기존 grid → media + copy の縦レイアウトに */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 2vw, 22px);
  overflow: hidden; /* media border radius を綺麗に見せる */
}

.page-program #facility .facilityMedia{
  width: 100%;
  height: clamp(200px, 28vh, 320px); /* スライド高さ(52vh)に対して安全な上限 */
  border-radius: 18px;
  overflow: hidden;
  background: rgba(var(--inkRGB), .03);
  border: 1px solid rgba(var(--inkRGB), .08);
  position: relative;
}

.page-program #facility .facilityMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* うっすらシャンパンの空気感（写真の青みを“演出として”中和） */
.page-program #facility .facilityMedia::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(var(--accentGoldRGB), .10),
    rgba(var(--silverRGB), .08));
  opacity: .18;
}

.page-program #facility .slide h3{
  margin: auto 0 0; /* 余った分は上へ押し上げて“下揃え” */
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--inkRGB), .70);
}

.page-program #facility .slide p{
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(var(--inkRGB), .60);
}

/* Mobile: pin 無効化＆縦積みなので aspect-ratio を優先 */
@media (max-width: 900px){
  .page-program #facility .facilityMedia{
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
  }
  .page-program #facility .slide p{
    margin-top: 4px;
  }
}


/* =========================================================
   POWER: background photo (MOVEMENT wall sign)
   - Use real <picture> instead of CSS tokens (no-image mode safe)
   ========================================================= */
.page-program #power{
  position: relative;
  overflow: hidden;
}

/* Disable legacy token-based pseudo bg so we don't double-render */
.page-program #power::before{
  content: none;
}

.page-program #power .powerMedia{
  position: absolute;
  right: 6vw;
  bottom: 12vh;
  width: min(70vw, 900px);
  height: min(44vw, 560px);
  border-radius: 18px;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  opacity: .30;
  filter: saturate(.78) brightness(1.16) contrast(1.02);
  transform: translateZ(0);
  background: rgba(var(--inkRGB), .02);
  border: 1px solid rgba(var(--inkRGB), .06);
}

/* Keep the POWER text inside the photo card (prevent slight overflow) */
.page-program #power .label{
  right: 6vw;
  bottom: 12vh;
  width: min(70vw, 900px);
  box-sizing: border-box;
  padding: clamp(18px, 2.2vw, 32px);
  text-align: right;
  z-index: 3; /* above .powerMedia */
}

/* Allow long strings (email/handles) to wrap safely */
.page-program #power .label a,
.page-program #power .label dd{
  overflow-wrap: anywhere;
  word-break: break-word;
}



.page-program #power .powerMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Champagne veil to neutralize cool tones */
.page-program #power .powerMedia::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(var(--accentGoldRGB), .14),
    rgba(var(--silverRGB), .10));
  opacity: .32;
}

@media (max-width: 900px){
  .page-program #power .powerMedia{
    left: 6vw;
    right: 6vw;
    width: auto;
    /* Make the photo card tall enough so the whole label sits “inside” it */
    height: clamp(360px, 54vh, 520px);
    bottom: 22vh;
    border-radius: 16px;
    opacity: .22;
  }


  .page-program #power .label{
    left: 6vw;
    right: 6vw;
    width: auto;
    bottom: 22vh;
    padding: 16px 16px;
  }

  .page-program #power .label h3{
    font-size: 26px;
    letter-spacing: .14em;
  }
}

/* Phone layout: stack the photo + text, remove the overlapping interior CTA,
   and center-align the info for a cleaner mobile read. */
@media (max-width: 600px){
  .page-program #power{
    height: auto;
    min-height: 0;
    padding: calc(var(--mvg-navH) + 32px) 6vw 10vh;
  }

  .page-program #power .powerInteriorCta{ display: none; }

  .page-program #power .powerMedia{
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 0 auto 18px;
    opacity: .24;
  }

  .page-program #power .label{
    position: relative;
    inset: auto;
    width: 100%;
    padding: 0;
    text-align: center;
  }

  .page-program #power .meta{
    justify-content: center;
  }
}

/* Mobile-only line breaks (used in BOOK A TRIAL SESSION copy) */
br.brMob{ display: none; }
@media (max-width: 600px){
  br.brMob{ display: block; }
}

/* =========================================================
   Interior page CTAs (link to interior.html)
   ========================================================= */

.page-program .methodInteriorCta{
  width: min(980px, calc(100% - 48px));
  margin: 34px auto 0;
  padding-bottom: 12px;
}

.page-program .interiorLink{
  -webkit-tap-highlight-color: transparent;
}

/* CTA button (METHOD bottom) */
.page-program .interiorLink--text{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(420px, 88vw);
  min-height: 96px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid rgba(var(--accentGoldRGB), .18);
  background: rgba(255,255,255, .74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(var(--inkRGB), .08);
  font-size: 13px;
  letter-spacing: .10em;
  text-decoration: none;
  color: rgba(var(--accentGoldRGB), .96);
  opacity: 1;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.page-program .interiorLink--text::after{
  content: none;
}

.page-program .interiorLink--text:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 64px rgba(var(--inkRGB), .10);
  border-color: rgba(var(--accentGoldRGB), .26);
  background: rgba(255,255,255, .82);
}

.page-program .interiorLink--text:active{
  transform: translateY(0px);
  box-shadow: 0 16px 42px rgba(var(--inkRGB), .08);
}

.page-program .interiorLink--text:focus-visible{
  outline: 2px solid rgba(var(--accentGoldRGB), .35);
  outline-offset: 4px;
}

/* big CTA (POWER left side) */
.page-program #power .powerInteriorCta{
  position:absolute;
  left: 6vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(440px, 40vw);
  min-height: 190px;
  padding: 26px 26px 24px;
  border-radius: 24px;
  border: 1px solid rgba(var(--inkRGB), .12);
  background: rgba(255,255,255, .52);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration:none;
  display:flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.03);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  z-index: 4;
}

.page-program #power .powerInteriorCta:hover{
  transform: translateY(-50%) translateY(-2px);
  border-color: rgba(var(--accentGoldRGB), .55);
  background: rgba(255,255,255, .62);
}

.page-program #power .powerInteriorCta .pi-kicker{
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(var(--inkRGB), .56);
}

.page-program #power .powerInteriorCta .pi-title{
  font-size: 18px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--inkRGB), .92);
}

.page-program #power .powerInteriorCta .pi-sub{
  font-size: 12px;
  line-height: 1.7;
  color: rgba(var(--inkRGB), .62);
}

.page-program #power .powerInteriorCta .pi-arrow{
  font-size: 13px;
  letter-spacing: 0;
  color: rgba(var(--accentGoldRGB), .95);
  align-self: flex-start;
}

@media (max-width: 900px){
  .page-program #power .powerInteriorCta{
    left: 6vw;
    right: 6vw;
    width: auto;
    top: 12vh;
    transform: none;
	    min-height: 160px;
    border-radius: 18px;
    padding: 18px 18px 16px;
  }

  .page-program #power .powerInteriorCta:hover{
    transform: translateY(-2px);
  }
}

/* small CTA (JOIN under buttons) */
.page-program #join .joinInteriorCta{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.page-program #join .interiorLink--small{
  display: inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--inkRGB), .14);
  background: rgba(255,255,255, .44);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(var(--inkRGB), .78);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.page-program #join .interiorLink--small:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accentGoldRGB), .5);
  background: rgba(255,255,255, .54);
}

.page-program #join .interiorLink--small span{
  letter-spacing: 0;
  color: rgba(var(--accentGoldRGB), .9);
}

/* =============================
   Interior page linking & CTAs
   (official integration tweaks)
   ============================= */

/* METHOD: keep CTA visible during pinned animation (desktop) */
@media (min-width: 900px) {
  .page-program #method {
    position: relative;
  }

  .page-program #method .methodInteriorCta {
    position: absolute;
    left: 9vw;
    bottom: 7vh;
    margin: 0;
    width: auto;
	    max-width: 480px;
    z-index: 6;
    padding-bottom: 0;
  }
}

/* JOIN: keep small CTA above overlay FX/background */
.page-program #join .joinInteriorCta {
  position: relative;
  z-index: 6;
}

/* POWER: subtle photo inside the CTA card */
.page-program #power .powerInteriorCta {
  overflow: hidden;
}

.page-program #power .powerInteriorCta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./assets/interior/img_4605_1600.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  filter: grayscale(1) contrast(1.05) saturate(0.8);
  transform: scale(1.04);
  pointer-events: none;
}

.page-program #power .powerInteriorCta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52) 55%, rgba(255, 255, 255, 0.24));
  pointer-events: none;
}

.page-program #power .powerInteriorCta > * {
  position: relative;
  z-index: 1;
}