/* ============================================================
   お問い合わせページ固有CSS — design-k（K案）踏襲
   cream × tangerine × sky / Zen Maru Gothic
   ============================================================ */

/* ============================================================
   フォーム
   ============================================================ */
.contact-sec{
  background:var(--paper);
  padding:clamp(60px, 9vw, 100px) 0 clamp(70px, 9vw, 110px);
}
.contact-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:start;
  margin-top:clamp(36px, 5vw, 56px);
}
/* 送信完了時：asideを出さず完了パネル1枚を中央に */
.contact-grid--single{
  grid-template-columns:1fr;
  max-width:720px;
  margin-inline:auto;
}
.contact-form{ display:grid; gap:24px; }
.field{ display:grid; gap:8px; }
.field label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:.95rem;
}
.req,
.opt{
  display:inline-flex;
  align-items:center;
  font-size:.75rem;
  font-weight:700;
  line-height:1.6;
  border-radius:999px;
  padding:1px 10px;
}
.req{
  background:var(--tangerine);
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.opt{
  background:var(--paper);
  color:var(--ink-soft);
  border:1.5px dashed var(--dash);
}
.field input,
.field textarea{
  width:100%;
  min-height:54px;
  padding:13px 16px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:14px;
  font-family:inherit;
  font-size:1rem;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--ink);
}
.field textarea{
  min-height:180px;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{
  color:var(--ink-soft);
  font-weight:500;
}
.field input:focus-visible,
.field textarea:focus-visible{
  outline:3px solid var(--sky);
  outline-offset:2px;
}
.form-hand{
  justify-self:start;
  font-family:'Yomogi', cursive;
  font-size:1.02rem;
  color:var(--tan-deep);
  transform:rotate(-1.5deg);
  margin-bottom:-8px;
}
.form-submit{
  display:flex;
  align-items:center;
  gap:16px 24px;
  flex-wrap:wrap;
}
.form-note{
  font-size:.85rem;
  color:var(--ink-soft);
}
/* LINE相談ボタン */
.aside-line-btn{
  display:block;
  text-align:center;
  background:#06C755;
  color:#fff;
  border:2px solid var(--ink);
  border-radius:12px;
  box-shadow:0 3px 0 var(--ink);
  padding:12px 14px;
  font-weight:900;
  font-size:.95rem;
  text-decoration:none;
  transition:transform .2s var(--ease-pop), box-shadow .2s var(--ease-pop);
}
.aside-line-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 5px 0 var(--ink);
}
/* reCAPTCHAクレジット表記（バッジ非表示の代替。規約上必須） */
.recaptcha-note{
  width:100%;
  font-size:.72rem;
  color:var(--ink-soft);
  word-break:auto-phrase;
}
.recaptcha-note a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* v3バッジは右下固定でto-topボタンと重なるため非表示（クレジット表記で代替） */
.grecaptcha-badge{ visibility:hidden !important; }
/* エラーサマリー（フォーム冒頭） */
.form-alert{
  background:#FFF0EA;
  border:2px solid var(--tangerine);
  border-radius:14px;
  padding:14px 18px;
  font-size:.92rem;
  font-weight:700;
  color:var(--ink);
}
.form-alert ul{
  margin:8px 0 0;
  padding-left:1.2em;
  font-weight:500;
}
.form-alert li{ margin-top:2px; }
.form-alert:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
/* 各フィールドのエラー文言 */
.field-err{
  color:#C0392B;
  font-size:.82rem;
  font-weight:700;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:#C0392B;
  background:#FFF7F5;
}
/* 送信中ボタン */
.btn.is-sending{
  opacity:.6;
  cursor:progress;
}
/* 送信完了パネル */
.contact-thanks{
  background:var(--sky-pale);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:clamp(28px, 4vw, 44px);
  box-shadow:0 4px 0 var(--ink);
  gap:14px;
}
.contact-thanks:focus-visible{
  outline:3px solid var(--sky);
  outline-offset:3px;
}
.thanks-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:999px;
  background:var(--tangerine);
  border:2px solid var(--ink);
  color:var(--ink);
  font-size:1.5rem;
  font-weight:900;
}
.contact-thanks h3{ font-size:1.3rem; }
.contact-thanks p{ font-size:.95rem; color:var(--ink-soft); }
.thanks-back{ margin-top:6px; }

/* 電話・メールパネル */
.contact-aside{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:clamp(24px, 3vw, 36px);
  display:grid;
  gap:12px;
}
.contact-aside h3{ font-size:1.15rem; }
.aside-label{
  margin-top:10px;
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.14em;
  color:var(--tan-deep);
}
.aside-tel{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  font-size:clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight:900;
  color:var(--ink);
  text-decoration:none;
  font-feature-settings:"tnum" 1;
  transition:opacity .3s;
}
.aside-tel:hover{ opacity:.7; }
.aside-hours{
  font-size:.85rem;
  font-weight:700;
  margin-top:-12px;
}
.aside-mail{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:underline wavy var(--sky) 2px;
  text-underline-offset:7px;
  transition:color .3s;
}
.aside-mail:hover{ color:var(--sky-deep); }
/* クリックでメールアドレスを表示（bot対策） */
.aside-mail-reveal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 18px;
  background:var(--paper);
  border:2px dashed var(--sky-deep);
  border-radius:12px;
  font-family:inherit;
  font-size:.92rem;
  font-weight:700;
  color:var(--sky-deep);
  cursor:pointer;
  transition:background .3s, color .3s;
}
.aside-mail-reveal:hover{
  background:var(--sky-pale);
  color:var(--ink);
}
.aside-mail-reveal:focus-visible{
  outline:3px solid var(--sky);
  outline-offset:2px;
}
.aside-note{
  margin-top:8px;
  padding-top:14px;
  border-top:2px dashed var(--dash);
  font-size:.85rem;
  color:var(--ink-soft);
}

/* ============================================================
   お問い合わせのあとの流れ
   ============================================================ */
.next-sec{
  background:var(--sky-pale);
  padding:clamp(60px, 9vw, 100px) 0 clamp(80px, 10vw, 120px);
}
.next-steps{
  list-style:none;
  margin-top:clamp(36px, 5vw, 56px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.next-step{
  position:relative;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:22px;
  padding:24px 24px 22px;
  box-shadow:0 4px 0 var(--ink);
}
.next-step:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-22px;
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  font-weight:900;
  font-size:1.2rem;
  color:var(--sky-deep);
}
.ns-num{
  display:block;
  font-size:1.3rem;
  font-weight:900;
  color:var(--sky-deep);
  font-feature-settings:"tnum" 1;
}
.next-step h3{
  margin-top:4px;
  font-size:1.15rem;
}
.next-step p{
  margin-top:10px;
  font-size:.9rem;
  color:var(--ink-soft);
}
.next-foot{
  margin-top:clamp(32px, 4vw, 44px);
  text-align:center;
  font-size:.9rem;
  color:var(--ink-soft);
}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1024px){
  .contact-grid{ grid-template-columns:1fr; }
  .next-steps{
    grid-template-columns:1fr;
    max-width:560px;
    margin-inline:auto;
    gap:34px;
  }
  .next-step:not(:last-child)::after{
    right:auto;
    left:50%;
    top:auto;
    bottom:-30px;
    transform:translateX(-50%) rotate(90deg);
  }
}

@media (max-width:480px){
  .form-submit .btn{ width:100%; }
}