/* かんたんお見積り（template-parts/guide.php）。.srs-guide の中だけに効きます */
/* このブロックの中だけに効くようにしてあります。テーマ側の見た目は変えません */
/* 色はテーマの決めごと（style.css の :root）をそのまま使います。
   昼の画面・夜の画面（ダークモード）の切り替えも、テーマ側に任せます。
   カッコの中は、テーマの外で使ったとき用の昼の色です */
.srs-guide{
  --srs-ink:var(--ink, #2E2A27);
  --srs-dim:var(--ink-soft, #6E6660);
  --srs-accent:var(--accent, #C4553F);
  --srs-line:var(--rule, #E8E2D9);
  --srs-panel:var(--surface, #FFFFFF);
  --srs-wash:var(--accent-wash, #F3E7E2);

  max-width:720px; margin:0 auto; padding:4px 0;
  color:var(--srs-ink);
  font-family:inherit; line-height:1.8;
  text-align:left;
}
.srs-guide *{box-sizing:border-box;}

.srs-eyebrow{
  margin:0; font-size:11px; letter-spacing:.24em;
  color:var(--srs-accent); font-weight:700;
}
.srs-title{margin:.3em 0 .4em; font-size:1.35rem; line-height:1.5;}
.srs-lead{margin:0 0 1.4em; font-size:.92rem; color:var(--srs-dim);}
.srs-lead strong{color:var(--srs-ink);}

/* 進みぐあい */
.srs-steps{
  display:flex; flex-wrap:wrap; gap:6px;
  list-style:none; margin:0 0 14px; padding:0;
}
.srs-steps li{
  font-size:11px; padding:4px 10px; border-radius:999px;
  border:1px solid var(--srs-line); color:var(--srs-dim);
}
.srs-steps li.is-done{
  border-color:var(--srs-accent); color:var(--srs-accent);
}

.srs-panel{
  border:1px solid var(--srs-line); border-radius:18px;
  padding:20px; background:var(--srs-panel);
}

.srs-q{margin:0 0 4px; font-size:1.05rem; font-weight:700;}
.srs-hint{margin:0 0 14px; font-size:.82rem; color:var(--srs-dim);}

/* 選択肢 */
.srs-opts{display:grid; gap:8px;}
.srs-opt{
  display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--srs-line); border-radius:14px;
  padding:14px 16px; background:transparent; color:inherit;
  font:inherit; line-height:1.6;
  transition:border-color .15s, background-color .15s;
}
.srs-opt:hover,.srs-opt:focus-visible{
  border-color:var(--srs-accent); background:var(--srs-wash); outline:none;
}
.srs-opt b{display:block; font-size:.98rem;}
.srs-opt span{display:block; font-size:.8rem; color:var(--srs-dim); margin-top:2px;}

/* 結果 */
.srs-total{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--srs-line);
}
.srs-total .num{font-size:1.9rem; font-weight:700; color:var(--srs-accent); line-height:1.2;}
.srs-total .tax{font-size:.8rem; color:var(--srs-dim);}

.srs-lines{list-style:none; margin:0 0 16px; padding:0; font-size:.9rem;}
.srs-lines li{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-bottom:1px dotted var(--srs-line);
}
.srs-lines li:last-child{border-bottom:none;}
.srs-lines .amt{white-space:nowrap; font-variant-numeric:tabular-nums;}
/* 「打ち合わせで」のような長い但し書きは、横に並べると潰れる。縦に積む */
.srs-lines li.is-ask{display:block;}
.srs-lines li.is-ask .amt{
  display:block; white-space:normal; margin-top:2px;
  font-size:.82rem; color:var(--srs-accent);
}

.srs-facts{
  display:grid; gap:8px; margin:0 0 16px; padding:14px;
  border-radius:12px; background:var(--srs-wash); font-size:.86rem;
}
.srs-facts div{display:flex; gap:10px;}
.srs-facts dt{flex:0 0 5.5em; color:var(--srs-dim); margin:0;}
.srs-facts dd{margin:0;}

.srs-notes{margin:0 0 18px; padding-left:1.1em; font-size:.82rem; color:var(--srs-dim);}
.srs-notes li{margin:.35em 0;}

.srs-acts{display:grid; gap:8px;}
.srs-btn{
  display:block; text-align:center; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:14px 20px; font:inherit; font-weight:700; font-size:.95rem;
  border:1px solid var(--srs-accent); color:var(--srs-accent); background:transparent;
  transition:background-color .15s;
}
.srs-btn:hover{background:var(--srs-wash);}
.srs-btn.is-fill{background:var(--srs-accent); color:var(--srs-panel); border-color:var(--srs-accent);}
.srs-btn.is-fill:hover{opacity:.9;}
.srs-btn.is-quiet{border-color:var(--srs-line); color:var(--srs-dim);}

.srs-foot{display:flex; gap:16px; margin-top:14px;}
.srs-link{
  background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:.85rem; color:var(--srs-dim); text-decoration:underline;
}
.srs-link:hover{color:var(--srs-ink);}

@media (max-width:600px){
  .srs-panel{padding:16px;}
  .srs-total .num{font-size:1.6rem;}
  .srs-facts dt{flex-basis:4.8em;}
}
@media (prefers-reduced-motion:reduce){
  .srs-opt,.srs-btn{transition:none;}
}

/* 人数を数える質問（お子さま・大人の方の着付け。2026-10-05） */
.srs-counts{display:grid; gap:8px;}
.srs-count{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--srs-line); border-radius:14px; padding:10px 12px 10px 16px;
  transition:border-color .15s, background-color .15s;
}
.srs-count.is-on{border-color:var(--srs-accent); background:var(--srs-wash);}
.srs-count-name b{display:block; font-size:.98rem; line-height:1.5;}
.srs-count-name span{display:block; font-size:.8rem; color:var(--srs-dim);}
.srs-count-ctrl{display:flex; align-items:center; gap:4px; flex:none;}
.srs-count-ctrl button{
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--srs-line); background:var(--srs-panel); color:var(--srs-ink);
  font:inherit; font-size:1.15rem; line-height:1;
}
.srs-count-ctrl button:hover:not(:disabled){border-color:var(--srs-accent); color:var(--srs-accent);}
.srs-count-ctrl button:disabled{opacity:.35; cursor:default;}
.srs-count-ctrl output{min-width:1.6em; text-align:center; font-weight:700; font-variant-numeric:tabular-nums;}
.srs-next{width:100%; margin:12px 0 10px;}
.srs-next:disabled{opacity:.45; cursor:default;}
@media (prefers-reduced-motion:reduce){ .srs-count{transition:none;} }