/* ============================================================
   24 SHADOWBOX / C — brat anti-design (dark inverted edition)
   base: 16-brat の表現DNA + 暗闇ボクシング SHADOWBOX
   ぼかしArial小文字 / 単色ベタ塗り / 無造作配置 / サーチライト
   配色: #000 ベタ塗り + ホットピンク #ff0080 / シアン #00e5ff（A案準拠）
   ------------------------------------------------------------
   CSS変数の役割:
     --pink    : ホットピンク (#ff0080) - テキスト / ボーダー / アクセント
     --pink-2  : ピンク補助 (#ff2e93) - グラデ中間色
     --cyan    : シアン (#00e5ff) - サブアクセント
     --cyan-2  : シアン補助 (#33ecff)
     --grad-neon : ネオングラデ (pink → pink-2 → cyan)
     --ink     : 真っ黒 (#000000) - 背景 / マスク
     --paper   : #fff - ほぼ未使用（flashのみ）
   ============================================================ */

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

:root{
  --pink:#ff0080;
  --pink-2:#ff2e93;
  --cyan:#00e5ff;
  --cyan-2:#33ecff;
  --grad-neon:linear-gradient(90deg, #ff0080 0%, #ff2e93 40%, #00e5ff 100%);
  --ink:#000000;
  --paper:#ffffff;
  /* v4 監修: 役割別カラー階層（ピンク一色を脱却） */
  --text:#f5f5f0;     /* 本文 / 説明 / 引用 */
  --muted:#888888;    /* 注釈 / 脇役 / 補足 */
  /* --pink = 主役強調(数字/価格/見出し), --cyan = ラベル/タグ/eyebrow */
}

html,body{
  background:var(--ink);
  color:var(--pink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body{min-height:100vh;overflow-x:hidden}

/* ============================================================
   sample-banner (MYコンサル共通フォーマット)
   ============================================================ */
.sample-banner{
  position:fixed;top:0;left:0;right:0;z-index:10000;
  background:var(--pink);color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;font-weight:700;
  text-align:center;
  padding:10px 16px;
  letter-spacing:.02em;
  border-bottom:2px solid var(--ink);
}
.sample-banner a{
  color:var(--ink);
  text-decoration:underline;
  margin-left:12px;
}
.sample-banner a:hover{color:var(--paper)}

/* ============================================================
   main wrapper offset for fixed banner
   ============================================================ */
.brat{padding-top:40px;position:relative;z-index:1}

/* ============================================================
   01 HERO — 黒一面、ぼかし蛍光オレンジ小文字
   ============================================================ */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:64px 4vw 72px;
  background:var(--ink);
  position:relative;
  overflow:hidden;
}
.hero__eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:lowercase;
  font-weight:700;
  margin-bottom:24px;
  filter:blur(0.3px);
  color:var(--pink);
}
.hero__title{
  font-family:Arial,Helvetica,sans-serif;
  /* "shadowbox" 9文字 — v3 オーナー監修でさらに縮小 */
  font-size:clamp(40px,9vw,150px);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:-0.045em;
  line-height:.82;
  color:var(--pink);
  /* v4 監修: blur弱化 + ネオンサイン風ピンクグロー */
  filter:blur(0.6px) contrast(1.2);
  text-shadow:0 0 30px rgba(255,0,128,.45), 0 0 60px rgba(255,0,128,.25);
  max-width:none;
  width:100%;
  white-space:nowrap;
  overflow:visible;
  margin-bottom:28px;
  margin-left:-0.04em; /* 光学マージン調整 */
}
.hero__sub-en{
  font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.04em;
  font-weight:400;
  margin-bottom:12px;
  filter:blur(0.3px);
  color:var(--pink);
  opacity:.88;
}
.hero__sub-jp{
  font-size:clamp(18px,2.4vw,28px);
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.5;
  margin-bottom:36px;
  filter:blur(0.4px);
  color:var(--pink);
}
.hero__cta{margin-bottom:16px}
.hero__cta-btn{
  display:inline-block;
  background:var(--pink);
  color:var(--ink);
  border:3px solid var(--pink);
  padding:14px 28px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(16px,1.6vw,22px);
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:8px 8px 0 rgba(255,0,128,.35);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.hero__cta-btn:hover{
  transform:translate(-3px,-3px);
  box-shadow:11px 11px 0 rgba(255,0,128,.55);
  background:var(--ink);
  color:var(--pink);
}
.hero__cta-sub a{
  display:inline-block;
  font-size:14px;
  color:var(--pink);
  text-decoration:none;
  border-bottom:1px solid var(--pink);
  padding:2px 0;
  opacity:.85;
  filter:blur(0.3px);
  transition:transform .2s ease, opacity .2s ease;
}
.hero__cta-sub a:hover{transform:translateX(4px);opacity:1}

/* ============================================================
   02 MANIFESTO — 脱力宣言3行 / わざとリズムを崩す
   ============================================================ */
.manifesto{
  padding:96px 4vw 112px;
  background:var(--ink);
  border-top:3px solid var(--pink);
  border-bottom:3px solid var(--pink);
}
.manifesto__inner{max-width:1200px}
.manifesto__eyebrow{
  font-size:12px;letter-spacing:.22em;font-weight:700;
  text-transform:lowercase;margin-bottom:36px;
  filter:blur(0.3px);
  color:var(--pink);
}
.manifesto__line{
  font-family:"Noto Serif JP","Yu Mincho",YuMincho,serif;
  font-size:clamp(22px,3.4vw,44px);
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.5;
  filter:blur(0.4px);
  margin-bottom:14px;
  color:var(--text);
}
/* インデントをずらして無造作感だけ維持（読めるレベル） */
.manifesto__line:nth-child(2){margin-left:0}
.manifesto__line:nth-child(3){margin-left:4vw}
.manifesto__line:nth-child(4){margin-left:8vw}
.manifesto__line:nth-child(5){margin-left:2vw}
.manifesto__line:nth-child(6){margin-left:6vw}
.manifesto__line:nth-child(7){margin-left:10vw}
.manifesto__line:nth-child(8){margin-left:3vw}
.manifesto__line:nth-child(9){margin-left:7vw}
.manifesto__tail{
  margin-top:40px;
  margin-left:12vw;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(15px,1.8vw,22px);
  text-transform:lowercase;
  letter-spacing:-.01em;
  filter:blur(0.6px) contrast(1.1);
  color:var(--pink);
}

/* ============================================================
   SECTION 共通 — eyebrow + h
   ============================================================ */
.sec__eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:lowercase;
  font-weight:700;
  margin-bottom:16px;
  filter:blur(0.3px);
  padding:0 4vw;
  color:var(--pink);
}
.sec__h{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(32px,6vw,90px);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:-.035em;
  line-height:.92;
  filter:blur(0.8px) contrast(1.1);
  margin-bottom:48px;
  padding:0 4vw;
  color:var(--pink);
}

/* ============================================================
   04 NUMBERS — 画面から溢れる寸前まで巨大Arial
   ============================================================ */
.numbers{
  padding:96px 0 112px;
  background:var(--ink);
  border-bottom:3px solid var(--pink);
}
.numbers__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:0 4vw;
  margin-top:20px;
}
.num-cell{
  padding:32px 28px 30px;
  border:2px solid var(--pink);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  background:var(--ink);
  overflow:hidden;
  min-width:0;
  gap:14px;
  position:relative;
}
.num{
  font-family:Arial,Helvetica,sans-serif;
  /* 主役だが、ラベルが読めるサイズに調整 */
  font-size:clamp(44px,5.5vw,88px);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.04em;
  filter:blur(0.6px) contrast(1.1);
  color:var(--pink);
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.num__val{
  display:block;
  line-height:.86;
}
.num__unit{
  display:block;
  font-size:clamp(16px,1.5vw,22px);
  letter-spacing:.02em;
  text-transform:lowercase;
  filter:blur(0.3px);
  line-height:1;
  opacity:.88;
  font-weight:400;
}
.lbl{
  font-size:clamp(14px,1.4vw,20px);
  text-transform:lowercase;
  letter-spacing:.05em;
  margin-top:4px;
  filter:blur(0.3px);
  color:var(--pink);
  opacity:.92;
  font-weight:700;
}
.numbers__note{
  font-size:12px;
  text-transform:lowercase;
  filter:blur(0.3px);
  padding:28px 4vw 0;
  opacity:.8;
  color:var(--pink);
}

/* ============================================================
   05 VOICE — あえて読みにくい
   ============================================================ */
.voice{
  padding:96px 0 112px;
  background:var(--ink);
  border-bottom:3px solid var(--pink);
}
.voice__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
  border-top:3px solid var(--pink);
  border-bottom:3px solid var(--pink);
  margin:0 4vw;
}
.voice-card{
  padding:40px 32px 36px;
  border-right:3px solid var(--pink);
  background:var(--ink);
  display:flex;
  flex-direction:column;
}
.voice-card:last-child{border-right:none}
.voice__tag{
  display:inline-block;
  align-self:flex-start;
  font-size:11px;font-weight:700;
  text-transform:lowercase;
  letter-spacing:.1em;
  padding:5px 10px;
  border:2px solid var(--pink);
  margin-bottom:28px;
  color:var(--pink);
}
.voice__quote{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(15px,1.5vw,20px);
  line-height:1.75;
  letter-spacing:.01em;
  margin-bottom:24px;
  font-weight:400;
  color:var(--pink);
}
.voice__meta{
  font-size:13px;
  text-transform:lowercase;
  letter-spacing:.01em;
  filter:blur(0.3px);
  opacity:.92;
  color:var(--pink);
  margin-bottom:6px;
  font-weight:700;
}
.voice__data{
  font-size:12px;
  text-transform:lowercase;
  letter-spacing:.01em;
  opacity:.7;
  color:var(--pink);
  padding-top:8px;
  border-top:1px solid rgba(255,0,128,.35);
  margin-top:auto;
}

