@charset "UTF-8";
/* ===========================================================
   来店予約フォーム 追加スタイル（2026-09-27）
   土台は ap/walin-form/css/style.css（浴衣フォーム）。
   こちらは「条件表示」と「プラン2グループ」のための追加分だけ。
   style.css は触らないので、浴衣フォーム側に影響しない。
   =========================================================== */

/* --- 条件表示のかたまり ------------------------------------
   .cond は既定で閉じている。チェックが入ると .visible が付いて開く。
   style.css の .option-sub と同じ挙動だが、
   入れ子にしても崩れないよう独立させている。 */
.cond{
  display:none;
  margin-top:12px;
  padding:16px 18px;
  background:var(--color-gold-pale);
  border-left:3px solid var(--color-gold);
}
.cond.visible{ display:block; }
.cond .form-group:last-child{ margin-bottom:0; }
.cond .form-label{ margin-bottom:8px; }

/* --- プランのグループ見出し --------------------------------
   カジュアルと正絹を「見出しで分ける」だけにして、
   畳まない・排他にしない。観光で訪問着を選ぶ方が通れるように。 */
.plan-group{ margin-bottom:22px; }
.plan-group:last-child{ margin-bottom:0; }
.plan-group__head{
  display:flex; align-items:baseline; gap:10px;
  padding-bottom:7px; margin-bottom:12px;
  border-bottom:1px solid var(--color-border);
}
.plan-group__ttl{
  font-size:0.92rem; font-weight:600; color:var(--color-text); letter-spacing:.04em;
}
.plan-group__note{ font-size:0.74rem; color:var(--color-text-sub); }

