/* ============================================================
   資料請求・事前相談（/inquiry）ページ固有スタイル
   共通: ../../css/{tokens,base,components}.css
   主軸色：ブラウン基調（プラン色は使わない）
   見せ場：入力フォーカスでラベル点灯＋枠の柔らかな発光／
           同意成立で送信ボタンに光がスイープして「押せる」状態へ
   ============================================================ */

iconify-icon { display: inline-flex; vertical-align: middle; }

/* ---- 1. ページタイトル＋導入（中央・軸のあしらい＋淡い放射グラデ） ---- */
.page-hero { position: relative; isolation: isolate; padding-block: var(--space-1600) var(--space-1200); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 78% at 50% 0%, rgba(155, 135, 89, .12), transparent 70%);
}
.page-hero__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-600); padding-top: var(--space-800);
}
.page-hero__inner::before { content: ""; width: 1px; height: 56px; background: var(--color-primary); }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-200);
  font: 500 14px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .12em;
}
.page-hero__eyebrow iconify-icon { font-size: 18px; color: var(--color-primary); }
.page-hero__title { font: 700 48px/1.3 var(--font-display); letter-spacing: .12em; color: var(--color-primary-deep); }
.page-hero__lead { font: 500 17px/2 var(--font-base); color: var(--color-text); max-width: 640px; }

/* ---- 2. お電話でのご相談（やわらかい白カード） ---- */
.tel-card {
  width: 100%; max-width: 760px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-300);
  background: #fff; border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  padding: var(--space-800) var(--space-600);
  box-shadow: 0 18px 40px rgba(63, 63, 63, .08);
}
.tel-card__free {
  display: inline-flex; align-items: baseline; gap: var(--space-200);
  font: 700 14px/1.4 var(--font-base); color: var(--color-text);
}
.tel-card__free strong { font: 700 20px/1.2 var(--font-base); color: var(--color-primary); }
.tel-card__num {
  display: inline-flex; align-items: center; gap: var(--space-300);
  font: 700 48px/1 var(--font-base); letter-spacing: .02em; color: var(--color-primary);
  transition: color .2s ease;
}
.tel-card__num iconify-icon { font-size: 40px; transition: transform .25s ease; }
.tel-card__num:hover { color: var(--color-primary-dark); }
.tel-card__num:hover iconify-icon { transform: scale(1.12) rotate(-10deg); }
.tel-card__note { font: 500 15px/1.7 var(--font-base); color: var(--color-text-soft); text-align: center; }

/* ---- 3. フォーム（メールでのご相談） ---- */
.form-title__sub { display: block; font: 500 15px/1.6 var(--font-base); color: var(--color-text-soft); letter-spacing: .04em; margin-top: var(--space-200); }
.form-section .section-lead a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.form-section .section-lead a:hover { color: var(--color-primary-dark); }

.inquiry-form {
  width: 100%; max-width: 880px; margin-inline: auto;
  background: #fff; border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  overflow: hidden;
}

/* 1項目＝ラベル列｜入力列 */
.form-field {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--space-600);
  padding: var(--space-600) var(--space-800);
  border-top: 1px solid var(--color-grey);
}
.form-field:first-child { border-top: 0; }
.form-field__label {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-200) var(--space-300);
  font: 700 17px/1.6 var(--font-base); color: var(--color-primary-deep);
  align-self: start; padding-top: var(--space-150);
  transition: color .2s ease;
}
.form-field:focus-within .form-field__label { color: var(--color-primary); }
.form-note { flex-basis: 100%; font: 400 13px/1.6 var(--font-base); color: var(--color-text-soft); }
.form-field__control { min-width: 0; }