/* ============================================================
   06 METHOD — 5段階、1単語ずつ / わざとインデント不規則
   ============================================================ */
.method{
  padding:96px 0 112px;
  background:var(--ink);
  border-bottom:3px solid var(--pink);
}
.method__list{
  list-style:none;
  padding:0 4vw;
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.method__item{
  display:flex;
  align-items:flex-start;
  gap:clamp(16px,2vw,28px);
  padding:28px 26px;
  border:2px solid var(--pink);
  background:var(--ink);
}
/* 5番目(cool down)は1行に広げる */
.method__item:nth-child(5){grid-column:1 / -1}
.method__num{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(22px,2.4vw,32px);
  font-weight:700;
  letter-spacing:-.02em;
  filter:blur(0.3px);
  min-width:2.4em;
  color:var(--pink);
  line-height:1;
  padding-top:.2em;
  opacity:.8;
}
.method__body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.method__word{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(24px,4vw,56px);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:-.035em;
  line-height:.95;
  filter:blur(0.7px) contrast(1.1);
  color:var(--pink);
  margin-bottom:8px;
}
.method__time{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(13px,1.3vw,16px);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.75;
  margin-bottom:14px;
}
.method__desc{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(14px,1.4vw,17px);
  line-height:1.65;
  letter-spacing:.01em;
  color:var(--pink);
  max-width:640px;
}
/* v3: 2列グリッド化に伴い無造作インデントは廃止（カードが揃ってないと読みにくい） */

.method__note{
  font-size:13px;
  text-transform:lowercase;
  filter:blur(0.3px);
  padding:40px 4vw 0;
  color:var(--pink);
  opacity:.85;
}

/* ============================================================
   07 PROFILE — 名前 + 1行のみ
   ============================================================ */
.profile{
  padding:96px 0 112px;
  background:var(--ink);
  border-bottom:3px solid var(--pink);
}
.profile__jp{
  font-family:"Noto Serif JP","Yu Mincho",YuMincho,serif;
  font-size:clamp(18px,2.2vw,26px);
  font-weight:400;
  letter-spacing:.12em;
  padding:0 4vw;
  margin-top:-24px;
  margin-bottom:36px;
  color:var(--pink);
  opacity:.85;
}
.profile__bio{
  padding:0 4vw;
  margin-bottom:56px;
  max-width:820px;
}
.profile__bio-line{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(15px,1.55vw,18px);
  line-height:1.85;
  letter-spacing:.02em;
  color:var(--pink);
  margin-bottom:6px;
}
.profile__certs{
  padding:32px 4vw 0;
  border-top:1px solid rgba(255,0,128,.4);
  margin:0 4vw;
  max-width:620px;
}
.profile__certs-head{
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  margin-bottom:16px;
}
.profile__certs-line{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(13px,1.35vw,16px);
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--pink);
  opacity:.88;
}

/* ============================================================
   08 PLANS — 巨大な価格、装飾なし
   ============================================================ */
.plans{
  padding:96px 0 112px;
  background:var(--ink);
  border-bottom:3px solid var(--pink);
}
.plans__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border-top:3px solid var(--pink);
  border-bottom:3px solid var(--pink);
  margin:0 4vw;
}
.plan{
  padding:40px 28px 40px;
  border-right:3px solid var(--pink);
  background:var(--ink);
  overflow:hidden;
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
}
.plan:last-child{border-right:none}
.plan--popular{
  background:#0a0006;
  box-shadow:inset 0 0 0 3px var(--pink);
  padding-top:56px;
}
.plan__badge{
  position:absolute;
  top:0;
  left:0;
  right:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:.16em;
  padding:8px 10px;
  background:var(--pink);
  color:var(--ink);
  text-align:center;
}
.plan__name{
  font-size:clamp(14px,1.6vw,18px);
  font-weight:700;
  text-transform:lowercase;
  letter-spacing:.06em;
  margin-bottom:16px;
  filter:blur(0.3px);
  color:var(--pink);
}
.plan__price{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(36px,5.5vw,72px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  filter:blur(0.5px) contrast(1.1);
  color:var(--pink);
  margin-bottom:24px;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:2px;
}
.plan__per{
  font-size:clamp(14px,1.3vw,16px);
  font-weight:400;
  letter-spacing:.02em;
  text-transform:lowercase;
  opacity:.7;
  filter:blur(0.2px);
}
.plan__includes{
  list-style:none;
  padding:20px 0 0;
  margin:0 0 24px;
  border-top:1px solid rgba(255,0,128,.4);
}
.plan__includes li{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(13px,1.3vw,15px);
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--pink);
  padding:3px 0 3px 14px;
  position:relative;
}
.plan__includes li::before{
  content:"—";
  position:absolute;
  left:0;
  opacity:.6;
}
.plan__for{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1.6;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.78;
  margin-top:auto;
  padding-top:12px;
}
.plans__note{
  font-size:12px;
  text-transform:lowercase;
  filter:blur(0.3px);
  padding:28px 4vw 0;
  opacity:.8;
  color:var(--pink);
}

