/* =========================================================
   2.5.0 明るいデザイン（太陽光らしい空色と太陽の黄色）
   site.css のあとに読み込み、色と見出しのメリハリだけを上書きする。
   ========================================================= */
:root{
  --st-sky:#1a8fd6;      /* 空色：うすい地の色 */
  --st-sky-d:#0f6fae;
  --st-sky-l:#f1f8f4;    /* うすい緑の地 */
  --st-sun:#ffc21a;      /* 太陽の黄色：アクセント */
  --st-sun-l:#fff8e1;    /* うすい黄色の地 */
  --st-orange:#f07a12;   /* ボタン（明るめのオレンジ） */
  --st-orange-d:#d8650a;
  --st-alt:#f1f8f4;
  --st-green:#2f8a6c;    /* ソルトの緑（明るめ） */
  --st-green-d:#1d6450;
  --st-forest:#123d33;   /* 深い緑：フッター・相談枠 */
}

/* ---------- 見出し：英字は黄色の札、日本語は大きく・下に太陽の線 ---------- */
.st-sh-en{display:table;margin:0 auto 12px;padding:3px 14px;border-radius:999px;background:var(--st-sun);color:#3a2a00;font-size:12px;letter-spacing:.24em}
.st-sh-en::before,.st-sh-en::after{content:none!important;display:none!important}
.st-sh{position:relative;padding-bottom:18px;margin-bottom:18px;color:#16332b}
.st-sh::after{content:"";position:absolute;left:50%;bottom:0;width:56px;height:5px;margin-left:-28px;border-radius:3px;background:var(--st-sun)}
@media (min-width:1100px){.st-sh{font-size:32px}}
@media (min-width:768px) and (max-width:1099px){.st-sh{font-size:28px}}

/* ---------- ボタン ---------- */
.st-btn.is-orange{background:var(--st-orange);box-shadow:0 6px 0 var(--st-orange-d)}
.st-btn.is-orange:active{transform:translateY(3px);box-shadow:0 3px 0 var(--st-orange-d)}
.st-btn.is-orange:hover{background:var(--st-orange-d)}
.st-btn.is-teal{background:var(--st-green)}
.st-btn.is-teal:hover{background:var(--st-green-d)}
.st-btn.is-line{border-color:var(--st-green);color:var(--st-green-d)}
.st-btn.is-line:hover{background:var(--st-sky-l)}

/* ---------- ヘッダー ---------- */
.st-hdr{border-bottom:3px solid var(--st-sun)}
@media (min-width:1080px){
  .st-nav>.st-nav__list>li>a:hover,.st-nav .current-menu-item>a,.st-nav .current-menu-ancestor>a{color:var(--st-green-d);box-shadow:inset 0 -4px 0 var(--st-sun)}
}

/* ---------- 最初の画面：写真は白黒のまま（色を重ねない）。ボタンだけ少し大きく ---------- */
.st-hero__btns .st-btn.is-orange{min-height:60px;font-size:16.5px;padding:8px 32px}

/* ---------- 補助金：ソルトの緑の帯に、太陽の光 ---------- */
.st-sec.is-dark{background:#1d6450;color:#fff}
.st-sec.is-dark::before{content:none}
.st-sec.is-dark .st-sh{color:#fff}
.st-sec.is-dark .st-lead,.st-sec.is-dark .st-note{color:#e3f2ec}
.st-sec.is-dark .st-sub{border-top:6px solid var(--st-sun);border-radius:16px;box-shadow:0 12px 28px rgba(8,50,38,.28)}
.st-sec.is-dark .st-sub__k{color:var(--st-green-d)}
.st-sec.is-dark .st-sub__v{color:var(--st-orange-d);font-size:26px}
.st-sec.is-dark .st-sub__more{color:var(--st-green-d)}

/* ---------- 地の色：白 → うすい空色 → 白 → うすい黄色 …で区切りをはっきり ---------- */
.st-sec.is-alt{background:var(--st-sky-l)}
.st-sec.is-warm{background:var(--st-sun-l)}
.st-sec.is-warm .st-sh-en{color:#3a2a00}

/* ---------- 設置条件の5つ：番号を黄色の丸に ---------- */
.st-conds li{border:0;box-shadow:0 6px 18px rgba(20,70,55,.1);padding:62px 18px 18px}
.st-conds li::before{left:18px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--st-sun);color:#3a2a00;font-family:var(--st-sans);font-size:15px;display:flex;align-items:center;justify-content:center}

/* ---------- 選ばれる理由：番号札をオレンジに ---------- */
.st-reason{box-shadow:0 10px 26px rgba(20,70,55,.1)}
.st-reason__n{background:var(--st-orange);border-radius:999px;padding:3px 14px}
.st-reason:hover h3{color:var(--st-green-d)}

/* ---------- 記事・施工実績のカード ---------- */
.st-tag{background:var(--st-green)}
.st-card{border:0;box-shadow:0 6px 18px rgba(20,70,55,.1)}
.st-card:hover{box-shadow:0 14px 30px rgba(20,70,55,.18)}
.st-card__img{position:relative}
.st-new{position:absolute;left:10px;top:10px;z-index:1;display:inline-block;padding:3px 10px 2px;border-radius:999px;background:#ff3b30;color:#fff;font-size:12px;font-weight:800;letter-spacing:.12em;line-height:1.5;box-shadow:0 3px 8px rgba(255,59,48,.35)}
.st-card.is-new .st-card__title{color:#13324a}
#works .st-card{box-shadow:0 6px 18px rgba(20,70,55,.1)}

/* ---------- はじめての方へ：アイコンを黄色の地に ---------- */
.st-guide{border:0;box-shadow:0 6px 18px rgba(20,70,55,.1);border-top:5px solid var(--st-sun)}
.st-guide__i{background:var(--st-sun-l);color:#c98500}
.st-guide .st-more,.st-sub__more,.st-more{color:var(--st-green-d)}

/* ---------- 地域別ガイド ---------- */
.st-area{border:0;box-shadow:0 4px 14px rgba(20,70,55,.08)}
.st-area__h{color:var(--st-green-d)}
.st-pills a{border-color:#cfe5dc;color:var(--st-green-d)}
.st-pills a:hover{background:var(--st-sun);border-color:var(--st-sun);color:#3a2a00}

/* ---------- よくある質問 ---------- */
.st-faq__q{background:var(--st-green)}
.st-faq details[open]{border-color:var(--st-green)}

/* ---------- 最後の相談枠：深い緑に太陽の光 ---------- */
.st-cta{background:#123d33;box-shadow:none}
.st-cta::after{content:none}
.st-cta__text{color:#e3f2ec}

/* ---------- フッター：ソルトの深い緑 ---------- */
.st-ftr{background:#0f322a;color:#cfe3dc}
.st-ftr a{color:#eaf5f1}
.st-ftr__top{background:#1d6450;border-top:4px solid var(--st-sun)}
.st-sec.is-dark .st-sh-en{color:#3a2a00}


/* =========================================================
   カードのデザイン（2.5.0）：枠線をやめ、白い面と大きな角丸。グラデーションは使わない
   ========================================================= */
/* 補助金の4つ：ラベル → 大きな数字 → 下に「詳しく見る」の帯 */
.st-sec.is-dark .st-sub{border:0;border-radius:18px;padding:22px 20px 0;box-shadow:none;overflow:hidden;gap:6px}
.st-sec.is-dark .st-sub__k{display:inline-block;align-self:flex-start;padding:2px 12px;border-radius:999px;background:#e8f4ee;color:#1d6450;font-size:13px}
.st-sec.is-dark .st-sub__v{font-size:24px;line-height:1.35;color:#e2660a;margin-top:6px;word-break:keep-all;overflow-wrap:anywhere}
.st-sec.is-dark .st-sub__n{font-size:13.5px}
.st-sec.is-dark .st-sub__more{margin:auto -20px 0;padding:12px 20px;background:var(--st-sun);color:#3a2a00;justify-content:space-between}
.st-sec.is-dark .st-sub:hover{transform:translateY(-3px)}
.st-sub{transition:transform .15s}
/* 設置条件の5つ：左に黄色の太線 */
.st-conds li{border:0;border-left:6px solid var(--st-sun);border-radius:12px;box-shadow:0 4px 14px rgba(20,70,55,.08)}
/* 記事・施工実績：写真の上にタグ、角丸を大きく */
.st-card{border:0;border-radius:18px;box-shadow:0 4px 16px rgba(20,70,55,.1)}
.st-card__img{position:relative;aspect-ratio:16/10}
.st-card__img img{transition:transform .3s}
.st-card:hover .st-card__img img{transform:scale(1.05)}
.st-card__body{padding:14px 16px 18px;gap:8px}
.st-card__title{font-size:15px;line-height:1.6;color:#16332b}
.st-card__date{display:inline-flex;align-items:center;gap:4px;padding-top:8px;border-top:1px dashed #dbe7e2;width:100%}
.st-card .st-tag{background:#e8f4ee;color:#1d6450;border-radius:999px;padding:0 10px}
.st-new{left:10px;top:10px;border-radius:6px;background:#e63b2e;box-shadow:none}
/* はじめての方へ：上に黄色の丸アイコン */
.st-guide{border:0;border-radius:18px;box-shadow:0 4px 16px rgba(20,70,55,.1);padding:26px 24px}
.st-guide__i{width:56px;height:56px;border-radius:50%;background:var(--st-sun);color:#3a2a00}
/* 地域の名前 */
.st-area{border-radius:18px}
/* 設置条件の5つ：カードの間にすき間 */
.st-conds{gap:14px}
@media (min-width:960px){.st-conds{gap:20px}}

/* ---------- 最初の画面（案A）：カラー写真の上に白い板。グラデーションは使わない ---------- */
.st-hero.is-photo{background:#fff}
.st-hero.is-photo::after{content:none}
.st-hero.is-photo .st-hero__img img{filter:none}
.st-hero.is-photo .st-hero__text{background:rgba(255,255,255,.95);border-radius:20px;padding:36px 40px;max-width:660px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.st-hero.is-photo .st-hero__title,.st-hero.is-photo .st-hero__title span{color:#16332b;text-shadow:none}
.st-hero.is-photo .st-hero__title span{color:#1d6450}
.st-hero.is-photo .st-hero__title span em{background:none;color:#e2660a}
.st-hero.is-photo .st-hero__lead{color:#33413d;text-shadow:none}
.st-hero.is-photo .st-eyebrow{background:#ffc21a;border-color:#ffc21a;color:#3a2a00}
.st-hero.is-photo .st-checks li{background:#f1f8f4;color:#16332b;padding:6px 12px}
.st-hero.is-photo .st-checks .st-i{color:#2f8a6c}
.st-hero.is-photo .st-btn.is-line{color:#1d6450;border-color:#2f8a6c;background:#fff}
@media (max-width:999px){
  .st-hero.is-photo .st-hero__in{padding-top:180px;padding-bottom:24px}
  .st-hero.is-photo .st-hero__text{padding:24px 18px}
}