/*
 * good-o Motion System — 基盤トークン
 *
 * 設計方針
 *  1. すべて `--mo-` 前ぶれで名前空間を分ける。既存の `--color-*` `--space-*` とは衝突しない。
 *  2. 見た目の値は既存ブランドトークン（--brand-gradient など）を参照し、
 *     このファイル単体で他サイトへ持ち出したときはフォールバック値で動く。
 *  3. 動きの「意味」ごとに duration を持つ。数値を各所へ直書きしない。
 */

:root {
  /* --- 時間: 用途で選ぶ。ミリ秒を直書きしない --- */
  --mo-dur-micro: 160ms;  /* hover / press / focus。指の下で起きること */
  --mo-dur-state: 320ms;  /* 開閉・切替など状態が変わること */
  /* 画面に現れること。
     既存サイトは 520ms だが、NN/g の実測ガイダンスはスクロール出現 100〜400ms で
     500ms 超は「遅すぎる」。既存値には合わせず 380ms を標準とする。
     （既存の [data-reveal] 側は触っていないので、そちらは 520ms のまま） */
  --mo-dur-enter: 380ms;
  --mo-dur-draw: 900ms;   /* 線が引かれること */

  /* --- イージング --- */
  /* 既存サイトが全面的に使っている曲線。新規で別の曲線を増やさない */
  --mo-ease-out: cubic-bezier(0.22, 0.75, 0.2, 1);
  --mo-ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --mo-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* --- 移動量 --- */
  --mo-shift-s: 8px;
  --mo-shift-m: 18px;
  --mo-shift-l: 28px;

  /* --- 連続する要素のずらし（既存 site-motion.js の 80ms / 上限 240ms に合わせる） --- */
  --mo-stagger-step: 80ms;
  --mo-stagger-max: 240ms;

  /* --- 帯の速度: 秒あたりの移動px。duration ではなく速度で揃える --- */
  /* 内容の長さが違う帯どうしでも、体感速度が一致する */
  --mo-speed-slow: 16;
  --mo-speed-base: 32;
  --mo-speed-fast: 58;

  /*
   * --- 役割の層 ---
   *
   * 各所が duration や easing を直接選ぶと、似た値が少しずつ散らばって
   * サイト全体の動きに一貫した人格が出なくなる。
   * ここで「これはリンクの動き」「これは線が引かれる動き」と役割に名前を付け、
   * 使う側は役割だけを選ぶ。値を変えたいときはこの層を1か所直す。
   */
  --mo-motion--base: var(--mo-dur-state) var(--mo-ease-out);
  --mo-transition--link: color var(--mo-dur-micro) var(--mo-ease-out);
  --mo-transition--surface: opacity var(--mo-motion--base);
  --mo-transition--lift: transform var(--mo-dur-micro) var(--mo-ease-out);
  --mo-transition--line: transform var(--mo-dur-draw) var(--mo-ease-out);
  --mo-transition--draw: stroke-dashoffset var(--mo-dur-draw) var(--mo-ease-out);
  --mo-transition--enter:
    opacity var(--mo-dur-enter) var(--mo-ease-out),
    clip-path var(--mo-dur-enter) var(--mo-ease-out),
    transform var(--mo-dur-enter) var(--mo-ease-out);
  --mo-transition--swap:
    opacity var(--mo-dur-enter) var(--mo-ease-out),
    transform var(--mo-dur-enter) var(--mo-ease-out);
  --mo-transition--meter: transform var(--mo-motion--base);
  --mo-transition--tilt: transform var(--mo-motion--base);

  /* --- ブランドの線: この Motion System の背骨 --- */
  --mo-spectrum: var(
    --brand-gradient,
    linear-gradient(90deg, #d7d93e 0%, #4ad7a8 32%, #7f99ce 68%, #d760ae 100%)
  );
  --mo-rule-weight: 2px;

  /* --- 単色フォールバック（1色で見せたい場面） --- */
  --mo-accent: var(--color-teal, #5d2e54);
  --mo-ink: var(--color-ink, #1b1a1f);
  --mo-paper: var(--color-paper, #fbfbfa);
  --mo-line: var(--color-line, #dedde2);
}

/*
 * 動きを弱める / 止める。
 *
 * 「reduce なら全部止める」は誤り。WebKit の公式解説が明確に否定している
 * （前庭系の引き金になると分かっているものだけを外すべきで、
 *  先回りして全部消すのはサイトを退屈にするだけ、という趣旨）。
 *
 * ここで外すのは、引き金になり得るものだけ:
 *   面の移動 / 拡大縮小 / 回転 / 視差 / 周縁を横切り続けるマーキー
 * 残すのは:
 *   不透明度のフェード / 色の遷移 / focus の表示 / 状態が変わったことの手がかり
 * 残すぶんは少し短くする（気配は残し、待たせない）。
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    /* 時間は殺さない。短くするだけ */
    --mo-dur-micro: 100ms;
    --mo-dur-state: 160ms;
    --mo-dur-enter: 200ms;
    --mo-dur-draw: 240ms;
    /* 動く距離だけを 0 にする。これが前庭系の引き金 */
    --mo-shift-s: 0px;
    --mo-shift-m: 0px;
    --mo-shift-l: 0px;
  }
}

:root[data-mo-motion='reduce'] {
  --mo-dur-micro: 100ms;
  --mo-dur-state: 160ms;
  --mo-dur-enter: 200ms;
  --mo-dur-draw: 240ms;
  --mo-shift-s: 0px;
  --mo-shift-m: 0px;
  --mo-shift-l: 0px;
}

/*
 * ループする動きを止める。
 *
 * animation-play-state ではなく animation: none を当てている。
 * Safari 26.0〜26.4 に「実行中のアニメーションを動的に paused にしても止まらない」
 * 不具合があり（26.5 で修正）、停止手段は WCAG 2.2.2 Level A の必須要件なので、
 * 一部のバージョンで効かない方法には賭けられない。
 * 代償として、止めた瞬間に帯は先頭へ戻る。その場で凍らない。
 */
:root[data-mo-paused] [data-mo-loop] {
  animation: none !important;
}

/* 印刷時はループを止める（帯が途中で切れた状態で印刷されるのを避ける） */
@media print {
  [data-mo-loop] {
    animation: none !important;
    transform: none !important;
  }
}

/* ================================================================
 * AngledMarquee
 * ================================================================ */

.mo-tape {
  position: relative;
  min-height: var(--mo-tape-height, 7rem);
  /* clip は scroll コンテナを作らないので、はみ出した帯で横スクロールが出ない */
  overflow: hidden;
  overflow: clip;
}

.mo-tape__band {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 非対応環境向けの固定値。±6deg までは余裕をもって覆える */
  width: 150%;
  transform: translate(-50%, -50%) rotate(var(--mo-angle));
  padding-block: 0.75rem;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  letter-spacing: 0.04em;
}

/* 三角関数が使える環境では、角度から必要な長さを正確に出す */
@supports (width: calc(100% / cos(3deg))) {
  .mo-tape__band {
    width: calc(100% / cos(var(--mo-angle)) + 6rem);
  }
}

.mo-tape[data-mo-tone='brand'] .mo-tape__band {
  background: var(--mo-spectrum);
  color: var(--mo-ink);
}

.mo-tape[data-mo-tone='ink'] .mo-tape__band {
  background: var(--mo-ink);
  color: var(--mo-paper);
}

.mo-tape[data-mo-tone='paper'] .mo-tape__band {
  background: var(--mo-paper);
  color: var(--mo-ink);
  border-block: var(--mo-rule-weight) solid transparent;
  /* 上下の罫だけを虹にする。面で虹を使うより静かに効く */
  border-image: var(--mo-spectrum) 1;
}

/* 参考実装。good-o のブランドに対しては誤り（危険・工事の記号）。
   デモで「なぜ外れるか」を見せるためだけに残している。 */
.mo-tape[data-mo-tone='hazard'] .mo-tape__band {
  background: repeating-linear-gradient(
    -45deg,
    #f2c200 0 1.25rem,
    #1b1a1f 1.25rem 2.5rem
  );
  color: #fff;
  text-shadow: 0 1px 0 #000;
}

/* ================================================================
 * CrossingTape
 * ================================================================ */

.mo-cross {
  position: relative;
  min-height: var(--mo-cross-height, 7rem);
  overflow: hidden;
  overflow: clip;
}

.mo-cross .mo-cross__layer {
  position: absolute;
  inset: 0;
}

/*
 * 2本目は透かさない。
 * 半透明にすると交差部で2つの文字列が混ざって、どちらも読めなくなる。
 * 不透明にして影で縁を立てると「テープが上に重なっている」と見えるので、
 * 上の帯だけは確実に読める。物理的に重なるものは、重なって見せたほうが正しい。
 */
.mo-cross .mo-cross__layer--second {
  opacity: 1;
  filter: drop-shadow(0 2px 6px rgb(27 26 31 / 0.28));
}

/* ================================================================
 * InfiniteMarquee
 * ================================================================ */

.mo-marquee {
  position: relative;
  /* clip は scroll コンテナを作らない。斜め帯で横スクロールが出るのを防ぐ */
  overflow: hidden;
  overflow: clip;
}

.mo-marquee__viewport {
  overflow: hidden;
  overflow: clip;
}

.mo-marquee[data-mo-fade] .mo-marquee__viewport {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--mo-fade),
    #000 calc(100% - var(--mo-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--mo-fade),
    #000 calc(100% - var(--mo-fade)),
    transparent 100%
  );
}

.mo-marquee__track {
  display: flex;
  width: max-content;
  /* duration は JS が実測して上書きする。ここは測る前の既定値 */
  animation: mo-marquee-run var(--mo-marquee-dur, 26s) linear infinite;
}

/*
 * JS が動かない環境では帯を動かさない。
 *
 * 当初は「CSSだけでも流れる」ことを利点として作っていたが、それは誤りだった。
 * 停止ボタン（MotionToggle）は JS が無いと押しても何も起きないので隠してある。
 * つまり JS 無効の環境では「動き続けるのに止める手段が無い」状態になり、
 * WCAG 2.2.2 Pause, Stop, Hide（Level A）を満たさない。
 * 止められないなら、動かさないほうが正しい。
 * 止まった帯は1組目がそのまま読めるので、情報は失われない。
 */
:root:not(.js-mo) .mo-marquee__track {
  animation: none;
}

.mo-marquee[data-mo-direction='right'] .mo-marquee__track {
  animation-direction: reverse;
}

.mo-marquee[data-mo-pause-hover]:hover .mo-marquee__track,
.mo-marquee:focus-within .mo-marquee__track {
  animation-play-state: paused;
}

.mo-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--mo-gap);
  /* 間隔を group の padding に持たせると、
     「1組ぶん進む = 100%/組数」がどの組数でも正確に一致する */
  padding-right: var(--mo-gap);
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.mo-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--mo-gap);
}

