/* =========================================================
   HiroshimAI TOP v2 (prototype)
   色は :root の変数1箇所に集約（2026-09-16 ユーザー決定: パレットB＝現行サイト #3d5aab→#8c5a9c→#d6336c で統一。
   A＝資料系 #536dfa→#6b4bf2→#d11e9a は使わない。混在禁止＝
   コントラスト実測: #d6336c は白地 4.62 / 白文字を載せても 4.62（AA 4.5 クリア）
   ========================================================= */
:root {
  --c1: #3d5aab;
  --c2: #8c5a9c;
  --c3: #d6336c;
  --c-accent: #e0314e; /* 現行サイトの差し色（今は未使用） */
  --grad: linear-gradient(90deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
  --grad-rev: linear-gradient(90deg, var(--c3) 0%, var(--c2) 55%, var(--c1) 100%);

  --navy-950: #060b20;
  --navy-900: #0a1233;
  --navy-800: #121c48;
  --ink: #111a3c;
  --ink-2: #4a5272;
  --ink-3: #6b7290; /* 白地で約4.6:1（AA） */
  --line: #e2e6f1;
  --paper: #f6f8fd;
  --white: #fff;

  --f-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-en: "Montserrat", "Noto Sans JP", system-ui, sans-serif;
  --f-script: "Klee One", "Noto Sans JP", cursive;

  --gut: clamp(20px, 4.6vw, 88px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --hd-h: 96px;

  /* 文字サイズ（現行本番サイトの実測値に合わせる：390/768/1280/1440/1920） */
  --fs-hero: clamp(28px, 4.5vw, 64px);          /* 28/34.56/57.6/64/64 */
  --fs-display: clamp(28px, 3.125vw, 40px);     /* 28/28/40/40/40 */
  --fs-statement: clamp(22px, 2.7vw, 37px);     /* 24.18/22/34.56/37/37（≤560は下で上書き） */
  --fs-h2: clamp(23px, 2.35vw, 30px);           /* 23/23/30/30/30 */
  --fs-h3: clamp(19px, 2.03vw, 26px);           /* 18/19/26/26/26（≤560は下で上書き） */
  --fs-item-title: clamp(17px, 1.64vw, 21px);   /* 16/17/21/21/21（≤560は下で上書き） */
  --fs-card-title: clamp(16px, 1.485vw, 19px);  /* 15/16/19/19/19（≤560は下で上書き） */
  --fs-hero-lead: clamp(15px, 1.33vw, 17px);    /* 14.5/15/17/17/17（≤560は下で上書き） */
  --fs-btn: clamp(15px, 2.02vw, 15.5px);        /* 15/15.5 */
  --fs-lead: 15px;
  --fs-body-sub: clamp(13.5px, 1.89vw, 14.5px); /* 13.5/14.5 */
  --fs-body: 14px;
  --fs-meta: 13px;
  --fs-note: 12.5px;
  --fs-more: clamp(12px, 1.63vw, 12.5px);       /* 12/12.5 */
  --fs-label: 12px;
  --fs-eyebrow: clamp(10px, 1.37vw, 10.5px);    /* 10/10.5 */
  --fs-footer: clamp(11.5px, 1.57vw, 12px);     /* 11.5/12 */
  --fs-footer-dd: 12px;
  --fs-xs: 11px;
  --fs-date: 11px;                              /* 11/10/11/11/11（561〜1099は下で上書き） */
  --fs-tag: 10px;                               /* 10/9/10/10/10（561〜1099は下で上書き） */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}
/* 文字サイズトークンの幅別上書き */
@media (max-width: 560px) {
  :root { --fs-statement: 6.2vw; --fs-h3: 18px; --fs-item-title: 16px; --fs-card-title: 15px; --fs-hero-lead: 14.5px; }
}
@media (min-width: 561px) and (max-width: 1099px) {
  :root { --fs-date: 10px; --fs-tag: 9px; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-jp);
  color: var(--ink);
  background: var(--white);
  line-height: 1.8;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "palt"; /* 和文の字詰め（ファクトブック §11-4 の運用） */
  word-break: auto-phrase; /* 日本語を文節単位で折り返す（非対応ブラウザは通常の折返し） */
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .hd[data-theme="dark"] :focus-visible, .ft :focus-visible { outline-color: #aab8ff; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 6px; }
.skip:focus { top: 12px; }
.wrap { padding-inline: var(--gut); }
.sm { font-size: .8em; }
.nw { white-space: nowrap; }

/* ---------- atoms ---------- */
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.grad--rev { background-image: var(--grad-rev); }
/* ルビはグラデーション文字の中だと消えるので、色を明示する */
.grad rt { -webkit-text-fill-color: #b7a4ff; color: #b7a4ff; }
.light .grad rt { -webkit-text-fill-color: var(--c2); color: var(--c2); }

.bar { display: inline-block; width: 64px; height: 2px; background: var(--grad); vertical-align: middle; border-radius: 2px; }
.bar--long { width: 96px; }
.bar--xl { width: 86px; height: 3px; }

.eyebrow {
  font-family: var(--f-en); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: .22em; line-height: 1.8;
  color: var(--ink); display: flex; align-items: center; gap: 28px;
}
.eyebrow--dim { color: rgba(255, 255, 255, .62); }

.h2 { font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: 1.45; letter-spacing: -.02em; margin-top: 18px; }
.h2--xl { font-size: var(--fs-h2); line-height: 1.45; } /* 現行サイトは見出し1段のみ＝.h2と同値 */
.h3 { font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: 1.45; letter-spacing: -.02em; margin-top: 16px; }
.lead { color: var(--ink-2); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: 1.9; margin-top: 18px; letter-spacing: .016em; }
.lead--dark { color: var(--ink); }

.arw {
  display: inline-block; position: relative; width: 14px; height: 1.5px; background: currentColor;
  vertical-align: middle; transition: transform .35s var(--ease);
}
.arw::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: translate(0, -50%) rotate(45deg); transform-origin: center;
}
.arw--left { transform: scaleX(-1); }
.arw--down { transform: rotate(90deg); }
.arw--long { width: 42px; height: 1px; }
.arw--long::after { width: 8px; height: 8px; border-width: 1px; }
.arw--lg { width: 22px; }
.arw--lg::after { width: 10px; height: 10px; }

.btn-grad, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 64px; padding: 0 46px; border-radius: 999px;
  font-family: var(--f-en); font-weight: var(--fw-bold); font-size: var(--fs-btn); line-height: 1.8; letter-spacing: .16em; white-space: nowrap; /* 英字ラベルの字間はデザイン値のまま（依頼はサイズと太さ） */
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s, color .35s;
}
.btn-grad { color: #fff; background: var(--grad); background-size: 140% 100%; box-shadow: 0 12px 30px -12px rgba(140, 90, 156, .7); position: relative; overflow: hidden; }
.btn-grad::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn-line { border: 1.5px solid currentColor; color: #fff; }
.btn-grad:hover, .btn-line:hover { transform: translateY(-2px); }
.btn-grad:hover::before { transform: translateX(120%); }
.btn-line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.light .btn-line:hover, .hd[data-theme="light"] .btn-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
:is(.btn-grad, .btn-line, .link-u, .link-jp, .job, .scard):hover .arw { transform: translateX(5px); }

.link-u {
  display: inline-flex; align-items: center; gap: 22px; padding-bottom: 14px;
  font-family: var(--f-en); font-weight: var(--fw-semibold); font-size: var(--fs-more); line-height: 1.8; letter-spacing: .14em;
  border-bottom: 1.5px solid currentColor; white-space: nowrap;
}
.link-u--sm { font-size: var(--fs-more); gap: 18px; padding-bottom: 10px; border-bottom-width: 1px; }
.link-u--flat { border-bottom: 0; padding-bottom: 0; font-weight: 500; }

.circle-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid currentColor; transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.circle-btn--lg { width: 62px; height: 62px; }
.circle-btn:hover:not(:disabled) { background: currentColor; }
.circle-btn:disabled { opacity: .3; cursor: default; }
.circle-btn:hover > i { color: var(--navy-900); }
.light .circle-btn:hover > i { color: #fff; }

.pill {
  position: absolute; left: 26px; top: 24px; padding: 4px 16px; border-radius: 999px;
  background: var(--grad); color: #fff; font-family: var(--f-en); font-weight: var(--fw-bold); font-size: var(--fs-tag); letter-spacing: .1em;
}
.meta { display: flex; align-items: center; font-family: var(--f-en); font-weight: var(--fw-medium); font-size: var(--fs-date); line-height: 1.8; color: var(--ink-3); letter-spacing: .08em; }
.meta .cat { font-family: var(--f-jp); color: var(--c3); font-weight: var(--fw-regular); font-size: var(--fs-meta); line-height: 1.8; letter-spacing: .04em; }
.ncard .meta .cat { font-weight: var(--fw-bold); font-size: var(--fs-tag); line-height: 1.8; letter-spacing: .05em; } /* ニュースのカテゴリ（メディアは上の13px） */
.meta .cat::before { content: ""; display: inline-block; width: 1px; height: 12px; background: currentColor; opacity: .5; margin: 0 16px; vertical-align: -1px; color: var(--ink-3); }
.meta--light { color: rgba(255,255,255,.85); }
.meta--light .cat { color: #9fb6ff; }
.meta--blue .cat { color: var(--c1); }

/* reveal */
/* JS が動くときだけ隠す（JS無効でも本文は見える） */
/* :where() で詳細度0にし、カード側の transition / hover の transform を潰さない */
:where(.js [data-reveal]) { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
:where(.js [data-reveal].is-in) { opacity: 1; transform: none; }

/* =========================================================
   HEADER
   ========================================================= */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hd-h);
  display: flex; align-items: center; gap: 28px; padding-inline: clamp(20px, 4vw, 68px);
  color: #fff; transition: background-color .45s, color .45s, height .45s var(--ease), box-shadow .45s;
}
.hd.is-scrolled { --hd-h: 76px; background: rgba(8, 13, 38, .55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.hd[data-theme="light"] { color: var(--ink); }
.hd[data-theme="light"].is-scrolled { background: rgba(255, 255, 255, .78); box-shadow: 0 1px 0 rgba(17, 26, 60, .06); }
.hd__brand { position: relative; display: block; height: 38px; flex: none; }
.hd__logo { height: 100%; width: auto; transition: opacity .45s; }
.hd__logo--k { position: absolute; left: 0; top: 0; opacity: 0; }
.hd[data-theme="light"] .hd__logo--w { opacity: 0; }
.hd[data-theme="light"] .hd__logo--k { opacity: 1; }
.hd__tag { font-weight: var(--fw-regular); font-size: var(--fs-body); letter-spacing: .12em; padding-left: 28px; border-left: 1px solid currentColor; border-color: rgba(127,127,127,.45); line-height: 1.2; white-space: nowrap; }
/* 和文ラベル7項目: 既存サイトのナビ実測値（14px/400/字間.02em） */
.hd__nav { margin-left: auto; display: flex; gap: clamp(18px, 1.9vw, 36px); font-family: var(--f-jp); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.8; letter-spacing: .02em; white-space: nowrap; }
.hd__nav a { position: relative; padding: 8px 0; }
.hd__nav a[aria-current="page"]::after { transform: scaleX(1); }
.hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.hd__nav a:hover::after { transform: scaleX(1); }
.hd .btn-line { height: 54px; padding: 0 36px; font-family: var(--f-jp); font-weight: var(--fw-medium); font-size: var(--fs-meta); line-height: 1.8; letter-spacing: .02em; color: inherit; } /* 和文「お問い合わせ」: 既存 btn-head 13px/500 */
.hd__menu { width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; gap: 5px; background: rgba(240, 241, 247, .92); color: var(--ink); transition: background-color .3s, transform .3s var(--ease); flex: none; }
.hd__menu span { display: block; width: 20px; height: 1.5px; background: currentColor; }
.hd[data-theme="light"] .hd__menu { background: transparent; border: 1px solid currentColor; }
.hd__menu:hover { transform: scale(1.06); }

.menu { position: fixed; inset: 0; z-index: 150; background: radial-gradient(120% 90% at 85% 100%, rgba(140, 90, 156,.45), transparent 55%), var(--navy-950); color: #fff; overflow-y: auto; }
.menu__in { min-height: 100%; padding: 110px var(--gut) 48px; display: flex; flex-direction: column; }
.menu__close { position: absolute; right: clamp(20px, 4vw, 68px); top: 19px; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }
.menu__close span { position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: #fff; }
.menu__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
/* 全ページ一覧: 項目ごとに「英字＋和文」の見出しリンク、下層ページはその下に小さく並べる */
.menu__nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 48px; align-items: start; }
.menu__group { border-bottom: 1px solid rgba(255,255,255,.14); opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
.menu.is-open .menu__group { opacity: 1; transform: none; }
.menu__main { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; }
.menu__main b { font-family: var(--f-en); font-weight: 600; font-size: clamp(24px, 2.6vw, 38px); letter-spacing: .08em; }
.menu__main span { font-size: 13px; color: rgba(255,255,255,.6); }
.menu__main:hover b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu__sub { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -6px 0 18px; font-size: 14px; }
.menu__sub a { color: rgba(255,255,255,.78); padding: 2px 0; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.menu__sub a:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.menu__foot { margin-top: auto; padding-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; color: rgba(255,255,255,.55); font-size: 14px; letter-spacing: .14em; }
.menu__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 12px; letter-spacing: .04em; }
.menu__legal a:hover { color: #fff; }

/* =========================================================
   01 HERO
   ========================================================= */
.hero { position: relative; min-height: max(100svh, 640px); color: #fff; overflow: hidden; display: flex; align-items: flex-end; background: var(--navy-900); }
.hero__media { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroZoom 18s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 11, 32, .55) 0%, rgba(6, 11, 32, 0) 22%),
    linear-gradient(90deg, rgba(6, 11, 32, .78) 0%, rgba(6, 11, 32, .45) 38%, rgba(6, 11, 32, 0) 68%),
    linear-gradient(0deg, rgba(6, 11, 32, .55) 0%, rgba(6, 11, 32, 0) 35%);
}
.hero__body { position: relative; padding: calc(var(--hd-h) + 40px) var(--gut) clamp(56px, 12vh, 150px) calc(var(--gut) + 8px); max-width: 1180px; }
.hero__eyebrow { font-family: var(--f-en); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: .22em; line-height: 1.8; }
.hero .bar { width: 54px; height: 3px; margin: 22px 0 26px; display: block; }
.hero__title { font-weight: var(--fw-light); font-size: var(--fs-hero); line-height: 1.26; letter-spacing: -.005em; text-shadow: 0 4px 40px rgba(6, 11, 32, .35); }
.hero__ai { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: 1em; letter-spacing: -.005em; padding-right: .04em; text-shadow: none; }
.hero__title .sm { font-size: 1em; } /* 見出し内の助詞も H1 と同寸 */
.hero__lead { margin-top: clamp(22px, 2.6vw, 40px); font-weight: var(--fw-light); font-size: var(--fs-hero-lead); line-height: 1.95; letter-spacing: .017em; text-shadow: 0 2px 20px rgba(6, 11, 32, .5); }
.hero__btns { display: flex; flex-wrap: wrap; gap: 20px; margin-top: clamp(26px, 3vw, 44px); }
.hero__btns .btn-grad, .hero__btns .btn-line { height: clamp(56px, 4.1vw, 68px); padding: 0 clamp(34px, 3.4vw, 58px); }
.hero__btns .btn-line { background: rgba(6, 11, 32, .15); }
.hero__meta { position: absolute; right: clamp(20px, 5vw, 110px); bottom: clamp(36px, 5vh, 56px); text-align: right; font-family: var(--f-en); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: .22em; line-height: 2; padding-right: 26px; }
.hero__toggle { position: absolute; left: calc(var(--gut) + 8px); bottom: 22px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); display: grid; place-items: center; opacity: .7; transition: opacity .3s; }
.hero__toggle:hover { opacity: 1; }
.hero__toggle i { width: 8px; height: 10px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
.hero__toggle[aria-pressed="true"] i { width: 0; height: 0; border-right: 0; border-left: 9px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 3px; }
.hero__meta::after { content: ""; position: absolute; right: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--c1), var(--c3)); }

/* =========================================================
   02 NEWS
   ========================================================= */
.news { position: relative; background: radial-gradient(60% 50% at 70% 10%, rgba(240, 214, 255, .35), transparent 70%), var(--paper); padding-block: clamp(80px, 9vw, 140px) clamp(80px, 8vw, 130px); overflow: hidden; }
.news__water, .water {
  position: absolute; right: -5vw; top: clamp(50px, 5vw, 90px); font-family: var(--f-en); font-weight: 800; font-size: clamp(150px, 20vw, 400px); line-height: .8; letter-spacing: -.01em;
  background: linear-gradient(90deg, rgba(214, 51, 108, .06), rgba(140, 90, 156, .04) 45%, rgba(61, 90, 171, .06)); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; user-select: none;
}
.shead { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-inline: auto; max-width: 1560px; }
.news .wrap > * { max-width: 1560px; margin-inline: auto; }
.news__grid { position: relative; margin-top: clamp(40px, 3.6vw, 60px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 28px); }
.ncard { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 50px -24px rgba(24, 34, 90, .22); transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity 1s var(--ease); }
.ncard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(24, 34, 90, .32); }
.ncard__a { display: flex; flex-direction: column; height: 100%; }
.ncard__img { position: relative; aspect-ratio: 1.88; overflow: hidden; background: #e9edf8; }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform 1.2s var(--ease); }
.ncard:hover .ncard__img img { transform: scale(1.05); }
.ncard__body { display: flex; flex-direction: column; flex: 1; padding: 28px clamp(22px, 2vw, 34px) 32px; }
.ncard h3 { margin-top: 14px; font-weight: var(--fw-semibold); font-size: var(--fs-card-title); line-height: 1.7; letter-spacing: .016em; }
.ncard__ex { margin: 12px 0 26px; color: var(--ink-2); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.8; letter-spacing: .017em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ncard .link-u { margin-top: auto; align-self: flex-start; }

/* =========================================================
   FRAME SECTIONS (03 / 04) — 1672×941 のデザイン座標で組む
   ========================================================= */
.fsec { position: relative; color: #fff; overflow: hidden; background: var(--navy-900); container-type: inline-size; }
.fsec__glow { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 55% at 88% 78%, rgba(124, 86, 168, .45), transparent 70%),
    radial-gradient(45% 40% at 70% 18%, rgba(61, 90, 171, .35), transparent 70%),
    radial-gradient(60% 60% at 10% 30%, rgba(24, 40, 110, .55), transparent 70%),
    linear-gradient(180deg, #0b1438 0%, #0a1130 100%);
}
.fsec__glow--mvv { background:
    radial-gradient(28% 30% at 62% 10%, rgba(116, 84, 170, .55), transparent 70%),
    radial-gradient(50% 45% at 70% 60%, rgba(55, 80, 160, .35), transparent 70%),
    linear-gradient(180deg, #0c1438 0%, #080f2c 100%); }
.frame { --r: calc(100cqw / 1672); position: relative; width: 100%; aspect-ratio: 1672 / 941; min-height: 640px; }
.stage { position: absolute; inset: 0; pointer-events: none; }
.pl { position: absolute; left: 0; top: 0; transform: translate3d(calc(var(--mx, 0) * var(--dp, 1) * 1px), calc(var(--my, 0) * var(--dp, 1) * 1px), 0); transition: transform 1.2s var(--ease); will-change: transform; }
.panel { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #1a2350;
  outline: 1px solid rgba(190, 205, 255, .45); box-shadow: 0 0 60px rgba(116, 110, 175, .35), 0 30px 80px -20px rgba(0, 0, 0, .55); opacity: 0; transition: opacity 1.2s var(--ease); }
.stage.is-ready .panel { opacity: 1; }
.panel img { width: 100%; height: 100%; object-fit: cover; }
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 32%, rgba(96, 76, 150, 0) 60%, rgba(124, 86, 168, .22) 100%); pointer-events: none; }
.panel--main { box-shadow: 0 0 90px rgba(126, 104, 180, .5), 0 40px 120px -20px rgba(0, 0, 0, .6); }
.stage.is-ready .panel--ghost { opacity: .32; }
.panel--ghost { outline-color: rgba(190, 205, 255, .2); box-shadow: none; }
.panel--ghost img { filter: blur(2.5px) saturate(.7) brightness(.7); }
.stage.is-ready .panel--deep { opacity: .16; }
.float-txt { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: rgba(225, 230, 255, .78); white-space: nowrap; opacity: 0; transition: opacity 1.4s var(--ease) .4s; }
.stage.is-ready .float-txt { opacity: 1; }
.float-txt.jp { font-weight: var(--fw-regular); font-size: var(--fs-note); letter-spacing: .2em; line-height: 1.9; font-style: italic; }
.float-txt.en { font-family: var(--f-en); font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .24em; line-height: 1.75; }

.scroll-cue { position: absolute; left: calc(var(--r) * 88); bottom: calc(var(--r) * 64); display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .2em; color: rgba(255,255,255,.85); }
.scroll-cue > i { width: 1px; height: 28px; background: rgba(255,255,255,.6); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.scroll-cue .circle-btn { width: 54px; height: 54px; }
.kw { position: absolute; right: calc(var(--r) * 92); bottom: calc(var(--r) * 78); font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .28em; line-height: 1.9; color: rgba(255,255,255,.7); }
.kw::after { content: ""; display: block; width: 54px; height: 2px; margin-top: 18px; background: var(--grad); }

/* 03 理念: 写真が流れ続けるステージ（面＝.plane に matrix3d、列＝.flow を translateX） */
.stage--flow .plane { position: absolute; left: 0; top: 0; width: 1000px; height: 640px; transform-origin: 0 0; }
.flow { position: absolute; left: 0; top: 0; animation: flowX var(--dur, 110s) linear infinite; will-change: transform; }
.flow__set { position: absolute; left: 0; top: 0; }
.flow__set + .flow__set { transform: translateX(calc(var(--L) * -1px)); }
@keyframes flowX { to { transform: translateX(calc(var(--L) * 1px)); } }
.stage--flow .panel { will-change: transform; } /* パネルごとにレイヤー化（列全体の巨大レイヤーを作らない） */
.stage--flow .panel--ghost img { filter: none; } /* ぼかし・彩度・明るさは assets/v2/ghost/ に焼き込み済み（毎フレームのフィルタ処理をなくす） */
/* 流れる写真は既定では描かず、理念に近づいて画面付近に来たものだけ描く（top.js の cull が is-on を付ける） */
.js .stage--flow .panel { visibility: hidden; will-change: auto; }
.js .stage--flow .panel.is-on { visibility: visible; will-change: transform; }
/* 縦積み時は面を k 倍に小さく作る（top.js の setPlaneK）ので、影・枠線の太さも k 倍にして見た目をそろえる。PC は k=1 で従来どおり */
.stage--flow .panel { outline-width: calc(1px * var(--k, 1)); box-shadow: 0 0 calc(60px * var(--k, 1)) rgba(116, 110, 175, .35), 0 calc(30px * var(--k, 1)) calc(80px * var(--k, 1)) calc(-20px * var(--k, 1)) rgba(0, 0, 0, .55); }
.stage--flow .panel--main { box-shadow: 0 0 calc(90px * var(--k, 1)) rgba(126, 104, 180, .5), 0 calc(40px * var(--k, 1)) calc(120px * var(--k, 1)) calc(-20px * var(--k, 1)) rgba(0, 0, 0, .6); }
.stage--flow .panel--ghost { box-shadow: none; }
.flow__txt { position: absolute; margin: 0; white-space: nowrap; color: rgba(225, 230, 255, .78); opacity: 0; transition: opacity 1.4s var(--ease) .4s; }
.stage.is-ready .flow__txt { opacity: 1; }
.flow__txt.jp { font-size: 25px; letter-spacing: .2em; line-height: 1.9; font-style: italic; } /* 面座標px（投影後 ≈12.5px） */
.flow__txt.en { font-family: var(--f-en); font-style: italic; font-size: 24px; letter-spacing: .24em; line-height: 1.75; }
.philo.is-off .flow, .philo.is-paused .flow { animation-play-state: paused; }
.flow-pause { position: absolute; right: calc(var(--r) * 92); bottom: calc(var(--r) * 78 + 132px); z-index: 3; }
@media (min-width: 1100px) {
  /* 流れてきた写真が見出し・本文の背後を通るときは薄くして読みやすさを保つ */
  /* 3つの穴（本文／右下キーワード／左下SCROLL）を intersect で重ねる。% はフレーム（1672×941固定比）基準 */
  .stage--flow {
    --m-txt: radial-gradient(22% 30% at 17% 40%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.14) 55%, #000 100%);
    --m-kw: radial-gradient(10% 17% at 93% 83%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.3) 55%, #000 100%);
    --m-cue: radial-gradient(9% 17% at 6% 85%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 55%, #000 100%);
    -webkit-mask-image: var(--m-txt), var(--m-kw), var(--m-cue); -webkit-mask-composite: source-in, source-in;
    mask-image: var(--m-txt), var(--m-kw), var(--m-cue); mask-composite: intersect;
  }
}

/* 03 PHILOSOPHY */
.philo__txt { position: absolute; left: calc(var(--r) * 96); top: calc(var(--r) * 200); width: calc(var(--r) * 700); }
.philo__title { margin-top: calc(var(--r) * 46); font-weight: var(--fw-medium); font-size: var(--fs-statement); line-height: 1.5; letter-spacing: .02em; word-break: keep-all; }
.philo__title .sm { font-size: 1em; } /* 見出し内の助詞も同寸 */
.philo__title .grad { font-weight: var(--fw-bold); }
.dash { display: block; width: 30px; height: 2px; background: #fff; margin: calc(var(--r) * 40) 0 calc(var(--r) * 30) 4px; }
.philo__body { font-weight: var(--fw-regular); font-size: var(--fs-body-sub); line-height: 2; letter-spacing: .018em; color: rgba(255,255,255,.92); }

/* 04 MVV */
.mvv__head { position: absolute; left: calc(var(--r) * 86); top: calc(var(--r) * 138); display: flex; align-items: flex-end; gap: 20px; }
.mvv__label { font-family: var(--f-en); font-weight: var(--fw-semibold); font-size: var(--fs-label); letter-spacing: .22em; line-height: 1.8; }
.mvv__label span { font-family: var(--f-jp); font-weight: var(--fw-bold); font-size: var(--fs-meta); letter-spacing: .04em; }
.mvv__head .bar { margin-bottom: 11px; }
.mvv__slides { position: absolute; left: calc(var(--r) * 86); top: calc(var(--r) * 258); width: calc(var(--r) * 540); }
.mvv__slide { animation: slideIn .9s var(--ease) both; min-height: max(230px, calc(var(--r) * 290)); } /* 既存サイズの文字に合わせて詰めた（4枚で操作ボタンの位置を揃える） */
@keyframes slideIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mvv__cat { font-family: var(--f-en); font-weight: var(--fw-bold); font-size: var(--fs-label); line-height: 1.8; letter-spacing: .3em; color: rgba(255,255,255,.8); }
.mvv__statement { margin-top: calc(var(--r) * 22); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: 1.4; letter-spacing: -.02em; }
.mvv__statement .grad { font-weight: var(--fw-bold); }
.mvv__statement--long { font-size: var(--fs-h3); line-height: 1.6; word-break: keep-all; }
.mvv__statement ruby rt { font-size: .36em; letter-spacing: .1em; font-weight: 500; }
.mvv__body { margin-top: calc(var(--r) * 34); font-weight: var(--fw-regular); font-size: var(--fs-body-sub); line-height: 1.95; letter-spacing: .018em; color: rgba(255,255,255,.9); }
.mvv__values { margin-top: calc(var(--r) * 34); display: flex; flex-wrap: wrap; gap: .5em 0; font-weight: var(--fw-regular); font-size: var(--fs-body-sub); line-height: 1.95; letter-spacing: .018em; color: rgba(255,255,255,.9); }
.mvv__values li { white-space: nowrap; }
.mvv__values li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--grad); margin: 0 .9em; vertical-align: .22em; }
.mvv__ctrl { display: flex; align-items: center; gap: calc(var(--r) * 40); margin-top: calc(var(--r) * 20); }
.mvv__count { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-body); letter-spacing: .08em; color: rgba(255,255,255,.7); margin-left: 16px; }
.mvv__count b { color: #fff; font-weight: var(--fw-semibold); line-height: 1.8; letter-spacing: .08em; }
.mvv__pause, .flow-pause { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; color: #fff; opacity: .75; transition: opacity .3s; }
.mvv__pause:hover, .flow-pause:hover { opacity: 1; }
.mvv__pause i, .flow-pause i { width: 7px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.flow-pause[aria-pressed="true"] i,
.mvv__pause[aria-pressed="true"] i { width: 0; height: 0; border-right: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 3px; }
.mvv.no-auto .mvv__pause { display: none; }
.panel--mvv img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 6s var(--ease); }
.panel--mvv img.is-on { opacity: 1; transform: scale(1); }
.panel__cap { position: absolute; right: 7%; top: 11%; z-index: 2; font-family: var(--f-en); font-style: italic; font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .22em; line-height: 1.8; color: rgba(40, 48, 90, .75); text-align: left; }
.panel__cap::after { content: ""; display: block; width: 58px; height: 1px; background: currentColor; margin-top: 14px; }
.ghost-cap { position: absolute; left: 20%; bottom: 14%; font-family: var(--f-en); font-style: italic; font-size: 22px; letter-spacing: .2em; line-height: 1.8; color: #fff; }

.mvv__tabs { position: absolute; left: calc(var(--r) * 78); right: max(240px, calc(var(--r) * 250)); bottom: calc(var(--r) * 52); display: grid; grid-template-columns: 1fr 1fr 1.45fr 1fr; }
.mvv__tab { position: relative; display: flex; gap: 22px; text-align: left; padding: 8px calc(var(--r) * 30) 18px 0; color: rgba(255,255,255,.55); transition: color .4s; }
.mvv__tab + .mvv__tab { padding-left: calc(var(--r) * 48); border-left: 1px solid rgba(255,255,255,.18); }
.mvv__tab .n { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1; padding-top: 2px; }
.mvv__tab .t { font-weight: var(--fw-regular); font-size: var(--fs-note); line-height: 1.7; letter-spacing: .04em; word-break: keep-all; }
.mvv__tab .t b { display: block; font-family: var(--f-en); font-weight: var(--fw-bold); font-size: var(--fs-label); letter-spacing: .12em; margin-bottom: 6px; }
.mvv__tab ruby rt { font-size: .6em; }
.mvv__tab.is-on { color: #fff; }
.mvv__tab.is-on .t b { color: var(--c3); filter: brightness(1.25); }
.mvv__tab .prog { position: absolute; left: 0; bottom: 0; width: calc(var(--r) * 188); height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; opacity: 0; }
.mvv__tab + .mvv__tab .prog { left: calc(var(--r) * 48); }
.mvv__tab .prog::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.mvv__tab.is-on .prog { opacity: 1; }
.mvv__tab.is-on .prog::after { animation: prog var(--dur, 8s) linear forwards; }
.mvv.is-paused .mvv__tab.is-on .prog::after { animation-play-state: paused; }
.mvv.no-auto .mvv__tab.is-on .prog::after { animation: none; transform: scaleX(1); }
@keyframes prog { to { transform: scaleX(1); } }
.mvv__tab:hover { color: rgba(255,255,255,.9); }
.scroll-next { position: absolute; right: calc(var(--r) * 58); bottom: calc(var(--r) * 62); display: flex; align-items: center; gap: 18px; font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .16em; line-height: 1.8; color: rgba(255,255,255,.8); }

/* =========================================================
   05 SERVICE
   ========================================================= */
.svc { position: relative; background: linear-gradient(180deg, #f3f6fc 0%, #f7f9fd 60%, #fff 100%); overflow: hidden; }
.svc__top { position: relative; min-height: clamp(520px, 38vw, 700px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: calc(var(--hd-h) + 20px) var(--gut) 150px; }
.svc__visual { position: absolute; inset: 0 0 0 30%; }
.svc__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 34%; filter: saturate(.95) brightness(1.04);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 78%, rgba(0,0,0,.55) 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 78%, rgba(0,0,0,.55) 100%); }
.svc__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,246,252,.2), rgba(243,246,252,0) 40%, rgba(236,242,252,.55) 85%), linear-gradient(0deg, rgba(243,246,252,.9) 0%, rgba(243,246,252,0) 30%); }
.svc__intro { position: relative; }
.svc__intro .lead { margin-top: 26px; line-height: 1.9; }
.svc__aside { position: relative; align-self: end; padding-bottom: 10px; display: flex; flex-direction: column; gap: 22px; min-width: 260px; }
.script { font-family: var(--f-script); font-weight: var(--fw-semibold); font-size: var(--fs-item-title); line-height: 1.5; color: var(--c1); text-shadow: 0 2px 16px rgba(255,255,255,.8); }
.script span { display: inline-block; transform: rotate(-6deg) skewX(-8deg); transform-origin: left; }
.svc__kw { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .2em; line-height: 1.9; color: var(--ink-2); }
.play { display: inline-flex; align-items: center; gap: 22px; font-family: var(--f-en); font-weight: var(--fw-semibold); font-size: var(--fs-more); letter-spacing: .18em; color: var(--ink); align-self: flex-start; }
.play .circle-btn { background: rgba(255,255,255,.7); backdrop-filter: blur(6px); }
.tri { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 4px; }
.play:hover .circle-btn { background: var(--ink); color: #fff; }
.play:hover .circle-btn > i { color: #fff; }

.svc__tabs { position: relative; margin-top: -110px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; padding: 26px var(--gut); background: rgba(255,255,255,.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block: 1px solid rgba(255,255,255,.8); box-shadow: 0 10px 40px -30px rgba(20,30,80,.3); }
.svc__tablist { display: flex; gap: clamp(20px, 3.4vw, 64px); overflow-x: auto; scrollbar-width: none; }
.svc__tab { position: relative; display: flex; align-items: baseline; gap: 20px; padding: 12px 0 16px; font-weight: var(--fw-semibold); font-size: var(--fs-card-title); letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; transition: color .3s; }
.svc__tab span { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-body); }
.svc__tab::after { content: ""; position: absolute; left: 0; right: -20px; bottom: 0; height: 3px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.svc__tab.is-on { color: var(--ink); font-weight: 700; }
.svc__tab.is-on::after { transform: scaleX(1); }
.svc__tab:hover { color: var(--ink); }
.svc__desc { padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--line); }
.svc__panel { display: flex; align-items: center; gap: clamp(20px, 3vw, 64px); animation: slideIn .6s var(--ease) both; }
.svc__panel .link-u { flex: none; }
.svc__text { font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.8; letter-spacing: .017em; color: var(--ink); max-width: 470px; min-height: 3.7em; display: flex; align-items: center; }

.fields { position: relative; margin-top: 18px; }
.fields__head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(24px, 5vw, 90px); align-items: center; padding: 22px var(--gut) 24px; background: linear-gradient(90deg, rgba(232, 239, 252, .9), rgba(240, 244, 252, .6)); }
.fields__en { grid-column: 1; font-family: var(--f-en); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); line-height: 1.8; letter-spacing: .22em; color: var(--ink-2); }
.fields__title { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 26px; font-weight: var(--fw-bold); font-size: var(--fs-h2); letter-spacing: -.02em; line-height: 1.45; white-space: nowrap; }
.fields__title .bar { width: 50px; }
.fields__sub { grid-column: 2; grid-row: 1 / 3; font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: 1.9; letter-spacing: .016em; color: var(--ink-2); padding-top: 20px; }
.fields__ctrl { grid-column: 3; grid-row: 1 / 3; display: flex; align-items: center; gap: 14px; padding-top: 20px; }
.fields__ctrl .link-u { margin-right: 22px; font-weight: var(--fw-semibold); font-size: var(--fs-more); } /* --flat の500を600で上書き */
.fields__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.fields__list::-webkit-scrollbar { display: none; }
/* 文字と番号は流し込み（絶対配置だと文字量で番号に重なる）。overflow:clip はスクロールコンテナにならないので aspect-ratio の箱が内容に合わせて伸びる */
.field { position: relative; flex: 0 0 25%; min-width: 300px; aspect-ratio: 1.9; overflow: clip; scroll-snap-align: start; background: #dfe8f7; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding-block: clamp(18px, 2.2vw, 36px) clamp(12px, 1.4vw, 22px); }
/* 横の余白は子の margin（% がカード幅基準になる。padding の % はリスト幅基準になってしまう） */
.field__t, .field__n { margin-left: 11%; margin-right: 30%; }
.field img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; transition: transform 1.2s var(--ease); }
.field::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(236, 243, 253, .96) 0%, rgba(236, 243, 253, .82) 34%, rgba(236, 243, 253, 0) 68%), linear-gradient(0deg, rgba(210, 225, 250, .35), transparent 50%); }
.field::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(255,255,255,.8); z-index: 2; }
.field:hover img { transform: scale(1.06); }
.field__t { position: relative; z-index: 2; color: var(--ink); }
.field__t .en { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-body); letter-spacing: .12em; line-height: 1.2; }
.field__t h4 { margin-top: 8px; font-weight: var(--fw-semibold); font-size: var(--fs-item-title); letter-spacing: .015em; line-height: 1.6; white-space: nowrap; }
.field__t h4 + p { margin-top: 12px; font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.8; letter-spacing: .017em; color: var(--ink-2); }
.field__n { position: relative; z-index: 2; font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-body); color: rgba(17, 26, 60, .45); }

/* AND MORE（ケイパ資料 p6 TRACTION の組み方: 番号・領域名・短い下線・実績の箇条書き）。箱にせず罫線で4列に区切る */
.more { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(26px, 2.6vw, 44px); padding-block: clamp(40px, 3.2vw, 56px) 30px; }
.more__txt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 80px); align-items: end; }
.more__txt .eyebrow { grid-column: 1 / -1; }
.more__txt .h3 { grid-column: 1; }
.more__txt .lead { grid-column: 2; line-height: 1.9; margin-top: 0; padding-bottom: 6px; }
.traction { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.traction__item { padding: 22px clamp(16px, 1.8vw, 30px) 26px; border-left: 1px solid var(--line); }
.traction__item:first-child { border-left: 0; padding-left: 0; }
.traction__no { font-family: var(--f-en); font-weight: var(--fw-semibold); font-size: var(--fs-label); letter-spacing: .1em; color: var(--c3); }
.traction__title { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-weight: var(--fw-bold); font-size: var(--fs-card-title); line-height: 1.5; letter-spacing: .02em; color: var(--ink); }
.traction__title span { font-family: var(--f-en); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); letter-spacing: .22em; color: var(--ink-3); }
.traction__title::after { content: ""; width: 28px; height: 2px; margin-top: 12px; background: var(--c3); border-radius: 2px; }
.traction__list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.traction__list li { position: relative; padding-left: 14px; font-size: var(--fs-body); line-height: 1.75; letter-spacing: .02em; color: var(--ink-2); }
.traction__list li::before { content: ""; position: absolute; left: 0; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); }
.traction__list a { border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.traction__list a:hover { color: var(--ink); border-color: currentColor; }
.svc__foot { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding-block: 20px clamp(48px, 5vw, 72px); }
.svc__kws { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .2em; color: var(--ink-2); white-space: nowrap; }
.svc__kws i { font-style: normal; margin: 0 .6em; }
.svc__rule { flex: 1; height: 1px; background: var(--line); max-width: 300px; }
.svc__msg { flex: 1; font-weight: var(--fw-regular); font-size: var(--fs-note); line-height: 1.8; letter-spacing: .019em; }

/* =========================================================
   06 CLIENTS
   ========================================================= */
.clients { position: relative; padding-block: clamp(70px, 8vw, 150px); background: linear-gradient(180deg, #fff 0%, #eef3fb 30%, #eaf0fa 70%, #fff 100%); overflow: hidden; }
.clients__streaks { position: absolute; inset: -20%; pointer-events: none; opacity: .9;
  background:
    linear-gradient(172deg, transparent 38%, rgba(255,255,255,.95) 44%, transparent 52%),
    linear-gradient(186deg, transparent 58%, rgba(255,255,255,.8) 63%, transparent 70%),
    linear-gradient(160deg, transparent 20%, rgba(214, 226, 248, .7) 30%, transparent 40%),
    linear-gradient(200deg, transparent 70%, rgba(214, 226, 248, .6) 80%, transparent 90%);
  filter: blur(18px); }
.band { position: relative; padding-block: clamp(26px, 2.6vw, 44px); background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.72) 25%, rgba(255,255,255,.72) 75%, rgba(255,255,255,0)); overflow: hidden; }
.band--2 { margin-top: clamp(20px, 2.2vw, 36px); }
.band__track { display: flex; width: max-content; }
/* 複製はJSで作るので、JSが動くときだけ流す（JS無効時は静止表示） */
.js .band__track[style*="--rep"] { animation: marquee var(--dur, 40s) linear infinite; }
.band[data-dir="right"] .band__track { animation-direction: reverse; }
.band:hover .band__track { animation-play-state: paused; }
.band__track li { flex: none; display: grid; place-items: center; width: clamp(200px, 17vw, 300px); height: clamp(52px, 4vw, 72px); padding: 0 clamp(20px, 2.2vw, 40px); }
.band__track img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
html:not(.js) .band__track { width: auto; flex-wrap: wrap; justify-content: center; }
@keyframes marquee { to { transform: translateX(calc(-100% / var(--rep, 2))); } }
.clients__note { position: relative; margin-top: clamp(24px, 2.4vw, 40px); text-align: center; font-weight: var(--fw-regular); font-size: var(--fs-note); line-height: 1.8; color: var(--ink-3); letter-spacing: .019em; }
.band__edge { position: absolute; top: 0; bottom: 0; width: 14%; z-index: 1; pointer-events: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.band__edge--l { left: 0; background: linear-gradient(90deg, rgba(238, 243, 251, .95), rgba(238, 243, 251, 0)); -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent); }
.band__edge--r { right: 0; background: linear-gradient(270deg, rgba(238, 243, 251, .95), rgba(238, 243, 251, 0)); -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent); mask-image: linear-gradient(270deg, #000 30%, transparent); }

/* =========================================================
   07 MEDIA
   ========================================================= */
.media { background: #fbfcfe; padding-block: clamp(70px, 6vw, 110px) clamp(80px, 7vw, 120px); }
.media .wrap > * { max-width: 1640px; margin-inline: auto; }
.media__head { display: flex; justify-content: space-between; align-items: center; }
.media__title { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 40px); font-family: var(--f-en); font-weight: var(--fw-bold); font-size: var(--fs-h2); letter-spacing: .1em; line-height: 1; color: var(--ink); }
.media__head .link-u { font-weight: var(--fw-semibold); font-size: var(--fs-more); letter-spacing: .2em; } /* --flat の500を600で上書き */
.media__grid { margin-top: clamp(30px, 2.6vw, 46px); display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(20px, 2vw, 34px); }
.feat { position: relative; display: block; min-height: 420px; border-radius: 10px; overflow: hidden; background: #1a2350; color: #fff; }
.feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 20, 48, .85) 0%, rgba(10, 20, 48, .45) 38%, rgba(10, 20, 48, 0) 62%); }
.feat:hover img { transform: scale(1.04); }
.feat__t { position: absolute; z-index: 1; left: clamp(20px, 3.4%, 34px); right: clamp(20px, 3.4%, 34px); bottom: clamp(24px, 4%, 40px); }
.feat h3 { margin-top: 16px; font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: 1.45; letter-spacing: .013em; }
.feat .arw { position: absolute; right: 12px; bottom: 8px; width: 78px; }
.mlist { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.mlist .mitem { display: grid; grid-template-columns: clamp(140px, 12.5vw, 216px) minmax(0, 1fr); align-items: center; gap: clamp(18px, 1.8vw, 30px); padding-right: 6px; }
.mlist img { width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 5px; }
.mlist h3 { margin-top: 8px; font-weight: var(--fw-semibold); font-size: var(--fs-card-title); line-height: 1.7; letter-spacing: .016em; }
.mlist .meta { font-size: 13px; }
.soon { display: inline-block; padding: 1px 10px; border: 1px solid currentColor; border-radius: 999px; font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .12em; }
.is-soon img { filter: saturate(.6); }

/* =========================================================
   08 RECRUIT
   ========================================================= */
.recruit { position: relative; overflow: hidden; background: linear-gradient(100deg, #f4f7fd 0%, #f8faff 40%, #eef4fc 100%); }
.recruit__visual { position: absolute; right: 0; top: 0; width: 60%; height: 76%; clip-path: polygon(18% 0, 100% 0, 100% 56%, 42% 100%, 0 100%); }
.recruit__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 100%; }
.recruit__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 30%), linear-gradient(75deg, rgba(248,250,255,.85) 0%, rgba(248,250,255,0) 25%); }
.recruit__glare { position: absolute; left: 12%; top: 0; width: 12%; height: 100%; background: linear-gradient(90deg, transparent, rgba(215, 190, 255, .55), rgba(255,255,255,.6), transparent); transform: skewX(-12deg); filter: blur(10px); mix-blend-mode: screen; }
.recruit__in { position: relative; padding: calc(var(--hd-h) + 40px) var(--gut) 40px; }
.recruit__title { margin-top: 22px; font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: 1.45; letter-spacing: -.02em; }
.recruit__title .grad { font-weight: var(--fw-bold); }
.recruit .eyebrow { font-weight: var(--fw-semibold); font-size: var(--fs-label); line-height: 1.8; letter-spacing: .22em; } /* 現行の採用見出しラベル 12/600 */
.recruit .lead { margin-top: 26px; font-size: var(--fs-lead); line-height: 1.9; letter-spacing: .016em; }
.recruit__en { margin-top: 26px; font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .2em; line-height: 1.8; color: var(--ink-3); }
.recruit__en::after { content: ""; display: block; width: 60px; height: 1px; background: var(--ink-3); margin-top: 16px; }
.jobs { margin-top: 30px; display: grid; grid-template-columns: 1fr 1.08fr; gap: 18px; max-width: 1060px; }
.job { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); padding: 26px 64px 22px 20px; border-radius: 6px; background: rgba(255,255,255,.62); border: 1px solid rgba(61, 90, 171, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -32px rgba(30, 40, 110, .45); transition: opacity 1s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), background-color .4s; }
.job:hover { transform: translateY(-4px); background: rgba(255,255,255,.85); box-shadow: 0 26px 50px -30px rgba(30, 40, 110, .5); }
.job--2 { background: linear-gradient(120deg, rgba(255,255,255,.62) 50%, rgba(233, 222, 255, .6)); }
.job__n { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-body); letter-spacing: .08em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2; }
.job h3 { font-family: var(--f-en); font-weight: var(--fw-semibold); font-size: var(--fs-item-title); letter-spacing: .14em; line-height: 1.3; margin-top: 6px; }
.job h3 + p { margin-top: 10px; font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.8; letter-spacing: .017em; padding-bottom: 14px; border-bottom: 1px solid rgba(17,26,60,.2); }
.job__tags { margin-top: 12px; font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .16em; color: var(--ink-2); }
.job__tags i { font-style: normal; margin: 0 .8em; }
.job > .arw { position: absolute; right: 26px; top: 40px; }
.story { margin-top: 26px; max-width: 1440px; }
.story__head { display: flex; justify-content: space-between; align-items: center; max-width: 1540px; }
.story__label { font-family: var(--f-en); font-weight: var(--fw-semibold); font-size: var(--fs-label); line-height: 1.8; letter-spacing: .22em; display: flex; align-items: center; gap: 18px; }
.story__label .bar { width: 44px; }
.link-jp { display: inline-flex; align-items: center; gap: 16px; font-weight: var(--fw-semibold); font-size: var(--fs-body); line-height: 1.8; letter-spacing: .017em; }
.story__list { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.scard { position: relative; display: grid; grid-template-columns: 38% minmax(0, 1fr); height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.scard:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -30px rgba(20,30,80,.5); }
.scard img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.scard > div { padding: 14px 44px 16px 18px; }
.scard__no { font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .08em; }
.scard h3 { font-weight: var(--fw-semibold); font-size: var(--fs-card-title); letter-spacing: .016em; line-height: 1.7; margin-top: 2px; }
.scard__role { font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); color: var(--ink-3); letter-spacing: .14em; }
.scard__catch { margin-top: 12px; font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.8; letter-spacing: .017em; }
.scard > .arw { position: absolute; right: 18px; top: 26px; width: 18px; }
.recruit__foot { margin-top: 34px; display: flex; align-items: center; gap: 18px; font-family: var(--f-en); font-weight: var(--fw-regular); font-size: var(--fs-eyebrow); letter-spacing: .24em; color: var(--ink-2); }
.recruit__foot::before, .recruit__foot::after { content: ""; height: 1px; background: rgba(17,26,60,.25); }
.recruit__foot::before { width: 60px; }
.recruit__foot::after { width: min(330px, 30vw); }

/* =========================================================
   FOOTER
   ========================================================= */
.ft { background: radial-gradient(60% 80% at 90% 0%, rgba(140, 90, 156, .28), transparent 60%), var(--navy-950); color: #fff; }
.ft__cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px 60px; padding-block: clamp(56px, 6vw, 96px); border-bottom: 1px solid rgba(255,255,255,.1); }
.ft__catch { font-weight: var(--fw-bold); font-size: var(--fs-display); letter-spacing: -.02em; line-height: 1.4; }
.ft__cta-lead { margin-top: 12px; font-size: var(--fs-body); line-height: 1.9; color: rgba(255,255,255,.72); } /* 本番CTAのリード文（全ページ共通のフッターに集約） */
.ft__main { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 40px 60px; padding-block: 56px 40px; }
.ft__brand img { height: 36px; width: auto; }
.ft__brand p { margin-top: 20px; font-weight: var(--fw-regular); font-size: var(--fs-footer); color: rgba(255,255,255,.65); line-height: 1.75; letter-spacing: .021em; }
.ft__info div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ft__info dt { color: rgba(255,255,255,.5); font-weight: var(--fw-semibold); font-size: var(--fs-xs); line-height: 1.8; letter-spacing: .04em; }
.ft__info dd { margin: 0; font-weight: var(--fw-regular); font-size: var(--fs-footer-dd); line-height: 1.65; letter-spacing: .02em; }
.ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-weight: var(--fw-regular); font-size: var(--fs-footer); line-height: 1.2; letter-spacing: .021em; align-content: start; }
.ft__nav a { color: rgba(255,255,255,.8); padding: 4px 0; }
.ft__nav a:hover { color: #fff; }
.ft__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 22px 32px; font-weight: var(--fw-regular); font-size: var(--fs-xs); line-height: 1.8; color: rgba(255,255,255,.5); font-family: var(--f-en); letter-spacing: .08em; }
.ft__legal { display: flex; flex-wrap: wrap; gap: 6px 24px; font-family: var(--f-jp); font-size: var(--fs-xs); line-height: 1.8; letter-spacing: .022em; }
.ft__legal a:hover { color: #fff; }

/* movie modal */
.modal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 20px; }
.modal__bg { position: absolute; inset: 0; background: rgba(6, 11, 32, .82); backdrop-filter: blur(6px); }
.modal__box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.modal__box video { width: 100%; height: 100%; }
.modal__x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.5); }
.modal__x span { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: #fff; }
.modal__x span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.modal__x span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* ヘッダー: ナビ7項目＋キャッチコピー＋ボタン類は実測で約1440px必要 → 余裕を見て1500px未満はキャッチコピーを隠す（ナビ単体は1160pxから収まる＝1180pxで畳む） */
@media (max-width: 1499px) {
  .hd__tag { display: none; }
}
@media (max-width: 1400px) {
  .field { flex-basis: 33.333%; }
  .story__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1180px) {
  .fields__head { grid-template-columns: minmax(0, 1fr) auto; }
  .fields__title { grid-column: 1; grid-row: 2; white-space: normal; }
  .fields__sub { grid-column: 1; grid-row: 3; padding-top: 8px; }
  .fields__ctrl { grid-column: 2; grid-row: 1 / 4; }
  .hd__nav { display: none; }
  .hd .btn-line { margin-left: auto; }
  .jobs { max-width: none; }
  /* タブ4つ＋説明文が横に収まらない幅では縦積み（IoT開発タブが隠れていた） */
  .svc__tabs { grid-template-columns: 1fr; gap: 10px; }
  .svc__desc { border-left: 0; padding-left: 0; }
  /* AND MORE は 2×2 */
  .traction { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traction__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .traction__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* 1100〜1320px はタブの説明文を隠して高さを抑える（本文との重なり防止） */
@media (min-width: 1100px) and (max-width: 1320px) {
  .mvv__tab .d { display: none; }
  .mvv__tab .t b { margin-bottom: 0; }
}

/* frame sections → stacked */
@media (max-width: 1099px) {
  .frame { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--hd-h) + 20px) var(--gut) 64px; }
  .stage { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: var(--sp-ar, 1.78); margin-top: 36px; }
  .philo__txt, .mvv__head, .mvv__slides, .mvv__tabs, .scroll-cue, .kw, .scroll-next { position: static; width: auto; }
  .philo__txt { order: 1; }
  .philo__title { margin-top: 26px; word-break: auto-phrase; }
  .dash { margin: 26px 0 22px 4px; }
  .scroll-cue, .kw { display: none; }
  .float-txt.en, .flow__txt.en { display: none; }
  .flow-pause { position: static; order: 3; align-self: flex-end; margin-top: 12px; }
  .mvv__head { order: 1; }
  .mvv__slides { order: 1; margin-top: 30px; }
  .mvv__slide { min-height: 0; }
  .mvv__statement { margin-top: 14px; }
  .mvv__body { margin-top: 20px; }
  .mvv__ctrl { position: static; margin-top: 28px; gap: 16px; }
  .mvv__tabs { order: 3; margin-top: 30px; display: flex; overflow-x: auto; scrollbar-width: none; gap: 0; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .mvv__tab { flex: 0 0 auto; min-width: 230px; padding-right: 24px; }
  .mvv__tab + .mvv__tab { padding-left: 24px; }
  .mvv__tab .prog { width: 140px; }
  .mvv__tab + .mvv__tab .prog { left: 24px; }
  .scroll-next { display: none; }
  .ghost-cap { font-size: 11px; }
}

@media (max-width: 900px) {
  :root { --hd-h: 72px; }
  .hd { gap: 14px; }
  .hd.is-scrolled { --hd-h: 64px; }
  .hd__brand { height: 30px; }
  .hd .btn-line { height: 44px; padding: 0 22px; }
  .hd__menu { width: 46px; height: 46px; }
  .menu__close { top: 13px; width: 46px; height: 46px; }
  .hero__meta { display: none; }
  .hero__body { padding-bottom: 56px; }
  .hero__toggle { bottom: 12px; }
  .shead { flex-direction: column; align-items: flex-start; }
  .news__water, .water { font-size: 44vw; top: 30px; }
  .news__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .svc__top { grid-template-columns: 1fr; padding-bottom: 40px; align-items: start; }
  .svc__visual { inset: 0; opacity: .35; }
  .svc__visual img { -webkit-mask-image: none; mask-image: none; }
  .svc__aside { align-self: start; margin-top: 30px; min-width: 0; }
  .svc__tabs { margin-top: 0; grid-template-columns: 1fr; gap: 12px; }
  .svc__tablist { margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); gap: 28px; }
  .svc__desc { border-left: 0; padding-left: 0; }
  .svc__panel { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fields__head { grid-template-columns: 1fr; row-gap: 6px; }
  .fields__title, .fields__sub, .fields__ctrl { grid-column: 1; grid-row: auto; }
  .fields__title { white-space: normal; gap: 16px; }
  .fields__sub { padding-top: 6px; }
  .fields__ctrl { padding-top: 8px; }
  .field { flex-basis: 82%; min-width: 0; }
  .more__txt { grid-template-columns: 1fr; }
  .more__txt .lead { grid-column: 1; margin-top: 16px; }
  .traction { grid-template-columns: 1fr; }
  .traction__item, .traction__item:first-child { border-left: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .svc__foot { flex-wrap: wrap; }
  .svc__rule { display: none; }
  .svc__kws { white-space: normal; }
  .media__grid { grid-template-columns: 1fr; }
  .feat { min-height: 0; aspect-ratio: 1.15; }
  .mlist .mitem { grid-template-columns: 120px minmax(0, 1fr); }
  .recruit__visual { position: relative; width: 100%; height: 300px; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); margin-bottom: -40px; }
  .recruit__in { padding-top: 40px; }
  .recruit__glare { display: none; }
  .jobs { grid-template-columns: 1fr; }
  .story__list { grid-template-columns: 1fr; }
  .ft__cta { grid-template-columns: 1fr; }
  .ft__main { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hd .btn-line { display: none; }
  .hd__menu { margin-left: auto; }
  .hero__btns { flex-direction: column; align-items: stretch; }
  .mvv__tab { min-width: 200px; }
  .job { grid-template-columns: 48px minmax(0, 1fr); padding: 22px 48px 20px 18px; }
  .job > .arw { right: 18px; top: 30px; }
  .scard { grid-template-columns: 34% minmax(0, 1fr); }
  .scard > div { padding-right: 36px; }
  .svc__desc { max-width: none; }
  .feat { aspect-ratio: .95; }
  .media__head { flex-wrap: wrap; gap: 14px 20px; }
  .media__title { gap: 16px; }
  .media__title .bar { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .band__track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; }
  .flow { animation: none !important; } /* 動きを減らす設定ではカンプどおりの静止配置 */
  .flow-pause { display: none; }
}

/* --- 単独で置くテキストリンクの当たり判定（WCAG 2.5.8 の 24×24px）
   .link-u は本文中ではなく単独のボタン的リンクとして使うので、高さが24pxを下回らないようにする。
   見た目（下線の位置・字下げ）は padding ではなく min-height で確保するので変わらない。 --- */
.link-u { min-height: 24px; }

/* --- スマホ最小幅（〜420px）で CTA ボタンが画面からはみ出すのを防ぐ
   .btn-grad / .btn-line は左右46pxの余白＋nowrap なので、320px 幅では本文幅を超える。
   幅の狭いときだけ余白を詰め、親幅で頭打ちにする（文字は折り返さず1行のまま）。 --- */
@media (max-width: 420px) {
  .btn-grad, .btn-line { max-width: 100%; padding-inline: 22px; }
}

/* --- タップ領域（WCAG 2.5.8 の 24×24px）
   1行のテキストだけのリンクは行の高さが 18〜21px にしかならないので、
   行内に収まる範囲で当たり判定だけ広げる（見た目の字送り・行間は変えない）。 --- */
/* inline-flex だと中の <span> ごとに横並びの箱へ分かれて文が崩れる（2026-09-17 本番で発生）→ inline-block */
.crumbs a, .traction__list a { display: inline-block; min-height: 24px; }

/* --- 英字の長い固有名詞（「J-Startup WEST」など）で行が折り返せず、
   グリッドの最小幅が画面幅を超えてしまうのを防ぐ（320px 幅で右端が切れていた）。
   日本語の折り返しは変わらず、入りきらない英単語のときだけ途中で折る。 --- */
.traction__list li { overflow-wrap: anywhere; }

/* --- 掲載写真の無いお知らせ（トップの NEWS 枠）
   tools/publish-news.py は写真の無い記事に .ncard__img--none を出す。
   写真と同じ大きさの面を残し、ラベルだけ載せてカードの高さを揃える。 --- */
.ncard__img--none { background: var(--grad); }
.ncard__img--none .pill { opacity: .95; }

/* --- AND MORE：会社紹介資料（ケイパ）p6「TRACTION」のカード表現で、4領域を横一列に並べる
   見出しは上段（見出し｜リード）。カードは写真が上、淡い面に番号・見出し・下線・箇条書き。 --- */
.more { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.2vw, 20px); row-gap: clamp(12px, 1.2vw, 20px); }
.more__txt { grid-column: 1 / -1; margin-bottom: clamp(8px, 1vw, 16px); }
.more .traction { display: contents; }
.more .traction__item, .more .traction__item:first-child { display: flex; flex-direction: column; grid-column: span 3; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--paper); }
.traction__body { padding: clamp(18px, 1.6vw, 26px) clamp(18px, 1.6vw, 26px) clamp(22px, 1.8vw, 30px); }
.traction__img { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--line); }
.traction__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.traction__item:hover .traction__img img { transform: scale(1.04); }
.more .traction__item:first-child .traction__img img { object-position: 0% 0% !important; }
.more .traction__title::after { width: 32px; height: 3px; margin-top: 12px; }
/* 4列だと1枚が狭くなる幅は2列に */
@media (max-width: 1180px) {
  .more .traction__item, .more .traction__item:first-child { grid-column: span 6; }
}
@media (max-width: 900px) {
  .more .traction__item, .more .traction__item:first-child { grid-column: 1 / -1; }
}
/* スマホ：縦に長くなりすぎないよう、写真を横長にして余白を詰める */
@media (max-width: 560px) {
  .more { row-gap: 12px; }
  .more .traction__img { aspect-ratio: 2 / 1; }
  .traction__body { padding: 16px 18px 20px; }
  .more .traction__title { margin-top: 4px; }
  .more .traction__title::after { margin-top: 10px; }
  .more .traction__list { margin-top: 12px; gap: 6px; }
  .more__txt .lead { margin-top: 12px; }
}

