/* ============================================================
   株式会社 KIORI ARCHITECTS — 高級注文住宅・建築設計（架空デモ）
   Phase 03 Design System — トークンと基本コンポーネント

   設計コンセプト「図録（カタログ・レゾネ）としての企業サイト」
   住宅は写真で選ばれる。UIは写真の額縁に徹し、自己主張しない。
   罫線・番号・キャプション・余白という印刷物の語彙だけで構成する。

   既存デモとの差別化（同じ制作者だと分からないことがデモの目的）：
     tax = 温白 + 明朝 + 真鍮   / 企業LPの背骨
     mfg = 鋼黒 + 極太ゴシック + 産業黄 / 仕様表
     KIORI = 生成り + 明朝1書体 + アクセント色なし / 作品集の索引

   ※ --radius と --shadow はここに「定義しない」。
     角丸カード・シャドウ・グラデーションを後工程から構造的に排除するため。
     アクセント色も定義しない。色を持つのは写真だけ。
   ============================================================ */

/* Webフォントの <link> は _partials/head.html に置く（Phase 04）。
   @import は読み込みを直列化するため使わない。

   ── 1書体1ウェイトの原則（Phase 03 で実測して決定）──────────
   Google Fonts の実測値（全サブセット合計）:
     Zen Old Mincho 400+500 … 244 subsets / 5,281 KB
     Zen Old Mincho 400のみ … 122 subsets / 2,584 KB  ← 採用
     EB Garamond 400+italic …  14 subsets /   254 KB
     EB Garamond 400のみ    …   7 subsets /   131 KB  ← 採用
   和文はウェイトを1つ増やすだけで実質倍になる。
   図録・作品集はもともと明朝1ウェイトを級数と字送りで打ち分ける組み方なので、
   単一ウェイトは妥協ではなく様式として正しい。見出しの強さは太さではなく
   サイズと letter-spacing で作る。
   （tax は 明朝3 + ゴシック3 + Jost 3 の計9ウェイトを読む。ここも差になる） */

:root {
  /* ── 色：彩色なし。写真が唯一の色 ───────────────────── */
  --paper:   #fbfaf7;   /* 地。生成り。tax の #f7f5f1 より明るく黄味を抑え石灰寄りに */
  --paper-2: #f2efe9;   /* 反転セクション（石） */
  --paper-3: #e8e3d9;   /* 罫・帯 */
  --line:    #ddd8ce;   /* 罫線 */
  --muted:   #6f6a61;   /* キャプション・年号。Phase 09 で実測して変更（下記）*/
  /* コントラスト実測（WCAG 2.1 相対輝度比）：
       旧 #8b857c on --paper …… 3.50:1 → AA(4.5:1) 不合格のため不採用
       新 #6f6a61 on --paper …… 5.15:1 合格
       新 #6f6a61 on --paper-2 … 4.68:1 合格
       新 #6f6a61 on --paper-3 … 4.20:1 → 不足。--paper-3 の上に本文級の文字は置かない
     色相・彩度は据え置き、明度だけを落としているので図録の調子は変えていない。 */
  --sumi-2:  #55504a;   /* 副文 */
  --sumi:    #1c1a17;   /* 本文。tax の濃紺に対し、温かい墨 */

  /* ── 書体 ───────────────────────────────────────────── */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --garamond: "EB Garamond", "Zen Old Mincho", serif;
  /* UI微細文字はWebフォントを追加せずシステムに任せる（差別化と軽量化を同時に満たす） */
  --ui: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;

  /* ── 文字サイズ ─────────────────────────────────────── */
  --fs-cap:  .75rem;
  --fs-sm:   .85rem;
  --fs-body: .96rem;
  --fs-lead: 1.06rem;
  --fs-h3:   clamp(1.05rem, 2vw,   1.25rem);
  --fs-h2:   clamp(1.35rem, 3.2vw, 2rem);
  --fs-h1:   clamp(1.7rem,  5vw,   2.9rem);
  --fs-hero: clamp(2rem,    7vw,   4rem);

  /* ── 余白と幅 ───────────────────────────────────────── */
  --sec-y:     clamp(88px, 12vw, 176px);   /* セクション余白。余白＝この業種の格 */
  --gut:       clamp(20px, 5vw, 44px);
  --wrap:      1360px;   /* 写真コンテナ */
  --wrap-text: 40em;     /* 本文の最適行長 */
  --hdr-h:     76px;

  /* ── 動き ───────────────────────────────────────────── */
  --ease: cubic-bezier(.16, .68, .28, 1);
}

