@charset "utf-8";
/* =========================================================================
   D5 SPORTS MANAGEMENT — site styles
   Direction: D / COURTSIDE  ×  Navy & Old Gold
   ========================================================================= */

/* ---------- tokens ----------
   Pattern 1 / Claude
   コンセプト: D5は代理・仲介ではなく、支援先の利益を代表して事業成果にコミットする会社。

   ★ 2026-09-16 醍醐さんの最終指定で更新。旧ネイビー #001850 より明るい色を採用。
     比較はMTG用のスクリーンショットで行い、サイトのパレットは1本だけ持つ。

   指定色そのものを主背景・ロゴ・主要ボタンに使用する。
     ネイビー #002A5C  HSL(213, 100%, 18%)
     ゴールド #CFB991  HSL( 39,  39%, 69%)
   ネイビー系の面・補助文字・罫線は約213°、紙とゴールドは約39°を基準にする。
   deep は黒に近づけず段差だけを作り、accent は小さな強調に限定する。

   明度は「その面に載る文字がAA（本文4.5:1 / 大字・UI 3.0:1）を保てるか」で決めた。
   使用する文字と面の組み合わせ・実測値は README を参照。
   ------------------------------------------------------------------------- */
:root {
  /* 面 — ネイビー系（色相約213°） */
  --navy:       #002A5C;  /* 主ネイビー。醍醐さん指定 */
  --navy-rgb:   0, 42, 92; /* 写真のオーバーレイも主色に統一 */
  --navy-deep:  #00234D;  /* 下地。フッター・リボン。主面との段差は控えめに */
  --navy-soft:  #0D396C;  /* 一段明るい面。区画・ホバー */
  --line:       #466387;  /* ネイビー系の罫線 */

  /* 面 — 紙（ゴールドの色相39°から起こす） */
  --paper:      #F8F6F1;
  --paper-deep: #EEE9E0;

  /* 差し色 — ゴールド系（色相39°）
     brand を主役に使い、accent は brand では軽い場所を受け持つ。 */
  --gold-brand:  #CFB991;  /* ブランドゴールド。醍醐さん指定。この色は加工しない */
  --gold-rgb:    207, 185, 145; /* 淡い地やホバーに敷くとき用。rgba(var(--gold-rgb), .1) の形で使う */
  --gold-accent: #B69354;  /* セカンドゴールド。強調・現在地・締まりが要る場所 */
  --gold:        var(--gold-brand);
  --gold-bright: #E2D3B6;  /* ホバー */
  /* 紙面のゴールド。ブランドの #CFB991 は白の上で 1.77:1 しかなく文字に使えないための別値。
     紙 5.18:1 / 一段沈んだ面 4.62:1 / ホバーで地を敷いた状態 4.87:1。
     **AA下限（4.5）ちょうどまで明るくしないこと。** 余白がないと、地を少し敷いただけで割れる。 */
  --gold-ink:    #81632D;

  /* 文字 — ロゴのワードマークが純白なので、濃色面の文字は寒色寄りの白 */
  --on-navy:       #F4F6FA;
  --on-navy-rgb:   244, 246, 250; /* 写真の上の罫線など、半透明で使うとき用 */
  --on-navy-muted: #B9C9DD;
  --ink:           #002A5C;
  --ink-muted:     #4A607B;

  --line-paper: rgba(var(--navy-rgb), .16);

  /* 旧名の互換（既存セレクタが参照している） */
  --midnight: var(--navy-deep);
  --amber:    var(--gold-accent);
  --warm:     var(--on-navy);
  --gray:     var(--on-navy-muted);
  --rule:     var(--line);
  --ink-rule: var(--line-paper);

  --f-display: "Anton", "Noto Sans JP", sans-serif;
  --f-ui: "Barlow Condensed", "Noto Sans JP", sans-serif;
  --f-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 9vw, 136px);

  --ease: cubic-bezier(.22, .61, .36, 1);

  color-scheme: only light;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* 行頭に「ー」や小書きの仮名（ァィゥェォッャュョ）を置かない。Safari は文節で折り返せない（auto-phrase がない）ので、
   これがないと「スポ／ーツ」「メニュ／ー」のように語の途中で切れる（2026-09-18 描画監査で検出） */
:lang(ja) { line-break: strict; }

/* 見出し・表示レベルの日本語は、行末に1文字だけ残る折り返しを作らない。
   balance で行数ぶんを均し、auto-phrase で文節の切れ目に送る。
   本文は pretty（最終行の孤立を避ける）に留め、行頭行末の見え方を変えない。 */
h1, h2, h3, h4,
.hero__ja, .hero__en, .hero__title, .sec-head__ja, .sec-head__en, .sec-head__title,
.page-head__ja, .page-head__title, .cta-band__title, .cta-band__text,
.rep__positioning, .rep__name-ja, .field__stance, .field__ja, .field__title,
.theme-row__ja, .theme-row__title, .svc__ja, .svc__title, .caps__ja, .areas__title,
.ins-title, .news-title, .case-title, .work__title,
.site-footer__tagline, .proto-note__text, .btn > b {
  text-wrap: balance;
  word-break: auto-phrase;
}
/* 数行で収まる短い文章も balance に入れる。日本語は語間に空白がないため
   pretty（最終行の単語孤立を避ける）がほとんど効かず、1〜2文字が残ってしまう。 */
.sec-head__lead, .field__lead, .caps__text, .areas__text,
.ins-sum, .work__teaser, .case-teaser, .entry-rail__ja, .field__entry-note, .tsec__lead,
.hero__lead, .prof__lead, .svc__lead, .theme-row__lead, .page-head__lead,
.cta-band__lead {
  text-wrap: balance;
  word-break: auto-phrase;
}
/* 本文も balance に入れる。日本語では pretty がほとんど効かず、
   3行の段落の最終行に2文字だけ残る、という状態を止められないため。
   balance はブラウザ側に行数の上限があり、長い段落には掛からないので
   記事本文の右端の揃いはこれまでどおり。 */
p, li, dd { text-wrap: balance; word-break: auto-phrase; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--warm);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.nb { white-space: nowrap; }
/* 見出し級の文節のまとまり。この中では折り返さない（src/lib/phrase.ts がビルド時に包む） */
.ph { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--amber); color: var(--navy); padding: 10px 18px;
  font-family: var(--f-ui); font-weight: 700; letter-spacing: .06em;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* Material Symbols。weight 700 / optical size 48 で太く、力のある字面にする。 */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 48;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ---------- type utilities ---------- */
.eyebrow {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9em;
}
/* 日本語見出しは文節単位で折り返す（対応ブラウザのみ） */
.hero__title, .page-head__title, .sec-head__title, .svc__title,
.case-title, .cta-band__title, .ins-title, .rich h2, .contact-card h2 {
  word-break: auto-phrase;
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .92;
}
.link-arrow {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warm);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow::after { content: " →"; color: var(--gold); }
.link-arrow:hover { color: var(--amber); border-color: var(--amber); }

.btn {
  display: inline-flex; align-items: baseline; flex-wrap: nowrap; gap: .75em;
  font-size: 1rem; font-weight: 700; letter-spacing: .03em;
  padding: 1.05em 1.55em; border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* 主ラベルは一行に固定。狭いときは英字の副ラベルから先に諦める。 */
.btn > b { flex: 0 0 auto; white-space: nowrap; font-weight: inherit; }
.btn > span {
  flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--f-ui); font-weight: 600; font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .62;
}
.btn::after { content: "→"; font-size: .95em; flex: 0 0 auto; margin-left: auto; padding-left: .75em; }

/* 副ラベルを出す余白がない幅では、英字を落として主ラベルを守る */
@media (max-width: 1200px) and (min-width: 901px) {
  .cta-band__actions .btn > span { display: none; }
}
/* スマホ幅では主ラベルだけで一杯になり、英字が「COR」のように途中で切れて残る。丸ごと落とす */
@media (max-width: 640px) {
  .btn > span { display: none; }
}
.btn--gold { background: var(--gold-brand); color: var(--navy); }
.btn--gold:hover { background: var(--gold-bright); }
.btn--ghost { border-color: var(--rule); color: var(--warm); }
.btn--ghost:hover { border-color: var(--gold); color: var(--amber); }
.btn--ink { background: var(--navy); color: var(--warm); }
.btn--ink:hover { background: var(--midnight); }

