/* ==========================================================================
   資料ダウンロード（pages/document-download.html）
   Figma PC 537:18600 / SP 624:6316
   フォームは components.css の .c-form-card / .c-form / .c-form-field / .c-input ほかを使い、
   このページだけ違う所（ラベルの色・必須の「*」・入力欄の高さ・チェックボックス）を .p-dl-form で上書きしている
   ========================================================================== */

/* ---- hero（PC 537:18608 / SP 624:6348） ---- */
.p-dl-hero {
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-white);
}

.p-dl-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-32);
  text-align: center;
}

/* 英字のラベル（DOWNLOAD） */
.p-dl-hero__label {
  padding: 3px 11px; /* 4px 12px から枠線1pxを引く */
  border: 1px solid var(--color-text-primary);
  border-radius: 20px;
  font: 700 12px/1.4 var(--font-en);
  color: var(--color-text-strong);
  text-transform: uppercase;
}

.p-dl-hero__title {
  font: 700 24px/1.4 var(--font-jp);
  color: var(--color-text-dark);
}

.p-dl-hero__lead {
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

/* ---- form-section（PC 537:18612 / SP 624:6352） ---- */
.p-dl-main {
  padding-block: var(--space-32) var(--space-48);
}

.p-dl-main__inner {
  display: grid;
  gap: var(--space-32);
}

/* ---- お届けする資料の内容（PC 537:18613 / SP 624:6353） ---- */
.p-dl-doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.p-dl-doc__title {
  font: 700 16px/1.6 var(--font-jp);
  color: var(--color-text-dark);
}

.p-dl-doc__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-20);
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-white);
}

/* 資料の画像3枚の重なり。位置と角度は Figma の実値（SP 624:6356 は 280x180 の箱に 160x90 の画像） */
.p-dl-doc__images {
  position: relative;
  flex: none;
  width: 280px;
  max-width: 100%;
  height: 180px;
}

.p-dl-doc__image {
  position: absolute;
  width: 160px;
  max-width: none;
  height: 90px;
  object-fit: cover;
  box-shadow: var(--shadow-default);
}

.p-dl-doc__image--1 { top: 7.7px;   left: 5.77px;  transform: rotate(-8.49deg); }
.p-dl-doc__image--2 { top: 37.09px; left: 95.57px; transform: rotate(5.22deg); }
.p-dl-doc__image--3 { top: 73.03px; left: 43.54px; transform: rotate(-4.88deg); }

.p-dl-doc__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
}

.p-dl-doc__name {
  font: 700 14px/1.6 var(--font-jp);
  color: var(--color-text-dark);
}

