/* =========================================================================
   LIFTOFF, Inc. — Corporate Site CSS
   Design principle: Silence as Authority, Evidence over Claim,
   Bilingual Hierarchy, Human Grid, Honest Pace.
   Monotone base + single accent. See design/tokens/*.json for the source of truth.
   ========================================================================= */

:root {
  /* color */
  --c-neutral-0:   #FFFFFF;
  --c-warm-50:     #FDFCFA;   /* warm off-white — body bg */
  --c-neutral-100: #EDEDED;
  --c-neutral-300: #C9C9C9;
  --c-neutral-500: #8A8A8A;
  --c-neutral-700: #3F3F3F;
  --c-neutral-850: #222222;   /* legacy soft dark (kept for back-compat) */
  --c-neutral-900: #0A0A0A;   /* pure black — text / strong rules only */
  --c-cosmos:      #050308;   /* legacy dark — kept for token references */
  --c-navy-deep:   #0a1428;   /* solid base for filled dark areas */
  --c-navy-mid:    #070f24;
  --c-navy-edge:   #03060f;
  --c-bg-scrim:    rgba(0, 0, 0, 0.55);
  --c-accent:      #C94B3F;

  --c-bg:         var(--c-warm-50);
  --c-bg-subtle:  var(--c-neutral-100);
  --c-bg-invert:  var(--c-navy-deep);
  --c-border:     var(--c-neutral-300);
  --c-border-subtle: var(--c-neutral-100);
  --c-border-strong: var(--c-neutral-900);
  --c-text:       var(--c-neutral-900);
  --c-text-strong: var(--c-neutral-900);
  --c-text-muted: var(--c-neutral-500);
  --c-text-invert: var(--c-neutral-0);

  /* typography */
  --ff-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --ff-en: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight:  1.2;
  --lh-normal: 1.7;
  --lh-loose:  1.9;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.12em;
  --ls-xwide:  0.22em;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* spacing (8-based) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9:  128px;
  --s-10: 192px;

  /* layout */
  --max-content: 720px;
  --max-wide:    1200px;

  /* motion */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-normal: 200ms;
  --dur-slow:   250ms;

  /* component specific */
  --header-h: 72px;
}

/* =========================================================================
   Reset & base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  background: var(--c-bg);
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-ja);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Cosmos canvas — absolute inside its host (hero, footer, etc.) */
.cosmos-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
img, svg { max-width: 100%; display: block; height: auto; }
a {
  color: var(--c-text-strong);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 1px);
  background-size: 0% 1px;
  transition: background-size 240ms var(--ease-out), color var(--dur-normal) var(--ease-out);
}
a:hover { background-size: 100% 1px; }
a:focus-visible { outline: 2px solid var(--c-text-strong); outline-offset: 2px; }
/* Button/card-like anchors keep their own hover (no underline) */
.btn, .btn-primary, .btn-cta,
.gh-cta, .gh-brand, .gh-nav-toggle,
.back-to-top,
.service-card, .service-card--with-thumb,
.service-list-item,
.case-card, .case-card-link, .pillar > a, .method-card,
.document-card, .seminar-card,
.case-sidebar-list a,
.hero-scroll-cue {
  background-image: none;
}
.btn:hover, .btn-primary:hover, .btn-cta:hover,
.gh-cta:hover, .gh-brand:hover,
.back-to-top:hover,
.service-card:hover, .service-card--with-thumb:hover,
.service-list-item:hover,
.case-card:hover, .case-card-link:hover, .method-card:hover,
.document-card:hover, .seminar-card:hover,
.case-sidebar-list a:hover,
.hero-scroll-cue:hover { background-size: 0 0; }
ul, ol { padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-6) 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Utility layout
   ========================================================================= */
.container      { max-width: var(--max-wide); margin-inline: auto; padding-inline: var(--s-4); }
.container-text { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--s-4); }
.container-narrow { max-width: 912px; margin-inline: auto; padding-inline: var(--s-4); }
.section        { padding-block: var(--s-7); }
.section-sm     { padding-block: var(--s-6); }
@media (max-width: 768px) {
  .section    { padding-block: var(--s-6); }
  .section-sm { padding-block: var(--s-5); }
}

/* =========================================================================
   Bilingual typography
   ========================================================================= */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-strong); /* 既定で黒。薄くしたいときだけ .eyebrow--muted */
  margin-bottom: var(--s-3);
}
.eyebrow--muted { color: var(--c-text-muted); font-weight: var(--fw-medium); }
.eyebrow--num { display: inline-flex; align-items: baseline; gap: 0.5em; }
.display-ja {
  font-family: var(--ff-ja);
  font-size: clamp(2.25rem, 5.2vw, var(--fs-72));
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-4);
}
.display-ja--black { font-weight: var(--fw-black); }
.heading-ja {
  font-family: var(--ff-ja);
  font-size: clamp(1.625rem, 3.2vw, var(--fs-40));
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--c-text-strong);
  margin: 0 0 var(--s-4);
}
.subheading-ja {
  font-family: var(--ff-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--c-text-strong);
  margin: 0 0 var(--s-3);
}
.lead-ja {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--c-text);
  margin: 0 0 var(--s-4);
  font-weight: var(--fw-medium);
}

/* Structural Rule — 見出し下の黒罫（構造線としての黒） */
.heading-ja--rule,
.section-heading {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

/* Anchor Number — 極太ディスプレイ数字 */
.anchor-number {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  color: var(--c-text-strong);
}
.anchor-number .num {
  font-family: var(--ff-en);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.anchor-number .unit { font-weight: var(--fw-bold); font-size: var(--fs-20); }
.anchor-number + .anchor-label { font-size: var(--fs-14); color: var(--c-text-muted); margin-top: var(--s-1); }

/* Inverted Section — 本文中の黒反転ブロック（Final CTA 以外でも使う） */
.section-invert {
  background: var(--c-bg-invert);
  color: var(--c-text-invert);
}
.section-invert .eyebrow,
.section-invert .display-ja,
.section-invert .heading-ja,
.section-invert .subheading-ja,
.section-invert .lead-ja,
.section-invert p,
.section-invert a { color: var(--c-text-invert); }
.section-invert .caption,
.section-invert .eyebrow--muted { color: var(--c-neutral-300); }
.section-invert .heading-ja--rule,
.section-invert .section-heading { border-bottom-color: var(--c-text-invert); }
.section-invert .btn {
  border-color: var(--c-text-invert);
  color: var(--c-text-invert);
  background: transparent;
}
.section-invert .btn:hover { background: var(--c-text-invert); color: var(--c-text-strong); opacity: 1; }
.section-invert .pillars { border-top-color: var(--c-text-invert); }
.section-invert .pillar { border-left-color: rgba(255, 255, 255, 0.15); }
.section-invert hr { border-top-color: rgba(255, 255, 255, 0.2); }
.body-ja p { margin: 0 0 var(--s-3); }
.caption {
  font-size: var(--fs-14);
  color: var(--c-text-muted);
  line-height: var(--lh-normal);
}

/* =========================================================================
   Header
   ========================================================================= */
.global-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  height: var(--header-h);
}

/* =========================================================================
   Cosmos-hero page: dark backdrop, scroll-linked header transition,
   logo crossfade. Scoped tightly so non-home pages stay default.
   ========================================================================= */
body.has-cosmos-hero {
  --header-intro: 0;                                                   /* JS updates 0 → 1 over the first 70px of scroll. Set on body so cue inherits too. */
  background: #03060f;                                                 /* shows behind transparent header */
}
body.has-cosmos-hero main {
  background: var(--c-bg);                                             /* cream for sections below cosmos */
  display: flow-root;                                                  /* prevents margin-collapse from cosmos hero */
}
body.has-cosmos-hero .global-header {
  background-color: rgba(250, 249, 246, calc(0.7 * var(--header-intro)));
  backdrop-filter: saturate(140%) blur(calc(10px * var(--header-intro)));
  -webkit-backdrop-filter: saturate(140%) blur(calc(10px * var(--header-intro)));
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) calc(var(--header-intro) * 100%), transparent);
}
body.has-cosmos-hero .global-header .gh-brand,
body.has-cosmos-hero .global-header .gh-nav a,
body.has-cosmos-hero .global-header .gh-cta {
  color: color-mix(in srgb, rgba(255,255,255,0.95) calc((1 - var(--header-intro)) * 100%), var(--c-text-strong));
}
body.has-cosmos-hero .global-header .gh-cta {
  border-color: color-mix(in srgb, rgba(255,255,255,0.7) calc((1 - var(--header-intro)) * 100%), var(--c-text-strong));
}
body.has-cosmos-hero .global-header .gh-nav-toggle span {
  background: color-mix(in srgb, rgba(255,255,255,0.95) calc((1 - var(--header-intro)) * 100%), var(--c-text-strong));
}
/* Header reveal — wait until hero copy has settled (data-reveal ≈ 1800ms), then fade in. */
body.has-cosmos-hero .global-header {
  animation: heroHeaderReveal 600ms var(--ease-out) 800ms both;
}
@keyframes heroHeaderReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
/* Optical centering — shift hero content slightly above geometric center for visual balance. */
body.has-cosmos-hero .hero-cosmos { margin-top: calc(-4vh - 100px); }
@media (prefers-reduced-motion: reduce) {
  body.has-cosmos-hero .global-header { animation: none; opacity: 1; transform: none; }
}
.global-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.gh-brand {
  font-family: var(--ff-en);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-strong);
}
.gh-nav {
  display: flex;
  gap: var(--s-5);
  align-items: center;
}
.gh-nav a {
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-strong);
}
.gh-cta {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--c-text-strong);
  font-size: var(--fs-12);
  font-family: var(--ff-en);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-strong);
  background: transparent;
  transition: background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}