.mo-marquee__sep {
  font-style: normal;
  opacity: 0.4;
}

@keyframes mo-marquee-run {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(var(--mo-advance, 50%) * -1), 0, 0);
  }
}

/* JS が動かない環境でも、OS の設定だけで止まる */
@media (prefers-reduced-motion: reduce) {
  .mo-marquee__track {
    animation-play-state: paused;
  }
}

/* ================================================================
 * NoticeBand
 * ================================================================ */

.mo-notice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.7rem;
  padding-inline: clamp(1rem, 4vw, 2rem);
  font-size: 0.85rem;
  line-height: 1.4;
  overflow: hidden;
  overflow: clip;
}

.mo-notice[data-mo-tone='ink'] {
  background: var(--mo-ink);
  color: var(--mo-paper);
}

.mo-notice[data-mo-tone='paper'] {
  background: var(--mo-paper);
  color: var(--mo-ink);
  border-block-end: 1px solid var(--mo-line);
}

.mo-notice__lead {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.mo-notice__flow {
  flex: 1 1 auto;
  min-width: 0;
}

.mo-notice__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--brand-teal, #4ad7a8);
  flex: none;
}

/* 脈は1色の小さな点だけ。面積が小さいので前庭系への負荷はほぼ無い */
.mo-notice__dot[data-mo-status='live'] {
  animation: mo-notice-pulse 2.4s var(--mo-ease-in-out) infinite;
}