/* =========================================================================
   header
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
/* ヒーロー写真の上に重ねる状態。スクロールすると背景が入る（sticky は維持する）。 */
.site-header--over { background: transparent; border-bottom-color: rgba(var(--on-navy-rgb), .14); }
.site-header--over.is-stuck { background: var(--navy); border-bottom-color: var(--rule); }
.has-over-header #main { margin-top: -76px; }
.site-header__inner {
  width: min(100% - var(--gutter) * 2, 1560px);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; height: 76px;
}
.site-header__logo img { width: clamp(132px, 13vw, 176px); height: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); }
.site-nav__link {
  display: grid; gap: 1px; padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-nav__en {
  font-family: var(--f-ui); font-weight: 600; font-size: .875rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--warm);
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.site-nav__ja { font-size: .625rem; letter-spacing: .04em; color: var(--gray); white-space: nowrap; }
.site-nav__link:hover .site-nav__en,
.site-nav__link.is-current .site-nav__en { color: var(--amber); }
.site-nav__link.is-current { border-bottom-color: var(--gold); }

.site-header__toggle { display: none; width: 44px; height: 44px; position: relative; }
.site-header__toggle-bars,
.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  position: absolute; left: 10px; width: 24px; height: 2px;
  background: var(--warm); transition: transform .3s var(--ease), opacity .2s;
}
.site-header__toggle-bars { top: 21px; }
.site-header__toggle-bars::before { content: ""; left: 0; top: -7px; }
.site-header__toggle-bars::after { content: ""; left: 0; top: 7px; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars { background: transparent; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 76px 0 0; z-index: 99;
  background: var(--navy); padding: 24px var(--gutter) 48px;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__nav li { border-bottom: 1px solid var(--rule); }
.drawer__nav a { display: flex; align-items: baseline; gap: 14px; padding: 20px 2px; }
.drawer__en {
  font-family: var(--f-ui); font-weight: 700; font-size: 1.375rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.drawer__ja { font-size: .75rem; color: var(--gray); }
.drawer__cta { margin-top: 28px; width: 100%; justify-content: space-between; }

/* =========================================================================
   hero
   ========================================================================= */
.hero { position: relative; background: var(--navy); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__img { filter: saturate(1.02) contrast(1.02) brightness(1.06); }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(102deg,
      rgba(var(--navy-rgb),.92) 0%, rgba(var(--navy-rgb),.74) 34%, rgba(var(--navy-rgb),.24) 64%, rgba(var(--navy-rgb),0) 88%),
    linear-gradient(to top, rgba(var(--navy-rgb),.6) 0%, rgba(var(--navy-rgb),0) 30%);
}
.hero__inner {
  width: min(100% - var(--gutter) * 2, 1560px);
  margin-inline: auto;
  min-height: clamp(560px, 86vh, 860px);
  padding: 168px 0 clamp(64px, 8vh, 104px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero__statement {
  font-family: var(--f-display); font-size: clamp(1rem, 1.35vw, 1.35rem);
  letter-spacing: .42em; text-transform: uppercase; color: var(--gold);
  margin-bottom: clamp(20px, 3vh, 34px);
}
.hero__title { display: block; }
.hero__en {
  display: block;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.1rem, 8.4vw, 8rem);
  line-height: .88; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--warm);
}
.hero__en em { font-style: normal; color: var(--gold-brand); }
.hero__ja {
  display: block; margin-top: clamp(18px, 2.4vh, 30px);
  font-size: clamp(1.0625rem, 1.75vw, 1.5rem); font-weight: 700;
  letter-spacing: .04em; color: var(--gold-brand);
}
.hero__lead {
  margin-top: 1.1em; font-size: .9375rem; line-height: 1.9; color: var(--gray); max-width: 34em;
}
/* ミッション文。資料どおり、冒頭の3行は1行ずつ置いて、スポーツの3つの性質として読ませる */
.hero__lead p + p { margin-top: .7em; }
.hero__verse { color: var(--warm); font-weight: 500; margin-bottom: .3em; }
.hero__actions { margin-top: clamp(28px, 4vh, 44px); display: flex; flex-wrap: wrap; gap: 14px; }
.hero__meta {
  margin-top: clamp(36px, 5vh, 60px);
  padding-top: 20px; border-top: 1px solid rgba(var(--on-navy-rgb),.18);
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: baseline;
}
.hero__meta-label {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
}
.hero__meta-text { font-size: .875rem; color: var(--gray); }
.hero__meta-text a {
  margin-left: .9em; border-bottom: 1px solid var(--rule); white-space: nowrap;
  font-family: var(--f-ui); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.hero__meta-text a:hover { color: var(--warm); border-color: var(--gold); }

/* =========================================================================
   signature — courtside ribbon (5 themes)
   ========================================================================= */
.ribbon { background: var(--midnight); border-block: 1px solid var(--rule); }
.ribbon__inner {
  width: min(100% - var(--gutter) * 2, 1560px); margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.ribbon__cell {
  position: relative; display: block;
  padding: clamp(28px, 3.2vw, 44px) clamp(18px, 1.9vw, 30px) clamp(32px, 3.6vw, 48px);
  border-left: 1px solid var(--rule);
  transition: background .3s var(--ease);
}
.ribbon__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: clamp(18px, 2vw, 26px);
}
.ribbon__icon {
  font-size: clamp(34px, 3.4vw, 50px);
  color: color-mix(in srgb, var(--gold) 62%, var(--rule));
  transition: color .35s var(--ease), transform .5s var(--ease);
}
.ribbon__cell:hover .ribbon__icon { color: var(--amber); transform: translateY(-3px) scale(1.08); }
.ribbon__cell.is-active .ribbon__icon { color: var(--amber); }
.ribbon__cell:last-child { border-right: 1px solid var(--rule); }
.ribbon__cell::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--rule); transition: background .3s var(--ease);
}
.ribbon__cell:hover { background: rgba(var(--gold-rgb), .07); }
.ribbon__cell:hover::before,
.ribbon__cell.is-active::before { background: var(--amber); }
.ribbon__cell.is-active { background: rgba(var(--gold-rgb), .1); }
.ribbon__no {
  font-family: var(--f-display); font-size: clamp(2.4rem, 3.6vw, 3.6rem);
  line-height: .86; color: var(--gold-brand); display: block;
  transition: color .3s var(--ease);
}
.ribbon__cell:hover .ribbon__no,
.ribbon__cell.is-active .ribbon__no { color: var(--amber); }
.ribbon__label { display: block; }
.ribbon__en {
  display: block;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(.875rem, 1.05vw, 1.0625rem);
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.35;
  color: var(--warm);
}
.ribbon__ja {
  display: block; margin-top: .55em;
  font-size: .75rem; line-height: 1.6; color: var(--gray);
}

/* =========================================================================
   sections
   ========================================================================= */
.sec { padding-block: var(--sec-y); }
.sec--dark { background: var(--navy); }
.sec--deep { background: var(--midnight); }
.sec--paper { background: var(--paper); color: var(--ink); }
.sec--paper .eyebrow { color: var(--gold-ink); }
.sec--paper .link-arrow { color: var(--ink); border-color: var(--gold-ink); }
.sec--paper .link-arrow::after { color: var(--gold-ink); }
.sec--paper .link-arrow:hover { color: var(--gold-ink); }

.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 12px 40px;
  padding-bottom: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(36px, 4.6vw, 64px);
}
.sec--paper .sec-head { border-bottom-color: var(--ink-rule); }
.sec-head__title { grid-column: 1; }
.sec-head__en {
  display: block;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.35rem, 5.4vw, 4.4rem);
  line-height: .94; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--warm);
}
.sec--paper .sec-head__en { color: var(--ink); }
.sec-head__ja {
  /* 70px級の英字の直下なので .7em では詰まる。ヒーロー（英字121px / 余白22px）と
     同じ比率になるよう、文字サイズではなくビューポート基準で取る。
     VIEW ALL はこの行に下端を合わせるので、ここを広げると一緒に下がる。 */
  display: block; margin-top: clamp(18px, 1.9vw, 30px);
  font-size: clamp(.9375rem, 1.15vw, 1.125rem); font-weight: 700;
  letter-spacing: .04em; color: var(--gold);
}
.sec--paper .sec-head__ja { color: var(--gold-ink); }
.sec-head__lead {
  grid-column: 1; margin-top: .5em; color: var(--gray);
  max-width: 38em; font-size: .9375rem;
}
.sec--paper .sec-head__lead { color: var(--ink-muted); }
.sec-head__link { grid-column: 2; grid-row: 1 / -1; align-self: end; }

/* ---------- news ---------- */
.news-list li { border-bottom: 1px solid var(--rule); }
.news-list li:first-child { border-top: 1px solid var(--rule); }
.news-list a, .news-list .news-row {
  display: grid; grid-template-columns: 8.5em 8.5em minmax(0, 1fr) auto;
  gap: 4px 24px; align-items: baseline; padding: 22px 4px;
  transition: background .25s var(--ease);
}
.news-list a:hover { background: rgba(var(--gold-rgb), .07); }
.news-date {
  font-family: var(--f-ui); font-weight: 600; font-size: 1rem;
  letter-spacing: .1em; color: var(--gold);
}
.news-cat {
  font-size: .75rem; letter-spacing: .1em; color: var(--gray);
  border: 1px solid var(--rule); padding: 3px 10px; justify-self: start;
}
.news-title { font-size: 1rem; line-height: 1.75; }
.news-list a:hover .news-title { color: var(--amber); }
.news-ext { font-size: .75rem; color: var(--gray); }
/* 明色面に置いたときの色。既定は濃色面向けに書かれている */
.sec--paper .news-list li, .sec--paper .news-list li:first-child { border-color: var(--line-paper); }
.sec--paper .news-date { color: var(--gold-ink); }
.sec--paper .news-cat { color: var(--ink-muted); border-color: var(--line-paper); }
.sec--paper .news-ext { color: var(--ink-muted); }
/* 白面のホバー。ゴールドに変えると地との差が詰まるので、紺のまま下線で示す */
.sec--paper .news-list a:hover { background: rgba(var(--gold-rgb), .12); }
.sec--paper .news-list a:hover .news-title { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--gold-ink); }

