/* =========================================================
   KYO. — お問い合わせページ
   （ヒーロー / お問い合わせフォーム / お電話 / ACCESS）
   数値は見本 pc/4.png（幅1366）の実測値に合わせている
   ========================================================= */

/* ---- サブページ共通ヒーロー（本体は base.css。ここは当ページ用の調整のみ） ---- */
/* 見本のトリミング位置（手すり〜床が入る）に一致させた値。相関計算で 81% */
.subhero--contact .subhero__bg img { object-position: center 81%; }
/* 見本の膜は薄い（実測 α≒0.10）。白文字が沈まない範囲で見本に寄せる */
.subhero--contact .subhero__bg::after { background: linear-gradient(rgba(38,35,30,0.12), rgba(38,35,30,0.22)); }

/* =========================================================
   お問い合わせフォーム
   ========================================================= */
.cform { background: var(--c-cream); padding: 70px 0 77px; }

.cform__card {
  max-width: 850px;
  margin-inline: auto;
  background: var(--c-white);
  /* 見本では見出し・本文の中心が「ラベル列＋入力列」の中心（＝カード中心より少し右）に揃う */
  padding: 40px 116px 61px 142px;
}
.cform__title {
  font-size: 25px; font-weight: 700; line-height: 1.4;
  letter-spacing: 0.03em; text-align: center;
}
.cform__lead {
  margin-top: 20px;
  font-size: 16px; line-height: 1.8; letter-spacing: 0.05em;
  text-align: center;
}

.cform__form { margin-top: 35px; }

.cform__row {
  display: grid;
  grid-template-columns: 204px 388px;
  align-items: center;
}
.cform__row + .cform__row { margin-top: 28px; }
.cform__row--area { align-items: start; }
.cform__label { font-size: 16px; letter-spacing: 0.04em; line-height: 1.6; }
.cform__row--area .cform__label { padding-top: 5px; }

.cform__input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--c-white);
  border: 1px solid var(--c-ink);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cform__input:focus {
  outline: none;
  border-color: var(--c-green-deep);
  box-shadow: 0 0 0 3px rgba(111,128,115,0.18);
}
.cform__textarea { height: 124px; padding: 10px 14px; resize: vertical; }

/* 同意チェック（入力列の左端に揃える） */
.cform__agree {
  display: grid;
  grid-template-columns: 204px auto 1fr;
  align-items: center;
  margin-top: 34px;
}
.cform__check {
  grid-column: 2;
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none;
  border: 1px solid var(--c-ink); border-radius: 2px;
  background: var(--c-white); cursor: pointer;
  display: inline-grid; place-content: center;
}
.cform__check::before {
  content: ""; width: 9px; height: 5px;
  border-left: 2px solid var(--c-green-deep); border-bottom: 2px solid var(--c-green-deep);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform 0.18s var(--ease);
}
.cform__check:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.cform__check:focus-visible { outline: 2px solid var(--c-green-deep); outline-offset: 2px; }
.cform__checklabel {
  grid-column: 3; margin-left: 9px;
  font-size: 13.5px; letter-spacing: 0.04em; cursor: pointer;
}

/* ボタンだけは見本でもカード全体の中央（＝入力列の中央ではない）に置かれる */
.cform__submit { margin-top: 36px; margin-inline: -142px -116px; text-align: center; }
.cform__btn {
  width: 250px; height: 53px;
  background: var(--c-green-deep); color: #fff;
  border-radius: 6px;
  font-size: 17px; font-weight: 700; letter-spacing: 0.06em;
  transition: background var(--dur) var(--ease);
}
.cform__btn:hover { background: var(--c-green-deep2); }

/* =========================================================
   お電話でのお問い合わせ
   ========================================================= */
.telbox {
  background: url("../images/tel-bg.jpg") center 78% / cover no-repeat;
  padding: 76px 0 78px;
}
.telbox__card {
  position: relative;
  max-width: 850px;
  margin-inline: auto;
  background: var(--c-white);
  padding: 38px 24px 39px;
  text-align: center;
}
.telbox__title { font-size: 25px; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; }

