/* 資料請求 LP（lp_lead_download）— XD BtoB 潜在層ワイヤー準拠
 * ベンチマーク色（:root はテンプレ inline の css_* と一致させる）:
 *   #1B224C 濃紺（本文・見出し・罫線系） / #00AFB9 アクセント
 *   #F8F9FA サブ背景 / #FFFFFF 背景・反転文字
 *   CTA グラデ: #00AFB9 → #00C6D4
 * rgba(27,34,76,…) はいずれも #1B224C のアルファ版 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.leadDl {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--css_baseTextColor, #1b224c);
  background: var(--css_lightColor, #ffffff);
}

.leadDl__wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ----- ヘッダー ----- */
/* 水平余白は .leadMain と同じ（外側パディング → 内側 max-width 1280） */
.leadHeader {
  background: var(--css_subBackgroundColor, #f8f9fa);
  padding-left: 24px;
  padding-right: 24px;
}

.leadHeader__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.leadHeader__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}

.leadHeader__logo img {
  display: block;
  max-height: 40px;
  width: auto;
  height: auto;
}

.leadHeader__logoText {
  font-weight: 700;
  font-size: 1.125rem;
}

.leadHeader__contact {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}

.leadHeader__telBlock {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.leadHeader__tel {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--css_deepColor, #1b224c);
  text-decoration: none;
}

.leadHeader__hours {
  display: block;
  color: var(--css_deepColor, #1b224c);
  opacity: 0.85;
  margin-top: 2px;
}

/* ----- タイトル帯・区切り線 ----- */
.leadMain {
  flex: 1;
  padding: 0 24px 48px;
}

@media (min-width: 1280px) {
  .leadMain {
    padding-left: 138px;
    padding-right: 138px;
  }

  .leadHeader {
    padding-left: 138px;
    padding-right: 138px;
  }
}

.leadMain__titleBand {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 0 20px;
  text-align: center;
}

.leadMain__title {
  margin: 0;
  /* 基準 clamp の 1.5 倍（資料タイトル・メイン見出し） */
  font-size: clamp(1.875rem, 3.3vw, 2.625rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--css_deepColor, #1b224c);
}

.leadMain__titleDivider {
  max-width: 1280px;
  margin: 0 auto 32px;
  height: 1px;
  background: var(--css_deepColor, #1b224c);
  border: 0;
}

/* ----- 2 カラム ----- */
.leadMain__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 900px) {
  .leadMain__grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: 48px 56px;
  }
}

.leadMain__docCol {
  max-width: 700px;
  width: 100%;
  margin-inline: auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.leadMain__lead {
  margin-block: 0;
  margin-bottom: 24px;
  margin-inline: 0;
  /* font-size 2rem 時は 1.45 だと行ボックスが約 2.9rem と高く、<br> 間が広く見えるためやや低めにする */
  line-height: 1.25;
  /* 本文 1rem の 2 倍（資料のリード文） */
  font-size: 2rem;
  color: var(--css_baseTextColor, #1b224c);
  white-space: pre-wrap;
}

.leadMain__lead--center {
  text-align: center;
}

.leadMain__mockup {
  margin: 0 0 28px;
  padding: 0;
  text-align: center;
  background: transparent;
}

.leadMain__mockup img {
  position: relative;
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 450px;
  margin-inline: auto;
  object-fit: contain;
  border-radius: 6px;
  vertical-align: middle;
}

.leadMain__recommendBox {
  margin: 0;
  padding: 20px 22px 22px;
  border-radius: 8px;
  background: var(--css_subBackgroundColor, #f8f9fa);
  /* #1B224C @ 6% */
  border: 1px solid rgba(27, 34, 76, 0.06);
}

.leadMain__subhead {
  margin: 0 0 12px;
  /* 1.0625rem の 1.3 倍（おすすめ見出し） */
  font-size: calc(1.0625rem * 1.3);
  font-weight: 700;
  color: var(--css_themeColor, #00afb9);
}

.leadMain__bullets {
  margin: 0;
  padding-left: 1.25em;
  /* 本文 1rem の 1.3 倍（おすすめ箇条書き） */
  font-size: calc(1rem * 1.3);
  color: var(--css_baseTextColor, #1b224c);
}

.leadMain__bullets li {
  margin-bottom: 8px;
}

.leadMain__bullets li::marker {
  color: var(--css_themeColor, #00afb9);
}

/* ----- フォームカラム ----- */
.leadMain__formCol {
  position: relative;
}

.leadFormCard {
  background: var(--white, #fff);
  border-radius: 8px;
  padding: 28px 24px 32px;
  /* #1B224C — ワイヤーより強いドロップシャドウ */
  box-shadow:
    0 4px 14px rgba(27, 34, 76, 0.12),
    0 2px 6px rgba(27, 34, 76, 0.08);
  border: 1px solid rgba(27, 34, 76, 0.1);
}

.leadFormCard__privacyNotice {
  margin: 0 0 20px;
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: center;
  /* #1B224C @ 85% */
  color: rgba(27, 34, 76, 0.85);
}

.leadFormCard__form {
  margin-bottom: 16px;
}

.leadFormCard__note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  /* #1B224C @ 75% */
  color: rgba(27, 34, 76, 0.75);
  white-space: pre-wrap;
  text-align: center;
}

/* フォーム出力（form-output.css）— XD 寄せの上書き */
.leadDl #contact-form .form-input,
.leadDl #contact-form .form-textarea,
.leadDl #contact-form .form-select {
  border-width: 0.5px;
  /* #1B224C @ 45% */
  border-color: rgba(27, 34, 76, 0.45);
  border-radius: 5px;
  padding: 0.75rem 1rem;
}

.leadDl #contact-form .form-input:focus,
.leadDl #contact-form .form-textarea:focus,
.leadDl #contact-form .form-select:focus {
  border-color: var(--css_deepColor, #1b224c);
  /* #1B224C @ 18% */
  box-shadow: 0 0 0 2px rgba(27, 34, 76, 0.18);
}

.leadFormCard__form .form-group {
  margin-bottom: 1rem;
}

.leadFormCard__form label {
  font-weight: 500;
}

.leadFormCard__form .required {
  color: var(--requiredRed, #e32);
}

/* ----- フッター（XD ネイビー帯 = deepColor） ----- */
.leadFooter {
  margin-top: auto;
  padding: 12px 24px 14px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--css_invertedTextColor, #ffffff);
  background: var(--css_deepColor, #1b224c);
}

@media (min-width: 1280px) {
  .leadFooter {
    padding-left: 138px;
    padding-right: 138px;
  }
}

.leadFooter__company {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.45;
}

.leadFooter__copy {
  margin: 0 0 8px;
}

.leadFooter p {
  margin: 0.5em 0 0;
}

.leadFooter p.leadFooter__company {
  margin-top: 0;
}

.leadFooter a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
}

.leadFooter a:hover {
  color: #ffffff;
}