/* =========================================================================
   法人向けソーラーカーポートだけの見た目（2026-10-09 作り直し・試作）
   css/energy-page-261009.css（営農型・自家消費と共通。変えない）のあとに読む。
   <body class="ep26 ep26-cp"> のページだけに効く。
   決まり（共通の CSS と同じ）:
   - 幅は3種類だけ: いっぱい／図・表の幅 1160／本文の幅 880。どれも中央
   - 動きは「最初から表示」の1種類。新しい動きは足さない
   - inset は使わない。flex の gap は使わない（並べるのは grid の gap だけ。古い iPhone でも効く）
   - ベタ塗りの帯に白い字は使わない（白い字は濃い緑の小さな丸の番号とボタンだけ）
   ========================================================================= */

/* ---------- 折り返し: 見出し・短い強調・一覧の札は、語の途中で折らない（<wbr> と読点の後ろで折る）。入らないときだけ、どこでも折る ---------- */
.ep26-cp .ep-h2, .ep26-cp .ep-rows h3, .ep26-cp .ep-flow5 h3, .ep26-cp .ep-related a, .ep26-cp .ep-faq summary,
.ep26-cp .ep-short a > span, .ep26-cp figcaption, .ep26-cp .cp-kw { word-break: keep-all; overflow-wrap: anywhere; }
/* 段落の最後の行に1字だけ落ちるのを避ける（対応していないブラウザは今までどおり） */
.ep26-cp .ep-sec, .ep26-cp .ep-toc, .ep26-cp .ep-cta, .ep26-cp .ep-hero { text-wrap: pretty; }

/* ---------- 最初の画面: 小見出しの代わりに線のアイコンだけ（言葉は足さない） ---------- */
.ep26-cp .cp-kicker { margin: 0 0 12px; }
.ep26-cp .cp-kicker .ep-ico { font-size: 46px; stroke-width: 1.5; }

/* ---------- 目次: 9つを3列×3段 ---------- */
.ep26-cp .sx-toc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- ソーラーカーポートとは: 2段目（図＋3つの説明）。右の3つは左の図と同じ高さに伸ばす ---------- */
.ep26-cp .cp-sysflow { display: flex; flex-direction: column; }
.ep26-cp .cp-sysflow .sc-flow { flex: 1 0 auto; grid-template-rows: 1fr auto 1fr auto 1fr; }
.ep26-cp .cp-sysflow .sc-flow-step b { font-size: 18px; }
.ep26-cp .cp-sysflow .sc-flow-ico .ep-ico { stroke-width: 1.7; }
.ep26-cp .cp-sysflow .sc-flow-buy { font-size: 16px; line-height: 1.75; }

/* ---------- 費用の考え方 ---------- */
.ep26-cp .cp-note { padding: 22px 26px; }
.ep26-cp .cp-note p { font-size: 16px; line-height: 1.85; }
.ep26-cp .cp-note strong { color: var(--ep-g9); }
.ep26-cp .cp-note .ep-btns { margin-top: 16px; }

/* 費用を左右する点: 1枚のカードの中の6マス（見出しのマス＋5つ） */
.ep26-cp .cp-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.ep26-cp .cp-factors-list { display: contents; }
.ep26-cp .cp-factors-title,
.ep26-cp .cp-factors-list > li { min-width: 0; padding: 22px 26px; border-left: 1px solid var(--ep-line); border-top: 1px solid var(--ep-line); }
.ep26-cp .cp-factors-title { margin: 0; display: flex; align-items: center; background: var(--ep-g1); color: var(--ep-g9); font-size: 21px; line-height: 1.45; font-weight: 700; border-left: 0; border-top: 0; }
.ep26-cp .cp-factors-list > li { list-style: none; display: flex; flex-direction: column; justify-content: center; font-size: 17px; line-height: 1.6; font-weight: 700; color: var(--ep-ink); }
.ep26-cp .cp-factors-list > li:nth-child(-n+2) { border-top: 0; }
.ep26-cp .cp-factors-list > li:nth-child(3) { border-left: 0; }
.ep26-cp .cp-k { display: block; }
.ep26-cp .cp-k + .cp-k { margin-top: 2px; font-size: 15.5px; font-weight: 400; color: var(--ep-mute); }

