@charset "UTF-8";
/* ==========================================================================
   和凛 フォーム共通スタイル
   /plan/soudan/（着物相談）と /plan/shitami/（下見予約）で共有する。
   サイト本体のCSS（all_res.css 等）は読み込まない。旧CSSとの詳細度の
   戦いを持ち込まないため、この2つのフォームは意図的に独立させている。
   ========================================================================== */

:root{
  --wa-gold:#a8894e;
  --wa-gold-dark:#7a5c26;
  --wa-gold-pale:#e8d3ae;
  --wa-sumi:#241f1b;
  --wa-text:#3f3a37;
  --wa-gray:#6f6864;
  --wa-bg:#faf8f4;
  --wa-line:rgba(36,31,27,.16);
  --wa-red:#9a3d33;
  --wa-head:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --wa-body:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --wa-ui:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--wa-text);
  font-family:var(--wa-body); font-size:15px; line-height:1.9;
}
img{max-width:100%; height:auto}
a{color:var(--wa-gold-dark)}

/* ── ヘッダー ───────────────────────────────── */
.wa-header{
  background:var(--wa-sumi); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.wa-header__logo{display:block; line-height:0}
.wa-header__logo img{width:118px}
.wa-header__tel{
  font-family:var(--wa-head); font-size:14px; letter-spacing:.06em;
  color:#fff; text-decoration:none; white-space:nowrap;
}
.wa-header__tel:hover{color:var(--wa-gold-pale)}

/* ── パンくず ───────────────────────────────── */
.wa-crumb{
  max-width:760px; margin:0 auto; padding:14px 24px 0;
  font-family:var(--wa-ui); font-size:12px; color:var(--wa-gray);
}
.wa-crumb a{color:var(--wa-gray); text-decoration:none}
.wa-crumb a:hover{color:var(--wa-gold-dark); text-decoration:underline}
.wa-crumb span{margin:0 .5em; color:var(--wa-gold)}

/* ── ページ見出し ───────────────────────────── */
.wa-title{
  max-width:760px; margin:0 auto; padding:22px 24px 4px; text-align:center;
}
.wa-title__en{
  display:block; font-family:var(--wa-head); font-size:11.5px;
  letter-spacing:.26em; color:var(--wa-gold); margin-bottom:10px;
}
.wa-title h1{
  font-family:var(--wa-head); font-weight:400;
  font-size:clamp(22px,3vw,30px); line-height:1.5; color:var(--wa-sumi);
  margin:0; letter-spacing:.04em;
}
.wa-title__lead{
  font-size:14px; color:var(--wa-gray); line-height:1.95;
  margin:14px 0 0; text-align:left;
}
.wa-title::after{
  content:""; display:block; width:44px; height:1px;
  background:var(--wa-gold); margin:20px auto 0;
}

/* ── 本体 ───────────────────────────────────── */
.wa-wrap{max-width:760px; margin:0 auto; padding:28px 24px 90px}

/* ── 選んだ着物 ─────────────────────────────── */
.wa-fav{
  background:var(--wa-bg); border-top:2px solid var(--wa-gold);
  border-bottom:1px solid var(--wa-line);
  padding:22px 20px; margin-bottom:34px;
}
.wa-fav__title{
  font-family:var(--wa-head); font-size:16px; color:var(--wa-sumi);
  margin:0 0 4px; letter-spacing:.04em;
}
.wa-fav__hint{
  font-family:var(--wa-ui); font-size:12.5px; color:var(--wa-gray);
  margin:0 0 16px;
}
.wa-fav__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.wa-fav__item{
  position:relative; background:#fff; border:1px solid var(--wa-line);
}
.wa-fav__item img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.wa-fav__info{padding:8px 9px; font-size:11.5px; color:var(--wa-gray); line-height:1.6}
.wa-fav__no{
  font-family:var(--wa-head); font-size:13px; color:var(--wa-sumi);
  letter-spacing:.03em; margin-bottom:2px;
}
.wa-fav__remove{
  position:absolute; top:6px; right:6px; width:26px; height:26px;
  border:0; border-radius:50%; cursor:pointer; line-height:1;
  background:rgba(36,31,27,.62); color:#fff; font-size:15px;
}
.wa-fav__remove:hover{background:rgba(36,31,27,.85)}
.wa-fav__empty{
  grid-column:1/-1; font-family:var(--wa-ui); font-size:13.5px;
  color:var(--wa-gray); line-height:1.9; text-align:left;
}

/* ── フォーム ───────────────────────────────── */
.wa-form{display:flex; flex-direction:column; gap:26px}
.wa-group{display:flex; flex-direction:column; gap:8px}
.wa-label{
  font-family:var(--wa-head); font-size:15px; color:var(--wa-sumi);
  letter-spacing:.03em;
}
.wa-req,.wa-opt{
  display:inline-block; margin-left:8px; padding:2px 8px;
  font-family:var(--wa-ui); font-size:11px; letter-spacing:.06em;
  vertical-align:2px; line-height:1.6;
}
.wa-req{background:rgba(154,61,51,.09); color:var(--wa-red); border:1px solid rgba(154,61,51,.28)}
.wa-opt{background:rgba(36,31,27,.05); color:var(--wa-gray); border:1px solid var(--wa-line)}

.wa-input,.wa-select,.wa-textarea{
  width:100%; font-family:var(--wa-ui); font-size:16px; /* 16px未満はiOSで拡大される */
  padding:12px 14px; min-height:48px; color:var(--wa-sumi);
  background:#fff; border:1px solid rgba(36,31,27,.28); border-radius:3px;
}
.wa-input:focus,.wa-select:focus,.wa-textarea:focus{
  outline:none; border-color:var(--wa-gold); box-shadow:0 0 0 3px rgba(168,137,78,.16);
}
.wa-input+.wa-input{margin-top:8px}
.wa-textarea{min-height:140px; line-height:1.85; resize:vertical}
.wa-select{appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--wa-gold) 50%),
                   linear-gradient(135deg,var(--wa-gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:42px;
}

.wa-radios{display:flex; flex-wrap:wrap; gap:10px}
.wa-radios label{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--wa-ui); font-size:14.5px; color:var(--wa-text);
  padding:11px 16px; min-height:48px;
  border:1px solid var(--wa-line); border-radius:3px; background:#fff;
}
.wa-radios label:has(input:checked){
  border-color:var(--wa-gold); background:rgba(168,137,78,.07); color:var(--wa-sumi);
}
.wa-radios input{accent-color:var(--wa-gold); width:17px; height:17px}

