/* ==========================================================================
   AI Security Corporate — corp.css（v2）
   キットの tokens.css / components.css / site.css の後に 1 枚だけ読む。キットの CSS と JS は書き換えない。
   考え方：「走査」と「境界」。1px のロゴ 3 色の光が通ると現れ、紺と白の切り替えはヒーロー下端と同じ楕円の曲線で行う。
   文字の大きさは 9 段階（表示用の英字 > 声明 > H1 > H2 > H3 > リード > 本文 > 補足 > 注記）。
   ========================================================================== */

/* ---------- 0. トークン ---------- */
:root {
  /* 色：深い紺と、ロゴの 3 色 */
  --ink-900: #0b1124; --ink-700: #26304a; --ink-500: #4b5670; --ink-400: #646f8a; --ink-300: #a3adc4;
  --line: #e1e6ef; --line-soft: #edf0f6; --mist: #f2f5fa; --paper: #ffffff; --on-fill: #ffffff;
  --teal-50: #f1f5fe; --teal-100: #e6edfd; --teal-200: #d2defb; --teal-300: #aac2f6; --teal-400: #7fa2ef;
  --teal-500: #5a86e8; --teal-600: #3f6fe0; --teal-700: #2b5bd7; --teal-800: #2349ad; --teal-900: #0b1531;
  --fill-key: #0b1124;
  --logo-1: #83fbf1; --logo-2: #6493df; --logo-3: #5b4cd5;
  --grad-logo: linear-gradient(120deg, #83fbf1 0%, #6493df 52%, #5b4cd5 100%);
  --grad-brand: var(--grad-logo);
  --grad-ink: linear-gradient(100deg, #138e9c 0%, #2b5bd7 55%, #5b4cd5 100%);   /* 白い地の上の文字（コントラスト 3:1 以上） */
  --grad-hero: linear-gradient(135deg, #16245a 0%, #0b1531 60%, #060b1c 100%);
  --grad-dark: linear-gradient(135deg, #0f1d45 0%, #060b1c 100%);
  --night-0: #050914; --night-1: #070d22; --night-2: #0b1531; --night-3: #111f47; --night-4: #1a2c63;
  --on-night: #ffffff; --on-night-2: #c6cfe6; --on-night-3: #93a0c2; --night-line: rgba(255, 255, 255, .12);
  --night-grad: #0a1433;   /* 紺は平らな一色（放射の光は使わない） */
  --aurora-mint: #c5f5f1; --aurora-cyan: #c3d6fb; --aurora-sky: #cdd3fa; --aurora-lav: #dcd2fa;
  --green-700: #2c6fd0; --indigo-600: #5b4cd5; --indigo-400: #a9b6f4; --green-400: #83fbf1;
  --shadow-card: 0 1px 2px rgba(11,17,36,.04), 0 12px 32px rgba(11,17,36,.06);
  --shadow-hover: 0 2px 6px rgba(11,17,36,.05), 0 24px 56px rgba(11,17,36,.12);
  --shadow-hero: 0 18px 48px rgba(11,21,49,.32);

  /* 文字：9 段階（1440px の値 → 390px の値）。表示用の英字の小さめ（サービスの正式名）だけ別に持つ */
  --fs-display: clamp(44px, 8.9vw, 160px);     /* 128 → 44 */
  --fs-display-s: clamp(40px, 7.2vw, 128px);   /* 104 → 40（サービスの正式名） */
  --fs-statement: clamp(32px, 4.45vw, 72px);   /* 64 → 34 */
  --fs-h1: clamp(28px, 3.06vw, 50px);          /* 44 → 28 */
  --fs-h2: clamp(22px, 2.5vw, 40px);           /* 36 → 22（スマホは H1 の 28px と段をつける） */
  --fs-h3: clamp(18px, 1.53vw, 24px);          /* 22 → 18 */
  --fs-lead: clamp(17px, 1.25vw, 19px);        /* 18 → 17（本文より一段大きく） */
  --fs-body: 16px;                              /* スマホでも 16px */
  --fs-small: 14px; --fs-note: 12px;
  --fs-h4: var(--fs-body); --fs-caption: 12px; --fs-label: 12px;
  --fs-en: var(--fs-h1);                        /* セクションの英字のラベル（現在のサイトの文言） */

  /* 配置：12 列。コンテナは最大 1440px、左右の余白は 1440 で 60px */
  --maxw: 1440px; --gutter: clamp(20px, 4.17vw, 96px); --col-gap: clamp(12px, 1.67vw, 24px);
  --sp-xl: clamp(120px, 13.9vw, 200px); --sp-l: clamp(96px, 11.1vw, 160px); --sp-m: clamp(72px, 8.33vw, 120px); --sp-s: clamp(56px, 5.56vw, 80px);
  --sp-section: var(--sp-m); --sp-block: clamp(40px, 4.4vw, 64px);
  --header-h: 76px; --sp-anchor: 120px;
  --cap-h: 120px;                                  /* 境界の曲線の高さ（390 では 56px） */
  --r-card: 24px; --r-stage: 32px; --r-input: 12px;

  /* 動き：考え方の 3.2 のトークン（キットの値も上書きする） */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-in: cubic-bezier(.55, .06, .68, .19);
  --ease-ui: cubic-bezier(.3, .7, .4, 1);
  --ease-expo-out: var(--ease-out); --ease-in-out: var(--ease-inout); --ease-quart-out: var(--ease-out);
  --t-1: 160ms; --t-2: 320ms; --t-3: 560ms; --t-4: 900ms; --t-5: 1200ms;
  --dur-micro: var(--t-1); --dur-fast: var(--t-2);
}
@media (max-width: 899.98px) { :root { --header-h: 64px; --cap-h: 56px; } }
[data-ground="dark"], .theme-dark, .dark, .close, .footer--night {
  --paper: #0b1531; --mist: #111d40; --line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.08);
  --ink-900: #ffffff; --ink-700: #e3e9f7; --ink-500: #c6cfe6; --ink-400: #a3afcc; --ink-300: #7686ad;
  --teal-700: #9fd6ff; --teal-300: #9fd6ff;
}
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink-900); font-size: var(--fs-body); letter-spacing: .02em; }
::selection { background: #cfe0ff; color: #0b1124; }
:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 3px; }
html.on-night .header :focus-visible, .hero--night :focus-visible, .hvh :focus-visible, [data-ground="dark"] :focus-visible, .close :focus-visible, .footer--night :focus-visible, .menu :focus-visible, .recruit :focus-visible, .relc:focus-visible, .ctile:focus-visible, html.mega-open .header :focus-visible { outline-color: #9fd6ff; }
.sel { user-select: all; }
img { max-width: 100%; }
.container { width: min(100% - var(--gutter) * 2, var(--maxw)); }
.lead { color: var(--ink-500); font-size: var(--fs-lead); line-height: 2; }
.prose { max-width: 40em; }
.prose p { font-size: var(--fs-body); line-height: 2; color: var(--ink-700); }
.prose p + p { margin-top: 1.2em; }
.h1, .h2, .h3 { font-feature-settings: "palt" 1; }
.small { font-size: var(--fs-small); }
.caption { font-size: var(--fs-note); }
.sec { padding-block: var(--sp-section); }
.sec-foot { margin-top: clamp(32px, 3.6vw, 48px); display: flex; flex-wrap: wrap; gap: 12px; }
.sec.g-paper + .sec.g-paper:not(.sec--flush-top) > .container { border-top-color: var(--line); }
.progress { display: none; }
[data-page^="article-"] .progress { display: block; background: var(--grad-logo); }
.textlink { color: var(--teal-700); background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(43,91,215,.28), rgba(43,91,215,.28)); background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 360ms var(--ease-out); }
html:not(.is-scrolling) .textlink:hover, .textlink:focus-visible { background-size: 100% 1px, 100% 1px; background-position: 0 100%, 0 100%; }
.kicker { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .08em; color: var(--ink-500); }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad-logo); flex: none; }
.kicker--en { font-family: var(--font-display); letter-spacing: .02em; }
.u-pc { display: inline; }

/* ---------- 1. キットの不具合の打ち消し ---------- */
/* メガメニューを持たない項目に触れても暗くしない（項目は .nav__solo にしてあるが、念のため） */
html.mega-open:not(:has(.nav__grp.is-open .mega)) .mega-scrim { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.aurora { background: #fff; }

/* ---------- 2. ボタンとリンク ---------- */
.btn { height: 56px; padding: 0 8px 0 28px; gap: 18px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .05em; isolation: isolate; overflow: hidden;
  transition: background-color var(--t-2) var(--ease-ui), color var(--t-2) var(--ease-ui), border-color var(--t-2), box-shadow var(--t-2), scale 120ms var(--ease-ui); }
.btn:active { scale: .97; }
.btn--sm { height: 44px; padding-left: 20px; gap: 12px; font-size: var(--fs-small); }
.btn--sm .arrow { width: 30px; height: 30px; }
.btn__t { position: relative; display: inline-grid; overflow: hidden; line-height: 1.6; height: 1.6em; z-index: 1; }
.btn__l { grid-area: 1 / 1; transition: transform 420ms var(--ease-out); white-space: nowrap; }
.btn__l--2 { transform: translateY(100%); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn:hover .btn__l, .btn:focus-visible .btn__l { transform: translateY(-100%); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn:hover .btn__l--2, .btn:focus-visible .btn__l--2 { transform: translateY(0); }
.btn .arrow { position: relative; overflow: hidden; z-index: 1; background: rgba(11,17,36,.06); color: var(--ink-900); transition: background-color var(--t-2), color var(--t-2); }
.btn:hover .arrow, .btn[target="_blank"]:hover .arrow { transform: none; }
.arrow__a, .arrow__b { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 240ms var(--ease-in); }
.arrow__a svg, .arrow__b svg { width: 14px; height: 14px; }
.arrow__b { transform: translateX(-140%); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn:hover .arrow__a { transform: translateX(140%); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn:hover .arrow__b { transform: none; transition: transform 300ms var(--ease-out) 60ms; }
.btn[target="_blank"] .arrow__b { transform: translate(-140%, 140%); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn[target="_blank"]:hover .arrow__a { transform: translate(140%, -140%); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn[target="_blank"]:hover .arrow__b { transform: none; }
/* 主：紺 → 少し明るい紺。内側に 1px のロゴの輪 */
.btn--primary { background: var(--ink-900); color: #fff; box-shadow: none; }
.btn--primary::after, .btn--light::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-logo); opacity: 0; transition: opacity var(--t-2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.btn--primary:hover { box-shadow: none; }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn--primary:hover { background: #16245a; }
.btn--primary:hover::after, .btn--light:hover::after { opacity: 0; }
.btn--primary .arrow { background: rgba(255,255,255,.14); color: #fff; }
.header .btn--primary .arrow { background: rgba(255,255,255,.14); color: #fff; }
.header .btn--primary, .header .btn--primary:hover { box-shadow: none; }   /* ヘッダーが上に隠れたときに、影だけが画面の上端に残らないように */
.btn .arrow, .btn--primary { transform: none !important; }   /* キットの磁力の動きは使わない（矢印がピルの縁で欠けるため）。押したときの縮小は scale で行う */
/* 副：左から塗る */
.btn--ghost { background: transparent; color: var(--ink-900); border: 1px solid rgba(11,17,36,.16); }
.btn--ghost::before, .btn--line::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 0; transform: scaleX(0); transform-origin: left; transition: transform 480ms var(--ease-inout); }
.btn--ghost::before { background: var(--ink-900); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn--ghost:hover { color: #fff; border-color: var(--ink-900); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn--ghost:hover::before, :where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn--line:hover::before { transform: scaleX(1); }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn--ghost:hover .arrow { background: rgba(255,255,255,.14); color: #fff; }
.btn--light { background: #fff; color: #0b1124; box-shadow: none; }
.btn--light .arrow { background: #0b1124; color: #fff; }
.btn--line { background: rgba(255,255,255,.04); color: #fff; border: 1px solid rgba(255,255,255,.34); }
.btn--line::before { background: #fff; }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn--line:hover { color: #0b1124; border-color: #fff; }
.btn--line .arrow { background: rgba(255,255,255,.14); color: #fff; }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .btn--line:hover .arrow { background: #0b1124; color: #fff; }
[data-ground="dark"] .btn--ghost, .close .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); }
[data-ground="dark"] .btn--ghost::before { background: #fff; }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) [data-ground="dark"] .btn--ghost:hover { color: #0b1124; }
.btn--block { width: 100%; justify-content: space-between; }
.btns--center { justify-content: center; margin-top: clamp(40px, 4vw, 56px); }
/* 行の丸い矢印：行のホバーのときだけ出す */
.go { width: 28px; height: 28px; display: grid; place-items: center; flex: none; background: none; color: currentColor; opacity: 0; transform: translateX(-6px); transition: opacity 240ms var(--ease-ui), transform 240ms var(--ease-ui); }
.go svg { width: 18px; height: 18px; }
html:not(.is-scrolling) a:hover > .go, a:focus-visible > .go { opacity: 1; transform: translateX(4px); }   /* 最終監査 9 回目 B-1：送っている間、下を通る行の矢印が出ていた */
.ctile__go, .relc__go, .biz__go, .mvc__go, .acard__go, .sidx__go { opacity: 1; transform: none; }
html:not(.is-scrolling) :is(.ctile, .relc, a.biz, .mvc, .acard a, a.sidx):hover :is(.ctile__go, .relc__go, .biz__go, .mvc__go, .acard__go, .sidx__go),:is(.ctile, .relc, a.biz, .mvc, .acard a, a.sidx):focus-visible :is(.ctile__go, .relc__go, .biz__go, .mvc__go, .acard__go, .sidx__go) { transform: translateX(4px); }

/* ---------- 3. ヘッダー：白い地は明るいガラス、紺の地は暗いガラス、ヒーローの上は透明。下へ送ると隠れる ---------- */
.header { position: sticky; top: env(safe-area-inset-top, 0px); background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(11,17,36,.06); box-shadow: none; transition: background-color 240ms var(--ease-ui), border-color 240ms, transform 360ms var(--ease-out), -webkit-backdrop-filter 240ms, backdrop-filter 240ms; }
.header.is-scrolled { box-shadow: none; background: rgba(255,255,255,.9); }
.header__in { width: 100%; max-width: none; margin: 0; padding-inline: clamp(20px, 2.78vw, 40px); height: var(--header-h); gap: clamp(16px, 2vw, 32px); }
.brand__logo { height: 30px; width: auto; }
.brand__logo--white { display: none; }
.nav { gap: clamp(18px, 2.2vw, 36px); margin-left: auto; }
.nav__solo { display: flex; align-items: center; align-self: stretch; }
.nav__item { padding: 10px 0; }
.nav__item .ja { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--ink-900); transition: color 240ms; }
.nav__item::after { left: 50%; right: auto; width: 100%; height: 1px; background: var(--grad-logo); transform: translateX(-50%) scaleX(0); transform-origin: 50% 50%; transition: transform 320ms var(--ease-out); bottom: 4px; }
.nav__item:hover::after, .nav__item[aria-current="page"]::after, .nav__grp.is-open > .nav__item::after { transform: translateX(-50%) scaleX(1); }
.nav__item[aria-current="page"] .ja, .nav__grp.is-open > .nav__item .ja { color: var(--ink-900); }
.nav__item--ext { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.nav__ext { display: inline-grid; width: 12px; height: 12px; color: var(--ink-400); transition: transform 240ms var(--ease-ui); }
.nav__ext svg { width: 11px; height: 11px; }
.nav__item--ext:hover .nav__ext { transform: translate(2px, -2px); }
.header__cta { gap: 10px; margin-left: clamp(8px, 1.4vw, 20px); }
.icon-btn { position: relative; width: 40px; height: 40px; border-color: rgba(11,17,36,.12); background: transparent; color: var(--ink-700); }
.icon-btn svg { width: 18px; height: 14px; }
.icon-btn .tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--ink-900); color: #fff; font-size: 12px; letter-spacing: .04em;
  opacity: 0; pointer-events: none; transition: opacity 160ms, transform 240ms var(--ease-out); }
.icon-btn:hover .tip, .icon-btn:focus-visible .tip { opacity: 1; transform: translate(-50%, 0); }
.tip__off { display: none; } html.motion-off .tip__on { display: none; } html.motion-off .tip__off { display: inline; }
.burger { width: 44px; height: 44px; border-color: rgba(11,17,36,.14); background: transparent; }
.burger span { position: relative; width: 18px; height: 8px; background: none; box-shadow: none; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink-900); transition: transform 320ms var(--ease-out), top 320ms var(--ease-out); }
.burger span::before { top: 0; } .burger span::after { top: 6.5px; }
.burger[aria-expanded="true"] span { background: none; box-shadow: none; }
.burger[aria-expanded="true"] span::before { top: 3.25px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 3.25px; transform: rotate(-45deg); }
/* 紺の地の上 */
html.on-night .header, html.mega-open .header, html.menu-open .header { background: rgba(5,9,20,.5); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); border-bottom-color: rgba(255,255,255,.08); }
html.on-night.at-top:not(.mega-open):not(.menu-open) .header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
html.mega-open .header { background: #070d22; }
html.menu-open .header { background: #070d22; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }   /* メニューの地と同じ色で塞ぐ（送った項目がロゴの下に透けない） */
:is(html.on-night, html.mega-open, html.menu-open) .header .brand__logo--ink { display: none; }
:is(html.on-night, html.mega-open, html.menu-open) .header .brand__logo--white { display: block; }
:is(html.on-night, html.mega-open) .header .nav__item .ja { color: #fff; }
:is(html.on-night, html.mega-open) .header .nav__ext { color: rgba(255,255,255,.7); }
:is(html.on-night, html.mega-open, html.menu-open) .header .icon-btn { border-color: rgba(255,255,255,.24); color: #fff; }
:is(html.on-night, html.mega-open) .header .btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); }
:is(html.on-night, html.mega-open) .header .btn--ghost::before { background: #fff; }
:is(html.on-night, html.mega-open) .header .btn--ghost:hover { color: #0b1124; }
:is(html.on-night, html.mega-open) .header .btn--ghost .arrow { background: rgba(255,255,255,.14); color: #fff; }
:is(html.on-night, html.mega-open) .header .btn--ghost:hover .arrow { background: #0b1124; }
:is(html.on-night, html.mega-open) .header .btn--primary { background: #fff; color: #0b1124; box-shadow: none; }
:is(html.on-night, html.mega-open, html.menu-open) .header .burger { border-color: rgba(255,255,255,.28); }
:is(html.on-night, html.mega-open, html.menu-open) .header .burger span::before, :is(html.on-night, html.mega-open, html.menu-open) .header .burger span::after { background: #fff; }
/* 下へ送ったら隠し、上へ戻したら出す */
html.hdr-hide:not(.mega-open):not(.menu-open) .header { transform: translateY(calc(-100% - 2px)); }
/* トップ：ヒーローの登場の最後にヘッダーが入る */
[data-hero="video"] .header { animation: hdrIn 760ms var(--ease-out) calc(280ms + var(--vt-delay, 0ms)) both; }
@keyframes hdrIn { from { opacity: 0; translate: 0 -100%; } }

/* メガメニュー：紺のガラス。上から幕が下りるように開く */
.mega { background: #070d22; -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
  opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 240ms var(--ease-in), visibility 0s linear 240ms; color: #fff; }
.nav__grp.is-open > .mega { clip-path: inset(0 0 0 0); transition: clip-path 420ms var(--ease-inout); }
.mega__in { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--col-gap); padding-block: clamp(36px, 3.4vw, 52px); }
.mega__intro { gap: 18px; align-content: start; }
.mega__ja { margin: 0; font-size: var(--fs-h3); font-weight: 500; letter-spacing: .04em; color: #fff; }
.mega__top { margin-top: 0; background: #fff; color: #0b1124; font-size: var(--fs-small); padding: 6px 6px 6px 18px; }
.mega__arr { background: #0b1124; color: #fff; }
.mega__vis { position: relative; margin-top: 8px; width: min(220px, 100%); aspect-ratio: 1; }
.mega__vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 320ms var(--ease-ui); }
.mega__vis img.is-act { opacity: 1; }
.mega__links { border-top-color: rgba(255,255,255,.12); }
.mega__link a { color: #fff; border-bottom-color: rgba(255,255,255,.1); padding: 16px 2px 16px 0; transition: padding 320ms var(--ease-ui); }
.mega__link .t { font-size: var(--fs-small); font-weight: 500; }
.mega__link .a { background: none; color: rgba(255,255,255,.6); transition: transform 240ms var(--ease-ui), color 240ms var(--ease-ui); }
.mega__link .a svg { width: 16px; height: 16px; }
.mega__link a:hover, .mega__link a:focus-visible { padding-left: 8px; }
.mega__link a:hover .t, .mega__link a:focus-visible .t, .mega__link a[aria-current="page"] .t { color: #9fd6ff; }
.mega__link a:hover .a, .mega__link a:focus-visible .a { background: none; color: #fff; transform: translateX(4px); }
.mega__link { opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 300ms var(--ease-out); }
.nav__grp.is-open .mega__link { opacity: 1; transform: none; transition: opacity 320ms var(--ease-ui), transform 420ms var(--ease-out); }
.nav__grp.is-open .mega__link:nth-child(2) { transition-delay: 24ms; } .nav__grp.is-open .mega__link:nth-child(3) { transition-delay: 48ms; }
.nav__grp.is-open .mega__link:nth-child(4) { transition-delay: 72ms; } .nav__grp.is-open .mega__link:nth-child(5) { transition-delay: 96ms; }
.nav__grp.is-open .mega__link:nth-child(6) { transition-delay: 120ms; } .nav__grp.is-open .mega__link:nth-child(7) { transition-delay: 144ms; }
.nav__grp.is-open .mega__link:nth-child(8) { transition-delay: 168ms; } .nav__grp.is-open .mega__link:nth-child(9) { transition-delay: 192ms; }
.nav__grp.is-open .mega__link:nth-child(10) { transition-delay: 216ms; }
.mega__links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-scrim { top: var(--header-h); background: rgba(5,9,20,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.motion-off .mega, html.motion-off .mega__link { transition: none !important; }

/* スマホのメニュー：紺の全画面。右上のボタンを中心に円で開く */
.menu { background: #070d22; color: #fff; opacity: 1; transform: none; visibility: hidden; clip-path: circle(0% at calc(100% - 42px) 32px);
  transition: clip-path 420ms var(--ease-inout), visibility 0s linear 420ms; padding: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 12px) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px); gap: 0; overflow-x: hidden; }
.menu.is-open { visibility: visible; clip-path: circle(150% at calc(100% - 42px) 32px); transition: clip-path 560ms var(--ease-inout); }
.menu nav { position: relative; z-index: 1; display: grid; }
.menu__group { margin: 28px 0 6px; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; letter-spacing: .08em; text-transform: none; color: var(--on-night-3); }
.menu__item { min-height: 56px; padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 22px; font-weight: 500; letter-spacing: .04em; color: #fff; }
.menu__item--sub { min-height: 48px; font-size: 16px; padding-left: 14px; color: var(--on-night-2); }
.menu__item[aria-current="page"] { color: #9fd6ff; }
.menu.is-open .menu__item, .menu.is-open .menu__group { animation: menuIn 520ms var(--ease-out) both; }
.menu.is-open nav > :nth-child(-n+4) { animation-delay: 120ms; } .menu.is-open nav > :nth-child(n+5) { animation-delay: 160ms; }
@keyframes menuIn { from { opacity: 0; transform: translateY(16px); } }
.menu__cta { position: relative; z-index: 1; margin-top: 32px; display: grid; gap: 12px; }
.menu__cta .btn { height: 56px; }
.menu__foot { position: relative; z-index: 1; margin-top: 24px; }
.menu__foot .motion-toggle { background: transparent; color: var(--on-night-2); border-color: rgba(255,255,255,.2); }
.menu__ext { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--on-night-2); }
.menu__ext span { display: inline-grid; width: 12px; } .menu__ext svg { width: 11px; height: 11px; }
html.motion-off .menu { transition: none; }

/* ---------- 4. 夜の地（ヒーロー）と、境界の曲線 ---------- */
.night { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--night-grad); }
.night__glow { display: none; }
.hero { position: relative; isolation: isolate; overflow: clip; color: #fff; background: var(--night-1); margin-top: calc(-1 * var(--header-h) - 1px); padding-top: calc(var(--header-h) + 1px); }   /* ヘッダーの下線 1px の分も重ねる（最上部に白い線を出さない） */
.hero .curve { --curve-fill: var(--paper); z-index: 3; height: var(--cap-h); }
.hero .curve--low { height: calc(var(--cap-h) * .54); }
.hero + .sec, .hero + section { position: relative; z-index: 1; }
.hero__grid { position: relative; z-index: 2; width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.hero__copy { position: relative; max-width: 860px; }
.hero__crumb { margin-bottom: clamp(28px, 3vw, 44px); }
.hero .crumb { margin: 0; font-size: var(--fs-note); color: var(--on-night-3); }
.hero .crumb a { color: var(--on-night-3); transition: color 160ms; } .hero .crumb a:hover { color: #fff; }
.hero .crumb [aria-current="page"] { color: var(--on-night-2); font-weight: 500; }
.hero .crumb li + li::before { border-color: rgba(255,255,255,.3); }
.hero__en { margin: 0 0 clamp(16px, 2vw, 28px); font-family: var(--font-display); font-weight: 300; font-size: var(--fs-statement); line-height: 1; letter-spacing: -.03em; color: #fff; }
.hero__h1 { margin: 0; font-size: var(--fs-h1); font-weight: 500; line-height: 1.4; letter-spacing: .03em; color: #fff; font-feature-settings: "palt" 1; word-break: keep-all; overflow-wrap: anywhere; }
.hero__lead { margin: 24px 0 0; max-width: 32em; font-size: var(--fs-lead); line-height: 2; color: var(--on-night-2); }
.hero__kicker { margin: 20px 0 0; font-size: var(--fs-body); font-weight: 500; letter-spacing: .04em; color: #e3e9f7; }
.hero__btns { margin-top: 40px; }

/* B ステージ型（サービス）：サービスの図形を右に置く */
.hero--stage { min-height: clamp(640px, 88svh, 1000px); display: flex; flex-direction: column; justify-content: center; }
.hero--stage .hero__grid { padding-block: clamp(40px, 4vw, 72px) calc(var(--cap-h) + clamp(48px, 7vh, 96px)); }
.hero--stage .hero__en { font-size: var(--fs-display-s); line-height: .96; letter-spacing: -.035em; max-width: 9.5em; }
.hero--stage .hero__copy { max-width: min(860px, 62%); }
.hero__stage { position: absolute; z-index: 1; top: 50%; right: max(var(--gutter), calc((100% - var(--maxw)) / 2)); width: min(40vw, 600px, 66vh); aspect-ratio: 1; transform: translateY(-44%); pointer-events: none; }


/* C 写真型（会社情報・M&A）：紺に寄せた写真を全面に */
.hero--photo { min-height: clamp(600px, 80svh, 960px); display: flex; flex-direction: column; justify-content: flex-end; background: var(--night-0); }
.hero--photo .hero__grid { padding-block: 120px calc(var(--cap-h) + clamp(48px, 8vh, 104px)); }
.hero__ph { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); animation: phIn 1600ms var(--ease-out) calc(var(--vt-delay, 0ms)) both; }
@keyframes phIn { from { opacity: 0; transform: scale(1.06); } 40% { opacity: 1; } to { transform: none; } }
.hero__tone { position: absolute; inset: 0; z-index: 0; background: #0b1531; mix-blend-mode: multiply; opacity: .42; pointer-events: none; }
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,9,20,.84) 0%, rgba(5,9,20,.58) 38%, rgba(5,9,20,.12) 72%, rgba(5,9,20,0) 100%), linear-gradient(0deg, rgba(5,9,20,.72) 0%, rgba(5,9,20,0) 46%), linear-gradient(180deg, rgba(5,9,20,.5) 0, rgba(5,9,20,0) 180px); }
/* 経営陣：宣材写真 4 名を右から並べる（写真は動かさない）。キットの .hero--people と名前を分ける */
.hero__people { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(60%, 1000px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: #050914;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%); mask-image: linear-gradient(90deg, transparent 0, #000 5%); }
.hero__person { margin: 0; position: relative; overflow: hidden; background: #0e1a3e; animation: personIn 1100ms var(--ease-out) calc(160ms + var(--i) * 90ms + var(--vt-delay, 0ms)) both; }
.hero__person img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
@keyframes personIn { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.hero--board .hero__shade { background: linear-gradient(90deg, rgba(5,9,20,.94) 0, rgba(5,9,20,.8) 30%, rgba(5,9,20,0) 40%), linear-gradient(0deg, rgba(5,9,20,.62) 0%, rgba(5,9,20,0) 34%), linear-gradient(180deg, rgba(5,9,20,.6) 0, rgba(5,9,20,0) 150px); }

/* D 簡易型（お知らせ・お問い合わせ・方針など）：文字だけ、曲線は浅く */
.hero--simple { min-height: clamp(340px, 38vh, 420px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero--simple .hero__grid { padding-block: 96px calc(var(--cap-h) * .54 + clamp(40px, 5vh, 64px)); }
.hero--article .hero__h1 { font-size: var(--fs-h2); line-height: 1.55; max-width: 26em; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px; color: var(--on-night-3); font-family: var(--font-display); letter-spacing: .06em; font-size: var(--fs-small); }
.article__meta .news__cat { color: #fff; }

/* 走査の光（トップの主要な見出し 3 か所だけ） */

/* ---------- 5. ヒーローの登場（CSS だけ。JS を待たない） ---------- */
.m { display: inline-block; overflow: clip; vertical-align: top; padding-block: .1em .18em; margin-block: -.1em -.18em; }
.mi { display: inline-block; will-change: transform; animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--d0, 0ms) + var(--k, 0) * 70ms + var(--vt-delay, 0ms)); }
.hero__en .mi { animation-duration: 1200ms; animation-delay: calc(var(--d0, 0ms) + var(--k, 0) * 90ms + var(--vt-delay, 0ms)); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.h-in { animation: hin 700ms var(--ease-out) both; animation-delay: calc(var(--d, 0ms) + var(--vt-delay, 0ms)); }
@keyframes hin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.vt-in { --vt-delay: 400ms; }

/* ---------- 6. A 動画型（トップ） ---------- */
.hvh { position: relative; z-index: 0; margin-top: calc(-1 * var(--header-h) - 1px); height: 100svh; min-height: 680px; max-height: 1200px; color: #fff; background: var(--night-0); }
.hvh__stage { position: absolute; inset: 0; overflow: hidden; }
.hv { position: absolute; inset: 0; background: var(--night-0); overflow: hidden; transform-origin: 62% 50%; }
.hv__poster, .hv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hv__poster { animation: hvFade 600ms var(--ease-out) calc(var(--vt-delay, 0ms)) both, hvScale 1600ms var(--ease-out) calc(var(--vt-delay, 0ms)) both; }
@keyframes hvFade { from { opacity: 0; } }
@keyframes hvScale { from { transform: scale(1.06); } }
.hv__video { opacity: 0; transition: opacity 800ms var(--ease-out); }
.hv.is-playing .hv__video, .hv.is-playing .hv__iframe { opacity: 1; }
.hv__iframe { position: absolute; left: 50%; top: 50%; width: max(100%, 177.78vh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity 800ms var(--ease-out); }
.hv__tone, .hv__shade, .hv__vig, .hv__grain { position: absolute; inset: 0; pointer-events: none; }
.hv__tone { background: #0b1531; mix-blend-mode: multiply; opacity: .12; }   /* 元の映像の青緑をほぼそのまま残す（紺を薄く重ねるだけ） */
.hv__tone::after { content: ""; position: absolute; inset: 0; background: var(--grad-logo); mix-blend-mode: soft-light; opacity: .08; }
.hv__shade { background: linear-gradient(90deg, rgba(5,9,20,.82) 0%, rgba(5,9,20,.58) 34%, rgba(5,9,20,.12) 66%, rgba(5,9,20,0) 100%),
  linear-gradient(180deg, rgba(5,9,20,.55) 0, rgba(5,9,20,0) 160px), linear-gradient(0deg, rgba(5,9,20,.5) 0, rgba(5,9,20,0) 34%); }
.hv__shade::after { content: ""; position: absolute; inset: 0; background: var(--night-0); opacity: calc(var(--hx, 0) * .25); }
.hv__vig { background: radial-gradient(120% 90% at 62% 45%, transparent 55%, rgba(5,9,20,.55) 100%); }
.hv__grain { inset: -64px; background: url("../img/grain.png") 0 0 / 128px 128px; opacity: .07; mix-blend-mode: overlay; animation: grain 1s steps(8) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-24px, 16px); } 50% { transform: translate(16px, -32px); } 75% { transform: translate(-40px, -8px); } 100% { transform: translate(0, 0); } }
/* 走査の光：登場のとき 1 回だけ、上から下へ通る */
.hvh__scan { position: absolute; z-index: 2; left: 0; right: 0; top: 18%; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(131,251,241,.9) 18%, rgba(100,147,223,.95) 50%, rgba(91,76,213,.9) 82%, transparent 100%);
  box-shadow: 0 0 24px 8px rgba(100,147,223,.28); animation: scan 1000ms var(--ease-inout) calc(120ms + var(--vt-delay, 0ms)) both; }
@keyframes scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .9; } 88% { opacity: .9; } 100% { opacity: 0; transform: translateY(64vh); } }
.hvh__in { position: absolute; z-index: 3; inset: 0; margin-inline: auto; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(var(--cap-h) + 12vh); }
.hvh__mark { margin: 0 0 clamp(20px, 2.2vw, 32px); font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); line-height: .95; letter-spacing: -.035em; color: #fff; }
.hvh__line { display: block; animation: track 1400ms var(--ease-out) calc(240ms + var(--vt-delay, 0ms)) both; }
.hvh__line .mi { animation-duration: 1200ms; animation-delay: calc(240ms + var(--vt-delay, 0ms)); }
.hvh__line--b { animation-delay: calc(360ms + var(--vt-delay, 0ms)); }
.hvh__line--b .mi { animation-delay: calc(360ms + var(--vt-delay, 0ms)); background: linear-gradient(100deg, #83fbf1 0%, #6493df 40%, #5b4cd5 70%, #83fbf1 100%) 100% 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise 1200ms var(--ease-out) calc(360ms + var(--vt-delay, 0ms)) both, sweep 1800ms var(--ease-out) calc(360ms + var(--vt-delay, 0ms)) both; padding-right: .06em; }
@keyframes track { from { letter-spacing: .02em; } to { letter-spacing: -.035em; } }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hvh__h1 { margin: 0; max-width: 18em; font-size: var(--fs-h1); font-weight: 500; line-height: 1.4; letter-spacing: .03em; color: #fff; font-feature-settings: "palt" 1; word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 1200px) { .hvh__h1 { white-space: nowrap; max-width: none; } }
.hvh__lead { margin: 24px 0 0; max-width: 34em; font-size: var(--fs-body); line-height: 2; color: var(--on-night-2); }
.hvh__btns { margin-top: 40px; }
.hvh__ctrl { position: absolute; z-index: 4; right: max(var(--gutter), calc((100% - var(--maxw)) / 2)); bottom: calc(var(--cap-h) + 12vh + 6px); display: flex; align-items: center; }   /* 停止ボタン：ボタンの行の中心にそろえる */
.hvh__cue { position: absolute; z-index: 4; left: max(var(--gutter), calc((100% - var(--maxw)) / 2)); bottom: calc(var(--cap-h) + 3vh); display: block; width: 1px; height: 56px; background: rgba(255,255,255,.18); overflow: hidden; animation: cue-out 600ms ease calc(5000ms + var(--vt-delay, 0ms)) forwards; }   /* スクロールの合図：曲線の頂点の上、中央。3 回で消える */
@keyframes cue-out { to { opacity: 0; } }
.hvh__cue span { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(#fff, rgba(255,255,255,0)); transform-origin: top; animation: cue 1200ms var(--ease-inout) calc(1400ms + var(--vt-delay, 0ms)) 3 both; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hvh__pause { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(5,9,20,.24); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 240ms; }
.hvh__pause:hover { background: rgba(255,255,255,.14); }
.hvh__pause svg { width: 16px; height: 16px; }
.hvh__pause .v-play { display: none; } .hvh__pause[aria-pressed="true"] .v-play { display: block; } .hvh__pause[aria-pressed="true"] .v-pause { display: none; }
.hvh__ring { position: absolute; inset: 0; width: 44px !important; height: 44px !important; transform: rotate(-90deg); fill: none; }
.hvh__ring circle { stroke: rgba(255,255,255,.28); stroke-width: 1.5; }
.hvh__ring .hvh__ring-p { stroke: #fff; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--lp, 0)); }
/* スクロールでの退場（900px 以上）：ヒーローは画面に留まり、白い面が曲線で重なる */
@media (min-width: 900px) {
  html.mo .hvh { position: sticky; top: 0; }
  html.mo [data-hero="video"] main > :not(.hvh) { position: relative; z-index: 1; }
  html.mo .hv { transform: translate3d(0, calc(var(--hx, 0) * 6vh), 0) scale(calc(1 + var(--hx, 0) * .1)); }
  html.mo .hvh__in { transform: translate3d(0, calc(var(--hx, 0) * -12vh), 0); opacity: clamp(0, calc(1 - var(--hx, 0) / .45), 1); }
  html.mo .hvh__ctrl { opacity: clamp(0, calc(1 - var(--hx, 0) / .3), 1); }
}

/* ② 白い面（メッセージ）：上端は曲線 */
.sheet { position: relative; z-index: 1; overflow: clip; margin-top: calc(-1 * var(--cap-h)); padding: calc(var(--cap-h) + var(--sp-l)) 0 var(--sp-l); background: linear-gradient(to bottom, transparent var(--cap-h), var(--paper) var(--cap-h)); }
.sheet__cap { position: absolute; top: 0; left: -10%; right: -10%; height: calc(var(--cap-h) + 1px); background: var(--paper); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: 50% 100%; transform: scaleY(var(--cap, 1)); pointer-events: none; }
.stmt2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.stmt2__st { grid-column: 1 / -1; margin: 0; font-size: var(--fs-statement); font-weight: 500; line-height: 1.45; letter-spacing: .02em; color: var(--ink-900); font-feature-settings: "palt" 1; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.stmt2__b { grid-column: 6 / -1; margin: clamp(40px, 4.4vw, 64px) 0 0; font-size: var(--fs-lead); line-height: 2.05; color: var(--ink-500); }
@media (min-width: 900px) and (max-width: 1199.98px) { .stmt2__b { grid-column: 3 / -1; } }
/* 「攻め」と「守り」：見出しが画面の下から上へ進むにつれて、左から色が満ちる（前半で「攻め」、後半で「守り」。--pa・--pb は corp.js が .msg2 に書く） */
.msg2 { --pa: 0%; --pb: 0%; }
.msg2__a, .msg2__b { background: linear-gradient(90deg, var(--fa), var(--fb)) 0 0 / var(--fill) 100% no-repeat, linear-gradient(var(--ink-900), var(--ink-900)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.msg2__a { --fa: #138e9c; --fb: #2b5bd7; --fill: var(--pa); } .msg2__b { --fa: #2b5bd7; --fb: #5b4cd5; --fill: var(--pb); }
html:not(.mo) .msg2, html.motion-off .msg2 { --pa: 100% !important; --pb: 100% !important; }
@media (prefers-reduced-motion: reduce) { .msg2 { --pa: 100% !important; --pb: 100% !important; } }
.msg2__to { color: var(--ink-900); margin-inline: .1em; }

/* ---------- 7. セクションの見出し（行型・索引型・声明型） ---------- */
.st { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 14px; align-items: start; margin-bottom: clamp(40px, 4.4vw, 72px); }
.st__en, .ent { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-en); line-height: 1.05; letter-spacing: -.02em; color: var(--ink-900); }
.st > .st__en { grid-column: 1 / span 5; padding-top: .06em; }
.st__main { grid-column: 1 / span 8; min-width: 0; }
.st--en .st__main { grid-column: 6 / -1; }
.st--more .st__main { grid-column: 6 / span 5; }
.st--more:not(.st--en) .st__main { grid-column: 1 / span 9; }
.st__more { grid-column: 11 / -1; justify-self: end; align-self: end; }
.st__ja { margin: 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--ink-900); font-feature-settings: "palt" 1; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.st__lead { margin: 18px 0 0; max-width: 36em; font-size: var(--fs-lead); line-height: 2; color: var(--ink-500); }
.sec > .container > .st__lead { margin: -24px 0 clamp(32px, 3.6vw, 48px); }
.idxl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.idxl__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 14px; }
.idxl__head .st__en { padding: 0; }
.idxl__head .st__lead { margin-top: 4px; }
.idxl__body { grid-column: 6 / -1; min-width: 0; }
.stmt { min-height: 0; display: block; padding-block: var(--sp-xl); }
.stmt .stmt__in { max-width: none; width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.stmt__head { grid-column: 1 / span 10; display: grid; gap: 16px; justify-items: start; }
.stmt__st { margin: 6px 0 0; font-size: var(--fs-statement); font-weight: 500; line-height: 1.45; letter-spacing: .02em; color: var(--ink-900); font-feature-settings: "palt" 1; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.stmt__body { grid-column: 6 / span 6; margin: clamp(40px, 4.4vw, 64px) 0 0; }
.stmt__body p { font-size: var(--fs-body); }
.about__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.about__head { display: grid; gap: 14px; justify-items: start; }
.about__h { margin: 0; font-weight: 500; letter-spacing: .03em; color: var(--ink-900); font-feature-settings: "palt" 1; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.about--statement { padding-block: var(--sp-l); }
.about--statement .about__head { grid-column: 1 / span 9; }
.about--statement .about__h { font-size: var(--fs-statement); line-height: 1.45; }
.about--statement .about__b { grid-column: 6 / span 6; margin-top: clamp(40px, 4.4vw, 64px); }
.about--index .about__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 40px); }
.about--index .about__h { font-size: var(--fs-h2); line-height: 1.5; }
.about--index .about__b { grid-column: 6 / -1; }
.about__sub { margin: 0; font-size: var(--fs-lead); font-weight: 500; color: var(--ink-500); }
.about__em { margin-top: 1.6em !important; font-size: var(--fs-h3) !important; font-weight: 500; line-height: 1.7 !important; color: var(--ink-900) !important; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-block) calc(var(--col-gap) * 3); }
.duo__col { display: grid; gap: 22px; align-content: start; }
.duo__h { margin: 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.5; letter-spacing: .04em; font-feature-settings: "palt" 1; text-wrap: balance; }

/* 見出しの行のせり上がり（data-rise。corp.js が行に分けて、画面に入ったら 1 回だけ出す） */
html.mo [data-rise]:not(.is-risen) { visibility: hidden; }
[data-rise] .lr-line { display: block; }

/* 本文の登場：不透明度と 12px だけ（キットの 24px／900ms を置き換える） */
html.mo .rv:not(.is-in) { opacity: 0; transform: translateY(12px); }
.rv { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(min(var(--i, 0), 7) * 50ms); }

/* ---------- 8. トップ：サービス（紺のステージと 6 行） ---------- */
.svc6 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.svc6__stage { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 32px); height: min(calc(100vh - var(--header-h) - 64px), 780px); }
.svc6__stage-in { position: relative; height: 100%; border-radius: var(--r-stage); overflow: hidden; isolation: isolate;
  background: #0a1433; }
.svc6__cap { position: absolute; z-index: 2; left: clamp(24px, 2.2vw, 36px); right: clamp(24px, 2.2vw, 36px); bottom: clamp(22px, 2vw, 32px); margin: 0; display: flex; align-items: baseline; gap: 16px; color: #fff; }
.svc6__cap-t { position: relative; display: block; overflow: clip; height: 1.3em; flex: 1; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }
.svc6__cap-in { display: block; transition: transform 420ms var(--ease-out); }
.svc6__cap-in.is-out { transform: translateY(-100%); }
.svc6__cap-in.is-in-from { transform: translateY(100%); transition: none; }
.svc6__list { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc6__a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px; grid-template-rows: auto auto; column-gap: 8px; row-gap: 10px; align-items: center; align-content: center;
  min-height: max(24vh, 176px); padding: 28px 4px; border-bottom: 1px solid var(--line); color: var(--ink-900); }
.svc6__vis { display: none; }
.svc6__en { grid-column: 1; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; }
.svc6__ja { grid-column: 1; font-size: var(--fs-body); font-weight: 500; line-height: 1.7; color: var(--ink-500); }
.svc6__go { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 900px) {
  .svc6__ja br { display: none; }
  /* ステージは画面の左端まで出す。影は付けない */
  .svc6 { --bleed: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
  .svc6__stage { margin-left: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed) - var(--col-gap)); }   /* 一覧（6 列目から）との間を 2 つ分の溝に */
  .svc6__stage-in { border-radius: 0 var(--r-stage) var(--r-stage) 0; }
  .svc6__cap { left: var(--bleed); }
  .sec--svc6 .st--en .st__main { grid-column: 6 / -1; }   /* 見出しは前後のセクションと同じ 2 列目（x=620） */
  /* いまの行以外は、不透明度ではなく文字の色で控えめにする（読める濃さを保つ） */
  html.mo .svc6__item:not(.is-cur) .svc6__en { color: #7a849c; }
  html.mo .svc6__item:not(.is-cur) .svc6__ja { color: var(--ink-400); }
  html.mo .svc6__item:not(.is-cur) .svc6__a:is(:hover, :focus-visible) .svc6__en { color: var(--ink-900); }
  .svc6__en, .svc6__ja { transition: color var(--t-2) var(--ease-ui); }
  .svc6__item.is-cur .svc6__go { opacity: 1; transform: none; }
  .svc6__a { min-height: max(20vh, 164px); }
}

/* 事例のカード（2×2）：枠の上から開く */
.cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.case { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; min-height: clamp(220px, 17vw, 260px); padding: clamp(28px, 2.8vw, 40px); border-radius: var(--r-card); background: #fff; }
.g-paper .case { background: var(--mist); }
.case .case__n { margin: 0; display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-statement); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.case .case__num { color: var(--ink-900); }
.case .case__k { font-size: max(16px, .4em); font-weight: 300; letter-spacing: .02em; color: var(--ink-400); }   /* 小さな英字のラベルにせず、番号と組む大きさに */
.case .case__who { margin: 0; align-self: end; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; color: var(--ink-500); }
.case .case__who:empty { display: none; }
.case .case__what { margin: 0; font-family: var(--font-sans); max-width: 20em; font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; line-height: 1.65; letter-spacing: .03em; color: var(--ink-900); text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
html.mo .case.rv:not(.is-in) { opacity: 1; transform: none; clip-path: inset(12% 0 0 0 round var(--r-card)); }
html.mo .case.rv:not(.is-in) > * { opacity: 0; }
.case.rv { clip-path: inset(0 0 0 0 round var(--r-card)); transition: clip-path 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.case.rv > * { transition: opacity 600ms var(--ease-out) calc(var(--i, 0) * 90ms + 200ms); }

/* 採用：写真の枠が広がる。下端は紺に溶かす */
.recruit { position: relative; z-index: 1; background: var(--mist); }
.recruit__card { position: relative; height: 88svh; min-height: 600px; max-height: 980px; overflow: hidden; color: #fff; background: var(--night-0); isolation: isolate;
  clip-path: inset(0 var(--rx, 0px) 0 var(--rx, 0px) round var(--rr, 0px)); }
.recruit__ph { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.recruit__ph img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: var(--focus, 50% 35%); transform: translate3d(0, var(--ry, 0%), 0); }
.recruit__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, #050914 0, rgba(5,9,20,.5) 120px, rgba(5,9,20,0) 300px), linear-gradient(90deg, rgba(5,9,20,.8) 0%, rgba(5,9,20,.4) 32%, rgba(5,9,20,0) 58%), linear-gradient(180deg, rgba(5,9,20,.35) 0, rgba(5,9,20,0) 200px); }
.recruit__in { position: absolute; z-index: 2; inset: 0; margin-inline: auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-bottom: clamp(96px, 16vh, 180px); gap: 0; }
.recruit__en { color: #fff; }
.recruit__h { margin: 18px 0 0; font-size: var(--fs-h1); font-weight: 500; line-height: 1.4; letter-spacing: .04em; color: #fff; }
.recruit__p { margin: 18px 0 0; font-size: var(--fs-lead); color: var(--on-night-2); }
.recruit .btns { margin-top: 32px; }

/* M&A（暗転）：見出しを左に固定、右の段落の左で線が伸びる。背景は節点と経路の線画 */
.sec--dark { position: relative; color: #fff; background: var(--night-grad); }
html:not(.mo) .sec--dark[data-ground="dark"] { background: var(--night-grad); }
html:not(.mo) .sec--manda[data-ground="dark"] { background: var(--night-0); }
.sec--dark .lead, .sec--dark .prose p, .sec--dark .small { color: var(--on-night-2); }
.sec--dark .caption { color: var(--on-night-3); }
.sec--dark > .container { position: relative; z-index: 2; }
.sec--manda { padding-block: var(--sp-xl) calc(var(--sp-l) + var(--cap-h)); background: var(--night-0); }
.manda__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.manda__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 48px); display: grid; gap: 18px; justify-items: start; }
.manda__head .st__en { color: #fff; }
.manda__head .kicker { color: var(--on-night-2); }
.manda__h { margin: 4px 0 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.55; letter-spacing: .04em; color: #fff; font-feature-settings: "palt" 1; }
.manda__head .btns { margin-top: 12px; }
.manda__body { grid-column: 6 / -1; position: relative; display: grid; gap: 32px; padding: 8px 0 8px clamp(28px, 2.8vw, 44px); }
.manda__body p { margin: 0; font-size: var(--fs-body); line-height: 2.1; color: var(--on-night-2); }
.manda__line { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); }
.manda__line span { position: absolute; inset: 0; background: var(--logo-1); transform-origin: 50% 0; transform: scaleY(var(--grow, 1)); }
html.mo .manda__line span { transform: scaleY(var(--grow, 0)); }

/* ニュース・記事（静かに） */
.sec--news { padding-bottom: var(--sp-s); }
.sec--article { padding-top: var(--sp-s); }
.news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news__item a { position: relative; display: grid; grid-template-columns: 120px 264px minmax(0, 1fr) 40px; align-items: center; column-gap: var(--col-gap); min-height: 76px; padding: 18px 8px; border-bottom: 1px solid var(--line); color: var(--ink-900);
  transition: background-color 240ms var(--ease-ui); }
html:not(.is-scrolling) .news__item a:hover { background-color: transparent; }
.news__item a > * { transition: transform 320ms var(--ease-ui); }
html:not(.is-scrolling) .news__item a:hover > :not(.go) { transform: translateX(8px); }
.news__date { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .06em; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.news__cats { display: flex; flex-wrap: nowrap; gap: 4px 14px; min-width: 0; }
.news__cat { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-note); font-weight: 500; letter-spacing: .04em; color: var(--ink-500); white-space: nowrap; }
.news__t { font-size: var(--fs-body); font-weight: 500; line-height: 1.75; letter-spacing: .03em; text-wrap: pretty; }
.news__item.is-hidden, .news__item.is-more { display: none; }
.news--blog .news__item a { grid-template-columns: 120px minmax(0, 1fr) 40px; }
.filter { position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 28px; padding: 5px; border-radius: 999px; background: var(--mist); max-width: 100%; }
.filter__btn { position: relative; z-index: 1; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-500); font-size: var(--fs-small); font-weight: 500; letter-spacing: .03em; transition: color 240ms var(--ease-ui), background-color 240ms; }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .filter__btn:hover { color: var(--ink-900); }
.filter__btn.is-act { color: #fff; background: var(--ink-900); }
.filter__pill { position: absolute; z-index: 0; left: 0; top: 0; height: 40px; width: 0; border-radius: 999px; background: var(--ink-900); opacity: 0; transition: transform 360ms var(--ease-out), width 360ms var(--ease-out), opacity 160ms; }
.filter.has-pill .filter__btn.is-act { background: transparent; }
.filter.has-pill .filter__pill { opacity: 1; }
.list__h { margin-bottom: clamp(28px, 3vw, 40px); }

/* ---------- 9. 紺の面（暗転・締め）と境界の曲線 ---------- */
/* 上：前の地の色の面に、楕円の穴を開ける（紺の山がせり上がって見える）。下：次の地の色の山。どちらもスクロールで平らになる */
.edge { position: absolute; left: 0; right: 0; height: var(--cap-h); z-index: 3; pointer-events: none; }
.edge--top { top: -1px; background: var(--edge-prev, var(--paper-0, #fff)); transform-origin: 50% 0; transform: scaleY(var(--e, 1));
  -webkit-mask-image: radial-gradient(60% 100% at 50% 100%, transparent 99.4%, #000 100%); mask-image: radial-gradient(60% 100% at 50% 100%, transparent 99.4%, #000 100%); }
.edge--bottom { bottom: -1px; left: -10%; right: -10%; background: var(--edge-next, #fff); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: 50% 100%; transform: scaleY(var(--e, 1)); }
[data-prev="paper"] { --edge-prev: #fff; } [data-prev="mist"] { --edge-prev: #f2f5fa; }
[data-prev="night"] > .edge--top, [data-prev="photo"] > .edge--top { display: none; }
[data-next="paper"] { --edge-next: #fff; } [data-next="mist"] { --edge-next: #f2f5fa; }
[data-next="night"] > .edge--bottom, [data-next="photo"] > .edge--bottom { display: none; }

/* 当社の強み・特長（暗転）：3 列の大きな番号。背景はサービスの図形を大きく薄く */
.sec--feat { padding-block: calc(var(--sp-l) + var(--cap-h) * .6) calc(var(--sp-l) + var(--cap-h)); overflow: clip; }
[data-next="night"].sec--feat, [data-next="photo"].sec--feat { padding-bottom: var(--sp-l); }
.feat__bg { position: absolute; z-index: 0; top: 50%; right: max(-4%, calc((100vw - var(--maxw)) / 2 - 12%)); width: min(68vw, 920px); aspect-ratio: 1; transform: translateY(-50%); opacity: .16; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.feat__bg img { width: 100%; height: 100%; object-fit: contain; }
.feat { position: relative; z-index: 2; }
.feat__h { margin: 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: #fff; font-feature-settings: "palt" 1; text-wrap: balance; }
.sec--feat-text .feat__h { font-size: var(--fs-statement); line-height: 1.45; }
.sec--feat-text .st__lead { max-width: 40em; }
.nrows { list-style: none; margin: 0; padding: 0; }
.nrows--dark { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--col-gap); }
.nrows--dark[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nrows--dark .nrow { display: grid; align-content: start; gap: 18px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); }
.nrows--dark .nrow__n { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-statement); line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; }
.nrow__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: var(--ink-900); text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.nrows--dark .nrow__t { color: #fff; }
.nrow__b { margin: 10px 0 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-500); }
.nrows--dark .nrow__b { color: var(--on-night-2); }
.nrows--rows { border-top: 1px solid var(--line); }
.nrows--rows .nrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 32px 0; border-bottom: 1px solid var(--line); }
.nrows--rows .nrow__n { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .1em; color: var(--teal-700); padding-top: .5em; }

/* 締め（全ページ）：紺。下の中央から同心の弧が広がる */
.close { position: relative; z-index: 1; overflow: clip; color: #fff; background: var(--night-0); padding-block: calc(var(--sp-m) + var(--cap-h) * .5) 0; }   /* 下端はフッターと同じ紺（境目に色の段差を作らない） */
.close__in { position: relative; z-index: 2; padding-bottom: clamp(140px, 16vw, 260px); }
.close__lead { margin: 0; font-size: var(--fs-lead); line-height: 2; color: var(--on-night-2); }
.close__svc { margin: 0; font-size: var(--fs-small); color: var(--on-night-3); }
.close .textlink, [data-ground="dark"] .textlink { color: #9fd6ff; background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(159,214,255,.35), rgba(159,214,255,.35)); }
.ctiles { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.ctile { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 12px; min-height: 96px; padding: 20px 22px 20px 24px; border-radius: 16px;
  background: transparent; border: 1px solid rgba(255,255,255,.16); color: #fff; }   /* 平らな枠だけ（ガラスのぼかしや光は使わない） */
html:not(.is-scrolling) .ctile:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.34); }
.ctile__t { grid-column: 1; font-size: var(--fs-body); font-weight: 500; line-height: 1.6; letter-spacing: .04em; }
.ctile__go { grid-column: 2; color: #fff; }
/* お問い合わせ トップ：白い地に紺のタイル */
.sec--desks { padding-block: clamp(36px, 3.6vw, 56px) var(--sp-l); }
.desks__text { display: grid; gap: 10px; max-width: 40em; }
.desks__lead { margin: 0; font-size: var(--fs-lead); line-height: 2; color: var(--ink-700); }
.desks__svc { margin: 0; font-size: var(--fs-small); color: var(--ink-500); }
.sec--desks .ctile { background: var(--night-2); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 168px; }
html:not(.is-scrolling) .sec--desks .ctile:hover { background: var(--night-3); }
.sec--desks .ctile--doc { grid-column: 1 / -1; min-height: 112px; }

/* フッター：締めから続く紺。最下部に大きなスローガン */
.footer--night { position: relative; z-index: 1; overflow: clip; background: var(--night-0); color: var(--on-night-3); border-top: 0; padding: 0; }
main:not(:has(> .close)) + .footer--night { border-top: 0; }
main:not(:has(> .close)) + .footer--night::before { content: ""; position: absolute; z-index: 2; left: -10%; right: -10%; top: -1px; height: calc(var(--cap-h) * .6); background: #fff; border-radius: 0 0 50% 50% / 0 0 100% 100%; pointer-events: none; }
main:not(:has(> .close)):has(> .g-mist:last-child) + .footer--night::before { background: #f2f5fa; }   /* 最後のセクションの地の色で、白い膨らみを描く（フッターの中では --paper が紺に変わるため、色は直接書く） */
.footer--night .container { position: relative; z-index: 1; }
.footer--night .footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px var(--col-gap); padding-top: clamp(72px, 7vw, 112px); }
main:not(:has(> .close)) + .footer--night .footer__grid { padding-top: calc(clamp(72px, 7vw, 112px) + var(--cap-h) * .5); }
.footer__logo { height: 30px; width: auto; }
.footer__addr { margin: 20px 0 0 !important; font-size: var(--fs-small); line-height: 1.9; color: var(--on-night-2); }
.footer__h { margin: 0 0 14px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; color: #fff; }
.footer--night .footer__col a { padding: 5px 0; font-size: var(--fs-small); line-height: 1.7; color: rgba(198,207,230,.72); transition: color 160ms; }
.footer--night .footer__col a:hover, .footer--night .footer__links a:hover { color: #fff; }
.footer--night .footer__bottom { margin-top: clamp(56px, 5vw, 80px); padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1); color: var(--on-night-3); font-size: var(--fs-note); gap: 16px 24px; }
.footer--night .footer__links { gap: 6px 24px; }
.footer--night .footer__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--on-night-2); font-size: var(--fs-note); }
.footer__ext { display: inline-grid; width: 11px; } .footer__ext svg { width: 10px; height: 10px; }
.footer--night .motion-toggle { background: transparent; color: var(--on-night-2); border: 1px solid rgba(255,255,255,.2); }
.footer--night .motion-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
.footer__copy { font-family: var(--font-display); letter-spacing: .04em; }
.footer__mark { position: relative; z-index: 1; margin: 0; padding-top: clamp(24px, 3vw, 48px); padding-bottom: clamp(28px, 3.6vw, 64px); overflow: hidden; pointer-events: none; user-select: none; }
.footer__mark-in { display: block; width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; white-space: nowrap; font-family: var(--font-display); font-weight: 300;
  font-size: calc(min(100vw - var(--gutter) * 2, var(--maxw)) / var(--mark-k, 12.05)); line-height: 1.05; letter-spacing: -.035em; color: #fff; padding-bottom: .1em; }
.footer__mark-b { color: inherit; }

/* ---------- 10. 会社情報 ---------- */
.xp { height: clamp(440px, 40vw, 600px); }
.xp__item { border-radius: var(--r-card); box-shadow: none; transition: flex-grow 560ms var(--ease-out); }
.xp__ph img { filter: saturate(.85) brightness(.86); transition: transform 1200ms var(--ease-out), filter 560ms; }
.xp__en { font-style: normal; font-weight: 400; font-size: var(--fs-h2); letter-spacing: -.02em; }
.xp__ja { font-size: var(--fs-small); font-weight: 500; }
.xp__shade { background: linear-gradient(180deg, rgba(5,9,20,0) 36%, rgba(5,9,20,.78) 100%); }
.mvcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.mvc { position: relative; display: grid; align-content: start; gap: 10px; min-height: 280px; padding: clamp(28px, 2.6vw, 40px); padding-bottom: 80px; border-radius: var(--r-card); background: #fff; color: var(--ink-900); transition: box-shadow 400ms var(--ease-ui); }
html:not(.is-scrolling) .mvc:hover { box-shadow: inset 0 0 0 1px var(--ink-300); }
.mvc__n { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .1em; color: var(--teal-700); }
.mvc__k { font-size: var(--fs-small); font-weight: 500; color: var(--ink-500); }
.mvc__st { margin-top: 6px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; letter-spacing: .03em; }
.mvc__sub { font-size: var(--fs-small); color: var(--ink-500); }
.mvc__en { position: absolute; left: clamp(28px, 2.6vw, 40px); bottom: 30px; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink-400); }
.mvc__go { position: absolute; right: 24px; bottom: 22px; }
.mvd { padding-block: var(--sp-l); }
.mvd__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.mvd__head { grid-column: 1 / span 5; display: grid; gap: 14px; justify-items: start; }
.mvd__st { margin: 10px 0 0; font-size: var(--fs-h1); font-weight: 500; line-height: 1.45; letter-spacing: .03em; color: var(--ink-900); font-feature-settings: "palt" 1; text-wrap: balance; }
#mission .mvd__st { font-size: var(--fs-statement); }
.mvd__st [lang="en"] { font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em; }
.mvd__sub { margin: 0; font-size: var(--fs-lead); font-weight: 500; color: var(--ink-500); }
.mvd__body { grid-column: 6 / -1; padding-top: .6em; }
.mvd__body p { font-size: var(--fs-lead); line-height: 2; color: var(--ink-700); }
.sec-cover { background: var(--night-2); border-radius: var(--r-card); }
.sec-cover .ph__cover { --cover: #0b1531; }
.sec-cover::after { background: linear-gradient(0deg, rgba(5,9,20,.82) 0%, rgba(5,9,20,.5) 42%, rgba(5,9,20,.12) 72%, rgba(5,9,20,0) 92%); }
.sec-cover > .sec-head { display: grid; gap: 10px; }
.st__en--on-photo, .sec-cover .st__ja { color: #fff; }
.prs { border-top: 1px solid var(--line); }
.pr { grid-template-columns: 64px minmax(0, 1fr); padding: clamp(24px, 2.6vw, 36px) 0; }
.pr__n { font-family: var(--font-display); font-size: var(--fs-small); color: var(--teal-700); padding-top: .8em; }
.pr__en { font-weight: 400; font-size: var(--fs-h2); letter-spacing: -.02em; line-height: 1.15; }
.pr__ja { margin-top: 10px; font-size: var(--fs-body); color: var(--ink-700); }
.integrity { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px var(--col-gap); align-items: center; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-card); background: var(--night-2); color: #fff; }
.integrity__t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.35; letter-spacing: -.01em; color: #fff; }
.integrity__t .seg { display: inline-block; }
@media (max-width: 599.98px) { .integrity__t { font-size: 24px; } }
.integrity p:last-child { margin: 0; font-size: var(--fs-body); line-height: 2; color: var(--on-night-2); }
.execs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--col-gap); }
.exec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.exec__ph { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: #0e1a3e; }
.exec__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }
.exec__body { display: grid; gap: 4px; padding-top: 4px; }
.exec__role { margin: 0; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .06em; color: var(--teal-700); }
.exec__name { margin: 6px 0 0; font-size: var(--fs-h3); font-weight: 500; letter-spacing: .1em; color: var(--ink-900); }
.exec__en { margin: 0; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink-400); }
.exec__bio { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.95; color: var(--ink-500); }
.execs--adv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--col-gap); }
.exec--adv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.exec--adv .exec__name { margin-top: 10px; }
.kv { border-top-color: var(--line); grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); }
.kv > dt, .kv > dd { padding: 20px 16px; font-size: var(--fs-body); line-height: 1.9; border-bottom-color: var(--line); }
.kv > dt { font-size: var(--fs-small); font-weight: 700; color: var(--ink-900); padding-top: 22px; }
.kv > dd { color: var(--ink-700); }
.kv > dt:nth-of-type(odd), .kv > dd:nth-of-type(odd), .g-mist .kv > dt:nth-of-type(odd), .g-mist .kv > dd:nth-of-type(odd) { background: none; }
.kv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kv__list li { position: relative; padding-left: 16px; }
.kv__list li::before { content: ""; position: absolute; left: 0; top: .95em; width: 6px; height: 1px; background: var(--teal-700); }
.kv__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.certbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card); background: #fff; }
.certbox__logos { display: flex; gap: 14px; }
.certbox__logos img { width: 88px; height: auto; background: #fff; border-radius: 12px; }
.certbox__t p { margin: 0; font-size: var(--fs-small); line-height: 1.9; color: var(--ink-700); }
.certbox__t p + p { margin-top: 6px; }
.access { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
.access__body { grid-column: 1 / span 5; display: grid; gap: 18px; }
.access__addr { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.7; letter-spacing: .03em; }
.access__ph { grid-column: 6 / -1; }

/* ---------- 11. サービス紹介 トップ ---------- */
.bizs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.biz { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--col-gap); align-items: center; padding: clamp(20px, 2vw, 28px); border-radius: var(--r-card); background: #fff; color: var(--ink-900); transition: box-shadow 400ms var(--ease-ui); }
html:not(.is-scrolling) a.biz:hover { box-shadow: inset 0 0 0 1px var(--ink-300); }
.biz__vis { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--mist); }
.biz__vis img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1200ms var(--ease-out); }
html:not(.is-scrolling) a.biz:hover .biz__vis img { transform: scale(1.06); transition-duration: 1200ms; }
.biz__body { display: grid; gap: 8px; align-content: start; }
.biz__en { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.biz__ja { font-size: var(--fs-body); font-weight: 700; line-height: 1.6; letter-spacing: .03em; }
.biz__ja br { display: none; }
.biz__d { font-size: 15px; line-height: 1.9; color: var(--ink-500); }
.biz__more { display: none; }
.biz__go { position: absolute; right: 20px; bottom: 20px; }
.biz__soon { justify-self: start; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--mist); font-family: var(--font-display); font-size: var(--fs-note); letter-spacing: .08em; color: var(--ink-500); }
.biz--soon .biz__vis img { filter: grayscale(1) brightness(.72); }
.vals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(var(--col-gap) * 3); border-top: 1px solid var(--line); }
.val { display: grid; gap: 10px; align-content: start; padding: 32px 0 36px; border-bottom: 1px solid var(--line); }
.val__en { margin: -4px 0 4px; font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink-400); }   /* 現在のサイトの英字の副題：見出しの上に置かず、和文の見出しの下に添える */
.val__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; letter-spacing: .03em; }
.val__b { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-500); }
.sidxs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); border-top: 1px solid var(--line); }
.sidx { display: grid; grid-template-columns: 72px minmax(0, 1fr) 40px; grid-template-rows: auto auto; column-gap: 20px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink-900); transition: background-color 240ms; }
html:not(.is-scrolling) .sidx:hover { background: rgba(11,17,36,.03); }
.sidx__vis { grid-row: 1 / span 2; width: 72px; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--mist); }
.sidx__vis img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-out); }
html:not(.is-scrolling) .sidx:hover .sidx__vis img { transform: scale(1.08); }
.sidx__en { align-self: end; font-family: var(--font-display); font-size: var(--fs-lead); letter-spacing: -.01em; }
.sidx__t { align-self: start; font-size: var(--fs-small); font-weight: 500; color: var(--ink-500); }
.sidx__go { grid-column: 3; grid-row: 1 / span 2; }

/* ---------- 12. サービスのページの部品 ---------- */
.issues { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.issue { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: clamp(24px, 2.4vw, 36px) 0; border-bottom: 1px solid var(--line); }
.issue__n { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .1em; color: var(--teal-700); font-variant-numeric: tabular-nums; }
.issue__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.65; letter-spacing: .03em; color: var(--ink-900); text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere; }
.smenu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); border-top: 1px solid var(--line); }
.smenu__c { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.smenu__n { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink-400); }
.smenu__t { font-size: var(--fs-lead); font-weight: 700; line-height: 1.6; letter-spacing: .03em; color: var(--ink-900); }
.stps-wrap { position: relative; }
.stps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--col-gap); }
.stps__line { position: absolute; left: 7px; right: 7px; top: 7px; height: 1px; background: var(--line); }
.stps__line span { position: absolute; inset: 0; background: var(--grad-ink); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
html.mo .stps__line span { transform: scaleX(var(--p, 0)); }
.stp { position: relative; display: grid; align-content: start; gap: 12px; padding-top: 36px; }
.stp__dot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-300); transition: background 320ms, border-color 320ms, box-shadow 320ms; }
.g-mist .stp__dot { background: var(--mist); }
.stp.is-on .stp__dot, html:not(.mo) .stp__dot { background: var(--teal-700); border-color: var(--teal-700); box-shadow: 0 0 0 5px rgba(43,91,215,.14); }
.stp__n { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .08em; color: var(--teal-700); }
.stp__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.55; letter-spacing: .03em; }
.stp__b { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-500); }
.stp__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.stp__list li { position: relative; padding-left: 14px; font-size: var(--fs-small); line-height: 1.85; color: var(--ink-500); }
.stp__list li::before { content: ""; position: absolute; left: 0; top: .9em; width: 6px; height: 1px; background: var(--teal-700); }
.acc { border-top-color: var(--line); }
.acc__item { border-bottom-color: var(--line); }
.acc__item > summary { grid-template-columns: 40px minmax(0, 1fr) 32px; padding: 26px 4px; font-size: var(--fs-body); font-weight: 700; line-height: 1.7; }
.acc__q, .acc__a .a { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lead); color: var(--teal-700); }
.acc__plus { width: 32px; height: 32px; border-color: var(--line); transition: background-color 240ms, transform 320ms var(--ease-ui); }
.acc__item.is-open .acc__plus { transform: rotate(90deg); }
.acc__panel { transition: grid-template-rows 320ms var(--ease-ui); }
.acc__panel > div > * { transition: opacity 320ms var(--ease-ui); }
.acc__item:not(.is-open) .acc__panel > div > * { opacity: 0; }
.acc__a { grid-template-columns: 40px minmax(0, 1fr); padding: 0 4px 26px; font-size: var(--fs-body); color: var(--ink-700); }
.problem { padding: clamp(28px, 3vw, 48px); border-radius: var(--r-card); background: var(--mist); }
.problem__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.9; letter-spacing: .03em; color: var(--ink-900); }
.xsb { margin-top: clamp(48px, 5vw, 72px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.2fr) 120px minmax(0, 1fr); align-items: center; gap: 0; }
.xsb__node { position: relative; display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(24px, 2.4vw, 36px) 20px; border-radius: var(--r-card); background: #fff; min-height: 180px; align-content: center; }
.xsb__node--db { background: var(--night-2); color: #fff; box-shadow: none; }
.xsb__k { font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; }
.xsb__big { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); letter-spacing: -.02em; color: inherit; }
.xsb__node ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-note); color: var(--ink-500); }
.xsb__arrow { position: relative; height: 1px; background: var(--ink-300); margin-inline: 8px; }
.xsb__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 1px solid var(--ink-300); border-right: 1px solid var(--ink-300); transform: rotate(45deg); }
.xsb__arrow > span { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-small); color: var(--ink-700); }   /* 矢印の名前だけ（「契約」の札の中の字には効かせない） */
.xsb__contract { grid-column: 1 / -1; margin-top: 24px; justify-self: center; padding: 8px 18px; border-radius: 999px; border: 1px dashed var(--ink-300); font-size: var(--fs-note); color: var(--ink-500); }
.xsvs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.xsv { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--r-card); background: var(--mist); }
.xsv__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.55; }
.xsv__b { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-500); }
.xsv__note { margin: 0; font-size: var(--fs-note); line-height: 1.8; color: var(--ink-400); }
.xcss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.xcs { display: grid; align-content: start; gap: 18px; padding: clamp(28px, 2.8vw, 40px); border-radius: var(--r-card); background: #fff; }
.xcs__t { margin: 0 0 4px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; }
.xcs__k { margin: 0 0 4px; font-size: var(--fs-note); font-weight: 700; letter-spacing: .08em; color: var(--teal-700); }
.xcs__row p:last-child, .xcs__voice p { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-700); }
.xcs__voice { padding: 18px 20px; border-radius: 16px; background: var(--mist); }
.xcs__voice blockquote { margin: 0; }
.advs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.adv { display: grid; align-content: start; gap: 16px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--r-card); background: var(--mist); }
.adv__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -.01em; }
.adv__k { margin: 0 0 4px; font-size: var(--fs-note); font-weight: 700; letter-spacing: .08em; color: var(--teal-700); }
.adv__row p:last-child { margin: 0; font-size: var(--fs-small); line-height: 1.9; color: var(--ink-700); }
.adv__tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.adv__tags li { padding: 4px 12px; border-radius: 999px; background: #fff; font-size: var(--fs-note); color: var(--ink-700); }
.price { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 14px; justify-items: start; max-width: 960px; padding: clamp(32px, 4vw, 64px); border-radius: var(--r-stage); background: #fff; }
.price__h { margin: 0; font-size: var(--fs-h2); font-weight: 500; letter-spacing: .04em; }
.price__k { margin: 6px 0 0; font-size: var(--fs-small); font-weight: 700; color: var(--ink-500); }
.price__main { margin: 0; font-size: var(--fs-h2); font-weight: 500; letter-spacing: .03em; }
.price__sub { margin: 0 0 10px; max-width: 40em; font-size: var(--fs-body); line-height: 2; color: var(--ink-700); }
.price .btns { margin-top: 8px; }
.diags { display: grid; gap: 0; border-top: 1px solid var(--line); }
.diag { border-bottom: 1px solid var(--line); }
.diag > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 32px; gap: 14px; align-items: center; padding: 24px 4px; }
.diag > summary::-webkit-details-marker { display: none; }
.diag__n { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .1em; color: var(--teal-700); }
.diag__t { font-size: var(--fs-h3); font-weight: 500; letter-spacing: .03em; }
.diag__c { font-family: var(--font-display); font-size: var(--fs-small); color: var(--ink-400); }
.diag__c::after { content: " 項目"; font-family: var(--font-sans); font-size: var(--fs-note); }
.diag[open] .acc__plus::after { transform: rotate(0); }
.diag__list { list-style: none; margin: 0; padding: 0 4px 28px 74px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; }
.diag__list li { position: relative; padding-left: 16px; font-size: var(--fs-small); line-height: 1.85; color: var(--ink-700); }
.diag__list li::before { content: ""; position: absolute; left: 0; top: .9em; width: 6px; height: 1px; background: var(--teal-700); }
.std-wrap { margin-top: clamp(32px, 3.6vw, 48px); }
.std-wrap > p { margin: 0 0 14px; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-700); }
.std { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.std li { padding: 14px 18px; border-radius: 14px; background: var(--mist); font-size: var(--fs-small); line-height: 1.7; color: var(--ink-700); }
.reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.report { margin: 0; }
.report__cover { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; padding: clamp(24px, 2.6vw, 40px); display: grid; align-content: space-between; background: #0a1433; color: #fff; box-shadow: none; }
.report__brand { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .14em; color: var(--logo-1); }
.report__t { font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; max-width: 14em; }
.report__line { height: 1px; background: var(--grad-logo); width: 40%; }
.report figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-500); }
.tris { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.tri { display: grid; align-content: start; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line); }
.tri__n { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-statement); line-height: 1; color: var(--ink-900); }
.tri__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.55; }
.tri p { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-500); }
.zics { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.zic { display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card); background: #fff; }
.zic p { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; }
.zic__ic { width: 56px; height: 56px; border-radius: 16px; background: var(--night-2); position: relative; }
.zic__ic::after { content: ""; position: absolute; inset: 14px; background: var(--grad-logo); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.zic__ic--cloud { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .6-7.95A6 6 0 0 0 6.2 9.1 4.5 4.5 0 0 0 7 18z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.zic__ic--devices { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5' width='13' height='9' rx='1.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M1.5 17h16' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='17.5' y='8' width='5' height='10' rx='1.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.zic__ic--insider { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='3.6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ztd { margin-top: clamp(48px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.ztd__col { margin: 0; display: grid; gap: 14px; align-content: start; }
.ztd__k { margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; color: var(--ink-500); }
.ztd__box { position: relative; border-radius: var(--r-card); background: var(--mist); padding: clamp(12px, 1.4vw, 20px); }
.ztd__box--zt { background: var(--night-2); }
.ztd__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ztd__cap { margin: 0; font-size: var(--fs-small); line-height: 1.8; color: var(--ink-700); }
.ztd__lab { font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: .06em; fill: var(--ink-500); }
.ztd__lab--n { fill: var(--on-night-2); } .ztd__lab--c { text-anchor: middle; }
.ztd__wall { fill: #fff; stroke: var(--ink-300); stroke-width: 2; }
.ztd__in path { fill: none; stroke: var(--ink-300); stroke-width: 1.5; stroke-dasharray: 4 5; }
.ztd__go { fill: none; stroke: var(--ink-500); stroke-width: 1.5; }
.ztd__go--in { stroke: var(--ink-300); }
.ztd__head { fill: none; stroke: var(--ink-500); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ztd__ext { fill: #fff; stroke: var(--ink-400); stroke-width: 2; } .ztd__extc { fill: var(--ink-400); }
.ztd__gate { fill: #fff; stroke: var(--ink-500); stroke-width: 1.5; }
.ztd__chk { fill: none; stroke: var(--ink-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ztd__node { fill: var(--line); stroke: var(--ink-300); stroke-width: 1.5; }
.ztd__flow path { fill: none; stroke: url(#ztg); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 7; }
html.mo .ztd.is-in .ztd__flow path { animation: ztflow 1.6s linear infinite; }
@keyframes ztflow { to { stroke-dashoffset: -18; } }
html.motion-off .ztd__flow path { animation: none !important; }
@media (max-width: 599.98px) { .ztd__lab { font-size: 24px; } }
.ztd__sub { fill: var(--night-3); stroke: var(--on-night-3); stroke-width: 1.5; }
.ztd__hubr { fill: none; stroke: url(#ztg); stroke-width: 2; }
.ztd__hub { fill: rgba(131,251,241,.12); }
.ztd__chk--n { stroke: #83fbf1; }
.ztd__ring { fill: none; stroke: rgba(131,251,241,.55); stroke-width: 1.5; }
.ztd__res { fill: var(--night-4); stroke: #9fd6ff; stroke-width: 1.5; }
.qa-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.qa-grid__main { grid-column: 1 / span 7; display: grid; gap: 14px; }
.qa-grid__main > p { margin: 0 0 18px; font-size: var(--fs-body); line-height: 2; color: var(--ink-700); }
.qa-grid__h { margin: 12px 0 0; font-size: var(--fs-h3); font-weight: 500; }
.qcats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.qcat { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.qcat__n { grid-row: span 2; font-family: var(--font-display); font-size: var(--fs-small); color: var(--teal-700); padding-top: .3em; }
.qcat__t { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.qcat p { margin: 4px 0 0; font-size: var(--fs-small); line-height: 1.9; color: var(--ink-500); }
.qscore { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + 40px); overflow: hidden; isolation: isolate; display: grid; gap: 4px; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-stage); background: var(--night-2); color: #fff; }
.qscore__k { margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; color: var(--on-night-3); }
.qscore__l { margin: 0; font-size: var(--fs-body); font-weight: 500; }
.qscore__v { margin: 16px 0 0; display: flex; align-items: baseline; gap: .1em; }
.qscore__v .num { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-s); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.qscore__u { font-size: max(14px, calc(var(--fs-display-s) * .28)); font-weight: 500; color: var(--on-night-2); }
.qscore__orb { position: absolute; z-index: -1; right: -30%; bottom: -36%; width: 90%; opacity: .5; }
.qscore__orb img { width: 100%; height: auto; }
.scope { margin-top: clamp(48px, 5vw, 72px); display: grid; gap: 16px; }
.scope__h { margin: 0; font-size: var(--fs-h3); font-weight: 500; }
.tbl-wrap { overflow-x: auto; border-radius: 16px; background: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.tbl th, .tbl td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.8; }
.tbl thead th { font-size: var(--fs-note); letter-spacing: .06em; color: var(--ink-500); background: var(--mist); }
.tbl tbody th { white-space: nowrap; }
@media (max-width: 599.98px) { .tbl th, .tbl td { padding: 14px 14px; } }
.tbl tbody th { width: 30%; font-weight: 700; color: var(--ink-900); }
.tbl td { color: var(--ink-700); }
.out { padding: 20px 24px; border-radius: 16px; background: #fff; }
.out__k { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--ink-500); }
.out ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--fs-small); color: var(--ink-700); }
.delivs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.deliv { display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--col-gap); align-items: start; padding: clamp(28px, 2.8vw, 40px) 0; border-bottom: 1px solid var(--line); }
.deliv__n { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .08em; color: var(--teal-700); padding-top: .4em; }
.deliv__t { margin: 0 0 8px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.55; }
.deliv__main p { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-500); }
.deliv__out { padding: 18px 20px; border-radius: 16px; background: var(--mist); }
.deliv__out .k { display: block; margin-bottom: 6px; font-size: var(--fs-note); font-weight: 700; letter-spacing: .06em; color: var(--teal-700); }
.deliv__out ul { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; font-size: var(--fs-small); line-height: 1.85; color: var(--ink-700); }
.consult { display: grid; gap: 18px; justify-items: start; max-width: 960px; padding: clamp(32px, 4vw, 64px); border-radius: var(--r-stage); background: #fff; }
.consult__h { margin: 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.consult > p { margin: 0; font-size: var(--fs-body); line-height: 2; color: var(--ink-700); }
.aiqs { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 12px; }
.aiq { position: relative; padding: 18px 22px 18px 56px; border-radius: 16px; background: var(--mist); }
.aiq__mark { position: absolute; left: 20px; top: 8px; font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--teal-700); }
.aiq p { margin: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.8; }
.relcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.relc { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 1fr auto auto; gap: 6px; min-height: 300px; padding: 24px; border-radius: var(--r-card); background: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) -1px -1px / 32px 32px, linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) -1px -1px / 32px 32px, #0a1433; color: #fff; }
.relc__vis { position: absolute; z-index: -1; right: -10%; top: -14%; width: 76%; aspect-ratio: 1; }
.relc__vis img { width: 100%; height: 100%; object-fit: contain; transition: transform 1600ms var(--ease-out); }
.relc__en { grid-row: 2; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.relc__t { grid-row: 3; font-size: var(--fs-small); font-weight: 500; color: var(--on-night-2); padding-right: 48px; }
.relc__go { position: absolute; right: 20px; bottom: 20px; color: inherit; }
.relc--mini { min-height: 0; padding: 18px 56px 18px 20px; border-radius: 16px; display: block; }
.relc--mini .relc__t { color: #fff; padding: 0; }
.entry { display: grid; gap: 22px; justify-items: start; }
.entry__p { margin: 0; font-size: var(--fs-lead); line-height: 2; color: var(--ink-700); }
.mvals { list-style: none; margin: clamp(32px, 3.6vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.mval { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card); background: #fff; }
.mval__n { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1; color: var(--ink-900); justify-self: start; }
.mval__t { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.55; }
.mval ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: var(--fs-small); line-height: 1.9; color: var(--ink-700); }
.manda-close { margin-top: clamp(40px, 4.4vw, 64px); display: grid; gap: 24px; justify-items: start; max-width: 40em; }
.manda-close p { margin: 0; font-size: var(--fs-lead); line-height: 2; color: var(--ink-700); }
.policy__tail { margin-top: 32px; }

/* ---------- 13. フォーム・方針・記事 ---------- */
.sec--form { padding-block: var(--sp-m) var(--sp-l); }
.form-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.form-aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 18px; }
.form-aside .prose p { font-size: var(--fs-small); line-height: 1.95; color: var(--ink-500); }
.form { grid-column: 6 / -1; padding: 0; border: 0; box-shadow: none; background: none; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px var(--col-gap); }
.f { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; grid-column: 1 / -1; }
.f--half { grid-column: auto; }
.f__l { display: flex; align-items: center; gap: 10px; padding: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; color: var(--ink-900); }
.f__req { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-note); font-weight: 500; color: var(--teal-700); white-space: nowrap; }
.f__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad-ink); }
.f__note { font-size: var(--fs-note); font-weight: 400; color: var(--ink-400); }
.f input:not([type=checkbox]):not([type=radio]), .f select, .f textarea { width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink-900); border: 0; border-radius: var(--r-input); padding: 15px 16px;
  background-color: var(--mist); background-image: linear-gradient(var(--teal-700), var(--teal-700)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 240ms var(--ease-out), background-color 240ms; }
.f select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(var(--teal-700), var(--teal-700)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234b5670' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 0 2px, 12px 8px; background-position: 0 100%, calc(100% - 18px) 50%; padding-right: 44px; }
.f input:focus:not([type=checkbox]):not([type=radio]), .f textarea:focus { outline: none; background-color: #fff; background-size: 100% 2px; box-shadow: 0 0 0 1px var(--line); }
.f select:focus { outline: none; background-color: #fff; background-size: 100% 2px, 12px 8px; box-shadow: 0 0 0 1px var(--line); }
.f textarea { min-height: 160px; line-height: 1.85; resize: vertical; }
.f.is-error input, .f.is-error select, .f.is-error textarea { background-color: #fff5f6; box-shadow: 0 0 0 1px #e2a1aa; }
.f__err { margin: 0; font-size: var(--fs-note); color: #c22d3d; animation: errIn 160ms var(--ease-ui) both; }
@keyframes errIn { from { opacity: 0; } }
.chks { display: flex; flex-wrap: wrap; gap: 8px; }
.chk { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 999px; background: var(--mist); font-size: var(--fs-small); cursor: pointer; transition: background-color 200ms; }
.chk:hover { background: var(--teal-100); }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk__box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--ink-300); display: grid; place-items: center; background: #fff; color: transparent; transition: background-color 200ms, border-color 200ms; flex: none; }
.chk__box svg { width: 12px; height: 12px; }
.chk input:checked + .chk__box { background: var(--ink-900); border-color: var(--ink-900); color: var(--logo-1); }
.chk input:focus-visible + .chk__box { outline: 2px solid var(--teal-700); outline-offset: 2px; }
.chk--radio .chk__box { border-radius: 50%; }
.chk--radio input:checked + .chk__box { box-shadow: inset 0 0 0 4px #fff; }
.chk--consent { padding: 0; background: none; font-size: var(--fs-small); }
.chk--consent:hover { background: none; }
.notice { margin-top: 32px; padding: 22px 24px; border-radius: 16px; background: var(--mist); }
.notice__h { margin: 0 0 10px; font-size: var(--fs-small); font-weight: 700; }
.notice__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-note); line-height: 1.85; color: var(--ink-500); }
.notice__sub { padding-left: 1em; }
.form__foot { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 20px; justify-items: start; }
.form__pv { margin: 0; font-size: var(--fs-note); color: var(--ink-400); }
.form__done, .form__fallback { margin-top: 24px; padding: 24px 26px; border-radius: 16px; background: var(--teal-50); }
.form__done-t { margin: 0 0 6px; font-size: var(--fs-body); font-weight: 700; }
.form--inline { grid-column: auto; max-width: 860px; }
.sec--policy { padding-block: var(--sp-m) var(--sp-l); }
.policy { max-width: 820px; margin-inline: auto; }
.policy h2 { margin: 2.4em 0 .8em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; letter-spacing: .03em; }
.policy h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.policy p, .policy li { font-size: var(--fs-body); line-height: 2.05; color: var(--ink-700); }
.policy ul { padding-left: 1.3em; }
.policy li.sub { list-style: none; margin-left: -.2em; }
.sec--article-body { padding-block: var(--sp-m) var(--sp-l); }
.article { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.article__body { grid-column: 1 / span 8; max-width: 44em; }
.article__body h2 { margin: 2.2em 0 .8em; font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; padding-left: 16px; border-left: 2px solid; border-image: var(--grad-ink) 1; }
.article__body p { font-size: var(--fs-body); line-height: 2.1; color: var(--ink-700); }
.article__who { margin-top: 2em !important; font-weight: 500; color: var(--ink-900) !important; }
.article__dl { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 0; margin: 1.4em 0; border-top: 1px solid var(--line); }
.article__dl dt, .article__dl dd { margin: 0; padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.8; }
.article__dl dt { font-weight: 700; }
.article__side { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + 40px); }
.side-card { display: grid; gap: 12px; }
.side-card__h { margin: 0; font-size: var(--fs-note); font-weight: 700; letter-spacing: .08em; color: var(--ink-500); }

/* ---------- 14. 映像（コンセプトムービー） ---------- */
.sec--movie { padding-block: var(--sp-m) var(--sp-l); }
.sec--movie .st { margin-bottom: clamp(28px, 3vw, 40px); }
.movie { border-radius: 16px; box-shadow: none; background: #050914; }
.movie__shade { background: linear-gradient(90deg, rgba(5,9,20,.78) 0%, rgba(5,9,20,.32) 48%, rgba(5,9,20,.04) 100%); }
.movie__t { font-size: var(--fs-h2); letter-spacing: .06em; }
.movie .movie__text { max-width: min(88%, 1040px); }
@media (max-width: 599.98px) { .movie__t { font-size: 16px; line-height: 1.7; } }
.movie__play { background: #fff; color: #0b1124; }
.sec--movie .movie { max-width: none; margin-inline: 0; }   /* コンテナの幅（2 列目の線と左右をそろえる） */
.sec--movie .movie__play { left: 50%; top: 50%; }
.nrow__sub { margin: 8px 0 0; font-size: var(--fs-lead); font-weight: 500; line-height: 1.7; letter-spacing: .03em; color: var(--ink-700); }
.nrows--dark .nrow__sub { color: #e3e9f7; }
html.js .movie:not(.is-playing) .movie__video { visibility: hidden; }

/* ---------- 15. 動きを止めたとき・reduced-motion ---------- */
html.motion-off :is(.mi, .h-in, .hv__poster, .hvh__line, .hvh__scan, .hvh__cue span, .hero__ph img, .hero__person, .menu__item, .menu__group),
html.motion-off [data-hero="video"] .header { animation: none !important; }
html.motion-off .hvh__scan { display: none; }
html.motion-off .hvh__line--b .mi { background-position: 0 0; }
html.motion-off :is(.btn__l, .arrow__a, .arrow__b, .case.rv, .case.rv > *, .svc6__cap-in, .filter__pill) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.mi, .h-in, .hv__poster, .hvh__line, .hero__ph img, .hero__person, .menu__item, .menu__group), [data-hero="video"] .header { animation-delay: 0s !important; }
  .hvh__scan, .hv__grain { display: none; }
  .hvh__line--b .mi { background-position: 0 0; }
}

/* ---------- 16. ページ遷移（View Transitions）：先端が曲線の幕で開く ---------- */
::view-transition-old(root) { animation: vtOld 520ms var(--ease-inout) both; }
::view-transition-new(root) { animation: vtNew 680ms var(--ease-inout) 120ms both; }
@keyframes vtOld { to { transform: scale(.96); filter: brightness(.6); clip-path: inset(0 round 24px); } }
@keyframes vtNew { from { clip-path: inset(100% 0 0 0 round 50% 50% 0 0 / 160px 160px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }

/* ---------- 17. 狭い画面 ---------- */
@media (max-width: 1240px) {
  .footer--night .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer--night .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .svc6__en { font-size: var(--fs-h2); }
  .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xsvs, .advs, .relcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .execs { grid-template-columns: minmax(0, 1fr); }
  .exec { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
  .execs--adv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .header__cta .icon-btn { display: none; }
}
@media (max-width: 899.98px) {
  .u-pc { display: none; }
  .st, .idxl, .stmt .stmt__in, .stmt2, .about__in, .mvd__in, .manda__grid, .qa-grid, .form-wrap, .article, .access, .svc6 { grid-template-columns: minmax(0, 1fr); }
  .st > *, .idxl > *, .stmt__in > *, .stmt2 > *, .about__in > *, .mvd__in > *, .manda__grid > *, .qa-grid > *, .form-wrap > *, .article > *, .access > *, .svc6 > * { grid-column: 1 / -1 !important; }
  .st { row-gap: 12px; }
  .st__en, .ent { font-size: clamp(28px, 7.2vw, 40px); }   /* スマホでも H1（28px）より大きくしない */
  .st__more { justify-self: start; margin-top: 8px; }
  .idxl__head, .about--index .about__head, .manda__head, .form-aside, .article__side, .qscore { position: static; }
  .article__side { margin-top: 48px; }
  .idxl__body, .about__b, .stmt__body, .stmt2__b, .mvd__body, .manda__body { margin-top: 32px; }
  .about--index .about__b { margin-top: 28px; }
  .stmt2__b, .stmt__body, .about--statement .about__b { margin-top: 28px; }
  .hero--stage { min-height: 0; display: block; }
  .hero--stage .hero__grid { padding-block: 0 calc(var(--cap-h) + 48px); }
  .hero--stage .hero__copy { max-width: none; }
  .hero__crumb { margin-bottom: 22px; }
  .hero--stage .hero__crumb { position: relative; margin-bottom: 16px; }
  .hero--photo { min-height: 640px; }
  .hero__ph img { object-position: var(--focus-m, var(--focus, 50% 50%)); }
  .hero__shade { background: linear-gradient(0deg, rgba(5,9,20,.9) 0%, rgba(5,9,20,.55) 46%, rgba(5,9,20,.1) 78%), linear-gradient(180deg, rgba(5,9,20,.5) 0, rgba(5,9,20,0) 140px); }
  .hero__people { left: 0; width: 100%; bottom: auto; height: 62%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .hero--board { min-height: 680px; }
  .hero--simple { min-height: 340px; }
  .hvh { min-height: 620px; max-height: none; }
  .hvh__in { padding-bottom: calc(var(--cap-h) + 40px); }
  .hv__shade { background: linear-gradient(0deg, rgba(5,9,20,.88) 0%, rgba(5,9,20,0) 62%), linear-gradient(180deg, rgba(5,9,20,.5) 0, rgba(5,9,20,0) 140px); }
  .hvh__h1 { white-space: normal; }
  .hvh__lead { font-size: var(--fs-body); line-height: 1.9; }
  .hvh__btns { margin-top: 28px; }
  .hvh__btns .btn { width: 100%; justify-content: space-between; height: 52px; }
  .hvh__btn2 { display: none; }
  .hvh__ctrl { right: var(--gutter); bottom: calc(var(--cap-h) + 40px + 4px); }   /* ボタンの行（高さ 52px）の右端に、中心をそろえる */
  .hvh__btns { padding-right: 60px; }
  .hvh__cue { display: none; }
  .sheet { padding-top: calc(var(--cap-h) + var(--sp-m)); padding-bottom: var(--sp-l); }
  .svc6__stage { display: none; }
  .svc6__list { border: 0; display: grid; gap: 14px; }
  .svc6__item { position: sticky; top: calc(var(--header-h) + 12px + var(--i) * 58px); }   /* 前のカードの英字の行（58px）を残す */
  .svc6__a { min-height: 0; height: min(360px, 92vw); grid-template-columns: minmax(0, 1fr) 40px; grid-template-rows: auto auto 1fr; row-gap: 6px; align-content: start; padding: 16px 22px 24px; border: 0; border-radius: var(--r-card); overflow: hidden; isolation: isolate;
    background: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) -1px -1px / 32px 32px, linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) -1px -1px / 32px 32px, #0a1433; color: #fff; transform: scale(calc(1 - var(--cover, 0) * .06)); filter: brightness(calc(1 - var(--cover, 0) * .3)); transform-origin: 50% 0; }
  .svc6__vis { display: block; position: absolute; z-index: -1; left: 22px; bottom: 24px; width: min(40%, 168px); aspect-ratio: 1; }   /* 文字の列にそろえて左下に。右下の矢印のボタンと重ねない */
  .svc6__vis img { width: 100%; height: 100%; object-fit: contain; }
  .svc6__en { grid-column: 1 / -1; grid-row: 1; font-size: 22px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 英字の名前は 1 行（重なったときの帯で字を切らない） */
  .svc6__ja { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; font-size: var(--fs-body); color: var(--on-night-2); }
  .svc6__go { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; opacity: 1; transform: none; color: #fff; }
  html.motion-off .svc6__item, html:not(.js) .svc6__item { position: relative; top: auto; }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .case { min-height: 0; gap: 14px; grid-template-rows: auto auto auto; }
  .case .case__who { margin-top: 18px; }
  .recruit { background: var(--night-0); }
  .recruit__card { height: auto; min-height: 0; max-height: none; clip-path: none; display: grid; }
  .recruit__ph { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .recruit__ph img { inset: 0; height: 100%; transform: none; }
  .recruit__shade { background: linear-gradient(0deg, #050914 0%, rgba(5,9,20,0) 36%); height: auto; bottom: auto; aspect-ratio: 4 / 5; }
  .recruit__in { position: relative; inset: auto; padding-block: 8px 48px; }
  .sec--manda { padding-block: var(--sp-l) calc(var(--sp-l) + var(--cap-h)); }
  .manda__body { padding-left: 24px; }
  .manda__body p { font-size: var(--fs-body); }
  .news__item a { grid-template-columns: minmax(0, 1fr) 36px; row-gap: 6px; padding: 18px 2px; }
  .news__date { grid-column: 1; grid-row: 1; display: inline-flex; gap: 14px; }
  .news__item a:has(.news__cat) .news__date { grid-row: 1; }
  .news__cats { grid-column: 1; grid-row: 2; }
  .news__t { grid-column: 1; grid-row: 3; font-size: var(--fs-body); }
  .news--blog .news__item a { grid-template-columns: minmax(0, 1fr) 36px; }
  .news--blog .news__t { grid-row: 2; }
  .news__item .go { grid-column: 2; grid-row: 1 / span 3; opacity: 1; transform: none; color: var(--ink-500); }
  html:not(.is-scrolling) .news__item a:hover > :not(.go) { transform: none; }
  .filter { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 999px; margin-inline: calc(-1 * var(--gutter)); max-width: none; width: calc(100% + var(--gutter) * 2); border-radius: 0; padding-inline: var(--gutter); background: transparent; }
  .filter::-webkit-scrollbar { display: none; }
  .filter__btn { flex: none; white-space: nowrap; background: var(--mist); }
  .filter__btn { padding: 0 14px; height: 36px; font-size: var(--fs-small); }
  .filter__pill { height: 36px; }
  .nrows--dark, .nrows--dark[style*="--n:4"] { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .close__in { padding-bottom: clamp(120px, 34vw, 200px); }
  .ctiles, .ctiles--lg { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ctile { min-height: 0; padding: 18px 18px 18px 20px; }
  .sec--desks .ctile { min-height: 0; }
  .footer--night .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer--night .footer__brand { grid-column: 1 / -1; }
  .footer__mark-in { font-size: calc((100vw - var(--gutter) * 2) / var(--mark-k, 12.05)); }
  .xp { height: auto; flex-direction: column; }
  .xp__item { height: 260px; flex: none; }
  .mvcs, .mvals, .tris, .zics, .ztd, .reports, .xsvs, .xcss, .advs, .relcs, .bizs, .vals, .sidxs, .smenu, .std, .cases, .duo { grid-template-columns: minmax(0, 1fr); }
  .biz { grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
  .execs--adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exec { grid-template-columns: minmax(0, 1fr); }
  .exec__ph { max-width: none; aspect-ratio: 4 / 4.4; }
  .integrity { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv > dt { padding: 18px 4px 2px; border-bottom: 0; }
  .kv > dd { padding: 2px 4px 18px; }
  .kv__list--2 { grid-template-columns: minmax(0, 1fr); }
  .certbox { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .xsb { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: stretch; }
  .xsb__arrow { width: 1px; height: 56px; margin: 0 auto; }
  .xsb__arrow::after { right: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }
  .xsb__arrow > span { left: 16px; bottom: 50%; transform: translateY(50%); }
  .stps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stps__line { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .stps__line span { transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
  html.mo .stps__line span { transform: scaleY(var(--p, 0)); }
  .stp { padding: 0 0 0 36px; }
  .stp__dot { top: 2px; }
  .deliv { grid-template-columns: 40px minmax(0, 1fr); }
  .deliv__out { grid-column: 2; }
  .diag__list { grid-template-columns: minmax(0, 1fr); padding-left: 4px; }
  .diag > summary { grid-template-columns: 32px minmax(0, 1fr) 32px; grid-template-rows: auto auto; row-gap: 4px; column-gap: 10px; }
  .diag__n { grid-row: 1 / span 2; align-self: start; padding-top: .3em; }
  .diag__t { grid-column: 2; font-size: var(--fs-h3); }
  .diag__c { grid-column: 2; grid-row: 2; }
  .diag > summary .acc__plus { grid-column: 3; grid-row: 1 / span 2; }
  .smenu__c { grid-template-columns: 88px minmax(0, 1fr); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
  .f--half { grid-column: 1 / -1; }
  .form { margin-top: 32px; }
  .article__dl { grid-template-columns: minmax(0, 1fr); }
  .article__dl dt { border-bottom: 0; padding-bottom: 0; }
  .issue { grid-template-columns: 44px minmax(0, 1fr); }
  .sec-cover .ph { --ar: 4 / 3; }
  .access__ph { margin-top: 28px; }
}
@media (max-width: 560px) {
  .brand__logo { height: 26px; }
  .btn { height: 52px; padding-left: 24px; }
  .hero__h1, .hvh__h1 { font-size: 26px; }
  .hvh__h1 { font-size: 28px; }
  .footer--night .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer--night .footer__col:nth-child(3) { grid-column: 1 / -1; }
  .execs--adv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .chk { padding: 10px 14px; }
}

/* ---------- 18. 和文の行末 ---------- */
.news__t, .svc6__ja, .issue__t, .nrow__t, .nrow__b, .case__what, .val__b, .xsv__b, .tri p, .stp__b, .biz__d, .mvc__st, .pr__ja, .exec__bio, .close__lead, .st__lead, .about__b p, .prose p { text-wrap: pretty; }

/* 記事のシェア（現在のサイトの 4 つ） */
.share { margin-top: clamp(40px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.prose .share__t, .share__t { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--ink-700); }
.share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.share__a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: var(--fs-small); font-weight: 500; color: var(--ink-700); text-decoration: none; transition: border-color var(--t-1) var(--ease-ui), color var(--t-1) var(--ease-ui), transform var(--t-1) var(--ease-ui); }
.share__a:hover { border-color: var(--ink-900); color: var(--ink-900); }
.share__a:active { transform: scale(.97); }
html.motion-off .hvh__cue, html:not(.mo) .hvh__cue { display: none; }

/* ---------- 講評（2 回目）の反映：カードの並び、見出しの行、押したときの手応え ---------- */
@media (min-width: 900px) {
  .cases--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cases--5, .xsvs--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cases--5 > *, .xsvs--5 > * { grid-column: span 2; }
  .cases--5 > :nth-child(-n+2), .xsvs--5 > :nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 899.98px) {
  /* 英字の見出しと「View More」を 1 行に置き、和文の見出しをその下に */
  .st--more.st--en { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .st--more.st--en > .st__en { grid-column: 1 / 2 !important; grid-row: 1; align-self: center; }
  .st--more.st--en > .st__more { grid-column: 2 / 3 !important; grid-row: 1; align-self: center; justify-self: end; margin-top: 0; }
  .st--more.st--en > .st__main { grid-row: 2; }
}
@media (hover: none) {
  /* タッチの端末では、読んでいる行が薄く見えないようにする */
}
@media (min-width: 900px) {
  /* ミッション・ビジョン・バリューの見出しは、本文を読む間、上に残す */
  .mvd__head { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
}
/* 自前の transition を持つ .rv：登場の動き（不透明度と位置、--i ごとに 80ms の遅れ）を消さずに、押したときの縮みを足す */
.ctile { transition: opacity 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), background-color 320ms var(--ease-ui), border-color 320ms, scale 180ms var(--ease-ui); }
.mvc, .biz { transition: opacity 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), box-shadow 400ms var(--ease-ui), scale 180ms var(--ease-ui); }
.sidx { transition: opacity 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), background-color 240ms; }
.relc { transition: opacity 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), transform 900ms var(--ease-expo-out) calc(var(--i, 0) * 80ms), scale 180ms var(--ease-ui); }
.xp__item { transition: flex-grow 560ms var(--ease-out), scale 180ms var(--ease-ui); }
html.mo :is(.ctile, .mvc, a.biz, .relc, .xp__item):active { scale: .985; }
html.mo :is(.sidx, .news__item a, .svc6__a):active { background-color: rgba(11,17,36,.05); }
/* 事例のカード：同じ行のカードで、番号・業種・題の高さをそろえる（題の 1 行目が横にそろう） */
@supports (grid-template-rows: subgrid) {
  .case { grid-row: span 3; grid-template-rows: subgrid; row-gap: 18px; min-height: 0; }
  .case .case__who { align-self: start; margin-top: clamp(28px, 3.2vw, 52px); }
  .case .case__what { align-self: start; padding-bottom: clamp(4px, .8vw, 12px); }
}
@media (max-width: 899.98px) {
  @supports (grid-template-rows: subgrid) { .case { row-gap: 12px; } .case .case__who { margin-top: 22px; } }
}

/* ---------- 講評（3 回目）の反映 ---------- */
/* ② ページの切り替え：ヘッダーはページと一緒に動かす（新旧のヘッダーが重なって灰色の帯にならない）。
   紺の幕の上で、古いページは奥へ下がり、新しいページが曲線の縁で下から開く。古いページを暗くするフィルターは使わない */
.header { view-transition-name: none; }
::view-transition { background: #050914; }
@keyframes vtOld { to { transform: translateY(-4vh) scale(.94); clip-path: inset(0 round 28px); } }
/* ③ ヒーローの上にいる間は、ヘッダーの「お問い合わせ」を線のボタンにする（画面の主ボタンはヒーローの 1 つだけ） */
.header .btn--primary { transition: background-color 300ms var(--ease-ui), color 300ms var(--ease-ui), box-shadow 300ms var(--ease-ui); }
html.on-night.at-top:not(.menu-open) .header .btn--primary { background: rgba(255,255,255,.04); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
html.on-night.at-top:not(.menu-open) .header .btn--primary:hover { background: rgba(255,255,255,.12); }
html.on-night.at-top:not(.menu-open) .header .btn--primary .arrow { background: rgba(255,255,255,.14); color: #fff; }
/* ヒーローの上では「資料請求」は枠のない文字のリンクに（2 つのボタンを見分けられるように） */
/* ヘッダーの「資料請求」：文字のリンク（主ボタンは「お問い合わせ」の 1 つだけ）。ホバーで下線が左から伸びる */
.header__doc { display: inline-flex; align-items: center; height: 44px; padding: 0 8px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .04em; color: inherit; text-decoration: none; white-space: nowrap; }
.header__doc span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 240ms var(--ease-ui); }
.header__doc:hover span, .header__doc:focus-visible span { background-size: 100% 1px; }
:is(html.on-night, html.mega-open, html.menu-open) .header .header__doc { color: #fff; }
@media (min-width: 900px) { .hvh__btn2 { display: none; } }   /* お問い合わせはヘッダーにある */
/* 下層のヒーローの 2 つ目のボタンは、文字のリンクの見た目に */
.hero__btns .btn--line { background: transparent; border-color: transparent; padding-left: 6px; }
.hero__btns .btn--line::before { display: none; }
.hero__btns .btn--line .btn__t { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 360ms var(--ease-out); padding-bottom: 2px; }
:where(.header, .menu, html:not(.is-scrolling) main, html:not(.is-scrolling) footer) .hero__btns .btn--line:hover .btn__t { background-size: 100% 1px; }
/* ⑤ ヒーローの登場：映像は、スローガンの位置の角丸の窓から画面いっぱいに広がる */
@keyframes hvWin { from { clip-path: inset(24% calc(100% - max(var(--gutter), (100% - var(--maxw)) / 2) - min(100% - var(--gutter) * 2, var(--maxw)) * .6) 26% max(var(--gutter), (100% - var(--maxw)) / 2) round 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes hvWinM { from { clip-path: inset(34% var(--gutter) 30% var(--gutter) round 24px); } to { clip-path: inset(0 0 0 0 round 0); } }
html.mo .hv { animation: hvWin 1500ms cubic-bezier(.7, 0, .2, 1) calc(60ms + var(--vt-delay, 0ms)) both; }
@media (max-width: 899.98px) { html.mo .hv { animation-name: hvWinM; } }
/* ⑤ ヒーローの退場（900px 以上）：スローガンの 2 行が別々の速さで上がり、文字がぼけて抜ける */
@media (min-width: 900px) {
  html.mo .hvh__line:not(.hvh__line--b) { transform: translate3d(0, calc(var(--hx, 0) * -5vh), 0); }
  html.mo .hvh__line--b { transform: translate3d(0, calc(var(--hx, 0) * -12vh), 0); }
  html.mo .hvh__in { filter: blur(calc(var(--hx, 0) * 6px)); }
}
/* ④ サービス紹介のステージ：「01 / 06」と、一覧を読み進めた分だけ伸びる線 */
.svc6__prog { position: absolute; z-index: 2; left: clamp(24px, 2.2vw, 36px); right: clamp(24px, 2.2vw, 36px); bottom: calc(clamp(22px, 2vw, 32px) + 2.4em); height: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.svc6__prog i { position: absolute; inset: 0; background: var(--grad-logo); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
@media (min-width: 900px) { .svc6__prog { left: var(--bleed); } }
.svc6__foot { margin-top: clamp(32px, 3vw, 48px); }
@media (min-width: 900px) { .svc6__foot { margin-left: calc((100% + var(--col-gap)) / 12 * 5); } }   /* 一覧の列（6 列目）の下に置く */
/* 「×」は前の語の後ろ（PC は 1 行の中で前後に間をあける）。スマホでは 2 行目の頭に置く */
.svc6__x { display: inline-block; margin-inline: .4em; color: var(--ink-400); }
@media (max-width: 899.98px) { .svc6__x { margin-inline: 0 .35em; color: var(--on-night-3); } }
/* ⑧ ニュースと記事の行：題名は 2 列目（x=620）から。12 列にそろえる */
@media (min-width: 900px) {
  .news__item a { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-inline: 0; }
  .news__date { grid-column: 1 / span 2; }
  .news__cats { grid-column: 3 / span 3; }
  .news__t { grid-column: 6 / span 6; }
  .news__item a > .go { grid-column: 12; justify-self: end; margin-right: 8px; }
  .news--blog .news__item a { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .news--blog .news__t { grid-column: 6 / span 6; }
}
@media (min-width: 900px) and (max-width: 1199.98px) { .news__cats { flex-wrap: wrap; } }
/* 表示の順番：見出しが先、リードと「View More」と M&A の段落は後から */
.st .st__lead.rv { transition-delay: 220ms; }
.st .st__more.rv { transition-delay: 360ms; }
.manda__body .rv { transition-delay: calc(280ms + var(--i, 0) * 100ms); }
/* サービス紹介トップ（スマホ）：説明の最後の行が右下の矢印に重ならない */
@media (min-width: 600px) and (max-width: 899.98px) { .biz__d { padding-right: 52px; } }
@media (max-width: 599.98px) {
  /* スマホ：図形の小さな絵と名前を横に並べ、説明はカードの幅いっぱいに。右下の矢印の分だけ下を空ける */
  .biz { grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: start; padding-bottom: 68px; }
  .biz__body { display: contents; }
  .biz__vis { grid-column: 1; grid-row: 1 / span 3; align-self: start; border-radius: 14px; }
  .biz__en, .biz__ja, .biz__soon { grid-column: 2; }
  .biz__d { grid-column: 1 / -1; margin-top: 12px; }
}
/* フッター（600px 未満）：お知らせ・記事とお問い合わせの列は 1 列に（項目が 2 行に折れない） */
@media (max-width: 599.98px) { .footer--night .footer__col:nth-last-of-type(-n+2) { grid-column: 1 / -1; } }
.skip { font-size: var(--fs-small); }
/* M&A のページ：英字の副題は、見出しの下に灰色で（見出しの上の小さな英字にしない） */
.stmt__en { margin: 14px 0 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; letter-spacing: .01em; color: var(--ink-400); }
@media (max-width: 599.98px) {
  .movie .movie__text { display: none; }   /* 小さな画面では、ポスターの言葉を外し、再生ボタンだけを中央に（ボタンと文字を重ねない） */
}
/* 主要取引先・パートナー・認証（トップ）：左に区分の名前、右（2 列目）に内容。ロゴは罫線の升目に、ふだんは灰色で、ポインターを合わせると色が戻る */
.trust { display: grid; gap: clamp(40px, 4.4vw, 72px); }
.trust__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-top: clamp(24px, 2.4vw, 36px); border-top: 1px solid var(--line); }
.trust__h { grid-column: 1 / span 4; margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: var(--ink-900); }
.trust__clients, .trust__logos, .trust__certs { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; }
.trust__clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--col-gap); }
.trust__client { position: relative; padding-left: 18px; font-size: var(--fs-body); font-weight: 500; line-height: 1.7; color: var(--ink-700); }
.trust__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.trust__logo { display: grid; place-items: center; height: clamp(88px, 7.2vw, 116px); padding: 0 16%; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.trust__logo img { width: auto; height: auto; max-width: 100%; max-height: 34px; object-fit: contain; }   /* パートナーのロゴは各社の色のまま出す（白黒にしない） */
.trust__certs { display: flex; flex-wrap: wrap; gap: 32px 44px; align-items: flex-start; }
.trust__cert { display: grid; gap: 12px; justify-items: start; max-width: 240px; }
.trust__cert-ph { display: flex; align-items: center; height: 60px; }
.trust__cert-ph img { width: auto; height: 56px; max-width: 240px; object-fit: contain; }
.trust__cert-t { font-size: var(--fs-small); font-weight: 500; line-height: 1.75; color: var(--ink-700); }
@media (max-width: 899.98px) {
  .trust__row { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .trust__h, .trust__clients, .trust__logos, .trust__certs { grid-column: 1 / -1; }
  .trust__h br { display: none; }
  .trust__clients { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .trust__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust__logo { height: 76px; padding: 0 12%; }
  .trust__logo img { max-height: 26px; }
  .trust__certs { gap: 24px 28px; }
  .trust__cert { max-width: calc(50% - 14px); }
  .trust__cert-ph { height: 48px; }
  .trust__cert-ph img { height: 44px; max-width: 100%; }
}

/* ---------- 講評（4 回目）の反映 ---------- */
/* A2 経営陣（900px 未満）：縦に並ぶ肖像には横向きの影を掛けない。上端だけ暗くしてロゴと顔を分ける */
@media (max-width: 899.98px) {
  .hero--board .hero__shade { background: linear-gradient(180deg, rgba(5,9,20,.62) 0, rgba(5,9,20,0) 96px), linear-gradient(0deg, rgba(5,9,20,.94) 0, rgba(5,9,20,.4) 30%, rgba(5,9,20,0) 46%); }
}
/* F 経営陣の肖像：目の高さ（頬の線）をそろえる。画像を 114% の高さにして、人ごとに上下をずらす（--dy） */
.hero__person img { height: 114%; transform: translateY(var(--dy, 0%)); object-position: 50% 0; }
/* A4 サービスの冒頭の図形：ヘッダーの帯に線を入れない（上端をぼかして消す） */
.hero__visw { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) * .55), #000 calc(var(--header-h) + 72px)); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) * .55), #000 calc(var(--header-h) + 72px)); }
@media (max-width: 899.98px) { .hero__visw { position: static; overflow: visible; -webkit-mask-image: none; mask-image: none; } }
/* A5 ページの切り替え：新しいページは 180ms 遅れて開く（冒頭の曲線の動きと合わせる） */
::view-transition-new(root) { animation-delay: 180ms; }
/* A6 走査の光は、語の上だけを走る */
/* A7 ヒーローの退場（900px 以上）：ぼかすのはスローガンだけ（スクロールの 25% から）。1 行目を速く上げ、2 行の間を広げる */
@media (min-width: 900px) {
  html.mo .hvh__in { filter: none; }
  html.mo .hvh__mark { filter: blur(calc(max(0, var(--hx, 0) - .25) * 8px)); }
  html.mo .hvh__line:not(.hvh__line--b) { transform: translate3d(0, calc(var(--hx, 0) * -11vh), 0); }
  html.mo .hvh__line--b { transform: translate3d(0, calc(var(--hx, 0) * -4vh), 0); }
}
/* D M&A：「View More」と段落は、見出しが出終わってから */
.manda__head .btns.rv { transition-delay: 620ms; }
.manda__body .rv { transition-delay: calc(560ms + var(--i, 0) * 110ms); }
/* E 英字のラベルの後ろの和文の小見出し（パートナーシップ、前口上、ミッションなど）は、同じ行に置く（見出しの上を 2 段に） */
.st__sub { display: inline-block; margin-left: .9em; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500; letter-spacing: .06em; line-height: 1; color: var(--ink-500); vertical-align: .32em; }
.sec--dark .st__sub, [data-ground="dark"] .st__sub, .manda__head .st__sub { color: var(--on-night-2); }
/* H 事例のカードの上に、事業の図形の表紙（16:9）。題の高さは同じ行のカードでそろえる */
.case__vis { position: relative; display: block; margin: calc(-1 * clamp(28px, 2.8vw, 40px)) calc(-1 * clamp(28px, 2.8vw, 40px)) 4px; aspect-ratio: 16 / 9; overflow: hidden; background: #0a1433; }
@supports (grid-template-rows: subgrid) {
  .cases--vis .case { grid-row: span 4; }
}
/* ニュースと記事の行：ポインターを合わせると、地の色が左から満ちる */
.news__item a { background: linear-gradient(90deg, rgba(11,17,36,.065) 50%, rgba(11,17,36,0) 50%) 100% 0 / 200% 100% no-repeat; transition: background-position 420ms var(--ease-out); }
html:not(.is-scrolling) .news__item a:hover { background-color: transparent; background-position: 0 0; }
/* J 見出しの組みを 2 通りに：英字の下に和文を置く型（実績・パートナー・記事） */
.st--stack { row-gap: 10px; }
.st--stack > .st__en { grid-column: 1 / span 9; grid-row: 1; }
.st--stack .st__main { grid-column: 1 / span 5; display: contents; }
.st--stack .st__ja { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
.st--stack .st__lead { grid-column: 6 / span 6; grid-row: 2; align-self: end; margin: 0; }
.st--stack .st__more { grid-column: 10 / -1; grid-row: 1; align-self: end; justify-self: end; }
@media (max-width: 899.98px) {
  .st--stack .st__ja, .st--stack .st__lead { grid-row: auto; }
  .st--stack .st__lead { margin-top: 6px; }
}
@media (max-width: 899.98px) {
  .st--stack .st__ja, .st--stack .st__lead { grid-column: 1 / -1 !important; }
  .st--stack > .st__more { grid-row: 1; }
}
.cases--vis .case .case__n { font-size: var(--fs-h1); }   /* 絵の下では番号を一段小さく */
/* 文字を選んだときの色（ロゴの色） */
::selection { background: rgba(131, 251, 241, .34); color: inherit; }

/* ---------- 講評（5 回目）の反映 ---------- */
/* A1 トップの冒頭：画面の高さに合わせて、字の大きさと上下の間を連続して変える（境目で組みが跳ねない）。低いノートPCでもヘッダーに掛からない */
.hvh__in { justify-content: safe flex-end; padding-top: calc(var(--header-h) + 28px); }
@media (min-width: 900px) {
  :root { --cap-h: clamp(88px, 13vh, 120px); }
  .hvh { min-height: 600px; }
  .hvh__in { padding-bottom: calc(var(--cap-h) + clamp(16px, 9vh - 40px, 80px)); }
  .hvh__mark { font-size: clamp(44px, min(8.9vw, 14vh), 160px); margin-bottom: clamp(16px, 3vh - 4px, 32px); }
  .hvh__lead { margin-top: clamp(14px, 2.4vh - 2px, 24px); line-height: clamp(28.8px, 3.6vh, 32px); }
  .hvh__btns { margin-top: clamp(24px, 4.4vh, 40px); }
  .hvh__ctrl { bottom: calc(var(--cap-h) + clamp(16px, 9vh - 40px, 80px) + 6px); }
}
@media (min-width: 900px) and (max-height: 720px) { .hvh__cue { display: none; } }
/* A2 背景の映像：立方体の風景が見えるように、影と周辺の暗さを弱める（スマホは空を少し削り、文字には影を添える） */
.hv__shade { background: linear-gradient(90deg, rgba(5,9,20,.8) 0%, rgba(5,9,20,.52) 34%, rgba(5,9,20,0) 64%),
  linear-gradient(180deg, rgba(5,9,20,.55) 0, rgba(5,9,20,0) 160px), linear-gradient(0deg, rgba(5,9,20,.5) 0, rgba(5,9,20,0) 34%); }
.hv__vig { background: radial-gradient(120% 90% at 62% 45%, transparent 55%, rgba(5,9,20,.35) 100%); }
@media (max-width: 899.98px) {
  .hv__shade { background: linear-gradient(0deg, rgba(5,9,20,.66) 0, rgba(5,9,20,.3) 36%, rgba(5,9,20,0) 64%), linear-gradient(180deg, rgba(5,9,20,.5) 0, rgba(5,9,20,0) 120px); }
  .hv__poster, .hv__video { top: auto; bottom: 0; height: 126%; object-position: 50% 50%; }
  .hvh__h1, .hvh__lead { text-shadow: 0 1px 14px rgba(5,9,20,.72); }
}
/* A4 サービスの冒頭の図形：線をヘッダーの帯に入れない。スマホでは、文字の手前で線を消す */
.hero__visw { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) + 8px), #000 calc(var(--header-h) + 96px)); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) + 8px), #000 calc(var(--header-h) + 96px)); }
@media (max-width: 899.98px) {
  .hero__visw { -webkit-mask-image: none; mask-image: none; }
  /* パンくずは 1 行に：ひとつ上の階層だけを「‹」と出す（いまのページの名前は見出しにある） */
  .hero .crumb li { display: none; }
  .hero .crumb li:nth-last-child(2) { display: inline-flex; }
  .hero .crumb li:nth-last-child(2)::before { content: ""; display: inline-block; width: 5px; height: 5px; border: 0; border-left: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); transform: rotate(45deg); margin-right: 2px; }
}
/* A5 ヘッダー：ロゴの左端を本文の左端にそろえる（コンテナと同じ幅） */
.header__in { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; padding-inline: 0; }
/* A6 取引先と認証：ロゴの見た目の大きさをそろえる。灰色の扱いはスマホも同じ。認証も罫の表に */
.trust__logo img { transform: scale(var(--s, 1)); }
.trust__certs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.trust__cert { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; max-width: none; justify-items: stretch; }
.trust__cert-ph { justify-content: center; height: 92px; padding: 0 20px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__cert-ph img { height: 34px; max-width: 150px; }
.trust__cert--mark .trust__cert-ph img { height: 50px; }
.trust__cert-t { display: flex; align-items: center; padding: 14px clamp(20px, 2.2vw, 32px); font-size: var(--fs-body); background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 899.98px) {
  .trust__certs { gap: 0; }
  .trust__cert { grid-template-columns: 112px minmax(0, 1fr); max-width: none; }
  .trust__cert-ph { height: 76px; padding: 0 12px; }
  .trust__cert-ph img { height: 24px; max-width: 88px; }
  .trust__cert--mark .trust__cert-ph img { height: 40px; }
  .trust__cert-t { padding: 10px 14px; font-size: var(--fs-small); }
}
/* A8 経営陣：頭の上をヘッダーから離す。写真の上のすき間は、写真の背景と同じ色にする。経歴の文字を大きく */
.hero__person { background: #394862; }
@media (max-width: 899.98px) { .hero__person img { transform: translateY(calc(var(--dy, 0%) + 7%)); } }   /* スマホ：頭をヘッダーの下へ（上のすき間は写真の背景の色） */
.exec__bio { font-size: var(--fs-body); line-height: 1.9; color: var(--ink-700); }
/* 事例のカード：番号と業種の間を詰める（絵の下の文字を一つのまとまりに） */
.cases--vis .case .case__who { margin-top: 10px; }
/* 経営陣（900px 以上）：左の影は文字の範囲だけ（代表の顔に掛けない） */
@media (min-width: 900px) {
  .hero--board .hero__shade { background: linear-gradient(90deg, rgba(5,9,20,.94) 0, rgba(5,9,20,.8) 24%, rgba(5,9,20,0) 36%), linear-gradient(0deg, rgba(5,9,20,.62) 0%, rgba(5,9,20,0) 34%), linear-gradient(180deg, rgba(5,9,20,.6) 0, rgba(5,9,20,0) 150px); }
}

/* ---------- 講評（6 回目）の反映 ---------- */
/* B1 公開用（Vimeo）：プレビューの映像と同じ範囲を映す（PC は横 62%、スマホは下寄せ・高さ 126%） */
.hv__iframe { left: 62%; transform: translate(-62%, -50%); }
@media (max-width: 899.98px) { .hv__iframe { top: auto; bottom: 0; left: 50%; height: 126%; width: auto; min-width: 100%; aspect-ratio: 16 / 9; transform: translateX(-50%); } }
/* B2 経営陣：写真の帯の左端をぼかさない（代表の頬に影を掛けない）。経歴は 1200px 以上で 1 人 1 行（1 行 36 字前後） */
@media (min-width: 900px) { .hero__people { -webkit-mask-image: none; mask-image: none; } }
@media (min-width: 1200px) {
  .execs:not(.execs--adv) { grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 4vw, 72px); }
  .execs:not(.execs--adv) .exec { grid-template-columns: 260px minmax(0, 1fr); column-gap: clamp(32px, 3.4vw, 56px); }
  .execs:not(.execs--adv) .exec__body { max-width: 38em; }
}
/* B3 タブレット（600〜899px）：冒頭のボタンは伸ばしすぎない */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hvh__btns .btn { width: auto; min-width: 280px; max-width: 360px; }
}
/* B4 スマホの重なるカード：重なった前のカードの説明は消す（字の上半分だけが見える行を出さない） */
@media (max-width: 899.98px) {
  .svc6__ja { opacity: clamp(0, calc(1 - var(--cover, 0) * 2.5), 1); transition: none; }
}
/* B5 ロゴ：スマホでは大きくしすぎない。ISO のマークは色を少し締める */
@media (max-width: 899.98px) { .trust__logo img { transform: scale(min(var(--s, 1), 1.04)); } }
.trust__cert:first-child .trust__cert-ph img { filter: saturate(1.35) contrast(1.15); }
/* B6 採用：見出しとボタンの後ろを暗くする（左の人物の上で文字が読みにくくならないように） */
@media (min-width: 900px) {
  .recruit__shade { background: linear-gradient(0deg, #050914 0, rgba(5,9,20,.5) 120px, rgba(5,9,20,0) 300px), linear-gradient(90deg, rgba(5,9,20,.86) 0%, rgba(5,9,20,.62) 28%, rgba(5,9,20,.18) 46%, rgba(5,9,20,0) 60%), linear-gradient(180deg, rgba(5,9,20,.35) 0, rgba(5,9,20,0) 200px); }
}
/* B7 事例が 6 件以上のとき：絵を付けず、番号と文字のカードを並べる（4 列・2 列・1 列） */
.cases--text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .cases--text { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599.98px) { .cases--text { grid-template-columns: minmax(0, 1fr); } }
.cases--text .case { min-height: clamp(220px, 16vw, 260px); }
.cases--text .case .case__what { max-width: none; font-size: clamp(17px, 1.3vw, 20px); }

/* ---------- 講評（7 回目）の反映 ---------- */
/* C1 スクロールの合図：曲線の頂点の上、中央（ボタンに重ねない） */
.hvh__cue { left: 50%; bottom: calc(var(--cap-h) + 14px); margin-left: -.5px; }
/* C2 一時停止のボタン：hidden のときは出さない（映像が流れていない間） */
.hvh__pause[hidden] { display: none; }
/* C3 ページの切り替え：飛ぶ図形は遷移先の白い曲線の下を通す（着地で重なり順が入れ替わらない） */
.hero .curve { view-transition-name: hero-curve; }
::view-transition-group(hero-curve) { z-index: 3; }
::view-transition-new(hero-curve) { animation: vtCurve 860ms linear both; }
::view-transition-old(hero-curve) { animation: none; opacity: 0; }
@keyframes vtCurve { 0%, 34% { opacity: 0; } 52%, 100% { opacity: 1; } }
/* C4 スマホの重なるカード：説明は、次のカードがほぼ重なってから消す（空の面を見せない） */
@media (max-width: 899.98px) { .svc6__ja { opacity: clamp(0, calc((.86 - var(--cover, 0)) * 4.5), 1); } }
/* C5 経営陣（1200px 以上）：写真は左の 3 列、名前と経歴は 6 列目から（見出し「経営陣」と同じ起点）。右側まで使う */
@media (min-width: 1200px) {
  .execs:not(.execs--adv) .exec { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .execs:not(.execs--adv) .exec__ph { grid-column: 1 / span 4; }   /* 写真は 4 列（本文との間を詰める） */
  .execs:not(.execs--adv) .exec__body { grid-column: 6 / -1; max-width: 40em; }
}
/* C6 料金のカード：全幅の 2 列（左に見出しと説明、右にボタン） */
@media (min-width: 900px) {
  .price { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); justify-items: start; align-items: start; }
  .price > * { grid-column: 1 / span 7; }
  .price > .btns { grid-column: 9 / -1; grid-row: 1 / span 6; align-self: center; justify-self: stretch; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .price > .btns .btn { justify-content: space-between; }
}
/* C7 X SecureBank の導入実績：3 件は 3 列に */
@media (min-width: 1200px) { .xcss:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* C8 経営理念のカード：英字のスローガンは英字の書体で */
.mvc__st[lang="en"] { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.3; letter-spacing: -.005em; }
/* C9 会社概要の表：見出しの列を広げる（「適格請求書発行事業者番号」を 1 行に） */
@media (min-width: 900px) { .kv { grid-template-columns: minmax(120px, 232px) minmax(0, 1fr); } }
/* C11 パートナーのロゴ：枠を高く、ロゴを大きく */
.trust__logo { height: clamp(104px, 8.9vw, 128px); }
.trust__logo img { max-height: 44px; }
@media (max-width: 899.98px) { .trust__logo { height: 84px; } .trust__logo img { max-height: 30px; } }
/* C12 認証・加盟団体（900px 以上）：横一列の 5 つのタイル（ロゴを大きく、名称はその下） */
@media (min-width: 900px) {
  .trust__row--certs .trust__certs { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(20px, 2vw, 28px); }
  .trust__row--certs .trust__cert { grid-template-columns: none; grid-template-rows: auto 1fr; justify-items: stretch; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .trust__row--certs .trust__cert-ph { height: 132px; border: 0; padding: 0 20px; }
  .trust__row--certs .trust__cert-ph img { height: 44px; max-width: 180px; }
  .trust__row--certs .trust__cert--mark .trust__cert-ph img { height: 72px; }
  .trust__row--certs .trust__cert-t { display: block; padding: 0 20px 26px; border: 0; text-align: center; font-size: var(--fs-small); line-height: 1.75; }
}
/* C13 トップのニュース：見えている最初の 1 件を大きな行に */
.news__item.is-lead a { min-height: 128px; padding-block: 30px; }
.news__item.is-lead .news__t { font-size: clamp(20px, 1.95vw, 28px); line-height: 1.55; font-weight: 500; letter-spacing: .02em; }
@media (max-width: 899.98px) { .news__item.is-lead .news__t { font-size: 19px; line-height: 1.6; } }
/* C14 トップの記事：3 列のカード（日付・題・矢印）。ニュースの行の一覧と形を分ける */
.acards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.acard { display: flex; }
.acard a { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; width: 100%; min-height: 228px; padding: clamp(24px, 2.4vw, 34px); border-radius: var(--r-card); background: var(--mist); color: var(--ink-900); transition: background-color 320ms var(--ease-ui); }
html:not(.is-scrolling) .acard a:hover { background: #e7ecf7; }
.acard__d { font-family: var(--font-display); font-size: var(--fs-small); letter-spacing: .06em; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.acard__t { font-size: clamp(17px, 1.3vw, 19px); font-weight: 500; line-height: 1.8; letter-spacing: .02em; }
.acard__go { justify-self: end; }
@media (max-width: 899.98px) { .acards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acard a { min-height: 0; } }
@media (min-width: 900px) { .trust__row--certs .trust__certs { align-items: stretch; } }
.acard__go { opacity: 1; transform: none; }

/* ===== 講評（8 回目）の反映 ===== */
/* D1 料金のカード：ボタンが 1 つ（.btns で包まれていない）ときも、右の列の中央に */
@media (min-width: 900px) {
  .price > .btn { grid-column: 9 / -1; grid-row: 1 / span 6; align-self: center; justify-self: stretch; justify-content: space-between; margin: 0; }
}
/* D2 会社概要の主要取引先：2 列に足りない幅では 1 列に（語の途中で割らない） */
.kv__list--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr)); }
/* D3 スマホの認証・加盟団体：ロゴの枠を行の高さまで伸ばす（縦の罫線を切らない） */
@media (max-width: 899.98px) { .trust__cert-ph { height: auto; min-height: 76px; align-self: stretch; } }
/* D4 ページの切り替え：遷移先の白い曲線は、新しいページが曲線の位置まで現れてから出す */
@keyframes vtCurve { 0%, 50% { opacity: 0; } 58%, 100% { opacity: 1; } }
/* D5 スマホの重なるカード：項目の下に透明の延長を付け、全部の下端（余白の箱）をそろえる。最後のカードが来たら、1 つの塊として抜ける。
   延長の分は、次の項目の負の上余白で詰める（流れの上の位置は今までと同じ。カードの間は 14px） */
@media (max-width: 899.98px) {
  html.js:not(.motion-off) .svc6__list { display: block; }
  html.js:not(.motion-off) .svc6__item { padding-bottom: calc((var(--last, 5) - var(--i, 0)) * 74px); }
  html.js:not(.motion-off) .svc6__item + .svc6__item { margin-top: calc(14px - (var(--last, 5) - var(--i, 0) + 1) * 74px); }
}
/* D6 ニュースの最新 1 件：左に大きな日付と分類、右に題名。上の罫線はロゴの 3 色 */
.news__item.is-lead a::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--grad-logo); pointer-events: none; }
@media (min-width: 900px) {
  .news__item.is-lead a { grid-template-rows: auto auto; align-items: start; row-gap: 16px; min-height: 0; padding-block: clamp(40px, 3.6vw, 56px); }
  .news__item.is-lead .news__date { grid-column: 1 / span 4; grid-row: 1; font-size: clamp(28px, 2.5vw, 36px); font-weight: 300; line-height: 1.1; letter-spacing: .02em; color: var(--ink-900); }
  .news__item.is-lead .news__cats { grid-column: 1 / span 4; grid-row: 2; }
  .news__item.is-lead .news__t { grid-column: 6 / span 6; grid-row: 1 / span 2; font-size: clamp(24px, 2.25vw, 32px); line-height: 1.5; }
  .news__item.is-lead a > .go { grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 899.98px) { .news__item.is-lead .news__date { font-size: 20px; font-weight: 300; color: var(--ink-900); } }
/* D7 記事のカード：上に 16:9 の表紙（紺の地に方眼と図形）。下に題と日付 */
.acard a { grid-template-rows: auto 1fr; gap: 0; min-height: 0; padding: 0; overflow: hidden; isolation: isolate; }
.acard__vis { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0a1433; }
.acard__vis .mf { transition: transform 1200ms var(--ease-out); }
html:not(.is-scrolling) .acard a:hover .acard__vis .mf,.acard a:focus-visible .acard__vis .mf { transform: scale(1.03); }
.acard__body { display: grid; grid-template-rows: 1fr auto; gap: 14px; padding: clamp(20px, 2vw, 28px); }
.acard__t { font-size: 17px; line-height: 1.8; }
.acard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 599.98px) {
  .acards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .acards::-webkit-scrollbar { display: none; }
  .acard { scroll-snap-align: start; }
}
/* D8 主要取引先・パートナー・認証：3 行とも見出しを上に、中身は全幅。ロゴは 6 列 × 2 段 */
@media (min-width: 900px) {
  .trust__row { row-gap: clamp(20px, 2vw, 28px); }
  .trust__h, .trust__clients, .trust__logos, .trust__certs { grid-column: 1 / -1; }
  .trust__clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust__logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .trust__row--certs .trust__certs { margin-top: 0; }
}
@media (min-width: 900px) and (max-width: 1199.98px) { .trust__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===== 講評（9 回目）の反映 ===== */
/* E1 紺の地のヘッダー：動きを止めるボタンのホバーで、地を明るくしない（白い記号が消えないように） */
:is(html.on-night, html.mega-open, html.menu-open) .header .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
/* E2 サービス紹介トップの事業カード：説明の右に、右下の矢印の分の余白 */
@media (min-width: 900px) { .biz__d { padding-right: 48px; } }
/* E3 ニュースの最新 1 件：題名が長いときも、分類を日付の直下に。題名は 3 行までに収まる大きさ */
@media (min-width: 900px) {
  .news__item.is-lead a { grid-template-rows: auto 1fr; }
  .news__item.is-lead .news__t { font-size: clamp(22px, 2.05vw, 30px); }
  .news__item.is-lead .news__t[data-long] { font-size: clamp(20px, 1.75vw, 25px); }
}
/* E4 ニュースと記事：見出しの型を同じ縦積みにし、境の罫は 1 本（ニュースの一覧の下の罫）だけに */
.sec.g-paper.sec--news + .sec.g-paper.sec--article > .container { border-top: 0; }
/* E5 記事のカード：先頭の 1 件を大きく（PC は 2 列 × 2 段、タブレットは全幅） */
.acard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.acard__tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-note); font-weight: 500; letter-spacing: .04em; color: var(--ink-500); white-space: nowrap; }
@media (min-width: 900px) {
  .acard:first-child { grid-column: span 2; grid-row: span 2; }
  .acard:first-child a { grid-template-rows: 1fr auto; }
  .acard:first-child .acard__vis { aspect-ratio: auto; min-height: 320px; }
  .acard:first-child .acard__body { padding: clamp(24px, 2.4vw, 36px); }
  .acard:first-child .acard__t { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.65; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .acard:first-child { grid-column: 1 / -1; }
  .acard:first-child .acard__vis { aspect-ratio: 21 / 9; }
  .acard:first-child .acard__t { font-size: 20px; line-height: 1.65; }
  .acard:nth-child(6) { display: none; }
}
/* E6 タブレット（600〜899px）：スマホの組みを引き伸ばさない */
@media (min-width: 760px) and (max-width: 899.98px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 899.98px) {
  .trust__clients { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .recruit__card { display: block; }
  .recruit__ph { aspect-ratio: 4 / 3; }
  .recruit__shade { aspect-ratio: auto; inset: 0; height: auto; background: linear-gradient(0deg, #050914 0, rgba(5,9,20,.94) 10%, rgba(5,9,20,.6) 40%, rgba(5,9,20,0) 66%); }
  .recruit__in { position: absolute; inset: auto 0 0; padding-block: 0 44px; }
}
/* E7 主要取引先（PC）：ロゴの壁と同じ罫の格子（3 列 × 3 段）。箇条書きにしない */
@media (min-width: 900px) {
  .trust__clients { gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .trust__client { display: flex; align-items: center; min-height: clamp(76px, 6.4vw, 92px); padding: 18px 24px 18px 50px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-900); }
  .trust__client::before { left: 28px; top: 50%; transform: translateY(-50%); }
}
/* E8 900〜1099px：索引の組み（見出しと表）は縦に積む。表の値の列が狭くなり、語が割れるのを防ぐ */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .idxl { grid-template-columns: minmax(0, 1fr); }
  .idxl > * { grid-column: 1 / -1; }
  .idxl__head { position: static; }
  .idxl__body { margin-top: 28px; }
}
/* E9 顧問のカード：どの幅でも写真の下に名前（1100px 以下の「.exec」の 2 列の指定を受けない） */
.execs--adv .exec--adv { grid-template-columns: minmax(0, 1fr); }
/* E10 900〜1199px（小さな PC）：段の多い部品の列を減らす（語が割れないように） */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .stps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .stps__line { display: none; }
}
@media (min-width: 900px) and (max-width: 1199.98px) { .bizs { grid-template-columns: minmax(0, 1fr); } .execs--adv { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===== 講評（10 回目）の反映 ===== */
/* F1 絞り込み：一覧に 1 件もない分類のボタンは隠す（corp.js が hidden を付ける） */
.filter__btn[hidden] { display: none !important; }
/* F2 トップの大きな英字：入場の始まりを深くし、字の頭の欠片がクリップの内側に見えないように */
@keyframes riseH { from { transform: translateY(calc(100% + .5em)); } to { transform: none; } }
.hvh__line .mi { animation-name: riseH; }
.hvh__line--b .mi { animation-name: riseH, sweep; }
/* F3 事例のカードの絵：カードの余白（900px 未満は 28px）と同じ量だけ外へ（白い縁を出さない） */
@media (max-width: 899.98px) { .case__vis { margin: -28px -28px 4px; } }
/* F4 ニュースの最新 1 件：スマホと小さな PC でも、長い題名は 3〜4 行に収める */
@media (max-width: 899.98px) { .news__item.is-lead .news__t[data-long] { font-size: 17px; line-height: 1.65; } }
@media (min-width: 900px) and (max-width: 1099.98px) {
  .news__item.is-lead .news__t { grid-column: 5 / span 7; }
  .news__item.is-lead .news__t[data-long] { font-size: 19px; }
}
/* F5 タブレット：M&A の「View More」は線のボタンに（採用の白いボタンと同じ画面に、白い主ボタンを 2 つ置かない） */
@media (max-width: 899.98px) {
  .sec--manda .btn--light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
  .sec--manda .btn--light .arrow { background: rgba(255,255,255,.14); color: #fff; }
}

/* ===== 平面の図形（線と面）：球の画像と WebGL の代わり。画板 480、線は 3 種、面は 4 種、点は決める場所だけ ===== */
.mf { display: block; width: 100%; height: 100%; overflow: visible; }
.mf-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.mf-h { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mf-h2 { fill: none; stroke: rgba(255,255,255,.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mf-h3 { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mf-dash { stroke-dasharray: 3 5; }
.mf-t { fill: none; stroke: var(--logo-1); stroke-width: var(--mf-tw, 1.6); stroke-linecap: round; stroke-linejoin: round; }
.mf-ring-t { fill: none; stroke: var(--logo-1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mf-ring-v { fill: none; stroke: var(--logo-3); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mf-pa { fill: #13244f; } .mf-pb { fill: #1b3070; } .mf-pc { fill: #2d2b8a; } .mf-pg { fill: url(#mf-grad); }
.mf-n { fill: rgba(255,255,255,.7); } .mf-nt { fill: var(--logo-1); } .mf-dot { fill: rgba(255,255,255,.28); }
.mf-bar { fill: rgba(255,255,255,.18); } .mf-bar-t { fill: var(--logo-1); } .mf-night { fill: #0a1433; } .mf-night-l { stroke: #0a1433; stroke-width: 2; }
.mf-arc-a { fill: none; stroke: var(--logo-1); stroke-width: 10; stroke-opacity: .5; }
.mf-arc-b { fill: none; stroke: var(--logo-2); stroke-width: 10; stroke-opacity: .55; }
.mf-arc-c { fill: none; stroke: var(--logo-3); stroke-width: 10; stroke-opacity: .7; }
.mf-arc-d { fill: none; stroke: #fff; stroke-width: 10; stroke-opacity: .18; }
.mf-hz-a { fill: none; stroke: var(--logo-1); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-opacity: .2; }
.mf-hz-b { fill: none; stroke: var(--logo-2); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-opacity: .24; }
.mf-hz-c { fill: none; stroke: var(--logo-3); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-opacity: .3; }
.mf-scanv { fill: url(#mf-scanv); }
.mf-scanline { stroke: var(--logo-1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mf-flow { fill: none; stroke: var(--logo-1); stroke-width: var(--mf-tw, 1.6); stroke-dasharray: 2 10; stroke-linecap: round; opacity: 0; }
/* 動き：行為の線が描かれ、面と点が続き、描き終えたら流れと走査だけが静かに続く */
.mf .mf-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1600ms var(--ease-out) var(--dl, 0ms); }
.mf.is-in .mf-draw { stroke-dashoffset: 0; }
.mf .mf-fade { opacity: 0; transition: opacity 900ms var(--ease-out) var(--dl, 0ms); }
.mf.is-in .mf-fade { opacity: var(--o, 1); }
.mf .mf-pop { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 700ms var(--ease-out) var(--dl, 0ms); }
.mf.is-in .mf-pop { transform: none; }
.mf.is-in .mf-flow { opacity: .9; transition: opacity 600ms ease 1900ms; animation: mfFlow 2.4s linear infinite; }
@keyframes mfFlow { to { stroke-dashoffset: -24; } }
.mf-spin { transform-box: fill-box; transform-origin: center; animation: mfSpin 9s linear infinite; }
.mf-spin--slow { animation-duration: 72s; }
.mf-none { fill: none; stroke: none; }
@keyframes mfSpin { to { transform: rotate(360deg); } }
.mf-pulse { transform-box: fill-box; transform-origin: center; animation: mfPulse 2.8s var(--ease-out) infinite; }
@keyframes mfPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.mf-scanx { animation: mfScanX 5.2s linear infinite; }
@keyframes mfScanX { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(316px); opacity: 0; } }
.mf-scanv { animation: mfScanV 4.6s var(--ease-inout) infinite; }
@keyframes mfScanV { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(330px); opacity: 0; } }
.mf-ripple { animation: mfRipple 5.6s ease-in-out infinite; animation-delay: var(--dl, 0ms); }
@keyframes mfRipple { 0%, 100% { stroke-opacity: .1; } 18% { stroke-opacity: .6; } 40% { stroke-opacity: .1; } }
.mf-blink { animation: mfBlink 1.1s steps(1) infinite; }
@keyframes mfBlink { 50% { opacity: 0; } }
.mf:not(.is-live) :is(.mf-flow, .mf-spin, .mf-pulse, .mf-scanx, .mf-scanv, .mf-ripple, .mf-blink) { animation-play-state: paused; }
html.motion-off .mf *, html:not(.js) .mf * { animation: none !important; transition: none !important; }
html.motion-off .mf .mf-draw, html:not(.js) .mf .mf-draw { stroke-dashoffset: 0; }
html.motion-off .mf .mf-fade, html:not(.js) .mf .mf-fade { opacity: var(--o, 1); }
html.motion-off .mf .mf-pop, html:not(.js) .mf .mf-pop { transform: none; }
html.motion-off .mf :is(.mf-scanx, .mf-scanv, .mf-pulse, .mf-flow), html:not(.js) .mf :is(.mf-scanx, .mf-scanv, .mf-pulse, .mf-flow) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mf * { animation: none !important; transition: none !important; }
  .mf .mf-draw { stroke-dashoffset: 0; } .mf .mf-fade { opacity: var(--o, 1); } .mf .mf-pop { transform: none; }
  .mf :is(.mf-scanx, .mf-scanv, .mf-pulse, .mf-flow) { display: none; }
}

/* 冒頭（サービスと事業紹介）：図形を右に、文字と重ねずに置く。背後に方眼（図形の周りだけ） */
.hero--stage .hero__copy { max-width: min(800px, 56%); }
.hero--stage .hero__stage .mf { --mf-tw: 1.35; }
.hero--stage .hero__visw::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; background-position: calc(100% - max(var(--gutter), (100% - var(--maxw)) / 2)) 50%;
  -webkit-mask-image: radial-gradient(42% 62% at 72% 52%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%); mask-image: radial-gradient(42% 62% at 72% 52%, #000 0%, rgba(0,0,0,.5) 55%, transparent 100%); }
@media (max-width: 899.98px) {
  .hero--stage .hero__copy { max-width: none; }
  .hero--stage .hero__stage { position: relative; top: auto; right: auto; width: min(76vw, 440px); margin: 8px auto 0; transform: none; }
  .hero--stage .hero__visw::before { display: none; }
}

/* トップのサービス紹介の舞台：平らな紺に方眼。いまの行の図形だけを出す */
.svc6__stage-in::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px; background-position: right -1px top -1px; }
.svc6__mfs { position: absolute; z-index: 1; inset: 8% 8% 22%; container-type: size; }
@media (min-width: 900px) { .svc6__mfs { left: calc(var(--bleed) + 4%); right: 8%; } }
.svc6__mf { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); opacity: 0; transition: opacity 520ms var(--ease-ui); }
.svc6__mf.is-act { opacity: 1; }
@media (min-width: 600px) and (max-width: 899.98px) { .svc6__vis { left: auto; right: 10%; top: 50%; bottom: auto; width: min(34%, 220px); transform: translateY(-50%); } }   /* タブレット：カードが横に長いので、図形は右の中ほどに */

/* 事例と記事の表紙：平らな紺に方眼と図形（光や粒子は付けない） */
.case__vis .mf, .acard__vis .mf { position: absolute; inset: 0; width: 100%; height: 100%; --mf-tw: 2.1; }
.acard:first-child .acard__vis .mf { --mf-tw: 1.6; }

/* 小さな図形：関連ページ、事業カード、索引、メニュー、診断の結果、暗転の特長の背景 */
.relc__vis { right: -4%; top: -6%; width: 62%; opacity: .92; }
.relc__vis img { transition: transform 900ms var(--ease-out); }
html:not(.is-scrolling) .relc:hover .relc__vis img { transform: scale(1.05); }
.biz__vis img { object-fit: contain; padding: 7%; transform: none; transition: transform 900ms var(--ease-out); }
html:not(.is-scrolling) a.biz:hover .biz__vis img { transform: scale(1.04); }
.biz--soon .biz__vis img { filter: grayscale(1) brightness(.8); }
.sidx__vis img { object-fit: contain; padding: 9%; }
html:not(.is-scrolling) .sidx:hover .sidx__vis img { transform: scale(1.06); }
.mega__vis { width: min(200px, 100%); }
.qscore__orb { right: -20%; bottom: -26%; width: 80%; opacity: .3; }
@media (max-width: 899.98px) { .feat__bg { right: -30%; width: 120vw; opacity: .12; } }

/* 締め：下の中央から広がる同心の弧。画面に入るにつれて少し昇る */
.close__mf { --rise: 0; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: clamp(300px, 40vw, 620px); transform: translateY(calc(16% * var(--rise))); pointer-events: none; }
.close__mf .mf { width: 100%; height: 100%; }

/* ページの切り替え：ステージのいまの図形が、遷移先の冒頭の図形へ同じ物として移る（切り抜きは要らない） */
::view-transition-group(motif) { z-index: 2; animation-duration: 640ms; animation-timing-function: cubic-bezier(.65, 0, .15, 1); }
::view-transition-old(motif), ::view-transition-new(motif) { animation-duration: 640ms; }
::view-transition-image-pair(motif) { border-radius: 16px; animation: vtMfGround 640ms cubic-bezier(.65, 0, .15, 1) both; }   /* 紺の面ごと移り、着く前に地へ溶ける（白い面の上で図形が薄く見えない） */
@keyframes vtMfGround { 0%, 78% { background-color: #0a1433; } 100% { background-color: rgba(10, 20, 51, 0); } }
.mf.mf--now *, .mf.mf--now .mf-draw { transition: none !important; }

/* ===== G 見出しの型を 1 つに：和文の H2 が主。英字は同じ大きさの細い灰色で、同じベースラインの右端に置く。下に 1px の罫、その下にリード ===== */
:root { --fs-h2: clamp(24px, 2.78vw, 40px); --fs-en: var(--fs-h2); --fs-h1: clamp(28px, 3.33vw, 48px); --fs-display-s: clamp(40px, 5.56vw, 80px); }
.st { row-gap: 0; align-items: end; }
.st .st__main { display: contents; }
.st .st__ja { grid-column: 1 / span 8 !important; grid-row: 1; align-self: last baseline; }
.st > .st__en { grid-column: 9 / -1 !important; grid-row: 1; justify-self: end; align-self: last baseline; margin: 0; padding: 0; text-align: right; white-space: nowrap;
  font-weight: 300; font-size: var(--fs-h2); line-height: 1.5; letter-spacing: 0; color: var(--ink-400); }
.st:not(:has(.st__ja)) > .st__en { grid-column: 1 / -1 !important; justify-self: start; text-align: left; white-space: normal; }
.st::after { content: ""; grid-column: 1 / -1; grid-row: 2; height: 1px; margin-top: clamp(18px, 1.9vw, 28px); background: var(--line); }
.st .st__lead { grid-column: 1 / span 7 !important; grid-row: 3; align-self: start; margin: clamp(20px, 2vw, 28px) 0 0; }
.st .st__more { grid-column: 9 / -1 !important; grid-row: 3; justify-self: end; align-self: start; margin-top: clamp(16px, 1.6vw, 24px); }
.st--feat { max-width: none; margin-bottom: clamp(40px, 4.4vw, 64px); }
.st--feat .st__lead { color: var(--on-night-2); }
.sec--feat-text .st--feat .st__ja { grid-column: 1 / span 9 !important; font-size: var(--fs-statement); line-height: 1.45; }
.sec--feat-text .st--feat .st__lead { grid-column: 1 / span 8 !important; max-width: 40em; }
.close__st { margin-bottom: clamp(36px, 3.6vw, 56px); }
.close__st .st__lead { display: grid; gap: 8px; }
.close__st .close__lead, .close__st .close__svc { margin: 0; }
.close__st .close__lead { font-size: var(--fs-lead); line-height: 2; color: var(--on-night-2); }
@media (max-width: 899.98px) {
  .st { grid-template-columns: minmax(0, 1fr) auto !important; column-gap: 16px; }
  .st .st__ja { grid-column: 1 / 2 !important; }
  .st > .st__en { grid-column: 2 / 3 !important; font-size: clamp(16px, 2.6vw, 22px); }
  .st:not(:has(.st__ja)) > .st__en { grid-column: 1 / -1 !important; font-size: var(--fs-h2); }
  .st .st__lead, .st .st__more { grid-column: 1 / -1 !important; }
  .st .st__more { justify-self: start; grid-row: 4; }
  .st--more.st--en > .st__en, .st--more.st--en > .st__more { grid-row: auto; }
}
@media (max-width: 599.98px) { .st:has(.st__ja) > .st__en { display: none; } }

/* 狭い列の見出し（索引型・左に固定する見出し・料金の札・写真の上）：和文を先に、英字はその下に一段小さく */
.idxl__head .st__en, .about__head .ent, .price__ttl .ent, .sec-head .ent { order: 2; font-weight: 300; font-size: var(--fs-h3); line-height: 1.4; letter-spacing: 0; color: var(--ink-400); }
.idxl__head .st__ja { order: 1; } .idxl__head .st__lead { order: 3; }
.about__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.price__ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.price__ttl .ent { order: 2; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.sec-head .ent { color: rgba(255,255,255,.62); }
/* トップの採用：和文の見出しと英字を同じ行に */
.recruit__ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.recruit__ttl .recruit__h { margin: 0; }
.recruit__en { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h1); line-height: 1.4; letter-spacing: 0; color: rgba(255,255,255,.62); }
/* 「攻め」と「守り」：声明の次に続く 2 つ目の大きな声にしない（H1 の大きさ・単色） */

/* G 冒頭：高さを抑え、最初の画面に本文の始まりが入るように。サービスの英字名は和文の H1 の 1.7 倍まで */
.hero--stage { min-height: clamp(560px, 76svh, 840px); }
.hero--stage .hero__grid { padding-block: clamp(32px, 3.4vw, 56px) calc(var(--cap-h) + clamp(40px, 6vh, 80px)); }
.hero--stage .hero__en { max-width: 11em; }
.hero__stage { width: min(38vw, 560px, 60vh); }
.hero--photo { min-height: clamp(560px, 72svh, 820px); }
/* 写真の冒頭：紺を重ねない（人の色を変えない）。影は文字の後ろと、ヘッダーの帯だけ */
.hero__tone { display: none; }
.hero__shade { background: linear-gradient(90deg, rgba(5,9,20,.72) 0%, rgba(5,9,20,.46) 30%, rgba(5,9,20,0) 56%), linear-gradient(0deg, rgba(5,9,20,.5) 0%, rgba(5,9,20,0) 38%), linear-gradient(180deg, rgba(5,9,20,.46) 0, rgba(5,9,20,0) 150px); }
@media (max-width: 899.98px) {
  .hero__shade { background: linear-gradient(0deg, rgba(5,9,20,.86) 0%, rgba(5,9,20,.5) 40%, rgba(5,9,20,0) 70%), linear-gradient(180deg, rgba(5,9,20,.46) 0, rgba(5,9,20,0) 120px); }
  .hero--photo { min-height: 560px; }
}

/* ===== G 明るい地の図形：カードの中（事例・記事・関連ページ・事業カード）は白と淡い青の地に、紫と青の線で描く。紺の地は舞台（冒頭・サービスの舞台・メニュー・暗転・お問い合わせ）だけ ===== */
.mf--light { --mf-ground: var(--mist); }
.mf-night { fill: var(--mf-ground, #0a1433); }
.mf-night-l { stroke: var(--mf-ground, #0a1433); }
.mf--light .mf-h { stroke: rgba(11,17,36,.14); }
.mf--light .mf-h2 { stroke: rgba(11,17,36,.26); }
.mf--light .mf-h3 { stroke: rgba(11,17,36,.46); }
.mf--light :is(.mf-t, .mf-flow, .mf-ring-t, .mf-scanline) { stroke: var(--logo-3); }
.mf--light .mf-ring-v { stroke: var(--logo-2); }
.mf--light .mf-pa { fill: #e6ecf8; } .mf--light .mf-pb { fill: #d3ddf3; } .mf--light .mf-pc { fill: #cbc6f2; }
.mf--light .mf-n { fill: rgba(11,17,36,.5); } .mf--light .mf-nt { fill: var(--logo-3); } .mf--light .mf-dot { fill: rgba(11,17,36,.2); }
.mf--light .mf-bar { fill: rgba(11,17,36,.12); } .mf--light .mf-bar-t { fill: var(--logo-3); }
.mf--light .mf-arc-a { stroke-opacity: .9; } .mf--light .mf-arc-b { stroke-opacity: .7; } .mf--light .mf-arc-c { stroke-opacity: .8; } .mf--light .mf-arc-d { stroke: #0b1124; stroke-opacity: .08; }
/* 事例：4 件は 1 行に（1200px 以上）。表紙は 3:2、淡い青の地。番号は付けない */
.case__vis { aspect-ratio: 3 / 2; background: #fff; border-bottom: 1px solid var(--line); }
.case__vis .mf--light { --mf-ground: #fff; }
.case__vis .mf, .acard__vis .mf { --mf-tw: 1.7; }
@media (min-width: 1200px) { .cases--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cases--4 .case .case__what { font-size: clamp(18px, 1.39vw, 20px); } }
.cases--vis .case { gap: 14px; }
.cases--vis .case .case__who { margin-top: 18px; }
@media (max-width: 599.98px) {
  /* スマホ：左に小さな正方形の図形、右に業種と題（縦に長くしない） */
  .cases--vis .case { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 16px; row-gap: 4px; min-height: 0; padding: 14px 16px 14px 14px; }
  .cases--vis .case .case__vis { grid-row: 1 / span 2; margin: 0; aspect-ratio: 1; border-radius: 12px; }
  .cases--vis .case .case__who { margin: 0; align-self: end; }
  .cases--vis .case .case__what { align-self: start; font-size: 17px; line-height: 1.6; }
  @supports (grid-template-rows: subgrid) { .cases--vis .case { grid-row: auto; } }
}
/* 記事：カードは白に 1px の枠、表紙は淡い青の地 */
.acard a { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
html:not(.is-scrolling) .acard a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--ink-300); }
.acard__vis { background: var(--mist); }
/* 関連ページ：白いカードに 1px の枠。図形は右上 */
.relc { background: #fff; color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--line); }
html:not(.is-scrolling) .relc:hover { box-shadow: inset 0 0 0 1px var(--ink-300); }
.relc__t { color: var(--ink-500); }
.relc__vis { right: 0; top: 0; width: 56%; opacity: 1; }
.relc--mini .relc__t { color: var(--ink-900); }
/* 事業カード：図形の枠は淡い青 */
.biz--soon .biz__vis img { filter: grayscale(1); opacity: .6; }
/* サービスの一覧（索引）：文字だけの行 */
.sidx { grid-template-columns: minmax(0, 1fr) 28px; }
.sidx__en, .sidx__t { grid-column: 1; }
.sidx__go { grid-column: 2; }

/* G 採用の帯：文字は写真の下の暗い床の上に（顔と上半身に重ねない）。影は下と、文字の後ろだけ */
@media (min-width: 900px) {
  .recruit__in { padding-bottom: clamp(48px, 7vh, 88px); }
  .recruit__shade { background: linear-gradient(0deg, #050914 0, rgba(5,9,20,.78) 120px, rgba(5,9,20,0) 340px), linear-gradient(90deg, rgba(5,9,20,.5) 0%, rgba(5,9,20,0) 42%); }
}
/* フッターの下段：左に方針のリンク、右に「動きを止める」と著作権の表示 */
.footer__end { display: flex; align-items: center; gap: 20px; margin-left: auto; }

/* G 経営陣：名前を主に、役職は同じ行の右に（名前の上に英字の札を置かない） */
.exec__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.exec__id .exec__name { margin: 0; }
.exec__id .exec__role { color: var(--ink-500); letter-spacing: .02em; }
.exec__en { margin-top: 4px; }
/* 行頭の括弧は半角に詰める（見出しとニュースの題で、括弧の分だけ字下がりに見えないように） */
h1, h2, h3, .news__t, .acard__t, .case__what, .st__ja, .stmt__st, .msg2__h { text-spacing-trim: trim-start; }
/* ロゴ：ひとまわり大きく */
.brand__logo { height: 34px; }
@media (max-width: 899.98px) { .brand__logo { height: 28px; } }
/* スマホのメニュー：お問い合わせと資料請求は、下に固定して横に並べる */
.menu__cta { position: sticky; bottom: 0; z-index: 2; margin-top: 24px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 1fr 1fr; gap: 10px; background: #070d22; }
.menu__cta .btn { height: 52px; padding-inline: 18px 8px; }
/* フォーム：入力欄は白に 1px の枠（白との差 3:1 以上）。焦点は青の 2px。送信は大きな主ボタン */
.f input:not([type=checkbox]):not([type=radio]), .f select, .f textarea { background-color: #fff; border: 1px solid #8590a5; border-radius: 8px; padding: 14px 16px; }
.f input:focus:not([type=checkbox]):not([type=radio]), .f textarea:focus, .f select:focus { border-color: var(--teal-700); box-shadow: inset 0 0 0 1px var(--teal-700); background-size: 0 2px; }
.f select:focus { background-size: 0 2px, 12px 8px; }
.f.is-error input, .f.is-error select, .f.is-error textarea { border-color: #c22d3d; box-shadow: inset 0 0 0 1px #c22d3d; background-color: #fff; }
.f__req { padding: 1px 7px; border: 1px solid currentColor; border-radius: 4px; font-size: 11px; line-height: 1.5; color: var(--teal-700); }
.form__submit { min-width: min(100%, 360px); height: 64px; justify-content: space-between; font-size: var(--fs-body); }
/* トップの声明：行は生成時の改行（「ではなく、」の後）で決める。均等割りの自動の行分けは使わない（訪問ごとに改行が変わらないように） */
.stmt2__st { text-wrap: wrap; }
.biz__soon { font-family: var(--font-sans); letter-spacing: .06em; }
/* 本文の中の写真（1 枚）：12 列いっぱい、21:9（900px 未満は 4:3）。角は小さく、影は付けない */
.sec--pic { padding-block: 0 var(--sp-m); }
.pic { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 21 / 9; background: var(--mist); }
.pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
@media (max-width: 899.98px) { .pic { aspect-ratio: 4 / 3; } }
/* フッター：サービスの列を広く（名前を 1 行に）。スマホは「会社情報」と「お知らせ・記事」を左右に、サービスとお問い合わせは全幅に */
@media (min-width: 1200px) { .footer--night .footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .95fr) minmax(0, 1.1fr); } }
@media (max-width: 599.98px) {
  .footer--night .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; }
  .footer--night .footer__col:nth-child(2) { grid-column: 1; grid-row: 2; }
  .footer--night .footer__col:nth-child(4) { grid-column: 2; grid-row: 2; }
  .footer--night .footer__col:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .footer--night .footer__col:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .footer__end { width: 100%; justify-content: space-between; margin-left: 0; }
}
/* 「攻め」と「守り」：他の節と同じ見出しの型に（声明の後の 2 つ目の大きな声にしない） */
.st.msg2 { margin-top: var(--sp-l); margin-bottom: 0; }
.st.msg2 .msg2__h { margin: 0; font-size: var(--fs-h2); line-height: 1.5; letter-spacing: .04em; font-weight: 500; font-feature-settings: "palt" 1; }
.st.msg2 .msg2__p { font-size: var(--fs-lead); font-weight: 500; line-height: 1.9; color: var(--ink-700); }
.about__sub--en { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-small); letter-spacing: .02em; color: var(--ink-500); }
/* お問い合わせのトップ：窓口のタイルは白に 1px の枠（紺の面を並べない） */
.sec--desks .ctile { background: #fff; color: var(--ink-900); border: 1px solid var(--line); }
html:not(.is-scrolling) .sec--desks .ctile:hover { background: #fff; border-color: var(--ink-300); }
.sec--desks .ctile__go { color: var(--ink-900); }

/* ===== H 写真の冒頭：左に文字（紺の地）、右に写真（画面の右端まで、縁は直線）。人の顔と体に文字を重ねない。
   サービスの冒頭（左に文字、右に図形）と同じ割り付け。900px 未満は写真を上に 4:3 で置き、文字はその下の紺の地に ===== */
.hero--photo { justify-content: center; background: var(--night-grad); }   /* 地はほかの冒頭と同じ紺 */
.hero--photo .hero__grid { padding-block: clamp(32px, 3.4vw, 56px) calc(var(--cap-h) + clamp(40px, 6vh, 80px)); }
@media (min-width: 900px) {
  .hero--photo .hero__ph { inset: 0 0 0 auto; width: 54%; }
  .hero--photo .hero__copy { max-width: 40%; }
  .hero--photo .hero__shade { inset: 0 0 auto auto; width: 54%; height: 160px; background: linear-gradient(180deg, rgba(5,9,20,.5) 0, rgba(5,9,20,0) 100%); }
}
@media (max-width: 899.98px) {
  .hero--photo { min-height: 0; justify-content: flex-start; padding-top: 0; }
  .hero--photo .hero__ph { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; }
  .hero--photo .hero__shade { inset: 0 0 auto 0; height: 132px; background: linear-gradient(180deg, rgba(5,9,20,.56) 0, rgba(5,9,20,0) 100%); }
  .hero--photo .hero__grid { padding-block: 28px calc(var(--cap-h) * .8 + 36px); }
}

/* H 企業情報トップの 3 つの入口：開いた 1 枚にも影を付けない。矢印の丸は塗らない（ほかのカードと同じ線の矢印の扱い） */
.xp__item.is-act { box-shadow: none; }
.xp__item.is-act .xp__go { background: transparent; color: #fff; }
.xp__ja { font-size: var(--fs-body); }
/* H 広がる輪（脈）は、動いている間だけ出す。止まっている間に元の大きさで見えていると、動き始めた瞬間に消えて見えるため */
.mf:not(.is-live) .mf-pulse { visibility: hidden; }   /* 止まった動き（paused）の値は opacity を上書きするため、visibility で隠す */

/* ===== H 採用の帯（トップ）：写真は文字を載せない帯にし、見出し・一文・ボタンは写真の下の紺の地に置く（人の体に文字を重ねない）。
   写真の枠が広がる動きはやめ、写真の中のわずかな視差だけ残す ===== */
.recruit { background: var(--night-0); }
.recruit__card { height: auto; min-height: 0; max-height: none; display: block; clip-path: none; }
.recruit__ph { position: relative; inset: auto; height: clamp(440px, 62svh, 700px); }
.recruit__shade { inset: 0 0 auto 0; height: clamp(440px, 62svh, 700px); aspect-ratio: auto; background: linear-gradient(0deg, #050914 0, rgba(5,9,20,.55) 56px, rgba(5,9,20,0) 180px); }
.recruit__in { position: relative; inset: auto; display: flex; padding-block: clamp(8px, 1.2vw, 20px) clamp(72px, 9vh, 120px); }
@media (max-width: 899.98px) {
  .recruit__ph { height: auto; aspect-ratio: 4 / 3; }
  .recruit__ph img { inset: 0; height: 100%; transform: none; }
  .recruit__shade { height: auto; aspect-ratio: 4 / 3; background: linear-gradient(0deg, #050914 0, rgba(5,9,20,0) 32%); }
  .recruit__in { padding-block: 16px 56px; }
}
/* 採用の帯から M&A へ：同じ紺の地が続くので、M&A の頭に 1px の罫を引いて節を分ける */
.recruit + .sec--manda { padding-top: 0; }
.recruit + .sec--manda .manda__grid { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(48px, 5vw, 80px); }
/* M&A の「詳しく見る」は、どの幅でも線のボタン（採用の白いボタンと同じ画面に、白いボタンを 2 つ置かない） */
.sec--manda .btn--light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.sec--manda .btn--light .arrow { background: rgba(255,255,255,.14); color: #fff; }
/* ヘッダーの「お問い合わせ」：暗い面の上（ヒーローを過ぎた後も）とメガメニューを開いたときは、ヒーローの上と同じ線のボタン。
   白いボタンにしない（矢印の丸が白の上で消える・本文の白いボタンと 2 つ並ぶため） */
:is(html.on-night, html.mega-open) .header .btn--primary { background: rgba(255,255,255,.04); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); }
:is(html.on-night, html.mega-open) .header .btn--primary:hover { background: rgba(255,255,255,.12); }
:is(html.on-night, html.mega-open) .header .btn--primary .arrow { background: rgba(255,255,255,.14); color: #fff; }

/* ===== H2 講評（11 回目）の反映 ===== */
/* 1 トップのサービスの舞台（PC）：画面の中央に置き、最後の行が「いま」になるまで固定する（一覧の下に余白を足す）。図形の枠を大きく、名前は下から 32px */
@media (min-width: 900px) {
  .svc6 { --stage-h: min(640px, calc(100vh - 216px)); --row-h: max(20vh, 164px); }
  .svc6__stage { top: calc(50vh - var(--stage-h) / 2); height: var(--stage-h); }
  .svc6__list { padding-bottom: calc(var(--stage-h) / 2 - var(--row-h) / 2); }
  .svc6__a { min-height: var(--row-h); }
  .svc6__mfs { top: 6%; bottom: 17%; right: 6%; left: calc(var(--bleed) + 3%); }
  .svc6__cap { bottom: 32px; }
  .svc6__prog { bottom: calc(32px + 2.4em); }
}
/* 切り替え：前の図形を 120ms で消してから、次の図形を描く（2 つを重ねて見せない） */
.svc6__mf { transition: opacity 120ms linear; }
.svc6__mf.is-act { transition: opacity 280ms var(--ease-ui) 120ms; }
/* 進み具合の線はロゴの青緑の一色（グラデーションは図形の中だけ） */
.svc6__prog i { background: var(--logo-1); }

/* 2 ページの切り替え（サービスの舞台からサービスのページへ）：動きは「図形が紺の板ごと移る」1 つだけ。古いページは縮めずに消え、新しいページは曲線なしで現れる */
html.vt-motif::view-transition-old(root) { animation: vtOldFade 260ms var(--ease-ui) both; }
html.vt-motif::view-transition-new(root), html.vt-motif::view-transition-new(hero-curve) { animation: vtFadeIn 300ms var(--ease-ui) 160ms both; }
/* 板は、新しいページが出そろった後（6 割から）に地へ溶かす（着く直前に明るい箱に見せない） */
html.vt-motif::view-transition-image-pair(motif) { animation-name: vtMfGround2; }
@keyframes vtMfGround2 { 0%, 58% { background-color: #0a1433; } 100% { background-color: rgba(10, 20, 51, 0); } }
@keyframes vtOldFade { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } }

/* 3 スマホ・タブレットの重なるカード：後ろに回るカードの説明と図形は、重なり切る前に消す（字の欠片や図形の端を残さない） */
@media (max-width: 899.98px) {
  .svc6__ja { opacity: clamp(0, calc((.7 - var(--cover, 0)) * 5), 1); }
  .svc6__vis { opacity: clamp(0, calc((.6 - var(--cover, 0)) * 4), 1); }
}

/* 4 スマホのメニュー：下のボタンの帯に紺の地を敷き、画面の下端と左右の端まで伸ばす。上に罫線 1 本と、短いぼかし */
.menu__cta { bottom: calc(-1 * (env(safe-area-inset-bottom, 0px) + 32px)); margin-inline: calc(-1 * var(--gutter)); padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px) + 32px); border-top: 1px solid rgba(255,255,255,.12); }
.menu__cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; background: linear-gradient(to top, #070d22, rgba(7,13,34,0)); pointer-events: none; }

/* 5 サービスの冒頭（PC）：図形の枠は、ヘッダーの下 24px から曲線の頂点の上 48px までの中で、上下の中央に置く（文字のかたまりの中心とそろう）。
   見当の印を切らない。方眼は文字の側を消し、右端まで流す */
@media (min-width: 900px) {
  .hero--stage { min-height: clamp(640px, 84svh, 900px); }
  .hero--stage .hero__stage { top: calc(var(--header-h) + 24px); bottom: calc(var(--cap-h) + 48px); margin-block: auto; height: min(600px, calc(100% - var(--header-h) - var(--cap-h) - 72px)); width: auto; max-width: 40vw; aspect-ratio: 1; transform: none; }
  .hero--stage .hero__visw { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) - 8px), #000 calc(var(--header-h) + 16px)); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) - 8px), #000 calc(var(--header-h) + 16px)); }
  .hero--stage .hero__visw::before { -webkit-mask-image: linear-gradient(90deg, transparent 36%, #000 68%); mask-image: linear-gradient(90deg, transparent 36%, #000 68%); }
}

/* 6 暗い面の大きく薄い図形はやめる（透かしに見え、本文と罫の下を横切るため）。文字だけの暗転は、見出しの下の罫を本文の幅で止める */
.feat__bg { display: none; }
.sec--feat-text .st--feat:not(.st--en)::after { grid-column: 1 / span 9; }

/* 7 見出しの罫のすぐ後に一覧の罫が来るところは、一覧の上の罫を消す（罫を 2 本重ねない） */
.st + :is(.vals, .smenu) { border-top: 0; }
.smenu__c { grid-template-columns: minmax(0, 1fr); }

/* 8 グラデーションの線は図形の中だけ：ニュースの先頭の罫と記事の読了の線は一色に */
.news__item.is-lead a::before { background: var(--ink-900); }
[data-page^="article-"] .progress { background: var(--teal-700); }

/* 9 メガメニューの背後：紺の半透明とぼかし（白い本文の上で濁った灰色にしない） */
.mega-scrim { background: rgba(5,9,20,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* 10 総合得点の札：レーダーは札の右半分に、切らずに収める */
.qscore__orb { right: clamp(16px, 2vw, 28px); bottom: 50%; transform: translateY(50%); width: min(46%, 200px); opacity: .6; }
@media (max-width: 899.98px) { .qscore__orb { width: min(40%, 180px); } }

/* 11 JavaScript が無いとき：ヘッダーは紺の地（白い文字が白い地の上で消えない） */
html:not(.js) .header { background: var(--night-0); }

/* 12 スマホの細部：事例の正方形の絵の下の線を消す。M&A はボタンを本文の後ろに */
@media (max-width: 599.98px) { .cases--vis .case .case__vis { border-bottom: 0; } }
@media (max-width: 899.98px) {
  .manda__head { display: contents; }
  .manda__head > .btns { order: 2; margin-top: 8px; }
  .manda__body { order: 1; }
}

/* 13 カードの中の図形（明るい版）：線の下限を上げる（細線 1.25px、主線は面の大きさに合わせて約 2px）、面を 8% 濃く */
.mf--light :is(.mf-h, .mf-h2, .mf-h3) { stroke-width: 1.25; }
.mf--light .mf-ring-t { stroke-width: 1.25; } .mf--light .mf-ring-v { stroke-width: 1.6; }
.mf--light .mf-pa { fill: #dbe3f4; } .mf--light .mf-pb { fill: #c4d1ee; } .mf--light .mf-pc { fill: #bdb5ee; }
.case__vis .mf { --mf-tw: 4.6; }
.acard__vis .mf { --mf-tw: 4; }
.acard:first-child .acard__vis .mf { --mf-tw: 2; }
@media (max-width: 599.98px) {
  .cases--vis .case .case__vis .mf { --mf-tw: 8; }
  .cases--vis .case .case__vis .mf--light .mf-h { stroke: rgba(11,17,36,.26); }   /* 小さな正方形：細線を省かず、少し濃く（格子を消すと点が散らばって見える） */
}
/* 14 関連ページのタイル：図形は 168px 四方で右上に統一し、カードの縁から 28px、題との間は 24px 以上 */
.relc { min-height: 320px; }
.relc__vis { right: 28px; top: 28px; width: 168px; }
@media (max-width: 899.98px) { .relc { min-height: 280px; } .relc__vis { width: 140px; right: 20px; top: 20px; } }
/* 15 トップの宣言と「攻め」と「守り」：見出しの型（英字と罫）に入れず、宣言の 2 拍目として本文の列（6 列目から）に置く。次のサービス紹介までの間を詰める */
.msg2 { grid-column: 6 / -1; margin-top: clamp(56px, 6.1vw, 88px); }
@media (min-width: 900px) and (max-width: 1199.98px) { .msg2 { grid-column: 3 / -1; } }
.msg2 .msg2__h { margin: 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--ink-900); font-feature-settings: "palt" 1; }
.msg2 .msg2__p { margin: 14px 0 0; font-size: var(--fs-lead); font-weight: 500; line-height: 1.9; color: var(--ink-700); }
.sheet { padding-bottom: var(--sp-s); }
.sheet + .sec--svc6 { padding-top: var(--sp-s); }
/* 16 写真の帯（理念の 8 つの原則、M&A の 3 つの観点）：文字を載せない 21:9（スマホは 4:3）。見出しの型とリードの後、一覧の前に */
.band { margin: 0 0 clamp(40px, 4.4vw, 64px); --ar: 21 / 9; border-radius: var(--r-card); overflow: hidden; }
@media (max-width: 899.98px) { .band { --ar: 4 / 3; } }
.mvd .st { margin-bottom: clamp(32px, 3.6vw, 56px); }
/* 17 記事の一覧：新しい 3 件のカードと、行の一覧の間 */
.sec--list .acards { margin: clamp(28px, 3vw, 44px) 0 clamp(40px, 4.4vw, 64px); }

/* ===== H3 講評（12 回目）の反映 ===== */
/* 1 12 か月の升目（X SecureBank）：見えている間、1 か月ずつ灯る。止まっているときは最初の 3 か月が灯った状態 */
.mf-mo { fill: var(--logo-1); fill-opacity: .2; }
.mf-mo[style*="--k:0"], .mf-mo[style*="--k:1"], .mf-mo[style*="--k:2"] { fill-opacity: .85; }
.mf--light .mf-mo { fill: var(--logo-3); fill-opacity: .16; }
.mf--light .mf-mo[style*="--k:0"], .mf--light .mf-mo[style*="--k:1"], .mf--light .mf-mo[style*="--k:2"] { fill-opacity: .8; }
html.mo:not(.motion-off) .mf.is-live .mf-mo { animation: mfMonth 7.2s steps(1, end) infinite; animation-delay: calc(var(--k) * 600ms); }
@keyframes mfMonth { 0% { fill-opacity: .9; } 8.33%, 100% { fill-opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .mf .mf-mo { animation: none !important; } }

/* 2 小さな面：スマホの重なるカードの図形は 200px 四方、タブレットは右に大きく */
@media (max-width: 599.98px) { .svc6__vis { width: min(56%, 200px); } }
@media (min-width: 600px) and (max-width: 899.98px) { .svc6__vis { right: 6%; width: min(44%, 320px); } }

/* 3 ページの切り替え（舞台からサービスのページへ）：新しいページは最初から下にあり、前のページだけが上で消える（暗転しない）。
   舞台の面（紺の板・図形・キャプション）がそのまま冒頭の図形の箱へ移り、中身が冒頭の図形に入れ替わる */
html.vt-motif::view-transition-old(root) { animation: vtOldFade 260ms var(--ease-ui) both; mix-blend-mode: normal; z-index: 1; }
html.vt-motif::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-motif::view-transition-new(hero-curve) { animation: none; }
html.vt-motif::view-transition-image-pair(motif) { animation: none; background: none; }
html.vt-motif::view-transition-old(motif), html.vt-motif::view-transition-new(motif) { height: 100%; object-fit: cover; }

/* 4 記事の脇の関連サービス：左に 72px の図形。高さは中身なり（関連ページのタイルの高さを引き継がない） */
.relc--mini { min-height: 0; padding: 14px 16px; display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; align-items: center; gap: 14px; }
.relc--mini .relc__vis { position: static; width: 72px; aspect-ratio: 1; }
.relc--mini .relc__t { grid-row: auto; padding: 0; font-size: var(--fs-small); }
.relc--mini .relc__go { position: static; }
@media (max-width: 899.98px) { .relc--mini { min-height: 0; } .relc--mini .relc__vis { width: 72px; } }

/* 5 文字だけの暗転（CSIRT・ゼロトラストの解決、M&A のメリット）：見出しは H1 の大きさ。上下は曲線の高さに 24px を足した分だけ */
.sec--feat-text { padding-block: calc(var(--cap-h) + 24px); }
.sec--feat-text .st--feat .st__ja { font-size: var(--fs-h1); line-height: 1.5; }

/* 6 採用の帯の写真：左端に写り込んだ手を外す（左を 5% 切る） */
/* （廊下の写真の左端の手を外す切り取りは、写真の差し替えで不要になった） */

/* 7 本文の主ボタンが見えている間：白い地のヘッダーの主ボタンは線のボタン（1 画面に主ボタンを 2 つ並べない） */
html.has-cta:not(.on-night):not(.mega-open) .header .btn--primary { background: transparent; color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(11,17,36,.24); }
html.has-cta:not(.on-night):not(.mega-open) .header .btn--primary .arrow { background: #0b1124; color: #fff; }

/* 8 ニュースの題名の 2 行目（「｜」の後ろ） */
.news__sub { display: block; margin-top: 2px; font-size: var(--fs-small); font-weight: 400; line-height: 1.7; color: var(--ink-500); }
.news__item.is-lead .news__sub { margin-top: 6px; font-size: var(--fs-body); }

/* 9 SCS の相談のカード：料金のカードと同じ全幅の 2 列（左に見出しと説明、右にボタン） */
@media (min-width: 900px) {
  .consult { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .consult > * { grid-column: 1 / span 7; }
  .consult > .btns { grid-column: 9 / -1; grid-row: 1 / span 4; align-self: center; justify-self: stretch; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .consult > .btns .btn { justify-content: space-between; }
}

/* 10 境界の曲線：縁を少しやわらげる（平らになる途中の段差を抑える） */
.edge--top { -webkit-mask-image: radial-gradient(60% 100% at 50% 100%, transparent 98.6%, #000 100%); mask-image: radial-gradient(60% 100% at 50% 100%, transparent 98.6%, #000 100%); }
/* 移る面の中身：前の舞台の絵は着く直前まで残し、冒頭の図形は後半で重ねる（途中で 2 つの図形を二重に見せない） */
html.vt-motif::view-transition-old(motif) { animation: vtOldOut 640ms cubic-bezier(.65, 0, .15, 1) both; mix-blend-mode: normal; }
html.vt-motif::view-transition-new(motif) { animation: vtNewIn 640ms cubic-bezier(.65, 0, .15, 1) both; mix-blend-mode: normal; }
@keyframes vtOldOut { 0%, 62% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vtNewIn { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }

/* ===== H4 文字だけの冒頭にも図形の箱（会社概要・経営陣・M&A は 6 事業の六角形、ニュース・記事はログの図、お問い合わせは窓口への道筋）。
   サービスの冒頭と同じ規則：右に正方形、ヘッダーの下 24px から曲線の頂点の上 48px までの中央。900px 未満は出さない ===== */
@media (min-width: 900px) {
  .hero--simple:has(.hero__stage) { min-height: clamp(460px, 56svh, 620px); justify-content: center; }
  .hero--simple:has(.hero__stage) .hero__grid { padding-block: clamp(24px, 2.4vw, 40px) calc(var(--cap-h) * .54 + clamp(32px, 4vh, 56px)); }
  .hero--simple:has(.hero__stage) .hero__copy { max-width: min(760px, 56%); }
  .hero--simple .hero__stage { top: calc(var(--header-h) + 24px); bottom: calc(var(--cap-h) * .54 + 48px); margin-block: auto; height: min(420px, calc(100% - var(--header-h) - var(--cap-h) * .54 - 72px)); width: auto; max-width: 34vw; aspect-ratio: 1; transform: none; }
  .hero--simple .hero__stage .mf { --mf-tw: 1.35; }
  .hero--simple .hero__visw { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) - 8px), #000 calc(var(--header-h) + 16px)); mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--header-h) - 8px), #000 calc(var(--header-h) + 16px)); }
  .hero--simple .hero__visw::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; background-position: calc(100% - max(var(--gutter), (100% - var(--maxw)) / 2)) 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 72%); mask-image: linear-gradient(90deg, transparent 40%, #000 72%); }
}
@media (max-width: 899.98px) { .hero--simple .hero__visw { display: none; } }

/* ===== K1 舞台からサービスのページへの切り替え（13 回目の講評）：
   - 前のページは上から冒頭の下端まで拭き取る（不透明度で重ねないので、灰色に濁るコマが出ない）。冒頭より下は、最後に白どうしで入れ替える
   - 曲線は動かさず、拭き取りの線が通ったところから出す（前のページの上に白い弧を出さない。JS で切り抜く）
   - 舞台の面は紺の板として 1 つだけ動く。中身は最初のコマで冒頭の図形を舞台の図形の位置に重ね、2 割までに入れ替える（2 組の図形を見せない）
   - キャプションと進み具合の線は写さない。見出しは板が飛んでいる間に出始める ===== */
::view-transition-old(svc-cap), ::view-transition-old(svc-prog) { animation: vtCapOut 140ms linear both; }
@keyframes vtCapOut { to { opacity: 0; } }
html.vt-motif::view-transition-old(root) { animation: vtWipe 640ms linear both; mix-blend-mode: normal; z-index: 1; }
html.vt-motif::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes vtWipe {
  0% { clip-path: inset(0 0 0 0); opacity: 1; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  60% { clip-path: inset(var(--vt-hb, 76vh) 0 0 0); opacity: 1; animation-timing-function: linear; }
  100% { clip-path: inset(var(--vt-hb, 76vh) 0 0 0); opacity: 0; }
}
html.vt-motif::view-transition-group(hero-curve) { z-index: 3; animation: none; }
html.vt-motif::view-transition-old(hero-curve) { display: none; }
html.vt-motif::view-transition-new(hero-curve) { animation: none; }
html.vt-motif::view-transition-image-pair(motif) { background-color: #0a1433; border-radius: 16px; overflow: hidden; animation: vtPlate 640ms cubic-bezier(.65, 0, .15, 1) both; }
@keyframes vtPlate { 0%, 82% { background-color: #0a1433; border-radius: 16px; } 100% { background-color: rgba(10, 20, 51, 0); border-radius: 0; } }
html.vt-motif::view-transition-old(motif) { height: 100%; object-fit: cover; animation: vtMfOut 640ms linear both; mix-blend-mode: normal; }
html.vt-motif::view-transition-new(motif) { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; animation: vtMfIn 640ms linear both; mix-blend-mode: normal; }
@keyframes vtMfOut { 0% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes vtMfIn { 0% { opacity: 0; } 20%, 100% { opacity: 1; } }
html.vt-in, html.vt-was { --vt-delay: 400ms; }   /* 遷移の後も同じ値（途中で外すと、登場の動きが先へ跳ぶ） */
html.vt-mo { --vt-delay: 120ms; }

/* ===== K2 図形の追加の部品：暦の升目（過ぎた月・今月）、破線の行為の線（封じ込めの境界） ===== */
.mf-mo-p { fill: var(--logo-1); fill-opacity: .4; }
.mf-mo-c { fill: var(--logo-1); fill-opacity: 1; }
.mf--light .mf-mo-p { fill: var(--logo-3); fill-opacity: .3; }
.mf--light .mf-mo-c { fill: var(--logo-3); fill-opacity: .9; }
.mf .mf-tdash { stroke-dasharray: 4 4; }

/* ===== K3 小さな面とテンプレートに見える面（13 回目の講評） ===== */
/* 関連ページ：上に 16:9 の表紙（方眼の地に図形）、下に名前。カードの左上を空けない */
.relc--cover { display: grid; grid-template-rows: auto auto 1fr; gap: 6px; min-height: 0; padding: 0 0 22px; }
.relc--cover .relc__vis { position: relative; z-index: auto; inset: auto; width: auto; aspect-ratio: 16 / 9; margin: 0 0 14px; overflow: hidden; border-bottom: 1px solid var(--line); opacity: 1; }
.relc--cover .relc__vis .mf { position: absolute; inset: 0; width: 100%; height: 100%; --mf-tw: 1.7; }
.relc--cover .relc__en { grid-row: 2; padding: 0 24px; }
.relc--cover .relc__t { grid-row: 3; padding: 0 64px 0 24px; }
@media (max-width: 899.98px) { .relc--cover { min-height: 0; } .relc--cover .relc__vis { width: auto; inset: auto; } }
/* 記事の脇の関連サービス：1 行の格子にして上下の偏りをなくす。図形は方眼の小さな表紙の中に収める */
.relc--mini { grid-template-rows: auto; row-gap: 0; align-items: center; padding: 14px 16px; }
.relc--mini > * { grid-row: 1; }
.relc--mini .relc__vis { grid-column: 1; position: relative; inset: auto; width: 72px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.relc--mini .relc__t { grid-column: 2; }
.relc--mini .relc__go { grid-column: 3; }
.relc--mini .relc__vis .mf { position: absolute; inset: 0; width: 100%; height: 100%; --mf-tw: 2.4; }
/* X SecureBank の課題：左に問い、右に「どこから始めるか」の道筋の図 */
.problem { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; padding-block: clamp(24px, 2.4vw, 36px); }
.problem__t { grid-column: 1 / span 7; }
.problem__vis { grid-column: 9 / -1; justify-self: end; position: relative; width: min(100%, 330px); aspect-ratio: 3 / 2; }
.problem__vis .mf { position: absolute; inset: 0; width: 100%; height: 100%; --mf-tw: 1.6; }
@media (max-width: 899.98px) { .problem { display: block; } .problem__vis { display: block; width: min(100%, 360px); margin: 20px 0 0; } }
/* お問い合わせの帯：右に窓口への道筋の図（通常の濃さ）。900px 未満は出さない */
.close__st { position: relative; }
.close__route { position: absolute; right: 0; bottom: calc(16px - clamp(48px, 5vw, 72px)); width: clamp(140px, 13vw, 188px); aspect-ratio: 1; pointer-events: none; }
.close__route .mf { width: 100%; height: 100%; --mf-tw: 1.4; }
@media (max-width: 899.98px) { .close__route { display: none; } }
/* 報告書サンプル：紺の板に報告書の見本の図 */
.report__cover--mf { padding: 0; display: block; }
.report__cover--mf .mf { position: absolute; inset: 0; width: 100%; height: 100%; --mf-tw: 1.4; }
/* 見出しの罫のすぐ下に並ぶ特長：項目の上の線を外して、罫を 2 本にしない */
.st + .nrows--dark { margin-top: clamp(36px, 3.6vw, 56px); }
.st + .nrows--dark .nrow { border-top: 0; padding-top: 0; }
/* サービス紹介トップのカード：文字は上から（隣り合うカードで題名の高さをそろえる） */
@media (min-width: 1200px) { .biz { align-items: start; } .biz__body { padding-top: clamp(8px, 1vw, 16px); } }
/* 経営理念の目次：言葉を大きく */
.mvc__st, .mvc__st[lang="en"] { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.5; }
/* スマホの重なるカード：図形の箱をカードの幅いっぱいの横長に（図形は中央の帯で切り取る） */
@media (max-width: 599.98px) {
  .svc6__a { height: min(436px, 112vw); }
  .svc6__vis { left: 0; right: 0; bottom: 0; width: auto; height: 62%; aspect-ratio: auto; }
  .svc6__vis img { object-fit: cover; object-position: 50% 50%; }
}
/* スマホ・タブレットのトップの映像：空を少し削って、立方体の風景を上げる（映像そのものは変えない） */
@media (max-width: 899.98px) {
  .hv__poster, .hv__video { height: 140%; }
  .hv__iframe { height: 140%; }
}

/* ===== K4 すべてのページの切り替えを、上からの拭き取りの 1 つの動きにそろえる（14 回目の講評）：
   - 前のページは上から下へ拭き取られ、次のページは最初から下にある（縮むカード、紺の幕、丸屋根の開き方はやめる）
   - 曲線は次のページの一部として拭き取りで現れる。舞台から移るとき（vt-motif）だけ、曲線を板の上に置いて拭き取りの線と同時に出す
   - 舞台から移るときは、板の着地と拭き取りの終わりをそろえる（600ms） ===== */
.hero .curve { view-transition-name: none; }
html.vt-motif .hero .curve { view-transition-name: hero-curve; }
::view-transition { background: transparent; }
::view-transition-old(root) { animation: vtWipeAll 560ms cubic-bezier(.76, 0, .24, 1) both; z-index: 1; mix-blend-mode: normal; transform: none; filter: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@keyframes vtWipeAll { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
html.vt-motif::view-transition-old(root) { animation: vtWipe 600ms linear both; }
@keyframes vtWipe {
  0% { clip-path: inset(0 0 0 0); opacity: 1; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  80% { clip-path: inset(var(--vt-hb, 76vh) 0 0 0); opacity: 1; animation-timing-function: linear; }
  100% { clip-path: inset(var(--vt-hb, 76vh) 0 0 0); opacity: 0; }
}
html.vt-motif::view-transition-group(motif) { animation-duration: 600ms; animation-timing-function: cubic-bezier(.3, .6, .15, 1); }
html.vt-motif::view-transition-image-pair(motif) { animation: vtPlate 600ms cubic-bezier(.3, .6, .15, 1) both; }
html.vt-motif::view-transition-old(motif) { animation: vtMfOut 600ms linear both; }
html.vt-motif::view-transition-new(motif) { animation: vtMfIn 600ms linear both; }
html.vt-in, html.vt-was { --vt-delay: 160ms; }
html.vt-mo { --vt-delay: 120ms; }
/* 重大度の色（報告書の見本、生成 AI の機密の語） */
.mf-sv-a { fill: #8f84ff; } .mf-sv-b { fill: var(--logo-2); } .mf-sv-c { fill: var(--logo-1); } .mf-sv-d { fill: rgba(255,255,255,.32); }
.mf--light .mf-sv-a { fill: var(--logo-3); } .mf--light .mf-sv-c { fill: #2bb3b8; } .mf--light .mf-sv-d { fill: rgba(11,17,36,.22); }

/* ===== K5 14 回目の講評の細部 ===== */
/* 文字だけだった冒頭：図の箱を大きく（高さ 64svh）。900px 未満は、図をパンくずの上に小さく置く */
@media (min-width: 900px) { .hero--simple:has(.hero__stage) { min-height: clamp(500px, 64svh, 700px); } }
@media (max-width: 899.98px) {
  .hero--simple .hero__visw { display: block; position: static; }
  .hero--simple .hero__visw::before { display: none; }
  .hero--simple .hero__stage { position: relative; inset: auto; width: min(44vw, 200px); height: auto; margin: 4px auto 0; transform: none; }
  .hero--simple:has(.hero__stage) .hero__grid { padding-top: 16px; }
}
/* X SecureBank の流れ図：「契約」は、企業と人材 DB の間の破線（依頼の矢印の下）に載せる */
.xsb__arrow--co .xsb__contract { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); margin: 0; padding: 4px 12px; background: var(--mist); font-weight: 400; white-space: nowrap; }
.xsb__arrow--co::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; border-top: 1px dashed var(--ink-300); }
@media (max-width: 899.98px) {
  .xsb__arrow--co { height: 104px; }
  .xsb__arrow--co > span { bottom: auto; top: 14px; transform: none; }
  .xsb__arrow--co::before { left: 10px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1px dashed var(--ink-300); }
  .xsb__arrow--co .xsb__contract { left: 22px; top: auto; bottom: 14px; transform: none; }
}
/* X SecureBank の課題：問いを大きく、右の図の箱を広く（7：5） */
.problem__t { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.7; max-width: 16em; }
.problem__vis { grid-column: 8 / -1; width: min(100%, 440px); }
/* SCS などの手順：見出しと本文の間を少し空ける */
.stp__main > .stp__t + .stp__b { margin-top: 12px; }
/* タブレット縦のトップ：見出しの塊を少し上げる（暗い空を短く） */
@media (min-width: 600px) and (max-width: 899.98px) { .hvh__in { padding-bottom: calc(var(--cap-h) + 14vh); } .hv__poster, .hv__video, .hv__iframe { height: 152%; } }

/* K4-2 舞台から移るとき：板と拭き取りを同じ曲線・同じ長さ（600ms）で進める（板だけが先に飛んで、空いた舞台を見せない／着地の後に滑らない） */
html.vt-motif::view-transition-old(root) { animation: vtWipeClip 600ms cubic-bezier(.76, 0, .24, 1) both, vtWipeFade 600ms linear both; }
@keyframes vtWipeClip { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(var(--vt-hb, 76vh) 0 0 0); } }
@keyframes vtWipeFade { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
html.vt-motif::view-transition-group(motif) { animation-duration: 600ms; animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
html.vt-motif::view-transition-image-pair(motif) { animation: vtPlate 600ms linear both; }

/* K4-3 曲線は、舞台から移るときも次のページの一部として拭き取りで現れる（板と拭き取りが同じ進み方なので、板が白い弧に重ならない） */
html.vt-motif .hero .curve { view-transition-name: none; }

/* ---------- L1. 図形の札（部位の名前。大きく描く図形だけ：トップの舞台・ページの冒頭）
   --mf-u は corp.js が「480 ÷ 描かれた幅」を書く（どの大きさでも 12〜13px に見える）。300px より小さく描かれるときは札を隠す（.mf--small） ---------- */
.mf { --mf-ground: #0a1433; }
.mf-lb { font-family: var(--font-sans); font-size: calc(12.5px * var(--mf-u, 1.15)); font-weight: 500; letter-spacing: .06em; fill: rgba(255,255,255,.76);
  dominant-baseline: central; paint-order: stroke; stroke: var(--mf-ground); stroke-width: calc(5px * var(--mf-u, 1.15)); stroke-linejoin: round; font-feature-settings: "palt" 1; }
.mf-lb--k { fill: #83fbf1; }
.mf-lb--sm { font-size: calc(11px * var(--mf-u, 1.15)); fill: rgba(255,255,255,.58); }
.mf-lb--s { font-family: var(--font-display); font-size: calc(12px * var(--mf-u, 1.15)); letter-spacing: .1em; fill: #fff; stroke: none; }
.mf-lb--in { font-size: calc(14px * var(--mf-u, 1.15)); fill: #fff; stroke: none; letter-spacing: .1em; }
.mf-lb--ink { fill: #0b1124; stroke: none; }
.mf .mf-lbs > * { opacity: 0; transition: opacity 640ms var(--ease-out) var(--dl, 900ms); }
.mf.is-in .mf-lbs > * { opacity: 1; }
html.motion-off .mf .mf-lbs > *, html:not(.js) .mf .mf-lbs > * { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .mf .mf-lbs > * { opacity: 1; transition: none; } }
.mf--small .mf-lbs > :not(.mf-lb--in) { display: none; }   /* 小さく描くときも、面の中の字（構想・★3 など）は残す */

/* ---------- L2. トップ：サービス紹介（構想・実行・供給の 3 つの事業の章と、紺の舞台） ---------- */
.sheet + .sec--biz3 { padding-top: var(--sp-s); }
.biz3 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.biz3__list { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.biz3__item { position: relative; padding: clamp(36px, 4vw, 56px) 0 clamp(40px, 4.4vw, 60px); border-bottom: 1px solid var(--line); }
.biz3__vis { display: none; }
.biz3__h { margin: 0; display: grid; gap: clamp(14px, 1.4vw, 20px); font-weight: 500; }
/* 章の大きな字：いまの章だけ、ロゴの色が左から満ちる（「攻め」と「守り」と同じ塗り） */
.biz3__role { display: block; width: max-content; font-size: clamp(56px, 6vw, 92px); line-height: 1; letter-spacing: .06em; font-feature-settings: "palt" 1;
  background-image: linear-gradient(90deg, #138e9c, #2b5bd7 55%, #5b4cd5), linear-gradient(var(--ink-300), var(--ink-300)); background-size: 0% 100%, 100% 100%;
  background-repeat: no-repeat; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-size 1100ms var(--ease-out); }
.biz3__item.is-cur .biz3__role { background-size: 100% 100%, 100% 100%; }
html:not(.mo) .biz3__role, html.motion-off .biz3__role { background-size: 100% 100%, 100% 100%; transition: none; }
@media (prefers-reduced-motion: reduce) { .biz3__role { background-size: 100% 100%, 100% 100%; transition: none; } }
.biz3__name { display: block; font-size: var(--fs-h3); line-height: 1.5; letter-spacing: .04em; color: var(--ink-900); }
.biz3__lead { margin: 16px 0 0; max-width: 40em; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-700); }
.biz3__subs { margin-top: clamp(22px, 2.2vw, 30px); }
.biz3__subh { margin: 0 0 6px; font-size: var(--fs-small); font-weight: 500; letter-spacing: .06em; color: var(--ink-500); }
.biz3__sublist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 1.5); border-top: 1px solid var(--line); }
.biz3__sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-body); font-weight: 500; line-height: 1.6; letter-spacing: .02em; color: var(--ink-900); transition: color 240ms var(--ease-ui), padding 320ms var(--ease-ui); }
html:not(.is-scrolling) .biz3__sub:hover, .biz3__sub:focus-visible { color: var(--teal-700); padding-left: 6px; }
html:not(.is-scrolling) .biz3__sub:hover .go, .biz3__sub:focus-visible .go, .biz3__more .go { opacity: 1; transform: none; }
.biz3__links { margin: clamp(20px, 2vw, 28px) 0 0; }
.biz3__more { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 500; color: var(--teal-700); }
.biz3__more span { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 360ms var(--ease-out); }
.biz3__more:hover span, .biz3__more:focus-visible span { background-size: 100% 1px; }
.biz3__cycle { grid-column: 6 / -1; margin: 22px 0 0; font-size: var(--fs-small); line-height: 1.8; color: var(--ink-500); }
.biz3__foot { grid-column: 6 / -1; margin-top: clamp(28px, 2.8vw, 40px); }
/* 舞台（900px 以上） */
.biz3__stage { display: none; }
.biz3__stage-in { position: relative; height: 100%; overflow: hidden; isolation: isolate; background: #0a1433; }
.biz3__stage-in::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px; background-position: right -1px top -1px; }
.biz3__mfs { position: absolute; z-index: 1; container-type: size; }
.biz3__mf { position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); opacity: 0; transform: scale(.965); transform-origin: 50% 50%;
  transition: opacity 160ms linear, transform 700ms var(--ease-out); }
.biz3__mf.is-act { opacity: 1; transform: none; transition: opacity 320ms var(--ease-ui) 100ms, transform 1000ms var(--ease-out) 60ms; }
.biz3__cap { position: absolute; z-index: 2; margin: 0; color: #fff; }
.biz3__cap-t { position: relative; display: block; overflow: clip; height: 1.6em; font-size: var(--fs-h3); line-height: 1.6; font-weight: 500; letter-spacing: .04em; }
.biz3__cap-in { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 420ms var(--ease-out); }
.biz3__cap-in b { font-weight: 500; color: #83fbf1; margin-right: .9em; }
.biz3__cap-in.is-out { transform: translateY(-100%); }
.biz3__cap-in.is-in-from { transform: translateY(100%); transition: none; }
.biz3__prog { position: absolute; z-index: 2; height: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.biz3__prog i { position: absolute; inset: 0; background: var(--logo-1); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
html.motion-off .biz3__cap-in { transition: none !important; }
@media (min-width: 900px) {
  .biz3 { --bleed: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); --stage-h: min(660px, calc(100vh - 200px)); }
  .biz3__stage { display: block; grid-column: 1 / span 5; grid-row: 1 / span 3; position: sticky; top: calc(50vh - var(--stage-h) / 2 + var(--header-h) / 3); height: var(--stage-h);
    margin-left: calc(-1 * var(--bleed)); width: calc(100% + var(--bleed) - var(--col-gap)); }
  .biz3__stage-in { border-radius: 0 var(--r-stage) var(--r-stage) 0; }
  .biz3__mfs { top: 6%; bottom: 19%; left: calc(var(--bleed) + 3%); right: 6%; }
  .biz3__cap { left: var(--bleed); right: clamp(24px, 2.2vw, 36px); bottom: 30px; }
  .biz3__prog { left: var(--bleed); right: clamp(24px, 2.2vw, 36px); bottom: calc(30px + 2.7em); }
  .biz3__item { min-height: max(62vh, 460px); display: grid; align-content: center; }
  .sec--biz3 .st--en .st__main { grid-column: 6 / -1; }
}
@media (max-width: 899.98px) {
  .biz3 { grid-template-columns: minmax(0, 1fr); }
  .biz3__list, .biz3__cycle, .biz3__foot { grid-column: 1 / -1; }
  .biz3__item { padding: 28px 0 34px; }
  .biz3__vis { display: block; position: relative; aspect-ratio: 16 / 10; margin-bottom: 22px; border-radius: var(--r-card); overflow: hidden; background: #0a1433;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; }
  .biz3__vis img { position: absolute; inset: 6% 0; width: 100%; height: 88%; object-fit: contain; }
  .biz3__role { font-size: clamp(44px, 12.4vw, 64px); }
  .biz3__sublist { grid-template-columns: minmax(0, 1fr); }
  .biz3__sub .go { opacity: 1; transform: none; }
}

/* ---------- L3. サービス紹介 トップ：3 つの事業の一覧、事業ごとの説明、進め方、M&A ---------- */
.b3s { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.b3__a { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 9fr) 40px; column-gap: var(--col-gap); align-items: center; padding: clamp(26px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--line); color: var(--ink-900); }
.b3__role { font-size: clamp(40px, 4.2vw, 64px); font-weight: 500; line-height: 1; letter-spacing: .06em; background-image: linear-gradient(90deg, #138e9c, #2b5bd7 55%, #5b4cd5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.b3__body { display: grid; gap: 6px; }
.b3__name { font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.b3__lead { font-size: var(--fs-body); line-height: 1.9; color: var(--ink-500); }
html:not(.is-scrolling) .b3__a:hover .go, .b3__a:focus-visible .go { opacity: 1; transform: none; }
html:not(.is-scrolling) .b3__a:hover .b3__name, .b3__a:focus-visible .b3__name { color: var(--teal-700); }
.b3s__cap { margin: 20px 0 0; font-size: var(--fs-small); line-height: 1.8; color: var(--ink-500); }
.bzs__role { display: inline-block; margin-right: .7em; padding-right: .7em; border-right: 1px solid var(--line); color: var(--teal-700); }
.bzs__h3 { margin: clamp(48px, 5vw, 72px) 0 clamp(20px, 2vw, 28px); font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.bzs .biz { border: 1px solid var(--line); }
.bzs.g-mist .biz { border-color: transparent; }
.bzp { list-style: none; margin: clamp(8px, 1vw, 16px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2); border-top: 1px solid var(--line); }
.bzp__i { padding: 26px 0 4px; }
.bzp__t { margin: 0 0 10px; font-size: var(--fs-h4); font-weight: 500; line-height: 1.6; letter-spacing: .03em; }
.bzp__b { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-500); }
.bzs__btns { margin-top: clamp(32px, 3.2vw, 44px); }
/* 進め方（7 段階）：横に並ぶ段。左から右へ、1 本の線が通る */
.bzf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; position: relative; }
.bzf::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 1px; background: var(--line); }
.bzf__i { position: relative; display: grid; gap: 14px; padding-right: 12px; }
.bzf__n { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-small); color: var(--ink-500); font-variant-numeric: tabular-nums; }
.bzf__i:last-child .bzf__n { background: #0a1433; border-color: #0a1433; color: #fff; }
.bzf__t { font-size: var(--fs-body); font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
.bzm__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; }
.bzm__h { grid-column: 1 / span 5; margin: 0; font-size: var(--fs-h2); font-weight: 500; line-height: 1.4; letter-spacing: .04em; }
.bzm__p { grid-column: 6 / -1; margin: 0; font-size: var(--fs-lead); line-height: 1.9; color: var(--ink-700); }
.bzm__in .btns { grid-column: 6 / -1; margin-top: 22px; }
@media (max-width: 899.98px) {
  .b3__a { grid-template-columns: minmax(0, 1fr) 32px; row-gap: 10px; }
  .b3__role { grid-column: 1; font-size: 44px; }
  .b3__body { grid-column: 1; }
  .b3__go { grid-column: 2; grid-row: 1 / span 2; opacity: 1; transform: none; }
  .bzp { grid-template-columns: minmax(0, 1fr); }
  .bzp__i { padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
  .bzf { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bzf::before { left: 19px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .bzf__i { grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 16px; padding: 0; }
  .bzm__in { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .bzm__h, .bzm__p, .bzm__in .btns { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1199.98px) { .bzf { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; } .bzf::before { display: none; } }

/* ---------- L4. 人材マッチングのページ：人材の 2 つの事業 ---------- */
.duo2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-block) calc(var(--col-gap) * 3); scroll-margin-top: var(--sp-anchor); }
.duo2__col { display: grid; gap: 16px; align-content: start; scroll-margin-top: var(--sp-anchor); }
.duo2__h { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.duo2__role { display: inline-block; margin-right: .7em; padding-right: .7em; border-right: 1px solid var(--line); color: var(--teal-700); }
.duo2__lead { margin: 0; font-size: var(--fs-body); line-height: 1.95; color: var(--ink-700); }
.duo2__pts { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--line); }
.duo2__pts li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.duo2__pt { margin: 0 0 6px; font-size: var(--fs-h4); font-weight: 500; line-height: 1.6; }
.duo2__pb { margin: 0; font-size: var(--fs-body); line-height: 1.9; color: var(--ink-500); }
@media (max-width: 899.98px) { .duo2 { grid-template-columns: minmax(0, 1fr); } }
.bzs { scroll-margin-top: calc(var(--header-h) + 8px); }

/* メガメニュー：事業ごとのまとまりの名前 */
.mega__grp { margin: 0 0 4px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.56); }
.mega__grp + .mega__links { margin-bottom: 22px; }
/* 顧問サービスの図の注記 */
.xsb__note { margin: 14px 0 0; font-size: var(--fs-caption); line-height: 1.8; color: var(--ink-500); }
/* 事業紹介の主なサービス（9 つ）：3 列で、図形を上に（1 枚だけ残る行を作らない） */
@media (min-width: 900px) {
  .bzs .bizs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bzs .biz { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 18px; padding: 18px 18px 56px; }
  .bzs .biz__vis { aspect-ratio: 16 / 10; }
  .bzs .biz__vis img { padding: 4% 18%; }
}

/* ---------- L5. スクロールの塗りと奥行き（2026-10-19：動的に） ---------- */
/* 声明の文：行ごとに、薄い色から濃い色へ（--lp は corp.js が書く。行の分割がないとき・動きを止めたときは普通の色） */
html.mo:not(.motion-off) [data-rise="statement"] .lr-line { --st-on: var(--ink-900); --st-off: var(--ink-300);
  background-image: linear-gradient(90deg, var(--st-on) calc(var(--lp, -8%) - 8%), var(--st-off) calc(var(--lp, -8%) + 8%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.mo:not(.motion-off) :is(.sec--dark, [data-ground="dark"], .hero--night) [data-rise="statement"] .lr-line { --st-on: #fff; --st-off: rgba(255,255,255,.3); }
@media (prefers-reduced-motion: reduce) { html.mo [data-rise="statement"] .lr-line { background: none !important; color: inherit !important; } }
/* フッターの大きなスローガン：最後に近づくほど、せり上がり、「Design tomorrow」にロゴの色が満ちる（--fp） */
html.mo:not(.motion-off) .footer__mark-in { transform: translateY(calc((1 - var(--fp, 1)) * 38%)); opacity: calc(.3 + var(--fp, 1) * .7); }
.footer__mark-b { background-image: linear-gradient(90deg, #83fbf1, #6493df 52%, #8f84ff), linear-gradient(#fff, #fff); background-size: calc(var(--fp, 1) * 100%) 100%, 100% 100%;
  background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .footer__mark-b { background-size: 100% 100%, 100% 100%; } html.mo .footer__mark-in { transform: none; opacity: 1; } }
/* 実績のカード：右の列（4 列では 1 つおき）だけ、スクロールに合わせて少し遅れて動く（登場の動きと別の translate を使う） */
@media (min-width: 900px) {
  .cases--vis { padding-bottom: 56px; }
  .cases--vis > .case:nth-child(even) { translate: 0 calc(56px + var(--drift, 0px)); }   /* 1 つおきに段違い（止まった画面でも、揃え損ねに見えない大きさ） */
}
/* 事業紹介の 3 つの事業：行が画面に入ると、大きな字にロゴの色が満ちる */
.b3__role { background-image: linear-gradient(90deg, #138e9c, #2b5bd7 55%, #5b4cd5), linear-gradient(var(--ink-300), var(--ink-300)); background-size: 0% 100%, 100% 100%; background-repeat: no-repeat; transition: background-size 1100ms var(--ease-out) 200ms; }
.b3.is-in .b3__role, html:not(.mo) .b3__role, html.motion-off .b3__role { background-size: 100% 100%, 100% 100%; }
@media (prefers-reduced-motion: reduce) { .b3__role { background-size: 100% 100%, 100% 100%; transition: none; } }
/* 事例の文字だけのカード（6 件以上）：1200px 以上は 3 列（長い社名の語を途中で折らない幅） */
@media (min-width: 1200px) { .cases--text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* トップのサービス紹介：900〜1199px は主なサービスを 1 列に、舞台の名前は 2 行に */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .biz3__sublist { grid-template-columns: minmax(0, 1fr); }
  .biz3__cap-t { height: 2.9em; font-size: var(--fs-h4); line-height: 1.45; }
  .biz3__cap-in { white-space: normal; }
  .biz3__cap-in b { display: block; margin: 0; }
  .biz3__prog { bottom: 98px; }
}
/* 900px 未満の章の図形（札つき。小さいときは札を隠す） */
.biz3__vis .mf { position: absolute; inset: 5% 0; width: 100%; height: 90%; }
@media (max-width: 599.98px) { .bzs__role { display: block; margin: 0 0 8px; padding: 0; border: 0; } }
@media (max-width: 599.98px) { .biz3__vis .mf { inset: -5% 0; height: 110%; } }
/* トップの冒頭：窓が開き始める間は映像を明るくし、窓の縁を読めるようにする（画面いっぱいに広がるまでに、元の明るさに戻す） */
@keyframes hvLit { 0% { filter: brightness(1.7) saturate(1.12); } 55% { filter: brightness(1.22) saturate(1.04); } 100% { filter: none; } }
html.mo .hv { animation: hvWin 1500ms cubic-bezier(.7, 0, .2, 1) calc(60ms + var(--vt-delay, 0ms)) both, hvLit 1800ms cubic-bezier(.4, 0, .2, 1) calc(60ms + var(--vt-delay, 0ms)) both; }
@media (max-width: 899.98px) { html.mo .hv { animation-name: hvWinM, hvLit; } }
/* 900〜1199px：記事の脇の関連サービスは図を外して名前を広く、5 件の事例の 3 列の行は題を一段小さく（語の途中で折らない） */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .relc--mini { grid-template-columns: minmax(0, 1fr) 24px; }
  .relc--mini .relc__vis { display: none; }
  .relc--mini .relc__t { grid-column: 1; }
  .relc--mini .relc__go { grid-column: 2; }
  .cases--5 > .case:nth-child(n+3) .case__what { font-size: 18px; }
}
/* セクションの見出しの罫：見出しがせり上がると、左から右へ引かれる */
html.mo:not(.motion-off) .st::after { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1300ms var(--ease-out) 140ms; }
html.mo:not(.motion-off) .st:has(.is-risen)::after { transform: none; }
@media (prefers-reduced-motion: reduce) { html.mo .st::after { transform: none !important; transition: none; } }
@media (max-width: 899.98px) { .biz3__item.is-seen .biz3__role { background-size: 100% 100%, 100% 100%; } }
/* 行に分けた見出し：行の箱の上下の負の余白が隣どうしで相殺され、分けた瞬間に高さが 0.08em ずつ伸びて下の段落がずれる。
   縦の flex にして余白の相殺をなくし、分ける前と同じ高さにする（キットの .lr-mask-line-mask はそのまま） */
:is([data-rise], [data-split]):has(> .lr-mask-line-mask) { display: flex; flex-direction: column; }
/* 元の映像（Vimeo の元の動画、または元のファイル）を流すときは、色味と粒子の層を重ねない（元の動画の色をそのまま見せる）。文字を読みやすくする影と周辺の減光だけを残す */
.hv--original .hv__tone, .hv--original .hv__grain { display: none; }
/* クイック AI の結果のカード：900px 未満で固定（sticky）を外すときも、中の図の基準をカードにする（static にすると図がページの上へ飛ぶ） */
@media (max-width: 899.98px) { .qscore { position: relative; } }
/* ページを離れるとき（前のページの像を撮る直前）：メガメニュー・メニュー・暗幕を動きなしで消す */
html.vt-leave :is(.mega, .mega-scrim, .menu) { transition: none !important; opacity: 0 !important; visibility: hidden !important; }
html.vt-leave .header { transition: none !important; }
/* メニューとフッターの事業ごとの小見出し（構想・実行・供給） */
.mega__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.menu__sub { margin: 14px 0 2px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: .06em; color: var(--on-night-3); }
.menu.is-open .menu__sub { animation: menuIn 520ms var(--ease-out) both; }
.footer__sub { display: block; margin: 12px 0 2px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: .06em; color: rgba(198,207,230,.48); }
/* 「攻め」と「守り」：塗りが見える大きさの場面にする（2 行。開き括弧のぶら下げ） */
.msg2 .msg2__h { font-size: clamp(52px, 6.6vw, 104px); line-height: 1.14; letter-spacing: .02em; margin-left: -.42em; }
.msg2 .msg2__p { margin-top: clamp(22px, 2.4vw, 36px); }
@media (max-width: 899.98px) { .msg2 .msg2__h { margin-left: -.1em; } }

/* ===== M1 15 回目の講評：図の語・スマホの札・事業の図 ===== */
/* 札を出すときは、札の代わりの棒（.mf-lbx）を隠す。小さく描くとき・画像ファイル・表紙では棒を出す */
.mf--lb:not(.mf--small) .mf-lbx { display: none; }
/* 面の中の札（会社概要の紙、段階の帯、話題の枠）：地の色の縁取りを付けない */
.mf-lb--f { stroke: none; }
/* 面の中の字（構想・窓口・体制など）：小さく描くときも、面からはみ出さない大きさに */
.mf-lb--in { font-size: calc(14px * min(var(--mf-u, 1.15), 1.6)); }
/* 明るい地の表紙（カードの中）：線を少し濃く */
.mf--light .mf-h { stroke: rgba(11,17,36,.2); }
.mf--light .mf-h2 { stroke: rgba(11,17,36,.34); }
.mf--light .mf-h3 { stroke: rgba(11,17,36,.56); }
/* 900px 未満：トップの事業の図とサービスの冒頭の図を、札が読める大きさに（描かれる幅 300px 以上） */
@media (max-width: 899.98px) {
  .biz3__vis { aspect-ratio: 1 / 1; max-width: 460px; }
  .biz3__vis .mf { inset: 3%; width: 94%; height: 94%; }
  .hero--stage .hero__stage { width: min(88vw, 440px); }
}
/* 事業紹介：3 つの事業の節。左にリードと特長、右に事業の図（紺の面） */
.bzs__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; margin-top: clamp(24px, 2.6vw, 36px); }
.bzs__lead { grid-column: 1 / span 6; grid-row: 1; margin: 0; font-size: var(--fs-lead); line-height: 1.9; color: var(--ink-700); }
.bzs__intro .bzp { grid-column: 1 / span 6; grid-row: 2; grid-template-columns: minmax(0, 1fr); margin-top: clamp(22px, 2.2vw, 30px); }
.bzs__intro .bzp__i { padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.bzs__intro .bzs__btns { grid-column: 1 / -1; grid-row: 4; }   /* ボタンは図の下に 1 行で */
.bzs__fig, .bzm__fig { position: relative; border-radius: var(--r-card); overflow: hidden; background: #0a1433;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; }
.bzs__fig { grid-column: 8 / -1; grid-row: 1 / span 2; aspect-ratio: 6 / 5; }
.bzs__fig .mf, .bzm__fig .mf { position: absolute; inset: 4%; width: 92%; height: 92%; }
.bzm__in { align-items: start; }
.bzm__h { grid-column: 1 / span 6; grid-row: 1; }
.bzm__p { grid-column: 1 / span 6; grid-row: 2; margin-top: 18px; }
.bzm__in .btns { grid-column: 1 / span 6; grid-row: 3; }
.bzm__fig { grid-column: 8 / -1; grid-row: 1 / span 4; aspect-ratio: 4 / 3; }
@media (max-width: 899.98px) {
  .bzs__intro { grid-template-columns: minmax(0, 1fr); }
  .bzs__lead, .bzs__intro .bzp, .bzs__intro .bzs__btns, .bzs__fig { grid-column: 1 / -1; grid-row: auto; }
  .bzs__fig { width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin-top: 24px; }
  .bzm__h, .bzm__p, .bzm__in .btns { grid-column: 1 / -1; grid-row: auto; }
  .bzm__fig { grid-column: 1 / -1; grid-row: auto; width: 100%; max-width: 460px; aspect-ratio: 1 / 1; margin-top: 10px; }
}
/* トップの事業の舞台（900px 以上）：図形を一回り大きく（方眼の角の印は舞台の余白に掛かってよい） */
@media (min-width: 900px) { .biz3__mf { width: min(110cqw, 110cqh); height: min(110cqw, 110cqh); } }
/* 900〜1199px：事業紹介の図の面は正方形に（図が 300px 以上で描かれ、札が出る） */
@media (min-width: 900px) and (max-width: 1199.98px) { .bzs__fig, .bzm__fig { aspect-ratio: 1 / 1; } }
/* 220px より小さく描く図形（お問い合わせの帯、スマホの冒頭の小さな図）：面の中の字も出さない */
.mf--tiny .mf-lbs { display: none; }

/* ===== N1 16 回目の講評 ===== */
/* 札の大きさ：画面の上で約 12.5px を保つ。--mf-u の上限を 1.6 にし、300px より小さく描くときは図からはみ出さないよう字を少し小さく（270px 未満は隠す）。
   --mf-z は大きく描く舞台で字を一回り大きくする倍率 */
.mf-lb { font-size: calc(12.5px * min(var(--mf-u, 1.15), 1.6) * var(--mf-z, 1)); stroke-width: calc(5px * min(var(--mf-u, 1.15), 1.6) * var(--mf-z, 1)); }
.mf-lb--sm { font-size: calc(11px * min(var(--mf-u, 1.15), 1.6) * var(--mf-z, 1)); }
.mf-lb--s { font-size: calc(12px * min(var(--mf-u, 1.15), 1.6) * var(--mf-z, 1)); }
.mf-lb--in { font-size: calc(14px * min(var(--mf-u, 1.15), 1.6) * var(--mf-z, 1)); }
/* 札は図形より先に出す（線と点の動きは後から）：出る時刻を元の約 1/6 に（最大 0.3 秒） */
.mf .mf-lbs > * { transition: opacity 520ms var(--ease-out) calc(var(--dl, 900ms) * .16); }
/* クイック AI リスクアセスメントの結果のカード：900px 未満は固定をやめたときの top を外す（下へずれて切れていた） */
@media (max-width: 899.98px) { .qscore { position: relative; top: auto; } }
/* X SecureBank の仕組みの図：縦に並ぶとき、矢印の名前（2 行）と「契約」の札が重ならない高さに */
@media (max-width: 899.98px) {
  .xsb__arrow--co { height: 144px; }
  .xsb__arrow--co .xsb__contract { bottom: 10px; }
}
/* 400px 以下：図の面の内側の余白を詰め、図を 300px 前後で描く（360px の端末でも札が出る） */
@media (max-width: 400px) {
  .biz3__vis .mf { inset: 1%; width: 98%; height: 98%; }
  .bzs__fig .mf, .bzm__fig .mf, .duo2__fig .mf { inset: 1.5%; width: 97%; height: 97%; }
}
/* 900px 未満の下層ページの冒頭の図：札が読める大きさ（幅 320px まで）で描く。お問い合わせのページは図を出さず、見出しとフォームを先に */
@media (max-width: 899.98px) {
  .hero--simple .hero__stage { width: min(80vw, 320px); margin: 0 auto; }
  .hero--route .hero__visw { display: none; }
}
/* 600〜899px（タブレットの縦）：トップの章は図と本文の 2 列、事業紹介の節も図を右に */
@media (min-width: 600px) and (max-width: 899.98px) {
  .biz3__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .biz3__vis { grid-column: 1; grid-row: 1 / span 8; margin: 0; max-width: none; }
  .biz3__item > :not(.biz3__vis) { grid-column: 2; }
  .bzs__intro, .bzm__in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bzs__lead { grid-column: 1 / span 6; grid-row: 1; }
  .bzs__intro .bzp { grid-column: 1 / span 6; grid-row: 2; }
  .bzs__intro .bzs__btns { grid-column: 1 / -1; grid-row: 3; }
  .bzs__fig { grid-column: 7 / -1; grid-row: 1 / span 2; margin-top: 0; aspect-ratio: 1 / 1; max-width: none; }
  .bzm__h { grid-column: 1 / span 6; grid-row: 1; }
  .bzm__p { grid-column: 1 / span 6; grid-row: 2; }
  .bzm__in .btns { grid-column: 1 / span 6; grid-row: 3; }
  .bzm__fig { grid-column: 7 / -1; grid-row: 1 / span 4; margin-top: 0; aspect-ratio: 1 / 1; max-width: none; }
}
/* 人材ページ「人材の事業は、2つです」：各列の上に事業の図（紺の面） */
.duo2__fig { position: relative; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: var(--r-card); overflow: hidden; background: #0a1433;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 32px 32px; }
.duo2__fig .mf { position: absolute; inset: 4%; width: 92%; height: 92%; }
@media (max-width: 899.98px) { .duo2__fig { aspect-ratio: 1 / 1; max-width: 460px; } }
/* トップの M&A（暗転）：見出しとボタンの下に M&A の図 */
.manda__fig { width: min(100%, 360px); aspect-ratio: 1; margin-top: clamp(16px, 1.6vw, 28px); }
.manda__fig .mf { width: 100%; height: 100%; --mf-ground: var(--night-0); }
/* 写真の冒頭（経営陣・経営理念など）：ヘッダーの白い字の下を少し濃く */
@media (min-width: 900px) { .hero--photo .hero__shade { height: 184px; background: linear-gradient(180deg, rgba(5,9,20,.68) 0, rgba(5,9,20,.32) 96px, rgba(5,9,20,0) 100%); } }
@media (max-width: 899.98px) { .hero--photo .hero__shade { height: 144px; background: linear-gradient(180deg, rgba(5,9,20,.68) 0, rgba(5,9,20,0) 100%); } }
/* トップの事業の舞台（900px 以上）：図形をさらに大きく（四隅の印は付けない）、札も一回り大きく */
@media (min-width: 900px) { .biz3__mf { width: min(124cqw, 124cqh); height: min(124cqw, 124cqh); max-width: none; max-height: none; inset: auto; left: 50%; top: 50%; margin: 0; translate: -50% -50%; --mf-z: 1.14; } }   /* svg の max-width: 100% を外し（外さないと箱の幅で頭打ちになる）、箱より大きくても中央に置く */
/* 認証・加盟団体の名前（900〜1199px は 5 列で狭いため、字を少し小さくして「（プライバシーマーク）」を 1 行に） */
@media (min-width: 900px) and (max-width: 1199.98px) { .trust__row--certs .trust__cert-t { padding-inline: 10px; font-size: clamp(12px, 1.25vw, 14px); letter-spacing: 0; } }
/* 主要取引先（900〜1099px は 3 列で狭いため、左右の余白と字を少し詰めて「コンサルティングファーム」を 1 行に） */
@media (min-width: 900px) and (max-width: 1099.98px) { .trust__client { padding: 16px 14px 16px 38px; font-size: 16px; } .trust__client::before { left: 20px; } }
/* ページの切り替えの写しでは、メニューのボタンを閉じた形で（× から戻る動きを待たない） */
html.vt-leave :is(.burger span, .burger span::before, .burger span::after) { transition: none !important; }
/* 360px 前後の端末：見出しと事例の題を一段小さく（長い社名やサービス名が行より長くならないように） */
@media (max-width: 374.98px) {
  .feat__h, .sec--feat-text .feat__h, .sec--feat-text .st--feat .st__ja { font-size: 24px; }
  .case .case__what, .cases--vis .case .case__what { font-size: 16px; }
}
/* 900〜1099px：理念のカードの言葉を一段小さく（「AI×セキュリティで、」を 1 行に） */
@media (min-width: 900px) and (max-width: 1099.98px) { .mvc__st, .mvc__st[lang="en"] { font-size: 20px; } }
/* 1200〜1339px：記事の脇の関連サービスも、図を外して名前を広く */
@media (min-width: 1200px) and (max-width: 1339.98px) {
  .relc--mini { grid-template-columns: minmax(0, 1fr) 24px; }
  .relc--mini .relc__vis { display: none; }
  .relc--mini .relc__t { grid-column: 1; }
  .relc--mini .relc__go { grid-column: 2; }
}

/* ===== P1 理念（MVV）の反映：トップ ===== */
/* 「攻め」と「守り」：攻め（Design）はロゴのグラデーション、守り（Secure）は墨。冒頭とフッターの「Secure today（白）, Design tomorrow（色）」と同じ対応 */
.msg2__a { --fa: #138e9c; --fb: #2b5bd7; --fc: #5b4cd5; background: linear-gradient(90deg, var(--fa), var(--fb) 52%, var(--fc)) 0 0 / var(--fill) 100% no-repeat, linear-gradient(var(--ink-300), var(--ink-300)); -webkit-background-clip: text; background-clip: text; }
.msg2__b { --fa: var(--ink-900); --fb: var(--ink-900); background: linear-gradient(90deg, var(--fa), var(--fb)) 0 0 / var(--fill) 100% no-repeat, linear-gradient(var(--ink-300), var(--ink-300)); -webkit-background-clip: text; background-clip: text; }
.stmt2__b { color: var(--ink-700); }
/* 前口上の 2 行（サービス紹介のリードの前、事業紹介の見出しの前） */
.st__vow { display: block; margin-bottom: 1em; font-size: clamp(17px, 1.39vw, 20px); font-weight: 500; line-height: 2; color: var(--ink-900); }
/* 『挑戦保障』の節（紺。トップで一番大きな和文）。右に原文 4 行。下にコンセプトムービーの舞台 */
.sec--mission { padding-block: clamp(96px, 11.1vw, 160px) 0; background: var(--night-0); }
html:not(.mo) .sec--mission[data-ground="dark"] { background: var(--night-0); }
.mission { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; --pa: 0%; --pb: 0%; }
.mission__head { grid-column: 1 / span 6; }
.mission__k { margin: 0 0 clamp(16px, 1.6vw, 24px); font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--on-night-3); }
.mission__h { margin: 0 0 0 -.06em; font-size: clamp(64px, 8.3vw, 120px); font-weight: 500; line-height: 1.1; letter-spacing: .01em; color: #fff; font-feature-settings: "palt" 1; }
.fillw { --fa: #83fbf1; --fb: #6493df; --fc: #8f84ff; --fill: var(--pa); background: linear-gradient(90deg, var(--fa), var(--fb) 52%, var(--fc)) 0 0 / var(--fill) 100% no-repeat, linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mission .fillw { --fill: calc(var(--pa) * .5 + var(--pb) * .5); }   /* 前半と後半を合わせて 1 本に（見出しが画面の下から上へ進む間に満ちる） */
html:not(.mo) .mission, html.motion-off .mission { --pa: 100% !important; --pb: 100% !important; }
@media (prefers-reduced-motion: reduce) { .mission { --pa: 100% !important; --pb: 100% !important; } }
.mission__sub { margin: clamp(20px, 2vw, 28px) 0 0; font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: #fff; }
.mission__body { grid-column: 7 / -1; padding-top: clamp(24px, 3.2vw, 56px); }
.mission__line { margin: 0; font-size: clamp(17px, 1.39vw, 20px); line-height: 2; color: var(--on-night-2); }
.mission__line + .mission__line { margin-top: 1em; }
.mission__more { margin: clamp(28px, 2.8vw, 40px) 0 0; font-size: var(--fs-body); }
.textlink--light, [data-ground="dark"] .textlink--light { color: #fff; background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)); }
.sec--mission .movie-stage { margin-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(96px, 11.1vw, 160px); }
.sec--mission .movie-stage.is-expand { padding-bottom: 0; margin-top: clamp(40px, 4vw, 64px); }
.sec--mission .movie { border-radius: 16px; }
@media (max-width: 899.98px) {
  .mission { grid-template-columns: minmax(0, 1fr); }
  .mission__head, .mission__body { grid-column: 1 / -1; }
  .mission__h { font-size: clamp(52px, 14vw, 72px); }
  .mission__body { padding-top: 28px; }
  .sec--mission .movie-stage { padding-inline: 0; margin-top: 40px; padding-bottom: 72px; }
}
/* 誓いの帯（白。見出しの行型は使わず、言葉だけ） */
.sec--vow { padding-block: clamp(120px, 13.9vw, 200px); }
.vow__h { margin: 0; font-size: var(--fs-statement); font-weight: 500; line-height: 1.45; letter-spacing: .02em; color: var(--ink-900); font-feature-settings: "palt" 1; }
.vow__p { margin: clamp(24px, 2.4vw, 36px) 0 0; font-size: var(--fs-lead); font-weight: 500; line-height: 1.9; color: var(--ink-500); }
/* 採用の帯：見出しは和文だけ。一文（誰もが憧れる仕事に）を大きく。写真を高く、裾の紺を長く取り、文字の塊を写真の裾に食い込ませる */
.recruit__p { margin-top: 14px; font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: #fff; }
@media (min-width: 900px) {
  .recruit__ph { height: clamp(480px, 72svh, 780px); }
  .recruit__shade { height: clamp(480px, 72svh, 780px); background: linear-gradient(0deg, #050914 0, rgba(5,9,20,.78) 160px, rgba(5,9,20,0) 360px); }
  .recruit__in { margin-top: -56px; padding-block: 0 clamp(72px, 9vh, 120px); }
}
/* M&A：図は右の列の本文の後（左の見出しの列と右下の空きをそろえる）。札は少し大きく */
.manda__head { grid-column: 1 / span 5; }
.manda__body { grid-column: 6 / -1; gap: 24px; }
.manda__body .manda__fig { width: min(100%, 360px); margin-top: 24px; }
.manda__mf .mf-lb { font-size: calc(14px * min(var(--mf-u, 1.15), 1.6)); }
@media (max-width: 899.98px) { .manda__body .manda__fig { margin-top: 8px; } }
/* 記事：先頭を大きくせず、3 列 2 段の同じカードに（空いた面をなくし、短く） */
@media (min-width: 900px) {
  .acard:first-child { grid-column: auto; grid-row: auto; }
  .acard:first-child a { grid-template-rows: auto 1fr; }
  .acard:first-child .acard__vis { aspect-ratio: 16 / 9; min-height: 0; }
  .acard:first-child .acard__body { padding: clamp(20px, 2vw, 28px); }
  .acard:first-child .acard__t { font-size: 17px; line-height: 1.8; }
  .acard:first-child .acard__vis .mf { --mf-tw: 2.1; }
}
/* 主要取引先：罫線の升目をやめ、業種名を「・」で区切って流す（面積に対して情報が薄い表を畳む） */
@media (min-width: 900px) {
  .trust__clients { display: flex; flex-wrap: wrap; gap: 10px 0; border: 0; padding: 6px 0 4px; }
  .trust__client { display: inline; min-height: 0; padding: 0; border: 0; background: none; font-size: var(--fs-lead); line-height: 1.9; color: var(--ink-900); white-space: nowrap; }
  .trust__client::before { display: none; }
  .trust__client:not(:last-child)::after { content: "・"; margin: 0 .3em; color: var(--ink-300); }
}
/* 前口上の 2 行を含むリードは、1 文を 1 行に収める幅まで広げる */
.st__lead:has(.st__vow) { max-width: 42em; }

/* ===== P2 経営理念のページ：夜（誓い）→ 白（前口上・ミッション・ビジョン・スローガン・8 つの原則）→ 夜（Integrity と誓い） ===== */
.hero--pvow { min-height: clamp(560px, 78svh, 880px); display: flex; flex-direction: column; justify-content: center; }
.hero--pvow .hero__grid { padding-block: clamp(32px, 4vw, 64px) calc(var(--cap-h) + clamp(40px, 6vh, 88px)); }
.hero--pvow .hero__copy { max-width: none; }
.pvow__k { margin: clamp(24px, 3vw, 48px) 0 clamp(20px, 2.2vw, 32px); font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--on-night-3); }
.hero--pvow .pvow__h { max-width: none; font-size: clamp(36px, 6.1vw, 88px); line-height: 1.3; letter-spacing: .02em; }
@media (max-width: 899.98px) { .hero--pvow { min-height: 0; justify-content: flex-end; } .hero--pvow .pvow__h { font-size: clamp(32px, 9.2vw, 44px); } }
/* 章の共通：ラベル（和文 13px）、1 段組の本文（3〜10 列）、連ごとの空き */
.pch { padding-block: clamp(96px, 11.1vw, 160px) 0; }
.pch--values { padding-bottom: clamp(96px, 11.1vw, 160px); }
.sec.g-paper.pch + .sec.g-paper.pch > .container { border-top: 0; padding-top: 0; }
.pch__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.pch__in > * { grid-column: 3 / span 8; }
.pch__k { margin: 0 0 clamp(28px, 3vw, 44px); font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--ink-500); }
.psts { display: grid; gap: clamp(44px, 5vw, 72px); }
.pst p { margin: 0; font-size: clamp(17px, 1.39vw, 20px); line-height: 2; color: var(--ink-900); max-width: 36em; }
.pch--pro .pch__ma { grid-column: 1 / -1; margin-top: clamp(80px, 8.3vw, 120px); }
.pch--mission .pch__in { --pa: 0%; --pb: 0%; }
.pch__name { margin: 0 0 0 -.06em; font-size: clamp(56px, 11.1vw, 160px); font-weight: 500; line-height: 1.08; letter-spacing: .01em; color: var(--ink-900); font-feature-settings: "palt" 1; }
.fillw--ink { --fa: #138e9c; --fb: #2b5bd7; --fc: #5b4cd5; background: linear-gradient(90deg, var(--fa), var(--fb) 52%, var(--fc)) 0 0 / var(--fill) 100% no-repeat, linear-gradient(var(--ink-300), var(--ink-300)); -webkit-background-clip: text; background-clip: text; }
.pch--mission .fillw { --fill: calc(var(--pa) * .5 + var(--pb) * .5); }
html:not(.mo) .pch--mission .pch__in, html.motion-off .pch--mission .pch__in { --pa: 100% !important; --pb: 100% !important; }
@media (prefers-reduced-motion: reduce) { .pch--mission .pch__in { --pa: 100% !important; --pb: 100% !important; } }
.pch__sub { margin: clamp(20px, 2.2vw, 32px) 0 clamp(56px, 6vw, 88px); font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: var(--ink-900); }
.pch__st { margin: 0 0 clamp(56px, 6vw, 88px); font-size: clamp(32px, 6.1vw, 88px); font-weight: 500; line-height: 1.3; letter-spacing: .02em; color: var(--ink-900); font-feature-settings: "palt" 1; }
.pch__slogan { margin: 0 0 clamp(56px, 6vw, 88px); font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6.1vw, 88px); line-height: 1.02; letter-spacing: -.03em; color: var(--ink-900); }
.pch__slogan-b { background: linear-gradient(90deg, #138e9c, #2b5bd7 52%, #5b4cd5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pch__en { font-family: var(--font-display); font-weight: 400; font-size: 1.1em; letter-spacing: -.01em; }
.pch__vh { margin: 0 0 clamp(36px, 4vw, 56px); font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; letter-spacing: .03em; color: var(--ink-900); }
.prs--2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 3); border-top: 1px solid var(--line); }
.prs--2 .pr { display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: clamp(24px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--line); margin: 0; }
.prs--2 .pr__n { font-size: 12px; letter-spacing: .08em; color: var(--ink-500); padding-top: .9em; }
.prs--2 .pr__en { margin: 0; font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.01em; line-height: 1.2; color: var(--ink-900); }
.prs--2 .pr__ja { margin-top: 10px; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.8; color: var(--ink-900); }
/* 章の索引（1200px 以上）：本文の左に固定。いま読んでいる章に線 */
.pbody { position: relative; }
.pnav { display: none; }
@media (min-width: 1200px) {
  .pnav { display: block; position: sticky; top: calc(50vh - 60px); height: 0; z-index: 5; }
  .pnav ul { list-style: none; margin: 0; padding: 0; position: absolute; left: max(var(--gutter), calc((100% - var(--maxw)) / 2)); top: 0; display: grid; gap: 14px; }
  .pnav a { position: relative; display: block; padding-left: 28px; font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--ink-400); text-decoration: none; transition: color 320ms var(--ease-ui); }
  .pnav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: var(--ink-300); transform: scaleX(.5); transform-origin: 0 50%; transition: transform 420ms var(--ease-out), background-color 320ms; }
  .pnav a.is-cur { color: var(--ink-900); } .pnav a.is-cur::before { background: var(--ink-900); transform: scaleX(1.25); }
  .pnav a:hover { color: var(--ink-900); }
}
/* 結び（夜）：Integrity を床のように敷き、誓いで閉じる */
.pclose { padding-block: clamp(96px, 11.1vw, 160px); background: var(--night-0); }
html:not(.mo) .pclose[data-ground="dark"] { background: var(--night-0); }
.pclose__integ { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-bottom: clamp(72px, 8vw, 120px); border-bottom: 1px solid rgba(255,255,255,.14); }
.pclose__it { grid-column: 1 / span 7; margin: 0; font-size: clamp(26px, 3.06vw, 44px); font-weight: 500; line-height: 1.4; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; }
.pclose__it [lang="en"] { font-family: var(--font-display); font-weight: 400; font-size: 1.08em; letter-spacing: -.01em; }
.pclose__it .seg { display: inline-block; }
.pclose__ip { grid-column: 9 / -1; margin: .5em 0 0; font-size: var(--fs-body); line-height: 2; color: var(--on-night-2); }
.pclose__vow { padding-top: clamp(72px, 8vw, 120px); }
.pclose__v { margin: 0; font-size: var(--fs-statement); font-weight: 500; line-height: 1.45; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; }
.pclose__vt { margin: clamp(20px, 2vw, 28px) 0 0; font-size: var(--fs-lead); font-weight: 500; color: var(--on-night-2); }
.pclose .btns { margin-top: clamp(36px, 3.6vw, 48px); align-items: center; gap: 28px; }
.pclose__contact { font-size: var(--fs-body); }
@media (max-width: 899.98px) {
  .pch__in > * { grid-column: 1 / -1; }
  .pch { padding-block: 72px 0; }
  .pch--values { padding-bottom: 72px; }
  .psts { gap: 36px; }
  .pst p { font-size: 17px; line-height: 1.9; }
  .pch__name { font-size: clamp(48px, 14vw, 64px); }
  .pch__st { font-size: clamp(28px, 8.2vw, 36px); }
  .pch__slogan { font-size: clamp(36px, 10vw, 44px); }
  .prs--2 { grid-template-columns: minmax(0, 1fr); }
  .pclose__integ { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .pclose__it, .pclose__ip { grid-column: 1 / -1; }
}
@media (min-width: 1200px) { .pch--values .prs--2 { grid-column: 3 / span 8; } }   /* 章の索引と重ねない */
/* 企業情報トップのカード：経営理念のカードに誓いの一行 */
.xp__sub { display: block; margin-top: 10px; font-size: var(--fs-small); font-weight: 400; line-height: 1.7; color: rgba(255,255,255,.78); }
@media (max-width: 899.98px) { .xp__sub { font-size: 13px; } }

/* ===== P4 17 回目の講評（デザイン）の不具合と改善 ===== */
/* 360px：スマホのメニューの下のボタンを縦に（「お問い合わせ」が切れていた） */
@media (max-width: 374.98px) { .menu__cta { grid-template-columns: minmax(0, 1fr); } }
/* タブレットの縦（600〜899px）：ヒーローの停止ボタンをボタンの行にそろえる（文字の塊を上げたときに据え置きだった） */
@media (min-width: 600px) and (max-width: 899.98px) { .hvh__ctrl { bottom: calc(var(--cap-h) + 14vh + 4px); } }
/* 動きを止めたとき：ヒーローの停止ボタンは出さない（映像は止まっているのに「再生中」の形で残っていた） */
html.motion-off .hvh__ctrl { display: none; }
/* フッターの小見出し（構想／実行・供給）のコントラスト */
.footer__sub { color: rgba(198,207,230,.74); }
/* 冒頭の細部：スローガンの左端を H1 の左端にそろえる（Jost の S の余白）。走査の光は弱く。合図の線を曲線の頂点から離す */
.hvh__mark { margin-left: -.04em; }
@keyframes scan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .38; } 88% { opacity: .38; } 100% { opacity: 0; transform: translateY(64vh); } }
.hvh__scan { box-shadow: 0 0 18px 6px rgba(100,147,223,.16); }
@media (min-width: 900px) { .hvh__cue { bottom: calc(var(--cap-h) + 40px); } }
/* 1680px 以上：文字の大きさを器に合わせる（スローガンだけが大きく、見出しとリードが痩せないように） */
@media (min-width: 1680px) {
  :root { --fs-h1: clamp(28px, 3.06vw, 58px); --fs-lead: clamp(18px, 1.25vw, 21px); --fs-body: 17px; }
  .hvh__lead { font-size: 19px; max-width: 36em; }
  .hvh__mark { font-size: clamp(44px, 8.9vw, 148px); }
}
/* トップの事業の舞台：札をもう一回り大きく、方眼を弱く */
@media (min-width: 900px) { .biz3__mf { --mf-z: 1.22; } .biz3__stage-in::before { opacity: .6; } }
/* 下層ページの中間の暗転帯：曲線は冒頭とお問い合わせの 2 か所だけに（中間は直線の上下）。文字だけの帯は右にそのページの図 */
.sec--feat > .edge { display: none; }
.sec--feat { padding-block: var(--sp-l); }
[data-next="night"].sec--feat, [data-next="photo"].sec--feat { padding-bottom: var(--sp-l); }
@media (min-width: 900px) {
  .sec--feat-text { padding-block: clamp(80px, 8.3vw, 120px); }
  .sec--feat-text .feat__bg { display: block; position: absolute; z-index: 1; top: 50%; right: max(var(--gutter), calc((100% - var(--maxw)) / 2)); width: min(30%, 380px); aspect-ratio: 1; transform: translateY(-50%); opacity: 1; pointer-events: none; }
  .sec--feat-text .feat { position: relative; z-index: 2; }
  .sec--feat-text .st--feat .st__ja { grid-column: 1 / span 7 !important; }
  .sec--feat-text .st--feat .st__lead { grid-column: 1 / span 7 !important; }
  .sec--feat-text .st--feat:not(.st--en)::after { grid-column: 1 / span 7; }
}
/* 下層ページの冒頭の直後：次の見出しまでの空きを詰める（どのページも同じ長さの空白で始まらないように） */
@media (min-width: 900px) { .hero + .sec:not(.sec--flush-top):not(.sheet):not(.pch) { padding-top: clamp(56px, 6vw, 96px); } }
/* メガメニューの図：左の列の縦の中央に、少し大きく */
@media (min-width: 900px) { .mega__vis { align-self: center; } }
@media (min-width: 1200px) { .mega__vis { width: min(260px, 100%); margin-top: 16px; } }
/* 誓いの帯：前の白い節との間に罫を引かない（言葉だけの面） */
.sec.g-paper + .sec--vow > .container { border-top: 0; padding-top: 0; }
.sec.g-paper + .sec--vow { padding-top: clamp(120px, 13.9vw, 200px); }

/* P5 メガメニューの切り替え（17 回目の講評の不具合 6）：開いている間に別の区分へ移ったとき、前の面が「リンクだけ消えた空の面」で 1 コマ残らないように。
   前の面は扉を上げずにその場で 160ms で消え、次の面は扉を下ろさずに 200ms で現れる（重ねて溶かす）。開いている面はつねに前の面の上の層 */
.nav__grp > .mega { z-index: 1; }
.nav__grp.is-open > .mega { z-index: 2; }
html.mega-open .nav__grp:not(.is-open) > .mega { clip-path: inset(0 0 0 0); opacity: 0; transition: opacity 160ms var(--ease-ui), visibility 0s linear 160ms; }
@keyframes mega-switch-in { from { opacity: 0; } to { opacity: 1; } }
html.mega-switch .nav__grp.is-open > .mega { transition: none; animation: mega-switch-in 200ms var(--ease-ui) both; }
html.mega-switch .nav__grp.is-open .mega__link { transition-delay: 0s !important; transition-duration: 200ms; }
html.motion-off .nav__grp.is-open > .mega { animation: none !important; }

/* P6 フォームの脇（17 回目の講評 9）：固定の見出しの下に、送信後の流れ・電話・個人情報の取り扱いを置く（文は既存の記載だけ。900px 未満は出さない） */
.form-aside__more { display: grid; gap: 22px; margin-top: 8px; padding-top: 26px; border-top: 1px solid var(--line); }
.fam { display: grid; gap: 6px; }
.fam__k { margin: 0; font-size: var(--fs-caption); font-weight: 500; letter-spacing: .04em; color: var(--ink-500); }
.fam__p { margin: 0; font-size: var(--fs-small); line-height: 1.9; color: var(--ink-700); }
.fam__tel { margin: 0; justify-self: start; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: .01em; color: var(--ink-900); text-decoration: none; font-variant-numeric: tabular-nums; transition: color 200ms; }
.fam__tel:hover { color: var(--teal-700); }
@media (max-width: 899.98px) { .form-aside__more { display: none; } }
@media (min-width: 900px) and (max-height: 760px) { .form-aside__more { display: none; } }   /* 低い画面では固定の見出しが画面に収まらないため出さない */

/* ===== P7 18 回目の講評（デザイン 86 点・理念 64 点）の反映 ===== */
/* 冒頭のリード：1 文目（ミッションの一文）を主役の級数に。2 文目（会社の説明）は従来のまま */
.hvh__vow { display: block; margin-bottom: .35em; font-size: clamp(17px, 1.39vw, 20px); font-weight: 500; line-height: 1.8; color: #fff; }
@media (min-width: 1680px) { .hvh__vow { font-size: 22px; } }
/* 下層の冒頭のリード（人材・M&A）：1 文目の理念の行を主役の級数に */
.hero__vow { display: block; margin-bottom: .4em; font-size: clamp(19px, 1.67vw, 24px); font-weight: 500; line-height: 1.7; letter-spacing: .02em; color: #fff; }
/* 宣言と「攻め」「守り」の間のスローガンの 2 行：本文の主役の級数に。「と」は塗りの前は薄く、「守り」と同じ墨の塗りで満ちる */
.stmt2__b { font-size: clamp(18px, 1.39vw, 20px); font-weight: 500; line-height: 2; color: var(--ink-900); margin-top: clamp(32px, 3.3vw, 48px); }
.msg2__to { --fa: var(--ink-900); --fb: var(--ink-900); --fill: var(--pb); color: transparent; background: linear-gradient(90deg, var(--fa), var(--fb)) 0 0 / var(--fill) 100% no-repeat, linear-gradient(var(--ink-300), var(--ink-300)); -webkit-background-clip: text; background-clip: text; }
/* 『挑戦保障』の節：原文 6 行を連ごとに（連の中は続け、連と連の間を空ける）。最後の行（投資へ）は一段大きく。行頭の括弧の空きを詰める */
.mission__st + .mission__st { margin-top: clamp(22px, 2.2vw, 32px); }
.mission__line + .mission__line { margin-top: .3em; }
.mission__line, .pst p, .stmt2__b, .mission__sub { text-spacing-trim: trim-start; }
.mission__line--k { font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; color: #fff; }
.sec--mission .movie__play { left: 50%; top: 50%; }
@media (max-width: 599.98px) { .sec--mission .movie__play { left: auto; right: 14px; top: 14px; margin: 0; } }
/* 誓いの帯：罫を引かず、上下を広く取る（キットの .sec.g-paper + .sec.g-paper の規則より強く）。見出しと一文は 6〜12 列目（トップの 3 つの宣言のリズム：左 → 右 → 右） */
.sec.g-paper + .sec.g-paper.sec--vow { padding-block: clamp(160px, 16.7vw, 240px); }
.sec.g-paper + .sec.g-paper.sec--vow > .container { border-top: 0; padding-top: 0; }
.vow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.vow__in { grid-column: 6 / -1; }
.vow__p { margin-top: 20px; }
@media (max-width: 1199.98px) { .vow__in { grid-column: 3 / -1; } }
@media (max-width: 899.98px) { .vow__in { grid-column: 1 / -1; } .sec.g-paper + .sec.g-paper.sec--vow { padding-block: 96px; } }
/* 採用の帯：序列を反転（一文が見出し、「採用情報」は 13px の札）。写真の焦点は上へ（頭が切れない） */
.recruit__k { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--on-night-3); }
h2.recruit__p { margin: 16px 0 0; font-size: clamp(30px, 3.9vw, 56px); font-weight: 500; line-height: 1.4; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; max-width: 18em; }
@media (max-width: 899.98px) { h2.recruit__p { font-size: clamp(26px, 7.2vw, 32px); } }
/* 主要取引先：3 列の格子（縦の罫で区切る。行末に「・」が残らない） */
@media (min-width: 900px) {
  .trust__clients { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 0; }
  .trust__client { white-space: nowrap; padding-inline: 28px; border-left: 1px solid var(--line); }
  .trust__client:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .trust__client::after { display: none; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .trust__clients { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 0; border: 0; padding: 4px 0; }
  .trust__client { min-height: 0; padding: 0 24px; border: 0; background: none; font-size: var(--fs-body); line-height: 1.9; color: var(--ink-900); white-space: nowrap; border-left: 1px solid var(--line); }
  .trust__client::before { display: none; }
  .trust__client:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
/* M&A の帯：左に札・ビジョンの一文・2 段落・ボタン（1〜6 列）、右に図（8〜12 列、縦の中央）。左右の重心をそろえる */
.manda__grid--v { align-items: center; }
.manda__text { grid-column: 1 / span 6; display: grid; gap: 24px; justify-items: start; }
.manda__k { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--on-night-3); }
.manda__text .manda__h { margin: 0; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.5; }
.manda__ps { display: grid; gap: 20px; }
.manda__ps p { margin: 0; font-size: var(--fs-body); line-height: 2.1; color: var(--on-night-2); }
.manda__text .btns { margin-top: 8px; }
.manda__fig--side { grid-column: 8 / -1; width: 100%; max-width: 480px; justify-self: end; margin: 0; }
.manda__text .rv { transition-delay: calc(280ms + var(--i, 0) * 100ms); }
@media (max-width: 899.98px) { .manda__fig--side { max-width: 360px; justify-self: start; margin-top: 8px; } }
/* 経営理念のページ：冒頭の夜を 1 画面に。章の間を広く（キットの規則より強く）。Integrity は 8 つの原則の章末。結びの誓いは冒頭と同じ大きさ */
@media (min-width: 900px) { .hero--pvow { min-height: 100svh; } .hero--pvow .pvow__h { font-size: clamp(40px, 6.6vw, 96px); } }   /* 曲線は冒頭の箱の中の下端（最初の画面は夜と誓いだけ） */
.sec.g-paper.pch + .sec.g-paper.pch { padding-top: clamp(120px, 13.9vw, 200px); }
.pch--values { padding-top: 0; }
.pch__ma--2 { margin-top: clamp(120px, 13.9vw, 200px); margin-bottom: clamp(80px, 8.3vw, 120px); }
.pst p.pst__k { font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; }
.pst p + p.pst__k, .pst p.pst__k + p { margin-top: .5em; }
.pch__vh { font-size: var(--fs-h2); line-height: 1.55; }
.pinteg { margin-top: clamp(72px, 8vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line); }
.pinteg__t { grid-column: 1 / span 7; margin: 0; font-size: clamp(24px, 2.8vw, 40px); font-weight: 500; line-height: 1.45; letter-spacing: .02em; color: var(--ink-900); font-feature-settings: "palt" 1; }
.pinteg__t [lang="en"] { font-family: var(--font-display); font-weight: 400; font-size: 1.08em; letter-spacing: -.01em; }
.pinteg__t .seg { display: inline-block; }
.pinteg__p { grid-column: 9 / -1; margin: .4em 0 0; font-size: var(--fs-body); line-height: 2; color: var(--ink-700); }
@media (min-width: 1200px) { .pch--values .pinteg { grid-column: 3 / span 8; } .pch--values .pinteg__t { grid-column: 1 / span 5; } .pch--values .pinteg__p { grid-column: 6 / -1; } }
.pclose { padding-block: clamp(120px, 13.9vw, 200px); }
.pclose__vow { padding-top: 0; }
h2.pclose__v { font-size: clamp(36px, 6.1vw, 88px); line-height: 1.3; }
.pclose__vt { margin-top: clamp(24px, 2.4vw, 36px); font-size: clamp(20px, 1.94vw, 28px); color: #fff; }
@media (max-width: 899.98px) {
  .sec.g-paper.pch + .sec.g-paper.pch { padding-top: 96px; }
  .pch__ma--2 { margin-top: 96px; margin-bottom: 56px; }
  .pst p.pst__k { font-size: 20px; }
  .pinteg { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .pinteg__t, .pinteg__p { grid-column: 1 / -1; }
  h2.pclose__v { font-size: clamp(32px, 9.2vw, 44px); }
  .pclose__vt { font-size: 20px; }
}
/* 章の索引：実高さを持たせて結びの夜にはみ出さない。最初の章が画面の中央に近づくまでは出さない */
@media (min-width: 1200px) {
  .pnav { height: 146px; margin-bottom: -146px; opacity: 0; transition: opacity 320ms var(--ease-ui); }
  .pnav.is-shown { opacity: 1; }
  html.motion-off .pnav { opacity: 1; }
}
/* 経営理念のページの結び（夜）の直後：フッターの白い膨らみを描かない（夜から夜へ続ける） */
main:has(> .pclose) + .footer--night::before { display: none; }
main:has(> .pclose) + .footer--night .footer__grid { padding-top: clamp(72px, 7vw, 112px); }
main:not(:has(> .close)):has(> .g-mist + .mf-defs:last-child) + .footer--night::before, main:not(:has(> .close)):has(> .g-mist:last-child) + .footer--night::before { background: #f2f5fa; }
/* 事業紹介の声明（ミッションの原文）：スマホでは「守るためのコストから、」を 1 行に */
@media (max-width: 599.98px) { .stmt__st { font-size: clamp(26px, 7.6vw, 30px); } }
.hvh__lead:has(.hvh__vow) { max-width: 44em; }   /* 1 文目（20px）を 1 行に */

/* ===== P8 2026-10-21 23 時のご依頼：Secure Pro のロゴ、実績紹介の 4 領域、写真の差し替え、4 つの循環、会社概要の冒頭 ===== */
/* Secure Pro のロゴ（白背景の版）：事業の名前の位置に置く。高さは名前の文字に合わせる */
.splogo { display: block; width: auto; max-width: 100%; height: auto; }
.biz3__name--logo { display: block; }
.biz3__name--logo .splogo { height: clamp(56px, 5.3vw, 76px); }
.bzs__logo { display: inline-block; vertical-align: middle; }
.bzs__logo .splogo { height: clamp(52px, 4.6vw, 66px); }
.duo2__logo { display: inline-block; vertical-align: middle; padding: 10px 14px; border-radius: 12px; background: #fff; }   /* 薄い灰の地では白いタイルに載せる */
.duo2__logo .splogo { height: clamp(44px, 3.9vw, 56px); }
@media (max-width: 599.98px) { .biz3__name--logo .splogo { height: 52px; } .bzs__logo { display: block; margin-top: 10px; } .bzs__logo .splogo { height: 50px; } .duo2__logo { display: block; width: max-content; margin-top: 10px; } }
/* 実績紹介：注力領域の 4 枚（押せる。領域・題・時点つきの補足・リンク） */
.cases--focus .case { padding: 0; }
.cases--focus .case__a { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; height: 100%; padding: clamp(28px, 2.8vw, 40px); color: inherit; text-decoration: none; transition: transform 320ms var(--ease-out); }
.cases--focus .case__a .case__vis { margin: calc(-1 * clamp(28px, 2.8vw, 40px)) calc(-1 * clamp(28px, 2.8vw, 40px)) 4px; }
.cases--focus .case__sub { margin: 0; font-size: var(--fs-small); line-height: 1.85; color: var(--ink-500); }
.cases--focus .case__more { margin-top: 6px; display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-900); }
.cases--focus .case__more .case__go { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-900); transition: transform 240ms var(--ease-ui), background-color 240ms, color 240ms; }
.cases--focus .case__more .case__go svg { width: 13px; height: 13px; }
html:not(.is-scrolling) .cases--focus .case:hover .case__go { background: var(--ink-900); color: #fff; transform: translateX(3px); }
html:not(.is-scrolling) .cases--focus .case:hover .case__a { transform: translateY(-3px); }
.cases--focus .case:active .case__a { transform: translateY(0) scale(.995); }
@media (min-width: 1200px) { .cases--focus .case .case__what { font-size: clamp(18px, 1.39vw, 20px); line-height: 1.6; } }
@media (max-width: 599.98px) {
  .cases--focus .case__a { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 16px; row-gap: 4px; padding: 14px 16px 14px 14px; }
  .cases--focus .case__a .case__vis { grid-row: 1 / span 4; margin: 0; aspect-ratio: 1; border-radius: 12px; }
  .cases--focus .case__sub { margin-top: 6px; font-size: 13px; }
  .cases--focus .case__more { margin-top: 8px; font-size: 13px; }
}
@media (min-width: 600px) and (max-width: 1199.98px) { .cases--focus .case:nth-child(even) { translate: 0 0; } }
/* 本社所在地（写真なし）：住所を大きく */
.access--text { grid-template-columns: minmax(0, 1fr); }
.access--text .access__body { grid-column: 1 / -1; }
.access--text .access__addr { font-size: clamp(18px, 1.67vw, 24px); line-height: 1.8; }
.cases--focus .case { grid-row: auto; grid-template-rows: minmax(0, 1fr); row-gap: 0; min-height: 0; }
.cases--focus .case { grid-template-columns: minmax(0, 1fr); column-gap: 0; }   /* 600px 未満の 2 列の組み（.cases--vis .case）を外す（中の a が 2 列に組む） */
.cases--focus .case__go { opacity: 1; transform: none; }
html:not(.is-scrolling) .cases--focus .case:hover .case__go { opacity: 1; }
/* Secure Pro の各サイトへのリンク（ロゴと文字。別のタブ） */
.splogo__a { display: inline-block; border-radius: 8px; transition: opacity 200ms; }
html:not(.is-scrolling) .splogo__a:hover { opacity: .8; }
.splogo__a:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 4px; }
.textlink--ext { display: inline-flex; align-items: center; gap: 6px; }
.textlink__ext { display: inline-grid; place-items: center; width: 14px; height: 14px; }
.textlink__ext svg { width: 12px; height: 12px; }
.biz3__links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.duo2__site { margin: 20px 0 0; font-size: var(--fs-small); }

/* ===== P10 21 回目の講評（理念の伝わり方 75 点）の反映 ===== */
/* トップのビジョンと M&A の帯：ビジョンの見出し（採用の帯と同格）→ 締めの行 → M&A */
.manda__text .manda__h--vision { font-size: clamp(30px, 3.9vw, 56px); line-height: 1.35; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.manda__vline { margin: 0; font-size: clamp(17px, 1.39vw, 20px); font-weight: 500; line-height: 1.8; color: #fff; }
.manda__k--2 { margin-top: clamp(16px, 2vw, 28px); }
/* 「攻め」と「守り」の帯：原文の行を鍵行の級数に（スローガンの 2 行と「両輪です」を 28px/500 の墨）。飾りの語は少しだけ抑える */
.stmt2__b { font-size: clamp(20px, 1.94vw, 28px); line-height: 1.7; }
.msg2 .msg2__p { font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.7; color: var(--ink-900); max-width: 24em; }
.msg2 .msg2__h { font-size: clamp(48px, 6vw, 88px); }
/* 『挑戦保障』の節：名前を定義する行は白（灰の行と区別する） */
.mission__line--n { color: #fff; font-weight: 500; }
.sec--mission .movie__t { font-size: clamp(18px, 2.1vw, 30px); }   /* ムービーの言葉は節の鍵行（28px）を上回らない */
/* 事業紹介の冒頭：本文の 2 段落目はスローガンの原文 2 行（主役の級数） */
.stmt__body .stmt__vow { font-size: clamp(17px, 1.39vw, 20px); font-weight: 500; line-height: 2; color: var(--ink-900); }
/* 企業情報トップ：カードの副文（誓い）を 16px に */
.xp__sub { font-size: var(--fs-body); }
/* 経営理念の結び：誓いを冒頭（96px）より大きく */
@media (min-width: 900px) { h2.pclose__v { font-size: clamp(40px, 7.2vw, 104px); line-height: 1.25; } }

/* ===== P11 21 回目の講評（デザイン 88 点）の反映 ===== */
/* 図の中の文字（循環の図の役割の名前と中心の語。ページに直接埋めた図では本文の書体） */
.mf-tx { font-family: var(--font-sans); font-size: calc(12.5px * var(--mf-u, 1.15)); font-weight: 500; letter-spacing: .06em; fill: rgba(255,255,255,.76); }
.mf-tx--in { font-size: calc(14px * var(--mf-u, 1.15)); letter-spacing: .1em; fill: #fff; }
.mf-tx--ink { fill: #0b1124; }
.mf-tx--k { fill: #83fbf1; }
.mf--light .mf-tx { fill: rgba(11,17,36,.7); } .mf--light .mf-tx--in { fill: #0b1124; } .mf--light .mf-tx--k { fill: #2b5bd7; }
/* 章の索引：流れの中に実高さを持たせ（負の余白をやめる）、最初の章の上の余白から同じ分を引く */
@media (min-width: 1200px) { .pnav { margin-bottom: 0; } .pbody > .pch--mission { padding-top: max(0px, calc(clamp(96px, 11.1vw, 160px) - 146px)); } }
/* 行頭の括弧の字下げ：本文の段落と小さな文にも */
.case__sub, .pr__ja, .nrow__t, .nrow__b, .prose p, .manda__ps p, .duo2__lead, .bzs__lead, .biz3__lead, .mission__line, .pst p, .stmt__body p, .vow__p, .pclose__vt { text-spacing-trim: trim-start; }
/* 経営理念：冒頭と結びの誓いを同じ大きさに（どちらも 1440px で約 99px）。冒頭の紺に奥行き（光を少し） */
@media (min-width: 900px) { .hero--pvow .pvow__h { font-size: clamp(40px, 6.9vw, 100px); line-height: 1.25; } h2.pclose__v { font-size: clamp(40px, 6.9vw, 100px); line-height: 1.25; } }
.hero--pvow .night__glow { display: block; opacity: .55; }
/* Integrity：見出しを全幅の 1〜2 行に（3 行に折れていた）、本文はその下 */
.pinteg--stack { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
.pinteg--stack .pinteg__t { grid-column: 1 / -1; font-size: clamp(22px, 2.5vw, 34px); max-width: 24em; }
.pinteg--stack .pinteg__p { grid-column: 1 / -1; margin: 0; max-width: 36em; }
@media (min-width: 1200px) { .pch--values .pinteg--stack .pinteg__t, .pch--values .pinteg--stack .pinteg__p { grid-column: 1 / -1; } }
/* 誓いの帯の一文：鍵行の級数に */
.vow__p { font-size: clamp(17px, 1.39vw, 20px); font-weight: 500; color: var(--ink-900); }
/* 採用の帯：900px 未満は顔を左に寄せて切らない。600〜899px の影は写真の範囲だけに（下端の段差を消す） */
@media (max-width: 899.98px) { .recruit__ph img { object-position: 24% 22%; } }
@media (min-width: 600px) and (max-width: 899.98px) { .recruit__shade { inset: 0 0 auto; height: auto; aspect-ratio: 4 / 3; background: linear-gradient(0deg, #050914 0, rgba(5,9,20,.7) 24%, rgba(5,9,20,0) 56%); } }
/* スマホのコンセプトムービー（『挑戦保障』の節）：再生ボタンは中央に */
@media (max-width: 599.98px) { .sec--mission .movie__play { --s: 64px; left: 50%; top: 50%; right: auto; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); } }
/* 主要取引先：3 列を同じ幅に（縦の罫が列の線に載る） */
@media (min-width: 900px) { .trust__clients { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 75%; } }
/* タブレットの M&A の図：中央に */
@media (min-width: 600px) and (max-width: 899.98px) { .manda__fig--side { justify-self: center; } }
/* 『挑戦保障』の節（タブレット）：「経営理念を読む」とムービーの間 */
@media (min-width: 600px) and (max-width: 899.98px) { .sec--mission .movie-stage { margin-top: 64px; } }

/* ===== P12 22 回目の講評（理念の伝わり方 80 点）の反映 ===== */
/* トップの大きさの序列：原文を上に。誓いの帯 88px、添え行 28px。「攻め」と「守り」・構想／実行／供給は 72px まで */
.vow__h { font-size: clamp(36px, 6.1vw, 88px); line-height: 1.3; }
.vow__p { font-size: clamp(20px, 1.94vw, 28px); line-height: 1.6; }
.msg2 .msg2__h { font-size: clamp(44px, 5vw, 72px); }
.biz3__role { font-size: clamp(48px, 5vw, 72px); }
@media (max-width: 599.98px) { .biz3__role { font-size: clamp(36px, 10vw, 44px); } .msg2 .msg2__h { font-size: clamp(36px, 9.5vw, 44px); } .vow__h { font-size: clamp(32px, 9.5vw, 40px); } }
/* ビジョンの帯（夜。見出しと締めの行だけ。右寄せで誓いの帯と同じ段） */
.sec--vision { padding-block: clamp(96px, 11.1vw, 160px) clamp(72px, 8.3vw, 120px); background: var(--night-0); }
html:not(.mo) .sec--vision[data-ground="dark"] { background: var(--night-0); }
.vision { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.vision__in { grid-column: 6 / -1; }
.vision__k { margin: 0 0 clamp(16px, 1.6vw, 24px); font-size: 13px; font-weight: 500; letter-spacing: .12em; color: var(--on-night-3); }
.vision__h { margin: 0; font-size: clamp(32px, 4.45vw, 64px); font-weight: 500; line-height: 1.35; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; }
.vision__p { margin: clamp(20px, 2vw, 28px) 0 0; font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; color: #fff; }
.sec--vision + .sec--manda .manda__grid { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(48px, 5vw, 80px); }
.recruit + .sec--vision { position: relative; }
.recruit + .sec--vision::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: rgba(255,255,255,.14); }
@media (max-width: 1199.98px) { .vision__in { grid-column: 3 / -1; } }
@media (max-width: 899.98px) { .vision__in { grid-column: 1 / -1; } .sec--vision { padding-block: 72px 56px; } .vision__h { font-size: clamp(28px, 8.2vw, 36px); } .vision__p { font-size: 20px; } }
/* M&A の帯：見出しは現在のサイトのもの（H2 の大きさ） */
.manda__text .manda__h { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.55; }
/* コンセプトムービーの題：鍵行（28px）より小さく、上に「コンセプトムービー」の札 */
.movie__k { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.72); }
.movie__t, .sec--mission .movie__t, .sec--movie .movie__t { font-size: clamp(18px, 1.67vw, 24px); line-height: 1.6; letter-spacing: .06em; }
.movie-stage.is-expand .movie__t { font-size: calc(clamp(18px, 1.67vw, 24px) * (1 + .22 * var(--k))); }
/* 前口上の 2 行（サービス紹介の冒頭、事業紹介の見出しの前）：主役の級数（28px/500）。説明はその下 */
.st__vow { font-size: clamp(20px, 1.94vw, 28px); line-height: 1.6; margin-bottom: .9em; }
.st__lead:has(.st__vow) { max-width: 48em; }
/* 事業紹介の冒頭：声明の直下のスローガンの 2 行を 28px/500 に */
.stmt__body .stmt__vow { font-size: clamp(20px, 1.94vw, 28px); line-height: 1.6; margin-bottom: 1em; }
/* M&A のページ「成長戦略」：冒頭にスローガンの原文（両輪） */
.duo__vow { margin: 0 0 1em; font-size: clamp(18px, 1.67vw, 24px); font-weight: 500; line-height: 1.6; color: var(--ink-900); }
/* 経営理念：章ごとの山（候補者が持ち帰る一行、CISO が持ち帰る一行） */
.pst p.pst__k.pst__p48 { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.4; }
.pst p.pst__k.pst__p40 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.45; }
@media (max-width: 899.98px) { .pst p.pst__k.pst__p48, .pst p.pst__k.pst__p40 { font-size: 28px; } }

/* ===== P13 22 回目の講評（デザイン 89 点）の反映 ===== */
/* 経営理念の夜：冒頭に 2 つの光（平らな範囲で奥行き）、誓いは下 1/3。結びも同じ夜（光は上下左右を反転）にし、フッターへは下端で溶かす */
.hero--pvow { justify-content: flex-end; }
.hero--pvow .hero__grid { padding-bottom: calc(var(--cap-h) + clamp(96px, 14vh, 160px)); }
.hero--pvow .night__glow { display: block; position: absolute; left: 52%; top: -18%; width: 72vw; height: 72vw; border-radius: 50%; opacity: 1; background: radial-gradient(closest-side, rgba(131,251,241,.22), rgba(43,91,215,.10) 55%, transparent); filter: blur(48px); pointer-events: none; }
.hero--pvow .night__glow--b { left: -18%; top: 48%; width: 46vw; height: 46vw; background: radial-gradient(closest-side, rgba(143,132,255,.16), transparent); }
.pclose { position: relative; overflow: clip; background: linear-gradient(180deg, var(--night-1) 0, var(--night-1) 72%, var(--night-0) 100%); }
html:not(.mo) .pclose[data-ground="dark"] { background: linear-gradient(180deg, var(--night-1) 0, var(--night-1) 72%, var(--night-0) 100%); }
.pclose .night__glow { display: block; position: absolute; right: 52%; bottom: -18%; width: 72vw; height: 72vw; border-radius: 50%; background: radial-gradient(closest-side, rgba(131,251,241,.18), rgba(43,91,215,.08) 55%, transparent); filter: blur(48px); pointer-events: none; }
.pclose .night__glow--b { right: -18%; bottom: 48%; width: 46vw; height: 46vw; background: radial-gradient(closest-side, rgba(143,132,255,.14), transparent); }
.pclose .night { background: transparent; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }   /* 光は下端の手前で消し、フッターの夜 0 へ継ぎ目なく */   /* 地は節のグラデーション（夜 1 → 夜 0）に任せ、光だけ置く */
.pclose > .container { position: relative; z-index: 1; }
/* トップの『挑戦保障』の節：連の間を本文の行送りより広く */
.mission__st + .mission__st { margin-top: clamp(32px, 3.3vw, 48px); }
.mission__st:has(.mission__line--k) { margin-top: clamp(40px, 4vw, 56px); }
/* 「は、」の後で折る行（900px 以上だけ） */
.br-d { display: none; } @media (min-width: 900px) { .br-d { display: inline; } }
/* 横長のノート PC（高さ 820px 以下）：冒頭の階層を詰める */
@media (min-width: 900px) and (max-height: 820px) { .hvh__mark { font-size: clamp(56px, 6.6vw, 88px); } .hvh__lead { margin-top: 14px; } .hvh__vow { margin-bottom: .2em; } .hvh__btns { margin-top: 22px; } }
/* 採用の帯：写真を 6 割まで見せ、文字の塊を写真の裾に重ねる */
@media (min-width: 900px) {
  .recruit__shade { background: linear-gradient(180deg, rgba(5,9,20,0) 30%, rgba(5,9,20,.6) 60%, #050914 100%); }
  .recruit__in { margin-top: -264px; min-height: 304px; box-sizing: border-box; padding-bottom: 96px; justify-content: flex-end; }   /* 写真の下端まで帯を伸ばし、ボタンは写真の裾より 56px 上 */
}
/* 実績紹介（1200px 以上）：2 列 2 段、図を左・文を右（短い行に割れない） */
@media (min-width: 1200px) {
  .cases--focus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--col-gap); padding-bottom: 0; }
  .cases--focus > .case:nth-child(even) { translate: 0 0; }
  .cases--focus .case__a { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-items: center; column-gap: 28px; row-gap: 8px; padding: 24px 28px 24px 24px; }
  .cases--focus .case__a .case__vis { grid-row: 1 / span 4; margin: 0; width: 100%; aspect-ratio: 1; border-radius: 14px; align-self: center; }
  .cases--focus .case .case__what { font-size: clamp(19px, 1.53vw, 22px); line-height: 1.55; max-width: none; }
  .cases--focus .case__sub { font-size: var(--fs-body); line-height: 1.8; max-width: 26em; }
  .cases--focus .case__more { margin-top: 4px; }
}
/* メガメニューの循環の図：語が読める大きさに */
@media (min-width: 1200px) { .mega__vis { width: min(320px, 100%); } }
/* 経営陣の冒頭：ヘッダーの下に薄い影（写真の上のナビとボタンが読める） */
.hero--exec .hero__ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,20,51,.78), rgba(10,20,51,0) 44%); pointer-events: none; }
/* スマホのニュースの絞り込み：右端を溶かす（切れて見えない） */
@media (max-width: 899.98px) { .filter { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); } .filter.is-end { -webkit-mask-image: none; mask-image: none; } }

/* ===== P14 23 回目の講評（理念の伝わり方 84 点）の反映：大きさの序列を原文が頂点になるように ===== */
/* 第二画面：原文の第一行（64px）を帯の頂点に。「攻め」と「守り」（お客様の語）は 56px、両輪の行は 40px */
.msg2 .msg2__h { font-size: clamp(36px, 3.9vw, 56px); }
.msg2 .msg2__p { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.5; max-width: 26em; }
/* 冒頭のミッションの一文：企業情報・人材の冒頭の副行と同じ 24px */
.hvh__vow { font-size: clamp(19px, 1.67vw, 24px); line-height: 1.7; }
@media (min-width: 1680px) { .hvh__vow { font-size: 24px; } }
/* 『挑戦保障』の節：定義の行 36px、入口は主ボタン（白） */
.mission__sub { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.5; }
.mission__more.btns { margin-top: clamp(32px, 3.3vw, 48px); }
/* ビジョンの帯：見出し 80px（構想／実行／供給 72px より上、誓い 88px より下）。誓いの白の直後に置く */
.vision__h { font-size: clamp(36px, 5.6vw, 80px); line-height: 1.3; }
.sec--vow + .sec--vision { position: relative; }
.sec--vision + .recruit::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: rgba(255,255,255,.14); z-index: 3; }
.recruit + .sec--manda .manda__grid { border-top: 0; }
.recruit + .sec--manda { position: relative; }
.recruit + .sec--manda::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: rgba(255,255,255,.14); }
/* スマホの序列：『挑戦保障』 ＞ 誓い 44 ＞ ビジョン 40 ＞ 「攻め」「守り」 36 ＞ 構想／実行／供給 32 */
@media (max-width: 599.98px) {
  .vow__h { font-size: clamp(36px, 10.5vw, 44px); }
  .vision__h { font-size: clamp(32px, 9.5vw, 40px); }
  .msg2 .msg2__h { font-size: clamp(32px, 8.8vw, 36px); }
  .msg2 .msg2__p { font-size: 24px; }
  .biz3__role { font-size: clamp(30px, 8.2vw, 32px); }
  .mission__sub { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 899.98px) { .vision__h { font-size: clamp(36px, 6.4vw, 48px); } }
/* 経営理念のページ：定義の行 40px、章の結びは 28px（pst__k） */
.pch__sub { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.45; }
/* M&A のページ：成長戦略の鍵行は 28px、旧い段落は 1 段落ぶん下げる */
.duo__vow { font-size: clamp(20px, 1.94vw, 28px); margin-bottom: 2.2em; }
/* 事業紹介：3 つの事業のリードの後の、会社の説明の段落 */
.st__old { display: block; margin-top: 1.2em; }

/* ===== P15 23 回目の講評（デザイン 90 点）の反映 ===== */
/* 「は、」「を、」「とは、」の後の折りは 600px 以上で効かせる */
@media (min-width: 600px) { .br-d { display: inline; } }
/* 900px 以上だけ折らない（誓いの帯の 2 行目） */
.nw-d { white-space: normal; } @media (min-width: 900px) { .nw-d { white-space: nowrap; } }
/* 誓いの帯：4〜12 列、2 行の一つの形「挑戦の隣に、／いつも、私たちがいる。」（経営理念の冒頭・結びと同じ） */
@media (min-width: 900px) { .vow__in { grid-column: 4 / -1; } .vow__h { font-size: clamp(40px, 5.6vw, 88px); } }
/* 鍵行の折り（600px 未満）：両輪の行は 22px で 3 行に */
@media (max-width: 599.98px) { .msg2 .msg2__p { font-size: 22px; } }
/* 前口上の鍵行の字間 */
.pst p.pst__k.pst__p48 { letter-spacing: 0; }
/* 8 つの原則：英名は 1 行に、最終行の半罫を消して Integrity の全幅罫と二重にしない */
.prs--2 .pr__en { font-size: clamp(24px, 2vw, 30px); }
.prs--2 .pr:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 899.98px) { .prs--2 .pr:nth-last-child(2) { border-bottom: 1px solid var(--line); } }
.pch--values .pinteg--stack { margin-top: clamp(56px, 5vw, 72px); }
/* 採用の帯：影の始まりを下げ、写真の上半分を少し持ち上げる */
@media (min-width: 900px) {
  .recruit__shade { background: linear-gradient(180deg, rgba(5,9,20,0) 38%, rgba(5,9,20,.6) 62%, #050914 100%); }
  .recruit__ph img { filter: brightness(1.04); }
}
/* 経営理念：冒頭の誓いは画面の下 1/3、結びは誓いを少し下げる */
.hero--pvow .hero__grid { padding-bottom: calc(var(--cap-h) + clamp(40px, 6vh, 64px)); }
@media (min-width: 900px) { .pclose { padding-top: clamp(160px, 16.7vw, 240px); padding-bottom: clamp(96px, 11.1vw, 160px); } }
/* 章の索引：いまの章の印を長く、字を 14px に */
@media (min-width: 1200px) { .pnav a { font-size: 14px; } .pnav a.is-cur::before { transform: scaleX(2); } }
/* 『挑戦保障』の節：入口のボタンは左の列の定義の行の下 */
.mission__head .mission__more { margin-top: clamp(32px, 3.3vw, 48px); }
/* トップの 実行・供給 の章：サービス紹介にある 3 つの小見出しの再掲 */
.biz3__pts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; max-width: 40em; }
.biz3__pts li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--ink-700); }
.biz3__pts li::before { content: ""; position: absolute; left: 0; top: .85em; width: 8px; height: 1px; background: var(--ink-400); }
/* M&A のメリットの帯：循環の図は 400px まで */
@media (min-width: 900px) { .sec--feat-text .feat__bg { width: min(32%, 400px); } }

/* ===== P16 24 回目の講評（理念の伝わり方 88 点）の反映 ===== */
/* 冒頭のミッションの一文：H1（48px）に一段近づける */
.hvh__vow { font-size: clamp(22px, 1.95vw, 28px); line-height: 1.6; }
@media (min-width: 1680px) { .hvh__vow { font-size: 28px; } }
.hvh__lead:has(.hvh__vow) { max-width: 40em; }
@media (min-width: 900px) and (max-height: 820px) { .hvh__vow { font-size: clamp(20px, 1.75vw, 24px); } }
/* 『挑戦保障』の節：第二連の 2 行は白 */
.mission__line.mission__line--n { color: #fff; font-weight: 500; }
/* 事業紹介：3 つの事業の行の後の、会社の説明の段落 */
.b3s__old { margin: 20px 0 0; max-width: 40em; font-size: var(--fs-small); line-height: 1.8; color: var(--ink-500); }
/* セキュリティコンサルティング：見出しの原文に続く鍵行 */
.about__b .about__key { margin: 0 0 1.2em; font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; color: var(--ink-900); }
/* 経営理念（スマホ）：冒頭と結びの誓いを 40px に（スローガンの英字 39px より上） */
@media (max-width: 599.98px) { .hero--pvow .pvow__h { font-size: clamp(36px, 10.3vw, 44px); } h2.pclose__v { font-size: clamp(36px, 10.3vw, 44px); } }

/* ===== P17 24 回目の講評（デザイン 91 点）の反映 ===== */
/* 鍵の行の折り（「は、」「を、」「とは、」）は全幅で効かせる。「ために、」「コストから、」は 600px 未満だけ */
.br-d { display: inline; }
.br-m { display: none; } @media (max-width: 599.98px) { .br-m { display: inline; } }
/* スマホの大きさを指定の値に（390px で下限が効く） */
@media (max-width: 599.98px) {
  .vow__h { font-size: clamp(44px, 11.3vw, 48px); }
  .vision__h { font-size: clamp(34px, 10vw, 40px); }   /* 360px では 36px（「AI×セキュリティで、」が 1 行に入る） */
  .msg2 .msg2__h { font-size: clamp(36px, 9.3vw, 40px); }
}
/* 経営理念の冒頭（900px 未満）：短い帯にせず、画面の 7 割の高さに。誓いは 44px */
@media (max-width: 899.98px) {
  .hero--pvow { min-height: clamp(560px, 72svh, 760px); }
  .hero--pvow .hero__grid { padding-bottom: calc(var(--cap-h) + clamp(72px, 10vh, 120px)); }
  .hero--pvow .pvow__h { font-size: clamp(44px, 11vw, 52px); }
}
@media (min-width: 600px) and (max-width: 899.98px) { .hero--pvow { min-height: 100svh; } .hero--pvow .pvow__h { font-size: clamp(48px, 7.2vw, 64px); } h2.pclose__v { font-size: clamp(48px, 7.2vw, 64px); } }
/* トップの白い紙（スローガンの面）：上下の余白をそろえ、夜へ落ちる前に息を置く */
.sheet#message { padding-top: calc(var(--cap-h) + clamp(120px, 14vh, 160px)); padding-bottom: clamp(120px, 14vh, 160px); }
.sec--mission { padding-top: clamp(120px, 14vh, 160px); }
@media (max-width: 899.98px) { .sheet#message { padding-top: calc(var(--cap-h) + 72px); padding-bottom: 72px; } .sec--mission { padding-top: 72px; } }
/* 誓い（静）とビジョン（広がり）の呼吸：ビジョンは 76px（構想／実行／供給 72px より上、誓い 80px より下）、余白を変える */
@media (min-width: 900px) { .vision__h { font-size: clamp(36px, 5.3vw, 76px); } .sec--vision { padding-block: clamp(120px, 13.9vw, 200px) clamp(96px, 11.1vw, 160px); } }
/* 『挑戦保障』の節：右の列の 1 行目が枠いっぱいにならないように */
.mission__line { letter-spacing: 0; }
/* 採用の帯（1200px 以上）：4 人の頭上の空きを詰める */
@media (min-width: 1200px) { .recruit__ph img { object-position: 50% 30%; } }
/* 経営理念の写真の帯：同じ写真を同じ切り抜きで出さない（前口上の後は 2 人の顔に寄せ、原則の前はロゴの壁に寄せる） */
@media (min-width: 900px) {
  .pch--pro .pch__ma { --ar: 2.6 / 1; --focus: 34% 38%; }
  .pch__ma--2 { --ar: 2.9 / 1; --focus: 72% 50%; }
}
/* 薄い灰の地の上の Secure Pro のロゴ：白いタイルを「部品」に（細い罫と角丸）。白地では素のまま */
.duo2__logo, .g-mist .bzs__logo { display: inline-block; vertical-align: middle; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(11,17,36,.08); }
.g-mist .bzs__logo .splogo { height: clamp(48px, 4.2vw, 60px); }
/* 事業紹介 実行・供給：外部サイトのボタン 1 つと、当サイト内の 3 つの文字のリンク */
.bzs__btns .bzs__tl { align-self: center; font-size: var(--fs-body); }
.bzs__btns { column-gap: 28px; }
/* 循環の図：ページに直接埋める版の語（冒頭の図は約 580px で描かれるため 18px 前後） */
.mf-tx--lg { font-size: calc(13.5px * var(--mf-u, 1.15)); } .mf-tx--in.mf-tx--lg { font-size: calc(15px * var(--mf-u, 1.15)); }
.mf-tx--lg:not(.mf-tx--in):not(.mf-tx--k) { fill: rgba(255,255,255,.8); }
.mf--light .mf-tx--lg:not(.mf-tx--in):not(.mf-tx--k) { fill: rgba(11,17,36,.74); }
/* M&A のメリットの帯：図は 400px（列の幅で縮まない） */
@media (min-width: 1200px) { .sec--feat-text .feat__bg { width: clamp(360px, 30%, 400px); } }
/* 章の索引：章の見出し語（13px）の行から 26px 外す */
@media (min-width: 1200px) { .pnav { top: calc(50vh - 34px); } }

/* ===== P18 25 回目の講評（理念の伝わり方 90 点）の反映 ===== */
/* 経営理念：本文と同じ大きさで太さだけ変える行 */
.pst p.pst__b { font-weight: 500; color: var(--ink-900); }
/* スマホ：鍵の行 22px（本文 20px と段を分ける）、結びの誓いも 44px */
@media (max-width: 599.98px) { .pst p.pst__k { font-size: 22px; } h2.pclose__v { font-size: clamp(44px, 11vw, 52px); } .recruit__p { font-size: clamp(36px, 9vw, 56px); } }
/* お問い合わせ トップ：前口上の 2 行は 20px */
.hero__vow--s { font-size: clamp(17px, 1.39vw, 20px); line-height: 1.8; }
/* 人材：2 つの事業は白い地（冒頭の直後）、定義の節は薄い灰 */
.duo2__logo { background: #fff; border: 1px solid rgba(11,17,36,.08); }

/* ===== P19 25 回目の講評（デザイン 92 点）の反映 ===== */
/* 経営理念（スマホ）：章の言明 36px（360px では 34px）、冒頭と結びの誓いは同じ値（390px で 44px、360px で 40px） */
@media (max-width: 599.98px) {
  .pch__st { font-size: clamp(34px, 9.3vw, 36px); line-height: 1.3; }
  .hero--pvow .pvow__h, h2.pclose__v { font-size: clamp(40px, 11.3vw, 48px); }
  .pch--slogan .pst p.pst__k.pst__p48 { font-size: 24px; }   /* 両輪の行：「分けるものではなく、両輪です。」が 1 行に入る（一語落ちを消す） */
  .pclose { padding-bottom: 160px; }
}
@media (max-width: 379.98px) { .msg2 .msg2__p { font-size: 21px; } .pch--slogan .pst p.pst__k.pst__p48 { font-size: 21px; } }
@media (min-width: 600px) and (max-width: 899.98px) { .pch__st { font-size: clamp(44px, 5.8vw, 88px); } }
/* M&A の帯の段落：834px で「M&Aを目指します。」だけの行にならないように */
.manda__ps p { max-width: 36em; }
/* 見出し級の鍵の行：全角括弧を詰める（Integrity の見出しと同じ palt） */
.msg2 .msg2__p, .pst p.pst__k.pst__p40, .duo__vow { font-feature-settings: "palt" 1; letter-spacing: .02em; }
/* 夜の光：縁の円盤を消す（ぼかしを強く、透明の終点を手前に）。トップのビジョンと『挑戦保障』の節にも同じ光 */
.hero--pvow .night__glow, .pclose .night__glow, .sec--vision .night__glow, .sec--mission .night__glow { filter: blur(90px); }
.hero--pvow .night__glow, .pclose .night__glow { background: radial-gradient(closest-side, rgba(131,251,241,.22), rgba(43,91,215,.10) 50%, transparent 70%); }
.hero--pvow .night__glow--b, .pclose .night__glow--b { background: radial-gradient(closest-side, rgba(143,132,255,.16), transparent 70%); }
.sec--vision, .sec--mission { position: relative; overflow: clip; }
.sec--vision > .container, .sec--mission > .container, .sec--mission > .movie-stage { position: relative; z-index: 1; }
.sec--vision .night, .sec--mission .night { background: transparent; }
.sec--vision .night__glow, .sec--mission .night__glow { display: block; position: absolute; left: 52%; top: -30%; width: 60vw; height: 60vw; border-radius: 50%; opacity: 1; background: radial-gradient(closest-side, rgba(131,251,241,.16), rgba(43,91,215,.08) 50%, transparent 70%); pointer-events: none; }
.sec--vision .night__glow--b, .sec--mission .night__glow--b { left: -20%; top: 30%; width: 44vw; height: 44vw; background: radial-gradient(closest-side, rgba(143,132,255,.12), transparent 70%); }
.sec--mission .night__glow { top: -10%; }
/* サービスの節の結び：脚注ではなく本文に。左に循環の図 */
.biz3__cycle { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: center; column-gap: 24px; margin-top: clamp(32px, 3.3vw, 48px); }
.biz3__cycle-fig { display: block; width: 260px; aspect-ratio: 1; }
.biz3__cycle-fig .mf { width: 100%; height: 100%; --mf-tw: 1.4; --mf-u: 1.4; }   /* 小さく描くので札の字を大きく、中心の語は出さない */
.biz3__cycle-fig .mf-tx:not(.mf-tx--in) { display: none; }
.biz3__cycle-t { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.8; color: var(--ink-900); max-width: 30em; }
@media (max-width: 599.98px) { .biz3__cycle { grid-template-columns: minmax(0, 1fr); row-gap: 8px; } .biz3__cycle-fig { width: 220px; } .biz3__cycle-t { font-size: 16px; } }
/* 企業情報トップの冒頭：帯を 640px、循環の図を 440px に（語が 17px 前後） */
@media (min-width: 900px) {
  .hero--co.hero--simple:has(.hero__stage) { min-height: clamp(560px, 70svh, 680px); }
  .hero--co.hero--simple .hero__stage { height: min(440px, calc(100% - var(--header-h) - var(--cap-h) * .54 - 72px)); max-width: 36vw; }
}
/* M&A の原則の帯：ルーバー側に寄せた 2.2:1 */
@media (min-width: 900px) { .band--manda { --ar: 2.2 / 1; } }
/* 『挑戦保障』の節（900px 未満）：入口のボタンは三連の後に */
@media (max-width: 899.98px) { .mission { display: flex; flex-direction: column; } .mission__head { display: contents; } .mission__head .mission__more { order: 9; margin-top: 40px; } }

/* ===== P20 26 回目の講評（理念の伝わり方 92 点）の反映 ===== */
/* 採用の帯（スマホ）：見出しは構想／実行／供給 32px より上に（h2 の詳細度に合わせる） */
@media (max-width: 899.98px) { h2.recruit__p { font-size: clamp(32px, 8.7vw, 36px); } }
/* セキュリティコンサルティング：見出しの原文の次の行（本文と同じ大きさで太さだけ 500） */
.about__b .about__pre { margin: 0 0 .6em; font-size: var(--fs-body); font-weight: 500; color: var(--ink-900); }
/* メガメニューの「経営理念」：誓いの一行を副行に */
.mega__link .t { display: inline-flex; flex-direction: column; gap: 4px; }
.mega__link .s { font-size: 12px; font-weight: 400; color: rgba(255,255,255,.62); letter-spacing: .02em; }
/* 企業情報トップの経営理念のカード：定義の行を名前より上に */
.xp__sub { font-size: 18px; font-weight: 500; color: #fff; }
@media (max-width: 899.98px) { .xp__sub { font-size: 15px; } }
/* 経営理念（スマホ）：「評価も採用も、この8つが基準です。」を原則の名前より上に */
@media (max-width: 599.98px) { .pch__vh { font-size: 28px; line-height: 1.45; } }
/* 帯の順の変更（主要取引先 → M&A → 誓い → ビジョン → 採用 → ニュース）に伴う継ぎ目 */
.sec--trust + .sec--manda { padding-top: var(--sp-l); }

/* ===== P21 26 回目の講評（デザイン 93 点）の反映 ===== */
/* 実績紹介（600px 未満）：小さな図を左に置き、札だけ横に並べ、題と文は幅いっぱいに */
@media (max-width: 599.98px) {
  .cases--focus .case__a { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 14px; row-gap: 6px; align-items: center; padding: 14px 16px 16px 14px; }
  .cases--focus .case__a .case__vis { grid-row: 1; grid-column: 1; width: 72px; aspect-ratio: 1; border-radius: 10px; }
  .cases--focus .case__a .case__who { grid-row: 1; grid-column: 2; margin: 0; }
  .cases--focus .case__a .case__what, .cases--focus .case__a .case__sub, .cases--focus .case__a .case__more { grid-column: 1 / -1; }
  .cases--focus .case__a .case__what { margin-top: 6px; }
}
@media (max-width: 480px) { .case__what .nw { white-space: normal; } }
/* M&A の帯：内容の下の空きを詰める */
@media (min-width: 900px) { .sec--manda { padding-bottom: clamp(120px, 11vw, 160px); } }
@media (max-width: 899.98px) { .sec--manda { padding-bottom: 96px; } }
/* 行頭の括弧の詰めを本文のすべてに（継承。見出しと .nw の指定はそのまま） */
body { text-spacing-trim: trim-start; }
/* スローガンの白い面（1200px 以上）：左に言明と原文の 2 行、右に「攻め」と「守り」と両輪の行（問いと答えの対話） */
@media (min-width: 1200px) {
  .stmt2 { grid-template-rows: auto auto; }
  .stmt2__st { grid-row: 1; }
  .stmt2__b { grid-column: 1 / span 6; grid-row: 2; max-width: 24em; margin-top: clamp(40px, 4.4vw, 56px); }
  .msg2 { grid-column: 7 / -1; grid-row: 2; margin-top: clamp(40px, 4.4vw, 56px); }
}
/* 経営理念：8 つの原則の章も「名前 → 副文」で開く（原文の英字 Values を章名に） */
.pch__values { margin: 0 0 clamp(24px, 2.4vw, 36px); font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6.1vw, 88px); line-height: 1.02; letter-spacing: -.03em; color: var(--ink-900); }
@media (max-width: 599.98px) { .pch__values { font-size: clamp(36px, 10vw, 44px); } }
/* 『挑戦保障』の節：白の 2 行を一段大きく */
.mission__line.mission__line--n { font-size: clamp(18px, 1.53vw, 22px); }
/* スマホの言明：「守り抜かれた今日の上に」が 1 行に */
@media (max-width: 599.98px) { .stmt2__st { font-size: 30px; letter-spacing: 0; } }
/* 写真の見え方：前口上の帯は右の 2 人、人材のページの帯は左の 2 人に寄せる（同じ写真に見せない） */
@media (min-width: 900px) {
  .pch--pro .pch__ma img { object-position: 78% 42%; scale: 1.35; transform-origin: 78% 42%; }
  .sec--pic .pic img { object-position: 18% 40%; scale: 1.35; transform-origin: 18% 40%; }
}
/* サービスの節の結びの循環の図：1200px 以上は 320px */
@media (min-width: 1200px) { .biz3__cycle { grid-template-columns: 320px minmax(0, 1fr); } .biz3__cycle-fig { width: 320px; } }
/* サービスの章の見出し（いまの章でないとき）の色：透かし文字に見えないように少し濃く */
.biz3__role { background-image: linear-gradient(90deg, #138e9c, #2b5bd7 55%, #5b4cd5), linear-gradient(#8a93a8, #8a93a8); }

/* ===== P22 27 回目の講評（理念の伝わり方 93 点）の反映 ===== */
/* セキュリティコンサルティング：橋渡しの行は 20px */
.about__b .about__pre { font-size: clamp(18px, 1.39vw, 20px); line-height: 1.7; }
/* スマホのメニュー：「経営理念」の下に誓いの一行 */
.menu__item--v > span { display: inline-flex; flex-direction: column; gap: 4px; }
.menu__s { font-size: 12px; font-weight: 400; letter-spacing: .02em; color: rgba(255,255,255,.62); }

/* ===== P23 27 回目の講評（デザイン 94 点）の反映 ===== */
/* M&A のメリットの帯：語のある図に退色のマスクを掛けない */
.sec--feat-text .feat__bg { -webkit-mask-image: none; mask-image: none; }
/* 経営理念の鍵の行と、トップの白の 2 行：全角の括弧を詰める（40px の行と同じ） */
.pst p.pst__k, .pst p.pst__k.pst__p48, .mission__line.mission__line--n { font-feature-settings: "palt" 1; letter-spacing: .02em; }
/* タブレット・スマホの段（3 段を保つ） */
@media (min-width: 600px) and (max-width: 1199.98px) { .pst p.pst__k { font-size: 22px; } .pst p.pst__k.pst__p40 { font-size: 30px; } .pst p.pst__k.pst__p48 { font-size: clamp(32px, 4.3vw, 40px); } }
@media (max-width: 599.98px) { .pch--slogan .pst p.pst__k.pst__p48 { font-size: 25px; } }
@media (max-width: 379.98px) { .stmt2__st { font-size: clamp(28px, 8.3vw, 30px); } .pst p.pst__k { font-size: 21px; } .pch--slogan .pst p.pst__k.pst__p48 { font-size: 21px; } }
/* 写真の端：前口上の帯は右の 3 人で組む（4 人目の顎と手を外す）、人材の帯は頭上に余白 */
@media (min-width: 900px) {
  .pch--pro .pch__ma img { object-position: 88% 42%; transform-origin: 88% 42%; }
  .sec--pic .pic img { object-position: 70% 30%; transform-origin: 70% 30%; }
}
/* 実績紹介（1200〜1279px）：図の列を少し狭め、製品名を 1 行に */
@media (min-width: 1200px) and (max-width: 1279.98px) { .cases--focus .case__a { grid-template-columns: 34% minmax(0, 1fr); } }
/* 循環の図の密度：弧を少し太く、サービスの節の結びは 300px */
.biz3__cycle-fig .mf { --mf-tw: 2; }
@media (min-width: 1200px) { .biz3__cycle { grid-template-columns: 300px minmax(0, 1fr); } .biz3__cycle-fig { width: 300px; } }
@media (max-width: 599.98px) { .biz3__cycle-fig { width: min(300px, 100%); } }
/* 600〜1023px：トップの章の図は本文の上に（図中の語が読める幅） */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .biz3__item { grid-template-columns: minmax(0, 1fr); }
  .biz3__vis { grid-column: 1; grid-row: auto; max-width: 420px; margin-bottom: 20px; }
  .biz3__item > :not(.biz3__vis) { grid-column: 1; }
}
/* 会社概要：所在地の面に地図のリンク */
.access__map { margin: 16px 0 0; }
.access--text .access__body { padding-block: 24px 8px; }
/* 経営理念（スマホ）：結びの下の余白 */
@media (max-width: 599.98px) { .pclose { padding-bottom: 200px; } }
.kv__map { display: block; margin-top: 10px; font-size: 15px; }

/* ===== P24 28 回目の講評（理念の伝わり方 94 点）の反映 ===== */
/* トップのスマホ：原文の言明（30px）を面で最大に。「攻め」と「守り」は 28px（非原文が原文を上回らない） */
@media (max-width: 599.98px) { .msg2 .msg2__h { font-size: 28px; } }
/* 経営理念のスマホ：中腹の山（40px の段）を 24px に下げ、章の山 28px・鍵の行 22px と 3 段に。380px 未満は 22px（スローガンの章は両輪の行と同じ 21px） */
@media (max-width: 599.98px) { .pst p.pst__k.pst__p40 { font-size: 24px; } }
@media (max-width: 379.98px) { .pst p.pst__k.pst__p40 { font-size: 22px; } .pch--slogan .pst p.pst__k.pst__p40 { font-size: 21px; } }
/* Integrity の本文：8 つの原則の和文と同じ大きさと色に */
.pinteg--stack .pinteg__p { font-size: clamp(17px, 1.39vw, 20px); line-height: 1.9; color: var(--ink-900); }
/* M&A のメリットの帯（英字の見出しがある帯）：図の上の札（構想）を本文の 1 行目に、下の札（供給）を最終行にそろえる（見出しの罫に触れない）。
   top は本文の 1 行目の位置（上の余白＋見出しの行＋罫の前後）。札は図の枠の上から 15% のところにあるため、その分だけ上へずらす */
@media (min-width: 900px) {
  .sec--feat-text:has(.st--en) .feat__bg { top: calc(clamp(80px, 8.3vw, 120px) + var(--fs-h1) * 1.5 + 64px); transform: translateY(-15%); }
}

/* ===== P25 28 回目の講評（デザイン 94 点）の反映 ===== */
/* 実績紹介（1200px 以上）：同じ行のカードで、題・本文・「詳しく見る」の位置をそろえる（中身は上から、「詳しく見る」は下端に） */
@media (min-width: 1200px) {
  .cases--focus .case__a { grid-template-rows: auto auto auto 1fr; align-items: start; }
  .cases--focus .case__a .case__vis { align-self: center; }
  .cases--focus .case__more { align-self: end; }
}
/* 24px 以上の和文の表示行：文字詰め（palt）とトラッキングを鍵の行にそろえる */
.pch__vh, .pch__sub, .mission__sub, .mission__line--k, .vow__p, .vision__p, .pclose__vt, .stmt2__b { font-feature-settings: "palt" 1; letter-spacing: .02em; }
/* 誓いとビジョンの帯：起点を同じ列（4 列目）に */
@media (min-width: 900px) { .vision__in { grid-column: 4 / -1; } }
/* 経営理念の白の面（1200px 以上）：章の結び（48px の段）を 56px、中腹の山を 36px に。章の結びの連の前後を広く */
@media (min-width: 1200px) {
  .pst p.pst__k.pst__p48 { font-size: clamp(44px, 3.85vw, 56px); }   /* 列の幅に比例（両輪の行の 1 行目「守り（Secure）と攻め（Design）は、」が 1200px でも 1 行に入る） */
  .pst p.pst__k.pst__p40 { font-size: clamp(30px, 2.5vw, 36px); }
  .pst:has(> .pst__p48) { margin-block: clamp(28px, 2.8vw, 48px); }
}
/* トップの『挑戦保障』の節：答えの行（守るためのコストから…）を、経営理念のページの中腹の山と同じ格に */
@media (min-width: 600px) { .mission__line--k { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.5; } }
/* 名を与える行の『挑戦保障』：見出しと同じグラデーション（動かさない） */
.gname { background: linear-gradient(90deg, #83fbf1, #6493df 52%, #8f84ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pst .gname { background-image: linear-gradient(90deg, #138e9c, #2b5bd7 52%, #5b4cd5); }
/* 「攻め」と「守り」：満ちた後も「守り」が本文の墨に溶けないよう、太さで立てる（両輪を絵の上でも対等に） */
.msg2 .msg2__b { font-weight: 700; }
/* 写真：前口上の帯は右の 2 人、人材のページの帯は左の 2 人（同じ人を同じ構図で出さない。4 人そろうのは採用の帯だけ） */
.pch--pro .pch__ma img { object-position: 100% 35%; scale: 1.8; transform-origin: 100% 35%; }
@media (min-width: 900px) { .pch--pro .pch__ma img { object-position: 100% 30%; transform-origin: 100% 30%; } }
/* 人材のページ：写真は「Talent Acquisitionとは」の本文の列に 16:9 で（左の 2 人。帯の大きさで拡大すると粗くなるため、列の幅に収める） */
.about__b .pic--in { margin: clamp(32px, 3.3vw, 48px) 0 0; aspect-ratio: 16 / 9; border-radius: var(--r-card); }
.pic--in img { object-position: 0% 30%; scale: 2.1; transform-origin: 0% 30%; }
@media (min-width: 900px) { .pic--in img { object-position: 0% 21%; scale: 1.6; transform-origin: 0% 21%; } }

/* ===== P26 29 回目の講評（理念の伝わり方 95 点）の反映 ===== */
/* トップのスマホ：『挑戦保障』の節の答えの行を、副題「誰もが未来に挑戦できる社会へ」と同じ 24px に（PC の 36px＝36px と同じ関係） */
@media (max-width: 599.98px) { .mission__line--k { font-size: 24px; line-height: 1.55; } }
/* 経営理念のスマホ：両輪の行は、ほかの章の結びと同じ 28px の 4 行の対に（中腹の山 24px との段を戻す）。380px 未満の中腹の山は 22px にそろえる */
@media (max-width: 599.98px) { .pch--slogan .pst p.pst__k.pst__p48 { font-size: 28px; } }
@media (max-width: 379.98px) { .pch--slogan .pst p.pst__k.pst__p40 { font-size: 22px; } }
/* 経営理念のスマホ：結びの「それが、私たちの誓いです。」を章の結びと同じ 22px に */
@media (max-width: 599.98px) { .pclose__vt { font-size: 22px; } }

/* ===== P27 29 回目の講評（デザイン 94 点）の反映 ===== */
/* 「攻め」と「守り」：2 語とも 700（括弧も）。「と」は掃かずに、後半（「守り」）が始まったら灰から墨へ 300ms で切り替える */
.msg2 .msg2__a, .msg2 .msg2__b { font-weight: 700; }
.msg2 .msg2__to { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink-300); font-weight: 500; transition: color 300ms var(--ease-out); }
.msg2.is-b .msg2__to { color: var(--ink-900); }
html:not(.mo) .msg2 .msg2__to, html.motion-off .msg2 .msg2__to { color: var(--ink-900); }
@media (prefers-reduced-motion: reduce) { .msg2 .msg2__to { color: var(--ink-900); } }
/* スマホ・タブレットのヘッダー：送った後の地を厚く（冒頭の白い文字がロゴの後ろに透けない） */
@media (max-width: 899.98px) { html.on-night:not(.at-top):not(.menu-open):not(.mega-open) .header { background: rgba(5,9,20,.82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); } }
/* スマホの理念の段：鍵の行 20 ／ 中腹の山 24 ／ 章の結び 30（360px は 28）。トップの『挑戦保障』の節の答えの行は 26px（副題 24px の上） */
@media (max-width: 599.98px) {
  .pst p.pst__k { font-size: 20px; }
  .pst p.pst__k.pst__p40 { font-size: 24px; }
  .pst p.pst__k.pst__p48, .pch--slogan .pst p.pst__k.pst__p48 { font-size: clamp(28px, 7.7vw, 30px); }
  .pclose__vt { font-size: 20px; }
  .mission__line--k { font-size: clamp(24px, 6.7vw, 28px); }
}
@media (max-width: 379.98px) { .pst p.pst__k { font-size: 20px; } .pst p.pst__k.pst__p40, .pch--slogan .pst p.pst__k.pst__p40 { font-size: 22px; } }
/* 8 つの原則の章の結び：Integrity の見出しを、ほかの章の結びと同じ段の 2 行に（本文はその下） */
.pinteg--stack .pinteg__t { font-size: clamp(28px, 7.7vw, 30px); line-height: 1.4; max-width: none; }
.pinteg--stack .pinteg__t .seg { display: block; }
@media (min-width: 600px) { .pinteg--stack .pinteg__t { font-size: clamp(32px, 4.3vw, 40px); } }
@media (min-width: 1200px) { .pinteg--stack .pinteg__t { font-size: clamp(44px, 3.85vw, 56px); } }
/* 8 つの原則の英名：1200〜1365px は 1 行に収める */
@media (min-width: 1200px) and (max-width: 1365.98px) { .prs--2 .pr__en { font-size: clamp(22px, 1.9vw, 28px); } }
/* 前口上の後の写真（900px 以上）：拡大せず、3〜12 列・2:1 で（解像度を保つ）。スマホは右の 2 名に寄せたまま */
@media (min-width: 900px) {
  .pch--pro .pch__ma { --ar: 2 / 1; margin-left: calc((100% - 11 * var(--col-gap)) / 6 + 2 * var(--col-gap)); }
  .pch--pro .pch__ma img { scale: 1; object-position: 0% 42%; transform-origin: 50% 50%; }
}
/* 企業情報トップの経営理念のカード：写真をやめ、紺の地に『挑戦保障』（ロゴの色） */
.xp__ph--type { display: flex; align-items: flex-start; padding: clamp(24px, 2.6vw, 40px); background: radial-gradient(70% 90% at 85% 0%, rgba(43,91,215,.32), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgba(91,76,213,.22), transparent 70%), #070d22; }
.xp__mark { font-size: clamp(32px, 3vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; font-feature-settings: "palt" 1; background: linear-gradient(90deg, #83fbf1, #6493df 52%, #8f84ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 実績紹介の下の数字（キットの StatTile）：4 枚のカードの下に、細い罫で */
.stats--case { margin-top: clamp(48px, 5vw, 72px); }
.stats--case .num { font-size: clamp(44px, 5vw, 72px); }
/* サービス紹介 トップの注記：全角括弧の空きを詰める */
.b3s__old { font-feature-settings: "palt" 1; }
/* スマホの実績カード：札を 72px の図の縦の中央に。図の線は 1.5px */
@media (max-width: 599.98px) {
  .cases--focus .case__a .case__who { align-self: center; }
  .cases--focus .case__vis .mf * { vector-effect: non-scaling-stroke; }
  .cases--focus .case__vis .mf { --mf-tw: 1.5; }
}

/* ===== P28 2026-10-22 12:53 のご依頼（循環の図を大きく・冒頭のボタンが曲線で切れる）と 30 回目の講評（理念 96 点）の反映 ===== */
/* 冒頭：使命文を和文の主に（clamp(24px, 2.5vw, 36px)、2 行）。H1 は文言と要素はそのまま、28px まで。どの画面の高さでも、文字のまとまりが下の曲線に食い込まない */
.hvh__h1 { font-size: clamp(18px, 1.95vw, 28px); line-height: 1.5; letter-spacing: .04em; }
.hvh__vow { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.55; font-feature-settings: "palt" 1; letter-spacing: .02em; }
@media (min-width: 600px) { .hvh__vow { width: max-content; max-width: calc(100vw - 2 * var(--gutter)); } }
@media (min-width: 1680px) { .hvh__h1 { font-size: 28px; } .hvh__vow { font-size: 36px; } }
@media (min-width: 900px) { .hvh__mark { font-size: clamp(44px, min(8.9vw, 14vh), 148px); } }
@media (min-width: 900px) and (max-height: 820px) { .hvh__mark { font-size: clamp(56px, min(6.6vw, 12.5vh), 88px); } .hvh__vow { font-size: clamp(22px, 2.2vw, 30px); } }
@media (max-width: 599.98px) { .hvh__h1 { font-size: 20px; } .hvh__vow { font-size: 24px; } }
@media (min-width: 900px) and (max-height: 720px) { .hvh__mark { font-size: clamp(52px, min(6.6vw, 11.5vh), 80px); } }
/* 経営理念のスマホ：章の結びの連の前後を 64px に（文字の段に余白をそろえる） */
@media (max-width: 599.98px) { .pst:has(> .pst__p48) { margin-block: 14px; } }
/* 採用の帯：主ボタンの横に「8つの原則を読む」 */
.recruit__values { margin-left: 8px; }
/* スマホのメニュー：採用情報（外部）を、ほかの項目と同じ大きさで */
.menu__item--ext { display: flex; align-items: center; gap: 10px; }
.menu__exti { display: inline-grid; width: 14px; height: 14px; opacity: .7; } .menu__exti svg { width: 14px; height: 14px; }
/* サービス紹介 トップ：「ご支援の進め方」の頭のスローガンの 2 連 */
.bzf__vow { display: grid; gap: 24px; margin: 0 0 clamp(32px, 3.3vw, 48px); }
.bzf__vow p { margin: 0; font-size: clamp(17px, 1.39vw, 20px); font-weight: 500; line-height: 1.9; color: var(--ink-900); }
/* スマホのコンセプトムービー：映像の下にポスターの言葉（600px 以上はポスターの中に出す） */
.movie__cap { display: none; }
@media (max-width: 599.98px) { .movie__cap { display: block; margin: 16px 0 0; font-size: 18px; font-weight: 500; line-height: 1.7; color: var(--ink-900); } .sec--mission .movie__cap { color: rgba(255,255,255,.88); } }
/* セキュリティコンサルティングの見出し（ミッションの原文）：「とは、」「盾であり、」の後で改行し、34px まで（「挑戦を守る盾であり、」を 1 行に） */
.about--index .about__h:has(br.br-d) { font-size: clamp(24px, 2.36vw, 34px); line-height: 1.5; }

/* ===== P29 30 回目の講評（デザイン 95 点）の反映 ===== */
/* ヘッダー：夜の面の上の地を濃く。夜の判定はヘッダーの中央で、曲線の縁の左右の白が抜けてから（corp.js）。境目がヘッダーの裏にあっても白い字が読める */
html.on-night:not(.mega-open):not(.menu-open) .header { background: rgba(5,9,20,.7); }
/* 人材のページの写真：3:2 の素材を 2.1 倍に寄せる（左の 2 人。描画の幅に見合う解像度を sizes で選ぶ） */
.pic--in img { object-position: 0% 17%; scale: 2.1; transform-origin: 0% 17%; }   /* 頭の上を切らない */
/* 実績紹介の数字：600px 以上は 3 つを 1 段に（2 つと 1 つに折れない）。600px 未満は、数字を左・説明を右に置く 3 行 */
.stats--case { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats--case .stat { border-top: 0; border-left: 1px solid var(--line); padding: 24px clamp(12px, 2vw, 24px) 8px; }
.stats--case .stat:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 1199.98px) { .stats--case .num { font-size: clamp(40px, 6vw, 56px); } }
@media (max-width: 599.98px) {
  .stats--case { grid-template-columns: minmax(0, 1fr); }
  .stats--case .stat { grid-template-columns: 8.4rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 18px 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .stats--case .stat:first-child { border-top: 0; }
  .stats--case .num { grid-row: 1 / span 2; font-size: 34px; white-space: nowrap; }
  .stats--case .stat__label { align-self: end; font-size: 13px; }
  .stats--case .stat__cap { align-self: start; }
}
/* 実績紹介のカード（1200〜1439px）：図を上（16:9）、題と本文を幅いっぱいに（本文の柱が細く、短い行の階段になっていた） */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .cases--focus .case__a { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; align-items: stretch; column-gap: 0; row-gap: 12px; padding: clamp(28px, 2.8vw, 40px); }
  .cases--focus .case__a .case__vis { grid-row: auto; margin: calc(-1 * clamp(28px, 2.8vw, 40px)) calc(-1 * clamp(28px, 2.8vw, 40px)) 8px; width: auto; aspect-ratio: 16 / 9; border-radius: 0; align-self: stretch; }
  .cases--focus .case__a .case__who { align-self: auto; }
  .cases--focus .case__sub { max-width: none; }
  .cases--focus .case__more { align-self: end; }
}
/* 主要取引先（1200px 以上）：3 列を幅いっぱいに使い、どの項目も 1 行に（段の高さをそろえる） */
@media (min-width: 1200px) { .trust__clients { max-width: none; } .trust__client { white-space: nowrap; } }
/* 経営理念の前口上の写真（900px 未満）：奥の人物の顔を枠の中に */
@media (max-width: 899.98px) { .pch--pro .pch__ma img { scale: 1.6; } }
/* 『挑戦保障』の名付けの行：強調として読ませる（太さ 700、青緑を主にしたグラデーション。リンクの色に見えない） */
.gname { font-weight: 700; background-image: linear-gradient(90deg, #83fbf1, #7fd0f3 58%, #9aa9ff); }
.pst .gname { background-image: linear-gradient(90deg, #0f8f9c, #1b7cb4 60%, #3d5fd3); }
/* トップの「攻め」と「守り」：右の柱の行を左の 2 行と同じ大きさに（文 ＞ 二語 ＞ 行 の 3 段） */
.msg2 .msg2__p { font-size: 28px; line-height: 1.6; margin-top: clamp(20px, 2vw, 28px); }
@media (min-width: 600px) and (max-width: 1199.98px) { .msg2 .msg2__p { font-size: 22px; } }
@media (max-width: 599.98px) { .msg2 .msg2__p { font-size: 20px; } }
/* トップのビジョンの見出し：直前の誓いの帯と同じ式（同じ寸法の対） */
@media (min-width: 900px) { .vision__h { font-size: clamp(40px, 5.6vw, 88px); } }
/* 採用の帯：影の始まりを上げ、見出しの下地を静かに */
@media (min-width: 900px) { .recruit__shade { background: linear-gradient(180deg, rgba(5,9,20,0) 30%, rgba(5,9,20,.82) 62%, #050914 100%); } }
/* 会社情報の Philosophy のカード：『挑戦保障』を字が主役の大きさで上から 3 割の位置に、定義の行をその直下に（カードの幅に合わせて字の大きさが変わる） */
.xp__item { container-type: inline-size; }
.xp__ph--type { display: block; padding: 0; }
.xp__tw { position: absolute; left: clamp(18px, 2vw, 30px); right: clamp(18px, 2vw, 30px); top: 28%; display: grid; justify-items: start; gap: clamp(10px, 1.4vw, 18px); }
.xp__ph--type .xp__mark { font-size: clamp(36px, 13cqi, 104px); line-height: 1.1; margin-left: -.07em; }   /* 『 の左の余白を、下の題の字の頭にそろえる */
.xp__tsub { font-size: clamp(15px, 3.1cqi, 20px); font-weight: 500; line-height: 1.6; letter-spacing: .04em; color: #fff; white-space: nowrap; }
@media (max-width: 899.98px) { .xp__tw { top: 22%; } }

/* ===== P30 最終監査（デザイン 76 点：ダイナミックさ・横幅・動きの質）の反映 ===== */
/* 冒頭：スローガンと使命文の大きさを、画面の高さに対して 1 本の式でつなぐ（820px と 821px の境の段差をなくす）。--hk は、ボタンが曲線に食い込むときだけ JS が縮める倍率 */
@media (min-width: 900px) {
  .hvh { --mk: clamp(72px, min(8.9vw, calc(47.5vh - 301px)), 148px); --vk: clamp(22px, min(2.5vw, calc(3.5vh + 4px)), 36px); }
  .hvh .hvh__mark { font-size: max(40px, calc(var(--mk) * var(--hk, 1))); }
  .hvh .hvh__vow { font-size: max(18px, calc(var(--vk) * var(--hk, 1))); }
}
/* 冒頭（高さ 700px 以下の PC）：曲線を低く、上下の間を詰め、字を小さく（1366×650 などでボタンが曲線に沈んでいた） */
@media (min-width: 900px) and (max-height: 700px) {
  :root { --cap-h: clamp(56px, 10vh, 88px); }
  .hvh { --mk: clamp(44px, min(5.6vw, 10.5vh), 72px); --vk: clamp(19px, 1.6vw, 22px); }
  .hvh__in { padding-top: calc(var(--header-h) + 12px); padding-bottom: calc(var(--cap-h) + 34px); }
  .hvh__mark { margin-bottom: 10px; }
  .hvh__h1 { font-size: 18px; }
  .hvh .hvh__vow { line-height: 1.5; }
  .hvh__lead { margin-top: 10px; line-height: 1.75; }
  .hvh__btns { margin-top: 16px; }
  .hvh__ctrl { bottom: calc(var(--cap-h) + 34px + 6px); }
}
/* 送っている間は、ポインターで切り替える部品に反応させない（corp.js が付ける is-scrolling） */
html.is-scrolling :is(.cyc__node, .cyc__tab) { pointer-events: none; }   /* 最終監査 8 回目 F-1：カード・タイル・一覧の行は、送った直後も押せるように pointer-events を切らない（ホバーの見た目だけを html:not(.is-scrolling) で止める。索引・入口のカードの切り替えは corp.js で止める） */
/* スマホのコンセプトムービー：下の言葉に左右の余白。900px 未満で画面いっぱいの枠は角丸なし（採用の写真と同じ規則） */
@media (max-width: 599.98px) { .movie__cap { padding-inline: var(--gutter); } }
@media (max-width: 899.98px) { .sec--mission .movie-stage .movie { border-radius: 0; } }
/* コンセプトムービー（900px 以上）：スクロールで枠が画面いっぱいに開く。舞台は 190vh（開き切った後に少し留まる） */
@media (min-width: 900px) { .movie-stage.is-expand { height: 190vh; } }
/* タブレット（600〜1023px）：章の図を本文の幅いっぱいに（左に寄って右が空いていた） */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .biz3__vis { max-width: none; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 24px; }
  .biz3__vis .mf { inset: 4% 0; width: 100%; height: 92%; }
}
/* サービスの舞台：図を 1.2 秒前後で描き終える（章が替わった直後に止まっても、描きかけを見せない） */
.biz3__mf .mf-draw { transition-duration: 800ms; transition-delay: calc(var(--dl, 0ms) * .35); }
.biz3__mf :is(.mf-fade, .mf-pop) { transition-duration: 450ms; transition-delay: calc(var(--dl, 0ms) * .35); }
.biz3__mf .mf-lbs > * { transition-duration: 400ms; transition-delay: calc(var(--dl, 900ms) * .2); }
/* 「攻め」と「守り」：括弧の線を下の行の左端にそろえる */
@media (min-width: 900px) { .msg2 .msg2__h { margin-left: -.13em; } }
/* ヘッダーの「動きを止める」：ポインターとキーボードで、何のボタンかを吹き出しで示す */
.header .icon-btn.js-motion::after { content: attr(aria-label); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); padding: 6px 10px; border-radius: 8px; background: #0b1124; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-ui), transform 160ms var(--ease-ui); z-index: 5; }
:is(html.on-night, html.mega-open) .header .icon-btn.js-motion::after { background: #fff; color: #0b1124; }
.header .icon-btn.js-motion:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }
/* お問い合わせのタイル：ポインターを合わせると、左から地の色が満ちる */
.close .ctile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgba(131,251,241,.16), rgba(100,147,223,.12) 60%, rgba(143,132,255,.10)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms var(--ease-out); }
html:not(.is-scrolling) .close .ctile:hover::before,.close .ctile:focus-visible::before { transform: scaleX(1); }
html.motion-off .close .ctile::before { transition: none; }
/* M&A：右の図を大きく（下の空きを減らす） */
@media (min-width: 1200px) { .manda__fig--side { max-width: 580px; } }

/* 事業の循環の場面（紺の地。キットの Cycle）：最重要の考え方を、ページの中で一番大きな図に */
.sec--cyc { padding-block: calc(var(--cap-h) + clamp(64px, 7vw, 112px)) calc(var(--cap-h) + clamp(80px, 8.3vw, 140px)); }
.sec--cyc > .container { position: relative; z-index: 1; }
.cyc-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 20px; align-items: end; }
.cyc-head__h { grid-column: 1 / -1; margin: 0; font-size: var(--fs-statement); font-weight: 500; line-height: 1.45; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; }
.cyc-head__lead { grid-column: 8 / -1; margin: 0; font-size: var(--fs-lead); font-weight: 500; line-height: 2; color: var(--on-night-2); }
@media (max-width: 1199.98px) { .cyc-head__h, .cyc-head__lead { grid-column: 1 / -1; } }
.sec--cyc .cyc { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: clamp(56px, 6vw, 96px); }
.sec--cyc .cyc__fig { max-width: 800px; justify-self: start; }
.sec--cyc .cyc__center { font-size: clamp(18px, 1.67vw, 26px); }
.sec--cyc .cyc__pk { font-size: clamp(48px, 5vw, 88px); background-image: linear-gradient(100deg, #f2fdff 0%, #83fbf1 42%, #8f84ff 100%); }
.sec--cyc .cyc__b, .sec--cyc .cyc__pb, .sec--cyc .cyc__tn { color: #9fe3f0; }
.sec--cyc .cyc .cyc__node { opacity: .62; }
.sec--cyc .cyc .cyc__node.is-act { opacity: 1; background: linear-gradient(135deg, #b4f8f3 0%, #92d4f3 45%, #aea8ff 100%); color: #0b1124; }
.sec--cyc .cyc .cyc__node.is-act .cyc__b { color: #1d3358; }
.sec--cyc .cyc__tab::before { background: linear-gradient(90deg, #83fbf1, #6493df, #8f84ff); }
.sec--cyc .cyc__pd { max-width: 24em; }
@media (max-width: 899.98px) {
  .sec--cyc { padding-block: calc(var(--cap-h) + 56px) calc(var(--cap-h) + 64px); }
  .cyc-head__h { font-size: clamp(24px, 6.4vw, 30px); }
  .cyc-head__lead { font-size: 16px; line-height: 1.9; }
  .sec--cyc .cyc { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .sec--cyc .cyc__pk { font-size: clamp(40px, 11vw, 56px); }
}

/* 大きな画面（1800px 以上・2200px 以上）：中身の幅と大きな字の上限を広げる（1440px のサイトを大きな画面の中央に置いた見え方をなくす） */
@media (min-width: 1800px) {
  :root { --maxw: min(1680px, 86vw); --fs-statement: clamp(32px, 4.45vw, 88px); --fs-h2: clamp(22px, 2.5vw, 46px); --fs-lead: 21px; }
  .hvh { --mk: clamp(72px, min(8.9vw, calc(47.5vh - 301px)), 176px); --vk: clamp(22px, min(2.5vw, calc(3.5vh + 4px)), 42px); }
  .hvh__h1 { font-size: 32px; }
  .mission__h { font-size: clamp(64px, 8.3vw, 144px); }
  .vow__h, .vision__h { font-size: clamp(40px, 5.6vw, 104px); }
  .biz3__role { font-size: clamp(48px, 5vw, 88px); }
  .msg2 .msg2__h { font-size: clamp(36px, 3.9vw, 68px); }
  .msg2 .msg2__p { font-size: 32px; }
  .sec--cyc .cyc__fig { max-width: 880px; }
  .sec--cyc .cyc__pk { font-size: clamp(48px, 5vw, 104px); }
  /* サービスの舞台：画面の左端まで出さず、4 隅とも角丸の面に（2560px で左に空の紺が大きく残っていた） */
  .biz3 { --bleed: 0px; --stage-h: min(780px, calc(100vh - 200px)); }
  .biz3__stage-in { border-radius: var(--r-stage); }
  .biz3__cap, .biz3__prog { left: clamp(24px, 2.2vw, 36px); }
}
@media (min-width: 2200px) {
  :root { --maxw: 1920px; --fs-statement: clamp(32px, 4.45vw, 96px); --fs-lead: 22px; --fs-body: 18px; }
  .hvh { --mk: clamp(72px, min(8.9vw, calc(47.5vh - 301px)), 200px); --vk: clamp(22px, min(2.5vw, calc(3.5vh + 4px)), 46px); }
  .mission__h { font-size: clamp(64px, 8.3vw, 160px); }
  .vow__h, .vision__h { font-size: clamp(40px, 5.6vw, 112px); }
  .biz3__role { font-size: clamp(48px, 5vw, 96px); }
  .msg2 .msg2__h { font-size: clamp(36px, 3.9vw, 76px); }
  .sec--cyc .cyc__fig { max-width: 960px; }
}
/* トップのサービス紹介の冒頭（1200px 以上）：前口上の 2 文を左に大きく、事業の説明を右に（左の 640px だけに収まり、右が空いていた） */
.st__lt { display: block; }
@media (min-width: 1200px) {
  .sec--biz3 .st__lead:has(.st__vow) { grid-column: 1 / -1 !important; max-width: none; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: calc(var(--col-gap) * 2); align-items: end; }
  .sec--biz3 .st__vow { margin-bottom: 0; font-size: clamp(28px, 2.3vw, 44px); line-height: 1.55; }
  .sec--biz3 .st__lt { padding-bottom: .3em; }
}

/* ===== P31 最終監査（自動の点検）の反映 ===== */
/* スマホ・タブレットの冒頭：中身に合わせて縦に伸びる（画面の高さが低い端末で、ボタンが曲線に沈んでいた） */
@media (max-width: 899.98px) {
  .hvh { height: auto; min-height: max(620px, 100svh); }
  .hvh__stage { position: relative; inset: auto; min-height: inherit; }
  .hvh__in { position: relative; inset: auto; min-height: max(620px, 100svh); }
}
/* キーボードの輪郭：実績紹介のカード（親の切り抜きで外側の輪郭が消えていた）は内側に。コンセプトムービーの再生（画像の下に隠れていた）は画像の上に輪を描く */
.cases--focus .case__a:focus-visible { outline-offset: -4px; }
.movie__poster:focus-visible { outline: none; }
.movie__poster:focus-visible::after { content: ""; position: absolute; inset: calc(var(--my, 0px) + 6px) calc(var(--mx, 0px) + 6px); z-index: 6; border: 3px solid #9fd6ff; border-radius: calc(var(--mr, 0px) + 10px); pointer-events: none; }   /* 広がる途中の枠（--mx・--my）の内側に */
/* 主要取引先（900〜1199px）：区切り線にはみ出さないよう、句の切れ目で折り返す */
@media (min-width: 900px) and (max-width: 1199.98px) { .trust__client { white-space: normal; word-break: keep-all; } }
/* フッターの標語（400px 以下）：右の余白に入らない大きさに */
@media (max-width: 399.98px) { .footer__mark-in { --mark-k: 12.3; } }
/* 背の低いスマホ（高さ 700px 以下）：冒頭の字と間を少し詰め、ボタンを最初の画面に収める（収まらない端末では、冒頭が縦に伸びて曲線に重ならない） */
@media (max-width: 599.98px) and (max-height: 700px) {
  .hvh__in { padding-top: calc(var(--header-h) + 14px); padding-bottom: calc(var(--cap-h) + 28px); }
  .hvh__mark { font-size: 38px; margin-bottom: 12px; }
  .hvh__h1 { font-size: 18px; }
  .hvh__vow { font-size: 20px; line-height: 1.5; }
  .hvh__lead { margin-top: 12px; line-height: 1.75; }
  .hvh__btns { margin-top: 18px; }
  .hvh__ctrl { bottom: calc(var(--cap-h) + 28px + 4px); }
}

/* ===== P32 理念の講評（31 回目）===== */
/* トップの『挑戦保障』：問い（28px の白）→ 理由（20px）→ 答えと名前（28px の白）→ 投資へ（36px）の階段 */
.mission__line.mission__line--q { font-size: clamp(20px, 1.94vw, 28px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; }
.mission__line.mission__line--n { font-size: clamp(20px, 1.94vw, 28px); line-height: 1.6; }
.mission__line--q + .mission__line { margin-top: .7em; }
@media (max-width: 599.98px) { .mission__line.mission__line--q, .mission__line.mission__line--n { font-size: 20px; } }
/* サービス紹介トップ「ご支援の進め方」：スローガンの章の 2 連を、左に Secure・右に Design の 2 列で 28px に */
.bzf__vow p { display: grid; align-content: start; gap: .35em; font-size: clamp(20px, 1.67vw, 24px); line-height: 1.65; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.bzf__vl { font-weight: 400; color: var(--ink-700); }
.bzf__vk { font-size: clamp(24px, 2.22vw, 32px); font-weight: 500; line-height: 1.4; color: var(--ink-900); }
.bzf__en { font-family: var(--font-display); font-weight: 500; letter-spacing: .01em; }
@media (min-width: 900px) {   /* 2 列の 1 行目どうし、2 行目どうしの高さをそろえる（subgrid） */
  .bzf__vow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: calc(var(--col-gap) * 2); row-gap: 0; }
  .bzf__vow p { grid-row: span 2; grid-template-rows: subgrid; row-gap: .35em; }
  .bzf__vl { align-self: end; }
}
/* スマホの誓いとビジョンの見出しを同じ大きさに（360px で「AI×セキュリティで、」が 1 行に入る大きさ） */
@media (max-width: 599.98px) { .vow__h, .vision__h { font-size: clamp(34px, 10vw, 40px); } }
/* 事業の循環の場面：場面の結びに、スローガンの章の結びの対（今日を守り、明日を築く。／それが、私たちの働き方です。）。8 つの原則は経営理念のページだけ（ご指示） */
.sec--cyc .cyc__cap--work { display: grid; justify-items: start; gap: .15em; max-width: none; margin: clamp(64px, 7vw, 112px) 0 0; text-align: left; font-size: clamp(22px, 2.5vw, 44px); line-height: 1.5; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.sec--cyc .cyc__cw { color: #fff; font-weight: 500; }
.sec--cyc .cyc__cs { color: var(--on-night-2); font-weight: 500; }
/* スマホとタブレット（900px 未満）：輪を残して、知見が構想に還る流れを見せる（2×2 のカードをやめる）。役割の名前だけを輪の上に置く */
@media (max-width: 899.98px) {
  .sec--cyc .cyc__fig { aspect-ratio: 1; width: min(100%, 440px); max-width: none; justify-self: center; }
  .sec--cyc .cyc__svg, .sec--cyc .cyc__center { display: block; }
  .sec--cyc .cyc__center { font-size: 13px; letter-spacing: .1em; }
  .sec--cyc .cyc__nodes { display: block; }
  .sec--cyc .cyc .cyc__node { position: absolute; width: auto; padding: 8px 12px; border-radius: 12px; gap: 0; --s: .96; transform: translate(var(--tx), var(--ty)) scale(var(--s, 1)) !important; }
  .sec--cyc .cyc .cyc__node.is-act { --s: 1.06; }
  .sec--cyc .cyc__node .cyc__b { display: none; }
  .sec--cyc .cyc__k { font-size: 15px; white-space: nowrap; }
  .sec--cyc .cyc__center { font-size: 12px; letter-spacing: .08em; }
  .sec--cyc .cyc__node--0 { left: 50%; top: 13.46%; bottom: auto; right: auto; --tx: -50%; --ty: -50%; }
  .sec--cyc .cyc__node--1 { left: 86.54%; top: 50%; bottom: auto; right: auto; --tx: -62%; --ty: -50%; }
  .sec--cyc .cyc__node--2 { left: 50%; top: 86.54%; bottom: auto; right: auto; --tx: -50%; --ty: -50%; }
  .sec--cyc .cyc__node--3 { left: 13.46%; top: 50%; bottom: auto; right: auto; --tx: -38%; --ty: -50%; }
  .sec--cyc .cyc__cap--work { margin-top: 56px; }
}
/* ヒーロー（1800px 以上）：H1 は 28px のまま、使命の一文を 1920px で 44px 前後に（H1 の 1.5 倍。二つの和文の行が競らないように） */
@media (min-width: 1800px) { .hvh__h1 { font-size: 28px; } }
@media (min-width: 1800px) and (min-height: 701px) { .hvh { --vk: clamp(22px, min(2.5vw, calc(4.4vh + 2px)), 44px); } }
@media (min-width: 2200px) and (min-height: 701px) { .hvh { --vk: clamp(22px, min(2.5vw, calc(4.4vh + 2px)), 48px); } }
/* 事業の循環の場面（900px 以上）：輪と 4 つの役割の箱が、ヘッダーの下の 1 画面に収まる大きさに（1920×900 で 880px の輪が画面からはみ出していた） */
@media (min-width: 900px) {   /* 輪の列の幅 = 輪の大きさ（画面の高さで決まる）。輪とパネルの間が空きすぎないように */
  .sec--cyc .cyc { --figw: max(420px, min(800px, calc(100vh - 150px))); grid-template-columns: minmax(0, min(var(--figw), 58%)) minmax(0, 1fr); }
  .sec--cyc .cyc__fig { width: 100%; max-width: none; }
}
@media (min-width: 1800px) { .sec--cyc .cyc { --figw: max(420px, min(880px, calc(100vh - 150px))); } }
@media (min-width: 2200px) { .sec--cyc .cyc { --figw: max(420px, min(960px, calc(100vh - 150px))); } }

/* ===== P33 最終監査（2 回目・デザイン）===== */
/* 主要取引先（900〜1199px）：2 列で幅いっぱいに（3 列では「メー／カー」「ファ／ーム」のように語の途中で折れていた） */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .trust__clients { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .trust__client:nth-child(3n+1) { padding-left: 28px; border-left: 1px solid var(--line); }
  .trust__client:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}
/* 事業の循環の場面：4 つの役割を一度に読める明るさに（選ばれていない役割が消えて見えていた）。タブの字を 15px に */
.sec--cyc .cyc .cyc__node { opacity: .86; }
.sec--cyc .cyc .cyc__node:not(.is-act) .cyc__k { color: rgba(255,255,255,.86); }
.sec--cyc .cyc .cyc__node:not(.is-act) .cyc__b { color: rgba(159,227,240,.82); }
.sec--cyc .cyc__tab { padding-top: 18px; font-size: 15px; }
.sec--cyc .cyc__tn { font-size: 13px; }
/* 900px 以上・動きあり：場面を画面の中央に留め、送った量（画面 1.5 枚分）で 構想 → 実行 → 供給 → 知見の資産化 → 構想 と一周する。タブの線は、いまの役割の進み具合 */
@media (min-width: 900px) {
  html.mo:not(.motion-off) .sec--cyc .cyc-pin { height: calc(var(--cyc-h, 820px) + 200vh); margin-top: clamp(56px, 6vw, 96px); }   /* 画面 2 枚分の送りで一周（各役割で点が留まる区間を含む。最終監査 3 回目） */
  html.mo:not(.motion-off) .sec--cyc .cyc-pin > .cyc { position: sticky; top: max(calc(var(--header-h) + 36px), calc(50vh - var(--cyc-h, 820px) / 2)); margin-top: 0; }   /* 上の役割の箱は輪の上に 20px ほど出るため、ヘッダーの下に 36px */
  .sec--cyc .cyc--scroll .cyc__tab.is-act::before { transition: none; transform: scaleX(var(--seg, 0)); }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .sec--cyc .cyc-pin { height: auto !important; margin-top: 0 !important; } .sec--cyc .cyc-pin > .cyc { position: static !important; margin-top: clamp(56px, 6vw, 96px) !important; } }
/* 循環の場面の見出しの下：リードを左に 28px で（なぜ一社で 3 つの事業を持つのかを、輪を見る前に読めるように。理念の講評 31 回目） */
.cyc-head { row-gap: clamp(20px, 2.2vw, 32px); }
.cyc-head__lead { grid-column: 1 / -1; font-size: clamp(20px, 1.94vw, 28px); line-height: 1.7; letter-spacing: .02em; color: rgba(255,255,255,.88); font-feature-settings: "palt" 1; }
@media (min-width: 1200px) { .cyc-head .cyc-head__lead { grid-column: 1 / span 8; } }
@media (max-width: 899.98px) { .cyc-head__lead { font-size: 18px; line-height: 1.8; } }
/* お問い合わせの帯の下（900px 以上）：フッターまでの何もない紺を詰める（1920 で 372px → 240px） */
@media (min-width: 900px) { .close__in { padding-bottom: clamp(80px, 7vw, 128px); } }
/* 2560 など背の高い大きな画面：最初の画面を映像で満たす（高さの上限 1200px で、下に白と曲線の帯が出ていた） */
@media (min-width: 2200px) { .hvh { max-height: 1600px; } }
/* 背の低い横長の画面（1200px 以上・高さ 860px 以下。1536×780 などのノート PC）：冒頭を 2 列に。左にスローガンを大きく、右に H1・使命の一文・説明・ボタン（下端そろえ）。
   縦に積むと、高さに合わせてスローガンが 72px まで縮み、迫力が半分になっていた（最終監査 2 回目） */
@media (min-width: 1200px) and (max-height: 860px) {
  .hvh { --mk: clamp(88px, 6.8vw, 128px); --vk: clamp(22px, 1.7vw, 27px); }
  .hvh__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: minmax(0, 1fr) auto auto auto; column-gap: calc(var(--col-gap) * 2); align-content: end; }
  .hvh__mark { grid-column: 1; grid-row: 2 / span 3; align-self: end; margin: 0; }
  .hvh__mark .hvh__line { white-space: nowrap; }   /* 「Design tomorrow」を 1 行に（7 列の幅に 6.6 字分が収まる大きさ） */
  .hvh__h1 { grid-column: 2; grid-row: 2; white-space: normal; font-size: clamp(18px, 1.3vw, 22px); }   /* 使命の一文（22〜27px）より小さく */
  .hvh__lead { grid-column: 2; grid-row: 3; max-width: none; }
  .hvh__lead:has(.hvh__vow) { max-width: none; }
  .hvh .hvh__vow { width: auto; max-width: 100%; }
  .hvh__btns { grid-column: 2; grid-row: 4; }
}
/* 誓いとビジョン（900px 以上）：容器の左端から全幅に、字を大きく（1920 で 134px。『挑戦保障』の 144px よりは小さく）。右が空いた字の塊に見えていた */
@media (min-width: 900px) {
  .vow__in, .vision__in { grid-column: 1 / -1; }
  .vow__h, .vision__h { font-size: clamp(56px, 7vw, 144px); line-height: 1.25; }
}
/* 誓いとビジョンの結びの一文：見出しに合わせて 1920 で 34px まで */
@media (min-width: 900px) { .vow__p, .vision__p { font-size: clamp(20px, 1.94vw, 34px); } }
/* トップの M&A の帯（900px 以上）：見出しを大きく（1920 で 48px）、図を右 6 列いっぱいに、下の余白を詰める。見出しの上の小さな「M&A」の札は外した（見出しに M&A がある） */
@media (min-width: 900px) {
  .manda__text .manda__h { font-size: clamp(26px, 2.6vw, 48px); line-height: 1.45; letter-spacing: .02em; }
  .sec--manda { padding-bottom: clamp(96px, 8vw, 128px); }
}
@media (min-width: 1200px) { .manda__fig--side { grid-column: 7 / -1; max-width: 720px; } }
/* 採用の帯と M&A の帯の間の罫：中身の幅（容器）にそろえる（1920 で容器の外まで伸びていた） */
.recruit + .sec--manda::before { left: calc((100% - min(100% - var(--gutter) * 2, var(--maxw))) / 2); right: calc((100% - min(100% - var(--gutter) * 2, var(--maxw))) / 2); }
/* 経営理念のページ（1600px 以上）：章の名前は左から大きく、原文の連は右へ寄せて（6〜12 列）幅を使う。1920 で本文が左の 700px に寄り、右の 4 割が白かった */
@media (min-width: 1600px) {
  .pch--mission .pch__in > .psts, .pch--vision .pch__in > .psts, .pch--slogan .pch__in > .psts { grid-column: 6 / -1; }
  .pch--mission .pch__in > .pch__name, .pch--vision .pch__in > .pch__st, .pch--slogan .pch__in > .pch__slogan { grid-column: 3 / -1; }
}
/* トップのサービス紹介の冒頭（1200px 以上）：右の事業の説明を一回り大きく濃く（2 列の右が軽く見えていた） */
@media (min-width: 1200px) { .sec--biz3 .st__lt { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.85; color: var(--ink-700); } }

/* ===== P34 理念の講評（32 回目）===== */
/* トップの『挑戦保障』：本当の理由の行（「この一歩は大丈夫か」。…）を 24px の白に（問い 28 → 否定 20 → 理由 24 → 答え 28 → 結び 36 の階段） */
.mission__line.mission__line--r { font-size: clamp(18px, 1.67vw, 24px); font-weight: 500; line-height: 1.7; color: #fff; font-feature-settings: "palt" 1; letter-spacing: .02em; }
@media (max-width: 599.98px) { .mission__line.mission__line--r { font-size: 18px; } }
/* 経営理念：同じ行を 24px の 500 に（本文 20 と鍵の行 28 の間の段） */
.pst p.pst__m { font-size: clamp(18px, 1.67vw, 24px); font-weight: 500; line-height: 1.75; letter-spacing: .02em; color: var(--ink-900); font-feature-settings: "palt" 1; }
@media (max-width: 599.98px) { .pst p.pst__m { font-size: 18px; } }
/* 経営理念のスローガンの章：Secure／Design の定義を、サービス紹介 トップと同じ左右 2 列の組に */
.pst--work .bzf__vow { margin: 0; }
.pst--work .bzf__vow p { max-width: none; }
/* 経営理念の 8 つの原則：「評価も採用も、この8つが基準です。」を章の結びと同じ大きさに */
.pch__vh { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt" 1; }
@media (min-width: 600px) and (max-width: 1199.98px) { .pch__vh { font-size: clamp(32px, 4.3vw, 40px); } }
@media (max-width: 599.98px) { .pch__vh { font-size: 30px; } }
/* 循環の場面（トップ）：見出しは 3 つの文（なぜ一社で 3 つの事業を持つか）、循環の一文は 28px。結びの対は声明の大きさの白 */
.sec--cyc .cyc__cap--work { display: block; font-size: var(--fs-statement); line-height: 1.45; font-weight: 500; color: #fff; }
/* サービス紹介 トップの循環の帯：上下の余白を少し詰める */
.sec--cyc-svc { padding-block: calc(var(--cap-h) + clamp(56px, 6vw, 96px)) calc(var(--cap-h) + clamp(64px, 7vw, 112px)); }
/* サービス紹介 トップの 3 つの事業：節のリード（構想だけでは動きません。…）を 28px に（トップの循環の場面とそろえる） */
.sec--b3 .st__lead { font-size: clamp(20px, 1.94vw, 28px); line-height: 1.7; color: var(--ink-900); font-weight: 500; font-feature-settings: "palt" 1; letter-spacing: .02em; }
@media (max-width: 899.98px) { .sec--b3 .st__lead { font-size: 18px; line-height: 1.8; } }
/* 背の低い横長の画面の 2 列の冒頭：使命の一文を 32〜40px（業務用のノート PC で 22〜26px まで小さくなっていた）、H1 20〜24px */
@media (min-width: 1200px) and (max-height: 860px) {
  .hvh { --vk: clamp(32px, 2.4vw, 40px); }
  .hvh__h1 { font-size: clamp(20px, 1.5vw, 24px); }
}
/* 誓いとビジョン（600〜899px）：同じ大きさに */
@media (min-width: 600px) and (max-width: 899.98px) { .vow__h, .vision__h { font-size: clamp(36px, 6.2vw, 52px); } }
@media (min-width: 1200px) { .pch__vh { font-size: clamp(44px, 3.85vw, 56px); } }

/* ===== P35 最終監査（3 回目・デザイン）===== */
/* 循環の図（900px 以上）：箱・字・中央の語を輪の大きさに比例させる（輪が高さに合わせて縮む画面で、中央の「一気通貫 デリバリー基盤」が左右の箱に隠れていた） */
@media (min-width: 900px) {
  .sec--cyc .cyc__fig { container-type: inline-size; }
  .sec--cyc .cyc .cyc__node { width: clamp(128px, 28cqi, 225px); padding: clamp(10px, 2.4cqi, 18px) clamp(12px, 2.6cqi, 20px) clamp(12px, 2.6cqi, 20px); gap: clamp(2px, .8cqi, 6px); }
  .sec--cyc .cyc__k { font-size: clamp(15px, 3.6cqi, 27px); }
  .sec--cyc .cyc__center { font-size: clamp(14px, 3.4cqi, 26px); }
  .sec--cyc .cyc__b { font-size: clamp(11px, 1.7cqi, 12.5px); }
  /* タブ：「知見の資産化」を 1 行に（900〜1180px で「知見の資産／化」と折れていた） */
  .sec--cyc .cyc__tabs { grid-template-columns: 1fr 1fr 1fr 1.4fr; }
  .sec--cyc .cyc__tab > span:not(.cyc__tn) { white-space: nowrap; }
}
/* 役割の文の切り替え：出る文を先に消し（160ms）、入る文は遅らせて出す（2 つの文が半透明で重なっていた） */
.sec--cyc .cyc__slide { transform: translateY(16px); transition: opacity 160ms var(--ease-out), transform 600ms var(--ease-expo-out); }
.sec--cyc .cyc__slide.is-act { transform: none; transition: opacity 450ms var(--ease-out) 160ms, transform 600ms var(--ease-expo-out) 160ms; }
/* タブレット（600〜899px）：輪を大きく（周りに紺が広く残っていた） */
@media (min-width: 600px) and (max-width: 899.98px) {
  .sec--cyc .cyc__fig { width: min(86vw, 620px); }
  .sec--cyc .cyc__k { font-size: 18px; }
  .sec--cyc .cyc__center { font-size: 15px; }
  .sec--cyc .cyc .cyc__node { padding: 10px 16px; }
  .sec--cyc .cyc__node--1 { --tx: -50%; }
  .sec--cyc .cyc__node--3 { --tx: -50%; }
}
/* 「ご支援の進め方」と経営理念の Secure／Design の組：スローガンの声で（Design はスローガンと同じ色の流れ、2 行目は最大 40px） */
.bzf__vk { font-size: clamp(26px, 2.4vw, 40px); }
.bzf__en--d { background: linear-gradient(90deg, #138e9c, #2b5bd7 52%, #5b4cd5); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* トップの M&A の帯：文を図の上端にそろえる（採用の帯のボタンから M&A の見出しまで、空の紺が 350px 前後あった） */
@media (min-width: 1200px) { .manda__grid--v { align-items: start; } .recruit + .sec--manda .manda__grid { padding-top: clamp(40px, 3.6vw, 64px); } }
/* M&A の図（スクロールで寄る間）：CSS の時間の動きを止め、送りに合わせる */
.mf--scroll .mf-draw, .mf--scroll .mf-fade, .mf--scroll .mf-lb, .mf--scroll .mf-pop { transition: none !important; }
/* 数字：桁の幅をそろえる */
.num [data-v] { font-variant-numeric: tabular-nums; }
/* 2300px 以上：中身の幅と大きな字の上限をもう一段（1920px で止まり、2560 で全体が小さく見えていた）。『挑戦保障』は誓いとビジョンより大きく */
@media (min-width: 2300px) {
  :root { --maxw: 2120px; }
  .hvh { --mk: clamp(72px, min(8.9vw, calc(47.5vh - 301px)), 240px); }
  .mission__h { font-size: clamp(64px, 8.3vw, 200px); }
  .vow__h, .vision__h { font-size: clamp(56px, 7vw, 176px); }
  .manda__text .manda__h { font-size: clamp(26px, 2.6vw, 60px); }
}
/* 経営理念（2200px 以上）：原文の本文を一回り大きく（細い柱に見えていた） */
@media (min-width: 2200px) { .pst p { font-size: clamp(20px, .95vw, 24px); } }
/* スマホ（599px 以下）：中央の語と「知見の資産化」の箱の間をあける（360px で接していた） */
@media (max-width: 599.98px) {
  .sec--cyc .cyc__center { font-size: 11px; letter-spacing: .06em; }
  .sec--cyc .cyc__k { font-size: 14px; }
  .sec--cyc .cyc .cyc__node { padding: 7px 10px; }
  .sec--cyc .cyc__node--3 { --tx: -42%; }
}

/* ===== P36 理念の講評（33 回目）===== */
/* 事業の循環の場面（トップ）：見出しの下の循環の一文を 36px の白に（『挑戦保障』の節の結びと同じ格。輪を「回る仕組み」として読む決め手） */
.cyc-head__lead { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.6; color: #fff; }
@media (max-width: 899.98px) { .cyc-head__lead { font-size: 22px; line-height: 1.7; } }
/* 知見の資産化のパネル：循環の一文を重ねて置く（場面を留めている間、見出しの下の一文は画面の外にある） */
.sec--cyc .cyc__pd--back { margin-top: 0; color: rgba(255,255,255,.82); }
/* 結びの前に Secure／Design の定義（紺の地の 2 列。Design はスローガンの色の流れを紺の地の明るさで） */
.sec--cyc .cyc__work { margin: clamp(72px, 8vw, 128px) 0 0; }
.sec--cyc .cyc__work .bzf__vl { color: rgba(255,255,255,.8); }
.sec--cyc .cyc__work .bzf__vk { color: #fff; }
.sec--cyc .cyc__work .bzf__en--d { background-image: linear-gradient(90deg, #83fbf1, #6493df 52%, #8f84ff); }
.sec--cyc .cyc__work + .cyc__cap--work { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 899.98px) { .sec--cyc .cyc__work { margin-top: 64px; } .sec--cyc .cyc__work + .cyc__cap--work { margin-top: 48px; } }
/* スマホとタブレット：循環の場面の見出しを、ほかの声明と同じ格に（390px で 25px と、トップの大きな文の中で一番小さかった） */
@media (max-width: 899.98px) { .cyc-head__h { font-size: var(--fs-statement); } }
@media (max-width: 599.98px) { .cyc-head__h { font-size: clamp(28px, 7.7vw, 30px); } .cyc-head--svc .cyc-head__h { font-size: clamp(24px, 6.4vw, 30px); } }   /* サービス紹介の版（見出しは長い循環の一文）は 25px のまま */
/* トップのビジョン：見出しと結びの間に、原文の「それは看板の話ではありません。」「信頼の話です。」（信頼の行を一段大きく） */
.vision__trust { display: grid; justify-items: start; gap: .1em; margin: clamp(28px, 2.8vw, 44px) 0 0; font-weight: 500; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.vision__tp { font-size: clamp(20px, 1.94vw, 34px); line-height: 1.6; color: var(--on-night-2); }
.vision__tt { font-size: clamp(24px, 2.5vw, 44px); line-height: 1.45; color: #fff; }
.vision__trust + .vision__p { margin-top: clamp(28px, 2.8vw, 44px); }
@media (max-width: 899.98px) { .vision__tp { font-size: 20px; } .vision__tt { font-size: 24px; } }
/* トップの採用の帯：見出し（憧れる仕事に）の前に、前口上の冒頭 2 行（いまはそうではない、から読む） */
.recruit__pre { margin: 16px 0 0; font-size: clamp(16px, 1.39vw, 20px); font-weight: 500; line-height: 1.8; letter-spacing: .02em; color: rgba(255,255,255,.82); font-feature-settings: "palt" 1; }
.recruit__pre + h2.recruit__p { margin-top: clamp(12px, 1.2vw, 18px); }
@media (max-width: 379.98px) { .cyc-head__lead { font-size: 20px; } }   /* 360px：「案件創出×人材供給×知見蓄積で、」を 1 行に */

/* ===== P37 最終監査（4 回目・デザイン 86 点）===== */
/* スマホの循環図（399px 以下）：「知見の資産化」の箱を 2 行（知見の／資産化）にして細く。点灯して大きくなっても、中央の語との間を 12px 以上に（360px で 8px、320px で重なっていた）。
   中央の語はスマホで 12px（11px では小さかった） */
@media (max-width: 599.98px) { .sec--cyc .cyc__center { font-size: 12px; } }
@media (max-width: 399.98px) {
  .sec--cyc .cyc__node--3 .cyc__k { white-space: normal; max-width: 3.3em; line-height: 1.25; }
  .sec--cyc .cyc__node--3 { --tx: -50%; }
}
/* 循環図の役割の切り替え：箱の面（グラデーション）を ::before に移して 300ms で入れ替え、字の色は面が半分入れ替わった時点（150ms）で一度に替える。
   面は瞬時、字は 400ms で替わり、0.2 秒ほど点灯する箱と消える箱の字が両方とも読めなかった（最終監査 4 回目） */
.sec--cyc .cyc .cyc__node { isolation: isolate; transition: transform 700ms var(--ease-expo-out), border-color 300ms, box-shadow 700ms var(--ease-expo-out), opacity 500ms; }
.sec--cyc .cyc .cyc__node::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #b4f8f3 0%, #92d4f3 45%, #aea8ff 100%); opacity: 0; transition: opacity 300ms linear; pointer-events: none; }   /* 直線で入れ替え、半分（150ms）の時点で字の色を替える。面の明るさが中間の間は、白い字も濃い字も 3:1 以上 */
.sec--cyc .cyc .cyc__node.is-act::before { opacity: 1; }
.sec--cyc .cyc .cyc__node.is-act { background: rgba(8, 40, 52, .9); }
.sec--cyc .cyc .cyc__node .cyc__k, .sec--cyc .cyc .cyc__node .cyc__b { transition: color 0s linear 150ms; }
.sec--cyc .cyc .cyc__node.is-act .cyc__k { color: #0b1124; }
html.motion-off .sec--cyc .cyc .cyc__node::before, html.motion-off .sec--cyc .cyc .cyc__node .cyc__k, html.motion-off .sec--cyc .cyc .cyc__node .cyc__b { transition: none; }
@media (prefers-reduced-motion: reduce) { .sec--cyc .cyc .cyc__node::before, .sec--cyc .cyc .cyc__node .cyc__k, .sec--cyc .cyc .cyc__node .cyc__b { transition: none; } }
/* 右のパネル：出る文は 140ms で消し、入る文は 100ms 後から（空になる間を 40ms 以下に） */
.sec--cyc .cyc__slide { transition: opacity 140ms var(--ease-out), transform 600ms var(--ease-expo-out); }
.sec--cyc .cyc__slide.is-act { transition: opacity 450ms var(--ease-out) 100ms, transform 600ms var(--ease-expo-out) 100ms; }
/* 留める長さ：背の低いノート PC でも 1 役割あたりの送りを確保する（1366×650 で、点が止まって見える送りが 40〜90px しかなかった） */
@media (min-width: 900px) { html.mo:not(.motion-off) .sec--cyc .cyc-pin { height: calc(var(--cyc-h, 820px) + max(200vh, 1800px)); } }
/* 留めた輪の下の余白（高さ 950px 以下）：点灯した下の箱の影が画面の下端で切れないよう、輪を 24px 小さく */
@media (min-width: 900px) and (max-height: 950px) { .sec--cyc .cyc { --figw: max(420px, min(800px, calc(100vh - 174px))); } }
@media (min-width: 1800px) and (max-height: 950px) { .sec--cyc .cyc { --figw: max(420px, min(880px, calc(100vh - 174px))); } }
@media (min-width: 2200px) and (max-height: 950px) { .sec--cyc .cyc { --figw: max(420px, min(960px, calc(100vh - 174px))); } }
/* 経営理念（1600px 以上）：章の名前の塊（章の札・名前・副題）を左の 5 列に、原文の連を右の 6〜12 列に並べ、章の名前は章の終わりまで画面の上に留める。
   章の索引は左下へ（1920 で左の約 590px が白いまま、本文が右に寄っていた。最終監査 3・4 回目） */
.pch__head { min-width: 0; }
@media (min-width: 1600px) {
  .pch--mission .pch__in, .pch--vision .pch__in, .pch--slogan .pch__in { align-items: start; }
  .pch--mission .pch__in > .pch__head, .pch--vision .pch__in > .pch__head, .pch--slogan .pch__in > .pch__head { grid-column: 1 / span 5; grid-row: 1; position: sticky; top: calc(var(--header-h) + 56px); }
  .pch--mission .pch__in > .psts, .pch--vision .pch__in > .psts, .pch--slogan .pch__in > .psts { grid-column: 6 / -1; grid-row: 1; padding-top: calc(13px * 1.7 + clamp(28px, 3vw, 44px)); }
  .pch__head .pch__name { font-size: clamp(96px, 6.4vw, 128px); }
  .pch__head .pch__sub { font-size: clamp(26px, 2.2vw, 40px); margin-bottom: 0; }
  .pch__head .pch__st { font-size: clamp(56px, 3.8vw, 72px); margin-bottom: 0; }
  .pch__head .pch__slogan { font-size: clamp(64px, 5vw, 88px); margin-bottom: 0; }
  .pnav { top: calc(100vh - 210px); }
}
/* 2300px 以上：2 段目の部品も一段大きく（2560 で M&A の図・実績のカード・ニュースと記事の字が 1920 のままだった） */
@media (min-width: 2300px) {
  .manda__fig--side { max-width: 960px; }
  .manda__ps p { font-size: 22px; }
  .cases--focus .case__who, .cases--focus .case__more { font-size: 16px; }
  .cases--focus .case__what { font-size: 26px; }
  .cases--focus .case__sub { font-size: 20px; }
  .news__item:not(.is-lead) .news__t { font-size: 20px; }
  .acard__t { font-size: 20px; }
}
/* 360px 未満（320px など）：語の途中で折れていた所の字を一段小さく。動きを止めるボタンの字は折らない */
.js-motion .t { white-space: nowrap; }
@media (max-width: 359.98px) {
  .st__vow { font-size: 18px; }
  .trust__cert-t { font-size: 13px; }
  .vow__h, .vision__h, .pch__st { font-size: 30px; }
  :root { --gutter: 16px; --fs-body: 15px; --fs-h2: 20px; --fs-h3: 17px; --fs-lead: 16px; }   /* 320px：本文の幅を 288px に、字を一段小さく（会社名やサービス名が 1 行に入らず、語の途中で折れていた） */
  .feat__h, .sec--feat-text .feat__h, .sec--feat-text .st--feat .st__ja { font-size: 21px; }
  .case .case__what { font-size: 17px; }
  .cases--text .case .case__what { font-size: 16px; }
  .cases--vis:not(.cases--focus) .case { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .cases--vis:not(.cases--focus) .case .case__what { font-size: 15px; }
  .cases--focus .case__a { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 12px; }
  .news__item a { grid-template-columns: minmax(0, 1fr) 24px; }
  .news__t { font-size: 15px; }
  .biz { grid-template-columns: 64px minmax(0, 1fr); }
  .footer__end { flex-wrap: wrap; row-gap: 10px; }
  .footer__copy { white-space: nowrap; }
  .biz__ja { font-size: 15px; }
}
/* サービス紹介 トップ「ご支援の進め方」（7 段階）：送りに合わせて、読んだ段階まで線が伸び、届いた段の番号に色が入る（動きを止めたときは最後の形） */
.bzf::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 18.5px; height: 2px; background: linear-gradient(90deg, #138e9c, #2b5bd7 52%, #5b4cd5); transform-origin: 0 50%; transform: scaleX(var(--fp, 1)); }
.bzf__n { z-index: 1; transition: border-color 400ms var(--ease-out), color 400ms var(--ease-out); }
.bzf__i.is-on:not(:last-child) .bzf__n { border-color: #138e9c; color: var(--ink-900); }
@media (max-width: 899.98px) { .bzf::after { left: 18.5px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--fp, 1)); } }
@media (min-width: 900px) and (max-width: 1199.98px) { .bzf::after { display: none; } }
/* 進め方の線：最初と最後の番号の中心で止める（右端・下端まで伸びていた） */
@media (min-width: 1200px) { .bzf::before, .bzf::after { right: calc(100% / 7 - 19px); } }
@media (max-width: 899.98px) { .bzf::before, .bzf::after { top: 19px; bottom: 19px; } }
@media (max-width: 379.98px) { .feat__h, .sec--feat-text .feat__h, .sec--feat-text .st--feat .st__ja { font-size: 22px; letter-spacing: .02em; } }   /* 360px：「AIセキュリティ株式会社の強み」を 1 行に（「強み」だけの行になっていた） */

/* ===== P38 理念の講評（34 回目）===== */
/* 経営理念（1600px 以上）：章の索引は、入ってくる章の名前の塊と重なる間は隠す（corp.js）。隠れている間は押せない。動きを止めていても同じ */
.pnav:not(.is-shown) ul { pointer-events: none; }
.pnav:focus-within { opacity: 1; }
@media (min-width: 1600px) { html.motion-off .pnav:not(.is-shown):not(:focus-within) { opacity: 0; } }
/* トップの循環の場面：1600px 以上は循環の一文を 44px まで（見出し 85px との差を詰める） */
@media (min-width: 1600px) { .cyc-head__lead { font-size: clamp(36px, 2.3vw, 44px); } }
/* 知見の資産化のパネル：循環の一文を説明の主役に（28〜32px の白） */
.sec--cyc .cyc__pd--back { margin-top: .3em; font-size: clamp(20px, 1.95vw, 32px); line-height: 1.55; color: #fff; }
@media (max-width: 899.98px) { .sec--cyc .cyc__pd--back { font-size: 20px; } }
/* トップのビジョン：結びの「挑む人の隣に立ち続けるために、日本の頂点に立つ。」を帯の山に（信頼の話です。より大きく）、その下に「それが、私たちのビジョンです。」 */
@media (min-width: 900px) { .sec--vision .vision__p { font-size: clamp(26px, 3vw, 52px); line-height: 1.45; } }
@media (max-width: 899.98px) { .sec--vision .vision__p { font-size: 24px; line-height: 1.5; } }
.vision__tail { margin: clamp(14px, 1.4vw, 22px) 0 0; font-size: clamp(20px, 1.94vw, 34px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; color: var(--on-night-2); font-feature-settings: "palt" 1; }
@media (max-width: 899.98px) { .vision__tail { font-size: 20px; } }
/* トップの 2 画面目：両輪の行を答えの格に（経営理念の中腹の山と同じ 36px） */
.msg2 .msg2__p { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.55; }
@media (min-width: 1800px) { .msg2 .msg2__p { font-size: 44px; } }
@media (max-width: 599.98px) { .msg2 .msg2__p { font-size: 22px; } }
@media (max-width: 379.98px) { .msg2 .msg2__p { font-size: 20px; } }
/* AI Securityサービス：冒頭の問いの答え（本当の理由の行）を、次の節の右の列の先頭に */
.about__b .about__key--r { font-size: clamp(18px, 1.67vw, 24px); line-height: 1.7; }
/* セキュリティコンサルティング：原文の見出し（前提）の下に、右へずらして「だから…」と本文（見出しの横に並ぶと、だからが前提より先に読めた） */
@media (min-width: 900px) {
  .about--seq .about__head { grid-column: 1 / span 8; position: static; }
  .about--seq .about__b { grid-column: 6 / -1; grid-row: 2; margin-top: clamp(36px, 3.6vw, 56px); }
}

/* ===== P39 最終監査（5 回目・デザイン 86 点）===== */
/* 循環図の切り替え：面の入れ替えは中間の濃さを素早く通す（事業名の 12.5px の行も 3:1 を下回る間を短く）。入る文の遅れは 70ms（パネルが空になる間を短く） */
.sec--cyc .cyc .cyc__node::before { transition: opacity 80ms linear 110ms; }   /* 面は字の色を替える 150ms の前後 40ms で入れ替える（中間の濃さの間は、白い字も濃い字も読みにくい。事業名の小さな行は特に） */
.sec--cyc .cyc__slide.is-act { transition: opacity 450ms var(--ease-out) 70ms, transform 600ms var(--ease-expo-out) 70ms; }
/* 2300px 以上：実績の題と記事のカードの題（強い指定に負けて 22px と 17px のままだった） */
@media (min-width: 2300px) { .cases--focus .case .case__what { font-size: 26px; } .acard .acard__t, .acard:first-child .acard__t { font-size: 20px; } }
/* 360px 未満：「AIセキュリティ株式会社の強み」を 1 行に（379px 以下の 23px が後ろで上書きしていた）、事例の題 15px */
@media (max-width: 359.98px) { .feat__h, .sec--feat-text .feat__h, .sec--feat-text .st--feat .st__ja { font-size: 20px; } .cases--text .case .case__what { font-size: 15px; } }
/* 進め方の線：項目が現れる途中（不透明度が 1 未満の間）も、線を番号の下に */
.bzf { isolation: isolate; }
.bzf::before, .bzf::after { z-index: -1; }
/* トップの M&A の帯（1200px 以上）：図が組み上がる間、文を見出しのそばに留める（2560 で左下に空の紺が残っていた） */
@media (min-width: 1200px) { .manda__grid--v .manda__text { position: sticky; top: calc(var(--header-h) + 10vh); } }
/* 各サービスの「強み」（紺の 3 列）：読んだ番号まで上の線が伸び、番号が灯る（動きを止めたときは最後の形） */
.nrows--dark[data-steps] .nrow { position: relative; }
.nrows--dark[data-steps] .nrow::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, #83fbf1, #6493df 52%, #8f84ff); transform-origin: 0 50%; transform: scaleX(0); transition: transform 900ms var(--ease-expo-out); }
.nrows--dark[data-steps] .nrow.is-on::before { transform: scaleX(1); }
.nrows--dark[data-steps] .nrow__n { transition: color 600ms var(--ease-out); }
html.mo:not(.motion-off) .nrows--dark[data-steps] .nrow:not(.is-on) .nrow__n { color: rgba(255,255,255,.34); }
.st + .nrows--dark[data-steps] .nrow { padding-top: 24px; }
html:not(.mo) .nrows--dark[data-steps] .nrow::before, html.motion-off .nrows--dark[data-steps] .nrow::before { transform: scaleX(1); transition: none; }
@media (prefers-reduced-motion: reduce) { .nrows--dark[data-steps] .nrow::before { transform: scaleX(1); transition: none; } .nrows--dark[data-steps] .nrow .nrow__n { color: #fff !important; } }
/* 経営陣（1600px 以上）：経歴を 18px にして右の列まで使う（1920 で右の約 270px が空いていた） */
@media (min-width: 1600px) { .execs:not(.execs--adv) .exec__body { max-width: 46em; } .execs:not(.execs--adv) .exec__bio { font-size: 18px; } }

/* ===== P40 理念の講評（35 回目）===== */
/* ミッションの答えの行（「この一歩は大丈夫か」。…答える者がいないからです。）：問い（28px）より大きく（32px）。トップ・経営理念・AI Securityサービス */
.mission__line.mission__line--r { font-size: clamp(20px, 2.22vw, 32px); line-height: 1.6; }
@media (max-width: 599.98px) { .mission__line.mission__line--r { font-size: 20px; } }
.pst p.pst__m { font-size: clamp(20px, 2.22vw, 32px); line-height: 1.6; }
@media (max-width: 599.98px) { .pst p.pst__m { font-size: 20px; } }
.about__b .about__key--r { font-size: clamp(20px, 1.94vw, 28px); line-height: 1.6; }
/* 循環の場面の結び：「今日を守り、明日を築く。」を山に、「それが、私たちの働き方です。」は結びの一文の大きさ */
.sec--cyc .cyc__tail { margin: clamp(14px, 1.4vw, 22px) 0 0; font-size: clamp(20px, 1.94vw, 34px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; color: var(--on-night-2); font-feature-settings: "palt" 1; }
@media (max-width: 899.98px) { .sec--cyc .cyc__tail { font-size: 20px; } }
/* トップのビジョン（スマホ）：結び（24px）を「信頼の話です。」より大きく */
@media (max-width: 899.98px) { .vision__tt { font-size: 22px; } }
/* 採用の帯：見出し「セキュリティを、誰もが憧れる仕事に。」を広い画面で最大 72px に（1440 は 56px のまま） */
@media (min-width: 1440px) { h2.recruit__p { font-size: clamp(56px, 3.9vw, 72px); max-width: 18em; } }
/* 経営理念の 8 つの原則：和文の意味を一段大きく（候補者が基準として読む）、英名を少し下げる */
.prs--2 .pr__ja { font-size: clamp(18px, 1.53vw, 22px); }
.prs--2 .pr__en { font-size: clamp(22px, 1.8vw, 26px); }
@media (max-width: 599.98px) { .prs--2 .pr__ja { font-size: 18px; } .prs--2 .pr__en { font-size: 22px; } }
/* 誓いの帯：結びの下に「経営理念を読む」（前口上の全文へ） */
.vow__more { margin: clamp(18px, 1.8vw, 28px) 0 0; font-size: 16px; }
/* 8 つの原則の和文：文ごとにまとめて折る（「最初に動く。／自分が起点になる。」のように、文の途中で折らない） */
.prs--2 .pr__s { display: inline-block; max-width: 100%; }

/* ===== P41 最終監査 6 回目 ===== */
/* 経営理念（1600px 以上）：索引は、隠すときだけ一瞬で消す（送っている間に、消えかけの索引の字が章の頭や次の章の名前に重ならないように。出るときの 320ms のフェードは残す。必須 1） */
@media (min-width: 1600px) { .pnav:not(.is-shown), html.motion-off .pnav:not(.is-shown):not(:focus-within) { transition: none; } }
/* サービス紹介 トップの 7 段階：番号の丸は不透明のまま大きくなって現れ、文だけを透明度で出す（現れ始めの約 0.2 秒、半透明の丸を通して線が取り消し線のように透けていた。D-3） */
html.mo .bzf__i.rv:not(.is-in) { opacity: 1; transform: none; }
html.mo .bzf__i.rv:not(.is-in) .bzf__t { opacity: 0; transform: translateY(12px); }
html.mo .bzf__i.rv:not(.is-in) .bzf__n { transform: scale(0); }
.bzf__i.rv .bzf__t { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(min(var(--i, 0), 7) * 50ms); }
.bzf__i.rv .bzf__n { transition: transform 600ms var(--ease-expo-out) calc(min(var(--i, 0), 7) * 50ms), border-color 400ms var(--ease-out), color 400ms var(--ease-out); }
/* 循環図の切り替え：入ってくる箱の面は 140ms まで 0 のまま、その後 20ms で替える（字の色を替える 150ms をはさむ 1 コマ。D-4）。
   パネルの文の出始めは 70ms のまま（40ms にすると、出る文と入る文が 1366×650 で約 0.1 秒重なった。重ならないことを優先） */
.sec--cyc .cyc .cyc__node::before { transition: opacity 20ms linear 140ms; }
/* AI Securityサービスの冒頭：問い「なぜ、挑戦は止まるのか。」の直後に、答えの原文（問いと同じ太さ・色、一段大きく）。推奨 4 */
.hero__vow + .hero__vow--a { margin-top: -.1em; font-size: clamp(20px, 1.94vw, 28px); line-height: 1.6; }
@media (max-width: 599.98px) { .hero__vow + .hero__vow--a { font-size: 20px; } }
/* セキュリティコンサルティング・AI Securityサービス（1200px 以上）：前提の見出しを左の 6 列に大きく置き、本文を読む間も留める。本文は右の 5 列で、
   見出しの 3 行目（AI Securityサービスは 2 行目）の高さから始める（前提を先に読み、左半分を白のままにしない。推奨 5） */
@media (min-width: 1200px) {
  .about--seq .about__head, .about--statement .about__head { grid-column: 1 / span 6; grid-row: 1; position: sticky; top: calc(var(--header-h) + 40px); }
  .about--seq .about__b { grid-column: 8 / -1; grid-row: 1; margin-top: calc(clamp(26px, 3.6vw, 60px) * 2.8); }
  .about--statement .about__b { grid-column: 8 / -1; grid-row: 1; margin-top: calc(var(--fs-statement) * 1.45); }
}
/* セキュリティコンサルティングの前提の見出し：どの幅でも同じ大きさ（1440px で 52px、1920px で 60px、スマホ 26px）。行に分けると改行（br-d）が消えて「:has(br.br-d)」の 34px が外れ、
   分けた後に字が大きくなって 1 行の中で折れていた（行の塗りの単位がずれる）ため、分ける前と後の両方に同じ大きさを指定する */
.about--index.about--seq .about__h, .about--index.about--seq .about__h:has(br.br-d) { font-size: clamp(26px, 3.6vw, 60px); line-height: 1.4; }
/* 2300px 以上（2560 など）：器 2,120px に対して小さかった本文の段を一段上げる（本文 18 → 20px、リード 22 → 26px、循環のパネルの説明 21 → 26px、
   サービスの章の説明 18 → 22px、実績・ニュース・記事の題 20 → 22px、採用の帯の前置き 20 → 24px。推奨 3） */
@media (min-width: 2300px) {
  :root { --fs-body: 20px; --fs-lead: 26px; --fs-small: 15px; }
  .sec--biz3 .biz3__lead { font-size: 22px; }
  .sec--cyc .cyc__pd { font-size: 26px; }
  .sec--cyc .cyc__pb { font-size: 21px; }
  .cases--focus .case__sub { font-size: 22px; }
  .news__item:not(.is-lead) .news__t { font-size: 22px; }
  .acard .acard__t, .acard:first-child .acard__t { font-size: 22px; }
  .recruit__pre { font-size: 24px; }
  .manda__ps p { font-size: 24px; }
  .sec--b3 .st__lead { font-size: 30px; }
}
/* サービスの章の 3 つの小見出し（実行・供給の章）：14px 固定だったのを、画面に合わせて 15〜16px（2300px 以上は 18px）に */
.biz3__pts li { font-size: clamp(14px, 1.04vw, 16px); }
@media (min-width: 2300px) { .biz3__pts li { font-size: 18px; } }
/* 記事の詳細（1600px 以上）：「関連するサービス」を本文のすぐ右に寄せ、本文の字を 19px に（1920 で本文と右の段の間が約 500px 空いていた。推奨 7） */
@media (min-width: 1600px) {
  .article { grid-template-columns: minmax(0, 44em) minmax(0, 28rem); column-gap: clamp(80px, 6.25vw, 136px); justify-content: start; }
  .article > .article__body { grid-column: 1; max-width: none; font-size: 19px; }
  .article__body p { font-size: max(19px, var(--fs-body)); }
  .article > .article__side { grid-column: 2; }
}
/* 経営陣（1600px 以上）：2 人ずつ並べる（10 人が同じ形で縦に 10 段続き、右に空きが出ていた。推奨 8）。写真 5：本文 7 の組はそのまま */
@media (min-width: 1600px) {
  .execs:not(.execs--adv) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--col-gap) * 2.5); row-gap: clamp(64px, 4.4vw, 104px); }
  .execs:not(.execs--adv) .exec { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 2.2vw, 48px); }
  .execs:not(.execs--adv) .exec__ph { grid-column: 1; }
  .execs:not(.execs--adv) .exec__body { grid-column: 2; max-width: none; }
  .execs:not(.execs--adv) .exec__bio { font-size: 17px; line-height: 1.9; }
}
@media (min-width: 2300px) { .execs:not(.execs--adv) .exec__bio { font-size: 19px; } }
/* 図形の意味どおりの動き（最終監査 6 回目 推奨 1）：描き終えた後も、行為の線の上を光が始まりから終わりへ進み、着いた所が一度光る。
   CSIRT は光の点が 検知 → 分析 → 封じ込め → 復旧 と段階ごとに止まりながら回る。サービスの冒頭の図と、トップのサービスの舞台だけ（表紙やカードの小さな図では動かさない）。
   見えている間だけ動き、動きを止めたとき・動きを減らす設定では出さない */
.mf-comet, .mf-beat, .mf-halo, .mf-stepcos { display: none; }
html.mo:not(.motion-off) :is(.mf--hero, .mf--stage) :is(.mf-comet, .mf-beat, .mf-halo, .mf-stepcos) { display: inline; }
.mf-halo { fill: #83fbf1; fill-opacity: .22; }
.mf-comet { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 140; stroke-dashoffset: 8; vector-effect: non-scaling-stroke; opacity: 0; }
.mf-comet--g { stroke: #83fbf1; stroke-width: 9; stroke-opacity: .24; stroke-dasharray: 12 140; stroke-dashoffset: 12; }
.mf.is-in .mf-comet { opacity: 1; transition: opacity 400ms ease 1800ms; animation: mfComet var(--cd, 4.8s) cubic-bezier(.45, 0, .25, 1) var(--cdl, 2.2s) infinite both; }
.mf.is-in .mf-comet--g { animation-name: mfCometG; }
.mf.is-in .mf-comet--q { animation-name: mfCometQ; }
.mf.is-in .mf-comet--g.mf-comet--q { animation-name: mfCometGQ; }
@keyframes mfComet { 0% { stroke-dashoffset: 8; } 60%, 100% { stroke-dashoffset: -101; } }
@keyframes mfCometG { 0% { stroke-dashoffset: 12; } 60%, 100% { stroke-dashoffset: -101; } }
@keyframes mfCometQ { 0% { stroke-dashoffset: 8; } 30%, 100% { stroke-dashoffset: -101; } }
@keyframes mfCometGQ { 0% { stroke-dashoffset: 12; } 30%, 100% { stroke-dashoffset: -101; } }
.mf-beat { fill: none; stroke: #83fbf1; stroke-width: 1.4; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.mf.is-in .mf-beat { animation: mfBeat var(--cd, 4.8s) var(--ease-out) var(--bdl, 2.2s) infinite both; }
.mf.is-in .mf-beat--q { animation-name: mfBeatQ; }
@keyframes mfBeat { 0%, 59% { opacity: 0; transform: scale(1); } 61% { opacity: .95; transform: scale(1); } 86%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes mfBeatQ { 0%, 29% { opacity: 0; transform: scale(1); } 31% { opacity: .95; transform: scale(1); } 56%, 100% { opacity: 0; transform: scale(2.3); } }
html.mo:not(.motion-off) .mf.is-in .mf-step4 { animation: mfStep4 8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes mfStep4 { 0%, 17.5% { transform: rotate(4deg); } 25%, 42.5% { transform: rotate(94deg); } 50%, 67.5% { transform: rotate(184deg); } 75%, 92.5% { transform: rotate(274deg); } 100% { transform: rotate(364deg); } }
.mf:not(.is-live) :is(.mf-comet, .mf-beat, .mf-step4) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .mf .mf-comet, .mf .mf-beat, .mf .mf-halo, .mf .mf-stepcos { display: none !important; } }

/* ===== P42 理念の講評（36 回目）===== */
/* トップの 2 画面目：理由の 2 行（今日を守るから…／明日を描くから…）を両輪の行と同じ格に（1440 で 36px、1920 で 44px、スマホ 22px）。
   「攻め」と「守り」は 1440 で 48px、1920 で 56px に（色の塗りはそのまま）。「すべての明日は、…」がこの画面の山 */
.stmt2 .stmt2__b { font-size: clamp(22px, calc(12px + 1.667vw), 44px); line-height: 1.6; color: var(--ink-900); }
@media (min-width: 1200px) { .stmt2 .stmt2__b { grid-column: 1 / span 5; max-width: none; } }   /* 右の「攻め」と「守り」との間をあける（1920 で 20px まで寄っていた） */
@media (min-width: 600px) { .msg2 .msg2__h { font-size: clamp(36px, calc(24px + 1.667vw), 56px); } }
@media (min-width: 2200px) { .msg2 .msg2__h { font-size: clamp(56px, calc(24px + 1.667vw), 64px); } }
/* 経営理念の 8 つの原則：どの幅でも 1 文 1 行（「勝ちにこだわる。」／「成果で語る。」）。一覧を 1 列広げる */
.prs--2 .pr__s { display: block; }
@media (min-width: 1200px) { .pch--values .prs--2 { grid-column: 3 / span 9; } }
/* 経営理念（1600px 以上）：右の列の章の頂点の行は 48px（左に留めた章の名前と、山が 2 つ並んで見えないように） */
@media (min-width: 1600px) { .pst p.pst__k.pst__p48 { font-size: 48px; } }
/* スマホの循環図：375〜399px は中央の語と役割の名前を一段大きく（中央 12 → 14px、役割 14 → 15px。中央の語と点灯した箱の間 32px 以上）。
   375px 未満と、「知見の資産化」の箱が 1 行で幅の広い 400px 以上は、箱との間を保つため今のまま */
@media (min-width: 375px) and (max-width: 399.98px) { .sec--cyc .cyc__center { font-size: 14px; } .sec--cyc .cyc__k { font-size: 15px; } }
/* サービスの冒頭：理念の行を置いたリードは少し広く（「その手を止めずに、次の挑戦まで見据えて一手を打つ。」が 1366px でも 1 行に入る） */
@media (min-width: 900px) { .hero__lead:has(.hero__vow) { max-width: 36em; } }

/* ===== P43 最終監査 7 回目 ===== */
/* 送っている間は、カードとタイルもポインターに反応させない（記事・実績・お問い合わせのタイル・サービスのカードが、送る途中でホバーの形になっていた。D-1） */
/* 最終監査 8 回目 F-1：ここで切っていた pointer-events は外した（送った後 1.1〜1.3 秒、カードとタイルが押せなかった） */
/* 図の動き：見えていない間は止める（CSIRT の段階ごとに止まる点が、画面の外でも回っていた。D-5） */
html.mo:not(.motion-off) .mf.is-in:not(.is-live) :is(.mf-step4, .mf-stepcos) { animation-play-state: paused; }
/* 構想の図：光の点が経営課題から 4 つの段階を 1 つずつ下りる（1 周 8 秒。着いた段階が光る。トップのサービスの舞台の最初の図も、描いた後に止まらない。D-3） */
html.mo:not(.motion-off) .mf.is-in .mf-stepcos { animation: mfStepCos 8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes mfStepCos { 0% { transform: translateY(0); opacity: 0; } 2% { opacity: 1; } 10% { transform: translateY(0); } 16%, 30% { transform: translateY(66px); } 36%, 50% { transform: translateY(142px); } 56%, 70% { transform: translateY(218px); } 76%, 94% { transform: translateY(294px); opacity: 1; } 100% { transform: translateY(294px); opacity: 0; } }   /* 最終監査 8 回目：「経営課題」で 0〜10% 留まる */
/* 経営理念（2300px 以上）：8 つの原則を一段大きく（英名 32px、和文 26px。2560 で器の右 4 割が空いていた） */
@media (min-width: 2300px) { .prs--2 .pr__en { font-size: 32px; } .prs--2 .pr__ja { font-size: 26px; } }
/* 下層の冒頭（2300px 以上）：英字の大きな題を一段大きく */
@media (min-width: 2300px) { .hero--stage .hero__en { font-size: 100px; max-width: none; width: max-content; white-space: nowrap; } }   /* 最終監査 7 回目：2300px 以上で英字の大見出しを一段上げる（1 行のまま、図の手前で止まる長さ） */

/* 最終監査 7 回目 推奨 5：サービス一覧も「強み」と同じく、着いた行から罫を引いて名前を灯す（白い地なので、線は白い地の側のロゴの色。2 列では右の列が少し遅れて続く） */
[data-lines] > li { position: relative; }
[data-lines] > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, #138e9c, #2b5bd7 55%, #5b4cd5); transform-origin: 0 50%; transform: scaleX(0); transition: transform 900ms var(--ease-expo-out); pointer-events: none; }
[data-lines] > li.is-on::after { transform: scaleX(1); }
[data-lines] :is(.smenu__t, .issue__t, .news__t) { transition: color 600ms var(--ease-out); }
html.mo:not(.motion-off) [data-lines] > li:not(.is-on) :is(.smenu__t, .issue__t, .news__t) { color: var(--ink-400); }
@media (min-width: 900px) { .smenu[data-lines] > .smenu__c:nth-child(even)::after, .smenu[data-lines] > .smenu__c:nth-child(even) .smenu__t { transition-delay: 180ms; } }
html:not(.mo) [data-lines] > li::after, html.motion-off [data-lines] > li::after { transform: scaleX(1); transition: none; }
@media (prefers-reduced-motion: reduce) { [data-lines] > li::after { transform: scaleX(1); transition: none; } [data-lines] :is(.smenu__t, .issue__t, .news__t) { color: var(--ink-900) !important; transition: none; } }

/* ===== P44 理念の講評（37 回目・90 点）===== */
/* 900px 以上だけで折る改行（2 画面目の理由の 2 行を「から、」の後で折り、4 行の対句に） */
.br-w { display: none; } @media (min-width: 900px) { .br-w { display: inline; } }
/* 2 画面目：360px でも両輪の行を理由の行（22px）と同じ大きさに（20px で小さかった） */
@media (max-width: 379.98px) { .msg2 .msg2__p { font-size: 22px; } }
/* トップの『挑戦保障』の帯（1600px 以上）：右の列を一段大きく（1920 で、問い 34px・答え 40px・名付けの 2 行 34px・投資へ 44px、左の副題 44px。2 画面目の理由の行の 44px より小さかった） */
@media (min-width: 1600px) {
  .mission__sub { font-size: clamp(36px, 2.29vw, 52px); }
  .mission__line { font-size: clamp(20px, 1.25vw, 26px); }
  .mission__line.mission__line--q, .mission__line.mission__line--n { font-size: clamp(28px, 1.77vw, 40px); }
  .mission__line.mission__line--r { font-size: clamp(32px, 2.08vw, 46px); }
  .mission__line--k { font-size: clamp(36px, 2.29vw, 52px); }
}
/* 経営理念：「信頼の話です。」の中身の 2 行（目の前の一人に…／経営の意思決定を支え…）を本文より一段（24px の 500） */
.pst p.pst__t { font-size: clamp(18px, 1.67vw, 24px); font-weight: 500; line-height: 1.75; letter-spacing: .02em; color: var(--ink-900); font-feature-settings: "palt" 1; }
@media (max-width: 599.98px) { .pst p.pst__t { font-size: 18px; } }
@media (min-width: 2200px) { .pst p.pst__t { font-size: clamp(24px, 1.15vw, 28px); } }
/* 経営理念（1600px 以上）：前口上は 1 列で左に章の名前がないため、頂点の行「セキュリティを、誰もが憧れる仕事に。」は 56px のまま（右の列の章の頂点だけ 48px） */
@media (min-width: 1600px) { .pch--pro .pst p.pst__k.pst__p48 { font-size: 56px; } }
/* 循環の場面：固定が外れた直後の「すべての挑戦者に、『挑戦保障』を。」（1440 で 36px、1920 で 44px、スマホ 22px） */
.sec--cyc .cyc__why { margin: clamp(72px, 8vw, 128px) 0 0; font-size: clamp(22px, 2.5vw, 44px); font-weight: 500; line-height: 1.5; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; text-spacing-trim: trim-start; }
.sec--cyc .cyc__why + .cyc__work { margin-top: clamp(40px, 4.4vw, 72px); }
@media (max-width: 899.98px) { .sec--cyc .cyc__why { margin-top: 64px; } .sec--cyc .cyc__why + .cyc__work { margin-top: 40px; } }
/* スマホの循環図（360〜599px）：中央の語 14px・役割の名前 15px にそろえる（400〜430px は 12px と 14px で、大きいスマホほど字が小さかった）。
   「知見の資産化」の箱は 599px まで 2 行（知見の／資産化）にして細くし、中央の語との間を保つ。360px 未満は今のまま */
@media (min-width: 360px) and (max-width: 599.98px) {
  .sec--cyc .cyc__center { font-size: 14px; }
  .sec--cyc .cyc__k { font-size: 15px; }
  .sec--cyc .cyc__node--3 .cyc__k { white-space: normal; max-width: 3.3em; line-height: 1.25; }
  .sec--cyc .cyc__node--3 { --tx: -50%; }
}

/* ===== P45 最終監査（8 回目・デザイン 88 点）===== */
/* F-2：トップの冒頭（900px 以上・動きあり）。退場で上がるスローガンを、透明のヘッダーの帯に入れない。帯の位置に画面に固定したマスク（動きと一緒にずれる分を足して打ち消す）。
   送る前（--hx = 0）はマスクの幅を 0 にして、スローガンを欠かさない（退場の 1 割で、帯の幅いっぱいになる） */
@media (min-width: 900px) {
  html.mo:not(.motion-off) .hvh__in {
    --hmk: min(1, calc(var(--hx, 0) * 10));
    -webkit-mask-image: linear-gradient(180deg, transparent calc((var(--header-h) + 6px) * var(--hmk) + var(--hx, 0) * 12vh), #000 calc((var(--header-h) + 64px) * var(--hmk) + var(--hx, 0) * 12vh));
            mask-image: linear-gradient(180deg, transparent calc((var(--header-h) + 6px) * var(--hmk) + var(--hx, 0) * 12vh), #000 calc((var(--header-h) + 64px) * var(--hmk) + var(--hx, 0) * 12vh));
    -webkit-mask-clip: no-clip; mask-clip: no-clip;   /* 箱の外（スローガンの左の字の張り出し）を切らない */
  }
}
/* 推奨 2：下層のヘッダーは、地をフェードさせずに付ける（送り始めの数コマ、字がまだ透明に近い地の上を通っていた）。トップの映像の上はフェードのまま */
html.hdr-snap .header { transition: transform 360ms var(--ease-out) !important; }
/* 推奨 3：8 つの原則（390px 未満）。番号の列を 32px（360px 未満は 28px）にし、和文を 17px（360px 未満は 16px）、英名を 360px 未満で 20px に（375px と 320px で、文の途中で折れていた） */
@media (max-width: 389.98px) { .prs--2 .pr { grid-template-columns: 32px minmax(0, 1fr); } .prs--2 .pr__ja { font-size: 17px; } }
@media (max-width: 359.98px) { .prs--2 .pr { grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; } .prs--2 .pr__ja { font-size: 16px; } .prs--2 .pr__en { font-size: 20px; } }
/* 推奨 5：人材マッチングの事例（6 件以上）は、罫を引く 2 列の一覧に（サービス一覧と同じ部品。題は 500 の字） */
.smenu--cases .smenu__t { font-weight: 500; }
.smenu--cases .smenu__w { display: block; margin-bottom: 4px; font-size: var(--fs-small); color: var(--ink-500); }

/* ===== P46 理念の講評（38 回目・91 点）===== */
/* 循環の場面の一行「すべての挑戦者に、『挑戦保障』を。」：図の側に寄せ（上の間 1440 で 56px・1920 で 64px）、Secure／Design との間を広げ（112px・128px）、一段大きく（44px・52px、スマホ 28px の 2 行）。
   PC で次の 2 列の見出しに見えていた。締めの「今日を守り、明日を築く。」より小さく、「それがSecure。」より大きい段 */
.sec--cyc .cyc__why { margin-top: clamp(56px, 3.34vw, 64px); font-size: clamp(28px, 3.06vw, 52px); line-height: 1.45; }
.sec--cyc .cyc__why + .cyc__work { margin-top: clamp(112px, 6.67vw, 128px); }
@media (max-width: 899.98px) { .sec--cyc .cyc__why { margin-top: 40px; } .sec--cyc .cyc__why + .cyc__work { margin-top: 64px; } }
/* 2 画面目の理由の 2 行：スマホとタブレットでも「から、」の後で折って 4 行の対句に（各行 13 字以内。スマホで 1 つ目が 1 行・2 つ目が 2 行になっていた） */
.stmt2__b .br-w { display: inline; }
.stmt2__b .br-m { display: none; }
/* トップの『挑戦保障』の帯（1600〜1919px）：答えを 2 画面目の理由の行（1600 で 38.7px）より下げない（1600 で、問い・名前の行 32px、答え 38px、投資へと副題 40px。1920 は 34・40・44px のまま） */
@media (min-width: 1600px) {
  .mission__line.mission__line--q, .mission__line.mission__line--n { font-size: clamp(32px, calc(24px + .52vw), 40px); }
  .mission__line.mission__line--r { font-size: clamp(38px, calc(30px + .52vw), 46px); }
  .mission__line--k, .mission__sub { font-size: clamp(40px, calc(20px + 1.25vw), 52px); }
}

/* ===== P47 最終監査（9 回目・デザイン 91 点・公開可）===== */
/* 推奨 1：キットのホバー（3 つの入口の矢印、ムービーの面）も、送っている間は付けない（キットの CSS は書き換えず、ここで打ち消す。広がる途中のムービーの面の大きさには触れない） */
html.is-scrolling .xp__item:hover .xp__go { transform: none; }
html.is-scrolling .movie-stage:not(.is-expand) .movie__poster:hover .movie__img { transform: scale(1.02); }
html.is-scrolling .movie__poster:hover .movie__play { transform: none; }
html.is-scrolling .movie__poster:hover .movie__ring { inset: -10px; opacity: 1; }
html.is-scrolling .textlink:hover { background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; }
/* 推奨 9：2200px 以上で、経営理念の冒頭と結びの題を一段上げる（2560 で器の 46% しか使っていなかった） */
@media (min-width: 1920px) { .hero--pvow .pvow__h, h2.pclose__v { font-size: clamp(100px, calc(100px + (100vw - 1920px) * .04375), 128px); } }   /* 1920px の 100px から 2560px の 128px へ、段差なく上げる（最終監査 9 回目 推奨 9） */

/* ---- 39 回目の講評の反映（第 50 版） ---- */
/* トップのビジョンの帯：「信頼の話です。」の中身（原文の定義の 2 行）。経営理念のページと同じ太さ 500。1440px 24px・1920px 28px・スマホ 18px */
.vision__def { display: grid; justify-items: start; gap: .25em; margin: clamp(20px, 1.67vw, 32px) 0 0; font-size: clamp(18px, calc(12px + .8333vw), 32px); font-weight: 500; line-height: 1.6; letter-spacing: .02em; color: #fff; font-feature-settings: "palt" 1; }
.vision__def + .vision__p { margin-top: clamp(32px, 2.8vw, 48px); }
@media (max-width: 899.98px) { .vision__def { font-size: 18px; margin-top: 20px; } .vision__def + .vision__p { margin-top: 32px; } }
/* 循環の場面の一行：600px 未満は 30px（「それがSecure。」26px → 一行 30px → 結び 32px の段に。2 行のまま、各行 9 字以内） */
@media (max-width: 599.98px) { .sec--cyc .cyc__why { font-size: 30px; } }

/* ---- 最終監査 10 回目の反映（第 50 版） ---- */
/* B-2：送っている間は、本文とフッターのボタンにホバーの形を付けない（corp.css のホバーの規則は :where で止め、キットの「副ボタンのホバーで白い地」もここで止める） */
html.is-scrolling :is(main, footer) .btn--ghost:hover { background: transparent; }
/* B-4：事例カードは、登場の前は枠も見せない（中身のない白い角丸の枠だけが、画面の下に出ていた）。登場と同時に地をフェードする */
html.mo .case.rv:not(.is-in) { background-color: transparent; }
.case.rv { transition: clip-path 900ms var(--ease-out) calc(var(--i, 0) * 90ms), background-color 520ms var(--ease-out) calc(var(--i, 0) * 90ms); }
/* B-5：トップの『挑戦保障』の帯（1200px 以上）。名前の定義を読んでいる間も、左の列（名前・副題・ボタン）を画面に留める（経営理念のページの同じ節と同じ作り） */
@media (min-width: 1200px) { .mission__head { position: sticky; top: calc(var(--header-h) + 56px); } }
/* B-6：1920px から 2560px へ、締めの行を段差なく一段上げる（2560px で「今日を守り、明日を築く。」120px・「すべての挑戦者に、…」64px・採用の見出し 88px） */
@media (min-width: 1920px) {
  .sec--cyc .cyc__cap--work { font-size: clamp(85.44px, calc(85.44px + (100vw - 1920px) * .03), 104px); }   /* 2560px で 104px（120px ではフッターのスローガン 117px と採用の見出しを追い越していた。最終監査 13 回目 推奨 8） */
  .sec--cyc .cyc__why { font-size: clamp(52px, calc(52px + (100vw - 1920px) * .01875), 64px); }
  h2.recruit__p { font-size: clamp(72px, calc(72px + (100vw - 1920px) * .025), 88px); }
}
/* 推奨 8：採用の帯（900px 以上）。写真の下の約 4 分の 1 を紺に溶かし切り、文字はその紺の地に置く（人の顔と体の上に文字を置かない。制作メモ 4 章の「写真」と同じ） */
@media (min-width: 900px) {
  .recruit__ph, .recruit__shade { height: clamp(520px, 80svh, 860px); }
  .recruit__shade { background: linear-gradient(180deg, rgba(5,9,20,0) 0, rgba(5,9,20,0) 52%, rgba(5,9,20,.5) 62%, rgba(5,9,20,.88) 70%, #050914 75%, #050914 100%); }
  .recruit__in { margin-top: calc(clamp(520px, 80svh, 860px) * -.22); }
}

/* ---- 40 回目の講評の反映（第 51 版） ---- */
/* トップの採用の帯：前口上の冒頭 2 行（黒子として）を、見出しの添え書きではなく物語の前半の段に（1440px 24px・1920px 28px・スマホ 17px。ビジョンの帯の定義の 2 行と同じ段） */
@media (min-width: 900px) { .recruit__pre { font-size: clamp(20px, calc(12px + .8333vw), 32px); } }
@media (max-width: 899.98px) { .recruit__pre { font-size: 17px; } }

/* ---- 最終監査 11 回目の反映（第 51 版） ---- */
/* N-3：「攻め」「守り」の塗りの境目を 0.6em ぼかす（掃いている途中の字が欠けて見えないように）。--pan・--pbn は 0〜1（corp.js） */
.msg2__a { background: linear-gradient(90deg, var(--fa) 0, var(--fb) 52%, var(--fc) calc(100% - .6em), transparent 100%) 0 0 / calc((100% + .6em) * var(--pan, 0)) 100% no-repeat, linear-gradient(var(--ink-300), var(--ink-300)); -webkit-background-clip: text; background-clip: text; }
.msg2__b { background: linear-gradient(90deg, var(--ink-900) 0, var(--ink-900) calc(100% - .6em), transparent 100%) 0 0 / calc((100% + .6em) * var(--pbn, 0)) 100% no-repeat, linear-gradient(var(--ink-300), var(--ink-300)); -webkit-background-clip: text; background-clip: text; }
html:not(.mo) .msg2, html.motion-off .msg2 { --pan: 1 !important; --pbn: 1 !important; }
@media (prefers-reduced-motion: reduce) { .msg2 { --pan: 1 !important; --pbn: 1 !important; } }
/* N-2：罫で組んだ表（認証・加盟団体、パートナー企業）は、最初のマスが出るまで外枠の罫も見せない（中身のない枠だけが画面の下に出ていた） */
html.mo :is(.trust__logos, .trust__certs):not(:has(> .is-in)) { border-color: transparent; }
:is(.trust__logos, .trust__certs) { transition: border-color 600ms var(--ease-out); }
/* 推奨 5：実績の数字を、1680px から段差なく大きく（1920px で約 85px、2120px 以上で 96px。数字は今の実数のまま） */
@media (min-width: 1680px) { .stats--case .num { font-size: clamp(72px, calc(72px + (100vw - 1680px) * .0545), 96px); } }
/* 推奨 6：会社概要の表（1440px 以上）は、項目名 15px・内容 16px に（本文 16〜17px とそろえる） */
@media (min-width: 1440px) { .kv > dt { font-size: 15px; } .kv > dd { font-size: 16px; } }
/* N-5：600px の境で字が小さくならないように（「すべての挑戦者に、…」は 979px まで 30px、誓いとビジョンの見出しは 600px で 40px から） */
@media (max-width: 1919.98px) { .sec--cyc .cyc__why { font-size: clamp(30px, 3.06vw, 52px); } }
@media (min-width: 600px) and (max-width: 899.98px) { .vow__h, .vision__h { font-size: clamp(40px, 7vw, 63px); } }   /* 900px の 63px まで段差なく */
/* 推奨 2：採用の帯（1200px 以上）を一枚の構図に。前置きの 2 行は文の順のまま見出しの上に、見出しは器の幅を使う大きさ（1920px で約 104px）、ボタンは見出しの最後の行の右に下端をそろえる */
@media (min-width: 1200px) {
  .recruit__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(40px, 4vw, 96px); align-items: end; }
  .recruit__in > * { grid-column: 1 / -1; }
  .recruit__in > h2.recruit__p { grid-column: 1; font-size: clamp(72px, 5.4vw, 120px); max-width: none; }
  .recruit__in > .btns { grid-column: 2; align-self: end; margin: 0 0 .9em; }
}


/* ---- ご依頼（2026-10-23）：いちばん大きい字を 1〜2 段下げる（第 51 版） ---- */
/* 1920×900 で 120px を超えていた字（トップの『挑戦保障』144px、フッターのスローガン 137px、誓いとビジョン 134px、冒頭のスローガン 127px、経営理念の『挑戦保障』123px。1440px では経営理念の『挑戦保障』160px）を約 2 割小さく。
   段の順を保つため、その下の段（採用の帯の見出し、会社紹介と経営理念の『挑戦保障』の次の段、経営理念の誓い）も 1 段だけ下げる。900px 未満は変えない。どの式も 900px で今の大きさにつなぐ */
@media (min-width: 900px) {
  .mission__h { font-size: clamp(72px, calc(36.7px + 3.92vw), 140px); }   /* 1440px 93px・1920px 112px・2560px 137px（もとは 120・144・200） */
  .vow__h, .vision__h { font-size: clamp(63px, calc(25px + 4.22vw), 136px); }   /* 1440px 86px・1920px 106px・2560px 133px（もとは 101・134・176） */
  .hvh .hvh__mark { font-size: max(40px, min(calc(var(--mk) * var(--hk, 1)), 88px), calc(var(--mk) * var(--hk, 1) * .79)); }   /* 88px を超える分だけ 0.79 倍に（1920×900 で 100px、もとは 127px） */
  .footer__mark-in { font-size: min(calc(min(100vw - var(--gutter) * 2, var(--maxw)) / var(--mark-k, 12.05)), calc(30px + 4vw)); }   /* 1440px 88px・1920px 107px（もとは 110・137）。器の左にそろえる */
  .pch__name { font-size: clamp(72px, calc(16px + 6vw), 112px); }   /* 経営理念の『挑戦保障』（1600px 未満は全幅の見出し）：1440px 102px（もとは 160px） */
  .hero--pvow .pvow__h, h2.pclose__v { font-size: clamp(62px, min(6.25vw, calc(80px + .625vw)), 104px); }   /* 経営理念の誓い：1440px 89px・1920px 92px（もとは 99・100） */
  .xp__ph--type .xp__mark { font-size: clamp(36px, 13cqi, 92px); }   /* 会社紹介の『挑戦保障』：1920px 92px（もとは 104px） */
}
@media (min-width: 1200px) { .recruit__in > h2.recruit__p { font-size: clamp(60px, calc(20px + 3.405vw), 96px); } }   /* 採用の帯：1440px 69px・1920px 85px（声明と同じ段）・2560px 96px（第 51 版は 71・88・104、もとは 78・104） */
@media (min-width: 900px) and (max-width: 1199.98px) { h2.recruit__p { font-size: clamp(36px, calc(-41px + 8.5vw), 61px); } }   /* 900px 36px・1024px 46px・1199px 61px（1200px の 61px へ段差なく。前は 1199px 47px → 1200px 62.5px と 34% 跳んでいた） */
@media (min-width: 1600px) { .pch__head .pch__name { font-size: clamp(88px, calc(44px + 3.14vw), 120px); } }   /* 経営理念の『挑戦保障』（左の 5 列）：1920px 104px（もとは 123px） */

/* ---- 41 回目の講評の反映（第 52 版） ---- */
/* 改善 5：900px 未満の循環の場面では、「すべての挑戦者に、『挑戦保障』を。」を、パネルが知見の資産化に切り替わってから出す（スマホでは、実行や供給を見ている間に一行が出ていた）。
   is-ready は corp.js が、送りの位置が知見の資産化の窓に入ったときに付ける。動きを止めたとき・視差効果を減らす設定では、はじめから見せる */
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  html.mo:not(.motion-off) .sec--cyc .cyc__why:not(.is-ready) { opacity: 0 !important; }
}
/* 改善 8：循環のパネルの役割の名前を、誓いとビジョンより 1 段下に（1920px 96 → 88px、390px 43 → 36px。1440px の 72px と図の大きさは変えない） */
@media (max-width: 599.98px) { .sec--cyc .cyc__pk { font-size: clamp(28px, 9.2vw, 36px); } }
@media (min-width: 600px) and (max-width: 899.98px) { .sec--cyc .cyc__pk { font-size: clamp(36px, 6vw, 48px); } }   /* 900px の 48px まで段差なく */
@media (min-width: 1800px) { .sec--cyc .cyc__pk { font-size: clamp(88px, calc(88px + (100vw - 1920px) * .0125), 96px); } }
/* 改善 7：経営理念の章の名前をそろえる。1600px 以上はビジョン・スローガン・Values を同じ 72px に（スローガンと Values が 88px で、ビジョンだけ 72px だった）。
   スマホと 600〜899px も、ビジョンと同じ大きさに */
@media (min-width: 1600px) { .pch__head .pch__slogan, .pch__values { font-size: clamp(56px, 3.8vw, 72px); } }
@media (min-width: 600px) and (max-width: 899.98px) { .pch__slogan, .pch__values { font-size: clamp(44px, 5.8vw, 88px); } }
@media (max-width: 599.98px) { .pch__slogan, .pch__values { font-size: clamp(34px, 9.3vw, 36px); } }
@media (max-width: 359.98px) { .pch__slogan, .pch__values { font-size: 30px; } }
/* 改善 7：1600px 以上の章の頂点の行（「すべての挑戦者に、…」「挑む人の隣に…」「今日を守り、明日を築く。」）を 48 → 56px に。前口上の頂点、「評価も採用も、この8つが基準です。」、Integrity の行と同じ段（1440px の 55px とも段差なく） */
@media (min-width: 1600px) { .pst p.pst__k.pst__p48 { font-size: 56px; } }

/* ---- 最終監査 12 回目の反映（第 52 版） ---- */
/* P-1：トップの冒頭は、送っている間 sticky で本文の裏に残る。本文に覆われたら（is-covered。corp.js）、冒頭の層ごと描画から外し、粒子などの動きも止める。
   画面の外にある循環図の輪の回転と、ゼロトラストの図の流れも止める（is-off） */
.hvh.is-covered { visibility: hidden; }
.hvh.is-covered *, .hvh.is-covered *::before, .hvh.is-covered *::after { animation-play-state: paused !important; }
[data-cyc-corp].is-off .cyc__inner, .ztd.is-off .ztd__flow path { animation-play-state: paused; }
/* 推奨 3：誓いとビジョンの帯（1280px 以上。第 52 版は 1440px 以上、最終監査 13 回目 推奨 10 で 1280px へ）を 2 列に。見出しは左、続きの文は右の列に置き、下端を見出しの最後の行にそろえる（採用の帯と同じ組み。文の順は変えない）。
   右の列は、誓いは 10〜12 列（見出しの 2 行目がいちばん長い）、ビジョンは 9〜12 列（「それは看板の話ではありません。」が 1 行に入る幅） */
@media (min-width: 1280px) {
  .vow__in, .vision__in { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .vow__in > *, .vision__in > * { grid-column: 1 / -1; min-width: 0; }
  .vow__in > .vow__h { grid-column: 1 / span 9; grid-row: 1; }
  .vow__in > .vow__side { grid-column: 10 / -1; grid-row: 1; align-self: end; margin-bottom: clamp(10px, .8vw, 20px); }
  .vow__side > .vow__p { margin-top: 0; }
  .vision__in > .vision__h { grid-column: 1 / span 8; grid-row: 2; }
  .vision__in > .vision__trust { grid-column: 9 / -1; grid-row: 2; align-self: end; margin: 0 0 clamp(10px, .8vw, 20px); }
}
.vow__more .btn { margin: 0; }
/* 推奨 3：採用の帯のボタンは器の右端ではなく 9 列目の頭に（見出しから離れて浮かないように） */
@media (min-width: 1200px) {
  .recruit__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .recruit__in > h2.recruit__p { grid-column: 1 / span 8; }
  .recruit__in > .btns { grid-column: 9 / -1; justify-self: start; }
}
/* N-4（残り）：2 画面目の理由の 2 行は 0.3 秒で出す（0.9 秒かけて出る間に「攻め」が掃き始め、速く送ると、理由が薄いまま 2〜3 コマ掃けていた） */
html.mo .stmt2__b.rv { transition-duration: 300ms; }
/* 推奨 7：フッターのスローガンは、1440px 以上で 12 列のうち 8 列ちょうどの幅に（ビジョンと採用の見出しの列と同じ。器の 77% で止まって見えていた）。
   1920px で 91px、1440px で 72px。900〜1439px は 68〜72px で段差なく（900px 未満は変えない） */
@media (min-width: 900px) { .footer__mark-in { font-size: calc(62.4px + .6667vw); } }
@media (min-width: 1440px) { .footer__mark-in { font-size: calc(((min(100vw - var(--gutter) * 2, var(--maxw)) + var(--col-gap)) * .6667 - var(--col-gap)) / var(--mark-k, 12.05)); } }
/* 小さい字：実績の単位（名超・社・名）は 13px 以上に（スマホで 10.9px だった）。フォームの「必須」の印は 12px に */
.num .unit, .num .pre { font-size: max(13px, .32em); }
.f__req { font-size: 12px; }

/* ---- 42 回目の講評の反映（第 53 版） ---- */
/* 改善 6：誓いの帯（1280px 以上）は、結びを見出しの最後の行の右に下端をそろえて置き、ボタンはその下へ（結びが見出しの 1 行目の横に浮き、ボタンの前置きに見えていた）。
   結びは「それが、」の後だけで折る（「私たちの誓いです。」を 1 行に） */
@media (min-width: 1280px) {
  .vow__in > .vow__side { display: contents; }
  .vow__side > .vow__p { grid-column: 10 / -1; grid-row: 1; align-self: end; margin: 0 0 clamp(8px, .7vw, 16px); }
  .vow__side > .vow__more { grid-column: 10 / -1; grid-row: 2; margin: clamp(14px, 1.1vw, 24px) 0 0; }
}
/* 改善 7：ビジョンの帯の右の列は「それは看板の話ではありません。」を 1 行に。字の大きさは、9〜12 列の幅 ÷ 14.6 字分を上限にする（最終監査 13 回目 N-10：器の幅が頭打ちになる 1680〜1799px で、字だけが大きくなり続けて 3 行に割れていた）。
   スマホの「信頼の話です。」は 24px（「挑む人の隣に…」と同じ） */
@media (min-width: 1280px) { .vision__in > .vision__trust .vision__tp { white-space: nowrap; font-size: min(clamp(20px, 1.94vw, 34px), calc(((min(100vw - var(--gutter) * 2, var(--maxw)) + var(--col-gap)) / 3 - var(--col-gap)) / 14.6)); } }
@media (max-width: 899.98px) { .vision__tt { font-size: 24px; } }
/* 改善 7：右の列（誓いの結びとボタン、ビジョンの看板と信頼の 2 行）は、見出しの最後の行が 9 割満ちてから出す（答えが、問いの 2 行目より先に読める状態だった。最終監査 13 回目 N-11 で 8 割から 9 割へ） */
@media (min-width: 1280px) {
  html.mo:not(.motion-off) :is(.vow__side > .vow__p, .vow__side > .vow__more, .vision__in > .vision__trust).rv:not(.is-ready) { opacity: 0 !important; }
}
/* 段：経営理念の章の頂点の行・前口上の頂点・「評価も採用も、…」・Integrity の行は、1600px 以上で 48px から 1920px の 56px へ（章の名前 61〜72px との比を 1.27〜1.29 に保つ） */
@media (min-width: 1600px) {
  .pst p.pst__k.pst__p48, .pch--pro .pst p.pst__k.pst__p48, .pch__vh, .pinteg--stack .pinteg__t { font-size: clamp(48px, calc(48px + (100vw - 1600px) * .025), 56px); }
}

/* ---- 最終監査 13 回目の反映（第 53 版） ---- */
/* P-2：冒頭の粒子は、送り始めたら（ヒーローの高さの 15% を過ぎたら）止める。止めたコマの粒子は残るので、見た目はほぼ変わらない。
   最初の 2 秒の描画が 1 秒 30 コマに届かない環境（GPU のない PC・仮想デスクトップ）では、はじめから止めた形で出す（lowfx。corp.js） */
.hvh.is-leaving .hv__grain { animation-play-state: paused; }
html.lowfx .hv__grain { animation: none; }
/* 推奨 6：締めのお問い合わせの帯。6 つの窓口の枠を、1 枚ずつ左上から右回りに光でなぞり（0.9 秒）、なぞり終える前に矢印を右へ 8px 送って置く（corp.js 6-11）。
   なぞる線はなぞり終えたら消え、もとの細い枠が残る。動きを止めた状態と「動きを減らす」設定では、はじめから置いた形 */
.ctile__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ctile__ln { position: absolute; z-index: 1; left: -1px; top: -1px; max-width: none; max-height: none; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 160ms linear; }   /* 枠の外側の端まで（img・svg の max-width: 100% で縮まないように） */
.ctile__ln.is-on { opacity: 1; }
.ctile__ln.is-out { opacity: 0; transition: opacity 700ms var(--ease-out); }
.ctile__ln rect { fill: none; stroke: url(#ctile-g); stroke-width: 1.5; stroke-linecap: butt; transition: stroke-dashoffset 900ms cubic-bezier(.65, 0, .35, 1); }   /* 白い地の一覧（お問い合わせ トップ）は corp.js が濃い色（#ctile-gi）を指定する */
.ctiles.is-armed .ctile .ctile__go { transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-expo-out); }
.ctiles.is-armed .ctile:not(.is-drawn) .ctile__go { opacity: 0; transform: translateX(-8px); }
html.motion-off .ctile__ln { display: none; }
html.motion-off .ctiles.is-armed .ctile .ctile__go { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .ctile__ln { display: none; } .ctiles.is-armed .ctile .ctile__go { opacity: 1; transform: none; transition: none; } }
/* N-11：右の列は、見出しを言い切ってから 1 拍（0.15 秒）おいて出す（2 列の 1280px 以上） */
@media (min-width: 1280px) {
  html.mo .vow__side > .vow__p.rv, html.mo .vision__in > .vision__trust.rv { transition-delay: 150ms; }
  html.mo .vow__side > .vow__more.rv { transition-delay: 230ms; }
}

/* ---- 43 回目の講評の反映（第 54 版） ---- */
/* 改善 3：ビジョンの帯（2 列の 1280px 以上）は、見出しを言い切ってから「それは看板の話ではありません。信頼の話です。」（0.15 秒）→ 定義の 2 行（0.45 秒）→「挑む人の隣に…」（0.65 秒）→ 結び（0.8 秒）の順に出す。
   is-ready は corp.js が、見出しの最後の行が 9 割満ちたときに付ける。動きを止めた状態と「動きを減らす」設定では、はじめから見せる */
@media (min-width: 1280px) {
  html.mo:not(.motion-off) :is(.vision__in > .vision__def, .vision__in > .vision__p, .vision__in > .vision__tail).rv:not(.is-ready) { opacity: 0 !important; }
  html.mo .vision__in > .vision__def.rv { transition-delay: 450ms; }
  html.mo .vision__in > .vision__p.rv { transition-delay: 650ms; }
  html.mo .vision__in > .vision__tail.rv { transition-delay: 800ms; }
}

/* ---- 最終監査 14 回目の反映（第 54 版） ---- */
/* D-2：2200px 以上で、使命の一文の「創ります。」、お問い合わせの帯の案内の「ください。」、実績の説明の「支援します。」だけが最後の行に残っていた。行の長さをそろえて折る（対応していないブラウザーでは今の折り方のまま）。
   小さい折り返し（AI Security サービスの強み、M&A の実施方針、Talent Acquisition の提供価値の見出し）も同じ */
.mission__line, .close__lead, .case__sub, .nrow__t, .val__t { text-wrap: balance; }
@media (max-width: 599.98px) { .st__ja { text-wrap: balance; } }
/* D-4：キーボードで誓いのボタンに移ったときは、見出しの塗りを待たずにすぐ見せる（透明なボタンにフォーカスが残っていた） */
html.mo:not(.motion-off) .vow__in .vow__side > .vow__more.rv:focus-within { opacity: 1 !important; transform: none !important; transition: none !important; }   /* 右の列を隠す規則（!important）より強く */
/* ご指摘（2026-10-24 08:44）：冒頭のスローガン「Design tomorrow」の g の下が切れていた。グラデーションの字（background-clip: text）は、字の箱（行の高さ 0.95em）の中だけに色が付くため、
   箱より下に出る g の下の部分が透明になっていた。字の箱と、せり上がりの覆い（.m）を、下へ 0.3em 広げる（負の余白で打ち消すので、行の位置と大きさは変わらない） */
.hvh__line .m { padding-bottom: .3em; margin-bottom: -.3em; }
.hvh__line--b .mi { padding-bottom: .3em; margin-bottom: -.3em; }

/* ---- 44 回目の講評の反映（第 55 版） ---- */
/* 改善 7：キーボードで誓いのボタンに来たときは、結び「それが、私たちの誓いです。」も一緒に見せる（ボタンだけが結びより先に見えていた） */
html.mo:not(.motion-off) .vow__in:focus-within .vow__side > .vow__p.rv { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---- 最終監査 15 回目の反映（第 55 版） ---- */
/* 推奨 1：下層の冒頭の案内文と理念の行、実績の題で、最後の行に 2 字だけが残らないように行の長さをそろえる（「…リスクアセスメントを／実施」「…プロフェッショナルである／こと。」「…戦略コンサルティング／支援」） */
.hero__lead, .case .case__what { text-wrap: balance; }
/* 実績の題（クイック AI の 3 件の札）：「リスクアセスメントの実施」（12 字）が 1 行に収まるようにする（収まらない幅では「実施」だけが次の行に残っていた）。
   900〜1099px は札の幅（209〜265px）に合わせて字を 16〜20px に。360〜389px は（ほかの実績の一覧も）左の図形を 88px から 72px にして文の幅を 204〜233px に */
@media (min-width: 900px) and (max-width: 1099.98px) { .cases--3 .case .case__what { font-size: min(20px, calc(2.1vw - 2.6px)); } }
@media (min-width: 360px) and (max-width: 389.98px) { .cases--vis:not(.cases--focus) .case { grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; } }   /* 戦略コンサルティングの「…戦略コンサルティング支援」も、375px で「支援」だけが残っていた */
/* 文字だけの特長の帯の見出し（CSIRT・ゼロトラスト・M&A、380〜599px）：2 行目「CSIRT構築支援サービスで解決!」（14.5 字幅）が 1 行に入る大きさにする（28px のままでは「解決!」だけが 3 行目に残っていた） */
@media (min-width: 380px) and (max-width: 599.98px) { .sec--feat-text .st--feat .st__ja.feat__h { font-size: min(var(--fs-h1), calc((100vw - 40px) / 14.8)); } }
/* 冒頭の理念の行（セキュリティ顧問サービス、359px 以下）：「プロフェッショナルであること。」（15 字）が 1 行に入る 18px に（19px では「こと。」だけが残っていた） */
@media (max-width: 359.98px) { .hero__vow { font-size: 18px; } }
/* 推奨 2：動きを止めたとき・「視差効果を減らす」設定のとき（html に mo がないとき）は、循環図の 4 つの役割の説明を全部並べて見せる
   （前は「構想」の 1 枚だけが見え、実行・供給・知見の資産化はタブを押さないと読めなかった）。図の 4 つの札は同じ明るさにし、いまの役割を示す光の点とタブは出さない。
   トップの知見の資産化の 2 行目（「…知見が、また構想に還ります。」）は、見出しの下の一文と同じ文のため、この状態では省く（サービス紹介 トップのパネルには、はじめからこの行がない） */
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__slides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 3.2vw, 60px) clamp(28px, 2.6vw, 52px); align-items: start; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__slide { grid-area: auto; gap: 6px; opacity: 1; transform: none; pointer-events: auto; transition: none; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pk { font-size: clamp(32px, 2.5vw, 48px); }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pb { font-size: clamp(14px, 1vw, 17px); }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pd { margin-top: 6px; font-size: clamp(16px, 1.1vw, 19px); line-height: 1.85; max-width: 22em; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] :is(.cyc__pd--back, .cyc__tabs) { display: none; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] :is(.cyc__dot, .cyc__halo) { display: none; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__arc { opacity: .72; stroke-width: 2; filter: none; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__node { opacity: 1; --s: 1; background: rgba(255,255,255,.06); border-color: rgba(143,230,239,.42); box-shadow: none; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__node::before { opacity: 0; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__node .cyc__k { color: #fff; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__node .cyc__b { color: rgba(159,227,240,.9); }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__node:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--teal-400); }
@media (min-width: 900px) and (max-width: 1199.98px) {   /* 右の列が狭い幅では、図の下に 2 列で並べる */
  html:not(.mo) .sec--cyc .cyc[data-cyc-corp] { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__fig { width: min(100%, 560px); justify-self: center; }
  html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__panel { width: 100%; }
}
@media (min-width: 1200px) and (max-width: 1799.98px) { html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__slides { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 2.2vw, 40px); } }   /* 図の右の列が 2 列には狭い幅（1800px 未満。2 列では 1600px でも説明が 3 行に折れた）は、縦に 1 列：構想から順に、図の回る順で読める */
@media (max-width: 599.98px) { html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__slides { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
/* 推奨 4：スローガンと冒頭の H1 の間を、スローガンの大きさに比例させる（g の尾から H1 までが、44px でも 180px でも 22px で一定だったため、大きな画面で尾が H1 に触れそうに見えた）。
   2 列の組み（1200px 以上・高さ 860px 以下）は H1 が右の列にあるため除く */
.hvh__mark { padding-bottom: .12em; }
@media (min-width: 1200px) and (max-height: 860px) { .hvh__mark { padding-bottom: 0; } }
/* 推奨 8：循環図（900〜1599px）：選ばれた「知見の資産化」の札が画面の左端から 16〜37px まで寄っていた。図の列の左に余白を足し、40px 以上離す
   （図と右の文は、列の幅の比のまま一緒に右へ寄るため、札と右の文の間は変わらない）。900〜1199px の静かな表示は図を中央に置くため除く */
@media (min-width: 900px) and (max-width: 1199.98px) { html.mo .sec--cyc .cyc { padding-left: 24px; } }
@media (min-width: 1200px) and (max-width: 1599.98px) { .sec--cyc .cyc { padding-left: 18px; } }
/* 推奨 5：記事の詳細（1600px 以上）：本文を 1〜7 列、「関連するサービス」を 9〜12 列に置き、右の段の右端を器の右端（ヘッダーのボタンの右端）にそろえる
   （1920 で右に約 340px の空きがあった）。本文の字は幅に合わせて 19〜23px（1 行 46 字まで） */
@media (min-width: 1600px) {
  .article { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); justify-content: normal; }
  .article > .article__body { grid-column: 1 / span 7; max-width: 46em; font-size: clamp(19px, 1.08vw, 23px); }
  .article__body p { font-size: clamp(19px, 1.08vw, 23px); }
  .article > .article__side { grid-column: 9 / -1; }
}
/* 推奨 7：トップの M&A の帯（1440px 以上）：文を 1〜5 列、図を 7〜12 列に。図の組を 1.15 倍にし、描いた六角形の右端を器の右端（ヘッダーのボタンの右端）にそろえる
   （図の箱の中に、幅の 14.5% の余白があり、右に 1〜2 列分の空きが出ていた）。箱の右の余白は、器の外（左右の余白）へ出す。帯は overflow: clip のため横に送れない */
@media (min-width: 1440px) {
  .sec--manda .manda__grid--v { --mfw: 720px; }
  .sec--manda .manda__grid--v .manda__text { grid-column: 1 / span 5; }
  .sec--manda .manda__grid--v .manda__fig--side { grid-column: 7 / -1; justify-self: end; max-width: none; width: calc(min(100%, var(--mfw)) * 1.15); margin-right: calc(min(100%, var(--mfw)) * 1.15 * -.145); }
}
@media (min-width: 2300px) { .sec--manda .manda__grid--v { --mfw: 960px; } }
/* 推奨 6：誓いの帯は、見出しを塗らずに、行のせり上がりだけで見せる（corp.js 4-2、data-rise="vow"。後半に「灰 → 墨」の塗りが 5 回続き、先が読めていた）。
   結び「それが、私たちの誓いです。」とボタンは、見出しの最後の行がほぼ着地してから出す（is-ready）。1280px 未満（縦に積む組み）でも、せり上がりと同時に出ないように同じ印まで隠す */
@media (max-width: 1279.98px) {
  html.mo:not(.motion-off) :is(.vow__side > .vow__p, .vow__side > .vow__more).rv:not(.is-ready) { opacity: 0 !important; }
  html.mo .vow__side > .vow__p.rv { transition-delay: 150ms; }
  html.mo .vow__side > .vow__more.rv { transition-delay: 230ms; }
}

/* ---- 45 回目の講評の反映（第 56 版） ---- */
/* 改善 8：戦略コンサルティングの実績の題（5 件の組の 3〜5 件目、900〜1099px）：「戦略コンサルティング支援」（12 字）が 1 行に入る大きさにする（900〜940px で「支援」だけが残っていた） */
@media (min-width: 900px) and (max-width: 1099.98px) { .cases--5 > .case:nth-child(n+3) .case__what { font-size: min(18px, calc(2.1vw - 2.6px)); } }

/* ---- 最終監査 16 回目の反映（第 56 版） ---- */
/* 公開前の確認：冒頭のスローガンは画面の高さに比例するため、1920×1080 で 135px と、ご依頼（2026-10-23）で下げる前の大きさ（1920×900 で 127px）を超えていた。
   上限を「100px と画面の幅の 6% の大きいほう」にする（1920px で 115px、2560px で 154px）。1920×900・1440×900 などの今の大きさは変えない（下げる方向だけ） */
@media (min-width: 900px) {
  .hvh .hvh__mark { font-size: min(max(40px, min(calc(var(--mk) * var(--hk, 1)), 88px), calc(var(--mk) * var(--hk, 1) * .79)), calc(max(100px, 6vw) * var(--hk, 1))); }
}   /* ご依頼（2026-10-24 18:29）でさらに 0.88 倍（ファイルの末尾） */
/* 推奨 4：改行で区切った 1 行が 5 列に入らない見出し（about--wide。build.py の wide_about）は、900px 以上で見出しを 6 列、本文を 7〜12 列に。
   900px 未満は、1 行目（14 字）が 1 行に入る大きさまで下げる（360px で 22px） */
@media (min-width: 900px) {
  .about--wide .about__head { grid-column: 1 / span 6; }
  .about--wide .about__b { grid-column: 7 / -1; }
}
@media (max-width: 899.98px) { .about--wide .about__h { font-size: min(var(--fs-h2), calc((100vw - 2 * var(--gutter)) / 14.6)); } }
.about--wide .about__h { text-wrap: pretty; }   /* 改行のある見出しでは balance が効かず、スマホで「幅広く。」だけが最後の行に残っていた。pretty は最後の行を短くしない */
/* 推奨 6：動きを止めた状態の循環図の札は、地を不透明な紺に（白 6% の半透明の地では、輪の線が「知見の資産化」と「実行」の札の中で縦の筋に透けていた）。
   色は、帯の紺（rgb 10 20 51）に白 6% を重ねた色と同じ */
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__node { background: #19223f; }
/* 45 回目の講評 改善 7：動きを止めた状態の 4 つの役割は、1800px 以上も図の右に縦 1 列（構想から、図の回る順に上から読む）。
   2 列に並ぶ幅（600〜1199px）でも順が分かるように、役割の名前の左に、タブと同じ番号（01〜04、14px、タブの番号の色）を添える（どの幅でも同じ） */
@media (min-width: 1800px) { html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__slides { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 2.2vw, 40px); } }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__slides { counter-reset: cyc; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__slide { counter-increment: cyc; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pk { display: flex; align-items: center; column-gap: 14px; }
html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pk::before { content: counter(cyc, decimal-leading-zero); content: counter(cyc, decimal-leading-zero) / ""; flex: none;
  font-family: var(--font-ui); font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: .06em; color: #9fe3f0; -webkit-text-fill-color: #9fe3f0; }
/* 実績の札（5 件の組。戦略コンサルティング）：1 つおきに 56px 下げる段違いで、上の段の 2 件目の下端が、下の段の 3 件目（右端）の上に 32px 重なっていた。段の間を 56px 広げる */
@media (min-width: 900px) { .cases--5 { row-gap: calc(var(--col-gap) + 56px); } }
/* 推奨 8：業種のない札（図と題だけ。cases--plain）は 2 段の組みに。空の段の間隔で、題の下に約 90px の空きが残っていた。題の上下の空きをそろえる */
@media (min-width: 600px) {
  @supports (grid-template-rows: subgrid) { .cases--plain .case { grid-row: span 2; } }
  .cases--plain .case { padding-bottom: clamp(26px, 2.4vw, 36px); }
  .cases--plain .case .case__what { margin-top: clamp(4px, .7vw, 12px); padding-bottom: 0; }
}
/* クイック AI の 3 件の札：題「…企業へのクイックAI／リスクアセスメントの実施」を 2 行までで組む（3 列や 2 列の札では、1900px 未満で「クイックAI」の 6 字だけの行が残り、834px では 3 件目の横に空きの 1 枠が残っていた）。
   600〜1279px は、図（左）と題（右）の縦の一覧に。題は、1 行目（最長の「Web系サービス企業へのクイックAI」は 16.8 字幅）が右の列に入る大きさ（600px で 17px、740px 以上は 22px）。
   1280px 以上は 3 列のまま、1 行目が札の幅に入る大きさに（1280px で 18px、1440px で 20px、1920px 以上は 26px のまま）。
   5 件の組（戦略コンサルティング）の 600〜899px は、2 列の最後に 1 件だけ残る札を、同じ組みで 2 列分の幅に */
@media (min-width: 600px) and (max-width: 1279.98px) {
  .cases--3 { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .cases--vis.cases--3 > .case:nth-child(even) { translate: none; }
}
@media (min-width: 600px) and (max-width: 1279.98px) {
  .cases--3 > .case { --cp: clamp(28px, 2.8vw, 40px); --cg: clamp(28px, 3.2vw, 40px); grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--cg); align-items: center; min-height: 0; padding: var(--cp); }
  .cases--3 > .case .case__vis { grid-column: 1; grid-row: 1; align-self: stretch; margin: calc(-1 * var(--cp)) 0 calc(-1 * var(--cp)) calc(-1 * var(--cp)); aspect-ratio: 16 / 9; border-bottom: 0; border-right: 1px solid var(--line); }
  .cases--3 > .case .case__what { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 0; max-width: 24em; font-size: clamp(17px, calc((100vw - 2 * var(--gutter) - 2 * var(--cp) - var(--cg)) * 7 / 11 / 17), 22px); }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .cases--5 > .case:last-child { --cp: 28px; grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 28px; align-items: center; min-height: 0; padding: var(--cp); }
  .cases--5 > .case:last-child .case__vis { grid-column: 1; grid-row: 1; align-self: stretch; margin: calc(-1 * var(--cp)) 0 calc(-1 * var(--cp)) calc(-1 * var(--cp)); aspect-ratio: 16 / 9; border-bottom: 0; border-right: 1px solid var(--line); }
  .cases--5 > .case:last-child .case__what { grid-column: 2; grid-row: 1; align-self: center; margin: 0; padding: 0; max-width: 24em; }
}
@media (min-width: 1280px) { .cases--3 .case .case__what { font-size: min(26px, calc(((min(100vw - 2 * var(--gutter), var(--maxw)) - 2 * var(--col-gap)) / 3 - 2 * clamp(28px, 2.8vw, 40px)) / 17)); } }
/* 推奨 7：主要取引先・パートナー・認証（1440px 以上）：パートナー企業（1〜7 列、ロゴは 4 列 × 3 段）と認証・加盟団体（8〜12 列、マークと名前の縦の一覧）を左右に並べる。
   実績紹介から誓いまで、明るい地が約 4 画面続いていた（1920×900 で 3,823px）。見出しの順（主要取引先 → パートナー → 認証）と、HTML の順は変えない */
@media (min-width: 1440px) {
  .trust { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .trust > .trust__row { grid-column: 1 / -1; align-self: start; }
  .trust > .trust__row:nth-child(2) { grid-column: 1 / span 7; }
  .trust > .trust__row--certs { grid-column: 8 / -1; }
  .trust__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust__row--certs .trust__certs { grid-template-columns: minmax(0, 1fr); }
  .trust__row--certs .trust__cert { grid-template-columns: clamp(150px, 10vw, 200px) minmax(0, 1fr); grid-template-rows: none; align-items: stretch; }
  .trust__row--certs .trust__cert-ph { height: auto; min-height: clamp(76px, 4.2vw, 84px); padding: 10px 18px; border-right: 1px solid var(--line); }
  .trust__row--certs .trust__cert-ph img { height: 30px; max-width: 100%; }
  .trust__row--certs .trust__cert--mark .trust__cert-ph img { height: 50px; }
  .trust__row--certs .trust__cert-t { display: flex; align-items: center; padding: 14px clamp(20px, 1.7vw, 32px); text-align: left; font-size: clamp(15px, 1.04vw, 17px); line-height: 1.7; }   /* 1440px でも「日本ネットワークセキュリティ協会（JNSA）」が 1 行に入る 15px */
}
/* パートナーのロゴの登場の遅れ（--i）を、その幅の列の数に合わせる（HTML の --i は 1200〜1439px の 6 列の並び。4 列・3 列の幅では、行の途中から遅れが始まっていた） */
@media (min-width: 900px) and (max-width: 1199.98px), (min-width: 1440px) {
  .trust__logos > .trust__logo:nth-child(4n+1) { --i: 0 !important; } .trust__logos > .trust__logo:nth-child(4n+2) { --i: 1 !important; }
  .trust__logos > .trust__logo:nth-child(4n+3) { --i: 2 !important; } .trust__logos > .trust__logo:nth-child(4n) { --i: 3 !important; }
}
@media (max-width: 899.98px) {
  .trust__logos > .trust__logo:nth-child(3n+1) { --i: 0 !important; } .trust__logos > .trust__logo:nth-child(3n+2) { --i: 1 !important; } .trust__logos > .trust__logo:nth-child(3n) { --i: 2 !important; }
}

/* ==== ご依頼（2026-10-24 18:29）：「まだ文字が大きすぎる箇所がある」。大きい字を一括で下げる（900px 以上。スマホとタブレットは変えない） ====
   1920×900 と 1440×900 を基準に、段ごとに約 2〜3 割下げる。大きい段ほど大きく下げ、段の順（『挑戦保障』＞ 誓い・ビジョン ＞ 役割の名前・採用の一行 ＞ 声明 ＞「攻め」「守り」＞ 支える行）は保つ。
   どの幅でも、もとの大きさより大きくならない式にする（900〜1439px は vw の傾きを小さく、1920px 以上は上限を下げる）。
   大きさは何層もの指定で決まっていたため、ここの指定を最後のものとして !important で固定する（1440px／1920px の値を各行に書く） */
@media (min-width: 900px) {
  :root {
    --fs-statement: clamp(32px, 3.125vw, 72px);                          /* 声明・下層の英字の表題・番号：1440 45、1920 60、2560 72（もとは 64・85・96） */
    --fs-h1: clamp(28px, min(3.06vw, calc(22px + 1.25vw)), 52px);         /* 下層の H1 など：1440 40、1920 46（もとは 48・58） */
    --fs-h2: clamp(22px, min(2.5vw, calc(24px + .833vw)), 44px);          /* 章の見出し：1440 36、1920 40（もとは 40・46） */
    --fs-display-s: clamp(36px, min(3.9vw, calc(32px + 1.67vw)), 72px);   /* サービスのページの英字の表題：1440 56、1920 64（もとは 80・80） */
  }
  /* 最上段 */
  .mission__h, .pch__name { font-size: clamp(52px, calc(16px + 3.75vw), 112px) !important; }                       /* 『挑戦保障』：1440 70、1920 88（もとは 93・112、経営理念 102・104） */
  .vow__h, .vision__h, .hero--pvow .pvow__h, h2.pclose__v { font-size: clamp(42px, calc(10px + 3.333vw), 96px) !important; }   /* 誓い・ビジョン：1440 58、1920 74（もとは 86・106、経営理念 89・92） */
  .xp__ph--type .xp__mark { font-size: clamp(32px, 10.5cqi, 72px) !important; }                                   /* 会社情報の札の『挑戦保障』：1920 72（もとは 92） */
  .hvh .hvh__mark { font-size: calc(min(max(40px, min(calc(var(--mk) * var(--hk, 1)), 88px), calc(var(--mk) * var(--hk, 1) * .79)), calc(max(100px, 6vw) * var(--hk, 1))) * .88) !important; }   /* 冒頭のスローガン：1920×900 88（もとは 100） */
  .hvh .hvh__vow { font-size: max(18px, calc(var(--vk) * var(--hk, 1) * .82)) !important; }                        /* 冒頭の使命文：1920×900 34（もとは 42） */
  .footer__mark-in { font-size: calc((62.4px + .6667vw) * .74) !important; }                                     /* フッターのスローガン：1440px 未満（下の 1440px 以上の式につなぐ） */
  /* 2 段目 */
  .biz3__role, .sec--cyc .cyc__pk { font-size: clamp(36px, calc(16px + 2.5vw), 80px) !important; }                /* 構想・実行・供給：1440 52、1920 64（もとは 72・88） */
  html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pk { font-size: clamp(26px, 2vw, 40px) !important; }          /* 動きを止めた循環図の役割の名前：1440 29、1920 38（もとは 36・48） */
  .b3__role { font-size: clamp(32px, calc(28px + 1.25vw), 60px) !important; }                                     /* サービス紹介 トップの役割の名前：1440 46、1920 52（もとは 61・64） */
  .recruit__in > h2.recruit__p { font-size: clamp(34px, min(4vw, calc(14px + 2.5vw)), 78px) !important; }                   /* 採用の一行：1440 50、1920 62（もとは 69・85） */
  .pch__st, .pch__slogan, .pch__values { font-size: clamp(40px, calc(18px + 2.5vw), 64px) !important; }           /* 経営理念の章の名前：1440 54、1920 64（もとは 88・72） */
  .stats--case .num, .sec--cyc .cyc__cap--work { font-size: var(--fs-statement) !important; }                                              /* 実績の数字：1440 45、1920 60（もとは 72・85） */
  .hero--stage .hero__en { font-size: var(--fs-display-s) !important; }                                         /* 2300px 以上の 100px も下げる */
  /* 3 段目 */
  .msg2 .msg2__h, .pch__vh, .pst__k.pst__p48, .pinteg__t { font-size: clamp(30px, calc(22px + 1.25vw), 54px) !important; }   /* 「攻め」「守り」・経営理念の頂点の行：1440 40、1920 46（もとは 48・56、55・56） */
  .cyc__why, .sec--vision .vision__p { font-size: clamp(26px, min(3vw, calc(18px + 1.25vw)), 50px) !important; }           /* 結びの一行：1440 36、1920 42（もとは 44・52、43・52） */
  .manda__text .manda__h, .sec--manda .manda__h { font-size: var(--fs-h2) !important; }                          /* M&A の見出し：1440 36、1920 40（もとは 37・48） */
  .about--index.about--seq .about__h, .about--index.about--seq .about__h:has(br.br-d) { font-size: clamp(26px, min(2.6vw, calc(18px + 1.25vw)), 46px) !important; }   /* セキュリティコンサルティングの原文の見出し：1440 36、1920 42（もとは 52・60） */
  /* 支える行 */
  .stmt2__b, .msg2 .msg2__p, .mission__sub, .mission__line.mission__line--k, .mission__line--k, .cyc-head__lead, .pch__sub, .vision__tt, .bzf__vk, .pst__k.pst__p40 { font-size: clamp(22px, min(2.5vw, calc(16px + .833vw)), 36px) !important; }   /* 1440 28、1920 32（もとは 36・44 など） */
  .mission__line.mission__line--r, .sec--biz3 .st__vow { font-size: clamp(20px, min(1.94vw, calc(14px + .833vw)), 34px) !important; }   /* 1440 26、1920 30（もとは 32・40、33・44） */
  .mission__line.mission__line--q, .mission__line.mission__line--n, .sec--cyc .cyc__tail, .vow__p, .vision__tail, .pst p.pst__m { font-size: clamp(20px, min(1.94vw, calc(15px + .625vw)), 32px) !important; }   /* 1440 24、1920 27（もとは 28・34、32・32） */
  .pst__k, .pclose__vt, .about__b .about__key, .about__b .about__key--r, .stmt__body .stmt__vow, .sec--b3 .st__lead, .hero__vow + .hero__vow--a { font-size: clamp(20px, min(1.94vw, calc(18px + .417vw)), 28px) !important; }   /* 1440 24、1920 26（もとは 28・28） */
  .vision__tp, .vision__in > .vision__trust .vision__tp { font-size: clamp(18px, min(1.94vw, calc(12px + .7vw)), 26px) !important; }   /* 1440 22、1920 25（もとは 28・34） */
  .vision__def { font-size: clamp(17px, min(calc(12px + .8333vw), calc(12px + .625vw)), 26px) !important; }      /* 1440 21、1920 24（もとは 24・28） */
  .mission__line { font-size: clamp(17px, min(1.39vw, calc(10px + .625vw)), 22px) !important; }                   /* 1440 19、1920 22（もとは 20・24） */
  .news__item.is-lead .news__date { font-size: clamp(24px, min(2.5vw, calc(16px + .833vw)), 32px) !important; }  /* 1440 28、1920 32（もとは 36・36） */
}
@media (min-width: 1440px) { .footer__mark-in { font-size: calc(((min(100vw - var(--gutter) * 2, var(--maxw)) + var(--col-gap)) * .5 - var(--col-gap)) / var(--mark-k, 12.05)) !important; } }
@media (min-width: 1200px) { .about--seq .about__b { margin-top: calc(clamp(26px, min(2.6vw, calc(18px + 1.25vw)), 46px) * 2.8) !important; } }   /* セキュリティコンサルティング：本文は、下げた見出しの 3 行目の高さから（見出しの大きさ × 2.8） */   /* フッターのスローガン：器の 6 列の幅に（1440 54、1920 68。もとは 8 列で 72・91） */

/* ==== ご依頼（2026-10-24 20:02）：「まだ、文字が中段とかで大きい箇所があります」。中段の字（見出しの下の 2 段目の行、理由の行、各節の説明の一文、節の見出し、札の題、
   本文の上の一文）と、節の中の大きな字（番号、節の見出し、声明）を、もう一段まとめて下げる（900px 以上。冒頭のスローガンと使命文、フッターは変えない）。
   お客様の画面は 1920px の幅（いただいた画面の写しの字の幅から推定）。1920px と 1440px を基準に、中段は約 2.5 割、大きい段は約 2 割下げ、段の順は保つ。
   本文（1920px で 17px、1440px で 16px）は変えない。どの幅でも、18:29 のご依頼で下げた大きさより大きくならない式にする（下限は 900px の値、上限は 2560px の値で確かめる） */
@media (min-width: 900px) {
  :root {
    --fs-statement: clamp(28px, 2.5vw, 60px);                             /* 声明・節の中の番号：1440 36、1920 48（18:29 の後は 45・60） */
    --fs-h1: clamp(26px, min(2.6vw, calc(18px + 1.042vw)), 44px);          /* 下層の H1・頂点の行：1440 33、1920 38（40・46） */
    --fs-h2: clamp(22px, min(2.2vw, calc(18px + .833vw)), 38px);           /* 節の見出し：1440 30、1920 34（36・40） */
    --fs-display-s: clamp(32px, min(3.4vw, calc(26px + 1.5vw)), 64px);     /* サービスのページの英字の表題：1440 48、1920 55（56・64） */
    --fs-h3: clamp(17px, calc(11px + .521vw), 21px);                       /* 札・小見出し：1440 18.5、1920 21（22・24） */
    --fs-lead: clamp(17px, calc(11px + .417vw), 19px);                     /* 節の説明の一文：1440 17、1920 19（18・21） */
  }
  /* 大きい段 */
  .mission__h, .pch__name { font-size: clamp(44px, calc(12px + 3.125vw), 92px) !important; }                         /* 『挑戦保障』：1440 57、1920 72（70・88） */
  .vow__h, .vision__h, .hero--pvow .pvow__h, h2.pclose__v { font-size: clamp(36px, calc(8px + 2.708vw), 78px) !important; }   /* 誓い・ビジョン：1440 47、1920 60（58・74） */
  .xp__ph--type .xp__mark { font-size: clamp(28px, 8.75cqi, 60px) !important; }                                      /* 企業情報の札の『挑戦保障』（72 → 60） */
  .biz3__role, .sec--cyc .cyc__pk { font-size: clamp(30px, calc(12px + 2.083vw), 66px) !important; }                 /* 構想・実行・供給：1440 42、1920 52（52・64） */
  html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pk { font-size: clamp(22px, 1.6vw, 32px) !important; }           /* 動きを止めた循環図の役割の名前：1440 23、1920 31（29・38） */
  .b3__role { font-size: clamp(28px, calc(20px + 1.25vw), 50px) !important; }                                        /* サービス紹介 トップの役割の名前：1440 38、1920 44（46・52） */
  .recruit__in > h2.recruit__p { font-size: clamp(30px, min(3.2vw, calc(10px + 2.083vw)), 64px) !important; }         /* 採用の一行：1440 40、1920 50（50・62） */
  .pch__st, .pch__slogan, .pch__values { font-size: clamp(32px, calc(12px + 2.083vw), 52px) !important; }            /* 経営理念の章の名前：1440 42、1920 52（54・64） */
  .hero:not(.hero--stage) .hero__en { font-size: clamp(32px, min(3vw, calc(22px + 1.5vw)), 60px) !important; }       /* 下層の英字の表題：1440 43、1920 51（45・60） */
  .nrows--dark .nrow__n, .tri__n { font-size: clamp(26px, calc(10px + 1.563vw), 48px) !important; }                 /* 強みの行・3 つの理由の番号：1440 32.5、1920 40（45・60） */
  /* 3 段目 */
  .msg2 .msg2__h, .pch__vh, .pst__k.pst__p48, .pinteg__t { font-size: clamp(26px, calc(16px + 1.146vw), 44px) !important; }   /* 「攻め」「守り」・経営理念の頂点の行：1440 32.5、1920 38（40・46） */
  .cyc__why, .sec--vision .vision__p { font-size: clamp(22px, min(2.4vw, calc(13px + 1.042vw)), 40px) !important; }          /* 結びの一行：1440 28、1920 33（36・42） */
  .about--index.about--seq .about__h, .about--index.about--seq .about__h:has(br.br-d) { font-size: clamp(22px, min(2.2vw, calc(14px + 1.042vw)), 38px) !important; }   /* セキュリティコンサルティングの原文の見出し：1440 29、1920 34（36・42） */
  /* 中段：見出しの下の 2 段目の行と、理由・結びの行 */
  .stmt2__b, .msg2 .msg2__p, .mission__sub, .mission__line.mission__line--k, .mission__line--k, .cyc-head__lead, .pch__sub, .vision__tt, .bzf__vk, .pst__k.pst__p40, .sec--cyc .cyc__pd--back { font-size: clamp(19px, min(1.875vw, calc(13px + .573vw)), 28px) !important; }   /* 1440 21、1920 24（28・32） */
  .mission__line.mission__line--r, .sec--biz3 .st__vow, .pst p.pst__m { font-size: clamp(18px, min(1.6vw, calc(11px + .573vw)), 26px) !important; }   /* 本当の理由の行・前口上：1440 19、1920 22（26・30、経営理念 24・27）。問いの行より一段大きく */
  .mission__line.mission__line--q, .mission__line.mission__line--n, .sec--cyc .cyc__tail, .vow__p, .vision__tail { font-size: clamp(17px, min(1.5vw, calc(12px + .417vw)), 23px) !important; }   /* 1440 18、1920 20（24・27） */
  .pst__k, .pclose__vt, .about__b .about__key, .about__b .about__key--r, .stmt__body .stmt__vow, .sec--b3 .st__lead, .hero__vow + .hero__vow--a { font-size: clamp(17px, min(1.5vw, calc(12px + .417vw)), 23px) !important; }   /* 1440 18、1920 20（24・26） */
  .vision__tp, .vision__in > .vision__trust .vision__tp { font-size: clamp(16px, min(1.5vw, calc(10px + .521vw)), 22px) !important; }   /* 1440 17.5、1920 20（22・25） */
  .vision__def, .pst p.pst__t { font-size: clamp(16px, calc(10px + .469vw), 20px) !important; }                       /* 定義の行：1440 17、1920 19（21・24、経営理念 24・24） */
  .mission__line { font-size: clamp(16px, calc(9px + .469vw), 18px) !important; }                                    /* 1440 16、1920 18（19・22） */
  .news__item.is-lead .news__date { font-size: clamp(20px, min(1.875vw, calc(13px + .573vw)), 26px) !important; }    /* 1440 21、1920 24（28・32） */
  .news__item.is-lead .news__t { font-size: clamp(19px, min(1.6vw, calc(12px + .573vw)), 24px) !important; }         /* 新着の題：1440 20、1920 23（29・30） */
  .news__item.is-lead .news__t[data-long] { font-size: clamp(18px, min(1.4vw, calc(11px + .5vw)), 21px) !important; }
  .problem__t { font-size: clamp(19px, min(1.6vw, calc(12px + .573vw)), 24px) !important; }                          /* 課題の札（バンク）：1440 20、1920 23（29・30） */
  .fam__tel { font-size: clamp(22px, calc(14px + .417vw), 24px) !important; }                                        /* 電話番号：1920 22（28） */
  .recruit__pre { font-size: clamp(17px, calc(10px + .573vw), 24px) !important; }                                    /* 採用の帯の前置き：1440 18、1920 21（24・28） */
  .sec--cyc .cyc__k { font-size: clamp(15px, 2.9cqi, 22px) !important; }
  .sec--cyc .cyc__pd { font-size: clamp(16px, calc(10px + .469vw), 19px); }                                          /* 循環のパネルの役割の説明（動きあり）：1440 17、1920 19（21・21） */                                             /* 循環図の札の役割の名前：1920 22（27） */
  .prs--2 .pr__en { font-size: clamp(19px, calc(13px + .417vw), 21px) !important; }                                  /* 8 つの原則の英語の名前：1440 19、1920 21（26・26） */
  .prs--2 .pr__ja { font-size: clamp(17px, calc(11px + .417vw), 19px) !important; }                                  /* 8 つの原則の和文：1440 17、1920 19（22・22） */
  .pst p { font-size: clamp(16px, calc(10px + .417vw), 18px); }                                                      /* 経営理念の地の文：1440 16、1920 18（20・20）。誓いの 2 つの行（.bzf__vow p）より前に置き、経営理念でも誓いの行の大きさが勝つように */
  .bzf__vow p { font-size: clamp(17px, calc(10px + .521vw), 20px); }                                                 /* 誓いの 2 つの行：1440 17.5、1920 20（24・24） */
  .hero__vow { font-size: clamp(17px, calc(10px + .521vw), 20px); }                                                  /* 下層の冒頭の理念の行：1920 20（24） */
  .hero__vow--s { font-size: clamp(16px, calc(9px + .469vw), 18px); }
  .xp__tsub { font-size: clamp(14px, 2.6cqi, 17px); }
  .access--text .access__addr { font-size: clamp(17px, calc(11px + .417vw), 19px); }                                 /* 所在地：1920 19（24） */
  .pinteg--stack .pinteg__p, .about__b .about__pre { font-size: clamp(16px, calc(9px + .469vw), 18px); }             /* 1920 18（20） */
  /* 札の題 */
  .case .case__what { font-size: clamp(18px, calc(11px + .521vw), 21px); }                                           /* 実績の札の題：1440 18.5、1920 21（26・26） */
  .cases--text .case .case__what { font-size: clamp(16px, calc(10px + .417vw), 18px); }
}
@media (min-width: 1200px) {
  .sec--biz3 .st__lt { font-size: clamp(17px, calc(11px + .417vw), 19px); }                                          /* サービス紹介の前口上の右の説明：1440 17、1920 19（21.6・24。左の前口上の 22px より下に） */
  .cases--focus .case .case__what { font-size: clamp(17px, calc(10px + .469vw), 19px); }                             /* 1920 19（22） */
  .cases--4 .case .case__what { font-size: clamp(17px, calc(10px + .417vw), 18px); }                                 /* 1920 18（20） */
  .about--seq .about__b { margin-top: calc(clamp(22px, min(2.2vw, calc(14px + 1.042vw)), 38px) * 2.8) !important; }  /* 本文は、下げた見出しの 3 行目の高さから */
}
@media (min-width: 1600px) { .article > .article__body, .article__body p { font-size: clamp(17px, calc(11px + .417vw), 19px); } }   /* 記事の本文（1600px 以上で本文より大きくしていた分）：1600 17.7、1920 19（19・20.7） */
@media (min-width: 900px) and (max-width: 1279.98px) { .cases--3 > .case .case__what { font-size: clamp(17px, calc((100vw - 2 * var(--gutter) - 2 * var(--cp) - var(--cg)) * 7 / 11 / 17), 19px); } }   /* クイック AI の題（図と題の縦の一覧）：上限 22 → 19px */
@media (min-width: 1280px) { .cases--3 .case .case__what { font-size: min(21px, calc(((min(100vw - 2 * var(--gutter), var(--maxw)) - 2 * var(--col-gap)) / 3 - 2 * clamp(28px, 2.8vw, 40px)) / 17)); } }
/* 2300px 以上は本文が 20px のため、説明の一文と小見出しを本文より一段上に保つ（どれも 18:29 の後の大きさ以下） */
@media (min-width: 2300px) {
  :root { --fs-lead: 23px; --fs-h3: 24px; }
  .mission__line { font-size: 20px !important; }
  .vision__def, .pst p.pst__t { font-size: 22px !important; }
  .prs--2 .pr__en { font-size: 25px !important; } .prs--2 .pr__ja { font-size: 21px !important; }
  .hero__vow--s, .pinteg--stack .pinteg__p, .about__b .about__pre, .pst p { font-size: 20px; }
  .bzf__vow p, .hero__vow, .access--text .access__addr { font-size: 22px; }
  .article > .article__body, .article__body p { font-size: 21px; }
  .case .case__what { font-size: 23px; }
  .sec--cyc .cyc__pd { font-size: 22px; }
}

/* ==== ご依頼（2026-10-25 17:26）：「若干、ダイナミックさに欠ける（横幅の使い方や文字の大きさ）ので、少しだけ修正したい。過去の大きすぎる文字はやめる」 ====
   大きい段（『挑戦保障』、誓い・ビジョン、構想・実行・供給、採用の一行、経営理念の章の名前、声明、英字の表題）を約 1 割、その下の段（「攻め」「守り」、
   下層の H1、結びの一行、節の見出し、番号）を約 0.5〜1 割だけ戻す（900px 以上）。中段の字（見出しの下の 2 段目の行、理由・結びの行、説明の一文、札の題）と本文は変えない。
   どの幅でも、18:29 のご依頼で下げた後の大きさ（大きすぎるとご指摘のあった段）は超えない：min(18:29 の後の式, 20:02 の後の式 × 倍率) */
@media (min-width: 900px) {
  :root {
    --fs-statement: min(clamp(32px, 3.125vw, 72px), calc(clamp(28px, 2.5vw, 60px) * 1.12));                                              /* 声明：1440 40、1920 54（48。18:29 の後は 60） */
    --fs-h1: min(clamp(28px, min(3.06vw, calc(22px + 1.25vw)), 52px), calc(clamp(26px, min(2.6vw, calc(18px + 1.042vw)), 44px) * 1.1));   /* 下層の H1：1440 36、1920 42（38。46） */
    --fs-h2: min(clamp(22px, min(2.5vw, calc(24px + .833vw)), 44px), calc(clamp(22px, min(2.2vw, calc(18px + .833vw)), 38px) * 1.06));   /* 節の見出し：1440 32、1920 36（34。40） */
    --fs-display-s: min(clamp(36px, min(3.9vw, calc(32px + 1.67vw)), 72px), calc(clamp(32px, min(3.4vw, calc(26px + 1.5vw)), 64px) * 1.08));   /* サービスの英字の表題：1920 59（55。64） */
  }
  .mission__h, .pch__name { font-size: min(clamp(52px, calc(16px + 3.75vw), 112px), calc(clamp(44px, calc(12px + 3.125vw), 92px) * 1.12)) !important; }   /* 『挑戦保障』：1440 64、1920 81（72。88） */
  .vow__h, .vision__h, .hero--pvow .pvow__h, h2.pclose__v { font-size: min(clamp(42px, calc(10px + 3.333vw), 96px), calc(clamp(36px, calc(8px + 2.708vw), 78px) * 1.12)) !important; }   /* 誓い・ビジョン：1440 53、1920 67（60。74） */
  .xp__ph--type .xp__mark { font-size: min(clamp(32px, 10.5cqi, 72px), calc(clamp(28px, 8.75cqi, 60px) * 1.12)) !important; }
  .biz3__role, .sec--cyc .cyc__pk { font-size: min(clamp(36px, calc(16px + 2.5vw), 80px), calc(clamp(30px, calc(12px + 2.083vw), 66px) * 1.12)) !important; }   /* 構想・実行・供給：1440 47、1920 58（52。64） */
  html:not(.mo) .sec--cyc .cyc[data-cyc-corp] .cyc__pk { font-size: min(clamp(26px, 2vw, 40px), calc(clamp(22px, 1.6vw, 32px) * 1.12)) !important; }
  .b3__role { font-size: min(clamp(32px, calc(28px + 1.25vw), 60px), calc(clamp(28px, calc(20px + 1.25vw), 50px) * 1.1)) !important; }   /* サービス紹介 トップの役割の名前：1920 48（44。52） */
  .recruit__in > h2.recruit__p { font-size: min(clamp(34px, min(4vw, calc(14px + 2.5vw)), 78px), calc(clamp(30px, min(3.2vw, calc(10px + 2.083vw)), 64px) * 1.12)) !important; }   /* 採用の一行：1440 45、1920 56（50。62） */
  .pch__st, .pch__slogan, .pch__values { font-size: min(clamp(40px, calc(18px + 2.5vw), 64px), calc(clamp(32px, calc(12px + 2.083vw), 52px) * 1.12)) !important; }   /* 経営理念の章の名前：1440 47、1920 58（52。64） */
  .hero:not(.hero--stage) .hero__en { font-size: min(clamp(32px, 3.125vw, 72px), calc(clamp(32px, min(3vw, calc(22px + 1.5vw)), 60px) * 1.08)) !important; }   /* 下層の英字の表題：1920 55（51。60） */
  .nrows--dark .nrow__n, .tri__n { font-size: min(clamp(32px, 3.125vw, 72px), calc(clamp(26px, calc(10px + 1.563vw), 48px) * 1.1)) !important; }   /* 強みの行・3 つの理由の番号：1920 44（40） */
  .msg2 .msg2__h, .pch__vh, .pst__k.pst__p48, .pinteg__t { font-size: min(clamp(30px, calc(22px + 1.25vw), 54px), calc(clamp(26px, calc(16px + 1.146vw), 44px) * 1.1)) !important; }   /* 「攻め」「守り」・経営理念の頂点の行：1440 36、1920 42（38。46） */
  .cyc__why, .sec--vision .vision__p { font-size: min(clamp(26px, min(3vw, calc(18px + 1.25vw)), 50px), calc(clamp(22px, min(2.4vw, calc(13px + 1.042vw)), 40px) * 1.1)) !important; }   /* 結びの一行：1440 31、1920 36（33。42） */
  .about--index.about--seq .about__h, .about--index.about--seq .about__h:has(br.br-d) { font-size: min(clamp(26px, min(2.6vw, calc(18px + 1.25vw)), 46px), calc(clamp(22px, min(2.2vw, calc(14px + 1.042vw)), 38px) * 1.1)) !important; }   /* 1920 37（34。42） */
}
@media (min-width: 1200px) { .about--seq .about__b { margin-top: calc(min(clamp(26px, min(2.6vw, calc(18px + 1.25vw)), 46px), calc(clamp(22px, min(2.2vw, calc(14px + 1.042vw)), 38px) * 1.1)) * 2.8) !important; } }
/* 横幅：1800〜2199px の中身の幅を、最大 1,680px（画面の 86%）から最大 1,760px（画面の 90%）へ広げる（1920px で 1,651 → 1,728px。左右の余白 134 → 96px）。
   2200px 以上（1,920px）と 2300px 以上（2,120px）は変えない。フッターのスローガンは、広げる前の幅で大きさを決めて、いまの大きさ（1920px で 68px）のまま */
@media (min-width: 1800px) and (max-width: 2199.98px) {
  :root { --maxw: min(1760px, 90vw); }
  .footer__mark-in { font-size: calc(((min(100vw - var(--gutter) * 2, min(1680px, 86vw)) + var(--col-gap)) * .5 - var(--col-gap)) / var(--mark-k, 12.05)) !important; }
}
/* 点検：セキュリティコンサルティングの原文の見出し（左の列、改行で 4 行）は、1280〜1440px で 1 割上げると「攻める力を加速させる」などの行が列に入らず 5 行になっていた。
   1600px 未満は 20:02 の後の大きさのまま（1600px 以上だけ 1 割上げる） */
@media (min-width: 900px) and (max-width: 1599.98px) {
  .about--index.about--seq .about__h, .about--index.about--seq .about__h:has(br.br-d) { font-size: clamp(22px, min(2.2vw, calc(14px + 1.042vw)), 38px) !important; }
}
@media (min-width: 1200px) and (max-width: 1599.98px) { .about--seq .about__b { margin-top: calc(clamp(22px, min(2.2vw, calc(14px + 1.042vw)), 38px) * 2.8) !important; } }
/* 2300px 以上：お問い合わせ トップの冒頭の理念の行（hero__vow と hero__vow--s の両方を持つ）は 20px のまま */
@media (min-width: 2300px) { .hero__vow.hero__vow--s { font-size: 20px; } }


/* ---------- コンセプトムービー（YouTube）。採用サイトの addons.css と同じ（2026-10-25） ---------- */
html:not(.js) .movie--yt .movie__poster { display: block; }
.movie__float { position: absolute; z-index: 4; overflow: hidden; border-radius: var(--r-lg, 16px); background: #000; aspect-ratio: 16 / 9; }
.movie__float .movie__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.movie-stage:not(.is-expand) .movie__float { left: 0; right: 0; top: var(--ft, 0px); }
.movie > .movie__float { inset: 0; top: 0; aspect-ratio: auto; }
.movie-stage.is-expand .movie__float { left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1200px, calc(100% - 2 * clamp(16px, 4vw, 48px)), calc((100vh - 2 * clamp(16px, 4vw, 48px)) * 16 / 9)); }
.movie--yt.is-playing .movie__poster { display: none; }
.movie-stage:not(.is-expand) .movie.movie--yt { aspect-ratio: 16 / 9; }
.form__err-top { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; background: #fdecea; color: #b3261e; font-size: 14px; line-height: 1.7; }


/* ---------- 記事本文（CMS の Markdown と、旧 WordPress の記事 HTML を同じ見た目に。2026-10-25） ---------- */
.article__eyecatch { margin: 0 0 32px; border-radius: var(--r-lg, 16px); overflow: hidden; background: #0b1220; aspect-ratio: 16 / 9; }
.article__eyecatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article__body h3 { margin: 1.8em 0 .6em; font-size: calc(var(--fs-h3) * .88); font-weight: 700; line-height: 1.6; color: var(--ink-900); }
.article__body h4 { margin: 1.5em 0 .5em; font-size: var(--fs-body); font-weight: 700; color: var(--ink-900); }
.article__body ul, .article__body ol { margin: 1em 0 1.4em; padding-left: 1.5em; font-size: var(--fs-body); line-height: 2; color: var(--ink-700); }
.article__body li + li { margin-top: .3em; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--r-md, 10px); }
.article__body figure { margin: 1.6em 0; }
.article__body figure.wp-block-image img, .article__body .wp-block-image img { display: block; margin: 0 auto; }
.article__body figcaption, .article__body .wp-element-caption { margin-top: 8px; font-size: var(--fs-note); color: var(--ink-500); text-align: center; }
.article__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.8; }
.article__body .wp-block-table { overflow-x: auto; }
.article__body th, .article__body td { padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
.article__body th { background: var(--paper-2, #f4f6f9); font-weight: 700; }
.article__body blockquote { margin: 1.6em 0; padding: 12px 20px; border-left: 2px solid var(--line); color: var(--ink-500); }
.article__body pre { margin: 1.4em 0; padding: 16px 20px; border-radius: var(--r-md, 10px); background: #0b1220; color: #e6edf3; font-size: 13px; line-height: 1.7; overflow-x: auto; }
.article__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.article__body hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
.article__body a:not(.btn) { color: var(--ink-900); text-decoration: underline; text-underline-offset: .2em; }
.article__body p strong { color: var(--ink-900); }
.article__body .p-toc { margin: 1.6em 0 2.2em; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--paper-2, #f7f8fa); }
.article__body .p-toc__ttl { margin: 0 0 8px; font-weight: 700; font-size: var(--fs-small); letter-spacing: .06em; }
.article__body .p-toc ol, .article__body .p-toc ul { margin: 0; font-size: var(--fs-small); line-height: 1.9; }
.article__body .p-blogCard { margin: 1.6em 0; }
.article__body .p-blogCard__inner { display: block; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); text-decoration: none; }
.article__body .p-blogCard__title { display: block; font-weight: 700; color: var(--ink-900); }
.article__body .p-blogCard__excerpt { display: block; margin-top: 4px; font-size: var(--fs-note); color: var(--ink-500); }
.article__body .p-blogCard__thumb, .article__body .p-blogCard__caption { display: none; }
.article__body .cms-event .wp-block-table th { width: 9em; white-space: nowrap; }
.article__body .wp-block-button__link, .article__body .swell-block-button__link { display: inline-block; padding: .85em 2.4em; border-radius: 999px; background: #04384c; color: #fff !important; font-weight: 700; text-decoration: none !important; }
.article__body .u-mb-0 { margin-bottom: 0; } .article__body .u-mb-10 { margin-bottom: 10px; } .article__body .u-mb-20 { margin-bottom: 20px; }
.article__body .u-mb-30 { margin-bottom: 30px; } .article__body .u-mb-40 { margin-bottom: 40px; } .article__body .u-mb-50 { margin-bottom: 50px; }
.article__body .alignleft { float: none; }