/* ---------- theme rows (top page) ---------- */
.theme-rows { border-top: 1px solid var(--rule); }
.sec--paper .theme-rows, .sec--paper .theme-row { border-color: var(--ink-rule); }
.theme-row {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: 10px clamp(20px, 3vw, 48px); align-items: start;
  padding: clamp(26px, 3vw, 40px) 4px;
  border-bottom: 1px solid var(--rule);
  transition: background .28s var(--ease);
}
.theme-row:hover { background: rgba(var(--gold-rgb), .06); }
.sec--paper .theme-row:hover { background: rgba(var(--gold-rgb), .1); }
.theme-row__no {
  font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: .9; color: var(--gold-brand); /* 大きな表示文字はロゴ原色 */
}
.theme-row__title { display: block; }
.theme-row__en {
  display: block;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.25;
  color: var(--warm);
}
.sec--paper .theme-row__en { color: var(--ink); }
.theme-row__ja {
  display: block; margin-top: .6em;
  font-size: .875rem; font-weight: 500; line-height: 1.7; color: var(--gray);
}
.sec--paper .theme-row__ja { color: var(--ink-muted); }
.theme-row__lead { color: var(--gray); font-size: .9375rem; line-height: 1.95; }
.sec--paper .theme-row__lead { color: var(--ink-muted); }
.theme-row__go {
  font-family: var(--f-ui); font-weight: 600; font-size: .875rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  align-self: center; white-space: nowrap;
}
.theme-row__go::after { content: " →"; }
.theme-row:hover .theme-row__go { color: var(--amber); }

/* ---------- services ---------- */
.svc { border-top: 1px solid var(--rule); }
.svc__item {
  display: grid; grid-template-columns: 4.5rem minmax(0, .95fr) minmax(0, 1.35fr);
  gap: 14px clamp(20px, 3vw, 52px);
  padding: clamp(32px, 4vw, 56px) 4px;
  border-bottom: 1px solid var(--rule);
}
.sec--paper .svc, .sec--paper .svc__item { border-color: var(--ink-rule); }
.svc__no {
  font-family: var(--f-ui); font-weight: 700; font-size: 1.125rem;
  letter-spacing: .16em; color: var(--gold);
}
.svc__title { display: block; }
.svc__en {
  display: block;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(1.1875rem, 1.9vw, 1.75rem);
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.2;
  color: var(--warm);
}
.sec--paper .svc__en { color: var(--ink); }
.svc__ja {
  display: block; margin-top: .6em;
  font-size: .9375rem; font-weight: 700; line-height: 1.65; color: var(--gold);
}
.sec--paper .svc__ja { color: var(--gold-ink); }
.svc__audience {
  margin-top: 1.2em; font-size: .8125rem; color: var(--gray);
  border-left: 2px solid var(--rule); padding-left: 12px; line-height: 1.8;
}
.sec--paper .svc__audience { color: var(--ink-muted); border-color: var(--ink-rule); }
.svc__lead { font-size: 1.0625rem; font-weight: 500; line-height: 1.95; }
.svc__body p { margin-top: 1.3em; color: var(--gray); font-size: .9375rem; }
.sec--paper .svc__body p { color: var(--ink-muted); }
.svc__menu { margin-top: 1.9em; border-top: 1px solid var(--rule); }
.sec--paper .svc__menu, .sec--paper .svc__menu li { border-color: var(--ink-rule); }
.svc__menu li {
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 24px;
  padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: .875rem;
}
.svc__menu b { font-weight: 700; }
.svc__menu span { color: var(--gray); }
.sec--paper .svc__menu span { color: var(--ink-muted); }

/* ---------- insights ---------- */
.ins-list { border-top: 1px solid var(--ink-rule); }
.sec--dark .ins-list, .sec--deep .ins-list { border-top-color: var(--rule); }
.ins-item { border-bottom: 1px solid var(--ink-rule); }
.sec--dark .ins-item, .sec--deep .ins-item { border-bottom-color: var(--rule); }
.ins-item a {
  display: grid; grid-template-columns: 10em minmax(0, 1fr);
  gap: 10px clamp(20px, 3vw, 48px);
  padding: clamp(26px, 3vw, 40px) 4px;
  transition: background .28s var(--ease);
}
.ins-item a:hover { background: rgba(var(--gold-rgb), .1); }
.sec--dark .ins-item a:hover, .sec--deep .ins-item a:hover { background: rgba(var(--gold-rgb), .07); }
.ins-meta { display: flex; flex-direction: column; gap: 8px; }
.ins-date {
  font-family: var(--f-ui); font-weight: 600; font-size: 1rem; letter-spacing: .1em;
  color: var(--gold-ink);
}
.sec--dark .ins-date, .sec--deep .ins-date { color: var(--gold); }
.ins-tag {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink); align-self: start; line-height: 1.4;
}
.sec--dark .ins-tag, .sec--deep .ins-tag { color: var(--gold); }
.ins-title { display: block; font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.6; }
.ins-item a:hover .ins-title { color: var(--gold-ink); }
.sec--dark .ins-item a:hover .ins-title, .sec--deep .ins-item a:hover .ins-title { color: var(--gold); }
.ins-sum { display: block; margin-top: .9em; color: var(--ink-muted); font-size: .9375rem; max-width: 52em; }
.sec--dark .ins-sum, .sec--deep .ins-sum { color: var(--gray); }
.ins-themes { margin-top: 1.1em; display: flex; flex-wrap: wrap; gap: 8px; }
.ins-themes span {
  font-size: .75rem; letter-spacing: .06em; padding: 4px 11px;
  border: 1px solid var(--ink-rule); color: var(--ink-muted);
}
.sec--dark .ins-themes span, .sec--deep .ins-themes span { border-color: var(--rule); color: var(--gray); }

/* ---------- cases ---------- */
.case-list { border-top: 1px solid var(--rule); }
.sec--paper .case-list, .sec--paper .case-item { border-color: var(--ink-rule); }
.case-item { border-bottom: 1px solid var(--rule); padding: clamp(32px, 4vw, 56px) 0; }
.case-item__head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.case-cat {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.case-client { font-size: .8125rem; color: var(--gray); }
.sec--paper .case-client { color: var(--ink-muted); }
.sec--paper .case-cat, .sec--paper .case-def dt { color: var(--gold-ink); }
.case-title {
  font-size: clamp(1.1875rem, 1.9vw, 1.75rem); font-weight: 900;
  line-height: 1.5; margin-top: .6em; max-width: 26em;
}
.case-grid {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
}
.case-def { border-top: 1px solid var(--rule); padding: 20px 0; }
.sec--paper .case-def { border-color: var(--ink-rule); }
.case-def dt {
  font-family: var(--f-ui); font-weight: 700; font-size: .9375rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .8em;
}
.case-def dt span {
  font-family: var(--f-body); font-weight: 400; font-size: .6875rem;
  letter-spacing: .06em; text-transform: none; color: var(--gray);
  margin-left: .9em;
}
.sec--paper .case-def dt span { color: var(--ink-muted); }
.case-def dd { font-size: .9375rem; line-height: 1.95; color: var(--gray); }
.sec--paper .case-def dd { color: var(--ink-muted); }
.case-def li { padding-left: 1.15em; position: relative; }
.case-def li + li { margin-top: .5em; }
.case-def li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 6px; height: 1px; background: var(--gold);
}
.case-links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.case-note {
  margin-top: clamp(28px, 3vw, 40px); font-size: .8125rem; color: var(--gray);
  border-left: 2px solid var(--rule); padding-left: 14px; line-height: 1.9;
}
.sec--paper .case-note { color: var(--ink-muted); border-color: var(--ink-rule); }

/* ---------- profile ---------- */
.prof { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 72px); }
.prof__figure { position: relative; }
.prof__photo {
  margin: 0; overflow: clip; aspect-ratio: 4 / 5;
  background: var(--midnight); border: 1px solid var(--rule);
}
.prof__photo img { width: 100%; height: 100%; object-fit: cover; }
.prof__name { margin-top: 20px; }
.prof__name b {
  display: block; font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.15;
}
.prof__name-ja { display: block; margin-top: .55em; font-size: .9375rem; font-weight: 700; color: var(--gold); }
.prof__role {
  display: block; margin-top: .55em; font-family: var(--f-ui); font-weight: 600;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gray);
}
.prof__positioning {
  font-family: var(--f-ui); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1.35; letter-spacing: .01em; color: var(--warm);
  padding-bottom: .8em; border-bottom: 1px solid var(--rule);
}
.prof__bio p { margin-top: 1.4em; color: var(--gray); font-size: .9375rem; }
.prof__cols { margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.prof__col h3 {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 14px;
}
.prof__col li { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.prof__col li b {
  display: block; font-family: var(--f-ui); font-weight: 600; font-size: .9375rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--warm); line-height: 1.35;
}
.prof__col li span { display: block; margin-top: .25em; font-size: .75rem; color: var(--gray); }
.prof__col li:has(.link-arrow) { border-bottom: 0; padding-top: 14px; }

/* ---------- partners ---------- */
.ptn-list { border-top: 1px solid var(--rule); }
.sec--paper .ptn-list, .sec--paper .ptn-item { border-color: var(--ink-rule); }
.ptn-item {
  display: grid; grid-template-columns: minmax(0, 20em) 7em minmax(0, 1fr);
  gap: 8px clamp(20px, 3vw, 48px); align-items: baseline;
  padding: 26px 4px; border-bottom: 1px solid var(--rule);
}
.ptn-name { font-size: 1.125rem; font-weight: 700; }
.ptn-name small { display: block; margin-top: .5em; font-size: .75rem; font-weight: 400; color: var(--gray); }
.ptn-region {
  font-family: var(--f-ui); font-weight: 600; font-size: .8125rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.ptn-note { font-size: .875rem; color: var(--gray); }
.sec--paper .ptn-note, .sec--paper .ptn-name small { color: var(--ink-muted); }

/* =========================================================================
   page head / crumbs
   ========================================================================= */
/* 全下層ページに出る帯。いちばん濃い色だと重いので指定色のネイビーにする */
.page-head { background: var(--navy); padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5.5vw, 76px); border-bottom: 1px solid var(--rule); }
.crumbs { margin-bottom: clamp(24px, 3vw, 40px); }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-family: var(--f-ui); font-weight: 600; font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray);
}
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule); }
.crumbs a:hover { color: var(--amber); }
/* 見出しの上の1行（代表ページの肩書き）。パンくずの下、英字の大見出しの上 */
.page-head__eyebrow {
  margin-bottom: 1.1em;
  font-family: var(--f-ui); font-weight: 600; font-size: clamp(.8125rem, 1.1vw, .9375rem);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.page-head__title { display: block; }
.page-head__en {
  display: block;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  line-height: .92; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--warm);
}
.page-head__ja {
  display: block; margin-top: .75em;
  font-size: clamp(1rem, 1.35vw, 1.3125rem); font-weight: 700;
  letter-spacing: .04em; color: var(--gold);
}
.page-head__lead { margin-top: 1.4em; max-width: 40em; color: var(--gray); font-size: .9375rem; }

