:root {
  --teal:#0E4D5C;
  --teal-dark:#093843;
  --offwhite:#F4F1EA;
  --white:#FFFFFF;
  --hair:rgba(31,45,49,.18);
  --hair-soft:rgba(31,45,49,.12);
  --surface:#F5F3EE;
  --tint:rgba(14,77,92,.045);
  --ink:#151c1f;
  --text:#1f2c30;
  --text-sub:#4c5a5e;
  --accent-coral:#E97451;
  --font-min:"Yu Mincho", "YuMincho", "游明朝", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  --font-goth:"Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "Yu Gothic", "BIZ UDPGothic", "Noto Sans JP", "Meiryo", sans-serif;
  --font-en:"Hoefler Text", "Baskerville", "Iowan Old Style", Constantia, Cambria, Georgia, serif;
}
* { box-sizing:border-box; }
/* html / body に overflow-x を設定しないこと。
   hidden はスクロールコンテナを作って右カラム Index の position:sticky を殺し、
   clip は overflow-y まで clip 化してページごとスクロール不能にする。
   はみ出す要素は個別に処理する */
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--font-goth);
  font-size:17px;          /* 本文768px幅で1行45文字。行長が伸びた分、字も大きくする */
  line-height:1.95;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Header ---------- */
.site-header {
  position:fixed; top:0; left:0; right:0; height:64px;
  background:var(--teal-dark); color:var(--offwhite);
  padding:0 48px; display:flex; align-items:center; justify-content:space-between;
  z-index:1001;
  border-bottom:1px solid rgba(244,241,234,.14);
}
.site-header a { color:var(--offwhite); text-decoration:none; }
.logo {
  font-family:var(--font-en);
  font-size:21px; font-weight:500; letter-spacing:.13em;
  transition:color .25s ease;
}
.logo:hover { color:#fff; }
.nav {
  display:flex; align-items:center; gap:24px;
  font-family:var(--font-goth);
  font-size:13px; letter-spacing:.08em;
}
.nav a { position:relative; opacity:.88; padding-bottom:2px; transition:opacity .25s ease, color .25s ease; }
.nav a::after {
  content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px;
  background:var(--accent-coral); transform:scaleX(0); transform-origin:left center;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after { transform:scaleX(1); }
.nav a:hover { opacity:1; color:var(--accent-coral); }
.menu-toggle {
  display:none; background:none; border:none; cursor:pointer;
  padding:12px; width:44px; height:44px;
  flex-direction:column; justify-content:space-between; align-items:center; z-index:1001; overflow:visible;
}
.menu-toggle span { display:block; width:20px; height:2px; background:var(--offwhite); transform-origin:center; transition:transform .3s ease, opacity .3s ease; }
.menu-toggle.is-open span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity:0; }
.menu-toggle.is-open span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }
.mobile-menu {
  position:fixed; inset:0; background:var(--teal-dark); z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; padding:80px 24px;
}
.mobile-menu.is-open { opacity:1; visibility:visible; }
.mobile-menu a {
  color:var(--offwhite); text-decoration:none;
  font-family:var(--font-min);
  font-size:22px; letter-spacing:.2em; padding:12px 16px; transition:color .25s ease;
}
.mobile-menu a:hover { color:var(--accent-coral); }
@media (max-width:920px) {
  .nav { display:none; }
  .menu-toggle { display:flex; }
  .site-header { padding:0 22px; }
}

main.case { padding-top:64px; background:var(--white); }

/* 見出し・短文は文節単位で改行（「見えないズ／レ」のような分断を防ぐ）。
   未対応ブラウザでは通常の禁則処理にフォールバックする */
.case-hero-title, .case-hero-sub, .case-open-quote,
.case-chapter-title, .case-pull, .case-cta-lead, .case-index-label {
  word-break:auto-phrase;
}

/* ---------- HERO ---------- */
/* ヒーローは中央寄せ。全幅にすると左右の余白が非対称になり、
   テキスト列に固定幅を持たせると写真との間に中途半端な空きが生まれるため */
.case-hero {
  position:relative;
  background:var(--white);
  padding:88px clamp(24px, 4vw, 56px) 0;
  overflow:hidden;
}
.case-hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:var(--tint); z-index:0;
}
/* テキスト列は「文字が必要とする幅」だけ取り（max-content）、
   余った幅はすべて写真に回す。これでテキストと写真の間に余白が残らない */