.gh-cta:hover { background: var(--c-text-strong); color: var(--c-text-invert); opacity: 1; }
/* Cosmos-hero ヘッダーは scroll-linked で .gh-cta の color を上書きしているため、
   :hover 時にもそれが優先されてしまう。より高い specificity で hover 文字色を確保。 */
body.has-cosmos-hero .global-header .gh-cta:hover { color: var(--c-text-invert); border-color: var(--c-text-strong); }

/* Services mega — inserted as a sibling of the Services link inside .gh-nav.
   .gh-nav is static, so the absolute mega resolves against the header (sticky)
   → full-width drawer below. Hover trigger uses the sibling combinator. */
.gh-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #FAF9F6;                  /* match the base header tone (not body --c-bg) */
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    max-height 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 1100ms;
  z-index: 11;
}
.gh-mega-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: var(--max-wide);
  margin-inline: auto;
  padding: 0 var(--s-4) var(--s-3);                   /* no top gap — SALES DX flush under header */
  padding-left: var(--mega-offset, var(--s-4));        /* aligns under "Services" */
  opacity: 0;
  transition: opacity 800ms var(--ease-out);          /* only the items fade — the bg stays solid */
}
.gh-mega a {
  font-family: var(--ff-en);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-strong);
  padding: 2px 0;
}

/* Open state: driven by body.mega-open, set/cleared by JS with a 200ms grace timer */
body.mega-open .gh-mega {
  max-height: 160px;
  visibility: visible;
  pointer-events: auto;
  transition:
    max-height 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
body.mega-open .gh-mega-inner { opacity: 1; }

/* While mega is open, force the header to the IDENTICAL solid cream as the mega
   (no alpha, no blur, no border), so the header and mega merge into one
   continuous flat white area with no visible seam. Snap (no transition). */
body.mega-open .global-header {
  background-color: #FAF9F6 !important;     /* keep header on the old cream tone, not body var */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;             /* nuke the shorthand entirely so no 1px line */
  transition: none !important;
}
/* Mirror on the mega side — drop its bottom border too so the only visible edge
   is the bottom of the mega area (controlled separately if needed). */
body.mega-open .gh-mega { border-bottom-color: transparent; }
body.has-cosmos-hero.mega-open .global-header .gh-brand,
body.has-cosmos-hero.mega-open .global-header .gh-nav a,
body.has-cosmos-hero.mega-open .global-header .gh-cta {
  color: var(--c-text-strong) !important;
}
body.has-cosmos-hero.mega-open .gh-brand-img--white   { opacity: 0 !important; }
body.has-cosmos-hero.mega-open .gh-brand-img--default { opacity: 1 !important; }

@media (max-width: 900px) {
  .gh-mega { display: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero { padding-block: var(--s-9) var(--s-8); }
.hero .eyebrow { margin-bottom: var(--s-4); }
.hero h1 { margin-bottom: var(--s-5); }
.hero .lead-ja { max-width: 640px; margin-bottom: var(--s-5); }
.hero .hero-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-5); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-block;
  font-family: var(--ff-ja);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  padding: 16px 28px;
  transition: background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
  cursor: pointer;
  border: 1px solid var(--c-text-strong);
}
.btn-primary   { background: var(--c-text-strong); color: var(--c-text-invert); }
.btn-primary:hover { opacity: 0.85; }
.btn-secondary { background: transparent; color: var(--c-text-strong); }
.btn-secondary:hover { background: var(--c-text-strong); color: var(--c-text-invert); opacity: 1; }

/* =========================================================================
   Pillars (2 columns)
   ========================================================================= */
.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-7);
}
.pillar {
  padding: var(--s-5) var(--s-6) var(--s-5) var(--s-5);
  border-left: 1px solid var(--c-border);
}
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar .eyebrow { margin-bottom: var(--s-3); }
.pillar .heading-ja { margin-bottom: var(--s-3); font-size: var(--fs-32); }
@media (max-width: 768px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-left: 0; padding: var(--s-4) 0; border-top: 1px solid var(--c-border); }
  .pillar:first-child { border-top: 0; padding-top: 0; }
}

/* =========================================================================
   Pillars — staggered dynamic reveal (home Core)
   ========================================================================= */
.pillars > .pillar[data-reveal] { transition-delay: 0ms; }
.pillars > .pillar:nth-child(1) { --i: 0; }
.pillars > .pillar:nth-child(2) { --i: 1; }
.pillars > .pillar:nth-child(3) { --i: 2; }
.js-reveal .pillar[data-reveal] { transform: translateY(40px); transition: opacity 1400ms var(--ease-out), transform 1400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 280ms); }
.js-reveal .pillar[data-reveal].is-visible { transform: none; }

/* =========================================================================
   Service grid
   ========================================================================= */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-border);
  border: 1px solid var(--c-border);
}
.service-card {
  background: var(--c-bg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 260px;
  transition: background var(--dur-normal) var(--ease-out), color var(--dur-normal) var(--ease-out);
}
.service-card:hover { background: color-mix(in oklab, var(--c-bg-invert) 80%, transparent); color: var(--c-text-invert); }
.service-card:hover h3,
.service-card:hover p,
.service-card:hover .more { color: var(--c-text-invert); }
.service-card:hover .eyebrow { color: var(--c-text-invert); }
.service-card .eyebrow { margin-bottom: var(--s-2); }
.service-card h3 { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.service-card p  { margin: 0; font-size: var(--fs-14); color: var(--c-text); }
.service-card .more { margin-top: auto; font-family: var(--ff-en); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-xwide); text-transform: uppercase; color: var(--c-text-strong); }
.badge-new {
  display: inline-block;
  margin-left: 0.4em;
  padding: 1px 7px;
  font-family: var(--ff-en);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--c-text-strong);
  color: var(--c-text-invert);
  vertical-align: 2px;
}
.service-card:hover .badge-new { background: var(--c-text-invert); color: var(--c-text-strong); }

/* Service card variant — with thumbnail image on top */
.service-card--with-thumb {
  padding: 0;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}
.service-card-thumb {
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--c-bg-subtle);
}
.service-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out);
}
.service-card-body {
  padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  min-height: 220px;
}
.service-card--with-thumb:hover { background: var(--c-bg); color: var(--c-text); opacity: 1; }
.service-card--with-thumb:hover h3 { color: var(--c-text-strong); }
.service-card--with-thumb:hover p,
.service-card--with-thumb:hover .more,
.service-card--with-thumb:hover .eyebrow { color: var(--c-text); }
.service-card--with-thumb:hover .more { color: var(--c-text-strong); }
.service-card--with-thumb .service-card-body { transition: opacity 280ms var(--ease-out); }
.service-card--with-thumb:hover .service-card-body { opacity: 0.55; }
.service-card--with-thumb:hover .service-card-thumb img { transform: scale(1.04); }
@media (max-width: 768px) { .service-grid { grid-template-columns: 1fr; } }

/* Service list — vertical list with thumbnails */
.service-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-border); }
.service-list li { border-bottom: 1px solid var(--c-border); }
.service-list-item {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-6);
  padding: var(--s-5) 0;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.service-list-item__thumb { order: 2; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-bg-subtle); }
.service-list-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); }
.service-list-item:hover .service-list-item__thumb img { transform: scale(1.04); }
.service-list-item__body { order: 1; display: flex; flex-direction: column; gap: var(--s-2); padding-left: var(--s-4); transition: opacity 280ms var(--ease-out); }
.service-list-item:hover .service-list-item__body { opacity: 0.55; }
.service-list-item__body .eyebrow { font-family: var(--ff-en); font-size: var(--fs-12); letter-spacing: var(--ls-xwide); text-transform: uppercase; color: var(--c-text); }
.service-list-item__body h3 { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.service-list-item__body p { margin: 0; font-size: var(--fs-14); color: var(--c-text); }
.service-list-item__body .more { margin-top: var(--s-2); font-family: var(--ff-en); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-xwide); text-transform: uppercase; color: var(--c-text-strong); }
@media (max-width: 768px) {
  .service-list-item { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-4) 0; }
  .service-list-item__body { padding-left: 0; order: 2; }
  .service-list-item__thumb { order: 1; }
}

/* =========================================================================
   Methodology (3 column list)
   ========================================================================= */
.methodology {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.methodology > * {
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-4);
}
.methodology h3 { font-size: var(--fs-20); font-weight: var(--fw-bold); margin: 0 0 var(--s-2); color: var(--c-text-strong); }
.methodology p { margin: 0; font-size: var(--fs-14); color: var(--c-text); }
.methodology .num {
  display: inline-block;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  color: var(--c-text-strong);
  margin-bottom: var(--s-2);
}
@media (max-width: 768px) { .methodology { grid-template-columns: 1fr; } }

/* =========================================================================
   Cases / News list
   ========================================================================= */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
@media (max-width: 768px) { .case-grid { grid-template-columns: 1fr; } }

/* Card — borderless, transparent frame. No transform on hover (only the image zooms).
   case-card は flex column にして、case-card-link (内容) と case-card-tags (リンク外) が
   1 つの column に並ぶように。link の height:100% を撤去し、tags が次のグリッド行に
   重なる事故を防ぐ。 */
.case-card { background: transparent; display: flex; flex-direction: column; }
.case-card-link { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }

/* Header — logo + company name (below image) */
.case-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-2);
}
.case-card-logo {
  flex: 0 0 auto;
  width: auto;
  height: 44px;
  max-width: 140px;
  object-fit: contain;
}
.case-card-name {
  margin: 0;
  flex: 1;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--c-text-strong);
}

/* Image */
.case-card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-bg-subtle);
  overflow: hidden;
}
.case-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out);
}
.case-card:hover .case-card-thumb img { transform: scale(1.04); }

/* Image */
/* (defined above; no padding) */

/* Case title — 3-line clamp, sits between company header and summary */
.case-card-title {
  margin: var(--s-3) 0 0;
  font-family: var(--ff-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--c-text-strong);
  letter-spacing: var(--ls-tight);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.case-card:hover .case-card-title { text-decoration: underline; text-underline-offset: 3px; }

/* Summary — clip to 2 lines with ellipsis */
.case-card-summary {
  margin: 0;
  padding: var(--s-2) 0 0;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cases archive — filter chips (taxonomy navigation) */
.case-filter-section { padding-block: 0; }
.case-filter-section .container {
  border-bottom: 1px solid var(--c-border);
  padding-block: var(--s-2);
}
.case-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
}
.case-filter-row + .case-filter-row { border-top: 1px solid var(--c-border-subtle); }
.case-filter-label {
  margin: 0;
  min-width: 140px;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.case-filter-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Tags — unified pill system for case archive + detail.
   Color encoding: sf_product = blue, case_tag = green, industry = gray. */
.case-card-tags {
  list-style: none;
  margin: 0;
  padding: var(--s-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--c-bg-subtle);
  color: var(--c-text-strong);
  text-decoration: none;
  transition: opacity var(--dur-normal) var(--ease-out), filter var(--dur-normal) var(--ease-out);
}
a.tag:hover { filter: brightness(0.94); }
a.tag.is-current { outline: 1px solid var(--c-text-strong); outline-offset: 1px; }
.tag--sf-product {
  background: rgba(120, 160, 220, 0.22);
  color: #1F3D6E;
}
.tag--case-tag {
  background: rgba(168, 207, 184, 0.5);
  color: #2D5C3F;
}
.tag--industry {
  background: var(--c-bg-subtle);
  color: var(--c-text-muted);
}

/* =========================================================================
   FAQ block — visible counterpart of FAQPage JSON-LD
   ========================================================================= */
.faq-block { background: var(--c-bg-subtle); }
.faq-list { margin: var(--s-4) 0 0; padding: 0; }
.faq-list dt {
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
}
.faq-list dt:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.faq-list dt::before { content: 'Q. '; color: var(--c-text-strong); }
.faq-list dd { margin: var(--s-2) 0 var(--s-3); padding: 0; }
.faq-list dd::before { content: 'A. '; font-weight: var(--fw-bold); color: var(--c-text-muted); }

/* =========================================================================
   Case detail page — long-form interview format
   ========================================================================= */
/* .container-narrow defined globally above */

/* Hero */
/* Breadcrumb — generic utility */
.breadcrumb {
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-muted);
  margin-bottom: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
}
.breadcrumb a { color: var(--c-text-strong); }

.case-hero { padding-block: var(--s-7) var(--s-5); }
.case-hero-title {
  font-family: var(--ff-ja);
  font-size: clamp(1.5rem, 3vw, var(--fs-32));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--c-text-strong);
  margin: 0 0 var(--s-4);
  letter-spacing: var(--ls-tight);
}
.case-hero-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}

/* Cover image — used inside .case-overview-grid (side-by-side with client table) */
.case-overview { padding-block: 0 var(--s-7); }
.case-overview-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-5);
  align-items: center;
}
.case-cover {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-bg-subtle);
}
.case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-overview-info {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  max-width: 420px;
  margin-inline: auto;
}
.case-client-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 44px;
  /* テーブルの value 列（「ス」の文字位置）と頭を揃える */
  padding-left: 110px;
}
@media (max-width: 540px) {
  .case-client-logo { padding-left: 88px; }
}
.case-client-logo img {
  display: block;
  max-height: 44px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* 画像内部の透明パディングぶんを左にずらして「社」の文字位置と頭を揃える */
  margin-left: -10px;
}
@media (max-width: 768px) {
  .case-overview-grid { grid-template-columns: 1fr; }
}

/* Generic vertical section block */
.case-block { padding-block: 0 var(--s-6); }
.case-block .eyebrow { margin-bottom: var(--s-2); }
.case-section-heading {
  font-family: var(--ff-ja);
  font-size: clamp(1.25rem, 2.4vw, var(--fs-24));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--c-text-strong);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.case-block p { font-size: var(--fs-16); line-height: var(--lh-loose); margin: 0 0 var(--s-3); color: var(--c-text); }

/* Client info table — embedded in the rounded info card, no borders */
.case-client-table { width: 100%; border-collapse: collapse; }
.case-client-table th, .case-client-table td {
  text-align: left; vertical-align: top;
  padding: 8px 0;
  border-bottom: none;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  font-family: var(--ff-ja);
  letter-spacing: 0;
  text-transform: none;
}
.case-client-table th { width: 110px; }
.case-client-table td a { color: #2A6BB8; text-decoration: none; }
.case-client-table td a:hover { text-decoration: underline; }
@media (max-width: 540px) {
  .case-client-table th { width: 88px; }
}

/* Full-bleed figure between blocks */
.case-figure { margin: var(--s-7) 0; }
.case-figure img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

/* Dialog (Q&A interview) */
.case-dialog { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-4); }
.case-dialog-line { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-3); align-items: start; }
.case-dialog-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: var(--c-bg-subtle);
}
.case-dialog-body { min-width: 0; }
.case-dialog-name {
  margin: 0 0 6px;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-strong);
}
.case-dialog-body p {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--c-text);
}

/* Steps (Approach) */
.case-steps { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.case-steps li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-border);
}
.case-steps li:last-child { border-bottom: 0; }
.case-steps .num {
  font-family: var(--ff-en);
  font-size: var(--fs-32);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--c-text-strong);
  margin: 0;
  letter-spacing: -0.02em;
}
.case-steps h3 { margin: 0 0 var(--s-2); font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.case-steps p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--c-text); }

/* Result metrics */
.case-block--result { background: var(--c-bg-subtle); padding-block: 0 var(--s-7); }
.case-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.case-result {
  padding: var(--s-5);
  background: var(--c-bg);
  border-radius: 10px;
  text-align: center;
}
.case-result-metric {
  font-family: var(--ff-en);
  font-size: var(--fs-56);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-text-strong);
  margin: 0;
}
.case-result-metric .unit { font-size: 0.45em; margin-left: 4px; font-weight: var(--fw-bold); }
.case-result-label {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}
@media (max-width: 768px) { .case-results { grid-template-columns: 1fr; } }

/* CTA actions */
.case-cta-actions { display: inline-flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); justify-content: center; }
.btn-secondary {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--c-text-strong);
  background: transparent;
  color: var(--c-text-strong);
  font-family: var(--ff-en);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  font-size: var(--fs-12);
}

/* Back link */
.case-detail-back { margin: 0; text-align: center; font-size: var(--fs-14); }

