/* ===========================================================
   Tokens
   =========================================================== */
:root {
  --color-primary: #FF2400;
  --color-primary-dark: #C44102;
  --color-ink: #040404;
  --color-text: #0F172A;
  --color-text-heading: #0A192F;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;
  --color-border: #E2E8F0;
  --color-dark: #323232;
  --color-light-bg: #F4F4F4;
  --color-footer-bg: #EFEFEF;

  /* 本文・細かい文字。Alata は欧字のみなので、見出し側の日本語も
     最終的にはここへ落ちる。書体が混ざらないよう1本に統一している。 */
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-logo: 'Belanosima', var(--font-jp);
  --font-en: 'Inter', var(--font-jp);
  --font-display: 'Abril Fatface', serif;
  /* 英字の表示書体。Chillax(Fontshare / Indian Type Foundry)。
     アウトライン化済みの字(FV の AI Shift / MiAI ロゴ)は SVG なので対象外。 */
  --font-display-en: 'Roboto', 'Helvetica Neue', Arial, var(--font-jp);
  --font-alata: 'Alata', var(--font-jp);   /* ボタン・見出し・タイトル */
  --font-gugi: 'Gugi', var(--font-en);

  --header-h: 64px;
  --wrap-max: 1440px;
}

@media (min-width: 768px) {
  :root { --header-h: 96px; }
}

/* ===========================================================
   Reset
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================
   Page-load intro: a solid curtain covers the viewport from the
   first paint (this is the default state below, no JS needed to
   show it), then softly opens shortly after main.js runs while the
   hero content streams in from the left.
   =========================================================== */
@property --intro-r {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #fff;
  --intro-r: 0%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--intro-r), #000 calc(var(--intro-r) + 3%), #000 100%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent var(--intro-r), #000 calc(var(--intro-r) + 3%), #000 100%);
  transition: --intro-r 2.2s cubic-bezier(.65, 0, .35, 1);
}
.intro-overlay.is-hiding {
  --intro-r: 150%;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
}

/* ===========================================================
   SplashToHeroTimeline (js/splash.js)
   Motion Reference: seedance2-5_Video_20260812_063239.mp4
   幕は透明で、下のページ(白)がそのまま背景。要素はすべて
   .sp-stage(1440x810 の設計座標)の中で JS が動かす。
   =========================================================== */
html.splash-lock, html.splash-lock body { overflow: hidden; }
.intro-overlay--splash {
  pointer-events: none;
  overflow: hidden;
  transition: background-color .5s ease;
  /* ベースの .intro-overlay は円形マスクで幕を抜く旧演出を持っている。
     そのマスクが残ると、中央付近が円形に薄く抜けて「白い光彩」に
     見える(ロゴのiの上や円クラスタに出ていたのはこれ)。
     新しいスプラッシュは幕を抜かないのでマスクごと無効化する。 */
  -webkit-mask-image: none;
  mask-image: none;
}
/* fv-in と同時に幕の白を抜く(下も白なので切り替えは見えない) */
.intro-overlay--splash.is-page { background-color: transparent; }
.sp-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 810px;
  transform-origin: 0 0;
}
.sp-canvas,
.sp-svg { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; display: block; }
/* リング(カプセル群)は半透明のまま円窓の動画の上へ全面的に重なる
   (Figma D7: 304:46481 のレイヤー順)。窓は z1、図形は z2 */
.sp-svg { overflow: visible; z-index: 2; }
.sp-logo path { fill: #191919; }
.sp-cells path { shape-rendering: geometricPrecision; }
/* DESIGN 1 の左右の淡い Diffuse Glow。主張させない */
.sp-glow {
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  transition: opacity .6s ease;
}
.sp-glow--l { display: none; left: -180px; top: 40px; background: radial-gradient(circle, #FDDCC2 0%, #FDDCC2 12%, rgba(253, 220, 194, 0) 62%); opacity: .5; }
.sp-glow--r { display: none; left: 1040px; top: 230px; background: radial-gradient(circle, #FFD9BC 0%, #FFD9BC 12%, rgba(255, 217, 188, 0) 62%); opacity: .5; }
.intro-overlay--splash.is-hiding { background-color: transparent; }
.intro-overlay--splash.is-hiding .sp-glow { opacity: 0; }

.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 6.4vw, 92px);
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-alata);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, opacity .15s ease;
}
.btn--outline {
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  border-radius: 29px;
  padding: 12px 26px;
}
.btn--outline:hover { background: rgba(255, 255, 255, .08); }
.btn__icon { width: 13px; height: 10px; }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 11px 24px;
}
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--sm { font-size: 14px; padding: 8px 20px; }

/* ===========================================================
   Section label (giant faded word + caption)
   =========================================================== */
.section-label {
  position: relative;
  margin-bottom: 28px;
  line-height: 1;
  overflow: hidden;
}
.section-label__bg {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 72px;
  letter-spacing: normal;
  line-height: 1.8;
  color: transparent;
  user-select: none;
  /* Solid fill clipped to the glyphs, plus a thin diagonal shine layer
     that sweeps across once on reveal (background-clip keeps both
     confined to the text itself, no extra markup). */
  background-color: #FFF1E9;
  background-image: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .6) 50%, transparent 56%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: -120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
  will-change: transform, opacity, background-position;
}
@media (min-width: 768px) {
  .section-label__bg { font-size: 96px; }
}
.js-reveal .section-label.is-visible .section-label__bg {
  transform: translateY(0);
  opacity: 1;
  /* Solid fill (About/News/Team) has one background-image layer (the
     shine); --dark/--muted still have two (fade + shine), so they use
     the two-value keyframe below instead - see their own overrides. */
  animation: section-label-shine-solid .85s ease .75s 1 forwards;
}
@keyframes section-label-shine-solid {
  from { background-position: -120% 0; }
  to   { background-position: 220% 0; }
}
@keyframes section-label-shine {
  from { background-position: 0 0, -120% 0; }
  to   { background-position: 0 0, 220% 0; }
}
.section-label__caption {
  position: absolute;
  left: 8px;
  top: 60.8%;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
}
@media (min-width: 768px) {
  .section-label__caption { font-size: 20px; }
}