/* ============================================================
   09 CONTACT — 脱力CTA
   ============================================================ */
.contact{
  padding:96px 4vw 112px;
  background:var(--ink);
  border-bottom:3px solid var(--pink);
}
.contact__h{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(22px,3vw,40px);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:-.028em;
  line-height:.95;
  filter:blur(0.7px) contrast(1.1);
  margin-bottom:36px;
  color:var(--pink);
}
.contact__cta{margin-bottom:16px}
.contact__btn{
  display:inline-block;
  background:var(--pink);
  color:var(--ink);
  border:3px solid var(--pink);
  padding:16px 40px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(16px,1.8vw,22px);
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:8px 8px 0 rgba(255,0,128,.4);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.contact__btn:hover{
  transform:translate(-3px,-3px);
  box-shadow:11px 11px 0 rgba(255,0,128,.55);
  background:var(--ink);
  color:var(--pink);
}
.contact__tel{
  margin-top:8px;
  margin-bottom:48px;
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:14px;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.88;
}
.contact__tel a{
  color:var(--pink);
  text-decoration:none;
  border-bottom:1px solid rgba(255,0,128,.6);
  font-weight:700;
}
.contact__tel a:hover{border-bottom-color:var(--pink)}
.contact__divider{
  color:var(--pink);
  opacity:.4;
  font-size:14px;
  letter-spacing:.4em;
  margin:32px 0 40px;
}
.contact__info{
  margin-bottom:36px;
  max-width:720px;
}
.contact__info-label{
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  margin-bottom:14px;
}
.contact__line{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(15px,1.6vw,18px);
  letter-spacing:.02em;
  line-height:1.75;
  color:var(--pink);
  margin-bottom:2px;
}
.contact__line--sm{
  font-size:clamp(13px,1.35vw,15px);
  opacity:.8;
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  padding:64px 4vw 80px;
  background:var(--ink);
  color:var(--pink);
  text-align:left;
  border-top:3px solid var(--pink);
}
.foot p{
  font-size:13px;
  text-transform:lowercase;
  letter-spacing:-.005em;
  margin-bottom:8px;
  filter:blur(0.3px);
}
.foot__credit{
  margin-top:24px;
  font-size:11px;
  opacity:.8;
}

/* ============================================================
   EXPANSION v4 — A/B相当の情報量にC DNAで拡張
   配色・フォント・blurは既存踏襲
   ============================================================ */

/* --- section lead（各セクション共通） --- */
.sec__lead{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(14px,1.4vw,17px);
  line-height:1.8;
  letter-spacing:.02em;
  padding:0 4vw;
  max-width:860px;
  margin-bottom:40px;
  color:var(--pink);
  opacity:.9;
}

/* --- 02 MANIFESTO expansion --- */
.manifesto__lead{
  margin-top:72px;
  margin-bottom:40px;
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(15px,1.5vw,19px);
  line-height:1.85;
  letter-spacing:.02em;
  color:var(--pink);
  max-width:720px;
  border-top:1px solid rgba(255,0,128,.4);
  padding-top:32px;
}
.value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:28px;
}
.value-card{
  border:2px solid var(--pink);
  padding:30px 26px 28px;
  background:var(--ink);
  display:flex;flex-direction:column;gap:14px;
}
.value-card__num{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  filter:blur(0.3px);
}
.value-card__h{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(22px,2.4vw,32px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.025em;
  text-transform:lowercase;
  color:var(--pink);
  filter:blur(0.6px) contrast(1.1);
}
.value-card__desc{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(13px,1.3vw,15px);
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.88;
}

/* --- 03 NUMBERS / meta grid --- */
.numbers__meta-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  padding:0 4vw;
  margin-top:32px;
}
.meta-cell{
  border:2px solid var(--pink);
  padding:24px 24px 22px;
  background:var(--ink);
}
.meta-cell__label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  margin-bottom:10px;
  filter:blur(0.3px);
}
.meta-cell__body{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(13px,1.3vw,15px);
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.92;
}

/* --- 04 VOICE / PROGRAMS --- */
.voice__sub-label{
  padding:0 4vw;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.72;
  filter:blur(0.3px);
  margin-bottom:20px;
}
.voice__sub-label--second{
  margin-top:56px;
}
.program__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:3px solid var(--pink);
  border-bottom:3px solid var(--pink);
  margin:0 4vw;
}
.program-card{
  padding:36px 30px 32px;
  border-right:3px solid var(--pink);
  background:var(--ink);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.program-card:last-child{border-right:none}
.program-card__num{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  filter:blur(0.3px);
  margin-bottom:12px;
}
.program-card__name{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(26px,3.4vw,48px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.035em;
  text-transform:lowercase;
  color:var(--pink);
  filter:blur(0.7px) contrast(1.1);
  margin-bottom:6px;
}
.program-card__jp{
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.75;
  margin-bottom:14px;
}
.program-card__desc{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(13px,1.3vw,15px);
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.9;
  margin-bottom:18px;
}
.program-card__meta{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,0,128,.4);
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.85;
}

/* --- 05 METHOD / target + timeline --- */
.method__target{
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.75;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,0,128,.35);
  filter:blur(0.3px);
}
.timeline{
  padding:0 4vw;
  margin-top:40px;
}
.timeline__label{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  margin-bottom:14px;
  filter:blur(0.3px);
}
.timeline__bar{
  display:flex;
  width:100%;
  border:2px solid var(--pink);
  overflow:hidden;
  height:56px;
}
.timeline__seg{
  flex:0 0 auto;
  width:var(--w);
  border-right:2px solid var(--pink);
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--pink);
  min-width:0;
  overflow:hidden;
}
.timeline__seg:last-child{border-right:none}
.timeline__seg em{
  font-style:normal;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  opacity:.75;
}
.timeline__seg i{
  font-style:normal;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:lowercase;
  filter:blur(0.3px);
}
.timeline__seg--hot{background:rgba(255,0,128,.18)}
.timeline__scale{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--pink);
  opacity:.6;
}

