/* =========================================================
   Enelabo Solutions デザイン統一CSS（太陽光シミュレーター用）
   solar-orange.css の「後」に読み込んで、HOMEと同じ基準にそろえる
   - 相談ボタン：丸い濃い青 #1A73C9（LINEだけ #06C755）
   - 見出し：#173F32／ラベル：緑 #2E9A48
   - 太陽光のアクセント：オレンジ #E8770F（文字は #A84A00）
   - 幅：最大1000px／スマホ切り替え 781px
   ※ 計算のプログラム（app.js・comparison.js）は変更しない
========================================================= */

:root{
  --es-blue:#1a73c9;
  --es-blue-dark:#155fa6;
  --es-blue-bg:#eef5fc;
  --es-green:#2e9a48;
  --es-line:#06c755;
  --es-line-dark:#05a847;
  --es-ink:#173f32;
  --es-text:#333;
  --es-orange:#e8770f;
  --es-orange-dark:#c9640a;
  --es-orange-text:#a84a00;
  --es-orange-bg:#fff4e6;
  --es-orange-soft:#fff8ef;
  --es-orange-line:#f6c38c;
  --es-border:#e5ece7;
  color:var(--es-text);
  background:#fff;
}

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

main{
  max-width:1000px;
  padding:28px 24px 40px;
}

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

h1,h2{
  color:var(--es-ink);
}

h2{
  font-weight:800;
}

.hint{
  color:#666;
}

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


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

/* 見出しの文字は画面には出さず、検索エンジンと読み上げ用に残す */
.es-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;
}

.intro{
  display:block;
  padding:0;
  margin:0 0 20px;
  border:0;
  border-radius:0;
  background:none;
  text-align:center;
}

.intro small{
  color:var(--es-green) !important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
}

.intro h1{
  margin:6px 0 4px;
  color:var(--es-ink) !important;
  font-size:clamp(24px,3.2vw,34px);
  font-weight:800;
  line-height:1.45;
}

.intro h1 span{
  display:inline-block;
}

.intro p{
  margin:0;
  color:#444 !important;
  font-size:16px;
}

.solar-hero{
  margin:8px 0 0;
}

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

/* 現地調査のお知らせ（赤 → 落ち着いたオレンジ） */
.notice{
  margin:18px 0;
  padding:18px 20px;
  border:1.5px solid var(--es-orange-line);
  border-left:5px solid var(--es-orange);
  border-radius:14px;
  background:var(--es-orange-soft);
}

.notice strong{
  color:var(--es-orange-text);
  font-size:18px;
}

.notice .prototype-note{
  border-top-color:#f1dcc0;
}


/* ---------- ② 相談ボックス（LINE・フォーム・電話） ---------- */

.contact-card{
  margin:18px 0 24px;
  padding:22px 24px;
  border:1.5px solid #d3e6f7;
  border-radius:20px;
  background:#f4f9fe;
}

.contact-card h2{
  color:var(--es-ink);
  font-size:20px;
}

.contact-card>p{
  color:#444;
  font-size:14px;
}

.contact-buttons{
  gap:10px;
  margin-top:14px;
}

.contact-toggle{
  min-height:50px;
  padding:10px 8px;
  border:1.5px solid var(--es-blue);
  border-radius:999px;
  background:#fff;
  color:var(--es-blue);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:none;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.contact-toggle:hover{
  background:#f2f7fd;
  transform:translateY(-1px);
}

/* 1つ目：LINE（LINE公式の緑） */
.contact-toggle:nth-child(1){
  border-color:var(--es-line);
  background:var(--es-line);
  color:#fff;
  box-shadow:0 6px 16px rgba(6,199,85,.22);
}

.contact-toggle:nth-child(1):hover{
  border-color:var(--es-line-dark);
  background:var(--es-line-dark);
}

/* 2つ目：フォーム（濃い青） */
.contact-toggle:nth-child(2){
  background:var(--es-blue);
  color:#fff;
  box-shadow:0 6px 16px rgba(26,115,201,.22);
}

.contact-toggle:nth-child(2):hover{
  border-color:var(--es-blue-dark);
  background:var(--es-blue-dark);
}

/* 3つ目：電話（白地に青の枠） */
.contact-toggle:nth-child(3){
  background:#fff;
  color:var(--es-blue);
}

/* 開いているボタン */
.contact-toggle[aria-expanded=true]{
  outline:3px solid rgba(26,115,201,.25);
  outline-offset:2px;
}

.contact-panel{
  margin-top:12px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
}

.contact-panel[hidden]{
  display:none;
}

.inquiry-form button[type=submit]{
  margin-top:4px;
}


/* ---------- ③ 計算の部分 ---------- */

form,
.results{
  border:1px solid var(--es-border);
  border-radius:20px;
}

label{
  color:var(--es-ink);
}

input,
select,
textarea{
  border-color:#cfd8d2;
  border-radius:10px;
  color:var(--es-text);
}

/* 数字を入れる欄・選ぶ欄を目立たせる（うすいオレンジ地＋オレンジの枠） */
form input[type=number],
form input[type=text],
form select,
.price-input input{
  min-height:52px;
  padding:12px 14px;
  border:2px solid var(--es-orange-line);
  border-radius:12px;
  background:var(--es-orange-soft);
  color:var(--es-ink);
  font-size:18px;
  font-weight:700;
  box-shadow:inset 0 1px 2px rgba(232,119,15,.08);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

form input[type=number]:hover,
form input[type=text]:hover,
form select:hover,
.price-input input:hover{
  border-color:var(--es-orange);
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--es-orange) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(232,119,15,.18) !important;
}

/* 欄の上の項目名も少し強く */
#inputs label{
  font-size:15px;
  font-weight:800;
}

