/* features-mod-07.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

.mod_07_section .mod_07_title {
  position: relative;
  display: block;
  padding-bottom: 0.5em;
  margin-bottom: 0.6em;
  font-weight: bold;
}
.mod_07_section .mod_07_title:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--color-primary);
  height: 2px;
  bottom: 0;
}
.mod_07_section .mod_07_title span, .mod_07_section .mod_07_title small {
  font-size: 0.875rem;
  margin-left: 1em;
}
@media (min-width: 768px) {
  .mod_07_section .row:not(.reverse) .col .mod_07_title:after {
    left: -3em;
  }
  .mod_07_section .row.reverse .col .mod_07_title:after {
    right: -3em;
  }
}
.mod_07_section.typeB .mod_07_title:after {
  border-top: 1px solid var(--color-primary);
}
.mod_07_section.typeC .mod_07_title {
  padding-top: 15px;
  padding-bottom: 12px;
  margin-top: 1em;
  margin-bottom: 1em;
  line-height: 1.2;
}
.mod_07_section.typeC .mod_07_title:after {
  top: 0;
  border-bottom: 2px solid var(--color-primary);
  border-top: 2px solid var(--color-primary);
  height: 100%;
}
.mod_07_section .more .add_arrow {
  margin-left: 0;
}

/* ============================================================================
   SM-2026-09-18 / features-mod-07
   受領時の構図（49:49 の2カラムを左右交互に2段 ＋ 見出し下線の 3em）は 1px も動かさない。
   実描画で測って見つかった欠陥だけを直す。足した意匠はゼロ。
   計画: .company/engineering/plans/features-mod-07-plan.md
   ========================================================================= */

/* ── D1 ★致命: 「交互2カラム」が実描画で一度も成立していなかった ─────────────
   土台は @media（min-width:768px）で .reverse の列を右フロートさせて左右を入れ替える作りだが、
   この部品は写真列の子が figure ひとつだけなので、土台の :has() 救済ブロック
   （写真だけの列を縦中央にする指定）が当たって行が display:flex になる。
   flex アイテムでは float が無視されるため、反転が【無音で】効かなくなっていた。
   getComputedStyle は float に right を返し続けるので computed では気づけない。
   実測（受領時）: 検算値 ｛テキスト箱.x − 行.x｝−｛行.right − テキスト箱.right｝が
   768px +381.5 ／ 1280px +510 ／ 1920px +510 で、通常段と reverse 段が同符号・同値。
   ＝ 3幅 × 3セクション × 2段 ＝ 18行すべてで写真が左・テキストが右のまま並んでいた。
   これは部品名そのもの（交互2カラム）が成立していないということ。
   → 並び順だけを入れ替える。float は使わない。
   ★flex-direction: row-reverse でも【実測の幾何は完全に同じ】だった
     （1280px で 列 140/650・ガター 20.0px・行高 267.3px が一致。土台の clearfix は
     .row の擬似要素として flex アイテムに混ざっているが、幅 0 なのでどちらでも何も動かさない）。
     order を採ったのは描画の差ではなく、
     ・入れ替わるのが1列だけで、もう一方の列と擬似要素の扱いを変えずに済むこと
     ・箱の方向を保つので、土台の margin-left（0 と 2%）が物理的な意味のまま読めること
     の2点。**「clearfix が先頭へ回るから」は実測では差が出ないので理由にしない。**
   ★行が block のまま（救済ブロックが当たらない構成）の案件では order は無効化されるだけで、
     従来どおり右フロートが働く。どちらの経路でも壊れない。
   ★これで reverse 段の列間ガターも直る（受領時は 0px で写真と本文が接触し、
     行の左端に 20px の死に余白があった。土台の「最後の列の左余白を 0 にする」指定が
     右フロート前提で書かれているため）。 */
.mod_07_section .row.reverse > .col:last-child {
  order: -1;
}

/* ── D8: 本文の文字寸法を土台の 22.4px から --fs-body へ戻す ───────────────
   土台の .lgx が font-size:1.4em を持つため、本文が 22.4px で描かれていた（--fs-body は 16px）。
   器に1行当てると本文だけが戻る。タイトル・CTA・小見出し span は rem 指定なので動かない。
   見出し下線の −3em もタイトル自身の font-size 基準なので 96px のまま動かない。
   ★R-6「モバイルの文字サイズは PC より小さく」は根拠に挙げない。--fs-body は固定値なので
     実装後も SP と PC がともに 16px になる。ここは土台（サイト標準の本文 16px）に
     合わせ直すのが目的で、SP だけ縮めると1社だけ本文サイズが違う状態になる。

   ── D7: フォントプリセットを本文と見出しへ通す
   土台の .lgx の font-family:Arial… が body の var(--font-body) を遮断していた。
   ★この部品は h1〜h4 を1つも持たない（見出しは p.text-large）ので、
     common.css の h1〜h4 への直接指定という逃げ道も無く、実測で
     3プリセット × 4要素 × 4幅 ＝ 48/48 が Arial のままだった。
   ★実態: 既定プリセットでは効かない。common.css の --font-heading ／ --font-body が
     末尾カンマで終端していて計算値の時点で無効になるため（モジュール側では直せない）。
     ゴシック／明朝／丸ゴの3プリセットでは効く。 */
