/*
 * 資料請求（/download-form/ ＋ 配下 16 件のフォーム）— DESIGN_SYSTEM v2「A-4 Data」適用
 * 正本: source/DESIGN_SYSTEM.md（v2）
 *
 * 旧実装は v1 の #19CDB2 系トークンをページ内 <style> に直書きし、
 * style.css（v1 グローバル）を読み込んでいた。v2 化にあたり次を廃止した。
 *   - ヒーローの teal → 白 グラデ面（§11 NG#8 グラデの大面積塗り）
 *   - CTA の teal→blue グラデ塗り＋pill radius（§5 は黒 ✦ / radius 12 が正）
 *   - カードの hover lift（translateY(-4px)・NG#5）と drop shadow
 *   - 淡色面 ＋ 中間色文字のチップ（#E6FAF7 面に #14B89E 文字・NG#4）
 *   - フォームページのダミー資料モック（teal→blue グラデ面。NG#8 かつ
 *     実サムネイル画像が既にあるのに使っていなかった）
 *
 * トークンは corporate-v2.css の .brand-v2 スコープを使う。
 * このファイルは :root を定義しない（§14-1: style.css の :root は
 * media 記事 1,000 本超が参照しているため触らない）。
 */

/* ============================================================
   0. ページ土台
   style.css を読まないので素タグのグローバル CSS は当たらないが、
   AGENTS.md に従って必要な打ち消しは明示しておく。
   ============================================================ */

.dlh-body,
.dlh-body *,
.dlh-body *::before,
.dlh-body *::after,
.dlf-body,
.dlf-body *,
.dlf-body *::before,
.dlf-body *::after {
  box-sizing: border-box;
}

.dlh-body,
.dlf-body {
  margin: 0;
  font-family: var(--sans);
  background: var(--v2-bg);
  color: var(--ink);
}

.dlh-body a,
.dlf-body a {
  color: inherit;
  text-decoration: none;
}

.dlh-body img,
.dlf-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   1. 共通レイアウト（.v2-inner と同じ器）
   ============================================================ */

.dlh-body .dl-shell,
.dlf-body .dl-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.dlh-body .dl-hero,
.dlf-body .dl-hero {
  padding: 52px 0 40px;
}

/*
 * flanking の ✧（trail）は .v2-flank の右下 14px 外側に出る。
 * h1 とリードの間に逃げを取って本文 1 行目と重ならないようにする。
 * max-width は 2 行以上に折り返したときの measure を抑えるため。
 * なお docNN 側は資料名が長く h1 が必ず折り返すので、右下 ✧ を置くと
 * 最終行から大きく離れて浮く。左上 ✦ のみにしてある（§3 が認める形）。
 */
.dlh-body .dl-hero .v2-display,
.dlf-body .dl-hero .v2-display {
  margin: 14px 0 0;
  max-width: 22em;
}

.dlh-body .dl-hero .v2-lead,
.dlf-body .dl-hero .v2-lead {
  margin: 30px 0 0;
  max-width: 42em;
}

/* パンくず（§5「パンくず 11.5px・現在地のみ ink」） */
.dlh-body .dl-crumb,
.dlf-body .dl-crumb {
  margin: 0 0 18px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--faint);
}

.dlh-body .dl-crumb a,
.dlf-body .dl-crumb a {
  color: var(--teal-d);
  font-weight: 700;
}

.dlh-body .dl-crumb a:hover,
.dlf-body .dl-crumb a:hover {
  text-decoration: underline;
}

.dlh-body .dl-crumb__sep,
.dlf-body .dl-crumb__sep {
  margin: 0 7px;
  color: #C6CFDA;
}

.dlh-body .dl-crumb__here,
.dlf-body .dl-crumb__here {
  color: var(--ink);
}

/* ============================================================
   2. ハブ（/download-form/）
   ============================================================ */