/* 必須／任意バッジ */
.badge { font: 700 12px/1 var(--font-base); padding: var(--space-150) var(--space-200); border-radius: var(--radius-200); letter-spacing: .04em; }
.badge--required { background: var(--color-primary); color: #fff; }
.badge--optional { background: var(--color-grey); color: var(--color-text-soft); }

/* 入力共通 */
.input-text, .input-area {
  width: 100%; font: 500 16px/1.7 var(--font-base); color: var(--color-text);
  background: #fff; border: 1px solid var(--color-secondary); border-radius: var(--radius-200);
  padding: var(--space-300) var(--space-400);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input-area { resize: vertical; min-height: 120px; }
.input-text::placeholder, .input-area::placeholder { color: #b3ab98; }
.input-text:focus, .input-area:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(155, 135, 89, .14);
}
.input-text--zip { max-width: 180px; letter-spacing: .1em; }

/* セレクト（矢印あしらい付き） */
.input-select { position: relative; max-width: 320px; }
.input-select::after {
  content: ""; position: absolute; top: 50%; right: var(--space-400); width: 8px; height: 8px;
  border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.input-select select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font: 500 16px/1.7 var(--font-base); color: var(--color-text);
  background: #fff; border: 1px solid var(--color-secondary); border-radius: var(--radius-200);
  padding: var(--space-300) var(--space-1200) var(--space-300) var(--space-400);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input-select select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(155, 135, 89, .14); }

/* お問い合わせ種別：選択肢チップ */
.choice-list { display: flex; flex-direction: column; gap: var(--space-300); }
.choice {
  display: flex; align-items: center; gap: var(--space-300);
  padding: var(--space-300) var(--space-400);
  border: 1px solid var(--color-secondary); border-radius: var(--radius-200);
  cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.choice input { width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; }
.choice__text { font: 500 16px/1.5 var(--font-base); color: var(--color-text); }
.choice:hover { border-color: var(--color-primary); transform: translateX(2px); }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-bg-soft); }

/* ご住所ブロック */
.address-grid { display: flex; flex-direction: column; gap: var(--space-400); }
.address-sub { display: block; font: 700 13px/1.6 var(--font-base); color: var(--color-text-soft); margin-bottom: var(--space-150); letter-spacing: .04em; }
.address-zip__row { display: flex; align-items: center; gap: var(--space-300); flex-wrap: wrap; }
.btn-zip {
  flex: none; font: 700 14px/1 var(--font-base); color: var(--color-primary);
  background: #fff; border: 1px solid var(--color-primary); border-radius: var(--radius-200);
  padding: var(--space-300) var(--space-400); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn-zip:hover { background: var(--color-primary); color: #fff; }

/* 同意＋送信 */
.form-agree {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-400);
  padding: var(--space-800); border-top: 1px solid var(--color-grey); background: var(--color-bg-soft);
}
.agree { display: inline-flex; align-items: center; gap: var(--space-300); cursor: pointer; }
.agree input { width: 20px; height: 20px; accent-color: var(--color-primary); flex: none; }
.agree__text { font: 700 16px/1.6 var(--font-base); color: var(--color-text); }
.agree__text a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.btn-submit {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-300);
  min-width: 320px; font: 700 18px/1.2 var(--font-base); letter-spacing: .04em;
  background: var(--color-grey); color: var(--color-text-soft);
  border: 0; border-radius: var(--radius-200); padding: var(--space-400) var(--space-800);
  cursor: not-allowed; transition: background .25s ease, color .25s ease;
}
.btn-submit__arrow { font-size: 22px; transition: transform .25s ease; }
/* 見せ場：同意成立で押せる状態に変わり、光が一度スイープする */
.btn-submit:not(:disabled) { background: var(--color-primary); color: #fff; cursor: pointer; }
.btn-submit:not(:disabled)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-180%);
}
.btn-submit:not(:disabled):hover { background: var(--color-primary-dark); }
.btn-submit:not(:disabled):hover .btn-submit__arrow { transform: translateX(4px); }
.form-agree__hint { font: 400 13px/1.6 var(--font-base); color: var(--color-text-soft); text-align: center; }