@keyframes mo-notice-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgb(74 215 168 / 0.5);
  }
  50% {
    opacity: 0.72;
    box-shadow: 0 0 0 0.32rem rgb(74 215 168 / 0);
  }
}

/* 幅が足りないときは見出しを畳んで、流れる情報のほうを残す */
@media (max-width: 40rem) {
  .mo-notice {
    gap: 0.6rem;
    font-size: 0.8rem;
  }

  .mo-notice__eyebrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mo-notice__dot[data-mo-status='live'] {
    animation: none;
  }
}

/* ================================================================
 * RevealMask
 * ================================================================ */

.mo-reveal {
  position: relative;
  display: block;
}

.mo-reveal__inner {
  display: block;
  transition: var(--mo-transition--enter);
  transition-delay: var(--mo-delay, 0ms);
}

/* 隠す指定は JS が動いたときだけ。JS 無しでは最初から全部見える */
:root.js-mo .mo-reveal:not([data-mo-shown]) .mo-reveal__inner {
  opacity: 0;
}

:root.js-mo .mo-reveal[data-mo-variant='up']:not([data-mo-shown]) .mo-reveal__inner {
  clip-path: inset(100% 0 0 0);
  transform: translateY(var(--mo-shift-m));
}

:root.js-mo .mo-reveal[data-mo-variant='right']:not([data-mo-shown]) .mo-reveal__inner {
  clip-path: inset(0 100% 0 0);
}

