/* features-mod-03.css — 全幅写真+半透明テキスト箱の交互組み
   型: 骨格確定型（CSS のみ。class 名・要素の増減・並べ替え・タグ変更は不可）
   土台: _shared/module-base.css（`.lgx` 系）＋ _shared/common.css

   ★方針: 構図は受領時のまま。直したのは実測で出た欠陥だけ。
     足した意匠は **0個**（2026-09-16 に1つだけ足していた連番の面は、
     2026-09-17 のオーナー実見「数字の後ろの背景がいらない」で削除した）。
     角丸・影・罫・スクリム・枠は1つも新設していない。
     詳細は .company/engineering/plans/features-mod-03-plan.md §3。
     - README が部品名に掲げる「全幅写真」が PC で未成立だった（1920px で画面幅の 52.1%）
     - README が部品名に掲げる「交互組み」が PC で未成立だった（通常行が右寄り 0/2,592 行）
     - 土台のフォント遮断・文字サイズの固定・ホバーのコントラスト崩壊 ほか
*/
@charset "UTF-8";

/* ────────────────────────────────────────────────────────────────
   ルート: 変数の定義とトークンの取り戻し
   ──────────────────────────────────────────────────────────────── */
.mod_03_section {
  /* 写真帯の高さ ＝ 行の最小高さ。固定 px では書かず、幅と画面高の関数にする（R-5 / README）。
     ・min(53.2vw, …) は受領時の写真の高さ（375→193.6 / 768→408 / 1024〜1440→545.5px）を
       ±6px で再現する係数。原則8 の「受領時のプロポーションが戻る値」として選んだ。
     ・max(546px, 36vw) は広い画面での実効比の蓋。これが無いと 1920px で実効比が 3.52 まで倒れ、
       縦長写真が割り当てられた案件で上下を大きく捨てる（R-5 の既知の落とし穴）。
     ・92vh と 760px は README が求める上限（max-height: min(◯vh, ◯px)）。
       ★1024〜1920px の通常の画面では 1つも効かない値にしてある（＝受領時のプロポーションを動かさない）。
       効くのは「縦がとても短い窓」と「2K を超える画面」だけ。
     ★単位は vw ではなく cqw（下の @supports で差し替える）。理由は §全幅写真 のコメント。
       ここは非対応環境向けのフォールバック値。 */
  --m03-photo-h: min(53.2vw, max(546px, 36vw), 92vh, 760px);

  /* テキスト箱の面。受領時は 80%。写真を純黒にした最悪ケースで、最も薄い見出し色
     （淡色プリセットの --color-heading-ink）が 4.14:1 しか出なかったので 88% まで上げる。
     R-7 の「半透明のカード／帯は不透明度 80% 以上」は満たしたまま。
     ★薄くする方向へは振らない（この部品の【箱の中】の可読性は面の不透明度で保証されている）。
     ★2026-09-17 追記: 連番が箱の【外】へ食い込む部分はこの面の外なので、そこだけは
       写真の明るさに依存する。詳細は下の .mod_03_num のコメント。 */
  --m03-panel: color-mix(in srgb, var(--color-bg) 88%, transparent);

  position: relative;

  /* 土台 module-base.css の `.lgx` の font-family: Arial… が、サイトのフォント設定を
     モジュールへ届かせない（受領時は本文・ボタン・見出しとも 1,248/1,248 パターンで Arial）。
     ★この部品の見出しは h2 ではなく p.text-xlarge なので、common.css の
     h1,h2,h3,h4 へのパッチは1要素にも当たらない。ルート配下で継承を取り戻す（R-3）。 */
  font-family: var(--font-body);
  /* 土台 `.lgx` の font-size: 1.4em が配下の基準を 22.4px に持ち上げる。本文の基準をトークンへ戻す（R-4）。 */
  font-size: var(--fs-body);
}

.mod_03_section .row {
  position: relative;
}