.telbox__num {
  display: flex; align-items: center; justify-content: center; gap: 21px;
  margin-top: 20px;
}
.telbox__icon { width: 44px; height: auto; }
.telbox__num a {
  font-size: 46px; font-weight: 700; line-height: 1.1;
  letter-spacing: 0.075em; color: var(--c-ink);
}

.telbox__fax { margin-top: 6px; font-size: 21px; letter-spacing: 0.04em; line-height: 1.5; }

.telbox__hours {
  display: flex; align-items: center; justify-content: center; gap: 17px;
  margin-top: 6px;
}
.telbox__hourskey {
  border: 1px solid var(--c-ink); border-radius: 1px;
  padding: 2px 7px;
  font-size: 13px; letter-spacing: 0.04em; line-height: 1.3;
  white-space: nowrap;
}
.telbox__hoursval { font-size: 17px; letter-spacing: 0.02em; }

.telbox__mascot { position: absolute; right: 130px; bottom: 37px; width: 100px; }

/* =========================================================
   ACCESS
   ========================================================= */
.access { background: var(--c-white); padding: 75px 0 99px; }

/* 見本では左右の余白いっぱい（1120px）まで使うので、この節だけ gutter ぶん広く取る */
.access .container { max-width: calc(var(--maxw) + var(--gutter) * 2); }

