@charset "UTF-8";
/* ============================================================
   読みやすいデザイン … body class="lp read" のページに効く（全ページ）
   参考：記事・インタビュー型のページ。1列・大きな余白・左寄せの黒い見出し。
   ============================================================ */

.read{background:#fff; color:#2a2f35}
.read .rd-wrap{max-width:760px; margin:0 auto; padding-left:20px; padding-right:20px}
.read main.rd-wrap{padding-bottom:10px}
.read main.rd-wrap > p,
.read main.rd-wrap li{font-size:1rem; line-height:2.05; letter-spacing:.05em}
.read main.rd-wrap > p{margin:0 0 1.5em}
.read strong{font-weight:700; color:#1c2228}
.read .rd-red, .read strong.rd-red{color:#e2352b}
.read .rd-blue, .read strong.rd-blue{color:#2f6fd6}
.read .rd-small{font-size:.8rem; line-height:1.8; color:#6b7580; letter-spacing:.02em; margin:10px 0 0}

/* ---------- タイトル ---------- */
.rd-hero{background:linear-gradient(180deg,#f3f5f7 0%,#fff 60%); padding:44px 0 10px; position:relative; overflow:hidden}
.rd-bgword{position:absolute; top:6px; left:-4px; margin:0; font-size:clamp(3.4rem,11vw,7.2rem); font-weight:900; letter-spacing:.14em; color:rgba(20,34,52,.05); line-height:1; pointer-events:none; white-space:nowrap}
.rd-kicker{position:relative; margin:30px 0 12px; font-size:.86rem; font-weight:700; letter-spacing:.12em; color:#2f6fd6}
.rd-title{position:relative; margin:0 0 30px; font-size:clamp(1.55rem,3.6vw,2.15rem); line-height:1.6; font-weight:800; color:#1b2127; letter-spacing:.02em; word-break:auto-phrase}
.rd-title .rd-sub{display:block; margin-top:.5em; font-size:.62em; font-weight:700; color:#4b5663}
.rd-hero-photo{position:relative; margin:0 0 40px}
.rd-hero-photo img{display:block; width:100%; height:auto; border-radius:2px}
.rd-hero-cta{position:absolute; right:-14px; bottom:-26px; background:linear-gradient(180deg,#f5922f,#e06c10); color:#fff; text-decoration:none; font-weight:800; letter-spacing:.06em; padding:20px 36px; border-radius:999px; box-shadow:0 10px 24px rgba(224,108,16,.35)}
.rd-hero-cta:hover{filter:brightness(1.05)}
@media(max-width:700px){ .rd-hero-cta{position:static; display:block; text-align:center; margin-top:12px; padding:16px} }

/* ---------- 見出し ---------- */
.read .rd-h{margin:92px 0 30px; font-size:clamp(1.35rem,2.8vw,1.72rem); line-height:1.55; font-weight:800; color:#1b2127; letter-spacing:.04em; word-break:auto-phrase}
.read main.rd-wrap > .rd-h:first-child{margin-top:70px}

/* ---------- 概要の表 ---------- */
.rd-def{width:100%; border-collapse:collapse; margin:0 0 40px; font-size:.95rem; letter-spacing:.04em}
.rd-def th{width:9.5em; background:#10222f; color:#fff; font-weight:700; text-align:left; padding:18px 16px; border-bottom:1px solid #26394a; vertical-align:top}
.rd-def td{background:#fff; padding:18px 18px; border:1px solid #dfe3e8; border-left:none; line-height:1.8}
@media(max-width:560px){ .rd-def th{width:6.5em; padding:14px 10px; font-size:.86rem} .rd-def td{padding:14px 12px; font-size:.88rem} }

/* ---------- 図解ボックス ---------- */
.rd-fig{margin:44px 0 0; background:#f5f7f9; padding:34px 24px 30px; text-align:center}
.rd-fig-ttl{margin:0; font-size:clamp(1.2rem,2.6vw,1.6rem); font-weight:800; color:#1b2127; letter-spacing:.03em; line-height:1.4}
.rd-num{font-size:2.3em; color:#2f6fd6; font-weight:900; vertical-align:-.12em; margin:0 .08em}
.rd-fig-note{display:inline-block; margin:14px 0 22px; padding:8px 18px; border:2px solid #3a63b8; border-radius:4px; background:#fff; font-size:.84rem; font-weight:700; color:#1b2127}
.rd-flow{display:flex; align-items:center; justify-content:center; gap:10px}
.rd-box{flex:1 1 0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); min-width:0}
.rd-box-h{margin:0; background:#3a63b8; color:#fff; font-size:.86rem; font-weight:700; padding:10px 6px; line-height:1.4}
.rd-box-h small{display:block; font-size:.72rem; font-weight:500; opacity:.9}
.rd-box-v{margin:0; padding:18px 6px 20px; font-size:.95rem; font-weight:700; color:#1b2127}
.rd-box-v b{font-size:clamp(1.6rem,3.6vw,2.3rem); font-weight:900; letter-spacing:.01em; margin-right:2px}
.rd-arrow{color:#1b2127; font-size:.9rem; flex:0 0 auto}
@media(max-width:600px){ .rd-flow{flex-direction:column} .rd-box{width:100%} .rd-arrow{transform:rotate(90deg)} }

/* ---------- お悩みの箇条書き ---------- */
.rd-list{list-style:none; margin:0 0 30px; padding:0}
.rd-list li{display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid #e6e9ed}
.rd-list li:first-child{border-top:1px solid #e6e9ed}
.rd-list img{width:64px; height:64px; flex:0 0 auto; border-radius:50%; background:#fff5d9; padding:4px; object-fit:contain}
.rd-check{list-style:none; margin:0 0 20px; padding:0}
.rd-check li{position:relative; padding-left:1.7em; margin:0 0 .6em}
.rd-check li::before{content:""; position:absolute; left:.2em; top:.72em; width:.7em; height:.38em; border-left:3px solid #2f6fd6; border-bottom:3px solid #2f6fd6; transform:rotate(-45deg)}

/* ---------- 図・写真 ---------- */
.read .lp-chart{border-radius:0; border:none; background:#f5f7f9; padding:22px 18px 14px; margin:30px 0 30px}
.rd-photo{margin:0 0 30px}
.rd-photo img{display:block; width:100%; max-width:420px; height:auto; margin:0 auto}
.rd-photo figcaption, .rd-person figcaption{font-size:.82rem; color:#5d6873; margin-top:10px; letter-spacing:.04em; line-height:1.8}
.rd-photo figcaption{text-align:center}

/* ---------- 注意書き ---------- */
.rd-caution, .rd-disclaimer{margin:10px 0 30px; background:#f5f7f9; border-left:4px solid #e2352b; padding:22px 24px}
.rd-disclaimer{border-left-color:#10222f; margin-top:70px}
.rd-caution-h{margin:0 0 8px; font-weight:800; color:#1b2127; letter-spacing:.04em}
.rd-caution p:last-child{margin:0; line-height:1.95; letter-spacing:.04em; font-size:.95rem}
.rd-disclaimer ul{margin:0; padding-left:1.2em}
.rd-disclaimer li{font-size:.88rem !important; line-height:1.9 !important; margin:0 0 .4em}

/* ---------- 向き不向き（2列） ---------- */
.rd-two{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 30px}
.rd-col{background:#f5f7f9; padding:0 0 10px}
.rd-col-h{margin:0; padding:12px 18px; color:#fff; font-weight:800; letter-spacing:.06em}
.rd-col.ok .rd-col-h{background:#3a63b8}
.rd-col.ng .rd-col-h{background:#5b6570}
.rd-col ul{margin:0; padding:14px 18px 6px 2.2em}
.rd-col li{font-size:.94rem !important; line-height:1.9 !important; margin:0 0 .5em}
@media(max-width:640px){ .rd-two{grid-template-columns:1fr} }

/* ---------- インタビュー ---------- */
.rd-person{display:flex; align-items:center; gap:22px; margin:0 0 34px; padding:22px; background:#f5f7f9}
.rd-person img{width:132px; height:132px; object-fit:cover; flex:0 0 auto}
.rd-person figcaption{margin:0}
.rd-person figcaption b{display:block; font-size:1.05rem; color:#1b2127; margin-bottom:2px}
.read .rd-q{position:relative; margin:40px 0 18px !important; padding-left:64px; color:#3b6fd8 !important; font-size:.98rem !important}
.read .rd-q::before{content:""; position:absolute; left:0; top:1.02em; width:50px; border-top:1px solid #3b6fd8}

/* ---------- 流れ ---------- */
.rd-steps{list-style:none; margin:0 0 30px; padding:0; counter-reset:rs}
.rd-steps li{position:relative; padding:20px 20px 20px 78px; background:#f5f7f9; margin:0 0 10px; counter-increment:rs}
.rd-steps li::before{content:counter(rs); position:absolute; left:20px; top:20px; width:40px; height:40px; background:#10222f; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1.05rem}
.rd-steps b{display:block; font-size:1.02rem; color:#1b2127; letter-spacing:.04em; margin-bottom:4px}
.rd-steps span{display:block; font-size:.92rem; line-height:1.85; letter-spacing:.03em}

/* ---------- 既存部品を1列デザインになじませる ---------- */
.read .sec{margin-top:80px}
.read .sec .wrap{max-width:760px}
.read .sec h2.h{text-align:left}
.read .faq details{border-radius:0}
.read .pref-grid, .read .aud-links{margin-top:14px}


/* ---------- タイトル部分（県別・業種別） ---------- */
.rd-hero-photo .hero-photo{margin:0; border-radius:2px; box-shadow:none}
.rd-hero-photo .hero-photo img{aspect-ratio:auto; max-height:460px; object-fit:cover}
.rd-title .mark{background:none}
.rd-hero-points{margin:48px 0 10px !important}
.rd-hero-points li{font-size:1rem; line-height:1.9; letter-spacing:.04em; margin:0 0 .5em}

/* ---------- 既存の部品を、1列・フラットな見た目に揃える ---------- */
.read .sec{margin-top:88px}
.read .sec.tinted{background:none; border:none; padding:0}
.read .sec .wrap, .read .lp-final .wrap{max-width:760px}
.read h2.h, .read h2.h.red, .read h2.h.green{
  text-align:left; color:#1b2127; border:none; padding:0; background:none;
  font-size:clamp(1.35rem,2.8vw,1.72rem); font-weight:800; letter-spacing:.04em; line-height:1.55; margin:0 0 26px;
}
.read h2.h .hl{background:none}
.read .lp-lead{text-align:left; margin:0 0 24px; max-width:none; color:#2a2f35; line-height:2; letter-spacing:.04em}
.read .sec p{line-height:2; letter-spacing:.04em}

/* カード・タイル → 縦に並ぶグレーの枠 */
.read .lp-cards, .read .lp-tiles, .read .lp-tiles.four, .read .cards{display:block}
.read .lp-card, .read .lp-tile, .read .card{
  background:#f5f7f9; border:none; border-radius:0; box-shadow:none; margin:0 0 10px; padding:20px 22px;
}
.read .lp-tile{text-align:left; display:grid; grid-template-columns:40px 1fr; column-gap:14px}
.read .lp-tile .ic{grid-row:1 / span 2; margin:2px 0 0; width:30px; height:30px}
.read .lp-tile p{margin:4px 0 0}
.read .card.red{border-left:4px solid #e2352b; border-top:none}
.read .card.green{border-left:4px solid #3a63b8; border-top:none}
.read .card p.t, .read .lp-card b, .read .lp-tile b{color:#1b2127}

/* 囲み・引用 */
.read .box, .read .box.warn, .read .box.gray, .read .quote{
  background:#f5f7f9; border:none; border-left:4px solid #10222f; border-radius:0; padding:20px 24px;
}
.read .box.warn{border-left-color:#e2352b}

/* 表 → 見出し列が紺の定義表 */
.read table.t{border-collapse:collapse; border:1px solid #dfe3e8}
.read table.t th{background:#10222f; color:#fff; border-bottom:1px solid #26394a}
.read table.t td{border-bottom:1px solid #dfe3e8}
.read table.t thead th{background:#3a63b8; border-bottom:none}

/* 4ステップ → 縦並び */
.read .lp-steps{display:block}
.read .lp-step{text-align:left; background:#f5f7f9; border:none; border-radius:0; box-shadow:none; margin:0 0 10px; padding:20px 22px 20px 120px}
.read .lp-step::before{left:22px; top:22px; transform:none; border-radius:0; background:#10222f}
.read .lp-step .ic{display:none}

/* 診断・フォーム・運営者メッセージ・FAQ */
.read .dx, .read .dx-head, .read .before-form, .read .form-box, .read .msg{border-radius:0 !important}
.read .dx-head{background:#10222f}
.read .msg{background:#f5f7f9; border:none; border-left:4px solid #e06c10; box-shadow:none}
.read .faq details{border-radius:0; border-color:#dfe3e8}
.read .lp-prod figure, .read .lp-chart{border-radius:0}

/* 記事ページ */
.read .art-head{background:linear-gradient(180deg,#f3f5f7 0%,#fff 100%); border-bottom:none; padding:40px 0 20px}
.read .art-head h1{color:#1b2127; letter-spacing:.03em; line-height:1.6}
.read .art-body{max-width:760px}
.read .art-body p, .read .art-body li{line-height:2.05; letter-spacing:.04em}
.read .art-body h2{color:#1b2127; border:none; padding:0; background:none; margin:72px 0 24px; font-size:clamp(1.3rem,2.6vw,1.6rem); letter-spacing:.04em}
.read .art-body h2::before, .read .art-body h2::after{display:none}
.read .art-body strong{color:#1c2228}
.read .art-head .wrap{max-width:760px}
.read .toc{border-radius:0; background:#f5f7f9; border:none}

/* 図はスマホでは横スクロール（縮小しすぎると文字が読めないため。表と同じ挙動です） */
@media (max-width:600px){
  .lp-chart{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px}
  .lp-chart svg{width:560px; min-width:560px; max-width:none}
  .lp-chart figcaption{width:560px}
  /* 右端をうすくフェードさせて「続きがある」ことを示す */
  .lp-chart{
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), rgba(0,0,0,.15) 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), rgba(0,0,0,.15) 100%);
  }
}

/* 幅420で縦長に描いた図（lp-chart-fit）は、横スクロールさせずに画面へ収める。
   縮小率が小さいので、スマホでも文字が読める。 */
.lp-chart.lp-chart-fit svg{max-width:420px; margin:0 auto}
@media (max-width:600px){
  .lp-chart.lp-chart-fit{
    overflow-x:visible; padding:16px 8px 10px;
    -webkit-mask-image:none; mask-image:none;
  }
  .lp-chart.lp-chart-fit svg{width:100%; min-width:0; max-width:100%}
  .lp-chart.lp-chart-fit figcaption{width:auto}
}

/* ---- この記事でわかること（記事冒頭の約束ブロック） ---- */
.art-know{
  margin:22px 0;padding:18px 20px;border:1px solid #d9e2ec;border-left:5px solid #e06c10;
  border-radius:8px;background:linear-gradient(180deg,#fffdfa,#f7f9fc);
}
.art-know-ttl{
  margin:0 0 10px;font-size:16.5px;font-weight:700;color:#123a6b;letter-spacing:.02em;
}
.art-know ul{margin:0;padding:0;list-style:none}
.art-know li{
  position:relative;padding:0 0 0 26px;margin:0 0 8px;line-height:1.75;font-size:15.5px;color:#16324f;
}
.art-know li:last-child{margin-bottom:0}
.art-know li::before{
  content:"";position:absolute;left:4px;top:.55em;width:9px;height:5px;
  border-left:2.5px solid #2a9d8f;border-bottom:2.5px solid #2a9d8f;transform:rotate(-45deg);
}
.art-know-note{margin:14px 0 0;padding-top:12px;border-top:1px dashed #dde5ed;font-size:13px;color:#5b6e80;line-height:1.7}
@media (max-width:600px){
  .art-know{padding:15px 16px;margin:18px 0}
  .art-know-ttl{font-size:15.5px}
  .art-know li{font-size:15px;padding-left:24px}
}

/* ---- ガイドブックのご案内 ---- */
.dl-guide{
  border:1px solid #d9e2ec;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#123a6b 0%,#16324f 100%);
  box-shadow:0 8px 24px rgba(18,58,107,.13);
}
.dl-guide-body{padding:26px 26px 24px}
.dl-kicker{
  display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:12px;
  background:#e06c10;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em;
}
.dl-ttl{margin:0 0 6px;color:#fff;font-size:23px;line-height:1.4;font-weight:700}
.dl-sub{margin:0 0 16px;color:#bcd3ea;font-size:14px}
.dl-list{margin:0 0 20px;padding:0;list-style:none}
.dl-list li{
  position:relative;padding-left:24px;margin-bottom:9px;color:#eaf2fa;font-size:14.5px;line-height:1.7;
}
.dl-list li strong{color:#ffd9a8}
.dl-list li::before{
  content:"";position:absolute;left:2px;top:.6em;width:9px;height:5px;
  border-left:2.5px solid #4fd1bd;border-bottom:2.5px solid #4fd1bd;transform:rotate(-45deg);
}
.dl-btn{
  display:block;max-width:440px;padding:16px 20px;border-radius:9px;text-align:center;
  background:linear-gradient(180deg,#f08a2c,#e06c10);color:#fff;font-weight:700;font-size:17px;
  text-decoration:none;box-shadow:0 4px 12px rgba(224,108,16,.35);transition:transform .12s ease;
}
.dl-btn:hover{transform:translateY(-1px)}
.dl-btn .sub{display:block;margin-top:4px;font-size:12.5px;font-weight:400;opacity:.92}
.dl-note{margin:14px 0 0;color:#9fb9d4;font-size:12.5px;line-height:1.7}

/* ガイドブックの申込み（2026-10-10 追加。直リンクをやめ、メールでお届けする形に） */
.dl-form{margin:18px 0 0;max-width:440px}
.dl-fields{display:flex;flex-direction:column;gap:9px;margin:0 0 12px}
.dl-fields input{
  width:100%;padding:13px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:#fff;font-size:16px;box-sizing:border-box;
}
.dl-fields input::placeholder{color:#9fb9d4}
.dl-fields input:focus{outline:none;border-color:#4fd1bd;background:rgba(255,255,255,.12)}
.dl-form .dl-btn{width:100%;border:0;cursor:pointer;font-family:inherit}
.dl-form .dl-btn:disabled{opacity:.6;cursor:default;transform:none}
.dl-err{display:none;margin:0 0 10px;padding:10px 12px;border-radius:7px;
  background:rgba(224,76,76,.16);color:#ffc9c9;font-size:13.5px;line-height:1.6}
.dl-done{margin:0;padding:14px 16px;border-radius:8px;background:rgba(79,209,189,.14);
  color:#d6f5ef;font-size:14px;line-height:1.8}
.dl-direct{color:#4fd1bd;font-weight:700}
@media (max-width:600px){
  .dl-guide-body{padding:20px 18px}
  .dl-ttl{font-size:20px}
  .dl-list li{font-size:14px}
  .dl-btn{font-size:16px;padding:15px 16px}
  .dl-fields input{font-size:16px;padding:12px 13px}
}

/* 記事の追従CTAは2行になったため、本文の下余白を広げます（82pxでは隠れます） */
@media(max-width:820px){
  body.read{padding-bottom:116px}
}

/* 2026-10-07 追加。
   「蓄電池 見積もり」「蓄電池 業者」で来る方は、すでに業者を探しています。
   その方のファーストビューに診断しか無く、見積りフォームは16画面先でした。
   診断は残したまま、見積りへの直通路を写真の上に置きます。 */
.rd-hero-direct{display:block; margin:18px 0 6px; padding:17px 20px; text-align:center;
  background:linear-gradient(180deg,#f5922f,#e06c10); color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:.04em; border-radius:999px;
  box-shadow:0 8px 20px rgba(224,108,16,.28)}
.rd-hero-direct:hover{filter:brightness(1.05)}
.rd-hero-direct .sub{display:block; margin-top:4px; font-size:.78em; font-weight:600;
  letter-spacing:0; opacity:.95}