/* ---- 4. 個人情報保護方針 ---- */
.policy-card {
  width: 100%; max-width: 880px; margin-inline: auto;
  background: #fff; border: 1px solid var(--color-secondary); border-radius: var(--radius-400);
  padding: var(--space-1200) var(--space-800);
  display: flex; flex-direction: column; gap: var(--space-1200);
}
.policy-block { display: flex; flex-direction: column; gap: var(--space-400); }
.policy-subtitle {
  position: relative; padding-left: var(--space-400);
  font: 700 21px/1.6 var(--font-base); color: var(--color-primary-deep); letter-spacing: .04em;
}
.policy-subtitle::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: var(--color-primary); border-radius: var(--radius-full); }
.policy-text { font: 400 15px/1.95 var(--font-base); color: var(--color-text); }

.purpose-list { display: flex; flex-direction: column; gap: var(--space-200); }
.purpose-list li { display: flex; gap: var(--space-300); font: 400 15px/1.9 var(--font-base); color: var(--color-text); }
.purpose-list__mark { flex: none; font-weight: 700; color: var(--color-primary); }

.policy-list { display: flex; flex-direction: column; gap: var(--space-300); counter-reset: policy; }
.policy-list li {
  position: relative; padding-left: var(--space-1200);
  font: 400 15px/1.9 var(--font-base); color: var(--color-text);
}
.policy-list li::before {
  counter-increment: policy; content: counter(policy);
  position: absolute; left: 0; top: .1em;
  width: 28px; height: 28px; display: grid; place-items: center;
  font: 700 14px/1 var(--font-base); color: var(--color-primary);
  background: var(--color-bg-soft); border: 1px solid var(--color-secondary); border-radius: var(--radius-full);
}

.policy-links { display: flex; flex-direction: column; gap: var(--space-200); }
.policy-links a { font: 400 15px/1.7 var(--font-base); color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.policy-links a:hover { color: var(--color-primary-dark); }

.policy-contact { gap: var(--space-300); }
.policy-contact__name { font: 700 17px/1.7 var(--font-base); color: var(--color-text); }
.policy-contact__tel {
  display: inline-flex; align-items: center; gap: var(--space-200); align-self: flex-start;
  font: 700 28px/1.2 var(--font-base); color: var(--color-primary); letter-spacing: .02em;
  transition: color .2s ease;
}
.policy-contact__tel iconify-icon { font-size: 24px; transition: transform .25s ease; }
.policy-contact__tel:hover { color: var(--color-primary-dark); }
.policy-contact__tel:hover iconify-icon { transform: scale(1.12) rotate(-10deg); }

/* ---- 初回ロードの stagger フェードアップ（モーション許可時のみ） ---- */
@media (prefers-reduced-motion: no-preference) {
  .inquiry-form .form-field { opacity: 0; animation: field-rise .6s ease forwards; }
  .form-field:nth-child(1) { animation-delay: .05s; }
  .form-field:nth-child(2) { animation-delay: .12s; }
  .form-field:nth-child(3) { animation-delay: .19s; }
  .form-field:nth-child(4) { animation-delay: .26s; }
  .form-field:nth-child(5) { animation-delay: .33s; }
  .form-field:nth-child(6) { animation-delay: .40s; }
  .form-field:nth-child(7) { animation-delay: .47s; }
  .btn-submit:not(:disabled)::before { animation: btn-sweep .7s ease forwards; }
  @keyframes field-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes btn-sweep { from { transform: translateX(-180%); } to { transform: translateX(320%); } }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 760px) {
  .page-hero__title { font-size: 34px; }
  .tel-card__num { min-height: 44px; font-size: 36px; }
  .tel-card__num iconify-icon { font-size: 30px; }
  .form-section .section-lead a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .form-field { grid-template-columns: 1fr; gap: var(--space-300); padding: var(--space-600); }
  .form-field__label { padding-top: 0; }
  .btn-zip { min-height: 44px; }
  .form-agree { padding: var(--space-600); }
  .agree {
    min-height: 44px;
    align-items: center;
  }
  .agree__text a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    vertical-align: middle;
  }
  .btn-submit { width: 100%; min-width: 0; }

  .input-text--zip { max-width: 160px; }
  .policy-card { padding: var(--space-800) var(--space-600); }
  .policy-contact__tel {
    min-height: 44px;
    align-items: center;
  }
}