@charset "utf-8";
/* ===========================================================
   古民家喫茶 あおき — page-contact.css（お問い合わせ固有のレイアウトのみ）
   正本：_rough/references/sources.md v2 §7「お問い合わせ｜声」
   ・色・級数・余白は base.css のトークンだけを使う（再定義しない）
   ・このページは写真を置かない（余白と罫だけで成立させる）
   =========================================================== */

/* ---------- 1. 下層ヒーロー（写真なし＝色面と題箱だけ） ---------- */
.page-contact .subhero{margin-bottom:16rem;}
.page-contact .subhero__panel{
  grid-column:9/span 21;
  grid-row:1;
  aspect-ratio:auto;          /* 写真が無いので比率でなく高さで決める */
  height:40rem;
  margin-top:8rem;
}
.page-contact .subhero__head{margin-top:4rem;}

/* ---------- 2. 導入 ---------- */
.page-contact .lead-rule{margin-top:6rem;}

/* ---------- 3. 節の題（縦組みの章見出し＋区画の副題） ---------- */
.page-contact .sec-head{text-align:center;}
.page-contact .sec-head .label{display:block;margin-top:2.5rem;}

/* ---------- 4. よくある質問（漢数字・details） ---------- */
.page-contact .faq__item:first-child{border-top:1px solid var(--rule);}
.page-contact .faq__qt{flex:1 1 auto;}

/* ---------- 5. 呼びかけの帯（暗いオリーブ・白文字） ---------- */
.page-contact .call-band{
  padding:9rem 12% 8rem;
  transform-origin:top;       /* .js-panel の scaleY と揃える */
}
.page-contact .call-band__grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4rem 8%;
  align-items:end;
}
.page-contact .call-band .tel{margin-top:1.5rem;}
.page-contact .call-band__hours{font-size:var(--fs-desc);line-height:2;}
.page-contact .call-band__b .btn{margin-top:2.5rem;}

/* ---------- 6. フォーム ---------- */
.page-contact .form__label .form__hint{
  margin-left:1.2em;
  color:var(--faint);
  letter-spacing:.05em;
}
/* select の矢印は三角ではなく1pxの短い罫（base.css で appearance:none 済み） */
.page-contact .select-wrap{position:relative;}
.page-contact .select-wrap .field{padding-right:3.6rem;}
.page-contact .select-wrap::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:16px;
  height:1px;
  background:var(--ink);
  transform:translateY(-50%);
  pointer-events:none;
}
.page-contact .form__send{margin-top:6rem;}
.page-contact .form__note{margin-top:3rem;}
.page-contact .form__done{padding:2rem 0 0;}

/* ---------- 7. タブレット・SP（≤1024） ---------- */
@media screen and (max-width:1024px){
  .page-contact .subhero{margin-bottom:8rem;}
  /* 写真が無いので、SPでも色面だけは残す（base.css は写真前提で display:none） */
  .page-contact .subhero__panel{
    display:block;
    height:18rem;
    margin:0 -12.5%;          /* 10%ガターの外へ出す＝.band と同じ扱い */
  }
  .page-contact .subhero__head{margin-top:0;}

  .page-contact .lead-rule{margin-top:4rem;}

  .page-contact .sec-head{text-align:left;margin-bottom:5rem;}
  .page-contact .sec-head .label{margin-top:1.5rem;}

  .page-contact .call-band{padding:12% 10%;}
  .page-contact .call-band__grid{
    grid-template-columns:1fr;
    gap:3.5rem;
    align-items:start;
  }
  .page-contact .call-band__b .btn{margin-top:1.5rem;}

  .page-contact .form__send{margin-top:4rem;}
}

/* ---------- 8. SP（≤736） ---------- */
@media screen and (max-width:736px){
  /* 漢数字の受け幅を詰める（base の 4.5em では質問の行が細くなりすぎる） */
  .page-contact .faq__q .jnum{flex:0 0 3em;}
  .page-contact .call-band{padding:14% 10%;}
}