/* =========================================================
   明るめリデザイン（2026.10.26）
   方針：事業部グリーン（#008129／#8CB808）は維持。
         ほぼ黒に見える濃緑 #003128 の「面」を減らし、
         ボタンはアクセントグリーン、CTA帯は淡いミント地に。
         見出しは濃緑のまま（明朝体＋濃緑で信頼感を保つ）。
         OSのダークモードでも暗くならないよう、ライト表示に固定。
   元に戻す：各ページ末尾の <link href="theme-bright.css"> を外す
   ========================================================= */

/* 1) 色トークン（ダークモード指定より強い指定でライトに固定） */
html:root,
html:root:not([data-theme="light"]),
html:root[data-theme="dark"]{
  color-scheme:light;
  --bg:#ffffff;
  --soft:#f2f8ee;          /* 灰色の帯 → ごく淡いグリーン */
  --card:#ffffff;
  --ink:#26302c;           /* 本文：真っ黒より少しやわらかく */
  --muted:#56615b;
  --line:#dce5d9;
  --head:#0d4a3a;          /* 見出し：#003128 より明るい濃緑 */
  --navy:#008129;
  --accent:#008129;
  --lime:#8cb808;
  --on-lime:#0d3a2e;
  --deep:#0b5e3b;          /* 小さな濃色要素用（面には使わない） */
  --on-deep:#ffffff;
  --btn-bg:#008129;        /* ボタン：濃緑 → アクセントグリーン */
  --btn-fg:#ffffff;
  --fade:rgba(255,255,255,1);
  --fade0:rgba(255,255,255,0);
  --anno:#b4540a;--anno-bg:#fff4e8;
  --err:#b3261e;--err-bg:#fdecea;
}
html body{background:#fff;color:var(--ink)}
html .senderr{background:#fdf1ef;color:#9b2c1f;border-color:#c0392b}

/* 2) ヘッダー：上端にライムの細線で明るさとブランド感 */
.hdr{border-top:3px solid var(--lime)}
.btn.fill:hover{opacity:1;background:#00701f}

/* 3) CTA帯：濃緑の面 → 淡いミント地＋緑ボタン */
.cta,.ctas,.side-cta{
  --on-deep:#0d4a3a;
  background:linear-gradient(135deg,#f1f9ea 0%,#e2f1d4 100%);
  color:#0d4a3a;
}
.ctas,.side-cta{border:1px solid #cfe5bd}
.cta{border-block:1px solid #d6eac6}
.cta .btn.fill,.ctas .btn.fill,.side-cta .btn{background:#008129;color:#fff}
.cta .btn.line,.ctas .btn.line{border-color:#008129;color:#006b22;background:#fff}
.cta .btn.line:hover,.ctas .btn.line:hover{background:#f6fbf2}
.cta p{opacity:1;color:#3e4a44}

/* 4) トップの実績タイル・拠点ブロック：黒に近い緑 → 事業部グリーン */
.facts li{background:linear-gradient(160deg,#00953f 0%,#007a26 100%)}
.facts svg{stroke:#ffffff}
.base{background:linear-gradient(135deg,#008a35 0%,#006b2c 100%)}
.base-map .kicker{color:#e3f4a6}
.hero .hand{color:#0d4a3a}

/* 5) 解説動画のポスター・計算ボックス */
.poster{background:#0b5e3b}
.poster img{opacity:.72}
.poster.noimg{background:linear-gradient(135deg,#8cb808 -10%,#008129 55%,#0b5e3b 100%)}
.term.total{background:#008129;border-color:#008129}

/* 6) 相談事例（ビジュアル版）のタイトル画像：重ねる色を濃緑 → 緑に */
.hero:has(> .cap)::after{background:linear-gradient(180deg,rgba(0,90,40,0) 30%,rgba(0,100,45,.45) 60%,rgba(0,105,42,.9) 100%)}

/* 7) カード上端の線：濃緑 → アクセントグリーン */
.themes a,.reasons li{border-top-color:var(--accent)}

/* 8) コラムの見出し部分：写真＋グリーンのグラデーション（2026.10.27） */
.phead.colhero{
  --cm-a:.85;--cm-b:.85;
  /* 白文字の読みやすさ用マスク（ライム側ほど濃く）。薄くしすぎると文字のコントラストが不足する */
  --mask-l:.45;--mask-r:.2;
  background:
    linear-gradient(90deg,rgba(0,49,40,var(--mask-l)) 0%,rgba(0,49,40,var(--mask-r)) 100%),
    linear-gradient(90deg,rgba(140,184,8,var(--cm-a)) 0%,rgba(0,129,41,var(--cm-b)) 100%),
    url("media/column_hero.jpg") center/cover no-repeat;
  border-bottom:0;color:#fff;
}
.phead.colhero h1,
.phead.colhero .eyebrow,
.phead.colhero .plead,
.phead.colhero .byline,
.phead.colhero .colmeta,
.phead.colhero .colmeta time,
.phead.colhero .crumb,
.phead.colhero .crumb a,
.phead.colhero .crumb li+li::before{color:#fff}
.phead.colhero .crumb a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.6)}
.phead.colhero .crumb a:hover{color:#fff;text-decoration-color:#fff}
.phead.colhero .coltag{border-color:#fff;color:#fff;background:transparent}
.phead.colhero .coltag:hover{background:rgba(255,255,255,.15)}
.phead.colhero :focus-visible{outline-color:#fff}
.phead.colhero h1,.phead.colhero .plead{text-shadow:0 1px 8px rgba(0,40,30,.25)}

/* 9) 相談事例のファーストビュー（.cfv）2026.10.27
   背景：業種グループ共通の写真（.has-photo、style属性で指定）＋グリーンのグラデーション。写真がないときはグラデーションのみ
   白文字の読みやすさ用に、コラム見出しと同じ濃緑マスク（左45%→右20%）を重ねる */
.cfv{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,#8cb808 0%,#008129 100%)}
/* 業種グループ別の背景写真（同じ業種は同じ写真）。media/case_<グループ>.jpg を置けば自動で表示され、
   ない間はグラデーションのみになる */
.cfv[data-group]{background-size:auto,auto,cover,cover;background-position:0 0,0 0,center,center;background-repeat:no-repeat}
.cfv[data-group="construction"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_construction.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="transport"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_transport.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="factory"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_factory.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="lodging"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_lodging.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="care"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_care.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="office"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_office.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="realestate"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_realestate.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="agri"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_agri.jpg"),linear-gradient(90deg,#8cb808,#008129)}
.cfv[data-group="retail"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.2) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(0,129,41,.85) 100%),url("media/case_retail.jpg"),linear-gradient(90deg,#8cb808,#008129)}
/* PC幅：文字のない右端（72%より右）だけ緑を薄くして写真を見せる。文字の範囲はコントラスト比4.5以上を維持 */
@media (min-width:961px){
  .cfv[data-group="construction"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_construction.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="transport"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_transport.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="factory"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_factory.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="lodging"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_lodging.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="care"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_care.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="office"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_office.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="realestate"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_realestate.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="agri"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_agri.jpg"),linear-gradient(90deg,#8cb808,#008129)}
  .cfv[data-group="retail"]{background-image:linear-gradient(90deg,rgba(0,49,40,.45) 0%,rgba(0,49,40,.24) 72%,rgba(0,49,40,.05) 100%),linear-gradient(90deg,rgba(140,184,8,.85) 0%,rgba(16,134,38,.85) 72%,rgba(0,129,41,.45) 100%),url("media/case_retail.jpg"),linear-gradient(90deg,#8cb808,#008129)}
}
.cfv .wrap{position:relative;padding-bottom:48px}
.cfv .crumb{color:rgba(255,255,255,.9)}
.cfv .crumb a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.6)}
.cfv .crumb a:hover{color:#fff;text-decoration-color:#fff}
.cfv .crumb li+li::before{color:rgba(255,255,255,.7)}
.cfv-head{padding-top:36px;display:flex;flex-direction:column;align-items:flex-start}
.cfv .tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cfv .tag{background:#fff;color:#006b22;border:1px solid #fff}
.cfv .tag.out{background:transparent;color:#fff;border-color:#fff}
.cfv h1{color:#fff;font-size:clamp(26px,3.6vw,40px);margin-top:20px;max-width:24em;text-shadow:0 1px 8px rgba(0,40,30,.25)}
.cfv .meta{width:100%;max-width:820px;margin-top:28px;border-top-color:rgba(255,255,255,.45)}
.cfv .meta div+div{border-left-color:rgba(255,255,255,.45)}
.cfv .meta dt{color:rgba(255,255,255,.88)}
.cfv .meta dd{color:#fff}
/* 相談ボタン：下の白いカード（情報）と区別するため、デザイン仕様書の「グラデーションCTAセクション」用のピル型アウトラインにする */
.cfv-cta{margin-top:28px;background:transparent;color:#fff;border:2px solid #fff;border-radius:999px;font-size:15px;padding:12px 30px;transition:background .2s,color .2s}
.cfv-cta:hover,.cfv-cta:focus-visible{background:#fff;color:#006b22}
.cfv-steps{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;counter-reset:none}
.cfv-steps li{position:relative;background:#fff;color:var(--ink);border-radius:6px;padding:18px 20px 20px;box-shadow:0 8px 24px rgba(0,40,30,.18);min-width:0}
/* カードの間の「＞」：すき間（40px）の中央に置き、カードの白枠に重ならないようにする */
.cfv-steps li+li::before{content:"";position:absolute;left:-27px;top:50%;width:12px;height:12px;border-top:2.5px solid #fff;border-right:2.5px solid #fff;transform:translateY(-50%) rotate(45deg);opacity:.9}
.cfv-steps .lb{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;font-size:13px;color:var(--accent);letter-spacing:.1em}
.cfv-steps .lb b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--lime);color:#0d3a2e;font-family:var(--sans);font-size:13px}
.cfv-steps li:last-child .lb b{background:var(--accent);color:#fff}
.cfv-steps p{margin-top:10px;font-size:15px;font-weight:700;line-height:1.7;color:var(--ink)}
.cfv-anno{margin-top:12px}
.cfv ~ .wrap .aside .sum{display:none}
.cfv ~ .wrap .body{padding-top:56px}
@media (max-width:960px){
  .cfv-steps{grid-template-columns:1fr;gap:28px}
  .cfv-steps li+li::before{left:50%;top:-22px;transform:translateX(-50%) rotate(135deg)}
}
@media (max-width:600px){
    .cfv-head{padding-top:24px}
  .cfv .meta{margin-top:20px}
  .cfv .meta div,.cfv .meta div+div{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom-color:rgba(255,255,255,.35)}
  .cfv .meta dt{flex:none;width:8.5em;font-size:11.5px;white-space:nowrap}
  .cfv .meta dd{margin:0;font-size:14px;line-height:1.6}
  .cfv-cta{margin-top:20px}
  .cfv-steps{margin-top:26px;gap:28px}
  .cfv-steps li{padding:12px 16px 14px}
  .cfv-steps p{margin-top:6px;font-size:14px}
  .cfv-cta{width:100%}
  .cfv .wrap{padding-bottom:28px}
}