/* Case detail body — main content + right sidebar */
.case-body-grid {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--s-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--s-7);
  align-items: start;
}
.case-body-main { min-width: 0; }
.case-sidebar { position: sticky; top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-6); }
.case-sidebar-section { border-top: 1px solid var(--c-border-subtle); padding-top: var(--s-4); }
.case-sidebar-heading { margin: var(--s-1) 0 var(--s-4); font-size: var(--fs-18); }
.case-sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.case-sidebar-list a {
  display: grid; grid-template-columns: 72px 1fr;
  gap: var(--s-3); align-items: start;
  text-decoration: none; color: inherit;
  padding: var(--s-2); border-radius: 4px;
}
.case-sidebar-list img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 4px;
  background: var(--c-bg-subtle);
  transition: transform 500ms var(--ease-out);
}
.case-sidebar-meta { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; transition: opacity 280ms var(--ease-out); }
.case-sidebar-title { font-size: var(--fs-14); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.case-sidebar-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.case-sidebar-tags li { font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px; background: var(--c-bg-subtle); color: var(--c-text-strong); letter-spacing: 0.04em; }
/* Body fades to 55% + thumb zooms slightly — matches .service-card--with-thumb */
.case-sidebar-list a:hover .case-sidebar-meta { opacity: 0.55; }
.case-sidebar-list a:hover img { transform: scale(1.04); }

/* Topic cluster — taxonomy archive links from a case detail page */
.case-cluster-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.case-cluster-list a {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border-subtle);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--dur-normal) var(--ease-out);
}
.case-cluster-list a:hover { opacity: 0.6; }
.case-cluster-prefix {
  font-family: var(--ff-en);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.case-cluster-name { font-size: var(--fs-14); line-height: 1.45; color: var(--c-text-strong); }
.case-cluster-all {
  grid-template-columns: 1fr !important;
  padding-top: var(--s-2) !important;
  border-bottom: none !important;
  font-size: var(--fs-12);
  color: var(--c-text-muted) !important;
  font-family: var(--ff-en);
  letter-spacing: 0.04em;
}
@media (max-width: 900px) {
  .case-body-grid { grid-template-columns: 1fr; }
  .case-sidebar { position: static; }
}

/* Case detail — structured 8-section layout (Markdown body via lf_md()) */
.case-section { margin: 0 0 var(--s-7); }
.case-section-eyebrow {
  display: inline-block;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-strong);
  margin-bottom: var(--s-2);
}
.case-section-title {
  font-family: var(--ff-ja);
  font-size: clamp(1.5rem, 2.6vw, var(--fs-32));
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--ls-tight);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.case-section-figure { margin: var(--s-4) 0 0; }
.case-section-figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.case-section-body { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--c-text); }
.case-section-body > * + * { margin-top: var(--s-3); }
.case-section-body h3 {
  font-family: var(--ff-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  margin-top: var(--s-5);
  color: var(--c-text-strong);
}
.case-section-body h4 {
  font-family: var(--ff-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  margin-top: var(--s-4);
  color: var(--c-text-strong);
}
.case-section-body p { margin: 0; }
.case-section-body ul, .case-section-body ol { padding-left: 2.2em; margin-left: 0.4em; }
.case-section-body li + li { margin-top: var(--s-1); }
.case-section-body strong { font-weight: var(--fw-semibold); }
.case-section-body a {
  color: var(--c-text-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.case-section-body blockquote {
  margin: 0;
  padding: 0 var(--s-4);
  border-left: 1px solid var(--c-border);
  color: var(--c-text-muted);
}
.case-section-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--c-bg-subtle);
  border-radius: 3px;
}
.case-section-body pre {
  background: var(--c-bg-subtle);
  padding: var(--s-3);
  border-radius: 4px;
  overflow-x: auto;
  font-size: var(--fs-14);
  line-height: 1.6;
}
.case-section-body pre code { padding: 0; background: transparent; }
.case-section-body img { max-width: 100%; height: auto; border-radius: 4px; }

/* 導入背景 — lead/intro treatment via typography only (no card, no accent) */
.case-section--intro_background .case-section-body {
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  color: var(--c-text-strong);
}

/* Interviewer / Interviewee — speaker bio block at top of case-body-main */
.case-pair { margin: 0 0 var(--s-7); }
.case-pair-people {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 600px) {
  .case-pair-people { grid-template-columns: 1fr; }
}
.case-person {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: var(--s-4);
}
.case-person-avatar {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-subtle);
  display: inline-block;
  flex-shrink: 0;
}
.case-person-avatar--placeholder { border: 1px dashed var(--c-border); }
.case-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.case-person-eyebrow {
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin: 0;
  line-height: 1.4;
}
.case-person-name {
  font-family: var(--ff-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--c-text-strong);
  line-height: 1.3;
  margin: 0;
}
.case-person-role {
  font-size: var(--fs-12);
  color: var(--c-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* =========================================================================
   Document (お役立ち資料) cards
   ========================================================================= */
.document-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.document-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-bg);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.document-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.07); transform: translateY(-2px); }
.document-card-thumb {
  background: var(--c-bg-subtle);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.document-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms var(--ease-out);
}
.document-card:hover .document-card-thumb img { transform: scale(1.04); }
.document-card-body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.document-card-title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--c-text-strong);
}
.document-card-meta {
  margin: 0;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-muted);
}
.document-card-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.document-card-tags li {
  font-family: var(--ff-en);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-bg-subtle);
  color: var(--c-text-strong);
}
.document-card-desc {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.document-card-more {
  margin-top: auto;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-strong);
}
@media (max-width: 900px) {
  .document-grid { grid-template-columns: 1fr; }
  .document-card { grid-template-columns: 160px 1fr; }
}
@media (max-width: 540px) {
  .document-card { grid-template-columns: 1fr; }
}

/* =========================================================================
   Seminar cards
   ========================================================================= */
.seminar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.seminar-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.seminar-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.07); }
.seminar-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--c-bg-subtle);
  overflow: hidden;
}
.seminar-card-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms var(--ease-out);
}
.seminar-card:hover .seminar-card-thumb img { transform: scale(1.04); }
.seminar-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  flex: 1;
}
.seminar-card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-strong);
}
.seminar-card-meta .cat {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--c-border);
}
.seminar-card-title {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--c-text-strong);
}
.seminar-card-desc {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seminar-card-more {
  margin-top: auto;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-strong);
}
@media (max-width: 900px) { .seminar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .seminar-grid { grid-template-columns: 1fr; } }

/* Seminar detail */
.seminar-article { padding-block: var(--s-7) var(--s-6); }
.seminar-article-header { margin-bottom: var(--s-5); }
.seminar-article-header .eyebrow { margin-bottom: var(--s-2); }
.seminar-article-title {
  font-family: var(--ff-ja);
  font-size: clamp(1.5rem, 3vw, var(--fs-32));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: var(--c-text-strong);
  margin: 0;
}
.seminar-article-cover { margin: var(--s-5) 0; }
.seminar-article-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.seminar-article-body { margin: 0 0 var(--s-6); }
.seminar-article-body h2 {
  font-family: var(--ff-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  margin: var(--s-5) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}
.seminar-bullets { padding-left: 1.25em; margin: 0 0 var(--s-4); }
.seminar-bullets li {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--c-text);
}
.seminar-footer-note {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}
.seminar-cta {
  margin-top: var(--s-5);
  padding: var(--s-5);
  background: var(--c-bg-subtle);
  border-radius: 10px;
  text-align: center;
}
.seminar-cta .btn { font-size: var(--fs-14); padding: 14px 28px; }
.seminar-cta-note {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

/* =========================================================================
   News detail (news article)
   ========================================================================= */
.news-article { padding-block: var(--s-7) var(--s-6); }
.news-article-header { margin-bottom: var(--s-5); }
.news-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--ff-en);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-3);
}
.news-article-meta .cat {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--c-border);
}
.news-article-title {
  font-family: var(--ff-ja);
  font-size: clamp(1.5rem, 3vw, var(--fs-32));
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: var(--c-text-strong);
  margin: 0;
}
.news-article-cover { margin: var(--s-5) 0; }
.news-article-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.news-article-body { margin: 0 0 var(--s-6); }
.news-article-body p {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--c-text);
  margin: 0 0 var(--s-3);
}
.news-article-body h2 {
  font-family: var(--ff-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  margin: var(--s-5) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}
.news-article-body ul { padding-left: 1.25em; margin: 0 0 var(--s-3); }
.news-article-body ul li { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--c-text); }
.news-article-body a { color: var(--c-text-strong); }
.news-article-tags {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.news-article-tags li {
  font-family: var(--ff-en);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-bg-subtle);
  color: var(--c-text-strong);
}
.news-article-back { margin-top: var(--s-5); font-size: var(--fs-14); }

/* Lead (subtitle) under the H1 */
.news-article-lead {
  font-family: var(--ff-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: var(--c-text);
  margin: var(--s-3) 0 0;
}

/* Rich body — additional block types used inside the_content() */
.news-article-body h3 {
  font-family: var(--ff-ja);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  margin: var(--s-4) 0 var(--s-2);
}
.news-article-body blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--c-bg-subtle);
  border-left: 3px solid var(--c-text-strong);
  border-radius: 0 8px 8px 0;
}
.news-article-body blockquote p {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  margin: 0 0 var(--s-2);
}
.news-article-body blockquote cite {
  font-style: normal;
  font-size: var(--fs-14);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
}
.news-article-body .callout-cards {
  list-style: none;
  margin: var(--s-4) 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 720px) {
  .news-article-body .callout-cards { grid-template-columns: repeat(3, 1fr); }
}
.news-article-body .callout-cards li {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: var(--s-4);
  background: #fff;
}
.news-article-body .callout-cards strong {
  display: block;
  font-family: var(--ff-ja);
  font-size: var(--fs-16);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-1);
}
.news-article-body .callout-cards p {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--c-text);
}
.news-article-body .key-figures {
  list-style: none;
  margin: var(--s-4) 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 720px) {
  .news-article-body .key-figures { grid-template-columns: repeat(3, 1fr); }
}
.news-article-body .key-figures li {
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--c-text-strong);
  background: var(--c-bg-subtle);
}
.news-article-body .key-figures .label {
  display: block;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}
.news-article-body .key-figures .value {
  display: block;
  font-family: var(--ff-en);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  line-height: 1.2;
}

/* Press contact + related news */
.news-press-contact {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--c-text-strong);
  background: #fff;
}
.news-press-contact__title {
  font-family: var(--ff-ja);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-2);
}
.news-press-contact p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--c-text); }

.news-related {
  margin: var(--s-7) 0 0;
  padding: var(--s-5) 0 0;
  border-top: 1px solid var(--c-border);
}
.news-related__title {
  font-family: var(--ff-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-4);
}
.news-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 720px) {
  .news-related__list { grid-template-columns: repeat(3, 1fr); }
}
.news-related__list a {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-text-strong);
  height: 100%;
}
.news-related__list a:hover .news-related__title-text { text-decoration: underline; }
.news-related__list a:hover .news-related__thumb img { transform: scale(1.03); }
.news-related__thumb {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-bg-subtle);
  aspect-ratio: 16 / 9;
}
.news-related__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
.news-related__thumb.is-default img {
  object-fit: contain;
  background: var(--c-neutral-900);
}
.news-related__body { display: flex; flex-direction: column; gap: var(--s-2); }
.news-related__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-strong);
  margin: 0;
}
.news-related__meta .cat {
  font-size: var(--fs-12);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--c-border);
}
.news-related__title-text {
  font-family: var(--ff-ja);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--c-text-strong);
  font-weight: var(--fw-medium);
  margin: 0;
}

/* Pagination */
.pagination { margin-top: var(--s-7); display: flex; justify-content: center; }
.pagination-list { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; }
.pagination button {
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-text-strong);
  cursor: pointer;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.pagination button:hover:not(.is-active):not(:disabled) { background: var(--c-bg-subtle); }
