/* 06_web2 SABI landing — tokens, layout, sections */

:root {
  --color-bg: #ffffff;
  --color-text: #333333;
  --color-muted: #78776f;
  --color-border: #999999;
  --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-en: 'Rowan', 'Times New Roman', Times, serif;
  /* Fontshare — サービス番号（01 / 02 / 03） */
  --font-service-index: 'General Sans', system-ui, sans-serif;
  --container: 1200px;
  --img-radius: 0;
  /* 2カラム共通（SABI is / Our Value / Our Services で縦ラインを揃える） */
  --grid-left-w: 480px;
  --grid-gap: clamp(2rem, 4.5vw, 3.5rem);
  /* サービス／ブランド実績カルーセル：カード間（JS の step 計算と一致させる） */
  --works-carousel-gap: 40px;
  /* 実績スクショの長辺（書き出しに合わせる。これを超えてカードを広げない＝拡大ぼけを防ぐ） */
  --works-gallery-img-max-w: 1024px;
  --gutter: clamp(1.5rem, 5vw, 3rem);
  --section-y: clamp(4rem, 10vw, 8rem);
  --intro-pad-y: clamp(4rem, 22vw, 200px);
  --contact-pad-y: clamp(6rem, 18vh, 240px);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fade: 0.8s;
  --hero-scroll-hint-delay: 3s;
  --hero-glyph-waves-fade-duration: 0.65s;
  /* GL を左上ロゴより少し早く出す（.hero で max(0, top-delay - this)） */
  --hero-glyph-waves-lead-before-logo: 350ms;
  /* 中央ロゴ：幾何中心より上へ（fixed ヘッダー分、SVG 下地の余白） */
  --hero-wordmark-center-shift-y: -14px;
  --hero-wordmark-viewport-center-lift: 0.46;
  /* 中央ロゴ：SVG の左右余白ぶん“見た目の中心”を補正 */
  --hero-wordmark-center-shift-x: -10px;
  /* 中央ワードマーク：Bodymovin / Lottie + CSS マスク（開始は `--hero-wordmark-delay` に同期） */
  --hero-wordmark-reveal-duration: 1000ms;
  --hero-wordmark-reveal-ease: cubic-bezier(0.5, 0, 0, 1);
  --hero-wordmark-lead-before-grid-end: 2300ms;
  --hero-wordmark-play-extra-delay: 0ms;
  --hero-wordmark-zoom-from: 1.2;
  /* ヒーロー下英字 + .char-reveal 英字見出し共通: 単語ごとの遅延（--i）・移動量・イージング */
  /* Hero シーケンス用の共通タイミング（`:root` で定義して fixed ヘッダーからも参照できるようにする） */
  --hero-top-logo-delay: calc(
    var(--hero-grid-in-delay) +
      var(--hero-grid-frame-duration) +
      var(--hero-grid-line-delay-after-frame) +
      var(--hero-grid-lines-total) +
      var(--hero-seq-gap)
  );
  --hero-tagline-delay: calc(
    var(--hero-grid-in-delay) +
      var(--hero-grid-frame-duration) +
      var(--hero-grid-line-delay-after-frame) +
      120ms
  );
  /*
   * `.char-reveal` はスクロールインで表示するセクションが多いので、基準遅延は短めのまま。
   * ヒーロー内の英字（タグライン等）は `--hero-tagline-delay` を直接参照する。
   */
  --hero-tagline-crossfade-base-delay: 0.75s;
  --hero-tagline-crossfade-stagger: 70ms;
  --hero-tagline-crossfade-y: 8px;
  --hero-tagline-crossfade-duration: 700ms;
  --hero-tagline-crossfade-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* イントロ：リード表示のあと本文を出すまでの待ち */
  --intro-body-delay-ms: 450;
  /* ヒーロー地色。Unicorn `gradientFill` の vec3 も同値に同期 */
  --color-hero-bg: #c3c2c1;
  /* ヒーローグリッド：枠内余白 64px ・5 列 × 8 行（線はブロック面内で等分） */
  --hero-grid-inset: 64px;
  /* グリッド枠・左上ロゴの Y 起点（ノッチ時は safe-area を足して枠とヘッダーを同期） */
  --hero-frame-inset-top: calc(var(--hero-grid-inset) + env(safe-area-inset-top, 0px));
  /* ヒーローグリッド：アニメーション（控えめ） */
  --hero-grid-opacity: 0.4;
  --hero-grid-line-color: rgba(255, 255, 255, 0.9);
  --hero-grid-in-delay: 0.1s;
  --hero-grid-frame-duration: 680ms;
  /* Hero グリッド線（内側） */
  --hero-grid-line-duration: 1220ms;
  --hero-grid-line-stagger: 120ms;
  /* 枠フェード終了〜内側ライン開始のギャップ（小さいほど早く出る） */
  --hero-grid-line-delay-after-frame: 0ms;
  /*
   * ライン区間の見積（最後の線が描き終えるまで：`stagger*(n-1) + duration`）
   *
   * `n-1 = max(stepIndex)`。JS は列/行ペアを同じ `--i` で束ねているので、`stepIndex ≈ pairSteps-1 + extraSteps`。
   * `pairSteps ≈ floor(min(vPairs, hPairs))`（レスポンシブ）
   *
   * 余りペア:
   * - extraPairsV = max(0, vPairs - pairSteps)（×2本）
   * - extraPairsH = max(0, hPairs - pairSteps)（×2本）
   * `extraSteps = extraPairsV*2 + extraPairsH*2`
   *
   * ここでは PC/Tablet/SP の `vPairs/hPairs` と一致する式に寄せている（調整するときも探しやすい）。
   */
  /*
   * デフォルトは SP：`vPairs = 3`, `hPairs = 4`（`06_web2/js/main.js` と同じ切り替え）
   */
  --hero-grid-line-max-step-index: calc((min(3, 4) - 1) + (max(0, 4 - 3) * 2));

  /*
   * メディアクエリで Responsive の `min(vPairs,hPairs)` と `extra*` を同期する（未定義ブラケットでは PC と同値にフォールバック）。
   */
  --hero-grid-lines-total: calc(
    var(--hero-grid-line-max-step-index) * var(--hero-grid-line-stagger) + var(--hero-grid-line-duration)
  );
  --hero-seq-gap: 0ms;
  /* グリッド内側左端＝ロゴ・キャッチの揃い（安全域込み） */
  --hero-align-left: max(env(safe-area-inset-left, 0px), var(--hero-grid-inset));
  --hero-align-right: max(env(safe-area-inset-right, 0px), var(--hero-grid-inset));
  /* 固定ヘッダー分：枠上端＋マーク高さ＋ヘッダー下パディング */
  --site-header-offset: max(
    3.75rem,
    calc(
      var(--hero-frame-inset-top) + clamp(2.75rem, 5.5vw, 4.05rem) + 1.25rem
    )
  );
}