/* ────────────────────────────────────────────────────────────────
   バナー同士の余白（オーナー実見 2026-09-16「バナー同士の上下の余白いらない」）
   ────────────────────────────────────────────────────────────────
   実測で余白は2種類あり、両方とも「バナーとバナーの間」に出ていた（1920px）:
     ・段と段の間  53.8px … 土台 `.lgx .row:not(:last-child){margin-bottom:4%}`
     ・節と節の間 192.0px … 土台 `section.lgx{padding: clamp(56px,7vw,96px) 0}` の上下が突き合わさる
   写真は全幅で天地いっぱいに敷かれるので、この余白はそのまま「白い横線」として見える。
   ★ただしモジュール【全体】の天地 96px は残す。ページ上の前後のモジュールとの間隔であり、
     バナー同士の余白ではない。よって節の padding は「次/前にも同じ節が続くとき」だけ 0 にする。
     本番では節単位で取捨されるため（README「使わないセクションは丸ごと落とす」）、
     1節だけ使う案件でも隣接セレクタが当たらず 96px がそのまま残る。 */
.mod_03_section .container > .row:not(:last-child) {
  margin-bottom: 0;
}
.mod_03_section + .mod_03_section {
  padding-top: 0;
}
.mod_03_section:has(+ .mod_03_section) {
  padding-bottom: 0;
}

/* ────────────────────────────────────────────────────────────────
   写真: 画面の端から端まで（README の部品名「全幅写真」）
   ──────────────────────────────────────────────────────────────── */
/* 受領時は width:100% の中央寄せで、版面（最大1000px）までしか広がらなかった。
   README の「組み立ての契約」は right:-300%; left:-300% を「写真を全幅に引き伸ばす仕掛け」と
   書いており、旧テーマでは祖先の overflow で刈られて全幅に見えていた。
   ★はみ出しは版面基準（%）ではなく【セクションの幅】基準で書く。版面が中央で頭打ちに
     なった瞬間にはみ出しをやめる既知の事故を避ける。
   ★★2026-09-16 訂正: 基準を「画面（vw）」から「セクション（cqw）」へ替えた。
     vw はスクロールバーを含むため、実ブラウザ（スクロールバー有り）では 100vw が
     clientWidth を 15px 上回り、写真が左右へ 7.5px ずつはみ出して祖先の overflow で
     刈られていた（実測 1920px: 左端 -7.5px / 右端 clientWidth+7.5px）。横スクロールは
     出ないが、全幅写真の成立を「祖先が刈ってくれること」に依存するのは危うい。
     cqw はスクロールバーを含まないので、刈られる前から左右ぴったりに収まる。
     cqw 非対応環境には直前の vw 宣言がそのまま残る（無効な単位の宣言は捨てられる）。 */
.mod_03_section .row .mod_03_img-box {
  position: absolute;
  /* 天地は行に合わせる。写真と行の高さが一致するので、
     受領時にあった「写真が行から 170.8px はみ出して隣の段に被る」が構造的に消える。 */
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  left: calc(50% - 50cqw);
  right: auto;
  transform: none;
  width: 100vw;
  width: 100cqw;
  max-width: 100vw;
  max-width: 100cqw;
  margin: 0;
  overflow: hidden;
}

/* cqw の基準になる器。`.mod_03_section` は版面を張る唯一の祖先（幅 ＝ clientWidth）。
   ★`--m03-photo-h` は cq 単位を含むので、宣言している `.mod_03_section` 自身ではなく
     使う側（`.row` / `figure`＝子孫）で解決される。子孫から見た器はこのセクションなので正しく効く。
   ★カスタムプロパティは非対応環境でも「パース時に捨てられない」ため、
     vw 版と cqw 版を @supports で分けて書く（分けないと非対応環境で min-height ごと消える）。 */
@supports (container-type: inline-size) {
  .mod_03_section {
    container-type: inline-size;
    --m03-photo-h: min(53.2cqw, max(546px, 36cqw), 92vh, 760px);
  }
}

.mod_03_section .row .mod_03_img-box figure {
  position: static;
  height: 100%;
  margin: 0;
}