/* 見本では地図が左側にはみ出す（コンテナ外側の余白ぶんだけ、最大64px） */
.access__grid {
  --map-bleed: min(64px, calc((100vw - min(100vw, calc(var(--maxw) + var(--gutter) * 2)))/2 + var(--gutter)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 375px;
  gap: 41px;
  align-items: start;
}
.access__map {
  margin-left: calc(var(--map-bleed) * -1);
  width: calc(100% + var(--map-bleed));
  aspect-ratio: 769 / 426;
  background: var(--c-cream-2);
  overflow: hidden;
}
.access__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.access__info .sec-label { background: var(--c-white); }
.access__addr    { margin-top: 40px; font-size: 16px; line-height: 1.75; letter-spacing: 0.04em; }
.access__station { margin-top: 30px; font-size: 16px; line-height: 1.75; letter-spacing: 0.04em; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .cform__card { padding-inline: clamp(24px, 6vw, 142px); }
  .cform__submit { margin-inline: 0; }   /* カード左右パディングが可変になるため打ち消す */
  .cform__row, .cform__agree { grid-template-columns: minmax(120px, 204px) minmax(0, 388px); }
  .cform__agree { grid-template-columns: minmax(120px, 204px) auto 1fr; }
  .access__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
}

@media (max-width: 900px) {
  .cform { padding: 48px 0 54px; }
  .cform__card { padding: 34px clamp(20px, 5vw, 48px) 44px; }
  .cform__title { font-size: 21px; }
  .cform__lead { font-size: 15px; }
  .cform__row, .cform__agree { grid-template-columns: minmax(92px, 150px) minmax(0, 1fr); }
  .cform__agree { grid-template-columns: minmax(92px, 150px) auto 1fr; }
  .cform__label { font-size: 15px; }
  .cform__btn { width: min(250px, 100%); }

  .telbox { padding: 52px 0 54px; }
  .telbox__card { padding: 30px 20px 28px; }
  .telbox__title { font-size: 20px; }
  .telbox__num { gap: 16px; margin-top: 10px; }
  .telbox__icon { width: 34px; }
  .telbox__num a { font-size: clamp(30px, 6.4vw, 45px); }
  .telbox__fax { font-size: 16px; }
  .telbox__hours { flex-wrap: wrap; gap: 8px; }
  .telbox__hoursval { font-size: 14px; }
  .telbox__mascot { position: static; width: 72px; margin: 10px auto 0; }

  /* 見本スマホ版は ACCESS ラベル → 住所 → 地図 の縦並び */
  .access { padding: 52px 0 60px; }
  .access__grid { grid-template-columns: 1fr; gap: 0; }
  .access__map {
    order: 2; margin-left: 0; width: 100%; margin-top: 30px;
    aspect-ratio: 16 / 11;
  }
  .access__info { order: 1; }
  .access__addr, .access__station { font-size: 15px; }
}

@media (max-width: 700px) {
  /* 縦長画面だと写真が丸ごと収まって空ばかりになるので、PC版と同じ室内の寄りに合わせる */
  /* base.css の img{max-width:100%} を打ち消さないと 170% が効かない */
  .subhero--contact .subhero__bg img { width: 170%; max-width: none; margin-left: -35%; }
}

@media (max-width: 480px) {
  /* ラベル列は「お問い合わせ内容（8文字）」が折り返さない幅を確保する */
  .cform__card { padding-inline: 16px; }
  .cform__lead { font-size: 13px; letter-spacing: 0; }
  /* 「お問い合わせ内容」がラベル列いっぱいになるので、列の間に隙間を入れる */
  .cform__row { grid-template-columns: 108px minmax(0, 1fr); column-gap: 10px; }
  /* 同意行だけは 1行に収めたいのでインデントを浅くする */
  .cform__agree { grid-template-columns: 60px auto 1fr; }
  .cform__label { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
  .cform__checklabel { font-size: 12.5px; }
}

/* =========================================================
   Snow Monkey Forms を見本のデザインに合わせる
   ---------------------------------------------------------
   SMFが出力するHTML（v12系）:
     <form class="snow-monkey-form">
       <div class="smf-form smf-form--simple-table">
         <div class="smf-item">
           <div class="smf-item__col smf-item__col--label">
             <div class="smf-item__label"><label><span class="smf-item__label__text">お名前</span></label></div>
           </div>
           <div class="smf-item__col smf-item__col--controls">
             <div class="smf-placeholder"><div class="smf-text-control">
               <input class="smf-text-control__control">
             </div></div>
           </div>
         </div>
       </div>
       <div class="smf-action"><button class="smf-button-control__control">…</button></div>
     </form>

   ※ フォーム設定の「フォームスタイル」は **Simple table** を選ぶこと
     （ラベルが左・入力が右になる。他のスタイルだと前提が変わる）
   ========================================================= */

.cform__card .snow-monkey-form { margin: 35px 0 0; }
.cform__card .smf-form { display: block; }

/* --- 1行（ラベル＋入力） --- */
.cform__card .smf-item {
  display: grid;
  grid-template-columns: 204px 388px;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.cform__card .smf-item + .smf-item { margin-top: 28px; }
.cform__card .smf-item__col {
  flex: none;
  max-width: none;
  padding: 0;
  background: none;
  border: none;
}
.cform__card .smf-item__label { margin: 0; }
.cform__card .smf-item__label__text {
  font-size: 16px; letter-spacing: 0.04em; line-height: 1.6; color: var(--c-ink);
}
.cform__card .smf-item__description {
  margin-top: 4px; font-size: 12px; color: var(--c-ink-mute);
}
.cform__card .smf-placeholder { display: block; width: 100%; }

/* ラベル列を持たない行（同意チェックなど）は入力列の位置に寄せる。
   見本では入力欄との間隔が他の行より詰まっているので、上マージンも合わせる */
.cform__card .smf-item + .smf-item--divider { margin-top: 18px; }
.cform__card .smf-item--divider { grid-template-columns: 204px minmax(0, 1fr); }
.cform__card .smf-item--divider .smf-item__col { grid-column: 2; }

/* --- 入力欄 --- */
.cform__card :is(.smf-text-control__control, .smf-select-control__control) {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: var(--c-white);
  border: 1px solid var(--c-ink);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
  box-shadow: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cform__card .smf-textarea-control__control {
  width: 100%;
  height: 124px;
  padding: 10px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-ink);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
  box-shadow: none;
}
.cform__card :is(.smf-text-control__control, .smf-textarea-control__control, .smf-select-control__control):focus {
  outline: none;
  border-color: var(--c-green-deep);
  box-shadow: 0 0 0 3px rgba(111,128,115,0.18);
}
/* テキストエリアの行はラベルを上寄せに */
.cform__card .smf-item:has(.smf-textarea-control) { align-items: start; }
.cform__card .smf-item:has(.smf-textarea-control) .smf-item__col--label { padding-top: 5px; }

/* --- 同意チェック --- */
/* 枠とテキストの縦位置は**ラッパーをflexにして中央で揃える**。
   以前はラッパーを block にしてベースライン任せにしていたため、
   チェックボックスの display を変えると縦位置がずれた（2026-08-06）。
   flex にしておけば、中の描画がどう変わってもズレない。 */
.cform__card .smf-checkbox-control {
  display: inline-flex; align-items: center; gap: 9px;
}
.cform__card .smf-checkbox-control__label {
  font-size: 13.5px; letter-spacing: 0.04em; cursor: pointer;
}
/* チェックボックス
   ★チェックマーク(::before)は**プラグイン側に任せる**。こちらでは描かない。
     以前は自前で ::before に緑のチェックを描いていたが、Snow Monkey Forms も
     同じ ::before に白いチェックを描いており、::before は1要素に1つしか無いため
     プロパティ単位で奪い合いになって**チェック時に表示が壊れていた**（2026-08-06 指摘）。
     プラグインの指定（白・rotate(45deg)・6x8px・:checked で visibility:visible）は
     完成しているので、こちらは**色だけ**を変える。 */
.cform__card .smf-checkbox-control__control {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex: none; margin: 0;
  border: 1px solid var(--c-ink); border-radius: 2px;
  background: var(--c-white); cursor: pointer;
}
/* チェック時。プラグイン既定は青(#3a87fd)なのでサイトの緑に置き換える。
   プラグイン側は `.smf-form .smf-checkbox-control__control:checked`（詳細度 0,3,0）なので、
   **`input.` を付けて 0,3,1 にして確実に勝たせる**（同点だと読み込み順に左右されるため）。 */
.cform__card input.smf-checkbox-control__control:checked {
  background-color: var(--c-green-deep);
  border-color: var(--c-green-deep);
}

/* --- 送信ボタン --- */
.cform__card .smf-action {
  margin: 37px 0 0;
  /* 見本ではボタンだけカード中央（＝入力列の中央ではない） */
  margin-inline: -142px -116px;
  text-align: center;
}
.cform__card .smf-action .smf-button-control__control {
  width: 250px; height: 53px; padding: 0;
  background: var(--c-green-deep); background-image: none;
  border: none; border-radius: 6px;
  color: #fff; font-size: 17px; font-weight: 700; letter-spacing: 0.06em;
  transition: background var(--dur) var(--ease);
}
.cform__card .smf-action .smf-button-control__control:hover { background: var(--c-green-deep2); }
.cform__card .smf-action .smf-button-control + .smf-button-control { margin-left: 12px; }

/* --- エラー表示 --- */
.cform__card .smf-error-messages {
  margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--c-red);
}
.cform__card [data-invalid="1"] { border-color: var(--c-red) !important; }

/* --- レスポンシブ（手組みフォームと同じブレークポイントに合わせる） --- */
@media (max-width: 1100px) {
  .cform__card .smf-item { grid-template-columns: minmax(120px, 204px) minmax(0, 388px); }
  .cform__card .smf-item--divider { grid-template-columns: minmax(120px, 204px) minmax(0, 1fr); }
  .cform__card .smf-action { margin-inline: 0; }
}
@media (max-width: 900px) {
  .cform__card .snow-monkey-form { margin-top: 28px; }
  .cform__card .smf-item { grid-template-columns: minmax(92px, 150px) minmax(0, 1fr); }
  .cform__card .smf-item--divider { grid-template-columns: minmax(92px, 150px) minmax(0, 1fr); }
  .cform__card .smf-item__label__text { font-size: 15px; }
  .cform__card .smf-action .smf-button-control__control { width: min(250px, 100%); }
}
@media (max-width: 480px) {
  .cform__card .smf-item { grid-template-columns: 108px minmax(0, 1fr); column-gap: 10px; }
  .cform__card .smf-item--divider { grid-template-columns: 60px minmax(0, 1fr); }
  .cform__card .smf-item__label__text { font-size: 13px; letter-spacing: 0; }
  .cform__card .smf-checkbox-control__label { font-size: 12.5px; }
}