/* --- 06 PROFILE / philosophy + subs + media --- */
.profile__philosophy{
  padding:28px 4vw;
  margin:0 4vw 48px;
  border-top:1px solid rgba(255,0,128,.4);
  border-bottom:1px solid rgba(255,0,128,.4);
  font-family:"Noto Serif JP","Yu Mincho",YuMincho,serif;
  font-size:clamp(16px,1.9vw,22px);
  line-height:1.85;
  letter-spacing:.04em;
  color:var(--pink);
  max-width:820px;
  filter:blur(0.4px);
}
.profile__subs{
  padding:0 4vw;
  margin-bottom:56px;
}
.profile__subs-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  margin-bottom:18px;
  filter:blur(0.3px);
}
.sub__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.sub-card{
  border:2px solid var(--pink);
  padding:26px 24px;
  background:var(--ink);
  display:flex;flex-direction:column;gap:10px;
}
.sub-card__tag{
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  filter:blur(0.3px);
  margin-bottom:6px;
}
.sub-card__name{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(18px,2vw,24px);
  font-weight:400;
  letter-spacing:-.02em;
  text-transform:lowercase;
  color:var(--pink);
  line-height:1;
  filter:blur(0.5px) contrast(1.1);
}
.sub-card__role{
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.78;
  margin-bottom:6px;
}
.sub-card__bio{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.88;
}
.profile__media{
  padding:32px 4vw 0;
  border-top:1px solid rgba(255,0,128,.4);
  margin:32px 4vw 0;
  max-width:720px;
}

/* --- 07 PLANS / options --- */
.plans__options{
  padding:0 4vw;
  margin-top:48px;
}
.plans__options-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.72;
  margin-bottom:18px;
  filter:blur(0.3px);
}
.opt__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.opt-cell{
  border:2px solid var(--pink);
  padding:24px 22px;
  background:var(--ink);
  display:flex;flex-direction:column;gap:8px;
}
.opt-cell__name{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(15px,1.5vw,18px);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:lowercase;
  color:var(--pink);
  filter:blur(0.3px);
}
.opt-cell__price{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(18px,2vw,24px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.01em;
  color:var(--pink);
  filter:blur(0.4px) contrast(1.1);
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,0,128,.35);
}
.opt-cell__desc{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:12px;
  line-height:1.65;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.85;
}

/* --- 08 CONTACT / flow + faq --- */
.flow{
  margin-top:56px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,0,128,.4);
}
.flow__label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  margin-bottom:18px;
  filter:blur(0.3px);
}
.flow__list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:0;
  margin:0;
}
.flow-step{
  border:2px solid var(--pink);
  padding:28px 24px;
  background:var(--ink);
  display:flex;flex-direction:column;gap:10px;
}
.flow-step__num{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  filter:blur(0.3px);
}
.flow-step__h{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(22px,2.6vw,32px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--pink);
  filter:blur(0.5px) contrast(1.1);
  margin-bottom:4px;
}
.flow-step__desc{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:13px;
  line-height:1.75;
  color:var(--pink);
  opacity:.88;
}
.faq{
  margin-top:40px;
  padding-bottom:12px;
}
.faq__label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:lowercase;
  color:var(--pink);
  opacity:.7;
  margin-bottom:18px;
  filter:blur(0.3px);
}
.faq__list{margin:0;padding:0}
.faq-item{
  padding:18px 0;
  border-top:1px solid rgba(255,0,128,.3);
  max-width:820px;
}
.faq-item:last-child{border-bottom:1px solid rgba(255,0,128,.3)}
.faq-item__q{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(14px,1.5vw,17px);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:lowercase;
  color:var(--pink);
  filter:blur(0.3px);
  margin-bottom:8px;
}
.faq-item__a{
  font-family:"Noto Sans JP",Arial,Helvetica,sans-serif;
  font-size:clamp(13px,1.4vw,15px);
  line-height:1.8;
  letter-spacing:.01em;
  color:var(--pink);
  opacity:.9;
  margin:0;
}

/* ============================================================
   BG IMAGES — 暗闇に埋もれた画像（サーチライトで発見するレイヤー）
   ------------------------------------------------------------
   配置ルール:
     - 各セクションは position:relative
     - .bg-img は absolute inset:0、z-index:0（最背面）
     - テキスト系の子要素は position:relative + z-index:1 で前面
     - spotlight(z:9000) が上から黒マスクを被せるので、
       円内だけ画像が見え、円外は真っ黒に沈む
     - 初期 opacity は 0.18〜0.34（暗闇に埋もれる強さ）
     - grayscale / contrast で蛍光オレンジと調和させる
   ============================================================ */
.hero,
.manifesto,
.numbers,
.voice,
.method,
.profile,
.plans,
.contact{position:relative}
.num-cell,
.voice-card,
.plan{position:relative}

.bg-img{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;
  /* 画像本来のインパクトを活かす（過剰加工をやめる） */
  filter:grayscale(.4) contrast(1.02) brightness(.95);
  mix-blend-mode:normal;
}
/* 子のテキスト類を前面に（各セクションの直下要素だけ対象にする） */
.hero > *:not(.bg-img),
.manifesto > *:not(.bg-img),
.numbers > *:not(.bg-img),
.voice > *:not(.bg-img),
.method > *:not(.bg-img),
.profile > *:not(.bg-img),
.plans > *:not(.bg-img),
.contact > *:not(.bg-img){position:relative;z-index:1}
.voice-card > *:not(.bg-img),
.num-cell > *:not(.bg-img),
.plan > *:not(.bg-img){position:relative;z-index:1}
.voice-card{overflow:hidden}

/* 各セクション個別の画像 + opacity 調整
   主役としての実写、サーチライト円内でしっかり見える強度 */
.bg-img--hero{
  /* 暗闇ジムの黒ヘビーバッグ + レンガ壁 */
  background-image:url("../images/hero.jpg");
  opacity:.6;
}
.bg-img--manifesto{
  /* モノクロ試合シーン — パンチ命中の瞬間 */
  background-image:url("../images/manifesto.jpg");
  opacity:.5;
}
.bg-img--numbers{
  background-image:url("../images/numbers.jpg");
  opacity:.5;
  /* カードグリッドとの整合で overlay にする */
  mix-blend-mode:overlay;
}
.bg-img--voice1{
  /* リングコーナーとバンデージした拳 */
  background-image:url("../images/voice1.jpg");
  opacity:.55;
  mix-blend-mode:overlay;
}
.bg-img--voice2{
  /* モノクロ懸垂後ろ姿（顔不可視） */
  background-image:url("../images/voice2.jpg");
  opacity:.55;
  mix-blend-mode:overlay;
}
.bg-img--voice3{
  /* リング上のボクサー後ろ姿 */
  background-image:url("../images/voice3.jpg");
  opacity:.55;
  mix-blend-mode:overlay;
}
.bg-img--method{
  background-image:url("../images/method.jpg");
  opacity:.5;
  mix-blend-mode:overlay;
}
.bg-img--profile{
  /* モノクロ女性ボクサーのファイティングポーズ */
  background-image:url("../images/profile.jpg");
  opacity:.6;
}
.bg-img--plans{
  /* 暗闇ジム全景（リング + ヘビーバッグ） */
  background-image:url("../images/plans.jpg");
  opacity:.5;
  mix-blend-mode:overlay;
}
.bg-img--contact{
  /* 夜の都市俯瞰 */
  background-image:url("../images/contact.jpg");
  opacity:.55;
}

/* ============================================================
   SEARCHLIGHT — 黒マスクで全体を覆い、カーソル位置に円形透過窓
   mask 方式ではなく radial-gradient オーバーレイ方式
   （mask は Safari で挙動がぶれるため、確実な GPU 合成の overlay を選択）
   円内は透明 → 下のページがそのまま見える
   円外は黒に近づく → テキストが見えなくなる
   ============================================================ */
