/* ═══════════════════════════════════════════════════════════════
   北海道給湯器 AI無料相談センター — スタイル
   方針：Apple的なミニマル＆上質。余白・洗練タイポ・統一ラインアイコン。
        スマホファースト / 高齢者にも読みやすい大きさ / 高コントラスト
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#ffffff; --bg2:#f5f5f7; --ink:#1d1d1f; --ink2:#4f4f57;
  --line:#cdced4; --line-soft:#e6e6ec;
  --accent:#0071e3; --accent-d:#0a55b3; --accent-soft:#eaf3ff;
  --navy:#0b2238; --warn:#c2410c; --danger:#d70015; --watch:#1a8f4a;
  --radius:18px; --radius-lg:24px; --radius-sm:12px;
  --shadow:0 2px 10px rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.05);
  --shadow-lg:0 10px 40px rgba(0,0,0,.10);
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,"Meiryo",sans-serif;
  font-size:17px;line-height:1.8;color:var(--ink);background:#f5fbff;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
/* スマホ文字組み品質（日本語）：keep-all は折り返せず溢れるため使わない。
   禁則(line-break:strict)＋均等折返し(text-wrap:balance)＋溢れ防止(overflow-wrap)。
   数字・単位の分離だけ .nw / 価格で nowrap して防ぐ。 */
body{line-break:strict}
h1,h2,h3,.section-title,.mission-title,.seo-h1,.seo-h2,.seo-h3,.cost-sub,.ai-explain-head,.section-lead,.reassure-lead{
  text-wrap:balance;overflow-wrap:break-word;word-break:normal}
.cost-price,.st-num,.kpi .n,.nw{white-space:nowrap}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* アイコン共通（ラインアイコン） */
.ic{width:24px;height:24px;display:inline-block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ic-arrow{width:20px;height:20px;stroke-width:2}

/* ボタン */
.btn-primary,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:54px;padding:13px 30px;
  font-size:1.05rem;font-weight:600;border:none;border-radius:980px;cursor:pointer;transition:transform .12s ease,box-shadow .2s,background .15s,opacity .15s;line-height:1.4;letter-spacing:.01em}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn-outline:hover{background:var(--accent-soft)}
.btn-lg{min-height:58px;font-size:1.1rem;padding:15px 34px}