.mod_07_section .container {
  font-size: var(--fs-body);
  font-family: var(--font-body);
}
.mod_07_section .mod_07_title {
  font-family: var(--font-heading);
}

/* ── D8 / D9 / D13: CTA のラベル ──────────────────────────────────────────
   寸法: 受領時は土台の .lgx .more a が 1.8rem ＝ 28.8px（PC）を当てており、
     タイトル 32px に肉薄し本文 22.4px より大きかった。--fs-* の尺に無い値なのでトークンへ戻す。
   行送り: 土台の .lgx .button が line-height:1 を持つため、日本語ラベルが2行になると
     実測で行間 −2.6px（375px）／ −3.2px（768・1280px）＝ 字が接触していた。
     375px では最終行が矢印グリフに 3.1px 食い込んでもいた。
   遷移: 受領時は .3s のショートハンド（＝ transition-property:all）で、
     ブレークポイントを跨ぐと width（280px ⇔ 100%）や font-size までアニメーションする。 */
.mod_07_section .more a {
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  /* ★ここは寸法をトークンへ戻したことで【自分が作った】欠陥の手当て。
     受領時は 28.8px だったので16字の日本語ラベルが必ず2行に折れ、最終行が短くて
     矢印グリフに届いていなかった（実測 −4.9px）。16px にすると同じラベルが1行に収まり、
     行末が矢印へ 7.9px 食い込んだ（1280px 実測）。
     土台の矢印は要素幅の 5% ＋ グリフ 6px を右端に占める。実測は right:13.89px ＋ 6px ＝ 19.9px
     （ボタン 280px のとき）なので、左右そろえて 1.8em ＝ 28.8px の余地を置く（余裕 8.9px）。
     ボタンの外形（280px 幅）は 1px も動かない。
     ★padding の % は【親】の幅を基準に解決されてしまい、矢印の 5%（ボタン自身の幅基準）と
       基準が食い違うので、% ではなく em で置く。
     ★2.2em も試したが、必要量の約1.8倍で文字の入る幅が 207.6px まで削れ、
       日本語ラベルが1行ぶん早く折り返していた。1.8em なら 221.2px。 */
  padding-inline: 1.8em;
}

/* ── D5 ★: フォーカスリングが4辺中3辺で描かれていなかった ───────────────────
   土台の .lgx .more が overflow:hidden を持つ。ボタンは器の左端に接していて高さも同じなので、
   outline-offset:2px のリングが上・下・左で器の外へ出て刈られていた
   （右だけは器の内側に余地があるので残っていた）。
   clearfix が目的なら flow-root で足りるので、切るのをやめる。
   実測（受領時）: 4辺の比 上 1.00 ／ 下 1.00 ／ 左 1.00 ／ 右 18.88（既定・淡色）。 */
.mod_07_section .more {
  display: flow-root;
  overflow: visible;
}

/* ── D4 ★致命: CTA のホバーで文字も矢印も消えていた（24/24 で AA 未達） ──────
   土台が3枚重なって「ブランド色の面にブランド色の暗色の字」を作っていた。
     .lgx .add_arrow:hover が背景を #fff にする
     → SM-FIX の .lgx .button:hover が背景を var(--color-primary) に戻し brightness(.9) を掛ける
     → SM-FIX4 の .lgx .add_arrow:hover が最後に字を「primary を 68% 暗くした色」にする
   さらに common.css の a:hover が opacity .8 を掛けて部品ごと薄くしていた。
   実測（2幅 × 4配色 × 3セクション ＝ 24組すべて）: 面 vs 字 1.15〜1.70 ／ 矢印 1.11〜1.47。
   → rest と同じ面・同じ字を明示で書き戻し、押せる合図は「字と同じ色の内枠」で出す。
     面と地の関係も字と面の関係も rest と同値になり、矩形も動かない。
   ★ホバーで色の組を入れ替えない。入れ替えると面が行の地と同色になって塗りが消える
     （th22 で8状態中6状態が 1.00 になった）。
   ★ここの var() には fallback を書かない。--color-on-primary が未定義で届いた場合、
     fallback を書くと白が採用され、面（--color-primary も未定義なので透明＝白い板）の上に
     白い字が乗って比 1.00 になる。fallback を書かなければ計算値の時点で無効になり、
     色は継承に落ちて濃い字として読める。
   ★詳細度で土台に勝てるので【重要度指定】は使わない（受領時 0件 → 0件を維持）。 */
