@charset "UTF-8";
/* 蓄電池LP 共通スタイル（全国メイン／47都道府県ページ共通） */

:root{
  --navy:#16324f; --teal:#2a9d8f; --green:#2c7a4b; --red:#c83839; --amber:#e0a800;
  --ink:#3c4a59; --muted:#6b7785; --line:#e3e8ee; --soft:#f7fdfb; --gray:#f4f6f8;
  --radius:12px; --wrap:920px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:#fff; line-height:1.9;
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size:16px; -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto}
a{color:var(--teal)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
.sec{margin:52px 0 0}
h2.h{margin:0 0 16px;font-size:1.34rem;font-weight:800;color:var(--navy);border-left:6px solid var(--teal);padding-left:12px;line-height:1.5}
h2.h.red{border-left-color:var(--red)}
h2.h.green{border-left-color:var(--green)}
h3{font-size:1.1rem;font-weight:800;color:var(--navy);line-height:1.6}
.lead{font-size:1.02rem}
.small{font-size:.9rem;color:var(--muted);line-height:1.85}
.nowrap{white-space:nowrap}

/* ヒーロー（ファーストビュー）
   装飾は最小限にし、コピーと実際の単価だけで構成します。
   グラデーションや光の演出を重ねるとテンプレート然として見えるため、使いません。 */
.hero{
  position:relative; color:var(--ink);
  padding:clamp(36px,5.5vw,68px) 0 clamp(38px,5vw,62px);
  background:linear-gradient(180deg,#eef6fa 0%,#f8fbfd 62%,#fff 100%);
  border-bottom:1px solid var(--line);
}
.hero .wrap{position:relative}

/* 前置き。目立たせず、文脈だけ伝える */
.hero .tag{
  margin:0 0 clamp(12px,1.6vw,16px);
  font-size:.88rem; font-weight:800; letter-spacing:.02em; color:#227e70;
  padding-left:13px; border-left:3px solid #2a9d8f;
}

/* キャッチコピー。ここだけ極端に大きくする */
.hero h1{
  margin:0 0 clamp(18px,2.4vw,24px);
  font-size:clamp(1.92rem,5.2vw,3.05rem);
  line-height:1.26; font-weight:900; color:var(--navy);
  letter-spacing:-.02em; text-wrap:balance;
}
/* 黄色のマーカー。手でなぞったような下半分だけの塗り */
.hero h1 .mark{
  background:linear-gradient(transparent 58%, #ffe07a 58%, #ffe07a 92%, transparent 92%);
  padding:0 .04em;
}
/* 誰に向けた話かを、2本のラベルではっきり示す。
   色は下の「2つの入口」（店舗＝緑／家庭＝赤）と揃えています */
.hero h1 .sm{
  display:block; margin-top:.66em;
  font-size:.5em; font-weight:800; line-height:1.4; letter-spacing:0;
}
.hero h1 .sm .to{
  display:inline-block; margin:0 0 .34em;
  padding:.2em .62em .26em; border-radius:5px; border-left:5px solid;
}
.hero h1 .sm .biz{background:#e2f3ef; color:#186b5e; border-left-color:#2a9d8f}
.hero h1 .sm .home{background:#fdebea; color:#a93a32; border-left-color:#d9534f}

/* 要点は文章にせず、拾い読みできる短い行で */
.hero .lead-points{
  margin:0; padding:0; list-style:none;
  font-size:clamp(1rem,1.5vw,1.12rem); line-height:1.6; color:var(--ink);
}
.hero .lead-points li{
  position:relative; padding:0 0 0 1.5em; margin:0 0 .52em;
}
.hero .lead-points li::before{
  content:""; position:absolute; left:.14em; top:.52em;
  width:.42em; height:.42em; border-radius:50%; background:var(--teal);
}
.hero .lead-points strong{font-weight:900}
.hero strong{color:var(--navy);font-weight:800}

/* 安心材料は箇条書きではなく1行に。バッジを並べるとテンプレートに見えるため */
.trust{margin:clamp(16px,2vw,22px) 0 0;display:block;color:var(--muted);font-size:.88rem;letter-spacing:.01em}
.trust span{position:relative;padding:0 .9em 0 0;margin-right:.3em}
.trust span+span{padding-left:.9em}
.trust span+span::before{content:"／";position:absolute;left:-.15em;color:#c3d0da}

.hero .cta-wrap{margin-top:clamp(22px,2.6vw,30px);text-align:left}
.hero .cta{margin:0;max-width:420px;box-shadow:0 8px 22px rgba(0,0,0,.28)}

/* 左にコピー、右に実際の単価 */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(28px,4.5vw,60px);align-items:center}
@media(max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero .cta,.hero .cta-wrap{text-align:center}
  .hero .cta{margin:0 auto}
}

/* 単価の対比。装飾ではなく、この商材の根拠そのものを見せる */
.rate-card{
  background:#fff; color:var(--ink); border-radius:12px; padding:clamp(20px,2.4vw,26px);
  box-shadow:0 14px 40px rgba(0,0,0,.26);
}
.rate-card .rc-ttl{
  margin:0 0 16px; font-size:.9rem; font-weight:800; color:var(--muted); letter-spacing:.02em;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.rate-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0}
.rate-row .rc-when{font-size:.95rem;font-weight:700;color:var(--navy)}
.rate-row .rc-when em{display:block;font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:3px}
.rate-row .rc-yen{font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.rate-row.night .rc-yen{color:#2c7a4b}
.rate-row.day .rc-yen{color:#c83839}
.rate-row .rc-yen small{font-size:.52em;font-weight:700;margin-left:2px;color:var(--muted)}
.rate-diff{
  margin-top:14px; padding:14px 16px; border-radius:9px; background:#f4fbf7; border:1px solid #cfe9dd;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.rate-diff b{font-size:.92rem;color:var(--navy)}
.rate-diff .rc-diff{font-size:clamp(1.24rem,2.2vw,1.6rem);font-weight:900;color:#2c7a4b;white-space:nowrap}
.rate-note{margin:12px 0 0;font-size:.78rem;line-height:1.75;color:var(--muted)}
@media(max-width:420px){.rate-card{padding:18px}}

/* CTAボタン */
.cta{display:block;max-width:560px;margin:0 auto;padding:19px 22px;background:var(--green);color:#fff;
  text-decoration:none;border-radius:var(--radius);font-size:1.1rem;font-weight:800;line-height:1.6;
  text-align:center;box-shadow:0 4px 14px rgba(44,122,75,.28);border:none;cursor:pointer;width:100%}
.cta:hover{filter:brightness(1.06)}
.cta .sub{display:block;font-size:.82rem;font-weight:600;margin-top:6px;opacity:.92}
.cta-wrap{margin:30px 0 0;text-align:center}
.cta.ghost{background:#fff;color:var(--green);border:2px solid var(--green);box-shadow:none}

/* カード */
.cards{display:flex;flex-wrap:wrap;gap:14px}
.card{flex:1 1 260px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.card.red{border-top:4px solid var(--red)}
.card.green{border-top:4px solid var(--green)}
.card p.t{margin:0 0 8px;font-weight:800;color:var(--navy);font-size:1.02rem}
.card p.d{margin:0;font-size:.95rem;line-height:1.85}

/* 枠 */
.box{background:var(--soft);border:2px solid var(--teal);border-radius:var(--radius);padding:22px}
.box.warn{background:#fffaf0;border:2px dashed var(--amber)}
.box.gray{background:var(--gray);border:1px solid var(--line)}
.quote{border-left:5px solid var(--teal);background:var(--soft);border-radius:0 10px 10px 0;padding:16px 20px;margin:18px 0 0}

/* チェックリスト */
ul.check{list-style:none;padding:0;margin:0;display:grid;gap:10px}
ul.check li{padding-left:1.7em;position:relative;line-height:1.85}
ul.check li::before{content:"✔";position:absolute;left:0;color:var(--green);font-weight:800}
ul.cross li::before{content:"×";color:var(--red)}

/* テーブル */
.tbl-scroll{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.97rem;background:#fff}
table.t th,table.t td{padding:13px 10px;border-bottom:1px solid #e8edf1;text-align:left;vertical-align:top}
table.t th{color:var(--navy);white-space:nowrap;background:#fafcfd;font-weight:700}

/* 診断 */
.dx{background:#fff;border:2px solid var(--navy);border-radius:14px;overflow:hidden}
.dx-head{background:var(--navy);color:#fff;padding:16px 20px}
.dx-head p{margin:0;font-weight:800;font-size:1.06rem}
.dx-body{padding:20px}
.dx-q{margin:0 0 8px;font-weight:800;color:var(--navy)}
.opts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.opt{flex:1 1 150px;padding:13px 10px;border:2px solid var(--line);border-radius:10px;background:#fff;
  font-size:.97rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:center;line-height:1.5}
.opt:hover{border-color:var(--teal)}
.opt[aria-pressed="true"]{border-color:var(--green);background:#f4fbf7;color:var(--green)}
.dx-result{display:none;margin:4px 0 0;padding:18px 20px;border-radius:10px;line-height:1.9}
.dx-result.show{display:block}
.dx-result.ok{background:#f4fbf7;border:2px solid var(--green)}
.dx-result.ng{background:#fdf6f6;border:2px solid var(--red)}
.dx-result h3{margin:0 0 8px}

/* フォーム */
.form{background:#fff;border:2px solid var(--green);border-radius:14px;overflow:hidden}
.form-head{background:var(--green);color:#fff;padding:16px 20px}
.form-head p{margin:0;font-weight:800;font-size:1.08rem}
.form-head .s{margin:4px 0 0;font-size:.86rem;font-weight:600;opacity:.94}
.form-body{padding:20px}
.steps{display:flex;gap:6px;margin:0 0 18px}
.steps i{flex:1;height:6px;border-radius:3px;background:var(--line);font-style:normal}
.steps i.on{background:var(--green)}
.fld{margin:0 0 16px}
.fld label{display:block;font-weight:700;color:var(--navy);margin:0 0 6px;font-size:.97rem}
.fld .req{color:var(--red);font-size:.82rem;margin-left:6px}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld select{
  width:100%;padding:13px 12px;border:1px solid #c8d2da;border-radius:8px;font-size:16px;color:var(--ink);background:#fff}
.fld input:focus,.fld select:focus{outline:2px solid var(--teal);outline-offset:1px}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{flex:1 1 140px;margin:0;padding:12px 8px;border:2px solid var(--line);border-radius:8px;
  text-align:center;cursor:pointer;font-weight:700;font-size:.95rem;color:var(--ink);position:relative}
.radios input{position:absolute;opacity:0;width:0;height:0}
.radios label.on{border-color:var(--green);background:#f4fbf7;color:var(--green)}
.agree{background:var(--gray);border:1px solid var(--line);border-radius:8px;padding:14px;margin:0 0 16px}
.agree label{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.8;color:var(--ink);cursor:pointer}
.agree input{margin-top:5px;flex:none;width:18px;height:18px}
.step{display:none}
.step.on{display:block}
.btn-row{display:flex;gap:10px;margin:6px 0 0}
.btn-back{flex:none;padding:15px 18px;background:#fff;border:1px solid #c8d2da;border-radius:10px;
  color:var(--muted);font-weight:700;cursor:pointer;font-size:.97rem}
.err{color:var(--red);font-size:.9rem;font-weight:700;margin:0 0 12px;display:none}
.err.show{display:block}

/* FAQ */
.faq details{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;background:#fff}
.faq summary{padding:15px 18px;font-weight:700;color:var(--navy);cursor:pointer;line-height:1.7;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q. ";color:var(--teal);font-weight:800}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:15px 18px;margin:0;font-size:.97rem;line-height:1.9}

/* 地域リンク（県ページ下部の近隣県） */
.pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.pref-grid a{display:block;padding:11px 6px;border:1px solid var(--line);border-radius:8px;background:#fff;
  text-align:center;text-decoration:none;color:var(--navy);font-weight:700;font-size:.92rem}
.pref-grid a:hover{border-color:var(--teal);background:var(--soft)}
.region-ttl{margin:20px 0 8px;font-size:.92rem;font-weight:800;color:var(--muted);letter-spacing:.04em}

/* ===== 地図風の地域選択 =====
   地方ブロックを日本列島の並びに近い形で配置します。
   狭い画面では自動的に縦積みのリストに切り替わります。 */
.jp-map{
  display:grid; gap:12px; margin-top:6px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:
    ".       .       .        hokkaido"
    ".       .       .        tohoku"
    ".       chubu   kanto    tohoku"
    "chugoku kinki   kanto    ."
    "kyushu  shikoku .        ."
    "okinawa .       .        .";
}
.jp-block{
  border:2px solid var(--line); border-radius:12px; padding:12px 12px 13px; background:#fff;
  border-top-width:5px;
}
.jp-region{
  margin:0 0 9px; font-size:.9rem; font-weight:800; letter-spacing:.03em;
  display:flex; align-items:center; gap:8px;
}
.jp-prefs{display:flex;flex-wrap:wrap;gap:7px}
.jp-pref{
  display:inline-block; padding:8px 12px; border-radius:7px; text-decoration:none;
  font-size:.9rem; font-weight:700; border:1px solid var(--line); background:#fff; color:var(--navy);
  transition:transform .12s,border-color .12s,background .12s;
}
.jp-pref:hover{transform:translateY(-1px)}
.jp-closed{
  font-size:.72rem; font-weight:800; color:#fff; background:var(--muted);
  border-radius:999px; padding:2px 8px; letter-spacing:0;
}
.jp-block.closed{opacity:.72}
.jp-pref.out{color:var(--muted);background:#f4f6f8;border-style:dashed}

/* 地方ごとの色。選びやすさのために色で区別します */
.jp-hokkaido{border-top-color:#4a90d9}  .jp-hokkaido .jp-region{color:#2f6fb0}
.jp-hokkaido .jp-pref:hover{border-color:#4a90d9;background:#eef5fc}
.jp-tohoku{border-top-color:#3fa796}    .jp-tohoku .jp-region{color:#2b7a6e}
.jp-tohoku .jp-pref:hover{border-color:#3fa796;background:#edf8f6}
.jp-kanto{border-top-color:#e0a800}     .jp-kanto .jp-region{color:#a87c00}
.jp-kanto .jp-pref:hover{border-color:#e0a800;background:#fdf7e6}
.jp-chubu{border-top-color:#7c9e3f}     .jp-chubu .jp-region{color:#5c7530}
.jp-chubu .jp-pref:hover{border-color:#7c9e3f;background:#f3f8ea}
.jp-kinki{border-top-color:#c9683f}     .jp-kinki .jp-region{color:#9c4f2f}
.jp-kinki .jp-pref:hover{border-color:#c9683f;background:#fdf1ec}
.jp-chugoku{border-top-color:#8a6fb0}   .jp-chugoku .jp-region{color:#6b5490}
.jp-chugoku .jp-pref:hover{border-color:#8a6fb0;background:#f5f1fa}
.jp-shikoku{border-top-color:#3f8fa7}   .jp-shikoku .jp-region{color:#2e6c80}
.jp-shikoku .jp-pref:hover{border-color:#3f8fa7;background:#edf6f9}
.jp-kyushu{border-top-color:#c05a7a}    .jp-kyushu .jp-region{color:#96435d}
.jp-kyushu .jp-pref:hover{border-color:#c05a7a;background:#fdeff3}
.jp-okinawa{border-top-color:#8a95a1}   .jp-okinawa .jp-region{color:#6b7785}

/* タブレット：2列に */
@media(max-width:900px){
  .jp-map{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:
      "hokkaido tohoku"
      "kanto    chubu"
      "kinki    chugoku"
      "shikoku  kyushu"
      "okinawa  .";
  }
}
/* スマートフォン：縦1列のリストに */
@media(max-width:620px){
  .jp-map{grid-template-columns:1fr;grid-template-areas:none;gap:10px}
  .jp-block{grid-area:auto !important}
  .jp-pref{padding:9px 13px;font-size:.94rem}
}

/* 2つの入口（店舗／ご家庭） */
.audience{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.audience{grid-template-columns:1fr}}
.aud{display:flex;flex-direction:column;gap:8px;padding:24px 22px;border-radius:14px;text-decoration:none;
  border:2px solid var(--line);background:#fff;transition:transform .15s,box-shadow .15s}
.aud:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,50,79,.12)}
.aud-biz{border-color:var(--green);background:#f4fbf7}
.aud-home{border-color:var(--navy);background:#f5f8fb}
.aud-label{display:inline-block;align-self:flex-start;padding:4px 12px;border-radius:999px;
  font-size:.82rem;font-weight:800;color:#fff}
.aud-biz .aud-label{background:var(--green)}
.aud-home .aud-label{background:var(--navy)}
.aud-ttl{font-size:1.24rem;font-weight:800;line-height:1.55;color:var(--navy)}
.aud-desc{font-size:.94rem;line-height:1.85;color:var(--ink)}
.aud-go{margin-top:4px;font-weight:800;font-size:.95rem}
.aud-biz .aud-go{color:var(--green)}
.aud-home .aud-go{color:var(--navy)}

/* 漫画（導入＋勘違い①〜⑤＋結末） */
.manga{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.manga{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.manga{grid-template-columns:1fr}}
.panel{border:2px solid var(--navy);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.panel.full{grid-column:1/-1}
.panel .no{background:var(--navy);color:#fff;font-size:.78rem;font-weight:800;padding:5px 10px;letter-spacing:.04em}
.panel.full .no{background:var(--red)}
.panel svg{display:block;width:100%;height:auto;background:#eef4f8}
.panel .txt{padding:13px 14px;font-size:.92rem;line-height:1.8;flex:1}
.panel .txt p{margin:0 0 9px}
.panel .txt p:last-child{margin:0}
.panel .mg-ttl{font-weight:800;color:var(--red);font-size:1rem;line-height:1.6;
  border-bottom:2px solid #f0dcdc;padding-bottom:8px;margin-bottom:10px !important}
.panel .who{font-weight:800;color:var(--navy)}
.panel .who.me{color:var(--green)}
.panel .who.happy{color:var(--green)}
.panel .who.sales{color:var(--red)}

/* フッター */
footer{margin:60px 0 0;background:var(--gray);border-top:1px solid var(--line);padding:28px 0 34px}
footer p{margin:0 0 8px;font-size:.88rem;color:var(--muted);line-height:1.85}
footer a{color:var(--muted);text-decoration:underline}

/* 固定CTA（スマホ） */
.fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px;background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.08);display:none}
.fixed-cta .cta{padding:15px;font-size:1.02rem;margin:0}
@media(max-width:820px){.fixed-cta{display:block}body{padding-bottom:82px}}

/* ============================================================
   目的別LP・コラムまわり（後から追加した部分）
   ============================================================ */

/* トップに置く「お立場別」の導線 */
.aud-links{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.aud-links a{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;text-decoration:none;transition:border-color .15s,transform .15s;
}
.aud-links a:hover{border-color:var(--teal);transform:translateY(-1px)}
.al-name{font-weight:800;color:var(--navy);font-size:1.02rem;line-height:1.5}
.al-go{font-size:.86rem;color:var(--teal);font-weight:700}

/* サイト共通の細いヘッダー（コラム側だけで使用） */
.site-bar{border-bottom:1px solid var(--line);background:#fff}
.site-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px}
.sb-home{font-weight:800;color:var(--navy);text-decoration:none;font-size:.95rem}
.sb-col{font-size:.88rem;color:var(--teal);text-decoration:none;white-space:nowrap}

/* 記事ページ */
.article{margin:0}
.art-head{background:linear-gradient(180deg,#eef6fa 0%,#fff 100%);padding:26px 0 24px;border-bottom:1px solid var(--line)}
.crumb{font-size:.82rem;color:var(--muted);margin:0 0 10px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 .4em;color:#b9c4cf}
.crumb em{font-style:normal;color:var(--navy);font-weight:700}
.art-head h1{margin:0 0 10px;font-size:clamp(1.34rem,3.4vw,1.86rem);line-height:1.5;color:var(--navy);font-weight:900;letter-spacing:-.01em}
.art-date{margin:0;font-size:.84rem;color:var(--muted)}

.art-body{padding-top:28px;padding-bottom:8px;max-width:760px}
.art-body h2{
  margin:38px 0 14px;font-size:1.26rem;font-weight:800;color:var(--navy);
  border-left:6px solid var(--teal);padding-left:12px;line-height:1.55;scroll-margin-top:16px;
}
.art-body h3{margin:26px 0 10px;font-size:1.06rem}
.art-body p{margin:0 0 16px}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:1.4em}
.art-body li{margin:0 0 8px}
.art-body strong{color:var(--navy);font-weight:800}
.art-body .box{margin:22px 0}
.art-body .tbl-scroll{margin:20px 0}
.art-body figure{margin:22px 0}
.art-body figcaption{font-size:.84rem;color:var(--muted);margin-top:8px}

/* 目次 */
.toc{border:1px solid var(--line);border-radius:var(--radius);background:var(--gray);padding:16px 18px;margin:0 0 28px}
.toc-ttl{margin:0 0 8px;font-weight:800;color:var(--navy);font-size:.95rem}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:0 0 6px;font-size:.94rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--teal);text-decoration:underline}

/* 記事の一覧・関連記事 */
.col-list,.rel-list{list-style:none;margin:0 0 30px;padding:0}
.col-list li,.rel-list li{border-bottom:1px solid var(--line)}
.col-list a,.rel-list a{display:block;padding:14px 2px;text-decoration:none;color:var(--navy);font-weight:700;line-height:1.6}
.col-list a:hover,.rel-list a:hover{color:var(--teal)}
.col-desc{display:block;font-size:.85rem;color:var(--muted);font-weight:400;margin-top:3px}
.rel-cat{display:block;font-size:.78rem;color:var(--teal);font-weight:700;margin-bottom:2px}

/* FVの写真。単価カードを少し重ねて、写真とデータをひとかたまりに見せます */
.hero-visual{display:block}
.hero-photo{
  margin:0; border-radius:14px; overflow:hidden; line-height:0;
  box-shadow:0 16px 44px rgba(22,50,79,.20);
}
.hero-photo img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.hero-visual .rate-card{position:relative;z-index:1;margin:-26px 14px 0}
@media(max-width:940px){
  .hero-visual .rate-card{margin:-22px 10px 0}
}
@media(max-width:520px){
  .hero-photo{border-radius:12px}
  .hero-visual .rate-card{margin:-18px 6px 0}
}