/* 真昼 MAHIRU — サングラス(架空)
   骨白×墨×焦がし琥珀。白背景の高級感は「余白・細罫・小さい英字・柔らかい影」で作る。
   ヒーロー動画(assets/hero.mp4)と間奏動画(assets/interlude.mp4)は AI 生成(Veo 3.1)を配置済みで、
   ループ再生ではなくスクロール位置を currentTime に直結するスクラブ演出(JS 側)。
   外して未配置にしてもヒーローは 1 画面の骨白グラデ + 太陽円盤 / 間奏は光の模様に自動で戻る。 */

:root {
  --bg: #f4f0e8;
  --bg-card: #faf7f0;
  --ink: #1c1814;
  --ink-dim: #5d554b;
  --ink-faint: #8d8478;
  --amber: #b8641f;
  --amber-deep: #92490f;
  --line: rgba(28, 24, 20, .14);
  --line-strong: rgba(28, 24, 20, .3);
  --radius: 18px;
  --shadow-soft: 0 30px 80px rgba(28, 24, 20, .1), 0 6px 22px rgba(28, 24, 20, .06);
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --en: "Cormorant Garamond", "Zen Old Mincho", serif;
  --sans: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* モバイル Chrome の自動フォント拡大(font boosting)を止める。
     放置するとナビが 1 段に収まらず、本文の行送りも崩れる */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background:
    radial-gradient(1200px 800px at 88% -10%, rgba(184, 100, 31, .06), transparent 58%),
    radial-gradient(900px 700px at -6% 100%, rgba(28, 24, 20, .04), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 2.0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(184, 100, 31, .22); }

/* 小サイズの琥珀文字は濃い #92490f(--amber-deep)でコントラスト AA を確保。
   #b8641f(--amber)はロゴ・罫・装飾と大きめの文字だけに使う */
.eyebrow {
  font-family: var(--en);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber-deep); font-weight: 600;
}

/* ── ナビ ─────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(18px, 4vw, 44px);
  transition: background .35s ease, box-shadow .35s ease;
}
.nav.scrolled {
  background: rgba(244, 240, 232, .82);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  box-shadow: 0 1px 0 var(--line);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
}
.brand span {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  letter-spacing: .16em; color: var(--ink); white-space: nowrap;
}
.brand em {
  font-style: normal; font-family: var(--en); font-weight: 600;
  font-size: 13px; letter-spacing: .22em; color: var(--ink-dim);
}
.brand .reg { font-style: normal; font-size: 9px; vertical-align: super; color: var(--ink-dim); }
.links { display: flex; align-items: center; gap: 4px; }
.links a {
  font-size: 13px; letter-spacing: .1em; font-weight: 500;
  color: var(--ink-dim); text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  transition: color .2s, background .2s;
}
.links a:hover { color: var(--ink); background: rgba(28, 24, 20, .06); }
.links .pill-btn {
  color: #fdf9f2; background: var(--amber-deep); font-weight: 700;
  margin-left: 8px;
}
.links .pill-btn:hover { color: #fdf9f2; background: #7a3c0c; }
/* 狭幅でもアンカーを消さず 1 段に収める(字間・余白を圧縮) */
@media (max-width: 700px) {
  .nav { padding: 11px 10px; }
  .brand { gap: 6px; }
  .brand svg { width: 18px; height: 18px; }
  .brand em, .brand .reg { display: none; }
  .brand span { font-size: 14px; letter-spacing: .1em; }
  .links { gap: 0; }
  .links a:not(.pill-btn) { font-size: 11px; padding: 6px 5px; letter-spacing: .02em; white-space: nowrap; }
  .links .pill-btn { font-size: 11px; padding: 7px 11px; margin-left: 3px; white-space: nowrap; }
}

/* ── ヒーロー(スクロールスクラブ)──────────────
   動画があるとき(.has-video)だけセクションを 360svh に伸ばし、
   sticky ステージの通過率を JS が hero.mp4 の currentTime に直結する。
   未配置・reduced-motion・JS 失敗時は 1 画面(100svh)の静的表示に戻る */
