/* =====================================================================
   page-contact.css — お問い合わせページ固有
   注意: XD（Sun Creative_update.xd）に**お問い合わせのアートボードは無い**。
   そのため寸法は XD 実測ではなく、下層ページで確立したデザイン言語からの
   導出。準拠したルール:
     - 版面は左右マージン 260px（--mg）
     - 角丸なし・1px 罫・アクセントは #40A9FA
     - ボタンは XD の「右下に9/10pxずらした二重枠」（.xd-btn）
     - PC は 1920 基準 vw、SP は calc(N * var(--u))（390基準）
   ヘッダー／ドロワー／右端レール／フッターは top.css、
   パンくず・ヒーローは page.css の共通部品をそのまま使用。
   ===================================================================== */

.ct-form-sec {
  background: #000;
  color: #fff;
  padding-block: 5.208vw 6.25vw;      /* 100px / 120px */
}

/* style.css の .contact-form は flex column + gap。行間は .form-group の
   margin-bottom で管理するので gap は消す（二重に空くため） */
.contact-form { gap: 0; }
.ct-form-sec__inner {
  padding-inline: var(--mg);
  display: grid;
  grid-template-columns: 26.042vw 1fr; /* 500px / 残り */
  gap: 5.208vw;                        /* 100px */
  align-items: start;
}

/* ---- 左：説明 ---- */
.ct-intro__title {                     /* 事業名と同じ扱い（40px ExtraBold） */
  font-size: 2.083vw;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.2;
  margin: 0 0 1.042vw;
}
.ct-intro__text {                      /* 本文 16px / 行間30 */
  font-size: .833vw;
  line-height: 1.875;
  margin: 0;
}
.ct-points {
  list-style: none;
  margin: 2.083vw 0 0;
  padding: 0;
  display: grid;
  gap: .833vw;
  color: var(--sky);
  font-size: .938vw;                   /* 18px SemiBold（事業リストと同じ） */
  font-weight: 600;
  letter-spacing: .05em;
}
.ct-points li {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  align-items: start;
}
.ct-points svg { width: 1em; height: 1em; margin-top: .25em; fill: currentColor; }

/* ---- 右：フォーム ---- */
.form-group { margin-bottom: 1.667vw; }          /* 32px */
/* style.css の旧フォーム定義（濃色文字・角丸ピル）を黒背景向けに上書きする */
.form-label {
  display: flex;
  align-items: center;
  font-size: .833vw;                              /* 16px */
  font-weight: 500;
  letter-spacing: .06em;
  color: #fff;
  margin-bottom: .625vw;                          /* 12px */
}
.form-required,
.form-optional {
  display: inline-block;
  margin-left: .6em;
  padding: .15em .8em;
  font-size: .625vw;                              /* 12px */
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
  border-radius: 0;                               /* XD系は角丸なし（style.css のピルを打ち消す） */
  vertical-align: .1em;
}
.form-required { background: var(--sky); color: #fff; }
.form-optional { border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.7); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 0;
  color: #fff;
  font-family: var(--gothic);
  font-size: .833vw;                              /* 16px */
  letter-spacing: .04em;
  transition: border-color var(--transition), background var(--transition);
}
.form-input,
.form-select { height: 3.125vw; padding: 0 1.042vw; }      /* 60px / 20px */
.form-textarea { min-height: 9.375vw; padding: .833vw 1.042vw; line-height: 1.875; resize: vertical; }

