/* =========================================================
   Enelabo Solutions デザイン統一CSS（おうち蓄電池マッチング用）
   style.css の「後」に読み込んで、HOMEと同じ基準にそろえる
   - 全体を明るく、柔らかく（濃紺のパネルはやめる）
   - 見出し：#173F32／ラベル：緑 #2E9A48
   - 蓄電池のアクセント：やわらかい青紫 #6A5AE0（線・背景はうっすら）
   - 「次へ」ボタン：丸い濃い青 #1A73C9
   ※ 質問や判定のプログラム（app.js・products.js）は変更しない
========================================================= */

:root{
  --bm-violet:#6a5ae0;
  --bm-violet-text:#5546c4;
  --bm-violet-bg:#f4f2ff;
  --bm-violet-soft:#faf9ff;
  --bm-violet-line:#dcd6f7;
  --bm-ink:#173f32;
  --bm-text:#3a3f4b;
  --bm-muted:#6b7080;
  --bm-blue:#1a73c9;
  --bm-blue-dark:#155fa6;
  --bm-green:#2e9a48;
  --bm-border:#ebe8f5;
}

body{
  background:#fff;
  color:var(--bm-text);
}

button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline:3px solid var(--bm-blue);
}

.enl-tool-status{
  max-width:1000px;
  color:#888;
}


/* ---------- ① ページのトップ（キャッチは画像の中に入れた） ---------- */

/* 見出しの文字は画面には出さず、検索エンジンと読み上げ用に残す */
.bm-visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.bm-intro{
  max-width:1000px;
  margin:16px auto 0;
  padding:0 24px;
  text-align:center;
}

.bm-intro small{
  display:block;
  color:var(--bm-green);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
}

.bm-intro .bm-title{
  margin:6px 0 4px;
  color:var(--bm-ink);
  font-size:clamp(24px,3.2vw,34px);
  font-weight:800;
  line-height:1.45;
  letter-spacing:.02em;
}

.bm-intro .bm-title span{
  display:inline-block;
}

.bm-intro p{
  margin:0;
  color:#555;
  font-size:16px;
}

.bm-hero{
  margin:0;
}

.bm-hero img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
}


/* ---------- ② 全体の枠（明るく・軽く） ---------- */

main{
  max-width:1000px;
  margin:24px auto 40px;
  border:1px solid var(--bm-border);
  border-radius:24px;
  box-shadow:0 8px 28px rgba(106,90,224,.06);
  background:#fff;
}


/* ---------- ③ 左のパネル（濃紺 → ごくうすいラベンダー） ---------- */

aside,
main>aside{
  background:linear-gradient(170deg,#f6f4ff 0%,#fbfaff 55%,#ffffff 100%);
  color:var(--bm-ink);
  border-right:1px solid var(--bm-border);
}

/* タイトルは上に出したので、左では隠す */
aside .eyebrow,
aside h1,
aside .intro{
  display:none;
}

.guide{
  margin-top:0;
  background:#fff;
  border:1.5px solid var(--bm-violet-line);
  box-shadow:0 4px 14px rgba(106,90,224,.06);
}

.guide strong{
  color:var(--bm-ink);
}

.guide small{
  color:var(--bm-muted);
}

/* 4つのステップ（大きく・読みやすく） */
aside ol{
  margin-top:28px;
  padding-left:28px;
}

aside li{
  padding:9px 0 9px 8px;
  color:#8e90a0;
  font-size:18px;
  font-weight:700;
  line-height:1.5;
}

aside li.active{
  color:var(--bm-violet-text);
  font-weight:800;
}

.privacy{
  margin-top:24px;
  color:var(--bm-muted);
  font-size:14px;
  line-height:1.8;
}


/* ---------- ④ 質問の部分 ---------- */

.topline,
.text-btn{
  color:var(--bm-muted);
}

.track{
  background:#efedf8;
}

#bar{
  background:var(--bm-violet);
}

h2,h3{
  color:var(--bm-ink);
}

.kicker{
  color:var(--bm-violet-text);
}

.hint{
  color:var(--bm-muted);
}

/* キャラクターの吹き出し */
.question-bubble,
.question-bubble:after{
  background:var(--bm-violet-soft);
  border-color:var(--bm-violet-line);
}

.maker-speech,
.result-speech,
.essen-question-mark{
  background:var(--bm-violet-soft);
  border-color:var(--bm-violet-line);
  color:var(--bm-violet-text);
}

.maker-speech:after,
.result-speech:after,
.essen-question-mark:after{
  background:var(--bm-violet-soft);
  border-color:var(--bm-violet-line);
}

/* 選択肢 */
.option{
  border:1.5px solid var(--bm-border);
  border-radius:16px;
  color:var(--bm-text);
}

.option:hover{
  border-color:var(--bm-violet-line);
  background:var(--bm-violet-soft);
}

.option[aria-pressed=true]{
  border-color:var(--bm-violet);
  background:var(--bm-violet-bg);
  box-shadow:0 0 0 1px var(--bm-violet);
}

.choice{
  border-color:#cfcbe0;
}

.option[aria-pressed=true] .choice{
  background:var(--bm-violet);
  border-color:var(--bm-violet);
}

.option strong{
  color:var(--bm-ink);
}

.option small{
  color:var(--bm-muted);
}

nav{
  border-top-color:var(--bm-border);
}


/* ---------- ⑤ ボタン（HOMEと同じ丸い青） ---------- */

.primary{
  border:0;
  border-radius:999px;
  background:var(--bm-blue);
  color:#fff;
  padding:12px 30px;
  letter-spacing:.04em;
  box-shadow:0 6px 16px rgba(26,115,201,.2);
  transition:background .25s ease, transform .25s ease;
}

.primary:hover{
  background:var(--bm-blue-dark);
  transform:translateY(-1px);
}

.text-btn:hover{
  color:var(--bm-blue);
}


/* ---------- ⑥ 結果・相談 ---------- */

.note{
  background:var(--bm-violet-soft);
  color:var(--bm-muted);
}

.summary dt,
.summary dd{
  border-bottom-color:var(--bm-border);
}

.result-card{
  border:1.5px solid var(--bm-border);
  border-radius:16px;
}

.status{
  background:var(--bm-violet-bg);
  color:var(--bm-violet-text);
}

.capacity{
  color:var(--bm-violet);
}

.life{
  background:var(--bm-violet-soft);
}

.energy-flow li{
  color:var(--bm-violet-text);
}

.product-maker-name{
  color:var(--bm-ink);
}

.consultation{
  background:#f4f9fe;
  border-color:#d3e6f7;
}

.consult-office{
  border-bottom-color:#d3e6f7;
}

.consult-channel{
  border-color:#d3e6f7;
}

.consult-channel summary{
  color:var(--bm-blue);
}

.consult-channel:first-child summary{
  color:#06a849;
}

#consult-form input,
#consult-form textarea,
.numeric input{
  border-color:#d6d3e3;
  border-radius:10px;
  color:var(--bm-text);
}

.error{
  color:#b03a3a;
}


/* ---------- スマホ（850px以下：もとの切り替えに合わせる） ---------- */

@media(max-width:850px){

  .bm-intro{
    padding:0 16px;
  }

  .bm-intro .bm-title{
    font-size:24px;
  }

  .bm-intro p{
    font-size:15px;
  }

  .bm-hero img{
    border-radius:12px;
  }

  main{
    margin:18px 16px 28px;
  }

  aside{
    border-right:0;
    border-bottom:1px solid var(--bm-border);
  }

}