/* セクション間は罫線 1 本（.v2-block と同じ文法） */
.dlh-body .dlh-sec + .dlh-sec {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.dlh-body .dlh-sec-head {
  margin-bottom: 24px;
}

.dlh-body .dlh-sec-head .v2-eyebrow {
  margin-bottom: 10px;
}

.dlh-body .dlh-sec-head .v2-h2 {
  margin: 0;
}

.dlh-body .dlh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/*
 * カードは corporate-v2.css の .v2-gcard / .v2-gthumb / .v2-gbody を使う
 * （囲いカードはアーカイブ一覧とギャラリーのみ・§5）。
 * サムネ比だけ 16:10 に上書きする。資料サムネは 1586x992 の実アセットで、
 * 16:9 に切ると資料表紙の上下（表組み・グラフ）が欠ける。
 */
.dlh-body .dlh-grid .v2-gcard {
  display: flex;
  flex-direction: column;
}

.dlh-body .dlh-grid .v2-gthumb {
  aspect-ratio: 16 / 10;
}

.dlh-body .dlh-grid .v2-gbody {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.dlh-body .dlh-card-desc {
  display: block;
  margin: 9px 0 16px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--v2-muted);
}

/* 罫線 1 本で区切った行末リンク（§5）。hover lift はしない（NG#5） */
.dlh-body .dlh-card-foot {
  display: flex;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.dlh-body .dlh-card-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal-d);
}

.dlh-body .dlh-card-arrow {
  display: inline-block;
  transition: transform .15s var(--ease-swift);
}

.dlh-body .v2-gcard:hover .dlh-card-arrow {
  transform: translateX(4px);
}

.dlh-body .dlh-contact {
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  .dlh-body .dlh-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .dlh-body .dlh-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   3. フォームページ（/download-form/docNN/）
   noindex の申込みページなので地紋（§8）は敷かない。
   フォームは右カラムに来るため、右アンカーのリングが入力欄と重なって
   §8 の「本文コントラスト非干渉」を破る。
   ============================================================ */

.dlf-body .dlf-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
  padding-bottom: 32px;
}

.dlf-body .dlf-doc {
  position: sticky;
  top: 96px;
}

.dlf-body .dlf-doc-thumb {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #F0F2F5;
}

.dlf-body .dlf-doc-thumb img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.dlf-body .dlf-doc-meta {
  margin-top: 20px;
}

.dlf-body .dlf-doc-title {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--ink);
}

.dlf-body .dlf-doc-lead {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--v2-muted);
}

.dlf-body .dlf-doc-includes-title {
  margin: 26px 0 0;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--ink);
}

/* 罫線行 ＋ 行頭 ✦（A-4 の主役・§5 / §3「行マーカー」） */
.dlf-body .dlf-doc-includes {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.dlf-body .dlf-doc-includes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--v2-muted);
}

.dlf-body .dlf-doc-includes i {
  font-style: normal;
  font-size: 11px;
  line-height: 1.9;
  color: var(--teal);
}

/* フォーム面。囲いは 1px --line のみ・影なし（§5） */
.dlf-body .dlf-form {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.dlf-body .dlf-form-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
}

.dlf-body .dlf-form-lead {
  margin: 8px 0 22px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--v2-muted);
}

/*
 * 埋め込みフォームは shadow DOM 内で自前のスタイルを持つため、
 * ページ側の CSS は届かない。高さだけ予約して CLS を出さない（§12）。
 */
.dlf-body .dlf-form-embed {
  min-height: 200px;
}

.dlf-body .dlf-form-note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.8;
  color: var(--faint);
}

.dlf-body .dlf-form-note a {
  color: var(--teal-d);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dlf-body .dlf-back {
  margin: 0;
  padding-bottom: 16px;
}

@media (max-width: 880px) {
  .dlf-body .dlf-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .dlf-body .dlf-doc {
    position: static;
  }

  .dlf-body .dlf-form {
    padding: 22px;
  }
}

@media (max-width: 720px) {
  .dlh-body .dl-hero,
  .dlf-body .dl-hero {
    padding: 40px 0 30px;
  }
}