.hero { position: relative; }
.js .hero.has-video { height: 360svh; }
.hero-stage {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 clamp(20px, 5vw, 72px) 11svh;
  overflow: hidden;
}
.js .hero.has-video .hero-stage {
  position: sticky; top: 0;
  height: 100svh; min-height: auto;
}
/* 動画の受け皿。未配置では暖色の骨白グラデ + 太陽円盤 + 地平の細罫 */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(130% 80% at 50% -14%, rgba(255, 236, 205, .95), transparent 60%),
    linear-gradient(180deg, #f8f3e9 0%, #f2ecdf 48%, #e9dfcc 100%);
}
.hero-media .sun {
  position: absolute; left: 50%; top: 30%;
  width: clamp(240px, 34vw, 460px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #f6c47c 0%, #e09a49 46%, #c97a2c 78%, #bd6b22 100%);
  box-shadow: 0 0 120px rgba(224, 154, 73, .55), 0 0 300px rgba(224, 154, 73, .3);
}
/* 太陽の下に落ちる、正午の短い影 */
.hero-media .sun::after {
  content: ""; position: absolute; left: 50%; bottom: -17%;
  width: 78%; height: 9%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(122, 84, 40, .22), transparent 70%);
}
.hero-media .horizon {
  position: absolute; left: 0; right: 0; top: 62%;
  border-top: 1px solid rgba(122, 84, 40, .2);
}
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .8s ease;
  /* 360度オービットの人物はほぼ中央(重心 38〜48%)。中央基準で置き、
     見出しとの重なりは白ウォッシュ + 白ハロー側で受ける */
  object-position: 50% center;
}
.hero-media.video-on video { opacity: 1; }
.hero-media.video-on .sun, .hero-media.video-on .horizon { display: none; }
/* 左下の白ウォッシュ。360度オービットの中盤(背面)は黒スーツが画面の左半分を
   覆い、近黒の見出しがそのままでは沈むため、旧素材より濃く・広く白を起こす。
   黒スクリムは白スタジオの世界観を壊すので使わない。
   黒と重なる面積はスクラブ中盤ほど増えるので、JS が --scrim を 0.72→1 へ上げる */
.hero-stage::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1;
  width: min(900px, 100vw); height: 72%;
  background: linear-gradient(to top right, rgba(255, 255, 255, .5), transparent 68%);
  pointer-events: none;
  opacity: var(--scrim, 1);
}
.hero-inner {
  position: relative; z-index: 2; max-width: 760px;
  /* 背面停止点では見出しの真下が黒スーツになる。ウォッシュだけでは足りないため、
     字形の周りに白ハローを回して黒の上でも輪郭を立たせる(text-shadow は子へ継承)。
     6px の層は小さな英字(eyebrow・catch-en)用 — 大きいぼかしだけでは小玉が沈む */
  text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 18px rgba(255, 255, 255, .9), 0 0 48px rgba(255, 255, 255, .65);
}
/* 白基調の文字は白ホリの白飛びに負けるため、ヒーローの文字はすべて近黒で置く */
.hero .eyebrow { color: #141210; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 8.4vw, 104px);
  line-height: 1.28; font-weight: 700; letter-spacing: .08em;
  margin: 10px 0 6px;
  color: #141210;
}
.hero h1 .sp { display: none; }
.catch-en {
  font-family: var(--en); font-style: italic;
  font-size: clamp(15px, 1.6vw, 20px); letter-spacing: .24em;
  color: rgba(20, 18, 16, .78);
}
.scroll-cue {
  /* bottom は右下固定の作例一覧バッジ(高さ約34px)と重ならない位置に置く */
  position: absolute; right: clamp(20px, 5vw, 72px); bottom: 78px;
  /* 明るいヒーローの上では --ink-dim が沈むため、近黒の --ink で置く */
  font-size: 10.5px; letter-spacing: .3em; color: var(--ink); font-weight: 500;
  animation: cueFloat 2.6s ease-in-out infinite;
  white-space: nowrap; z-index: 2;
}
@keyframes cueFloat {
  0%, 100% { transform: translateY(0); opacity: .95; }
  50% { transform: translateY(7px); opacity: .62; }
}
/* スクラブ進行 10% で JS が付与。animation を外してから opacity を落とす
   (キーフレームが opacity を持つため、外さないと 0 が効かない) */
