/* lp_chill.html「料金」（#price）のスタイル。
*
* lp_chill.css の**あとに**読む（後勝ちで、このセクションだけを上書きする）。
* 別ファイルにしてあるのは lp_chill.css が上限いっぱい（1,929行）だからで、
* 読み込み順そのものが仕様。 の並びを変えないこと
* （css/lp_chill_check_gates.css と同じ形）。
*
* ■ この節の組み立て
* 1. .pd 同じところと違うところを、**1つの表**に入れる。
* もとは2枚のプランカードが同じ機能をそれぞれ並べていて、
* 読み手が左右を目で突き合わせないと差が分からなかった。
* 共通の行（.pd-row--same）は左右に分けず1本にのばす。
* 分かれていない＝同じ、が形そのもので分かる。
* 2. .opt-pick オプション。**選ぶ場所は1つだけ。**
* もとは「お品書き（一覧）」と「試算」が同じ8件を2度並べていた。
* 申告の内容で決まるもの（不動産・FXなど）も、ここに並べる。
*
* ■ 色の役割
* あなたがやる = 暖色（#fff6ea）／税理士がやる = 緑（#eafaee）。
* ただし**色だけで意味を伝えない**。どのセルにも「あなた」「税理士」の
* 文字バッジを必ず添える（.pd-who）。
*/
/* =================== ① 同じところ・違うところの表 =================== */
.pd-lead { max-width: 860px; margin: 34px auto 13px; text-align: center; }
.pd-lead b { display: block; font-family: 'Mochiy Pop One', 'Zen Maru Gothic', sans-serif; font-weight: 400; font-size: 20px; line-height: 1.6; }
.pd-lead span { font-size: 13px; color: var(--sub); font-weight: 700; }
.pd {
max-width: 860px; margin: 26px auto 0; overflow: hidden;
background: var(--paper); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink);
}
.pd-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 13px 12px;
border-bottom: 2px dashed rgba(18, 60, 43, .18);
}
.pd-row:last-child { border-bottom: 0; }
.pd-k { grid-column: 1 / -1; font-size: 12px; font-weight: 900; color: var(--sub); letter-spacing: .04em; }
.pd-v { border-radius: 13px; padding: 10px 11px; font-size: 12.5px; line-height: 1.7; }
.pd-v small { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 500; color: var(--muted); line-height: 1.6; }
.pd-a { background: #fff6ea; }
.pd-b { background: #eafaee; }
/* 担当のバッジ。色を見分けられなくても、文字だけで誰がやるか分かる。 */
.pd-who {
display: table; width: fit-content; margin-bottom: 6px; padding: 2px 9px;
border: 1.5px solid currentColor; border-radius: 999px; background: #fff;
font-size: 10.5px; font-weight: 900; line-height: 1.5; letter-spacing: .02em;
}
.who-you { color: #9b5d2b; }
.who-pro { color: #176b36; }
.who-opt { color: #5b7a6d; }
.who-inc { color: #a8701c; background: #fff8e6; }
/* 表の中の区切り。ここまでが同じ・ここからが違う、を帯で示す。 */
.pd-sec {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px;
padding: 11px 12px; border-bottom: 2px dashed rgba(18, 60, 43, .18);
font-size: 12px; font-weight: 700; line-height: 1.7; color: var(--ink-2);
}
.pd-sec b {
padding: 2px 11px; border: 2px solid currentColor; border-radius: 999px; background: #fff;
font-size: 11.5px; font-weight: 900; letter-spacing: .02em;
}
/* 「るか。」だけが次の行に残らないよう、行の長さをそろえる
（対応していないブラウザは従来どおり折り返す）。 */
.pd-sec span { text-wrap: balance; }
/* 帯は塗りつぶす。薄い地色だと、行の背景との差が小さくて区切りに見えない。 */
.pd-sec--same { background: var(--leaf-dark); color: #fff; }
.pd-sec--same b { color: #176b36; border-color: #fff; }
.pd-sec--diff { background: var(--sun); color: var(--ink); }
.pd-sec--diff b { color: #9b5d2b; }
/* 共通の行は、左右に分けずに1本でのばす。分かれていない＝同じ。
そのうえで、違いの行（薄い色）より濃く塗って「ここは共通」を1目で分ける。 */
.pd-row--same { background: #e4f5e9; }
.pd-both {
grid-column: 1 / -1; display: grid; gap: 6px; justify-items: start;
background: #d3efdb; border: 2px solid var(--leaf-dark);
}
.pd-both-body { display: flex; align-items: flex-start; gap: 9px; }
.pd-bic { flex: none; font-size: 19px; font-style: normal; line-height: 1.4; }
.who-both { color: #176b36; }
.pd-foot { background: #faf7ec; }
.pd-foot .pd-v { background: none; padding: 2px 0; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pd-note { margin-top: 14px; font-size: 11.5px; }
/* --- 表の頭。金額はここに1回だけ出す --- */
.pd-head { background: #faf7ec; padding-top: 22px; }
.pd-head .pd-k { display: none; }
.pd-col {
position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 13px 9px 11px; background: var(--paper);
border: 2.5px solid var(--ink); border-radius: 16px;
}
.pd-col.pd-b { border-color: var(--leaf-dark); box-shadow: 3px 3px 0 var(--leaf-dark); }
.pd-ic { font-size: 23px; line-height: 1.3; }
.pd-name { font-size: 13.5px; font-weight: 900; line-height: 1.45; }
.pd-role { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.pd-amount { margin-top: 7px; font-size: 11.5px; font-weight: 900; }
.pd-num {
font-family: 'Roboto Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
font-size: 29px; font-weight: 700; letter-spacing: -.03em;
}
.pd-amount small { font-size: 10px; font-weight: 700; color: var(--muted); }
.pd-sub { font-size: 10.5px; font-weight: 700; color: var(--sub); line-height: 1.65; }
.pd-tag {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap;
padding: 3px 9px; background: var(--sun); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
border-radius: 999px; font-size: 9.5px; font-weight: 900; line-height: 1.6;
}
.pd-pick {
/* 指で押せる高さ（このリポジトリの下限は 44px）。 */
display: grid; place-items: center; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 5px;
background: var(--sun); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); border-radius: 999px;
font-size: 11.5px; font-weight: 900; line-height: 1.5; white-space: nowrap;
}
.pd-pick:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
/* いま下の試算に入っているのはどちらか。押した結果が画面の外で起きないようにする。 */
.pd-now { display: none; margin-top: 7px; font-size: 10.5px; font-weight: 900; color: var(--leaf-dark); }
.pd[data-plan-sel="personal"] .pd-a .pd-now,
.pd[data-plan-sel="tax"] .pd-b .pd-now { display: block; }
.pd[data-plan-sel="personal"] .pd-col.pd-a,
.pd[data-plan-sel="tax"] .pd-col.pd-b { background: #fffbea; }
/* =================== ② オプション（一覧＋試算を1つに） =================== */
#opt-pick { scroll-margin-top: 96px; }
body.has-deadline #opt-pick { scroll-margin-top: 150px; }
.opt-intro .sec-title { font-size: 24px; }
.opt-intro .sec-lead { margin-top: 10px; }
.op-step { border: 0; margin-top: 18px; }
.op-step:first-of-type { margin-top: 14px; }
.op-step legend { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 13.5px; font-weight: 900; }
.op-step legend i {
display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
background: var(--ink); color: #fff; font-size: 12px; font-style: normal; font-weight: 900;
}
.op-step .sim-plans { margin: 0; }
.op-step .sim-plans label { padding: 13px 8px; font-size: 13px; }
.op-step .sim-plans label b { display: block; font-size: 14px; }
/* 選ばれた側は黄色で塗るので、金額の文字色を薄いままにしない。 */
.op-step .sim-plans label small { color: var(--ink-2); }
.op-step .sim-plans label.sel small { color: var(--ink); }
.op-step .sim-opts { margin-top: 0; gap: 8px; }
.op-hint { margin: -4px 0 9px; font-size: 12px; line-height: 1.75; color: var(--sub); }
.opt-wrap { display: grid; gap: 0; }
.sim-opt .ic2 { margin-right: 6px; font-style: normal; }
/* 金額の代わりに「個別見積もり」を出す行 */
.sim-opt .pr2.qt { font-size: 11.5px; color: var(--sub); }
/* 個別見積もりの行は、金額が合計に入る行と同じ色で光らせない。 */
.sim-opt.quote:has(input:checked) { border-color: var(--warn); background: #fff8ec; box-shadow: 2px 2px 0 var(--warn); }
/* 物件数。ラベルの下に、選んだときだけ出す。 */
.opt-sub {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
margin: -2px 0 0 12px; padding: 10px 12px 11px;
border: 2px dashed var(--leaf-dark); border-top: 0; border-radius: 0 0 12px 12px; background: #f2fbf4;
}
.opt-sub[hidden] { display: none; }
.opt-count { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 900; }
.opt-count select {
min-height: 44px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px;
background: #fff; font: inherit; font-size: 13px; font-weight: 900; color: var(--ink);
}
.opt-sub small { font-size: 11px; font-weight: 500; color: var(--sub); line-height: 1.6; }
.op-quote {
display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .3);
font-size: 12px; font-weight: 900; color: #ffd98a;
}
.op-quote[hidden] { display: none; }
/* 行そのものが押せる的。指で押せる高さを確保する。 */
.sim-opt { align-items: flex-start; gap: 11px; padding: 12px; accent-color: var(--leaf-dark); }
.sim-opt input { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.sim-opt .nm2 { line-height: 1.55; }
.sim-opt .only2 { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 900; color: var(--sub); }
.sim-opt .ds2 { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; color: var(--muted); line-height: 1.6; }
.sim-opt .pr2 { margin-top: 1px; }
.sim-opt:has(input:checked) { border-color: var(--leaf-dark); background: #f2fbf4; box-shadow: 2px 2px 0 var(--leaf-dark); }
/* 選べない行を薄くしすぎない（読めないと「なぜ選べないか」も伝わらない）。 */
.sim-opt.off { opacity: 1; background: #f6f4ec; border-style: dashed; color: var(--sub); cursor: default; }
.sim-opt.off.inc { opacity: 1; background: #eafaee; border-style: solid; border-color: var(--leaf-dark); box-shadow: none; color: var(--ink); }
.sim-opt.off.inc .pr2 { color: var(--leaf-dark); }
.op-note { margin-top: 10px; text-align: left; font-size: 11px; line-height: 1.8; }
.op-total { margin-top: 20px; }
.op-break { display: block; margin: 2px 0 4px; font-size: 12px; font-weight: 900; color: #cfe4d7; }
@media (min-width: 760px) {
.pd-lead b { font-size: 25px; }
.pd-lead span { font-size: 14px; }
.pd-row { grid-template-columns: 168px 1fr 1fr; gap: 12px; align-items: center; padding: 15px 17px; }
.pd-k { grid-column: auto; font-size: 13px; color: var(--ink-2); }
.pd-head .pd-k { display: block; color: transparent; }
.pd-v { font-size: 13.5px; padding: 12px 14px; }
.pd-both { grid-column: 2 / -1; }
.pd-bic { font-size: 21px; }
.pd-sec { padding: 12px 17px; font-size: 13px; }
.pd-head { align-items: stretch; padding-top: 26px; }
.pd-col { padding: 16px 14px 14px; }
.pd-name { font-size: 17px; }
.pd-role { font-size: 12px; }
.pd-num { font-size: 38px; }
.pd-amount { font-size: 13px; }
.pd-sub { font-size: 11.5px; }
.pd-tag { font-size: 11px; padding: 4px 12px; }
.pd-pick { margin-top: 12px; font-size: 13px; padding: 9px 8px; }
.op-step .sim-plans label { min-height: 60px; }
.pd-foot .pd-v { font-size: 13px; }
.op-step .sim-plans label { padding: 15px 10px; }
}