/* 別のタブで開くリンクに付ける小さな矢印（採用LPは単独のページなので別タブで開く） */
.ext { display: inline-block; width: 9px; height: 9px; margin-left: 6px; vertical-align: 1px; border: 1px solid currentColor; border-radius: 1px; opacity: .75; position: relative; }
.ext::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; background: #fff0; }
.sec--dark .ext::after, .menu .ext::after { background: transparent; }

/* 03 理念 → 04 MVV のつなぎ: 境目の色をそろえ、流れる写真の下段を MVV 見出しの背後まで伸ばす */
.philo { overflow: hidden; } /* overflow: clip 未対応の古い Safari（15以前）は従来どおり全方向で切る */
@supports (overflow: clip) { .philo { overflow-x: clip; overflow-y: visible; } } /* 横は従来どおり切り、下へのはみ出しだけ通す（clip はスクロールコンテナを作らない） */
.philo .stage--flow { z-index: 1; }                /* 写真は MVV の背景より手前 */
.mvv > .frame { z-index: 2; }                      /* MVV の文字・写真は流れる写真より手前 */
.panel--low { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 40%, transparent 88%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 40%, transparent 88%); }
/* 背景: 理念の下端と MVV の上端を同じ色にし、境目で光が切れないよう光の位置を内側へ寄せる */
.philo .fsec__glow { bottom: -2px; /* 高さが小数pxのとき境目の1pxに下地（白）が透けて線に見えるのを防ぐ */
  background:
    radial-gradient(40% 45% at 88% 62%, rgba(124, 86, 168, .45), transparent 70%),
    radial-gradient(45% 40% at 70% 18%, rgba(61, 90, 171, .35), transparent 70%),
    radial-gradient(60% 60% at 10% 30%, rgba(24, 40, 110, .55), transparent 70%),
    linear-gradient(180deg, #0b1438 0%, #0b1336 100%); }
.fsec__glow--mvv { background:
    radial-gradient(28% 30% at 62% 34%, rgba(116, 84, 170, .5), transparent 70%),
    radial-gradient(50% 45% at 70% 64%, rgba(55, 80, 160, .35), transparent 70%),
    linear-gradient(180deg, #0b1336 0%, #080f2c 100%); }
@media (min-width: 1100px) {
  /* 面の表示範囲を下へ 300（フレーム座標）広げる＝data-view の高さ 941→1241 と対。マスクの縦位置は 941/1241 倍に換算 */
  .philo .stage--flow {
    bottom: calc(var(--r) * -300);
    --m-txt: radial-gradient(22% 22.75% at 17% 30.33%, rgba(0,0,0,.05) 0%, rgba(0,0,0,.14) 55%, #000 100%);
    --m-kw: radial-gradient(10% 12.89% at 93% 62.94%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.3) 55%, #000 100%);
    --m-cue: radial-gradient(9% 12.89% at 6% 64.46%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 55%, #000 100%);
  }
}
@media (max-width: 1099px) {
  /* 縦積みでは写真の面が小さく映るため、MVV 側を引き上げて見出しを写真の下段に重ねる。
     面は画面幅に比例して大きく映るので、引き上げ量は幅が広いほど小さくする（375px で -150px・768px で約 -60px） */
  .mvv { margin-top: min(0px, calc(22.9vw - 236px)); }
}