.pagination button.is-active {
  background: var(--c-text-strong);
  color: var(--c-text-invert);
  border-color: var(--c-text-strong);
}
.pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.news-list li { border-bottom: 1px solid var(--c-border); }
.news-list a {
  display: grid;
  grid-template-columns: 140px 160px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-3);
  margin: 0 calc(var(--s-3) * -1);  /* let hover bg extend slightly past row edges */
  color: var(--c-text-strong);
  text-decoration: none;
  background-image: none !important;  /* override global underline trick */
  background-size: 0 0 !important;
  transition: background-color 200ms var(--ease-out);
}
.news-list a:hover { background-color: var(--c-bg-subtle); }
.news-list time { font-family: var(--ff-en); color: var(--c-text-strong); font-size: var(--fs-14); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }
.news-list .cat  { font-family: var(--ff-en); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-xwide); text-transform: uppercase; color: var(--c-text-strong); padding: 2px 8px; border: 1px solid var(--c-border); justify-self: start; }
.news-list .news-list-title { font-weight: var(--fw-medium); }
@media (max-width: 768px) {
  .news-list a { grid-template-columns: auto auto; grid-template-rows: auto auto; }
  .news-list .news-list-title { grid-column: 1 / -1; }
}

/* =========================================================================
   Representative / Company info tables
   ========================================================================= */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { text-align: left; vertical-align: top; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); }
.info-table th { width: 200px; font-weight: var(--fw-medium); color: var(--c-text-muted); font-size: var(--fs-14); }
.info-table td { color: var(--c-text-strong); }
@media (max-width: 640px) {
  .info-table th, .info-table td { display: block; border-bottom: none; padding: var(--s-1) 0; }
  .info-table tr { display: block; border-bottom: 1px solid var(--c-border); padding: var(--s-2) 0; }
}

/* =========================================================================
   Values / Organization blocks
   ========================================================================= */
.values-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
.values-list li { border-bottom: 1px solid var(--c-border); padding-bottom: var(--s-2); text-align: center; }
.values-list .en  { font-family: var(--ff-en); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-xwide); color: var(--c-text-strong); }
.values-list .ja  { display: block; font-size: var(--fs-14); color: var(--c-text); margin-top: var(--s-1); }
@media (max-width: 900px) { .values-list { grid-template-columns: repeat(2, 1fr); } }

.org-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--c-border); border: 1px solid var(--c-border); }
.org-blocks > div { background: var(--c-bg); padding: var(--s-5); }
.org-blocks .en { font-family: var(--ff-en); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-xwide); color: var(--c-text-strong); margin-bottom: var(--s-2); }
.org-blocks .ja { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-text-strong); }
@media (max-width: 768px) { .org-blocks { grid-template-columns: 1fr; } }

/* =========================================================================
   Pain points / Menu lists (service detail)
   ========================================================================= */
.pain-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-border); }
.pain-list li { border-bottom: 1px solid var(--c-border); padding: var(--s-3) 0; display: flex; gap: var(--s-3); align-items: baseline; }
.pain-list li::before { content: "—"; color: var(--c-text-muted); font-family: var(--ff-en); }
.menu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
.menu-list li { border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
.menu-list h4 { margin: 0 0 var(--s-1); font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--c-text-strong); }
.menu-list p  { margin: 0; font-size: var(--fs-14); }
@media (max-width: 768px) { .menu-list { grid-template-columns: 1fr; } }

/* approach diagram (monotone line-art placeholder) */
.approach-figure {
  border: 1px solid var(--c-border);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  font-family: var(--ff-en);
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-14);
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); padding: var(--s-3) 0; }
.faq summary { cursor: pointer; font-weight: var(--fw-medium); color: var(--c-text-strong); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q."; font-family: var(--ff-en); color: var(--c-text-muted); margin-right: var(--s-2); }
.faq details[open] summary::before { content: "Q."; }
.faq details p { margin: var(--s-2) 0 0; }

/* =========================================================================
   Forms
   ========================================================================= */
/* Contact page — 2-column layout with info aside + form */
.contact-wrap {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: var(--s-7);
  align-items: start;
}
.contact-wrap--doc { grid-template-columns: 6fr 4fr; }
.contact-info { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.contact-info-title {
  font-family: var(--ff-ja);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.contact-info p { font-size: var(--fs-14); line-height: var(--lh-loose); margin: 0 0 var(--s-3); color: var(--c-text); }
.contact-info-meta { margin: var(--s-4) 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--s-3); row-gap: var(--s-2); font-size: var(--fs-12); }
.contact-info-meta dt { font-family: var(--ff-en); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-text-muted); }
.contact-info-meta dd { margin: 0; color: var(--c-text-strong); line-height: var(--lh-normal); }

.contact-body-lead { font-size: var(--fs-14); color: var(--c-text-muted); margin: 0 0 var(--s-5); line-height: var(--lh-normal); }

.contact-form { display: grid; gap: var(--s-4); color-scheme: light; accent-color: var(--c-text-strong); }
.contact-form .form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.contact-form .form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  position: relative;
  padding-bottom: 1.4em;          /* reserve fixed space for error message */
}
.contact-form .form-field .form-error {
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--c-accent);
}
.contact-form label {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-text-strong);
}
.contact-form .required { color: var(--c-accent); margin-left: 4px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--ff-ja);
  font-size: var(--fs-14);
  background: var(--c-neutral-0);
  color: var(--c-text-strong);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  appearance: none;
}
.contact-form select { background-image: linear-gradient(45deg, transparent 50%, var(--c-text-strong) 50%), linear-gradient(135deg, var(--c-text-strong) 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 2px solid var(--c-text-strong); outline-offset: 2px; border-color: var(--c-text-strong); }
.contact-form .form-consent { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-14); margin-top: var(--s-2); }
.contact-form .form-consent input[type="checkbox"] {
  width: auto;
  margin-top: 4px;
  appearance: auto;            /* restore native checkmark */
  -webkit-appearance: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.contact-form .form-consent label { font-weight: var(--fw-regular); }
.contact-form .form-submit { margin-top: var(--s-3); }
.contact-form .form-submit .btn { padding: 14px 32px; font-size: var(--fs-14); }
.contact-form .form-submit .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

@media (max-width: 900px) {
  .contact-wrap,
  .contact-wrap--doc { grid-template-columns: 1fr; gap: var(--s-5); }
  .contact-info { position: static; }
}
@media (max-width: 540px) {
  .contact-form .form-row--two { grid-template-columns: 1fr; }
}

.form { display: grid; gap: var(--s-4); max-width: 640px; }
.form label { display: block; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--c-text-strong); margin-bottom: var(--s-1); }
.form input, .form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--ff-ja);
  font-size: var(--fs-16);
  border: 1px solid var(--c-border-strong);
  background: var(--c-bg);
  color: var(--c-text-strong);
  border-radius: 0;
}
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--c-text-strong); outline-offset: 2px; }
.form .consent { font-size: var(--fs-14); display: flex; gap: var(--s-2); align-items: flex-start; }

/* =========================================================================
   Final CTA
   ========================================================================= */
.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-invert);   /* flat navy — joins seamlessly with footer */
  color: var(--c-text-invert);
  padding: var(--s-9) var(--s-4);
  text-align: center;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 { color: var(--c-text-invert); font-size: clamp(1.75rem, 4.5vw, var(--fs-56)); margin: 0 0 var(--s-4); font-weight: var(--fw-extrabold); line-height: 1.15; letter-spacing: var(--ls-tight); }
.final-cta p { color: var(--c-neutral-300); margin: 0 0 var(--s-5); }
.final-cta .btn { border-color: var(--c-text-invert); color: var(--c-text-invert); background: transparent; }
.final-cta .btn:hover { background: var(--c-text-invert); color: var(--c-text-strong); }

/* =========================================================================
   Footer
   ========================================================================= */
