/* =========================================================
   株式会社動脈 — リブランディング デモ
   色・文字・余白はトークンを使う（値を直接書かない）
   ========================================================= */
:root {
  /* color */
  --red: #ed0c5f;          /* 動脈レッド（ロゴの赤） */
  --red-d: #c8094f;        /* 白地の小さい文字用 */
  --red-tint: #fdeaf1;
  --cyan: #3bbddb;         /* 静脈シアン（ロゴの青）：帯・図だけ */
  --ink: #0e1b33;          /* 濃紺（文字・面） */
  --ink-d: #08111f;        /* いちばん深い面（MV・フッター） */
  --ink-m: #16264a;        /* 濃紺の上の一段明るい面 */
  --ink-2: #39435a;        /* 本文 */
  --ink-3: #6b7488;        /* 補足 */
  --on-dark: #e9edf5;      /* 濃い面の上の本文 */
  --on-dark-2: #b7c0d3;
  --bg: #ffffff;
  --bg-soft: #f2f3f6;
  --line: #e3e6ec;
  --line-strong: #c9cfda;
  --line-dark: #2a3958;

  /* type */
  --ff: "Noto Sans JP", system-ui, sans-serif;
  --ff-en: "Inter Tight", "Noto Sans JP", sans-serif;
  --fs-display: clamp(44px, 6.4vw, 104px);
  --fs-h2: clamp(28px, 3.3vw, 48px);
  --fs-h3: clamp(22px, 2.3vw, 34px);
  --fs-h4: clamp(19px, 1.6vw, 23px);
  --fs-lead: clamp(16px, 1.25vw, 18px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  /* space */
  --gut: clamp(24px, 4vw, 56px);
  --wrap: 1280px;
  --sec: clamp(88px, 10vw, 160px);
  --r-lg: clamp(20px, 2.4vw, 36px);
  --r-md: 20px;
  --r-sm: 12px;
  --hd-h: 72px;
  --bar-h: 0px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-variant-numeric: lining-nums; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font-family: var(--ff); font-size: var(--fs-body); font-weight: 500; line-height: 2; letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
}
body.is-menu { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.wide { width: 100%; padding-inline: clamp(12px, 1.6vw, 24px); }
.nw { white-space: nowrap; }
.sp-only { display: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prose > p + p { margin-top: 1lh; }
.phr main, .phr footer { word-break: keep-all; overflow-wrap: anywhere; }
.txt-flow { word-break: normal; line-break: strict; text-wrap: pretty; }
.ln { display: block; }
:where(.ttl__jp, .stmt, .pghero__ttl, .msg__quote, .tagl__copy, .split__ttl) > .ln { white-space: nowrap; }
.ln-wrap > .ln { white-space: normal; }
.note { font-size: var(--fs-caption); color: var(--ink-3); letter-spacing: .04em; line-height: 1.8; }
.tmp { color: var(--red-d); font-weight: 700; }

/* ---------- buttons ---------- */
.pill {
  --pill-bg: var(--ink); --pill-fg: #fff; --pill-arrow: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: 18px; position: relative;
  min-height: 60px; padding: 8px 10px 8px 34px; border-radius: 999px;
  background: var(--pill-bg); color: var(--pill-fg); font-weight: 700; font-size: 15px; letter-spacing: .08em; line-height: 1.4;
  transition: background-color .25s;
}
.pill__arrow {
  flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--pill-arrow, var(--red)); position: relative; transition: transform .3s;
}
.pill__arrow::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pill:hover { --pill-bg: var(--ink-m); }
.pill:hover .pill__arrow { transform: translateX(3px); }
.pill--light { --pill-bg: #fff; --pill-fg: var(--ink); }
.pill--light:hover { --pill-bg: var(--red-tint); }
.pill--red { --pill-bg: var(--red); --pill-arrow: #fff; }
.pill--red .pill__arrow::before { background: var(--red); }
.pill--red:hover { --pill-bg: var(--red-d); }
.pill--sm { min-height: 46px; padding: 5px 6px 5px 22px; gap: 12px; font-size: 14px; }
.pill--sm .pill__arrow { width: 34px; height: 34px; }
.pill--sm .pill__arrow::before { width: 13px; height: 13px; }
.pills { display: flex; flex-wrap: wrap; gap: 14px; }

/* text link with red circle arrow */
.more { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.more .pill__arrow { width: 40px; height: 40px; }
.more:hover .pill__arrow { transform: translateX(3px); }
.on-dark .more, .more--light { color: #fff; }

/* ---------- header（浮いたカプセル） ---------- */
.hd {
  position: fixed; z-index: 50; top: 14px; left: 20px; right: 20px;
  height: var(--hd-h); display: flex; align-items: center; gap: 24px;
  padding: 0 12px 0 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  will-change: transform;
}
.hd__logo { display: flex; align-items: center; gap: 12px; flex: none; }
.hd__logo img { width: 36px; height: auto; }
.hd__name { display: flex; flex-direction: column; line-height: 1.15; }
.hd__name b { font-family: var(--ff-en); font-size: 17px; font-weight: 700; letter-spacing: .2em; color: var(--ink); }
.hd__name small { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
.hd__nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); margin-left: auto; }
.hd__nav a { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .06em; line-height: 1.4; padding: 8px 0; position: relative; white-space: nowrap; }
.hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.hd__nav a:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); }
.hd__nav a[aria-current] { color: var(--red-d); }
.hd__cta { display: flex; gap: 8px; flex: none; }
.hd__menu { display: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); position: relative; flex: none; }
.hd__menu span { position: absolute; left: 16px; right: 16px; height: 2px; background: #fff; transition: transform .3s; }
.hd__menu span:first-child { top: 21px; }
.hd__menu span:last-child { top: 29px; }
.is-menu .hd__menu span:first-child { transform: translateY(4px) rotate(45deg); }
.is-menu .hd__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 45; background: var(--ink-d); color: #fff;
  padding: calc(var(--hd-h) + 48px) var(--gut) 120px; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s;
}
.drawer.is-open { visibility: visible; opacity: 1; }
.drawer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; max-width: 900px; margin: 0 auto; }
.drawer__grid a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); font-weight: 700; font-size: 17px; line-height: 1.5; }
.drawer__grid a small { display: block; font-family: var(--ff-en); font-size: 12px; color: var(--red); letter-spacing: .14em; font-weight: 600; }
.drawer__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 40px auto 0; }

