/* ============================================================
   download.html（資料ダウンロード）専用スタイル
   ------------------------------------------------------------
   読み込み順：common.css → download.css
   フォーム部品（.form-field / .form-consent / .form-status）は
   common.css の共通コンポーネント。ここは外側の箱と資料紹介だけ持つ
   ============================================================ */

/* ---- 配下ページ共通の控えめ見出し（このページ内のみ上書き） ---- */
main .en-h2 {
  font-size: var(--fs-en-h3);
  letter-spacing: 3px;
}

.download-hero { padding-block: clamp(48px, 6vw, 104px) 0; }
.download-hero__lead {
  margin-top: clamp(20px, 2.5vw, 32px);
  max-width: 74ch;
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: 1px;
  color: var(--neutral-800);
}

/* ============ 資料の紹介（表紙＋概要） ============ */
.download-intro-section { margin-top: clamp(32px, 4vw, 56px); }
.download-intro {
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 40px);
}
/* 表紙は16:9。枠線を薄く入れて「紙のもの」に見せる */
.download-intro__cover {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(14, 59, 52, 0.12);
}
.download-intro__title {
  font-size: var(--fs-jp-md);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
  color: var(--teal-900);
}
/* 形式・ページ数・容量。中点で区切って1行に並べる */
.download-intro__meta {
  margin-top: 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  color: var(--neutral-700);
}
.download-intro__meta li { display: flex; align-items: center; gap: 16px; }
.download-intro__meta li + li::before {
  content: "";
  width: 1px;
  height: 12px;
  background: rgba(14, 59, 52, 0.2);
}
.download-intro__desc {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: var(--fs-body-sm);
  line-height: 1.9;
  letter-spacing: 1px;
  color: var(--neutral-800);
}

@media (min-width: 768px) {
  /* PCは表紙を左、概要を右に。表紙は主役ではないので幅を抑える */
  .download-intro { flex-direction: row; align-items: flex-start; }
  .download-intro__cover { width: 46%; flex-shrink: 0; }
  .download-intro__body { flex: 1; min-width: 0; }
}

/* ============ 入力フォーム ============ */
.download-form-section { margin-block: clamp(32px, 4vw, 56px) clamp(56px, 8.33vw, 160px); } /* 回遊リンク・Contactパネルを撤去したので、フッターまでの余白はここで持つ（contact.htmlと同値） */
.download-form {
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(32px, 4vw, 64px) clamp(24px, 5vw, 88px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
/* 各フィールドは読み書きしやすい幅に頭打ちして白カード内で中央寄せ */
.download-form > * {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
.download-form__submit { align-self: center; width: fit-content; margin-top: 8px; }
.download-form__submit:disabled { opacity: 0.55; cursor: default; } /* 下は Contact＋SNS パネルが続くため */