input[type=range],
.wiring-check input[type=checkbox]{
  accent-color:var(--es-orange);
}

output,
.result-head strong{
  color:var(--es-orange-text);
}

summary{
  color:var(--es-ink);
}

/* キャラクターの吹き出し（質問） */
.question-bubble,
.question-bubble:before{
  border-color:var(--es-orange-line);
  background:var(--es-orange-soft);
}

/* ラスティンの注意（赤 → オレンジ） */
.panel-design-note>div{
  border-color:var(--es-orange-line);
  border-left-color:var(--es-orange);
  background:var(--es-orange-soft);
}

.panel-design-note strong{
  color:var(--es-orange-text);
}

/* ボタン全体（丸い濃い青） */
button{
  border:1.5px solid var(--es-blue);
  border-radius:999px;
  background:var(--es-blue);
  color:#fff;
  font-weight:700;
  letter-spacing:.04em;
  padding:12px 22px;
  box-shadow:0 6px 16px rgba(26,115,201,.18);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}

button:hover{
  border-color:var(--es-blue-dark);
  background:var(--es-blue-dark);
  transform:translateY(-1px);
}

/* サブのボタン（白地に青の枠） */
#reset,
.price-presets button,
.plan button{
  border:1.5px solid var(--es-blue);
  background:#fff;
  color:var(--es-blue);
  box-shadow:none;
}

#reset:hover,
.price-presets button:hover,
.plan button:hover{
  background:#f2f7fd;
}

.price-presets button[aria-pressed=true]{
  background:var(--es-blue);
  color:#fff;
}

/* 試算結果 */
.metrics article{
  background:var(--es-ink);
  border-radius:14px;
}

.metrics article+article{
  background:var(--es-orange-bg);
  color:var(--es-text);
  border:1px solid var(--es-orange-line);
}

.plan{
  border:1px solid var(--es-border);
  border-radius:14px;
}

.plan.selected{
  border:2px solid var(--es-orange);
  background:var(--es-orange-soft);
}

.price-editor{
  border:1.5px solid var(--es-orange-line);
  border-radius:16px;
  background:var(--es-orange-soft);
}

.compare{
  border:1px solid var(--es-orange-line);
  border-radius:18px;
  background:var(--es-orange-soft);
}

.compare>small{
  color:var(--es-orange-text);
  font-weight:700;
}

.crossing{
  border-left-color:var(--es-orange);
}

.legend span:last-child{
  color:var(--es-orange);
}

/* グラフの線（プログラムが描く紫の線をオレンジに） */
svg [stroke="#7950af"]{
  stroke:var(--es-orange);
}

svg [fill="#7950af"]{
  fill:var(--es-orange);
}

#chart{
  background:#fbfcfb;
}

/* 停電への備え・この条件で相談する */
.backup{
  border:1px solid #d8eadc;
  border-radius:18px;
  background:#f3f9f4;
}

.backup>small{
  color:var(--es-green);
  font-weight:700;
}

.backup a,
footer a{
  color:var(--es-blue);
}

.wiring-option{
  border-color:var(--es-border);
}

.consult{
  border:1px solid #d3e6f7;
  border-radius:18px;
  background:#f4f9fe;
}


/* ---------- スマホ（781px以下） ---------- */

@media(max-width:781px){

  main{
    padding:16px 16px 32px;
  }

  .intro h1{
    font-size:24px;
  }

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

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

  .contact-card{
    padding:18px 16px;
  }

  .contact-buttons{
    grid-template-columns:1fr;
  }

  .contact-toggle{
    font-size:15px;
  }

  h2{
    font-size:19px;
  }

}