.section-label--dark .section-label__bg {
  background-color: #4A4A4A;
  background-image: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .6) 50%, transparent 56%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: -120% 0;
  -webkit-background-clip: text;
  background-clip: text;
}
.section-label--dark .section-label__caption { color: #fff; }

.section-label--muted .section-label__bg {
  background-color: #E1E1E1;
  background-image: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .6) 50%, transparent 56%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: -120% 0;
  -webkit-background-clip: text;
  background-clip: text;
}
.section-label--muted .section-label__caption { color: #3A3A3A; }

@media (prefers-reduced-motion: reduce) {
  .section-label__bg {
    transform: none;
    opacity: 1;
    transition: none;
    animation: none;
    background-position: -120% 0;
  }
  .section-label--dark .section-label__bg,
  .section-label--muted .section-label__bg {
    background-position: 0 0, -120% 0;
  }
}

/* ===========================================================
   Label (Figma 215:22653)。全セクション共通の見出しコンポーネント。
   小さな英字キャプション + 直下に大見出し、の2行構成。
   マージンなしで行間(1.8)がそのまま行間隔になる。
   =========================================================== */
.label { display: block; }
.label__eyebrow {
  display: block;
  margin: 0;
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .05em;
  color: #6D6D6D;
}
.label__heading {
  display: block;
  margin: 0;
  font-family: var(--font-alata);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.8;
  letter-spacing: .05em;
  color: #191919;
}
@media (min-width: 768px) {
  .label__eyebrow { font-size: 24px; }
  .label__heading { font-size: 45px; }
}
.label--on-dark .label__heading { color: #EFEFEF; }

/* Service 01 / 02 の番号(Figma 215:23953)。文字組みはアイブロー
   そのまま(24px / letter-spacing .05em / #6D6D6D)。
   29px の窓を横に送ると桁が窮屈に流れて汚いので、2桁を同じ位置に
   重ねてその場でクロスフェードする。ゴーストが幅を確保する。 */
.service__index {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}
.service__index-ghost { visibility: hidden; }
.service__index-track {
  position: absolute;
  inset: 0;
}
.service__index-track > i {
  position: absolute;
  inset: 0;
  font-style: normal;
  will-change: opacity;
}
/* js が値を書くまでは 01 だけ見せる */
.service__index-track > i + i { opacity: 0; }

/* ===========================================================
   Decorative dot pattern / blurred blobs (shared)
   =========================================================== */
.hero__dots, .team__dots {
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(circle, #cfcfd1 1.6px, transparent 1.8px);
  background-size: 16px 16px;
  opacity: .55;
}
.hero__blob, .about__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* ===========================================================
   Header
   =========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
  will-change: transform, opacity;
}
.site-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Figma header 215:23933。白い背景の上にロゴとナビだけが乗る構成。
   ヘッダーを囲む角丸の白いカード(背景・border-radius・box-shadow・
   backdrop-filter)は Figma に無いので持たせない。角丸が付くのは
   CONTACT ボタンだけ。左右の位置は他セクションと同じ .wrap の余白に従う。 */
@media (min-width: 768px) {
  .site-header--brushup {
    position: sticky;
    top: 20px;
    isolation: isolate;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .site-header--brushup .site-header__inner {
    height: 90px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* Figma のヘッダーは面を持たないが、スクロールで本文に重なると
     読めなくなる。最上部は素のまま、重なっている間だけ半調の白を
     全幅に敷いて可読性を確保する(角丸や枠線は出さない)。 */
  .site-header--brushup::before {
    content: '';
    position: absolute;
    /* sticky の待機位置が top:20px なので、プレートを上に20px延長して
       画面上端との間に隙間が出ないようにする */
    inset: -20px 0 0;
    z-index: -1;
    /* backdrop-filter は使わない。スクロールのたびに背後を再ぼかす
       合成が走り、ページ全体の上下スクロールがガタつく主因だった。
       ぼかしの代わりに白の濃度を上げて可読性を保つ */
    background: rgba(255, 255, 255, .88);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .site-header--brushup.is-overlapping::before { opacity: 1; }
  /* Service の暗転中はヘッダーの白い板で背景を分断しない。
     板は消し、ロゴ(黒1色のSVG img)とナビ文字を白へ反転する。
     切替は暗転と同じ .32s で同調させる。 */
  html.svc-dark .site-header--brushup.is-overlapping::before { opacity: 0; }
  html.svc-dark .site-header--brushup .logo__mark {
    filter: brightness(0) invert(1);
  }
  html.svc-dark .site-header--brushup .nav__link { color: #fff; }
  .site-header--brushup .logo__mark { transition: filter .32s ease; }
  /* miai_logo 215:23935 */
  .site-header--brushup .logo__mark { width: 104.613px; height: 38.098px; }
  /* nav-links 215:23942 (611x28)。Alata Regular 16px / tracking .8px /
     #191919 の大文字。項目間 40px。 */
  .site-header--brushup .nav { gap: 40px; align-items: center; }
  .site-header--brushup .nav__link {
    font-family: var(--font-display-en);
    font-size: 16px;
    font-weight: 500;          /* Figma 277:35876 は Medium */
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #191919;
    transition: color .32s ease;
    position: relative;
    line-height: 1;
    padding: 4px 0;
  }
  /* 下線は入れない(指示)。ホバーの反応は文字の入れ替えだけで見せる。 */

}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo__mark {
  display: block;
  height: 24px;
  width: auto;
}
@media (min-width: 768px) {
  .logo__mark { height: 34px; }
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
}
.hamburger img { width: 22px; height: 16px; }
@media (min-width: 768px) {
  .hamburger { display: none; }
}

.nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  background: #fff;
  padding: 8px 20px 28px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__link {
  padding: 14px 4px;
  border-bottom: 1px solid #F1F1F1;
  font-size: 15px;
  color: #292929;
  text-decoration: none;
}
.nav__link-flip {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.nav__link-face--back { display: none; }
@media (min-width: 768px) {
  .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    background: transparent;
    padding: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__link { padding: 0; border-bottom: none; }

  /* -----------------------------------------------------------
     Nav link hover (About, Service, News, Team, Company): the
     front label rotates/flips away while the back label rotates
     in to replace it, and once that settles the text's own color
     - a single continuous gradient, ink at both ends with a soft
     white/orange band in the middle - slides across like a light
     passing over it (reworked after holon-inc.jp's header "Concept"
     link: a flash that fades in/out reads as abrupt, so instead the
     text-fill itself is always fully opaque and just changes which
     slice of a 260%-wide gradient is showing).

     Timeline on hover-in (from mouseenter):
       0-620ms   - front rotates+flips out, back rotates+flips in
                   (transform: translateY + rotate, both faces,
                   620ms cubic-bezier(.65,0,.35,1) ease-in-out)
       550ms     - once the flip has essentially settled, the text's
                   background-position starts easing across
       550-1100ms - 550ms cubic-bezier(.22,1,.36,1) slide from the
                    "before" ink segment, through the light band, to
                    the "after" ink segment

     Hover-out (mouseleave):
       0-620ms  - rotation/flip reverses (same 620ms transition)
       0-500ms  - background-position eases back to the resting
                  segment over 500ms, no extra delay

     Pure CSS (:hover-driven), no JS. */
  /* cuolega C案と同じ: マスクの中で前面が上へ抜け、控えが下から入る。
     回転もグラデーションの走査も掛けない素直なスライド。 */
  .nav__link-face {
    display: block;
    will-change: transform;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  }
  .nav__link-face--front { transform: translateY(0); }
  .nav__link-face--back {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(105%);
  }
  .nav__link:hover .nav__link-face--front { transform: translateY(-105%); }
  .nav__link:hover .nav__link-face--back { transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .nav__link-face,
    .nav__link:hover .nav__link-face {
      transition: none;
    }
  }
}

/* ===========================================================
   Hero
   =========================================================== */
.hero {
  position: relative;
  padding: 48px 0 44px;
  min-height: 700px;
  display: flex;
  align-items: center;
  /* 縦は切らない。FV の赤い円は About の領域まで貫通して落ちてくるのが
     意図で、ここで clip すると About との境目に水平の切り口が出る。
     横のはみ出しは body 側の overflow-x:hidden が受けるので、
     ページに横スクロールは生まれない。 */
  overflow: visible;
  /* 後続の About(白背景・position:relative)より手前に置く。
     これが無いと、はみ出した円が About の白で塗り潰されて
     結局同じ切り口が見える。モチーフは pointer-events:none なので
     About の操作は妨げない。 */
  z-index: 1;
}
.hero > .wrap { width: 100%; }
@media (min-width: 768px) {
  .hero { padding: 88px 0 84px; min-height: 600px; }
  /* 右のストライプ(Gray line)はフレーム上端より上から始まる。
     hero の overflow:clip が箱の上端(ページy90)で切ってしまい、
     グロナビの下で見切れて見えるため、箱を上端まで引き上げる。
     内容は padding で同じ位置に置き、ラインとグラデは下の個別指定で
     同一ページ座標を維持する。ヘッダーは z100 なので常に手前 */
  /* 768以上では FV の中身はすべて絶対配置(基準は .wrap)なので、
     上のパディングを残すと Figma の y にその分が足されてしまう。0 にして
     フレーム座標をそのまま使えるようにする。 */
  .hero.hero--brushup { margin-top: -90px; padding-top: 0; min-height: 690px; }
}
/* Figma 232:27373 (image 27 [Vectorized])。淡いブロブ形状のベクター素材を
   ヒーロー〜About にまたがる背景モチーフとして敷く。実測位置(x:279/1440,
   y はヒーロー天面基準)をパーセントで再現。 */
/* 右のモチーフ(Figma 215:22653 / Group 148 399:76725)。
   Group 148 はフレーム x848 y243 の 482x340。viewBox をフレーム座標に
   しているので、SVG 内の数値はそのまま Figma の値。
   ヒーローの箱はページ上端から始まるので top はフレーム y をそのまま使う。
   左右は「中央から」の距離にして 1440 超のワイドでも構図を保つ。 */
/* モーフループのステージ。1440x810 のフレーム座標をそのまま持つ。
   transform は js/hero-morph.js が毎フレーム
   perspective + rotateX/rotateY + 微小ドリフト + スクロール接続
   として書き込む(CSS 側では書かない)。 */
.hero__motif {
  position: absolute;
  left: calc(50% - 720px);
  top: 0;
  width: 1440px;
  height: 810px;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  transform-origin: 50% 46%;
  will-change: transform;
}
.hero__motif .hm {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 88.7769;        /* Rectangle 64/65 の幅 */
  stroke-linecap: round;
  shape-rendering: geometricPrecision;
}
.hero__motif .hm--dot { fill: var(--color-primary); stroke: none; }
/* SP は Figma に該当フレームが無いので、右上に寄せて一部を切る */
@media (max-width: 767px) {
  .hero__motif {
    left: calc(50% - 50vw);
    top: 0;
    width: 100vw;
    height: auto;
    aspect-ratio: 1440 / 810;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__motif .hm { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; }
}
/* モチーフは z1 なので、文字側はどの幅でも前面に。
   (SP では wrap が static のままだと z1 の下に潜る) */
.hero--brushup > .wrap { position: relative; z-index: 2; }
/* ドットアニメーションは削除 */
.hero--brushup .hero__dots { display: none; }
.hero__dots {
  top: -90px;
  right: -140px;
  width: 460px;
  height: 460px;
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
  perspective: 780px;
}
@media (min-width: 768px) {
  .hero__dots { width: 760px; height: 760px; top: -60px; right: -20px; perspective: 1100px; }
}
/* Fixed viewing angle so the torus holes and the way the two rings link
   through each other are actually legible, not a flat top-down view. */
.hero__dots-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(24deg) rotateZ(-6deg);
}
/* Continuous slow turntable spin, only once the shape has formed — this
   is what sells the cluster as a solid 3D object rather than a flat
   projection. */
.hero__dots-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
#hero-dots.is-gathered .hero__dots-spin {
  animation: hero-torus-spin 34s linear infinite;
}
/* Starts at 45deg (not 0) - the angle where both rings read clearly as
   circles at once, rather than one face-on and one edge-on. */
@keyframes hero-torus-spin {
  from { transform: rotateY(45deg); }
  to   { transform: rotateY(405deg); }
}
/* Outer element: pure positioning + the scatter->gather move into place
   on the surface of the two linked tori. */
.hero__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translate3d(var(--dx, 0), var(--dy, 0), var(--dz, 0));
  transition: transform 2.4s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
#hero-dots.is-gathered .hero__dot {
  transform: translate3d(var(--tx, 0), var(--ty, 0), var(--tz, 0));
}
/* Inner element: the visible dot. Its own small continuous wiggle only
   runs pre-gather (chaotic phase); once the torus shape locks in, the
   shared spin above is the only motion so the surface reads as solid. */
.hero__dot-core {
  position: absolute;
  width: 4.5px;
  height: 4.5px;
  margin: -2.25px 0 0 -2.25px;
  border-radius: 50%;
  background: #a4a4a8;
  animation: hero-dot-wiggle ease-in-out infinite;
  will-change: transform;
}
#hero-dots.is-gathered .hero__dot-core {
  animation: none;
  transform: translate(0, 0);
}
@keyframes hero-dot-wiggle {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(var(--wx, 0), var(--wy, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__dot { transform: translate3d(0, 0, 0); transition: none; }
  .hero__dot-core { animation: none; }
  #hero-dots.is-gathered .hero__dots-spin { animation: none; }
}
.hero__blob--1 { width: 380px; height: 380px; left: -150px; top: 30px; background: radial-gradient(circle, #FDDCC2 0%, #FDDCC2 15%, rgba(253, 220, 194, 0) 65%); opacity: .8; }
.hero__blob--2 { width: 380px; height: 380px; right: -150px; top: 190px; background: radial-gradient(circle, #FFD9BC 0%, #FFD9BC 15%, rgba(255, 217, 188, 0) 65%); opacity: .8; }
@media (min-width: 768px) {
  .hero__blob--1 { width: 580px; height: 580px; left: -200px; top: 40px; }
  .hero__blob--2 { width: 580px; height: 580px; right: -240px; top: 240px; }
  /* brushup は Figma の Ellipse 51(-73/96) / 55(1022/350)。508x508。
     y はヒーロー開始(ページ90)基準に直した値。 */
  .hero--brushup .hero__blob { z-index: 0; }
  .hero--brushup .hero__blob--1 {
    width: 508px; height: 508px;
    left: calc(50% - 793px);   /* -73 - 720 */
    top: 196px;                /* (96-90+100) + 90 = hero箱の上端変更を補正 */
    /* 最背面。文字やグラフィックの上に載せない(hero は透明なので
       z-index:-1 でもルートの白キャンバスより手前に描かれる) */
    z-index: -1;
  }
  .hero--brushup .hero__blob--2 {
    width: 508px; height: 508px;
    left: calc(50% + 302px);   /* 1022 - 720 */
    right: auto;
    top: 260px;                /* 350 - 90 */
  }
}

/* Slow ambient motion: the glows sweep across the whole hero area like
   floating light, the dot cluster gently breathes in and out (scaling
   from its own visual center so it stays a true circle). */
@keyframes hero-float-1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(14vw, -9vh) scale(1.12); }
  50%  { transform: translate(6vw, 11vh) scale(0.94); }
  75%  { transform: translate(-11vw, 3vh) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes hero-float-2 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-13vw, 7vh) scale(0.92); }
  50%  { transform: translate(-5vw, -10vh) scale(1.1); }
  75%  { transform: translate(10vw, -4vh) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}
/* 背景の薄い円はタイトルより先に、ごく弱く現れる。主役ではない。
   浮遊は入場が終わってから始める(同じ transform を奪い合うため、
   animation を2本並べて、後ろの hero-float 側を遅延で後から効かせる)。 */
@keyframes hero-blob-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: .8; transform: scale(1); }
}
.hero__blob { opacity: 0; }
/* FV の背景グラデーションは置かない(指示により左右とも撤去) */
.hero--brushup .hero__blob { display: none; }
body.fv-in .hero__blob--1 {
  animation:
    hero-blob-in 1.2s cubic-bezier(.22, 1, .36, 1) .1s both,
    hero-float-1 13s ease-in-out 1.3s infinite;
}
body.fv-in .hero__blob--2 {
  animation:
    hero-blob-in 1.2s cubic-bezier(.22, 1, .36, 1) .1s both,
    hero-float-2 16s ease-in-out 1.3s infinite;
}
/* brushup の FV は「完成後は完全に静止」が要件。浮遊は掛けず、
   入場が終わったら Figma の位置のまま止まる。 */
body.fv-in .hero--brushup .hero__blob--1,
body.fv-in .hero--brushup .hero__blob--2 {
  animation: hero-blob-in 1.2s cubic-bezier(.22, 1, .36, 1) .1s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob { opacity: .8; }
  body.fv-in .hero__blob--1,
  body.fv-in .hero__blob--2 { animation: none; }
}

.hero__title {
  position: relative;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 4px;
  color: var(--color-ink);
  margin: 0 0 20px;
}
@media (min-width: 768px) {
  .hero__title { font-size: 54px; margin-bottom: 30px; }
}
.hero__highlight {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 2px 14px;
  border-radius: 4px;
}
.hero__rest { margin-left: 6px; display: inline-block; }
.hero__word { white-space: nowrap; }

/* Figma 232:27380。タイトルはAlata、"AIShift"のみGugi。
   ピルの "AIShift" は .hero__highlight--pill 側でGugiにしている。
   リード文(232:27385)は "AI" を含めて Noto Sans JP なので、
   タイトルとは別書体になる。 */
.hero--brushup .hero__title { font-family: var(--font-alata); }

/* Figma 215:22653 (DESIGN A_brushup)。ハイライトは日本語全体ではなく
   英字の "AIShift" のみを囲むピル形状に。 */
/* 字面(実インク)をピルの天地・左右中央に置くための補正。
   Gugi はメトリクスが上下非対称(54pxでアセント46/ディセント8)で、
   末尾 "t" の右サイドベアリングも大きい。素直にベースライン揃え+左右均等
   paddingにすると、実測で字面が上に2.6px・左に8.1pxずれる。
   paddingを上下・左右で振り分けて相殺する(合計は変えないのでピルの寸法は不変)。
   ずれ量はフォントサイズに比例するので em で指定している。 */
.hero__highlight--pill {
  --pill-shift-y: 0.048em;
  --pill-shift-x: 0.15em;
  border-radius: 999px;
  padding:
    calc(4px + var(--pill-shift-y))
    calc(22px - var(--pill-shift-x))
    calc(4px - var(--pill-shift-y))
    calc(22px + var(--pill-shift-x));
  font-family: var(--font-gugi);
  font-weight: 400;
  letter-spacing: .04em;
}
@media (min-width: 768px) {
  .hero__highlight--pill {
    padding:
      calc(6px + var(--pill-shift-y))
      calc(32px - var(--pill-shift-x))
      calc(6px - var(--pill-shift-y))
      calc(32px + var(--pill-shift-x));
  }
}


/* Figma 215:22653。リード文はすべて同サイズ(24px)の2行で、
   字下げやウェイト差はなし。 */
/* セレクタを .hero--brushup 起点にしているのは、後段の
   `.hero__desc { max-width: 42rem }` と同詳細度だと source order で負け、
   幅が672pxに落ちて2行目が折り返し3行になってしまうため。 */
.hero--brushup .hero__desc--brushup {
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--color-ink);
  max-width: 761px; /* Figma 412:32432 (277:34615) w=761 */
}
/* 見出しの「の」「を」と同じく、リードの助詞「と」だけ 4px 小さい
   (Figma 277:34615: 24px に対して 20px / 字間 2.4px = 同じ .12em)。 */
.hero__desc--brushup .kv-sm { font-size: .8333em; }
@media (min-width: 768px) {
  .hero--brushup .hero__desc--brushup { font-size: 24px; letter-spacing: .12em; }
}
/* balance は2行目を早折りして3行に見せてしまうため使わない(Figmaは2行) */
.hero__desc--brushup p { margin: 0; }
/* Figma 232:27385。"AI" は前後の和文と同じ Alata 24px。違うのは字間だけで、
   和文が tracking 2.88px(=.12em)なのに対し "AI" は 0。書体は継承させる。 */
.hero__desc--brushup .hero__ai { letter-spacing: 0; }

/* Figma 206:24159。同じ大きさで2行流していたリード文を、
   「状況説明(細く小さく)」と「掲げるコピー(太く大きく)」の2段に割って
   メリハリを付ける。行高・色は実測どおり(1.7 / #040404 = --color-ink)。 */
.hero__desc {
  position: relative;
  line-height: 1.7;
  color: var(--color-ink);
  max-width: 42rem;
}
.hero__lead {
  font-size: 14px;
  margin-bottom: 6.66px; /* Figma: 上段⇄下段ブロックの gap */
}
.hero__catch {
  display: flex;
  flex-direction: column;
  gap: 4.16px; /* Figma: コピー2行の gap */
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em; /* Figma: 32pxに対して0.64px */
  /* Figma実測512px。2行目の右寄せはこの幅を基準に効くので、
     広い画面でも字下げ量が間延びしないよう頭打ちにする。 */
  max-width: 512px;
}
/* 2行目だけ右端に寄せる。1行目より短くないので、結果として
   一文字ぶんほど字下げされた見え方になる。 */
.hero__catch-end { text-align: right; }
@media (min-width: 768px) {
  .hero__lead { font-size: 20px; }
  .hero__catch { font-size: 32px; }
}

/* ===========================================================
   FV の立ち上がり
   スプラッシュの円形ワイプが中央を開けてから body.fv-in が付く
   (main.js。intro-revealed と同時だと幕の裏で動き終わってしまう)。

     +0.10s  背景の薄い円
     +0.20s  産業の
     +0.28s  AI Shift pill
     +0.36s  を支援する
     +0.55s  リード文1行目
     +0.65s  リード文2行目
   1.4s あたりでほぼ完成し、そのあとは完全に静止する。
   下から飛び上がらせない。ほんの少し下にあったものが定位置へ収まる量。
   =========================================================== */
.hero__intro-item {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity   .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1),
    filter    .8s cubic-bezier(.22, 1, .36, 1);
}
body.fv-in .hero__intro-item {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.hero__intro-item--1 { transition-delay: .12s; }   /* 産業の */
.hero__intro-item--2 { transition-delay: .44s; }   /* を支援する */

/* AI Shift の pill だけは視線の中心なので、少しだけ印象を強くする。
   blur はかけない(下地のオレンジ面がにじむため)。 */
/* ドットは右のグラフィックへ行くので、pill は他の行と同じ静かな入り方に
   する。下地のオレンジ面がにじむため blur だけは掛けない。 */
.kv-pill.hero__intro-item {
  filter: none;
  transition-delay: .28s;
}
body.fv-in .kv-pill.hero__intro-item { transform: none; }

/* リード文は2行を 100ms ずらして、タイトルより静かなトーンで入れる */
.hero__desc--brushup p {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity   .9s cubic-bezier(.22, 1, .36, 1),
    transform .9s cubic-bezier(.22, 1, .36, 1),
    filter    .9s cubic-bezier(.22, 1, .36, 1);
}
body.fv-in .hero__desc--brushup p { opacity: 1; transform: none; filter: blur(0); }
body.fv-in .hero__desc--brushup p:nth-child(1) { transition-delay: .68s; }
body.fv-in .hero__desc--brushup p:nth-child(2) { transition-delay: .80s; }

@media (prefers-reduced-motion: reduce) {
  .hero__intro-item,
  .kv-pill.hero__intro-item,
  .hero__desc--brushup p { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ヘッダーの登場はFV形成後半(fv-in + .9s)。登場は内側(inner)が担い、
   ヘッダー本体の transform はスクロール開閉(.is-hidden)専用にする。
   同じ要素に載せると開閉にも .9s の遅延が掛かって鈍くなるため分離。 */
.site-header--brushup .site-header__inner {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity   .7s cubic-bezier(.22, 1, .36, 1) .9s,
    transform .7s cubic-bezier(.22, 1, .36, 1) .9s;
}
body.fv-in .site-header--brushup .site-header__inner { opacity: 1; transform: none; }
/* 下スクロールで上に閉じ、上スクロールで現れる(js/main.js が .is-hidden を制御)。
   sticky の待機位置(top:20px)と半調プレートの上への延長(20px)も含めて
   完全に画面外へ逃がすため -24px 余分に引き上げる。 */
/* 出没は「ふわっと」。移動はごく小さく(-6px)、消えるのは不透明度で。
   以前は画面外(-100%-24px)まで弾き出していたため、突然消える印象に
   なっていた。出入りとも同じモーション・同じ尺で対称にする。 */
.site-header--brushup {
  transition:
    opacity    .3s cubic-bezier(.22, 1, .36, 1),
    transform  .3s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
  will-change: opacity, transform;
}
.site-header--brushup.is-hidden,
.site-header--brushup.is-pin-locked {
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    .3s cubic-bezier(.22, 1, .36, 1),
    transform  .3s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .3s;
}
@media (prefers-reduced-motion: reduce) {
  .site-header--brushup { transition: none; }
  .site-header--brushup .site-header__inner { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   About
   =========================================================== */
.about {
  position: relative;
  padding: 8px 0 56px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .about { padding: 16px 0 96px; }
}
.about__blob {
  position: absolute;
  left: -100px;
  top: 100px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFEFE7 0%, rgba(255, 239, 231, 0) 65%);
  pointer-events: none;
}
@media (min-width: 768px) {
  .about__blob { width: 620px; height: 620px; left: 20px; top: 120px; }
}

.about__card {
  position: relative;
  /* Frosted glass (Figma 180-22767): translucent panel + blur so the
     blob glow behind it softens through, plus a soft shadow and a
     thin light-catching edge. */
  background: rgba(255, 255, 255, .10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow:
    0 24px 48px -16px rgba(15, 23, 42, .14),
    0 2px 8px rgba(15, 23, 42, .04),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
@media (min-width: 768px) {
  .about__card {
    padding: 56px 64px;
    display: flex;
    align-items: center;
    gap: 56px;
  }
}
.about__text {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .about__text { flex: 1; }
}
.about__heading {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0 0 12px;
  overflow: hidden; /* the mask the text slides up through */
}
@media (min-width: 768px) {
  .about__heading { font-size: 24px; margin: 0 0 16px; }
}
/* Slides up from below while the heading's own overflow:hidden clips
   it, so it reads as being pushed up out of a mask rather than a
   plain fade. One-shot, triggered on scroll (see js/main.js). */
.about__heading-inner {
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
  will-change: transform, opacity;
}
.about__heading-inner.is-visible {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .about__heading-inner { transform: none; opacity: 1; transition: none; }
}
.about__body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  max-width: 46rem;
}
@media (min-width: 768px) {
  .about__body { font-size: 18px; }
}
/* Figma 240:27507。パネル地(#F4F4F4)・ブロブ位置・見出し/本文の色や
   字間・行間・ロゴ〜テキストのgapまで実測値に合わせる。 */
.about--brushup .about__panel {
  position: relative;
  overflow: hidden;
  padding: 40px 20px;
}
@media (min-width: 768px) {
  .about--brushup .about__panel { padding: 90px 92px; }
}
.about--brushup .about__blob {
  left: 8px;
  top: 40px;
  width: 260px;
  height: 264px;
}
@media (min-width: 768px) {
  .about--brushup .about__blob { left: 120px; top: 250px; width: 659px; height: 669px; }
}
.about--brushup .about__card {
  position: relative;
  z-index: 1;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 16px;
}
@media (min-width: 768px) {
  .about--brushup .about__card {
    margin-top: 25px;
    gap: 108px;
    padding: 0 113px 0 114px;
  }
}
.about--brushup .about__heading,
.about--brushup .about__body { color: #191919; }
.about--brushup .about__heading {
  letter-spacing: .96px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .about--brushup .about__heading { margin-bottom: 26px; }
}
.about--brushup .about__body {
  font-family: var(--font-jp);
  line-height: 1.7;
  letter-spacing: 0;
}
.about--brushup .about__tracked { letter-spacing: .96px; }
.about--brushup .about__logo-svg { width: 178px; }
.about__wordmark {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: .06em;
  color: var(--color-ink);
  margin: 0 0 20px;
  text-align: center;
}
@media (min-width: 768px) {
  .about__wordmark { font-size: 60px; margin: 0; flex-shrink: 0; text-align: left; }
}
.about__logo {
  margin: 0 0 20px;
  text-align: center;
}
.about__logo-svg {
  display: inline-block;
  width: 200px;
  height: auto;
  overflow: visible;
}
@media (min-width: 768px) {
  .about__logo { margin: 0; flex-shrink: 0; text-align: left; }
}

/* Logo construction reveal: grid -> two guide circles -> tangent line ->
   full outline draws in -> outline becomes a solid fill -> grid fades out.
   Every phase is a plain CSS transition gated by a single .is-playing
   class (added once, on first scroll into view); each element's own
   transition-delay is what actually staggers the sequence. */
.logo-anim__grid {
  opacity: 1;
  transition: opacity .2s ease 2s;
}
#about-logo-svg.is-playing .logo-anim__grid { opacity: 0; }

.logo-anim__circle {
  opacity: 0;
  transform: scale(.6);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .4s ease, transform .4s ease;
  will-change: transform, opacity;
}
.logo-anim__circle--1 { transition-delay: 0s; }
.logo-anim__circle--2 { transition-delay: .4s; }
#about-logo-svg.is-playing .logo-anim__circle {
  opacity: 1;
  transform: scale(1);
}
/* Construction guides are done their job once the mark is filled in -
   fade them out alongside the grid instead of leaving them on screen. */
#about-logo-svg.is-complete .logo-anim__circle {
  opacity: 0;
  transition: opacity .2s ease;
}

.logo-anim__tangent {
  transition: stroke-dashoffset .4s ease .8s;
  will-change: stroke-dashoffset;
}
#about-logo-svg.is-playing .logo-anim__tangent { stroke-dashoffset: 0; }
#about-logo-svg.is-complete .logo-anim__tangent {
  opacity: 0;
  transition: opacity .2s ease;
}

.logo-anim__mark path {
  fill: var(--color-ink);
  fill-opacity: 0;
  stroke: #9a9a9a;
  stroke-width: 1.2;
  stroke-opacity: 1;
  /* stroke-dasharray/dashoffset are set inline by JS once each path's
     real length is known (getTotalLength), so the outline draws evenly. */
  transition:
    stroke-dashoffset .4s ease 1.2s,
    fill-opacity .4s ease 1.6s,
    stroke-opacity .4s ease 1.6s;
  will-change: stroke-dashoffset, fill-opacity, stroke-opacity;
}
/* stroke-dashoffset's end value (0) is set inline by JS at play-time
   instead of here - an inline style always wins over a class selector,
   so a CSS override here would never actually take effect. */
#about-logo-svg.is-playing .logo-anim__mark path {
  fill-opacity: 1;
  stroke-opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .logo-anim__grid, .logo-anim__circle, .logo-anim__tangent { display: none; }
  .logo-anim__mark path {
    fill-opacity: 1;
    stroke-opacity: 0;
    transition: none;
  }
}

/* ===========================================================
   Service
   =========================================================== */
.service { padding: 0; }
.service__panel {
  position: relative;
  background: var(--color-dark);
  border-radius: 24px;
  padding: 40px 20px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .service__panel { border-radius: 40px; padding: 64px 92px; }
}

.service__content {
  position: relative;
  margin-top: 28px;
}
@media (min-width: 768px) {
  .service__content { margin-top: 36px; }
}

/* Mobile: plain stacked flow, no pinning */
.service__scroller,
.service__pin,
.service__pin-grid { display: block; }

.service__text-list {
  display: flex;
  flex-direction: column;
}
.service__text-item .btn {
  width: 100%;
}
.service__text-item {
  max-width: 512px;
}
.service__text-item + .service__text-item {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

@media (min-width: 768px) {
  /* Desktop: the whole dark panel stays pinned in place (its own natural
     height, no extra empty space) while a tall invisible scroller provides
     the scroll distance used to switch between item 01 and 02. The image
     crossfades in place; the text list instead slides upward inside a
     fixed-height, clipped window so it reads like ordinary scrolling. */
  /* 進行度はスクロール距離だけが決める。ピンは「見せている間だけ
     映像を画面内に保つ」ためにあり、操作は一切奪わない。
     走行距離 = 340svh - 100svh = 240svh。配分は js/main.js と対:
       0-35% 1本目 / 35-50% 切替 / 50-80% 2本目 / 80-100% 抜け
     2本目に 30%(=72svh)を割いてあるので、同じ速さで回しても
     2本目を見る時間が自然に生まれる(時間では待たせない)。 */
  /* 走行距離。420svh は面を1256px 横に流していた頃の値で、
     移動量とスクロール量を 1:1 にするために必要だった。いまは
     位置が動かず濃度だけで入れ替わるので、その長さは「ピンで
     画面が固定されたまま3画面ぶんスクロールしても何も動かない」
     区間になってしまう(=セクションで止まって見える)。
     走行距離 = 240-100 = 140svh。前後の滞在が各 0.3 画面、
     溶け合いに 0.8 画面。 */
  .service__scroller { position: relative; height: 240svh; }
  /* 等身大(100svh)の箱を top:0 で貼り、中身は天地中央に置く。
     以前は top:50svh + translateY(-50%) で見た目だけ中央に寄せており、
     レイアウト箱と見た目のズレを JS が負のマージンで補正していた。
     その再計算(resize / フォント確定 / load)のたびにページ高さが変わり、
     スクロール位置が飛んでガタついていた。補正ごと不要にする。 */
  .service__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-content: center;
  }

  .service__pin-grid {
    display: grid;
    grid-template-columns: 1fr 44%;
    align-items: center;
    gap: 60px;
  }

  .service__text-track {
    position: relative;
    height: 420px;
    overflow: hidden;
  }
  .service__text-list {
    display: block;
    will-change: transform;
  }
  .service__text-item {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .service__text-item + .service__text-item {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.service__num {
  display: block;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin-bottom: 10px;
}
.service__title {
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 14px;
}
@media (min-width: 768px) {
  .service__title { font-size: 22px; }
}
.service__desc {
  font-size: 14px;
  line-height: 1.7;
  color: #C0C0C0;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .service__desc { font-size: 15px; }
}

/* Figma 237:27426。パララックスの2枚重ねステージ・番号バッジ・スクロール
   固定演出をやめ、静的な1カラム(モバイル)/2カラム(デスクトップ)の
   リストに。装飾ブロブ2つと、パネル下端で欠けるマーケー見出しを追加。 */
/* グレーの背景は .wrap の余白を無視して画面幅いっぱいに敷く
   (角丸カードではなく、他の全幅セクションと同じ full-bleed 背景)。
   左右のパディングは .wrap と同じ clamp() にして、News など他の
   セクションとコンテンツの左右端(幅)が揃うようにする。 */
.service--brushup .service__panel {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0;
  padding-inline: clamp(20px, 6.4vw, 92px);
}
@media (min-width: 768px) {
  .service--brushup .service__panel {
    padding-block: 0;
    /* ステージと同じ 1su。ラベルを本文の文頭に合わせるために使う */
    --su: min(1px, 0.0796178cqw);
  }
  /* Frame 152: x92 y90。1440 で 92/90、狭い幅では同率で追従 */
  /* ラベルはステージ(.service__list)を基準に置く。パネルは 100vw の
     全幅なので、パネル基準だと 1440 超の画面で .wrap(中央寄せ)より
     外に取り残される。ステージは .wrap と同じ内側に中央寄せされるので、
     その左端 = 本文の文頭 = 他セクションの文頭に必ず一致する。 */
  .service--brushup .service__list > .label {
    position: absolute;
    left: 0;
    top: calc(var(--su) * 90);     /* Frame 152 (215:24002) y=90 */
    margin-bottom: 0;
  }
  .service--brushup .service__list { overflow: visible; }
}
.service--brushup .service__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* パネルは overflow:hidden なので、外へはみ出したこの白いグラデが
     箱の角で切られる。パネル自身に背景を持たせていた頃は同じ暗さの上に
     乗っていて見えなかったが、地を透かすようにした今は切り口が
     右上の境界線として出てしまう。
     暗転中はビューポート全面のメッシュ(.svc-aurora)が同じ役目を果たすので、
     沈むぶんだけこちらを引いて、切り口が現れないようにする。
     2.2倍で効かせているのは、地が暗くなって切り口が目に付き始める前
     (進行度 0.45)には消し切っておくため。 */
  opacity: calc(1 - var(--svc-dark, 0) * 2.2);
}
.service--brushup .service__blob--1 {
  width: 508px; height: 508px; right: -160px; top: -180px;
  background: radial-gradient(circle, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 70%);
}
.service--brushup .service__blob--2 {
  width: 508px; height: 508px; left: -220px; top: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 70%);
}
.service--brushup .label { position: relative; z-index: 1; }
.service--brushup .service__list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 32px;
}
@media (min-width: 768px) {
  /* Figma 215:22691 / 253:27104 (1440x784)。ステージは x92..1348 の 1256 幅。
     1su = 1256分の1(cqw)。マーケーの帯(y621-784)はステージの下に流れるので、
     ステージ自体は 1256:621。 */
  .service--brushup .service__list {
    position: relative;
    display: block;
    /* .wrap と同じ最大幅の内側(1440 - 92*2)に収める。
       ただし幅だけで決めると、パネル(=100svh)より中身(1440x784の比率)が
       高くなる画面で下の英字が切られる。高さでも頭打ちにして、
       同じ比率のまま縮める(1256 / 784 = 1.602 → 余裕を見て 158svh)。
       縦 795px 以上の画面では 1256px 側が効くので、従来と変わらない。 */
    max-width: min(1256px, 158svh);
    margin-inline: auto;
    margin-top: 0;
    min-height: 0;
    container-type: inline-size;
    aspect-ratio: 1256 / 621;
    --su: 0.0796178cqw; /* 100/1256 */
  }
}
/* デスクトップ: 背景(パネル)は service__pin で固定したまま、
   2アイテムをふわっとクロスフェードで切り替える(main.js の
   setServiceActive が is-active を付け替える)。 */
@media (min-width: 768px) {
  /* 切替は不透明度だけの純粋なディゾルブ。translateY を掛けると
     文字と映像が 14px 動いて「一瞬揺れた」ように見える。
     2アイテムは同一座標に重なっているので、動かさなければ中身だけが
     すーっと入れ替わって見える。 */
  /* 2アイテムは同一座標に重なっている。位置もサイズも一切変えず、
     不透明度だけを js がスクロール進行度から直接書く。
     CSS の時間ベース transition は持たせない。持たせると途中で
     スクロールを反転したとき時間側と進行度側が食い違い、
     「方向と映像の切替が矛盾する」状態になる。 */
  /* 2面はステージにぴたりと重ねて置き、面ごと濃度で入れ替える。
     本文も映像もひとつの面として一緒に溶ける(オーバーレイ)。
     位置は一切動かさない。横に流すと、固定されている見出しの上を
     映像が横切ったり、枠の中に次の映像の帯が覗いたりして汚れる。
     z-index は触らない。入れ替えの途中で重なり順を変えると、
     ちょうど半分溶けたところで前後が入れ替わって跳ねて見える。 */
  .service--brushup .service__text-item {
    position: absolute;
    inset: 0;
    max-width: none;
    pointer-events: none;
  }
  /* 濃度を毎フレーム書くのは映像と本文。ここだけ層を確保しておく
     (面そのものはもう動かさないので、面に will-change は要らない)。 */
  .service--brushup .service__loop-video {
    will-change: opacity;
    backface-visibility: hidden;
  }
  /* js が値を書くまでの初期状態。2面は同じ位置に重なっているので、
     ここで 02 を伏せておかないと最初の1描画で二重に出る。 */
  .service--brushup [data-service-item="1"] .service__text,
  .service--brushup [data-service-item="1"] .service__loop-video { opacity: 0; }
  /* 受け渡しの一瞬だけ見える地。2本の映像が同時に薄くなる瞬間に
     ここが無いと枠が抜けて背景が透ける。下になる 01 の枠にだけ敷き、
     上に重なる 02 の枠は素通しにする(敷くと下の映像を隠すため)。 */
  .service--brushup [data-service-item="0"] .service__image { background: #05070A; }
  .service--brushup .service__text-item.is-active { pointer-events: auto; }
  /* 文字は面の濃度に掛け算される別系統(値は js が書く)。
     映像は面と一緒に溶けるが、文字だけは前後が重ならない。 */
  .service--brushup .service__text { will-change: opacity; }

  /* パネルは背景なしの入れ物。ピン中に登場モーションの translateY が
     残っていると映像枠が上下に動くため、ここでは reveal を効かせない。
     中のラベルと各面は従来どおり reveal する。 */
  .service--brushup .service__panel.reveal {
    opacity: 1;
    transform: none;
  }
}
.service--brushup .service__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.service--brushup .service__text { max-width: 506px; }
@media (min-width: 768px) {
  .service--brushup .service__row { display: block; position: static; height: 100%; }
  /* Frame 139 (274:30539): x92 y90 476x458。ステージ左端が x92 なので
     テキスト段はステージ内 0。中の Frame 167 が y184 → 90+184=274。
     ラベル(Frame 152)と文頭が揃う。 */
  .service--brushup .service__text {
    position: absolute;
    left: 0;
    top: calc(var(--su) * 274);
    width: calc(var(--su) * 476);
    max-width: none;
    flex: none;
  }
  /* 見出し→本文 40px、本文→ボタン 60px (Frame 167 の 69-29 / 417-357)。
     ベースの margin(14px/24px)が同詳細度で後にあるので、
     .service__text を挟んで詳細度を上げないと効かない。 */
  .service--brushup .service__text .service__title { margin-bottom: calc(var(--su) * 40); }
  .service--brushup .service__text .service__desc { margin-bottom: calc(var(--su) * 60); }
  /* Frame 112: 218x41 に更新 */
  .service--brushup .service__text .service__link {
    width: auto;
    min-width: min(calc(var(--su) * 218), 100%);
  }
  /* 映像スロット (Figma 237:27441 miai_image: x739 y236 552x311)。
     707x445 は大きすぎたので Figma の 552x311 に戻す。
     横: ステージ内 = 739-92 → 647。右に 57 の余白が残る。
     縦: 文字の段(Frame 139 y90..548 / 中心319)の天地センターに合わせる。
         311/2 = 155.5 なので top = 319 - 155.5 = 163.5。
     2枚の動画で共通のスロット。 */
  .service--brushup [data-service-item="0"] .service__image,
  .service--brushup [data-service-item="1"] .service__image {
    position: absolute;
    left: calc(var(--su) * 647);
    top: calc(var(--su) * 163.5);
    width: calc(var(--su) * 552);
    height: calc(var(--su) * 311);
    border-radius: calc(var(--su) * 18);
    max-width: none;
    aspect-ratio: auto;
    flex: none;
  }
}
.service--brushup .service__title {
  font-family: var(--font-alata);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: #EFEFEF;
  margin: 0 0 14px;
}
@media (min-width: 768px) {
  .service--brushup .service__title { font-size: 24px; }
}
.service--brushup .service__desc {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 1.7;
  color: #C0C0C0;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .service--brushup .service__desc { font-size: 15px; }
}
/* サービスサイトへのボタン: Figma Frame 112 (262:29128)。
   215x41 の白い枠のピル。中身は 14px のラベルと、12x8 の角丸矩形を
   3px ずらして重ねた別窓アイコン(262:29134 / 262:29135)。
   ホバーは他のCTAと同じく、円が広がって面が満ちる。 */
.service--brushup .service__link {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 幅は Figma の 218 を基準にしつつ、狭い画面では中身に合わせて縮める。
     固定幅のままだと文字が2行に折り返してボタンが崩れる。 */
  width: auto;
  min-width: min(218px, 100%);
  max-width: 100%;
  height: 41px;
  min-height: 41px;
  padding: 11px 20px;
  white-space: nowrap;
  border: 1px solid #fff;
  border-radius: 29px;
  font-family: var(--font-alata);
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
  text-decoration: none;
  transform-origin: center;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1),
              border-color .45s cubic-bezier(.22, 1, .36, 1);
}
/* 左端から円が広がって面になる */
.service--brushup .service__link::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.service--brushup .service__link-label,
.service--brushup .service__link-icon { position: relative; z-index: 1; }
.service--brushup .service__link-label { white-space: nowrap; }
.service--brushup .service__link-icon { flex: 0 0 auto; }

.service--brushup .service__link-icon {
  display: block;
  width: 15px;
  height: 11px;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
/* Figma 441:23276 の実データ(15x11 / 線のみ・塗りなし)。
   以前は 12x8 の角丸矩形を2枚ずらして重ね、手前を地の色で塗って
   奥を隠していたため、地の色が変わると塗りが浮いて見えていた。 */
.service--brushup .service__link-icon svg {
  display: block;
  width: 15px;
  height: 11px;
  overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
  .service--brushup .service__link:hover::before { transform: scale(22); }
  .service--brushup .service__link:hover { border-color: var(--color-primary); }
  .service--brushup .service__link:hover .service__link-icon { transform: translateX(3px); }
  /* 2枚がわずかに開いて奥行きが出る */
  /* ホバーで面が満ちても、線は currentColor(白)のまま自然に馴染む */
  /* 押した瞬間だけ面がわずかに沈み、離すと戻る。richka の手応えを参考に、
     見た目(円が満ちる)は props のままで、押下の反応だけを足している。 */
  .service--brushup .service__link:active {
    transform: scale(.985);
    transition: transform .09s ease-out, border-color .45s cubic-bezier(.22, 1, .36, 1);
  }
  .service--brushup .service__link:active .service__link-label,
  .service--brushup .service__link:active .service__link-icon { transform: translateY(.5px); }
  .news__more:active .news__more-fill { transform: scale(.98); }
}

@media (max-width: 480px) {
  .service--brushup .service__link { font-size: 13px; padding-inline: 16px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .service--brushup .service__link,
  .service--brushup .service__link::before,
  .service--brushup .service__link-icon,
}
.service--brushup .service__image {
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 471 / 265;
  width: 100%;
}
@media (min-width: 768px) {
  .service--brushup .service__image {
    flex: 1.269 1 642px;
    max-width: 642px;
    min-width: 0;
    width: auto;
    aspect-ratio: 642 / 361;
  }
}
.service--brushup .service__image img,
.service--brushup .service__image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 角丸で毎フレーム切り抜くと切替時に負荷が跳ねるので層を固定する */
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 英字は画面幅いっぱいまで流す。パネルの左右余白ぶん内側で切れていたので、
   同じ量だけ負のマージンで打ち消して 100vw に広げる。 */
.service--brushup .service__marquee {
  position: relative;
  z-index: 0;
  margin-block: 40px -40px;
  margin-inline: calc(clamp(20px, 6.4vw, 92px) * -1);
  overflow: hidden;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .service--brushup .service__marquee { margin-block: 0; }
}
/* 右から左へ常にゆっくり流れるマーケー。同じ文言を2回並べて
   -50%まで送ることで、繋ぎ目のない無限ループにしている。 */
.service--brushup .service__marquee-track {
  display: inline-flex;
  width: max-content;
  /* 同じ文言を2組持ち -50% で戻すので、継ぎ目なく無限に流れる */
  animation: service-marquee 42s linear infinite;
  will-change: transform;
}
.service--brushup .service__marquee-track span {
  flex-shrink: 0;
  padding-right: .5em;
  font-family: var(--font-display-en);
  /* 帯の高さ(= font x 1.7)もステージと同じ比率で縮める。
     そうしないとステージだけ小さくなって英字だけが下からはみ出す。
     96px / 1256px x 158svh = 12svh。縦 800px 以上では 96px 側が効く。 */
  font-size: clamp(40px, min(11vw, 12svh), 96px);
  /* Figma 232:27402 は 1877x163。163/1.7 = 95.9 ≒ font-size 96px。
     Chillax の字送り 0 での自然幅が 1775.6px なので、1877px に
     収まる送りは 2.6px = .027em。従来の .12em は開きすぎだった。 */
  letter-spacing: .027em;
  line-height: 1.7;
  /* Figma(253:27115)は #3D3430 → rgba(255,239,231,.23) → #4B4B4B の
     グラデーションだが、左端と中間に暖色が入って橙が混ざって見えるため、
     指示によりグラデーションをやめて中立グレー1色にしている。
     アクセント色になるのは「背景が完全に白へ戻り切ったとき」だけ。
     沈み残りのグレー地の上でオレンジを出すと煉瓦色に濁って見えるため、
     中間値では変化させない(--mq-white は js/main.js が 0/1 で書く)。
     A-2(darkblack)はページ側で --mq-accent をグレーに固定している。 */
  /* 暗転中のグレーは少し透かす(α.55)。下のダークグレーと
     メッシュのオレンジがわずかに透けて、地の色と馴染む */
  color: color-mix(in srgb, var(--mq-accent, var(--color-primary))
                   calc(var(--mq-white, 0) * 100%), rgba(115, 115, 115, .55));
  transition: color .5s ease;
}
@keyframes service-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .service--brushup .service__marquee-track { animation: none; }
}

/* Mobile: each item shows its own inline image; desktop uses the
   floating 3D stage instead */
.service__mockup-mobile { margin-top: 24px; }
.service__mockup-mobile img,
.service__mockup-mobile video {
  display: block;
  width: 100%;
  border-radius: 12px;
}
/* ループ動画は暗い映像なので、poster が出るまでの一瞬に白が挟まらないよう
   要素自体にも下地の暗色を敷いておく */
.service__loop-video { background: #05070a; }
/* 01 の面の映像。素材のオレンジをブランドの #FF2400 に揃える
   (HTML 側 filter#miai-brand。白・黒・灰は不変) */
.service--brushup [data-service-item="0"] .service__loop-video { filter: url(#miai-brand); }

/* 02 の面の映像。
   ・cover + center で中央トリミング。スロットが 707/445(=1.589)に
     なったので、16:9 の素材は縦がフルで入り、左右が 1 割ほど落ちる
   ・色は素材の色相そのまま。1本目の動画に合わせてニュートラル寄りに、
     彩度 0.92 / コントラスト 1.26 / 黒 8% 締め + アンシャープ
     (HTML 側 filter#miai-warm)。オレンジ寄せ・セピア化はしない。 */
/* 地の色は枠ではなく映像側に持たせる。枠に不透明の地があると、
   映像が枠の外へ流れているあいだ下の面の枠を隠してしまう。 */
.service--brushup .service__image--02 video { background: #101013; }
.service--brushup .service__image--02 video {
  object-fit: cover;
  object-position: center;
  /* 素材を差し替えたので、前の映像用だった上寄せ 1.2 倍のトリミングと
     アクセント置換フィルタ(#miai-warm)は外す。16:9 をそのまま中央で。 */
}
/* filter の定義用。レイアウトに一切関与させない */
.service__grade-def { position: absolute; width: 0; height: 0; overflow: hidden; }
.service__stage { display: none; }

@media (min-width: 768px) {
  .service__mockup-mobile { display: none; }

  /* A quiet, spacious 3D stage: two photo layers float and overlap
     off-grid. JS (service-stage.js) drives continuous scroll-morph +
     inertial mouse parallax on top of this resting composition;
     without JS the offset overlap alone already reads as an
     intentional, non-gridded layout. */
  .service__stage {
    display: block;
    position: relative;
    height: 420px;
    perspective: 1400px;
  }
  .service__layer {
    position: absolute;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .25);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: box-shadow .4s ease;
  }
  /* 面の中身が img でも video でも、枠(aspect-ratio 4/3)は変えずに
     cover で埋める。動画は 16:9 なので左右がトリミングされる。 */
  .service__layer img,
  .service__layer video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .service__layer--0 {
    left: 2%;
    top: 8%;
    width: 60%;
    aspect-ratio: 4 / 3;
    z-index: 3;
    transform: translate3d(0, 0, 40px) rotate(1deg);
  }
  .service__layer--1 {
    right: 0;
    top: 30%;
    width: 60%;
    aspect-ratio: 4 / 3;
    z-index: 2;
    transform: translate3d(0, 0, -30px) rotate(-1deg);
    opacity: .92;
  }
}

/* ===========================================================
   News
   =========================================================== */
.news { padding: 0 0 56px; }
@media (min-width: 768px) {
  .news { padding: 0 0 96px; }
}
/* Service の暗転が白へ戻り切るための助走。ここが詰まっていると、
   まだ沈んでいる下地の上に News が乗って文字が読めなくなる。 */
.news--brushup { padding-top: 200px; }
.news__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .news__list { grid-template-columns: repeat(2, 1fr); gap: 80px; }
}
.news__thumb {
  position: relative;
  aspect-ratio: 587 / 310;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #eee;
}
.news__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.165, .84, .44, 1);
}
.news__item:hover .news__thumb img,
.news__item:focus-within .news__thumb img {
  transform: scale(1.04);
}
.news__thumb img[src$="news-1.png"] { filter: grayscale(1); }
.news__date {
  display: block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
}
.news__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 10px;
}
@media (min-width: 768px) {
  .news__title { font-size: 18px; }
}
.news__excerpt {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Figma 215:22653 (news frame)。カード積みではなく、区切り線付きの
   1カラムリスト。日付を左カラムに固定し、サムネイルは記事にある場合のみ
   右側へ。マージン・行間はFigma実測値どおり。 */
.news__list--rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid #EBEBEB;
}
.news__list--rows .news__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #EBEBEB;
}
@media (min-width: 768px) {
  /* Figma の縦のリズム: 区切り線→タイトル 60、抜粋の下→次の線 60、
     行の高さ 233。props 独自のタグ行(26 + 下余白18 = 44)はその 60 の
     内側に収め、タイトルが Figma と同じ位置に来るよう上を 16 にする。
       16 + 44 + 52(タイトル) + 15 + 46(抜粋) + 60 = 233 */
  .news__list--rows .news__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    /* 実測(本文段の高さ156)から逆算: 上16 でタイトルが区切り線から60、
       下61 で行の高さが Figma の 233 になる。 */
    padding: 16px 0 61px;
  }
}
.news__list--rows .news__date {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-jp);
  font-weight: 500;
  color: #191919;
  margin: 0;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .news__list--rows .news__date {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 11.01%;              /* 138 / 1253 = 日付段 + 本文までの間隔 */
    flex: none;
    align-self: flex-start;
    margin-top: 58px;           /* 区切り線から 90 (16 + 58 + 行送り16) */
    /* 本文段は 700 のまま。右のブランクは絶対配置なので幅計算に入らない */
  }
}
.news__date-year { font-size: 14px; }
.news__date-day { font-size: 20px; }
.news__list--rows .news__body { flex: 1; min-width: 0; }
@media (min-width: 768px) {
  /* 右の写真枠へ寄せるため本文段を 700 → 735 → 759 / 1253 と拡張。
     写真枠は絶対配置なので幅計算に入らず、他の要素は動かない */
  .news__list--rows .news__body { width: 60.57%; flex: none; }   /* 759 / 1253 */
}
.news__list--rows .news__title {
  font-family: var(--font-alata);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: .06em;
  color: #191919;
  margin: 0 0 14px;
  -webkit-line-clamp: unset;
  display: block;
}
@media (min-width: 768px) {
  .news__list--rows .news__title { font-size: 16px; }
}
.news__list--rows .news__excerpt {
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 1.63;
  color: #191919;
  -webkit-line-clamp: 2;
}
@media (min-width: 768px) {
  .news__list--rows .news__excerpt { font-size: 14px; }
}
/* サムネイルは実写を置かずグレーのブランク(Figma 397:64582/64583 #F4F4F4)。
   行の寸法も Figma 277:34576 に合わせる:
     区切り線 y154 / y387 / y617 → 行の高さ 233 / 230
     日付 x0 w50 (行頭から90)、本文 x138 w700 (行頭から60)
     ブランク 219x168、右端から51px 内側で天地中央 */
.news__list--rows .news__thumb {
  margin: 0;
  aspect-ratio: 219 / 168;
  background: #F4F4F4;
  border-radius: 2px;
}
@media (min-width: 768px) {
  /* ブランクは絶対配置。フレックスの行に混ぜると自身の高さ(168)が
     行の高さを決めてしまい、Figma の 233 と本文の位置が崩れるため。
     天地中央 = (233-168)/2 = 32.5 で Figma の 33 と一致する。 */
  .news__list--rows .news__thumb {
    position: absolute;
    right: 4.07%;               /* 51 / 1253 */
    top: 50%;
    transform: translateY(-50%);
    width: 17.48%;              /* 219 / 1253 */
    aspect-ratio: 219 / 168;
    margin: 0;
  }
}

/* ===========================================================
   News 行レイアウト(参考: proto-review c-top?c=3#news)
   日付 | タグ+タイトル+抜粋 | 写真 | → の並び。区切り線のリストで、
   行ホバーで矢印がプライマリになり右へ滑る。写真は残す。
   装飾は props の流儀(インク基調 + --color-primary のアクセント)。
   =========================================================== */
.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.news__head .label { margin-bottom: 28px; }
/* More(参考: editora.jp の c-btn)。角丸いっぱいのピル、地はインク、
   文字と矢印は白。矢印はピルの内側の右に置く。文字は 14px の
   まま、幅は "More" + 矢印にちょうど収まるだけ取る。 */
.news__more {
  appearance: none;
  background: none;
  border: 0;
  /* 参考の 7px/9.1px は向こうの書体(acumin-pro)の下がりを見込んだ
     非対称な値。こちらは書体が違うので、上下を等しくして文字を
     帯の天地中央に置く。合計の高さは参考と同じ 33px。 */
  padding: 8.1px 14px;
  /* 遷移先がまだ無いので押しても何も起きない。見た目と手応えだけ残す */
  cursor: default;
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-bottom: 32px;
  font-family: var(--font-display-en);
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  letter-spacing: normal;
  color: #fff;
  text-decoration: none;
  border-radius: 200px;
  isolation: isolate;
}
/* --- hover の挙動は参考ボタン(editora.jp の c-btn--hasicon)を踏襲 ---
   ・地の大きさは変えない(指示により参考の scale は入れない)
   ・文字が 1.8em 右へ寄る          = 矢印の幅(1em) + 間隔(0.8em)
   ・文字は上へ巻き上がり、同じ文字が下から入れ替わる
   ・末尾の矢印は自分の軸に沿って右上へ抜ける
   ・先頭の矢印が左下から入ってくる(位置が文末→文頭に入れ替わる)
   いずれも .4s cubic-bezier(.16,.5,.25,1) で揃える。 */
.news__more-fill {
  position: absolute;
  inset: 0;
  border-radius: 200px;
  background: #000;              /* 参考ボタンの地 */
  z-index: -1;
  transition: transform .4s cubic-bezier(.16, .5, .25, 1);
}
.news__more-in {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11.2px;
  /* 巻き上がる文字と、枠の外へ出た矢印を切る */
  overflow: hidden;
}
.news__more-text {
  position: relative;
  display: inline-block;
  transition: transform .4s cubic-bezier(.16, .5, .25, 1);
}
.news__more-label {
  display: inline-block;
  position: relative;
  z-index: 1;
  transition: transform .4s cubic-bezier(.16, .5, .25, 1);
}
/* 入れ替わる側は真下に待機させる */
.news__more-label--hover {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 2;
}
/* 矢印は末尾と先頭の2つ。先頭側は中身の左端に重ねて置き、
   ふだんは自分の軸の後ろ(左下)へ逃がしてある。 */
.news__more-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  overflow: hidden;
}
.news__more-arrow--hover {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -7px;
}
/* 参考と同じく回転は svg に掛ける。外接ボックスは膨らむが、
   親の 14px の枠が overflow: hidden なので行の高さには効かない。 */
.news__more-arrow svg {
  display: block;
  transform: rotate(-45deg);
  transition: transform .4s cubic-bezier(.16, .5, .25, 1);
}
.news__more-arrow--hover svg { transform: rotate(-45deg) translate(-140%); }
@media (hover: hover) and (pointer: fine) {
  /* 位置は動かさない(translate すると右上へ逃げて見える)。色だけ変える */
  .news__more:hover .news__more-text { transform: translateX(1.8em); }
  .news__more:hover .news__more-label { transform: translateY(-100%); }
  .news__more:hover .news__more-arrow--default svg {
    transform: rotate(-45deg) translate(140%);
  }
  .news__more:hover .news__more-arrow--hover svg {
    transform: rotate(-45deg) translate(0);
  }
}

/* richka の Others のような、薄いグレーの面に細字のピル。
   縦罫で区切らず、独立したタグとして並べる。 */
.news__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.news__tags span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border-radius: 999px;
  background: #F2F2F2;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  color: #4B4B4B;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .news__item:hover .news__tags span { background: #ECECEC; }
}

.news__list--rows .news__item { position: relative; }
.news__arrow {
  display: none;
  color: var(--color-ink);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.news__arrow svg { width: 18px; height: 15px; max-width: 100%; display: block; }
@media (min-width: 768px) {
  .news__arrow {
    display: block;
    /* Figma には無い props 独自の要素。行の幅計算に影響させないよう
       絶対配置にして、ブランク右の余白帯(51px)に収める */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .news__list--rows .news__item { align-items: center; }
  .news__list--rows .news__date { align-self: center; }
}
.news__list--rows .news__title { transition: color .3s ease; }
@media (hover: hover) and (pointer: fine) {
  /* 矢印は黒のまま。スライドのインタラクションだけ残す */
  .news__item:hover .news__arrow { transform: translateY(-50%) translateX(5px); }
  .news__item:hover .news__title { color: var(--color-primary); }
}
@media (prefers-reduced-motion: reduce) {
  .news__more-fill, .news__more-text, .news__more-label, .news__more-arrow svg, .news__arrow, .news__list--rows .news__title { transition: none; }
}

/* ===========================================================
   Team
   =========================================================== */
.team {
  position: relative;
  padding: 56px 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .team { padding: 96px 0; }
}
.team__dots {
  display: none;               /* ドットのあしらいは置かない(指示) */
  right: -100px;
  bottom: -60px;
  width: 280px;
  height: 280px;
  -webkit-mask-image: radial-gradient(circle at 70% 30%, #000 0%, #000 35%, transparent 72%);
  mask-image: radial-gradient(circle at 70% 30%, #000 0%, #000 35%, transparent 72%);
}
@media (min-width: 768px) {
  .team__dots { width: 467px; height: 462px; right: 40px; bottom: -80px; }
}
/* 代表紹介は写真と文字だけで見せる。白い囲みも影も置かない(指示) */
.team__card {
  position: relative;
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  .team__card { flex-direction: row; align-items: center; padding: 48px; gap: 64px; }
}
.team__photo {
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-light-bg);
  aspect-ratio: 302 / 212;
}
@media (min-width: 768px) {
  .team__photo { width: 318px; flex-shrink: 0; }
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__role {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-heading);
  margin: 0 0 4px;
}
.team__name {
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text-heading);
  margin: 0 0 16px;
}

/* Figma 215:23852 (representative-card)。フォントサイズ・行間・字間を実測値に。 */
.team--brushup .team__card { background: none; }
.team--brushup .team__role {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.team--brushup .team__name {
  font-family: var(--font-alata);
  font-size: 24px;
  line-height: 34px;
  letter-spacing: .06em;
  margin: 0 0 20px;
}
.team--brushup .team__bio {
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.8;
}
.team__bio {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ===========================================================
   Company
   =========================================================== */
.company { background: var(--color-light-bg); padding: 56px 0; }
@media (min-width: 768px) {
  .company { padding: 96px 0; }
}
.company__table { margin: 0; }
.company__row {
  display: flex;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.company__row:first-child { border-top: 1px solid var(--color-border); }
.company__row dt {
  flex: 0 0 140px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-heading);
}
.company__row dd {
  flex: 1;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .company__row dt { flex-basis: 280px; font-size: 16px; }
  .company__row dd { font-size: 15px; }
}

/* Figma 237:27463。項目名に字間を、テーブル背景に白カードを。
   本社オフィス写真は、直径1119pxの円をパネル(1442x813実測)に対して
   cx=79.3%, cy=41.9% の位置に置き、パネルの overflow:hidden で
   下端/上端が緩やかな弧としてクリップされる構成を clip-path circle() で再現。 */
.company--brushup .company__row dt,
.company--brushup .company__row dd { font-family: var(--font-jp); }
.company--brushup .company__row dt { letter-spacing: .06em; }
.company--brushup .company__table {
  position: relative;
  z-index: 1;
  background: #fff;
  opacity: .96;
  border-radius: 16px;
  padding: 40px 32px;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .company--brushup .company__table { max-width: 61.3%; }
}
.company--brushup .company__row:first-child { border-top: none; }

.company--brushup .company__panel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  padding: 40px 20px;
}
@media (min-width: 768px) {
  .company--brushup .company__panel { padding: 78px 92px 78px; }
}
@media (min-width: 1024px) {
  /* min-height だとテーブルの内容次第でパネルが伸び、写真(inset:0で
     パネルと同じ高さになる)が縦に間延びしてしまう。Figma実測の
     フレーム比(1442:813)で高さを固定し、写真とグレー背景の高さを
     常に一致させる。 */
  .company--brushup .company__panel { height: auto; aspect-ratio: 1442 / 813; }
}
.company--brushup .company__photo {
  display: none;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
  overflow: hidden;
  /* Figma実測: ハードエッジの円クリップではなく、写真がパネル地に
     溶けるように滲むグラデーションマスク。内側55%までは不透明、
     そこから外側に向けて透明へフェードする。 */
  -webkit-mask-image: radial-gradient(circle 560px at 79.3% 41.9%, #000 0%, #000 45%, transparent 100%);
  mask-image: radial-gradient(circle 560px at 79.3% 41.9%, #000 0%, #000 45%, transparent 100%);
}
@media (min-width: 1024px) {
  .company--brushup .company__photo { display: block; }
}
.company--brushup .company__photo img {
  display: block;
  position: absolute;
  top: 0;
  left: -20%;
  width: 150%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
}
.company--brushup .label { position: relative; z-index: 1; }

/* ===========================================================
   Contact
   =========================================================== */
.contact {
  position: relative;
  background: var(--color-dark);
  padding: 56px 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .contact { padding: 96px 0; }
}

/* Figma 215:22653 (DESIGN A_brushup)。セクション地は明るいまま、
   フォームを角丸のダークカードに収める構成。 */
.contact--card { background: var(--color-bg, #fff); }
.contact__card {
  max-width: 904px;
  margin-inline: auto;
  background: #323232;
  border-radius: 24px;
  padding: 40px clamp(24px, 6vw, 100px) 48px;
}
@media (min-width: 768px) {
  .contact__card { padding: 60px 100px; }
}
.contact__heading {
  font-family: var(--font-display-en);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1.2px;
  color: #efefef;
  margin: 0 0 32px;
}
@media (min-width: 768px) {
  .contact__heading { margin-bottom: 40px; }
}
.contact__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 704px;
  margin-inline: auto;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact--card .field__label,
.contact--card .field input,
.contact--card .field textarea { font-family: var(--font-jp); }
.field__required {
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.field input,
.field textarea {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 14px;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.field input::placeholder,
.field textarea::placeholder { color: #898989; }
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
/* 右下のリサイズつまみ(斜線2本)は出さない */
.field textarea { resize: none; min-height: 160px; }

/* Same circular-reveal hover as the header's Contact button (.nav__cta):
   a ::before circle seeded near the left-center scales in on hover. */
.contact__submit {
  align-self: center;
  margin-top: 4px;
  padding: 14px 44px;
  position: relative;
  overflow: hidden;
  transition: color .3s ease, border-color .3s ease;
}
.contact__submit-label {
  position: relative;
  z-index: 1;
}
.contact__submit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 18%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.contact__submit:hover {
  background: transparent;
  border-color: var(--color-primary);
}
.contact__submit:hover::before {
  transform: scale(16);
}
.contact__note { color: #fff; font-size: 14px; margin-top: -8px; }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer {
  background: var(--color-footer-bg);
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.site-footer__link {
  font-size: 14px;
  color: #000;
  text-decoration: none;
}
.site-footer__link:hover { text-decoration: underline; }
.site-footer__copy { font-size: 14px; color: #000; }

/* ===========================================================
   Scroll reveal (fade + rise on entering viewport)
   =========================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.25, 1, .38, 1), transform .8s cubic-bezier(.25, 1, .38, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.js-reveal .news__item.reveal:nth-child(2) { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===========================================================
   kv_title(Figma 232:27380)のピクセル再現
   760x86 の枠に、Figmaの絶対座標をそのまま em(=値/54px)で置く。
   フォントサイズだけを縮めれば全要素が同率で縮むので、
   SPでも比率が崩れない(min() で 54px を上限に画面幅へ追従)。
   =========================================================== */
.hero--brushup .kv-title {
  position: relative;
  /* Figma 412:32431(枠 x91 w745)。箱の原点は 産業の の 19px 左なので
     19 + 745 = 764px。 */
  width: 14.1481em;   /* 764px */
  height: 1.5926em;   /* 86px */
  font-size: min(54px, calc((100vw - 48px) / 14.1481));
  font-family: var(--font-alata);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-ink); /* #040404 */
  margin: 0;
}
/* 産業の(232:27383): x=19 y=12。「の」だけ 50px・字間7px */
.kv-title__prefix { position: absolute; left: .3519em; top: .2222em; white-space: nowrap; }
/* を支援する(412:32431 内 x=479 → 箱の原点から 498)。「を」だけ 50px */
.kv-title__suffix { position: absolute; left: 9.2222em; top: .2162em; white-space: nowrap; }
.kv-title .kv-sm { font-size: .9259em; }            /* 50px */
.kv-title__prefix .kv-sm { letter-spacing: .14em; } /* 7px @50px */
/* カプセル(232:27381 / Group 138 262:29138): 299x78, r=200, #FF2400。
   幅は固定。auto / fit-content / shrink にしない(中身が消えても縮ませない) */
.kv-pill {
  position: absolute;
  left: 3.4815em;     /* 188px = Figma 412:32431 内の 169 + 箱の原点 19 */
  top: .1606em;
  width: 5.5370em;    /* 299px */
  height: 1.4444em;   /* 78px */
  /* A案の色違い(darkblack 等)でも追従するようトークンで持つ。
     Red-orange では従来どおり #FF2400。 */
  background: var(--color-primary, #FF2400);
  border-radius: 3.7037em; /* 200px */
}
/* AI(254:27424): カプセル内 x=46.43 y=13.46, 54.664x50.096
   Shift(254:27428): カプセル内 x=136.96 y=12.84, 140.215x50.531
   均等配置にせず、Figmaの座標をそのまま置く */
.kv-pill > svg { position: absolute; display: block; }
/* カプセル内の位置(Group 138 のカプセル左上を原点とした Figma 座標)。
   幅/高さは viewBox をそのまま 1:1 で写すので字形は変形しない。
   AI 38.0/14.62、Shift 118.574/14.0 → 両者の間隔は 22.9px */
.kv-pill__ai    { left: .7037em;  top: .2707em; width: 1.0741em; height: .9444em; }
.kv-pill__shift { left: 2.1958em; top: .2593em; width: 2.6111em; height: .9444em; }

/* ===========================================================
   About(Figma 240:27506)
   1253x522 のフレームをそのまま再現する。中の要素は Figma の
   絶対座標で置き、flex/grid の均等2カラムには組み替えない。
   フレーム全体をページ内で中央に置き、要素は個別にセンタリングしない。

   スケール単位は --u(=設計1px)。em を使うと要素自身の font-size に
   依存して座標が壊れるため、font-size 非依存の長さで統一している。
   =========================================================== */
.about--figma {
  position: relative;
  padding: 0;
  overflow: visible;
  /* 自前のスタッキングコンテキストを張る。これが無いと .abt::before
     (z-index:-1 のグラデ)が文書全体の負の層まで落ち、このセクションの
     白背景の「さらに後ろ」に塗られて見えなくなる。白が透けない
     ヒーロー領域にだけ顔を出し、境界で水平に切れて見えていた。
     isolate すると描画順が 白背景 → グラデ → 文字 に固定される。 */
  isolation: isolate;
  /* ヒーロー(z-index:1)から About へ貫通して落ちてくる円より
     「文字が上」になるようセクションごと z-index:2 に。
     背景は持たない(下の共通ルールで transparent)ので、円は
     セクションの地の上には見えたまま、文字にだけ重ならない。 */
  z-index: 2;
}
.about--figma .abt-frame {
  width: min(1253px, 100%);
  margin-inline: auto;
  container-type: inline-size;
}
/* 既定(モバイル)は素の入れ物。ピンはデスクトップだけ */
.about--figma .abt-scroller,
.about--figma .abt-pin { display: block; }
@media (min-width: 768px) {
  /* スクロールが一度ここで留まり、その瞬間からロゴの粒子が動き出す。
     留めているのは sticky だけで、ホイールもスクロール位置も奪って
     いない。上へ戻す操作はいつでもそのまま効く。
     留まる距離は 0.6 画面ぶん。長くすると通り抜けが重くなる。 */
  .about--figma .abt-scroller { position: relative; height: 160svh; }
  .about--figma .abt-pin {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-content: center;
  }

  /* 一度アニメーションを見せたら、以後は普通に流れるようにする。
     解除は2段。どちらも「変化する場所が画面の外」でしか実行しない。
     ・is-unpinned: セクションが画面より上へ抜けてから sticky を切る。
       高さは 160svh のままなので文書の高さが変わらず、画面は動かない。
     ・is-collapsed: 余った走行ぶんの高さを畳む。畳むのは pin より下の
       空きだけで、pin 自体の高さ(100svh)と中身の位置は変えない。
       だから About の見えは動かず、動くのは pin より下にある要素だけ。
       それが画面の外にある時にしか実行しない。 */
  .about--figma .abt-scroller.is-unpinned .abt-pin { position: static; }
  .about--figma .abt-scroller.is-collapsed { height: auto; }
}
.about--figma .abt {
  position: relative;
  /* 1cqw = コンテナ幅の1%。1253px設計なので 100/1253 cqw = 設計1px */
  --u: 0.0798084cqw;
  height: calc(var(--u) * 522);
}
@supports not (container-type: inline-size) {
  .about--figma .abt { --u: 1px; }
}
.about--figma .abt > *,
.about--figma .abt__main > * { position: absolute; margin: 0; }

/* About(215:23951): x=0 y=41 / Alata 24px / lh1.8 / ls1.2px / #6D6D6D */
.about--figma .abt__en {
  left: 0;
  top: calc(var(--u) * 41);
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: calc(var(--u) * 24);
  line-height: 1.8;
  letter-spacing: calc(var(--u) * 1.2);
  color: #6D6D6D;
}
/* 私たちについて(215:22684): x=0 y=84 / 45px / lh1.8 / ls2.25px / #191919 */
.about--figma .abt__ja {
  left: 0;
  top: calc(var(--u) * 84);
  font-family: var(--font-alata);
  font-weight: 400;
  font-size: calc(var(--u) * 45);
  line-height: 1.8;
  letter-spacing: calc(var(--u) * 2.25);
  color: #191919;
}
/* メインコンテンツ(215:22674): x=0 y=190 / 1253x332 */
.about--figma .abt__main {
  left: 0;
  top: calc(var(--u) * 190);
  width: calc(var(--u) * 1253);
  height: calc(var(--u) * 332);
}
/* MiAIロゴ(215:23950): main内 x=0 / 266.312x96.985 */
/* 右のテキスト群に対して天地中央に置く(Figma 215:22674)。
   Figma ではテキスト群(277:34616)が y-11..151、ロゴ(215:23950)が
   y22..118.985 で、中心が 70.0 / 70.49 と一致している。
   実装側のテキスト群は キャッチ上端 64 〜 本文下端 224.77(高さ 160.78)、
   中心 144.38。ロゴ高 96.985 なので上端は 144.38-48.49 = 95.9。
   ＝ Figma と同じ「テキスト上端 + (テキスト高 - ロゴ高)/2」の関係。 */
.about--figma .abt__logo {
  left: 0;
  top: calc(var(--u) * 95.9);
  width: calc(var(--u) * 266.312);
  height: calc(var(--u) * 96.985);
  display: block;
}

/* ロゴの立ち上がり(js/about-logo-reveal.js)。
   形・比率・字間・黒は一切変えない。輪郭を鈍らせる処理も入れない。 */
.abt__logo-wrap { position: absolute; }
/* ロゴ背面のグラデ(Ellipse 53)は指示により削除(2026-08-15) */
.abt__logo-mark {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: geometricPrecision;
}
/* 粒子のステージ。498.476x280.393 の中のロゴ矩形
   132.408/97.649/233.661x85.094 がこの枠に重なるように置く。
   縦も幅基準(margin-top の % は幅解決)なので枠の高さが auto でもズレない。 */
.abt__logo-fx {
  position: absolute;
  left: -56.667%;
  top: 0;
  margin-top: -41.79%;
  width: 213.33%;
  /* height 属性(280.393)は presentation hint として CSS の height に入り、
     aspect-ratio より強い。打ち消さないと縦が 280.393px に固定され、
     viewBox が meet で「高さ基準の等倍」に落ちる。すると粒子が
     右に15px・上に15px ずれ、11% 小さいまま着地して、完成形へ
     切り替わる瞬間にロゴが跳ねる。 */
  height: auto;
  aspect-ratio: 498.476 / 280.393;
  overflow: visible;
  pointer-events: none;
}
/* 最初はロゴを出さない。円が描き切ってから静止ロゴへ渡す。
   js が動く環境でだけ伏せる(js-reveal は js が付ける)ので、
   スクリプトが動かない場合はロゴがそのまま出る。
   描き終わりの円はドットと寸分違わぬ位置・大きさで止まっているため、
   ステージから静止ロゴへ渡しても1ピクセルも動かない。 */
.js-reveal .abt__logo-wrap:not(.is-done) .abt__logo-mark { opacity: 0; }
.abt__logo-wrap.is-done .abt__logo-fx { display: none; }
.abt__logo-wrap.is-done .abt__logo-mark { opacity: 1; }
/* 止まったあとは変形を残さない。静止した形が最もシャープに出る状態にする */
.abt__logo-wrap.is-done { opacity: 1; transform: none; }
.abt__logo-wrap.is-playing { will-change: opacity, transform; }
.abt__logo-reveal { transform-box: fill-box; transform-origin: center; }

/* キャッチ → 本文はロゴが決まってから。既存の .reveal に遅延だけ足す。
   移動量も 28px から 8px に落として、ロゴと同じ静かさに揃える。 */
.js-reveal .abt__catch.reveal,
.js-reveal .abt__body.reveal { transform: translateY(8px); }
/* 表示後は必ず 0 に戻す。これが無いと 8px 下がったまま固定される
   (.js-reveal .reveal.is-visible と同詳細度で、こちらが後方にあるため) */
.js-reveal .abt__catch.reveal.is-visible,
.js-reveal .abt__body.reveal.is-visible { transform: translateY(0); }
.js-reveal .abt__catch.reveal { transition-delay: 1s; }
.js-reveal .abt__body.reveal { transition-delay: 1.09s; }

@media (prefers-reduced-motion: reduce) {
  .abt__logo-fx { display: none; }
  .abt__logo-mark { visibility: visible; }
  .js-reveal .abt__catch.reveal,
  .js-reveal .abt__body.reveal { transition-delay: 0s; }
}

/* キャッチ(215:22676): main内 x=420 y=64 / w740 / LINE Seed JP 24px
   lh1.8 / ls0.96px / #191919 */
.about--figma .abt__catch {
  left: calc(var(--u) * 420);
  top: calc(var(--u) * 64);
  width: calc(var(--u) * 740);
  font-family: var(--font-alata);
  font-weight: 400;
  font-size: calc(var(--u) * 24);
  line-height: 1.8;
  letter-spacing: calc(var(--u) * 0.96);
  color: #191919;
}
/* 本文(215:22677): main内 x=420 y=133 / w740 / 18px / lh1.7 / #191919 */
.about--figma .abt__body {
  left: calc(var(--u) * 420);
  top: calc(var(--u) * 133);
  width: calc(var(--u) * 740);
  font-family: var(--font-jp);
  font-weight: 400;   /* Figma 215:22677 は Noto Sans JP Regular */
  font-size: calc(var(--u) * 18);
  line-height: 1.7;
  color: #191919;
}
/* Figma 240:27506 に無い装飾は出さない(旧Aboutのブロブ等) */
.about--figma .about__blob { display: none; }

/* MiAIロゴの下に十分な白余白を取り、次のダークなServiceが近づきすぎない
   ようにする(ロゴアニメーションの余韻を確保するため)。 */
/* 背景は敷かない(body が白)。ここに #fff を敷くと、セクション全体が
   z-index:2 でヒーローより手前に居るため、貫通してくる円が白で
   塗り潰されて境界の水平線が再発する。 */
.about--figma { padding-bottom: clamp(160px, 14vw, 220px); }

/* SP: Desktopの座標再現を崩さないよう、切り替えは別クエリに分離する */
@media (max-width: 900px) {
  .about--figma { padding-bottom: clamp(96px, 18vw, 160px); }
  .about--figma .abt { height: auto; padding: 40px 0 56px; }
  .about--figma .abt > *,
  .about--figma .abt__main > * {
    position: static;
    width: auto;
    height: auto;
  }
  .about--figma .abt__en { display: block; font-size: 18px; letter-spacing: .05em; }
  .about--figma .abt__ja { font-size: 30px; letter-spacing: .05em; margin-bottom: 32px; }
  .about--figma .abt__logo { width: 180px; height: auto; margin-bottom: 28px; }
  .about--figma .abt__catch { font-size: 18px; letter-spacing: .04em; margin-bottom: 16px; }
  .about--figma .abt__body { font-size: 15px; }
}

/* ===========================================================
   FV(Figma 215:22653)の座標再現
   ヘッダー下端(137px)を基準に kv_title y=350.33 / リード y=471.33、
   次セクション(240:27506)が y=818 なのでFV領域の高さは 681px。
   x はフレーム左端基準で kv_title=67 / リード=86。
   縦センター寄せのflexをやめ、Figmaの絶対座標で置く。
   =========================================================== */
@media (min-width: 768px) {
  .hero--brushup {
    display: block;
    padding: 0;
    min-height: 0;
  }
  /* Figmaのヘッダーは137px、実装ヘッダーは110px。ページ絶対座標
     (kv_title y=350.33 / リード y=471.33 / 次セクション y=818)を
     合わせるため、top は「Figma y - ヒーロー開始Y(実測90)」で置く。 */
  .hero--brushup > .wrap {
    position: relative;
    z-index: 2;    /* グラデ円(0)とモチーフ(1)の上 */
    max-width: 1440px;
    /* About(Frame 162)は Figma でページ y892 から。ヒーロー開始は y90。
       ここが短いと Ellipse 55(下端858)やモチーフ(下端780)が次セクションの
       白背景で水平に切られる。 */
    height: 802px; /* 892 - 90 */
    padding-inline: 0;
  }
  /* Figma 399:76711(Group 149)。ヒーローの箱がページ上端から始まるので
     フレーム y をそのまま使う。
       産業の  399:76714  x91  y286.33
       カプセル 399:76715  x253 y283      (箱の中で top .1606em = 8.67px)
       を支援する 399:76723 x553 y286
       リード   399:76724  x92  y395  w761 */
  .hero--brushup .kv-title {
    position: absolute;
    left: 72px;      /* 産業の 91 - 箱の中の 19 */
    top: 274.33px;   /* カプセル 283 - 箱の中の 8.67 */
    margin: 0;
  }
  .hero--brushup .hero__desc--brushup {
    position: absolute;
    left: 92px;
    /* Figma 412:32432: カプセル天(359)からリード天(477)まで 118px */
    top: 401px;
    margin: 0;
    width: 761px;
    max-width: none;
  }
}
/* 1440px未満では左座標が相対的に大きすぎるので、フレームごと縮める
   のではなく wrap の余白内に収める(タイトル自身は min() で縮む) */
@media (min-width: 768px) and (max-width: 1439px) {
  .hero--brushup > .wrap { max-width: 100%; }
}

/* ===========================================================
   Company(Figma 232:27395)
   1442x813 のフレームを About と同じ --u(=設計1px)方式で再現。
   全面写真(232:27398 をフレームでクロップ書き出し) + 左上ラベル +
   白カードのテーブル(257:27658 x69 y274 680x425 pad24)。
   =========================================================== */
.company--figma { padding: 0; background: transparent; }
/* 写真がフレーム外(画面右端まで)へ出るので、ここでクリップして
   横スクロールを出さない。left側の座標系は保たれる。 */
.company--figma .cmp-frame { overflow: hidden; }
.company--figma .cmp-frame {
  width: min(1442px, 100%);
  margin-inline: auto;
  container-type: inline-size;
}
.company--figma .cmp {
  position: relative;
  --u: 0.0693481cqw; /* 100/1442 */
  height: calc(var(--u) * 813);
  /* 写真を画面右端まで出すためクリップしない(角丸も右側は使わない) */
  overflow: visible;
  background: #fff;
}
@supports not (container-type: inline-size) {
  .company--figma .cmp { --u: 1px; }
}
/* 写真エリア(232:27398)。Figmaでは x=563 からフレーム右端を越えて
   伸びているので、左端だけ座標で固定し右は 0 で必ず右端まで届かせる。
   画像側は cover で埋め、横に引き伸ばして歪ませない。 */
/* Figma 232:27398。写真はセクション全面。ただしフレームは 1442px で
   頭打ちなので、それより広い画面では左右に白の余白が出るのが正。
   以前は負の right で画面端まで引き伸ばしていた。 */
.company--figma .cmp__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.company--figma .cmp__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 書き出しはフレーム全幅(1440)なので、右側の絵柄が出るよう寄せる */
  object-position: right center;
}

/* -----------------------------------------------------------
   写真スライドショー(Figma 1〜6案の写真)

   カルーセルに見せないための決めごと:
   ・矢印/ドット/横スライドは持たない。切り替えは「大きな矩形マスクが
     右から静かに侵入して次の写真を露出する」映像的な処理。
   ・単純なクロスフェードは使わない。マスク + わずかな scale + opacity を
     重ね、旧写真は覆われ切るまで不透明のまま下に残す(白が透けない)。
   ・写真は静止させない。1枚ごとに向きの違うごく緩い寄り/引き(--kb-*)。
   ・情報パネルは写真と一緒に切り替えない。写真だけが背後で入れ替わる。
   ・視差は写真だけ(--cmp-par)。ポインタへの反応も 3px まで(--cmp-px/py)。
   ----------------------------------------------------------- */
.company--figma .cmp__slides {
  transform: translate3d(var(--cmp-px, 0px), calc(var(--cmp-par, 0px) + var(--cmp-py, 0px)), 0);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.company--figma .cmp__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 既定は右辺で閉じている(=見えない)。出るときだけ左へ開く */
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  z-index: 0;
}
.company--figma .cmp__slide.is-active {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  z-index: 1;
}
/* 入場。マスクは開始が速く終盤で静かに止まる。opacity は先に開け切って
   しまい(0.62s)、露出の先端が硬い線に見えないようにする。 */
.company--figma .cmp__slide.is-entering {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  z-index: 2;
  transition:
    clip-path 1.3s cubic-bezier(.22, 1, .36, 1),
    opacity .62s linear;
  will-change: clip-path;
}
/* 退場側は不透明のまま下に残す。覆い切ってから畳む */
.company--figma .cmp__slide.is-leaving { z-index: 1; clip-path: inset(0 0 0 0); opacity: 1; }

/* --- ケンバーンズ。写真ごとに向きと量を変える(--kb-a → --kb-b) --- */
.company--figma .cmp__slide img { transform: var(--kb-a); }
/* is-leaving も同じ到達値を持たせる。ここを外すと、退場に入った
   1フレームで transform も transition も失われ、画像が現在位置から
   開始位置(--kb-a)へ瞬間的に戻る。次の写真が 1.3s かけて開いている
   最中なので、この跳ねがはっきり見えていた。 */
.company--figma .cmp__slide.is-active img,
.company--figma .cmp__slide.is-entering img,
.company--figma .cmp__slide.is-leaving img {
  transform: var(--kb-b);
  transition: transform 6.5s linear;
}
/* 素材側を表示比率(1442:813)に切ってあるので、cover での意図しない
   切り落としは起きない。translate を掛ける端点は端の露出を防ぐため
   scale 1.015 以上にする(8px の移動に対して +1.5% で余白が出ない)。 */
.company--figma .cmp__slide:nth-child(1) {
  --kb-a: translate3d(0, 0, 0) scale(1.015);
  --kb-b: translate3d(-5px, 0, 0) scale(1.022);
}
.company--figma .cmp__slide:nth-child(2) {
  --kb-a: translate3d(8px, 0, 0) scale(1.016);
  --kb-b: translate3d(-8px, 0, 0) scale(1.024);
}
.company--figma .cmp__slide:nth-child(3) {
  --kb-a: translate3d(0, -3px, 0) scale(1.022);
  --kb-b: translate3d(0, 3px, 0) scale(1.015);
}
.company--figma .cmp__slide:nth-child(4) {
  --kb-a: translate3d(0, -6px, 0) scale(1.016);
  --kb-b: translate3d(0, 5px, 0) scale(1.022);
}
.company--figma .cmp__slide:nth-child(5) {
  --kb-a: translate3d(-4px, 0, 0) scale(1.015);
  --kb-b: translate3d(4px, 0, 0) scale(1.022);
}
.company--figma .cmp__slide:nth-child(6) {
  --kb-a: translate3d(4px, 0, 0) scale(1.018);
  --kb-b: translate3d(-2px, 0, 0) scale(1.015);
}

/* --- 構図は素材側で確定済み(帯を切ってから書き出している)。
       表示は中央のまま。1枚目だけ Figma 408:24551 の絶対配置。 --- */
.company--figma .cmp__slide img { object-position: 50% 50%; }

/* --- 見出し(Company / 会社概要)の裏の保険。素材側でも質感を均して
       いるが、ケンバーンズで写真が動いても読めるよう、ごく淡い白の
       ラジアルを写真の上・文字の下に敷く。輪郭が出ない大きさと濃さ。 --- */
.company--figma .cmp__slides::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * -80);
  top: calc(var(--u) * -110);
  width: calc(var(--u) * 640);
  height: calc(var(--u) * 500);
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

/* --- 情報パネルの登場。下からのフェードインにはしない --- */
.company--figma .cmp__label,
.company--figma .cmp__card {
  opacity: 0;
  transform: translateY(18px);
  clip-path: inset(0 0 12% 0);
}
.company--figma.is-in .cmp__label,
.company--figma.is-in .cmp__card {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 1.05s cubic-bezier(.16, 1, .3, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1),
    clip-path 1.05s cubic-bezier(.16, 1, .3, 1);
}
/* 見出し → 会社情報 の順に 85ms 差 */
.company--figma.is-in .cmp__card { transition-delay: 85ms; }

@media (prefers-reduced-motion: reduce) {
  .company--figma .cmp__slides { transform: none; }
  .company--figma .cmp__slide,
  .company--figma .cmp__slide img,
  .company--figma .cmp__label,
  .company--figma .cmp__card { transition: none; }
  .company--figma .cmp__label,
  .company--figma .cmp__card { opacity: 1; transform: none; clip-path: none; }
}
/* ラベル(215:23995 x92 y91)。en 24/1.8 が43.2高なので ja は自然に y43 に乗る */
/* Frame 151 (215:23995): x=92 y=51 */
.company--figma .cmp__label {
  position: absolute;
  left: calc(var(--u) * 92);
  top: calc(var(--u) * 51);
}
.company--figma .cmp__en {
  display: block;
  font-family: var(--font-display-en);
  font-weight: 400;
  font-size: calc(var(--u) * 24);
  line-height: 1.8;
  letter-spacing: calc(var(--u) * 1.2);
  color: #6D6D6D;
}
.company--figma .cmp__ja {
  margin: 0;
  font-family: var(--font-alata);
  font-weight: 400;
  font-size: calc(var(--u) * 45);
  line-height: 1.8;
  letter-spacing: calc(var(--u) * 2.25);
  color: #191919;
}
/* 白カード(257:27658 x69 y274 680x425 pad24) */
/* Frame 166 (257:27658): x=309 y=51 / 680x388 / 内側 24 */
/* 情報パネル(Figma 408:24427 Frame 166): x92 y213 680x388。
   中の company-table は x24 y11 632x353(= padding 上11/左右24/下24)。
   見出し(Frame 151: x92 y51)の真下に置く。写真は全面の背景。
   面は白の半調(rgba(255,255,255,.8))。写真が透けることで板に見えず、
   写真が主役のまま情報が乗る。 */
.company--figma .cmp__card {
  position: absolute;
  left: calc(var(--u) * 92);
  top: calc(var(--u) * 213);
  width: calc(var(--u) * 680);
  height: calc(var(--u) * 388);
  padding: calc(var(--u) * 11) calc(var(--u) * 24) calc(var(--u) * 24);
  background: rgba(255, 255, 255, .8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.company--figma .cmp__table {
  margin: 0;
  width: calc(var(--u) * 632);
  color: #191919;
}
/* 行(72高 = 24pad + 内容 + 24pad)。区切りは #EBEBEB、最終行は無し */
.company--figma .cmp__row {
  display: flex;
  align-items: center;
  padding-block: calc(var(--u) * 24);
}
/* 罫線は持たない(指示により会社名の下の1本も削除。ベタの面でまとめる) */
.company--figma .cmp__row dt {
  flex: 0 0 calc(var(--u) * 238);   /* Figma 408:24430 ほか */
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: calc(var(--u) * 16);
  letter-spacing: calc(var(--u) * 0.96);
  /* Figma のテキストボックス実測 19px(16px に対して)。normal だと 23px に
     なり、5行ぶんで table が 364 → 383 に膨らむ */
  line-height: 1.19;
}
.company--figma .cmp__row dd {
  margin: 0;
  width: calc(var(--u) * 363);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: calc(var(--u) * 14);
  /* 1行の行は Figma 実測 17px。所在地だけ2行 1.7(=48px)。 */
  line-height: 1.21;
}
.company--figma .cmp__row:nth-child(4) dd { line-height: 1.7; }
/* SP: 写真を上に、ラベル+表を下に縦積み(Desktop座標系はそのまま温存) */
@media (max-width: 767px) {
  .company--figma .cmp { height: auto; border-radius: 0; }
  .company--figma .cmp__photo {
    position: static;
    aspect-ratio: 1440 / 813;
    height: auto;
  }
  .company--figma .cmp__photo img { object-position: center }
  .company--figma .cmp__label,
  .company--figma .cmp__card {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
  }
  .company--figma .cmp__label { margin: 32px 20px 20px; }
  .company--figma .cmp__en { font-size: 18px; letter-spacing: .05em; }
  .company--figma .cmp__ja { font-size: 30px; letter-spacing: .05em; }
  .company--figma .cmp__card { margin: 0 20px 40px; display: block; }
  .company--figma .cmp__table { width: auto; }
  .company--figma .cmp__row { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 16px; }
  .company--figma .cmp__row dt { flex: none; font-size: 14px; }
  .company--figma .cmp__row dd { width: auto; font-size: 13px; }
}

/* ===========================================================
   FV「AI Shift」ラインドロー描画
   完成Vectorは不変。JSが作るセンターラインを mask に使い、
   その軌跡から白い字形が現れる。左→右の単純wipeにはしない。
   =========================================================== */
/* JSが動く前に完成形が出たままだと変化が見えないので、
   スクリプトが用意できた時点(.is-ready)で一旦伏せる。
   JS無効時は完成形がそのまま出る(何も起きないだけ)。 */
.kv-pill.is-ready .kv-pill__ai,
.kv-pill.is-ready .kv-pill__shift { visibility: visible; }

/* mask/ペン先の軌跡。dashoffset を送って「引かれる」ようにする */
.kv-draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
/* i と A のドットは長さがほぼ0で dash 演出が効かず、最初から見えてしまう。
   仕様どおり opacity + わずかな scale で出す。 */
.kv-draw--dot {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  transform: scale(.7);
  transform-box: fill-box;
  transform-origin: center;
}
.kv-pill.is-drawing .kv-draw--dot {
  animation: kv-dot-in 100ms cubic-bezier(.22,1,.36,1) var(--t, 0ms) both;
}
@keyframes kv-dot-in { to { opacity: 1; transform: scale(1) } }
/* ドットは kv-dot-in で出すので、dash アニメの対象から外す
   (同詳細度・後方だと kv-dot-in を上書きして opacity:0 のままになる) */
/* 各画は「入りだけ速く、抜きでそっと止まる」。両端が緩む ease-in-out だと
   画のつなぎ目で毎回止まって見えるので使わない。 */
.kv-pill.is-drawing .kv-draw:not(.kv-draw--dot) {
  animation: kv-draw var(--u, 250ms) cubic-bezier(.26, .78, .3, 1) var(--t, 0ms) both;
}
@keyframes kv-draw { to { stroke-dashoffset: 0 } }

/* 完成後は演出レイヤーを完全に畳み、Figmaの完成形だけ残す */
.kv-pill.is-drawn .kv-pill__ai [mask],
.kv-pill.is-drawn .kv-pill__shift [mask] { mask: none !important; }

@media (prefers-reduced-motion: reduce) {
  .kv-draw { stroke-dashoffset: 0 }
}

/* ===========================================================
   Service の暗転(cuolega a-top の機構をそのまま移植)
   https://proto-review-vict0a.pages.dev/a-top

   ■ 要点: 暗転の実体は「セクションの箱」ではなく body の下地色。
     箱を黒くすると、ヘッダー帯・セクションの上下・wrap の左右に
     白が残る(=今の白い隙間)。ページの地ごと沈めればどこにも白は出ない。
   ■ その上に固定の極彩色メッシュを mix-blend-mode: overlay で敷く。
     明状態では下地が明るいので overlay の結果はほぼ地色=メッシュは
     目立たない。下地が沈むと一斉に暗側へ振れ、角(左上・右中)から
     包み込むように暗くなる。中央の白グローだけが残って奥行きが出る。
   ■ inset:-12% は blur(80px) の端が透けるのを画面外へ逃がすため。
     ここを 0 にすると四辺に明るい縁が出る。
   ■ 配色だけは MiAI のもの(ニュートラル＋#FF2400)。参照元の青は使わない。
   =========================================================== */
/* 暗転は「掛かった/掛からない」の二値ではなく、スクロール進行度で連続的に。
   二値だと、暗いパネルの箱だけが先に画面へ入って白地との境界線が見え、
   そのあとで画面が暗くなる…という順番になってしまう。
   進行度 --svc-dark(0..1) は js/main.js が毎フレーム書き込む。 */
body {
  /* 1.0 で rgba(23,23,23,.88) を白に重ねたのと同じ実効色になる */
  background-color: color-mix(in srgb, #171717 calc(var(--svc-dark, 0) * 88%), #ffffff);
}
.svc-aurora {
  position: fixed;
  inset: -12%;
  width: 124%;
  height: 124vh;
  z-index: -1;                 /* コンテンツより後ろ・下地(body)より前 */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(62% 68% at 12% 10%, #000000 0%, transparent 100%),  /* 左上=黒(暗部) */
    radial-gradient(70% 86% at 4% 78%, #2A2A2E 0%, transparent 100%),   /* 左下=墨 */
    radial-gradient(54% 60% at 90% 48%, #1A1A1C 0%, transparent 100%),  /* 右中=黒(暗部) */
    radial-gradient(64% 64% at 34% 16%, var(--aurora-accent, #FF2400) 0%, transparent 100%),
    radial-gradient(58% 64% at 90% 92%, var(--aurora-accent-2, #C21B00) 0%, transparent 100%),
    radial-gradient(70% 74% at 50% 62%, #FFFFFF 0%, transparent 100%);  /* 中央=白グロー */
  background-color: #B9C0C4;   /* 中間の淡グレー地(image層には置けない) */
  mix-blend-mode: overlay;     /* 必須: 下地の明暗で鮮やか↔暗が決まる */
  /* filter: blur() は使わない。全画面を毎スクロール再合成するため、
     上方向へ戻るときにガタつく原因になっていた。グラデ自体の
     stop を広く取ってあるので、ぼかさなくても継ぎ目は出ない。 */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
  contain: paint;
  pointer-events: none;
  opacity: var(--svc-dark, 0);
}
/* 仕上げの微増の黒幕(overlay 合成内で暗側を一段締める) */
.svc-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .05);
  opacity: var(--svc-dark, 0);
}

/* パネルは箱を持たない。暗さは下地とメッシュだけが担う。
   ここに背景色を置くと、その矩形の縁が白地との境界線として必ず見える。
   (参照元も .at-product に section background を持たせていない) */
.service--brushup .service__panel { background: none; }

@media (prefers-reduced-motion: reduce) {
  .svc-aurora { transition: none; }
}

/* About / Service のスクロールスナップは撤去(2026-08-15)。
   proximity でもブラウザがスクロールを掴むため、セクション境界で
   カチカチと引っ掛かる挙動になった。見せ場を長くしたい場合は
   スクロールを奪わず、ピンの走行距離で調整する。 */

/* ===========================================================
   画面右下の「先頭へ戻る」
   参考(recruit.garage.co.jp)と同じ 64x64 / 右下 40px / 角丸4px。
   40px の余白があるので本文にも右端のグラフィックにも被らない。

   地はセクションの明るさで2通り。
   ・白いセクションの上: 黒地に白矢印(反転)。輪郭が立つので罫は無し。
   ・暗いセクションの上: すりガラス。地をごく薄い白にして
     backdrop-filter でぼかすので、後ろを流れるマーキーの文字が
     うっすら透けて動く。罫は持たず、存在感を落として主役を邪魔しない。
   切り替えは html.svc-dark(暗転の進行を js が付ける)に乗せる。
   =========================================================== */
.to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 90;                 /* ヘッダー(100)より下、本文より上 */
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--color-ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  /* 先頭付近では出さない。js が is-show を付ける */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s,
              color .45s ease, background-color .45s ease,
              border-color .45s ease, backdrop-filter .45s ease;
}
/* 暗いセクションの上ではすりガラス。後ろの文字がうっすら透ける */
html.svc-dark .to-top {
  background: rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-color: transparent;     /* 罫は持たない(指示) */
  color: rgba(255, 255, 255, .88);
}
.to-top.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s,
              color .3s ease,
              border-color .4s cubic-bezier(.16, .5, .25, 1);
}
/* hover の色面。左端を軸に開く */
.to-top__fill {
  position: absolute;
  inset: 0;
  z-index: 0;                  /* 半透明の地より前、矢印より後ろ */
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.16, .5, .25, 1);
}
.to-top__arrow { display: block; position: relative; z-index: 1; }
@media (hover: hover) {
  .to-top:hover { color: #fff; border-color: var(--color-primary); }
  .to-top:hover .to-top__fill { transform: scaleX(1); }
}
@media (max-width: 767px) {
  .to-top { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top, .to-top__fill { transition: none; }
}