/* download-modal.css — 資料ダウンロード リード入力モーダル
   （Figmaにデザインなし：contact-form.css の入力スタイルに準拠した独自UI）
   開閉は download-gate.js が .is-open / hidden を切り替える */

.dl-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-16);
}

/* 閉じるアニメーションの再生中も表示を保つ（download-gate.js が終了後に hidden にする）*/
.dl-modal.is-open,
.dl-modal.is-closing {
  display: flex;
}

/* 開閉アニメーション：背景が暗転しつつ、パネルが少し下から持ち上がる。閉じるときは逆再生。
   再生時間は .faq-item__answer と同じ micro-interaction の速さに揃えている
   （--motion-duration はスクロールインの 0.7s でモーダルには遅い）。
   prefers-reduced-motion 時は animation ごと無効化され、JS は getAnimations() が
   空になることで待たずに閉じる。 */
@keyframes ic-dl-modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ic-dl-modal-panel-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-shift));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ic-dl-modal-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ic-dl-modal-panel-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(var(--motion-shift));
  }
}

.dl-modal.is-open .dl-modal__overlay {
  animation: ic-dl-modal-overlay-in 0.3s var(--motion-ease-out);
}

.dl-modal.is-open .dl-modal__panel {
  animation: ic-dl-modal-panel-in 0.3s var(--motion-ease-out);
}

/* 閉じ切った見た目で止めるため forwards（直後に hidden が付くので残留しない）*/
.dl-modal.is-closing .dl-modal__overlay {
  animation: ic-dl-modal-overlay-out 0.2s var(--motion-ease-out) forwards;
}

.dl-modal.is-closing .dl-modal__panel {
  animation: ic-dl-modal-panel-out 0.2s var(--motion-ease-out) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .dl-modal.is-open .dl-modal__overlay,
  .dl-modal.is-open .dl-modal__panel,
  .dl-modal.is-closing .dl-modal__overlay,
  .dl-modal.is-closing .dl-modal__panel {
    animation: none;
  }
}

.dl-modal__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-black) 50%, transparent);
}

/* パネル自体はスクロールさせない（スクロールは .dl-modal__body 側）。
   閉じるボタンをパネル基準の absolute で右上に留めるため。 */
.dl-modal__panel {
  position: relative;
  width: min(35rem, 100%);
  max-height: calc(100dvh - var(--space-32));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-form);
}

.dl-modal__body {
  max-height: inherit;
  overflow-y: auto;
  padding: var(--space-40) var(--space-32);
}

.dl-modal__close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  color: var(--color-black);
  font-size: var(--font-size-card);
  line-height: var(--line-height-none);
  cursor: pointer;
}

.dl-modal__title {
  margin: 0;
  color: var(--color-black);
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-wider);
  text-align: center;
}

.dl-modal__lead {
  margin: var(--space-16) 0 0;
  color: var(--color-text-body);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-loose);
}

.dl-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-24);
}

.dl-modal__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* 文字サイズ・ウェイトは contact-form の .contact-row__label-text に合わせる
   （SPの .contact-row__label と同じく左寄せ + space-8 のギャップ）*/
.dl-modal__label {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}

/* 「必須」バッジ（contact-form の .contact-row__badge と同仕様） */
.dl-modal__badge {
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

/* 「任意」バッジ：必須と区別できるよう彩度を落とす */
.dl-modal__badge--optional {
  background: var(--color-text-body);
}

/* 入力欄（contact-form の .contact-row__input と同仕様） */
.dl-modal__input,
.dl-modal__select {
  padding: var(--space-16) var(--space-24);
  border: var(--border-width) solid var(--color-border-input);
  border-radius: 0;
  background: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-black);
}

/* セレクトはOSの既定矢印を消し、SVG矢印を右端に置く（inputと高さを揃える） */
.dl-modal__select {
  appearance: none;
  padding-right: var(--space-40);
  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 fill='none' stroke='%23000' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  cursor: pointer;
}

/* 同意行は contact-form の .contact__privacy と同じUIに揃える
   （タイポ・ギャップ・チェックボックスの見た目・リンクの下線）*/
.dl-modal__consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-block: var(--space-8);
  color: var(--color-black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
}

.dl-modal__consent input[type="checkbox"] {
  appearance: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: var(--border-width) solid var(--color-black);
  background: var(--color-white);
  cursor: pointer;
}

/* チェック時：青塗り + 白いチェックマーク（問い合わせフォームと同じ見た目）。
   マークは背景画像のSVG（appearance:none の input には擬似要素が確実に
   描画されない環境があるため background-image を使う）。 */
.dl-modal__consent input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("../../images/icon-check-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
}

.dl-modal__consent a {
  color: inherit;
  text-decoration: underline;
}

.dl-modal__error {
  margin: 0;
  color: var(--color-orange);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

/* .btn の padding-left は右端の矢印と釣り合わせるための値（左32/右16）。
   .btn--center は矢印だけ消すためパディングの非対称だけが残り、ラベルが
   その差の半分（8px相当）だけ右へずれる。左右を揃えて中央に戻す。 */
.dl-modal__submit {
  align-self: center;
  padding-left: var(--space-16);
}

.dl-modal__submit:disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* --- SP ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* SPは rem 基準が 12.8px（base.css）のため、PCの 2.5rem は 32px 相当にしか
     ならずタップ領域が小さい。SPデザイン基準幅 390px で 44px 以上（推奨の
     最小タップサイズ）になる 3.5rem に広げる。×の字面は font-size のまま。 */
  .dl-modal__close {
    width: 3.5rem;
    height: 3.5rem;
  }

  /* 以下は contact-form の SP 指定に合わせる */
  /* 「必須」「任意」バッジはSPではタイプスケール最小まで落とす */
  .dl-modal__badge {
    font-size: var(--font-size-xs);
  }

  /* font-size は SP基準の rem だと 16px 未満になり、iOSがフォーカス時に
     ページを拡大してしまう。contact-form と同じく生の16pxで固定する。 */
  .dl-modal__input,
  .dl-modal__select {
    font-size: 16px;
    padding: var(--space-12) var(--space-16);
  }

  .dl-modal__consent {
    flex-wrap: wrap;
    font-size: var(--font-size-body);
  }
}