/* 記事詳細: 英字はカテゴリーラベルに下げ、日本語のタイトルを主役にする */
.page-head--label .page-head__en {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .26em; color: var(--gold);
}
.page-head--label .page-head__ja {
  margin-top: .7em; color: var(--warm);
  font-family: var(--f-body); font-weight: 900;
  font-size: clamp(1.625rem, 3.4vw, 2.875rem); line-height: 1.34; letter-spacing: .01em;
  max-width: 22em; word-break: auto-phrase;
}

/* =========================================================================
   article / rich text
   ========================================================================= */
.article { background: var(--paper); color: var(--ink); padding-block: clamp(48px, 6vw, 88px); }
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(32px, 5vw, 88px); align-items: start; }

/* 本文ブロック。濃色面が既定で、.sec--paper / .article 配下では明色面に切り替わる。 */
.rich { max-width: 42em; }
.rich > *:first-child { margin-top: 0; }
.rich p { margin-top: 1.65em; font-size: 1.0625rem; line-height: 2.1; color: var(--gray); }
.rich h2 {
  margin-top: 2.6em; padding-top: 1.1em; border-top: 2px solid var(--rule);
  font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 900; line-height: 1.5; color: var(--warm);
}
.rich h2:has(span) {
  font-family: var(--f-ui); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: clamp(1.125rem, 1.7vw, 1.375rem);
}
.rich h2 > span {
  display: block; margin-top: .5em; font-size: .875rem; font-weight: 700;
  letter-spacing: .02em; color: var(--gold);
}
.article .rich h2 > span, .sec--paper .rich h2 > span { color: var(--gold-ink); }
.rich h3 { margin-top: 2.1em; font-size: 1.125rem; font-weight: 700; line-height: 1.6; color: var(--gold); }
.rich ul { margin-top: 1.5em; border-top: 1px solid var(--rule); }
.rich ul li {
  padding: 14px 0 14px 1.4em; border-bottom: 1px solid var(--rule);
  position: relative; font-size: 1rem; line-height: 1.9; color: var(--gray);
}
.rich ul li::before {
  content: ""; position: absolute; left: 0; top: 1.55em;
  width: 8px; height: 2px; background: var(--gold);
}
.rich blockquote {
  text-wrap: balance; word-break: auto-phrase;
  margin-top: 2.2em; padding: 4px 0 4px 24px; border-left: 3px solid var(--gold);
  font-size: 1.125rem; font-weight: 700; line-height: 1.95; color: var(--warm);
}
.rich__lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 700; line-height: 1.95;
  padding-bottom: 1.6em; border-bottom: 1px solid var(--rule); color: var(--warm);
}

.article .rich p, .sec--paper .rich p { color: var(--ink); }
.article .rich h2, .sec--paper .rich h2 { border-top-color: var(--ink); color: var(--ink); }
.article .rich h3, .sec--paper .rich h3 { color: var(--gold-ink); }
.article .rich ul, .sec--paper .rich ul { border-top-color: var(--ink-rule); }
.article .rich ul li, .sec--paper .rich ul li { border-bottom-color: var(--ink-rule); color: var(--ink); }
.article .rich ul li::before, .sec--paper .rich ul li::before { background: var(--gold-ink); }
.article .rich blockquote, .sec--paper .rich blockquote { border-left-color: var(--gold-ink); color: var(--ink); }
.article .rich__lead, .sec--paper .rich__lead { border-bottom-color: var(--ink-rule); color: var(--ink); }

.article__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin-bottom: 1.4em; }
.article__meta span { font-size: .8125rem; color: var(--ink-muted); }
.article .article__meta .ins-date { color: var(--gold-ink); }

/* サイドの補助ブロック */
.aside-box { border-top: 2px solid var(--gold); padding-top: 18px; margin-top: 40px; }
.aside-box:first-child { margin-top: 0; }
.aside-box h2 {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.aside-box p { font-size: .875rem; line-height: 1.9; color: var(--gray); }
.aside-box p b { color: var(--warm); }
.aside-box li {
  font-size: .875rem; line-height: 1.9; color: var(--gray);
  padding: 10px 0 10px 1.2em; border-bottom: 1px solid var(--rule); position: relative;
}
.aside-box li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 7px; height: 1px; background: var(--gold); }
.aside-box .link-arrow { display: inline-block; margin-top: 18px; }
.aside-box a:not(.link-arrow) { border-bottom: 1px solid var(--rule); }
.aside-box a:not(.link-arrow):hover { color: var(--amber); border-color: var(--gold); }

.article .aside-box { border-top-color: var(--ink); }
.article .link-arrow { color: var(--ink); border-color: var(--gold-ink); }
.article .link-arrow::after { color: var(--gold-ink); }
.article .link-arrow:hover { color: var(--gold-ink); }
.article .aside-box a:not(.link-arrow) { border-bottom-color: var(--ink-rule); }
.article .aside-box a:not(.link-arrow):hover { color: var(--gold-ink); border-color: var(--gold-ink); }
.article .aside-box h2 { color: var(--gold-ink); }
.article .aside-box p, .article .aside-box li { color: var(--ink-muted); }
.article .aside-box p b { color: var(--ink); }
.article .aside-box li { border-bottom-color: var(--ink-rule); }
.article .aside-box li::before { background: var(--gold-ink); }
.article .aside-box--quote {
  background: var(--paper-deep); border-top-color: var(--gold-ink); padding: 18px 20px 20px;
}
.article .aside-box--quote p { color: var(--ink); font-weight: 500; }

/* =========================================================================
   cta band
   ========================================================================= */
/* 全ページ末尾の帯。写真を敷くので地は指定色のネイビーで足りる */
.cta-band { background: var(--navy); border-top: 1px solid var(--rule); padding-block: clamp(56px, 7vw, 104px); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.cta-band__en {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .94;
  text-transform: uppercase; color: var(--warm); margin-bottom: .28em;
}
.cta-band__title { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); font-weight: 700; line-height: 1.6; color: var(--gold); }
.cta-band__text { margin-top: .9em; color: var(--gray); font-size: .875rem; }
.cta-band__actions { display: grid; gap: 14px; }
.cta-band__actions .btn { justify-content: space-between; }

/* =========================================================================
   contact page
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.contact-card { border: 1px solid var(--rule); padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; }
.contact-card h2 { display: block; }
.contact-card h2 > span:not(.contact-card__en) {
  display: block; margin-top: .6em; font-size: .9375rem; font-weight: 700; color: var(--gold);
}
.contact-card__en {
  display: block; font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--warm);
}
.contact-card p { margin-top: 1.2em; color: var(--gray); font-size: .9375rem; }
.contact-card ul { margin-top: 1.4em; border-top: 1px solid var(--rule); }
.contact-card li { padding: 12px 0 12px 1.2em; border-bottom: 1px solid var(--rule); position: relative; font-size: .875rem; color: var(--gray); }
.contact-card li::before { content: ""; position: absolute; left: 0; top: 1.5em; width: 7px; height: 1px; background: var(--gold); }
.contact-card .btn { margin-top: auto; align-self: start; }
.contact-card__foot { margin-top: 26px; }

.flow { counter-reset: flow; border-top: 1px solid var(--rule); margin-top: clamp(36px, 4vw, 56px); }
.flow li {
  counter-increment: flow; border-bottom: 1px solid var(--rule);
  padding: 22px 4px 22px 4.2em; position: relative; font-size: .9375rem; color: var(--gray);
}
.flow li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute; left: 4px; top: 20px;
  font-family: var(--f-display); font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.flow b { display: block; color: var(--warm); font-weight: 700; margin-bottom: .3em; }

/* ---------- simple tables (company / privacy) ---------- */
.deftable { border-top: 1px solid var(--rule); }
.deftable > div {
  display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr);
  gap: 6px 32px; padding: 20px 4px; border-bottom: 1px solid var(--rule);
}
.deftable dt { font-family: var(--f-ui); font-weight: 700; font-size: .9375rem; letter-spacing: .12em; color: var(--gold); }
.deftable dd { font-size: .9375rem; color: var(--warm); }
.deftable .review { display: inline-block; margin-left: 10px; font-size: .6875rem; letter-spacing: .1em; color: var(--navy); background: var(--gray); padding: 2px 8px; vertical-align: 2px; }