.mod_03_section .row .mod_03_img-box figure img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  /* common.css の img の max-height:800px は、縦長写真の【幅】を頭打ちにする既知の事故。
     object-fit:cover を使う画像には必ず添える。 */
  max-height: none;
  object-fit: cover;
}

/* ────────────────────────────────────────────────────────────────
   テキスト箱: 半透明の面 と 左右交互
   ──────────────────────────────────────────────────────────────── */
.mod_03_section .row .mod_03_txt-box {
  /* float は受領時の指定。土台の `.lgx .row:has(> .col > figure:only-child)` が
     PC（min-width:768px / 詳細度 0,8,2）で行を flex 化するため、
     flex アイテムの float は仕様上無視される（実測: PC では computed も none を返す）。
     ＝受領時から一度も効いていなかった。下の margin による寄せが実体で、
     この float は :has() 非対応環境・非 flex 時のための保険として残す。 */
  float: right;
  background: var(--m03-panel);
  padding: 4%;
  /* 塗り順で絶対配置の写真（⑧）より後に来るようにする。
     これが無いと半透明の面も本文も1画素も描かれない（既知・th29）。 */
  position: relative;
}

.mod_03_section .row.reverse .mod_03_txt-box {
  float: left;
}

/* ────────────────────────────────────────────────────────────────
   文字: トークンへ載せ替える（受領時は 44.8 / 32 / 22.4 / 28.8 / 16 / 60px の全幅固定）
   ──────────────────────────────────────────────────────────────── */
.mod_03_section .row .mod_03_txt-box .mod_03_title {
  font-family: var(--font-heading);
  /* 受領時 44.8px（SP 32px）固定 → --fs-mod-title（20〜27px）へ。
     common.css のタイポSSOT は「セクション見出し＝--fs-h2 / モジュール内で繰り返し出てくる
     項目タイトル＝--fs-mod-title / カード見出し＝--fs-h3」と3段階を定義している。
     この見出しは1部品に6個並ぶ項目タイトルなので --fs-mod-title が正しい段。
     --fs-h2 を当てると、ページ上のセクション見出し（main h2）と同寸になって階層が潰れる。
     30字のキャッチが最大8行に割れていたのも、これで収まる。 */
  font-size: var(--fs-mod-title);
  line-height: 1.4;
  margin-bottom: 0.75em;
}

.mod_03_section .row .mod_03_txt-box .mod_03_title small,
.mod_03_section .row .mod_03_txt-box .mod_03_title span {
  display: block;
  color: var(--color-heading-ink);
  /* 受領時 16px（SP 14px）固定 → 注記のトークンへ。
     small は同梱 HTML に現れないが、旧テーマの別バリアント用に受領時から書かれているので残す。 */
  font-size: var(--fs-small);
}

.mod_03_section .row .mod_03_txt-box .mod_03_title .mod_03_num {
  position: absolute;
  top: -0.5em;
  line-height: 1;
  /* README が「3.75rem（SPで 2.25rem）」と定義している部品の signature。
     両端を保ったまま画面幅に連動させる（R-4 / R-6）。 */
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-weight: bold;
  color: var(--color-heading-ink);
  /* ★背景は敷かない（オーナー実見 2026-09-17「数字の後ろの背景がいらない」）。
     2026-09-16 の周回では、箱の外へ食い込む部分の実描画コントラストを写真の明るさから
     独立させるために、箱と同じ面（--m03-panel）のタブを linear-gradient で
     「箱の外へ出ている部分だけ」に敷いていた。実描画で特定したうえで、その面だけを削除する。
     数字そのもの（字・色・サイズ・位置）は動かさない。
     ★padding / margin-left も一緒に落とす。この2つはタブの左右に余白を作るためだけの指定で、
       0.1em 足して 0.1em 引く相殺なのでグリフの位置には効かない。
       幅7種 × フォント4種 × font-size 6種 = 168 パターンで、グリフのインク箱の
       dx / dy が 0.000 であることを実測して確認した（border-box の x だけが 0.1em 動く）。
     ★★この結果、連番の食い込み部（グリフのインクの約45%）は受領時と同じ「素の写真の上」に戻る。
       連番の色は --color-heading-ink（暗色）なので、【暗い／中間の写真ほど読めなくなる】。
       実測（1920px・実描画）: 写真 #000 で最小 1.31 / #404040 で 1.33 / #808080 で 1.78 /
       #fff では 14.08。★README が「写真は暗め・シンプルな素材を選ぶこと」と書いている条件は、
       テキスト箱の中の可読性のための条件であって、連番の食い込み部には【逆に働く】。
       この食い違いは直さずに先方への指摘として残す（実装計画 §9-10 / §12）。 */
}