/* チェックしたプランを見てわかるようにする */
.plan-item{
  padding:9px 12px; border:1px solid transparent; border-radius:var(--radius);
  transition:background var(--transition), border-color var(--transition);
}
.plan-item:hover{ background:#fbf8f3; }
.plan-item:has(input:checked){
  background:var(--color-gold-pale); border-color:var(--color-gold-light);
}

/* --- 着物番号（第一〜第三希望）------------------------------
   plan/shitami/ と同じ考え方。3行を横に詰める。 */
.kimono-no{ display:flex; flex-direction:column; gap:9px; }
.kimono-no__row{ display:flex; align-items:center; gap:10px; }
.kimono-no__label{
  flex:0 0 5.2em; font-size:0.8rem; color:var(--color-text-sub);
}
.kimono-no__row input{ flex:1 1 auto; }

/* --- 人数（軽くした版）-------------------------------------
   旧フォームは女性/男性/子供で563px使っていた。横1行に収める。 */
.count-row{ display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-end; }
.count-cell{ display:flex; align-items:center; gap:7px; }
.count-cell__label{ font-size:0.82rem; color:var(--color-text); white-space:nowrap; }
.count-cell input{ width:4.6em; text-align:center; }
.count-cell__unit{ font-size:0.82rem; color:var(--color-text-sub); }

/* --- 日付・時間 --------------------------------------------
   3つのセレクトをやめて input[type=date] に。
   スマホはOSのカレンダーが出るので、いちばん速い。 */
input[type="date"], input[type="time"]{
  width:100%; padding:11px 13px;
  border:1px solid var(--color-border); border-radius:var(--radius);
  font-size:0.9rem; color:var(--color-text); background:#fff;
  font-family:inherit;
}
input[type="date"]:focus, input[type="time"]:focus{
  outline:none; border-color:var(--color-gold);
}

/* --- 補助 ---------------------------------------------------- */
.hint{
  margin-top:7px; font-size:0.76rem; line-height:1.75; color:var(--color-text-sub);
}
.hint strong{ color:var(--color-text); }

@media (max-width:600px){
  .kimono-no__row{ align-items:center; }
  .kimono-no__label{ flex-basis:4.6em; font-size:0.76rem; }
  .count-row{ gap:12px 14px; }
  .cond{ padding:14px; }
}

/* ===========================================================
   2026-09-28 社長フィードバック反映分
   =========================================================== */

/* --- フォーム内のリンク色（既定の青のままだと浮く）-------- */
main a:link, main a:visited{
  color:#7a5c26; text-decoration:underline; text-underline-offset:3px;
}
main a:hover{ color:var(--color-gold); }

/* --- 目立たせたい一文 --------------------------------------
   「気になるものは全てお選びください（お店にて変更可能）」用。 */
.lead-strong{
  margin:0 0 12px; padding:13px 16px;
  background:var(--color-gold-pale); border-left:3px solid var(--color-gold);
  font-size:0.95rem; line-height:1.85; color:var(--color-text);
}
.lead-strong strong{ font-size:1.02rem; }

/* --- オプション1行（チェック＋詳細リンク）------------------ */
.opt-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; margin-bottom:8px;
  border:1px solid transparent; border-radius:var(--radius);
  transition:background var(--transition), border-color var(--transition);
}
.opt-row:hover{ background:#fbf8f3; }
.opt-row:has(input:checked){
  background:var(--color-gold-pale); border-color:var(--color-gold-light);
}
.opt-row .checkbox-item{ flex:1 1 auto; margin:0; }
.opt-link{
  flex:0 0 auto; white-space:nowrap; font-size:0.76rem;
  padding:4px 9px; border:1px solid var(--color-gold-light); border-radius:var(--radius);
}
main a.opt-link:link, main a.opt-link:visited{ text-decoration:none; color:#7a5c26; }
main a.opt-link:hover{ background:var(--color-gold-pale); }

/* --- 「後日ご連絡します」でグレーアウトする欄 -------------- */
.later-off{ opacity:.38; pointer-events:none; }

/* --- 妊娠・健康の確認 -------------------------------------- */
.caution-box{
  padding:15px 17px; background:#fdf6f4;
  border:1px solid #e3cdc6; border-left:3px solid var(--color-required);
  font-size:0.85rem; line-height:1.9; color:var(--color-text);
}
.caution-box strong{ color:var(--color-required); }

@media (max-width:600px){
  .opt-row{ flex-wrap:wrap; gap:6px 10px; }
  .opt-link{ margin-left:26px; }
  .lead-strong{ font-size:0.9rem; padding:12px 14px; }
}

/* --- 定休日（月・木）を選んだときの注意 ---------------------
   input[type=date] のカレンダーは曜日をグレーにできないため、
   選んだ直後にその場で知らせる形にしている。 */
.closed-warn{
  display:none;
  margin-top:8px; padding:10px 13px;
  background:#fdf0ee; border-left:3px solid var(--color-error);
  font-size:0.82rem; line-height:1.8; color:var(--color-error);
}
.closed-warn.show{ display:block; }
.closed-warn strong{ color:var(--color-error); }
input[type="date"].is-closed{ border-color:var(--color-error); background:#fffafa; }

/* --- 入力内容の下書き保存 -----------------------------------
   リンクで別タブへ出たあと、スマホがフォームのタブを捨てても
   入力が消えないようにするためのもの。保存先は端末の中だけ。 */
.draft-bar{
  display:none;
  max-width:760px; margin:0 auto 18px; padding:15px 18px;
  background:#fff; border:1px solid var(--color-gold); border-left:4px solid var(--color-gold);
}
.draft-bar.show{ display:block; }
.draft-bar__txt{
  margin:0 0 12px; font-size:0.88rem; line-height:1.8; color:var(--color-text);
}
.draft-bar__when{ color:var(--color-text-sub); font-size:0.78rem; }
.draft-bar__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.draft-bar__btns button{ font-size:0.82rem; padding:9px 18px; }
.draft-note{
  max-width:760px; margin:14px auto 0; text-align:center;
  font-size:0.74rem; line-height:1.8; color:var(--color-text-sub);
}
@media (max-width:600px){
  .draft-bar{ margin:0 16px 16px; }
  .draft-bar__btns button{ flex:1 1 auto; }
}

/* --- 送信完了ページ：仮予約と注意 ---------------------------
   メールはプレーンテキストなので赤字にできない。
   画面側でははっきり赤で出す。 */
.provisional{
  margin:22px 0 0; padding:16px 18px;
  background:var(--color-gold-pale); border:1px solid var(--color-gold);
  text-align:left;
}
.provisional__ttl{
  margin:0 0 8px !important; font-size:1.02rem; font-weight:bold;
  color:var(--color-text); letter-spacing:.04em;
}
.provisional p{ margin:0 !important; font-size:0.86rem; line-height:1.9; }
.notice-red{
  margin:14px 0 0; padding:15px 18px;
  background:#fdf0ee; border-left:3px solid var(--color-error);
  text-align:left;
}
.notice-red p{
  margin:0 !important; font-size:0.85rem; line-height:1.9; color:var(--color-error);
}
/* 2つめ以降の項目は間を空ける（p{margin:0!important} に負けないよう + で指定） */
.notice-red p + p{ margin-top:14px !important; }
.notice-red strong{ color:var(--color-error); }

/* ===========================================================
   目的に合わせて選ぶ（2026-09-28 追加）
   博多 /reserve/hakata/ と同じ考え方。
   「ご来店予約」から来た方が、下見や英語フォームにも気づけるようにする。
   =========================================================== */
.choose{
  max-width:1000px; margin:26px auto 34px; padding:0 16px;
}
.choose__ttl{
  text-align:center; font-size:clamp(17px,2.1vw,21px); font-weight:bold;
  color:var(--color-text); letter-spacing:.06em; margin:0 0 8px;
}
.choose__lead{
  text-align:center; font-size:0.84rem; line-height:1.9;
  color:var(--color-text-sub); margin:0 0 22px;
}
.choose__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.choose__card{
  display:block; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius);
  overflow:hidden; text-align:center;
  transition:border-color var(--transition), box-shadow var(--transition);
}
/* カードは <main> の外に置いているので、main a〜 の指定では受けられない。
   セレクタから main を外し、下線も色も自前で持たせる。 */
a.choose__card:link, a.choose__card:visited{ text-decoration:none; color:var(--color-text); }
.choose__card, .choose__card *{ text-decoration:none; }
.choose__card:hover{ border-color:var(--color-gold); box-shadow:0 2px 14px rgba(184,151,106,.18); }
.choose__card img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block;
}
/* 下見の写真は縦位置なので、畳と着物が入るように上寄りに切る */
.choose__card img.is-tall{ object-position:50% 38%; }
.choose__body{ padding:15px 14px 18px; }
.choose__name{
  display:block; font-size:clamp(15px,1.8vw,17px); font-weight:bold;
  color:var(--color-text); letter-spacing:.04em; line-height:1.5;
}
.choose__sub{
  display:block; margin-top:7px; font-size:0.76rem; line-height:1.75;
  color:var(--color-text-sub);
}
.choose__here{
  display:inline-block; margin-top:10px; font-size:0.72rem; letter-spacing:.1em;
  color:var(--color-gold); border:1px solid var(--color-gold-light);
  border-radius:20px; padding:3px 12px;
}
.choose__card--current{ border-color:var(--color-gold); background:var(--color-gold-pale); }

@media (max-width:700px){
  .choose__cards{ grid-template-columns:1fr; gap:14px; }
  .choose__card{ display:flex; align-items:center; text-align:left; }
  .choose__card img{ flex:0 0 118px; width:118px; aspect-ratio:1/1; }
  .choose__body{ flex:1 1 auto; padding:12px 14px; }
  .choose__sub{ margin-top:5px; }
}