.prose { max-width: 46em; }
.prose--wide { max-width: 52em; }
.prose h2 { margin-top: 2.4em; padding-top: 1em; border-top: 1px solid var(--rule); font-size: 1.25rem; font-weight: 900; }
.prose p { margin-top: 1.3em; color: var(--gray); font-size: .9375rem; }
.prose ul { margin-top: 1.2em; }
.prose ul li { padding: 8px 0 8px 1.2em; position: relative; color: var(--gray); font-size: .9375rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 7px; height: 1px; background: var(--gold); }
/* 明色面に置いたときの色。既定は濃色面向けに書かれている */
.sec--paper .prose h2 { border-top-color: var(--ink-rule); }
.sec--paper .prose p, .sec--paper .prose ul li { color: var(--ink-muted); }
.sec--paper .prose ul li::before { background: var(--gold-ink); }

/* =========================================================================
   footer
   ========================================================================= */
.proto-note {
  background: var(--gold-brand); color: var(--navy);
  font-size: .8125rem; font-weight: 700; line-height: 1.7;
  text-align: center; padding: 12px var(--gutter);
}
.site-footer { background: var(--navy); border-top: 1px solid var(--rule); padding-block: clamp(48px, 6vw, 88px) 32px; }
.site-footer__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--rule);
}
.site-footer__brand img { width: 180px; }
.site-footer__statement {
  margin-top: 20px; font-family: var(--f-display); font-size: 1rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
.site-footer__tagline { margin-top: .8em; font-size: .875rem; color: var(--gray); }
.site-footer__place {
  margin-top: 1.4em; font-family: var(--f-ui); font-weight: 600; font-size: .75rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--on-navy-muted);
  /* 以前は --rule（罫線の色）を文字に使っていて 2.09:1 だった。罫線用の値を文字に流用しない */
}
.site-footer__heading {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.site-footer__col li { padding: 6px 0; }
.site-footer__col a { font-size: .875rem; color: var(--gray); transition: color .2s; }
.site-footer__col a:hover { color: var(--warm); }
.site-footer__info {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 32px;
  padding-block: clamp(28px, 3.4vw, 40px); border-bottom: 1px solid var(--rule);
}
.site-footer__info dt {
  font-family: var(--f-ui); font-weight: 600; font-size: .75rem;
  letter-spacing: .18em; color: var(--gold); text-transform: uppercase;
}
.site-footer__info dd { margin-top: .4em; font-size: .8125rem; color: var(--gray); line-height: 1.75; }
.site-footer__bottom { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
.site-footer__copy { font-size: .75rem; color: var(--gray); letter-spacing: .04em; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-footer__legal a { font-size: .75rem; color: var(--gray); }
.site-footer__legal a:hover { color: var(--amber); }

/* =========================================================================
   motion
   ========================================================================= */
/* JS が動くときだけ隠す。動かない環境では最初から見えている状態にする */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero__statement, .hero__title, .hero__lead, .hero__actions, .hero__meta { animation: rise .9s var(--ease) both; }
.hero__title { animation-delay: .08s; }
.hero__lead { animation-delay: .16s; }
.hero__actions { animation-delay: .24s; }
.hero__meta { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal], .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* =========================================================================
   responsive
   ========================================================================= */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-header__toggle { display: block; }
  .prof { grid-template-columns: 1fr; }
  .prof__figure { max-width: 320px; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .article__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ribbon__inner { grid-template-columns: 1fr; }
  .ribbon__cell {
    display: grid; grid-template-columns: 3.4rem 2.4rem minmax(0, 1fr);
    gap: 4px 18px; align-items: center;
    border-left: 0; border-top: 1px solid var(--rule);
    padding: 20px 4px;
  }
  .ribbon__head { display: contents; }
  .ribbon__icon { font-size: 30px; }
  .ribbon__cell:last-child { border-right: 0; border-bottom: 1px solid var(--rule); }
  .ribbon__cell::before { display: none; }
  .ribbon__inner { width: min(100% - var(--gutter) * 2, 1560px); }
  .ribbon__no { font-size: 2.2rem; }
  .ribbon__en { display: none; }

  .theme-row { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .theme-row__lead { grid-column: 2; }
  .theme-row__go { grid-column: 2; align-self: start; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head__link { grid-column: 1; grid-row: auto; margin-top: 8px; justify-self: start; }
  .svc__item { grid-template-columns: 1fr; }
  .svc__no { font-size: 1rem; }
  .case-grid { grid-template-columns: 1fr; }
  .ins-item a { grid-template-columns: 1fr; }
  .ins-meta { flex-direction: row; align-items: baseline; gap: 16px; }
  .ptn-item { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .news-list a, .news-list .news-row { grid-template-columns: 7em minmax(0, 1fr); }
  .news-cat { grid-row: 1; grid-column: 2; justify-self: start; }
  .news-title { grid-column: 1 / -1; }
  .news-ext { grid-column: 1 / -1; }
  .sec-head { grid-template-columns: 1fr; }
  .deftable > div { grid-template-columns: 1fr; }
  .svc__menu li { grid-template-columns: 1fr; }
  .prof__cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  /* 縦画面では、3つの閲覧入口が画面の下端に覗く高さに収める */
  .hero__inner { padding-top: 112px; padding-bottom: 40px; min-height: 0; }
  .hero__en { font-size: clamp(2.5rem, 12.5vw, 3.4rem); }
  .hero__lead { font-size: .875rem; line-height: 1.85; }
  .hero__media img { object-position: 74% 42%; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(var(--navy-rgb),.28) 0%,
      rgba(var(--navy-rgb),.44) 24%,
      rgba(var(--navy-rgb),.86) 54%,
      rgba(var(--navy-rgb),.97) 78%,
      var(--navy) 100%);
  }
  .hero__actions .btn { width: 100%; justify-content: space-between; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__info { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   写真・帯 — 競技ビジュアルの扱い
   ========================================================================= */

/* 画像は元から navy 寄りだが、わずかに締めて全体のトーンを揃える */
.hero__media img, .banner__img {
  filter: saturate(.94) contrast(1.05);
}
/* 帯とサムネイルは小さく暗くなりがちなので、少し起こして視認性を確保する */
.band__img { filter: saturate(1.02) contrast(1.06) brightness(1.1); }
.theme-row__img { filter: saturate(1.08) contrast(.98) brightness(1.42); }

/* 文字を載せる側を落とすグラデーション。写真の上に帯や図形は置かない（仕様書7.4）。 */
.scrim { position: absolute; inset: 0; pointer-events: none; }
.scrim--bottom {
  background: linear-gradient(to top,
    var(--navy) 0%, rgba(var(--navy-rgb),.72) 26%, rgba(var(--navy-rgb),.12) 62%, rgba(var(--navy-rgb),0) 100%);
}
.scrim--left {
  background: linear-gradient(100deg,
    var(--navy) 4%, rgba(var(--navy-rgb),.9) 30%, rgba(var(--navy-rgb),.3) 62%, rgba(var(--navy-rgb),.04) 90%);
}
.scrim--full {
  background:
    linear-gradient(95deg,
      rgba(var(--navy-rgb),.95) 0%, rgba(var(--navy-rgb),.88) 26%, rgba(var(--navy-rgb),.42) 60%, rgba(var(--navy-rgb),.06) 100%),
    linear-gradient(to bottom,
      rgba(var(--navy-rgb),.5) 0%, rgba(var(--navy-rgb),0) 18%, rgba(var(--navy-rgb),0) 82%, rgba(var(--navy-rgb),.5) 100%);
}

/* ---------- テーマ詳細・記事詳細の全幅バナー ---------- */
.banner {
  position: relative; margin: 0; overflow: clip;
  aspect-ratio: 21 / 7; background: var(--midnight);
  border-bottom: 1px solid var(--rule);
}
.banner--slim { aspect-ratio: 21 / 6; }
.banner__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); }
.banner__cap {
  position: absolute; left: var(--gutter); bottom: clamp(18px, 2.6vw, 32px);
  display: flex; align-items: baseline; gap: .8em;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(.875rem, 1.2vw, 1.0625rem);
  letter-spacing: .22em; text-transform: uppercase; color: var(--warm);
}
.banner__cap span { font-family: var(--f-display); font-size: 1.9em; letter-spacing: 0; color: var(--gold); }

/* ---------- トップの写真帯 ---------- */
.band {
  position: relative; overflow: clip;
  min-height: clamp(340px, 46vw, 560px);
  display: grid; align-items: center;
  border-block: 1px solid var(--rule);
}
.band__media { position: absolute; inset: 0; }
.band__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.22); }
.band__inner { position: relative; padding-block: clamp(48px, 7vw, 96px); }
.band__en {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4rem); line-height: .98;
  text-transform: uppercase; color: var(--warm);
}
.band__ja {
  margin-top: 1.2em; max-width: 34em;
  font-size: clamp(.9375rem, 1.15vw, 1.0625rem); font-weight: 500;
  line-height: 2; color: var(--gray);
}

/* ---------- テーマ行のサムネイル ---------- */




/* =========================================================================
   最新のブラウザ機能 — 使えるときだけ効かせ、使えなければ静止した状態を出す
   ========================================================================= */

/* ページ遷移。MPAのままクロスドキュメントのビュー遷移を効かせる。 */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
/* ヘッダーとリボンは遷移中も動かさない */
.site-header { view-transition-name: site-header; }
.ribbon { view-transition-name: ribbon; }

/* アニメーション可能なカスタムプロパティ。リボンのLEDに使う。 */
@property --led {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

/* 現在地のセルだけ、コートサイドのLEDのように光が流れる */
.ribbon__cell.is-active::before {
  background:
    linear-gradient(90deg,
      var(--gold) 0%, var(--gold) calc(var(--led) - 14%),
      var(--gold-bright) calc(var(--led) - 2%), var(--gold-bright) calc(var(--led) + 2%),
      var(--gold) calc(var(--led) + 14%), var(--gold) 100%);
  animation: led 5.5s linear infinite;
}
@keyframes led { from { --led: -10%; } to { --led: 110%; } }

/* スクロール駆動アニメーション。対応ブラウザではJSを使わない。 */
@supports (animation-timeline: view()) {
  [data-reveal] {
    opacity: 1; transform: none;
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 6% cover 26%;
  }
  @keyframes reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  /* バナーと写真帯はゆっくり視差で動かす */
  .banner__img, .band__img {
    animation: photo-parallax linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes photo-parallax {
    from { transform: scale(1.22) translateY(-6%); }
    to   { transform: scale(1.22) translateY(6%); }
  }

  /* 記事の読了バー */
  .read-bar { animation: read linear both; animation-timeline: scroll(); }
  @keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

.read-bar {
  position: fixed; left: 0; top: 0; z-index: 120;
  width: 100%; height: 2px; background: var(--amber);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* コンテナクエリ。親の幅で組み替えるので、どのセクションに入れても崩れない。 */
.ins-list { container-type: inline-size; container-name: list; }
@container list (max-width: 640px) {
  .ins-item a { grid-template-columns: 1fr; }
  .ins-meta { flex-direction: row; align-items: baseline; gap: 16px; }
}

/* content-visibility: auto は使わない。
   描画をスキップしたセクションではスクロール駆動アニメーション（ViewTimeline）が
   動かなくなることがあり、19ページの静的サイトでは省略できる描画コストも小さい。 */

@media (prefers-reduced-motion: reduce) {
  .ribbon__cell.is-active::before { animation: none; background: var(--amber); }
  .banner__img, .band__img, [data-reveal], .read-bar { animation: none !important; }
  .theme-row__img { transition: none; }
  .read-bar { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .banner { aspect-ratio: 2 / 1; }
  .banner--slim { aspect-ratio: 21 / 9; }
  .band { min-height: 380px; }
}

/* =========================================================================
   テーマ一覧のステージ
   左の大きな1枚が、右の行のホバー／フォーカスに応じて切り替わる（:has() のみ）
   ========================================================================= */
.theme-stage {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
}
.theme-stage__frame {
  position: relative; overflow: clip;
  aspect-ratio: 4 / 5; background: var(--midnight);
  border: 1px solid var(--rule);
  position: sticky; top: 108px;
}
.theme-stage__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.02) contrast(1.02) brightness(1.16);
  opacity: 0; transform: scale(1.05);
  transition: opacity .55s var(--ease), transform 1.1s var(--ease);
}
/* コート由来の細いグリッド。写真の上に置く唯一の要素で、文字は載せない。 */
.theme-stage__grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(var(--gold-rgb),.14) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg,  rgba(var(--gold-rgb),.10) 0 1px, transparent 1px 20%),
    linear-gradient(to top, rgba(var(--navy-rgb),.72) 0%, rgba(var(--navy-rgb),0) 44%);
}

/* 既定は01。どれかにホバーしたら全部消して、その1枚だけ出す。 */
.theme-stage__img:first-of-type { opacity: 1; transform: none; }
.theme-stage:has(.theme-row:is(:hover, :focus-visible)) .theme-stage__img { opacity: 0; transform: scale(1.05); }
.theme-stage:has(.theme-row:nth-of-type(1):is(:hover, :focus-visible)) .theme-stage__img:nth-of-type(1),
.theme-stage:has(.theme-row:nth-of-type(2):is(:hover, :focus-visible)) .theme-stage__img:nth-of-type(2),
.theme-stage:has(.theme-row:nth-of-type(3):is(:hover, :focus-visible)) .theme-stage__img:nth-of-type(3),
.theme-stage:has(.theme-row:nth-of-type(4):is(:hover, :focus-visible)) .theme-stage__img:nth-of-type(4),
.theme-stage:has(.theme-row:nth-of-type(5):is(:hover, :focus-visible)) .theme-stage__img:nth-of-type(5) {
  opacity: 1; transform: none;
}

.theme-stage__list { border-top: 1px solid var(--rule); }
.sec--paper .theme-stage__list { border-top-color: var(--ink-rule); }

/* 行の中身は明示的に配置する（サムネイルの有無で自動配置が変わるため） */
.theme-row {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  column-gap: clamp(16px, 2vw, 28px);
  padding: clamp(22px, 2.6vw, 34px) 4px;
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.sec--paper .theme-row { border-bottom-color: var(--ink-rule); }
.theme-row:hover, .theme-row:focus-visible { background: rgba(var(--gold-rgb),.07); padding-left: 14px; }
.sec--paper .theme-row:hover { background: rgba(var(--gold-rgb),.1); }

.theme-row__no    { grid-area: 1 / 1 / 2 / 2; }
.theme-row__title { grid-area: 1 / 2 / 2 / 3; }
.theme-row__go    { grid-area: 1 / 3 / 2 / 4; align-self: center; }
.theme-row__lead  { grid-area: 2 / 2 / 3 / 4; margin-top: .7em; }
.theme-row__thumb { display: none; }

@media (max-width: 900px) {
  .theme-stage { grid-template-columns: 1fr; gap: 0; }
  .theme-stage__frame { display: none; }

  /* ステージが出せない縦画面では、各行が自分の写真を持つ */
  .theme-row { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .theme-row__no    { grid-area: 1 / 1 / 2 / 2; }
  .theme-row__title { grid-area: 1 / 2 / 2 / 3; }
  .theme-row__thumb {
    display: block; grid-area: 2 / 1 / 3 / -1; margin-top: 18px;
    overflow: clip; aspect-ratio: 2 / 1;
    background: var(--midnight); border: 1px solid var(--rule);
  }
  .theme-row__img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(1.02) contrast(1.02) brightness(1.18);
  }
  .theme-row__lead { grid-area: 3 / 1 / 4 / -1; margin-top: 16px; }
  .theme-row__go   { grid-area: 4 / 1 / 5 / -1; margin-top: 14px; align-self: start; }
}

/* =========================================================================
   トップの実績ティーザー
   写真で足を止めてもらい、詳細は /cases/ に送る。文字は写真の上に載せない。
   ========================================================================= */
/* 列数は件数に合わせる（テーマページでは該当事例が3件に満たない） */
.work { display: grid; grid-template-columns: repeat(var(--work-cols, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.work__item {
  display: grid; grid-template-rows: auto auto auto 1fr;
  align-content: start;
  padding-bottom: 22px; border-bottom: 1px solid var(--rule);
  transition: border-color .35s var(--ease);
}
.sec--paper .work__item { border-bottom-color: var(--ink-rule); }
.work__item:hover { border-bottom-color: var(--gold); }

.work__media {
  display: block; overflow: clip; aspect-ratio: 5 / 4;
  background: var(--midnight); margin-bottom: 20px;
}
/* 3列に満たないときはカードが横長になるので、写真も横長にして高さを抑える */
.work--wide .work__media { aspect-ratio: 16 / 9; }
/* 1件だけのときは全幅に伸ばすと写真が大きくなりすぎるので、半分ほどに留める */
.work--single { max-width: min(560px, 52%); }
.work__img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.02) contrast(1.02) brightness(1.16);
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.work__item:hover .work__img { transform: scale(1.06); filter: saturate(1.1) contrast(1.06) brightness(1.24); }

.work__cat {
  display: block; margin-bottom: .8em;
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  transition: color .3s var(--ease);
}
.work__item:hover .work__cat { color: var(--amber); }
.work__title {
  display: block; font-size: clamp(1rem, 1.35vw, 1.1875rem); font-weight: 700;
  line-height: 1.62; word-break: auto-phrase;
}
.work__teaser {
  display: block; margin-top: .9em; padding-top: .9em;
  border-top: 1px solid var(--rule);
  font-size: .875rem; line-height: 1.85; color: var(--gray);
}
.sec--paper .work__teaser { border-top-color: var(--ink-rule); color: var(--ink-muted); }

@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; gap: 32px; }
  /* 縦画面では列が1本になるので、work--wide の横長指定より狭幅の比率を優先する */
  .work__media, .work--wide .work__media { aspect-ratio: 2 / 1; }
  .work--single { max-width: none; }
}

/* ---------- 事例一覧：写真を先に置き、4部構成はその下に ---------- */
.case-item {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.case-media {
  grid-row: 1 / span 4; margin: 0;
  overflow: clip; aspect-ratio: 4 / 3;
  background: var(--midnight); border: 1px solid var(--rule);
  position: sticky; top: 108px;
}
.case-media__img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.02) contrast(1.02) brightness(1.16);
}
.case-item__head, .case-title, .case-teaser, .case-grid, .case-links { grid-column: 2; }
.case-teaser {
  margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--rule);
  font-size: 1rem; font-weight: 700; line-height: 1.8; color: var(--amber);
}
.sec--paper .case-teaser { border-top-color: var(--ink-rule); color: var(--gold-ink); }
.case-grid { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .case-item { grid-template-columns: 1fr; }
  .case-media { grid-row: auto; position: static; aspect-ratio: 2 / 1; margin-bottom: 24px; }
  .case-item__head, .case-title, .case-teaser, .case-grid, .case-links { grid-column: 1; }
}

/* =========================================================================
   セクション背景の写真
   本文が上に載るので、写真は沈めたうえで上下を隣のセクションへ溶かす。
   ========================================================================= */
.sec--photo { position: relative; isolation: isolate; overflow: clip; }
.page-head.sec--photo .sec__bg-img { opacity: calc(var(--bg-o, .52) * .85); }
.sec__bg { position: absolute; inset: 0; z-index: -1; }
.sec__bg-img {
  width: 100%; height: 100%; object-fit: cover;
  /* ぼかすことで照明のハイライトが散り、本文のコントラストを保てる */
  opacity: var(--bg-o, .52); filter: blur(5px) saturate(.9) brightness(.86); transform: scale(1.28);
}
.scrim--veil {
  background:
    linear-gradient(100deg,
      rgba(var(--navy-rgb),.95) 0%, rgba(var(--navy-rgb),.86) 34%, rgba(var(--navy-rgb),.66) 70%, rgba(var(--navy-rgb),.56) 100%),
    linear-gradient(to bottom,
      var(--navy) 0%, rgba(var(--navy-rgb),.2) 22%, rgba(var(--navy-rgb),.2) 74%, var(--navy) 100%);
}

@supports (animation-timeline: view()) {
  .sec__bg-img {
    animation: bg-parallax linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes bg-parallax {
    from { transform: scale(1.28) translateY(-8%); }
    to   { transform: scale(1.28) translateY(8%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sec__bg-img { animation: none !important; }
}

/* =========================================================================
   明色セクションの装飾 — ボールの弾道を測った図
   本文の上を線が横切ると読みにくいので、セクション下パディングの帯に収める。
   上端・左右端はマスクで消し、切り口を見せない。
   ========================================================================= */
.sec--paper, .article { position: relative; isolation: isolate; overflow: clip; }

/* 白面が寂しくならないよう、紙の色をごく薄く振っておく。線ではないので本文に干渉しない */
.sec--paper {
  background-image:
    radial-gradient(120% 90% at 88% 0%, rgba(var(--navy-rgb), .045), rgba(var(--navy-rgb), 0) 62%),
    radial-gradient(90% 70% at 6% 100%, rgba(var(--gold-rgb), .07), rgba(var(--gold-rgb), 0) 58%);
}

/* 明色面の背景。写真は見出し脇で見せ、本文側へ向かって消す。
   すべて独立した装飾レイヤーで、文字・ボタンの上には重ねない。 */
.paper-scene {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; user-select: none;
}
.paper-scene__photo {
  position: absolute; top: -28px; right: -3%;
  width: 70%; height: min(480px, 72%); object-fit: cover;
  opacity: .18; filter: grayscale(1); mix-blend-mode: multiply;
  mask-image: linear-gradient(90deg, transparent, #000 54%),
    linear-gradient(180deg, #000 18%, transparent 96%);
  mask-composite: intersect;
}
.paper-scene__lines {
  position: absolute; right: -180px; top: -160px;
  width: min(84vw, 1150px); height: auto;
  stroke: var(--navy); stroke-width: 1; opacity: .085;
  transform: rotate(-19deg);
  mask-image: linear-gradient(90deg, transparent 10%, #000 70%);
}
.paper-scene__lines * { vector-effect: non-scaling-stroke; }
.paper-scene--arena .paper-scene__lines {
  right: -240px; top: auto; bottom: -390px;
  stroke: var(--gold-ink); opacity: .14;
}
.paper-scene--court .paper-scene__lines { top: -210px; opacity: .075; }
.paper-scene--track .paper-scene__lines {
  right: -240px; top: -60px; stroke: var(--gold-ink); opacity: .12;
  transform: rotate(-28deg);
  mask-image: linear-gradient(180deg, #000, transparent 84%),
    linear-gradient(90deg, transparent, #000 72%);
  mask-composite: intersect;
}
.paper-scene--hoop .paper-scene__photo {
  width: 52%; height: 390px; opacity: .13;
  mask-image: linear-gradient(90deg, transparent, #000 66%),
    linear-gradient(180deg, #000, transparent 92%);
}
.paper-scene--hoop .paper-scene__lines {
  top: auto; bottom: -370px; opacity: .065;
}
@media (max-width: 640px) {
  .paper-scene__photo { width: 105%; height: 260px; right: -22%; opacity: .14; }
  .paper-scene__lines { width: 650px; right: -310px; top: -170px; opacity: .06; }
  .paper-scene--court .paper-scene__lines { top: -190px; opacity: .06; }
  .paper-scene--track .paper-scene__lines { right: -350px; top: -65px; opacity: .09; }
  .paper-scene--arena .paper-scene__lines { right: -340px; bottom: -310px; opacity: .1; }
  .paper-scene--hoop .paper-scene__photo { width: 90%; height: 240px; opacity: .11; }
  .paper-scene--hoop .paper-scene__lines { bottom: -300px; }
}

.trace {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  width: 100%;
  /* 120 / 1760 = 6.82vw。帯の高さがセクション下パディングを超えないようにする */
  height: min(clamp(48px, 6.82vw, 136px), var(--sec-y));
  pointer-events: none;
  color: var(--gold-ink);
  -webkit-mask-image:
    linear-gradient(to top, #000 0 90%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to top, #000 0 90%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.trace__base { stroke: currentColor; stroke-width: 1; opacity: .3; }
.trace__tick { stroke: currentColor; stroke-width: 1; opacity: .2; }
.trace__arc  { stroke: currentColor; stroke-width: 1.4; opacity: .34; }
.trace__arc--2 { opacity: .42; }
.trace__arc--3 { stroke-width: 1.8; opacity: .55; }
.trace__node, .trace__apex, .trace__origin { fill: currentColor; opacity: var(--dot, .55); }
.trace__node--3 { --dot: .85; }
.trace line, .trace path { vector-effect: non-scaling-stroke; }

/* 濃色面にも置けるようにしておく。装飾線はロゴ原色 */
.sec--dark .trace, .sec--deep .trace { color: var(--gold-brand); }

/* ---- 線を引く演出 ----
   view() のスクロール駆動は content-visibility や描画状態に左右されて
   引かれないことがあったため、IntersectionObserver（site.js）で確実に起こす。
   JS が無い場合は最初から引かれた状態で出る。 */
.js .trace__arc {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.15s cubic-bezier(.22, .68, .24, 1);
}
.js .trace__arc--2 { transition-delay: .1s; }
.js .trace__arc--3 { transition-delay: .2s; }
.js .trace.is-in .trace__arc { stroke-dashoffset: 0; }

.js .trace__node, .js .trace__apex { opacity: 0; transition: opacity .5s ease; }
.js .trace__node--1 { transition-delay: .8s; }
.js .trace__node--2 { transition-delay: .95s; }
.js .trace__apex    { transition-delay: 1.05s; }
.js .trace__node--3 { transition-delay: 1.2s; }
.js .trace.is-in .trace__node,
.js .trace.is-in .trace__apex { opacity: var(--dot, .55); }

@media (prefers-reduced-motion: reduce) {
  .js .trace__arc { stroke-dashoffset: 0; transition: none; }
  .js .trace__node, .js .trace__apex { opacity: var(--dot, .55); transition: none; }
}

/* =========================================================================
   Pattern 1 / Claude — 二つの現場
   中央に置いて繋ぐ図にしない。並置し、D5のマークをそれぞれの中に置く。
   ========================================================================= */
.fields {
  display: grid; grid-template-columns: 1.06fr 1fr;
  gap: 0; border-top: 1px solid var(--line-paper);
}
.field {
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 40px);
  border-bottom: 1px solid var(--line-paper);
}
.field--corporate { border-right: 1px solid var(--line-paper); background: rgba(var(--gold-rgb), .06); }

/* スポーツ側の地に敷いていた写真（スタジアム座席）は外した（2026-10-01 ユーザー指示）。 */
.field { position: relative; isolation: isolate; }

.field__mark {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 8px; margin-bottom: 18px;
  border: 1px solid var(--line-paper); border-radius: 999px;
  font-family: var(--f-ui); font-weight: 600; font-size: .75rem;
  letter-spacing: .12em; color: var(--gold-ink); background: var(--paper);
}
.field__mark img { width: 26px; height: auto; opacity: .9; }

.field__title { display: block; }
.field__en {
  display: block; font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.15; color: var(--ink);
}
.field__ja { display: block; margin-top: .5em; font-size: .9375rem; font-weight: 700; color: var(--gold-ink); }
.field__stance {
  margin-top: 1.1em; padding-top: 1.1em; border-top: 2px solid var(--ink);
  font-size: 1.0625rem; font-weight: 700; line-height: 1.85; color: var(--ink);
}
.field__lead { margin-top: 1.1em; font-size: .9375rem; line-height: 1.95; color: var(--ink-muted); }

.field__areas { margin-top: 1.6em; border-top: 1px solid var(--line-paper); }
.field__areas li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--line-paper);
  font-size: .875rem; font-weight: 500; color: var(--ink);
}
.field__areas .mi { font-size: 22px; color: var(--gold-ink); }

.field__entries { margin-top: 1.8em; display: grid; gap: 10px; }
.field__entry {
  display: block; padding: 14px 16px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--on-navy);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.field--sports .field__entry { background: transparent; color: var(--ink); }
.field__entry:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--paper); }
.field__entry-ja { display: block; font-size: .9375rem; font-weight: 700; }
.field__entry-ja::after { content: " →"; }
.field__entry-note { display: block; margin-top: .4em; font-size: .75rem; opacity: .8; }

/* ---------- 閲覧入口3つ ---------- */
.entry-rail {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); background: var(--navy);
}
.entry-rail__item {
  padding: clamp(16px, 1.9vw, 24px) clamp(14px, 1.8vw, 26px);
  border-left: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.entry-rail__item:first-child { border-left: 0; }
.entry-rail__item:hover, .entry-rail__item.is-current { background: var(--navy-soft); }
.entry-rail__en {
  display: block; font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.entry-rail__ja { display: block; margin-top: .5em; font-size: .9375rem; font-weight: 700; color: var(--on-navy); }
.entry-rail__ja::after { content: " →"; color: var(--gold); }

/* ---------- スポーツ側の事業領域（番号は振らない） ----------
   5件。2列に組むと最後の1件が余るので、5件目だけ全幅で受ける。
   企業側の01-05と違って順番のある連なりではないため、これでよい。 */
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.areas__item {
  display: grid; grid-template-columns: 34px 1fr; gap: 4px 16px; align-items: start;
  padding: clamp(22px, 2.4vw, 32px) clamp(16px, 2vw, 28px) clamp(22px, 2.4vw, 32px) 4px;
  border-bottom: 1px solid var(--line);
}
.areas__item:nth-child(odd) { border-right: 1px solid var(--line); }
/* 5件目は全幅。右罫線は外枠と重なるので出さない */
.areas__item:nth-child(5):last-child { grid-column: 1 / -1; border-right: 0; }
.areas .mi { grid-row: 1 / span 2; font-size: 30px; color: var(--gold-brand); }
.areas__title { font-size: 1.0625rem; font-weight: 700; line-height: 1.6; color: var(--on-navy); }
.areas__detail { font-size: .8125rem; line-height: 1.85; color: var(--on-navy-muted); }
.sec--paper .areas, .sec--paper .areas__item { border-color: var(--line-paper); }
.sec--paper .areas .mi { color: var(--gold-ink); }
.sec--paper .areas__title { color: var(--ink); }
.sec--paper .areas__detail { color: var(--ink-muted); }

/* ---------- 代表 ---------- */
.rep { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.rep__photo { margin: 0; overflow: clip; aspect-ratio: 4 / 5; background: var(--navy-soft); }
.rep__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.rep__name { margin-top: 20px; }
.rep__name b {
  display: block; font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: .07em; text-transform: uppercase; line-height: 1.15;
}
.rep__name-ja { display: block; margin-top: .5em; font-size: .9375rem; font-weight: 700; color: var(--gold-ink); }
/* 肩書きを先に置く並び（代表ページ）。肩書きの下に名前が続く */
.rep__name--role-first .rep__role { margin: 0 0 .8em; }
.rep__role {
  display: block; margin-top: .5em; font-family: var(--f-ui); font-weight: 600;
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted);
}
.sec--dark .rep__name-ja, .sec--deep .rep__name-ja { color: var(--gold); }
.sec--dark .rep__role, .sec--deep .rep__role { color: var(--on-navy-muted); }
.rep__positioning {
  font-family: var(--f-ui); font-weight: 700;
  /* 22字が1行に収まる上限。これを超えると折り返して2行になる（balance で均す） */
  font-size: clamp(1.5rem, 2.35vw, 2.1rem); line-height: 1.4; color: var(--ink);
  padding-bottom: .6em; border-bottom: 2px solid var(--ink);
}
.rep__bio { margin-top: 1.4em; font-size: 1rem; line-height: 2.05; color: var(--ink); max-width: 42em; }
.sec--dark .rep__positioning, .sec--deep .rep__positioning { color: var(--on-navy); border-bottom-color: var(--on-navy); }
.sec--dark .rep__bio, .sec--deep .rep__bio { color: var(--on-navy-muted); }

/* ---------- 代表ができること ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); margin-top: clamp(28px, 3vw, 40px); }
.caps__item {
  display: grid; grid-template-columns: 30px 1fr; gap: 4px 14px; align-content: start;
  padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.8vw, 24px) clamp(20px, 2.2vw, 28px) 2px;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
.caps__item:nth-child(3n) { border-right: 0; }
.caps .mi { grid-row: 1 / span 3; font-size: 26px; color: var(--gold-brand); }
.caps__en {
  font-family: var(--f-ui); font-weight: 700; font-size: .8125rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.caps__en, .caps__ja, .caps__text { min-width: 0; }
.caps__ja {
  font-size: .9375rem; font-weight: 700; line-height: 1.6; color: var(--on-navy); margin-top: .3em;
  word-break: normal; overflow-wrap: anywhere;
}
.caps__text { font-size: .8125rem; line-height: 1.85; color: var(--on-navy-muted); margin-top: .5em; }
/* 項目名だけの6項目（2026-09-28 説明文を外した）。アイコンと2行の名前が縦中央でそろう */
.caps--compact .caps__item { align-items: center; }
.caps--compact .mi { grid-row: 1 / span 2; }
.sec--paper .caps, .sec--paper .caps__item { border-color: var(--line-paper); }
.sec--paper .caps .mi, .sec--paper .caps__en { color: var(--gold-ink); }
.sec--paper .caps__ja { color: var(--ink); }
.sec--paper .caps__text { color: var(--ink-muted); }

/* ---------- 5つの専門テーマ（1ページ版・2026-09-28） ----------
   写真と本文を左右に置き、テーマごとに罫線で区切る。
   #<slug> で飛んできたとき、固定ヘッダーの下に隠れないよう scroll-margin を取る。 */
.tsec-list { border-top: 1px solid var(--rule); }
.tsec {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--rule);
  scroll-margin-top: 96px;
}
.tsec__media { margin: 0; overflow: clip; aspect-ratio: 16 / 10; background: var(--midnight); border: 1px solid var(--rule); }
.tsec__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.02) brightness(1.16); }
.tsec__title { display: block; }
.tsec__no {
  display: block; font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: .9; color: var(--gold-brand);
}
.tsec__en {
  display: block; margin-top: .5em;
  font-family: var(--f-ui); font-weight: 700; font-size: .875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.tsec__ja {
  display: block; margin-top: .4em;
  font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 900; line-height: 1.5; color: var(--warm);
}
.tsec__lead { margin-top: .9em; font-size: 1rem; line-height: 1.9; color: var(--gray); }
.tsec__offers { margin-top: 1.2em; border-top: 1px solid var(--rule); }
.tsec__offers li {
  position: relative; padding: 10px 0 10px 1.4em; border-bottom: 1px solid var(--rule);
  font-size: .9375rem; line-height: 1.8; color: var(--on-navy);
}
.tsec__offers li::before {
  content: ""; position: absolute; left: 0; top: 1.45em;
  width: 8px; height: 2px; background: var(--gold);
}

/* ---------- 二軸を紺の面に載せる（2026-10-01） ----------
   見出しは紺地に白、「One commitment」だけゴールド。カラムは紙の色のまま、文字色も紙の面のものを使う。 */
.sec-head__en em { font-style: normal; color: var(--gold-brand); }
.fields--on-navy .fields { background: var(--paper); color: var(--ink); }
.tsec__offers { margin-bottom: 0; }

/* ---------- 支援メニュー（権利元ページ・2026-10-01） ----------
   項目が12あるので、広い幅では2列に流す。 */
.rich--menu { max-width: none; }
.rich--menu ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
@media (max-width: 640px) { .rich--menu ul { grid-template-columns: 1fr; } }

/* ---------- 勉強会の写真2枚（企業の方へ・2026-10-01） ----------
   2枚の高さがそろうよう、列の比を元の幅の比（874:1066）にしている。 */
.rt-photos { margin-top: clamp(28px, 3.5vw, 48px); display: grid; grid-template-columns: 874fr 1066fr; gap: clamp(12px, 1.6vw, 20px); }
.rt-photos__item { margin: 0; overflow: clip; border: 1px solid var(--line-paper); background: var(--navy-deep); }
.rt-photos__item img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .rt-photos { grid-template-columns: 1fr; } }

/* ---------- 問い合わせフォーム ---------- */
.cform { display: grid; gap: clamp(24px, 3vw, 36px); justify-items: start; max-width: 860px; }
.cform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; width: 100%; }
.cform__row { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cform__row--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .cform__fields { grid-template-columns: 1fr; } }
.cform label { font-size: .875rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.cform__req { font-size: .75rem; font-weight: 700; color: var(--gold-ink); border: 1px solid var(--gold-ink); padding: 0 6px; line-height: 1.6; }
.cform input, .cform textarea {
  font: inherit; color: var(--ink); background: var(--on-navy);
  border: 1px solid var(--ink-muted); border-radius: 0; padding: .7em .85em; width: 100%; min-width: 0;
}
.cform textarea { resize: vertical; line-height: 1.8; }
.cform input:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
/* おとりの項目。人には見せず、機械だけが埋める（Formspree が、埋まっていた送信を捨てる） */
.cform .cform__hp { display: none; }
.cform button[disabled] { opacity: .6; cursor: default; }
.cform__status { font-weight: 700; color: var(--ink); }
/* 送り終えたら、項目とボタンを畳んで結果だけを残す（二重に送らせない） */
.cform[data-state="sent"] .cform__fields, .cform[data-state="sent"] button { display: none; }
.cform .case-note { margin-top: 0; }
/* フォームを設置するまでの案内（フォーム ID が入るまで） */
.cform-soon { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }

/* ---------- アイコンの統一 ---------- */
.mi { font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 40; }

@media (max-width: 900px) {
  .fields { grid-template-columns: 1fr; }
  .field--corporate { border-right: 0; }
  .entry-rail { grid-template-columns: 1fr; }
  .entry-rail__item { border-left: 0; border-top: 1px solid var(--line); }
  .entry-rail__item:first-child { border-top: 0; }
  .areas { grid-template-columns: 1fr; }
  .areas__item:nth-child(odd) { border-right: 0; }
  .rep { grid-template-columns: 1fr; }
  .rep__photo { max-width: 340px; aspect-ratio: 3 / 4; }
  .caps { grid-template-columns: 1fr; }
  .caps__item { border-right: 0; }
  .tsec { grid-template-columns: 1fr; }
}