/* phone CTA bar */
.spbar { display: none; }

/* ---------- section titles ---------- */
.sec { padding-block: var(--sec); position: relative; }
.sec--soft { background: var(--bg-soft); }
.sec--ink { background: var(--ink); color: var(--on-dark); }
.sec--deep { background: var(--ink-d); color: var(--on-dark); }
.sec--round { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.ttl { margin-bottom: clamp(40px, 5vw, 72px); }
.ttl__lb { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--ink); line-height: 1.6; }
.ttl__lb::before { content: "[ "; }
.ttl__lb::after { content: " ]"; }
.ttl__en {
  font-family: var(--ff-en); font-size: var(--fs-display); font-weight: 600; line-height: 1.02; letter-spacing: -.01em;
  color: var(--red); margin-top: 6px; white-space: nowrap;
}
.ttl__jp { font-size: var(--fs-h2); font-weight: 800; color: var(--ink); line-height: 1.45; letter-spacing: .04em; margin-top: clamp(18px, 2vw, 28px); }
.sec--ink .ttl__lb, .sec--deep .ttl__lb, .on-dark .ttl__lb { color: #fff; }
.sec--ink .ttl__jp, .sec--deep .ttl__jp, .on-dark .ttl__jp { color: #fff; }
.ttl--center { text-align: center; }
.ttl-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.ttl-row .ttl { margin-bottom: 0; }
.lead { font-size: var(--fs-lead); line-height: 2.1; color: var(--ink-2); letter-spacing: .06em; }
.sec--ink .lead, .sec--deep .lead { color: var(--on-dark); }
.stmt { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); line-height: 1.6; letter-spacing: .04em; }
.sec--ink .stmt, .sec--deep .stmt { color: #fff; }
.em { color: var(--red); }

/* reveal */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rvimg { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.js .rvimg.is-in { clip-path: inset(0 0 0 0); }
.chars .split-ch { display: inline-block; }
.js .chars .split-ch { opacity: 0; transform: translateY(.4em); transition: opacity .6s, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--ci) * 35ms); }
.js .chars.is-in .split-ch { opacity: 1; transform: none; }

/* ---------- image frames ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--ink-m); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--43 { aspect-ratio: 4 / 3; }
.ph--32 { aspect-ratio: 3 / 2; }
.ph--34 { aspect-ratio: 3 / 4; }
.ph--169 { aspect-ratio: 16 / 9; }
.ph--sq { aspect-ratio: 1 / 1; }
.il { display: grid; place-items: center; }
.il img { width: 100%; height: 100%; object-fit: contain; }

/* =========================================================
   MV
   ========================================================= */
/* motion graphics MV: canvas (ECG → hexagon → red flood → vessels reaching people) + catch */
.mv { position: relative; background: #060c18; color: #fff; overflow: hidden; isolation: isolate; height: max(640px, 100svh); display: flex; flex-direction: column; }
.js .mv { background: #060c18; }
.mv__catch .ch--red { color: #ff1f6b; }
.mvfx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mv__foot { position: relative; z-index: 2; margin-top: auto; padding: 0 clamp(24px, 3vw, 48px) clamp(24px, 3vw, 44px); }
.mv__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.mv__lb { font-size: 14px; font-weight: 800; letter-spacing: .14em; color: #fff; line-height: 1.6; }
.mv__lb b { font-family: "JetBrains Mono", var(--ff-en), monospace; font-weight: 500; letter-spacing: .1em; margin-right: 14px; color: #3bd4f5; }
.mv__catch { font-size: min(8.4vw, 14svh, 150px); font-weight: 800; color: #fff; line-height: 1.14; letter-spacing: .02em; white-space: nowrap; margin-top: 8px; }
.mv__catch .ln { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.mv__catch .lnin { display: inline-block; }
.mv__catch .ch { display: inline-block; }
.js .mv__catch .ch { transform: translateY(112%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.js .mv.is-catch .mv__catch .ch { transform: none; }
.js .mv__row { opacity: 0; transition: opacity .8s .5s; }
.js .mv.is-catch .mv__row { opacity: 1; }
/* HUD (live state of the motion: phase, pulse, people reached, strengths found) */
.mvhud { --p: 0; min-width: 300px; color: #fff; font-family: "JetBrains Mono", var(--ff-en), monospace; }
.mvhud__ph { display: flex; align-items: baseline; gap: 12px; line-height: 1.4; }
.mvhud__ph b { font-size: 24px; font-weight: 500; color: #3bd4f5; line-height: 1; }
.mvhud__ph span { font-family: var(--ff); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.mvhud__bar { display: block; height: 1px; background: rgba(59, 212, 245, .22); position: relative; overflow: hidden; margin-top: 8px; }
.mvhud__bar::after { content: ""; position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(var(--p)); }
.mvhud__data { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 4px 18px; margin-top: 10px; }
.mvhud__data dt { font-size: 12px; font-weight: 500; letter-spacing: .18em; color: rgba(59, 212, 245, .7); line-height: 1.4; }
.mvhud__data dd { font-size: 16px; font-weight: 500; letter-spacing: .06em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.mvhud__data dd span { color: #ff1f6b; }
/* =========================================================
   TOP sections
   ========================================================= */
/* concept */
.concept { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.concept__body .stmt { margin-top: 28px; }
.concept__body .prose { margin-top: 28px; }
.concept__ph { aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 4vw, 56px); }
.fact { background: var(--bg-soft); border-radius: var(--r-md); padding: 22px 20px 20px; display: grid; gap: 4px; }
.fact__lb { font-size: var(--fs-caption); font-weight: 700; color: var(--red-d); letter-spacing: .12em; line-height: 1.6; }
.fact__val { font-family: var(--ff-en); font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: 0; }
.fact__val small { font-family: var(--ff); font-size: 15px; font-weight: 700; margin-left: 4px; letter-spacing: .04em; }
.fact__sub { font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.6; }

/* approach cards (solid color + illustration panel) */
.apx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.acard {
  --ac-bg: var(--red); display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--ac-bg); color: #fff;
  padding: clamp(12px, 1.2vw, 16px); position: relative; transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.acard:hover { transform: translateY(-6px); }
.acard--ink { --ac-bg: var(--ink); }
.acard__il { background: #fff; border-radius: calc(var(--r-lg) - 10px); aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.acard__il img { width: 72%; height: 92%; object-fit: contain; }
.acard__body { padding: clamp(24px, 2.6vw, 40px) clamp(16px, 2vw, 28px) clamp(16px, 1.6vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: end; flex: 1; }
.acard__no { font-family: var(--ff-en); font-size: 14px; font-weight: 600; letter-spacing: .18em; grid-column: 1 / -1; line-height: 1.4; }
.acard__ttl { font-size: var(--fs-h3); font-weight: 800; line-height: 1.4; letter-spacing: .04em; }
.acard__txt { font-size: var(--fs-small); line-height: 1.9; grid-column: 1; color: rgba(255, 255, 255, .92); }
.acard .pill__arrow { grid-column: 2; grid-row: 2 / span 2; width: 56px; height: 56px; background: #fff; }
.acard .pill__arrow::before { background: var(--ac-bg); width: 20px; height: 20px; }
.apx--sub { margin-top: clamp(16px, 2vw, 28px); }
.acard--white { --ac-bg: #fff; color: var(--ink); }
.sec--soft .acard--white { background: #fff; }
.acard--white .acard__il { background: var(--bg-soft); }
.acard--white .acard__txt { color: var(--ink-2); }
.acard--white .pill__arrow { background: var(--ink); }
.acard--white .pill__arrow::before { background: #fff; }
.acard--white .acard__no { color: var(--red-d); }
.apx--sub .acard { flex-direction: row; align-items: stretch; }
.apx--sub .acard__il { aspect-ratio: auto; width: 38%; flex: none; }
.apx--sub .acard__il img { width: 86%; height: 86%; }
.apx--sub .acard__ttl { font-size: var(--fs-h4); white-space: nowrap; }
.apx--sub .acard__body { grid-template-columns: minmax(0, 1fr); align-content: center; }
.apx--sub .acard .pill__arrow { grid-column: 1; grid-row: auto; justify-self: end; width: 48px; height: 48px; }

/* change: before / after */
.ba { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; }
.ba__col { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 24px; }
.ba__col--before { background: var(--ink-m); }
.ba__col--after { background: var(--red); color: #fff; }
.ba__head { display: flex; align-items: baseline; gap: 16px; }
.ba__en { font-family: var(--ff-en); font-size: clamp(36px, 4vw, 56px); font-weight: 600; line-height: 1; color: #fff; letter-spacing: -.01em; }
.ba__jp { font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--on-dark-2); }
.ba__col--after .ba__jp { color: #fff; }
.ba__il { background: #dfe4ec; border-radius: var(--r-md); aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; }
.ba__col--after .ba__il { background: #fff; }
.ba__il img { width: 70%; height: 90%; object-fit: contain; }
.ba__list { display: grid; gap: 4px; }
.ba__list li { position: relative; padding-left: 26px; font-size: var(--fs-small); line-height: 1.8; padding-block: 6px; color: var(--on-dark-2); }
.ba__list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 2px; background: currentColor; }
.ba__col--after .ba__list li { color: #fff; font-weight: 700; }
.ba__arrow { display: grid; place-items: center; }
.ba__arrow span { width: 52px; height: 52px; border-radius: 50%; background: #fff; position: relative; }
.ba__arrow span::before { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ba-foot { margin-top: clamp(40px, 4vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.ba-foot .stmt { font-size: var(--fs-h4); }

/* for you: tabs */
.tabs { display: flex; gap: clamp(20px, 3vw, 48px); border-bottom: 1px solid var(--line); margin-bottom: clamp(32px, 4vw, 56px); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__btn { flex: none; padding: 14px 2px 16px; font-size: var(--fs-h4); font-weight: 800; color: var(--ink-3); position: relative; line-height: 1.4; letter-spacing: .04em; min-height: 44px; }
.tabs__btn small { display: block; font-family: var(--ff-en); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: inherit; }
.tabs__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red); transform: scaleX(0); transition: transform .3s; transform-origin: left; }
.tabs__btn[aria-selected="true"] { color: var(--ink); }
.tabs__btn[aria-selected="true"] small { color: var(--red-d); }
.tabs__btn[aria-selected="true"]::after { transform: scaleX(1); }
.tpanel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.tpanel[hidden] { display: none !important; }
.tpanel__ph { aspect-ratio: 3 / 4; border-radius: var(--r-lg); }
.tpanel__q { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); line-height: 1.5; letter-spacing: .04em; }
.worries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.worries li { background: var(--bg-soft); border-radius: var(--r-sm); padding: 16px 18px 16px 50px; position: relative; font-size: var(--fs-small); font-weight: 700; color: var(--ink); line-height: 1.75; }
.worries li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 50%; background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E"); }
.worries li::after { content: ""; position: absolute; left: 24px; top: 24px; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.answer { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.answer__item { border-radius: var(--r-md); padding: 22px 24px; background: var(--ink); color: #fff; }
.answer__item:first-child { background: var(--red); }
.answer__lb { font-family: var(--ff-en); font-size: 12px; letter-spacing: .16em; font-weight: 600; line-height: 1.5; }
.answer__ttl { font-size: 18px; font-weight: 800; line-height: 1.5; margin-top: 4px; }
.answer__txt { font-size: var(--fs-small); line-height: 1.85; margin-top: 8px; color: rgba(255, 255, 255, .92); }
.tpanel__more { margin-top: 32px; }

/* program (sticky photo + steps) */
.prog { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.prog__ph { position: sticky; top: 110px; aspect-ratio: 4 / 5; max-height: calc(100svh - 140px); border-radius: var(--r-lg); }
.steps { display: grid; gap: 14px; }
.step { background: #fff; border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 32px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 24px; }
.step__no { grid-row: 1 / span 2; font-family: var(--ff-en); font-weight: 700; color: var(--red); line-height: 1; text-align: center; }
.step__no small { display: block; font-size: 12px; letter-spacing: .16em; }
.step__no b { display: block; font-size: 48px; font-weight: 700; letter-spacing: -.02em; }
.step__ttl { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); line-height: 1.5; }
.step__txt { font-size: var(--fs-small); line-height: 1.9; }
.sched { margin-top: 40px; }
.sched__ttl { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; line-height: 1.5; }
.sched__ttl small { font-size: var(--fs-caption); color: var(--ink-3); font-weight: 500; }
.sched__list { margin-top: 16px; }
.sched__list li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-strong); line-height: 1.6; }
.sched__list li:first-child { border-top: 1px solid var(--line-strong); }
.sched__date { font-family: var(--ff-en); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: .02em; }
.sched__date small { font-family: var(--ff); font-size: 12px; margin-left: 4px; }
.sched__name { font-weight: 700; color: var(--ink); font-size: var(--fs-small); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.5; white-space: nowrap; }
.badge--ink { background: var(--ink); }
.badge--line { background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* circulation diagram */
.circ { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.cyc { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 560px; margin-inline: auto; }
.cyc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cyc__ring { fill: none; stroke: var(--line-dark); stroke-width: 2; }
.cyc__flow { fill: none; stroke: var(--red); stroke-width: 6; stroke-linecap: round; }
.cyc__ret { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.cyc__node circle { fill: var(--ink); stroke: var(--line-dark); stroke-width: 2; transition: fill .4s, stroke .4s; }
.cyc__node text { fill: #fff; font-family: var(--ff); font-weight: 800; font-size: 19px; text-anchor: middle; letter-spacing: .04em; }
.cyc__node .n { font-family: var(--ff-en); font-size: 13px; font-weight: 600; fill: var(--red); letter-spacing: .14em; }
.cyc__node.is-on circle { fill: var(--red); stroke: var(--red); }
.cyc__node.is-on .n { fill: #fff; }
.cyc__dot { fill: #fff; }
.cyc__center { text-anchor: middle; }
.cyc__center .c1 { font-family: var(--ff-en); font-size: 13px; letter-spacing: .3em; fill: var(--on-dark-2); font-weight: 600; }
.cyc__center .c2 { font-size: 30px; font-weight: 900; fill: #fff; letter-spacing: .06em; }
.cyc-cap { min-height: 8.5em; margin-top: 32px; }
.cyc-cap__no { font-family: var(--ff-en); color: var(--red); font-weight: 600; font-size: 14px; letter-spacing: .16em; }
.cyc-cap__ttl { font-size: var(--fs-h3); font-weight: 800; color: #fff; line-height: 1.5; margin-top: 4px; }
.cyc-cap__txt { margin-top: 8px; color: var(--on-dark); word-break: auto-phrase; overflow-wrap: normal; text-wrap: pretty; }
.mission { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 5vw, 80px); }
.mission li { background: var(--ink-m); border-radius: var(--r-md); padding: 24px 24px 26px; }
.mission__no { font-family: var(--ff-en); font-size: 40px; font-weight: 700; color: var(--red); line-height: 1; }
.mission__ttl { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.6; margin-top: 14px; }
.mission__txt { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.85; margin-top: 8px; }

/* message */
.msg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.msg__ph { aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--bg-soft); }
.msg__ph img { object-position: 50% 20%; }
.msg__quote { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); line-height: 1.65; letter-spacing: .04em; margin-top: 8px; }
.msg__body { margin-top: 28px; }
.msg__name { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; color: var(--ink); }
.msg__name b { font-size: 26px; font-weight: 800; letter-spacing: .16em; line-height: 1.5; }
.msg__name span { font-family: var(--ff-en); font-size: 13px; letter-spacing: .2em; color: var(--ink-3); font-weight: 600; }
.msg__name small { flex-basis: 100%; font-size: var(--fs-small); color: var(--ink-2); }

/* gallery: moving photo columns + ribbon */
.gal { position: relative; overflow: hidden; }
.gal__head { position: relative; z-index: 3; }
.gal__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; height: clamp(560px, 62vw, 820px); margin-top: 8px; position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.gal__col { overflow: hidden; }
.gal__track { display: grid; gap: 20px; animation: galUp 46s linear infinite; }
.gal__col:nth-child(even) .gal__track { animation-name: galDown; animation-duration: 54s; }
.gal__track .ph { border-radius: var(--r-md); }
@keyframes galUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 10px)); } }
@keyframes galDown { from { transform: translateY(calc(-50% - 10px)); } to { transform: translateY(0); } }
.gal__stage { position: relative; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.gal__ribbon { position: absolute; z-index: 2; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.gal__ribbon path { stroke-dasharray: 2400; stroke-dashoffset: 2400; transition: stroke-dashoffset 2.4s cubic-bezier(.6, 0, .2, 1); }
.gal__ribbon.is-in path { stroke-dashoffset: 0; }
.gal__ribbon path { fill: none; stroke-linecap: round; }
.gal .note { position: relative; z-index: 3; margin-top: 24px; color: var(--on-dark-2); text-align: right; }

/* news list (thumbnail + date/category + title + excerpt + arrow) */
.news-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.newslist li + li { border-top: 1px solid var(--line); }
.newslist li:first-child { border-top: 1px solid var(--line); }
.newslist li:last-child { border-bottom: 1px solid var(--line); }
.newslist a { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px 0; }
.newslist__thumb { aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--ink); display: grid; place-items: center; }
.newslist__thumb img { width: 100%; height: 100%; object-fit: cover; }
.newslist__thumb--logo img { width: 34%; height: auto; object-fit: contain; }
.newslist__meta { display: flex; align-items: center; gap: 14px; font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.6; }
.newslist__meta time { font-family: var(--ff-en); font-weight: 600; font-size: 13px; letter-spacing: .04em; }
.tag { display: inline-block; padding: 1px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--red); color: var(--red-d); font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.newslist__ttl { font-size: var(--fs-lead); font-weight: 700; color: var(--ink); line-height: 1.6; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.newslist__ex { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.75; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.newslist .pill__arrow { width: 44px; height: 44px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color .25s, box-shadow .25s; }
.newslist .pill__arrow::before { background: var(--ink); }
.newslist a:hover .pill__arrow { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.newslist a:hover .pill__arrow::before { background: #fff; }
.newslist a:hover .newslist__ttl { color: var(--red-d); }

/* CTA (contact) */
.cta { padding-block: var(--sec) 0; }
.cta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ccard { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; padding: clamp(28px, 3vw, 48px); background: var(--ink-d); isolation: isolate; }
.ccard--red { background: var(--red); }
.ccard__bg { position: absolute; inset: 0; z-index: -1; }
.ccard__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.ccard:hover .ccard__bg img { transform: scale(1.04); }
.ccard__en { font-family: var(--ff-en); font-size: clamp(40px, 4.4vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.ccard__ttl { font-size: var(--fs-h4); font-weight: 800; line-height: 1.5; margin-top: 16px; }
.ccard__txt { font-size: var(--fs-small); line-height: 1.85; margin-top: 8px; color: rgba(255, 255, 255, .92); max-width: 30em; }
.ccard__go { position: absolute; right: clamp(24px, 3vw, 44px); top: clamp(24px, 3vw, 44px); width: 84px; height: 84px; border-radius: 50%; background: #fff; transition: transform .35s; }
.ccard__go::before { content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ccard--red .ccard__go::before { background: var(--red); }
.ccard:hover .ccard__go { transform: rotate(-45deg); }
.ccard__mail { margin-top: 20px; font-size: var(--fs-small); font-weight: 700; }
.ccard__mail span { font-family: var(--ff-en); letter-spacing: .04em; }

/* ---------- footer ---------- */
.ft { padding: clamp(16px, 2vw, 28px) clamp(12px, 1.6vw, 24px) clamp(12px, 1.6vw, 24px); }
.ft__panel { background: var(--ink-d); color: var(--on-dark); border-radius: var(--r-lg); padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px) 36px; }
.ft__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(40px, 6vw, 96px); }
.ft__logo { display: inline-flex; align-items: center; gap: 14px; }
.ft__logo img { width: 52px; }
.ft__logo b { display: block; font-family: var(--ff-en); font-size: 22px; letter-spacing: .2em; color: #fff; line-height: 1.2; }
.ft__logo small { display: block; font-size: 13px; letter-spacing: .14em; font-weight: 700; color: var(--on-dark-2); }
.ft__catch { font-size: var(--fs-h4); font-weight: 800; color: #fff; margin-top: 28px; line-height: 1.6; letter-spacing: .06em; }
.ft__office { margin-top: 28px; display: grid; gap: 18px; font-size: 13px; line-height: 1.8; color: var(--on-dark-2); }
.ft__office b { display: block; color: #fff; font-size: 14px; }
.ft__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ft__nav h3 { font-family: var(--ff-en); font-size: 14px; font-weight: 600; letter-spacing: .16em; color: var(--red); line-height: 1.5; }
.ft__nav ul { margin-top: 14px; display: grid; gap: 4px; }
.ft__nav a { font-size: var(--fs-small); color: var(--on-dark); line-height: 1.7; display: inline-block; padding: 4px 0; }
.ft__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.ft__bottom { margin-top: clamp(48px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: var(--fs-caption); color: var(--on-dark-2); line-height: 1.8; }
.ft__bottom a:hover { color: #fff; }

/* =========================================================
   Lower pages
   ========================================================= */
.pghero { padding: calc(var(--hd-h) + 28px) clamp(12px, 1.6vw, 24px) 0; }
.pghero__panel { position: relative; height: clamp(440px, 56svh, 600px); border-radius: var(--r-lg); background: var(--ink-d); overflow: hidden; isolation: isolate; }
.pghero__panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pghero__panel::after { content: ""; position: absolute; inset: 0; background: rgba(8, 17, 31, .18); z-index: 1; }
.pghero__tab { position: absolute; z-index: 4; left: 0; bottom: 0; background: #fff; padding: clamp(24px, 2.6vw, 36px) clamp(32px, 4vw, 56px) 0 0; border-top-right-radius: var(--r-lg); max-width: min(900px, 80%); }
.pghero__tab::before { content: ""; position: absolute; left: 0; top: calc(var(--r-lg) * -1); width: var(--r-lg); height: var(--r-lg); background: radial-gradient(circle at 100% 0, transparent calc(var(--r-lg) - .5px), #fff var(--r-lg)); }
.pghero__tab::after { content: ""; position: absolute; right: calc(var(--r-lg) * -1); bottom: 0; width: var(--r-lg); height: var(--r-lg); background: radial-gradient(circle at 100% 0, transparent calc(var(--r-lg) - .5px), #fff var(--r-lg)); }
.pghero__lb { font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--ink); line-height: 1.6; }
.pghero__en { font-family: var(--ff-en); font-size: clamp(48px, 7.4vw, 120px); font-weight: 600; color: var(--red); line-height: 1; letter-spacing: -.015em; margin-top: 8px; white-space: nowrap; }
.pghero__ttl { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); line-height: 1.5; margin-top: 14px; letter-spacing: .04em; }
.crumb { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-caption); color: var(--ink-3); padding-top: 24px; line-height: 1.6; }
.crumb a:hover { color: var(--red-d); }
.crumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.pgintro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }

/* split: photo + text */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.split--rev > :first-child { order: 2; }
.split + .split { margin-top: clamp(64px, 8vw, 120px); }
.split__ph { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.split__no { font-family: var(--ff-en); font-size: 15px; font-weight: 600; letter-spacing: .16em; color: var(--red-d); line-height: 1.5; }
.split__ttl { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); line-height: 1.5; letter-spacing: .04em; margin-top: 10px; }
.split .prose { margin-top: 24px; }
.split .pills, .split .more { margin-top: 32px; }
.sec--ink .split__ttl, .sec--deep .split__ttl { color: #fff; }

/* feature list: numbered rows */
.rows { display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; background: #fff; border-radius: var(--r-md); padding: clamp(24px, 2.6vw, 36px); align-items: start; }
.sec:not(.sec--soft) .row { background: var(--bg-soft); }
.row__no { font-family: var(--ff-en); font-size: 52px; font-weight: 700; color: var(--red); line-height: 1; letter-spacing: -.02em; }
.row__ttl { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); line-height: 1.5; }
.row__txt { margin-top: 8px; }
.sec--ink .row { background: var(--ink-m); }
.sec--ink .row__ttl { color: #fff; }

/* value list */
.values { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.values li { grid-column: span 2; }
.values li:nth-child(n+4) { grid-column: span 3; }
.values li { background: var(--ink-m); border-radius: var(--r-md); padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; }
.values__no { font-family: var(--ff-en); font-size: 36px; font-weight: 700; color: var(--red); line-height: 1; }
.values__ttl { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.55; }
.values__txt { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.85; }

/* service hub cards */
.svlist { display: grid; gap: clamp(16px, 2vw, 24px); }
.svrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); transition: background-color .3s; }
.svrow:hover { background: var(--red-tint); }
.svrow__ph { aspect-ratio: 3 / 2; border-radius: 0; }
.svrow__body { padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.svrow__no { font-family: var(--ff-en); font-size: 14px; font-weight: 600; letter-spacing: .18em; color: var(--red-d); line-height: 1.4; }
.svrow__ttl { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); line-height: 1.45; }
.svrow__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.svrow .more { margin-top: 8px; }

/* target nav (photo navigation) */
.tnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.tnav a { display: block; }
.tnav .ph { aspect-ratio: 3 / 4; border-radius: var(--r-md); }
.tnav .ph img { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.tnav a:hover .ph img { transform: scale(1.05); }
.tnav__lb { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-weight: 800; color: var(--ink); font-size: 18px; line-height: 1.5; }
.tnav__lb small { display: block; font-family: var(--ff-en); font-size: 12px; letter-spacing: .16em; color: var(--red-d); font-weight: 600; }
.tnav .pill__arrow { width: 40px; height: 40px; }
.tnav a[aria-current] .tnav__lb { color: var(--red-d); }
.tnav a[aria-current] .ph { outline: 3px solid var(--red); outline-offset: 3px; }

/* table */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td { text-align: left; vertical-align: top; padding: 22px 0; border-bottom: 1px solid var(--line); line-height: 1.9; }
.dtable tr:first-child th, .dtable tr:first-child td { border-top: 1px solid var(--line); }
.dtable th { width: 11em; font-weight: 700; color: var(--ink); padding-right: 24px; }

/* offices */
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.office { background: var(--bg-soft); border-radius: var(--r-lg); overflow: hidden; }
.office .ph { border-radius: 0; aspect-ratio: 16 / 9; }
.office__body { padding: clamp(24px, 2.6vw, 36px); }
.office__en { font-family: var(--ff-en); font-size: 13px; font-weight: 600; letter-spacing: .18em; color: var(--red-d); }
.office__ttl { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); line-height: 1.5; }
.office__addr { margin-top: 10px; font-size: var(--fs-small); line-height: 1.85; }
.maplink { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.5; transition: background-color .25s, color .25s; }
.maplink:hover { background: var(--ink); color: #fff; }

/* faq */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: var(--r-md); }
.sec:not(.sec--soft) .faq details { background: var(--bg-soft); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 22px 24px; font-weight: 800; color: var(--ink); line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--ff-en); font-size: 26px; color: var(--red); font-weight: 700; line-height: 1; }
.faq summary::after { content: "+"; font-family: var(--ff-en); font-size: 28px; font-weight: 400; color: var(--ink); text-align: center; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 24px 24px 84px; }

/* flow */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: flow; }
.flow li { background: #fff; border-radius: var(--r-md); padding: 28px 24px; position: relative; }
.sec:not(.sec--soft) .flow li { background: var(--bg-soft); }
.flow__no { font-family: var(--ff-en); font-size: 13px; font-weight: 600; letter-spacing: .18em; color: var(--red-d); }
.flow__ttl { font-size: 18px; font-weight: 800; color: var(--ink); margin-top: 6px; line-height: 1.55; }
.flow__txt { font-size: var(--fs-small); line-height: 1.85; margin-top: 8px; }

/* voices */
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.voice .ph { aspect-ratio: 4 / 3; }
.voice__who { margin-top: 18px; font-size: var(--fs-caption); font-weight: 700; color: var(--red-d); letter-spacing: .1em; }
.voice__ttl { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); line-height: 1.55; margin-top: 6px; }
.voice__txt { margin-top: 10px; font-size: var(--fs-small); line-height: 1.9; }

/* form */
.form { display: grid; gap: 24px; max-width: 820px; }
.form__row { display: grid; gap: 10px; }
.form__lb { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 10px; line-height: 1.6; }
.form__lb .badge { font-size: 12px; padding: 1px 8px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); padding: 14px 16px; line-height: 1.6; }
.form textarea { min-height: 200px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.form__agree { font-size: var(--fs-small); display: flex; gap: 10px; align-items: center; }
.form__agree input { width: 22px; height: 22px; accent-color: var(--red); }
.form__done { background: var(--red-tint); color: var(--ink); border-radius: var(--r-md); padding: 24px; font-weight: 700; }

/* article */
.article { max-width: 820px; margin-inline: auto; }
.article__meta { display: flex; gap: 14px; align-items: center; font-size: var(--fs-caption); color: var(--ink-3); }
.article__ttl { font-size: var(--fs-h2); font-weight: 800; color: var(--ink); line-height: 1.5; margin-top: 12px; }
.article__body { margin-top: 40px; }
.article__body h2 { font-size: var(--fs-h4); font-weight: 800; color: var(--ink); margin: 48px 0 16px; line-height: 1.6; }
.article__body p + p { margin-top: 1lh; }

/* next band */
.nextband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.nextband a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 32px; border-radius: var(--r-md); background: var(--bg-soft); color: var(--ink); font-weight: 800; font-size: 18px; line-height: 1.5; transition: background-color .25s; }
.nextband a small { display: block; font-family: var(--ff-en); font-size: 12px; letter-spacing: .16em; color: var(--red-d); font-weight: 600; }
.nextband a:hover { background: var(--red-tint); }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 1240px) {
  .hd__nav { display: none; }
  .hd__cta { margin-left: auto; }
  .hd__menu { display: block; }
}
@media (max-width: 1024px) {
  .concept, .circ, .msg, .prog, .news-wrap, .ttl-row, .pgintro, .ft__top { grid-template-columns: minmax(0, 1fr); }
  .prog__ph { position: relative; top: auto; max-height: none; aspect-ratio: 16 / 10; }
  .concept__ph { aspect-ratio: 16 / 10; }
  .msg__ph { max-width: 520px; }
  .apx--sub .acard { flex-direction: column; }
  .apx--sub .acard__il { width: auto; aspect-ratio: 16 / 9; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values li, .values li:nth-child(n+4) { grid-column: auto; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ba__arrow span { transform: rotate(90deg); }
}
@media (max-width: 860px) {
  .tpanel, .split, .svrow, .voices, .offices, .cta__grid, .nextband { grid-template-columns: minmax(0, 1fr); }
  .split--rev > :first-child { order: 0; }
  .tpanel__ph { aspect-ratio: 16 / 10; }
  .apx { grid-template-columns: minmax(0, 1fr); }
  .mission { grid-template-columns: minmax(0, 1fr); }
  .gal__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gal__col:nth-child(4) { display: none; }
}
@media (max-width: 1100px) {
  .mvhud { min-width: 260px; }
}
@media (max-width: 640px) {  :root { --hd-h: 60px; --bar-h: 64px; --r-lg: 22px; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .sp-only { display: inline; }
  br.pc-only, .pc-only { display: none; }
  .hd { top: 10px; left: 12px; right: 12px; padding: 0 6px 0 16px; gap: 10px; }
  .hd__logo img { width: 30px; }
  .hd__name b { font-size: 14px; }
  .hd__name small { font-size: 12px; }
  .hd__cta .pill:first-child { display: none; }
  .hd__cta .pill { min-height: 44px; padding-left: 16px; font-size: 13px; }
  .hd__menu { width: 46px; height: 46px; }
  .hd__menu span { left: 14px; right: 14px; }
  .hd__menu span:first-child { top: 18px; }
  .hd__menu span:last-child { top: 26px; }
  .drawer__grid, .drawer__cta { grid-template-columns: minmax(0, 1fr); }

  .spbar {
    display: grid; grid-template-columns: 1fr 1fr 1.25fr; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--ink-d);
  }
  .spbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
  .spbar a + a { box-shadow: inset 1px 0 0 var(--line-dark); }
  .spbar svg { width: 20px; height: 20px; }
  .spbar a.is-main { background: var(--red); box-shadow: none; font-size: 14px; }

  .mv { height: max(600px, calc(100svh - var(--bar-h))); }
  .mv__foot { padding: 0 24px 26px; }
  .mv__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mvhud { min-width: 0; width: 100%; order: -1; }
  .mvhud__ph b { font-size: 22px; }
  .mvhud__data dd { font-size: 16px; }
  .mv__lb { font-size: 12px; }
  .mv__lb b { display: none; }
  .mv__catch { font-size: min(13.4vw, 58px); }
  .mv__catch .ln { display: block; }
  .tabs { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scroll-padding-inline: var(--gut); gap: 24px; }
  .ttl, .ttl-row { text-align: center; }
  .ttl-row .lead { text-align: left; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { text-align: center; }
  .worries, .answer { grid-template-columns: minmax(0, 1fr); }
  .acard__body { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .acard .pill__arrow { grid-column: 1; grid-row: auto; margin: 8px auto 0; }
  .newslist a { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
  .newslist .pill__arrow { display: none; }
  .newslist__ex { display: none; }
  .newslist__ttl { font-size: 15px; }
  .sched__list li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .sched__date { grid-column: 1; }
  .sched__name { grid-column: 1; }
  .sched__list .badge { grid-column: 2; grid-row: 1 / span 2; }
  .step { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .step__no { grid-row: auto; }
  .values, .flow { grid-template-columns: minmax(0, 1fr); }
  .values li, .flow li, .mission li { text-align: center; align-items: center; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: center; }
  .tnav { grid-template-columns: minmax(0, 1fr); }
  .tnav .ph { aspect-ratio: 16 / 10; }
  .pills { flex-direction: column; }
  .pills .pill { width: 100%; justify-content: space-between; }
  .pill { justify-content: space-between; }
  .ba-foot { flex-direction: column; text-align: center; }
  .ba-foot .pill { width: 100%; }
  .more { width: 100%; justify-content: center; }
  .gal__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; height: 560px; }
  .gal__track { gap: 12px; }
  .gal__col:nth-child(3) { display: none; }
  .gal .note { text-align: center; }
  .ccard { min-height: 320px; text-align: center; align-items: center; }
  .ccard__go { position: static; margin: 0 auto 20px; width: 64px; height: 64px; order: -1; }
  .ft__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft__top { text-align: center; }
  .ft__nav { text-align: left; }
  .ft__bottom { flex-direction: column; text-align: center; }
  .pghero { padding: calc(var(--hd-h) + 20px) 12px 0; }
  .pghero__panel { height: 420px; }
  .pghero__tab { max-width: calc(100% - 24px); padding: 20px 20px 0 0; }
  .pghero__ttl { font-size: 20px; }
  .crumb { justify-content: center; }
  .dtable th, .dtable td { display: block; width: auto; padding: 0; border: 0; }
  .dtable tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .dtable tr:first-child { border-top: 1px solid var(--line); }
  .dtable tr:first-child th, .dtable tr:first-child td { border: 0; }
  .dtable th { margin-bottom: 4px; color: var(--red-d); font-size: 14px; }
  .faq summary { grid-template-columns: 32px minmax(0, 1fr) 24px; padding: 18px; gap: 12px; }
  .faq__a { padding: 0 18px 20px; }
  .split__ttl, .split__no { text-align: center; }
  .office__body { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .rv, .js .rvimg, .js .chars .split-ch { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* extra components for lower pages */
.worries--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.statement { text-align: center; }
.statement .stmt { font-size: var(--fs-h2); }
.bigratio { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); }
.bigratio__num { font-family: var(--ff-en); font-weight: 700; font-size: clamp(72px, 11vw, 168px); line-height: 1; letter-spacing: -.02em; color: var(--on-dark-2); }
.bigratio__num--to { color: var(--red); }
.bigratio__arrow { width: clamp(44px, 5vw, 72px); height: clamp(44px, 5vw, 72px); border-radius: 50%; background: #fff; position: relative; flex: none; }
.bigratio__arrow::before { content: ""; position: absolute; inset: 0; margin: auto; width: 40%; height: 40%; background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.bigratio__cap { text-align: center; margin-top: 16px; color: var(--on-dark); font-weight: 700; }
.kw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 72px); }
.kw li { background: var(--ink-m); border-radius: var(--r-md); padding: 22px 16px; text-align: center; color: #fff; font-weight: 800; font-size: 18px; line-height: 1.6; }
.kw li small { display: block; font-size: 13px; color: var(--on-dark-2); font-weight: 700; }
.logoexp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.logoexp__mark { background: #fff; border-radius: var(--r-lg); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.logoexp__mark img { width: 52%; }
.logoexp__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.logoexp__col { border-radius: var(--r-md); padding: 22px; color: #fff; }
.logoexp__col--red { background: var(--red); }
.logoexp__col--cyan { background: var(--ink); }
.logoexp__col b { display: block; font-size: 18px; line-height: 1.5; }
.logoexp__col--cyan b { color: var(--cyan); }
.logoexp__col p { font-size: var(--fs-small); line-height: 1.85; margin-top: 6px; }
.profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.profile__ph { position: sticky; top: 110px; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--bg-soft); }
.profile__ph img { object-position: 50% 20%; }
.career { display: grid; gap: 10px; margin-top: 32px; }
.career li { background: var(--bg-soft); border-radius: var(--r-sm); padding: 14px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; color: var(--ink); font-weight: 700; line-height: 1.6; font-size: var(--fs-small); }
.career li span { color: var(--ink-3); }
.schedfull { display: grid; gap: 16px; }
.schedfull__term { background: #fff; border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.schedfull__name { font-family: var(--ff-en); font-size: 15px; font-weight: 700; color: var(--red-d); letter-spacing: .1em; line-height: 1.5; }
.schedfull__name b { display: block; font-family: var(--ff); font-size: 22px; color: var(--ink); letter-spacing: .04em; }
.schedfull .sched__list { margin-top: 0; }
.notebox { background: var(--red-tint); border-radius: var(--r-md); padding: 20px 24px; color: var(--ink); font-size: var(--fs-small); line-height: 1.9; }
.notebox b { color: var(--red-d); }
.pgsec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.filters__lb { font-weight: 700; color: var(--ink); font-size: var(--fs-small); margin-right: 8px; }
.filters button { min-height: 40px; padding: 6px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.5; }
.filters button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--red); color: var(--red-d); background: var(--red-tint); }
@media (max-width: 1024px) {
  .worries--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logoexp, .profile { grid-template-columns: minmax(0, 1fr); }
  .logoexp__mark { max-width: 360px; width: 100%; margin-inline: auto; }
  .profile__ph { position: relative; top: auto; max-width: 480px; }
}
@media (max-width: 640px) {
  .worries--3 { grid-template-columns: minmax(0, 1fr); }
  .kw, .logoexp__cols { grid-template-columns: minmax(0, 1fr); }
  .schedfull__term { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .statement .stmt { font-size: 24px; }
  .profile__ph { margin-inline: auto; }
  .logoexp__col { text-align: center; }
}
/* crop positions for the generated photos */
.pghero__panel > img { object-position: 50% 32%; }
.concept__ph img { object-position: 68% 40%; }
.tpanel__ph img, .tnav .ph img { object-position: 50% 22%; }
.svrow__ph img, .split__ph img, .prog__ph img { object-position: 50% 35%; }
.voice .ph img { object-position: 50% 30%; }