.global-footer {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-invert);   /* flat navy — continuous with .final-cta above */
  color: var(--c-neutral-300);
  padding: var(--s-8) 0 var(--s-6);
}
.global-footer .container { position: relative; z-index: 1; }
.global-footer a { color: var(--c-neutral-300); }
.global-footer a:hover { color: var(--c-text-invert); opacity: 1; }
.gf-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-7); }
@media (min-width: 901px) {
  .gf-top { margin-bottom: calc(var(--s-7) / 2); }
}
.gf-brand strong { display: block; color: var(--c-text-invert); font-family: var(--ff-en); font-size: var(--fs-18); letter-spacing: var(--ls-wide); margin-bottom: var(--s-2); }
.gf-brand-logo { display: block; width: 160px; height: auto; margin-bottom: var(--s-3); filter: brightness(0) invert(1); }
.gf-brand span { font-size: var(--fs-14); display: block; margin-bottom: var(--s-3); }
.gf-address { font-style: normal; font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--c-neutral-300); }
.gf-partner { margin-top: var(--s-3); max-width: 200px; }
.gf-partner img { width: 100%; height: auto; display: block; border-radius: 4px; opacity: 0.95; }
.gf-certifications { max-width: 134px; background: #fff; padding: 10px 12px; border-radius: 4px; flex-shrink: 0; }
.gf-cert { display: flex; align-items: flex-end; gap: var(--s-4); }
.gf-cert-text { margin: 0; font-size: 11px; line-height: 1.58; color: rgba(255,255,255,0.6); max-width: 340px; text-align: right; letter-spacing: 0.02em; word-break: keep-all; overflow-wrap: normal; line-break: strict; }
.gf-cert-text strong { color: var(--c-text-invert); font-weight: var(--fw-medium); }
@media (max-width: 900px) {
  .gf-cert { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .gf-cert-text { text-align: left; max-width: none; }
}
.gf-partners--desktop { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-4); }
.gf-partners--mobile { display: none; }
@media (max-width: 900px) {
  .gf-partners--desktop { display: none; }
  .gf-partners--mobile { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
}
.gf-certifications img { width: 100%; height: auto; display: block; }
.gf-col h4 { font-family: var(--ff-en); font-size: var(--fs-12); letter-spacing: var(--ls-xwide); text-transform: uppercase; color: var(--c-text-invert); margin: 0 0 var(--s-3); font-weight: var(--fw-medium); }
.gf-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.gf-col li a { font-size: var(--fs-14); }
.gf-bottom { border-top: 1px solid var(--c-neutral-700); padding-top: var(--s-4); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-12); letter-spacing: var(--ls-wide); }
.gf-legal { display: flex; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 900px) { .gf-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gf-top { grid-template-columns: 1fr; } }

/* =========================================================================
   Logo & mobile hamburger
   ========================================================================= */
.gh-brand { display: inline-flex; align-items: center; gap: var(--s-2); }
.gh-brand img { height: 28px; width: auto; display: block; }
.gh-brand .gh-brand-text { display: none; }
/* Crossfading logo: white silhouette ⇄ original, controlled by --header-intro on cosmos-hero pages. */
.gh-brand-logo { position: relative; display: inline-block; height: 28px; aspect-ratio: 160 / 28; }
.gh-brand-logo .gh-brand-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gh-brand-logo .gh-brand-img--white   { filter: brightness(0) invert(1); opacity: calc(1 - var(--header-intro, 1)); }
.gh-brand-logo .gh-brand-img--default { opacity: var(--header-intro, 1); }

.gh-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  padding: 0;
  cursor: pointer;
}
.gh-nav-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--c-text-strong);
  margin: 5px auto;
  transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-normal) var(--ease-out);
}
.gh-nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gh-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.gh-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .gh-nav-toggle { display: block; }
  .gh-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--c-bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
    visibility: hidden;
    pointer-events: none;
    z-index: 9;
  }
  .gh-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear 0s;
  }
  .gh-nav a { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-14); letter-spacing: var(--ls-wide); }
  .gh-cta { order: 99; margin-top: var(--s-3); }
}

/* =========================================================================
   Hero with visual (top page)
   ========================================================================= */
.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-7);
  align-items: center;
}
.hero-split .hero-visual {
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-split .hero-visual img,
.hero-split .hero-visual svg {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero-visual { aspect-ratio: 16 / 10; }
}

/* =========================================================================
   Method icon row (top page methodology)
   ========================================================================= */
.method-icon {
  width: 72px; height: 72px;
  border: 1px solid var(--c-text-strong);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-3);
  background: var(--c-bg);
}
.method-icon svg { width: 40px; height: 40px; display: block; }

/* =========================================================================
   Representative with portrait
   ========================================================================= */
.rep-split {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-6);
  align-items: start;
}
.rep-split .rep-portrait {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--c-border);
  overflow: hidden;
  background: var(--c-bg);
}
.rep-split .rep-portrait img,
.rep-split .rep-portrait svg {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) {
  .rep-split { grid-template-columns: 1fr; }
  .rep-split .rep-portrait { max-width: 220px; }
}

/* =========================================================================
   Partner badge image
   ========================================================================= */
.partner-badge-img {
  display: inline-flex; align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-border);
  background: var(--c-bg);
}
.partner-badge-img img { height: 40px; width: auto; display: block; }

/* =========================================================================
   SDG icon row
   ========================================================================= */
.sdg-icons { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.sdg-icons img { width: 56px; height: 56px; display: block; }

/* =========================================================================
   Reveal (opacity only) — Honest Pace compliant
   ========================================================================= */
/* Manual reveal — anywhere with [data-reveal] (Home page uses these). */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1800ms var(--ease-out), transform 1800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 200ms);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Auto reveal — non-Home pages: every <main> <section> + its container's direct
   children are hidden from parse time (no FOUC, no JS attribute juggling).
   JS observes the sections and toggles .is-visible on intersection. */
html.js-reveal body:not(.has-cosmos-hero) main > section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1800ms var(--ease-out), transform 1800ms var(--ease-out);
}
html.js-reveal body:not(.has-cosmos-hero) main > section > .container > *,
html.js-reveal body:not(.has-cosmos-hero) main > section > .container-text > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1400ms var(--ease-out), transform 1400ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 180ms);
}
html.js-reveal body:not(.has-cosmos-hero) main > section.is-visible,
html.js-reveal body:not(.has-cosmos-hero) main > section.is-visible > .container > *,
html.js-reveal body:not(.has-cosmos-hero) main > section.is-visible > .container-text > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal],
  html.js-reveal body:not(.has-cosmos-hero) main > section,
  html.js-reveal body:not(.has-cosmos-hero) main > section > .container > *,
  html.js-reveal body:not(.has-cosmos-hero) main > section > .container-text > * {
    opacity: 1; transform: none; transition: none;
  }
}

/* =========================================================================
   Form error messages
   ========================================================================= */
.form-error {
  color: var(--c-accent);
  font-size: var(--fs-14);
  margin: var(--s-1) 0 0;
}

/* =========================================================================
   Page hero (subpages)
   ========================================================================= */
.page-hero { padding-block: var(--s-8) var(--s-6); border-bottom: 1px solid var(--c-border); }
.page-hero .eyebrow { margin-bottom: var(--s-3); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, var(--fs-56)); margin: 0 0 var(--s-3); font-weight: var(--fw-extrabold); }
.page-hero .lead-ja { max-width: none; margin: 0; }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-border); }
.timeline li { border-bottom: 1px solid var(--c-border); padding: var(--s-3) 0; display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); align-items: baseline; }
.timeline .year { font-family: var(--ff-en); color: var(--c-text-muted); }

/* sustainability purpose */
.purpose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.purpose-grid article { border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
.purpose-grid .num { font-family: var(--ff-en); color: var(--c-text-strong); font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--ls-xwide); }
.purpose-grid h3 { font-size: var(--fs-20); margin: var(--s-2) 0; color: var(--c-text-strong); font-weight: var(--fw-bold); }
.purpose-grid .sdg { display: inline-block; margin-top: var(--s-2); font-size: var(--fs-12); letter-spacing: var(--ls-wide); color: var(--c-text-muted); }
@media (max-width: 768px) { .purpose-grid { grid-template-columns: 1fr; } }

/* filters */
.filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.filter button, .filter a { border: 1px solid var(--c-border-strong); background: var(--c-bg); padding: 8px 14px; font-family: var(--ff-ja); font-size: var(--fs-12); color: var(--c-text-strong); cursor: pointer; }
.filter .is-active { background: var(--c-text-strong); color: var(--c-text-invert); border-color: var(--c-text-strong); }

/* partner badge placeholder */
.partner-badge { border: 1px solid var(--c-border); padding: var(--s-3) var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--ff-en); font-size: var(--fs-12); letter-spacing: var(--ls-wide); color: var(--c-text-strong); }

/* legal doc typography */
.legal-doc h2 { margin-top: var(--s-7); font-size: var(--fs-24); border-top: 1px solid var(--c-border); padding-top: var(--s-5); }
.legal-doc h3 { margin-top: var(--s-5); font-size: var(--fs-18); }
.legal-doc ul { padding-left: 1.5em; }
.legal-doc li { margin-bottom: var(--s-1); }

/* =========================================================================
   Bitkey-correct utilities — Fullbleed Hero, Splits, Edge Label, Deep Black
   ========================================================================= */

/* Deep Black backdrop (Footer / Final CTA / occasional band) */
.deep-black { background: var(--c-bg-invert); color: var(--c-text-invert); }
.deep-black .heading-ja, .deep-black .display-ja, .deep-black .subheading-ja, .deep-black p, .deep-black a { color: var(--c-text-invert); }
.deep-black .eyebrow, .deep-black .eyebrow-edge { color: var(--c-text-invert); }
.deep-black .caption, .deep-black .eyebrow--muted { color: var(--c-neutral-300); }

/* Fullbleed Hero — dark photo + scrim + restrained text overlay */
.section-fullbleed {
  position: relative;
  padding-block: var(--s-9);
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent;
  color: var(--c-text-invert);
}
/* Cosmos variant: no photo, deep-navy night-sky backdrop with starfield canvas */
.section-fullbleed--cosmos {
  background:
    radial-gradient(ellipse at 50% 30%, #0e1a3a 0%, #070f24 45%, #03060f 85%, #010205 100%);
  min-height: 95vh;
  padding-block: var(--s-10);
}
/* Home page: cosmos hero extends behind sticky header (negative margin needs flow-root on main, set above)
   AND fills the visible viewport so neither header nor scroll-cue gets clipped. */
body.has-cosmos-hero main > .section-fullbleed--cosmos:first-of-type {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--s-10));
  min-height: calc(100vh + var(--header-h));    /* fallback */
  min-height: calc(100svh + var(--header-h));   /* always-visible viewport */
}
.section-fullbleed--cosmos > .fullbleed-scrim {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.30) 0%, transparent 65%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.30) 100%);
}

/* Scroll-down cue — fixed to viewport bottom so it never gets pushed below the fold
   by tall hero content. Fades out as the header opaques (--header-intro). */