.scroll-cue.cue-hidden { animation: none; opacity: 0; transition: opacity .4s ease; }

/* ── ステートメント ───────────────────────── */
.statement {
  min-height: 92svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  padding: 16vh clamp(18px, 5vw, 64px);
}
.statement .line {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 3.6vw, 40px); line-height: 1.9; letter-spacing: .06em;
}
.statement .line .am { color: var(--amber); }
.statement .line.small {
  font-family: var(--en); font-size: 12px; letter-spacing: .3em;
  color: var(--ink-dim); margin-top: 22px; text-transform: uppercase;
}

/* ── プロダクトレール ─────────────────────── */
.rail { height: 300svh; position: relative; }
.rail-stage {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden;
  display: flex; align-items: center;
}
.rail-track {
  display: flex; align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 0 clamp(20px, 6vw, 96px);
  will-change: transform;
}
.rail-intro { flex: 0 0 auto; width: min(460px, 78vw); }
.rail-intro h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.7;
  letter-spacing: .06em; margin: 14px 0 12px;
}
.rail-note { font-size: 13px; color: var(--ink-dim); }
.rail-arrow {
  font-size: 26px; color: var(--amber); margin-top: 18px;
  animation: arrowNudge 2.4s ease-in-out infinite;
  width: max-content;
}
@keyframes arrowNudge {
  0%, 100% { transform: translateX(0); opacity: .9; }
  50% { transform: translateX(10px); opacity: .5; }
}

