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

.mod_16_section .mod_16_wrap .col {
  position: relative;
  padding: 1em;
  overflow: hidden;
  transition-duration: 0.5s;
}
.mod_16_section .mod_16_wrap .col:hover {
  transition-duration: 0.5s;
}
.mod_16_section .mod_16_wrap .mod_16_txt .mod_16_title {
  margin-bottom: 0;
  margin-top: 0.5em;
}
.mod_16_section .mod_16_wrap .mod_16_txt a:not(.button) {
  text-decoration: none;
}
.mod_16_section .mod_16_wrap .mod_16_txt a:not(.button):after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
}
.mod_16_section.typeA .mod_16_wrap .col {
  background: var(--color-bg);
}
.mod_16_section.typeA .mod_16_wrap .col:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.mod_16_section.typeA .mod_16_wrap .col:hover :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])), .mod_16_section.typeA .mod_16_wrap .col:hover h3, .mod_16_section.typeA .mod_16_wrap .col:hover p, .mod_16_section.typeA .mod_16_wrap .col:hover a:not(.button) {
  color: var(--color-on-primary);
}
.mod_16_section.typeA .mod_16_wrap .col:hover a.button {
  background: var(--color-on-primary);
  color: var(--color-heading-ink);
  border-color: var(--color-on-primary);
}
.mod_16_section.typeB .mod_16_wrap .col {
  background: var(--color-bg);
}
.mod_16_section.typeB .mod_16_wrap .col:before, .mod_16_section.typeB .mod_16_wrap .col:after {
  transition-duration: 0.1s;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--color-primary); color: var(--color-on-primary); }
.mod_16_section.typeB .mod_16_wrap .col:before {
  z-index: 2;
}
.mod_16_section.typeB .mod_16_wrap .col:after {
  opacity: 0;
  right: 100%;
  left: -100%;
  z-index: 3;
  background: var(--m16-sink); color: var(--m16-sink-ink); }
.mod_16_section.typeB .mod_16_wrap .col:hover:before, .mod_16_section.typeB .mod_16_wrap .col:hover:after {
  transition-duration: 0.5s;
}
.mod_16_section.typeB .mod_16_wrap .col:hover:after {
  opacity: 1;
  right: 0;
  left: 0;
}
.mod_16_section.typeB .mod_16_wrap .col:hover a.button {
  background: var(--m16-sink);
  color: var(--m16-sink-ink);
  border-color: var(--m16-sink);
}
.mod_16_section.typeC .mod_16_wrap .col {
  background: var(--color-primary); color: var(--color-on-primary); }
.mod_16_section.typeC .mod_16_wrap .col :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])), .mod_16_section.typeC .mod_16_wrap .col h3, .mod_16_section.typeC .mod_16_wrap .col p, .mod_16_section.typeC .mod_16_wrap .col a:not(.button) {
  color: var(--color-on-primary);
}
.mod_16_section.typeC .mod_16_wrap .col a.button {
  background: var(--color-on-primary);
  color: var(--color-heading-ink);
  border-color: var(--color-on-primary);
}
.mod_16_section.typeC .mod_16_wrap .col:hover {
  background: var(--m16-sink);
  color: var(--m16-sink-ink);
}
.mod_16_section.typeC .mod_16_wrap .col:hover :is(h2:where(:not([data-sm-h])),:where([data-sm-h="h2"])), .mod_16_section.typeC .mod_16_wrap .col:hover h3, .mod_16_section.typeC .mod_16_wrap .col:hover p, .mod_16_section.typeC .mod_16_wrap .col:hover a:not(.button) {
  color: var(--m16-sink-ink);
}
.mod_16_section.typeC .mod_16_wrap .col:hover a.button {
  background: var(--color-on-primary);
  color: var(--color-primary-dark);
  border-color: var(--color-on-primary);
}

/* SM-FIX-20260819 */
/* 2026-08-19: 黒地に黒文字。ブランド色の面に置くボタンが
   background: var(--color-on-primary)（＝面の上の【文字色】トークンを背景に使う誤用）
   ＋ color: var(--color-heading-ink)（未定義＝無効で継承）で、typeC と typeA:hover の
   ボタンが完全に読めなくなっていた。面の反転は地色トークンで行う。 */
.mod_16_section.typeA .mod_16_wrap .col:hover a.button,
.mod_16_section.typeC .mod_16_wrap .col a.button,
.mod_16_section.typeC .mod_16_wrap .col:hover a.button{
  background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg);
}

/* MOD16-FIX-20260919 (計画: features-mod-16-plan.md) — 意匠は追加せず、受領時の演出を
   ①案件が振れても壊れないように（写真比・カード高さ）②実際に見えるように（typeB罫・typeCホバー文字）
   ③操作できるように（フォーカスリング・reduced-motion）だけ手当てする。 */

/* D1/D4: ホバーの「沈む側」を実効的な暗色に。--color-primary-dark は「わずかに暗くする」
   効果しかなく、4配色すべてで罫の差・typeCホバー本文のAAが未達だった（計画 §3 D1/D4）。
   N=35%（実測: 既定4.05 / 淡色5.67 / 高彩度3.22 ＝ 3:1達成。濃色ネイビーのみ primary が既に
   黒に近く、原理的にこれ以上暗くしても差が出ない＝構造的な限界。§9-1 で先方へ指摘）。 */
