/* ============================================================
   page-sub.css — 下層ページ共通スタイル
   - パンくず(breadcrumb)
   - ページヒーロー(page-hero)
   - セクション基本パディング(.sub-section)
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   Breadcrumb
   ──────────────────────────────────────────────────────────── */
.breadcrumb {
  background: #d7dee8;
  padding: 16px 0;
  /* ヘッダー直下に固定: ヘッダー高さ200pxの分だけ下に sticky */
  position: sticky;
  top: 200px;
  z-index: 50;
}
/* 1439px 以下: .root が zoom: calc(100vw / 1440) でスケールされるため、
   見かけ上のヘッダー高さも比例して縮む。breadcrumb の top も追従させる。 */
@media (max-width: 1439px) {
  .breadcrumb { top: calc(100vw * 200 / 1440); }
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  list-style: none;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  color: var(--ink);
  flex-wrap: wrap;
}
.breadcrumb__item { display: inline-flex; align-items: center; }
.breadcrumb__item a {
  color: var(--ink);
  transition: color .2s ease;
}
.breadcrumb__item a:hover { color: var(--navy); }
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: 8px;
  color: var(--ink);
}
.breadcrumb__item[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
}

@media (max-width: 767px) {
  /* モバイルでは .site-header が非表示になり、mhdr (56px) のみ表示 */
  .breadcrumb { padding: 12px 0; top: 56px; }
  .breadcrumb__list { padding: 0 20px; font-size: 12px; gap: 6px; }
  .breadcrumb__item + .breadcrumb__item::before { margin-right: 6px; }
}

/* ────────────────────────────────────────────────────────────
   Page Hero — 各下層ページの先頭にあるタイトル領域
   ──────────────────────────────────────────────────────────── */
.page-hero {
  background: var(--paper);
  padding: 80px 40px 64px;
  text-align: center;
}
.page-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.page-hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
}
.page-hero__title-en {
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 64px;
  color: var(--navy);
  line-height: 1;
  letter-spacing: .02em;
}
.page-hero__title-ja {
  font-size: 15px;
  color: var(--navy);
  letter-spacing: .12em;
}
.page-hero__lede {
  font-size: 15px;
  line-height: 1.9;
  color: #222;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 1023px) {
  .page-hero { padding: 64px 32px 48px; }
  .page-hero__title-en { font-size: 48px; }
}
@media (max-width: 767px) {
  .page-hero { padding: 48px 20px 36px; }
  .page-hero__title-en { font-size: 36px; }
  .page-hero__title-ja { font-size: 13px; }
  .page-hero__lede { font-size: 14px; line-height: 1.85; }
}

/* ────────────────────────────────────────────────────────────
   Sub-page generic section padding
   ──────────────────────────────────────────────────────────── */
.sub-section {
  padding: 80px 40px;
}
.sub-section__inner {
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1023px) { .sub-section { padding: 56px 32px; } }
@media (max-width: 767px)  { .sub-section { padding: 40px 20px; } }