.card {
  flex: 0 0 auto;
  width: min(500px, 82vw);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.stage3d {
  position: relative; height: min(46svh, 380px);
  background:
    radial-gradient(90% 70% at 50% 24%, rgba(255, 244, 224, .9), transparent 70%),
    linear-gradient(180deg, #fbf8f1 0%, #f3eee2 100%);
  border-bottom: 1px solid var(--line);
}
.stage3d .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* WebGL 不可のときだけ見せる型名の一文字 */
.stage3d .glyph {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 96px; font-weight: 700;
  color: rgba(28, 24, 20, .16);
}
.no-3d .stage3d .gl { display: none; }
.no-3d .stage3d .glyph { display: flex; }
.card-meta { padding: 20px clamp(20px, 3vw, 30px) 24px; position: relative; }
.card-meta .num {
  position: absolute; right: clamp(20px, 3vw, 30px); top: 22px;
  font-family: var(--en); font-size: 13px; letter-spacing: .2em; color: var(--ink-dim);
}
.card-meta h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: .1em;
}
.card-meta h3 .en {
  font-family: var(--en); font-size: 14px; font-weight: 600;
  letter-spacing: .3em; color: var(--amber-deep); margin-left: 10px;
}
.card-meta .desc { font-size: 12.5px; color: var(--ink-dim); margin: 8px 0 12px; }
.card-meta .price {
  font-family: var(--en); font-size: 19px; font-weight: 600; letter-spacing: .08em;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.card-meta .price small { font-family: var(--sans); font-size: 10.5px; color: var(--ink-dim); margin-left: 8px; letter-spacing: .1em; }

/* JS 無効(または 3 秒フォールバック)ではレールを縦積みの静的表示に戻す */
html:not(.js) .rail { height: auto; padding: 10vh 0; }
html:not(.js) .rail-stage { position: static; height: auto; overflow: visible; }
html:not(.js) .rail-track {
  flex-direction: column; align-items: center;
  gap: 40px; padding: 0 clamp(18px, 5vw, 64px);
}
html:not(.js) .rail-arrow { display: none; }

/* ── 動画間奏(スクロールスクラブ + 拡大)────────
   進行 0〜35% でフレームがインセット→全幅(GSAP)、0〜100% で動画の currentTime が進む(JS)。
   映像側にもスクラブ連動の寄り(--iz: 1→1.08)を重ね、回り込みながら寄る動きにする */
.interlude { height: 300svh; position: relative; }
.interlude-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
.interlude-frame {
  position: relative;
  width: 64vw; height: 66svh;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(160deg, #f0e6d2 0%, #e7d8ba 46%, #ddc9a2 100%);
  box-shadow: var(--shadow-soft);
  will-change: width, height, border-radius;
}
/* 未配置時の光模様: 窓から落ちる斜めの光条 + 琥珀の円 + 陰の帯 */
.interlude-frame .light-a {
  position: absolute; inset: -20%;
  background:
    repeating-linear-gradient(114deg,
      rgba(122, 84, 40, 0) 0 70px,
      rgba(122, 84, 40, .13) 96px 150px,
      rgba(122, 84, 40, 0) 176px 320px),
    repeating-linear-gradient(114deg,
      rgba(255, 251, 240, 0) 0 90px,
      rgba(255, 251, 240, .75) 150px 260px,
      rgba(255, 251, 240, 0) 330px 420px);
  animation: lightDrift 14s ease-in-out infinite alternate;
}
.interlude-frame .light-b {
  position: absolute; left: 56%; top: 12%;
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 46% 42%, rgba(238, 172, 92, .66) 0%, rgba(224, 154, 73, .4) 46%, rgba(224, 154, 73, 0) 70%);
  filter: blur(1px);
}
@keyframes lightDrift {
  from { transform: translateX(-3%); }
  to { transform: translateX(3%); }
}
/* コンテナの拡大(インセット→全幅)に加えて、映像自体にも微速の寄りを重ねる。
   JS がスクラブ進行に合わせて --iz を 1→1.08 へ動かし、
   「回り込みながら寄る」動きにする。
   顔のクローズアップ素材は頭頂が上端ぎりぎりに来るため、原点を上寄りに置いて
   拡大の食い込みを下(肩側)へ逃がし、頭が切れないようにする */
.interlude-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .8s ease;
  transform: scale(var(--iz, 1));
  transform-origin: 50% 14%;
  will-change: transform;
}
.interlude-stage.has-video .interlude-frame video { opacity: 1; }
.interlude-stage.has-video .light-a,
.interlude-stage.has-video .light-b { display: none; }
/* 縦書きアクセント。背景は白ホリゾントの映像なので、白グローだと文字ごと溶ける。
   近黒で置き、白は輪郭を切る薄いハローに留める */
.interlude-tate {
  position: absolute; right: clamp(18px, 6vw, 84px); top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(16px, 2vw, 22px); letter-spacing: .4em;
  color: #141210;
  text-shadow: 0 0 12px rgba(255, 255, 255, .55);
}
html:not(.js) .interlude { height: auto; padding: 10vh 0; }
html:not(.js) .interlude-stage { position: static; height: auto; padding: 0 clamp(18px, 5vw, 64px); }
html:not(.js) .interlude-frame { width: 100%; height: 56svh; }

/* ── 編集記事 ─────────────────────────────── */
/* overflow-x: clip — 統計カードの出現前オフセット(translateX)が右へはみ出すと、
   モバイル Chrome がレイアウトビューポートごと広げてナビが見切れるため、ここで刈り取る。
   clip はスクロールコンテナを作らないので .edit-sticky の sticky はそのまま効く */
.story { padding: 20vh clamp(20px, 6vw, 96px); overflow-x: clip; }
.edit-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  max-width: 1240px; margin: 0 auto;
  align-items: start;
}
.edit-sticky { position: sticky; top: 16vh; }
.edit-sticky h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 48px); font-weight: 700; line-height: 1.6;
  letter-spacing: .06em; margin: 14px 0 18px;
}
.edit-sticky .lede { font-size: 14.5px; line-height: 2.3; margin-bottom: 14px; }
/* 1 行 51 字あり適正（35〜45 字）を超えていたので 42em で止める（2026-09-02 実測） */
.edit-sticky .body-copy { font-size: 13px; line-height: 2.3; color: var(--ink-dim); max-width: 42em; }
.edit-stats { display: grid; gap: clamp(20px, 3vh, 32px); padding-top: 6vh; }
.stat {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 38px);
}
.stat-num {
  font-family: var(--en); font-size: clamp(44px, 4.6vw, 62px); font-weight: 500;
  line-height: 1.1; letter-spacing: .02em; color: var(--ink);
}
.stat-num small { font-size: .38em; letter-spacing: .14em; color: var(--amber-deep); margin-left: 6px; }
.stat-label {
  font-size: 13px; font-weight: 500; letter-spacing: .12em; margin-top: 6px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.stat-note { font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; }

/* ── スペック + CTA ───────────────────────── */
.spec {
  padding: 6vh clamp(18px, 4vw, 52px) 18vh;
  display: grid; place-items: center;
}
.spec-panel {
  max-width: 660px; width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(30px, 4.5vw, 52px) clamp(24px, 4.5vw, 50px);
  scroll-margin-top: 12vh;
}
.spec-panel h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.6;
  letter-spacing: .06em; margin: 12px 0 20px;
}
.spec table { width: 100%; border-collapse: collapse; }
.spec th, .spec td {
  text-align: left; vertical-align: top;
  padding: 11px 4px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 400; line-height: 1.9;
}
.spec th { width: 8em; color: var(--ink-dim); letter-spacing: .08em; white-space: nowrap; }
.spec td { color: var(--ink-dim); }
.cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 28px;
}
#reserveBtn {
  font-family: var(--sans);
  font-size: 13px; font-weight: 700; letter-spacing: .24em;
  background: var(--amber-deep); color: #fdf9f2;
  border: none; border-radius: 999px; padding: 15px 30px; cursor: pointer;
  transition: background .2s, transform .2s;
}
#reserveBtn:hover { background: #7a3c0c; transform: translateY(-1px); }
.cta-row .ghost {
  font-family: var(--sans);
  font-size: 12.5px; letter-spacing: .14em; color: var(--ink-dim);
  background: transparent;
  padding: 14px 20px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  transition: color .2s, border-color .2s;
}
.cta-row .ghost:hover { color: var(--ink); border-color: var(--line-strong); }
.spec .done { margin-top: 18px; color: var(--amber-deep); font-size: 13px; }

