/* ============================================
   Layout — l-*
   ============================================ */
.l-container { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.l-container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.l-section { padding: var(--section-pad-y) 0 var(--section-pad-y-end); }
.l-section--gray { background: var(--surface-alt); }

/* ---- Navy proof band ----
   デザイン正本どおり3層で構成する:
   72px グリッド線（青7%）/ 3つのラジアルグロー（青=左上・シアン=右上・金=下中央）
   / 上端に 1px の金ヘアライン。パディングはダークバンドのみ 128/112。 */
.l-section--navy {
  position: relative;
  padding: var(--section-pad-y-dark) 0 var(--section-pad-y-dark-end);
  background: var(--surface-dark);
  overflow: hidden;
  color: var(--text-on-dark);
}
.l-section--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grad-dark-grid);
  background-size: 72px 72px;
}
.l-section--navy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* 1層目 = 上端の金ヘアライン（1px・両端フェード）、2層目以降 = 3つのグロー */
  background: var(--grad-gold-hairline) top left / 100% 1px no-repeat, var(--grad-dark-glow);
}
.l-section--navy > .l-container { position: relative; z-index: 1; }

/* ---- Header ---- */
.l-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-height); padding: 0 32px;
  background: var(--surface-page); border-bottom: 1px solid var(--border-hair);
}
.l-header__logo img { height: 30px; width: auto; }
.l-header__nav { display: flex; align-items: center; gap: 32px; font-size: var(--fs-body-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.l-header__nav a { color: var(--text-strong); }
.l-header__nav a:hover { color: var(--gold-ink); }
.l-header__nav .is-external { color: var(--text-muted); }
.l-header__actions { display: flex; align-items: center; gap: 12px; }
.l-header__actions .c-btn { white-space: nowrap; }
.l-header__burger { display: none; }
@media (max-width: 1280px) {
  .l-header__nav { gap: 18px; font-size: var(--fs-caption); }
  .l-header__actions .c-btn { padding: 10px 16px; font-size: var(--fs-caption); min-height: 44px; }
}
@media (max-width: 1100px) {
  /* ナビが収まらない幅からドロワーに切り替え */
  .l-header__nav, .l-header__actions { display: none; }
  .l-header__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer;
  }
  .l-header__burger span { display: block; height: 2px; background: var(--navy-800); transition: transform var(--dur-base), opacity var(--dur-base); }
  .l-header__burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .l-header__burger.is-open span:nth-child(2) { opacity: 0; }
  .l-header__burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (max-width: 1023px) {
  .l-header { padding: 0 var(--gutter); }
  .l-header__logo img { height: 26px; }
}
/* SP正本のヘッダー: pad 0 16px / ロゴ22px / 資料請求ボタン h44 pad 0 16px fs13 /
   バーガーは 44×44・角丸8・#D6DEEA の枠線・バー 18×2px（gap 5px） */
@media (max-width: 767px) {
  .l-header { padding: 0 16px; gap: 8px; }
  .l-header__logo img { height: 22px; }
  /* SP専用のCTA（.l-header__actions は 1100px 以下で非表示のまま） */
  .l-header__sp-cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 16px; border-radius: var(--radius-md);
    color: var(--text-on-dark); font-weight: var(--fw-bold); font-size: var(--fs-caption);
    white-space: nowrap; background: var(--grad-gold-cta); box-shadow: var(--shadow-cta-flat);
  }
  .l-header__sp-cta:hover { color: var(--text-on-dark); }
  .l-header__end { display: flex; align-items: center; gap: 8px; }
  .l-header__burger {
    gap: 5px; padding: 0; align-items: center;
    border: 1px solid var(--border-rule); border-radius: var(--radius-md); box-sizing: border-box;
  }
  .l-header__burger span { width: 18px; height: 2px; border-radius: 1px; }
  .l-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .l-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* SP以外では SP専用CTAを出さない */
@media (min-width: 768px) { .l-header__sp-cta { display: none; } }

/* ---- Drawer ---- */
.l-drawer {
  display: none; position: fixed; inset: var(--header-height) 0 0; z-index: 99;
  background: var(--surface-page); overflow-y: auto;
  padding: 24px var(--gutter) 48px;
  overscroll-behavior: contain;
}
.l-drawer.is-open { display: block; }
.l-drawer__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px; border-bottom: 1px solid var(--border-inner);
  font-size: var(--fs-ui); font-weight: var(--fw-bold); color: var(--text-strong); min-height: 44px;
}
.l-drawer__list a::after { content: "›"; color: var(--gold-ink); }
.l-drawer__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
/* タブレットではドロワー内も2カラムに */
@media (min-width: 768px) and (max-width: 1100px) {
  .l-drawer__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
  .l-drawer__actions { flex-direction: row; }
  .l-drawer__actions .c-btn { flex: 1; }
}

/* ---- Page hero（下層ページ共通） ---- */
.l-hero { background: var(--grad-hero); }
.l-hero__inner { padding-top: 48px; padding-bottom: 72px; }
.l-hero__breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--fs-micro); color: var(--text-muted); }
.l-hero__breadcrumb a { color: var(--text-muted); }
.l-hero__breadcrumb .sep { color: var(--navy-100); }
.l-hero__en { margin-top: 44px; font: var(--eyebrow); font-family: var(--font-latin); letter-spacing: var(--ls-eyebrow); color: var(--gold-ink); }
.l-hero__en::after { content: ""; display: block; width: var(--rule-w); height: var(--rule-h); background: var(--gold-550); margin: var(--rule-gap) 0; }
.l-hero__title { font-family: var(--font-serif); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-h2); letter-spacing: var(--ls-base); }
.l-hero__lead { margin-top: 24px; max-width: 880px; font-size: var(--fs-section-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-lead); color: var(--text-body); }
@media (max-width: 1023px) {
  .l-hero__inner { padding-top: 32px; padding-bottom: 56px; }
  .l-hero__en { margin-top: 32px; }
}
/* SP正本（sp-*.dc.html 実測）: inner 20px 20px 40px / パンくず 11.5px /
   eyebrow 12px mt28 / 金ルール 22×2px 前後12px / h1 27-1.5 mt6 / リード 14-2.0 mt16 */