:root.js-mo .mo-reveal[data-mo-variant='split']:not([data-mo-shown]) .mo-reveal__inner {
  clip-path: inset(0 50% 0 50%);
}

.mo-reveal[data-mo-shown] .mo-reveal__inner {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: none;
}

/*
 * 先端を走る虹の線。
 * 動かすのは transform だけ。位置(left/top)を毎フレーム変えると
 * そのたびにレイアウトが再計算される。
 * 線そのものではなく「線を載せた面」を動かすことで transform で済ませている。
 */
.mo-reveal__edge {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.mo-reveal__edge::after {
  content: '';
  position: absolute;
  background: var(--mo-spectrum);
}

.mo-reveal[data-mo-variant='up'] .mo-reveal__edge::after {
  inset-inline: 0;
  inset-block-start: 0;
  block-size: var(--mo-rule-weight);
}

.mo-reveal[data-mo-variant='right'] .mo-reveal__edge::after,
.mo-reveal[data-mo-variant='split'] .mo-reveal__edge::after {
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--mo-rule-weight);
}

:root.js-mo .mo-reveal[data-mo-shown][data-mo-variant='up'] .mo-reveal__edge {
  animation: mo-edge-up var(--mo-dur-enter) var(--mo-ease-out) var(--mo-delay, 0ms) both;
}

:root.js-mo .mo-reveal[data-mo-shown][data-mo-variant='right'] .mo-reveal__edge,
:root.js-mo .mo-reveal[data-mo-shown][data-mo-variant='split'] .mo-reveal__edge {
  animation: mo-edge-x var(--mo-dur-enter) var(--mo-ease-out) var(--mo-delay, 0ms) both;
}