.case-hero-grid {
  position:relative; z-index:1;
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr);
  gap:clamp(32px, 4vw, 72px); align-items:center;
  padding-bottom:clamp(40px, 4vw, 60px);
}
.case-hero-profile { max-width:460px; }
.case-hero-text { padding-bottom:10px; }
/* キャッチコピー：明朝の太字・黒 */
.case-hero-title {
  font-family:var(--font-min);
  font-size:clamp(26px, 3.1vw, 42px);
  font-weight:700; line-height:1.6; letter-spacing:.03em;
  margin:0 0 26px; color:var(--ink);
}
/* リード見出し：キャッチに次ぐ大きさで立たせる（同じく明朝の太字） */
.case-hero-sub {
  font-family:var(--font-min);
  font-size:clamp(17px, 1.8vw, 21px);
  font-weight:700; line-height:1.95; letter-spacing:.04em;
  color:var(--ink); margin:0;
}

/* ヒーロー右：写真＋プロフィール */
.case-hero-side { display:flex; flex-direction:column; }
.case-hero-photo {
  width:100%; margin:0;
}
/* 幅は列いっぱい（画面右端まで）。比率で伸縮させつつ、
   大画面では高さが伸びすぎないよう max-height で頭打ちにする（超過分は cover でトリミング） */
.case-hero-photo img {
  display:block; width:100%; aspect-ratio:4/3;
  max-height:min(54vh, 540px);
  object-fit:cover; background:var(--surface);
}
.case-hero-photo.is-empty img { display:none; }
.case-hero-photo.is-empty::before {
  content:attr(data-ph);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; max-height:min(54vh, 540px); background:var(--surface);
  font-size:11.5px; letter-spacing:.18em; color:rgba(38,52,58,.36);
}
.case-hero-profile { margin-top:20px; }
.case-hero-company-name {
  font-family:var(--font-goth);
  font-size:14.5px; font-weight:700; letter-spacing:.04em; color:var(--ink);
  margin:0 0 3px;
}
.case-hero-person {
  font-size:12.5px; letter-spacing:.04em; color:var(--text-sub);
  margin:0 0 10px;
}
.case-hero-bio {
  font-size:12px; line-height:1.9; letter-spacing:.02em; color:var(--text-sub);
  margin:0; padding-top:10px; border-top:1px solid var(--hair-soft);
}

/* ---------- COLD OPEN ---------- */
.case-open { background:var(--white); padding:96px 48px 88px; }
.case-open-inner { max-width:932px; margin:0 auto; }
.case-open-quote {
  max-width:none; margin:0; padding:0;
  font-family:var(--font-min);
  font-size:clamp(20px, 2.6vw, 29px);
  font-weight:600; line-height:2.15; letter-spacing:.06em; color:var(--teal-dark);
}

/* ---------- BODY : 左揃え本文 + 右サイド（Indexのみ） ---------- */
.case-body { padding:8px 48px 0; }
/* 本文680px + gap72px + 右カラム180px = 932px。
   本文は17pxで1行40文字。日本語の長文で最も目が追いやすい行長。
   コンテナ幅を合計に一致させ、右に余りを作らない（左右対称に中央寄せ） */
.case-body-grid {
  max-width:932px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,680px) 180px;
  gap:72px; align-items:start;
}
.case-main { min-width:0; }
.case-side { align-self:stretch; min-width:0; }

/* LEAD */
/* リードは本文と同じ級数・行間（bodyの17px / 1.95 を継承） */
.case-lead p { margin:0 0 26px; color:var(--text); }

/* ---------- PROFILE / OVERVIEW（本文内） ---------- */
/* Overview は本文と役割が違うので、例外的に枠で囲んだ情報テーブルにする
   （ページ内の他のブロックは枠を使わない） */
.case-fact {
  margin:44px 0 8px; padding:30px 34px 28px;
  border:1px solid var(--hair);
  background:rgba(14,77,92,.025);
}
.case-fact-title {
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-coral); margin:0 0 18px;
}
.case-fact-role { font-size:13px; letter-spacing:.06em; color:var(--text-sub); margin:0 0 4px; }
.case-fact-name {
  font-family:var(--font-min);
  font-size:24px; font-weight:600; color:var(--teal-dark); margin:0 0 16px; letter-spacing:.06em;
}
.case-fact-bio { font-size:15px; line-height:1.95; color:var(--text); margin:0; }
/* 項目名と内容を2カラムの表に。行間は罫線で区切る */
.case-fact-list { margin:0; }
.case-fact-list > div {
  display:grid; grid-template-columns:132px 1fr; gap:24px;
  padding:13px 0; border-bottom:1px solid var(--hair-soft);
}
.case-fact-list > div:first-child { padding-top:0; }
.case-fact-list > div:last-child { padding-bottom:0; border-bottom:none; }
.case-fact-list dt {
  font-size:12.5px; letter-spacing:.12em; color:var(--teal);
  margin:0; line-height:1.9; font-weight:600;
}
.case-fact-list dd { margin:0; font-size:15px; line-height:1.9; color:var(--text); }