/* ヘッダー */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand-logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(150deg,#3a93ff,#0071e3);display:grid;place-items:center;color:#fff;box-shadow:0 4px 12px rgba(0,113,227,.3)}
.brand-logo .ic{width:21px;height:21px;stroke-width:1.8;fill:rgba(255,255,255,.18)}
.brand-text{line-height:1.2}
.brand-text small{display:block;font-size:.68rem;color:var(--ink2);font-weight:500;letter-spacing:.04em}
.brand-text strong{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.01em}
.header-badge{display:flex;align-items:center;gap:9px;font-size:.74rem;line-height:1.45;color:var(--ink2);max-width:230px}
.header-badge .ic{width:26px;height:26px;color:var(--accent)}
.header-badge b{display:block;color:var(--ink);font-weight:600;font-size:.8rem}

/* ヒーロー */
.hero{background:radial-gradient(140% 120% at 50% -30%,#eaf3ff 0%,#f7fbff 42%,#ffffff 100%);text-align:center;padding:72px 0 80px;border-bottom:1px solid var(--line-soft)}
.hero-eyebrow{font-size:1rem;font-weight:600;color:var(--accent);margin:0 0 14px;letter-spacing:.02em}
.hero-title{font-size:3.2rem;font-weight:800;line-height:1.12;letter-spacing:-.03em;margin:0 0 20px;color:var(--ink)}
.hero-sub{font-size:1.2rem;color:var(--ink2);margin:0 auto 30px;max-width:560px;font-weight:500;line-height:1.7}
.btn-cta{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#fff;font-size:1.2rem;font-weight:600;padding:18px 34px;border-radius:980px;box-shadow:0 10px 30px rgba(0,113,227,.28);transition:transform .12s,box-shadow .2s}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,113,227,.34)}
.btn-cta .ic{width:24px;height:24px}
.hero-features{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0;margin:42px auto 0;max-width:560px}
.hero-features li{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.45;background:rgba(255,255,255,.7);border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px 12px}
.hf-ic{width:50px;height:50px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.hf-ic .ic{width:26px;height:26px}

/* セクション共通 */
.section{padding:76px 0}
.section.alt{background:var(--bg2)}
.section-title{font-size:2.1rem;font-weight:700;text-align:center;margin:0 0 14px;letter-spacing:-.02em;line-height:1.3}
.section-title.light{color:#fff}
.section-lead{text-align:center;color:var(--ink2);margin:0 auto 44px;max-width:600px;font-size:1.08rem;font-weight:500;line-height:1.7}

/* カード内アイコン */
.card-ic{width:54px;height:54px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.card-ic .ic{width:28px;height:28px}

/* フロー */
.flow-grid{display:grid;gap:24px}
.flow-steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.flow-steps li{display:flex;align-items:center;gap:16px;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px 18px;transition:border-color .15s,transform .12s}
.flow-steps li.active{background:var(--accent);border-color:var(--accent)}
.flow-steps li.active .fs-t,.flow-steps li.active .fs-t strong{color:#fff}
.flow-steps li.active .fs-ic{background:rgba(255,255,255,.2);color:#fff}
.fs-ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.fs-ic .ic{width:24px;height:24px}
.fs-t{font-size:.94rem;color:var(--ink2);line-height:1.4}
.fs-t strong{display:block;font-size:1.06rem;color:var(--ink);font-weight:600}

/* チャット */
.chat{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.chat-head{background:var(--ink);color:#fff;font-weight:600;font-size:1.05rem;padding:15px 20px;display:flex;align-items:center;gap:10px}
.chat-head-ic{color:#5ab0ff}
.chat-toolbar{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--bg2);border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.chat-toolbar label{font-weight:600;font-size:.9rem;color:var(--ink)}
#chatRegion{flex:1;min-width:150px;border:1px solid var(--line);border-radius:11px;padding:11px 13px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
#chatRegion:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-progress{padding:15px 20px 4px;border-bottom:1px solid var(--line-soft);background:var(--bg2)}
.chat-progress-bar{height:8px;background:#e3e3e8;border-radius:999px;overflow:hidden}
.chat-progress-bar span{display:block;height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .5s}
.chat-progress-text{font-size:.88rem;font-weight:600;color:var(--accent-d);margin:9px 0 6px}
.chat-log{padding:20px;display:flex;flex-direction:column;gap:13px;min-height:250px;max-height:62vh;overflow-y:auto}
.chat-empty{text-align:center;color:var(--ink2);margin:auto 0;padding:24px 8px;font-size:.98rem}
.chat-empty .ce-ic{width:40px;height:40px;color:var(--accent);display:block;margin:0 auto 10px}
.msg{max-width:86%;padding:12px 16px;border-radius:18px;font-size:1rem;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.msg-user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.msg-ai{align-self:flex-start;background:var(--bg2);color:var(--ink);border-bottom-left-radius:5px}
.msg-ai strong{color:var(--accent-d)}
.msg-images{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.msg-images img{width:120px;max-width:40vw;border-radius:10px}
.typing{display:inline-flex;gap:5px;align-items:center}
.typing span{width:8px;height:8px;background:var(--ink2);border-radius:50%;opacity:.4;animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-attach{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px 0}
.attach-chip{position:relative;width:62px;height:62px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.attach-chip img{width:100%;height:100%;object-fit:cover}
.attach-chip button{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:1rem;line-height:1;cursor:pointer}
.chat-input-row{display:flex;gap:10px;padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-soft);align-items:flex-end}
.btn-photo{flex:0 0 auto;width:48px;height:48px;border:1px solid var(--line);background:#fff;border-radius:13px;cursor:pointer;display:grid;place-items:center;color:var(--ink2);transition:border-color .15s,color .15s}
.btn-photo:hover{border-color:var(--accent);color:var(--accent)}
.btn-photo:disabled{opacity:.5;cursor:default}
#chatInput{flex:1;resize:none;border:1px solid var(--line);border-radius:13px;padding:13px 15px;font-size:1rem;font-family:inherit;line-height:1.6;max-height:140px;color:var(--ink)}
#chatInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn-send{flex:0 0 auto;width:48px;height:48px;border:none;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.btn-send .ic{width:22px;height:22px;stroke-width:2.2}
.btn-send:hover{background:var(--accent-d)}
.btn-send:disabled{background:#b9d6f5;cursor:default}
.chat-note{font-size:.8rem;color:var(--ink2);text-align:center;padding:8px 16px 16px;margin:0}
.cursor{display:inline-block;margin-left:1px;color:var(--accent);animation:caret 1s steps(2) infinite;font-weight:700}
@keyframes caret{50%{opacity:0}}
.quick-wrap{background:transparent!important;border:none!important;padding:0!important;max-width:100%!important}
.quick-replies{display:flex;flex-wrap:wrap;gap:9px}
.quick-btn{background:#fff;border:1px solid var(--accent);color:var(--accent);font-weight:600;border-radius:980px;padding:9px 18px;font-size:.98rem;cursor:pointer;transition:background .12s;max-width:100%;white-space:normal;word-break:break-word;line-height:1.35}
.quick-btn:hover{background:var(--accent-soft)}
/* 診断結果カード */
.result-card{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:18px 20px}
.result-h{margin:0 0 6px;font-size:1.15rem;color:var(--ink);font-weight:700}
.result-meta{font-size:.86rem;color:var(--ink2);margin:0 0 14px}
.result-sec{margin:10px 0;line-height:1.8}
.result-stars{color:var(--warn);letter-spacing:1px}
.result-note{font-size:.82rem;color:var(--ink2);margin:14px 0 0;border-top:1px solid var(--line-soft);padding-top:10px}
.sample-tag{font-size:.72rem;font-weight:600;color:#fff;background:var(--ink2);padding:2px 8px;border-radius:999px}
.pct-block{background:var(--bg2);border-radius:13px;padding:15px;margin:6px 0 14px}
.pct-row{display:flex;align-items:center;gap:10px;margin:9px 0}
.pct-label{flex:0 0 76px;font-weight:600;font-size:.94rem}
.pct-bar{flex:1;height:16px;background:#e3e3e8;border-radius:999px;overflow:hidden}
.pct-fill{display:block;height:100%;border-radius:999px;transition:width .8s}
.pct-repair{background:var(--watch)}.pct-replace{background:var(--warn)}
.pct-val{flex:0 0 46px;text-align:right;font-weight:700;font-size:1.05rem}
.vendor-list{margin:8px 0 0;padding-left:1.1em}.vendor-list li{margin:4px 0}

/* クイックスタート症状・対応設備 */
.quick-lead{text-align:center;color:var(--ink2);font-size:.95rem;margin:42px 0 16px;font-weight:600}
.symptom-grid,.equip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.symptom-card,.equip-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px 12px;font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer;transition:transform .12s,box-shadow .2s,border-color .15s;min-height:118px;justify-content:center;text-align:center}
.section.alt .symptom-card,.section.alt .equip-card{background:#fff}
.symptom-card:hover,.equip-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
.equip-more{text-align:center;margin:30px 0 0}
.equip-more a{font-weight:600;display:inline-flex;align-items:center;gap:4px}

/* 実績 */
.section-stats{background:var(--navy);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:24px 16px;text-align:center}
.st-ic{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#7fc0ff;display:grid;place-items:center;margin:0 auto 12px}
.st-ic .ic{width:26px;height:26px}
.st-label{display:block;font-size:.84rem;color:rgba(255,255,255,.7);margin-bottom:6px}
.st-num{display:block;font-size:2.4rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.st-num small{font-size:.86rem;font-weight:600;margin-left:3px;color:rgba(255,255,255,.85)}
.st-num.small{font-size:1.4rem}
.stats-note{text-align:center;font-size:.78rem;color:rgba(255,255,255,.6);margin:22px 0 0}

/* 緊急度 */
.urgency-grid{display:grid;gap:16px}
.urgency-card{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-top:4px solid}
.urgency-danger{border-color:var(--danger)}.urgency-warn{border-color:var(--warn)}.urgency-watch{border-color:var(--watch)}
.urgency-badge{display:inline-block;color:#fff;font-weight:700;font-size:1rem;padding:5px 18px;border-radius:980px;margin-bottom:12px}
.urgency-danger .urgency-badge{background:var(--danger)}.urgency-warn .urgency-badge{background:var(--warn)}.urgency-watch .urgency-badge{background:var(--watch)}
.urgency-desc{margin:0;color:var(--ink2)}.urgency-desc strong{color:var(--ink)}

/* 補助金 */
.subsidy-inner{text-align:center}
.subsidy-amount{margin:0 0 18px}
.subsidy-amount span{display:block;font-size:.95rem;color:var(--ink2);margin-bottom:4px;font-weight:600}
.subsidy-amount strong{display:block;font-size:3rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1.1}
.subsidy-note{font-size:.82rem;color:var(--ink2);margin:18px auto 0;max-width:520px}

/* シミュレーター */
.sim-controls{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px;max-width:620px;margin:0 auto;display:grid;gap:16px}
.sim-field{display:grid;gap:6px}
.sim-field label{font-weight:600;font-size:.94rem}
.sim-field select,.sim-field input{border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:1rem;font-family:inherit;background:#fff}
.sim-field select:focus,.sim-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sim-controls .btn-primary{width:100%}
.sim-result{max-width:620px;margin:24px auto 0;display:grid;gap:16px}
.sim-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.sim-h{margin:0 0 12px;font-size:1.05rem;color:var(--ink);font-weight:700}
.sim-svg{width:100%;height:auto;display:block}
.sv-lbl{font-size:11px;font-weight:600;fill:var(--ink)}
.sv-val{font-size:11px;font-weight:600;fill:var(--ink2)}
.sv-grid{stroke:#ebebef;stroke-width:1}
.sv-axis{font-size:10px;fill:var(--ink2)}
.sim-legend{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-top:8px}
.sim-leg{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;font-weight:600;color:var(--ink2)}
.sim-leg i{width:14px;height:14px;border-radius:4px;display:inline-block}
.sim-table-wrap{overflow-x:auto}
.sim-table{width:100%;border-collapse:collapse;font-size:.86rem;min-width:480px}
.sim-table th,.sim-table td{border:1px solid var(--line-soft);padding:9px 7px;text-align:center}
.sim-table th{background:var(--bg2);color:var(--ink);font-weight:600}
.sim-table td:first-child,.sim-table th:first-child{text-align:left;white-space:nowrap}
.sim-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.sim-result-msg{background:var(--accent-soft);border-color:#cfe3fb;text-align:center}
.sim-result-msg p{margin:0 0 8px;line-height:1.8}
.sim-result-msg .sim-sub{font-size:.88rem;color:var(--ink2)}
.sim-result-msg .btn-primary{display:inline-flex;margin-top:6px}
.sim-note{font-size:.8rem;color:var(--ink2);text-align:center;margin:0}

/* Jクレジット */
.jcredit-flow{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:12px}
.jc-step{flex:1 1 130px;min-width:130px;max-width:200px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:20px 14px;text-align:center;box-shadow:var(--shadow);position:relative}
.jc-num{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.95rem;margin:0 auto 10px}
.jc-step p{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink2)}
.jc-step strong{color:var(--ink)}
.jc-arrow{align-self:center;color:var(--line);display:grid;place-items:center}
.jc-arrow .ic{width:22px;height:22px;stroke-width:2;color:var(--accent)}

/* メーカー */
.maker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.maker-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 8px;font-size:1rem;font-weight:600;color:var(--ink);cursor:pointer;transition:transform .12s,box-shadow .2s,border-color .15s;min-height:60px}
/* メーカー図鑑（カタログ閲覧。比較サイト化しない） */
.mg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px;margin:6px 0 4px}
.mg-card{background:#fff;border:1px solid #e3e9f3;border-radius:16px;padding:16px 16px 14px;box-shadow:0 1px 2px rgba(20,30,60,.04),0 10px 22px rgba(20,30,60,.05);display:flex;flex-direction:column}
.mg-head{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.mg-logo{height:26px;width:auto;max-width:120px;object-fit:contain}
.mg-wm{font-weight:800;color:#26344f;font-size:1rem;letter-spacing:.01em}
.mg-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.mg-name h3{font-size:1.1rem;font-weight:800;color:#13234d;margin:0;line-height:1.25}
.mg-stars{font-size:.78rem;font-weight:700;color:#5a6b86;display:inline-flex;align-items:center;gap:6px}
.mg-rate{position:relative;display:inline-block;width:52px;height:8px;border-radius:5px;background:#e7edf6;overflow:hidden;vertical-align:middle;flex:none}
.mg-rate i{position:absolute;inset:0;width:calc(var(--r,0) / 5 * 100%);background:linear-gradient(90deg,#ffb14a,#ff8f2e);border-radius:5px 0 0 5px;display:block;font-style:normal}
.mg-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}
.mg-tags span{font-size:.76rem;font-weight:700;color:#1f4e9b;background:#eef4ff;border:1px solid #d8e6fb;border-radius:999px;padding:3px 9px}
.mg-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px dashed #eceff5}
.mg-row:last-of-type{border-bottom:none}
.mg-k{flex:0 0 5.6em;font-weight:800;font-size:.8rem;color:#5a6b86;padding-top:1px}
.mg-row p{margin:0;line-height:1.6;color:#33405c;font-size:.9rem}
.mg-official{display:inline-block;margin-top:11px;align-self:flex-start;font-weight:800;font-size:.9rem;color:#1f4e9b;text-decoration:none;padding:9px 14px;border:1.5px solid #cfe2fb;border-radius:11px;background:#f4f9ff;transition:border-color .15s,background .15s}
.mg-official:hover{border-color:#9fc0ef;background:#eaf3ff}
.maker-models-link{text-align:center;margin:16px 0 4px}
/* AI無料診断：入口は1つ（このCTA）。インラインのチャットは平常時は隠し、オーバーレイで全画面表示する */
.diag-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0 2px}
.diag-cta{min-width:min(420px,100%)}
.diag-cta-sub{font-size:.8rem;color:var(--ink2,#5a6b86)}
#diagnosis .flow-grid > #chat{display:none}
.maker-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent);color:var(--accent)}

/* エラーコード */
.errorcode-form{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:24px;max-width:560px;margin:0 auto;display:grid;gap:16px}
.ec-field{display:grid;gap:6px}.ec-field label{font-weight:600;font-size:.94rem}
.ec-field select,.ec-field input{border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:1rem;font-family:inherit;background:#fff}
.ec-field select:focus,.ec-field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.errorcode-form .btn-primary{width:100%}

/* ── エラーコード検索モーダル（押すと画面が切り替わる＝サービス感。スクロール遷移を廃止） ── */
.ecmodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.ecmodal[hidden]{display:none}
.ecmodal-backdrop{position:absolute;inset:0;background:rgba(11,20,38,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .22s}
.ecmodal-panel{position:relative;width:100%;max-width:540px;max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:22px;box-shadow:0 24px 70px rgba(11,20,38,.34),0 4px 14px rgba(11,20,38,.16);
  overflow:hidden;transform:translateY(14px) scale(.98);opacity:0;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s}
.ecmodal.show .ecmodal-backdrop{opacity:1}
.ecmodal.show .ecmodal-panel{transform:none;opacity:1}
.ecmodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-bottom:1px solid #eef1f6;flex:0 0 auto}
.ecmodal-title{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.06rem;color:#13234d;letter-spacing:-.01em}
.ecmodal-title .ai-logo{width:24px;height:24px}
.ecmodal-x{width:38px;height:38px;border-radius:50%;border:none;background:#f1f4f9;color:#5a6b86;font-size:1.4rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .12s}
.ecmodal-x:hover{background:#e6ebf3}.ecmodal-x:active{transform:scale(.93)}
.ecmodal-body{padding:16px 18px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ecmodal-lead{color:#5a6b86;font-size:.9rem;line-height:1.6;margin:0 0 14px}
/* モーダル内ではフォールバックのカード装飾を外し、パネルに馴染ませる */
.ecmodal .errorcode-form{background:none;border:none;box-shadow:none;padding:0;max-width:none;margin:0}
body.ec-open{overflow:hidden}
@media (max-width:560px){
  .ecmodal{padding:0;align-items:flex-end}
  .ecmodal-panel{max-width:none;max-height:94vh;border-radius:22px 22px 0 0;transform:translateY(28px)}
}
@media (prefers-reduced-motion:reduce){
  .ecmodal-backdrop,.ecmodal-panel{transition:none}
  .ecmodal-panel{transform:none}
}
.errorcode-result{background:var(--bg2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 20px;max-width:560px;margin:22px auto 0;white-space:pre-wrap;line-height:1.8;font-size:1rem}
.errorcode-result strong{color:var(--accent-d)}

/* 北海道凍結 */
.hokkaido-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hokkaido-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px 12px;cursor:pointer;transition:transform .12s,box-shadow .2s,border-color .15s}
/* 凍結：情報パネル（情報提供→相談の順。即AI相談への直行は廃止） */
.hk-info{margin:16px 0 0}
.hk-info-card{background:#fff;border:1px solid #e2e9f4;border-radius:16px;padding:18px 18px 16px;box-shadow:0 10px 28px rgba(31,79,158,.10)}
.hk-info-t{font-size:1.16rem;font-weight:800;color:#13234d;margin:0 0 10px}
.hk-info-sec{margin:0 0 12px}
.hk-info-k{display:block;font-weight:800;font-size:.86rem;color:#1f4e9b;margin:0 0 3px}
.hk-info-sec p{margin:0;line-height:1.7;color:#33405c}
.hk-info-ul{margin:2px 0 0;padding-left:1.15em;line-height:1.7;color:#33405c}
.hk-info-ul li{margin:3px 0}
.hk-info-ng .hk-info-k{color:#c43d33}
.hk-info-ng{background:#fff4f2;border:1px solid #f3d3cd;border-radius:11px;padding:9px 12px}
.hk-info-cta{width:100%;margin-top:6px}
.hokkaido-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
.hk-title{font-weight:600;font-size:1rem;color:var(--ink)}.hk-desc{font-size:.84rem;color:var(--ink2);line-height:1.5}

/* 施工事例 */
.case-grid{display:grid;gap:22px}
.case-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px}
.case-images{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.case-img{flex:1;aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;position:relative;color:var(--ink2)}
.case-img .ic{width:46px;height:46px;stroke-width:1.4}
.case-before{background:var(--bg2)}.case-after{background:var(--accent-soft);color:var(--accent)}
.case-tag{position:absolute;top:8px;left:8px;font-size:.74rem;font-weight:600;color:#fff;padding:3px 10px;border-radius:980px}
.case-before .case-tag{background:var(--ink2)}.case-after .case-tag{background:var(--accent)}
.case-arrow{color:var(--accent);width:24px;height:24px}
.case-title{font-size:1.08rem;margin:0 0 6px;color:var(--ink);font-weight:700}.case-text{margin:0;color:var(--ink2);font-size:.94rem}
.case-note{text-align:center;color:var(--ink2);font-size:.84rem;margin-top:18px}

/* 連絡導線 */
.section-contact{background:var(--navy);color:#fff}
.section-contact .section-lead{color:rgba(255,255,255,.75)}
.contact-inner{text-align:center}
.contact-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin:8px 0 22px}
.contact-actions .btn-lg{width:100%;max-width:380px}
.contact-actions .btn-outline{color:#fff;border-color:rgba(255,255,255,.5)}
.contact-actions .btn-outline:hover{background:rgba(255,255,255,.1)}
.contact-note{font-size:.84rem;color:rgba(255,255,255,.6);max-width:620px;margin:0 auto}


/* 安心バー */
.trust-bar{background:var(--bg);border-top:1px solid var(--line-soft);padding:30px 0}
.trust-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;padding:0;margin:0;font-weight:600;color:var(--ink);font-size:.96rem}
.trust-list li{display:inline-flex;align-items:center;gap:8px}
.trust-list .ic{width:22px;height:22px;color:var(--watch)}

/* フッター */
.site-footer{background:#12335c;color:#aebfe0;padding:48px 0 96px;text-align:center}
.footer-brand{font-size:1.1rem;font-weight:700;color:#f5f5f7;margin:0 0 12px;display:inline-flex;align-items:center;gap:8px}
.footer-brand .ic{width:20px;height:20px;color:#5ab0ff}
.footer-text{font-size:.92rem;max-width:560px;margin:0 auto 14px;line-height:1.8}
.footer-company{font-size:.9rem;color:#c7c7cc;margin:0 0 6px;font-weight:600}
.footer-small{font-size:.78rem;color:#6e6e73;margin:0}

/* 追従CTA */
.floating-cta{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-weight:600;padding:13px 22px;border-radius:980px;box-shadow:0 8px 24px rgba(0,113,227,.4);font-size:1rem;transition:transform .12s,opacity .2s}
.floating-cta .ic{width:20px;height:20px}
.floating-cta:hover{transform:translateY(-2px)}
.floating-cta.hide{opacity:0;pointer-events:none;transform:translateY(20px)}

/* ═══ モバイル下部固定ナビ（検討支援型ポータル・常時表示） ═══ */
.botnav{display:none}
.menusheet{display:none}
@media(max-width:759px){
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(15,30,60,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)) 4px}
  .botnav-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    background:none;border:none;font-family:inherit;color:var(--ink2);cursor:pointer;padding:5px 2px;border-radius:12px;-webkit-tap-highlight-color:transparent}
  .botnav-item .bi{display:flex;align-items:center;justify-content:center;height:24px}
  .botnav-item .bi .ic{width:23px;height:23px;stroke-width:1.6}
  .botnav-item .bl{font-size:.66rem;font-weight:600;letter-spacing:.01em}
  .botnav-item.is-accent{color:var(--accent)}
  .botnav-item.is-accent .bi .ic{stroke-width:1.9}
  .botnav-item.active{color:var(--accent-d)}
  .botnav-item.is-accent .bl{font-weight:700}
  /* 下部ナビ分の余白＆フローティングCTAはナビと重複するため非表示 */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .floating-cta{display:none}
  /* メニュー（スライド／モーダル） */
  .menusheet{display:block;position:fixed;inset:0;z-index:90}
  .menusheet[hidden]{display:none}
  .menusheet-backdrop{position:absolute;inset:0;background:rgba(15,25,45,.42);opacity:0;transition:opacity .22s}
  .menusheet-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;
    padding:14px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(15,30,60,.2);
    transform:translateY(102%);transition:transform .26s cubic-bezier(.22,1,.36,1);max-height:84vh;overflow:auto}
  .menusheet.open .menusheet-backdrop{opacity:1}
  .menusheet.open .menusheet-panel{transform:translateY(0)}
  .menusheet-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1.05rem;margin:2px 2px 12px}
  .menusheet-x{background:var(--bg2);border:none;width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1;color:var(--ink2);cursor:pointer}
  .menusheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .menusheet-grid a{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line-soft);border-radius:13px;
    padding:13px 12px;font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.3}
  .menusheet-grid a:active{background:var(--accent-soft)}
  .menusheet-note{font-size:.78rem;color:var(--ink2);line-height:1.6;margin:14px 4px 0}
}

/* SEO静的ページ */
.seo-cta-mini{font-size:.85rem;font-weight:600;color:#fff;background:var(--accent);padding:9px 16px;border-radius:980px}
.seo-wrap{padding:28px 0 10px;max-width:840px}
/* 応急処置/SEOページ：前のページへ戻る（パンくず付近・スマホで押しやすい） */
.seo-backrow{margin:4px 0 10px}
.seo-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border:1px solid #d8e0ee;border-radius:999px;background:#fff;color:#2f4a7a;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;line-height:1}
.seo-back:hover{background:#f3f7ff;border-color:#bcd0f0}
.seo-back:active{transform:translateY(1px)}
.seo-crumb{font-size:.82rem;color:var(--ink2);margin:0 0 18px}
.seo-h1{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1.35;margin:0 0 18px}
.seo-h2{font-size:1.25rem;font-weight:700;margin:30px 0 10px}
.seo-h3{font-size:1.05rem;font-weight:600;margin:18px 0 6px}
.seo-wrap p{line-height:1.9}
.seo-ul{padding-left:1.2em;line-height:1.9}.seo-ul li{margin:4px 0}
.seo-price{font-size:1.7rem;font-weight:800;color:var(--accent)}
.seo-price small{font-size:.8rem;font-weight:500;color:var(--ink2);margin-left:6px}
.seo-note{font-size:.9rem;color:var(--ink2);background:var(--bg2);border-radius:12px;padding:14px 16px}
.seo-tags{display:flex;flex-wrap:wrap;gap:10px}
.seo-tags a{background:#fff;border:1px solid var(--line);border-radius:980px;padding:9px 17px;font-weight:600;font-size:.94rem;transition:border-color .15s}
.seo-tags a:hover{border-color:var(--accent);color:var(--accent)}
.seo-cta-box{background:var(--bg2);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:26px;text-align:center;margin:34px 0 10px}
.seo-cta-box .btn-primary{display:inline-flex;margin:10px 0}
.seo-links{font-size:.9rem;margin-top:8px}
.seo-answer{background:var(--accent-soft);border:1px solid #cfe3fb;border-radius:14px;padding:14px 16px;line-height:1.8}
.seo-byline{font-size:.84rem;color:var(--ink2);margin:-6px 0 16px}
.seo-lead{font-size:1.02rem;line-height:1.8;color:var(--ink);margin:0 0 18px}

/* 施工事例 */
.case-figure{margin:0 0 18px}
.case-figure img{width:100%;border-radius:16px;display:block}
.case-figure figcaption{font-size:.82rem;color:var(--ink2);margin-top:6px}

/* Before/After スライダー（施工前⇄施工後） */
.ba-slider{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:#0e1526;touch-action:none;cursor:ew-resize;user-select:none}
.ba-img{position:absolute;inset:0}
.ba-img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba-before{clip-path:inset(0 50% 0 0)}
.ba-label{position:absolute;top:10px;font-size:.74rem;font-weight:700;color:#fff;background:rgba(8,18,40,.6);padding:4px 10px;border-radius:980px;pointer-events:none}
.ba-label-before{left:10px}
.ba-label-after{right:10px}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-1.5px);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:var(--accent-d);display:grid;place-items:center;font-size:1rem;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible .ba-knob{outline:2px solid var(--accent);outline-offset:2px}
.ba-dragging{cursor:grabbing}
.case-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:6px 0 10px}
.case-card{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;transition:border-color .15s,transform .12s}
.case-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.case-thumb{flex:0 0 86px;width:86px;height:64px;border-radius:10px;overflow:hidden;background:var(--bg2);display:grid;place-items:center;color:var(--ink2);font-size:.74rem;font-weight:600}
.case-thumb img{width:100%;height:100%;object-fit:cover}
.case-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.case-meta strong{font-size:1rem}
.case-meta span{font-size:.86rem;color:var(--ink)}
.case-meta .case-sub{font-size:.78rem;color:var(--ink2)}
.case-faq .fa-item{border:1px solid var(--line);border-radius:12px;padding:4px 14px;margin:8px 0}
.case-faq summary{font-weight:600;cursor:pointer;padding:10px 0;font-size:.96rem}
.case-faq .fa-body{padding:0 0 10px;line-height:1.8}

/* ═══ 折りたたみLP化 ＋ 並び替え ＋ 離脱防止導線 ═══ */
/* 汎用 main：flex縦積み（全ページ共通。<main>直下のマージン相殺防止。全国版/大阪版/seo配下1,300超ページが依存＝削除禁止） */
main{display:flex;flex-direction:column}
/* セクションの表示順は order で制御（DOMは触らずスクロール導線を最適化） */
main#top{display:flex;flex-direction:column}
/* お客様の思考順：①症状②原因③修理④交換⑤費用⑥補助金⑦見積⑧他の方法⑨機種⑩回収 */
/* ── 北海道特化AI無料相談サービスの導線：迷わず診断へ。同じ機能の入口は複数作らない ── */
/* 2026-07-17: #mission/#can/.hero-strip/#firstaid-now/#grp-more/#safety-guide/#grp-trust/#voices は
   現行HTMLに存在しない旧セクション向けの死んだルールだったため削除（現存セレクタの order 値・並び順は無変更）。 */
main#top > .hk-now{order:2}
main#top > .reassure-band{order:3}
/* ② AI無料診断（写真1枚で無料診断） */
main#top > #diagnosis{order:6}
/* ③ 費用・補助金 */
main#top > #cost{order:7}
main#top > #subsidy{order:8}
/* ④ もっと詳しく知りたい方へ */
main#top > #plan-cta{order:9}  /* 「計画的に交換」CTAは じっくり検討エリア（grp-more直後・緊急導線より下）へ */
main#top > #makers{order:10}
main#top > #hokkaido{order:11}
main#top > #equip{order:13}
/* ⑤ 安心して利用する */
main#top > #promise{order:16}
/* フッター手前 */
main#top > #stats{order:17}
main#top > #contact{order:18}
main#top > #faq{order:19}
/* AI相談へ統合：独立表示は廃止（機能・データ・AIロジックは保持。DOMは残しdisplay:noneのみ）
   ・見積診断→AI相談中に見積アップロード/比較/妥当性チェック
   ・機種えらび/回収シミュ→交換推奨時にAIがチャット内で実施
   ・緊急度→診断結果で表示／施工事例→施工会社サイト化しない */
main#top > #estimate,
main#top > #successor,
main#top > #urgency,
main#top > #cases-teaser{display:none !important}
/* 費用対効果シミュは検討客向けに復活し、補助金(order 8)の直下に配置 */
main#top > #simulator{order:8}
/* 安全ガイドブックへの導線バナー（情報ページへ・売り込みではない） */
.section-safetylink{padding-top:6px;padding-bottom:6px}
.safety-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#12325c,#1b4b86);color:#eaf2ff;
  border-radius:16px;padding:16px 18px;text-decoration:none;box-shadow:0 10px 26px rgba(18,50,92,.22);transition:transform .14s,box-shadow .2s}
.safety-banner:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(18,50,92,.28)}
.safety-banner-ic{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;background:rgba(255,255,255,.16);border-radius:12px;color:#dcebff}
.safety-banner-ic svg{width:24px;height:24px}
.safety-banner-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.safety-banner-tx strong{font-size:1.04rem;font-weight:800;color:#fff;line-height:1.3}
.safety-banner-tx span{font-size:.82rem;color:#cfe0f7;line-height:1.5}
.safety-banner-chev{flex:0 0 auto;font-size:1.5rem;color:#9fc0ef;font-weight:700}

/* 「もっと詳しく」「安心して利用する」グループ見出し */
/* 下部の情報設計：曖昧なグレー2見出しを廃止し、親見出し＋2小分類に整理 */
.lp-group-head{margin:40px auto 4px;max-width:1100px;padding:0 20px;width:100%;box-sizing:border-box}
.lp-group-title{font-size:1.3rem;font-weight:800;color:#17223f;margin:0 0 6px;line-height:1.45}
.lp-group-sub{font-size:.92rem;color:#566179;line-height:1.7;margin:0 0 4px;max-width:760px}
.lp-sub-label{margin:30px auto 2px;max-width:1100px;padding:0 20px;width:100%;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;font-size:1.04rem;font-weight:800;color:#3a4674;letter-spacing:.02em}
.lp-sub-label::before{content:"";flex:0 0 auto;width:5px;height:19px;border-radius:3px;background:linear-gradient(180deg,#bcaef0,#9cc0f5)}
.lp-sub-label::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,#dde2f0,rgba(221,226,240,0))}
.lp-group-head .lp-sub-label--first{margin:14px auto 2px}

/* 2026-07-17: セクション単位の折りたたみ（collapse-head/collapse-body/collapse-ind/is-open）は
   public/js/collapse.js から撤去済み＝これらのクラスはどのJSからも生成されなくなったため削除。
   暗いセクションの見出し色は .section-title.light（既存・汎用）が個別に担うため影響なし。 */

/* 離脱防止：各セクション末尾の「次に進む」導線 */
.section-next{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:28px auto 0;padding-top:18px;border-top:1px dashed var(--line);max-width:680px}
.section-next-lead{width:100%;text-align:center;font-size:.8rem;color:var(--ink2);font-weight:600;margin-bottom:2px}
.section-next-btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-d);border:1px solid #cfe3fb;border-radius:980px;padding:9px 15px;font-size:.88rem;font-weight:600;transition:background .15s,transform .12s}
.section-next-btn .ic{width:18px;height:18px;flex:0 0 auto}
.section-next-btn:hover{background:#dbecff;transform:translateY(-1px)}
.section-stats .section-next,.section-contact .section-next{border-top-color:rgba(255,255,255,.2)}
.section-stats .section-next-lead,.section-contact .section-next-lead{color:rgba(255,255,255,.75)}

/* 施工事例ティーザー */
.cases-teaser-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 14px}
.ct-card{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;transition:border-color .15s,transform .12s}
.ct-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.ct-region{font-weight:700}
.ct-row{font-size:.9rem;color:var(--ink)}
.ct-sub{font-size:.78rem;color:var(--ink2)}
.cases-teaser-more{text-align:center;margin-top:4px}
.cases-teaser-empty,.muted-note{color:var(--ink2);font-size:.9rem;text-align:center}

/* ファーストビュー直下の安心メッセージ帯 */
.reassure-band{background:linear-gradient(180deg,#f0f7ff,#fff);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:20px 0}
.reassure-lead{font-size:1.08rem;line-height:1.6;margin:0 0 6px;color:var(--ink)}
.reassure-sub{font-size:.96rem;line-height:1.7;color:var(--ink2);margin:0}
.reassure-sub b{color:var(--accent-d)}

/* AI診断の価値を明示するブロック */
.ai-explain{background:var(--accent-soft);border:1px solid #cfe3fb;border-radius:16px;padding:18px 20px;margin:6px 0 18px}
.ai-explain-head{font-weight:700;font-size:1.05rem;margin:0 0 10px;color:var(--ink)}
.ai-explain-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.ai-explain-list li{position:relative;padding-left:24px;font-size:.98rem;line-height:1.5}
.ai-explain-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:800}
.ai-explain-note{font-size:.9rem;color:var(--ink2);margin:12px 0 0}

/* 交換費用の目安 */
.cost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 16px}
.cost-card{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:16px 12px;text-align:center;box-shadow:var(--shadow)}
.cost-name{display:block;font-weight:700;font-size:.96rem;margin-bottom:6px}
.cost-price{display:block;font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:-.01em}
.cost-price small{font-size:.78rem;font-weight:600;color:var(--ink2);margin-left:2px}
.cost-note{display:block;font-size:.74rem;color:var(--ink2);margin-top:6px;line-height:1.4}
.cost-sub{font-size:1.02rem;font-weight:700;margin:18px 0 10px;color:var(--ink)}
.cost-var{display:block;font-size:.74rem;color:var(--ink2);margin-top:6px;line-height:1.4}
.cost-grid-switch{grid-template-columns:repeat(2,1fr)}
.cost-card-switch{background:var(--accent-soft);border-color:#cfe3fb}
.cost-card-switch .cost-name{color:var(--accent-d)}
.cost-region{background:var(--bg2);border:1px solid var(--line-soft);border-radius:12px;padding:12px 15px;font-size:.9rem;line-height:1.7;margin:14px 0 4px}
.cost-cta{text-align:center;margin:14px 0 8px}.cost-cta .btn-primary{display:inline-flex}
.cost-links{text-align:center;font-size:.92rem;margin:6px 0}
.cost-disclaim{font-size:.82rem;color:var(--ink2);text-align:center;margin:8px 0 0;line-height:1.6}

/* 診断後の次の一手（CVR導線） */
.ds-next{background:linear-gradient(120deg,#eef5ff,#fff);border:1px solid #cfe3fb}
.ds-next-grid{display:flex;flex-direction:column;gap:9px;margin:10px 0 6px}
.ds-next-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;font-weight:600;font-size:.98rem;color:var(--ink);transition:border-color .15s,transform .12s}
.ds-next-btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.ds-next-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.ds-next-btn.primary:hover{background:var(--accent-d)}
@media(min-width:560px){.ds-next-grid{flex-direction:row}.ds-next-btn{flex:1}}

/* 補助金：市町村セレクタ＆一覧 */
.subsidy-amount strong{font-size:1.7rem;line-height:1.3;letter-spacing:-.01em}
.subsidy-amount strong i{font-size:.7em;font-style:normal;color:var(--ink2);margin:0 .25em}
.subsidy-amount small{display:block;font-size:.8rem;font-weight:600;color:var(--ink2);margin-top:6px;letter-spacing:0;line-height:1.5}
/* 見積診断：評価の重み */
.est-axis{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;max-width:620px;margin:10px auto 0;font-size:.82rem;color:var(--ink2)}
.est-axis span{background:var(--accent-soft);color:var(--accent-d);border:1px solid #cfe3fb;border-radius:980px;padding:4px 10px;font-weight:700}
.est-axis b{width:100%;text-align:center;color:var(--ink);font-size:.84rem;margin-top:4px}
.sub-picker{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;max-width:560px;margin:6px auto 16px;text-align:left}
.sub-picker label{display:block;font-size:.85rem;font-weight:600;color:var(--ink2);margin-bottom:6px}
.sub-picker select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
.sub-pick-card{margin-top:14px;background:var(--bg2);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px;line-height:1.75;font-size:.94rem}
.sub-pick-h{font-weight:700;font-size:1.02rem;margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sub-pick-base{background:var(--accent-soft);border-radius:10px;padding:8px 12px;font-size:.88rem;margin:8px 0}
.sub-pick-foot{font-size:.9rem;margin:6px 0 4px}
.sub-pick-note,.sub-amt{font-size:.82rem;color:var(--ink2)}
.sub-amt{font-weight:700;color:var(--accent-d)}
.sub-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:980px;white-space:nowrap}
.sub-yes{background:#e3f6ec;color:#1c7a4a}
.sub-none{background:#eef1f6;color:#6b7a90}
.sub-check{background:#fdf3e0;color:#9a6a16}
/* /hojokin ページ */
.sub-card{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;margin:0 0 12px;line-height:1.75}
.sub-card-h{font-weight:700;font-size:1.05rem;margin:0 0 6px}
.sub-card .sub-amount{font-weight:700;color:var(--accent-d);margin:6px 0;overflow-wrap:anywhere}
.sub-card-foot{font-size:.86rem;margin:6px 0 0}
.sub-card-foot .sub-note{display:block;color:var(--ink2);font-size:.8rem;margin-top:3px}
.sub-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft);border-radius:12px;margin:6px 0}
.sub-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px;background:#fff}
.sub-table th,.sub-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.5}
.sub-table thead th{background:var(--bg2);font-size:.8rem;color:var(--ink2);white-space:nowrap}
.sub-table tbody th{font-weight:700;white-space:nowrap}

/* 私たちの約束（2026-07-17：セクション単位の折り畳み撤去で顕在化した「狭い1列が左に寄る」崩れを修正。
   PC/タブレットは2列×2段でコンテナ幅いっぱいに中央配置、スマホ(680px以下)は1列のまま。文言は無変更）。 */
.promise-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px;width:100%}
@media(min-width:681px){
  .promise-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:22px}
}
.promise-list li{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:24px 26px}
/* 2026-07-27：4項目のアイコンを撤去し見出し文字だけにしたため .promise-ic 系の定義を削除。
   .promise-head は見出し1個だけを包む器として残す（gap は子が1つなので効かない）。 */
.promise-head{display:flex;align-items:center}
.promise-title{font-size:1.18rem;font-weight:800;color:var(--ink);line-height:1.3;letter-spacing:-.01em;white-space:nowrap}
.promise-desc{margin:10px 0 0;font-size:.94rem;line-height:1.6;color:var(--ink2)}
.promise-foot{margin:16px 0 0;font-size:.96rem;color:var(--ink2)}
#promise .section-title{font-size:clamp(30px,4vw + 18px,48px)}

.mission-vision{font-size:.84rem;color:var(--ink2);margin:16px 0 0;letter-spacing:.02em}

/* 症状から探す（症状検索） */
.sx-search{margin:6px 0 18px}
.sym-grid{display:flex;flex-wrap:wrap;gap:8px}
.sym-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);border-radius:980px;padding:10px 16px;font-size:.96rem;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s}
.sym-chip:hover{border-color:var(--accent);color:var(--accent)}
.sym-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sym-chip-ic{display:flex;align-items:center}
.sym-chip-ic .ic{width:18px;height:18px}
.sym-card-h .ic{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.menusheet-grid a .ic{width:19px;height:19px;color:var(--accent);flex:0 0 auto}
.ai-explain-head .ic{width:20px;height:20px;color:var(--accent);vertical-align:-4px;margin-right:7px}
.ds-next-btn .ic{width:19px;height:19px;flex:0 0 auto}
.sym-result{margin-top:14px}
.sym-card{background:#fff;border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow);line-height:1.8}
.sym-card-h{font-weight:700;font-size:1.08rem;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.sym-card p{margin:0 0 8px}
.sym-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sym-act{display:inline-flex;align-items:center;background:var(--accent-soft);color:var(--accent-d);border:1px solid #cfe3fb;border-radius:980px;padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit}
.sym-act-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.sym-act:hover{filter:brightness(.97)}
.sym-card-note{font-size:.8rem;color:var(--ink2);margin:10px 0 0}

/* ── 上品な質感（視認性を損なわない範囲で：ガラス感＋奥行き） ── */
.sym-chip{background:rgba(255,255,255,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid rgba(20,20,20,.12);box-shadow:0 1px 2px rgba(20,20,20,.04),0 8px 20px rgba(20,20,20,.04);
  transition:transform .16s var(--ease,ease),box-shadow .2s,border-color .15s,background .15s}
.sym-chip:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,20,20,.05),0 14px 30px rgba(20,20,20,.1);border-color:rgba(20,20,20,.22)}
.sym-chip.on{box-shadow:0 10px 26px rgba(20,20,20,.18)}
.sym-card{animation:symIn .28s var(--ease,ease)}
@keyframes symIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 主要カードの押下・浮きを統一（Apple的な軽い奥行き） */
.cost-card,.ct-card,.maker-card,.gear-card{transition:transform .16s var(--ease,ease),box-shadow .2s,border-color .15s}
.cost-card:hover,.ct-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-primary:active,.btn-cta:active,.sym-chip:active,.botnav-item:active{transform:translateY(1px) scale(.99)}
@media(prefers-reduced-motion:reduce){.sym-card,.sym-chip,.cost-card,.ct-card{animation:none;transition:none}}

/* メーカー比較表 */
.maker-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-soft);border-radius:14px;margin:6px 0 10px}
.maker-compare{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px;background:#fff}
.maker-compare th,.maker-compare td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;line-height:1.6}
.maker-compare thead th{background:var(--bg2);font-size:.82rem;color:var(--ink2);white-space:nowrap;position:sticky;top:0}
.maker-compare tbody th{font-weight:700;white-space:nowrap;color:var(--ink)}
.maker-compare tbody tr:last-child th,.maker-compare tbody tr:last-child td{border-bottom:none}
.maker-compare-note{font-size:.9rem;color:var(--ink2);margin:4px 0 14px;line-height:1.7}
.maker-sub{font-size:1rem;font-weight:700;margin:14px 0 10px}

/* AI見積チェック */
.est-box{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px;max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.est-upload{display:block}
.est-upload-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent-d);border:1.5px dashed var(--accent);border-radius:14px;padding:14px 18px;font-weight:600;cursor:pointer;width:100%;justify-content:center}
.est-upload-btn .ic{width:20px;height:20px}
.est-preview{display:flex;flex-wrap:wrap;gap:8px}
.est-preview:empty{display:none}
.est-chip{position:relative;width:72px;height:72px;border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.est-chip img{width:100%;height:100%;object-fit:cover}
.est-chip button{position:absolute;top:2px;right:2px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:1rem;line-height:1;cursor:pointer}
.est-box textarea{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:1rem;font-family:inherit;resize:vertical;color:var(--ink)}
.est-hint{font-size:.8rem;color:var(--ink2);margin:0}
.est-result{background:var(--bg2);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 20px;max-width:620px;margin:20px auto 0;line-height:1.85;font-size:1rem}
.est-result h2,.est-result h3{font-size:1.05rem;margin:14px 0 6px}
.est-msg{color:var(--ink2);margin:0}
.est-foot{margin-top:16px;text-align:center}.est-foot .btn-primary{display:inline-flex}
.est-sample{max-width:620px;margin:14px auto 0;border:1px solid var(--line-soft);border-radius:12px;background:var(--bg2)}
.est-sample summary{cursor:pointer;padding:13px 16px;font-weight:600;font-size:.92rem;color:var(--accent-d)}
.est-sample-body{padding:0 16px 14px}
.est-sample-note{font-size:.82rem;color:var(--ink2);margin:0 0 10px}
.est-sample-card{background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:14px 16px;font-size:.9rem;line-height:1.75}
.est-sample-card p{margin:0 0 10px}.est-sample-card p:last-child{margin:0}

@media(max-width:759px){
  .section-next-btn{font-size:.84rem;padding:8px 13px}
  .cases-teaser-list{grid-template-columns:1fr}
  .ai-explain-list{grid-template-columns:1fr}
  .cost-grid{grid-template-columns:1fr 1fr}
  .reassure-lead{font-size:1rem}
}
/* 極狭幅（〜380px）：費用カードの2列が窮屈で横はみ出しするため1列へ（文字を小さくして誤魔化さない） */
@media(max-width:380px){
  .cost-grid,.cost-grid-switch{grid-template-columns:1fr}
}
/* レスポンシブ */
@media(min-width:760px){
  body{font-size:18px}
  .hero{padding:96px 0 100px}
  .hero-title{font-size:4.2rem}
  .hero-features{grid-template-columns:repeat(4,1fr);max-width:760px;margin-top:52px}
  .section{padding:92px 0}
  .section-title{font-size:2.6rem}
  .flow-grid{grid-template-columns:.8fr 1.2fr;align-items:start;gap:32px}
  .symptom-grid{grid-template-columns:repeat(3,1fr)}
  .equip-grid{grid-template-columns:repeat(4,1fr)}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .urgency-grid{grid-template-columns:repeat(3,1fr)}
  .maker-grid{grid-template-columns:repeat(6,1fr)}
  .hokkaido-grid{grid-template-columns:repeat(3,1fr)}
  .case-grid{grid-template-columns:repeat(3,1fr)}
  .contact-actions{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .contact-actions .btn-lg{width:auto}
  .floating-cta{display:none}
}
@media(min-width:480px) and (max-width:759px){
  .equip-grid{grid-template-columns:repeat(3,1fr)}
  .maker-grid{grid-template-columns:repeat(4,1fr)}
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ═══ デザイン磨き込み（Apple風ポリッシュ） ═══ */
/* ヒーロー：奥行きのあるグラデ＋静かな入場アニメ */
.hero{background:
  radial-gradient(58% 48% at 50% -6%, #d9eaff 0%, transparent 62%),
  radial-gradient(42% 42% at 86% 8%, #eef5ff 0%, transparent 72%),
  linear-gradient(180deg,#f4f9ff 0%,#ffffff 78%)}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-eyebrow,.hero-title,.hero-sub,.btn-cta,.hero-features{animation:heroIn .7s cubic-bezier(.22,1,.36,1) both}
.hero-title{animation-delay:.05s}.hero-sub{animation-delay:.12s}.btn-cta{animation-delay:.18s}.hero-features{animation-delay:.26s}
/* スクロールで浮き上がり */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
/* 上質なホバー・押下 */
.symptom-card,.equip-card,.maker-card,.hokkaido-card,.case-card,.stat-card,.jc-step,.hf-ic,.card-ic{transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .18s ease}
.symptom-card:hover .card-ic,.equip-card:hover .card-ic{transform:scale(1.06)}
.btn-primary:active,.btn-cta:active,.btn-outline:active{transform:translateY(0) scale(.985)}
.btn-cta{background:linear-gradient(135deg,#0a84ff 0%,#0071e3 100%)}
/* ヘッダーをより薄く上質に */
.site-header{border-bottom:1px solid rgba(0,0,0,.06)}
.brand-logo{box-shadow:0 6px 16px rgba(0,113,227,.28)}
/* 区切りの精緻化 */
.section{position:relative}
.section.alt{box-shadow:inset 0 1px 0 rgba(0,0,0,.03),inset 0 -1px 0 rgba(0,0,0,.03)}
@media(prefers-reduced-motion:reduce){.hero-eyebrow,.hero-title,.hero-sub,.btn-cta,.hero-features{animation:none}.reveal{opacity:1;transform:none}}

/* ════════════════════════════════════════════════════════════════
   v2 上質テーマ — Apple的洗練 × Tesla的先進 × 公共インフラの安心感
   白基調 × ダークグレー × イエロー（差し色）。信頼感 > AI感。
   ※ 既存の上にレイヤーして全面刷新（変数再定義＋要点上書き）
   ════════════════════════════════════════════════════════════════ */
:root{
  --ink:#141414; --ink2:#4d4d54;
  --accent:#141414; --accent-d:#000000; --accent-soft:#f4f4f1;
  --yellow:#ffd400; --yellow-d:#f0b800; --yellow-ink:#141414;
  --bg:#ffffff; --bg2:#f6f6f3; --line:#e9e9e4; --line-soft:#f0f0ec;
  --navy:#121212;
  --radius:20px; --radius-lg:28px; --radius-sm:14px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 14px 44px rgba(20,20,20,.06);
  --shadow-lg:0 24px 70px rgba(20,20,20,.12);
  --maxw:1120px;
}
body{font-size:17px;color:var(--ink);letter-spacing:.005em}
.container{padding:0 24px}

/* 余白を大幅に */
.section{padding:58px 0}
.section-title{font-size:2.2rem;letter-spacing:-.025em;font-weight:800;margin-bottom:18px}
.section-lead{font-size:1.1rem;margin-bottom:56px;color:var(--ink2)}

/* アイコン：細く高級な線画へ統一・配色は無彩色 */
.ic{stroke-width:1.35}
.hf-ic,.fs-ic,.card-ic,.st-ic{background:var(--bg2);color:var(--ink);border:1px solid var(--line)}
.card-ic{border-radius:16px}
.hf-ic{border-radius:50%}
.chat-head-ic{color:var(--yellow)}
.footer-brand .ic{color:var(--yellow)}

/* ロゴ：黒地にイエローの雫（公式感） */
.brand-logo{background:var(--ink);box-shadow:none;border-radius:12px}
.brand-logo .ic{color:var(--yellow);fill:none}
.brand-text strong{letter-spacing:-.01em}

/* ヘッダー：薄く静かに */
.site-header{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft)}
.header-badge .ic{color:var(--ink)}

/* ボタン：ダーク基調（営業感を排し公式に）。イエローは要所のみ */
.btn-primary,.btn-cta{background:var(--ink);color:#fff;border-radius:980px;box-shadow:none}
.btn-primary:hover,.btn-cta:hover{background:#000;transform:translateY(-1px)}
.btn-cta{box-shadow:0 16px 40px rgba(20,20,20,.18)}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--accent-soft)}

/* ヒーロー：白基調・大きな余白・3秒で要点。イエローは下線アクセント */
.hero{background:linear-gradient(180deg,#fbfbf9 0%,#ffffff 70%);border-bottom:1px solid var(--line-soft);padding:88px 0 96px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ink2);font-weight:600;font-size:.82rem;letter-spacing:.14em}
.hero-eyebrow::before{content:"";width:26px;height:3px;background:var(--yellow);border-radius:3px}
.hero-title{letter-spacing:-.035em;font-weight:800}
.hero-sub{color:var(--ink2)}
.hero-features li{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:18px}
.hero-features li:hover{border-color:var(--ink)}

/* セクションタイトル下のイエロー極細ライン（公式感の統一サイン） */
.section-title{position:relative;padding-bottom:16px}
.section-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:34px;height:3px;background:var(--yellow);border-radius:3px}
.section-title.light::after{background:var(--yellow)}

/* カード類：フラット・広い余白・控えめな枠、ホバーで静かに持ち上げ */
.symptom-card,.equip-card,.maker-card,.hokkaido-card,.case-card,.urgency-card,.jc-step,.errorcode-form,.sim-controls,.chat{border:1px solid var(--line);box-shadow:none}
.symptom-card,.equip-card{border-radius:20px;padding:28px 14px}
.symptom-card:hover,.equip-card:hover,.maker-card:hover,.hokkaido-card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.maker-card:hover{color:var(--ink)}
.fs-ic,.hf-ic{transition:transform .2s}
.flow-steps li.active{background:var(--ink)}
.flow-steps li.active .fs-ic{background:rgba(255,255,255,.14);color:var(--yellow)}

/* 濃紺セクション（実績・連絡）＝安全ガイドブックと同じブランド濃紺で統一（黒は使わない） */
.section-stats{background:linear-gradient(160deg,#12335c 0%,#163f72 60%,#123257 100%)}
.st-ic{background:rgba(255,255,255,.1);color:var(--yellow);border:1px solid rgba(255,255,255,.16)}
.st-num{color:#fff} .st-num small{color:var(--yellow)}
.section-contact{background:linear-gradient(160deg,#12335c 0%,#163f72 60%,#123257 100%)}

/* 補助金バッジはイエロー据え置き（ブランド統一） */
.subsidy-amount strong{color:var(--ink)}
.subsidy-amount strong{color:#b88600}

/* 追従CTA・チャット送信：ダーク */
.floating-cta{background:var(--ink);box-shadow:0 10px 30px rgba(20,20,20,.3)}
.btn-send{background:var(--ink)} .btn-send:hover{background:#000}
.btn-photo:hover{border-color:var(--ink);color:var(--ink)}
#chatRegion:focus,#chatInput:focus,.ec-field input:focus,.ec-field select:focus,.sim-field input:focus,.sim-field select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,20,.08)}

/* リンク色も無彩色寄りに（営業的な原色を避ける） */
a{color:var(--ink)}
.equip-more a,.seo-tags a:hover{color:var(--ink)}

@media(min-width:760px){
  .section{padding:92px 0}
  .section-title{font-size:3rem}
  .hero{padding:120px 0 128px}
}

/* ── v2 仕上げ：信頼トーン・写真スロット・AI診断の落ち着き ── */
/* ヒーロー信頼マイクロコピー */
.hero-trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:26px 0 0;color:var(--ink2);font-size:.88rem;font-weight:600}
.hero-trust .ic{width:18px;height:18px;color:var(--yellow-d)}
.hero-trust span{color:#cfcfca}
/* AIチャット：医療AI水準の信頼ストリップ */
.chat-trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;padding:12px 16px;background:#fafafa;border-bottom:1px solid var(--line-soft);font-size:.8rem;color:var(--ink2);font-weight:600}
.chat-trust span{display:inline-flex;align-items:center;gap:6px}
.chat-trust .ic{width:17px;height:17px;color:var(--ink)}
/* チャット本体：余白広め・落ち着いた配色 */
.chat{box-shadow:var(--shadow-lg)}
.chat-log{padding:24px}
.msg-ai{background:#f6f6f3;color:var(--ink);border:none}
.chat-progress-bar span{background:var(--ink)}
.chat-progress-text{color:var(--ink2)}
/* 診断結果カード：臨床的に落ち着いた枠 */
.result-card,.diag-box{border-radius:18px}
.pct-repair{background:var(--watch)} .pct-replace{background:var(--yellow-d)}
/* 施工事例：実機/技術者写真スロット（差し込めば映える枠） */
.case-img{background:linear-gradient(135deg,#ededea,#f7f7f4);color:#b6b6af;border:1px solid var(--line);overflow:hidden}
.case-img.case-after{background:linear-gradient(135deg,#fff7cf,#fffbf0);color:#c9a300}
.case-img .ic{width:56px;height:56px;stroke-width:1.15}
.case-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-img::after{content:"実機写真";position:absolute;bottom:8px;right:10px;font-size:.64rem;font-weight:700;color:rgba(0,0,0,.26);letter-spacing:.1em}
.case-card{border-radius:24px;padding:16px}
.case-tag{backdrop-filter:blur(2px)}
/* メーカー/設備カードのアイコンも無彩色で統一感 */
.case-arrow{color:var(--ink2)}

/* ══ ブランドステートメント：AIを暮らしのインフラに（北の空・オーロラ） ══ */
.mission{position:relative;overflow:hidden;isolation:isolate;padding:30px 0 64px;
  background:linear-gradient(165deg,#eaf2ff 0%,#cfe2ff 26%,#a9c9f6 52%,#bcd0f7 70%,#e7ecfb 100%)}
.mission-aurora{position:absolute;inset:-10% -5%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 46% at 78% 14%,rgba(255,255,255,.92),transparent 70%),
    radial-gradient(40% 50% at 14% 88%,rgba(150,240,205,.55),transparent 72%),
    radial-gradient(36% 44% at 96% 70%,rgba(255,221,170,.5),transparent 70%),
    radial-gradient(46% 40% at 60% 40%,rgba(180,200,255,.45),transparent 72%);
  filter:blur(6px);animation:auroraDrift 18s ease-in-out infinite}
.mission-inner{display:grid;gap:18px;align-items:center}
.mission-visual{position:relative;order:-1}
.mission-net{display:block;width:100%;max-width:520px;margin:0 auto;height:auto;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.7))}
.mission-net .net-lines path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1}
.mission-net .net-nodes circle{fill:rgba(255,255,255,.92)}
.mission-net .net-nodes .hub{fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.95))}
.mission-net .net-nodes .tw{animation:netTwinkle 3.4s ease-in-out infinite}
.mission-map .map-outline{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.62);stroke-width:1.4;stroke-linejoin:round}
.mission-map .map-edges path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
.mission-map .map-nodes circle{fill:rgba(255,255,255,.92)}
.mission-map .map-nodes .hub{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.95))}
.mission-map .map-nodes .tw{animation:netTwinkle 3.4s ease-in-out infinite}

/* ══ 対応機器：Apple製品一覧風の写真付きカード ══ */
.gear-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px}
.gear-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;cursor:pointer;overflow:hidden;font-family:inherit;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .18s ease}
.gear-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ink)}
.gear-photo{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:14px;background:linear-gradient(135deg,#eef1f4,#f8fafc);color:#9aa3ad;overflow:hidden;margin-bottom:14px}
.gear-photo.gear-warm{color:#7c94b8} /* 暖色背景は廃止→クリスタルブルーに統一（背景は.gear-photoを継承） */
.gear-photo .ic{width:60px;height:60px;stroke-width:1.15}
.gear-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gear-body{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:2px 8px 8px;flex:1 1 auto}
.gear-name{font-size:1.12rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.gear-desc{font-size:.82rem;color:var(--ink2);line-height:1.5;min-height:2.4em}
.gear-cta{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:.84rem;font-weight:700;color:var(--ink)}
.gear-cta .ic-arrow{width:15px;height:15px;transition:transform .15s ease}
.gear-card:hover .gear-cta .ic-arrow{transform:translateX(3px)}
.gear-note{margin-top:24px;font-size:.88rem;color:var(--ink2);text-align:center}
.gear-link{background:none;border:none;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:.88rem;padding:0;font-family:inherit}
.gear-link:hover{opacity:.7}
@media(min-width:640px){.gear-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1040px){.gear-grid{grid-template-columns:repeat(4,1fr);gap:20px}}

/* ══ SEOページ：直答ボックス・バイライン・応急処置の手順 ══ */
.seo-byline{font-size:.8rem;color:var(--ink2);margin:-2px 0 20px}
.seo-answer{background:#fffaf0;border:1px solid #ffe39e;border-radius:14px;padding:15px 18px;font-size:1.02rem;line-height:1.85;color:var(--ink);margin:0 0 24px}
.seo-answer strong{color:#9a7400;margin-right:4px}
.seo-steps{margin:8px 0 24px;padding-left:1.4em;counter-reset:step}
.seo-steps li{margin:0 0 12px;line-height:1.8;padding-left:6px}
.seo-steps li strong{color:var(--ink)}
.subsidy-more{margin:14px 0 0}
.subsidy-more a{display:inline-flex;align-items:center;gap:6px;font-size:.92rem;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.subsidy-more .ic-arrow{width:15px;height:15px}
/* フッター内部リンク（クロール強化） */
.footer-nav{display:grid;grid-template-columns:1fr;gap:22px;max-width:880px;margin:26px auto 28px;text-align:left}
.footer-col h3{font-size:.82rem;font-weight:800;letter-spacing:.04em;margin:0 0 10px;color:var(--ink);opacity:.55}
.footer-col a{display:block;font-size:.92rem;color:var(--ink2);text-decoration:none;padding:5px 0;transition:color .15s}
.footer-col a:hover{color:var(--ink)}
@media(min-width:640px){.footer-nav{grid-template-columns:repeat(3,1fr);gap:30px}}

/* （旧「ご相談者の声」口コミCSSは相談事例セクションへの置換に伴い撤去） */

/* ══ 北海道 凍結トラブル：AI診断UIカード（Apple×Tesla） ══ */
.hk-grid-photo{display:grid;grid-template-columns:1fr;gap:18px;margin-top:10px}
@media(min-width:600px){.hk-grid-photo{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.hk-grid-photo{grid-template-columns:repeat(3,1fr);gap:22px}}
.hk-card{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;padding:0;font-family:inherit;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
.hk-card:hover{transform:translateY(-5px);border-color:rgba(60,130,240,.55);
  box-shadow:0 0 0 1px rgba(60,130,240,.4),0 16px 44px rgba(28,76,170,.24)}
.hk-photo{position:relative;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(155deg,#0b1f3a 0%,#16345c 55%,#1f4a82 100%)}
.hk-art{position:absolute;inset:0;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.hk-art svg{width:100%;height:100%;display:block}
.hk-card:hover .hk-art{transform:scale(1.05)}
.hk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.hk-card:hover .hk-img{transform:scale(1.05)}
/* 青いスキャンライン（hoverで上→下に走査） */
.hk-scan{position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,rgba(110,180,255,0),rgba(120,190,255,.14) 55%,rgba(160,210,255,.5) 90%,rgba(200,230,255,.85));
  box-shadow:0 0 16px rgba(120,190,255,.55);transition:opacity .3s ease}
.hk-card:hover .hk-scan{opacity:1;animation:hkScan 2.4s linear infinite}
@keyframes hkScan{0%{transform:translateY(-110%)}100%{transform:translateY(380%)}}
.hk-body{padding:15px 18px 18px;display:flex;flex-direction:column;gap:6px}
.hk-head{display:flex;align-items:center;gap:14px}
.hk-num{position:relative;padding-right:14px;font-size:.82rem;font-weight:800;letter-spacing:.06em;color:#2f6fe0}
.hk-num::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:var(--line)}
.hk-title{font-size:1.06rem;font-weight:800;letter-spacing:-.01em;color:var(--ink);transition:color .3s ease}
.hk-card:hover .hk-title{color:#1f6fe0}
.hk-desc{font-size:.85rem;line-height:1.6;color:var(--ink2)}
@media(prefers-reduced-motion:reduce){.hk-card:hover .hk-scan{animation:none}}

/* ══ 全ページ共通：AI分析中フルスクリーン・オーバーレイ（トップと同じ薄いオーロラ） ══ */
.ai-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(165deg,#eaf2ff 0%,#cfe2ff 28%,#a9c9f6 56%,#e7ecfb 100%);
  opacity:0;visibility:hidden;transition:opacity .35s ease}
.ai-overlay::before{content:"";position:absolute;inset:-12% -6%;pointer-events:none;filter:blur(8px);
  background:radial-gradient(38% 46% at 78% 16%,rgba(255,255,255,.9),transparent 70%),radial-gradient(40% 50% at 14% 88%,rgba(150,240,205,.5),transparent 72%),radial-gradient(36% 44% at 96% 72%,rgba(255,221,170,.45),transparent 70%)}
.ai-overlay.show{opacity:1;visibility:visible}
.ai-overlay-inner{position:relative;text-align:center;padding:24px;width:100%;max-width:560px}
.ai-overlay-map{position:relative;width:min(66vw,320px);margin:0 auto 24px;overflow:hidden}
.ai-overlay-map svg{width:100%!important;height:auto!important;max-width:none!important;margin:0!important;filter:none!important}
/* 明るい背景に合わせて地図を濃い青へ */
.ai-overlay .map-outline{stroke:#6e93cf!important;stroke-width:1.5!important;fill:rgba(90,130,200,.06)!important}
.ai-overlay .map-edges path{stroke:#5f86c9!important}
.ai-overlay .map-nodes circle{fill:#2f6fe0!important}
.ai-overlay .map-nodes .hub{fill:#1456c8!important;filter:drop-shadow(0 0 5px rgba(40,110,230,.55))!important}
.ai-overlay .pulse{fill:#1456c8!important;filter:drop-shadow(0 0 6px rgba(60,130,240,.95))!important}
.ai-overlay-scan{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(80,150,255,0),rgba(110,170,255,.18) 60%,rgba(140,190,255,.45) 92%,rgba(170,210,255,.7));
  box-shadow:0 0 18px rgba(110,170,255,.6);animation:ecScan 1.9s linear infinite}
@keyframes ecScan{0%{transform:translateY(-110%)}100%{transform:translateY(360%)}}
.ai-overlay-title{font-size:1.32rem;font-weight:800;color:#0d1b33;margin:0 0 8px;letter-spacing:.05em}
.ai-overlay-msg{font-size:.96rem;color:#26344f;margin:0;min-height:1.5em;transition:opacity .3s}
@media(prefers-reduced-motion:reduce){.ai-overlay-scan{animation:none;opacity:.5}}

/* ══ エラー結果の「この部品だよ」図解 ══ */
.ec-diagram{margin:16px 0 4px;background:#f3f7fd;border:1px solid #dbe6f5;border-radius:14px;padding:14px 16px;text-align:center}
.ec-diagram-h{font-size:.92rem;font-weight:800;color:#1f4f9e;margin:0 0 8px}
.ec-diagram-fig{max-width:260px;margin:0 auto}
.ec-diagram-fig svg{width:100%;height:auto;display:block}
.ec-diagram-cap{font-size:.86rem;color:var(--ink2);margin:9px 0 0;line-height:1.65}
/* 図の番号バッジ（①②…）＋手順連動 */
.ec-pt{cursor:default}
.ec-pt-halo{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .25s var(--ease,ease),transform .25s var(--ease,ease)}
.ec-pt.lit .ec-pt-halo{opacity:.4;transform:scale(2.1)}
.ec-steps-h{font-size:.86rem;font-weight:800;color:#1f4f9e;text-align:left;margin:14px 0 6px}
.ec-steps-hint{font-weight:500;color:var(--ink2);font-size:.76rem}
.ec-steps{counter-reset:ecs;list-style:none;margin:0;padding:0;text-align:left}
.ec-step{counter-increment:ecs;position:relative;padding:9px 12px 9px 40px;margin:0 0 7px;background:#fff;border:1px solid #dbe6f5;border-radius:10px;font-size:.86rem;line-height:1.6;color:var(--ink);transition:background .2s var(--ease,ease),border-color .2s var(--ease,ease)}
.ec-step::before{content:counter(ecs);position:absolute;left:9px;top:9px;width:22px;height:22px;border-radius:50%;background:#e8a93a;color:#fff;font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.ec-step[data-n]{cursor:pointer}
.ec-step.lit{background:#fff6e6;border-color:#e8a93a}
.ec-step.lit::before{background:#3a6fd0}
.ec-step:focus-visible{outline:2px solid #3a6fd0;outline-offset:2px}

/* ══ 型番 → 確定情報カード ══ */
.ec-mini{display:inline-block;margin-top:6px;padding:6px 12px;font-size:.8rem;font-weight:700;color:#1f4f9e;background:#eef4fc;border:1px solid #cfe0f5;border-radius:999px;cursor:pointer;transition:background .2s var(--ease,ease)}
.ec-mini:hover{background:#e0ecfb}
.ec-mini:focus-visible{outline:2px solid #3a6fd0;outline-offset:2px}
.model-card-result{margin-top:14px}
.mc-loading{font-size:.86rem;color:var(--ink2);text-align:center;padding:10px}
.model-card{border:1px solid #cfe0f5;border-radius:14px;background:#fff;padding:14px 16px;margin:12px 0 0;box-shadow:0 2px 10px rgba(31,79,158,.06)}
.mc-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.mc-badge{font-size:.72rem;font-weight:800;color:#fff;background:#1f6f3a;padding:3px 9px;border-radius:999px;letter-spacing:.03em}
.mc-badge--maybe{background:#b9831e}
.mc-title{font-size:.98rem;font-weight:800;color:var(--ink)}
.mc-body{display:grid;grid-template-columns:1fr;gap:1px;background:#eef2f7;border:1px solid #eef2f7;border-radius:10px;overflow:hidden}
.mc-row{display:flex;justify-content:space-between;gap:12px;background:#fff;padding:8px 12px;font-size:.86rem}
.mc-k{color:var(--ink2);flex:0 0 auto}
.mc-v{color:var(--ink);font-weight:700;text-align:right}
.mc-note{font-size:.8rem;color:var(--ink2);margin:9px 0 0}
.mc-src{font-size:.76rem;color:var(--ink2);margin:10px 0 0;line-height:1.6}
.mc-cands{margin:4px 0 0;padding-left:18px;font-size:.86rem;line-height:1.8;color:var(--ink)}
.model-card-lead{display:flex;align-items:center;gap:7px;font-size:.86rem;font-weight:700;color:#1f6f3a;margin:0 0 8px}
.model-card-lead .ic{width:16px;height:16px;fill:#1f6f3a}
.model-card--none{border-color:#e3e8ef;background:#fafbfc}
.mc-none-t{font-size:.9rem;font-weight:700;color:var(--ink);margin:0 0 4px}
/* 機種確認（この機種でお間違いないですか？） */
.model-confirm{margin:12px 0 2px;padding:13px 14px;border:1px solid #cfe0f5;border-radius:12px;
  background:linear-gradient(180deg,#f4f9ff,#eef5ff)}
.mcf-q{margin:0 0 10px;font-size:.94rem;font-weight:800;color:#13234d;text-align:center}
.mcf-btns{display:flex;gap:9px}
.mcf-btn{flex:1 1 0;min-height:44px;border-radius:9px;font-weight:700;font-size:.92rem;cursor:pointer;
  border:1px solid transparent;transition:transform .12s,box-shadow .2s,background .15s}
.mcf-btn:active{transform:translateY(1px)}
.mcf-yes{color:#fff;background:linear-gradient(165deg,#2059cf,#10316b);border-color:rgba(120,170,255,.34);
  box-shadow:0 6px 16px rgba(16,45,110,.28)}
.mcf-yes:hover{filter:brightness(1.05)}
.mcf-no{color:#2a4a72;background:#fff;border-color:#cdd9ec}
.mcf-no:hover{background:#f3f7fd}
@media(min-width:560px){.mc-body{grid-template-columns:1fr 1fr}}

/* ══ マスコット「大吉君」 ══ */
.daikichi{display:flex;align-items:flex-start;gap:12px;margin:16px 0 2px;padding:12px 14px;background:#f3f1fb;border:1px solid #e1dcf4;border-radius:14px}
.daikichi-img{width:64px;height:auto;flex:none;align-self:center}
.daikichi-bubble{position:relative;background:#fff;border:1px solid #e1dcf4;border-radius:12px;padding:10px 14px;margin:0;font-size:.9rem;line-height:1.65;color:var(--ink)}
.daikichi-bubble::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;background:#fff;border-left:1px solid #e1dcf4;border-bottom:1px solid #e1dcf4;transform:rotate(45deg)}
.ai-overlay-mascot{display:block;width:88px;height:auto;margin:0 auto 8px}
/* 大吉君＋吹き出し（旧オーバーレイ用・現行ローディングは文字なし北海道マーク） */
.ai-overlay-daikichi{display:flex;align-items:center;justify-content:center;gap:11px;margin:0 0 16px;flex-wrap:wrap}
.ai-overlay-daikichi .ai-overlay-mascot{width:66px;margin:0}
.ai-overlay-bubble{position:relative;background:#fff;border:1px solid #dbe6f5;border-radius:14px;
  padding:10px 14px;font-size:.9rem;line-height:1.55;color:#26344f;max-width:230px;text-align:left;
  box-shadow:0 6px 18px rgba(31,79,158,.12)}
.ai-overlay-bubble::before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;
  background:#fff;border-left:1px solid #dbe6f5;border-bottom:1px solid #dbe6f5;transform:rotate(45deg)}
.ai-steps{list-style:none;display:flex;gap:8px 10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 auto 14px;padding:0 12px;max-width:480px;box-sizing:border-box;width:100%}
.ai-steps li{font-size:.8rem;font-weight:700;color:#90a0bd;padding:7px 13px;border-radius:999px;white-space:nowrap;max-width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.7);border:1px solid #e0e8f4;transition:color .3s,background .3s,border-color .3s,box-shadow .3s}
/* 320pxなど極狭幅：横並びが窮屈なら縦タイムラインへ自動切替（文字重なり・はみ出しを完全回避） */
@media (max-width:360px){
  .ai-steps{flex-direction:column;align-items:stretch;gap:6px;max-width:240px}
  .ai-steps li{text-align:center;font-size:.82rem}
}
.ai-steps li.active{color:#1f4f9e;border-color:#9fc0ef;background:#fff;box-shadow:0 4px 12px rgba(31,79,158,.16)}
.ai-steps li.done{color:#1f6f3a;border-color:#bfe3cd;background:#f1faf4}
.ai-steps li.done::before{content:"\2713 "}

/* ⑥ 北海道のいま：危険度グルーピング（Tesla/Apple/Notion思想）＋ライブ活動。診断ボタンが主役・これは補助。 */
.hk-now{background:linear-gradient(180deg,rgba(238,248,255,.72),rgba(221,243,255,.5));
  -webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(206,231,255,.6);padding:16px 0}
.hk-now-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 13px}
.hk-now-label{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:800;color:#13234d}
.hk-now-dot{width:9px;height:9px;border-radius:50%;background:#3ec08a;box-shadow:0 0 9px rgba(62,192,138,.85);animation:bmGlow 2.6s ease-in-out infinite}
.hk-now-sub{font-size:.78rem;color:#64718c}
/* 危険度グループ（縦並び。各行：ラベル＋都市チップ） */
.hk-cities{display:flex;flex-direction:column;gap:9px}
.hk-grp{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.hk-grp-h{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;min-width:60px;padding-top:6px;flex:0 0 auto}
.hk-grp-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.hk-grp-c{font-weight:700;opacity:.55;font-size:.7rem}
.hk-grp-cs{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.hk-city{display:inline-flex;align-items:center;gap:6px;border-radius:11px;padding:6px 11px;font-size:.84rem;
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.82);box-shadow:0 2px 8px rgba(90,140,200,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.hk-city b{font-weight:700;color:#1a2a4d}
.hk-city-t{font-weight:700;font-variant-numeric:tabular-nums;color:#5a6b86}
.hk-city-skel{font-size:.84rem;color:#8a97ad}
/* グループ別カラー（直感的に） */
.lv-g .hk-grp-h{color:#2a8f46}.lv-g .hk-grp-dot{background:#2ea44f}.lv-g .hk-city-t{color:#3a7d52}
.lv-y .hk-grp-h{color:#b98700}.lv-y .hk-grp-dot{background:#e0a400}.lv-y .hk-city-t{color:#b98700}
.lv-o .hk-grp-h{color:#cf650a}.lv-o .hk-grp-dot{background:#e8730c}.lv-o .hk-city-t{color:#cf650a}
.lv-r .hk-grp-h{color:#c62a20}.lv-r .hk-grp-dot{background:#e0352b}
.lv-r .hk-city{border-color:#f3c6c2;background:#fff6f5}.lv-r .hk-city-t{color:#d12c22}
/* ② 危険ドットを1.5sで上品にフェード（激しい点滅ではない） */
.lv-r .hk-grp-dot{animation:hkDanger 1.5s ease-in-out infinite}
@keyframes hkDanger{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(224,53,43,.45)}50%{opacity:.35;box-shadow:0 0 10px 2px rgba(224,53,43,.5)}}
/* 凡例 */
.hk-legend{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 0;font-size:.72rem;color:#6b7890}
.hk-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.hk-dot.lv-g{background:#2ea44f}.hk-dot.lv-y{background:#e0a400}.hk-dot.lv-o{background:#e8730c}.hk-dot.lv-r{background:#e0352b}
/* ライブ活動 */
.hk-live{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0}
.hk-stat{border-radius:14px;padding:11px 8px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.85)}
.hk-stat-n{display:block;font-size:1.42rem;font-weight:800;color:#13234d;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1;transition:color .25s,transform .25s}
.hk-stat-n.hk-bump{color:#1f7a4d;transform:scale(1.08)}
.hk-stat-k{display:block;font-size:.72rem;color:#64718c;margin-top:3px}
@media (prefers-reduced-motion:reduce){.hk-stat-n{transition:none}.hk-stat-n.hk-bump{transform:none}}
.hk-now-tag{font-size:.7rem;color:#90a0bd;margin:11px 0 0}
@media(prefers-reduced-motion:reduce){.hk-now-dot{animation:none}.lv-r .hk-grp-dot{animation:none}}

/* ⑦ 故障ランキングSEOページ */
.rk-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.96rem}
.rk-table th,.rk-table td{border-bottom:1px solid var(--line-soft,#e6ebf2);padding:11px 10px;text-align:left;vertical-align:top}
.rk-table thead th{font-size:.8rem;color:var(--ink2,#5a6b86);font-weight:700}
.rk-table .rk-no{width:2.4em;font-weight:800;color:var(--accent,#0071e3)}
.rk-table .rk-name{font-weight:700;white-space:nowrap}
.rk-table .rk-note{color:var(--ink2,#5a6b86)}
.rk-hub{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.rk-hub a{display:block;background:#fff;border:1px solid var(--line,#dfe5ee);border-radius:14px;padding:14px 16px;transition:border-color .15s,transform .15s,box-shadow .2s}
.rk-hub a:hover{border-color:var(--accent,#0071e3);transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,79,158,.1)}
.rk-hub strong{display:block;color:var(--ink,#13234d);font-size:1.04rem;margin-bottom:3px}
.rk-hub span{display:block;color:var(--ink2,#5a6b86);font-size:.86rem;line-height:1.55}
@media(min-width:680px){.rk-hub{grid-template-columns:1fr 1fr}.rk-table .rk-name{white-space:normal}}

/* 診断結果の意思決定サポート（中立・自然送客。売り込みUIにしない） */
.ds-wrap{margin:14px 0 4px;display:flex;flex-direction:column;gap:12px}
.ds-block{background:#fff;border:1px solid var(--line,#dfe5ee);border-radius:16px;padding:14px 16px}
.ds-h{font-size:1rem;font-weight:800;color:#13234d;margin:0 0 10px;display:flex;align-items:baseline;gap:8px}
.ds-h .ds-sub{font-size:.72rem;font-weight:600;color:#8a97ad}
.ds-note{font-size:.8rem;color:#64718c;line-height:1.6;margin:8px 0 0}
.ds-note.ds-sample{color:#9aa3ad}
.ds-loading{font-size:.84rem;color:#8a97ad}
/* 交換指数 */
.ds-index .ds-gauge{display:flex;align-items:center;gap:14px}
.ds-index .ds-score{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ds-index .ds-level{font-size:.86rem;color:#3a4660;line-height:1.5}
.ds-index .ds-bar{height:8px;border-radius:999px;background:#eef2f8;margin:10px 0 0;overflow:hidden}
.ds-index .ds-bar span{display:block;height:100%;border-radius:999px}
.ds-reasons{margin-top:12px}
.ds-reasons .ds-rh{font-size:.74rem;font-weight:700;color:#8a97ad;margin-bottom:4px}
.ds-reasons ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.ds-reasons li{font-size:.82rem;color:#3a4660;line-height:1.5}
.ds-reasons li span{display:inline-block;min-width:84px;font-weight:700;color:#13234d}
/* DB分析 */
.ds-key{font-size:1.02rem;font-weight:800;color:#0071e3;margin:0 0 10px}
.ds-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ds-stat{background:#f6f8fe;border-radius:12px;padding:10px 8px;text-align:center}
.ds-stat .ds-sv{display:block;font-size:1.2rem;font-weight:800;color:#13234d;font-variant-numeric:tabular-nums}
.ds-stat .ds-sk{display:block;font-size:.68rem;color:#64718c;margin-top:2px}
/* 今できること */
.ds-choices{display:grid;grid-template-columns:1fr;gap:8px}
.ds-choice{display:flex;flex-direction:column;background:#f6f8fe;border:1px solid #e6ecf6;border-radius:12px;padding:11px 13px;transition:border-color .15s,transform .15s}
.ds-choice:hover{border-color:#0071e3;transform:translateY(-1px)}
.ds-choice strong{font-size:.94rem;color:#13234d}
.ds-choice span{font-size:.76rem;color:#64718c;margin-top:2px}
/* 自然送客（相談窓口） */
.ds-windows{background:linear-gradient(180deg,#f7faff,#eef3fc);border-color:#dde6f3}
.ds-windows-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ds-window{display:flex;align-items:baseline;gap:8px;background:#fff;border:1px solid #e2e9f4;border-radius:11px;padding:10px 13px}
.ds-window strong{font-size:.92rem;color:#13234d}
.ds-window span{font-size:.76rem;color:#64718c}
@media(min-width:560px){.ds-choices{grid-template-columns:1fr 1fr}}

/* AI後継機診断ウィザード */
.sx-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:680px;margin:18px auto 0}
.sx-field{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:var(--ink2,#5a6b86);font-weight:600}
.sx-field select{font-size:.95rem;padding:10px 12px;border:1px solid var(--line,#dfe5ee);border-radius:10px;color:var(--ink,#1d2430);background:#fff;font-family:inherit}
.sx-field select:focus{outline:none;border-color:var(--accent,#0071e3);box-shadow:0 0 0 3px var(--accent-soft,#eaf3ff)}
.sx-submit{grid-column:1/-1;justify-self:center;margin-top:4px}
.sx-result{max-width:760px;margin:20px auto 0}
.sx-loading{text-align:center;color:#64718c}
.sx-top{text-align:center;font-size:1.05rem;color:#13234d;margin:0 0 14px}
.sx-badge{display:inline-block;background:#e3eeff;color:#1f4f9e;font-weight:800;font-size:.72rem;border-radius:999px;padding:4px 11px;margin-right:8px}
.sx-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sx-card{background:#fff;border:1px solid var(--line,#dfe5ee);border-radius:16px;padding:14px}
.sx-card.sx-best{border:2px solid var(--accent,#0071e3);box-shadow:0 8px 22px rgba(0,113,227,.12)}
.sx-cardhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sx-rank{background:#13234d;color:#fff;font-size:.7rem;font-weight:800;border-radius:6px;padding:2px 7px}
.sx-maker{font-size:1.02rem;font-weight:800;color:#13234d}
.sx-over{margin-left:auto;font-size:.66rem;color:#cf650a;font-weight:700}
.sx-spec{width:100%;border-collapse:collapse;font-size:.8rem}
.sx-spec th{text-align:left;color:#8a97ad;font-weight:600;padding:4px 0;white-space:nowrap;width:5.5em;vertical-align:top}
.sx-spec td{padding:4px 0;color:#3a4660}
.sx-spec .sx-star{color:#e0a400;letter-spacing:1px}
.sx-reason{background:#f6f8fe;border:1px solid #e6ecf6;border-radius:14px;padding:14px 16px;margin-top:14px}
.sx-reason h3{font-size:.96rem;margin:0 0 8px;color:#13234d}
.sx-reason ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:5px}
.sx-reason li{font-size:.86rem;color:#3a4660;line-height:1.55}
.sx-topreason{font-size:.86rem;color:#13234d;margin:10px 0 0;line-height:1.6;font-weight:600}
.sx-note{font-size:.76rem;color:#9aa3ad;margin:10px 0 0;text-align:center}
.sx-cta{font-size:.86rem;color:#3a4660;text-align:center;margin:8px 0 0}
@media(max-width:560px){.sx-form{grid-template-columns:1fr}.sx-cards{grid-template-columns:1fr}}

/* 住宅まるごと寿命診断（住宅カルテ） */
.kt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:720px;margin:0 auto}
.kt-field{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--ink2,#5a6b86);font-weight:600}
.kt-field input{font-size:.95rem;padding:9px 11px;border:1px solid var(--line,#dfe5ee);border-radius:10px;font-family:inherit}
.kt-field input:focus{outline:none;border-color:var(--accent,#0071e3);box-shadow:0 0 0 3px var(--accent-soft,#eaf3ff)}
.kt-submit{display:block;margin:16px auto 0}
.kt-hint{text-align:center;font-size:.76rem;color:#8a97ad;margin:8px 0 0}
.kt-result{max-width:760px;margin:20px auto 0}
.kt-loading{text-align:center;color:#64718c}
.kt-house{display:flex;align-items:center;gap:16px;background:#f6f8fe;border:1px solid #e6ecf6;border-radius:16px;padding:16px 18px}
.kt-score{font-size:3rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.kt-houselv .kt-sub{display:block;font-size:.74rem;color:#8a97ad}
.kt-houselv strong{font-size:1.1rem;color:#13234d}
.kt-next{margin-top:16px}.kt-next h3,.kt-timeline h3{font-size:1rem;color:#13234d;margin:0 0 8px}
.kt-nextcards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kt-nextcard{border:1px solid var(--line,#dfe5ee);border-radius:12px;padding:11px;background:#fff}
.kt-nextcard strong{display:block;font-size:.92rem;color:#13234d}
.kt-nextcard span{font-size:.76rem;color:#5a6b86}
.kt-nextcard.lv-r{border-color:#f3c6c2;background:#fff6f5}.kt-nextcard.lv-o{border-color:#f6d6bd}
.kt-table{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:16px}
.kt-table th,.kt-table td{border-bottom:1px solid var(--line,#e6ebf2);padding:8px 6px;text-align:left}
.kt-table th{font-size:.74rem;color:#8a97ad;font-weight:700}
.kt-badge{display:inline-block;font-size:.72rem;font-weight:700;border-radius:999px;padding:2px 9px}
.kt-badge.lv-g{background:#e9f7ef;color:#2a8f46}.kt-badge.lv-y{background:#fdf3da;color:#b98700}
.kt-badge.lv-o{background:#fdece0;color:#cf650a}.kt-badge.lv-r{background:#fbe4e2;color:#d12c22}.kt-badge.lv-x{background:#eef1f5;color:#8a97ad}
.kt-timeline{margin-top:16px}.kt-timeline ul{margin:0;padding-left:1.1em}.kt-timeline li{font-size:.86rem;color:#3a4660;margin:4px 0}
.kt-note{font-size:.76rem;color:#9aa3ad;text-align:center;margin:10px 0 0}
.kt-cta{font-size:.86rem;color:#3a4660;text-align:center;margin:8px 0 0}
@media(max-width:560px){.kt-grid{grid-template-columns:1fr}.kt-nextcards{grid-template-columns:1fr}}

/* (b) 症状カードの精錬：円形バッジ＋ホバーで発光ブランド色（引き算・上質に） */
.symptom-grid .symptom-card{gap:14px;padding:26px 14px}
.symptom-card .card-ic{width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#f1f7ff,#e3eeff);color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(120,160,230,.2);
  transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .2s ease}
.symptom-card:hover .card-ic{background:linear-gradient(150deg,#5b8fe6,#3f78d8);color:#fff;
  box-shadow:0 8px 20px rgba(63,120,216,.32);transform:translateY(-2px)}
/* (b) 対応機器カードの精錬：写真枠を上質に・余計な装飾を削る */
.gear-photo{border-radius:16px}
.gear-card{border-radius:20px}

/* ══ 型番号の写真(品番シール)の見つけ方 撮影ガイド ══ */
.ec-find{max-width:760px;margin:14px auto 0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.ec-find summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:700;color:var(--ink);font-size:.95rem;position:relative}
.ec-find summary::-webkit-details-marker{display:none}
.ec-find summary::after{content:"+";position:absolute;right:16px;top:12px;font-size:1.4rem;font-weight:400;color:var(--ink2)}
.ec-find[open] summary::after{content:"\2212"}
.ec-find-body{padding:4px 16px 18px;border-top:1px solid var(--line)}
.ec-find-lead{font-size:.88rem;color:var(--ink2);line-height:1.7;margin:12px 0 14px}
.ec-find-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ec-find-card{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:#fbfcfe;min-width:0}
.ec-find-fig{max-width:150px;margin:0 auto}
.ec-find-fig svg{width:100%;height:auto;display:block}
.ec-find-t{font-size:.9rem;font-weight:800;color:var(--ink);margin:6px 0 2px;overflow-wrap:anywhere}
.ec-find-c{font-size:.8rem;color:var(--ink2);line-height:1.5;margin:0}
.ec-find-note{font-size:.78rem;color:var(--ink2);margin:14px 0 0;line-height:1.6}
@media(min-width:680px){.ec-find-grid{grid-template-columns:repeat(3,1fr)}}

/* 法務ページ：未記入プレースホルダの強調 */
.legal-todo{background:#fff3cd;color:#8a6d00;font-weight:700;padding:1px 6px;border-radius:5px;border:1px dashed #e0b400}
.footer-legal{margin:10px 0 0;font-size:.82rem}
.footer-legal a{color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent}
.footer-legal a:hover{color:var(--ink);border-bottom-color:currentColor}

/* ══ メーカーをロゴ表示（後で正式ロゴ画像に差し替え可） ══ */
.maker-grid-logo .maker-card{display:flex;align-items:center;justify-content:center;min-height:66px;background:#fff;padding:14px 10px}
.maker-logo{font-weight:800;letter-spacing:.03em;font-size:1.02rem;color:var(--ink);text-align:center;line-height:1.2}
.maker-card .maker-logo img{max-height:30px;max-width:100%;display:block}
.maker-logo-img{max-height:34px;max-width:82%;object-fit:contain;display:block}
/* ロゴごとの見えサイズ調整（縦横比・余白の差を吸収） */
.maker-card[data-maker="パナソニック"] .maker-logo-img{max-height:40px;max-width:100%}
.maker-card[data-maker="デンソー"] .maker-logo-img{max-height:40px;max-width:100%}
.maker-note{margin-top:18px;font-size:.8rem;color:var(--ink2);text-align:center}

/* ══ よくある質問（FAQアコーディオン） ══ */
.faq-inner{max-width:820px}
.faq-list{margin-top:10px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 42px 18px 4px;font-weight:700;color:var(--ink);position:relative;font-size:1rem;line-height:1.6}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:10px;top:14px;font-size:1.5rem;font-weight:400;color:var(--ink2)}
.faq-item[open] summary::after{content:"\2212"}
.faq-a{padding:0 4px 20px;color:var(--ink2);line-height:1.9;font-size:.95rem}
.faq-cta{text-align:center;margin-top:30px}
.mission-net .pulse{fill:#fff;filter:drop-shadow(0 0 6px rgba(180,230,255,1))}
.mission-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font-size:.82rem;font-weight:800;letter-spacing:.04em;color:#1f2d4a}
.me-dot{width:18px;height:3px;border-radius:2px;background:var(--yellow,#ffd400);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.mission-title{margin:0 0 20px;font-size:2.1rem;line-height:1.22;letter-spacing:-.02em;
  font-weight:800;color:#0d1b33}
.mission-lead{margin:0 0 30px;font-size:1.02rem;line-height:1.95;color:#26344f;font-weight:500}
.mission-lead strong{font-weight:800;color:#0d1b33}
.mission-pills{display:flex;flex-wrap:wrap;gap:12px}
.mission-pill{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;
  font-size:.98rem;font-weight:700;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.mission-pill .ic-arrow{width:17px;height:17px;transition:transform .15s ease}
.mission-pill:hover{transform:translateY(-2px)}
.mission-pill:hover .ic-arrow{transform:translateX(3px)}
.mission-pill.primary{background:var(--ink,#141414);color:#fff;box-shadow:0 10px 24px rgba(13,27,51,.28)}
.mission-pill:not(.primary){background:rgba(255,255,255,.55);color:#11203c;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 18px rgba(40,70,130,.12)}
@keyframes auroraDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-3%,2.5%)}}
@keyframes netTwinkle{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .mission-aurora,.mission-net .tw{animation:none}
  .mission-net .pulse{display:none}
}
@media(min-width:860px){
  .mission{padding:64px 0 96px}
  .mission-inner{grid-template-columns:1.05fr .95fr;gap:48px}
  .mission-visual{order:1}
  .mission-title{font-size:2.9rem}
  .mission-lead{font-size:1.08rem}
}

/* ══════════════════════════════════════════════════════════
   Redesign v3 — デザインシステムの統一（2026-06-18）
   目的：トークン化（モーション/角丸/ボタン/タイポ/フォーカス）で
   一貫した"静かな高級感"へ。色は黄=ブランド/CTA、青=診断の世界観に役割分離。
   ══════════════════════════════════════════════════════════ */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.32s;
  --r-card:16px;
  --r-pill:999px;
  --shadow-soft:0 10px 30px rgba(20,30,50,.10);
  --shadow-lift:0 16px 44px rgba(20,30,50,.16);
  --focus:#2f6fe0;
}
/* 可読性：リード文の行長・行間を統一（長すぎる行を抑制） */
.section-lead{max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.92}
/* 見出しの字間を統一 */
.section-title{letter-spacing:-.02em}
/* カード：角丸・ホバー・トランジションを統一 */
.symptom-card,.equip-card,.gear-card,.maker-card,.urgency-card,.voice-card,.stat-card,.jc-step,.hk-card,.case-card{
  border-radius:var(--r-card);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.symptom-card:hover,.equip-card:hover,.gear-card:hover,.voice-card:hover{box-shadow:var(--shadow-lift)}
/* 数字は等幅で締める（実績・補助金額） */
.st-num,.subsidy-amount strong,.sim-result strong,.hk-num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* ボタン：上質なピル基準に統一（種別過多の解消） */
.btn-cta,.btn-primary,.btn-outline,.mission-pill,.gear-cta{
  border-radius:var(--r-pill);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.btn-cta:hover,.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-outline:hover{transform:translateY(-2px)}
/* フォーカス可視化（キーボード操作・アクセシビリティ） */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:8px;
}
/* スクロール演出：段階的なディレイで上質に（reveal対応時のみ） */
main>.section.reveal{transition-timing-function:var(--ease)}
/* モーション抑制の網羅 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════
   Redesign v4 — アクセント"琥珀(ゴールド)"化＋ディスプレイ・タイポ洗練
   Apple(引き算・端正) × OpenAI(静かな明快) × Tesla(上質な緊張感)
   ══════════════════════════════════════════════════════════ */
:root{
  --yellow:#e3a532;     /* 旧#ffd400の"安価な黄"を、沈めた琥珀ゴールドへ＝高級感 */
  --yellow-d:#b9831e;   /* ライト面のアイコン/星/数字に：濃いめゴールドで可読性 */
}
/* ディスプレイ見出し：字間と行間を詰めて端正に（Apple的） */
.hero-title{letter-spacing:-.025em;line-height:1.13}
.mission-title{letter-spacing:-.025em;line-height:1.2}
.section-title{line-height:1.18}
/* アクセント下線を一段細く上品に */
.section-title::after{width:30px;height:3px;border-radius:2px}
.hero-eyebrow::before{height:2px}
/* リード文：コントラスト過多を緩め"静けさ"を出す */
.section-lead{color:var(--ink2)}
/* 数字の締まり（既出tabular-numsに加え、見出し数字の字間） */
.st-num{letter-spacing:-.02em}
/* 信頼ストリップ（ミッション直下・旧ヒーローの信頼要素を整理） */
.hero-strip{padding:34px 0 10px;text-align:center}
.hero-strip .hero-trust{margin-top:0}

/* ══ Redesign v6 — ミッション=フルブリード・ヒーロー（地図を背景・コピーを重ねる） ══ */
.mission{display:flex;align-items:flex-start;min-height:clamp(360px,52vh,520px);padding:26px 0 44px}
.mission-inner{display:block;position:relative;z-index:3}
.mission-visual{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;order:0;pointer-events:none}
.mission-net{width:min(88%,640px);max-width:none;margin:0;transform:translateY(-12%)}
/* コピー可読性のためのスクリム（下を濃く） */
.mission::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 28%,rgba(232,240,255,.45) 56%,rgba(232,240,255,.9) 86%)}
.mission-copy{position:relative;max-width:680px}
@media(min-width:980px){
  .mission{align-items:center}
  .mission-visual{justify-content:flex-end;place-items:center end;padding-right:1%}
  .mission-net{width:min(54%,620px);transform:none}
  .mission::after{background:linear-gradient(90deg,rgba(232,240,255,.72) 0%,rgba(232,240,255,.32) 42%,transparent 64%)}
  .mission-copy{max-width:560px}
}

/* ═══════════════════════════════════════════════════════════════
   Redesign W1 — ブランド／特徴カード／ステップ
   ═══════════════════════════════════════════════════════════════ */

/* ── ブランドマーク：北海道 × AIニューラル発光 ── */
.brand-mark{position:relative;z-index:0;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:radial-gradient(120% 120% at 30% 20%,#0b1736,#0a1024);
  box-shadow:0 4px 16px rgba(31,79,158,.28),inset 0 0 0 1px rgba(150,210,255,.26)}
/* ブランドシンボル：外周をゆっくり回る氷の光リング（派手にしない） */
.brand-mark::before{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;z-index:-1;
  background:conic-gradient(from 0deg,rgba(150,220,255,0) 0deg,rgba(150,220,255,0) 70deg,rgba(172,228,255,.75) 138deg,rgba(255,255,255,.92) 172deg,rgba(172,228,255,0) 248deg,rgba(150,220,255,0) 360deg);
  filter:blur(1.4px);opacity:.85;animation:markRing 7s linear infinite}
@keyframes markRing{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.brand-mark::before{animation:none;opacity:.5}}
.brand-mark svg{width:30px;height:30px;display:block;overflow:visible}
.brand-mark .bm-fill{opacity:.97;filter:drop-shadow(0 0 7px rgba(120,205,255,.5))}
.brand-mark .bm-net path{stroke:rgba(205,238,255,.9);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.brand-mark .bm-node,.brand-mark .bm-hub{fill:#eaf6ff;filter:drop-shadow(0 0 6px rgba(150,220,255,1))}
.brand-mark .bm-hub{fill:#fff}
.brand-mark .bm-node{animation:bmPulse 2.6s var(--ease,ease-in-out) infinite}
.brand-mark .bm-hub{animation:bmPulse 2.2s var(--ease,ease-in-out) infinite}
@keyframes bmPulse{0%,100%{opacity:.55;transform:scale(.82);transform-origin:center}50%{opacity:1;transform:scale(1.12)}}
.brand:hover .brand-mark{box-shadow:0 6px 22px rgba(70,150,255,.4),inset 0 0 0 1px rgba(140,180,255,.3)}
@media (prefers-reduced-motion:reduce){.brand-mark .bm-node,.brand-mark .bm-hub{animation:none;opacity:.95;transform:none}}

/* ── 特徴カード（フリーアイコン廃止・情報カード化） ── */
.hero-features{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0 0;padding:0}
.hero-features li{position:relative;display:flex;flex-direction:column;gap:5px;padding:16px 16px 15px;
  background:#fff;border:1px solid var(--line);border-radius:16px;font-size:.92rem;font-weight:700;color:var(--ink);
  line-height:1.45;overflow:hidden;transition:transform .28s var(--ease,ease),box-shadow .28s var(--ease,ease),border-color .28s var(--ease,ease)}
.hero-features li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#2ed3ff,#7b6cff);opacity:.9}
/* 英語装飾（FREE/ALWAYS/ONLINE/HOKKAIDO）は一般ユーザーに不要のため非表示 */
.hero-features li::after{content:none}
.hero-features li:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(31,79,158,.12);border-color:#cfe0f5}
.hf-ic{display:none}
.hf-num{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(120deg,#1f6fe0,#7b6cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hf-sub{font-size:.78rem;font-weight:500;color:var(--ink2);line-height:1.5}
@media(min-width:720px){.hero-features{grid-template-columns:repeat(4,1fr)}}

/* ── AI相談ステップ：番号チップ＋進行ライン＋AI解析の未来感 ── */
.flow-steps{counter-reset:fstep;list-style:none;margin:0 0 22px;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative}
.flow-steps li{position:relative;padding:14px 12px 13px;background:#fff;border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;gap:7px;transition:transform .25s var(--ease,ease),box-shadow .25s var(--ease,ease),border-color .25s}
.flow-steps li::before{counter-increment:fstep;content:"STEP " counter(fstep);font-size:.62rem;font-weight:800;
  letter-spacing:.1em;color:#9fb0c7}
.flow-steps .fs-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#eef4fc;color:#1f6fe0;border:1px solid #dce8f8}
.flow-steps .fs-ic .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
.flow-steps .fs-t{display:flex;flex-direction:column;gap:2px;font-size:.78rem;color:var(--ink2);line-height:1.4}
.flow-steps .fs-t strong{font-size:.92rem;color:var(--ink);font-weight:800}
.flow-steps li.active{border-color:#bcd3f3;box-shadow:0 8px 22px rgba(31,111,224,.12)}
.flow-steps li.active .fs-ic{background:linear-gradient(135deg,#2ed3ff,#7b6cff);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(90,120,255,.4)}
.flow-steps li.step-ai .fs-ic{position:relative;overflow:hidden}
.flow-steps li.step-ai .fs-ic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-120%);animation:fsScan 2.8s var(--ease,ease) infinite}
@keyframes fsScan{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@media(max-width:720px){.flow-steps{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.flow-steps li.step-ai .fs-ic::after{animation:none;opacity:0}}

/* ═══════════════════════════════════════════════════════════════
   Redesign W1.6 — ファーストビュー：北海道の暮らしを支えるAIインフラ
   明るく・やさしく・公共的（北海道庁/北海道電力の信頼 × Appleの洗練）。
   70代でも安心して読める高コントラスト・大きめ文字をモバイル最優先で。
   ═══════════════════════════════════════════════════════════════ */

/* ── ヘッダー：モバイルの折返し崩壊を解消・ブランドマーク再設計 ── */
.header-inner{min-height:58px;gap:10px}
.brand{gap:10px;min-width:0}
.brand-text{min-width:0}
.brand-text small{font-size:.62rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.brand-text strong{font-size:1rem;white-space:nowrap;letter-spacing:-.02em;color:var(--ink)}
/* ブランドシンボル：北海道＋AIの灯（安心の暖色）＋ネットワーク。公共的でやさしい */
/* 案②：枠なし＋薄い発光（引き算。アプリアイコン感を排し、発光する北海道ブランドと一致） */
.brand-mark{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;background:none;box-shadow:none;border-radius:0}
/* ヘッダー（明背景）でも視認できるアイスシアンの発光＋ゆっくり呼吸（ローディングと同一世界観） */
.brand-mark svg{width:36px;height:36px;overflow:visible;
  filter:drop-shadow(0 0 3px rgba(120,212,250,.62)) drop-shadow(0 0 8px rgba(95,200,242,.44));
  animation:bm-pulse 3.6s ease-in-out infinite}
.brand-mark .bm-fill{opacity:1}
.brand-mark .bm-net path{stroke:rgba(110,200,240,.55);stroke-width:3}
.brand-mark .bm-node{fill:#5fc6f2;animation:bmPulse 3.4s var(--ease,ease-in-out) infinite}
.brand-mark .bm-hub{fill:#8fe7ff;animation:bmPulse 3s var(--ease,ease-in-out) infinite}
.brand:hover .brand-mark svg{filter:drop-shadow(0 0 6px rgba(120,212,250,.9)) drop-shadow(0 0 15px rgba(95,200,242,.6))}
@keyframes bmGlow{0%,100%{opacity:.7}50%{opacity:1}}
/* 輪郭に沿って光がゆっくり一周（海岸線をなぞる・点滅しない） */
.brand-mark .bm-trace{stroke:#cdf6ff;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:0.16 0.84;stroke-dashoffset:0;
  filter:drop-shadow(0 0 5px rgba(143,224,255,1));
  animation:bmCoast 8s linear infinite}
@keyframes bmCoast{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
@media(prefers-reduced-motion:reduce){.brand-mark .bm-trace{animation:none;opacity:0}}
/* ヘッダーバッジはモバイルでは隠す（ヒーローと重複・折返し崩壊の原因） */
.header-badge{display:none}
@media(min-width:760px){
  .header-badge{display:flex;max-width:260px}
  .brand-text small{font-size:.68rem}
  .brand-text strong{font-size:1.1rem}
}

/* ── ヒーロー：明るい雪空×やさしいオーロラ×北海道ネットワーク ── */
.mission{background:
    linear-gradient(168deg,#f8fcff 0%,#eef8ff 30%,#ddf3ff 60%,#eef8ff 84%,#f8fcff 100%);
  padding:0;min-height:auto;display:block;color:var(--ink)}
/* 雪・氷を連想する微細な光粒（気付くか気付かない程度・やり過ぎ禁止） */
.mission::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 27% 62%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 43% 28%, rgba(214,240,255,.85), transparent 60%),
    radial-gradient(1.3px 1.3px at 58% 74%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.7px 1.7px at 71% 22%, rgba(214,240,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 58%, rgba(255,255,255,.78), transparent 60%),
    radial-gradient(1.4px 1.4px at 91% 34%, rgba(255,255,255,.66), transparent 60%),
    radial-gradient(1.6px 1.6px at 6% 80%, rgba(214,240,255,.72), transparent 60%),
    radial-gradient(1.3px 1.3px at 35% 90%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 46%, rgba(255,255,255,.7), transparent 60%);
  animation:snowTwinkle 7s ease-in-out infinite}
@keyframes snowTwinkle{0%,100%{opacity:.36}50%{opacity:.66}}
@media (prefers-reduced-motion:reduce){.mission::before{animation:none}}
/* 北海道の冬空・澄んだ空気：アイスブルー一色のやわらかなオーロラ（紫・暖色は排除） */
.mission-aurora{inset:-18% -8%;filter:blur(30px);opacity:.8;
  background:
    radial-gradient(36% 42% at 16% 10%, rgba(135,205,255,.40), transparent 70%),
    radial-gradient(40% 46% at 88% 18%, rgba(160,212,255,.38), transparent 72%),
    radial-gradient(44% 52% at 72% 98%, rgba(190,226,255,.30), transparent 72%),
    radial-gradient(30% 40% at 50% 50%, rgba(225,242,255,.30), transparent 72%);
  animation:auroraDrift 24s ease-in-out infinite}
.mission-inner{display:block;position:relative;z-index:3;
  padding-top:12px;padding-bottom:40px}
/* 地図：北海道そのものを背景の主役に。大きく・薄く発光するウォーターマーク。
   島全体にネットワークが広がり、札幌に暖色の灯（北海道が知能を持つ表現） */
.mission-visual{position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:1}
.mission-net{width:min(94%,440px);transform:translateY(-26%);
  filter:drop-shadow(0 0 36px rgba(150,195,255,.66))}
/* ① 北海道シルエットはさらに薄く（背景演出。主役は文字とCTA） ② 呼吸の発光は維持 */
.mission-map .map-aura{fill:rgba(150,200,255,.24);stroke:rgba(150,200,255,.24);stroke-width:6;filter:blur(9px);
  transform-box:fill-box;transform-origin:center;animation:islandBreathe 6s ease-in-out infinite}
@keyframes islandBreathe{0%,100%{opacity:.55;transform:scale(.994)}50%{opacity:.95;transform:scale(1.012)}}
/* ⑤ 情報が流れるネットワーク（さらに高速化／チカチカ禁止） ⑥発光増 */
.mission-map .map-flow{stroke:rgba(190,224,255,.9);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:4 26;animation:mapFlow 2.8s linear infinite}
@keyframes mapFlow{to{stroke-dashoffset:-30}}
/* ④ 巡回ルートの光を明るく（白に近い柔らかいブルー） */
.mission-net .pulse-route{fill:#f0f8ff;filter:drop-shadow(0 0 11px rgba(190,228,255,1))}
@media (prefers-reduced-motion:reduce){.mission-map .map-flow,.mission-map .map-aura{animation:none}}
/* ① 輪郭は半分の濃さ（よく見ると北海道）／② 線は整理＆透明度やや下げ */
.mission-map .map-outline{fill:url(#mapFillGrad);stroke:rgba(120,165,235,.16);stroke-width:1.2;stroke-linejoin:round}
.mission-map .map-edges path{fill:none;stroke:rgba(160,200,255,.42);stroke-width:.9}
.mission-map .map-nodes circle{fill:rgba(195,222,255,.88)}
.mission-map .map-nodes .tw{animation:netTwinkle 2.6s ease-in-out infinite}
.mission-map .map-nodes .hub{fill:#f0f8ff;filter:drop-shadow(0 0 9px rgba(180,222,255,1))}
/* ⑥ 巡回パルスの発光を強化（白に近い柔らかいブルー・上品） */
.mission-net .pulse{fill:#eaf5ff;filter:drop-shadow(0 0 11px rgba(190,228,255,1))}
/* キラキラ感：明るく瞬く発光ノード＋メッシュ（やや高速） */
.mission-map .map-sparkle .spk{fill:#dcebff;opacity:.72;animation:netTwinkle 2.4s ease-in-out infinite}
.mission-map .map-sparkle .spk-bright{fill:#ffffff;opacity:1;filter:drop-shadow(0 0 6px rgba(190,228,255,1))}
.mission-map .map-sparkle .spk-line{stroke:rgba(175,210,255,.3);stroke-width:.5}
@media (prefers-reduced-motion:reduce){.mission-map .map-sparkle .spk,.mission-map .map-aura{animation:none}}
/* スクリム：地図を主役にするため薄く。見出し直後の帯だけ軽く持ち上げ、文字は白の微シャドウで可読性確保 */
.mission::after{background:
    radial-gradient(95% 60% at 22% 34%, rgba(248,248,255,.5) 0%, rgba(247,247,254,.16) 55%, transparent 78%),
    linear-gradient(180deg, transparent 62%, rgba(245,246,255,.42) 100%)}
.mission-copy{position:relative;max-width:620px}
.mission-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;max-width:100%;flex-wrap:wrap;
  font-size:.8rem;font-weight:700;letter-spacing:0;color:#3a4d86;line-height:1.5;
  padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.78);
  border:1px solid rgba(120,150,220,.28);box-shadow:0 1px 8px rgba(60,90,170,.06)}
.mission-eyebrow .me-dot{width:8px;height:8px;border-radius:50%;background:#e3a532;
  box-shadow:0 0 8px rgba(230,165,50,.85);animation:bmGlow 3s ease-in-out infinite}
.mission-title{color:#13234d;font-size:clamp(1.55rem,6.1vw,3.2rem);line-height:1.28;
  letter-spacing:-.02em;margin:19px 0 18px;font-weight:800;text-shadow:none;
  overflow-wrap:break-word}
/* 見出しは意味の区切りで固定改行（その給湯器、／まだ直せるかもしれません。） */
.mission-title .ln{display:block}
.mission-lead{color:#39476a;font-size:clamp(1.04rem,4.1vw,1.18rem);line-height:1.9;
  font-weight:500;margin:0 0 28px;text-shadow:0 1px 2px rgba(247,248,255,.8)}
.mission-lead strong{color:#13234d;font-weight:800}
/* CTA：Tesla風の横並び2ボタン（同サイズ・同デザイン・濃紺〜ロイヤルブルー・白文字・小角丸） */
.mission-pills{display:flex;flex-direction:row;align-items:stretch;gap:12px;margin-top:16px}
.mission-pill{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:11px 12px;min-height:46px;border-radius:8px;font-weight:700;line-height:1.25;
  font-size:clamp(.85rem,3.5vw,1rem);letter-spacing:-.01em}
@property --cta-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.mission-pill.primary{position:relative;overflow:hidden;isolation:isolate;color:#fff;border:1px solid rgba(120,170,255,.34);
  background:linear-gradient(165deg,#2059cf 0%,#163c92 55%,#10316b 100%);
  text-shadow:0 1px 2px rgba(6,20,60,.4);
  box-shadow:0 8px 22px rgba(16,45,110,.3),inset 0 1px 0 rgba(255,255,255,.16)}
.mission-pill.primary .cta-label{position:relative;z-index:2}
/* 外周のみ発光：アイスブルー〜シアン〜白の光が 9秒で一周（控えめ・チカチカ無し・本体は非発光） */
.mission-pill.primary::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:1;pointer-events:none;
  background:conic-gradient(from var(--cta-ang),
    rgba(150,220,255,.18) 0deg,rgba(150,220,255,.18) 120deg,
    rgba(120,214,255,.6) 150deg,rgba(196,240,255,.95) 170deg,rgba(255,255,255,1) 180deg,
    rgba(196,240,255,.95) 190deg,rgba(120,214,255,.6) 210deg,
    rgba(150,220,255,.18) 240deg,rgba(150,220,255,.18) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:blur(.6px);animation:ctaOrbit 9s linear infinite}
.mission-pill.primary::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle,rgba(190,235,255,.9),rgba(190,235,255,0) 70%);
  transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:1}
.mission-pill.primary:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 12px 30px rgba(16,45,110,.4),0 0 18px rgba(150,210,255,.4),inset 0 1px 0 rgba(255,255,255,.22)}
.mission-pill.primary:active{transform:translateY(0)}
.mission-pill.primary:active::after{animation:ctaRipple .55s ease-out}
@keyframes ctaOrbit{to{--cta-ang:360deg}}
@keyframes ctaRipple{
  0%{transform:translate(-50%,-50%) scale(0);opacity:.5}
  100%{transform:translate(-50%,-50%) scale(38);opacity:0}}
.cta-note{margin:12px 0 0;text-align:center;font-size:.82rem;font-weight:600;color:#5a6a92;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){
  .mission-pill.primary::before{animation:none}
  .mission-pill.primary:active::after{animation:none}}
.mission-microtrust{margin:14px 0 0;font-size:.84rem;color:#5a6a92;letter-spacing:.01em;font-weight:500}

/* ③ メインサブコピー（結果を一言で） */
.mission-value{margin:0 0 14px;font-size:clamp(1.06rem,4.4vw,1.42rem);font-weight:800;color:#163f72;
  line-height:1.45;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(247,248,255,.8)}
/* FV：対応機器テキスト */
.mission-sub{margin:0 0 14px;font-size:clamp(.96rem,3.5vw,1.08rem);color:#33406a;font-weight:600;text-shadow:0 1px 2px rgba(247,248,255,.8)}
.mission-sub strong{color:#13234d;font-weight:800}
/* ⑤ CTA直上の安心材料（不安を先回りで解消・絵文字不使用） */
.cta-trust{list-style:none;display:flex;flex-wrap:nowrap;gap:6px;margin:50px 0 14px;padding:0;width:100%}
.cta-trust li{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:1 1 0;min-width:0;
  font-size:clamp(.64rem,2.9vw,.8rem);font-weight:700;color:#163f72;white-space:nowrap;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(150,200,255,.55);border-radius:999px;padding:6px 8px;box-shadow:0 2px 8px rgba(40,80,150,.07)}
.cta-trust li::before{content:"";flex:0 0 auto;width:13px;height:13px;border-radius:50%;
  background:#1f8ce4 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/10px no-repeat}

/* AIでできること（コンパクトグリッド・小型発光アイコン） */
.lp-can{padding:26px 0 22px}
.can-title{font-size:1.3rem;font-weight:800;color:#13234d;text-align:center;margin:0 0 16px;letter-spacing:-.01em}
.can-grid{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.can-card{display:flex;align-items:center;gap:11px;border-radius:14px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 2px rgba(20,40,80,.04),0 10px 24px rgba(90,140,200,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.can-ic{position:relative;flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--gc) 22%,#fff),#fff 72%);
  border:1.5px solid color-mix(in srgb,var(--gc) 38%,transparent)}
.can-ic .flow-ic{width:20px;height:20px;color:var(--gc);stroke-width:1.7}
.can-bd{display:flex;flex-direction:column;gap:1px;min-width:0}
.can-tx{font-weight:800;font-size:.9rem;color:#15233f;line-height:1.3}
.can-ds{font-size:.73rem;font-weight:600;color:#5b6b88;line-height:1.35}
.can-cta{text-align:center;margin:18px 0 0}
/* できることCTA：ヒーローCTAと同じアイスガラスで統一（発光はヒーローのみ強め） */
.can-cta .btn-primary{color:#0d5a99;border:1px solid rgba(255,255,255,.92);
  background:
    radial-gradient(120% 130% at 50% 22%, rgba(255,255,255,.88), rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(238,248,255,.92), rgba(207,239,255,.86));
  -webkit-backdrop-filter:blur(13px) saturate(150%);backdrop-filter:blur(13px) saturate(150%);
  box-shadow:0 8px 24px rgba(120,195,245,.2),0 0 16px rgba(160,224,255,.4),inset 0 1px 0 rgba(255,255,255,.9);
  text-shadow:0 1px 0 rgba(255,255,255,.8)}
.can-cta .btn-primary:hover{transform:translateY(-1px);
  background:
    radial-gradient(120% 130% at 50% 22%, rgba(255,255,255,.95), rgba(255,255,255,.28) 48%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #f2faff, #ddf3ff);
  box-shadow:0 12px 30px rgba(120,195,245,.3),0 0 26px rgba(160,224,255,.62),inset 0 1px 0 #fff}
@media(max-width:560px){
  .can-grid{grid-template-columns:1fr 1fr;gap:9px}
  .can-card{padding:11px 10px;gap:9px}
  .can-ic{width:34px;height:34px}
  .can-ic .flow-ic{width:18px;height:18px}
  .can-tx{font-size:.88rem}
}

@media(min-width:760px){
  .mission-inner{padding-top:22px;padding-bottom:64px}
  .mission-copy{max-width:600px}
  .mission-pills{flex-direction:row;flex-wrap:wrap}
  .mission-pill{padding:16px 30px}
  .mission-visual{place-items:center;padding-right:0;opacity:1}
  .mission-net{width:min(60%,700px);transform:translateX(6%)}
  .mission::after{background:
      linear-gradient(90deg, rgba(247,247,254,.9) 0%, rgba(245,246,254,.66) 40%, rgba(245,247,255,.16) 70%, transparent 100%)}
}
@media (prefers-reduced-motion:reduce){.mission-eyebrow .me-dot,.brand-mark .bm-hub,.mission-map .hub-glow{animation:none}}

/* ヒーロー直下の信頼ストリップ：自然につながる明色 */
.hero-strip{background:#fff;padding-top:30px}

/* フローティングCTA：アイスブルー〜クリアブルーで世界観と調和 */
.floating-cta{background:linear-gradient(120deg,#33a6f0,#1f8ce4);
  box-shadow:0 8px 24px rgba(31,140,228,.4)}


/* ══ 下層エリア改修：情報順序の再構成（⑧）＋見出しの整形（②⑥）＋導線整理 ══ */
/* 2026-07-17: このブロックは main#top 側（460行目以降）の新スキームに全面的に上書きされる
   完全な重複・死んだルール（#mission/.hero-strip/#firstaid-now/#errorcode/#voices は現行HTMLに
   存在せず、他の生存中セレクタも main#top > X の方が詳細度で必ず勝つため無効化）だったため削除。
   現行の並び順は main#top 側のみで制御しており、削除による表示順の変化はない。 */
/* 見出しの孤立改行を防ぐ（1文字だけ残る改行の禁止） */
.section-title{text-wrap:balance}
/* フッターの問い合わせ（メールは最下部・運営会社の下） */
.footer-contact{margin:6px 0 0;font-size:.9rem;color:var(--ink2,#5a6b86)}
.footer-contact a{color:inherit;text-decoration:underline}

/* ══ CTA押下時のAI解析イントロ演出（強制スクロールの代替・大吉君が中央＝サービスの顔） ══ */
.ai-overlay--intro .ai-overlay-daikichi{flex-direction:column;gap:12px;margin:0 auto 18px}
.ai-overlay--intro .ai-overlay-mascot{width:120px;margin:0 auto;animation:dkFloat 3s ease-in-out infinite}
.ai-overlay--intro .ai-overlay-bubble{max-width:300px;text-align:center;margin:0 auto}
.ai-overlay--intro .ai-overlay-bubble::before{display:none}
.ai-overlay--intro .ai-overlay-title{font-size:1.4rem}
@keyframes dkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.ai-overlay--intro .ai-overlay-mascot{animation:none}}
/* ローディング演出：中央に静かな発光パルス（GPU軽量・派手にしない） */
.ai-overlay--intro::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(36% 26% at 50% 44%,rgba(40,110,230,.10),transparent 70%);animation:aiGlow 2.6s ease-in-out infinite}
.ai-overlay--intro .ai-overlay-inner{position:relative;z-index:1}
@keyframes aiGlow{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ai-overlay--intro::after{animation:none;opacity:.6}}

/* ══ CTA→ローディング演出→その場で全画面チャット（スクロール禁止の実装） ══ */
.ai-overlay-chat{display:none;width:100%;max-width:600px;padding:0 14px}
.ai-overlay--chat .ai-overlay-inner{display:none}
.ai-overlay--chat .ai-overlay-chat{display:block;margin:auto;max-height:94vh;overflow:visible}
.ai-overlay--chat .ai-overlay-chat .chat{box-shadow:0 30px 80px rgba(10,25,60,.32)}
.ai-overlay--chat .ai-overlay-chat .chat-log{max-height:56vh}
.ai-overlay-close{position:fixed;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:none;background:rgba(13,27,51,.72);color:#fff;font-size:1.55rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.ai-overlay-close[hidden]{display:none}
.ai-overlay-close:hover{background:rgba(13,27,51,.92)}
@media(max-width:759px){.ai-overlay--chat .ai-overlay-chat{padding:0 8px}.ai-overlay--chat .ai-overlay-chat .chat-log{max-height:52vh}}

/* ══ 診断チャット：大吉君アバター付き吹き出し（AIアシスタント感） ══ */
.msg-row{display:flex;gap:9px;align-items:flex-end;max-width:92%}
.msg-row-ai{align-self:flex-start}
.msg-avatar{width:30px;height:30px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:#eef3ff;border:1px solid #e2e9f4;box-shadow:0 1px 3px rgba(31,79,158,.12)}
.msg-row-ai .msg{margin:0;max-width:100%}

/* ══ 診断結果カードの上質化（AI診断レポート感・信頼／スマホ最適） ══ */
.result-card{border:1px solid #e2e9f4;border-radius:18px;padding:20px 20px 18px;background:#fff;box-shadow:0 10px 30px rgba(31,79,158,.10)}
.result-h{font-size:1.22rem;font-weight:800;color:#13234d;display:flex;align-items:center;gap:8px;margin:0 0 4px}
.result-meta{font-size:.82rem;color:#64718c;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #eef1f7}
.pct-block{background:linear-gradient(180deg,#f6f9ff,#eef3fc);border:1px solid #e6ecf6;border-radius:14px;padding:16px;margin:0 0 16px}
.pct-row{display:flex;align-items:center;gap:12px;margin:11px 0}
.pct-label{flex:0 0 84px;font-weight:700;font-size:.9rem;color:#3a4660}
.pct-bar{flex:1;height:14px;background:#e7edf6;border-radius:999px;overflow:hidden}
.pct-fill{display:block;height:100%;border-radius:999px;transition:width 1s cubic-bezier(.22,1,.36,1)}
.pct-repair{background:linear-gradient(90deg,#2ecc8f,#1d9e75)}
.pct-replace{background:linear-gradient(90deg,#5b8fe6,#3f78d8)}
.pct-val{flex:0 0 52px;text-align:right;font-weight:800;font-size:1.25rem;color:#13234d;font-variant-numeric:tabular-nums}
.result-sec{margin:11px 0;line-height:1.75;font-size:.95rem;color:#26344f}
.result-sec strong{color:#13234d}
.result-stars{color:#e0a400;letter-spacing:1px}
.sample-tag{font-size:.68rem;font-weight:700;color:#7a869c;background:#eef2f8;padding:2px 9px;border-radius:999px}
.result-note{font-size:.8rem;color:#8a97ad;margin:14px 0 0;border-top:1px solid #eef1f7;padding-top:11px}
.vendor-list{margin:8px 0 0;padding-left:1.1em}.vendor-list li{margin:5px 0;font-size:.9rem}

/* SEOページの運営（E-E-A-T）ブロック */
.seo-eeat{margin:26px 0 0;padding:18px 18px 14px;background:#f6f8fe;border:1px solid #e2e9f4;border-radius:14px}
.seo-eeat .seo-h2{margin-top:0;font-size:1.05rem}
.seo-eeat p{font-size:.9rem;line-height:1.75;color:#3a4660;margin:0 0 8px}
.seo-eeat .seo-ul{margin:0 0 6px;font-size:.88rem;color:#3a4660}
.seo-eeat .seo-note{color:#8a97ad}
/* 診断レポート続きの導入カード */
.ds-leadin{background:linear-gradient(120deg,#f3f7ff,#eef3fc)}

/* ══ 今すぐの応急処置（助けてから・相談前に解決を提供） ══ */
.section-firstaid{background:#fbfdff}
.fa-danger{display:flex;flex-direction:column;gap:4px;background:#fff5f4;border:1px solid #f3c6c2;border-left:4px solid #e0352b;border-radius:12px;padding:13px 15px;margin:0 auto 16px;max-width:680px}
.fa-danger strong{color:#c62a20;font-size:.96rem}
.fa-danger span{font-size:.86rem;color:#7a3c37;line-height:1.6}
.fa-list{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.fa-item{background:#fff;border:1px solid var(--line,#dfe5ee);border-radius:13px;overflow:hidden}
.fa-item summary{list-style:none;cursor:pointer;padding:15px 16px;font-size:1rem;font-weight:700;color:#13234d;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fa-item summary::-webkit-details-marker{display:none}
.fa-item summary::after{content:"＋";color:#5b8fe6;font-weight:800;font-size:1.1rem;transition:transform .2s}
.fa-item[open] summary::after{content:"−"}
.fa-item[open] summary{border-bottom:1px solid #eef1f7}
.fa-body{padding:6px 18px 16px}
.fa-body ol{margin:8px 0 0;padding-left:1.3em;display:flex;flex-direction:column;gap:7px}
.fa-body li{font-size:.94rem;line-height:1.7;color:#26344f}
.fa-foot{text-align:center;font-size:.92rem;color:#3a4660;margin:16px auto 0;max-width:680px}

/* 診断の根拠と精度（透明性開示） */
.ds-basis{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ds-basis li{font-size:.86rem;color:#3a4660;line-height:1.6}
.ds-basis li span{display:inline-block;min-width:92px;font-weight:700;color:#13234d;margin-right:6px;vertical-align:top}

/* ════════ サイト基準デザイン：プレミアム症状カード（発光リング＋軌道＋回路＋ガラス） ════════ */
/* 添付1枚目を基準。色は --gc（症状ごと）で発光・アイコン・回路を統一。 */
.sym-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:440px){.sym-grid{grid-template-columns:1fr 1fr}.sym-chip.wide{grid-column:1/-1}}
.sym-chip{--gc:#185fa5;display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:18px;
  padding:14px 16px;cursor:pointer;font-family:inherit;font-size:1.05rem;font-weight:800;color:#15223c;line-height:1.4;
  position:relative;overflow:hidden;backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(20,30,60,.04),0 10px 24px rgba(20,30,60,.05);
  transition:transform .16s ease,box-shadow .22s,border-color .15s}
.sym-chip::after{content:"";position:absolute;right:0;bottom:0;width:112px;height:60px;pointer-events:none;background:var(--gc);opacity:.20;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3Cpath%20d='M30%2044v8h42'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3Ccircle%20cx='72'%20cy='52'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3Cpath%20d='M30%2044v8h42'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3Ccircle%20cx='72'%20cy='52'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain}
.sym-chip-ic{position:relative;flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center}
.sym-chip-ic::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 50% 45%,var(--gc),transparent 70%);opacity:.16;filter:blur(5px)}
.sym-chip-ic .orbit{position:absolute;inset:4px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--gc) 40%,transparent)}
.sym-chip-ic .orbit::after{content:"";position:absolute;top:5%;right:12%;width:5px;height:5px;border-radius:50%;background:var(--gc);box-shadow:0 0 6px var(--gc)}
.sym-chip-ic .ic{position:relative;width:26px;height:26px;color:var(--gc);stroke-width:1.7}
.sym-chip-label{position:relative;z-index:1}
.sym-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gc) 32%,var(--line));box-shadow:0 4px 10px rgba(20,30,60,.06),0 18px 36px rgba(20,30,60,.10)}
.sym-chip.on{background:#fff;color:#15223c;border-color:var(--gc);transform:translateY(-1px);box-shadow:0 0 0 1.5px var(--gc),0 16px 34px color-mix(in srgb,var(--gc) 24%,transparent)}
.sym-chip.on .sym-chip-ic::before{opacity:.34}
.sym-chip.on .sym-chip-ic .orbit::after{box-shadow:0 0 9px var(--gc)}
@media(prefers-reduced-motion:reduce){.sym-chip{transition:none}}

/* ════════ STEPカード（写真診断フロー）＝基準デザイン適用 ════════ */
.flow-grid{display:block}
.flow-steps{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.flow-steps{grid-template-columns:1fr 1fr}}
.flow-steps li.flow-step{--gc:#2f80ed;position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic no" "ic tx";column-gap:15px;row-gap:2px;align-items:center;
  background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:18px;padding:16px 18px;
  box-shadow:0 1px 2px rgba(20,30,60,.04),0 10px 24px rgba(20,30,60,.05);transition:transform .16s ease,box-shadow .22s,border-color .15s}
.flow-steps li.flow-step:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gc) 30%,var(--line));box-shadow:0 4px 10px rgba(20,30,60,.06),0 18px 36px rgba(20,30,60,.10)}
.flow-step-no{grid-area:no;font-size:.8rem;font-weight:800;letter-spacing:.14em;color:var(--gc)}
.flow-step-ic{grid-area:ic;position:relative;width:54px;height:54px;display:grid;place-items:center}
.flow-step-ic::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 50% 45%,var(--gc),transparent 70%);opacity:.16;filter:blur(5px)}
.flow-step-ic .orbit{position:absolute;inset:4px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--gc) 40%,transparent)}
.flow-step-ic .orbit::after{content:"";position:absolute;top:6%;right:12%;width:5px;height:5px;border-radius:50%;background:var(--gc);box-shadow:0 0 6px var(--gc)}
.flow-step-ic .ic{position:relative;width:28px;height:28px;color:var(--gc);stroke-width:1.7}
.flow-step-tx{grid-area:tx;display:flex;flex-direction:column;gap:3px;min-width:0}
.flow-step-tx strong{font-size:1.04rem;font-weight:800;color:#15223c;line-height:1.3}
.flow-step-tx span{font-size:.9rem;color:var(--ink2);line-height:1.5}
.flow-steps li.flow-step::after{content:"";position:absolute;right:0;bottom:0;width:104px;height:56px;pointer-events:none;background:var(--gc);opacity:.18;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3Cpath%20d='M30%2044v8h42'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3Ccircle%20cx='72'%20cy='52'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3Cpath%20d='M30%2044v8h42'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3Ccircle%20cx='72'%20cy='52'%20r='2.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain}
@media(prefers-reduced-motion:reduce){.flow-steps li.flow-step{transition:none}}

/* ════════ メーカー選択カード＝基準デザイン適用（ロゴ＋ガラス＋回路＋発光ホバー） ════════ */
.maker-grid-logo{gap:10px}
.maker-grid-logo .maker-card{--gc:#185fa5;position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f7f9fe);
  border:1.5px solid var(--line-soft);border-radius:16px;min-height:68px;padding:14px 10px;
  box-shadow:0 1px 2px rgba(20,30,60,.04),0 8px 18px rgba(20,30,60,.05);transition:transform .16s,box-shadow .2s,border-color .15s}
.maker-grid-logo .maker-card::after{content:"";position:absolute;right:0;bottom:0;width:62px;height:34px;pointer-events:none;background:var(--gc);opacity:.10;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain}
.maker-grid-logo .maker-card .maker-logo-img,.maker-grid-logo .maker-card .maker-logo{position:relative;z-index:1}
.maker-grid-logo .maker-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gc) 36%,var(--line));box-shadow:0 4px 10px rgba(20,30,60,.06),0 16px 32px rgba(20,30,60,.10);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.maker-grid-logo .maker-card{transition:none}}

/* ════════ 診断結果＝基準デザイン（ガラスカード・色分けバー・発光アクセント） ════════ */
.result-card{background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:20px;
  box-shadow:0 1px 2px rgba(20,30,60,.04),0 14px 34px rgba(20,30,60,.09);position:relative;overflow:hidden;padding:20px 20px 18px}
.pct-block{margin:6px 0 14px}
.pct-bar{height:18px;background:#e9edf5;border-radius:999px;box-shadow:inset 0 1px 2px rgba(20,30,60,.07)}
.pct-fill{border-radius:999px}
.pct-repair{background:linear-gradient(90deg,#13c08a,#0e9f6e)}
.pct-replace{background:linear-gradient(90deg,#2f80ed,#2f6fe0)}
.pct-label{flex:0 0 86px;font-weight:800;color:#23304c}
.pct-val{flex:0 0 56px;font-size:1.3rem;font-weight:800;color:#13234d;font-variant-numeric:tabular-nums}

/* あなたの給湯器トラブル対応カルテ（診断結果の要約。長文の前に1枚で全体像） */
.karte-card{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px;border:1px solid #e6ecf6;border-radius:14px;overflow:hidden;background:#fff}
.karte-row{display:flex;gap:10px;padding:9px 13px;font-size:.9rem;line-height:1.7;border-top:1px solid #eef2f9}
.karte-row:first-child{border-top:none}
.karte-label{flex:0 0 8.6em;font-weight:800;color:#5a6b86;font-size:.82rem;padding-top:1px}
.karte-value{flex:1 1 auto;color:#26344f;min-width:0}
.karte-details{margin-top:10px;border-top:1px dashed #e6ecf6;padding-top:2px}
.karte-details>summary{cursor:pointer;font-weight:700;font-size:.88rem;color:#1a56c6;padding:9px 2px;list-style:none}
.karte-details>summary::-webkit-details-marker{display:none}
.karte-details>summary::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-right:2px solid #1a56c6;border-bottom:2px solid #1a56c6;transform:rotate(45deg);transition:transform .18s ease}
.karte-details[open]>summary::before{transform:rotate(-135deg)}
@media(max-width:420px){.karte-row{flex-direction:column;gap:2px}.karte-label{flex:none}}

/* 判断材料ブロック（根拠・交換指数・DB分析・選択肢・レポート・次の一手） */
.ds-block{background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:18px;
  box-shadow:0 1px 2px rgba(20,30,60,.04),0 10px 24px rgba(20,30,60,.06);position:relative;overflow:hidden;padding:15px 17px}
.ds-leadin{background:linear-gradient(120deg,#eef4ff,#f8faff);border-color:#cfe0f7}
.ds-stat{background:#fff;border:1px solid var(--line-soft);border-radius:14px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.ds-stat .ds-sv{color:#13234d}
.ds-choice{position:relative;z-index:1}

/* ════════ 対応機器・エラーコード・凍結 ＝基準デザイン適用 ════════ */
.gear-card{--gc:#185fa5;position:relative;background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:20px;
  box-shadow:0 1px 2px rgba(20,30,60,.04),0 10px 24px rgba(20,30,60,.05)}
.gear-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gc) 30%,var(--line));box-shadow:0 6px 14px rgba(20,30,60,.06),0 20px 40px rgba(20,30,60,.10)}
.gear-card::after{content:"";position:absolute;right:0;bottom:0;width:84px;height:46px;pointer-events:none;background:var(--gc);opacity:.09;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20110%2060'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2044H40l10-10h34'/%3E%3Cpath%20d='M64%2034V20h40'/%3E%3C/g%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='104'%20cy='20'%20r='2.4'/%3E%3Ccircle%20cx='84'%20cy='34'%20r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom/contain}
.gear-body{position:relative;z-index:1}
.errorcode-form{background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:22px;
  box-shadow:0 1px 2px rgba(20,30,60,.04),0 14px 34px rgba(20,30,60,.07);position:relative;overflow:hidden}
.hk-card{box-shadow:0 1px 2px rgba(20,30,60,.04),0 12px 28px rgba(20,30,60,.07)}

/* ════════ お金まわり（費用/補助金/見積もり/回収/機種えらび）＝基準デザイン適用 ════════ */
.cost-card{background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:16px;box-shadow:0 1px 2px rgba(20,30,60,.04),0 10px 22px rgba(20,30,60,.05)}
.cost-card-switch{background:linear-gradient(180deg,#eef5ff,#e9f1ff);border-color:#cfe3fb}
.sim-controls,.est-box,.sub-picker,.sx-form{background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);border-radius:20px;box-shadow:0 1px 2px rgba(20,30,60,.04),0 14px 34px rgba(20,30,60,.07)}
.sx-form{padding:20px}
.sim-card,.sub-card,.sub-pick-card,.est-result{background:linear-gradient(180deg,#ffffff,#fafbfe);border:1.5px solid var(--line-soft);border-radius:16px;box-shadow:0 1px 2px rgba(20,30,60,.04),0 8px 20px rgba(20,30,60,.05)}

/* ════════ 細部カード ＝基準デザイン整合（緊急度/約束/ヒーロー特徴/実績ミニ） ════════ */
.urgency-card{background:linear-gradient(180deg,#ffffff,#f9fbfe);box-shadow:0 1px 2px rgba(20,30,60,.04),0 10px 24px rgba(20,30,60,.05)}
.promise-list li{background:linear-gradient(180deg,#ffffff,#f9fbfe);border:1.5px solid var(--line-soft);box-shadow:0 1px 2px rgba(20,30,60,.04),0 8px 18px rgba(20,30,60,.04)}
.hero-features li{background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft);box-shadow:0 1px 2px rgba(20,30,60,.04),0 8px 20px rgba(20,30,60,.05)}
.hk-stat{box-shadow:0 1px 2px rgba(20,40,80,.03),0 8px 20px rgba(90,140,200,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.urgency-card.urgency-danger{border-top:4px solid #d70015}
.urgency-card.urgency-warn{border-top:4px solid #c2410c}
.urgency-card.urgency-watch{border-top:4px solid #1a8f4a}

/* ════════════════════════════════════════════════════════════════
   ブランド統一：既製品アイコン全廃 → 唯一のブランドマーク＋発光リングノード
   世界観で説明する（ピクトグラム不使用）。色は固定、AI／高級／未来。
   ════════════════════════════════════════════════════════════════ */
/* ── 唯一のロゴ：北海道ブランドマーク（ヘッダーロゴと同一の発光する北海道） ── */
/* ブランド統一：北海道マークはアイスブルー〜シアンの多層グロー＋ゆっくり呼吸する発光（点滅させない・常時うっすら生きる） */
.ai-logo{width:40px;height:auto;aspect-ratio:520/440;flex:0 0 auto;display:inline-block;vertical-align:middle;
  animation:bm-pulse 3.6s ease-in-out infinite;
  filter:drop-shadow(0 0 3px rgba(217,249,255,.9)) drop-shadow(0 0 9px rgba(174,239,255,.62)) drop-shadow(0 0 20px rgba(120,224,255,.4))}
@keyframes bm-pulse{
  0%,100%{filter:
    drop-shadow(0 0 3px rgba(217,249,255,.9))
    drop-shadow(0 0 9px rgba(174,239,255,.62))
    drop-shadow(0 0 20px rgba(120,224,255,.4))}
  50%{filter:
    drop-shadow(0 0 5px rgba(229,252,255,1))
    drop-shadow(0 0 14px rgba(174,239,255,.92))
    drop-shadow(0 0 30px rgba(120,224,255,.62))
    drop-shadow(0 0 54px rgba(70,190,240,.34))}}

/* ── チャットヘッド＝「サービス」ではなく「ブランド」 ── */
.chat-head{background:linear-gradient(120deg,#0d1730,#16233f 55%,#0d1730);position:relative;overflow:hidden;
  padding:16px 20px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(120,180,255,.16)}
.chat-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(140px 90px at 16% 20%,rgba(70,150,255,.24),transparent 70%)}
.chat-head-brand{position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(120,224,255,.34),rgba(120,224,255,0) 70%)}
.chat-head-brand .ai-logo{width:46px;height:auto}
.chat-head-tx{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;line-height:1.15}
.chat-head-eyebrow{font-size:.64rem;font-weight:800;letter-spacing:.26em;color:#7db8ff}
.chat-head-title{font-size:1.12rem;font-weight:800;color:#fff;letter-spacing:.01em}

/* ── フッターのロゴも同じブランドマークへ統一 ── */
.footer-brand{display:inline-flex;align-items:center;gap:10px}
.footer-brand .ai-logo{width:28px;height:auto}
/* ── ヘッダーバッジのマーク ── */
.header-badge .ai-logo{width:34px;height:auto}

/* ── 既製品アイコンの代替：CSSシェブロン（リンク誘導の「›」） ── */
.chev{display:inline-block;width:.46em;height:.46em;margin-left:.45em;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);vertical-align:middle;opacity:.8}
a:hover>.chev,.gear-cta:hover .chev{opacity:1}
/* ── 送信グリフ（紙飛行機ではなく発光シェブロン） ── */
.glyph-send{display:inline-block;width:9px;height:9px;border-right:2.4px solid currentColor;
  border-top:2.4px solid currentColor;transform:rotate(45deg);margin-left:-2px}
/* ── 写真追加グリフ（＋） ── */
.glyph-photo{position:relative;display:inline-block;width:18px;height:18px}
.glyph-photo::before,.glyph-photo::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.glyph-photo::before{left:50%;top:1px;width:2.2px;height:16px;transform:translateX(-50%)}
.glyph-photo::after{top:50%;left:1px;height:2.2px;width:16px;transform:translateY(-50%)}

/* ── 発光リングノード：STEP／症状の中央コアを点灯（ピクトグラムの代替） ── */
.flow-step-ic .orbit::before,.sym-chip-ic .orbit::before{content:"";position:absolute;top:50%;left:50%;
  width:32%;height:32%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#fff,var(--gc) 72%);box-shadow:0 0 9px var(--gc);opacity:.95}
.sym-chip.on .sym-chip-ic .orbit::before{box-shadow:0 0 13px var(--gc)}

/* ── 実績ミニ（stat）＝項目ごとの固有アイコン（2026-07-17：発光ドットの使い回しを撤去。
   数字を主役にするため、アイコンは控えめな単色トーンで統一し補助的に表示） ── */
.st-ic{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.28);color:#bfe0ff}

/* ── 約束リスト：2026-07-27にアイコン（天秤／書類／チェック／盾）を撤去し見出し文字だけにしたため、
   ここにあった .promise-ic の円形バッジ定義を削除。文言・カード意匠は無変更。 ── */

/* ── 症状結果の見出しノード ── */
.sym-card-h{display:flex;align-items:center}
.sym-card-node{flex:0 0 auto;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-right:9px;
  background:radial-gradient(circle at 50% 42%,rgba(80,160,255,.22),transparent 70%);border:1.5px solid rgba(96,170,255,.45)}
.sym-card-node::after{content:"";width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#e6f4ff,#3f8cff);box-shadow:0 0 7px rgba(96,170,255,.85)}

/* ── 対応機器カード＝白ガラス枠＋ベクター機器イラスト（写真があれば優先表示） ── */
/* 白基調＋ごく薄いアイスグレー背景：清潔感・信頼感・専門性（青は極薄アクセントのみ） */
.gear-photo{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin-bottom:14px;
  background:
    radial-gradient(1.3px 1.3px at 26% 26%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 80% 22%, rgba(226,234,242,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 78%, rgba(226,234,242,.7), transparent 60%),
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.96), rgba(255,255,255,0) 60%),
    linear-gradient(165deg,#ffffff 0%,#f7fafc 60%,#eef2f6 100%);
  border:1px solid #e7edf3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -10px 22px rgba(150,170,195,.06)}
.gear-photo.gear-warm{border-color:#e7edf3} /* 全カード白基調で統一 */
/* 機器の足元のやわらかな影（彩度を落とした中立グレー） */
.gear-photo::after{content:"";position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:0;
  width:66%;height:28%;border-radius:50%;background:radial-gradient(closest-side,rgba(120,140,170,.16),transparent 72%);filter:blur(2px)}
.gear-photo.gear-warm::after{background:radial-gradient(closest-side,rgba(120,140,170,.16),transparent 72%)}
.gear-art{position:relative;z-index:1;width:90%;height:90%;
  filter:drop-shadow(0 11px 17px rgba(30,50,90,.22)) drop-shadow(0 2px 3px rgba(30,50,90,.13))}
/* 実機の製品写真：機器を主役に・見切れ防止（contain）・中央配置・縦横比維持。
   白背景のJPGでも mix-blend-mode:multiply でクリスタルブルー背景に馴染ませ“切り抜き風”に
   （透過PNGならそのまま自然に乗る）。 */
.gear-photo img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:14px;object-fit:contain;object-position:center;mix-blend-mode:multiply;z-index:2}
.gear-photo img[src$=".png"]{mix-blend-mode:normal} /* 透過PNGはブレンド不要 */
/* 写真があるカードは背後のSVGアイコンを完全に非表示（contain余白やブレンドからの透け防止） */
.gear-photo:has(.gear-photo-img) .gear-art{display:none}
/* 電気温水器は元画像の余白が大きく機器が小さく見えるため、この1枚だけ拡大して他と視覚サイズを揃える（余白は overflow:hidden で自然にトリミング） */
.gear-photo img[src*="denki-onsuiki"]{transform:translateY(-8px) scale(2.05);transform-origin:center}

/* ── ボトムナビ＝ブランド発光ノードに統一（ピクトグラム不使用・回転なし・世界観で表現） ── */
/* ⑤ 下部ナビ＝意味の分かる発光ラインアイコン（家/カメラ/¥/診断書/メニュー）。AI発光・ホバー/選択で光る */
.botnav-item{position:relative;color:#64728c;transition:color .2s}
.botnav-item .bi{position:relative;display:grid;place-items:center;width:30px;height:26px;margin-bottom:2px}
.botnav-item .bi .navic{width:25px;height:25px;fill:none;
  filter:drop-shadow(0 0 2px rgba(80,160,255,.35));opacity:.85;transition:filter .2s,opacity .2s,transform .2s}
/* ホバーで発光 */
.botnav-item:hover{color:#1f6ae0}
.botnav-item:hover .bi .navic{opacity:1;filter:drop-shadow(0 0 6px rgba(80,160,255,.6))}
/* アクセント（写真で診断・見積もり診断）＝強発光で主役化 */
.botnav-item.is-accent{color:#1f6ae0}
.botnav-item.is-accent .bi .navic{opacity:1;filter:drop-shadow(0 0 6px rgba(90,150,255,.6))}
/* 選択中＝発光カプセル＋アイコン最大発光＋わずかに拡大 */
.botnav-item.active{color:#1746c8}
.botnav-item.active::before{content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);
  width:48px;height:30px;border-radius:14px;z-index:0;
  background:radial-gradient(60% 75% at 50% 42%,rgba(80,160,255,.22),rgba(80,160,255,0) 75%)}
.botnav-item.active .bi{z-index:1}
.botnav-item.active .bi .navic{opacity:1;transform:translateY(-1px) scale(1.08);
  filter:drop-shadow(0 0 8px rgba(80,160,255,.9))}
.botnav-item .bl{position:relative;z-index:1;font-size:.7rem;font-weight:700}

/* ════════════════════════════════════════════════════════════════
   緊急度を刷新：AI監視パネル（原子炉警告灯／未来都市の警告表示）
   危険=赤・注意=橙・要診断=緑（色分けは維持）。発光リング＋粒子＋ガラス。
   ベタ塗り・安っぽい枠線・単色丸は不使用。
   ════════════════════════════════════════════════════════════════ */
.section-urgency.alt,.section-urgency{background:linear-gradient(180deg,#0a1120,#0c1526)}
.section-urgency .section-title{color:#eaf2ff}
.section-urgency .section-lead{color:#aebfda}
.urgency-grid{display:grid;gap:18px}
.urgency-card{--uc:#19c37d;position:relative;overflow:hidden;text-align:center;padding:28px 22px 24px;border-top:0;
  background:linear-gradient(180deg,#0d1830,#0f1a2e);border:1px solid color-mix(in srgb,var(--uc) 24%,rgba(120,150,200,.14));
  border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.3),0 18px 42px rgba(0,8,24,.45),inset 0 1px 0 rgba(255,255,255,.04)}
.urgency-card.urgency-danger{--uc:#ff2d3f;border-top:0}
.urgency-card.urgency-warn{--uc:#ff8a1f;border-top:0}
.urgency-card.urgency-watch{--uc:#19c37d;border-top:0}
.urgency-card::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;
  background:radial-gradient(160px 90px at 50% 0,color-mix(in srgb,var(--uc) 24%,transparent),transparent 72%)}
.urgency-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,0,0,.3),0 24px 54px rgba(0,8,24,.55),inset 0 1px 0 rgba(255,255,255,.05)}
/* 発光リング＋中央コア */
.u-ring{position:relative;display:block;width:74px;height:74px;margin:2px auto 16px}
.u-ring::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--uc) 72%,transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--uc) 50%,transparent),inset 0 0 14px color-mix(in srgb,var(--uc) 32%,transparent)}
.u-ring::after{content:"";position:absolute;inset:25px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff,color-mix(in srgb,var(--uc) 70%,#fff) 32%,var(--uc) 78%);
  box-shadow:0 0 16px color-mix(in srgb,var(--uc) 70%,transparent)}
/* 微細な粒子（リング上を周回） */
.u-ring i{position:absolute;top:50%;left:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;
  background:color-mix(in srgb,var(--uc) 85%,#fff);box-shadow:0 0 8px var(--uc)}
.u-ring i:nth-child(1){transform:rotate(0deg) translateY(-37px)}
.u-ring i:nth-child(2){transform:rotate(120deg) translateY(-37px)}
.u-ring i:nth-child(3){transform:rotate(240deg) translateY(-37px)}
/* バッジ＝発光ピル */
.urgency-badge{position:relative;z-index:1;display:inline-block;font-weight:800;font-size:1rem;letter-spacing:.06em;
  padding:6px 22px;border-radius:980px;color:#fff;margin-bottom:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--uc) 88%,#000),var(--uc));
  border:1px solid color-mix(in srgb,var(--uc) 55%,#fff);
  box-shadow:0 0 16px color-mix(in srgb,var(--uc) 48%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.urgency-danger .urgency-badge,.urgency-warn .urgency-badge,.urgency-watch .urgency-badge{background:linear-gradient(135deg,color-mix(in srgb,var(--uc) 88%,#000),var(--uc))}
.urgency-desc{position:relative;z-index:1;color:#c4d2e6;margin:0}
.urgency-desc strong{color:#fff}
.urgency-danger .urgency-desc strong{color:#ffdadf}
/* アニメーション：危険＝速い脈動＋周回、注意＝穏やか、要診断＝安心の微発光 */
.urgency-danger .u-ring{animation:u-spin 6.5s linear infinite}
.urgency-warn .u-ring{animation:u-spin 12s linear infinite}
.urgency-watch .u-ring{animation:u-spin 20s linear infinite}
.urgency-danger .u-ring::before{animation:u-pulse 2.1s ease-in-out infinite}
.urgency-warn .u-ring::before{animation:u-pulse 3.6s ease-in-out infinite}
.urgency-watch .u-ring::before{animation:u-pulse 5s ease-in-out infinite}
@keyframes u-spin{to{transform:rotate(360deg)}}
@keyframes u-pulse{
  0%,100%{box-shadow:0 0 14px color-mix(in srgb,var(--uc) 42%,transparent),inset 0 0 12px color-mix(in srgb,var(--uc) 28%,transparent);transform:scale(1)}
  50%{box-shadow:0 0 30px color-mix(in srgb,var(--uc) 78%,transparent),inset 0 0 18px color-mix(in srgb,var(--uc) 46%,transparent);transform:scale(1.05)}}
@media(min-width:760px){.urgency-grid{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.ai-logo,.u-ring,.u-ring::before{animation:none!important}}

/* ════════════════════════════════════════════════════════════════
   フッター刷新：ブランド統一の暗ガラス「コントロールパネル」
   発光する北海道ロゴ＋上部の発光ライン＋回路アクセント。可読性も確保。
   ════════════════════════════════════════════════════════════════ */
.site-footer{position:relative;overflow:hidden;text-align:center;padding:58px 0 104px;
  background:linear-gradient(180deg,#12335c 0%,#0f2c52 55%,#0c2547 100%);color:#aebfe0}
/* 上端の発光ライン（ブランドの“通電”表現） */
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,160,255,.6),rgba(120,200,255,.35),rgba(90,160,255,.6),transparent)}
/* 中央上部の発光オーラ */
.site-footer::after{content:"";position:absolute;top:-130px;left:50%;transform:translateX(-50%);
  width:560px;height:260px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(70,150,255,.16),transparent 72%)}
.site-footer .container{position:relative;z-index:1}
.footer-brand{font-size:1.18rem;font-weight:800;color:#fff;margin:0 0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;letter-spacing:.01em}
/* フッターロゴ：このサイトの象徴。暗紺の背景に対しアイスシアンで明確に発光させる（埋もれさせない・特に強化） */
.footer-brand{position:relative}
.footer-brand .ai-logo{width:48px;height:auto;position:relative;z-index:1;
  animation:bm-pulse 3.6s ease-in-out infinite;
  filter:drop-shadow(0 0 4px rgba(229,252,255,.98)) drop-shadow(0 0 13px rgba(174,239,255,.85)) drop-shadow(0 0 30px rgba(110,215,255,.6)) drop-shadow(0 0 56px rgba(70,190,240,.32))}
/* マーク背後の柔らかな氷光ハロー（コントラスト確保） */
.footer-brand::before{content:"";position:absolute;left:0;top:50%;width:74px;height:74px;
  transform:translate(-12px,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(150,235,255,.34),rgba(120,224,255,.12) 55%,transparent 78%);
  filter:blur(2px);animation:bm-halo 3.6s ease-in-out infinite}
@keyframes bm-halo{0%,100%{opacity:.55}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.footer-brand::before{animation:none;opacity:.7}}
.footer-text{font-size:.92rem;max-width:560px;margin:0 auto 16px;line-height:1.85;color:#9fb1cc}
/* ナビ3列：見出しはアクセント、リンクは明色＋ホバー発光 */
.footer-nav{margin:30px auto 30px}
.footer-col{position:relative}
.footer-col h3{color:#7db8ff;opacity:1;font-size:.78rem;font-weight:800;letter-spacing:.12em;
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid rgba(120,160,220,.16)}
.footer-col a{color:#aabbd6;font-size:.92rem;padding:6px 0;transition:color .15s,text-shadow .15s}
.footer-col a:hover{color:#fff;text-shadow:0 0 10px rgba(120,190,255,.5)}
/* メタ情報ブロック（運営/問い合わせ/法務）を区切る */
.footer-company{color:#dbe6f7;font-weight:700;font-size:.92rem;margin:30px 0 6px;
  padding-top:24px;border-top:1px solid rgba(120,160,220,.14)}
.footer-contact{color:#9fb1cc;font-size:.9rem;margin:6px 0 0}
.footer-contact a{color:#9fd0ff;text-decoration:underline}
.footer-legal{margin:12px 0 0;font-size:.82rem}
.footer-legal a{color:#9fb1cc;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.footer-legal a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}
.footer-disclaim{color:#7e8fac;font-size:.76rem;line-height:1.8;margin:12px 0 0;max-width:640px}
.footer-small{color:#5d6f8c;font-size:.78rem;margin:14px 0 0}

/* ════════════════════════════════════════════════════════════════
   コンパクト化（縦長解消・横並び）：STEP / 症状 / 緊急度
   発光・AI感・グラデーションは維持したまま情報密度を上げる。
   ════════════════════════════════════════════════════════════════ */
/* ── STEP：縦長5枚→2列(モバイル)/5列(広幅) のコンパクト縦カード ── */
.flow-steps{grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.flow-steps{grid-template-columns:repeat(5,1fr)}}
.flow-steps li.flow-step{grid-template-columns:1fr;grid-template-areas:"ic" "no" "tx";
  justify-items:center;text-align:center;row-gap:5px;padding:14px 9px}
.flow-steps li.flow-step::before{content:none}
.flow-step-ic{margin:0 auto;width:46px;height:46px}
.flow-step-tx{align-items:center;text-align:center}
.flow-step-tx strong{font-size:.92rem;line-height:1.25}
.flow-step-tx span{font-size:.76rem;line-height:1.4}
.flow-steps li.flow-step::after{width:50px;height:28px}

/* ── 症状：2列(モバイル)/3列(広幅)。全カード高さ統一＋改行最適化＋タップしやすく ── */
.sym-grid{grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
@media(min-width:560px){.sym-grid{grid-template-columns:repeat(3,1fr)}}
.sym-chip{gap:8px;padding:11px 11px;border-radius:16px;height:76px;align-items:center}
.sym-chip.wide{grid-column:auto}
.sym-chip-ic{width:40px;height:40px}
.sym-chip::after{width:64px;height:36px}
/* ラベル：サイズ最適化＋日本語の通常折り返し（幅いっぱいで2行に収める・3行化を防ぐ） */
.sym-chip-label{flex:1;min-width:0;font-size:.83rem;font-weight:800;line-height:1.28;
  word-break:normal;overflow-wrap:break-word;text-wrap:wrap}
/* 長文ラベル（ぬるい・足りない／電気代・灯油代が高い）は少し小さくして2行に固定 */
.sym-chip.wide .sym-chip-label{font-size:.76rem;line-height:1.32}

/* ── 緊急度：縦積み3枚→横3列のコンパクト発光バー（発光演出は維持） ── */
.urgency-grid{grid-template-columns:repeat(3,1fr);gap:9px}
.urgency-card{padding:18px 9px 15px;border-radius:15px}
.urgency-card::before{height:80px}
.u-ring{width:48px;height:48px;margin:0 auto 9px}
.u-ring::before{border-width:1.6px}
.u-ring::after{inset:16px}
.u-ring i{width:3.6px;height:3.6px;margin:-1.8px}
.u-ring i:nth-child(1){transform:rotate(0deg) translateY(-24px)}
.u-ring i:nth-child(2){transform:rotate(120deg) translateY(-24px)}
.u-ring i:nth-child(3){transform:rotate(240deg) translateY(-24px)}
.urgency-badge{font-size:.84rem;padding:4px 13px;margin-bottom:8px}
.urgency-desc{font-size:.72rem;line-height:1.5}
@media(min-width:760px){.urgency-card{padding:24px 14px 20px}.u-ring{width:64px;height:64px}
  .u-ring::after{inset:21px}.u-ring i:nth-child(1){transform:rotate(0deg) translateY(-32px)}
  .u-ring i:nth-child(2){transform:rotate(120deg) translateY(-32px)}.u-ring i:nth-child(3){transform:rotate(240deg) translateY(-32px)}
  .urgency-badge{font-size:.95rem;padding:6px 20px}.urgency-desc{font-size:.86rem}}

/* ── 凍結トラブル：実写写真を主役表示（SVGはonerror時のフォールバック）＋2列(モバイル)/3列(広幅) ── */
.hk-grid-photo{grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.hk-grid-photo{grid-template-columns:repeat(3,1fr);gap:14px}}
.hk-img{display:block}
/* 元画像はほぼ正方形のため、枠を1/1にしてcoverでも上下が切れず“引いた”全体像が見えるようにする */
.hk-photo{aspect-ratio:1/1}
.hk-body{padding:11px 12px 13px;gap:4px}
.hk-head{gap:9px}
.hk-num{font-size:.7rem;padding-right:9px}
.hk-title{font-size:.92rem;letter-spacing:-.01em}
.hk-desc{font-size:.76rem;line-height:1.5}
@media(min-width:560px){.hk-title{font-size:1.02rem}.hk-desc{font-size:.84rem}.hk-body{padding:14px 16px 16px}}

/* ── 症状：意味の分かるネオン発光アイコン（薄い発光アニメ＝生きているUI） ── */
.sym-chip-ic .sym-ic{position:relative;z-index:1;width:25px;height:25px;color:var(--gc);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--gc) 60%,transparent)) drop-shadow(0 0 2px color-mix(in srgb,var(--gc) 45%,transparent));
  animation:symGlow 3.2s ease-in-out infinite}
.sym-chip-ic .orbit::before{display:none}
.sym-chip-ic::before{animation:symBreathe 3.2s ease-in-out infinite}
@keyframes symGlow{0%,100%{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gc) 45%,transparent))}50%{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gc) 75%,transparent)) drop-shadow(0 0 3px color-mix(in srgb,var(--gc) 55%,transparent))}}
@keyframes symBreathe{0%,100%{opacity:.16}50%{opacity:.34}}
.sym-chip.on .sym-chip-ic .sym-ic{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--gc) 75%,transparent))}
@media(prefers-reduced-motion:reduce){.sym-chip-ic .sym-ic,.sym-chip-ic::before{animation:none!important}}
.sym-card-node{color:var(--gc,#3f8cff);border-color:color-mix(in srgb,var(--gc,#3f8cff) 45%,transparent)}
.sym-card-node::after{display:none}
.sym-card-node .sym-ic{width:15px;height:15px;color:var(--gc,#3f8cff)}

/* ════════ FV：北海道マークを「見出しを覆うブランドシンボル」に（CTAには重ねない・極薄発光） ════════ */
/* 見出し(その給湯器…)の上〜リード文(…無料で診断します。)の下までを覆うサイズ。CTAボタンには非接触 */
.mission-visual{position:absolute!important;top:26px!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translateX(-50%)!important;width:314px!important;max-width:86vw!important;
  display:block!important;place-items:initial!important;opacity:.32!important;
  pointer-events:none!important;z-index:0!important;margin:0!important;padding:0!important}
.mission-net{width:100%!important;max-width:none!important;transform:none!important;margin:0!important;
  filter:drop-shadow(0 0 38px rgba(150,224,255,.66)) drop-shadow(0 0 14px rgba(222,244,255,.62))!important}
/* ② 輪郭をしっかり認識（濃さ1.5段階UP）。薄いブルー〜シアンで上品に強調 */
.mission-map .map-outline{fill:rgba(95,175,255,.14)!important;stroke:rgba(46,140,255,.95)!important;stroke-width:2!important}
.mission-map .map-aura{fill:rgba(95,185,255,.68)!important;stroke:rgba(120,205,255,.5)!important}
/* ③ 北海道全域カバーのAI診断ネットワークを復活（都市を発光ポイントで接続） */
.mission-map .map-edges path,.mission-map .map-flow{stroke:rgba(150,210,255,.95)!important;stroke-width:1.4!important}
.mission-map .map-nodes circle{fill:rgba(235,246,255,.98)!important}
.mission-map .map-nodes .hub{r:6!important;fill:#ffffff!important;filter:drop-shadow(0 0 7px rgba(150,210,255,1))!important}
.mission-net .pulse,.mission-net .pulse-route{filter:drop-shadow(0 0 9px rgba(190,228,255,1))!important}
.mission-copy{position:relative;z-index:3}
.mission-pill.primary{box-shadow:0 8px 22px rgba(16,45,110,.3),inset 0 1px 0 rgba(255,255,255,.16)}
@media(min-width:880px){
  .mission-visual{top:5%!important;left:auto!important;right:2%!important;transform:none!important;width:min(42%,400px)!important;opacity:.3!important}
}

/* ③ STEP：意味の分かる発光アイコンをリング内に。AI解析(STEP3)を主役化 */
.flow-step-ic .flow-ic{position:relative;z-index:1;width:24px;height:24px;color:var(--gc);
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gc) 45%,transparent))}
.flow-step-ic .orbit::before{display:none}
.flow-steps li.flow-step:nth-child(3) .flow-step-ic{transform:scale(1.08)}
.flow-steps li.flow-step:nth-child(3) .flow-step-ic .flow-ic{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gc) 75%,transparent))}
.flow-steps li.flow-step:nth-child(3) .flow-step-ic::before{animation:stepBreathe 2.6s ease-in-out infinite}
.flow-steps li.flow-step:nth-child(3) .flow-step-ic .orbit{box-shadow:0 0 10px color-mix(in srgb,var(--gc) 45%,transparent)}
@keyframes stepBreathe{0%,100%{opacity:.16;transform:scale(1)}50%{opacity:.42;transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.flow-steps li.flow-step:nth-child(3) .flow-step-ic::before{animation:none}}

/* ⑥ 症状見出しを2行固定（お湯が出ない／困った症状から探す） */
.sym-title2 .ln{display:block}
.sym-title2{line-height:1.3}

/* ⑤ STEP：2列のまま縦を圧縮（スクロール量削減） */
.flow-steps{gap:9px}
.flow-steps li.flow-step{padding:11px 8px 12px;row-gap:3px}
.flow-step-ic{width:40px;height:40px}
.flow-step-no{font-size:.74rem;letter-spacing:.12em}
.flow-step-tx strong{font-size:.88rem;line-height:1.25}
.flow-step-tx span{font-size:.74rem;line-height:1.35}
.flow-steps li.flow-step::after{width:46px;height:26px}

/* チャットヘッドのブランド名：語句単位で改行（「相談」等を割らない） */
.chat-head-eyebrow{word-break:keep-all;line-height:1.35}

/* ② AI相談フォームはLP常時表示をやめ、CTA/カード押下時のみオーバーレイで表示
   （#chatはAILoaderがオーバーレイへ移動する。#diagnosis配下にある間＝インラインの時だけ隠す） */
#diagnosis #chat{display:none}
/* ③ トップ最上部のメインCTA「AI無料診断を始める」と完全重複するため、
   ページ内の「写真1枚で無料診断」セクションは非表示にする（チャット機能=#chatはオーバーレイで利用するため温存）。 */
main#top > #diagnosis{display:none}

/* ⑤ 「AIでできること」カード（STEP番号廃止・押すと診断オーバーレイが開く） */
.flow-heading{text-align:center;font-weight:800;font-size:1.04rem;color:#15223c;margin:2px 0 12px;line-height:1.35}
.flow-heading span{display:block;font-size:.76rem;font-weight:600;color:var(--ink2);margin-top:3px}
.do-steps li.flow-step{grid-template-areas:"ic" "tx";cursor:pointer}
.do-card .flow-step-tx strong{color:var(--gc)}
.do-card:hover .flow-step-ic .flow-ic{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--gc) 70%,transparent))}
.do-card:focus-visible{outline:2px solid var(--gc);outline-offset:2px}
.do-card:active{transform:translateY(1px) scale(.99)}

/* ④ チャット内「撮影ガイドを見る」（写真ボタン付近の折りたたみ） */
.shoot-guide{margin:8px 2px 2px;font-size:.86rem}
.shoot-guide summary{cursor:pointer;color:#1f6ae0;font-weight:700;list-style:none;display:inline-flex;align-items:center;gap:7px;padding:4px 0}
.shoot-guide summary::-webkit-details-marker{display:none}
.shoot-guide summary::before{content:"";width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.shoot-guide[open] summary::before{transform:rotate(45deg)}
.shoot-guide-list{margin:7px 0 0;padding-left:1.1em;color:var(--ink2,#4d4d54);line-height:1.7}
.shoot-guide-list li{margin:2px 0}
/* 写真モード時にチャット内へ出すカード（入力欄の裏に隠れない＝スクロール領域内に出す） */
.shoot-guide-card{align-self:flex-start;max-width:92%;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:12px 15px;box-shadow:0 1px 4px rgba(20,40,90,.06)}
.shoot-guide-card .shoot-guide{margin:0}
.shoot-guide-sub{margin:5px 0 2px;font-size:.82rem;color:var(--ink2,#5a6b86);line-height:1.6}

/* 段階導入：診断後の中立分岐＋危険時の安全案内 */
.ds-branch{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ds-branch-btn{text-align:left;font-family:inherit;font-size:.95rem;font-weight:700;color:#15223c;cursor:pointer;
  background:linear-gradient(180deg,#fff,#f5f8fe);border:1.5px solid var(--line-soft,#dce4f0);border-radius:13px;
  padding:13px 15px;transition:transform .12s,box-shadow .2s,border-color .15s}
.ds-branch-btn:hover{transform:translateY(-1px);border-color:#9cc0f5;box-shadow:0 6px 16px rgba(20,30,60,.08)}
.ds-branch-btn:active{transform:translateY(1px) scale(.99)}
.ds-branch-btn.picked{border-color:#2f7bff;box-shadow:0 0 0 1.5px rgba(47,123,255,.35)}
.ds-branch-more{margin-top:10px}
.ds-branch-more>summary{cursor:pointer;font-size:.86rem;font-weight:700;color:#5a6b86;padding:6px 2px;list-style:none;display:inline-flex;align-items:center;gap:6px}
.ds-branch-more>summary::-webkit-details-marker{display:none}
.ds-branch-more>summary::before{content:"";width:7px;height:7px;border-right:2px solid #7a8ba8;border-bottom:2px solid #7a8ba8;transform:rotate(45deg);transition:transform .18s ease}
.ds-branch-more[open]>summary::before{transform:rotate(-135deg)}
.ds-branch-sub{margin-top:8px}
.ds-safety{background:linear-gradient(180deg,#fff5f5,#ffeaea);border:1.6px solid #f3b1b1;border-left:5px solid #e0392b;
  border-radius:14px;padding:15px 17px;color:#3a1414}
.ds-safety>strong{display:block;font-size:1.05rem;color:#c4231a;margin-bottom:6px}
.ds-safety p{margin:6px 0;line-height:1.7}
.ds-safety ul{margin:8px 0 0;padding-left:1.15em;line-height:1.7}
.ds-safety .ds-note{color:#7a4a45}

/* ガイド式診断 結果カード */
.rc-card{margin-top:4px}
.rc-headline{font-weight:800;color:#15223c;margin:2px 0 12px;line-height:1.5}
.pct-parts{background:linear-gradient(90deg,#f0a800,#e08a00)}
.pct-urgency{background:linear-gradient(90deg,#ff5a3c,#e0392b)}
.rc-reasons{margin:12px 0 4px;padding-left:1.1em;line-height:1.7;color:var(--ink2,#4d4d54)}
.rc-reasons li{margin:5px 0}
.rc-reasons-h{font-weight:800;color:#15223c;margin:14px 0 2px;font-size:.95rem}
.rc-confirm{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:#eef6ff;border:1px solid #cfe2fb;color:#1f4e9b;font-size:.86rem;line-height:1.6}
.rc-foot{margin-top:10px;color:#1f4e9b}

/* #4 修理可能性 ⇔ 交換推奨度（合計100％の比較バー・同時に高くならない） */
.rc-compare{margin:6px 0 2px}
.rc-compare-labels{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink2,#5a6b86);margin-bottom:5px}
.rc-cl b{font-size:1.02rem}
.rc-cl-rep b{color:#1f9d6b}
.rc-cl-rpl b{color:#e0392b}
.rc-compare-bar{display:flex;height:14px;border-radius:8px;overflow:hidden;background:#eef2f8}
.rc-cb-rep{background:linear-gradient(90deg,#3fcf8e,#1f9d6b);min-width:2px}
.rc-cb-rpl{background:linear-gradient(90deg,#ff6a4d,#e0392b);min-width:2px}

/* #6 緊急度は別軸（数値とは別カードのバッジ） */
.rc-urg{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:14px 0 2px;padding:9px 12px;border-radius:11px;border:1px solid #e3e9f2;background:#f7faff}
.rc-urg-k{font-weight:800;white-space:nowrap}
.rc-urg-t{font-size:.86rem;color:var(--ink2,#5a6b86)}
.rc-urg.u-emg{background:#fff0ee;border-color:#f3c4bd}.rc-urg.u-emg .rc-urg-k{color:#d62a1c}
.rc-urg.u-high{background:#fff6ec;border-color:#f3d8b6}.rc-urg.u-high .rc-urg-k{color:#c9701b}
.rc-urg.u-mid{background:#fffbe9;border-color:#ecdfae}.rc-urg.u-mid .rc-urg-k{color:#9a7b12}
.rc-urg.u-low{background:#eefaf2;border-color:#bfe6cf}.rc-urg.u-low .rc-urg-k{color:#1f9d6b}

/* #14 メーカー修理窓口／#15 応急処置 */
.ds-maker-list li,.ds-basis li{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-bottom:1px dashed #e6ecf5;line-height:1.6}
.ds-maker-list li:last-child{border-bottom:none}
.ds-maker-list li>span:first-child{flex:0 0 5.4em;font-weight:700;color:var(--ink2,#5a6b86);font-size:.82rem}
.ds-nc{display:inline-block;margin-left:7px;font-size:.68rem;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(224,164,0,.16);color:#9a7b12;vertical-align:middle}
.ds-aid-list{list-style:none;margin:8px 0 0;padding:0}
.ds-aid-list li{padding:9px 11px;border-radius:10px;background:#f7faff;border:1px solid #e6ecf5;margin-bottom:8px}
.ds-aid-list li strong{display:block;color:#15223c;margin-bottom:2px}
.ds-aid-list li span{display:block;color:var(--ink2,#4d4d54);font-size:.9rem;line-height:1.65}

/* 漏水：北海道で多い原因の候補（参考） */
.rc-causes{margin-top:2px}
.rc-causes li{color:#4d4d54}

/* 北海道の相談先候補（機器別・「ランキング」表現は使わない） */
.ds-partner-list{list-style:none;margin:8px 0 0;padding:0}
.ds-partner{padding:10px 12px;border-radius:11px;background:#f7faff;border:1px solid #e6ecf5;margin-bottom:9px}
.ds-partner strong{display:block;color:#13234d;font-size:1rem;margin-bottom:4px}
.ds-partner-c{display:block;color:var(--ink2,#5a6b86);font-size:.84rem;line-height:1.7}
.ds-partner-link{display:inline-block;margin-top:3px;font-weight:700;font-size:.88rem;color:#1f4e9b;text-decoration:none}
.ds-partner-link:hover{text-decoration:underline}

/* 「写真だけ送って診断する」固定導線（選ぶのが面倒な人向け・常時表示） */
.chat-photoonly{display:block;width:100%;text-align:center;font-family:inherit;font-weight:800;font-size:.95rem;
  color:#1f4e9b;cursor:pointer;border:1.5px dashed #9cc0f5;border-radius:13px;padding:10px 14px;margin:2px 0 8px;
  background:linear-gradient(180deg,#f4f9ff,#eaf3ff);transition:transform .12s,box-shadow .2s,border-color .15s}
.chat-photoonly span{display:block;font-size:.72rem;font-weight:600;color:var(--ink2,#5a6b86);margin-top:2px}
.chat-photoonly:hover{transform:translateY(-1px);border-color:#2f7bff;box-shadow:0 6px 16px rgba(47,123,255,.14)}
.chat-photoonly:active{transform:translateY(1px) scale(.99)}

/* 結果カードのAI解説（今考えられる原因／確認すること／放置リスク） */
.rc-narr{margin-top:6px;line-height:1.75;font-size:.95rem}
.rc-narr p{margin:6px 0}
.rc-narr ul,.rc-narr ol{padding-left:1.2em;margin:6px 0}
.rc-narr li{margin:3px 0}

/* ───────────────────────────────────────────────────────────────
   ① 北海道マップ強化：ブランドシンボルとして存在感UP（約140%・氷ブルー発光強化・脈動維持）
   ─────────────────────────────────────────────────────────────── */
.mission-visual{opacity:.46!important}
.mission-net{transform:scale(1.4)!important;transform-origin:50% 46%;
  filter:drop-shadow(0 0 46px rgba(120,205,255,.7)) drop-shadow(0 0 16px rgba(220,244,255,.62))!important}
@media (min-width:880px){
  .mission-visual{opacity:.4!important}
  .mission-net{transform:translateX(4%) scale(1.46)!important}
}
/* 都市ノードと巡回ラインをやや明るく（AIネットワーク感） */
.mission-map .map-nodes .tw{r:3.4}
.mission-map .map-nodes .hub{r:6.4!important}
.mission-map .map-edges path,.mission-map .map-flow{stroke-width:1.6!important}
@media (prefers-reduced-motion:reduce){.mission-net{animation:none}}

/* ───────────────────────────────────────────────────────────────
   ⑦ 対応機器スライダー（自動横スクロール・補足情報。主役はAI診断＝控えめ）
   ─────────────────────────────────────────────────────────────── */
.dev-marquee{overflow:hidden;width:100%;max-width:1100px;margin:0 auto;padding:8px 0 4px;box-sizing:border-box;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.dev-track{display:flex;align-items:center;gap:14px;width:max-content;animation:devScroll 30s linear infinite}
.dev-marquee:hover .dev-track{animation-play-state:paused}
/* 実機写真カード：写真の横に機器名（カード型・明るく清潔に） */
.dev-chip{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  background:#fff;border:1px solid #e7edf3;border-radius:14px;padding:8px 16px 8px 10px;
  box-shadow:0 1px 2px rgba(20,40,80,.04),0 6px 14px rgba(90,140,200,.07)}
.dev-photo{width:58px;height:46px;flex:0 0 auto;object-fit:contain;object-position:center}
/* 電気温水器は元画像の余白が大きく機器が小さく見えるため、
   同サイズの枠でクリップしつつ画像を拡大して他機種と同サイズ感に（縦横比維持・はみ出しなし） */
.dev-photo-zoom{width:58px;height:46px;flex:0 0 auto;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}
.dev-photo-zoom .dev-photo{transform:scale(1.5);transform-origin:center}
.dev-chip b{font-size:.95rem;font-weight:700;color:#1f3a63;letter-spacing:.01em}
@keyframes devScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .dev-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .dev-marquee{-webkit-mask:none;mask:none}
}

/* ───────────────────────────────────────────────────────────────
   ⑨ ABテスト：CTAカラー実験（A=濃紺/標準・B=クリアブルー・C=濃紺→青グラデ）
   ─────────────────────────────────────────────────────────────── */
.mission-pill.primary.ab-color-B{background:linear-gradient(165deg,#3aa6f0 0%,#1f8ce4 55%,#1668c0 100%)}
.mission-pill.primary.ab-color-C{background:linear-gradient(135deg,#0f2f6a 0%,#1f6ad0 100%)}

/* ═══════════════════════════════════════════════════════════════════
   ⑩ AIチャット レイアウト堅牢化（文字かぶり根絶・構造から再設計）
   方針：
   - 固定height禁止／min-heightのみ＝内容量で自動拡張
   - 全テキスト強制折返し（overflow-wrap:anywhere / word-break / white-space:normal）
   - 行間1.7以上・見出しと本文の余白を必ず確保
   - position:absoluteや z-index による無理な重ね合わせをしない
   - リッチカードは吹き出しの幅制約を受けず全幅表示（入れ子による窮屈さを解消）
   .chat スコープなので、インライン表示でも全画面オーバーレイ表示でも同一に効く。
   ═══════════════════════════════════════════════════════════════════ */
/* 1) 文字かぶり根絶：チャット内の全テキストを強制的に折り返す */
.chat .msg,
.chat .msg p,.chat .msg li,.chat .msg span,.chat .msg strong,.chat .msg b,.chat .msg a,
.chat .ds-block,.chat .ds-block p,.chat .ds-block li,.chat .ds-block a,.chat .ds-block strong,
.chat .result-card,.chat .result-card p,.chat .result-card li,.chat .result-card a,.chat .result-card strong,
.chat .rc-card,.chat .rc-card p,.chat .rc-card li,.chat .rc-card a,.chat .rc-card strong,
.chat .ds-h,.chat .rc-headline,.chat .rc-reasons-h,.chat .result-h,
.chat .ds-partner-card,.chat .ds-partner-card a{
  overflow-wrap:anywhere;word-break:break-word;
}
/* 見出しは独立ブロック化＝1行に詰め込まず自然に折り返す */
.chat .ds-h,.chat .result-h,.chat .rc-headline,.chat .rc-reasons-h{white-space:normal;flex-wrap:wrap}
.chat .ds-h{align-items:baseline;row-gap:2px}
/* 見出し直後の本文に必ず上方向の余白（タイトルと本文がくっつかない） */
.chat .ds-h + *{margin-top:2px}
/* 固定heightを使わない：カードは内容で伸びる（高さは内容で決まる） */
.chat .ds-block,.chat .result-card,.chat .rc-card{height:auto}
/* 【重要】チャットログは縦スクロール式のflex列。子要素が縦に潰れて
   overflow:hiddenで文字が切れる/重なるのを防ぐため、子は決して縮めない。
   これが「文字かぶり」の根本原因だった（flex-shrinkで内容より低く潰れていた）。 */
.chat .chat-log{align-items:stretch}
.chat .chat-log > *{flex:0 0 auto}
/* 念のため、装飾用のはみ出しクリップが本文を切らないよう、カードは内容を隠さない */
.chat .ds-block,.chat .result-card,.chat .rc-card,.chat .ds-partner-card{overflow:visible}
/* 吹き出し内の行間を底上げ（長文でも詰まらない） */
.chat .msg-ai,.chat .msg-user{line-height:1.75}
/* 横並びテキスト行は内容に応じて縮められるよう min-width:0（折返しを効かせる） */
.chat .rc-cl,.chat .rc-urg,.chat .dpc-meta li,.chat .dpc-v,.chat .dpc-chips,.chat .msg-row{min-width:0}

/* 2) 構造：診断結果・判断材料・AI解説・相談先などのリッチブロックは
      吹き出し(.msg-ai)の背景/余白/幅制約を解除して全幅で表示する。
      （吹き出し入れ子による「窮屈・左に寄る・過剰な折返し」を根本解消） */
.chat .msg-row-ai:has(.result-card),
.chat .msg-row-ai:has(.rc-card),
.chat .msg-row-ai:has(.ds-block),
.chat .msg-row-ai:has(.ds-h),
.chat .msg-row-ai:has(.rc-narr),
.chat .msg-row-ai:has(.model-card),
.chat .msg-row-ai:has(.model-confirm),
.chat .msg-row-ai:has(.ds-partners){max-width:100%;width:100%;align-items:stretch}
.chat .msg-row-ai:has(.result-card) .msg-avatar,
.chat .msg-row-ai:has(.rc-card) .msg-avatar,
.chat .msg-row-ai:has(.ds-block) .msg-avatar,
.chat .msg-row-ai:has(.ds-h) .msg-avatar,
.chat .msg-row-ai:has(.rc-narr) .msg-avatar,
.chat .msg-row-ai:has(.model-card) .msg-avatar,
.chat .msg-row-ai:has(.ds-partners) .msg-avatar{display:none}
.chat .msg-ai:has(.result-card),
.chat .msg-ai:has(.rc-card),
.chat .msg-ai:has(.ds-block),
.chat .msg-ai:has(.ds-h),
.chat .msg-ai:has(.rc-narr),
.chat .msg-ai:has(.model-card),
.chat .msg-ai:has(.model-confirm),
.chat .msg-ai:has(.ds-partners){
  background:transparent;border:none;box-shadow:none;padding:0;max-width:100%;width:100%;border-radius:0;
}

/* 3) 修理/交換 比較ラベル：左右で縦積み（ラベル→％）にして窮屈な改行を防ぐ */
.chat .rc-compare-labels{align-items:flex-start;gap:14px}
.chat .rc-cl{display:flex;flex-direction:column;line-height:1.35}
.chat .rc-cl-rpl{text-align:right;align-items:flex-end}
.chat .rc-cl .rc-cl-t{font-size:.82rem;color:var(--ink2,#5a6b86)}
.chat .rc-cl b{font-size:1.18rem;line-height:1.2}

/* 4) 緊急度・根拠など横並びブロックも狭幅で重ならないよう確実に折返し */
.chat .rc-urg{flex-wrap:wrap}
.chat .ds-basis li span{margin-bottom:1px}

/* ═══════════════════════════════════════════════════════════════════
   ⑪ 相談先カード（会社名・連絡先・得意分野＋[公式サイトを見る][電話する]）
   ═══════════════════════════════════════════════════════════════════ */
.ds-partners .ds-partner-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ds-partner-card{background:#fff;border:1px solid #e2e9f4;border-radius:14px;padding:14px 15px;
  box-shadow:0 1px 2px rgba(20,40,80,.04),0 8px 18px rgba(31,79,158,.06)}
.dpc-head{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.dpc-name{font-size:1.08rem;font-weight:800;color:#13234d;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.dpc-tag{font-size:.85rem;color:#5a6b86;line-height:1.6;overflow-wrap:anywhere}
.dpc-note{font-size:.85rem;color:#5a6b86;line-height:1.7;margin:0 0 9px}
.dpc-meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dpc-meta li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.65}
.dpc-k{flex:0 0 5.5em;font-weight:700;color:#13234d;font-size:.8rem;padding-top:2px;white-space:nowrap}
.dpc-v{flex:1 1 auto;min-width:0;color:#33405c;overflow-wrap:anywhere;word-break:break-word}
.dpc-v a{color:#1f4e9b;font-weight:600;text-decoration:none;overflow-wrap:anywhere;word-break:break-word}
.dpc-v a:hover{text-decoration:underline}
.dpc-muted{color:#8a97ad}
.dpc-spec{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.dpc-spec .dpc-k{padding-top:4px}
.dpc-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.dpc-chip{background:#eef4ff;color:#1f4e9b;border:1px solid #d8e6fb;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700;line-height:1.6}
.dpc-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.dpc-btn{flex:1 1 auto;min-width:150px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 14px;border-radius:11px;font-weight:800;font-size:.92rem;text-decoration:none;cursor:pointer;line-height:1.3}
.dpc-btn-web{background:linear-gradient(135deg,#2f80ed,#2f6fe0);color:#fff;border:none;box-shadow:0 6px 14px rgba(31,79,158,.18)}
.dpc-btn-web:hover{filter:brightness(1.05)}
.dpc-btn-tel{background:#fff;color:#1f4e9b;border:1.5px solid #2f80ed}
.dpc-btn-tel:hover{background:#eef4ff}

/* ⑫ 診断後の最終CTA（別の症状／写真診断／トップへ）＝会話を途中終了させない */
.ds-final-ctas .dfc-grid{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.dfc-btn{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;
  background:#f6f9ff;border:1.5px solid #d8e6fb;border-radius:13px;padding:13px 15px;cursor:pointer;font-family:inherit;
  transition:border-color .15s,transform .12s,box-shadow .2s}
.dfc-btn:hover{border-color:#2f80ed;transform:translateY(-1px);box-shadow:0 8px 18px rgba(31,79,158,.10)}
.dfc-btn b{font-size:1rem;color:#13234d;font-weight:800;line-height:1.4}
.dfc-btn span{font-size:.82rem;color:#5a6b86;line-height:1.5}
@media(min-width:520px){.ds-final-ctas .dfc-grid{flex-direction:row}.dfc-btn{flex:1 1 0;min-width:0}}

/* ═══════════════════════════════════════════════════════════════════
   ⑬ 北海道 地域別 給湯機器リスク情報（チップ押下でスライドパネル表示）
   方針：トップに情報を増やさない＝普段は何も出さず、押した時だけパネル。
   ═══════════════════════════════════════════════════════════════════ */
.hk-now-hint{font-size:.74rem;color:#5a6b86;margin:11px 0 0;line-height:1.6}
.hk-now-hint strong{color:#1f4e9b}
/* 実データから算出した現在の凍結状況サマリー（バッジ＋一文） */
.hk-now-summary{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding:11px 13px;border-radius:14px;line-height:1.55;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(206,231,255,.8)}
.hk-sum-badge{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:800;padding:4px 11px;border-radius:999px;
  color:#1f4e9b;background:rgba(219,234,254,.85);border:1px solid rgba(159,196,239,.7)}
.hk-sum-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#2ea44f}
.hk-sum-text{font-size:.82rem;color:#33415c;flex:1;min-width:0}
.hk-now-summary.lv-y .hk-sum-badge{color:#8a6500;background:rgba(255,244,214,.9);border-color:rgba(224,164,0,.4)}
.hk-now-summary.lv-y .hk-sum-badge::before{background:#e0a400}
.hk-now-summary.lv-o{border-color:rgba(232,115,12,.35)}
.hk-now-summary.lv-o .hk-sum-badge{color:#a34d06;background:rgba(255,235,214,.9);border-color:rgba(232,115,12,.4)}
.hk-now-summary.lv-o .hk-sum-badge::before{background:#e8730c}
.hk-now-summary.lv-r{border-color:rgba(224,53,43,.4);background:linear-gradient(180deg,#fff6f5,rgba(255,246,245,.8))}
.hk-now-summary.lv-r .hk-sum-badge{color:#c62a20;background:rgba(255,229,227,.95);border-color:rgba(224,53,43,.45)}
.hk-now-summary.lv-r .hk-sum-badge::before{background:#e0352b;animation:hkDanger 1.5s ease-in-out infinite}
/* 北海道の冬に気をつけたいこと（季節の目安・honestなガイド。ライブ警報ではない） */
.hk-advisory{margin:12px 0 0;padding:12px 13px;border-radius:14px;
  background:rgba(255,255,255,.4);border:1px dashed rgba(159,196,239,.75)}
.hk-adv-h{margin:0 0 9px;font-size:.78rem;font-weight:800;color:#13234d}
.hk-adv-note{font-weight:600;font-size:.68rem;color:#7c8aa6;margin-left:4px}
.hk-adv-chips{display:flex;flex-wrap:wrap;gap:7px}
.hk-adv-chip{display:inline-flex;align-items:center;font-size:.76rem;font-weight:700;color:#1f4e9b;
  text-decoration:none;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid rgba(206,231,255,.9);
  transition:transform .12s,box-shadow .15s,border-color .15s}
.hk-adv-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(90,140,200,.18);border-color:#9fc4ef}
.hk-adv-chip:focus-visible{outline:2px solid #2f80ed;outline-offset:2px}
/* 診断導線近くの気象コンパクト誘導（小さく・非侵襲） */
.hk-weather-cue{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:.82rem;font-weight:700;color:#1f4e9b;text-decoration:none;
  padding:8px 13px;border-radius:999px;
  background:linear-gradient(180deg,rgba(238,248,255,.9),rgba(221,243,255,.7));
  border:1px solid rgba(159,196,239,.65);transition:transform .12s,box-shadow .15s}
.hk-weather-cue:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(90,140,200,.18)}
.hk-weather-cue:focus-visible{outline:2px solid #2f80ed;outline-offset:2px}
.hk-cue-arrow{font-weight:800;transition:transform .15s}
.hk-weather-cue:hover .hk-cue-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.hk-now-summary.lv-r .hk-sum-badge::before{animation:none}
  .hk-adv-chip,.hk-weather-cue,.hk-cue-arrow{transition:none}}
/* チップを押せる見た目に（既存デザインは維持・affordanceのみ付与） */
.hk-city--tap{cursor:pointer;transition:transform .12s,box-shadow .15s,border-color .15s}
.hk-city--tap:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(90,140,200,.20)}
.hk-city--tap:focus-visible{outline:2px solid #2f80ed;outline-offset:2px}
/* 停電中の地域チップ＝品位ある赤発光（ゆっくり点滅・過度でない） */
.hk-city--outage{border-color:#f3b4ae!important;background:#fff3f1!important;animation:hkOutage 2.6s ease-in-out infinite}
.hk-city--outage b{color:#c62a20}
@keyframes hkOutage{0%,100%{box-shadow:0 0 0 0 rgba(224,53,43,0)}50%{box-shadow:0 0 12px 2px rgba(224,53,43,.42)}}

/* スライドパネル（モバイル＝下からせり上がり／PC＝中央） */
.rr-overlay{position:fixed;inset:0;z-index:1200;background:rgba(12,24,48,.46);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .24s}
.rr-overlay.rr-show{opacity:1}
.rr-overlay[hidden]{display:none}
.rr-sheet{position:relative;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#ffffff,#f6f9ff);border-radius:22px 22px 0 0;
  box-shadow:0 -16px 50px rgba(10,25,60,.32);padding:16px 18px 26px;
  transform:translateY(20px);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.rr-overlay.rr-show .rr-sheet{transform:translateY(0)}
.rr-grip{width:38px;height:4px;border-radius:999px;background:#cfd9ea;margin:2px auto 12px}
.rr-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:none;border-radius:50%;
  background:#eef2f8;color:#5a6b86;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.rr-close:hover{background:#e2e9f4}
@media(min-width:600px){.rr-overlay{align-items:center}.rr-sheet{border-radius:22px}}

.rr-head{margin:0 0 12px;padding-right:38px}
.rr-region{font-size:1.16rem;font-weight:800;color:#13234d;line-height:1.4}

/* 給湯器故障警戒レベル（最重要＝大きく色分け。危険は点滅） */
.rr-level{display:flex;align-items:center;justify-content:space-between;gap:10px;border-radius:14px;padding:14px 18px;margin:0 0 10px}
.rr-level-k{font-size:.94rem;font-weight:800}
.rr-level-v{font-size:1.7rem;font-weight:900;line-height:1;letter-spacing:.03em}
.rr-level.lv-g{background:#e9f7ef;color:#2a8f46}
.rr-level.lv-y{background:#fdf3da;color:#b08200}
.rr-level.lv-o{background:#fdece0;color:#cf650a}
.rr-level.lv-r{background:#fbe4e2;color:#d12c22}
.rr-level.rr-blink{animation:rrBlink 1.3s ease-in-out infinite}
@keyframes rrBlink{0%,100%{box-shadow:0 0 0 0 rgba(224,53,43,0)}50%{box-shadow:0 0 0 3px rgba(224,53,43,.30),0 0 18px 2px rgba(224,53,43,.28)}}
.rr-level-msg{font-size:.92rem;color:#3a4660;line-height:1.7;margin:0 0 12px}

/* 気象庁の公式警報（あれば） */
.rr-official-line{display:inline-block;font-size:.82rem;font-weight:800;color:#c62a20;background:#fbe4e2;border:1px solid #f3b4ae;border-radius:8px;padding:5px 11px;margin:0 0 12px;line-height:1.55}

/* 気温（現在／最低／最高） */
.rr-temps{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;font-size:1.02rem;color:#23304c;margin:0 0 12px;font-weight:700}
.rr-temp-ic{display:inline-flex;width:19px;height:19px;flex:none;color:#3f78d8}.rr-temp-ic svg{width:100%;height:100%}
.rr-temps b{font-size:1.45rem;font-weight:900;color:#13234d;font-variant-numeric:tabular-nums}
.rr-temp-sub{font-size:.84rem;font-weight:600;color:#5a6b86}

/* 構成リスク（凍結・暴風雪・着雪/積雪・停電のうち該当のみ） */
.rr-comp-list{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.rr-comp{display:flex;align-items:center;gap:10px;border:1px solid #e6ecf5;border-radius:11px;padding:11px 13px;background:#fff}
.rr-comp-ic{display:inline-flex;width:20px;height:20px;flex:0 0 auto;color:currentColor}.rr-comp-ic svg{width:100%;height:100%}
.rr-comp-n{font-size:1rem;font-weight:700;color:#23304c;flex:1 1 auto;min-width:0}
.rr-comp-v{font-size:.84rem;font-weight:800;padding:3px 12px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.rr-comp.lv-r{border-color:#f3c0ba;background:#fff7f6}.rr-comp.lv-o{border-color:#f5d2b6}.rr-comp.lv-y{border-color:#f0e2b0}
.rr-comp-v.lv-g{background:#e9f7ef;color:#2a8f46}.rr-comp-v.lv-y{background:#fdf3da;color:#b08200}
.rr-comp-v.lv-o{background:#fdece0;color:#cf650a}.rr-comp-v.lv-r{background:#fbe4e2;color:#d12c22}

/* 停電バナー（最優先・上品） */
.rr-outage{border:1.5px solid #f3b4ae;background:linear-gradient(180deg,#fff5f3,#fff);border-radius:14px;
  padding:13px 15px;margin:12px 0 0;box-shadow:0 6px 16px rgba(224,53,43,.10)}
.rr-outage-h{display:flex;align-items:center;gap:9px;font-size:1.04rem;font-weight:800;color:#c62a20;margin-bottom:6px}
.rr-outage-pulse{width:11px;height:11px;border-radius:50%;background:#e0352b;flex:0 0 auto;animation:hkOutage 2.6s ease-in-out infinite}
.rr-outage p{font-size:.89rem;color:#5a3a37;line-height:1.7;margin:0 0 11px}
.rr-outage-note{color:#8a4a44}
.rr-outage-btn{display:inline-flex;align-items:center;justify-content:center;background:#e0352b;color:#fff;
  font-weight:800;font-size:.94rem;padding:12px 18px;border-radius:11px;text-decoration:none}
.rr-outage-btn:hover{background:#c62a20}
.rr-outage-link{display:inline-block;margin-left:10px;font-size:.86rem;font-weight:700;color:#c62a20;text-decoration:underline}

/* 実停電を当サイトでは自動取得していない旨（捏造しない）。停電リスク（推定）とは別物 */
.rr-hokuden{font-size:.82rem;color:#5a6b86;line-height:1.65;margin:10px 0 0;background:#f6f8fc;border:1px solid #e6ecf5;border-radius:10px;padding:9px 12px}
.rr-hokuden a{color:#2f6fd6;font-weight:700;text-decoration:underline}

/* 地震の記録（予知ではなく発生済みの事実） */
.rr-quake{margin:12px 0 0;border:1px solid #e3e2d6;background:linear-gradient(180deg,#fffdf5,#fff);border-radius:13px;padding:12px 13px}
.rr-quake-h{display:flex;align-items:center;gap:7px;font-size:.95rem;font-weight:800;color:#7a5d12;margin-bottom:5px}
.rr-quake-h .rr-ic{display:inline-flex;width:17px;height:17px;flex:none}.rr-quake-h .rr-ic svg{width:100%;height:100%}
.rr-quake-main{font-size:.98rem;color:#2b3a55;margin:0 0 2px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rr-quake-main b{font-size:1.06rem}
.rr-quake-t{font-size:.78rem;color:#8a96ab;font-weight:600}
.rr-quake-sub{font-size:.83rem;color:#5a6b86;margin:0 0 6px}
.rr-quake-check{font-size:.85rem;color:#8a4a44;line-height:1.7;margin:6px 0 0;background:#fff5f3;border-radius:8px;padding:8px 10px}
.rr-quake-note{font-size:.74rem;color:#90a0bd;line-height:1.6;margin:7px 0 0}
.rr-quake-note b{color:#6a7894}

/* 情報源（透明性） */
.rr-sources{margin:12px 0 0;font-size:.8rem}
.rr-sources>summary{cursor:pointer;color:#5a6b86;font-weight:700;list-style:none}
.rr-sources>summary::-webkit-details-marker{display:none}
.rr-sources>summary::before{content:'ⓘ ';color:#9aa8c2}
.rr-sources ul{margin:8px 0 0;padding-left:2px;list-style:none}
.rr-sources li{color:#6a7894;line-height:1.65;margin:0 0 3px}
.rr-src-l{font-weight:700;color:#46587a}

.rr-loading{display:flex;align-items:center;gap:9px;font-size:.92rem;color:#5a6b86;padding:20px 2px}
.rr-spin{width:16px;height:16px;border-radius:50%;border:2px solid #cfe0f7;border-top-color:#2f80ed;flex:0 0 auto;animation:rrSpin .8s linear infinite}
@keyframes rrSpin{to{transform:rotate(360deg)}}
.rr-note{font-size:.9rem;color:#5a6b86;line-height:1.65;margin:8px 0}
.rr-foot{font-size:.72rem;color:#90a0bd;line-height:1.6;margin:14px 0 0;border-top:1px solid #eef1f7;padding-top:10px}

@media(prefers-reduced-motion:reduce){
  .hk-city--outage,.rr-outage-pulse,.rr-level.rr-blink{animation:none}
  .rr-level.rr-blink{box-shadow:0 0 0 3px rgba(224,53,43,.30)}
  .rr-overlay,.rr-sheet{transition:none}
  .rr-spin{animation-duration:2.4s}
}

/* ⑭ 外部情報からの確認ポイント（AI診断内・断定しない＝可能性/確認推奨） */
.ds-extintel .ei-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ei-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #e6ecf5;border-radius:11px;padding:11px 13px}
.ei-tag{flex:0 0 auto;font-size:.72rem;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.ei-tag.ei-weather{background:#e8f3fc;color:#1f6fb0}
.ei-tag.ei-outage{background:#fbe4e2;color:#c62a20}
.ei-tag.ei-maker{background:#e9f7ef;color:#2a8f46}
.ei-tag.ei-parts{background:#fdf3da;color:#9a7b12}
.ei-body{flex:1 1 auto;min-width:0}
.ei-body strong{display:block;font-size:.94rem;color:#13234d;line-height:1.5}
.ei-body p{font-size:.86rem;color:#3a4660;line-height:1.65;margin:4px 0 0}
.ei-src{display:block;font-size:.74rem;color:#8a97ad;margin-top:5px}

/* ⑮ 相談窓口（診断完了後・株式会社TopRunner運営）。第三者評価/ランキング/提携店表現なし・絵文字なし */
.ds-consult .consult-owner{display:flex;flex-direction:column;gap:1px;margin:0 0 9px}
.consult-owner-run{font-size:.82rem;font-weight:800;color:#13234d}
.consult-owner-site{font-size:.76rem;color:#5a6b86;overflow-wrap:anywhere}
.ds-consult .consult-h{margin:0 0 10px}
.consult-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.consult-card{border:1px solid #e2e9f4;border-radius:13px;padding:13px 14px;background:#fff;display:flex;flex-direction:column;gap:9px}
.consult-name{font-size:1.05rem;font-weight:800;color:#13234d;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
.consult-open{align-self:flex-start;min-height:44px;padding:10px 22px;border:1.5px solid #2f6fe0;background:#2f6fe0;color:#fff;font-weight:800;font-size:.95rem;border-radius:11px;cursor:pointer;font-family:inherit}
.consult-open.open{background:#fff;color:#2f6fe0}
.consult-web{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;border:1.5px solid #c5d6f2;border-radius:11px;background:#fff;color:#1f4e9b;font-weight:700;font-size:.9rem;text-decoration:none}
.consult-web:hover{color:#2f6fe0;border-color:#2f6fe0}
.consult-channels{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.consult-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 14px;border-radius:11px;font-weight:800;font-size:.95rem;text-decoration:none;line-height:1.3;border:1.5px solid #2f6fe0}
.consult-tel{background:#2f6fe0;color:#fff;border-color:#2f6fe0}
.consult-mail{background:#fff;color:#1f4e9b}
.consult-line{background:#fff;color:#1f7a44;border-color:#5bbd7e}
.consult-btn:hover{filter:brightness(1.03)}
.consult-diagid{font-size:.78rem;color:#5a6b86;margin:-2px 0 2px;line-height:1.5}
.consult-prep{font-size:.84rem;color:#5a6b86;line-height:1.6;margin:0}
.consult-fallback{font-size:.82rem;color:#5a6b86}
.consult-fallback summary{cursor:pointer;color:#1f4e9b;padding:6px 0}
.consult-mailaddr{font-size:.86rem;color:#23304c;word-break:break-all;margin:6px 0}
.consult-fb-btns{display:flex;flex-wrap:wrap;gap:8px}
.consult-mini{min-height:44px;padding:9px 13px;border:1px solid #cfdcee;background:#f6f9ff;color:#1f4e9b;border-radius:9px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit}
.consult-note{font-size:.78rem;color:#64718c;line-height:1.6;margin:12px 0 0}

/* ⑯ 相談事例（口コミ・お客様の声を置換）。星/顔写真/評価/感謝コメントなし・絵文字なし・白＋薄紫基調 */
.cc-tabs{display:flex;gap:8px;margin:18px 0 16px;flex-wrap:wrap}
.cc-tab{flex:1 1 0;min-width:150px;min-height:46px;padding:11px 14px;border:1.5px solid var(--line-soft,#e6e3f0);background:#fff;color:var(--ink2,#5a6b86);font-weight:800;font-size:.95rem;border-radius:12px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s}
.cc-tab.is-on{background:#3a3470;border-color:#3a3470;color:#fff}
.cc-panel[hidden]{display:none}
.cc-list{display:grid;grid-template-columns:1fr;gap:14px}
.cc-card{background:linear-gradient(180deg,#ffffff,#f8f7fc);border:1.5px solid #e7e3f1;border-radius:16px;padding:16px 17px;text-align:left;
  box-shadow:0 1px 2px rgba(30,24,60,.04),0 10px 24px rgba(40,30,80,.05)}
.cc-title{font-size:1.06rem;font-weight:800;color:#1c2440;margin:0 0 9px;line-height:1.55;overflow-wrap:anywhere}
.cc-equip{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:#3a4660;margin:0 0 12px;font-weight:700}
.cc-equip-k{font-size:.72rem;font-weight:800;color:#5d51a0;background:#f0edf9;border:1px solid #e3ddf3;border-radius:999px;padding:3px 10px}
.cc-block{margin:0 0 10px}
.cc-block:last-child{margin-bottom:0}
.cc-block-k{display:block;font-size:.76rem;font-weight:800;color:#5d51a0;margin-bottom:4px}
.cc-block p{margin:0;font-size:.92rem;line-height:1.8;color:#2b3550}
.cc-more{text-align:center;margin:16px 0 0}
.cc-more[hidden]{display:none}
.cc-more-btn{min-height:46px;padding:11px 22px;border:1.5px solid var(--accent,#2f6fe0);background:#fff;color:var(--accent,#2f6fe0);font-weight:800;font-size:.92rem;border-radius:12px;cursor:pointer;font-family:inherit}
.cc-more-btn:hover{background:#eef4ff}
.cc-collapsed .cc-extra{display:none}
/* よくあるご相談（アコーディオン・初期は全閉） */
.cc-faq{border:1.5px solid #e7e3f1;border-radius:13px;background:#fff;margin:0 0 10px;overflow:hidden}
.cc-faq summary{list-style:none;cursor:pointer;padding:15px 16px;font-size:1rem;font-weight:800;color:#1c2440;display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:1.5}
.cc-faq summary::-webkit-details-marker{display:none}
.cc-faq summary::after{content:"＋";color:#5d51a0;font-weight:800;font-size:1.1rem;flex:0 0 auto}
.cc-faq[open] summary::after{content:"−"}
.cc-faq[open] summary{border-bottom:1px solid #efe9f6}
.cc-faq-a{padding:13px 16px 16px;font-size:.92rem;line-height:1.8;color:#2b3550}
@media(min-width:760px){.cc-list{grid-template-columns:repeat(2,1fr);gap:16px}.cc-tab{flex:0 0 auto;min-width:190px}}
@media(max-width:599px){.cc-collapsed .cc-pc3{display:none}}

/* ⑰ 旧「症状から探す」コマンドバー（#firstaid-now / .symcmd-*）のCSSは、対象要素が
   2026-07-17のデザイン刷新で消滅したため2026-07-26に削除（未使用・適用先ゼロ）。 */

/* ⑱ 費用対効果シミュレーション（検討客向け・3パターン／落ち着いた比較・赤色不使用・絵文字なし） */
.cb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 12px}
.cb-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:linear-gradient(180deg,#ffffff,#f7f8fe);
  border:1.5px solid #e4e3f2;border-radius:15px;padding:15px;cursor:pointer;font-family:inherit;text-align:left;
  transition:border-color .15s,transform .12s,box-shadow .2s;min-height:44px}
.cb-card:hover{border-color:#9db8f0;transform:translateY(-1px);box-shadow:0 8px 20px rgba(60,70,160,.10)}
.cb-route{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cb-from,.cb-to{font-weight:800;color:#1c2440;font-size:1rem;line-height:1.3}
.cb-to{color:#3f49a0}
.cb-arrow{color:#9aa3c8;font-weight:800}
.cb-hint{font-size:.8rem;color:#6b7393;line-height:1.5}
.cb-go{margin-top:auto;font-size:.84rem;font-weight:800;color:#3f6fd6}
.cb-foot{font-size:.78rem;color:#6b7393;line-height:1.6;margin:8px 0 0}
@media(max-width:680px){.cb-cards{grid-template-columns:1fr;gap:10px}.cb-card{flex-direction:row;align-items:center;flex-wrap:wrap}.cb-go{margin:0 0 0 auto}}

.cb-modal{position:fixed;inset:0;z-index:1300;background:rgba(20,22,48,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.cb-modal.cb-show{opacity:1}
.cb-modal[hidden]{display:none}
.cb-sheet{width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#f7f8fe);
  border-radius:20px 20px 0 0;box-shadow:0 -16px 50px rgba(20,25,60,.3);transform:translateY(18px);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.cb-modal.cb-show .cb-sheet{transform:translateY(0)}
@media(min-width:600px){.cb-modal{align-items:center}.cb-sheet{border-radius:20px}}
.cb-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #eceaf6;position:sticky;top:0;background:#fff;border-radius:20px 20px 0 0;z-index:1}
.cb-sheet-title{font-size:1.02rem;font-weight:800;color:#1c2440}
.cb-x{width:34px;height:34px;border:none;border-radius:50%;background:#f0eef8;color:#5a6b86;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.cb-sheet-body{overflow-y:auto;padding:15px 16px 22px}
.cb-route-lg{margin:0 0 12px;font-size:1.1rem}
.cb-route-lg .cb-from,.cb-route-lg .cb-to{font-size:1.12rem}
.cb-form{display:flex;flex-direction:column;gap:11px}
.cb-row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cb-field{display:flex;flex-direction:column;gap:5px;font-size:.8rem;color:#5a6b86;font-weight:700}
.cb-field select,.cb-field input{font-size:1rem;font-family:inherit;border:1.5px solid #dcd9ee;border-radius:10px;padding:11px 12px;background:#fff;color:#1c2440;min-height:44px}
.cb-field select:focus,.cb-field input:focus{outline:none;border-color:#7e8fe0;box-shadow:0 0 0 3px rgba(140,150,230,.18)}
.cb-muni-info p{font-size:.82rem;line-height:1.6;margin:0;padding:8px 11px;border-radius:9px}
.cb-muni-yes{background:#eef6ee;color:#2a6b3a;border:1px solid #cfe6d2}
.cb-muni-none{background:#f3f4f8;color:#5a6b86;border:1px solid #e2e5ee}
.cb-muni-check{background:#f5f1fb;color:#5d4a8a;border:1px solid #e4dcf2}
.cb-detail-toggle{align-self:flex-start;background:none;border:none;color:#5d51a0;font-weight:700;font-size:.86rem;cursor:pointer;font-family:inherit;padding:4px 0}
.cb-detail{background:#f7f6fc;border:1px solid #e7e3f1;border-radius:11px;padding:11px 12px;display:flex;flex-direction:column;gap:9px}
.cb-detail-note{font-size:.74rem;color:#7b7396;line-height:1.6;margin:0}
.cb-out{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.cb-block{background:#fff;border:1px solid #e7e3f1;border-radius:13px;padding:13px 14px}
.cb-block-key{background:linear-gradient(180deg,#f4f6ff,#fbf7ff);border-color:#dbe0f6}
.cb-h{font-size:.92rem;font-weight:800;color:#3a4674;margin:0 0 9px}
.cb-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.92rem;color:#3a4660;padding:3px 0}
.cb-kv b{font-weight:800;color:#1c2440;font-variant-numeric:tabular-nums;font-size:1.04rem}
.cb-kv-strong{border-top:1px dashed #e2e0ee;margin-top:4px;padding-top:8px}
.cb-kv-strong b{color:#2f49a0;font-size:1.2rem}
.cb-sub-amt{color:#2a8f5a!important}
.cb-note-sm{font-size:.76rem;color:#7b7396;line-height:1.6;margin:8px 0 0}
.cb-compare{display:flex;align-items:stretch;gap:8px;margin:0 0 10px}
.cb-col{flex:1 1 0;min-width:0;border:1px solid #e7e3f1;border-radius:11px;padding:10px 11px;display:flex;flex-direction:column;gap:3px;background:#fbfbfe}
.cb-col-after{background:#f1f6ff;border-color:#cfe0f7}
.cb-col-k{font-size:.76rem;color:#6b7393;font-weight:700;line-height:1.4}
.cb-col-v{font-size:1.5rem;font-weight:800;color:#1c2440;font-variant-numeric:tabular-nums;line-height:1.1}
.cb-col-after .cb-col-v{color:#2f49a0}
.cb-col-v small{font-size:.7rem;font-weight:700;color:#8a92b0;margin-left:1px}
.cb-col-arrow{align-self:center;color:#9aa3c8;font-weight:800;flex:0 0 auto}
.cb-big{display:block;text-align:center;font-size:1.08rem;font-weight:800;padding:8px;border-radius:10px}
.cb-good{color:#1f7a44;background:#eef7f0}
.cb-warn{color:#8a6a12;background:#fbf4e2}
.cb-ten-line{font-size:.96rem;font-weight:800;color:#2f49a0;margin:6px 0 2px}
.cb-pay-line{font-size:.92rem;color:#3a4660;margin:0;line-height:1.6}
.cb-pay-line strong{color:#1c2440}
.cb-assume{font-size:.82rem;color:#5a6b86}
.cb-assume summary{cursor:pointer;color:#5d51a0;font-weight:700;padding:6px 0}
.cb-assume ul{margin:6px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}
.cb-assume li{line-height:1.6}
.cb-caveat{font-size:.78rem;color:#6b7393;line-height:1.7;margin:0;background:#f7f6fc;border:1px solid #e7e3f1;border-radius:10px;padding:10px 12px}
.cb-relay{min-height:48px;width:100%;border:1.5px solid #6f7fd6;background:linear-gradient(180deg,#7b8ce0,#5566c8);color:#fff;font-weight:800;font-size:.98rem;border-radius:12px;cursor:pointer;font-family:inherit;margin-top:2px}
.cb-relay:hover{filter:brightness(1.04)}
.cb-relay-note{font-size:.74rem;color:#7b7396;line-height:1.6;margin:0;text-align:center}
@media(max-width:360px){.cb-row2{grid-template-columns:1fr}.cb-col-v{font-size:1.3rem}}
@media(prefers-reduced-motion:reduce){.cb-modal,.cb-sheet{transition:none}}

/* 診断結果→費用対効果シミュへの任意リンク（押し売りに見えない控えめ導線） */
.ds-costsim{margin:4px 0 0}
.ds-costsim-link{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:700;color:#3f49a0;background:#f3f2fb;border:1px solid #e0dcf2;border-radius:11px;padding:11px 15px;text-decoration:none;cursor:pointer;line-height:1.4;min-height:44px;box-sizing:border-box}
.ds-costsim-link::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:2px;background:linear-gradient(180deg,#bcaef0,#9cc0f5)}
.ds-costsim-link:hover{background:#eceaf8;border-color:#cabff0}

/* ⑲ あなたの給湯器カルテ 保存案内（診断後・無料・煽りなし） */
.ds-karte-lead{font-size:1rem;font-weight:800;color:#13234d;line-height:1.55;margin:0 0 6px}
.ds-karte-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.ds-karte-actions[hidden]{display:none}
.ds-karte-save{flex:1 1 auto;min-height:48px;min-width:180px;border:none;border-radius:12px;background:linear-gradient(180deg,#2f80ed,#2f6fe0);color:#fff;font-weight:800;font-size:.96rem;cursor:pointer;font-family:inherit}
.ds-karte-save:hover{filter:brightness(1.05)}
.ds-karte-save:disabled{opacity:.6;cursor:default}
.ds-karte-skip{flex:0 0 auto;min-height:48px;padding:0 16px;border:1.5px solid #d8e0ee;background:#fff;color:#5a6b86;font-weight:700;font-size:.9rem;border-radius:12px;cursor:pointer;font-family:inherit}
.ds-karte-mini{font-size:.76rem;color:#7a86a0;line-height:1.6;margin:8px 0 0}
.ds-karte-mini[hidden]{display:none}
.ds-karte-ok{font-size:1rem;font-weight:800;color:#1f7a44;margin:0 0 4px}
.ds-karte-view{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:800;color:#1f4e9b;text-decoration:none}
.ds-karte-view:hover{text-decoration:underline}

/* ⑳ 見積CTA（診断後の主導線）＋ 3専門窓口提案モーダル（白＋淡青・赤色不使用・絵文字なし） */
.ds-quote-cta{border:1.5px solid #cfe0f7;background:linear-gradient(180deg,#f4f9ff,#ffffff)}
.ds-quote-owner{font-size:.8rem;color:#5a6b86;margin:0 0 10px}
.ds-quote-owner b{color:#13234d}
.ds-quote-main{display:block;width:100%;min-height:52px;border:none;border-radius:13px;background:linear-gradient(180deg,#2f80ed,#2f6fe0);color:#fff;font-weight:800;font-size:1rem;cursor:pointer;font-family:inherit;line-height:1.4;padding:12px 16px}
.ds-quote-main:hover{filter:brightness(1.05)}
.ds-quote-sub{font-size:.86rem;color:#3a4660;line-height:1.65;margin:9px 0 0}
.ds-quote-mini{font-size:.78rem;color:#7a86a0;margin:5px 0 0}

.qm-modal{position:fixed;inset:0;z-index:1300;background:rgba(20,22,48,.44);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.qm-modal.qm-show{opacity:1}.qm-modal[hidden]{display:none}
.qm-sheet{width:100%;max-width:580px;max-height:92vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#f7faff);border-radius:20px 20px 0 0;box-shadow:0 -16px 50px rgba(20,25,60,.3);transform:translateY(18px);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.qm-modal.qm-show .qm-sheet{transform:translateY(0)}
@media(min-width:600px){.qm-modal{align-items:center}.qm-sheet{border-radius:20px}}
.qm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #e7eefb;position:sticky;top:0;background:#fff;border-radius:20px 20px 0 0;z-index:1}
.qm-title{font-size:1.02rem;font-weight:800;color:#13234d}
.qm-x{width:34px;height:34px;border:none;border-radius:50%;background:#eef2fa;color:#5a6b86;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.qm-body{overflow-y:auto;padding:15px 16px 22px}
.qm-owner{font-size:.84rem;color:#3a4660;margin:0 0 6px}.qm-owner b{color:#13234d}
.qm-acc{font-size:.82rem;color:#5a6b86;margin:0 0 12px}
.qm-acc summary{cursor:pointer;color:#1f4e9b;font-weight:700;padding:6px 0}
.qm-acc ul{margin:6px 0 0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px;line-height:1.6}
.qm-h{font-size:1.04rem;font-weight:800;color:#13234d;margin:6px 0 4px}
.qm-sub{font-size:.86rem;color:#5a6b86;line-height:1.65;margin:0 0 10px}
.qm-confirm{display:flex;flex-direction:column;gap:1px;border:1px solid #e7eefb;border-radius:12px;padding:8px 12px;margin:0 0 12px;background:#fff}
.qm-kv{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.9rem;color:#3a4660;padding:5px 0;border-bottom:1px solid #f0f3fa}
.qm-kv:last-child{border-bottom:none}
.qm-kv b{font-weight:800;color:#13234d;text-align:right;overflow-wrap:anywhere}
.qm-kv-strong b{color:#2f49a0;font-size:1.12rem}
.qm-sub-amt{color:#2a8f5a!important}
.qm-field{display:flex;flex-direction:column;gap:5px;font-size:.82rem;color:#5a6b86;font-weight:700;margin:0 0 12px}
.qm-field input{font-size:1rem;font-family:inherit;border:1.5px solid #d8e0ee;border-radius:10px;padding:11px 12px;min-height:44px;color:#13234d}
.qm-field input:focus{outline:none;border-color:#2f80ed;box-shadow:0 0 0 3px rgba(47,128,237,.16)}
.qm-mode{border:1px solid #e7eefb;border-radius:12px;padding:10px 12px;margin:0 0 10px}
.qm-mode legend{font-size:.8rem;font-weight:800;color:#3a4660;padding:0 4px}
.qm-mode label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#23304c;padding:6px 0;line-height:1.5}
.qm-photo-note,.qm-line-note{font-size:.76rem;color:#7a86a0;line-height:1.6;margin:0 0 8px}
.qm-consent{font-size:.8rem;color:#5a6b86;line-height:1.7;background:#f5f8ff;border:1px solid #e2ebfb;border-radius:10px;padding:10px 12px;margin:0 0 12px}
.qm-gen{display:block;width:100%;min-height:50px;border:none;border-radius:12px;background:linear-gradient(180deg,#2f80ed,#2f6fe0);color:#fff;font-weight:800;font-size:.98rem;cursor:pointer;font-family:inherit}
.qm-gen:hover{filter:brightness(1.05)}
.qm-loading{padding:8px 0}
.qm-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.qm-steps li{font-size:.9rem;color:#9aa3b8;padding-left:24px;position:relative;line-height:1.5}
.qm-steps li::before{content:"○";position:absolute;left:0;color:#c3ccde}
.qm-steps li.done{color:#23304c}.qm-steps li.done::before{content:"✓";color:#2f80ed;font-weight:800}
.qm-props{display:flex;flex-direction:column;gap:12px}
.qm-prop{border:1px solid #e2e9f4;border-radius:14px;padding:13px 14px;background:#fff}
.qm-prop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 2px}
.qm-brand{font-size:1.05rem;font-weight:800;color:#13234d}
.qm-prec{font-size:.74rem;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.qm-prec-a{background:#e9f7ef;color:#2a8f46}.qm-prec-b{background:#fdf3da;color:#9a7b12}.qm-prec-c{background:#eef2f8;color:#5a6b86}
.qm-issuer{font-size:.76rem;color:#7a86a0;margin:0 0 8px}
.qm-included{font-size:.8rem;color:#5a6b86;line-height:1.6;margin:8px 0 0}
.qm-prec-line{font-size:.8rem;color:#6b7393;line-height:1.6;margin:8px 0 10px}
.qm-prop-go{display:block;width:100%;min-height:46px;border:1.5px solid #2f80ed;background:#fff;color:#1f4e9b;font-weight:800;font-size:.92rem;border-radius:11px;cursor:pointer;font-family:inherit}
.qm-prop-go:hover{background:#eef4ff}
.qm-caveat{font-size:.78rem;color:#6b7393;line-height:1.7;background:#f7f9fe;border:1px solid #e7eefb;border-radius:10px;padding:10px 12px;margin:12px 0 0}
.qm-empty{padding:6px 0}
/* 写真・動画の追加（端末内・件数のみ反映） */
.qm-attach{border:1px dashed #cdd9ee;border-radius:12px;padding:11px 12px;margin:0 0 12px;background:#fafcff}
.qm-attach-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qm-attach-label{font-size:.84rem;font-weight:800;color:#3a4660}
.qm-attach-btn{flex:0 0 auto;font-size:.84rem;font-weight:800;color:#1f4e9b;background:#fff;border:1.5px solid #2f80ed;border-radius:10px;padding:8px 14px;min-height:38px;display:inline-flex;align-items:center;cursor:pointer;font-family:inherit}
.qm-attach-btn:hover{background:#eef4ff}
.qm-attach-grid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.qm-attach-grid:empty{margin:0}
.qm-thumb{position:relative;width:60px;height:60px;border-radius:9px;overflow:hidden;border:1px solid #dbe4f3;background:#eef2f8;flex:0 0 auto}
.qm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.qm-thumb-vid{display:grid;place-items:center;width:100%;height:100%;font-size:.72rem;font-weight:800;color:#5a6b86}
.qm-thumb-x{position:absolute;top:2px;right:2px;width:20px;height:20px;border:none;border-radius:50%;background:rgba(20,22,48,.6);color:#fff;font-size:.9rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.qm-attach-hint{font-size:.8rem;color:#3a4660;line-height:1.6;margin:9px 0 6px;font-weight:700}
/* 提案カードの内訳アコーディオン */
.qm-prop-acc{margin:6px 0 4px;font-size:.84rem}
.qm-prop-acc summary{cursor:pointer;color:#1f4e9b;font-weight:700;padding:6px 0;list-style:revert}
.qm-prop-acc .qm-kv{font-size:.86rem}
/* 提案ごとの操作（依頼／質問） */
.qm-prop-actions{display:flex;flex-direction:column;gap:8px;margin:10px 0 0}
.qm-prop-ask{display:block;width:100%;min-height:42px;border:1px solid #d8e0ee;background:#fff;color:#3a4660;font-weight:700;font-size:.88rem;border-radius:10px;cursor:pointer;font-family:inherit}
.qm-prop-ask:hover{background:#f3f6fc}
/* 比較画面の共通操作 */
.qm-compare-actions{display:flex;flex-direction:column;gap:9px;margin:14px 0 0;padding:13px 0 0;border-top:1px solid #e7eefb}
.qm-compare-actions button{min-height:44px;border-radius:11px;font-family:inherit;font-weight:800;font-size:.9rem;cursor:pointer}
.qm-cmp-q{border:1.5px solid #2f80ed;background:#fff;color:#1f4e9b}.qm-cmp-q:hover{background:#eef4ff}
.qm-cmp-photo{border:1px solid #d8e0ee;background:#fff;color:#3a4660;font-weight:700!important}.qm-cmp-photo:hover{background:#f3f6fc}
.qm-cmp-later{border:none;background:transparent;color:#7a86a0;font-weight:700!important;text-decoration:underline;min-height:38px!important}
@media(max-width:360px){.qm-kv{flex-direction:column;align-items:flex-start;gap:1px}.qm-kv b{text-align:left}}
@media(prefers-reduced-motion:reduce){.qm-modal,.qm-sheet{transition:none}}

/* ── フッター文字・リンクを白系で統一（濃色背景での視認性確保。青/黒/グレーの読みにくい文字を排除） ── */
.site-footer{color:rgba(255,255,255,.82)}
.site-footer .footer-company,
.site-footer .footer-small{color:rgba(255,255,255,.82)}
.site-footer .footer-brand{color:#ffffff}
.site-footer a,
.site-footer .footer-small a,
.site-footer .footer-col a,
.site-footer .footer-legal a,
.site-footer .footer-contact a{color:rgba(255,255,255,.88);text-decoration:underline}
.site-footer a:hover{color:#ffffff}

/* ═══════════════════════════════════════════════════════════════════
   北海道版FVマップ 仕上げ強化：白く発光する縁（縁取り）／星屑の拠点／通信波紋
   ・.mission-map は北海道版トップ専用（全国版japan-mapとは別系統）
   ・背景演出。見出し/CTAの可読性を損なわない範囲で控えめに（低opacity・低速）
   ・末尾配置で既存@media群に勝つ（同詳細度なら後勝ち／必要箇所のみ!important）
   ═══════════════════════════════════════════════════════════════════ */
/* ① 本体の塗りを"少しだけ濃く・存在感UP"（アイスブルー系のまま深みを追加）。
   既存@media(line2292)の flat fill を上書きし、モバイル/デスクトップ双方で一貫させる */
.mission-map .map-outline{fill:url(#mapFillGrad)!important}
/* ② 北海道シルエットの縁：白でも青でもない青白の中間色でシャープに（大ぼかし廃止） */
.mission-map .map-outline{
  stroke:rgba(202,230,255,.96)!important;stroke-width:1.9!important;
  filter:
    drop-shadow(0 0 1.2px rgba(236,247,255,.98))
    drop-shadow(0 0 3px rgba(150,200,255,.6))!important}
/* ③ 星屑の拠点：ハブを白コアで一段明るく */
.mission-map .map-nodes .hub{
  fill:#ffffff!important;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(200,234,255,.95))!important}
/* 都市ノード：チカチカさせず"ゆっくり呼吸する発光"（白寄り＋淡いアイスブルー） */
.mission-map .map-nodes .tw{
  fill:#f0f8ff!important;
  filter:drop-shadow(0 0 3px rgba(196,228,255,.9))!important;
  animation:mapBreathe 6.5s ease-in-out infinite!important}
@keyframes mapBreathe{0%,100%{opacity:.62}50%{opacity:1}}
/* 星芒：回転させず opacity のみで静かに呼吸（十字の拠点感） */
.mission-map .map-star{pointer-events:none}
.mission-map .map-star .star-ray{
  stroke:rgba(255,255,255,.82);stroke-width:.9;stroke-linecap:round;fill:none;
  filter:drop-shadow(0 0 3px rgba(210,238,255,.9));
  transform-box:fill-box;transform-origin:center;
  animation:mapStarBreathe 6.5s ease-in-out infinite}
.mission-map .map-star .star-ray-sm{stroke:rgba(255,255,255,.66);stroke-width:.7;animation-duration:7s}
.mission-map .map-star .star-ray-sm:nth-of-type(3){animation-delay:1.8s}
.mission-map .map-star .star-ray-sm:nth-of-type(4){animation-delay:3.2s}
@keyframes mapStarBreathe{0%,100%{opacity:.5}50%{opacity:.92}}
/* きらめき（sparkle）を微増：明点だけほんの少し強く */
.mission-map .map-sparkle .spk-bright{filter:drop-shadow(0 0 7px rgba(210,238,255,1))!important}
/* 直線の下地（edges/flow）は薄くして"生きたネットワークの土台"に留める（弧を主役に） */
.mission-map .map-edges path,.mission-map .map-flow{
  stroke:rgba(170,210,255,.34)!important;stroke-width:.8!important}
/* ④ 通信アーチ：拠点間を結ぶ弧（生きたネットワークの土台） */
.mission-map .map-arc{pointer-events:none}
.mission-map .map-arc .arc{
  fill:none;stroke:rgba(200,230,255,.28);stroke-width:.9;stroke-linecap:round}
/* 弧に沿って"ビュンと走る光"（白中心アイスブルー） */
.mission-map .pulse-arc{
  fill:#eaf6ff;
  filter:drop-shadow(0 0 6px rgba(190,228,255,1))}
/* ⑤ 通信波紋：拠点から広がって消えるリング（鼓動・通信している感） */
.mission-map .map-ripple{pointer-events:none}
.mission-map .map-ripple .ripple{
  fill:none;stroke:rgba(224,244,255,.85);stroke-width:1.1;
  transform-box:fill-box;transform-origin:center;
  animation:mapRipple 4.6s ease-out infinite}
@keyframes mapRipple{
  0%{transform:scale(.35);opacity:0}
  12%{opacity:.6}
  100%{transform:scale(4.2);opacity:0}}
/* ⑥ アクセシビリティ：モーション低減時は新規アニメを停止（静止でも綺麗に固定） */
@media (prefers-reduced-motion:reduce){
  .mission-map .map-nodes .tw{animation:none!important;opacity:.9!important}
  .mission-map .map-star .star-ray{animation:none;opacity:.7;transform:none}
  .mission-map .pulse-arc{animation:none;opacity:0}
  .mission-map .pulse-arc animateMotion{display:none}
  .mission-map .map-ripple .ripple{animation:none;transform:scale(1.6);opacity:.22}}

/* ════════ 北海道版 情報設計 再設計（2026-07-03）: 緊急安全確認ストリップ・サポートツールカード・困りごと「もっと見る」 ════════ */

/* Section2: 緊急安全確認ストリップ（煽らない・営業CTAを前面に出さない・コンパクト） */
.section-emergency{padding:14px 0}
.emergency-inner{display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:linear-gradient(180deg,#fff9f0,#fff3e2);border:1px solid #f3d9ae;border-radius:14px;padding:14px 16px}
.emergency-text{margin:0;font-size:.92rem;line-height:1.7;color:#5a4111}
.emergency-text strong{color:#8a5a00}
.emergency-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 18px;border:1.5px solid #c9860a;border-radius:999px;background:#fff;color:#8a5a00;font-size:.88rem;font-weight:800;text-decoration:none;white-space:nowrap;transition:background .15s,transform .12s}
.emergency-cta:hover{background:#fff3e2;transform:translateY(-1px)}
@media(min-width:640px){.emergency-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}.emergency-text{flex:1 1 auto}.emergency-cta{flex:none}}

/* Section8: サポートツール（カード化。スマホ1列/タブレット2列/PC4列） */
.tools-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media(min-width:640px){.tools-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.tools-grid{grid-template-columns:repeat(4,1fr)}}
.tool-card{display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,#ffffff,#f7f9fe);border:1.5px solid var(--line-soft,#dce4f0);border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(20,30,60,.04),0 8px 20px rgba(20,30,60,.05)}
.tool-h{margin:0;font-size:.98rem;font-weight:800;color:#13234d;line-height:1.4}
.tool-desc{margin:0;font-size:.82rem;line-height:1.7;color:#5a6b86;flex:1 1 auto}
.tool-who{margin:0;font-size:.74rem;font-weight:700;color:#8593ab}
.tool-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;margin-top:2px;
  font-family:inherit;font-size:.86rem;font-weight:800;color:#fff;text-decoration:none;text-align:center;cursor:pointer;
  background:linear-gradient(135deg,#2f7bf0,#1a56c6);border:none;border-radius:12px;box-shadow:0 4px 12px rgba(30,90,200,.2);transition:transform .12s,box-shadow .2s}
.tool-cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(30,90,200,.28)}

/* Section5: 困りごと別入口の「もっと見る」（初期4枚+折りたたみ6枚）。2026-07-17: 開閉をdetails/summaryからbuttonへ変更。 */
.sc-more-wrap{margin-top:4px}
.sc-more-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:9px 4px;
  font-size:.92rem;font-weight:800;color:#1a56c6}
.sc-more-btn::before{content:"";flex:none;width:8px;height:8px;border-right:2.2px solid #1a56c6;border-bottom:2.2px solid #1a56c6;transform:rotate(45deg);transition:transform .18s ease}
.sc-more-btn[aria-expanded="true"]::before{transform:rotate(-135deg)}
.sc-more-body{margin-top:6px}