/* 面を下から上へ。線は面の上端にあるので、現れる境目と一致して動く */
@keyframes mo-edge-up {
  0% {
    opacity: 1;
    transform: translateY(100%);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* 面を左から右へ。線は面の左端にある */
@keyframes mo-edge-x {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* 動きを弱める設定では、線は出さず内容だけを出す */
:root[data-mo-motion='reduce'] .mo-reveal__edge {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mo-reveal__edge {
    display: none;
  }

  .mo-reveal__inner {
    transition: none;
  }
}

/* ================================================================
 * SpectrumRule
 * ================================================================ */

.mo-rule {
  display: block;
}

.mo-rule--line,
.mo-rule--progress {
  position: relative;
  block-size: var(--mo-rule-weight);
  overflow: hidden;
  background: var(--mo-line);
}

.mo-rule__fill {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--mo-spectrum);
  transform-origin: left center;
}

.mo-rule[data-mo-solid] .mo-rule__fill {
  background: var(--mo-accent);
}

/* --- line: 画面に入ったら引かれる --- */
.mo-rule--line .mo-rule__fill {
  transform: scaleX(1);
  transition: var(--mo-transition--line);
  transition-delay: var(--mo-delay, 0ms);
}

:root.js-mo .mo-rule--line:not([data-mo-shown]) .mo-rule__fill {
  transform: scaleX(0);
}

/* --- progress: スクロール量に追従 --- */
.mo-rule--progress .mo-rule__fill {
  transform: scaleX(var(--mo-progress, 0));
}

/* ブラウザ側でスクロール連動が完結する環境では、JS を一切通さない。
   メインスレッドが詰まっても線がカクつかない。 */
@supports (animation-timeline: view()) {
  .mo-rule--progress .mo-rule__fill {
    transform: scaleX(0);
    animation: mo-rule-fill linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes mo-rule-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* --- bracket: 折れ線を描く --- */
.mo-rule--bracket {
  inline-size: clamp(4rem, 10vw, 7.5rem);
}

.mo-rule--bracket svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.mo-rule__path {
  /* SVG 側で pathLength="1" を宣言してあるので、実長に関係なく 1 が全長 */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: var(--mo-transition--draw);
  transition-delay: var(--mo-delay, 0ms);
}

:root.js-mo .mo-rule--bracket:not([data-mo-shown]) .mo-rule__path {
  stroke-dashoffset: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mo-rule__fill,
  .mo-rule__path {
    transition: none;
    animation: none;
  }

  .mo-rule--line .mo-rule__fill,
  .mo-rule--progress .mo-rule__fill {
    transform: scaleX(1);
  }

  .mo-rule__path {
    stroke-dashoffset: 0;
  }
}

/* ================================================================
 * WordmarkRail
 * ================================================================ */

.mo-rail {
  --mo-gap: 3rem;
}

.mo-rail__list {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.mo-rail__mark {
  position: relative;
  padding-block: 0.55rem;
  color: var(--mo-ink-soft, #66636c);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  letter-spacing: 0.02em;
  transition: var(--mo-transition--link);
}

.mo-rail__mark::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--mo-rule-weight);
  background: var(--mo-spectrum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: var(--mo-transition--line);
}

@media (hover: hover) and (pointer: fine) {
  .mo-rail__mark:hover {
    color: var(--mo-ink);
  }

  .mo-rail__mark:hover::after {
    transform: scaleX(1);
  }
}

/* ================================================================
 * ScrollType — スクロール連動の巨大タイポ
 * ================================================================ */

.mo-scrolltype {
  overflow: hidden;
  overflow: clip;
  /* 100cqw で「箱の幅」を取れるようにする。
     これが無いと、行と箱の幅の差を CSS だけで出せない */
  container-type: inline-size;
}

.mo-scrolltype__line {
  margin: 0;
  font-size: var(--mo-type-size, clamp(3rem, 11vw, 9rem));
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--mo-ink);
  /*
   * width: max-content が必須。
   * 既定の block のままだと箱幅は親と同じになり、はみ出した内容は
   * 幅に数えられない。その状態で -100% を使うと親の幅を指してしまい、
   * -100% + 100cqw がちょうど 0 になって一切動かなくなる（実際に踏んだ）。
   */
  width: max-content;
  /*
   * 動く量 = 行幅と箱幅の差（＋ 両端のはみ出し）。
   * -100% は行そのものの幅、100cqw は箱の幅。
   * min(0px, …) は「行が箱より短いときは動かさない」ため。
   */
  --mo-sweep: min(0px, calc(-100% + 100cqw - var(--mo-overshoot, 0px) * 2));
  /* JS 経路。--mo-progress は共有 rAF が書く */
  transform: translate3d(
    calc(var(--mo-overshoot, 0px) + var(--mo-sweep) * var(--mo-progress, 0)),
    0,
    0
  );
}

/* 語の区切り。中黒だと全角ボディぶんの空きができて語がバラけるので、
   細いスラッシュを薄く置く */
.mo-scrolltype__sep {
  font-style: normal;
  font-weight: 400;
  opacity: 0.22;
  padding-inline: 0.12em;
}

.mo-scrolltype[data-mo-direction='right'] .mo-scrolltype__line {
  transform: translate3d(
    calc(var(--mo-overshoot, 0px) + var(--mo-sweep) * (1 - var(--mo-progress, 0))),
    0,
    0
  );
}

.mo-scrolltype[data-mo-outline] .mo-scrolltype__line {
  color: transparent;
  -webkit-text-stroke: 1px var(--mo-line);
}

/* ブラウザ側でスクロール連動が完結する環境。JS は一度も走らない */
@supports (animation-timeline: view()) {
  .mo-scrolltype__line {
    animation: mo-scrolltype-run linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .mo-scrolltype[data-mo-direction='right'] .mo-scrolltype__line {
    animation-direction: reverse;
  }
}

@keyframes mo-scrolltype-run {
  from {
    transform: translate3d(var(--mo-overshoot, 0px), 0, 0);
  }
  to {
    transform: translate3d(calc(var(--mo-overshoot, 0px) + var(--mo-sweep)), 0, 0);
  }
}

/* 動きを弱める設定では止める。
   止めた位置は「左端が揃った状態」なので、少なくとも先頭の語は読める */
:root[data-mo-motion='reduce'] .mo-scrolltype__line {
  transform: translate3d(var(--mo-overshoot, 0px), 0, 0);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .mo-scrolltype__line {
    transform: translate3d(var(--mo-overshoot, 0px), 0, 0);
    animation: none;
  }
}

/* ================================================================
 * CountUp — 数値カウント
 * ================================================================ */

.mo-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  /* 桁が変わっても幅が動かない */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mo-count__value {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mo-count__affix {
  font-size: 0.55em;
  font-weight: 700;
  opacity: 0.7;
}

/* ================================================================
 * PointerField — ポインタに反応する面
 * ================================================================ */

.mo-pointer {
  position: relative;
}

.mo-pointer__surface {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: var(--mo-transition--surface);
}

.mo-pointer__content {
  position: relative;
  z-index: 1;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  /*
   * 面にブランドの虹を敷き、ポインタの位置で丸く切り抜く。
   * 単色の光を置くより、この会社の色であることが分かる。
   * 不透明度は 0.14。はっきり見えたら演出になってしまう。
   */
  .mo-pointer[data-mo-glow] .mo-pointer__surface {
    background: var(--mo-spectrum);
    -webkit-mask-image: radial-gradient(
      14rem 14rem at calc(var(--mo-px, 0.5) * 100%) calc(var(--mo-py, 0.5) * 100%),
      #000 0,
      transparent 68%
    );
    mask-image: radial-gradient(
      14rem 14rem at calc(var(--mo-px, 0.5) * 100%) calc(var(--mo-py, 0.5) * 100%),
      #000 0,
      transparent 68%
    );
  }

  .mo-pointer[data-mo-glow]:hover .mo-pointer__surface {
    opacity: 0.14;
  }

  .mo-pointer[data-mo-tilt] {
    perspective: 800px;
  }

  .mo-pointer[data-mo-tilt] .mo-pointer__content {
    transition: var(--mo-transition--tilt);
    will-change: transform;
  }

  .mo-pointer[data-mo-tilt]:hover .mo-pointer__content {
    transform: rotateX(calc((var(--mo-py, 0.5) - 0.5) * var(--mo-tilt, 3deg) * -2))
      rotateY(calc((var(--mo-px, 0.5) - 0.5) * var(--mo-tilt, 3deg) * 2));
  }
}

:root[data-mo-motion='reduce'] .mo-pointer__surface,
:root[data-mo-motion='reduce'] .mo-pointer[data-mo-tilt] .mo-pointer__content {
  opacity: 0;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .mo-pointer__surface {
    display: none;
  }

  .mo-pointer[data-mo-tilt] .mo-pointer__content {
    transform: none;
    transition: none;
  }
}

/* ================================================================
 * MotionToggle — 動きを止めるボタン
 * ================================================================ */

.mo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid currentcolor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  /*
   * 静止時に opacity を下げない。
   * 0.75 を掛けると実測で 4.08:1 になり、WCAG 1.4.3（AA, 4.5:1）を割っていた。
   * 「動きを止める」ためのボタン自身が読みにくいのは本末転倒なので、
   * 控えめさは不透明度ではなく色で作る。
   */
  opacity: 1;
  /* 幅が足りない場所に置かれても文字を折らない。
     折れると縦に伸びて、周りの行の高さまで巻き込んで動く */
  white-space: nowrap;
  transition:
    opacity var(--mo-dur-micro) var(--mo-ease-out),
    background-color var(--mo-dur-micro) var(--mo-ease-out);
}

.mo-toggle:hover,
.mo-toggle:focus-visible {
  border-color: currentcolor;
  background: color-mix(in srgb, currentcolor 10%, transparent);
}

.mo-toggle__mark {
  position: relative;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  flex: none;
}

/* 停止中は■、再生中は▶。色ではなく形で状態を示す */
.mo-toggle__mark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.mo-toggle[aria-pressed='true'] .mo-toggle__mark::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* 指で押す端末では的を大きくする。
   WCAG 2.5.8 の最低 24x24 は満たしているが、実際に押しやすい大きさではない */
@media (pointer: coarse) {
  .mo-toggle {
    min-block-size: 2.75rem;
    padding-inline: 1.1rem;
  }
}

/*
 * JS が動かない環境では押しても何も起きないので見せない。
 *
 * ただし display: none にはしない。
 * JS が起動した瞬間にボタンが「現れる」と、その分だけ周りが動く。
 * 実測（モバイル 390px / CPU 4倍）で CLS 0.16 を1要素で作っていた。
 * visibility なら場所は最初から確保されたままなので、ずれが起きない。
 * 代償として、JS 無効の環境には押せない空白がひとつ残る。
 */
:root:not(.js-mo) .mo-toggle {
  visibility: hidden;
  pointer-events: none;
}

/* ================================================================
 * StickyStory — sticky のストーリー
 * ================================================================ */

.mo-story {
  display: grid;
  gap: 2rem;
}

.mo-story__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-story__step {
  padding-block: clamp(2rem, 8vh, 4.5rem);
  border-block-start: 1px solid var(--mo-line);
}

.mo-story__step:first-child {
  border-block-start: 0;
}

.mo-story__index {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.mo-story__num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mo-accent);
}

.mo-story__stage-label {
  color: var(--mo-ink-soft, #66636c);
}

.mo-story__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
}

.mo-story__body {
  margin: 0;
  max-inline-size: 34rem;
  color: var(--mo-ink-soft, #66636c);
}

/* 今の段だけを濃くする。読んでいる場所が分かる */
:root.js-mo .mo-story__step {
  opacity: 0.45;
  transition: var(--mo-transition--surface);
}

:root.js-mo .mo-story__step[data-mo-current] {
  opacity: 1;
}

.mo-story__stage {
  display: none;
}

.mo-story__panelset {
  position: relative;
  block-size: 100%;
  border: 1px solid var(--mo-line);
  border-radius: var(--radius, 0.5rem);
  background: var(--mo-paper);
  overflow: hidden;
}

.mo-story__eyebrow {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1.25rem;
  z-index: 2;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--mo-ink-soft, #66636c);
}

.mo-story__panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.015);
  transition: var(--mo-transition--swap);
}

.mo-story__panel[data-mo-current] {
  opacity: 1;
  transform: none;
}

/* JS が動かないときは最初の面だけ出す */
:root:not(.js-mo) .mo-story__panel[data-mo-panel='0'] {
  opacity: 1;
  transform: none;
}

.mo-story__panel img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.mo-story__wordset {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  text-align: center;
  padding-inline: 1.5rem;
}

.mo-story__word {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mo-story__detail {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--mo-ink-soft, #66636c);
}

.mo-story__meter {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--mo-rule-weight);
  background: var(--mo-line);
  z-index: 2;
}

.mo-story__meter-fill {
  display: block;
  block-size: 100%;
  background: var(--mo-spectrum);
  transform-origin: left center;
  transform: scaleX(calc((var(--mo-active, 0) + 1) / var(--mo-steps, 1)));
  transition: var(--mo-transition--meter);
}

/*
 * 面を貼り付けるのは、貼り付けても本文が十分読める幅があるときだけ。
 * 狭い画面では素直に縦へ積む。
 */
@media (min-width: 48rem) {
  .mo-story {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .mo-story__stage {
    display: block;
    position: sticky;
    inset-block-start: 15vh;
    block-size: 62vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mo-story__panel,
  .mo-story__meter-fill,
  .mo-story__step {
    transition: none;
  }

  .mo-story__panel {
    transform: none;
  }
}

/* ================================================================
 * MotionPlan — A/B/C 比較の出し分け（preview限定の仕組み）
 *
 * 本番URL向けのビルドでは、採用案以外はそもそも出力されないので
 * このブロックは何にも当たらない。
 * ================================================================ */

/* 既定は隠す。JSが無効でも全案が同時に出てしまう事故を構造的に防ぐ */
.mo-plan {
  display: none;
}

/* 属性が立っていない＝JS無効。そのときは標準案（B）だけを見せる */
:root:not([data-good-motion-plan]) .mo-plan[data-mo-plans~='b'],
:root[data-good-motion-plan='a'] .mo-plan[data-mo-plans~='a'],
:root[data-good-motion-plan='b'] .mo-plan[data-mo-plans~='b'],
:root[data-good-motion-plan='c'] .mo-plan[data-mo-plans~='c'] {
  /* contents にすると、くるみ自体はレイアウトに影響しない */
  display: contents;
}

/* ================================================================
 * MotionPlanSwitcher — preview限定の案切替
 * ================================================================ */

.mp-root {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 60;
  font-size: 0.78rem;
  line-height: 1.35;
}

.mp-root[hidden] {
  display: none;
}

/*
 * hidden 属性の UA 既定（display:none）は、下の display:grid に負ける。
 * これが無いと「既定は畳んでおく」が効かず、パネルが常に開いたままになる
 * （サービス案の切替を狭い画面で確認していて発覚。同じ .mp-panel を使う
 *  サイト全体のMotion案切替にも同じ問題があったため、共有側で直す）。
 */
.mp-panel[hidden] {
  display: none;
}

.mp-panel {
  display: grid;
  gap: 0.5rem;
  inline-size: min(19rem, calc(100vw - 2rem));
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--mo-line);
  border-radius: 0.75rem;
  background: var(--mo-paper);
  box-shadow: 0 12px 32px rgb(27 26 31 / 0.16);
}

.mp-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--mo-ink-soft, #66636c);
}

.mp-options {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  text-align: start;
  cursor: pointer;
}

.mp-option:hover,
.mp-option:focus-visible {
  background: var(--mo-mist, #f4f3f5);
}

.mp-option[aria-pressed='true'] {
  border-color: var(--mo-line);
  background: var(--mo-mist, #f4f3f5);
}

.mp-option[aria-pressed='true'] .mp-key {
  background: var(--mo-spectrum);
  color: var(--mo-ink);
}

.mp-key {
  inline-size: 1.5rem;
  padding-block: 0.1rem;
  border-radius: 0.25rem;
  background: var(--mo-mist, #f4f3f5);
  font-weight: 700;
  font-size: 0.68rem;
  text-align: center;
}

.mp-note {
  display: block;
  color: var(--mo-ink-soft, #66636c);
  font-size: 0.7rem;
}

.mp-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid var(--mo-line);
  font-size: 0.7rem;
}

.mp-close {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.7rem;
  text-decoration: underline;
  cursor: pointer;
}

.mp-toggle-open {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--mo-line);
  border-radius: 999px;
  background: var(--mo-paper);
  box-shadow: 0 6px 18px rgb(27 26 31 / 0.14);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

@media (max-width: 40rem) {
  .mp-root {
    inset-inline: 0.75rem;
    inset-block-end: 0.75rem;
  }

  .mp-panel {
    inline-size: auto;
  }
}

/* ================================================================
 * 実サイトへの適用（good-o.jp 固有のレイアウト）
 *
 * コンポーネント側には手を入れず、置き場所の余白と地色だけをここで決める。
 * 既存の .container / --space-* / --color-* をそのまま使う。
 * ================================================================ */

/* ヘッダー直下の状態帯。ヘッダーの罫と続けて1本の帯に見せる */
.site-notice {
  border-block-end: 1px solid rgb(255 255 255 / 0.12);
}

/* 会社情報: hero の文に埋まっている3要素を大きく取り出す */
.company-stance {
  padding-block: clamp(1.5rem, 5vw, 3rem) 0;
  background: var(--color-paper, #fbfbfa);
}

.company-stance .mo-scrolltype__line {
  /* 見出しではなく引き出しなので、本文より一段淡くする。
     大きさで主張し、濃さでは主張しない */
  color: color-mix(in srgb, var(--color-ink, #1b1a1f) 82%, transparent);
}

/* C案ではもう一段大きく組む。差は大きさだけで、言葉も位置も変えない */
:root[data-good-motion-plan='c'] .company-stance .mo-scrolltype {
  --mo-type-size: clamp(2.75rem, 9vw, 7rem);
}

/* 相談へ進む直前の「扱っているもの」 */
.home-capability,
.page-capability {
  padding-block: clamp(2rem, 5vw, 3.25rem);
  border-block-start: 1px solid var(--color-line, #dedde2);
  background: var(--color-paper, #fbfbfa);
}

.home-capability .eyebrow,
.page-capability .eyebrow {
  margin-bottom: 0.85rem;
}

/*
 * 交差する帯。
 * 節の地色を mist にしてある。紙地の帯（paper）を紙地の上に置くと
 * 帯として見えず、文字が宙に浮いているようにしか読めなかったため。
 * 地を一段落とすと、薄い帯と黒い帯が「2種類の帯」として並ぶ。
 */
.works-crossing {
  background: var(--color-mist, #f4f3f5);
  border-block: 1px solid var(--color-line, #dedde2);
}

@media (max-width: 48rem) {
  /* 狭い画面では交差の重なりが読みにくくなるので、高さを詰めて角度を浅くする */
  .works-crossing {
    --mo-cross-height: 9rem;
  }

  .works-crossing .mo-tape {
    --mo-angle: -2.5deg;
    --mo-tape-height: 9rem;
  }
}

/* フッターの停止トグル。footer-bottom の並びに馴染ませる */
.mo-plan-footer {
  display: none;
}

:root:not([data-good-motion-plan]) .mo-plan-footer[data-mo-plans~='b'],
:root[data-good-motion-plan='a'] .mo-plan-footer[data-mo-plans~='a'],
:root[data-good-motion-plan='b'] .mo-plan-footer[data-mo-plans~='b'],
:root[data-good-motion-plan='c'] .mo-plan-footer[data-mo-plans~='c'] {
  /* ここは contents ではなく通常のボックスにする。
     footer-bottom の flex 配置に1項目として並ぶ必要があるため */
  display: block;
}

.site-footer .mo-toggle {
  /* フッターの地色 #1b1a1f に対して十分な明度を明示的に持たせる
     （フッターの既定色 rgba(255,255,255,.56) を継いだままだと基準を割る） */
  color: rgb(255 255 255 / 0.88);
  border-color: rgb(255 255 255 / 0.4);
}