/* VIDEO */
.case-video-block { margin:52px 0 8px; }
.case-video-eyebrow {
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-coral); margin:0 0 14px;
}
.case-video {
  position:relative; aspect-ratio:16/9; width:100%;
  background:var(--surface); overflow:hidden;
}
.case-video-frame { width:100%; height:100%; display:block; border:0; }
/* サムネイルはローカルに置く（YouTubeから読むと表示時点で外部通信が発生するため） */
.case-video-thumb {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.case-video-play {
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(9,56,67,.28); border:none; cursor:pointer; font-family:var(--font-goth);
  transition:background .25s ease;
}
.case-video-play:hover { background:rgba(9,56,67,.42); }
.case-video-play-icon { width:64px; height:64px; color:#fff; }
.case-video-play-icon svg { width:100%; height:100%; display:block; }
.case-video-play-label { font-size:13.5px; letter-spacing:.08em; color:#fff; }
.case-video-note { margin:12px 0 0; font-size:12.5px; letter-spacing:.04em; color:rgba(38,52,58,.6); }

/* ---------- ARTICLE ---------- */
.case-chapter { padding:68px 0 0; scroll-margin-top:88px; }
/* 章見出しは3階層を色で分ける：番号=コーラル／章ラベル=ティール／タイトル=黒 */
/* .case-chapter p より詳細度を上げないと色が上書きされる */
.case-chapter .case-chapter-label {
  display:flex; align-items:baseline; gap:14px;
  font-size:13.5px; font-weight:600; letter-spacing:.16em;
  color:var(--teal); margin:0 0 14px;
}
.case-chapter-num {
  font-family:var(--font-en); font-size:15px; font-weight:400;
  letter-spacing:.1em; color:var(--accent-coral);
}
.case-chapter-title {
  font-family:var(--font-min);
  font-size:clamp(21px, 2.4vw, 29px);
  font-weight:700; line-height:1.75; letter-spacing:.05em; color:var(--teal);
  margin:0 0 32px;
}
.case-chapter p { margin:0 0 26px; color:var(--text); }
/* 地の文（発言でない段落）は頭に「―」を付けて、話者の言葉と区別する。
   原稿テキストは汚さず表示だけで付ける */
.case-chapter > p:not([class])::before {
  content:"―";
  margin-right:.45em;
  color:var(--text-sub);
}
/* 地の文が続く場合は「―」を繰り返さず、1行空けずに改行だけで繋ぐ。
   間に発言や写真が挟まれば隣接しなくなるので、その段落には再び「―」が付く */
.case-chapter > p:not([class]) + p:not([class])::before { content:none; }
.case-chapter > p:not([class]) + p:not([class]) { margin-top:-26px; }

/* 発言：原稿どおりの「西岡さん：〜」表記。装飾なし */
.case-speech { margin:0 0 26px; }
/* 話者ごとに色を分ける：西岡さん＝コーラル／小野村學＝ティールグリーン */
.case-speech .speaker {
  font-weight:600; color:var(--accent-coral); letter-spacing:.05em;
}
.case-speech--coach .speaker { color:var(--teal); }
/* 同じ話者の発言が続く段落は、1行空けずに改行だけで繋ぐ。
   .case-chapter p（詳細度0,1,1）に負けないようセレクタを重ねる */
.case-chapter .case-speech--cont { margin-top:-26px; }

/* 地の文のなかで引用を立たせる強調。サイズは本文のまま、太字と色だけで差をつける */
.case-emph {
  font-weight:700;
  color:var(--teal);
}

/* Figure：全て同じ幅・同じ比率で統一 */
.case-figure { margin:44px 0; width:100%; }
.case-figure img {
  display:block; width:100%; aspect-ratio:3/2;
  object-fit:cover; background:var(--surface);
}
.case-figure figcaption {
  margin-top:10px;
  font-size:11.5px; letter-spacing:.16em; color:rgba(38,52,58,.42);
}

/* 画像ファイル未配置のあいだは、壊れアイコンではなく面で見せる */
.case-figure.is-empty img { display:none; }
.case-figure.is-empty::before {
  content:attr(data-ph);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/2; background:var(--surface);
  font-size:11.5px; letter-spacing:.18em; color:rgba(38,52,58,.36);
}

/* ---------- SIDE : Index のみ追従 ---------- */
.case-side-index { position:sticky; top:88px; }
.case-side-title {
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-coral); margin:0 0 14px;
}
.case-index { display:block; border-top:1px solid var(--hair-soft); }
.case-index-item {
  display:flex; align-items:center; gap:10px;
  padding:13px 2px; border-bottom:1px solid var(--hair-soft);
  text-decoration:none; transition:color .2s ease;
}
.case-index-num { font-family:var(--font-en); font-size:12px; letter-spacing:.08em; color:var(--accent-coral); flex:none; }
.case-index-label { font-size:13px; line-height:1.6; letter-spacing:.02em; color:var(--teal-dark); flex:1; }
.case-index-item:hover .case-index-label { color:var(--accent-coral); }

/* ---------- CTA ---------- */
.case-cta {
  background:var(--white); color:var(--text);
  margin-top:96px; padding:84px 48px 92px; text-align:center;
  border-top:1px solid var(--hair-soft);
}
.case-cta .center { max-width:640px; margin:0 auto; }
.case-cta-en {
  font-family:var(--font-en);
  font-size:14px; letter-spacing:.24em; font-style:italic; color:var(--accent-coral); margin:0 0 18px;
}
.case-cta-lead {
  font-family:var(--font-min);
  font-size:clamp(21px, 2.7vw, 28px); font-weight:600; line-height:1.8; letter-spacing:.06em;
  color:var(--teal-dark); margin:0 0 38px;
}
/* ボタンに矢印を付けない。ホバーで動かさない（色の変化のみ） */
.case-cta-btn {
  display:inline-block; padding:17px 42px;
  background:var(--accent-coral); color:#fff; text-decoration:none;
  font-family:var(--font-goth);
  font-size:15px; font-weight:600; letter-spacing:.08em;
  transition:background .25s ease;
}
.case-cta-btn:hover { background:#d4623f; }

/* ---------- back / footer ---------- */
.back-link { text-align:center; padding:0 32px 88px; background:var(--white); }
.back-link a {
  display:inline-block; padding:6px 0;
  color:var(--text-sub); text-decoration:none;
  font-size:14px; letter-spacing:.06em;
  border-bottom:1px solid var(--hair-soft);
  transition:color .25s ease, border-color .25s ease;
}
.back-link a:hover { color:var(--accent-coral); border-bottom-color:var(--accent-coral); }
footer {
  background:var(--teal-dark); color:rgba(244,241,234,.78);
  padding:32px 48px; text-align:center;
  font-family:var(--font-goth); font-size:12px; letter-spacing:.1em;
}
footer a { color:var(--offwhite); text-decoration:none; margin-left:24px; opacity:.9; }

/* ---------- Responsive ---------- */
/* 2カラムのままだとキャッチコピーが折れて窮屈になる幅から、ヒーローも1カラムへ。
   写真を上、テキストを下に積む */
@media (max-width:1120px) {
  .case-hero { padding:72px clamp(24px, 4vw, 48px) 0; }
  .case-hero::after { height:26%; }
  .case-hero-grid {
    grid-template-columns:1fr; gap:32px; align-items:start;
    padding-bottom:48px;
  }
  .case-hero-side { order:-1; }
  .case-hero-photo img,
  .case-hero-photo.is-empty::before { aspect-ratio:16/9; max-height:46vh; }
  .case-hero-profile { max-width:none; }
}
/* 2カラム（932px + 左右padding96px = 1028px）を保てない幅では、
   右カラムを細くせず1カラムへ落とす */
@media (max-width:1027px) {
  .case-body-grid { grid-template-columns:1fr; gap:0; }
  .case-main { max-width:680px; }   /* 1カラムでも行長が伸びすぎないように */
  .case-side { order:-1; margin-bottom:40px; align-self:auto; max-width:680px; }
  .case-side-index { position:static; }
  .case-index-label { font-size:13.5px; }
}
@media (max-width:900px) {
  body { font-size:15.5px; }
  .case-hero { padding:56px 24px 0; }
  .case-hero-grid { gap:28px; padding-bottom:40px; }
  .case-hero-photo img,
  .case-hero-photo.is-empty::before { aspect-ratio:16/10; max-height:42vh; }
  .case-hero-profile { margin-top:14px; }
  .case-open { padding:48px 24px 0; }
  .case-open-quote { max-width:none; }
  .case-body { padding:40px 24px 0; }
  .case-side { margin-bottom:36px; }
  .case-fact { padding:24px 22px 22px; }
  .case-fact-list > div { grid-template-columns:1fr; gap:4px; }
  .case-chapter { padding-top:52px; }
  .case-pull { padding:32px 22px; margin:40px 0; }
  .case-cta { margin-top:72px; padding:64px 24px 72px; }
  .back-link { padding:0 24px 64px; }
}