.wa-note{font-family:var(--wa-ui); font-size:12.5px; color:var(--wa-gray); line-height:1.8}
/* 定休日が選ばれたときの警告 */
.wa-closed-msg{margin-top:8px; font-weight:600}
.wa-input.is-closed{
  border-color:var(--wa-red);
  box-shadow:0 0 0 3px rgba(154,61,51,.14);
}
.wa-note--mark{color:var(--wa-gold-dark)}
.wa-note--warn{color:var(--wa-red)}

/* 第一希望・第二希望の枠 */
.wa-pref{border:1px solid var(--wa-line); padding:16px; background:#fdfcfa}
.wa-pref+.wa-pref{margin-top:12px}
.wa-pref__title{
  font-family:var(--wa-head); font-size:14px; color:var(--wa-gold-dark);
  letter-spacing:.08em; margin-bottom:12px;
}
.wa-datetime{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.wa-datetime__label{font-family:var(--wa-ui); font-size:12.5px; color:var(--wa-gray); margin-bottom:6px}

.wa-submit{
  font-family:var(--wa-head); font-size:16px; letter-spacing:.22em;
  color:#fff; background:var(--wa-gold); border:1px solid var(--wa-gold);
  padding:17px 20px; min-height:56px; cursor:pointer; border-radius:3px;
  margin-top:6px;
}
.wa-submit:hover{background:var(--wa-gold-dark); border-color:var(--wa-gold-dark)}

.wa-formnote{
  font-family:var(--wa-ui); font-size:12.5px; color:var(--wa-gray);
  line-height:1.9; text-align:center; margin:4px 0 0;
}

/* ── 案内ボックス（下見の説明など） ─────────── */
.wa-box{
  background:var(--wa-bg); border-top:2px solid var(--wa-gold);
  border-bottom:1px solid var(--wa-line);
  padding:22px 20px; margin-bottom:32px;
}
.wa-box__title{
  font-family:var(--wa-head); font-size:16px; color:var(--wa-sumi);
  margin:0 0 10px; letter-spacing:.04em;
}
.wa-box p{margin:0 0 .8em; font-size:14px; line-height:1.95}
.wa-box p:last-child{margin-bottom:0}

/* ── 完了ページ ─────────────────────────────── */
.wa-done{max-width:640px; margin:0 auto; padding:60px 24px 90px; text-align:center}
.wa-done__mark{
  width:64px; height:64px; margin:0 auto 24px; border-radius:50%;
  border:1px solid var(--wa-gold); color:var(--wa-gold);
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.wa-done h1{
  font-family:var(--wa-head); font-weight:400; font-size:clamp(21px,2.8vw,27px);
  color:var(--wa-sumi); margin:0 0 18px; letter-spacing:.04em;
}
.wa-done p{font-size:14.5px; line-height:2; color:var(--wa-text); margin:0 0 1em}
.wa-done__btns{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px;
}
.wa-btn{
  display:inline-block; font-family:var(--wa-head); font-size:14.5px;
  letter-spacing:.1em; text-decoration:none; padding:14px 26px; min-height:48px;
  border:1px solid var(--wa-gold); color:var(--wa-gold-dark);
  background:#fff; border-radius:3px;
}
.wa-btn:hover{background:rgba(168,137,78,.09)}
.wa-btn--primary{background:var(--wa-gold); color:#fff}
.wa-btn--primary:hover{background:var(--wa-gold-dark); color:#fff}

/* ── フッター ───────────────────────────────── */
.wa-footer{
  background:var(--wa-sumi); color:rgba(255,255,255,.72);
  padding:26px 20px; text-align:center;
  font-family:var(--wa-ui); font-size:12px; line-height:2;
}
.wa-footer a{color:rgba(255,255,255,.86); text-decoration:none}
.wa-footer a:hover{color:var(--wa-gold-pale)}

/* ── スマホ ─────────────────────────────────── */
@media (max-width:600px){
  .wa-wrap{padding:22px 18px 80px}
  .wa-crumb,.wa-title{padding-left:18px; padding-right:18px}
  .wa-fav__grid{gap:8px}
  .wa-datetime{grid-template-columns:1fr; gap:12px}
  .wa-radios label{flex:1 1 auto; justify-content:center}
  .wa-header__logo img{width:100px}
}