.p-dl-doc__list {
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

/* 行頭の「・ 」は Figma の文字のまま（折り返した2行目は字下げしない） */
.p-dl-doc__list li::before {
  content: "・ ";
}

/* ---- ダウンロードお申し込み（PC 537:18624 / SP 624:6363）
        共通のフォーム部品との違いだけを書く ---- */
.p-dl-form.c-form-card {
  gap: var(--space-20);
  padding: var(--space-24);
}

.p-dl-form .c-form-card__title {
  color: var(--color-text-dark);
}

.p-dl-form .c-form {
  gap: var(--space-20);
}

.p-dl-form .c-form__fields {
  gap: 14px; /* Figmaの実値 */
}

.p-dl-form .c-form-field {
  gap: 6px; /* Figmaの実値 */
}

/* ラベル：SPは12px。必須は赤い「*」（お問い合わせの「必須」バッジとは別の見た目） */
.p-dl-form .c-form-field__label {
  gap: var(--space-4);
  font-size: 12px;
  color: var(--color-text-sub);
}

.p-dl-form__required {
  color: var(--color-status-error);
}

/* 入力欄は SP・PC とも高さ40px */
.p-dl-form .c-input,
.p-dl-form .c-select {
  height: 40px;
  padding-block: 0;
}

.p-dl-form .c-input::placeholder {
  color: var(--color-text-inverse-muted);
}

/* セレクトの矢印はこのページ専用（10x6・右端から15px） */
.p-dl-form .c-select {
  color: var(--color-text-sub);
  background-image: url("../../assets/img/document-download/chevron-down-select.svg");
  background-position: right 15px center;
  background-size: 10px 6px;
}

/* 同意のチェックボックス：16px・角丸2px・左寄せ。チェック印はオレンジ */
.p-dl-form .c-form__agree {
  justify-content: flex-start;
}

.p-dl-form .c-checkbox {
  gap: var(--space-8);
  align-items: flex-start;
}

.p-dl-form .c-checkbox__input {
  width: 16px;
  height: 16px;
}

.p-dl-form .c-checkbox__box {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 2px;
  background-size: 10px 8px;
}

.p-dl-form .c-checkbox__input:checked + .c-checkbox__box {
  background-image: url("../../assets/img/document-download/check-small.svg");
}

.p-dl-form .c-checkbox__label {
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

/* Figmaにリンクの指定は無い。文字の色・太さは本文のまま、下線だけ付ける */
.p-dl-form .c-checkbox__label a {
  font-weight: inherit;
  color: inherit;
}

@media (min-width: 1025px) {
  .p-dl-hero__inner {
    gap: var(--space-16);
    padding-block: var(--space-64) var(--space-48);
  }

  .p-dl-hero__title {
    font-size: 40px; /* Figmaの実値（文字スタイルの15種に無い） */
    color: var(--color-text-primary);
  }

  .p-dl-hero__lead {
    max-width: 800px;
    color: var(--color-text-secondary);
  }

  .p-dl-main {
    padding-block: var(--space-60) var(--space-80);
  }

  /* 資料の内容 512px ＋ 余白 48px ＋ フォーム 640px（計1200px）。幅が狭いときは比率で縮む */
  .p-dl-main__inner {
    grid-template-columns: minmax(0, 512fr) minmax(0, 640fr);
    gap: var(--space-48);
    align-items: start;
  }

  .p-dl-doc {
    gap: var(--space-24);
  }

  .p-dl-doc__title {
    font: 700 20px/1.4 var(--font-jp);
    color: var(--color-text-primary);
  }

  .p-dl-doc__card {
    padding: var(--space-32);
  }

  /* PC 537:18616 は 354.82x317.69 の箱に 288x162 の画像 */
  .p-dl-doc__images {
    width: 354.82px;
    height: 317.69px;
  }

  .p-dl-doc__image {
    width: 288px;
    height: 162px;
  }

  .p-dl-doc__image--1 { top: 20.36px;  left: 10.38px; }
  .p-dl-doc__image--2 { top: 75.17px;  left: 60.05px; }
  .p-dl-doc__image--3 { top: 143.72px; left: 28.18px; }

  .p-dl-doc__text {
    gap: var(--space-8);
  }

  .p-dl-doc__name {
    font-size: 16px;
    color: var(--color-text-primary);
    text-align: center;
  }

  .p-dl-doc__list {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-secondary);
  }

  .p-dl-form.c-form-card {
    gap: var(--space-24);
    padding: var(--space-40);
  }

  .p-dl-form .c-form-card__title {
    color: var(--color-text-primary);
  }

  .p-dl-form .c-form {
    gap: var(--space-24);
  }

  .p-dl-form .c-form__fields {
    gap: var(--space-16);
  }

  .p-dl-form .c-form-field__label {
    font-size: 14px;
    color: var(--color-text-secondary);
  }

  .p-dl-form .c-input,
  .p-dl-form .c-select {
    padding-block: 0;
  }

  .p-dl-form .c-input::placeholder {
    color: var(--color-text-muted);
  }

  .p-dl-form .c-select {
    color: var(--color-text-secondary);
  }

  .p-dl-form .c-checkbox {
    align-items: center;
  }

  .p-dl-form .c-checkbox__box {
    margin-top: 0;
  }

  .p-dl-form .c-checkbox__label {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-secondary);
  }
}