/* =========================================================================
   機能（/features）だけで使う部品。2026-10-09 の作り直しで足した
   節はトップの約束の順（聞く → ダッシュボード → コンテキスト → 使う場所 → 選ぶ理由）
   見出し・一覧の行・選ぶ理由のカードはトップの home.css の部品（.ctx・.why・.arrow-link）を使う
   箱と影は使わず、上の罫線と余白で区切る
   ========================================================================= */

/* 節の中の1つの機能（見出し＋文＋一覧、その下に動画か一覧の表） */
.fx + .fx{margin-top:var(--topic)}
.fx-copy{max-width:760px}
.fx-copy h3{font-family:var(--f-ja);font-weight:600;font-size:clamp(21px,2.3vw,24px);line-height:1.5;color:var(--n900);letter-spacing:.01em}
.fx-copy p{margin-top:var(--s-12);font-size:16px;line-height:1.85;color:var(--n800);letter-spacing:.02em}
.fx-copy .feat-list{margin-top:var(--s-16);max-width:none;gap:var(--s-8)}
.fx-copy .feat-list li{font-size:15px}
.fx-note{margin-top:var(--s-12);font-size:13px;line-height:1.7;color:var(--n600)}
.fx .arrow-link{margin-top:var(--s-16)}

/* 一覧の表を2つ並べる（.ctx の dl を使う） */
.fx-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--part);margin-top:var(--part)}
.fx-cols.one{grid-template-columns:minmax(0,1fr);max-width:880px}
.fx-cols .ctx dl{grid-template-columns:10em minmax(0,1fr)}
/* 見出し語が長いもの（会話からダッシュボードへ など）は2行に折れるので、右の文と離す */
.fx-cols .ctx dt{padding-right:var(--s-16)}

/* 選ぶ理由のカードの中の一覧（安全か） */
.why dl{display:grid;grid-template-columns:7.5em minmax(0,1fr);margin-top:var(--s-16)}
.why dt,.why dd{padding:var(--s-12) 0;border-bottom:1px solid var(--n200);font-size:14px;line-height:1.7}
.why dt{font-weight:600;color:var(--n900);padding-right:var(--s-12)}
.why dd{color:var(--n800)}

/* 説明を左、動画を右に並べた行（ダッシュボードの節のレポートと定時の配信）。動画は 960×540 の紙を 0.75 倍以上で置く
   （製品の 12px が 9px を下回らない）。列の 722px は枠線の 1px ずつを含む。列が取れない幅では、文の下に全幅で置く。
   並べるかは画面の幅ではなく、本文の列の幅で決める（トップのコンテキストの節と同じ） */
.fx-rows{margin-top:var(--block);container-type:inline-size}
.fx-row + .fx-row{margin-top:var(--block)}
.fx-row-in .fx-copy p{max-width:none}
@container (min-width:1062px){
  .fx-row-in{display:grid;grid-template-columns:minmax(0,1fr) 722px;gap:var(--part);align-items:center}
  .fx-row-in .feat-motion{margin-top:0}
}

@media (max-width:960px){
  .fx-cols{grid-template-columns:minmax(0,1fr);gap:var(--part)}
}
@media (max-width:760px){
  .fx + .fx{margin-top:var(--topic)}
  .fx-cols .ctx dl{grid-template-columns:6.5em minmax(0,1fr)}
}