.spotlight{
  position:fixed;
  inset:0;
  z-index:9000;
  pointer-events:none;
  /* CSS custom props を JS から更新 */
  --mx:50vw;
  --my:50vh;
  /* 円の基準半径 520px: 内側(完全透明)〜外側(ほぼ真っ黒)まで */
  background:radial-gradient(
    circle 520px at var(--mx) var(--my),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 32%,
    rgba(0,0,0,0.35) 52%,
    rgba(0,0,0,0.72) 75%,
    rgba(0,0,0,0.90) 92%,
    rgba(0,0,0,0.94) 100%
  );
  will-change:background;
}
/* サンプルバナーは常に最前面で読ませるので spotlight の上に */
.sample-banner{z-index:10000}

/* ============================================================
   Reduced motion — blurを一切切る、アニメ停止、サーチライトは即時追従
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  /* サーチライト停止時は画像を通常露出で見せる */
  .bg-img{opacity:.58 !important;filter:grayscale(.4) contrast(1.02) brightness(.9)}
  .bg-img--plans,.bg-img--numbers,.bg-img--method,.bg-img--manifesto{opacity:.5 !important}

  .hero__title,
  .hero__sub-en,
  .hero__sub-jp,
  .hero__eyebrow,
  .hero__cta-sub a,
  .sec__h,
  .sec__eyebrow,
  .manifesto__eyebrow,
  .manifesto__line,
  .manifesto__tail,
  .num,
  .lbl,
  .numbers__note,
  .voice__tag,
  .voice__quote,
  .voice__meta,
  .voice__data,
  .method__num,
  .method__word,
  .method__time,
  .method__desc,
  .method__note,
  .profile__jp,
  .profile__bio-line,
  .profile__certs-head,
  .profile__certs-line,
  .plan__name,
  .plan__price,
  .plan__per,
  .plan__for,
  .plans__note,
  .contact__h,
  .contact__line,
  .contact__tel,
  .contact__info-label,
  .foot p{
    filter:none !important;
  }
  /* spotlight は残すが lerp なしで即時追従（JS側で処理） */
}

/* ============================================================
   Mobile / Touch — v3: サーチライトをタッチ対応で有効化
   display:none を解除し、半径を縮めてタッチで探索しやすくする
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  body{cursor:auto}
  /* spotlight はタッチでも動くように残す（JS側で touchmove 対応） */
  .spotlight{
    background:radial-gradient(
      circle 420px at var(--mx) var(--my),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,0.38) 50%,
      rgba(0,0,0,0.75) 74%,
      rgba(0,0,0,0.92) 92%,
      rgba(0,0,0,0.95) 100%
    );
  }
}

@media (max-width:720px){
  .sample-banner{font-size:11px;padding:8px 12px}
  .sample-banner a{display:block;margin-left:0;margin-top:2px}
  .brat{padding-top:56px}

  .hero{min-height:86vh;padding:48px 4vw 56px}
  .hero__title{filter:blur(0.5px) contrast(1.15);font-size:clamp(40px,11vw,90px);margin-left:-0.03em;text-shadow:0 0 22px rgba(255,0,128,.5),0 0 44px rgba(255,0,128,.25)}

  .manifesto{padding:72px 5vw 80px}
  .manifesto__line{filter:blur(0.3px);font-size:clamp(18px,4.2vw,24px)}
  .manifesto__line:nth-child(n){margin-left:0;margin-top:0}
  .manifesto__tail{margin-left:0}

  .numbers{padding:72px 0 80px}
  .numbers__grid{grid-template-columns:1fr;gap:12px;padding:0 5vw}
  .num-cell{
    border:2px solid var(--pink);
    padding:28px 22px 26px;
  }
  .num{filter:blur(1.1px) contrast(1.1)}

  .voice{padding:72px 0 80px}
  .voice__grid{margin:0 5vw}
  .voice-card{border-right:none;border-bottom:3px solid var(--pink);padding:36px 24px 32px}
  .voice-card:last-child{border-bottom:none}
  .voice__quote{filter:blur(0.2px);font-size:15px}

  .method{padding:72px 0 80px}
  .method__list{padding:0 5vw;grid-template-columns:1fr;gap:12px}
  .method__item{flex-direction:row;gap:14px;padding:24px 20px;border:2px solid var(--pink)}
  .method__item:nth-child(5){grid-column:auto}
  .method__num{font-size:16px;min-width:2em;padding-top:.3em}
  .method__word{filter:blur(0.4px);font-size:clamp(24px,6.5vw,34px)}
  .method__time{font-size:11px}
  .method__desc{font-size:14px}

  .profile{padding:72px 0 80px}
  .profile__jp{padding:0 5vw;margin-top:-16px;margin-bottom:28px}
  .profile__bio{padding:0 5vw;margin-bottom:32px}
  .profile__bio-line{font-size:15px}
  .profile__certs{margin:0 5vw;padding:24px 0 0}
  .profile__certs-line{font-size:14px}

  .plans{padding:72px 0 80px}
  .plans__grid{margin:0 5vw}
  .plan{border-right:none;border-bottom:3px solid var(--pink);padding:36px 5vw 36px}
  .plan:last-child{border-bottom:none}
  .plan__price{filter:blur(0.3px);font-size:clamp(32px,8vw,44px)}

  .contact{padding:80px 5vw 88px}
  .contact__h{filter:blur(0.4px)}
  .contact__btn{padding:16px 32px;font-size:16px}
  .contact__info{margin-bottom:24px}

  .foot{padding:40px 5vw 56px}

  /* --- expansion v4 responsive --- */
  .sec__lead{padding:0 5vw;font-size:14px;margin-bottom:28px}
  .manifesto__lead{font-size:15px;margin-top:48px;padding-top:24px}
  .value-grid{grid-template-columns:1fr;gap:12px;margin-top:20px}
  .value-card{padding:24px 22px}
  .value-card__h{font-size:22px}
  .numbers__meta-grid{grid-template-columns:1fr;gap:12px;padding:0 5vw;margin-top:24px}
  .meta-cell{padding:20px 22px}
  .voice__sub-label{padding:0 5vw;margin-bottom:14px}
  .voice__sub-label--second{margin-top:40px}
  .program__grid{grid-template-columns:1fr;margin:0 5vw;border:3px solid var(--pink)}
  .program-card{border-right:none;border-bottom:3px solid var(--pink);padding:30px 24px 28px}
  .program-card:last-child{border-bottom:none}
  .program-card__name{font-size:clamp(26px,7vw,36px)}
  .method__target{font-size:10px;letter-spacing:.1em}
  .timeline{padding:0 5vw;margin-top:28px}
  .timeline__bar{height:48px;flex-wrap:nowrap}
  .timeline__seg{padding:6px 6px}
  .timeline__seg em{font-size:9px}
  .timeline__seg i{font-size:10px}
  .timeline__scale{font-size:9px}
  .profile__philosophy{padding:24px 5vw;margin:0 5vw 36px;font-size:16px}
  .profile__subs{padding:0 5vw;margin-bottom:40px}
  .sub__grid{grid-template-columns:1fr;gap:12px}
  .sub-card{padding:22px 22px}
  .profile__media{padding:24px 0 0;margin:24px 5vw 0}
  .plans__options{padding:0 5vw;margin-top:36px}
  .opt__grid{grid-template-columns:1fr;gap:12px}
  .opt-cell{padding:20px 22px}
  .flow{margin-top:40px;padding-bottom:24px}
  .flow__list{grid-template-columns:1fr;gap:12px}
  .flow-step{padding:22px 22px}
  .flow-step__h{font-size:22px}
  .faq-item{padding:16px 0}
  .faq-item__q{font-size:14px}
  .faq-item__a{font-size:13px}
}