.mod_03_section .row .mod_03_txt-box > p:not(.mod_03_title):not(.more) {
  font-size: var(--fs-body);
}

/* ────────────────────────────────────────────────────────────────
   導線（MORE）
   ──────────────────────────────────────────────────────────────── */
.mod_03_section .more .add_arrow {
  margin-left: 0;
}

.mod_03_section .row .mod_03_txt-box .more {
  /* 土台の `.lgx .more` の overflow:hidden（旧テーマの回り込み解除の名残）が、
     ボタンの【外側】に描かれる :focus-visible のリングを刈る。
     実 Tab キーで拡大撮影すると、天地と左辺が消えて右辺だけが覗く状態だった（既知の罠）。
     この器の中身はブロックの <a> 1つだけでフロートが無いので、刈る必要はない。 */
  overflow: visible;
}

.mod_03_section .row .mod_03_txt-box .more a {
  /* 土台の `.lgx .more a` の font-size:1.8rem ＋ `.lgx` の font-size:1.4em で
     ボタン文字が 22.4〜28.8px・面が 280×65.3px まで膨らんでいた。
     本文のトークンに戻して字幅に詰める。 */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.9em 1.2em;
  /* 土台の transition: .3s（全プロパティ）は、面も文字も rest と同じ組に戻した今は
     動かすものが無く、:focus-visible の outline-color だけを 0.3 秒かけて薄く出す。
     フォーカスリングは即座に出るべきなので切る。矢印は下で自前の transition を持つ。 */
  transition: none;
}

/* 矢印の位置。土台は right:5% →ホバー 4%（＝ボタン幅の割合）なので、
   ボタンを詰めると移動量が 2.8px まで痩せて合図にならない（既知）。
   幅によらない em に置き換え、rest の位置は受領時（13.9px）とほぼ同値に保つ。 */
.mod_03_section .row .mod_03_txt-box .more a.add_arrow:after {
  right: 0.9em;
  transition: right 0.2s ease;
}

.mod_03_section .row .mod_03_txt-box .more a.add_arrow:hover:after,
.mod_03_section .row .mod_03_txt-box .more a.add_arrow:focus-visible:after {
  right: 0.45em;
  border-top-color: var(--color-on-primary);
  border-right-color: var(--color-on-primary);
}

/* ホバー: 面と文字のトークンの組を rest と同じに戻す。
   土台では3つのパッチが同一要素に競合適用され、実描画コントラストが
   48/48 パターンで AA 未達（最小 1.16）だった:
     common.css の a:hover の opacity:.8
     module-base.css の `.lgx .button:hover` の filter:brightness(.9)
     module-base.css の `.lgx .add_arrow:hover` の color: color-mix(primary 68%, #000)
   組を保てば、どの配色プリセットでも rest と同じ比が構造的に保証される。
   合図は上の矢印の移動（幾何）で取るので、色を動かす必要がない。 */