.mod_07_section .more a:hover,
.mod_07_section .more a:focus-visible {
  opacity: 1;
  filter: none;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  /* ★内枠にだけ fallback を書く。色（字）には書かない。
     --color-on-primary が未定義で届くと、fallback 無しでは box-shadow が初期値 none に落ちて
     【ホバーで何も起きないボタン】になる。fallback を書いておけば、面が濃い案件では
     白い内枠が出て合図になり、面が薄い（＝白い板）案件では白い内枠が地に埋もれるだけで、
     fallback 無しのとき（none）と同じ見えに戻る。つまり下振れが無い。
     字の color に同じことをすると「白い板に白い字」を作るので、そちらには書かない。 */
  box-shadow: inset 0 0 0 3px var(--color-on-primary, #fff);
}
.mod_07_section .more a:hover::after,
.mod_07_section .more a:focus-visible::after {
  border-top-color: var(--color-on-primary);
  border-right-color: var(--color-on-primary);
}

/* 強制配色モードでは box-shadow が none に落ちるので、内枠の合図が消える。
   通常の描画は変えたくないので、このモードのときだけ下線で補う。 */
@media (forced-colors: active) {
  .mod_07_section .more a:hover,
  .mod_07_section .more a:focus-visible {
    text-decoration: underline;
  }
}

/* ── D5 ★: リングの色を面に依存しない絶対軸のインクへ固定する ─────────────────
   common.css の :focus-visible は outline に currentColor を使うので、
   リング色＝ボタンの字色＝var(--color-on-primary)。濃色と高彩度ではこれが白になり、
   上で overflow を開けても「白い板の外に白いリング」が出て 4辺とも 1.00 のままになる。 */
.mod_07_section .more a:focus-visible {
  outline-color: var(--color-heading-ink);
}

/* ── D6 ★: この部品唯一の意匠（見出し下線）が淡色プリセットで見えなかった ──────
   受領時は var(--color-primary) を白地に置いており、実描画の比は
   既定 3.12 ／ 淡色 1.66 ／ 濃色 15.60 ／ 高彩度 4.85。
   非テキスト図形の物差しは 3:1 なので、淡色ベージュのブランドを持つ案件では
   「見出しの下線が外側へ伸びる装飾だけを持つ」というこの部品の全部が消えていた。
   → --color-heading-ink へ移す。規約 R-1 の表がこのトークンを
     「見出し・下線・リンクの濃色（primary が淡くても読める）」と定義しており、用途そのもの。
   ★【訂正】当初ここに「4プリセットとも primary と同系の濃色が入るのでブランド色から外れない」と
     書いたが、これは【偽】だった。_shared/common.css の 30行目は
     --color-heading-ink を #1b2b3a の【固定値】で出荷している（primary からの派生ではない）。
     確認パネルはプリセットごとに上書きするので手元では追従して見えるが、
     生成サイト側がこのトークンを案件ごとに振らない場合、下線は案件によらず同じ濃紺になる。
     ＝ この部品の「固定色が一切ない」という性格を、下線1本ぶんだけ手放している。
     それでもこちらを採るのは、--color-primary が【地に対する濃さを何も保証しない】変数で、
     淡いブランド色の案件（美容・保育・カフェなど地方 BtoC に多い）では
     部品の意匠が丸ごと消えるため。4配色のうち淡色だけの問題ではなく、構造的な欠陥と判断した。
     ★オーナー判断に上げる項目（報告の BLOCKER 参照）。
   ★セレクタを .row 経由の (0,3,1) にして、typeB ／ typeC の型別指定（同じ (0,3,1)）に
     読み込み順で勝たせる。型ごとに3本書かずに1本で足りる。
   ★fallback は書かない。トークンが空や未定義で届くと border-color は currentColor に落ち、
     見出しの字と同じ濃さで描かれる（受領時と同じ挙動で、悪化しない）。 */
.mod_07_section .row .mod_07_title:after {
  border-bottom-color: var(--color-heading-ink);
  border-top-color: var(--color-heading-ink);
}

/* ── D10 ★: 縦長素材で写真が列を埋めず、列の右に穴が開いていた ───────────────
   common.css の img が max-height:800px を持つため、縦長素材では幅まで巻き添えで縮む。
   実測（列 490px ／ 1280px）: 600×1600 の素材で img が 300×800 になり、
   列の右に 190.0px（列幅の 38.8%）の空きが出て、写真が列の左端に寄っていた。375px でも 55px。
   README の「写真の縦横比の縛りも緩い／素材を選ばないのが基準部品たる所以」が
   縦長素材で成立していない。
   ★aspect-ratio も object-fit:cover も足さない。この部品はクロップしないことが売りで、
     比を固定した瞬間に README の用途が壊れる。余りを左右へ均等に配るだけにする。 */
/* ★セレクタに .row を1つ挟んで (0,2,2) にしてある。common.css:260 に
   ｛main img（クラス無し）｝ … height:100% ＋ object-fit:cover が居て、詳細度が (0,1,2) で
   【同点】になるため。同点だとモジュール CSS が3番目に読まれることだけが勝因になり、
   土台側がセレクタを1つ足しただけで無言で負けて、縦長素材が 490×800 に切られる。
   ★この規則は単体プレビューでは当たらない（index.html に main が無い）。
     本番の配置（セクションが main の中に入る）でだけ効くので、手元の目視では絶対に見つからない。 */
.mod_07_section .row figure img {
  /* ★object-fit: scale-down は「切らない・拡大しない」を両立する唯一の値。
     cover は素材を切るので採らない（この部品はクロップしないことが売り）。
     contain は器の比を別に決める必要があり、aspect-ratio を足すことになるので採らない。
     ★これは width / height 属性を足したこと（R-8 / triage R9）の後始末でもある。
       属性があると max-height:800px に当たったときに比の保存が効かなくなり、
       縦長素材で器が 490 × 800 に【引き伸ばされる】（属性を足す前は 300 × 800 で比は保たれていた）。
       本番では写真が自動生成のものへ差し替わるので、属性と実素材の比は必ずしも一致しない。
       scale-down なら器がどう決まっても中の絵は歪まず、余りは左右へ均等に配られる。 */
  object-fit: scale-down;
  /* 属性が外れた経路（器そのものが列より狭くなる）では、写真が列の左端に寄って
     右に穴が開く。余りを左右へ均等に配る。 */
  margin-inline: auto;
}

/* ── D11: SP で CTA が中央寄せになっていなかった ─────────────────────────────
   README は「SP時はボタンが中央寄せになる（sp-text-center）」と書いているが、
   土台の .sp-text-center は text-align を変えるだけで、block の a を動かさない。
   実測: 1280px で margin-left 0px ／ margin-right 210px、375px でも a の左端＝列の左端。
   ＝ 中央寄せは一度も起きていなかった。
   ★境界は 767px にする（規約 R-6 の 768px 統一からは外れるが、規約自身が
     「土台の min-width:768px と 1px 重なるときの対処1」として明示的に認めている書き方）。
     理由は2つあって、どちらも実測で確かめた。
     ・768px にすると、その1点だけ「2カラムなのに CTA が中央寄せ」になる。
       実測の列左端からのオフセット 767px=233.5 ／ 768px=43.3 ／ 769px=0.0。
       受領時の 768px は 0.0 なので、これは【自分が新しく作ったズレ】になる。768px は
       タブレット縦持ちの実幅なので、珍しい幅ではない。
     ・そもそも土台の .sp-text-center 自体が @media（max-width:767px）で定義されている。
       このクラスを手がかりに中央寄せするのに、境界だけ 768px にするのは辻褄が合わない。
     ★代償: lint の R6-bp が警告1件になる（error ではない）。 */
@media (max-width: 767px) {
  .mod_07_section .more.sp-text-center a {
    margin-inline: auto;
  }
}

/* ── R-9: 動きを減らす設定 ───────────────────────────────────────────────
   common.css の prefers-reduced-motion ブロックが全体に transition-duration 0.01ms を
   当てているので、ここは明示の二重指定（土台が差し替わったときの保険）。
   ★ボタン本体と矢印グリフはペアで止める。矢印は :after の位置を 5% → 4% へ動かす合図を
     持っているので、片方だけ止めると「面は即座に変わるのに矢印だけ滑る」状態になる。
   ★transform は戻さない。矢印は回転で形そのものを作っているので、
     transform:none を当てるとグリフごと消える。止めるのは遷移だけ。 */
@media (prefers-reduced-motion: reduce) {
  .mod_07_section .more a,
  .mod_07_section .more a::after {
    transition: none;
  }
}