@charset "utf-8";
/* ============================================================
   千葉停電LP 専用の追加部品 blackout-v3.css
   2026-10-09 / COO-CODE-CHIBA-BLACKOUT-V3-20261008-01
   /assets/ss-site-v3.css の直後に読み込む「このページだけの追加」。
   ss-site-v3.css は1バイトも変更しない（公開済み6ページへ影響させないため）。
   色は ss-site-v3.css の変数のみを使う（新しい色を1つも足さない）。
   旧 story.css（濃紺の全面背景・オレンジ/緑のボタン・金色の見出し）は読み込まない。
   ============================================================ */

/* ---------- 和文の改行位置 ----------
   「資料ダウ／ンロード」のようにカタカナ語の途中で折り返すのを止める。
   word-break:auto-phrase は Chrome が文節辞書で区切るので、
   行末4文字を束ねる v3-nb（孤立行対策）とは役割が違い、併用できる。
   このページのCSSなので、公開済み6ページには影響しない。 */
body.v3{word-break:auto-phrase}

/* ---------- ヒーローの補足行（あのクレーム対応が、私の仕事を変えました） ---------- */
.bl-hero-foot{
  font-size:14px;line-height:1.8;color:var(--v3-body);
  margin:-10px 0 18px;
}

/* ---------- 寺嵜の手紙（読み物の段） ---------- */
.bl-letter p{font-size:17px;line-height:2.0}
.bl-quote{
  margin:22px 0;padding:18px 22px;
  background:var(--v3-band);border-left:5px solid var(--v3-accent);
  border-radius:0 var(--v3-radius) var(--v3-radius) 0;
  font-size:clamp(18px,2.2vw,22px);font-weight:800;line-height:1.7;color:var(--v3-head);
}
.bl-big{
  font-size:clamp(19px,2.3vw,25px);font-weight:800;line-height:1.65;
  color:var(--v3-head);margin:26px 0;
}
.bl-sign{
  margin-top:26px;font-size:15px;font-weight:800;color:var(--v3-deep);text-align:right;
}

/* ---------- 4コマ ---------- */
.bl-comic{
  display:grid;gap:18px;margin:0 0 6px;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.bl-panel{
  margin:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--v3-white);border:1px solid var(--v3-line);
  border-radius:var(--v3-radius);box-shadow:var(--v3-shadow);
}
.bl-panel::before{content:"";display:block;flex:0 0 auto;height:16px;background:var(--v3-card-band)}
.bl-panel-head{display:flex;align-items:center;gap:12px;padding:16px 18px 10px}
.bl-panel-no{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--v3-cta);color:var(--v3-white);
  font-size:14px;font-weight:800;letter-spacing:.02em;
}
.bl-panel-head h3{margin:0;font-size:17px;line-height:1.5}
/* 挿絵（寺嵜の体験の再現画）。写真と同じ扱いで、中の絵柄は変えない */
.bl-art{display:block;margin:0;padding:0 18px;background:var(--v3-white)}
.bl-art svg{display:block;width:100%;height:auto;border-radius:6px}
.bl-panel figcaption{
  padding:12px 18px 18px;font-size:14px;line-height:1.85;color:var(--v3-body);
}
/* 4コマ目だけ絵が横長（800x250）なので列をまたいで置く */
@media (min-width:980px){ .bl-comic>.bl-panel:last-child{grid-column:1 / -1} }

/* ---------- 本文＋図版の2段組 ---------- */
.bl-split{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.bl-split>*{min-width:0}

/* ---------- 30秒チェック（当てはまるものリスト） ---------- */
.bl-check{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.bl-check>li{
  margin:0;position:relative;padding:14px 16px 14px 48px;
  background:var(--v3-white);border:1px solid var(--v3-line);
  border-radius:var(--v3-radius);box-shadow:var(--v3-shadow);
  font-size:15px;line-height:1.8;
}
.bl-check>li::before{
  content:"";position:absolute;left:18px;top:21px;
  width:14px;height:8px;border-left:3px solid var(--v3-cta);border-bottom:3px solid var(--v3-cta);
  transform:rotate(-45deg);
}

/* ---------- 番号つきの箇条（お渡しする内容・ご依頼後の流れ） ---------- */
.bl-ol{counter-reset:bl;list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bl-ol>li{
  counter-increment:bl;margin:0;position:relative;padding-left:46px;
  font-size:15px;line-height:1.8;
}
.bl-ol>li::before{
  content:counter(bl);position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--v3-cta);color:var(--v3-white);
  font-size:14px;font-weight:800;
}
.bl-ol>li strong{display:block;color:var(--v3-head);font-size:16px}
.bl-ol>li small{display:block;color:var(--v3-body);margin-top:3px}

/* ---------- 途中のCTA ---------- */
.bl-midcta{
  margin:22px 0 0;padding:20px 22px;text-align:center;
  background:var(--v3-band);border-radius:var(--v3-radius);
}
.bl-midcta p{color:var(--v3-head);font-weight:700;margin:0 0 14px}

/* ---------- 解説動画 ---------- */
.bl-video{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 8px;
  border-radius:var(--v3-radius);overflow:hidden;background:var(--v3-base);
  border:1px solid var(--v3-line)}
.bl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- 相談の囲みの中のボタン ---------- */
.v3-box .v3-btn,.v3-box .v3-btn-out{margin:6px 10px 6px 0}
.bl-copy-status{min-height:1.9em;margin:10px 0 0}

/* ---------- スマホ固定CTA（電話／写真LINE相談／おひさま交換見積の3つ） ---------- */
@media (max-width:760px){
  .bl-sticky3 a{
    flex-direction:column;justify-content:center;gap:1px;
    padding:7px 4px;min-height:54px;
    font-size:13px;line-height:1.3;text-align:center;
  }
  .bl-sticky3 a small{font-size:10.5px;font-weight:700;line-height:1.3}
  .bl-sticky3 a:last-child{flex:1.3 1 0}
  /* 固定CTAが本文・注記を隠さないだけの下余白（既定74pxでは3段ボタンに足りない） */
  body.v3{padding-bottom:84px}
  /* 寺嵜AIの浮きボタンは固定CTAの上（bottom≒86〜130px）に出る。
     最下行のフッター注記がその下に潜らないよう、フッター末尾に逃げを作る。
     共通CSS側が `.v3-foot .v3-foot-copy`(0,2,0) なので、同じ深さで書かないと勝てない */
  .v3-foot .v3-foot-copy{padding-bottom:96px}
}
@media (max-width:360px){
  .bl-sticky3 a{font-size:12px}
  .bl-sticky3 a small{display:none}
}