/* ============================================================
   pages.css — 下層ページ共通（パンくず / ページHERO / 見出し）
   詳細ページ(.page-body)を基準。一覧ページ(.page-listing)は末尾で上書き
   ============================================================ */

/* --- パンくずナビ --- */
/* service/digital-marketing系（.page-hero/.page-hero-inner採用ページ）の既定値。
   .page-hero-innerはmax-width:1600pxで、それを超える画面幅では.page-heroの
   padding内で中央寄せされる（左端がvar(--side-pad)だけでは合わない）ため、
   page-hero-innerの実際の左端と同じ計算式で揃える。
   本文が狭いreadingカラム（max-width固定）を持つページ（case-detail/contents-detail）は
   各CSSファイル側で本文カラムに揃えたoverrideを定義する（docs/css-architecture-plan.md参照） */
.breadcrumb{
  display:flex;align-items:center;gap:8px;
  padding:16px max(var(--side-pad), calc((100vw - 1600px) / 2));
  font-size:12px;color:var(--text-muted);
}
.breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--brand-deep)}
.breadcrumb-sep{color:var(--border)}


/* --- セクション見出し（トップ流用: sec-en系） --- */
/* SECTION HEADING — Brain Forest style */
.sec-en{
  font-size:clamp(72px,10vw,128px);
  font-weight:900;line-height:1;
  letter-spacing:-0.03em;
  color:var(--text-primary);
  text-shadow:
    2px 2px 0px rgba(0,0,0,0.06),
    4px 4px 12px rgba(0,0,0,0.08);
  margin-bottom:10px;
}
.sec-ja{
  font-size:14px;font-weight:700;
  color:var(--text-secondary);letter-spacing:0.12em;
  margin-top:10px;
}
.sec-head{margin-bottom:56px}


/* --- PAGE HERO（詳細ページ標準） --- */
/* ===== PAGE HERO ===== */
.page-hero{
  padding:80px var(--side-pad) 0;
  background:var(--bg-white);
  display:flex;justify-content:center;
}
.page-hero-inner{
  max-width:1600px;width:100%;
  display:grid;
  grid-template-columns:clamp(430px,30vw,600px) 1fr;
  gap:0;align-items:start;
  overflow:hidden;
}
.page-hero-left{padding:20px 10px 64px 0;min-width:0;overflow:visible}
.page-hero-ja{
  font-size:clamp(36px,4vw,64px);font-weight:900;
  letter-spacing:-0.02em;line-height:1.2;
  color:var(--text-primary);display:block;
  margin-bottom:10px;
  text-shadow:1.5px 1.5px 0 rgba(0,0,0,0.05),3px 3px 10px rgba(0,0,0,0.06);
}
.page-hero-en{
  font-size:14px;font-weight:700;
  color:var(--text-secondary);letter-spacing:0.12em;
  margin-top:14px;display:block;
}
.page-hero-right{padding:20px 0 64px clamp(32px,3vw,64px)}
.page-hero-lead{
  font-size:clamp(14px,1.2vw,16px);
  color:var(--text-secondary);line-height:2;
}
.page-hero-lead + .page-hero-lead{margin-top:18px}


/* --- 下層セクション見出し（section-en / section-sub） --- */
/* ===== SECTION HEADINGS (共通) ===== */
.section-en{
  font-size:clamp(32px,3.6vw,52px);font-weight:900;
  letter-spacing:-0.02em;line-height:1.25;
  color:var(--text-primary);display:block;
  margin-bottom:10px;
}
.section-sub{
  font-size:11px;font-weight:700;letter-spacing:0.18em;
  color:var(--brand-deep);text-transform:uppercase;
  margin-bottom:20px;display:flex;align-items:center;gap:12px;
}
.section-sub::before{
  content:'';width:24px;height:1.5px;background:var(--brand);
}
/* section-en と直後のリード文の間隔を統一（20px → 14px） */
.section-en + .strengths-meta-lead,
.section-en + .overview-meta-lead,
.section-en + .lineup-meta-lead,
.section-en + .layers-meta-lead,
.section-en + .features-meta-lead,
.section-en + .related-cases-meta-lead,
.section-en + .secw-meta-lead{
  margin-top:14px;
}


/* --- 一覧ページ(.page-listing)用 PAGE HERO 上書き --- */
/* service.html（事業紹介一覧）は下寄せ・大きめ見出し・リード1行 */
.page-listing .page-hero-inner{align-items:end}
.page-listing .page-hero-left{padding:0 10px 64px 0}
.page-listing .page-hero-ja{
  font-size:clamp(40px,4.5vw,72px);letter-spacing:-0.03em;line-height:1;
  text-shadow:2px 2px 0 rgba(0,0,0,0.06),4px 4px 12px rgba(0,0,0,0.08);
}
.page-listing .page-hero-right{padding:0 0 64px clamp(32px,3vw,64px)}
.page-listing .page-hero-lead{white-space:nowrap}

/* --- page.php汎用フォールバック本文（.page-content-body）---
   専用テンプレートを持たない固定ページ（プライバシーポリシー等）の the_content() 用。
   .secw-inner は他の多数のセクション（カードグリッド等）でも使う共通クラスのため、
   本文タイポグラフィはこの専用クラスにスコープして影響範囲を限定する。 */
.page-content-body{max-width:840px;margin:0 auto;font-size:15px;line-height:1.95;color:var(--text-secondary)}
.page-content-body > * + *{margin-top:24px}
.page-content-body h2{
  font-size:clamp(20px,2.2vw,26px);font-weight:900;line-height:1.4;
  color:var(--text-primary);margin-top:48px;
  padding-left:16px;border-left:4px solid var(--brand);
}
.page-content-body h2:first-child{margin-top:0}
.page-content-body h3{
  font-size:clamp(16px,1.6vw,18px);font-weight:700;line-height:1.5;
  margin-top:32px;color:var(--text-primary);
  padding-left:12px;border-left:2px solid var(--brand-light);
}
.page-content-body p{color:var(--text-secondary)}
.page-content-body ul,.page-content-body ol{padding-left:24px;color:var(--text-secondary)}
.page-content-body ul li{list-style:disc;margin-bottom:8px;line-height:1.85}
.page-content-body ol li{list-style:decimal;margin-bottom:8px;line-height:1.85}
.page-content-body a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px}
.page-content-body a:hover{color:var(--brand-darkest)}
@media(max-width:768px){
  .page-content-body{font-size:14px}
}