/* S9 お客さま向け（portal）の見た目 v3.0 — S8 2026-11-10（C案を本番の画面に適用）
   方向（C案）: 会社ロゴの色＝青緑（地球）とオレンジ（輪）。白い地に、角の丸い大きな入力欄。
   押すボタンはオレンジ1色、選んだもの・済んだものは青緑。字はやや大きめ、余白は広め。スマホ最優先。
   佐井村（さいエナジー）は body.co-sai で青系に。スマホのダークモードにも合わせる。
   style= 直書き・インラインJSは使わない（CSP で禁止）。色は :root の変数だけ。
   v2.2 までの控え: 99_アウトプット/S8_UIデザイン/20261110_portal.css_v2.2_控え.css（戻すときはこれに差し替え） */
:root{
  --page:#FFFFFF;      /* 地 */
  --paper:#FFFFFF;     /* 入力欄・札 */
  --soft:#F2F8F8;      /* 薄い面 */
  --ink:#1C2A2D;       /* 文字 */
  --sub:#66777B;       /* 補足 */
  --faint:#A7B4B6;     /* 入力例 */
  --line:#DCE6E7;      /* 区切り線 */
  --bd:#CFDDDF;        /* 入力欄・札の枠 */
  --tl:#0A8F93;        /* 青緑（選んだ・済んだ・リンク） */
  --tl-d:#077276;
  --tl-l:#E2F4F4;
  --tl-ok:#8FD0CF;     /* 入れ終わった欄の枠 */
  --okbg:#FBFEFE;
  --or:#F08A24;        /* オレンジ（押すボタン） */
  --or-d:#D9741A;
  --or-l:#FFF4E8;
  --or-sh:rgba(240,138,36,.30);
  --err:#E0662B;       /* 直してほしい */
  --err-d:#C9541D;
  --err-l:#FFF8F3;
  --err-bd:#F3C3A6;
  --g1:#0A8F93; --g2:#2BAE9A; --g3:#7CC59A;   /* 見出しの帯のグラデーション */
  --barbg:rgba(255,255,255,.96);
  --knob:#FFFFFF; --swoff:#D3DEE0; --radio:#B9C9CB;
  --chart:#BFE3E3;
  --ic-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230A8F93'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-bad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E0662B'/%3E%3Crect x='10.7' y='5.5' width='2.6' height='9' rx='1.3' fill='%23fff'/%3E%3Ccircle cx='12' cy='18' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-done:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2' fill='none' stroke='%230A8F93' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --r:12px; --r-l:16px;
  --ja:"Zen Kaku Gothic New","BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",system-ui,sans-serif;
  color-scheme:light;
}
/* 佐井村（さいエナジー）: 青系 */
body.co-sai{--tl:#1B6FA0;--tl-d:#135A84;--tl-l:#E4F0F8;--soft:#F1F6FA;--line:#D9E4EC;--bd:#CBDAE5;--tl-ok:#9EC3DA;--okbg:#FAFCFE;--g1:#1B6FA0;--g2:#2F7FA6;--g3:#5AA9DA;--chart:#C5DCEB;
  --ic-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231B6FA0'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ic-done:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2' fill='none' stroke='%231B6FA0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* ダークモード（スマホの設定に合わせる） */
@media (prefers-color-scheme:dark){
  :root{--page:#0E1618;--paper:#162123;--soft:#1A2729;--ink:#E4ECED;--sub:#9DB0B3;--faint:#5E7175;--line:#2A3A3D;--bd:#3A4E52;
    --tl:#3FC4C2;--tl-d:#6AD6D2;--tl-l:rgba(63,196,194,.15);--tl-ok:#2F6E6E;--okbg:#14262A;
    --or:#F0862A;--or-d:#FFA65A;--or-l:#2B2014;--or-sh:rgba(240,134,42,.25);--err:#E07A3C;--err-d:#FFB08A;--err-l:#2A1A12;--err-bd:#6B3A22;
    --g1:#0B5E61;--g2:#147A72;--g3:#3E8E6E;--barbg:rgba(22,33,35,.96);--knob:#E4ECED;--swoff:#3A4A4D;--radio:#5E7175;--chart:#24494B;
    --ic-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%233FC4C2'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.9' fill='none' stroke='%23162123' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ic-done:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2' fill='none' stroke='%236AD6D2' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color-scheme:dark}
  body.co-sai{--tl:#5AA9DA;--tl-d:#86C2E8;--tl-l:rgba(90,169,218,.16);--soft:#172330;--line:#2A3A48;--bd:#35485A;--tl-ok:#2F5A78;--okbg:#112434;--g1:#0B3350;--g2:#145680;--g3:#2F7FA6;--chart:#22405A;
    --ic-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%235AA9DA'/%3E%3Cpath d='M7 12.4l3.2 3.2L17 8.9' fill='none' stroke='%23162123' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .mark{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--ja);font-weight:400;font-size:15px;line-height:1.75;letter-spacing:.02em;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--tl-d);text-underline-offset:3px}
h1{font-size:1.6rem;font-weight:700;line-height:1.45;letter-spacing:.02em;margin:.2em 0 .7em}
h1 small,h2 small{font-size:.75rem;color:var(--sub);font-weight:400;margin-left:.5em;letter-spacing:.02em}
h2{font-size:1.08rem;font-weight:700;letter-spacing:.03em;line-height:1.4;margin:0 0 .9em}
h3{font-size:.95rem;font-weight:700;margin:1.3em 0 .5em}
.muted,.hint{color:var(--sub);font-size:.83rem;letter-spacing:.02em}
.lead{color:var(--sub);font-size:.9rem;margin:-.3em 0 1.6em}
.lead b{color:var(--ink)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.03em}
main{max-width:560px;margin:0 auto;padding:6px 20px 56px}

/* 上（白・ロゴ）／テスト環境の帯 */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 20px;background:var(--barbg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top a{text-decoration:none}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem;letter-spacing:.06em;color:var(--tl-d);white-space:nowrap}
.mark{flex:none;display:inline-block;width:28px;height:22px;background:url(img/mark.png) center/contain no-repeat}
.co-sai .mark{width:24px;height:24px;border-radius:50%;background:var(--tl);color:#fff;font-size:13px;font-weight:700;line-height:24px;text-align:center;letter-spacing:0}
.co-sai .mark::before{content:"さ"}
.top nav{display:flex;align-items:center;gap:14px}
.top nav a{font-size:.85rem;color:var(--sub);letter-spacing:.04em;padding:6px 2px}
.envbar{background:var(--or-l);color:#8A5A12;text-align:center;font-size:.75rem;letter-spacing:.04em;padding:5px 12px;line-height:1.5}
@media (prefers-color-scheme:dark){.envbar{color:var(--or-d)}}

/* 見出しの帯（/app のときだけ） */
.pagehero{margin:16px 20px 0}
.pagehero .in{position:relative;overflow:hidden;max-width:520px;margin:0 auto;padding:26px 22px 24px;border-radius:22px;color:#fff;background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 60%,var(--g3) 100%)}
.pagehero .in::after{content:"";position:absolute;right:-50px;top:-60px;width:190px;height:190px;border-radius:50%;border:16px solid rgba(255,255,255,.13)}
.pagehero .en{margin:0;font-size:.7rem;letter-spacing:.24em;font-weight:500;text-transform:uppercase;color:rgba(255,255,255,.82)}
.pagehero .ja{margin:.3em 0 0;font-size:1.5rem;font-weight:700;line-height:1.4}

/* 足もと（薄い面） */
.foot{background:var(--soft);color:var(--sub);padding:28px 20px 40px;font-size:.8rem;line-height:1.9;letter-spacing:.02em}
.foot p{max-width:560px;margin:.3em auto}
.foot b{color:var(--tl-d);font-weight:700}
.foot a{color:var(--sub)}
.foot .muted{color:var(--sub);font-size:.78rem}

/* 面（札） */
.card{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-l);padding:20px;margin:0 0 14px}
.card.alert{background:var(--or-l);border-color:transparent}
.card.alert h2{color:var(--or-d)}
.card.empty{background:var(--soft);border:1.5px dashed var(--bd);color:var(--sub);text-align:center}
.card.done{text-align:center;padding:28px 20px 24px}
.card.done::before{content:"";display:block;width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--tl-l) var(--ic-done) center/32px no-repeat}
.card.done h1{font-size:1.4rem;margin:0 0 .4em}
.card.scroll{overflow-x:auto;padding:0}
/* 申込の入力（フォームの中の面）は地の上にそのまま置く */
form .card{background:transparent;border:0;border-radius:0;padding:0;margin:0 0 30px}
form .card.alert{background:var(--or-l);border-radius:var(--r);padding:16px}
form .card>h2,main>h2{padding-left:12px;border-left:4px solid var(--tl);line-height:1.3;font-size:1.12rem;margin-bottom:16px}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.pagehead h2{margin:0}
a.small{display:inline-flex;align-items:center;min-height:30px;padding:2px 14px;border:1px solid var(--bd);border-radius:999px;font-size:.8rem;color:var(--tl-d);text-decoration:none;background:var(--paper)}

/* はじめの画面 */
.hero{position:relative;overflow:hidden;margin:16px 0 18px;padding:30px 22px 26px;border-radius:22px;color:#fff;background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 60%,var(--g3) 100%)}
.hero::after{content:"";position:absolute;right:-60px;top:-50px;width:200px;height:200px;border-radius:50%;border:16px solid rgba(255,255,255,.12)}
.hero h1{position:relative;font-size:1.75rem;line-height:1.45;margin:0 0 .5em;color:#fff}
.hero .lead{position:relative;color:rgba(255,255,255,.9);margin:0;font-size:.9rem}
.tiles{display:grid;gap:12px;margin:0 0 18px}
.tile{position:relative;display:block;padding:20px 54px 20px 20px;border:1.5px solid var(--line);border-radius:var(--r-l);background:var(--paper);color:var(--ink);text-decoration:none}
.tile b{display:block;font-size:1.08rem;font-weight:700;letter-spacing:.03em}
.tile span{display:block;color:var(--sub);font-size:.83rem;margin-top:2px}
.tile::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-5px;border-top:2px solid var(--tl);border-right:2px solid var(--tl);transform:rotate(45deg)}
.tile.primary{background:var(--or);border-color:var(--or);color:#fff;box-shadow:0 8px 20px var(--or-sh)}
.tile.primary span{color:rgba(255,255,255,.88)}
.tile.primary::after{border-color:#fff}

/* 段（お住まい ─ プラン ─ …）: 棒が伸びる。済んだ段に ✓ */
.steps{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:14px 0 22px;padding:0;border:0}
.steps li{position:relative;padding-top:12px;text-align:center;font-size:.7rem;color:#9AAAAD;letter-spacing:0;line-height:1.4;white-space:nowrap;overflow:hidden}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:3px;background:var(--line);transition:background .4s}
.steps li b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.steps li.done{color:var(--sub)}
.steps li.done::before{background:var(--tl-ok)}
.steps li.done span::after{content:"✓";margin-left:1px;color:var(--tl);font-weight:700}
.steps li.on{color:var(--tl-d);font-weight:700}
.steps li.on::before{background:var(--tl)}
@media (max-width:360px){.steps li.done span::after{content:none}}
@media (prefers-color-scheme:dark){.steps li{color:var(--faint)}}

/* 入力（大きく・角丸・状態がひと目で） */
.f{display:block;position:relative;margin:0 0 22px}
.f .lab{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:700;font-size:.97rem;letter-spacing:.03em;margin-bottom:8px;color:var(--ink);line-height:1.45}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=password],select,textarea{display:block;width:100%;font:inherit;font-size:17px;letter-spacing:.04em;height:56px;padding:0 16px;border:1.5px solid var(--bd);border-radius:var(--r);background-color:var(--paper);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number]{padding-right:48px;background-position:right 14px center;background-size:24px;background-repeat:no-repeat}
textarea{height:auto;min-height:140px;padding:14px 16px;line-height:1.8}
select{background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 22px) 24px,calc(100% - 17px) 24px;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px}
input::placeholder,textarea::placeholder{color:var(--faint);letter-spacing:.03em;font-size:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tl);box-shadow:0 0 0 4px var(--tl-l)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--tl);outline-offset:2px}
input.code{font-size:1.75rem;font-weight:700;letter-spacing:.45em;text-align:center;height:64px;padding:0 0 0 .45em!important;background-image:none!important}
/* 入れ終わった欄（ui.js が .ok を付ける） */
.f.ok input[type=text],.f.ok input[type=email],.f.ok input[type=tel],.f.ok input[type=number]{border-color:var(--tl-ok);background-color:var(--okbg);background-image:var(--ic-ok)}
.f.ok select{border-color:var(--tl-ok);background-color:var(--okbg)}
/* 直してほしい欄 */
.f.bad input,.f.bad select,input[aria-invalid=true]{border:2px solid var(--err);background-color:var(--err-l)}
.f.bad input[type=text],.f.bad input[type=email],.f.bad input[type=tel],.f.bad input[type=number]{background-image:var(--ic-bad)}
.err{display:flex;gap:6px;align-items:flex-start;color:var(--err-d);font-size:.85rem;font-weight:500;margin-top:8px;letter-spacing:.02em;line-height:1.55}
.f .hint{display:block;margin-top:8px;line-height:1.65}
/* 必須は書かない（読み上げには残す）。任意だけ小さな札で */
.req{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.opt{display:inline-block;font-style:normal;font-size:.7rem;font-weight:500;letter-spacing:.04em;line-height:1.6;padding:0 8px;border-radius:999px;background:var(--soft);color:var(--sub);vertical-align:1px}
legend .opt,h2 .opt,.check .opt{margin-left:6px}
.check>.opt{flex:none;margin-top:2px}

/* チェック（四角）・ラジオ（丸）の形をそろえる */
input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--radio);border-radius:7px;background:var(--paper) center/15px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
input[type=checkbox]:checked{background-color:var(--tl);border-color:var(--tl);background-image:var(--ic-check)}
input[type=radio]{-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:2px 0 0;border:2px solid var(--radio);border-radius:50%;background:var(--paper);cursor:pointer;transition:border-width .12s,border-color .12s}
input[type=radio]:checked{border:7px solid var(--tl)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--tl);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 10px;padding:15px 16px;border:1.5px solid var(--bd);border-radius:var(--r);background:var(--paper);font-size:.93rem;line-height:1.65;cursor:pointer;transition:border-color .15s,background-color .15s}
.check:has(input:checked){border-color:var(--tl-ok);background:var(--okbg)}
.check+.hint{display:block;margin:-2px 2px 16px}
.check.bad{border:2px solid var(--err);background:var(--err-l)}
/* 「名義と同じ」「送り先は電気を使う場所」はスイッチ */
.check:has(input[name=cust_same_name]),.check:has(input[name=cust_same_addr]){flex-direction:row-reverse;justify-content:space-between;align-items:center;font-weight:500}
.check:has(input[name=cust_same_name]) input,.check:has(input[name=cust_same_addr]) input{width:52px;height:32px;margin:0;border:0;border-radius:16px;background:radial-gradient(circle at 16px 50%,var(--knob) 12px,transparent 12.6px),var(--swoff);transition:background .2s}
.check:has(input[name=cust_same_name]) input:checked,.check:has(input[name=cust_same_addr]) input:checked{background:radial-gradient(circle at 36px 50%,#fff 12px,transparent 12.6px),var(--tl)}
fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
legend{font-weight:700;font-size:.97rem;letter-spacing:.03em;margin-bottom:10px;padding:0;line-height:1.45}

/* 大きな札（ラジオ） */
.opt-card{position:relative;display:flex;gap:12px;align-items:flex-start;padding:16px;margin:0 0 10px;border:1.5px solid var(--bd);border-radius:14px;background:var(--paper);cursor:pointer;line-height:1.6;transition:border-color .15s,background-color .15s}
.opt-card>span{flex:1;min-width:0}
.opt-card b{font-weight:700;font-size:1.02rem;letter-spacing:.03em}
.opt-card small{color:var(--sub);font-size:.82rem}
.opt-card:has(input:checked){border-color:var(--tl);box-shadow:inset 0 0 0 .5px var(--tl);background:var(--okbg)}
.opt-card:active,.radios label:active,.tile:active{transform:scale(.99)}
fieldset.bad .opt-card{border-color:var(--err)}
/* ご契約者の区分（.radios）: 3つ並びの大きな切り替え */
fieldset.radios{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.radios label{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;margin:0;padding:8px 6px;border:1.5px solid var(--bd);border-radius:var(--r);background:var(--paper);font-size:.95rem;font-weight:500;line-height:1.35;text-align:center;cursor:pointer}
.radios label input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;margin:0}
.radios label:has(input:checked){border:2px solid var(--tl);background:var(--tl-l);color:var(--tl-d);font-weight:700}
.radios label:has(input:checked)::after{content:"";position:absolute;right:7px;top:7px;width:16px;height:16px;border-radius:50%;background:var(--tl) var(--ic-check) center/11px no-repeat}
.radios label:has(input:focus-visible){outline:2px solid var(--tl);outline-offset:2px}

/* たたみ（details.sub） */
details.sub{margin-top:12px;padding-top:4px}
details.sub summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--tl-d);font-size:.9rem;font-weight:500;margin-bottom:12px;list-style:none}
details.sub summary::-webkit-details-marker{display:none}
details.sub summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--tl);border-bottom:2px solid var(--tl);transform:rotate(-45deg);transition:transform .2s}
details.sub[open] summary::before{transform:rotate(45deg)}

/* 写真 */
.file input[type=file]{display:block;width:100%;padding:22px 16px;border:1.5px dashed var(--tl-ok);border-radius:14px;background:var(--soft);color:var(--sub);font:inherit;font-size:.85rem;text-align:center;cursor:pointer}
.file input[type=file]::file-selector-button{font:inherit;font-size:.92rem;font-weight:700;letter-spacing:.04em;border:0;background:var(--tl);color:#fff;border-radius:999px;padding:10px 20px;margin-right:12px;cursor:pointer}
.photos{list-style:none;padding:0;margin:0 0 12px}
.photos li{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--tl-l);color:var(--tl-d);border-radius:var(--r);padding:8px 8px 8px 14px;margin-bottom:8px;font-size:.88rem;font-weight:500}
.photos li .small{min-height:34px;background:var(--paper);border:1px solid var(--bd);color:var(--sub);text-decoration:none}

/* ボタン（押すのはオレンジ1色・丸い） */
button,.btn{font:inherit;font-size:.95rem;font-weight:500;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border:1.5px solid var(--bd);border-radius:999px;background:var(--paper);color:var(--tl-d);text-decoration:none;text-align:center;line-height:1.4;cursor:pointer}
button.primary,.btn.primary{background:var(--or);border-color:var(--or);color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.1em;min-height:56px;box-shadow:0 8px 20px var(--or-sh)}
button.primary:hover,.btn.primary:hover{background:var(--or-d);border-color:var(--or-d)}
button.primary:disabled{background:#F6C79A;border-color:#F6C79A;box-shadow:none;cursor:not-allowed}
@media (prefers-color-scheme:dark){button.primary:disabled{background:#33474A;border-color:#33474A;color:var(--sub)}}
button.primary:active,.btn.primary:active{transform:scale(.98)}
.ghost,.btn.ghost{border-color:transparent;background:transparent;color:var(--sub);text-decoration:underline;font-weight:400}
.small{min-height:36px;padding:4px 14px;font-size:.82rem}
button.link{border:0;background:none;color:var(--sub);text-decoration:underline;min-height:0;padding:4px;font-size:.83rem;font-weight:400;letter-spacing:.02em}
.go{display:flex;flex-direction:column;align-items:center;gap:12px;margin:28px 0 20px}
.go .primary{width:100%;max-width:360px}
.go .btn.ghost{width:auto}
/* フォームの［次へ］は画面の下に固定の帯（残りの項目は ui.js が左に出す） */
form>.go{position:sticky;bottom:0;z-index:15;flex-direction:row-reverse;align-items:center;gap:10px;margin:26px -20px 14px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--barbg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
form>.go .primary{flex:1;width:auto;max-width:none;min-width:0;min-height:54px}
form>.go .btn.ghost,form>.go a.btn{flex:none;min-height:46px;padding:0 16px;border:1.5px solid var(--bd);background:var(--paper);color:var(--sub);text-decoration:none;font-size:.88rem}
form>.go .remain{flex:none;font-size:.75rem;color:var(--sub);line-height:1.35;white-space:nowrap;text-align:left}
form>.go .remain b{display:block;font-size:.95rem;color:var(--or-d)}
form>.go .remain.done b{color:var(--tl)}
form>.go+.hint{display:block;text-align:center;margin:0 0 8px}
.cancel{text-align:center;margin-top:8px}

/* メールのドメイン候補（ui.js） */
.sugg{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:none}
.sugg::-webkit-scrollbar{display:none}
.sugg button{flex:none;min-height:36px;padding:4px 14px;border:1px solid var(--tl-ok);border-radius:999px;background:var(--soft);color:var(--tl-d);font-size:.85rem;font-weight:500;letter-spacing:.02em}

/* お知らせ・状態 */
.flash{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r);padding:12px 14px;margin:12px 0 16px;background:var(--tl-l);color:var(--tl-d);font-size:.9rem;line-height:1.65}
.flash.error{background:var(--err-l);color:var(--err-d);border:1.5px solid var(--err-bd)}
.flash.error::before{content:"";flex:0 0 20px;height:20px;margin-top:2px;background:var(--ic-bad) center/20px no-repeat}
.flash.warn{background:var(--or-l);color:#8A5A12}
@media (prefers-color-scheme:dark){.flash.warn{color:var(--or-d)}}
.kv{display:grid;grid-template-columns:7.5em 1fr;gap:8px 14px;margin:0;font-size:.92rem}
.kv dt{color:var(--sub);font-size:.8rem;padding-top:2px}
.kv dd{margin:0;word-break:break-all}
.kv dd b{font-weight:700;color:var(--tl-d)}
.kv dd.num{white-space:normal}
.sp22{white-space:normal;letter-spacing:.06em}
.sp22>span{white-space:nowrap}
.checklist{margin:0;padding-left:1.2em;font-size:.92rem}
.checklist li{margin:.4em 0}
.doclist{list-style:none;margin:0;padding:0;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;font-size:.9rem}
.doclist li{padding:12px 16px;border-top:1px solid var(--line);line-height:1.6}
.doclist li:first-child{border-top:0}
.doclist a{color:var(--ink);font-weight:500;text-decoration-color:var(--tl-ok)}
.card .doclist{border:0;border-radius:0}
.card .doclist li{padding:10px 0}
.badge{display:inline-block;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.04em;line-height:1.6;border-radius:999px;padding:1px 10px;background:var(--soft);color:var(--sub);vertical-align:1px}
.badge.ok{background:var(--tl-l);color:var(--tl-d)}
.badge.ng{background:var(--err-l);color:var(--err-d)}
.badge.approval{background:var(--or-l);color:var(--or-d)}
.receipt{font-size:.9rem;margin:1em 0;color:var(--sub)}
.receipt b{font-weight:700;font-size:1.9rem;display:block;letter-spacing:.08em;color:var(--tl-d);margin-top:.1em}
.bignum b{font-size:2.5rem;font-weight:700;display:block;line-height:1.25;letter-spacing:.01em}
.bignum span{font-size:.85rem}
.notes{background:var(--soft);border-radius:var(--r);padding:12px 14px;margin:0 0 10px;font-size:.88rem}
.doc p{white-space:pre-wrap}
/* マイページの「最新のご請求」: 青緑の札 */
.card:has(.bignum){border:0;color:#fff;background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 100%)}
.card:has(.bignum) h2{color:rgba(255,255,255,.85);font-size:.88rem;font-weight:500}
.card:has(.bignum) .bignum span,.card:has(.bignum) .kv dt{color:rgba(255,255,255,.8)}
.card:has(.bignum) .kv{padding-top:12px;margin-top:12px;border-top:1px solid rgba(255,255,255,.25)}
.card:has(.bignum) a{color:#fff}
.card:has(.bignum) .badge{background:#fff;color:var(--tl-d)}
.card:has(.bignum) .badge.ng{color:var(--err-d)}
.card:has(.bignum) .badge.approval{color:var(--or-d)}
@media (prefers-color-scheme:dark){.card:has(.bignum) .badge{background:var(--paper)}}

/* マイページの段（.tabs）: 丸い札。スマホではログアウトを上の右へ */
.tabs{display:flex;gap:4px;align-items:center;margin:12px 0 18px;padding:0 0 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;white-space:nowrap;padding:8px 13px;border-radius:999px;color:var(--sub);font-size:.88rem;text-decoration:none;letter-spacing:.02em}
.tabs a.on{background:var(--tl-l);color:var(--tl-d);font-weight:700}
.tabs form{flex:none;margin-left:auto;padding-left:6px}
.tabs button.link{white-space:nowrap}
@media (max-width:480px){
  .tabs{flex-wrap:wrap;overflow:visible}
  .tabs form{order:-1;flex:1 0 100%;text-align:right;padding:0;margin:0 0 2px}
  .tabs a{padding:8px 11px}
}
@media (max-width:360px){.tabs a{padding:7px 8px;font-size:.82rem}}

/* 表 */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-weight:500;font-size:.75rem;letter-spacing:.04em;color:var(--sub);white-space:nowrap}
.tbl .r{text-align:right;white-space:nowrap}
.qlist{list-style:none;padding:0;margin:0 0 12px}
.qlist .q{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:var(--chart)}
.chart .bar.last{fill:var(--or)}
.chart .axis{fill:var(--sub);font-size:10px}
/* 表をスマホでは1件ずつの札にする（td の data-label を見出しに使う） */
@media (max-width:560px){
  .card.scroll:has(.tbl.stack){overflow:visible;padding:0;background:transparent;border:0}
  .tbl.stack thead{display:none}
  .tbl.stack,.tbl.stack tbody,.tbl.stack tr,.tbl.stack td{display:block;width:100%}
  .tbl.stack tr{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 10px}
  .tbl.stack td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:0;padding:4px 0;text-align:right}
  .tbl.stack td::before{content:attr(data-label);color:var(--sub);font-size:.78rem;text-align:left;flex:none}
  .tbl.stack td:first-child{font-weight:700;color:var(--tl-d);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:4px}
}

/* 検針票の見本（v2.1） */
details.slipguide{background:var(--soft);border-radius:14px;margin:0 0 18px;padding:0}
details.slipguide>summary{cursor:pointer;list-style:none;padding:14px 18px;color:var(--tl-d);font-size:.9rem;font-weight:500;display:flex;align-items:center;gap:10px}
details.slipguide>summary::-webkit-details-marker{display:none}
details.slipguide>summary::before{content:"?";flex:0 0 22px;height:22px;border-radius:50%;background:var(--or);color:#fff;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:0}
details.slipguide>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg);transition:transform .2s}
details.slipguide[open]>summary::after{transform:rotate(-135deg)}
details.slipguide>.inner{padding:0 18px 18px}
figure.slipsample{margin:0 0 14px}
figure.slipsample img{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;border-radius:var(--r)}
figure.slipsample figcaption{font-size:.78rem;color:var(--sub);text-align:center;margin-top:6px}
ol.marks{list-style:none;margin:0;padding:0;counter-reset:mk}
ol.marks li{counter-increment:mk;position:relative;padding:8px 0 8px 36px;border-top:1px solid var(--line);font-size:.88rem;line-height:1.7}
ol.marks li:first-child{border-top:0}
ol.marks li::before{content:counter(mk);position:absolute;left:0;top:9px;width:24px;height:24px;border-radius:50%;background:var(--tl);color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:0}
ol.marks li b{display:block;font-weight:700}
ol.marks li small{display:block;color:var(--sub);font-size:.78rem}

/* Turnstile（v2.1 .ts と v2.2 .ts-wrap） */
.ts{margin:0}
.ts .cf-turnstile,.ts-wrap .cf-turnstile{width:100%;max-width:300px;margin:0 auto}
.ts .cf-turnstile iframe,.ts-wrap .cf-turnstile iframe{max-width:100%}
.ts-note{display:none;margin:0 auto 8px;max-width:300px;text-align:center;color:var(--sub);font-size:.8rem;line-height:1.7}
.ts.on{margin:22px 0 0}
.ts.on .ts-note{display:block}
.ts-wrap{margin:20px 0 0}
.ts-wrap .cf-turnstile:empty{display:none}
.ts-wrap .hint{display:block;max-width:320px;margin:8px auto 0;text-align:center;font-size:.78rem;line-height:1.7}

/* 郵便番号の候補: 押すと住所に入る札 */
.postal-cands{display:flex;flex-direction:column;gap:8px;margin:-10px 0 22px}
.postal-cands:empty{display:none}
.postal-cands button,.postal-cands .small.ghost{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 16px;border:0;border-radius:var(--r);background:var(--tl-l);color:var(--tl-d);font-size:.95rem;font-weight:700;letter-spacing:.03em;text-decoration:none;text-align:left}
.postal-cands button::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--tl);border-bottom:2px solid var(--tl);transform:rotate(-45deg)}
.postal-cands button:hover{box-shadow:inset 0 0 0 1.5px var(--tl)}

/* 22桁の表示（[data-spno-view]）: data-state（ok／short／over／bad）で色 */
.hint[data-spno-view]{display:block;margin:-12px 0 22px;padding:9px 14px;border-radius:10px;background:var(--soft);color:var(--ink);font-size:.92rem;line-height:1.7;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.hint[data-spno-view][data-state="ok"]{background:var(--tl-l);color:var(--tl-d)}
.hint[data-spno-view][data-state="short"]{background:var(--or-l)}
.hint[data-spno-view][data-state="over"],.hint[data-spno-view][data-state="bad"]{background:var(--err-l);color:var(--err-d)}

/* 契約の大きさ（[data-capacity]）: 数字だけの短い欄 */
[data-capacity] input{max-width:12em}

/* プランの札の単価（.price）と、次の期間の単価（details.sub） */
.opt-card .price{display:block;margin:12px 0 0 -34px;padding:10px 12px;background:var(--soft);border-radius:10px}
.opt-card .price br,.opt-card details.sub br{display:none}
.opt-card .price>small,.opt-card details.sub>small{display:flex;align-items:baseline;gap:4px;line-height:1.9;color:var(--sub);font-size:.76rem;letter-spacing:0}
.opt-card .price>small:first-child,.opt-card details.sub>summary+small{display:block;font-size:.7rem;letter-spacing:.08em;margin-bottom:2px}
.opt-card .price b.num,.opt-card details.sub b.num{margin-left:auto;font-size:1rem;font-weight:700;color:var(--ink)}
.opt-card details.sub{margin:10px 0 0 -34px;padding:4px 0 0 12px}
.opt-card details.sub summary{font-size:.83rem;margin-bottom:0}
.opt-card details.sub[open] summary{margin-bottom:8px}
.opt-card details.sub[open]{padding:10px 12px;background:var(--soft);border-radius:10px}
.opt-card .badge.ok{background:var(--or);color:#fff;white-space:nowrap}
@media (max-width:359px){.opt-card .price>small,.opt-card details.sub>small{font-size:.7rem;line-height:1.6;padding:2px 0}.opt-card .price b.num,.opt-card details.sub b.num{font-size:.92rem;white-space:nowrap}}
@media (max-width:360px){.radios label{font-size:.85rem;padding:8px 4px}}

/* ②プラン: ［おすすめを見る］（JS が無いとき）・［ほかのプランを見る（N）］・契約のしかた・まとまり */
[data-plan-form] .card>.go{margin:-8px 0 26px;align-items:flex-start}
[data-plan-form] .card>.go .btn.ghost{min-height:44px;border:1.5px solid var(--bd);color:var(--tl-d);text-decoration:none;padding:6px 18px;font-size:.88rem;background:var(--paper)}
fieldset.options>details.sub{margin:4px 0 14px;padding:0}
fieldset.options>details.sub>summary{display:flex;justify-content:center;gap:12px;min-height:52px;margin:0;border:1.5px solid var(--bd);border-radius:14px;color:var(--tl-d);font-size:.93rem;font-weight:700;background:var(--paper)}
fieldset.options>details.sub>summary::before{order:2}
fieldset.options>details.sub[open]>summary{margin-bottom:12px;border-style:dashed}
fieldset.options>details.sub .opt-card:not(:has(input:checked)) .price,
fieldset.options>details.sub .opt-card:not(:has(input:checked)) details.sub{display:none}
fieldset.options>details.sub>.hint:first-of-type{display:block;margin:0 0 10px;text-align:center}
.opt-card:has(.badge.ok):has(input:checked){box-shadow:inset 0 0 0 .5px var(--tl),inset 0 4px 0 var(--or)}
.plan-group{margin:20px 0 8px;padding-left:10px;border-left:3px solid var(--tl);font-size:.8rem;font-weight:700;letter-spacing:.06em;line-height:1.5;color:var(--ink)}
details.sub>.plan-group:first-of-type,details.sub>summary+.plan-group{margin-top:4px}
fieldset.options .opt-card:has(input:checked):has(+fieldset.variant){margin-bottom:0;border-bottom-color:transparent;border-radius:14px 14px 0 0}
fieldset.variant{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:14px 16px 16px;background:var(--paper);border:1.5px solid var(--bd);border-top:1px dashed var(--line);border-radius:0 0 14px 14px}
.opt-card:has(input:checked)+fieldset.variant{border-color:var(--tl);border-top:1px dashed var(--line)}
fieldset.variant legend{float:left;width:100%;margin:0 0 4px;font-size:.8rem}
fieldset.variant label{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:6px 10px;border:1.5px solid var(--bd);border-radius:var(--r);font-size:.88rem;white-space:nowrap;cursor:pointer}
fieldset.variant label:has(input:checked){border:2px solid var(--tl);background:var(--tl-l);color:var(--tl-d);font-weight:700}
fieldset.variant input{margin:0}
fieldset.variant .hint{flex:1 0 100%;margin:2px 0 0;line-height:1.7}

/* ご契約者: 個人だけ・法人だけ・名前の欄（apply.js が hidden を切り替える） */
[data-person-only]{margin:0 0 6px}
[data-name-block]{margin:0 0 4px}
[data-name-block]>.hint:first-child{display:block;margin:0 0 14px}
.corp-only,[data-corp-only]{margin:4px 0 22px;padding:16px 16px 2px;border-radius:14px;background:var(--soft)}
.corp-only .f:last-child,[data-corp-only] .f:last-child{margin-bottom:12px}

/* 「このあとの流れ」（.flowlist）: 丸と縦の線 */
ol.flowlist{list-style:none;margin:0;padding:0;counter-reset:fl}
ol.flowlist li{counter-increment:fl;position:relative;margin:0;padding:0 0 16px 38px;line-height:1.7}
ol.flowlist li:last-child{padding-bottom:0}
ol.flowlist li::before{content:counter(fl);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--tl-l);color:var(--tl-d);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:0}
ol.flowlist li:first-child::before{background:var(--tl);color:#fff;box-shadow:0 0 0 4px var(--tl-l)}
ol.flowlist li:not(:last-child)::after{content:"";position:absolute;left:12px;top:30px;bottom:2px;width:2px;border-radius:1px;background:var(--line)}

@media (min-width:720px){
  body{font-size:15.5px}
  main{padding-top:14px}
  .top{padding:0 40px}
  .tiles{grid-template-columns:1fr 1fr}
  .steps li{font-size:.76rem}
  form>.go{margin-left:0;margin-right:0;border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}