@media (min-width: 1024px) {
  :root {
    /* PC：`vPairs = 5`, `hPairs = 4` */
    --hero-grid-line-max-step-index: calc((min(5, 4) - 1) + max(0, 5 - 4) * 2);
    /* PC：ワイド＋大きいワードマークで幾何中心より上に見える → やや下げる（SP は 640px 以下で上書き） */
    --hero-wordmark-viewport-center-lift: 0.28;
    --hero-wordmark-center-shift-y: 38px;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  :root {
    /* Tablet：`vPairs = 4`, `hPairs = 4` */
    --hero-grid-line-max-step-index: calc(min(4, 4) - 1);
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  border-radius: var(--img-radius);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--site-header-offset);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

/* ヒーロー背景をヘッダー下まで抜かさない（body 上余白は付けない） */
body {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  padding-top: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 2;
  font-size: clamp(1rem, 1.1vw, 1rem);
  -webkit-font-smoothing: antialiased;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/*
 * 幅1440px超：中央の 1440 相当を「max-width+margin+var(--gutter)」と
 * 「全幅+左右padding だけ」で混在させると、Our Value と Our Services などの左端がずれる。
 * メイン各セクションは services と同じ 1 本の揃いに統一（フッターも同様）
 */
@media (min-width: 1200px) {
  .intro .container,
  .value .container,
  .services .container,
  .company .container,
  .contact .container,
  .site-footer .container {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding-left: calc((100vw - 1200px) / 2);
    padding-right: calc((100vw - 1200px) / 2);
  }
}

/* ----- Site header ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* グリッド枠の内側左上と一致（左右は --hero-align-*） */
  padding: var(--hero-frame-inset-top) var(--hero-align-right) 1.25rem var(--hero-align-left);
  background-color: transparent;
}

.site-header__bar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.site-header__logo-link {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.site-header__logo-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 6px;
}

.site-header__mark {
  display: block;
  width: clamp(2.75rem, 5.5vw, 4.05rem);
  height: auto;
  flex-shrink: 0;
  --i: 0;
  opacity: 0;
  transform: translate3d(0, var(--hero-tagline-crossfade-y), 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: hero-per-word-crossfade-enter var(--hero-tagline-crossfade-duration)
    var(--hero-tagline-crossfade-ease)
    calc(
      var(--hero-tagline-delay) + var(--i) * var(--hero-tagline-crossfade-stagger)
    )
    forwards;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__mark {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__wordmark-stage {
    mix-blend-mode: normal !important;
    /* ワードマークのマスク演出は意図的に残す（他要素は reduce-motion に従う） */
  }

  .hero__wordmark-fallback {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }

  .hero__tagline__word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero__grid {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }

  .hero__grid-line {
    animation: none;
    transform: none;
    opacity: var(--hero-grid-opacity);
    will-change: auto;
  }

  .hero__grid::before {
    opacity: var(--hero-grid-opacity);
  }

  .hero__top-type {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__glyph-waves {
    opacity: 0.7;
    animation: none;
  }
}

/* ----- Hero：#c3c2c1 ＋白グリッド ＋ ロゴ／SABI ／ 左下英字のみ ----- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-hero-bg);
  overflow: hidden;
  max-width: 100%;
  --hero-wordmark-delay: var(--hero-tagline-delay);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__glyph-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  mix-blend-mode: multiply;
  animation: none;
}

.hero.is-wordmark-ready .hero__glyph-waves {
  animation: hero-glyph-waves-fade-in var(--hero-glyph-waves-fade-duration) var(--ease-out)
    forwards;
}

@keyframes hero-glyph-waves-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.7;
  }
}

.hero__glyph-waves canvas,
.hero__glyph-waves svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__grid {
  position: absolute;
  top: var(--hero-frame-inset-top);
  right: var(--hero-align-right);
  bottom: max(env(safe-area-inset-bottom, 0px), var(--hero-grid-inset));
  left: var(--hero-align-left);
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  transform: none;
  will-change: opacity;
  animation: hero-grid-frame-in var(--hero-grid-frame-duration) var(--ease-out) var(--hero-grid-in-delay) forwards;
}

.hero__grid::before {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid var(--hero-grid-line-color);
  opacity: var(--hero-grid-opacity);
}

.hero__grid-line {
  position: absolute;
  background-color: var(--hero-grid-line-color);
  opacity: var(--hero-grid-opacity);
  pointer-events: none;
}

.hero__grid-line--major {
  opacity: min(0.72, calc(var(--hero-grid-opacity) + 0.18));
}

.hero__grid-line--v {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
  opacity: 0;
  animation: hero-grid-line-v var(--hero-grid-line-duration) cubic-bezier(0.22, 1, 0.36, 1)
    calc(
      var(--hero-grid-in-delay) +
        var(--hero-grid-frame-duration) +
        var(--hero-grid-line-delay-after-frame) +
        var(--i) * var(--hero-grid-line-stagger)
    )
    forwards;
}

.hero__grid-line--v.hero__grid-line--major {
  width: 2px;
}

.hero__grid-line--h {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  opacity: 0;
  animation: hero-grid-line-h var(--hero-grid-line-duration) cubic-bezier(0.22, 1, 0.36, 1)
    calc(
      var(--hero-grid-in-delay) +
        var(--hero-grid-frame-duration) +
        var(--hero-grid-line-delay-after-frame) +
        var(--i) * var(--hero-grid-line-stagger)
    )
    forwards;
}

.hero__grid-line--h.hero__grid-line--major {
  height: 2px;
}

@keyframes hero-grid-frame-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-grid-line-v {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: var(--hero-grid-opacity);
  }
}

@keyframes hero-grid-line-h {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: var(--hero-grid-opacity);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  /* 中央の 1440 収めをやめ、グリッド内側左と同一位置に揃える */
  margin: 0;
  max-width: none;
  padding: calc(var(--site-header-offset) + 0.35rem) var(--hero-align-right) clamp(1.25rem, 3vh, 2.5rem) var(--hero-align-left);
  box-sizing: border-box;
  width: 100%;
}

.hero__top-type {
  position: absolute;
  /* フレーム（hero__grid）の内側左上と同じ起点 */
  top: var(--hero-frame-inset-top);
  left: var(--hero-align-left);
  right: var(--hero-align-right);
  /* JS が生成する縦線座標にスナップ（未設定時のフォールバック） */
  --hero-top-type-sabi-left: 64.7%;
  --hero-top-type-comp-left: 79.25%;
  align-items: start;
}

.hero__top-type__col {
  position: absolute;
  top: 0;
  min-width: 0;
  max-width: 16rem;
}

.hero__top-type__col--sabi {
  left: var(--hero-top-type-sabi-left);
}

.hero__top-type__col--competences {
  left: var(--hero-top-type-comp-left);
}

.hero__top-type__title {
  margin: 0 0 0.7rem;
  font-family: var(--font-service-index), var(--font-sans);
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  font-weight: 600;
  line-height: 1.25;
  color: #000;
}

.hero__top-type__body {
  margin: 0;
  font-family: var(--font-service-index), var(--font-sans);
  font-size: clamp(0.85rem, 0.95vw, 1rem);
  font-weight: 500;
  line-height: 1.25;
  color: #78776f;
}

.hero__top-type__gap {
  height: 0.9rem;
}

@media (max-width: 1024px) {
  .hero__top-type {
    top: calc(var(--hero-frame-inset-top) + 6px);
    --hero-top-type-sabi-left: 62%;
    --hero-top-type-comp-left: 78%;
  }

  .hero__top-type__col {
    max-width: 13rem;
  }
}

/* SP：絶対配置だと詰まりやすいので、右上で折り返せる2カラムに切替 */
@media (max-width: 640px) {
  .hero__top-type {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 20px;
    margin-left: 0;
    width: 100%;
    display: grid;
    /* 2カラムを 50% / 50% で左右に広げる */
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 0;
  }

  .hero__top-type__col {
    position: static;
    top: auto;
    max-width: none;
  }

  .hero__top-type__title {
    font-size: 0.875rem;
    margin-bottom: 0.6rem;
  }

  .hero__top-type__body {
    font-size: 0.78rem;
  }
}

.hero__center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(36vh, 16rem);
  min-width: 0;
  padding: clamp(0.5rem, 2vh, 1.5rem) 0;
}

.hero__wordmark-wrap {
  position: absolute;
  left: 50%;
  top: calc(
    50% - var(--hero-wordmark-viewport-center-lift) * var(--site-header-offset)
  );
  z-index: 2;
  width: min(100%, 810px);
  max-width: calc(100vw - (var(--gutter) * 2));
  transform: translate(
    calc(-50% + var(--hero-wordmark-center-shift-x)),
    calc(-50% + var(--hero-wordmark-center-shift-y))
  );
  pointer-events: none;
}

@supports (width: 100dvw) {
  .hero__wordmark-wrap {
    max-width: calc(100dvw - (var(--gutter) * 2));
  }
}

/* `main.js` が `animation-delay` を測って Lottie の再生開始に使うだけのキュー（見た目変化なし） */
@keyframes hero-wordmark-delay-probe {
  from,
  to {
    opacity: 1;
  }
}

.hero__wordmark-stage {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  z-index: 0;
  /* Lottie の SVG が挿入される前に高さが 0 になりやすいので比率を先に確保 */
  --hero-wordmark-ar-w: 800;
  --hero-wordmark-ar-h: 220;
  aspect-ratio: var(--hero-wordmark-ar-w) / var(--hero-wordmark-ar-h);
  overflow: visible;
  opacity: 1;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.hero__wordmark-fallback {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0;
  /*
   * マスク演出は残すが、`clip-path` は端末によってカクつきやすい。
   * 代わりに CSS mask で「中央から上下に開くスリット」を表現する。
   */
  -webkit-mask-image: linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 50%;
  -webkit-mask-size: 100% 0%;
  mask-image: linear-gradient(#000 0 0);
  mask-repeat: no-repeat;
  mask-position: 0 50%;
  mask-size: 100% 0%;
  transform: translateZ(0) scale(var(--hero-wordmark-zoom-from));
  transform-origin: center;
  animation: none;
  will-change: opacity, transform, -webkit-mask-size, mask-size;
  backface-visibility: hidden;
}

.hero.is-wordmark-ready .hero__wordmark-fallback {
  animation: hero-wordmark-mask-reveal var(--hero-wordmark-reveal-duration)
    var(--hero-wordmark-reveal-ease) var(--hero-wordmark-play-extra-delay) forwards;
}

@keyframes hero-wordmark-mask-reveal {
  from {
    opacity: 0;
    -webkit-mask-size: 100% 0%;
    mask-size: 100% 0%;
    transform: translateZ(0) scale(var(--hero-wordmark-zoom-from));
  }

  to {
    opacity: 1;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform: translateZ(0) scale(1);
  }
}

.hero__footer {
  display: block;
  width: 100%;
  max-width: 34rem;
  align-self: flex-start;
}

.hero__tagline {
  margin: 0;
  transform: translateY(-60px);
  font-family: var(--font-en);
  /* PC。SP は @media (max-width: 640px) で上書き */
  font-size: clamp(2rem, 3.7vw, 4.45rem);
  font-weight: 400;
  color: #000000;
  line-height: 1.2;
}

.hero__tagline__row {
  display: block;
  white-space: nowrap;
}

.hero__tagline__word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, var(--hero-tagline-crossfade-y), 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: hero-per-word-crossfade-enter var(--hero-tagline-crossfade-duration)
    var(--hero-tagline-crossfade-ease)
    calc(
      var(--hero-tagline-delay) +
        var(--i) * var(--hero-tagline-crossfade-stagger)
    )
    forwards;
}

@keyframes hero-per-word-crossfade-enter {
  from {
    opacity: 0;
    transform: translateY(var(--hero-tagline-crossfade-y));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .hero__tagline__row {
    white-space: normal;
  }
}

/* 数秒後に表示：区切り線と同じ伸び → 上から消え → 再び上から伸びるループ */
/* ビューポート下端＋マージン（safe-area 込み）。少しでも縦スクロールしたら JS で非表示 */
.hero__scroll-hint {
  position: fixed;
  /* ビューポート中央ではなく、ヒーローグリッド内側（hero__inner と同じ左右端） */
  left: var(--hero-align-left);
  right: var(--hero-align-right);
  /* グリッド枠の下辺 = --hero-grid-inset に合わせる（下は home インジケータ等と max） */
  bottom: max(env(safe-area-inset-bottom, 0px), var(--hero-grid-inset));
  z-index: 20;
  display: flex;
  justify-content: center;
  pointer-events: none;
  color: var(--color-muted);
  opacity: 0;
  animation: hero-scroll-hint-in 0.65s var(--ease-out) var(--hero-scroll-hint-delay) forwards;
  transition:
    opacity 0.4s var(--ease-out),
    visibility 0.4s var(--ease-out);
}

.hero__scroll-hint.hero__scroll-hint--past-hero {
  opacity: 0 !important;
  visibility: hidden;
}

.hero__scroll-hint__track {
  width: 12px;
  height: 80px;
  display: flex;
  justify-content: center;
}

/* 上から伸びる → 表示し切る → 上側から消える（下端基準で縮む）→ 再び上から */
.hero__scroll-hint__line {
  width: 1px;
  height: 100%;
  border-radius: 1px;
  background-color: currentColor;
  transform-origin: top center;
  animation: hero-scroll-rule-loop 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: var(--hero-scroll-hint-delay);
}

@keyframes hero-scroll-hint-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-scroll-rule-loop {
  0% {
    transform-origin: center top;
    transform: scaleY(0);
  }

  38% {
    transform-origin: center top;
    transform: scaleY(1);
  }

  44% {
    transform-origin: center top;
    transform: scaleY(1);
  }

  /* 下端を固定して上から消える（scaleY 1→0） */
  44.01% {
    transform-origin: center bottom;
    transform: scaleY(1);
  }

  82% {
    transform-origin: center bottom;
    transform: scaleY(0);
  }

  /* 次ループ用に上端基準へ戻す（非表示のまま） */
  82.01% {
    transform-origin: center top;
    transform: scaleY(0);
  }

  100% {
    transform-origin: center top;
    transform: scaleY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-hint {
    animation: hero-scroll-hint-in 0.01s linear var(--hero-scroll-hint-delay) forwards;
    transition: none;
  }

  .hero__scroll-hint.hero__scroll-hint--past-hero {
    opacity: 0 !important;
    visibility: hidden;
  }

  .hero__scroll-hint__line {
    animation: none;
    transform: scaleY(1);
    transform-origin: center top;
  }
}

/* ----- Intro (two columns) ----- */
.intro {
  padding: var(--intro-pad-y) 0;
}

.intro__grid {
  display: grid;
  /* Our Value / サービスブロック見出しと同じ左 480px カラムで縦ラインを揃える */
  grid-template-columns: minmax(0, var(--grid-left-w)) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

.intro__left {
  display: flex;
  flex-direction: column;
  gap: calc(16px + 24px);
  min-width: 0;
}

.intro__lead {
  margin-top: clamp(0.5rem, 2vw, 0.875rem);
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
}

.intro__body {
  min-width: 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 2;
  color: var(--color-text);
}

.intro__body p + p {
  margin-top: 1.125rem;
}

.intro__label-en {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  /* インライン相当：短い 1 行なのにブロック全幅を取らない */
  width: max-content;
  max-width: 100%;
  /* Our Value の英語ラベルと同じ（直下の区切り線までの余白） */
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* Our Value と同じ横線アニメ（区切り線〜グリッドの余白） */
.intro .service-block__rule {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.intro__sublead {
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 500;
  line-height: 2;
  color: var(--color-text);
  margin-bottom: 1.75rem;
}

/* ----- Our Value（Figma: Rowan 24 見出し / 左 16px / リード 16px Medium / 本文） ----- */
.value {
  padding: clamp(4rem, 12vw, 200px) 0 clamp(6rem, 18vw, 200px);
}

.value__label-en {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

/* サービスブロック先頭と同じ横線アニメ（区切り線〜グリッドの余白） */
.value .service-block__rule {
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.value__grid {
  display: grid;
  grid-template-columns: minmax(0, var(--grid-left-w)) minmax(0, 1fr);
  /* .service-block__head と同じカラム間 */
  gap: var(--grid-gap);
  align-items: start;
}

.value__left {
  display: flex;
  flex-direction: column;
  gap: calc(16px + 24px);
  min-width: 0;
}

/* 小さめの英字サブラベル */
.intro__label-sub {
  font-family: var(--font-service-index);
  font-size: 1.125rem;
  color: var(--color-muted);
  line-height: 1.3;
  margin-bottom: 0;
  min-width: 0;
}

.value__label-sub {
  font-family: var(--font-service-index);
  font-size: 1.125rem;
  color: var(--color-muted);
  line-height: 1.3;
  margin-bottom: 0;
  min-width: 0;
}

/* intro の .intro__lead（SABI is 左カラム）と同一トーン */
.value__lead {
  margin-top: clamp(0.5rem, 2vw, 0.875rem);
  margin-bottom: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
}

.value__right {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 5rem);
  min-width: 0;
  max-width: 960px;
}

.value__venn {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  overflow: visible;
  padding-top: 10px;
  padding-bottom: 10px;
}

.value__venn img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.1);
  transform-origin: center;
}

.value__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  min-width: 0;
}

/* サービスブロックの和文 H2（.service-block__title-jp / 「サービスデザイン」等）と同じサイズ */
.value__copy-lead {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text);
  word-break: keep-all;
  min-width: 0;
  max-width: 100%;
}

.value__copy-lead p {
  margin: 0;
  min-width: 0;
}

.value__copy-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  color: var(--color-text);
}

.value__copy-body p {
  margin: 0 0 1.125rem;
}

.value__copy-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .value__grid {
    grid-template-columns: 1fr;
  }

  /* keep-all だと狭幅で最小幅がはみ出し横スクロールになるため、縦積み時は通常改行に */
  .value__copy-lead,
  .value__copy-lead p {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* SP・タブレット縦：コンテナの左右余白ぶん広げて図を大きく見せる */
  .value__venn {
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
}

/* ----- Services（_ Our Services） ----- */
.services {
  padding-bottom: var(--section-y);
}

.services__section-label {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: clamp(2.75rem, 5vw, 5rem);
}

.service-block + .service-block {
  margin-top: clamp(6.5rem, 14vw, 8.5rem);
}

/* ----- Service block ----- */
.service-block {
  padding-bottom: 0;
}

/* 横方向に線が伸びる（左端起点・スクロールインで発火）※サービス各ブロック先頭のみ */
.service-block__rule {
  display: block;
  width: 100%;
  height: 1px;
  border: none;
  margin: 0;
  padding: 0;
  background-color: var(--color-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-block__rule.is-visible {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .service-block__rule {
    transform: scaleX(1);
    transition: none;
  }
}

/* 区切り線の直下：上は詰めて 40px、下は本文〜実績までの余白 */
.service-block__head {
  display: grid;
  grid-template-columns: minmax(0, var(--grid-left-w)) minmax(0, 1fr);
  gap: var(--grid-gap);
  padding: 40px 0 clamp(3.5rem, 5.5vw, 5.5rem);
  align-items: start;
}

/* テキストの縦ライン：実績（2カラム）と同じ折り返しに寄せる（PC のみ） */
@media (min-width: 1025px) {
  .intro__grid,
  .value__grid,
  .service-block__head {
    grid-template-columns: 1fr 1fr;
    gap: var(--works-carousel-gap);
  }
}

.service-block__index-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0;
}

.service-block__index {
  font-family: var(--font-service-index);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.service-block__label-en {
  font-family: var(--font-service-index);
  font-size: 1.125rem;
  color: var(--color-muted);
  line-height: 1.3;
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.service-block__title-jp {
  margin-top: calc(24px + clamp(0.5rem, 2vw, 0.875rem));
  /* Company の「創設者」見出し（.company__title-jp）と同一サイズ */
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 2;
  color: var(--color-text);
}

.service-block__main {
  display: flex;
  flex-direction: column;
  /* 右カラムいっぱい（50% 指定は使わない） */
  width: 100%;
  min-width: 0;
  /* リード文と「○○支援例」枠のあいだ */
  gap: clamp(2rem, 3.2vw, 2.75rem);
}

.service-block__copy {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text);
}

.service-block__copy p {
  margin-bottom: 0;
}

#brand-design .service-block__copy {
  line-height: 1.6;
}

.service-block__list-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.service-block__list-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

.service-block__list-title--all-bold {
  font-weight: 500;
  color: var(--color-muted);
}

.service-block__list {
  margin: 0;
  padding-left: 1.5rem;
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 2;
}

.service-block__list li {
  margin-bottom: 0;
}

.service-block__works {
  padding-top: 0;
}

.service-block__works-title {
  margin: 0 0 clamp(1.75rem, 2.5vw, 2.25rem);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.5;
  color: #000000;
}

.service-block__works-title span {
  font-weight: 500;
}

.service-block__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
  row-gap: clamp(1.5rem, 3vw, 2rem);
  padding-top: 0;
  padding-bottom: 64px;
}

/* サービスデザイン／ブランドデザイン実績：横スライド（スクロールバー非表示）＋右下ナビ（Figma 533:6901） */
.sd-works,
.bd-works {
  position: relative;
  margin: 0;
  padding: 0 0 64px;
}

.sd-works__viewport,
.bd-works__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sd-works__viewport::-webkit-scrollbar,
.bd-works__viewport::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sd-works__viewport,
  .bd-works__viewport {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

.sd-works__track,
.bd-works__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--works-carousel-gap);
  margin: 0;
  padding: 0;
  width: max-content;
  max-width: none;
  justify-content: flex-start;
}

/* カード幅：実績画像の書き出し長辺（--works-gallery-img-max-w）を上限に、cqw 非対応はその固定 */
.sd-works__track .gallery-card,
.bd-works__track .gallery-card {
  flex: 0 0 var(--works-gallery-img-max-w);
  width: var(--works-gallery-img-max-w);
  max-width: none;
  min-width: var(--works-gallery-img-max-w);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@supports (width: 1cqw) {
  .sd-works__viewport,
  .bd-works__viewport {
    container-name: works-carousel;
    container-type: inline-size;
  }

  /* タブレット〜デスクトップ：可視域に 1 カード */
  .sd-works__track .gallery-card,
  .bd-works__track .gallery-card {
    flex: 0 0 100cqw;
    width: 100cqw;
    min-width: 0;
  }

  @container works-carousel (max-width: 640px) {
    .sd-works__track .gallery-card,
    .bd-works__track .gallery-card {
      flex: 0 0 100cqw;
      width: 100cqw;
    }
  }
}

.sd-works__track .gallery-card__frame,
.bd-works__track .gallery-card__frame {
  aspect-ratio: 4 / 3;
}

/* 実績カード内：複数スクショをゆるくフェード切替 */
.sd-works-rotor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: var(--img-radius);
}

.sd-works-rotor--dark {
  background: #1a1a1a;
}

.works-rotor-indicator {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  display: flex;
  /* ホバーで1本だけ太くしても底辺が揺れないよう下揃え＋行高固定 */
  align-items: flex-end;
  height: 18px;
  gap: 4px;
  pointer-events: auto;
}

/* トラック：非アクティブはごく薄く、アクティブ本だけやや濃く（全本が同じ明るさ＝「全部点灯」に見えない） */
.sd-works-rotor:not(.sd-works-rotor--dark) .works-rotor-indicator__bar:not(.is-active) {
  background: rgba(0, 0, 0, 0.07);
}
.sd-works-rotor:not(.sd-works-rotor--dark) .works-rotor-indicator__bar.is-active {
  background: rgba(0, 0, 0, 0.22);
}
.sd-works-rotor:not(.sd-works-rotor--dark) .works-rotor-indicator__fill {
  background: #fff;
}

.sd-works-rotor--dark .works-rotor-indicator__bar:not(.is-active) {
  background: rgba(255, 255, 255, 0.12);
}
.sd-works-rotor--dark .works-rotor-indicator__bar.is-active {
  background: rgba(255, 255, 255, 0.3);
}
.sd-works-rotor--dark .works-rotor-indicator__fill {
  background: #fff;
}

.works-rotor-indicator__bar {
  position: relative;
  width: 32px;
  height: 2px;
  overflow: hidden;
  transition:
    height 160ms ease,
    background-color 0.25s ease;
}

/* クリック用（button の WebKit 内部でバーが欠けるのを避け span で実装） */
.works-rotor-indicator__btn {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  border: 0;
  padding: 0;
  width: 32px;
  height: 18px;
  min-width: 32px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
  overflow: visible;
  vertical-align: top;
  box-shadow: none;
  outline: none;
  color: inherit;
  text-decoration: none;
}

/* マウスオン／フォーカスした1本だけ太く（親ホバーで全本が太くならないように） */
.works-rotor-indicator__btn:hover .works-rotor-indicator__bar,
.works-rotor-indicator__btn:focus-visible .works-rotor-indicator__bar {
  height: 4px;
}

.works-rotor-indicator__fill {
  position: absolute;
  inset: 0;
  /* 上書きで明／暗トラックに合わせる（デフォルト＝Figma 白地） */
  background: rgba(255, 255, 255, 1);
  transform-origin: left center;
  transform: scaleX(0);
}

/* アクティブでない本は進捗を必ず隠す（forwards 残りで「全部埋まり」に見えるのを防ぐ） */
.works-rotor-indicator__bar:not(.is-active) .works-rotor-indicator__fill {
  animation: none;
  transform: scaleX(0);
}

.works-rotor-indicator__bar.is-active .works-rotor-indicator__fill {
  animation: works-rotor-indicator-progress var(--works-rotor-cycle-ms, 2800ms) linear forwards;
}

@keyframes works-rotor-indicator-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.sd-works-rotor__img {
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}

.sd-works-rotor__img--show {
  z-index: 1;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sd-works-rotor__img {
    transition: none;
  }
  .sd-works-rotor__img:not(:first-of-type) {
    display: none;
  }
  .sd-works-rotor__img:first-of-type {
    opacity: 1;
    z-index: 1;
  }
}

.sd-works__nav,
.bd-works__nav {
  position: absolute;
  right: 0;
  /* 各カード下のキャプションより上＝サムネ右下付近 */
  bottom: calc(3.75rem - 70px);
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
}

.sd-works__btn,
.bd-works__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.works-nav__graphic {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
}

.sd-works__btn .works-nav__img,
.bd-works__btn .works-nav__img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 48px;
  height: 48px;
}

.sd-works__btn .works-nav__img--muted,
.bd-works__btn .works-nav__img--muted {
  opacity: 0;
  pointer-events: none;
}

.sd-works__btn:disabled .works-nav__img--idle,
.bd-works__btn:disabled .works-nav__img--idle {
  opacity: 0;
  pointer-events: none;
}

.sd-works__btn:disabled .works-nav__img--muted,
.bd-works__btn:disabled .works-nav__img--muted {
  opacity: 1;
}

.sd-works__btn:hover:not(:disabled),
.bd-works__btn:hover:not(:disabled) {
  opacity: 0.85;
}

.sd-works__btn:disabled,
.bd-works__btn:disabled {
  cursor: default;
}

.sd-works__btn:focus-visible,
.bd-works__btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

.gallery-card__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 270;
  background: #f0f0f0;
  overflow: hidden;
  border-radius: var(--img-radius);
}

.gallery-card__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 実績カルーセル：書き出し解像の全体を切らずに収める（4:3 枠内では cover と同見た目） */
.sd-works__track .gallery-card__frame img,
.bd-works__track .gallery-card__frame img {
  object-fit: contain;
}

/* デザイン組織支援の実績：通常はモノクロ、ホバー/フォーカスでカラー */
#design-org .gallery-card__frame img {
  filter: grayscale(1);
  transition: filter 240ms var(--ease-out);
  will-change: filter;
}

@media (hover: hover) {
  #design-org .gallery-card:hover .gallery-card__frame img,
  #design-org .gallery-card:focus-within .gallery-card__frame img {
    filter: grayscale(0);
  }
}

.gallery-card__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.gallery-card__caption a {
  color: var(--color-muted);
  text-decoration: none;
}

.gallery-card__caption a:hover {
  text-decoration: underline;
}

/* 実績画像：拡大表示のヒント（#services のカード画像のみ） */
#services .gallery-card__frame img {
  cursor: zoom-in;
}

