/* ============================================================
   Services 3面ハブ + 詳細3ページ (W-8)
   仕様: strategy/hp-renewal/hp-renewal-design.md §11
   世界観正本: strategy/design-system/koike-design-language.md §5
   色の役割分担: シアン=計測光(データ探索リンク専用) / 暖#F0831A=人の行動点(CTA専用)。
   地方色は使わない。world_band()の帯を除き、本文は白基調(design doc §11.1
   「B2B2面は白基調で明快に」)。navy/cyanは見出し・アクセントとして最小限使う。
   ============================================================ */
.sw{
  --sw-navy:#1E2761; --sw-navy-d:#151B47;
  --sw-cyan:#0891B2; --sw-cyan-l:#67E8F9;
  --sw-amber:#F0831A; --sw-amber-h:#F49919; --sw-amber-ink:#0B1029;
  --sw-dim:#666f94; --sw-line:#E2E8F0; --sw-tint:rgba(30,39,97,.045);
}

.sw-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sw-cyan)}
.sw-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--sw-cyan)}

.sw-h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;line-height:1.35;
  letter-spacing:-.01em;color:var(--sw-navy);text-wrap:balance}

.sw-body{font-size:15px;font-weight:300;line-height:2.05;color:#454b6e}
.sw-body + .sw-body{margin-top:1.1em}

/* 編集面型のリード文(W-12: 左罫線+グレー箱=AI生成臭との小池裁定で撤去。装飾は足さず、
   既存の.sw-eyebrowラベル+広めの行間・余白のみで版面を作る) */
.sw-lead{max-width:36em;margin:4px 0}
.sw-lead .sw-body{font-size:17px;line-height:1.95;color:#333b5c;text-wrap:pretty}
.sw-lead .sw-body + .sw-body{margin-top:1.3em}

.sw-dash{position:relative;padding-left:22px;font-size:14px;line-height:1.9;color:#3b4160}
.sw-dash::before{content:"—";position:absolute;left:0;top:0;color:var(--sw-cyan);font-weight:600}
.sw-dashlist{display:flex;flex-direction:column;gap:14px}

.sw-btn{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;
  padding:13px 30px;font-size:13.5px;font-weight:600;line-height:1;
  transition:transform .2s ease,background .2s ease}
.sw-btn:hover{transform:translateY(-2px)}
.sw-btn-p{background:var(--sw-amber);color:var(--sw-amber-ink)}
.sw-btn-p:hover{background:var(--sw-amber-h)}
.sw-btn-s{border:1px solid var(--sw-line);color:var(--sw-navy)}
.sw-btn-s:hover{border-color:var(--sw-navy)}

/* ---------- 3事業カード (ハブ + トップ入り口帯で共用) ---------- */
.sw-cardgrid{display:grid;gap:1px;background:var(--sw-line);border:1px solid var(--sw-line);
  border-radius:10px;overflow:hidden}
@media (min-width:860px){.sw-cardgrid{grid-template-columns:repeat(3,1fr)}}
.sw-card{background:#fff;padding:clamp(28px,4vw,40px) clamp(24px,3.4vw,32px);
  display:flex;flex-direction:column;gap:14px}
.sw-card-top{width:30px;height:2px;background:var(--sw-cyan)}
.sw-card h3{font-size:18.5px;font-weight:700;color:var(--sw-navy);line-height:1.45}
.sw-card p{font-size:13.5px;line-height:1.9;color:var(--sw-dim);flex:1}
.sw-card-cta{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:7px;
  padding:10px 20px;border-radius:9999px;font-size:12.5px;font-weight:600;
  background:var(--sw-amber);color:var(--sw-amber-ink);
  transition:background .2s ease,transform .2s ease}
.sw-card-cta:hover{background:var(--sw-amber-h);transform:translateY(-2px)}

/* ---------- 5DB 導線帯 (data-infrastructure ページ) ---------- */
.sw-dbrow{border-top:1px solid var(--sw-line)}
.sw-dbitem{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-bottom:1px solid var(--sw-line)}
@media (min-width:640px){
  .sw-dbitem{flex-direction:row;align-items:center;gap:28px}
}
.sw-dbitem .sw-dbname{font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.06em;color:var(--sw-navy);flex:0 0 150px}
.sw-dbitem .sw-dbdesc{flex:1;font-size:13.5px;color:var(--sw-dim);line-height:1.75}
.sw-dbitem .sw-dblink{font-size:12.5px;font-weight:600;color:var(--sw-cyan);white-space:nowrap}
.sw-dbitem .sw-dblink:hover{color:var(--sw-navy)}

/* ---------- OEM 組み込みパターンカード ---------- */
.sw-patterngrid{display:grid;gap:18px}
@media (min-width:680px){.sw-patterngrid{grid-template-columns:repeat(2,1fr)}}
.sw-pattern{border:1px solid var(--sw-line);border-radius:10px;
  padding:clamp(22px,3vw,28px);display:flex;gap:18px;align-items:flex-start}
.sw-pattern-icon{flex:none;width:44px;height:44px;border-radius:50%;background:var(--sw-tint);
  display:flex;align-items:center;justify-content:center;color:var(--sw-navy)}
.sw-pattern-icon svg{width:22px;height:22px}
.sw-pattern h4{font-size:14.5px;font-weight:700;color:var(--sw-navy);margin-bottom:8px;line-height:1.5}
.sw-pattern p{font-size:12.8px;line-height:1.85;color:var(--sw-dim)}

@media (max-width:480px){
  .sw-card,.sw-pattern{padding:22px 20px}
}

/* サービスLPページ(industry-db/oem/data-infrastructure): ヒーロー帯の内側を本文
   (max-w-1200 + px-6/lg:px-10)と左端一致させる。world_band は全ページ共通のため
   .sw-lp を付けたページだけに限定する */
.sw-lp .hp-band-inner{max-width:1200px;padding-left:1.5rem;padding-right:1.5rem}
@media (min-width:1024px){
  .sw-lp .hp-band-inner{padding-left:2.5rem;padding-right:2.5rem}
}
/* サービスLP: リード本文の 36em 制限を外し、見出しと同じ列幅(約820px)まで満たして
   タイトルと本文の幅を揃える(「タイトルは広い/本文は狭い」のアンバランス解消)。
   真の全幅にはしない=日本語は1行60字超で読みづらいため、820px列で可読性を保つ */
.sw-lp .sw-lead{max-width:none}