@media (max-width: 767px) {
  .l-hero__inner { padding-top: 20px; padding-bottom: 40px; }
  .l-hero__breadcrumb { font-size: var(--fs-nano); line-height: 1.5; }
  .l-hero__en { margin-top: 28px; }
  .l-hero__title { margin-top: 6px; }
  .l-hero__lead { margin-top: 16px; font-size: var(--fs-body-sm); line-height: var(--lh-body); }
}

/* ---- Footer ---- */
.l-footer { background: var(--navy-800); color: var(--text-on-dark); }
.l-footer a { color: rgba(255,255,255,.78); }
.l-footer a:hover { color: var(--gold-250); }
.l-footer__main { display: grid; grid-template-columns: 340px 1fr; gap: 64px; padding: var(--section-pad-y-end) 0 48px; }
.l-footer__logo img { height: 28px; width: auto; }
.l-footer__desc { margin-top: 28px; font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: rgba(255,255,255,.72); }
.l-footer__addr { margin-top: 32px; font-size: var(--fs-caption); line-height: var(--lh-body-sm); color: rgba(255,255,255,.72); font-style: normal; }
.l-footer__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.l-footer__nav-title { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); padding-bottom: 16px; border-bottom: 1px solid var(--border-on-dark); }
.l-footer__nav-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; font-size: var(--fs-caption); }
.l-footer__nav-list .is-more { color: var(--gold-250); }
.l-footer__badges { display: flex; flex-direction: column; gap: 16px; }
.l-footer__badge { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border-on-dark); border-radius: var(--radius-md); font-size: var(--fs-micro); line-height: 1.6; color: rgba(255,255,255,.85); }
.l-footer__badge img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.l-footer__tel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 20px; padding: 32px 0; border-top: 1px solid var(--border-on-dark); }
.l-footer__tel-number { font-family: var(--font-serif); font-size: 26px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-lead); color: var(--text-on-dark); }
.l-footer__tel-note { font-size: var(--fs-micro); color: rgba(255,255,255,.7); }
.l-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 28px; font-size: var(--fs-micro); }
.l-footer__legal a { color: rgba(255,255,255,.7); }
.l-footer__copy { padding-bottom: 40px; font-family: var(--font-latin); font-size: var(--fs-micro); color: rgba(255,255,255,.5); }
/* 1279px 以下ではブランド列を上に逃がし、ナビは2カラムへ（4カラムは横溢れの原因） */
@media (max-width: 1279px) {
  .l-footer__main { grid-template-columns: 300px 1fr; gap: 40px; }
  .l-footer__nav { grid-template-columns: repeat(2, 1fr); gap: 28px 32px; }
}
@media (max-width: 1023px) {
  .l-footer__main { grid-template-columns: 1fr; gap: 40px; padding: var(--section-pad-y-end) 0 32px; }
  .l-footer__badges { flex-direction: row; flex-wrap: wrap; }
  .l-footer__badge { flex: 1 1 240px; }
}
/* SP正本のフッター: pad 56px 20px 32px。見出し付き4カラムナビではなく
   9本のフラットなリンクリスト（各 h53・区切り線・右端に金の ›）。バッジは2枚。 */
@media (max-width: 767px) {
  .l-footer__main { grid-template-columns: 1fr; gap: 0; padding: 56px 0 0; }
  .l-footer__logo img { height: 22px; }
  .l-footer__desc { margin-top: 18px; font-size: var(--fs-caption); line-height: var(--lh-body-sm); }
  .l-footer__addr { display: none; }
  .l-footer__nav { display: contents; }
  .l-footer__nav > div:not(.l-footer__badges) { display: none; }
  .l-footer__sp-nav { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--border-on-dark); }
  .l-footer__sp-nav a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 53px; padding: 0 4px;
    font-size: var(--fs-body-sm); color: rgba(255,255,255,.78);
    border-bottom: 1px solid var(--border-on-dark);
  }
  .l-footer__sp-nav a::after { content: "›"; color: var(--gold-250); }
  .l-footer__badges { flex-direction: column; gap: 10px; margin-top: 24px; }
  .l-footer__badge { flex: none; padding: 12px 14px; gap: 12px; font-size: var(--fs-nano); line-height: 1.6; }
  .l-footer__badge img { width: 32px; height: 32px; }
  .l-footer__badge--award { display: none; }
  .l-footer__tel { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 32px; padding: 24px 0 0; }
  .l-footer__tel-number { font-size: 22px; }
  .l-footer__tel-note { font-size: var(--fs-nano); }
  .l-footer__legal { gap: 12px 18px; margin-top: 24px; padding-bottom: 0; font-size: var(--fs-nano); }
  .l-footer__copy { margin-top: 28px; padding-bottom: 32px; font-size: 11px; }
}
/* SP専用のフラットナビは SP 以外では出さない */
@media (min-width: 768px) { .l-footer__sp-nav { display: none; } }