html.works-lightbox-open {
  overflow: hidden;
}

.works-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) calc(0.75rem + env(safe-area-inset-right, 0px))
    calc(0.75rem + env(safe-area-inset-bottom, 0px)) calc(0.75rem + env(safe-area-inset-left, 0px));
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.works-lightbox--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.works-lightbox__frame {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.works-lightbox__img {
  max-width: 96vw;
  max-height: min(88dvh, 88vh);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 実績スライダー矢印（sd-carousel-*.svg）と同じ円形ストローク＋中央に × */
.works-lightbox__close {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top, 0px));
  right: calc(0.5rem + env(safe-area-inset-right, 0px));
  z-index: 201;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

.works-lightbox__close-svg {
  display: block;
  width: 48px;
  height: 48px;
}

.works-lightbox__close:hover {
  opacity: 0.88;
}

.works-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 50%;
}

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

/* ----- Company（_Company + 創設者 + 会社概要） ----- */
.company {
  padding: 120px 0 var(--section-y);
}

.company__section-label {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  /* 旧 hr 二段の余白に相当 */
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.company__founder {
  margin-bottom: clamp(3rem, 8vw, 4.375rem);
}

.company__founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* 創設者ブロック本文・キャリア・受賞、会社概要表：ゴシック本文は General Sans（CJK は Noto にフォールバック） */
.company__founder-top,
.company__founder-row,
.company__table {
  font-family: var(--font-service-index), var(--font-sans);
}

.company__founder-top {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  align-items: start;
  padding: 1rem 0;
  border-top: none;
  border-bottom: none;
}

/* 創設者ブロック：上下線を左から伸ばす（会社概要の行と同じトランジション） */
.company__founder-top::before,
.company__founder-top::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.company__founder-top::before {
  top: 0;
}

.company__founder-top::after {
  bottom: 0;
}

.company__founder-top.is-visible::before,
.company__founder-top.is-visible::after {
  transform: scaleX(1);
}

.company__founder-photo {
  width: 100%;
  max-width: 258px;
  aspect-ratio: 258 / 253;
  overflow: hidden;
  background: #f5f5f5;
  border-radius: var(--img-radius);
}

.company__founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}