/* ── リセット ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--sumi);
  font-family: var(--mincho);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.95;              /* 和文は行間を広く取るほど品よく見える */
  letter-spacing: .04em;
  font-feature-settings: "palt";  /* 約物詰め。和文はこの有無で別物になる */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p   { margin: 0; }
figure { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;               /* 単一ウェイト。強さは級数と字送りで作る */
  line-height: 1.6;
  letter-spacing: .06em;          /* 印刷物の組版感 */
  text-wrap: balance;             /* 「ます。」だけが次行に落ちるのを防ぐ */
  /* 和文は任意の位置で折り返せてしまうため、狭い画面で「土/地」のように
     語の途中で切れる。対応ブラウザでは文節単位で折り返す（未対応は無視される）。 */
  word-break: auto-phrase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

table { border-collapse: collapse; width: 100%; }

/* キーボード操作。アクセント色を持たないので墨のアウトラインで示す */
:focus-visible { outline: 2px solid var(--sumi); outline-offset: 3px; }

/* 固定ヘッダーにアンカー先が潜らない */
section[id], article[id] { scroll-margin-top: calc(var(--hdr-h) + 16px); }

/* ── レイアウト ───────────────────────────────────────── */
.wrap  { width: min(100% - var(--gut) * 2, var(--wrap));      margin-inline: auto; }
.measure { width: min(100% - var(--gut) * 2, var(--wrap-text)); margin-inline: auto; }

.sec    { padding-block: var(--sec-y); }
.sec-2  { background: var(--paper-2); }

/* 全幅の写真は、幅を制限していないセクションの直下に置いて実現する。
   100vw を使う .bleed は、スクロールバーぶんだけ横にはみ出すため採用しない。 */

/* 表は自身のコンテナ内で横スクロールさせ、本文を横に流さない */
.scroll-x { overflow-x: auto; }

/* ── 罫線見出し ───────────────────────────────────────
   英字ラベル ＋ 罫 ＋ 日本語見出し。図録の柱として全ページで使う */
.rule {
  display: flex;
  align-items: center;
  gap: 1em;
  font-family: var(--garamond);
  font-size: var(--fs-sm);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sumi-2);
}
.rule .no {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.h-sec  { margin-top: 1.6rem; }
.lede {
  margin-top: 1.5rem;
  max-width: var(--wrap-text);
  color: var(--sumi-2);
  font-size: var(--fs-lead);
  text-wrap: pretty;
}

/* ── 作品索引 ─────────────────────────────────────────
   グリッドではなく索引の一行。番号・作品名・所在地・竣工年 */
.idx {
  display: grid;
  gap: .4rem 2rem;
  padding-block: 2.2rem;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.idx:last-child { border-bottom: 1px solid var(--line); }

.idx-no {
  font-family: var(--garamond);
  font-size: var(--fs-sm);
  letter-spacing: .18em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.idx-name { font-size: var(--fs-h3); }
.idx-meta {
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  /* 「木造平屋建」が「木造平屋／建」と割れないよう、文節で折り返す */
  word-break: auto-phrase;
}

/* 768px以上で非対称2列。均等割りにすると索引ではなく表に見える */
@media (min-width: 768px) {
  /* 右列は「東京都／2024／木造2階建／118.6㎡」が広い画面では1行に収まる幅。
     狭い画面では作品名の側を潰さないよう、下限で止める（2行になってよい）。 */
  .idx { grid-template-columns: 4rem minmax(0, 1fr) clamp(15.5rem, 22vw, 20rem); }
}

/* ── 写真とキャプション ───────────────────────────────── */
.fig { display: flex; flex-direction: column; gap: .9rem; }
.fig img { width: 100%; }

.cap {
  font-family: var(--ui);
  font-size: var(--fs-cap);
  line-height: 1.85;
  letter-spacing: .06em;
  color: var(--muted);
  max-width: 34em;
}

/* SPでは横長写真の被写体が潰れるため、縦長に寄せる */
.fig-hero img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 768px) {
  .fig-hero img { aspect-ratio: 16 / 9; }
}

/* ── ボタン：枠線と墨ベタの2種のみ。hover は反転 ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9em;
  min-height: 44px;               /* タップ領域の下限 */
  padding: .95em 2.2em;
  font-family: var(--ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .12em;
  border: 1px solid var(--sumi);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn-fill { background: var(--sumi); color: var(--paper); }
.btn-fill:hover { background: transparent; color: var(--sumi); }

.btn-line { background: transparent; color: var(--sumi); }
.btn-line:hover { background: var(--sumi); color: var(--paper); }

/* 罫線だけの控えめな導線。矢印は hover でわずかに進む */
.link-q {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: 44px;
  font-family: var(--ui);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
  transition: border-color .35s var(--ease);
}
.link-q:hover { border-bottom-color: var(--sumi); }
.link-q .arw { transition: transform .35s var(--ease); }
.link-q:hover .arw { transform: translateX(4px); }

/* ── 仕様表：作品の構造・規模・竣工 ───────────────────── */
.spec-tbl {
  font-family: var(--ui);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  /* 罫を紙幅いっぱいに引くと、「東京都」の右に1000px以上の余白が残る。
     読める行長で止めて、図録の表として成立させる。 */
  max-width: 46em;
}
.spec-tbl th,
.spec-tbl td {
  text-align: left;
  padding: .95em 1em .95em 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-tbl th {
  width: 9em;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .08em;
  white-space: nowrap;
}

/* 狭い画面では項目名と値を縦に積む。
   9emの項目名を保ったままでは、375px で値の側が潰れてしまうため。 */
@media (max-width: 599px) {
  .spec-tbl th, .spec-tbl td { display: block; width: auto; }
  .spec-tbl th { border-bottom: 0; padding: .95em 0 .1em; }
  .spec-tbl td { padding-top: 0; }
}

/* ── DEMO 表記：架空であることを明示する ───────────────
   装飾ではなく告知なので、UIフォントで淡々と置く */
.demo-tag {
  display: inline-block;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sumi-2);
  border: 1px solid var(--line);
  padding: .25em .8em;
}
.demo-note {
  font-family: var(--ui);
  font-size: var(--fs-cap);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--sumi-2);
  background: var(--paper-2);
  border-left: 2px solid var(--line);
  padding: 1em 1.2em;
  max-width: var(--wrap-text);
}

/* ── 出現アニメーション ───────────────────────────────
   1種類だけ。パララックス・Ken Burns・カウントアップは使わない */
.rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.rv.on { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .08s; }
.rv[data-d="2"] { transition-delay: .16s; }
.rv[data-d="3"] { transition-delay: .24s; }

@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 .rv より詳細度が低いと負けて隠れたままになるので、同じ形で打ち消す */
  .rv, .js .rv { opacity: 1; transform: none; }
}

/* ── スクリーンリーダー専用 ───────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 本文へスキップ。キーボード操作時のみ現れる */
.skip {
  position: absolute;
  left: var(--gut); top: -100%;
  z-index: 200;
  background: var(--sumi); color: var(--paper);
  font-family: var(--ui); font-size: var(--fs-sm);
  padding: .8em 1.4em;
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }


/* ============================================================
   Phase 04 — 共通コンポーネント（header / footer / cta / 索引）
   ============================================================ */

/* ── ヘッダー ─────────────────────────────────────────
   fixed ではなく sticky。fixed は本文に padding を足す必要があり、
   全幅写真との重なり事故を生みやすい */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hdr-in {
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
  min-height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  padding-block: 13px;           /* 文字高18px＋上下13pxで44pxのタップ領域にする。
                                    align-items:baseline を保つため min-height ではなく余白で確保 */
  gap: .6em;
  font-family: var(--garamond);
  font-size: 1.12rem;
  letter-spacing: .2em;
  line-height: 1;
}
.logo-sub {
  font-size: .62rem;
  letter-spacing: .3em;
  color: var(--muted);
}

/* ── ナビゲーション（Desktop）─────────────────────────── */
.nav { display: flex; align-items: center; gap: 2.4rem; }
.nav-list { display: flex; align-items: center; gap: 2rem; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ui);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav-link:hover { border-bottom-color: var(--sumi); }
.nav-cta { padding: .8em 1.6em; }

/* ハンバーガー。Desktop では出さない */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sumi);
}
.burger-bars,
.burger-bars::before,
.burger-bars::after {
  display: block;
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.burger-bars { position: relative; }
.burger-bars::before,
.burger-bars::after { content: ""; position: absolute; left: 0; }
.burger-bars::before { top: -6px; }
.burger-bars::after  { top:  6px; }

/* 開いている間は × に変える */
.burger[aria-expanded="true"] .burger-bars { background: transparent; }
.burger[aria-expanded="true"] .burger-bars::before { transform: translateY(6px)  rotate(45deg); }
.burger[aria-expanded="true"] .burger-bars::after  { transform: translateY(-6px) rotate(-45deg); }

.drawer-veil { display: none; }

/* ── ナビゲーション（Mobile ドロワー）───────────────── */
@media (max-width: 899px) {
  .burger { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--hdr-h) 0 0 auto;
    width: min(84vw, 340px);
    z-index: 110;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 2rem var(--gut) 3rem;
    background: var(--paper);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    /* visibility を「時間をかけて」変えると、開いた瞬間はまだ hidden のままで、
       中の最初のリンクが focus() を受け取れない（フォーカスがハンバーガーに残る）。
       開くときは 0s で即 visible にし、閉じるときだけ 0.38s 遅らせて
       スライドアウトが見えるようにする。 */
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link {
    min-height: 56px;              /* 指で押す領域を広く取る */
    font-size: var(--fs-body);
    border-bottom: 1px solid var(--line);
  }
  .nav-link:hover { border-bottom-color: var(--line); }
  .nav-cta { margin-top: 2rem; width: 100%; }

  /* 開閉は JS が body に付ける .nav-open で切り替える。
     .nav は .burger より前にあるため隣接セレクタは使えない */
  body.nav-open .nav {
    transform: none;
    visibility: visible;
    transition: transform .38s var(--ease), visibility 0s linear 0s;
  }

  /* ベールは .hdr（z-index 100）より下に置く。
     ドロワーは .hdr の中にあるので、ベールが上に来ると自分が覆われてしまう */
  .drawer-veil {
    display: block;
    position: fixed;
    inset: var(--hdr-h) 0 0;
    z-index: 90;
    background: var(--sumi);
    opacity: .28;
  }
  .drawer-veil[hidden] { display: none; }
}

/* ドロワー展開中の背景スクロール固定 */
body.nav-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* body を fixed にすると文書がスクロールしなくなり、sticky が効かなくなる。
   そのままだと、スクロール途中でドロワーを開いたときにヘッダー（＝閉じるボタン）が
   画面の上へ消える。開いている間だけ fixed に切り替え、
   ヘッダーが流れから抜けたぶんを main の上に足して位置を保つ。 */
body.nav-open .hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
}
body.nav-open #main { padding-top: calc(var(--hdr-h) + 1px); }

