/* ============================================================
   世界の帯 (W-5) — 下層ページ(About/Services/News/Blog/Products)
   冒頭の共通コンポーネント。
   仕様: min-height 280-320px / CSSグラデ(--hp-deep→--hp-deep2系) / SVG計測線1本 /
         ページ名+一行 / 画像は使わない(軽量・LCP影響ゼロ)
   トークン: hp-stage.css :root の値を意図的に複製(index.htmlはhp-stage.css非依存の
   下層ページでも帯を出せるよう自己完結にするため)。値を変える場合は両ファイルを同期すること。
   色規約: koike-design-language.md §2.4-3(地方色は副アクセント、基調navy+原光シアンは不変)
   固定ヘッダー(h-16=64px/lg:72px)との呼吸: padding-topでヘッダー高+40px程度を確保(W-12)
   ============================================================ */
.hp-band{
  --wb-deep:#070B1F; --wb-deep2:#0B1029; --wb-cyan-l:#67E8F9;
  --wb-ink:#EAF0FF; --wb-dim:#9BA6CE; --wb-region:var(--wb-cyan-l); --wb-region-a:rgba(103,232,249,.4);
  position:relative;
  min-height:clamp(280px,26vw,320px);
  padding:112px 0 32px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,var(--wb-deep) 0%,var(--wb-deep2) 100%);
  color:var(--wb-ink);
}
/* 地方色(意味から導出した副アクセント、計測線1本のみに限定。§2.4-3「少量」規律) */
.hp-band--edinet{ --wb-region:#67E8F9; --wb-region-a:rgba(103,232,249,.5) }
.hp-band--fudosan{ --wb-region:#3FAE85; --wb-region-a:rgba(63,174,133,.5) }
.hp-band--seisaku{ --wb-region:#EB6238; --wb-region-a:rgba(235,98,56,.5) }
.hp-band--bousai{ --wb-region:#E8B33D; --wb-region-a:rgba(232,179,61,.5) }
.hp-band--houjin{ --wb-region:#F0831A; --wb-region-a:rgba(240,131,26,.5) }

.hp-band-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hp-band-line line{stroke:var(--wb-region-a);stroke-width:1;vector-effect:non-scaling-stroke}
.hp-band-line path{fill:none;stroke:var(--wb-region-a);stroke-width:1.5;vector-effect:non-scaling-stroke}

/* 全ページ共通: 内側は本文コンテナ(max-w-1200 + px-6/lg:px-10)と同じ幅・余白にして
   ヒーローの左端を全ページで統一する(2026-07-12 小池FB。旧: max-width 1152 + clamp padding) */
.hp-band-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;width:100%;
  padding:0 1.5rem}
@media (min-width:1024px){ .hp-band-inner{padding:0 2.5rem} }
.hp-band-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.2em;font-weight:500;color:var(--wb-region)}
.hp-band-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--wb-region);box-shadow:0 0 6px 1px var(--wb-region-a)}
.hp-band-title{margin-top:12px;font-size:clamp(21px,3.2vw,30px);font-weight:700;
  line-height:1.35;text-wrap:balance}
.hp-band-sub{margin-top:8px;font-size:clamp(12.5px,1.4vw,14.5px);line-height:1.7;
  color:var(--wb-dim);max-width:38em;text-wrap:pretty}

@media (max-width:480px){
  .hp-band{min-height:230px;padding:92px 0 24px}
  .hp-band-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .hp-band{transition:none}
}