.mod_16_section {
  --m16-sink: color-mix(in srgb, var(--color-primary) 35%, #000);
  --m16-sink-ink: #fff; /* 面が必ず暗くなるため白固定（R-1 の例外） */
  --m16-ratio: 3 / 2;   /* D3: 同梱素材(1.833/1.429)双方の切れ量を抑える中間比（§8-2） */
}

/* D3: 写真の器に比を与える。器に overflow:hidden を必ず添える（aspect-ratio は
   overflow:visible だと内容がその比を超えて溢れうる際に無視される／anti-patterns.md）。
   max-height:none で common.css の img の max-height:800px 指定を打ち消す（縦長素材の対策・§8-3）。
   ★margin:0 は module-base.css が後方で既に `.lgx figure{margin:0}` を宣言しており実質は上書きの
   重複（figureのmarginは元々0px）。将来の変更で土台側の記述が変わっても崩れないよう明示しておく。 */
.mod_16_section .col figure {
  margin: 0;
  width: 100%;
  aspect-ratio: var(--m16-ratio);
  overflow: hidden;
}
.mod_16_section .col figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
}

/* D2: カードの高さと MORE の下端を揃える。.row.tile が付いておらず土台に高さ揃えの
   仕組みが無い（README 自認）ため、768px 以上を flex 化する。width:32%/margin-left:2%
   はそのまま残し、gap は新設しない（三重の間隔取りを避ける）。
   ★境界は min-width:768px（lint R6-bp warn を許容）。土台 module-base.css が
   min-width:768px で float 3列へ切り替わるのに合わせる。769px にすると
   768px ちょうどで float/flex が1px噛み合わない状態ができる（計画 §6 手順3）。 */
@media (min-width: 768px) {
  .mod_16_section .mod_16_wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .mod_16_section .mod_16_wrap:after {
    display: none;
  }
  .mod_16_section .mod_16_wrap > .col {
    float: none;
    display: flex;
    flex-direction: column;
  }
  .mod_16_section .mod_16_wrap > .col:after {
    display: none;
  }
  .mod_16_section .mod_16_txt {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .mod_16_section .mod_16_txt .more {
    margin-top: auto;
    /* 差し戻し②: PCでMOREボタン幅が狙いより小さい。実測(差し戻し前・1440px):
       `.more`(土台 `.lgx .more{margin:auto}`)の左右auto余白が、このflex化(D2)の
       交差軸(横)の align-items:stretch を無効化し、`.more`自身がコンテンツ幅(122.94px)まで
       縮んで中央寄せされていた(mod-09の同型バグと同一原因)。左右marginを0に固定してstretchを
       効かせ、`.more`を列の内寸(275.2px)まで広げる→内側の`<a>`(width:100%; max-width:280px)が
       追従して大きくなる。 */
    margin-left: 0;
    margin-right: 0;
  }
  /* 差し戻し①: PCでMOREボタンの文字が大きい。ボタンの高さは変えず、テキストのみ縮小し
     余白(padding-top/bottom)で高さを埋め戻す。
     実測(差し戻し前・PC 1440px): font-size 28.8px(1.8rem。土台 `.lgx .more a` の
     `@media(min-width:768px)`指定) / padding-top・bottom 各17.28px(0.6em) / border 1px×2
     → 高さ実測 65.33px。font-sizeを1.4rem(22.4px。SPと同サイズ)へ縮小し、
     padding-top/bottomを20.5pxへ上げて同じ高さ(22.4+20.5*2+1*2=65.4px)を保つ。
     左右paddingは0.6emのまま(土台の`.lgx .more a`が残す)。
     ★同じ min-width:768px を複数書かず既存のD2ブロックへ合流させる（lint R6-bp warn を増やさない）。 */
  .mod_16_section .more a.button {
    font-size: 1.4rem;
    padding-top: 20.5px;
    padding-bottom: 20.5px;
  }
}

/* D5: 土台の .lgx .more の overflow:hidden 指定がフォーカスリングの4辺すべてを刈る
   （anti-patterns.md「.lgx .more の overflow:hidden は…」）。flow-root で clearfix の
   効果を切らずに開ける。詳細度 (0,3,0) で 土台側 (0,2,0) に勝つ。 */
.mod_16_section .mod_16_txt .more {
  display: flow-root;
  overflow: visible;
}

/* D6: transition を色系プロパティへ絞り、prefers-reduced-motion に対応する
   （受領時は transition:0.5s ＝ all。lint R9-motion）。演出の形（0.5sの色替え／
   typeBの罫のスライド）は変えない。疑似要素は個別に列挙する（*だけでは止まらない）。 */
.mod_16_section .mod_16_wrap .col {
  transition-property: background-color, color;
  transition-duration: 0.5s;
}
.mod_16_section.typeB .mod_16_wrap .col:before,
.mod_16_section.typeB .mod_16_wrap .col:after {
  transition-property: opacity, left, right, background-color;
}
@media (prefers-reduced-motion: reduce) {
  .mod_16_section .mod_16_wrap .col,
  .mod_16_section .mod_16_wrap .col:before,
  .mod_16_section .mod_16_wrap .col:after {
    transition: none;
  }
}