/* ===== お問い合わせページ固有 ===== */

.btn .ar{width:26px; height:1px; background:currentColor; display:block; transition:width .34s}
.btn:hover .ar{width:40px}

/* ---- 電話（フォームより上に置く） ---- */
.tel-sec{padding-bottom:0}


.checks{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.checks-2{grid-template-columns:repeat(2,1fr)}   /* ご用件の2択 */
.checks label{display:flex; align-items:center; gap:9px; border:1px solid var(--rule); padding:11px 13px; font-size:13px; cursor:pointer; transition:border-color .3s,background .3s}
.checks label:hover{border-color:var(--ink)}
.checks input{appearance:none; width:15px; height:15px; border:1px solid #BFBFBB; flex:none; position:relative; margin:0}
.checks input:checked{background:var(--lux); border-color:var(--lux)}
.checks input:checked::after{content:""; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #2A2712; border-width:0 1.5px 1.5px 0; transform:rotate(42deg)}
.checks label:has(input:checked){border-color:var(--ink)}



/* ---- 電話は1行の帯（このページの主役はフォーム） ---- */
.telbar{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px clamp(14px,2.2vw,28px); border:1px solid var(--rule);
  padding:15px clamp(18px,2.4vw,32px); transition:background .3s,border-color .3s;
}
.telbar:hover{background:var(--wash); border-color:var(--gray)}
.tb-txt{font-size:13px; letter-spacing:.03em}
.tb-num{
  font-family:var(--num); font-weight:600; font-size:clamp(23px,2.9vw,31px); letter-spacing:.02em;
  display:inline-flex; align-items:center; gap:.28em; line-height:1.2;
}
.tb-num .bi{width:.62em; height:.62em; flex:none; opacity:.9}
.tb-time{font-size:11.5px; color:var(--gray); letter-spacing:.03em}

/* ---- フォーム見出し（丸い装飾） ---- */
.fh{position:relative}
.fh-badge{
  /* フォーム（max-width:820px の中央寄せ）の左端に合わせる */
  position:absolute; left:calc(50% - 410px); top:-10px; width:130px; height:130px; border-radius:50%;
  background:var(--luxlite);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1.35;
}
.fh-badge small{font-size:11.5px; font-weight:700; color:var(--gold); letter-spacing:.04em}
.fh-num{font-family:var(--num); font-weight:600; font-size:27px; letter-spacing:.02em}

/* ---- 入力〜完了の3ステップ ---- */
.steps{
  list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  max-width:660px; margin:0 auto clamp(30px,4vw,46px); text-align:center;
}
.steps li{position:relative; color:#B9B9B4}
/* 隣り合うステップを結ぶ線。アイコンの中心を通す */
.steps li + li::before{
  content:""; position:absolute; left:-50%; top:39px; width:100%; height:1px; background:var(--rule);
}
.s-n{display:block; font-family:var(--num); font-weight:600; font-size:14px; letter-spacing:.06em}
.s-ic{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  margin:9px auto 8px; position:relative; z-index:1; background:var(--paper);
}
.s-ic svg{width:25px; height:25px}
.s-t{display:block; font-size:12px; line-height:1.7; letter-spacing:.02em}
.steps .is-now{color:var(--ink)}
.steps .is-now .s-n{color:var(--gold)}

@media (max-width:900px){
  .fh-badge{display:none}   /* SPでは出さない */
  .s-t{font-size:11.5px}
  .checks{grid-template-columns:repeat(2,1fr)}
}
/* 520px以下でも2列を保つ。1列だと品目21個で縦1210pxになり、
   フォームがそこだけ極端に長くなる（実測：最長ラベル91px＋余白で141px、2列でも164px確保できる） */