/* inquiry/contact page styles */

/* お問い合わせグリッド
   Desktop: [form] [tel-box]
                   [info-box]
   Mobile:  [info-box] → [form] → [tel-box]
*/
.contact-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:28px;
}
.contact-form{
  grid-column:1;
  align-self:start;
}
.contact-sidebar{
  grid-column:2;
  align-self:start;          /* sticky が効くために必須 */
  display:flex;flex-direction:column;gap:20px;
  position:sticky;
  top:calc(74px + 24px);     /* 固定ヘッダー高さ(74px) + 余白 */
}
.contact-tel-box{grid-area:unset}
.contact-info-box{grid-area:unset}

/* サイドボックス共通 */
.contact-tel-box,
.contact-info-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px 30px;
  box-shadow:var(--shadow-sm);
}
.contact-tel-box h2,
.contact-tel-box h3,
.contact-info-box h2,
.contact-info-box h3{
  font-size:16px;color:var(--navy);margin-bottom:10px;font-weight:700
}
.contact-tel-box p,
.contact-info-box p{font-size:14.5px;color:var(--gray);line-height:1.85}

/* 電話番号大 */
.big-tel{
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:900;font-size:28px;color:var(--navy);
  letter-spacing:.02em;margin:10px 0 4px;line-height:1.2
}
.big-tel a{color:inherit}
.hours{font-size:13px;color:var(--gray);margin-bottom:4px}

/* 区切り */
.divider{height:1px;background:var(--line);margin:20px 0}

/* 流れリスト */
.flow-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.flow-list li{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;color:#3a4d56;font-weight:600;
}
.flow-list li::before{
  content:counter(step);
  counter-increment:step;
  flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;
  background:var(--main-d);color:#fff;
  font-size:12px;font-weight:700;
  display:grid;place-items:center;
  line-height:1;
}
.flow-list{counter-reset:step}

/* フォーム */
.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.form-field label{font-size:14px;font-weight:700;color:var(--navy)}
.req{font-size:11px;font-weight:700;color:#fff;background:var(--cta-d);border-radius:4px;padding:2px 7px;margin-left:8px;vertical-align:middle}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:9px;
  padding:12px 14px;font-family:inherit;font-size:15px;
  color:var(--ink);background:#fff;
  transition:border-color .2s
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{outline:none;border-color:var(--main)}
.form-field textarea{min-height:140px;resize:vertical}
.form-submit{width:100%;justify-content:center;margin-top:8px}

/* プライバシーポリシー同意チェック */
.privacy-check{margin-bottom:24px}
.recaptcha-wrap{margin-bottom:24px}
.check-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:600;color:var(--navy)}
.check-label input[type="checkbox"]{
  flex:0 0 auto;width:18px;height:18px;
  accent-color:var(--main);cursor:pointer;
}
.check-label a{color:var(--main-d);text-decoration:underline}

/* ── バリデーションエラー ── */
.field-error{
  font-size:13px;font-weight:600;color:#d93025;
  margin-top:2px;
}
.field-error::before{content:"⚠ ";}
.input-error,
.has-error input,
.has-error select,
.has-error textarea{
  border-color:#d93025 !important;
  background:#fff8f7;
}
.has-error .check-label{color:#d93025}
.check-label a:hover{color:var(--navy)}

/* モバイル */
@media(max-width:760px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .contact-form{grid-column:1; order:2}
  /* サイドバーを解体して子要素をグリッドに直接参加させる */
  .contact-sidebar{
    display:contents;
  }
  .contact-info-box{order:1} /* ご相談の流れ → フォームの上 */
  .contact-tel-box {order:3} /* お電話でのご相談 → フォームの下 */
}