.hero-scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  font-family: var(--ff-en);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.32em;
  z-index: 5;
  opacity: calc(1 - var(--header-intro, 1));         /* visible at top, fades out on scroll */
  pointer-events: auto;
  transition: color 200ms ease, transform 200ms ease;
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
  color: #fff;
  transform: translate(-50%, 4px);
}
.hero-scroll-cue:focus-visible { outline: 1px solid rgba(255,255,255,0.6); outline-offset: 8px; }
.hero-scroll-cue__line {
  display: block;
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,0.22);
  position: relative;
  overflow: hidden;
}
.hero-scroll-cue__line::after {
  content: "";
  position: absolute;
  top: -55%;
  left: 0;
  width: 1px;
  height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%);
  animation: heroScrollCueDrip 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes heroScrollCueDrip {
  0%   { top: -55%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue__line::after { animation: none; top: 0; opacity: 0.7; }
  .hero-scroll-cue:hover { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .hero-scroll-cue { bottom: 20px; gap: 8px; font-size: 9px; }
  .hero-scroll-cue__line { height: 40px; }
}

/* =========================================================================
   Back-to-top button — fixed, appears after FV, soft-scrolls to top
   ========================================================================= */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 8px 12px;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 400ms var(--ease-out),
    transform 400ms var(--ease-out),
    visibility 0s linear 400ms;
}
.back-to-top.is-visible {
  opacity: 0.65;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 400ms var(--ease-out),
    transform 400ms var(--ease-out),
    visibility 0s linear 0s;
}
.back-to-top.is-near-final {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) !important;
  transition:
    opacity 300ms var(--ease-out),
    transform 300ms var(--ease-out),
    visibility 0s linear 300ms !important;
}
.back-to-top:hover { opacity: 1; transform: translateY(-6px); }
.back-to-top:focus-visible { outline: 2px solid var(--c-text-strong); outline-offset: 3px; }
.back-to-top__rocket {
  display: block;
  width: 11px;
  height: auto;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.30))
    drop-shadow(0 10px 24px rgba(0, 0, 0, 0.20));
}
.back-to-top__flame {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 7px;
  height: 24px;
  transform: translate(-50%, 4px) scaleY(0);
  transform-origin: top center;
  background: radial-gradient(ellipse at top, rgba(255, 240, 170, 1) 0%, rgba(255, 140, 30, 1) 35%, rgba(220, 70, 10, 0.95) 65%, rgba(160, 30, 0, 0.6) 88%, transparent 100%);
  filter: blur(1.5px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.back-to-top:hover .back-to-top__flame {
  opacity: 1;
  transform: translate(-50%, 0) scaleY(1);
}
.back-to-top__smoke {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2400px;
  height: var(--btt-smoke-floor, 0px);
  max-height: 360px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}
.back-to-top__smoke i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 1), rgba(252, 252, 253, 0.96) 50%, rgba(240, 240, 244, 0.7) 80%, rgba(225, 225, 230, 0) 100%);
  filter: blur(3px) drop-shadow(2px 4px 3px rgba(140, 140, 150, 0.28)) drop-shadow(-2px 2px 4px rgba(150, 150, 160, 0.18));
  opacity: 0;
  transform-origin: 50% 0;
}

/* Each particle: fall to floor, then slide horizontally along it.
   --tx is final horizontal displacement, --ts is final scale. */
.back-to-top:hover .back-to-top__smoke i {
  animation: btt-smoke 20s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Tight stagger so emission feels continuous, not puffed.
   Button is at viewport right edge — all --tx are negative so smoke flows
   into the visible page area (right side would be off-screen). */
.back-to-top:hover .back-to-top__smoke i:nth-child(1)  { animation-delay: 0.00s; --tx: -870px;  --ts: 4.2; }
.back-to-top:hover .back-to-top__smoke i:nth-child(2)  { animation-delay: 0.13s; --tx: -825px;  --ts: 3.9; }
.back-to-top:hover .back-to-top__smoke i:nth-child(3)  { animation-delay: 0.27s; --tx: -675px;  --ts: 4.5; }
.back-to-top:hover .back-to-top__smoke i:nth-child(4)  { animation-delay: 0.40s; --tx: -630px;  --ts: 3.6; }
.back-to-top:hover .back-to-top__smoke i:nth-child(5)  { animation-delay: 0.53s; --tx: -480px;  --ts: 4.7; }
.back-to-top:hover .back-to-top__smoke i:nth-child(6)  { animation-delay: 0.67s; --tx: -450px;  --ts: 4.0; }
.back-to-top:hover .back-to-top__smoke i:nth-child(7)  { animation-delay: 0.80s; --tx: -1005px; --ts: 3.8; }
.back-to-top:hover .back-to-top__smoke i:nth-child(8)  { animation-delay: 0.93s; --tx: -960px;  --ts: 4.3; }
.back-to-top:hover .back-to-top__smoke i:nth-child(9)  { animation-delay: 1.07s; --tx: -330px;  --ts: 4.6; }
.back-to-top:hover .back-to-top__smoke i:nth-child(10) { animation-delay: 1.20s; --tx: -285px;  --ts: 3.5; }
.back-to-top:hover .back-to-top__smoke i:nth-child(11) { animation-delay: 1.33s; --tx: -765px;  --ts: 4.2; }
.back-to-top:hover .back-to-top__smoke i:nth-child(12) { animation-delay: 1.47s; --tx: -735px;  --ts: 3.9; }
.back-to-top:hover .back-to-top__smoke i:nth-child(13) { animation-delay: 1.60s; --tx: -585px;  --ts: 4.5; }
.back-to-top:hover .back-to-top__smoke i:nth-child(14) { animation-delay: 1.73s; --tx: -555px;  --ts: 3.6; }
.back-to-top:hover .back-to-top__smoke i:nth-child(15) { animation-delay: 1.87s; --tx: -240px;  --ts: 4.9; }
.back-to-top:hover .back-to-top__smoke i:nth-child(16) { animation-delay: 2.00s; --tx: -225px;  --ts: 3.8; }
.back-to-top:hover .back-to-top__smoke i:nth-child(17) { animation-delay: 2.13s; --tx: -930px;  --ts: 4.0; }
.back-to-top:hover .back-to-top__smoke i:nth-child(18) { animation-delay: 2.27s; --tx: -885px;  --ts: 4.3; }
.back-to-top:hover .back-to-top__smoke i:nth-child(19) { animation-delay: 2.40s; --tx: -405px;  --ts: 4.6; }
.back-to-top:hover .back-to-top__smoke i:nth-child(20) { animation-delay: 2.53s; --tx: -390px;  --ts: 3.9; }
/* +20 X-heavy particles to double the horizontal density */
.back-to-top:hover .back-to-top__smoke i:nth-child(21) { animation-delay: 0.07s; --tx: -940px;  --ts: 4.3; }
.back-to-top:hover .back-to-top__smoke i:nth-child(22) { animation-delay: 0.20s; --tx: -890px;  --ts: 4.0; }
.back-to-top:hover .back-to-top__smoke i:nth-child(23) { animation-delay: 0.33s; --tx: -720px;  --ts: 4.6; }
.back-to-top:hover .back-to-top__smoke i:nth-child(24) { animation-delay: 0.47s; --tx: -680px;  --ts: 3.7; }
.back-to-top:hover .back-to-top__smoke i:nth-child(25) { animation-delay: 0.60s; --tx: -540px;  --ts: 4.8; }
.back-to-top:hover .back-to-top__smoke i:nth-child(26) { animation-delay: 0.73s; --tx: -510px;  --ts: 4.1; }
.back-to-top:hover .back-to-top__smoke i:nth-child(27) { animation-delay: 0.87s; --tx: -1080px; --ts: 3.9; }
.back-to-top:hover .back-to-top__smoke i:nth-child(28) { animation-delay: 1.00s; --tx: -1030px; --ts: 4.4; }
.back-to-top:hover .back-to-top__smoke i:nth-child(29) { animation-delay: 1.13s; --tx: -380px;  --ts: 4.7; }
.back-to-top:hover .back-to-top__smoke i:nth-child(30) { animation-delay: 1.27s; --tx: -360px;  --ts: 3.6; }
.back-to-top:hover .back-to-top__smoke i:nth-child(31) { animation-delay: 1.40s; --tx: -820px;  --ts: 4.3; }
.back-to-top:hover .back-to-top__smoke i:nth-child(32) { animation-delay: 1.53s; --tx: -790px;  --ts: 4.0; }
.back-to-top:hover .back-to-top__smoke i:nth-child(33) { animation-delay: 1.67s; --tx: -640px;  --ts: 4.6; }
.back-to-top:hover .back-to-top__smoke i:nth-child(34) { animation-delay: 1.80s; --tx: -610px;  --ts: 3.7; }
.back-to-top:hover .back-to-top__smoke i:nth-child(35) { animation-delay: 1.93s; --tx: -290px;  --ts: 5.0; }
.back-to-top:hover .back-to-top__smoke i:nth-child(36) { animation-delay: 2.07s; --tx: -275px;  --ts: 3.9; }
.back-to-top:hover .back-to-top__smoke i:nth-child(37) { animation-delay: 2.20s; --tx: -1000px; --ts: 4.1; }
.back-to-top:hover .back-to-top__smoke i:nth-child(38) { animation-delay: 2.33s; --tx: -950px;  --ts: 4.4; }
.back-to-top:hover .back-to-top__smoke i:nth-child(39) { animation-delay: 2.47s; --tx: -460px;  --ts: 4.7; }
.back-to-top:hover .back-to-top__smoke i:nth-child(40) { animation-delay: 2.60s; --tx: -440px;  --ts: 4.0; }

@keyframes btt-smoke {
  /* Compressed emission (0–12%) + long lingering ground roll (12–100%). */
  /* 0–4%: tall narrow column dropping from the nozzle */
  0%   { opacity: 0;    transform: translate(0, 8px)  scale(0.35, 1.4); }
  2%   { opacity: 0.95; transform: translate(0, 22px) scale(0.5,  1.7); }
  4%   { opacity: 0.95; transform: translate(0, calc(var(--btt-smoke-floor, 100px) * 0.18 + 18px)) scale(0.7, 1.5); }
  /* 4–12%: column diverges outward and rounds into a billowing plume */
  8%   { opacity: 0.95; transform: translate(calc(var(--tx, 80px) * 0.35), calc(var(--btt-smoke-floor, 100px) * 0.45)) scale(calc(var(--ts, 2.6) * 0.55)); }
  12%  { opacity: 0.95; transform: translate(calc(var(--tx, 80px) * 0.6), calc(var(--btt-smoke-floor, 100px) - 24px)) scale(calc(var(--ts, 2.6) * 0.8)); }
  /* 12–100%: long lingering ground roll — slow outward drift + grow + fade */
  100% { opacity: 0;    transform: translate(var(--tx, 80px), calc(var(--btt-smoke-floor, 100px) - 24px)) scale(var(--ts, 2.6)); }
}
@media (max-width: 640px) {
  .back-to-top { right: 12px; bottom: 12px; padding: 6px 10px; }
  .back-to-top__rocket { width: 12px; }
  .back-to-top__smoke { width: 160px; max-height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0s, visibility 0s; }
  .back-to-top:hover { transform: none; }
  .back-to-top__flame,
  .back-to-top__smoke { display: none; }
}

/* =========================================================================
   Hero (Cosmos) — graphical headline composition
   ========================================================================= */
.hero-cosmos {
  display: block;
  max-width: 1080px;
}
.hero-cosmos .hero-tag {
  margin: 0;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-text-invert);
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.55);
  align-self: flex-start;
  width: max-content;
  padding-inline: var(--s-3);
}
.hero-cosmos .hero-tag-bracket {
  font-family: var(--ff-ja);
  font-weight: var(--fw-regular);
  font-size: 1.4em;
  line-height: 1;
  opacity: 0.8;
}
.hero-cosmos .hero-tag-word {
  font-family: var(--ff-ja);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
}

