/* features-th13.css — 和風縦書きセクション。土台は module-base.css（旧テーマ族）。
 *
 * ── 2026-09-15 調整 ──────────────────────────────────────────────────────
 * 構図（地の写真の上に中央の写真1枚、その左右に縦書きで 本文＝左 / 見出し＝右）は受領時のまま。
 * 足した意匠は「地のベール」1つだけで、罫・枠・影・角丸は1つも足していない。
 * 以下はすべて実測で出た欠陥への対応。
 *
 *  1. 本文が写真の裏に潜り、768px 以上で1文字も読めなかった。
 *     本文は絶対配置だが重なり順の指定が無く、写真側だけが重なり順を持っていたため写真が後に描かれていた
 *     （実測の覆い率: 768/769/1280/1600/1920px で 100%、900px で 80.7〜91.2%、1024px で 49.2〜76.9%）。
 *     README の定義文「縦書きの見出しと本文を右端・左端に立て」が PC で一度も成立していない。
 *     DOM を触らずに 2段の grid で『本文 / 写真 / 見出し』の3列に分ける。
 *  2. 見出しの可読性が写真の明るさに完全に依存していた。2026-08-19 に足された黒スクリムは
 *     セクションの擬似要素にあり、文字が乗っている写真の上には1枚も掛かっていなかった。
 *     実描画画素の実測で、明るい写真の案件は 768〜1920px で 1.09:1 / 375px で 3.63:1（どちらも AA 未達）。
 *     背景スロットを「地のベール」で沈め、文字はその地の上に置く。ベールの濃度は
 *     「背景スロットが真っ黒な案件」×「最も明るい見出しインク（淡色ベージュ）」から逆算した。
 *     README の仕様文は背景を「和紙・木目」と書くが、同じ README のファイル表は
 *     「本番は自動生成写真に置換」と明記しているので、運用欄を正として「どんな写真でも読める」側に寄せた。
 *  3. 写真枠の高さが 440px 固定だった（規約 R-5）。実効比が 768px の 1.70 から 1024px 以上の 2.27 まで伸び、
 *     1280px 以上で写真の 19.3% が切れていた。さらに 768〜806px では高さ 100% と最大幅 100% が競合し、
 *     写真が 7.3% 横に潰れて歪んでいた（レンダ比 1.700 / 自然比 1.833）。
 *     旧テーマの中央クロップ（上下左右 -300%）は、土台 common.css の画像リセットで無効化されている。
 *     器を満たす cover へ置き換える。
 *  4. 土台が旧テーマ族のルートへ Arial を直書きしており、案件のフォント設定を遮断していた。
 *     幅10 × 配色4 × フォント4 × キャッチ長3 × 本文量3 の 1440 パターンすべてで Arial だった（規約 R-3）。
 *     ルート配下で書体を明示して継承を取り戻す。
 *  5. 文字サイズがすべて固定値だった（見出し 38.4px / 英字 17.6px / 本文 22.4px。375px でも 1920px でも同じ）。
 *     旧テーマの基準サイズが土台側でルートにスコープされた結果 1.6 倍で着地している。
 *     タイポスケールのトークンへ移す（規約 R-4）。
 *  6. ブレークポイントは受領時の 767 / 768 のまま据え置く。768px に寄せると土台の境界と 1px だけ重なる。
 *  7. 角丸・影は使わない。受領時も 0 箇所で、同梱の旧テーマ族 8 本でも丸ボタンの 1 本以外は持っていない。
 *  8. アニメーションは足さない（土台の出現演出のみ）。リンクが1つも無いのでホバー状態そのものが存在しない。
 * ─────────────────────────────────────────────────────────────────────────
 */
@charset "UTF-8";

._th13_module {
  /* 地色：案件の地色に、文字色の明度をわずかに混ぜた色。
     真っ白な写真が来た案件でも、混ぜた明度ぶんだけ段差が残るので「地がある」と読める。 */
  --th13-ground: color-mix(in srgb, var(--color-text) 8%, var(--color-bg));
  /* 背景スロットを沈める濃度。真っ黒な写真 × 最も明るい見出しインクで実画素 AA を満たす値。
     沈めるが消さない（写真の気配は 8% 残る）。 */
  --th13-veil: 92%;
  /* 縦書きの帯の高さ。版面（土台の上限 1000px）と同じところで頭打ちになるよう幅に連動させる。
     定数だけで置くと狭い画面で固定高さと同じ振る舞いになる。 */
  --th13-band: min(440px, 48vw);
  /* 列の間も版面と同じところで頭打ちにする。ここだけ広がり続けると、
     版面が 1000px で止まったあと主役（写真）の幅が逆に痩せていく。 */
  --th13-gap: clamp(16px, 2.6vw, 26px);

  /* 土台が旧テーマ族のルートへ Arial を直書きしているので、ここで本文書体を明示して継承を取り戻す。 */
  font-family: var(--font-body);
  position: relative;
  padding: 4em 0;
  background-image: url(images/th13-bg-1.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (min-width: 1020px) {
  ._th13_module {
    padding: 4em 1em;
  }
}

/* 地のベール。背景スロットの真上・版面の真下に敷く。
   受領時はこの層よりも上に写真が来ていたため、文字には1枚も掛かっていなかった。 */
._th13_module:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--th13-ground) var(--th13-veil), transparent);
}
._th13_module .container {
  position: relative;
  z-index: 1;
}