/* ── フッター ─────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding: 48px clamp(20px, 5vw, 72px) 96px;
  background: rgba(28, 24, 20, .03);
}
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  max-width: 1240px; margin: 0 auto;
}
/* 注記が 1 行 57〜59 字まで伸びていた。45 字前後に抑える（2026-09-02 実測） */
.foot-note p { font-size: 11.5px; line-height: 2.1; color: var(--ink-dim); max-width: 46em; }
.foot-note p + p { margin-top: 8px; }
.news-row {
  display: flex; gap: 8px; margin-top: 12px;
}
.news-row input {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 18px; outline: none;
  transition: border-color .2s;
}
.news-row input:focus { border-color: var(--amber); }
.news-row button {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .18em;
  color: var(--ink); background: transparent;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 11px 22px; cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.news-row button:hover { color: #fdf9f2; background: var(--ink); border-color: var(--ink); }
.news-done { font-size: 11.5px; color: var(--amber-deep); margin-top: 10px; }

/* ── 出現アニメーション(JS 有効時のみ隠す)── */
.js [data-reveal] { opacity: 0; transform: translateY(30px); }
.js [data-reveal-x] { opacity: 0; transform: translateX(56px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal-x] { opacity: 1; transform: none; }
  .scroll-cue, .rail-arrow, .interlude-frame .light-a { animation: none; }
  .hero-media video, .interlude-frame video { display: none; }
}

/* ── 狭幅調整(375px〜) ────────────────────── */
@media (max-width: 760px) {
  .hero-stage { padding-bottom: 14svh; }
  .hero h1 .sp { display: inline; }
  .hero-stage::before { height: 70%; width: 100vw; }
  /* 縦長では cover の横の余りが 1000px 以上ある。360度オービットの頭の位置は
     映像内 39〜50% を往復するため、44% なら全周で頭が画面内に収まり、
     終盤(正面)は右寄りになって左下の見出しも空く */
  .hero-media video { object-position: 44% 42%; }
  .rail-intro { width: min(400px, 84vw); }
  .card { width: 80vw; }
  .stage3d { height: min(38svh, 300px); }
  .interlude-frame { width: 80vw; height: 52svh; }
  /* 素材が顔のクローズアップになったため、旧素材(全身の引き)用の 1.32 倍拡大は外す。
     縦長 cover の横トリミングだけで顔は十分大きく、拡大すると頭と顎が切れる。
     寄りはデスクトップと同じ --iz(1→1.08)のみ */
  .interlude-tate { right: 10px; font-size: 15px; }
  .edit-grid { grid-template-columns: 1fr; }
  .edit-sticky { position: static; }
  .edit-stats { padding-top: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot { padding-bottom: 110px; }   /* 右下の作例一覧バッジとの重なり回避 */
  .spec th { width: 6.5em; }
}

/* ──────────────────────────────────────────────────────────────
   和文タイポグラフィ調整
   1. palt        … 句読点・括弧まわりの余分なアキを詰める
   2. auto-phrase … 文節単位で折り返す(「書」「く。」のような分断を防ぐ)
   3. balance     … 見出しの行長を揃え、1文字だけ落ちる行を作らない
   4. strict      … 禁則処理を厳密にし、行頭に 。 、 」 が来ないようにする
   auto-phrase / balance / pretty は非対応ブラウザでは無視されるだけで、
   崩れることはない(プログレッシブ・エンハンスメント)。
   ────────────────────────────────────────────── */
body {
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-break: strict;
  word-break: normal;
}
h1, h2, h3, h4, h5, .kicker, dt {
  word-break: auto-phrase;
  text-wrap: balance;
}
p, li, dd, td, .note, .desc, .caption,
.lede, .lead, .statement, blockquote, figcaption {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 手動改行は広い画面でのみ効かせ、狭い画面では自動折り返しに任せる */
@media (max-width: 640px) {
  h1 br:not(.sp), h2 br, h3 br,
  .lede br, .lead br, .statement br { display: none; }
}

/* ── 書体設計(見出し＝個性 / 本文＝可読性) ──────────────────────
   見出し: Zen Old Mincho(和)+ Cormorant Garamond(欧)の和欧混植
   本文: BIZ UDPGothic(Google Fonts の和文で palt が効く数少ない書体。
         読点のあとのアキが締まり、Mac / Windows で見え方が揃う)
   キャプション・UI: Zen Kaku Gothic New */
h1, h2, h3, h4, .lede, .lead, .kicker, blockquote {
  font-family: var(--serif);
}
p, li, dd, td, .note, .desc, .caption, figcaption, small {
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ── 本文書体の適用を確実にする ──
   サイト側に .card p のような具体的な指定があると本文書体が上書きされてしまうため、
   html body を前置きして優先度を上げる。英字・キャプション意図の要素は除外する。 */
html body :is(p, li, dd, td, .note, .desc, .caption, figcaption, .body, .txt, .text):not(code):not(pre):not([class*="mono"]):not([class*="code"]):not(.en):not(.eyebrow):not(.line):not(.scroll-cue):not(.catch-en):not(.price):not(.num):not(.stat-num):not(.interlude-tate):not(.rail-arrow):not(.glyph) {
  font-family: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}