.company__founder-intro {
  min-width: 0;
}

.company__founder-name {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 32px;
}

.company__founder-role {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
  margin-bottom: 32px;
}

.company__founder-bio {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 32px;
}

.company__founder-row {
  display: grid;
  /* ラベル列と内容列を 1:1 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  padding: 1rem 0;
  border-bottom: none;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}

.company__founder-row > div:first-child {
  color: var(--color-muted);
}

/* 「これまでのキャリア」行のみ下線。過去の受賞歴行は付けない */
.company__founder-row:has(.company__career) {
  position: relative;
}

.company__founder-row:has(.company__career)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.company__founder-row:has(.company__career).is-visible::after {
  transform: scaleX(1);
}

.company__career {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.25rem);
  align-items: start;
  width: 100%;
  /* 行間は詰め、ブロック下端だけ 32px */
  padding-bottom: 32px;
}

.company__career-years,
.company__career-orgs {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-variant-numeric: tabular-nums;
}

.company__career-years {
  min-width: 0;
  flex-shrink: 0;
}

/* 年号行：桁は詰めて表示（1fr による変な伸びを防ぐ） */
.company__career-period {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  align-items: baseline;
  column-gap: 0.35em;
  line-height: 1.7;
  min-height: calc(1.7em);
  white-space: nowrap;
}

