/* 水道料金シミュレーター（[water_sim] の中だけに効かせる）
 *
 * 方針: サイト（SWELL）の見た目に合わせるが、**テーマのブロックCSSには依存しない**。
 *   - SWELL はページ本文に使われているブロックのCSSだけを読み込む。このツールは中身をJSで
 *     後から差し込むため、swell-block-button や is-style-num_circle のクラスを付けても
 *     そのページでは無装飾になる（2026-09-29 のローカル確認で実際に素のリンクになった）。
 *   - そこで、公開ページから実測した値をここに写して自前で持つ:
 *     メイン #002063 ／ リンク #007fd8 ／ 淡色 #f3f8fd ／ 罫線 #dcdcdc ／
 *     CTA緑 #00a040（影 0 4px 0 #007830・角丸4px）／ リストの点線 rgba(199,199,199,.5)。
 *     テーマのCSS変数がある場合はそちらを優先する（テーマ側で色を変えたら追随する）。
 *   - 見出し（h3.wp-block-heading）だけはテーマ本体のCSSなので、そのまま使う。
 *   - フォントと文字サイズは指定しない（本文から継承する）。
 */
.wssim {
  --ws-main: var(--color_main, #002063);
  --ws-link: var(--color_link, #007fd8);
  --ws-pale: var(--color_pale02, #f3f8fd);
  --ws-line: var(--color_border, #dcdcdc);
  --ws-up: #e44141;      /* 高くなる（テーマの --color_deep01） */
  --ws-down: #00a040;    /* 安くなる（テーマの --color_icon_good） */
  --ws-muted: #5b6b78;
}
.wssim *, .wssim *::before, .wssim *::after { box-sizing: border-box; }
.wssim-loading { color: var(--ws-muted); }

/* ---- 入力パネル ---- */
.wssim-panel {
  background: var(--ws-pale);
  border: 1px solid var(--ws-line);
  border-radius: 6px;
  padding: 1.2em 1em 1em;
}
.wssim-field { margin: 0 0 1.1em; }
.wssim-field:last-child { margin-bottom: 0; }
.wssim-label {
  display: block;
  font-weight: 700;
  margin: 0 0 .5em;
  color: var(--ws-main);
}
.wssim-label small { font-weight: 400; color: var(--ws-muted); margin-left: .4em; font-size: .82em; }

/* 人数（セグメント） */
.wssim-persons { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4em; }
.wssim-persons button {
  min-height: 48px;
  padding: .4em .2em;
  background: #fff;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  color: inherit;
  font-size: .95em;
  font-family: inherit;
  line-height: 1.3;
  cursor: pointer;
}
.wssim-persons button:hover { border-color: var(--ws-main); }
.wssim-persons button[aria-pressed="true"] {
  background: var(--ws-main);
  border-color: var(--ws-main);
  color: #fff;
  font-weight: 700;
}

/* エリア選択 */
.wssim-areas { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8em; align-items: end; }
.wssim-area { min-width: 0; }
.wssim-selects { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.wssim-selects select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: .5em .6em;
  background: #fff;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  color: inherit;
  font-family: inherit;
  font-size: 16px;            /* 16px未満だと iOS が入力時に拡大する */
}
.wssim-selects select:focus-visible { outline: 2px solid var(--ws-link); outline-offset: 1px; }
.wssim-dot {
  display: inline-block;
  width: .6em; height: .6em;
  margin-right: .4em;
  border-radius: 50%;
  vertical-align: baseline;
}
.wssim-dot--from { background: #8ba0b3; }
.wssim-dot--to { background: var(--ws-link); }
.wssim-swap {
  min-height: 48px;
  min-width: 48px;
  padding: .3em .6em;
  background: #fff;
  border: 1px solid var(--ws-line);
  border-radius: 4px;
  color: var(--ws-main);
  font-family: inherit;
  font-size: .85em;
  line-height: 1.2;
  cursor: pointer;
}
.wssim-swap:hover { border-color: var(--ws-main); }

/* 使用水量 */
.wssim-usage { margin-top: .2em; }
.wssim-usage summary { cursor: pointer; color: var(--ws-link); font-size: .9em; }
.wssim-usage-body { padding: .7em .1em 0; }
.wssim-usage-body input[type="range"] { width: 100%; height: 32px; accent-color: var(--ws-main); }
.wssim-usage-now { margin: .2em 0 0; font-size: .88em; color: var(--ws-muted); }
.wssim-reset {
  margin-left: .5em;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ws-link);
  font-family: inherit;
  font-size: 1em;
  text-decoration: underline;
  cursor: pointer;
}

/* ---- 結果 ---- */
.wssim-empty {
  margin: 1em 0 0;
  padding: 1em;
  border: 1px dashed var(--ws-line);
  border-radius: 6px;
  color: var(--ws-muted);
}
.wssim-head {
  margin: 1.2em 0 0;
  padding: 1em 1.1em;
  background: #fff;
  border: 2px solid var(--ws-main);
  border-radius: 6px;
}
.wssim-head p { margin: 0; }
.wssim-head-route { font-size: .95em; color: var(--ws-muted); }
.wssim-head-route span { margin: 0 .5em; color: var(--ws-main); }
.wssim-head-route b { color: var(--ws-main); }
.wssim-head-main { margin-top: .1em !important; line-height: 1.25; }
.wssim-head-main .wssim-amount { font-size: 2.1em; font-weight: 700; letter-spacing: -.02em; }
.wssim-head-main .wssim-per { margin-left: .2em; font-size: .95em; color: var(--ws-muted); }
.wssim-up { color: var(--ws-up); }
.wssim-down { color: var(--ws-down); }
.wssim-head-verdict { margin-top: .2em !important; font-size: 1em; line-height: 1.6; }
.wssim-head-verdict b { color: var(--ws-main); }
.wssim-head-sub { margin-top: .4em !important; font-size: .82em; color: var(--ws-muted); }

.wssim-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin: .9em 0 0; }
.wssim-card { padding: .9em 1em; background: #fff; border: 1px solid var(--ws-line); border-radius: 6px; }
.wssim-card-role { margin: 0 0 .1em; font-size: .8em; color: var(--ws-muted); }
.wssim-card-city { margin: 0 0 .4em; font-weight: 700; color: var(--ws-main); }
.wssim-card-total { margin: 0; font-size: 1.55em; font-weight: 700; line-height: 1.3; color: var(--ws-main); }
.wssim-card-total span { font-size: .55em; font-weight: 400; color: var(--ws-muted); }
.wssim-card-break { margin: .3em 0 0; font-size: .85em; color: var(--ws-muted); }
.wssim-card-bar { height: 8px; margin: .6em 0 0; background: #eef2f6; border-radius: 4px; overflow: hidden; }
.wssim-card-bar i { display: block; height: 100%; border-radius: 4px; }
.wssim-card--from .wssim-card-bar i { background: #8ba0b3; }
.wssim-card--to .wssim-card-bar i { background: var(--ws-link); }
.wssim-card-src { margin: .6em 0 0; font-size: .8em; }

/* 比較表の並び（枠と色は下の「テーマの見た目を写した部品」で作る） */
.wssim-table { margin: 1em 0 0; }
.wssim-table th, .wssim-table td { text-align: right; }
.wssim-table thead th { text-align: center; }
.wssim-table tbody th { text-align: left; font-weight: 400; }
.wssim-table .wssim-diff-up { color: var(--ws-up); }
.wssim-table .wssim-diff-down { color: var(--ws-down); }
.wssim-table .wssim-inline-diff { display: none; font-size: .85em; }

.wssim-notes { margin: 1.1em 0 0; padding: .9em 1em; background: var(--ws-pale); border-radius: 6px; }
.wssim-notes ul { margin: 0 !important; }
.wssim-notes li { font-size: .85em; color: var(--ws-muted); }
.wssim-warn { color: var(--ws-up); }

/* 手続き・CTA */
.wssim-steps { margin: 1.4em 0 0; }
.wssim-cta { margin: 1.2em 0 0; }
.wssim-cta-lead { margin: 0 0 .6em; font-size: .95em; }
.wssim-cta-sub { margin: .7em 0 0; font-size: .88em; text-align: center; }
.wssim-sep { margin: 0 .6em; color: #9aa7b1; }
.wssim-cta--quick { margin: .9em 0 0; }



/* ---- テーマの見た目を写した部品（ブロックCSSに依存しないための自前実装） ---- */

/* 比較表: 公開ページの table と同じ（見出しセル #002063・罫線 #dcdcdc） */
.wssim-table { width: 100%; border-collapse: collapse; }
.wssim-table th, .wssim-table td {
  border: 1px solid var(--ws-line);
  padding: .5em .75em;
  vertical-align: middle;
}
.wssim-table thead th { background: var(--ws-main); color: #fff; font-weight: 700; }
.wssim-table tbody th { background: transparent; color: inherit; }

/* リスト: 点線で区切る＝サイトの is-style-check_list / is-style-num_circle と同じ見え方 */
.wssim-list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.wssim-list > li {
  position: relative;
  margin: .25em 0 .75em;
  padding: 0 0 .75em 1.6em;
  border-bottom: 1px dashed rgba(199, 199, 199, .5);
  list-style: none;
}
.wssim-list > li:last-child { margin-bottom: 0; }
.wssim-list--check > li::before {
  content: "";
  position: absolute;
  left: .25em; top: .45em;
  width: .45em; height: .8em;
  border-right: 2px solid var(--ws-main);
  border-bottom: 2px solid var(--ws-main);
  transform: rotate(45deg);
}
.wssim-list--num { counter-reset: wssim-num; }
.wssim-list--num > li { padding-left: 2.2em; counter-increment: wssim-num; }
.wssim-list--num > li::before {
  content: counter(wssim-num);
  position: absolute;
  left: 0; top: .15em;
  width: 1.5em; height: 1.5em;
  background: var(--ws-main);
  border-radius: 50%;
  color: #fff;
  font-size: .85em;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
}
.wssim-list > li strong { display: block; }

/* CTAボタン: 公開ページの swell-block-button green_ -size-l is-style-btn_solid と同寸 */
.wssim-btn {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 1.15em 1.5em;
  background: #00a040;
  border-radius: 4px;
  box-shadow: 0 4px 0 0 #007830;
  color: #fff !important;
  font-size: 1.15em;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
}
.wssim-btn:hover { background: #049345; color: #fff !important; }
.wssim-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 0 #007830; }

/* ---- スマホ（最後に置いて、上のルールを確実に上書きする） ---- */
@media (max-width: 599px) {
  .wssim-persons { grid-template-columns: repeat(3, 1fr); }
  .wssim-areas { grid-template-columns: 1fr; gap: .7em; }
  .wssim-swap { justify-self: center; width: auto; }
  .wssim-cards { grid-template-columns: 1fr; gap: .6em; }
  .wssim-card { display: grid; grid-template-columns: 1fr auto; column-gap: .8em; align-items: baseline; }
  .wssim-card-role { grid-column: 1 / -1; }
  .wssim-card-city { margin-bottom: 0; }
  .wssim-card-total { text-align: right; }
  .wssim-card-break, .wssim-card-bar, .wssim-card-src { grid-column: 1 / -1; }
  /* 4列は横に溢れるので「差」列を畳み、引越し先のセルに差を添える */
  .wssim-table .wssim-col-diff { display: none; }
  .wssim-table .wssim-inline-diff { display: block; }
  .wssim-table th, .wssim-table td { padding: .5em .6em; font-size: .92em; }
  /* ボタンの文字が3行に折れないように少しだけ詰める */
  .wssim-btn { padding: 1em 1.1em; font-size: 1.05em; }
  /* 補助リンクは「／」で繋がず縦に並べる（指で押し分けやすい） */
  .wssim-cta-sub { display: flex; flex-direction: column; gap: .6em; }
  .wssim-sep { display: none; }
  .wssim-cta-sub a { padding: .2em 0; }
}


/* =====================================================================
 * 2026-10-14 デザインの見直し（本人「ボタンなど押しやすくメリハリをつけて。スマホでの操作感を良くしたい」）
 *   - 押せるものは全部「ボタンの見た目」に（枠を太く・角を丸く・押した感触・選んだら色と✓）
 *   - 入力の順番が分かるように、見出しに①②③を付ける
 *   - 結果は差額をいちばん大きく、手続きへの導線は緑の枠のボタンに
 *   - 指で押す大きさ（高さ52〜56px）と、タップしたときの灰色の点滅を消す
 * ===================================================================== */
.wssim { --ws-radius: 10px; --ws-shadow: 0 2px 6px rgba(0, 32, 99, .08); }
.wssim button, .wssim select, .wssim summary, .wssim a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 入力パネル: 白いカード＋薄い影 */
.wssim-panel {
  background: #fff;
  border: 1px solid #e3e9ef;
  border-radius: 14px;
  box-shadow: var(--ws-shadow);
  padding: 1.3em 1.1em 1.1em;
  counter-reset: wssim-step;
}
/* 見出しに①②③ */
.wssim-panel .wssim-label {
  display: flex;
  align-items: center;
  gap: .45em;
  font-size: 1.02em;
}
.wssim-panel .wssim-label::before {
  counter-increment: wssim-step;
  content: counter(wssim-step);
  flex: 0 0 auto;
  width: 1.55em; height: 1.55em;
  border-radius: 50%;
  background: var(--ws-main);
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  line-height: 1.55em;
  text-align: center;
}
.wssim-panel .wssim-label small { margin-left: 0; }
.wssim-panel .wssim-dot { display: none; }      /* 番号に置き換えたので色の点は出さない */

/* 人数: 押せる感じのあるボタン。選んだものは濃い色＋✓ */
.wssim-persons { gap: .5em; }
.wssim-persons button {
  position: relative;
  min-height: 54px;
  background: #fff;
  border: 2px solid #c9d4df;
  border-radius: var(--ws-radius);
  box-shadow: 0 2px 0 #c9d4df;
  color: var(--ws-main);
  font-size: 1.02em;
  font-weight: 700;
  transition: transform .06s, box-shadow .06s, background-color .12s;
}
.wssim-persons button:hover { border-color: var(--ws-main); }
.wssim-persons button:active { transform: translateY(2px); box-shadow: 0 0 0 #c9d4df; }
.wssim-persons button[aria-pressed="true"] {
  background: var(--ws-main);
  border-color: var(--ws-main);
  box-shadow: 0 2px 0 #00123a;
  color: #fff;
}
.wssim-persons button[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 3px; right: 7px;
  font-size: .78em;
  opacity: .9;
}
.wssim-persons button:focus-visible,
.wssim-swap:focus-visible,
.wssim-usage summary:focus-visible { outline: 3px solid var(--ws-link); outline-offset: 2px; }

/* セレクト: 太い枠・角丸・自前の矢印 */
.wssim-selects { gap: .55em; }
.wssim-selects select {
  min-height: 54px;
  padding: .5em 2.1em .5em .8em;
  border: 2px solid #c9d4df;
  border-radius: var(--ws-radius);
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23002063' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .8em center;
  font-weight: 700;
  color: var(--ws-main);
  cursor: pointer;
}
.wssim-selects select:hover { border-color: var(--ws-main); }
.wssim-selects select:focus-visible { outline: 3px solid var(--ws-link); outline-offset: 1px; }

/* 入れ替え: 丸みのある小さなボタン（横並び「⇅ 入れ替え」） */
.wssim-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  min-height: 44px;
  padding: .3em 1.1em;
  border: 2px solid #c9d4df;
  border-radius: 999px;
  font-size: .9em;
  font-weight: 700;
  white-space: nowrap;
}
.wssim-swap br { display: none; }
.wssim-swap:active { transform: translateY(1px); background: var(--ws-pale); }

/* 使用水量: 文字のリンクではなく、開け閉めできるボタンの見た目 */
.wssim-usage { margin-top: .4em; }
.wssim-usage summary {
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 48px;
  padding: .55em .9em;
  background: var(--ws-pale);
  border: 1px solid #d5e3f2;
  border-radius: var(--ws-radius);
  color: var(--ws-main);
  font-size: .92em;
  font-weight: 700;
  list-style: none;
}
.wssim-usage summary::-webkit-details-marker { display: none; }
.wssim-usage summary::before {
  content: "＋";
  flex: 0 0 auto;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #c9d4df;
  line-height: 1.4em;
  text-align: center;
  font-size: .9em;
}
.wssim-usage[open] summary::before { content: "－"; }
.wssim-usage-body input[type="range"] { height: 40px; }

/* 結果: 差額をいちばん大きく。上の帯で「結果」と分かるように */
.wssim-head {
  position: relative;
  margin-top: 1.4em;
  padding: 1.1em 1.1em 1.2em;
  border: 2px solid var(--ws-main);
  border-radius: 14px;
  box-shadow: var(--ws-shadow);
}
.wssim-head-main .wssim-amount { font-size: 2.5em; }
.wssim-head-verdict { font-size: 1.05em; }
.wssim-head-sub { padding-top: .5em; border-top: 1px dashed #dfe5eb; }

/* 結果の中の「手続き・お申し込みへ」: 緑の枠のボタン */
.wssim-cta--quick { margin-top: .9em !important; }
.wssim-cta-sub.wssim-cta--quick a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .6em 1em;
  background: #fff;
  border: 2px solid #00a040;
  border-radius: var(--ws-radius);
  color: #00813a !important;
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.4;
}
.wssim-cta-sub.wssim-cta--quick a:active { background: #effaf3; transform: translateY(1px); }

/* 比較カード: 左に色の帯（今＝灰青／引越し先＝青） */
.wssim-card { border-radius: 12px; border-left-width: 5px; }
.wssim-card--from { border-left-color: #8ba0b3; }
.wssim-card--to { border-left-color: var(--ws-link); }

/* 最後のCTA: 角丸と矢印で「押すところ」をはっきり */
.wssim-btn { border-radius: var(--ws-radius); position: relative; padding-right: 2.6em; padding-left: 2.6em; word-break: auto-phrase; }
.wssim-btn::after {
  content: "›";
  position: absolute;
  right: 1em; top: 50%;
  transform: translateY(-52%);
  font-size: 1.5em;
  font-weight: 400;
}
.wssim-cta-sub a { display: inline-block; padding: .35em 0; }

@media (max-width: 599px) {
  .wssim-panel { padding: 1.1em .9em 1em; border-radius: 12px; }
  .wssim-persons button { min-height: 56px; font-size: 1.05em; }
  .wssim-swap { justify-self: center; margin: -.1em 0; }
  .wssim-head-main .wssim-amount { font-size: 2.3em; }
  .wssim-btn { padding: 1em 2em 1em 1.1em; font-size: 1.02em; word-break: auto-phrase; }
  .wssim-btn::after { right: .7em; }
}