/* ── 見出し（右端） ──────────────────────────────────────────────────── */
._th13_module h2 {
  display: block;
  margin: 0;
  color: var(--color-heading-ink);
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: 1.5;
  /* 和の字組み。階調は色ではなくサイズと字送りで作るので、文字色は1段しか引かない。 */
  letter-spacing: 0.08em;
}
._th13_module h2:after, ._th13_module h2:before {
  display: none;
}
._th13_module h2 > span {
  display: block;
  /* 和文と英字の主従は【サイズと字送り】だけで付ける。色を1段引くと、淡色の案件で
     実画素 2.28:1 まで落ちた（実測）。色を動かさなければ主役の見出しと必ず同値になる。 */
  color: var(--color-heading-ink);
  font-size: var(--fs-small);
  line-height: 1.6;
  letter-spacing: 0.14em;
}

/* ── 本文（左端） ────────────────────────────────────────────────────── */
._th13_module p {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: 1.7;
}

/* ── 写真（中央） ────────────────────────────────────────────────────── */
._th13_module figure {
  display: block;
  position: relative;
  margin: 0;
  overflow: hidden;
}
._th13_module figure img {
  display: block;
  width: 100%;
  height: 100%;
  /* 土台が画像へ掛けている高さの上限は「高さが自律的な内容画像」向け。
     器の高さで決まる cover 画像では器より先に蓋が当たるので外す。 */
  max-width: none;
  max-height: none;
  object-fit: cover;
  /* README が「主題が中央にある素材を渡すこと」と明記しているので中央のまま。 */
  object-position: center;
}

/* ── PC（768px 以上）: 縦書きの3列 ──────────────────────────────────── */
@media (min-width: 768px) {
  ._th13_module ._th13_module_text,
  ._th13_module h2 {
    -ms-writing-mode: tb-rl;
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }

  /* DOM は 見出し → 器（写真 → 本文）の順。見た目の『本文 / 写真 / 見出し』は
     2段の grid でしか作れない（骨格確定型なので DOM は1文字も触らない）。 */
  ._th13_module .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--th13-band);
    column-gap: var(--th13-gap);
    align-items: stretch;
  }
  /* 土台のクリアフィックス擬似要素が、grid にしたとたん3つ目のアイテムになる。 */
  ._th13_module .container:after {
    display: none;
  }
  ._th13_module h2 {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }
  ._th13_module h2 > span {
    /* 縦書きではブロックが右から左へ積まれる。論理プロパティだと軸が入れ替わるので物理で書く。 */
    margin-right: 0.7em;
  }
  ._th13_module ._th13_module_box {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--th13-gap);
    align-items: stretch;
  }
  ._th13_module ._th13_module_box ._th13_module_text {
    grid-column: 1;
    grid-row: 1;
  }
  ._th13_module ._th13_module_box figure {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    height: 100%;
  }
  /* 重なり順を DOM 順の後勝ちに戻さない。列を分けたので重なり自体は無いが、
     写真が想定外に伸びたときに本文が潜らないよう明示する。 */
  ._th13_module ._th13_module_box figure,
  ._th13_module ._th13_module_box ._th13_module_text,
  ._th13_module h2 {
    position: relative;
    z-index: 1;
  }
  ._th13_module ._th13_module_box figure img {
    position: absolute;
    inset: 0;
  }
}

/* ── SP（767px 以下）: 横書きの縦積み ───────────────────────────────── */
/* ★lint の R6-bp（768px に統一）はここでは意図的に外している。土台の旧テーマ族は
   768px 以上を境界にしており、SP 側を 768px にすると 768px ちょうどで両方が効く
   1px の窓ができる。受領時も 767 / 768 で分かれていて重なりが無いので、そのまま据え置く。 */
@media (max-width: 767px) {
  ._th13_module h2 {
    margin: 0 auto 0.8em;
    text-align: center;
  }
  ._th13_module h2 > span {
    margin-top: 0.5em;
  }
  ._th13_module figure {
    /* 縦位置の写真が来ても帯が伸び続けないよう、SP は器の比率を決めておく
       （受領時の実効比 1.833 に近い 16:9 を採る）。 */
    aspect-ratio: 16 / 9;
    max-height: min(48vh, 420px);
  }
  ._th13_module ._th13_module_text {
    margin-top: 1.2em;
    /* モバイルの文字は PC より小さくする（規約 R-6）。 */
    font-size: var(--fs-small);
  }
}

.column_main ._th13_module {
  /* 本番の2カラムレイアウトに入ったときの余白（受領時のまま）。
     単体プレビューには2カラムの器が無いので検査には「死にセレクタ」として出るが、
     本番では生きているので残す。 */
  padding: 3em 1em;
}
@media (max-width: 767px) {
  .column_main ._th13_module {
    padding: 2em 0.5em;
  }
}