.company__career-year-start {
  text-align: left;
}

.company__career-year-sep {
  text-align: center;
}

.company__career-year-end {
  text-align: left;
}

.company__career-orgs {
  min-width: 0;
}

.company__career-orgs span {
  display: block;
  line-height: 1.7;
  min-height: calc(1.7em);
}

.company__awards-list {
  padding-bottom: 32px;
}

.company__awards-list p {
  margin: 0;
  line-height: 1.7;
}

.company__profile {
  padding-top: 0;
}

.company__head {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.company__label-en {
  font-family: var(--font-service-index);
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 2;
  margin-bottom: 0;
}

.company__title-jp {
  margin-top: calc(24px + 0.25rem);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 2;
  /* サービスブロックの和文 H2（.service-block__title-jp）と同じ本文色 */
  color: var(--color-text);
}

.company__table {
  position: relative;
  width: 100%;
  padding-bottom: 32px;
}

/* 会社名の上の線（表の上端）も左から伸ばす */
.company__table::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.company__table.is-visible::before {
  transform: scaleX(1);
}

.company__row {
  position: relative;
  display: grid;
  /* PC: ラベル列と内容列を等分 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: none;
  font-size: 1rem;
  line-height: 1.7;
}

.company__row [role='rowheader'] {
  color: var(--color-muted);
}

/* 会社概要：行下線（事業内容行 company__row--no-line は除外） */
.company__row:not(.company__row--no-line)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--color-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.company__row:not(.company__row--no-line).is-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .company__table::before {
    transform: scaleX(1);
    transition: none;
  }

  .company__founder-top::before,
  .company__founder-top::after {
    transform: scaleX(1);
    transition: none;
  }

  .company__founder-row:has(.company__career)::after {
    transform: scaleX(1);
    transition: none;
  }

  .company__row:not(.company__row--no-line)::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* ----- Contact（英語ラベル + グリッド） ----- */
.contact {
  padding: var(--contact-pad-y) 0;
}

.contact__section-label {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: clamp(4rem, 8vw, 8rem);
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

/* PC：実績3カラムの縦ラインに合わせて、Company / Contact の右カラム開始を 2列目に揃える */
@media (min-width: 1025px) {
  .company__founder-grid,
  .company__head,
  .contact__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
  }

  .company__founder-grid > :nth-child(2),
  .company__head > :nth-child(2),
  .contact__grid > :nth-child(2) {
    grid-column: 2 / -1;
  }
}

.contact__label-en {
  font-family: var(--font-service-index);
  font-size: 1rem;
  color: var(--color-muted);
  line-height: 2;
  margin-bottom: 0;
}

.contact__title-jp {
  margin-top: calc(24px + 0.25rem);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 2;
  color: var(--color-text);
}

.contact__text-rule {
  grid-column: 1 / -1;
  margin: 0;
}

.contact__text-rule--top {
  /* 旧 `border-top + padding-top(48+40)` と同じ「線の外側→本文開始」までの距離にする（hr 自体の 1px を差し引く） */
  margin-bottom: calc(48px + 40px - 1px);
}

.contact__text-wrap {
  grid-column: 2 / -1;
  /* 旧 `padding: calc(48px + 40px) 0` のうち、上線側は hr の margin で確保。下は線なしなので padding で確保 */
  padding: 0 0 calc(48px + 40px);
}

.contact__text {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text);
}

.contact__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.875rem 2.25rem;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.contact__cta-icon {
  flex-shrink: 0;
  display: block;
}

.contact__cta:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.contact__cta:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* ----- Footer ----- */
.site-footer {
  padding: clamp(5rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.site-footer__wordmark img,
.site-footer__mark img {
  opacity: 0;
  transform: translateY(40px);
  border-radius: 0;
}

.site-footer.is-in-view .site-footer__wordmark img {
  animation: footer-logo-pyokon 0.78s cubic-bezier(0.34, 1.45, 0.52, 1) forwards;
}

.site-footer.is-in-view .site-footer__mark img {
  animation: footer-logo-pyokon 0.78s cubic-bezier(0.34, 1.45, 0.52, 1) 0.14s forwards;
}

@keyframes footer-logo-pyokon {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  58% {
    opacity: 1;
    transform: translateY(-10px);
  }

  82% {
    transform: translateY(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-footer__wordmark img {
  height: 40px;
  width: auto;
  display: block;
}

.site-footer__copy {
  font-family: var(--font-en);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  justify-self: center;
  align-self: center;
}

.site-footer__wordmark,
.site-footer__mark {
  display: flex;
  align-items: center;
}

.site-footer__wordmark {
  justify-self: start;
}

.site-footer__mark {
  justify-self: end;
}

.site-footer__mark img {
  width: 64px;
  height: 64px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__wordmark img,
  .site-footer__mark img {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ----- Fade-in ----- */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-fade) var(--ease-out),
    transform var(--duration-fade) var(--ease-out);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* 英字見出し：ヒーロー「Service Architect / Brand Incubator」と同じ単語単位＋ per-word クロスフェード */
.char-reveal__word {
  display: inline-block;
}

.char-reveal.fade-in {
  opacity: 1;
  transform: none;
  transition: none;
}

.char-reveal.fade-in:not(.is-visible) .char-reveal__word,
.fade-in:not(.is-visible) .char-reveal:not(.fade-in) .char-reveal__word {
  opacity: 0;
  transform: translateY(var(--hero-tagline-crossfade-y));
  animation: none;
}

.char-reveal.fade-in.is-visible .char-reveal__word,
.fade-in.is-visible .char-reveal:not(.fade-in) .char-reveal__word {
  opacity: 0;
  transform: translateY(var(--hero-tagline-crossfade-y));
  animation: hero-per-word-crossfade-enter var(--hero-tagline-crossfade-duration)
    var(--hero-tagline-crossfade-ease)
    calc(
      var(--hero-tagline-crossfade-base-delay) +
        var(--i) * var(--hero-tagline-crossfade-stagger)
    )
    forwards;
}

@media (prefers-reduced-motion: reduce) {
  .char-reveal__word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  .intro__grid {
    grid-template-columns: 1fr;
  }

  .service-block__head {
    padding-top: 40px;
    padding-bottom: clamp(2.5rem, 4.5vw, 3.25rem);
  }

  .service-block__head,
  .company__head,
  .company__founder-grid,
  .company__founder-row,
  .company__row,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .contact__text-wrap {
    grid-column: auto;
  }

  .service-block__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* タブレット：ヒーロー SABI ワードマークを控えめに（PC の 810px 上限より小さく） */
@media (min-width: 641px) and (max-width: 1024px) {
  .site-header__mark {
    width: clamp(2.35rem, 4.25vw, 3.35rem);
  }

  .hero__wordmark-wrap {
    max-width: min(100%, clamp(20rem, 58vw, 32rem));
  }

  .hero__footer {
    max-width: 40rem;
  }

  .hero__tagline {
    font-size: clamp(2rem, 4.6vw, 3.9rem);
  }

  /* Our Value リード（PC 1.5rem はタブレットで大きめ） */
  .value__copy-lead {
    font-size: clamp(1.1rem, 1.9vw, 1.3rem);
    line-height: 1.5;
  }
}

@media (max-width: 640px) {
  :root {
    --site-header-offset: max(
      3.5rem,
      calc(
        var(--hero-frame-inset-top) + clamp(2.4rem, 7vw, 3.25rem) + 0.75rem
      )
    );
    --hero-grid-inset: clamp(1.25rem, 5.5vw, 2.5rem);
    /* SP：ビューポート縦 50% を基準（ヘッダー持ち上げ補正なし） */
    --hero-wordmark-viewport-center-lift: 0;
    --hero-wordmark-center-shift-y: 4px;
    --hero-wordmark-center-shift-x: -8px;
  }

  body {
    font-size: 0.875rem;
    line-height: 1.85;
  }

  .site-header {
    padding-top: var(--hero-frame-inset-top);
    padding-right: var(--hero-align-right);
    padding-bottom: 0.75rem;
    padding-left: var(--hero-align-left);
  }

  .hero__footer {
    max-width: 100%;
  }

  .hero__wordmark-wrap {
    max-width: min(100%, calc(810px * 0.3));
  }

  .hero__tagline {
    font-size: clamp(1.45rem, 5.75vw, 2.4rem);
    min-width: 0;
    max-width: 100%;
    transform: translateY(-72px);
  }

  /* ヒーロー下端のスクロール誘導ライン：SP はグリッド右端（内側列）に寄せる */
  .hero__scroll-hint {
    justify-content: flex-end;
  }

  .intro__label-en {
    font-size: clamp(1.1rem, 4vw, 1.35rem);
    margin-bottom: 2.5rem;
  }

  .company__section-label,
  .contact__section-label,
  .services__section-label {
    font-size: clamp(1.1rem, 4vw, 1.35rem);
  }

  .intro__lead,
  .value__lead {
    font-size: clamp(1.22rem, 4.8vw, 1.6rem);
    line-height: 1.6;
  }

  .value__copy-lead {
    font-size: clamp(0.95rem, 3.4vw, 1.12rem);
    line-height: 1.5;
  }

  .intro__sublead {
    font-size: 0.875rem;
  }

  .intro__body {
    font-size: 0.875rem;
  }

  .value__label-en {
    font-size: clamp(1.1rem, 4vw, 1.35rem);
  }

  .value__copy-body {
    font-size: 0.875rem;
  }

  .service-block__label-en,
  .intro__label-sub,
  .value__label-sub,
  .company__label-en,
  .contact__label-en {
    font-size: 0.9375rem;
  }

  #brand-design .service-block__label-en {
    font-size: 1rem;
  }

  .service-block__title-jp,
  .company__title-jp,
  .contact__title-jp {
    font-size: clamp(1.22rem, 4.6vw, 1.52rem);
    line-height: 1.42;
  }

  .company__founder-top {
    grid-template-columns: 1fr;
  }

  .company__founder-photo {
    max-width: calc(258px * 0.8);
  }

  /* キャリア：SP でも年と会社名を横並び（行ごとに揃える） */
  .company__career {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0.65rem 0.85rem;
    align-items: start;
  }

  .intro__lead,
  .value__lead,
  .service-block__title-jp,
  .company__title-jp,
  .contact__title-jp {
    margin-bottom: 1.5rem;
  }

  .service-block__copy,
  .service-block__list,
  .company__row,
  .company__founder-bio,
  .company__founder-row,
  .contact__text {
    font-size: 0.875rem;
  }

  /* 会社概要：SP ではラベル列と内容列を 1:2（1024px 以下の 1 列積みを上書き） */
  .company__table .company__row {
    grid-template-columns: 1fr 2fr;
  }

  .service-block__list {
    line-height: 1.8;
  }

  .gallery-card__caption {
    font-size: 0.75rem;
  }

  .contact__cta {
    font-size: 0.8125rem;
    padding: 0.65rem 1.5rem;
  }

  .site-footer__copy {
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .service-block__gallery {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 5vw, 2.75rem);
  }

  /* デザイン組織支援の実績のみ 2 カラム */
  #design-org .service-block__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.5rem, 2vw, 0.75rem);
    row-gap: clamp(1.25rem, 4vw, 1.75rem);
  }

  .sd-works__track,
  .bd-works__track {
    gap: var(--works-carousel-gap);
  }

  .sd-works,
  .bd-works {
    padding-bottom: 3.5rem;
  }

  .sd-works__nav,
  .bd-works__nav {
    bottom: calc(2.5rem - 70px);
    right: 0;
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem 0.75rem;
    width: 100%;
    text-align: center;
  }

  .site-footer__wordmark {
    justify-self: start;
  }

  .site-footer__copy {
    margin: 0;
    justify-self: center;
  }

  .site-footer__mark {
    justify-self: end;
  }

  .site-footer__wordmark img {
    height: 32px;
  }

  .site-footer__mark img {
    width: 48px;
    height: 48px;
  }
}