/* =============================================================
 * 資料ダウンロードページ（/download/*）
 *
 * ヘッダー・ボタン・セクション骨格は lp.css、フォーム部品は onbx.css の
 * お問い合わせ用クラス(.form-panel / .input / .field 等)をそのまま流用する。
 * ここには DL ページ固有のレイアウトだけを置く。
 * ============================================================= */

/* --- ヘッダー：ロゴだけの集中型（離脱導線を減らす） --- */
.dl-header { justify-content: center; }

/* --- ヒーロー：表紙 + タイトル + 概要 --- */
.dl-hero { background: var(--lp-grey-bg); padding: 56px var(--lp-pad-x) 48px; }
.dl-hero-inner {
  max-width: var(--lp-max); margin: 0 auto;
  display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 48px; align-items: center;
}
/* 資料は16:9のスライド形式なので、表紙も横長で見せる（1280x720 の画像を想定） */
.dl-cover {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 24px 48px rgba(26, 11, 0, 0.18), 0 2px 6px rgba(26, 11, 0, 0.08);
}
.dl-hero-copy { display: flex; flex-direction: column; gap: 18px; }
.dl-hero h1 { font-size: 34px; font-weight: 800; line-height: 1.45; text-wrap: balance; }
.dl-hero-lead { font-size: 15px; line-height: 1.9; color: var(--lp-body); }
.dl-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.dl-meta li {
  font-size: 12px; font-weight: 600; color: var(--lp-body);
  background: var(--lp-white); border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-pill); padding: 5px 14px;
}

/* --- 本文：左に内容、右にフォーム --- */
.dl-body { padding: 56px var(--lp-pad-x) 72px; }
.dl-layout {
  max-width: var(--lp-max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; align-items: start;
}
.dl-content { display: flex; flex-direction: column; gap: 40px; }
.dl-content h2 { font-size: 22px; font-weight: 800; }
.dl-content > section { display: flex; flex-direction: column; gap: 16px; }

/* 「この資料でわかること」チェックリスト */
.dl-points li {
  position: relative; padding-left: 32px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.8; color: var(--lp-navy);
}
.dl-points li::before {
  content: ''; position: absolute; left: 0; top: 5px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--lp-orange);
}
.dl-points li::after {
  content: ''; position: absolute; left: 7px; top: 9px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* 目次 */
.dl-toc { counter-reset: toc; border: 1px solid var(--lp-border); border-radius: var(--lp-radius); overflow: hidden; }
.dl-toc li {
  counter-increment: toc; display: flex; gap: 14px; align-items: baseline;
  padding: 14px 20px; border-bottom: 1px solid var(--lp-border);
  font-size: 14px; line-height: 1.7; color: var(--lp-navy);
}
.dl-toc li:last-child { border-bottom: none; }
.dl-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; color: var(--lp-orange);
  flex-shrink: 0;
}

/* こんな方に */
.dl-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dl-fit li {
  background: var(--lp-orange-bg); border-radius: var(--lp-radius);
  padding: 14px 18px; font-size: 14px; font-weight: 600; line-height: 1.6;
}

/* --- フォーム側：追従 --- */
.dl-form-col { position: sticky; top: 88px; }
.dl-form-col .form-panel { padding: 32px 32px 28px; }
.dl-form-col .form-panel-title { font-size: 20px; }
.dl-form-col .field-grid { grid-template-columns: minmax(0, 1fr); }
.dl-form-col .btn-submit { width: 100%; }
.dl-form-col .select {
  font-family: 'Noto Sans JP', sans-serif; font-size: 16px; color: var(--lp-navy);
  background: #fff; border: 1px solid #d8dde3; border-radius: 6px; padding: 12px 14px;
  width: 100%; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23475668' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.dl-form-col .select:focus { outline: none; border-color: var(--lp-orange); box-shadow: 0 0 0 3px rgba(255,111,0,0.10); }
.dl-form-col .field.error .select { border-color: #e53e3e; }

/* --- 送信後：DLリンク表示 --- */
.dl-result { display: none; }
.dl-result.is-visible { display: block; }
.dl-result .thanks-card { padding: 36px 28px; }
.dl-result-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--lp-orange); color: #fff !important;
  font-size: 16px; font-weight: 700; border-radius: var(--lp-radius-pill);
  padding: 16px 36px; margin-top: 8px; box-shadow: 0 6px 20px rgba(255,111,0,0.35);
  transition: background .2s, transform .2s;
}
.dl-result-btn:hover { background: var(--lp-orange-hover); transform: translateY(-1px); }
.dl-result-note { font-size: 12px; color: var(--lp-muted); margin-top: 14px; line-height: 1.8; }

/* --- 同意行のエラー表示（お問い合わせ側はReactのインラインstyleで出していたもの） --- */
.consent-row.error { border-color: #e53e3e; background: #fef5f5; }
.dl-consent-hint { display: block; color: #e53e3e; font-size: 11px; margin-top: 6px; }
.dl-consent-hint:empty { display: none; }

/* --- 送信失敗 --- */
.dl-submit-error { color: #e53e3e; font-size: 13px; line-height: 1.7; margin-top: 12px; }

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 1080px) {
  .dl-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
  .dl-hero-inner { grid-template-columns: 420px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .dl-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dl-cover { max-width: 520px; margin: 0 auto; }
  .dl-hero-copy { text-align: center; align-items: center; }
  .dl-meta { justify-content: center; }
  .dl-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dl-form-col { position: static; }
  .dl-fit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .dl-hero { padding: 36px var(--lp-pad-x) 36px; }
  .dl-hero h1 { font-size: 24px; }
  .dl-body { padding: 40px var(--lp-pad-x) 48px; }
  .dl-content h2 { font-size: 19px; }
  .dl-form-col .form-panel { padding: 24px 20px 22px; }
}