.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255,255,255,.35); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--sky);
  background: rgba(64,169,250,.06);
}
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error { border-color: #ff6b6b; }

/* セレクトは矢印を自前で描く（appearance は style.css 側で none 済み） */
.form-select-wrap { position: relative; }
.form-select { appearance: none; padding-right: 2.5vw; cursor: pointer; }
.form-select option { background: #111; color: #fff; }
.form-select-arrow {
  position: absolute;
  right: 1.042vw;
  top: 50%;
  transform: translateY(-50%);
  width: 1.042vw;
  height: 1.042vw;
  fill: rgba(255,255,255,.7);
  pointer-events: none;
}

/* チェックボックス（□ を基調にした下層ページの記号と揃える） */
.form-group--checkbox { margin-top: 2.083vw; }
.form-checkbox-label {
  display: inline-flex;
  align-items: flex-start;
  gap: .625vw;
  cursor: pointer;
  font-size: .833vw;
  line-height: 1.6;
}
.form-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.form-checkbox-custom {
  flex: none;
  width: .938vw;
  height: .938vw;
  margin-top: .2em;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 0;                   /* style.css の角丸を打ち消す */
  background: transparent;            /* 同・白背景を打ち消す */
  position: relative;
  transition: background var(--transition), border-color var(--transition);
}
.form-checkbox-text { color: #fff; font-size: inherit; margin-top: 0; }
.form-checkbox:checked + .form-checkbox-custom {
  background: var(--sky);
  border-color: var(--sky);
}
.form-checkbox:checked + .form-checkbox-custom::after {
  content: "";
  position: absolute;
  left: 32%; top: 8%;
  width: 28%; height: 60%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-checkbox:focus-visible + .form-checkbox-custom { outline: 2px solid var(--sky); outline-offset: 2px; }
.form-checkbox.is-error + .form-checkbox-custom { border-color: #ff6b6b; }
.form-checkbox-link { color: var(--sky); text-decoration: underline; }

.form-error {
  margin: .417vw 0 0;
  min-height: 1em;
  font-size: .729vw;                              /* 14px */
  color: #ff6b6b;
  letter-spacing: .04em;
}
.form-error:empty { margin: 0; min-height: 0; }

/* 送信ボタン：XD の Contact 帯のボタン（400x80・白地・#40A9FA・22px）に準拠。
   JS が textContent を書き換える（送信中...）ため、中に SVG は置かない。 */
.ct-submit {
  align-self: flex-start;                         /* 親が flex column のため伸びるのを防ぐ */
  min-width: 20.833vw;                            /* 400px */
  min-height: 4.167vw;                            /* 80px */
  margin-top: 2.083vw;
  font-size: 1.146vw;                             /* 22px Medium */
  background: #fff;
  color: var(--sky);
  border-color: #fff;
}
.ct-submit::after { border-color: #fff; }
.ct-submit:hover { background: var(--sky); border-color: var(--sky); color: #fff; }
.ct-submit:hover::after { border-color: var(--sky); }
.ct-submit[disabled] { opacity: .55; cursor: progress; }

/* 送信完了パネル */
.contact-thanks {
  display: none;
  background: #fff;
  color: #000;
  padding: 3.125vw 2.604vw;
  text-align: center;
}
.contact-thanks.is-visible { display: block; }
/* style.css の丸い水色バッジは使わず、線画チェックのみにする */
.contact-thanks__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--sky);
}
.contact-thanks__icon svg { width: 2.604vw; height: 2.604vw; margin-inline: auto; }
.contact-thanks__title {
  font-size: 1.667vw;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 1.042vw 0 .833vw;
}
.contact-thanks__text { font-size: .833vw; line-height: 1.875; margin: 0 0 2.083vw; }

/* =====================================================================
   SP（390基準）
   ===================================================================== */
@media (max-width: 1023px) {
  .ct-form-sec { padding-block: calc(60 * var(--u)) calc(80 * var(--u)); }
  .ct-form-sec__inner {
    padding-inline: calc(20 * var(--u));
    grid-template-columns: 1fr;
    gap: calc(48 * var(--u));
  }

  .ct-intro__title { font-size: calc(23 * var(--u)); margin-bottom: calc(14 * var(--u)); }
  .ct-intro__text  { font-size: calc(13 * var(--u)); line-height: calc(22 / 13); }
  .ct-points {
    margin-top: calc(24 * var(--u));
    gap: calc(12 * var(--u));
    font-size: calc(15 * var(--u));
  }

  .form-group { margin-bottom: calc(24 * var(--u)); }
  .form-label { font-size: calc(14 * var(--u)); margin-bottom: calc(8 * var(--u)); }
  .form-required, .form-optional { font-size: calc(11 * var(--u)); }

  /* iOS Safari はフォントが16px未満の入力にフォーカスすると自動ズームするため、
     --u に連動させず16pxで固定する */
  .form-input, .form-select, .form-textarea { font-size: 16px; }
  .form-input, .form-select { height: calc(52 * var(--u)); padding: 0 calc(14 * var(--u)); }
  .form-select { padding-right: calc(40 * var(--u)); }
  .form-textarea { min-height: calc(160 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .form-select-arrow { right: calc(14 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

  .form-group--checkbox { margin-top: calc(28 * var(--u)); }
  .form-checkbox-label { font-size: calc(13 * var(--u)); gap: calc(10 * var(--u)); }
  .form-checkbox-custom { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .form-error { font-size: calc(12 * var(--u)); margin-top: calc(6 * var(--u)); }

  .ct-submit {
    align-self: stretch;              /* SP は全幅 */
    width: 100%;
    min-width: 0;
    min-height: calc(64 * var(--u));
    margin-top: calc(28 * var(--u));
    font-size: calc(16 * var(--u));
  }

  .contact-thanks { padding: calc(40 * var(--u)) calc(24 * var(--u)); }
  .contact-thanks__icon svg { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .contact-thanks__title { font-size: calc(20 * var(--u)); margin: calc(16 * var(--u)) 0 calc(12 * var(--u)); }
  .contact-thanks__text  { font-size: calc(13 * var(--u)); line-height: calc(22 / 13); margin-bottom: calc(24 * var(--u)); }
}