.mod_03_section .row .mod_03_txt-box .more a.button:hover,
.mod_03_section .row .mod_03_txt-box .more a.button:focus-visible {
  opacity: 1;
  filter: none;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* common.css の :focus-visible は outline: 3px solid currentColor。文字色が
   --color-on-primary（濃色・高彩度プリセットで #fff）の面では
   「白いリングが白い地（`.lgx` の background:#fff）の上」になり CR 1.00 で消える。
   リングが乗るのは面ではなく outline-offset の外側なので、明背景で読める濃色を指す。 */
.mod_03_section .row .mod_03_txt-box .more a:focus-visible {
  outline-color: var(--color-heading-ink);
}

/* ────────────────────────────────────────────────────────────────
   type 別の差
   ──────────────────────────────────────────────────────────────── */
.mod_03_section.typeB .row {
  padding: 6%;
}

.mod_03_section.typeB .row .mod_03_txt-box {
  margin-top: 0;
}

/* ────────────────────────────────────────────────────────────────
   PC（768px 以上）。★受領時と同じく1ブロックに集約している。
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .mod_03_section .button-flat, .mod_03_section .button-round, .mod_03_section .button-circle, .mod_03_section .button, .mod_03_section .button-ghost, .mod_03_section .button-ghost-round, .mod_03_section .button-border, .mod_03_section .button-3d {
    /* 受領時どおり: PC ではボタンを inline-block ではなくブロックにする（README 記載の仕様）。
       ただし土台の `.lgx .more a` の max-width:280px が残るので、実際の幅は 280px で頭打ちになる。
       ★説明はルールの外ではなく中に置く。外に置くと検査が「直前の閉じ波かっこ〜次の開き波かっこ」を
       セレクタとして読み、コメントがセレクタ名に混ざって死にセレクタの報告が壊れる（既知）。 */
    min-width: 0 !important;
    display: block !important;
  }

  /* 版面。土台の `.lgx .container` の max-width:1000px は 1920px で左右 460px ずつ余る孤島になる。
     独自の幅を発明せず、common.css の .container（1440 ＋ clamp(1.25rem,4vw,3rem)）にそろえる。
     ★SP 側の内余白（実測 10px）を上書きしないよう、必ず PC 側のメディアクエリの中に置く。 */
  .mod_03_section .container {
    max-width: 1440px;
    padding-left: clamp(1.25rem, 4vw, 3rem);
    padding-right: clamp(1.25rem, 4vw, 3rem);
  }

  /* 行の最小の高さを写真の高さと同じ式で与える。
     これで「写真の天地 ＝ 行の天地」が文章量によらず成立する。 */
  .mod_03_section .row {
    min-height: var(--m03-photo-h);
  }

  /* テキスト列の幅（オーナー実見 2026-09-16「1920px の span_5 側が小さい」）。
     土台の `.lgx .gutters .span_5` は 40.5%（1920px で 544.3px / 内寸 436.8px）。
     ★独自の幅を発明せず、土台のグリッドの1つ上の刻み `.gutters .span_6` の 49% に合わせる。
     実測（フォント4種 × 見出し 8/5/30字 × 768/1280/1920px の 180 パターン）:
       40.5% → 箱 286.2/479.5/544.3px・30字見出しが 768px で 4行・長文時の行高 最大 605px
       44%   → 箱 310.9/521.0/591.4px・30字見出し 3行・行高 最大 588px
       46.5% → 箱 328.5/550.5/625.0px・30字見出し 3行・行高 最大 559px
       49%   → 箱 346.2/580.2/658.5px・30字見出し 1920px で【2行】・行高 最大 520px  ← 採用
       53%   → 箱 374.5/627.5/712.3px・768px で画面の 48.8% を面が覆い、全幅写真が痩せる
     49% を選ぶ理由: (a) 規約 R-4 の「テキスト列は 44% 以上」を全幅で満たす（40.5% は未達）、
     (b) README の「タイトルは1〜2行が前提」が長文案件でも 1920px で成立する、
     (c) 長文案件の最悪行高が 605→520px（-14%）に減り、文章量で写真帯が押し広げられにくい、
     (d) 49% < 50% なので、どの幅でも写真が版面の過半を保つ（53% はここを割る）。
     詳細度 (0,4,0) で土台の `.lgx .gutters .span_5`(0,3,0) に勝つ。 */
  .mod_03_section .row > .col.mod_03_txt-box {
    width: 49%;
  }

  /* 段ごとに左右を入れ替える（README の部品名「交互組み」）。
     float に頼らず margin で寄せる。flex では余りを吸って端へ、block に戻っても
     （span_5 で幅があるので）正しく効く。
     詳細度 (0,4,0) で土台の `.lgx .gutters .col` の margin-left:2%（0,3,0）に勝つ。
     ★同値 (0,4,0) の `.lgx .reverse>.col:last-child` の margin-left:0 も土台にあり、
       そちらには【読み込み順】で勝っている（モジュール CSS が後に読まれる）。 */
  .mod_03_section .row.reverse > .mod_03_txt-box {
    margin-left: 0;
    margin-right: auto;
  }
  .mod_03_section .row:not(.reverse) > .mod_03_txt-box {
    margin-left: auto;
    margin-right: 0;
  }

  /* typeA の箱の天地位置。受領時は margin-top:7% で箱を写真の上寄りに置いていた
     （実測 1920px で 天70 / 地173）。行に min-height を与えた今は、土台が PC でテキスト列を
     align-self:center（詳細度 0,8,2・上書き不可）にするため、
     margin-top は「中央から【下】へ押す」向きに働いて 天255 / 地161 の下寄りになる。
     同じ量を margin-bottom へ移すと「中央から【上】へ」になり、受領時の上寄りが戻る。
     SP は縦積みで意味を持たないので PC 側だけに当てる。 */
  .mod_03_section.typeA .row .mod_03_txt-box {
    margin-bottom: 7%;
  }
}