/* ---------- 事例: 写真（左）と3行のカード（右）。高さをそろえる ---------- */
.ep26-cp .cp-case { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ep26-cp .cp-case .ep-fill { min-height: 360px; }
.ep26-cp .cp-case-card { padding: 6px 30px 26px; display: flex; flex-direction: column; }
.ep26-cp .cp-case-rows { margin: 0; flex: 1 0 auto; display: flex; flex-direction: column; }
.ep26-cp .cp-case-row { flex: 1 0 auto; display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: 16px; align-content: center; padding: 18px 0; border-top: 1px solid var(--ep-line); }
.ep26-cp .cp-case-row:first-child { border-top: 0; }
.ep26-cp .cp-case-row dt { font-size: 15px; line-height: 1.75; font-weight: 700; color: var(--ep-g7); padding-top: 2px; }
.ep26-cp .cp-case-row dd { margin: 0; min-width: 0; }
.ep26-cp .cp-case-row dd b { display: block; font-size: 19px; line-height: 1.55; color: var(--ep-ink); }
.ep26-cp .cp-case-row dd b + p { margin-top: 6px; }
.ep26-cp .cp-case-row dd p { font-size: 15.5px; line-height: 1.85; color: var(--ep-mute); }
.ep26-cp .cp-case-link { margin: 0; padding-top: 20px; border-top: 1px solid var(--ep-line); }

/* ---------- 補助金: 項目名（左・濃い緑）＋説明（右）の表 ---------- */
.ep26-cp .cp-defs { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; overflow: hidden; }
.ep26-cp .cp-defs > li { display: grid; grid-template-columns: 15em minmax(0, 1fr); border-top: 1px solid var(--ep-line); }
.ep26-cp .cp-defs > li:first-child { border-top: 0; }
.ep26-cp .cp-defs h3 { margin: 0; padding: 20px 22px; background: var(--ep-g0); color: var(--ep-g9); font-size: 17px; line-height: 1.6; font-weight: 700; }
.ep26-cp .cp-defs > li > div { min-width: 0; padding: 20px 26px; }
.ep26-cp .cp-defs p { font-size: 16px; line-height: 1.9; }
.ep26-cp .cp-key { padding: 22px 28px; border-left: 5px solid var(--ep-g7); border-radius: 0 var(--ep-radius) var(--ep-radius) 0; font-size: 18px; line-height: 1.8; font-weight: 700; color: var(--ep-g9); }
.ep26-cp .cp-plain { font-size: 16px; line-height: 1.9; }

/* ---------- 縦の手順（建築確認）・日付の流れ（2027年）: 番号の丸を線でつなぐ ---------- */
.ep26-cp .cp-2col-steps { grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); }
.ep26-cp .cp-2col-dates { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ep26-cp .cp-steps-card { display: flex; flex-direction: column; }
.ep26-cp .cp-vsteps { flex: 1 0 auto; display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; counter-reset: cpv; }
.ep26-cp .cp-vsteps > li { flex: 1 0 auto; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 10px 0; counter-increment: cpv; }
.ep26-cp .cp-vsteps > li:last-child { flex-grow: 0; }
.ep26-cp .cp-vsteps > li::before { content: counter(cpv); width: 40px; height: 40px; border-radius: 50%; background: var(--ep-g8); color: #fff; font-size: 17px; font-weight: 700; line-height: 40px; text-align: center; }
.ep26-cp .cp-vsteps > li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 54px; bottom: -6px; width: 2px; background: #b7d0bd; }
.ep26-cp .cp-vsteps b { display: block; padding-top: 5px; font-size: 19px; line-height: 1.5; color: var(--ep-ink); }
.ep26-cp .cp-vsteps b + span { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.7; color: var(--ep-mute); }
.ep26-cp .cp-dates b { color: var(--ep-g9); }

/* 段落を1枚のカードに（線で区切る） */
.ep26-cp .cp-paras { padding: 6px 30px; }
.ep26-cp .cp-paras > p { margin: 0; padding: 18px 0; border-top: 1px solid var(--ep-line); font-size: 16px; line-height: 1.9; }
.ep26-cp .cp-paras > p:first-child { border-top: 0; }

/* ---------- 固定資産税: いちばん大事な1文を大きく ---------- */
.ep26-cp .cp-lead { padding: 26px 30px; font-size: 21px; line-height: 1.7; font-weight: 700; color: var(--ep-g9); }

/* ---------- 区画の頭の説明と、すぐ下の一覧の間（共通の CSS の margin: 0 が、区画の中の上の空き 28px を打ち消すため） ---------- */
.ep26-cp .ep-wrap > .ep-flow5, .ep26-cp .ep-wrap > .ep-related { margin-top: 28px; }

/* ---------- 導入の流れ: 白い面の上なので、丸のまわりの縁取りも白に ---------- */
.ep26-cp #flow .ep-flow5 .sc-step-num { box-shadow: 0 0 0 6px #fff; }

/* ---------- 最後の呼びかけ: 写真の見せる位置（柱と屋根の付け根が入るように） ---------- */
.ep26-cp .ep-cta-photo img { object-position: 50% 58%; }

/* =========================================================================
   スマホ・小さいタブレット（〜900）: 1列
   ========================================================================= */
@media (max-width: 900px) {
    .ep26-cp .cp-kicker { margin-bottom: 6px; }
    .ep26-cp .ep-wrap > .ep-flow5, .ep26-cp .ep-wrap > .ep-related { margin-top: 22px; }
    .ep26-cp .cp-kicker .ep-ico { font-size: 34px; }
    .ep26-cp .cp-case, .ep26-cp .cp-2col-steps, .ep26-cp .cp-2col-dates { grid-template-columns: minmax(0, 1fr); }
    .ep26-cp .cp-sysflow .sc-flow { grid-template-rows: none; }
    .ep26-cp .cp-sysflow .sc-flow-step b { font-size: 16.5px; }
    .ep26-cp .cp-note { padding: 18px 18px; }
    .ep26-cp .cp-note p { font-size: 15.5px; }
    .ep26-cp .cp-factors { grid-template-columns: minmax(0, 1fr); }
    .ep26-cp .cp-factors-title, .ep26-cp .cp-factors-list > li { padding: 14px 18px; border-left: 0; }
    .ep26-cp .cp-factors-title { font-size: 18px; }
    .ep26-cp .cp-factors-list > li, .ep26-cp .cp-factors-list > li:nth-child(-n+2) { border-top: 1px solid var(--ep-line); font-size: 16px; }
    .ep26-cp .cp-k + .cp-k { font-size: 15px; }
    /* 写真のカードの高さは共通の CSS（261009b で、1列のとき flex: 0 0 auto・高さ 220px）に任せる。事例の PC 用の min-height 360px だけ外す */
    .ep26-cp .cp-case .ep-fill { min-height: 0; }
    .ep26-cp .cp-case-card { padding: 2px 18px 20px; }
    .ep26-cp .cp-case-row { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
    .ep26-cp .cp-case-row dt { padding-top: 0; }
    .ep26-cp .cp-case-row dd b { font-size: 17px; }
    .ep26-cp .cp-case-row dd p { font-size: 15px; }
    .ep26-cp .cp-case-link { padding-top: 16px; }
    .ep26-cp .cp-case-link .ep-btn { width: 100%; }
    .ep26-cp .cp-defs > li { grid-template-columns: minmax(0, 1fr); }
    .ep26-cp .cp-defs h3 { padding: 12px 16px; font-size: 16px; }
    .ep26-cp .cp-defs > li > div { padding: 12px 16px 16px; }
    .ep26-cp .cp-defs p { font-size: 15.5px; line-height: 1.85; }
    .ep26-cp .cp-key { padding: 16px 18px; font-size: 16.5px; }
    .ep26-cp .cp-plain { font-size: 15.5px; }
    .ep26-cp .cp-vsteps > li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 8px 0; }
    .ep26-cp .cp-vsteps > li::before { width: 36px; height: 36px; line-height: 36px; font-size: 16px; }
    .ep26-cp .cp-vsteps > li:not(:last-child)::after { left: 17px; top: 48px; bottom: -4px; }
    .ep26-cp .cp-vsteps b { font-size: 17px; padding-top: 4px; }
    .ep26-cp .cp-vsteps b + span { font-size: 15px; }
    .ep26-cp .cp-paras { padding: 2px 18px; }
    .ep26-cp .cp-paras > p { padding: 14px 0; font-size: 15.5px; line-height: 1.85; }
    .ep26-cp .cp-lead { padding: 18px 18px; font-size: 18px; }
}

/* 385 の幅まで（375・360 など）: 薄緑の箱の2行目（工場・店舗・事業所の建物で使います）が箱から出ないよう、「事業所の」の後ろで折る（語の途中では折らない） */
@media (max-width: 385px) {
    .ep26-cp .sc-flow-buy .cp-nw2 { white-space: normal; }
    /* 「建物で使う（自家消費）」が1行の幅ちょうどで、閉じかっこが箱の右端に3px かかったため、字を少しだけ小さく */
    .ep26-cp .cp-sysflow .sc-flow-step b { font-size: 16px; }
}