/* ── フッター ─────────────────────────────────────────── */
.ftr {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 7vw, 88px) 0;
}
.ftr-in {
  display: grid;
  gap: 2.5rem;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.ftr-tag {
  margin-top: .4rem;             /* .logo に付けた padding 13px と合わせて約1rem */
  font-size: var(--fs-sm);
  color: var(--sumi-2);
  letter-spacing: .1em;
}
.ftr-nav { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; }
.ftr-list { display: flex; flex-direction: column; gap: .2rem; }
.ftr-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ui);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.ftr-list a:hover { border-bottom-color: var(--sumi); }

@media (min-width: 900px) {
  .ftr-in { grid-template-columns: 1fr auto; align-items: start; }
}

/* 架空デモ表示。淡いが埋もれない濃度で置く */
.ftr-demo {
  border-top: 1px solid var(--line);
  padding-block: 1.8rem 2.4rem;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--sumi-2);
}
.ftr-copy {
  margin-top: .8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── 共通CTA ──────────────────────────────────────────── */
.cta { background: var(--paper-2); }
.cta-h { max-width: 16em; }
.cta-act { margin-top: 2.6rem; }

/* ── 作品索引の追補（work-item.html 用）───────────────── */
.idx-link {
  display: inline-block;
  padding-block: .55rem;         /* 見出し1行(約27px)＋上下で44pxを満たす */
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.idx-link:hover { border-bottom-color: var(--sumi); }
.idx-theme {
  margin-top: .7rem;
  font-size: var(--fs-sm);
  color: var(--sumi-2);
  max-width: 32em;
  text-wrap: pretty;
}


/* ============================================================
   Phase 06 / 07 — ページ実装
   カード・影・角丸・グラデーションは使わない。
   階層は「罫線・番号・級数・字送り・余白」だけでつくる。
   ============================================================ */

/* ── 画像プレースホルダ ───────────────────────────────
   生成画像7枚とUnsplash素材の支給待ち。
   実ファイルが置かれれば build.py が <img> を出すので、この下地は消える。
   架空の建築写真をCSSで捏造はしない。面と、待ちであることの明示だけ。 */
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5em;
  width: 100%;
  background: var(--paper-3);
  border: 1px solid var(--line);
  color: var(--sumi-2);
  text-align: center;
  padding: 1.5rem;
}
.ph-l {
  font-family: var(--garamond);
  font-size: var(--fs-sm);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.ph-p {
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .04em;
  word-break: break-all;
}

/* 画像・プレースホルダ共通の判型。差し替え時にレイアウトがずれない */
.sh-hero, .sh-work, .sh-mat, .sh-wide { width: 100%; object-fit: cover; }
.sh-hero { aspect-ratio: 3 / 4; }
.sh-work { aspect-ratio: 4 / 3; }
.sh-mat  { aspect-ratio: 1 / 1; }
.sh-wide { aspect-ratio: 3 / 2; }
@media (min-width: 768px) {
  .sh-hero { aspect-ratio: 16 / 9; }
}

/* ── 出現アニメーション：JSがある時だけ隠す ─────────────
   head の1行が付ける .js で受ける。JS無効時は最初から見えている */
.js .rv { opacity: 0; transform: translateY(12px); }
.js .rv.on { opacity: 1; transform: none; }
:root:not(.js) .rv { opacity: 1; transform: none; }

/* ── 見出し・本文の補助 ───────────────────────────────── */
.h-sub {
  font-size: var(--fs-h3);
  letter-spacing: .1em;
}
.body-txt {
  margin-top: 1.4rem;
  max-width: var(--wrap-text);
  color: var(--sumi-2);
  text-wrap: pretty;
}
.act { margin-top: 2.8rem; }
.sec-tight { padding-block: clamp(56px, 8vw, 104px); }

/* 本文2段。均等2列にせず、リードを先に読ませる */
.cols { margin-top: 0; }
@media (min-width: 1024px) {
  .cols {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0 clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
  .cols .lede, .cols .body-txt { margin-top: 1.5rem; max-width: 34em; }
}

/* ── TOP：Hero ────────────────────────────────────────
   ローディング演出もパララックスも使わない。組版だけで表紙にする */
.hero { padding-top: clamp(56px, 9vw, 120px); }
.hero-in { padding-bottom: clamp(40px, 6vw, 72px); }
.hero-en {
  font-family: var(--garamond);
  font-size: var(--fs-sm);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-h {
  margin-top: 1.8rem;
  font-size: var(--fs-hero);
  line-height: 1.45;
  letter-spacing: .09em;
}
.hero-lede {
  margin-top: 2.2rem;
  max-width: 32em;
  color: var(--sumi-2);
  font-size: var(--fs-lead);
  text-wrap: pretty;
}
.hero-fig { margin-block: 0; }
/* 大きな画面では16:9だと主写真だけで一画面を使い切ってしまう。
   横長に振って、下のセクションの気配を残す */
@media (min-width: 1200px) {
  .hero-fig .sh-hero { aspect-ratio: 21 / 9; }
}
/* 狭い画面は 3:4 に切るため、中央だけを取ると主題（光の筋）が枠外へ落ちる。
   切り出しの基準を右寄りにして、光が残るようにする。 */
@media (max-width: 767px) {
  .hero-fig .sh-hero { object-position: 66% 50%; }
}
.hero .demo-note { margin-top: clamp(32px, 5vw, 56px); }

/* ── 索引・図版の並び ─────────────────────────────────── */
.idx-list  { margin-top: clamp(32px, 5vw, 56px); }
.jidx-list { margin-top: clamp(24px, 4vw, 40px); }

/* ── Approach / Service の番号つき項目 ─────────────────── */
.apr { margin-top: clamp(32px, 5vw, 56px); }
.apr-item {
  display: grid;
  gap: .2rem 2.5rem;
  padding-block: 2.4rem;
  border-top: 1px solid var(--line);
}
.apr-item:last-child { border-bottom: 1px solid var(--line); }
.apr-no {
  font-family: var(--garamond);
  font-size: var(--fs-sm);
  letter-spacing: .2em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.apr-h { font-size: var(--fs-h3); }
.apr-txt {
  margin-top: .9rem;
  color: var(--sumi-2);
  font-size: var(--fs-sm);
  max-width: 36em;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .apr-item { grid-template-columns: 4rem minmax(0, 1fr); }
}

/* ── 素材 ─────────────────────────────────────────────── */
.mat-grid {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .mat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.mat-label {
  margin-top: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: .9em;
  border-bottom: 1px solid var(--line);
  padding-bottom: .6rem;
}
.mat-jp { font-size: var(--fs-h3); letter-spacing: .12em; }
.mat-en {
  font-family: var(--garamond);
  font-size: var(--fs-cap);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.mat .cap { margin-top: .9rem; }

/* ── 会社概要表 ───────────────────────────────────────── */
.co-tbl, .hist-tbl { margin-top: clamp(28px, 4vw, 44px); max-width: 46em; }
.hist-tbl th { width: 6em; }

/* ── 下層ページの見出し部 ─────────────────────────────── */
.phd {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.phd .rule { margin-top: 2rem; }
.phd-h { margin-top: 1.6rem; font-size: var(--fs-h1); }
.phd .lede { margin-top: 1.8rem; }
.phd .demo-note { margin-top: 2.4rem; }

/* パンくず。区切りは疑似要素で、リンクの読み上げに混ぜない */
.crumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2em 1em;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .06em;
  color: var(--muted);
}
.crumb-list li { display: flex; align-items: center; gap: 1em; }
.crumb-list li + li::before { content: "／"; color: var(--muted); }
.crumb-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* タップ領域の下限 */
  color: var(--sumi-2);
  border-bottom: 1px solid transparent;
}
.crumb-list a:hover { border-bottom-color: var(--sumi); }

/* ── 施工事例の図版一覧（/works/）──────────────────────── */
.plate-grid {
  display: grid;
  gap: clamp(44px, 6vw, 76px) clamp(24px, 3vw, 40px);
}
@media (min-width: 768px) {
  .plate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plate-link { display: block; }
.plate-body { margin-top: 1.4rem; }
.plate-no {
  font-family: var(--garamond);
  font-size: var(--fs-sm);
  letter-spacing: .2em;
  color: var(--muted);
}
.plate-name {
  margin-top: .5rem;
  font-size: var(--fs-h3);
  border-bottom: 1px solid transparent;
  display: inline-block;
  transition: border-color .3s var(--ease);
}
.plate-link:hover .plate-name { border-bottom-color: var(--sumi); }
.plate-theme {
  margin-top: .8rem;
  color: var(--sumi-2);
  font-size: var(--fs-sm);
  max-width: 30em;
  text-wrap: pretty;
}
.plate-meta {
  margin-top: 1rem;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  word-break: auto-phrase;
}

/* ── 施工事例の詳細 ───────────────────────────────────── */
.phd-work { padding-bottom: clamp(28px, 4vw, 44px); }
.work-theme {
  margin-top: 1.8rem;
  max-width: 30em;
  font-size: var(--fs-lead);
  color: var(--sumi-2);
  text-wrap: pretty;
}
.work-meta {
  margin-top: 1.4rem;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  word-break: auto-phrase;
}
.work-hero { margin-top: clamp(28px, 4vw, 44px); }

.pts { margin-top: clamp(32px, 5vw, 56px); }
.pt {
  padding-block: 2.2rem;
  border-top: 1px solid var(--line);
}
.pt:last-child { border-bottom: 1px solid var(--line); }
.pt-h { font-size: var(--fs-h3); }
.pt-txt {
  margin-top: .9rem;
  color: var(--sumi-2);
  font-size: var(--fs-sm);
  max-width: 40em;
  text-wrap: pretty;
}

/* 前後送り */
.wnav {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--ui);
  font-size: var(--fs-sm);
  letter-spacing: .06em;
}
.wnav-item {
  display: flex;
  align-items: center;
  gap: .9em;
  min-height: 64px;
  padding: 1rem var(--gut);
  border-bottom: 1px solid var(--line);
}
.wnav-item:last-child { border-bottom: 0; }
.wnav-next { justify-content: flex-end; text-align: right; }
.wnav-all { justify-content: center; color: var(--sumi-2); }
.wnav-item:hover { background: var(--paper-2); }
.wnav-no {
  font-family: var(--garamond);
  letter-spacing: .18em;
  color: var(--muted);
  margin-right: .9em;
}
@media (min-width: 768px) {
  .wnav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100% - var(--gut) * 2, var(--wrap));
    margin-inline: auto;
  }
  .wnav-item { border-bottom: 0; border-right: 1px solid var(--line); }
  .wnav-item:last-child { border-right: 0; }
}

/* ── 読みものの索引 ───────────────────────────────────── */
.jidx {
  display: grid;
  gap: .6rem 2rem;
  padding-block: 2.2rem;
  border-top: 1px solid var(--line);
}
.jidx:last-child { border-bottom: 1px solid var(--line); }
.jidx-meta {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.jidx-cat { color: var(--sumi-2); }
.jidx-title { font-size: var(--fs-h3); }
.jidx-lede {
  margin-top: .8rem;
  color: var(--sumi-2);
  font-size: var(--fs-sm);
  max-width: 36em;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .jidx { grid-template-columns: 12rem minmax(0, 1fr); }
}

/* ── 記事本文 ─────────────────────────────────────────── */
.post-meta {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  margin-top: 2rem;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .1em;
  color: var(--muted);
}
.post-h { max-width: 20em; }

.prose { max-width: var(--wrap-text); }
.prose > * + * { margin-top: 1.6rem; }
.prose h2 {
  margin-top: 3.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-h3);
}
.prose p { color: var(--sumi-2); text-wrap: pretty; }
.prose ul { margin-top: 1.2rem; color: var(--sumi-2); }
.prose li {
  position: relative;
  padding-left: 1.4em;
  margin-top: .6rem;
}
.prose li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}
.prose-date {
  margin-top: 3rem;
  font-family: var(--ui);
  font-size: var(--fs-cap);
  color: var(--muted);
}

/* ── 設計者紹介 ───────────────────────────────────────── */
.prof-list {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
@media (min-width: 768px) {
  .prof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prof { border-top: 1px solid var(--line); padding-top: 2rem; }
.prof-role {
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .12em;
  color: var(--muted);
}
.prof-name {
  margin-top: .9rem;
  font-size: var(--fs-h3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em 1em;
}
.prof-en {
  font-family: var(--garamond);
  font-size: var(--fs-cap);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.prof-txt {
  margin-top: 1.2rem;
  color: var(--sumi-2);
  font-size: var(--fs-sm);
  text-wrap: pretty;
}

/* ── 設計の流れ ───────────────────────────────────────── */
.flow { margin-top: clamp(32px, 5vw, 56px); }
.flow-item {
  display: grid;
  gap: .4rem 2.5rem;
  padding-block: 2.2rem;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.flow-item:last-child { border-bottom: 1px solid var(--line); }
.flow-no {
  font-family: var(--garamond);
  font-size: var(--fs-sm);
  letter-spacing: .2em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.flow-h { font-size: var(--fs-h3); }
.flow-txt {
  margin-top: .8rem;
  color: var(--sumi-2);
  font-size: var(--fs-sm);
  max-width: 34em;
  text-wrap: pretty;
}
.flow-term {
  font-family: var(--ui);
  font-size: var(--fs-cap);
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .flow-item { grid-template-columns: 4rem minmax(0, 1fr) 8rem; }
  .flow-term { text-align: right; }
}

/* ── DEMO 表記の並び ──────────────────────────────────── */
.demo-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .9em 1.2em;
}
.demo-note-txt { flex: 1 1 18em; }
/* 書体は1ウェイトしか読んでいないので、strong を太字で示さない。
   合成太字になって濁るため、字送りと下線で「そこだけ強い」ことを伝える。 */
.demo-note-txt strong {
  font-weight: inherit;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--line);
}
.demo-note-lead { margin-top: 2.4rem; }

/* ── フォーム ─────────────────────────────────────────── */
.form-wrap {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 1024px) {
  .form-wrap {
    /* フォーム側を 1fr にすると、1440px で入力欄が900px幅まで伸びて
       1行入力なのに視線の移動が大きくなる。上限を決めて組版として止める。 */
    grid-template-columns: minmax(0, 20rem) minmax(0, 40rem);
    gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
}
.form-side .body-txt { font-size: var(--fs-sm); }

.cinfo {
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--ui);
  font-size: var(--fs-sm);
}
.cinfo dt {
  padding-top: 1.1rem;
  font-size: var(--fs-cap);
  letter-spacing: .12em;
  color: var(--muted);
}
.cinfo dd {
  margin: .3rem 0 0;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.cinfo-sub {
  display: block;
  font-size: var(--fs-cap);
  color: var(--muted);
  letter-spacing: .04em;
}

.form { font-family: var(--ui); }
.form-req {
  font-size: var(--fs-cap);
  color: var(--sumi-2);
  letter-spacing: .06em;
}
.field { margin-top: 2.2rem; }
.lbl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8em;
  font-size: var(--fs-sm);
  letter-spacing: .1em;
}
.req {
  font-size: var(--fs-cap);
  letter-spacing: .12em;
  color: var(--paper);
  background: var(--sumi-2);
  padding: .15em .7em;
}
.inp {
  display: block;
  width: 100%;
  margin-top: .9rem;
  min-height: 52px;              /* 指で押せる高さ。44pxを下回らない */
  padding: .9em 1em;
  font-family: inherit;
  font-size: 1rem;               /* iOS の自動ズームを避けるため16px相当を下回らない */
  color: var(--sumi);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  transition: border-color .3s var(--ease);
}
.inp:hover { border-color: var(--sumi-2); }
.inp:focus { border-color: var(--sumi); }
.ta { min-height: 12rem; line-height: 1.9; resize: vertical; }
.sel-wrap { display: block; position: relative; margin-top: .9rem; }
.sel-wrap .inp { margin-top: 0; }
.sel { appearance: none; background-image: none; padding-right: 3em; }
/* 画像もアイコンフォントも使わず、文字で開閉記号を置く */
.sel-wrap::after {
  content: "▼";
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  font-size: .6em;
  color: var(--muted);
  pointer-events: none;
}

.hint {
  margin-top: .7rem;
  font-size: var(--fs-cap);
  line-height: 1.8;
  color: var(--sumi-2);
}
/* エラーは色だけに頼らない。記号と文言、aria-invalid の三つで伝える */
.err {
  margin-top: .7rem;
  font-size: var(--fs-cap);
  line-height: 1.8;
  color: var(--sumi);
  border-left: 3px solid var(--sumi);
  background: var(--paper-2);
  padding: .6em .9em;
}
.err::before { content: "✕　"; }
.inp[aria-invalid="true"] { border-color: var(--sumi); border-width: 2px; }

.fset { border: 0; padding: 0; margin-inline: 0; }
.radios {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
}
.rd, .ck {
  display: flex;
  align-items: flex-start;
  gap: .8em;
  min-height: 44px;
  padding-block: .5rem;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.rd input, .ck input {
  width: 20px; height: 20px;
  margin: .35em 0 0;
  accent-color: var(--sumi);
  flex: none;
}
.ck-link {
  display: inline-block;
  padding-block: .5rem;          /* 行内リンクだが指で押せる高さにする */
  border-bottom: 1px solid var(--line);
}
.ck-link:hover { border-bottom-color: var(--sumi); }
.ck .req { margin-left: .8em; }

.form-act { margin-top: 3rem; }
.form-act .btn { width: 100%; }
@media (min-width: 600px) {
  .form-act .btn { width: auto; min-width: 16rem; }
}

/* 送信操作の結果表示（実送信はしない） */
.form-res {
  margin-top: 1.8rem;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--sumi);
  background: var(--paper-2);
  border-left: 3px solid var(--sumi);
  padding: 1.2em 1.4em;
}
.form-res[hidden] { display: none; }

/* ── 404 ──────────────────────────────────────────────── */
.nf { padding-block: clamp(72px, 12vw, 160px); }
.nf-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: flex-start;
}