/* 自前の動きは矢印の 0.2s だけ。動きを減らす設定では止める（R-9）。
   common.css の reduce ブロックが !important で全 transition を 0.01ms にするので
   実害としては二重だが、モジュール単体で読んでも意図が分かるように明示する。 */
@media (prefers-reduced-motion: reduce) {
  .mod_03_section .row .mod_03_txt-box .more a.add_arrow:after {
    transition: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   SP: 受領時どおり 写真 → テキスト の縦積み。写真だけを画面の端まで伸ばす。
   ★受領時の max-width: 767px ではなく max-width: 767.98px で書く。
     767px は「整数幅の補集合」にしかならず、ブラウザのズーム（110% 等）や
     端末の devicePixelRatio で viewport が小数になると（例 767.27px）
     SP も PC もどちらのブロックも当たらない穴ができる。
     そこでは行に min-height が付かず写真が潰れ、テキスト箱が行の全幅になって
     写真をほぼ全面に覆う（＝全幅写真が消える）。
     .98 まで伸ばすと穴が 1px → 0.02px になり、かつ 768px ちょうどでは当たらないので
     土台の flex 化（min-width:768px）との二重適用も起きない。
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .mod_03_section .row .mod_03_txt-box {
    margin-top: 0;
  }

  .mod_03_section.typeB .row {
    padding: 0;
  }

  .mod_03_section .row .mod_03_img-box {
    position: static;
    top: auto;
    bottom: auto;
    /* PC 用の中央寄せ（left + translateX）を必ず解除する。
       残すと SP で左に食み出す（2026-08-09 実測: 375px で左 168px）。 */
    left: auto;
    right: auto;
    transform: none;
    width: 100vw;
    width: 100cqw;
    max-width: 100vw;
    max-width: 100cqw;
    margin-inline: calc(50% - 50vw);
    margin-inline: calc(50% - 50cqw);
  }
  .mod_03_section .row .mod_03_img-box figure {
    /* SP でも PC と同じ帯の高さにそろえる。受領時は自然比のままで、
       ・6枚のうち mod-03-6 だけ高さが 248.5px（他は 193.6px）とばらついていた
       ・縦長写真（600×1600）が割り当てられると 375px 幅で高さ 1000px になった
       器の高さを幅から決めれば、どんな縦横比の写真でも帯の高さが動かない。 */
    height: var(--m03-photo-h);
  }
  .mod_03_section .row .mod_03_img-box figure img {
    height: 100%;
    object-fit: cover;
  }
}