/* 極小画面 — さらに調整 */
@media (max-width:420px){
  .hero__title{font-size:clamp(40px,13vw,72px)}
  .hero__cta-btn{padding:14px 26px;font-size:15px}
  .manifesto__line{font-size:clamp(16px,4.2vw,20px)}
  .sec__h{font-size:clamp(28px,7vw,48px)}
  .num{font-size:clamp(40px,10vw,68px)}
  .plan__price{font-size:clamp(28px,8vw,40px)}
  .method__word{font-size:clamp(22px,7vw,32px)}
}

/* ============================================================
   LIGHT SWITCH — 壁スイッチ風トグル（常時見える）
   ============================================================ */
.lightswitch{
  position:fixed;
  top:110px; /* v3: topnav(40-86px) の下に移動 */
  right:22px;
  z-index:9500; /* spotlight(9000) より上、sample-banner(10000) より下 */
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-family:Arial,Helvetica,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.lightswitch__frame{
  display:block;
  width:64px;
  height:104px;
  background:#0a0a0a;
  border:3px solid var(--pink);
  border-radius:6px;
  padding:8px 0;
  box-shadow:0 0 0 2px #000, 4px 4px 0 var(--pink), 0 0 24px rgba(255,0,128,.35), 0 0 36px rgba(0,229,255,.18);
  position:relative;
  transition:box-shadow .18s ease, transform .12s ease;
}
.lightswitch:hover .lightswitch__frame{
  transform:translate(-1px,-1px);
  box-shadow:0 0 0 2px #000, 5px 5px 0 var(--pink), 0 0 32px rgba(255,0,128,.55);
}
.lightswitch:focus-visible{outline:none}
.lightswitch:focus-visible .lightswitch__frame{
  box-shadow:0 0 0 2px #000, 4px 4px 0 var(--pink), 0 0 0 4px var(--pink), 0 0 32px rgba(255,0,128,.7);
}
.lightswitch__plate{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(#1a1a1a, #0a0a0a);
  border-radius:3px;
  position:relative;
  overflow:hidden;
}
.lightswitch__lever{
  display:block;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:32px;
  height:40px;
  background:var(--pink);
  border:2px solid #000;
  border-radius:4px;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.35), 0 0 12px rgba(255,0,128,.6);
  transition:top .22s cubic-bezier(.4,1.6,.5,1), background .22s ease, box-shadow .22s ease;
  top:8px; /* デフォルト = lights on = レバー上 */
}
.lightswitch__label{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:lowercase;
  color:var(--pink);
  line-height:1.2;
  text-shadow:0 0 6px rgba(255,0,128,.5);
  min-height:14px;
}
.lightswitch__label-on,
.lightswitch__label-off{display:none}

/* LIGHTS ON state */
html[data-lights="on"] .lightswitch__lever{top:8px}
html[data-lights="on"] .lightswitch__label-on{display:block}

/* LIGHTS OFF state */
html[data-lights="off"] .lightswitch__lever{
  top:40px;
  background:#3a0018;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.5), 0 0 4px rgba(255,0,128,.2);
}
html[data-lights="off"] .lightswitch__label-off{display:block}

/* スイッチのOFF時、フレームのネオンを弱める */
html[data-lights="off"] .lightswitch__frame{
  box-shadow:0 0 0 2px #000, 4px 4px 0 var(--pink), 0 0 12px rgba(255,0,128,.2);
}

@media (max-width:720px){
  .lightswitch{top:120px;right:14px}
  .lightswitch__frame{width:52px;height:84px}
  .lightswitch__lever{width:26px;height:32px;top:6px}
  html[data-lights="off"] .lightswitch__lever{top:34px}
  .lightswitch__label{font-size:9px}
}

/* ============================================================
   LIGHTS ON MODE — サーチライト非表示、全セクション通常に見える
   末尾上書きで specificity を確保（html[data-lights] で 0,1,1）
   ============================================================ */
html[data-lights="on"] #spotlight{display:none !important}

/* LIGHTS ON時は画像をしっかり見せる。
   テキスト可読性のためセクション単位で薄い黒オーバーレイを重ねる */
html[data-lights="on"] .bg-img{
  opacity:.55 !important;
  filter:grayscale(.4) contrast(1.02) brightness(.95) !important;
  mix-blend-mode:normal !important;
}
html[data-lights="on"] .hero,
html[data-lights="on"] .manifesto,
html[data-lights="on"] .numbers,
html[data-lights="on"] .voice,
html[data-lights="on"] .method,
html[data-lights="on"] .profile,
html[data-lights="on"] .plans,
html[data-lights="on"] .contact{
  background:#000;
}
/* 各セクションの .bg-img に半透明の黒カバーを重ねる（::after） */
html[data-lights="on"] .hero::after,
html[data-lights="on"] .manifesto::after,
html[data-lights="on"] .numbers::after,
html[data-lights="on"] .voice::after,
html[data-lights="on"] .method::after,
html[data-lights="on"] .profile::after,
html[data-lights="on"] .plans::after,
html[data-lights="on"] .contact::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55));
  z-index:0;
  pointer-events:none;
}
html[data-lights="on"] .bg-img--hero{opacity:.65 !important}
html[data-lights="on"] .bg-img--manifesto{opacity:.5 !important}
html[data-lights="on"] .bg-img--numbers,
html[data-lights="on"] .bg-img--method,
html[data-lights="on"] .bg-img--plans{opacity:.5 !important}
html[data-lights="on"] .bg-img--profile{opacity:.62 !important}
html[data-lights="on"] .bg-img--contact{opacity:.55 !important}
html[data-lights="on"] .bg-img--voice1,
html[data-lights="on"] .bg-img--voice2,
html[data-lights="on"] .bg-img--voice3{opacity:.55 !important}