.hero-cosmos .hero-headline {
  font-family: var(--ff-ja);
  color: var(--c-text-invert);
  margin: 0;
  display: block;
  letter-spacing: var(--ls-tight);
}
.hero-cosmos .hero-headline .hl-row {
  display: block;
  line-height: 1.25;
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.85);
  margin-top: var(--s-3);
}
.hero-cosmos .hero-headline .hl-row:first-child { margin-top: 0; }
.hero-cosmos .hero-headline strong {
  font-weight: inherit;
  color: inherit;
  font-style: normal;
  position: relative;
}
/* Pale gold twinkle — soft luxe shimmer near "安心" timed with the header reveal */
.hero-twinkle {
  position: absolute;
  top: calc(-0.15em + 5px);
  right: calc(-2.4em + 20px);
  width: 0.8em;
  height: 0.8em;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: heroTwinkleFlash 1400ms cubic-bezier(0.22, 1, 0.36, 1) 800ms 1 both;
  filter: drop-shadow(0 0 8px rgba(255, 245, 220, 0.32));
  will-change: opacity, transform;
}
.hero-twinkle svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes heroTwinkleFlash {
  0%   { opacity: 0; transform: scale(0.5) rotate(-50deg); }
  50%  { opacity: 1; transform: scale(1.08) rotate(15deg); }
  100% { opacity: 0; transform: scale(0.95) rotate(60deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-twinkle { animation: none; opacity: 0; }
}

.hero-line-anim {
  opacity: 0;
  transform: translateY(16px);
}
.hero-cosmos.is-animated .hero-line-anim {
  animation: hero-line-fade-up 500ms ease-out both;
  animation-delay: calc(var(--i) * 200ms);
}
@keyframes hero-line-fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-line-anim { opacity: 1; transform: none; filter: none; animation: none; }
}

.hero-cosmos .hero-lead {
  margin: var(--s-3) 0 var(--s-2);
  max-width: 560px;
  color: rgba(255,255,255,0.85);
}

.hero-cosmos .hero-subtitle {
  margin: var(--s-5) 0 0;
  max-width: 640px;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: rgba(255,255,255,0.78);
  font-weight: var(--fw-medium);
}

.hero-cosmos .hero-partner {
  margin-top: var(--s-5);
  max-width: 168px;
}
.hero-cosmos .hero-partner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  opacity: 0.95;
}

@media (max-width: 768px) {
  .hero-cosmos .hero-headline .hl-row { font-size: clamp(1.2rem, 5vw, 2rem); }
}
.section-fullbleed > .fullbleed-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.section-fullbleed > .fullbleed-bg img,
.section-fullbleed > .fullbleed-bg svg {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.section-fullbleed > .fullbleed-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--c-bg-scrim);
  pointer-events: none;
}
.section-fullbleed > .container {
  position: relative;
  z-index: 2;
}
.section-fullbleed .eyebrow,
.section-fullbleed .eyebrow-edge,
.section-fullbleed .display-ja,
.section-fullbleed .heading-ja,
.section-fullbleed .lead-ja,
.section-fullbleed p,
.section-fullbleed a { color: var(--c-text-invert); }
.section-fullbleed .btn {
  border-color: var(--c-text-invert);
  color: var(--c-text-invert);
  background: transparent;
}
.section-fullbleed .btn-primary {
  background: var(--c-text-invert);
  color: var(--c-cosmos);
}
.section-fullbleed .btn:hover { opacity: 0.85; }
@media (max-width: 768px) {
  .section-fullbleed { min-height: 60vh; padding-block: var(--s-8); }
}

/* Edge Label — small en label at the left edge of a contained section */
.eyebrow-edge {
  display: block;
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-strong);
  margin-bottom: var(--s-5);
}
/* Edge-Label Section — section with a label fixed to the left margin */
.section-edge {
  position: relative;
  padding-block: var(--s-7);
  border-top: 1px solid var(--c-border);
}
@media (max-width: 768px) {
  .section-edge { padding-block: var(--s-6); }
}
.section-edge > .container {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-6);
  align-items: start;
}
.section-edge .edge-label {
  font-family: var(--ff-en);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-strong);
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
}
.section-edge .edge-content { min-width: 0; }
.section-edge .edge-content > :first-child { margin-top: 0; }
@media (max-width: 900px) {
  .section-edge > .container { grid-template-columns: 1fr; gap: var(--s-3); }
  .section-edge .edge-label { position: static; }
}

/* Asymmetric / Reverse Split — text contained, image bleeds to viewport edge */
.split-asym,
.split-reverse {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--s-7);
  align-items: center;
}
.split-reverse.split-reverse--portrait { grid-template-columns: 2fr 3fr; align-items: stretch; }
.split-reverse--portrait > .split-image {
  background: transparent;
  min-height: 0;
}
.split-asym  > .split-text  { order: 1; }
.split-asym  > .split-image { order: 2; }
.split-reverse > .split-text  { order: 2; }
.split-reverse > .split-image { order: 1; }

.split-text { max-width: var(--max-content); padding-block: var(--s-6); }
.split-image {
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: var(--c-bg-subtle);
}
.split-image img,
.split-image svg {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.image-rotator {
  position: relative;
  width: 100%; height: 100%;
}
.image-rotator--portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 80vh;
  height: auto;
}
.image-rotator--portrait img { object-position: center; }
.image-rotator img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.image-rotator img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .image-rotator img { transition: none; }
}
.split-asym  > .split-image { margin-right: calc(50% - 50vw); }
.split-reverse > .split-image { margin-left: calc(50% - 50vw); }

@media (max-width: 1232px) {
  .split-asym  > .split-image { margin-right: calc(var(--s-4) * -1); }
  .split-reverse > .split-image { margin-left: calc(var(--s-4) * -1); }
}
@media (max-width: 900px) {
  .split-asym, .split-reverse { grid-template-columns: 1fr; gap: var(--s-5); }
  .split-asym  > .split-image,
  .split-reverse > .split-image {
    margin-inline: calc(var(--s-4) * -1);
    min-height: 320px;
    order: -1;
  }
  .split-asym  > .split-text,
  .split-reverse > .split-text { padding-block: var(--s-4); order: 1; }
}

/* Half-Bleed Band — 50/50 image + text panel (text panel is light by default) */
.half-bleed-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 64vh;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.half-bleed-band > .hbb-image {
  position: relative;
  overflow: hidden;
  background: var(--c-bg-subtle);
}
.half-bleed-band > .hbb-image img,
.half-bleed-band > .hbb-image svg {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.half-bleed-band > .hbb-text {
  display: flex; align-items: center;
  padding: var(--s-8) var(--s-7);
  max-width: calc(var(--max-wide) / 2 + var(--s-7));
}
@media (max-width: 900px) {
  .half-bleed-band { grid-template-columns: 1fr; min-height: 0; }
  .half-bleed-band > .hbb-text { padding: var(--s-6) var(--s-4); max-width: none; }
  .half-bleed-band > .hbb-image { min-height: 44vh; }
}

/* Pillar/heading-ja size cap when used inside .section-edge content */
.section-edge .heading-ja { font-size: clamp(1.5rem, 2.6vw, var(--fs-32)); }
.section-edge .lead-ja    { font-size: var(--fs-18); }