/* ライトON時はテキストの blur を軽減（可読性優先、Brat感は薄く残す） */
html[data-lights="on"] .hero__title{filter:blur(0.4px) contrast(1.15);text-shadow:0 0 32px rgba(255,0,128,.55),0 0 64px rgba(255,0,128,.25)}
html[data-lights="on"] .hero__sub-en,
html[data-lights="on"] .hero__sub-jp,
html[data-lights="on"] .hero__eyebrow,
html[data-lights="on"] .hero__cta-sub a,
html[data-lights="on"] .sec__eyebrow,
html[data-lights="on"] .manifesto__eyebrow,
html[data-lights="on"] .manifesto__line,
html[data-lights="on"] .manifesto__tail,
html[data-lights="on"] .numbers__note,
html[data-lights="on"] .voice__tag,
html[data-lights="on"] .voice__quote,
html[data-lights="on"] .voice__meta,
html[data-lights="on"] .voice__data,
html[data-lights="on"] .method__num,
html[data-lights="on"] .method__time,
html[data-lights="on"] .method__desc,
html[data-lights="on"] .method__note,
html[data-lights="on"] .profile__jp,
html[data-lights="on"] .profile__bio-line,
html[data-lights="on"] .profile__certs-head,
html[data-lights="on"] .profile__certs-line,
html[data-lights="on"] .plan__name,
html[data-lights="on"] .plan__per,
html[data-lights="on"] .plan__for,
html[data-lights="on"] .plans__note,
html[data-lights="on"] .contact__line,
html[data-lights="on"] .contact__tel,
html[data-lights="on"] .contact__info-label,
html[data-lights="on"] .foot p,
html[data-lights="on"] .lbl,
html[data-lights="on"] .num__unit{filter:none}
html[data-lights="on"] .sec__h,
html[data-lights="on"] .method__word,
html[data-lights="on"] .contact__h,
html[data-lights="on"] .num,
html[data-lights="on"] .plan__price{filter:blur(0.5px) contrast(1.08)}

/* ライトON時のスクロール連動blur上書き（scrollイベントで上書きされるのを防ぐ） */
html[data-lights="on"] .hero__title,
html[data-lights="on"] .sec__h,
html[data-lights="on"] .contact__h{
  /* JS 側でも data-lights="on" チェックして blur を控えめにするため、
     ここでは :not セレクタで JS の強い style 属性に負けることを許容 */
}

/* LIGHTS OFF state — 現状維持だが、bg-imgの視認性を少しだけ上げる（暗闇でも見つけやすく） */
html[data-lights="off"] .bg-img{
  /* 既存のopacity設定をそのまま使う（.bg-img--hero = .32 等） */
}

/* ============================================================
   LIGHTS OFF + Mobile — v3: タッチでサーチライト探索できるので
   画像は元の露出を維持、body背景のみ真っ黒
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  html[data-lights="off"] body{background:#000}
}

/* PC で reduced-motion の場合、LIGHTS ON時は blur も軽く */
@media (prefers-reduced-motion:reduce){
  html[data-lights="on"] .bg-img{opacity:.55 !important}
}

/* headless screenshot用: 極端に縦長のビューポート(>=2400px)の時だけ
   hero の 100vh を 900px固定に抑え、フルページ撮影を可能にする。
   実ユーザーのビューポート高さは 2400px を超えないので副作用なし。 */
@media (min-height:2400px){
  .hero{min-height:900px}
}

/* ============================================================
   TOP NAVIGATION — v3 オーナー監修追加
   サンプルバナー(top:0, height:40px)の直下に固定
   spotlight(z:9000) より上の z:9200、sample-banner(z:10000)より下
   ============================================================ */
.topnav{
  position:fixed;
  top:40px; left:0; right:0;
  z-index:9200;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:14px 24px;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,0,128,.35);
  font-family:Arial,Helvetica,sans-serif;
  /* GPU disabled headless でも確実にレンダリングさせる */
  will-change:transform;
}
.topnav__logo{
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:lowercase;
  color:var(--pink);
  text-decoration:none;
  filter:blur(0.5px);
}
.topnav__logo:hover{opacity:.75}
.topnav__list{
  list-style:none;
  display:flex;
  gap:22px;
  align-items:center;
  padding:0; margin:0 0 0 auto; /* 右寄せ */
}
.topnav__list a{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:lowercase;
  color:var(--pink);
  text-decoration:none;
  padding:6px 4px;
  filter:blur(0.3px);
  transition:background .15s ease, color .15s ease;
  border-bottom:1px solid transparent;
}
.topnav__list a:hover{
  border-bottom-color:var(--pink);
  background:rgba(255,0,128,.1);
}
.topnav__burger{
  display:flex;
  background:transparent;
  border:2px solid var(--pink);
  padding:8px 10px;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  border-radius:2px;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
  margin-left:auto;
}
/* デスクトップではナビリストが横並び表示のためburger不要 */
/* デスクトップではナビリストが横並び表示のためburger不要 */
@media (min-width:821px){
  .topnav__burger{display:none}
}
.topnav__burger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--pink);
  transition:transform .2s ease, opacity .2s ease;
}
.topnav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.topnav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.topnav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* main wrapper offset for fixed banner+nav */
.brat{padding-top:86px}

@media (max-width:820px){
  .topnav{padding:12px 16px}
  .topnav__list{
    display:none; /* 非展開時は完全に隠す。is-openで上書き */
    position:fixed;
    top:86px; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:rgba(0,0,0,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:16px 24px 24px;
    border-bottom:1px solid rgba(255,0,128,.35);
  }
  .topnav__list.is-open{
    display:flex;
  }
  .topnav__list li{width:100%}
  .topnav__list a{
    display:block;
    padding:14px 4px;
    font-size:14px;
    border-bottom:1px solid rgba(255,0,128,.2);
  }
  .topnav__list li:last-child a{border-bottom:none}
  .brat{padding-top:84px}
}

@media (max-width:720px){
  /* モバイルsample-bannerは2行（高さ〜54px）になるのでtopnavを下げる */
  .topnav{top:56px;padding:10px 14px}
  .topnav__logo{font-size:13px}
  .topnav__list{top:98px}
  .topnav__burger{padding:6px 8px}
  .topnav__burger span{width:20px}
  .brat{padding-top:104px}
}

/* ============================================================
   NEON GRADIENT OVERRIDES — A案のネオングラデを主要強調箇所に
   構造・レイアウトには一切影響させない純粋な塗り替えのみ
   ============================================================ */

/* Hero CTA ボタン: グラデ塗り + シアンリング */
.hero__cta-btn{
  background:var(--grad-neon);
  color:var(--ink);
  border:3px solid var(--cyan);
  box-shadow:8px 8px 0 rgba(255,0,128,.35), 0 0 18px rgba(0,229,255,.35);
}
.hero__cta-btn:hover{
  background:var(--ink);
  color:var(--cyan);
  border-color:var(--cyan);
  box-shadow:11px 11px 0 rgba(255,0,128,.55), 0 0 24px rgba(0,229,255,.55);
}

/* Plans popular カード: 上枠にネオングラデの細バー風強調 */
.plan--popular{
  background:
    linear-gradient(var(--ink),var(--ink)) padding-box,
    var(--grad-neon) border-box;
  border:3px solid transparent;
}

/* Numbers 6カード: ホバー時にシアンで強調（ベース枠はピンクのまま） */
.numbers__item:hover,
.method__item:hover,
.plan:hover{
  border-color:var(--cyan);
}

/* contact CTA: グラデボタン */
.contact__cta .hero__cta-btn,
.contact__cta-btn{
  background:var(--grad-neon);
  color:var(--ink);
  border:3px solid var(--cyan);
}

/* sample-banner: A案同様ピンクベース（変数置換で既にピンク背景） */
.sample-banner{
  border-bottom:2px solid var(--cyan);
}

/* topnav アクティブなどシアン強調 */
.topnav__list a:hover{
  color:var(--cyan);
}

/* ::selection をシアンで */
::selection{background:var(--cyan);color:var(--ink);}
::-moz-selection{background:var(--cyan);color:var(--ink);}

/* ============================================================
   v4 監修 — 役割別カラー階層の上書きレイヤー
   ------------------------------------------------------------
   現状ほぼ全要素が var(--pink) 一色で視覚階層がないため、
   CSS末尾でまとめて役割別にカラーを再配置する。
   - --text  (#f5f5f0) : 本文 / 説明 / 引用
   - --pink  (#ff0080) : 主役強調（数字本体 / 価格 / 見出し）
   - --cyan  (#00e5ff) : ラベル / タグ / eyebrow / サブ強調
   - --muted (#888888) : 注釈 / 補足 / 脇役
   末尾配置で specificity 勝負を避け、他ブロック修正を最小化する
   ============================================================ */

/* --- TEXT（本文・説明系） → #f5f5f0 --- */
.voice__quote,
.method__desc,
.plan__unit,
.plan__unit li,
.plan__includes li,
.plan__for,
.profile__bio-line,
.profile__certs-line,
.profile__philosophy,
.profile__jp,
.contact__line,
.sec__lead,
.manifesto__lead,
.manifesto__tail,
.value-card__desc,
.meta-cell__body,
.program-card__desc,
.sub-card__bio,
.opt-cell__desc,
.flow-step__desc,
.faq-item__a,
.timeline__seg i{
  color:var(--text);
}

/* --- PINK（主役：数字/価格/見出し本体） → #ff0080 --- */
/* 既にvar(--pink)指定済みなので明示上書きは不要だが、
   記録としてここに置く（value-card__h, program-card__name,
   sub-card__name, flow-step__h, opt-cell__price, .hero__title,
   .sec__h, .contact__h, .num, .num__val, .plan__price,
   .method__word, .profile__name-jp 系 — 全て pink のまま） */

/* --- CYAN（ラベル/タグ/eyebrow/サブ強調） → #00e5ff --- */
.sec__eyebrow,
.hero__eyebrow,
.manifesto__eyebrow,
.num__unit,
.lbl,
.plan__name,
.method__num,
.method__target,
.topnav__list a,
.voice__tag,
.voice__sub-label,
.voice__sub-label--second,
.value-card__num,
.value-card__h,
.meta-cell__label,
.program-card__num,
.program-card__name,
.program-card__jp,
.program-card__meta,
.sub-card__tag,
.sub-card__name,
.sub-card__role,
.opt-cell__name,
.opt-cell__price,
.flow-step__num,
.flow-step__h,
.flow__label,
.faq__label,
.timeline__label,
.timeline__seg em,
.timeline__scale,
.profile__subs-label,
.profile__certs-head,
.plans__options-label,
.contact__info-label,
.hero__cta-sub a{
  color:var(--cyan);
}

/* topnav hover は既にシアンで定義済み（1948行）なので維持 */

/* num-cell 枠：ベースは既にピンク。ここでは触らない */

/* plan--popular の badge (.plan__badge = most popular) → シアン背景 */
.plan__badge{
  background:var(--cyan);
  color:var(--ink);
}

/* plan--popular の popularカード枠: CYAN 強調（A案との差別化） */
/* 既存は grad-neon border-box なのでそのまま維持 */

/* --- MUTED（注釈・脇役） → #888888 --- */
.numbers__note,
.method__note,
.plans__note,
.voice__note,
.voice__data,
.voice__meta,
.foot p,
.foot__credit,
.faq-item__q,
.plan__per,
.method__time,
.profile__certs-line,
.contact__tel,
.contact__line--sm,
.contact__divider{
  color:var(--muted);
}

/* voice__data / contact__tel のアンダーライン枠色もミュートに調整 */
.voice__data{border-top-color:rgba(255,255,255,.18)}
.contact__tel a{color:var(--muted);border-bottom-color:rgba(255,255,255,.35)}
.contact__tel a:hover{border-bottom-color:var(--cyan);color:var(--cyan)}

/* topnav logo はそのままピンク維持（ブランド名） */

/* sample-banner a: hover時シアンで */
.sample-banner a{color:var(--ink)}
.sample-banner a:hover{color:var(--cyan)}

/* --- LIGHTS ON / reduced-motion 上書きで消えた色を再度担保 --- */
html[data-lights="on"] .voice__quote,
html[data-lights="on"] .method__desc,
html[data-lights="on"] .plan__includes li,
html[data-lights="on"] .plan__for,
html[data-lights="on"] .profile__bio-line,
html[data-lights="on"] .profile__certs-line,
html[data-lights="on"] .contact__line,
html[data-lights="on"] .manifesto__line,
html[data-lights="on"] .manifesto__tail,
html[data-lights="on"] .sec__lead,
html[data-lights="on"] .faq-item__a{color:var(--text)}

html[data-lights="on"] .sec__eyebrow,
html[data-lights="on"] .hero__eyebrow,
html[data-lights="on"] .manifesto__eyebrow,
html[data-lights="on"] .num__unit,
html[data-lights="on"] .lbl,
html[data-lights="on"] .plan__name,
html[data-lights="on"] .method__num,
html[data-lights="on"] .voice__tag,
html[data-lights="on"] .contact__info-label,
html[data-lights="on"] .profile__certs-head,
html[data-lights="on"] .hero__cta-sub a{color:var(--cyan)}

html[data-lights="on"] .numbers__note,
html[data-lights="on"] .method__note,
html[data-lights="on"] .plans__note,
html[data-lights="on"] .voice__meta,
html[data-lights="on"] .voice__data,
html[data-lights="on"] .plan__per,
html[data-lights="on"] .method__time,
html[data-lights="on"] .contact__tel,
html[data-lights="on"] .foot p{color:var(--muted)}

/* num-cell / method__item / plan:hover の枠ホバーはシアンのまま（既存1928行） */

/* ============================================================
   contact map (svg) — brat minimal / tenjin sector
   Numbers 枠と統一感を出すピンク細枠、黒背景のシャープSVG
   ============================================================ */
.contact-map{
  max-width:880px;
  margin:48px auto 8px;
  padding:0 5vw;
}
.contact-map svg{
  display:block;
  width:100%;
  height:auto;
  max-height:320px;
  background:#0a0a0a;
  border:2px solid var(--pink);
  /* Brat ぼかしは弱めに（読める状態を維持） */
  filter:blur(0.25px);
}
/* reduced-motion: SVG内のanimateは自動停止できないが、
   全体のぼかしを外して可読性を優先 */
@media (prefers-reduced-motion: reduce){
  .contact-map svg{filter:none}
}
/* LIGHTS ON 時はぼかしを完全に外してクリアに */
html[data-lights="on"] .contact-map svg{filter:none}

/* mobile */
@media (max-width:768px){
  .contact-map{
    margin:40px auto 4px;
    padding:0 5vw;
  }
  .contact-map svg{
    max-height:260px;
  }
}
@media (max-width:480px){
  .contact-map svg{
    max-height:220px;
  }
}