/*
 * MAKASU AI社員 — 商品ページ（主力LP版）とトップの導線バンドのスタイル。
 *
 * 読み込むページ:
 *   - src/pages/makasu/index.astro（商品ページ本体。service-flow.css も併読）
 *   - src/pages/index.astro（トップの広告面 .mk-ad だけを使う）
 *
 * 方針は service-flow.css / services-showcase.css と同じ:
 *  - 新しい色・書体を持ち込まない。--color-* と、motion-system.css と同値の
 *    トークン（未読込ページ用の fallback 付き）だけで組む。
 *  - public/ の固定名で配信し、_astro のハッシュに影響を与えない。
 *  - ファーストビューは全幅・約100svhの「9.6秒のCM」（.mkx）。1回だけ再生して
 *    最終ポスターで静止する。基底状態＝ポスターなので、JS無効・reduced-motion
 *    では最初から完成画面になる。スキップ／再再生は makasu-hero.js（WCAG 2.2.2）。
 *  - #how の仕事ループ（8秒・.mk-fv--play）も同じ思想（静止＝完成状態）。
 */

:root {
  --mk-spectrum: var(
    --mo-spectrum,
    linear-gradient(90deg, #d7d93e 0%, #4ad7a8 32%, #7f99ce 68%, #d760ae 100%)
  );
  --mk-dur-micro: var(--mo-dur-micro, 160ms);
  --mk-ease-out: var(--mo-ease-out, cubic-bezier(0.22, 0.75, 0.2, 1));
  --mk-fv-cycle: 8s;
  --mkx-t: 12s;
  /* 墨面の上で使う文字色（.section-dark の本文色と同値） */
  --mk-ink-soft-on-dark: #c7d7d3;
}

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

/* ホーム専用CSSにある .text-action と同じ見た目（このページでも同じ所作にする） */
.makasu-page .text-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  color: var(--color-teal, #5d2e54);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.makasu-page .text-action::after {
  content: '→';
}

.makasu-page .text-action:hover {
  text-decoration: underline;
}

/* ================================================================
 * 出現アニメーション
 * polish-home.css の [data-reveal] レシピを、このページに限って再現する。
 * ================================================================ */

.js-motion .makasu-page [data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-distance, 18px));
  transition:
    opacity 520ms var(--mk-ease-out),
    transform 520ms var(--mk-ease-out);
  transition-delay: var(--motion-delay, 0ms);
}

.js-motion .makasu-page [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-motion .makasu-page [data-reveal='heading'] {
  --motion-distance: 22px;
}

/* ================================================================
 * ヘッダーをこのページだけ透明にしてCMへ重ねる
 * （makasu.css はトップも読むため、必ず body.makasu-page で絞る）
 * ================================================================ */

.makasu-page .site-header {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 40;
  border-block-end: 0;
  background: transparent;
}

.makasu-page .site-header .brand span {
  color: var(--color-white, #ffffff);
}

.makasu-page .desktop-nav a {
  color: var(--color-white, #ffffff);
}

.makasu-page .desktop-nav a:hover,
.makasu-page .desktop-nav a[aria-current='page'] {
  color: var(--color-ochre-light, #f6f4de);
}

.makasu-page .site-header :focus-visible {
  outline-color: var(--color-ochre-light, #f6f4de);
}

/* ================================================================
 * ファーストビュー = 9.6秒のCM（.mkx）
 *
 * 基底状態（クラスなし）＝最終ポスター。すべての演出は .mkx-play の間だけ
 * animation-fill-mode: both で走り、100%地点の見た目が基底状態と一致する。
 * 終了後は .mkx-done（見た目は基底状態のまま「もう一度見る」だけが出る）。
 *
 * 絶対配置＋transform/opacityのみで動かし、レイアウトは一切動かさない（CLS 0）。
 *
 * 時間割（12秒）:
 *   0.2-1.5   A1「AIといえば？」
 *   0.85-2.65 A2 吹き出し「話す。」「答える。」（世間のAI認識）
 *   2.55-3.75 A3「それだけじゃない。」
 *   3.6-5.95  B  実務UI6種が画面全体に展開（調べる/仕分ける/集計/比較/つくる/人へ上げる）
 *   5.6-7.35  C 「答えるだけのAIから、仕事を進めるAIへ。」（虹の下線）
 *   7.15-8.6  D  仕事が届く（4種が下書きへ収束）
 *   7.45-10.85    下書きが立ち上がり、行が引かれ、確認印「人が確認」
 *   9.1-10.7  「作業は、AI社員へ。」「判断は、人が。」
 *   10.7-12   ポスターへ収束（使うAIから、任せるAIへ。/ h1 / 価格 / CTA）
 *   0-12      下辺の虹＝進行バー
 *
 * LCP対策: ポスターは再生中も opacity 0.015 で先に描画しておく（墨の上では
 * 見えないが、最大要素の初期ペイントとして計測される）。
 * ================================================================ */

.mkx {
  position: relative;
  overflow: hidden;
  background: var(--color-ink, #1b1a1f);
  color: var(--color-white, #ffffff);
}

/* ごく淡い光。ギラつかせない（不透明度は1桁%） */
.mkx::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 85% -12%, rgb(127 153 206 / 0.13), transparent 65%),
    radial-gradient(40rem 26rem at -8% 112%, rgb(215 217 62 / 0.07), transparent 60%);
}

.mkx-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 7rem 1.5rem 5rem;
}

/* master。iteration/終了検知用（見た目は変えない） */
.mkx-play .mkx-stage {
  animation: mkx-master var(--mkx-t) linear both;
}

@keyframes mkx-master {
  from { opacity: 1; }
  to { opacity: 1; }
}

.mkx-scenes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------------- A: 認識転換 ---------------- */

.mkx-a1,
.mkx-a3,
.mkx-c1,
.mkx-c2 {
  position: absolute;
  inset-inline-start: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--color-white, #ffffff);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
}

.mkx-a1 {
  inset-block-start: 30%;
  font-size: clamp(2rem, 5.4vw, 4.4rem);
}

.mkx-a3 {
  inset-block-start: 50%;
  font-size: clamp(1.85rem, 4.8vw, 3.5rem);
}

.mkx-bub {
  position: absolute;
  margin: 0;
  padding: 0.55em 1em;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 1.4em;
  background: rgb(255 255 255 / 0.08);
  color: var(--color-white, #ffffff);
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.mkx-bub::after {
  content: '';
  position: absolute;
  inset-block-end: -0.4rem;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-block-start: 0;
  border-inline-start: 0;
  background: inherit;
  transform: rotate(45deg);
}

.mkx-bub--l {
  inset-block-start: 46%;
  inset-inline-start: 39%;
}

.mkx-bub--l::after {
  inset-inline-start: 1.4rem;
}

.mkx-bub--r {
  inset-block-start: 58%;
  inset-inline-start: 61%;
}

.mkx-bub--r::after {
  inset-inline-end: 1.4rem;
}

.mkx-play .mkx-a1 {
  animation: mkx-center-through 1.3s var(--mk-ease-out) 0.2s both;
}

.mkx-play .mkx-bub--l {
  animation: mkx-bub 1.8s var(--mk-ease-out) 0.85s both;
}

.mkx-play .mkx-bub--r {
  animation: mkx-bub 1.5s var(--mk-ease-out) 1.15s both;
}

.mkx-play .mkx-a3 {
  animation: mkx-punch 1.2s var(--mk-ease-out) 2.55s both;
}

/* 中央で現れて上へ抜ける（translateは-50%基準を保つ） */
@keyframes mkx-center-through {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 1.1rem)); }
  25%, 76% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 1.2rem)); }
}

@keyframes mkx-bub {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  20%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}

@keyframes mkx-punch {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
  22%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 1.1rem)) scale(1); }
}

/* ---------------- B: 実務UIの断片 ---------------- */

.mkx-frag {
  position: absolute;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 0.5rem;
  background: var(--color-white, #ffffff);
  color: var(--color-ink, #1b1a1f);
  transform: translate(-50%, -50%) rotate(var(--fr, 0deg));
  opacity: 0;
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.6);
}

.mkx-frag svg {
  grid-row: 1 / span 2;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  color: var(--color-ochre, #68720f);
}

.mkx-frag__verb {
  font-size: clamp(0.92rem, 1.6vw, 1.1rem);
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.mkx-frag__note {
  color: var(--color-ink-soft, #66636c);
  font-size: clamp(0.66rem, 1.1vw, 0.76rem);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

/* 位置・角度・出番（狭い画面では下の media query で組み替える） */
.mkx-frag:nth-of-type(1) { --fr: -3deg; inset-block-start: 20%; inset-inline-start: 16%; }
.mkx-frag:nth-of-type(2) { --fr: 2deg; inset-block-start: 18%; inset-inline-start: 73%; }
.mkx-frag:nth-of-type(3) { --fr: 3deg; inset-block-start: 47%; inset-inline-start: 11%; }
.mkx-frag:nth-of-type(4) { --fr: -2deg; inset-block-start: 45%; inset-inline-start: 87%; }
.mkx-frag:nth-of-type(5) { --fr: 2deg; inset-block-start: 75%; inset-inline-start: 21%; }
.mkx-frag:nth-of-type(6) { --fr: -3deg; inset-block-start: 73%; inset-inline-start: 77%; }

.mkx-play .mkx-frag { animation: mkx-frag var(--mk-ease-out) both; }
.mkx-play .mkx-frag:nth-of-type(1) { animation-delay: 3.6s; animation-duration: 2.35s; }
.mkx-play .mkx-frag:nth-of-type(2) { animation-delay: 3.75s; animation-duration: 2.2s; }
.mkx-play .mkx-frag:nth-of-type(3) { animation-delay: 3.9s; animation-duration: 2.05s; }
.mkx-play .mkx-frag:nth-of-type(4) { animation-delay: 4.05s; animation-duration: 1.9s; }
.mkx-play .mkx-frag:nth-of-type(5) { animation-delay: 4.2s; animation-duration: 1.75s; }
.mkx-play .mkx-frag:nth-of-type(6) { animation-delay: 4.35s; animation-duration: 1.6s; }

@keyframes mkx-frag {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 0.9rem)) rotate(var(--fr, 0deg)) scale(0.9); }
  16%, 82% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--fr, 0deg)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 0.7rem)) rotate(var(--fr, 0deg)) scale(0.97); }
}

/* ---------------- C: 主軸コピー ---------------- */

.mkx-underline {
  padding-block-end: 0.06em;
  background-image: var(--mk-spectrum);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.12em;
}

@keyframes mkx-underline-draw {
  from { background-size: 0% 0.12em; }
  to { background-size: 100% 0.12em; }
}

.mkx-c1 {
  inset-block-start: 44%;
  color: rgb(255 255 255 / 0.86);
  font-size: clamp(1.3rem, 3vw, 2.35rem);
}

.mkx-c2 {
  inset-block-start: 54%;
  font-size: clamp(1.9rem, 4.9vw, 3.9rem);
}

.mkx-play .mkx-c1 {
  animation: mkx-center-through 1.75s var(--mk-ease-out) 5.6s both;
}

.mkx-play .mkx-c2 {
  animation: mkx-center-through 1.55s var(--mk-ease-out) 5.8s both;
}

.mkx-play .mkx-c2 .mkx-underline {
  animation: mkx-underline-draw 0.7s var(--mk-ease-out) 6.15s both;
}

/* ---------------- D: 仕事が届く ---------------- */

.mkx-work {
  position: absolute;
  inset-block-start: var(--wt, 40%);
  inset-inline-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 0.45rem;
  background: rgb(43 42 48 / 0.92);
  color: var(--color-white, #ffffff);
  font-size: clamp(0.72rem, 1.15vw, 0.88rem);
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / 0.6);
}

.mkx-work svg {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--mk-ink-soft-on-dark);
}

.mkx-play .mkx-work {
  animation: mkx-work 1.45s var(--mk-ease-out) var(--wd, 7.15s) both;
}

@keyframes mkx-work {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--wx0, -50vw)), -50%) rotate(var(--wr, 0deg));
  }
  20% { opacity: 1; }
  46%, 62% {
    opacity: 1;
    transform: translate(calc(-50% + var(--wx1, 0vw)), -50%) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
  }
}

/* ---------------- S2→S3: 下書きと確認印 ---------------- */

.mkx-doc {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: min(29rem, 86vw);
  padding: 1.15rem 1.25rem 1.3rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
  color: var(--color-ink, #1b1a1f);
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow: 0 34px 70px -36px rgb(0 0 0 / 0.65);
}

.mkx-doc::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--mk-spectrum);
}

.mkx-doc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  color: var(--color-ink, #1b1a1f);
}

.mkx-doc__brand {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mkx-doc__tag {
  flex: none;
  padding: 0.08rem 0.55rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 999px;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.7rem;
  font-weight: 700;
}

.mkx-doc__lines {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 0.4rem;
  background: var(--color-paper, #fbfbfa);
}

.mkx-doc__lines span {
  display: block;
  inline-size: var(--mkx-line-w, 80%);
  block-size: 0.5rem;
  border-radius: 999px;
  background: var(--color-line, #dedde2);
  transform-origin: left center;
}

.mkx-stamp {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.7rem;
  border: 2px solid var(--color-ochre, #68720f);
  border-radius: 999px;
  background: var(--color-ochre-light, #f6f4de);
  color: var(--color-ochre, #68720f);
  font-size: 0.78rem;
  font-weight: 800;
  transform: rotate(6deg);
}

.mkx-stamp svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

.mkx-play .mkx-doc {
  animation: mkx-doc 3.4s var(--mk-ease-out) 7.45s both;
}

.mkx-play .mkx-doc__lines span {
  animation: mkx-doc-line 0.45s var(--mk-ease-out) both;
}

.mkx-play .mkx-doc__lines span:nth-child(1) { animation-delay: 7.85s; }
.mkx-play .mkx-doc__lines span:nth-child(2) { animation-delay: 8.1s; }
.mkx-play .mkx-doc__lines span:nth-child(3) { animation-delay: 8.35s; }
.mkx-play .mkx-doc__lines span:nth-child(4) { animation-delay: 8.6s; }

.mkx-play .mkx-stamp {
  animation: mkx-stamp 1.7s var(--mk-ease-out) 8.95s both;
}

@keyframes mkx-doc {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
  10%, 90% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
}

@keyframes mkx-doc-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes mkx-stamp {
  0% { opacity: 0; transform: rotate(6deg) scale(0.5); }
  20% { opacity: 1; transform: rotate(6deg) scale(1.1); }
  32%, 100% { opacity: 1; transform: rotate(6deg) scale(1); }
}

/* ---------------- 役割の宣言 ---------------- */

.mkx-s3 {
  position: absolute;
  margin: 0;
  color: rgb(255 255 255 / 0.9);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
}

.mkx-s3 strong {
  padding-block-end: 0.05em;
  color: var(--color-white, #ffffff);
  background-image: var(--mk-spectrum);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.1em;
}

.mkx-s3a {
  inset-block-start: 50%;
  inset-inline-start: max(4vw, 1rem);
  transform: translateY(-50%);
}

.mkx-s3b {
  inset-block-start: 50%;
  inset-inline-end: max(4vw, 1rem);
  transform: translateY(-50%);
}

.mkx-play .mkx-s3a {
  animation: mkx-s3 1.6s var(--mk-ease-out) 9.1s both;
}

.mkx-play .mkx-s3b {
  animation: mkx-s3 1.5s var(--mk-ease-out) 9.3s both;
}

@keyframes mkx-s3 {
  0% { opacity: 0; transform: translateY(calc(-50% + 1rem)); }
  18%, 76% { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(calc(-50% - 1rem)); }
}

/* ---------------- S4: ポスター（基底状態そのもの） ---------------- */

.mkx-poster {
  position: relative;
  max-inline-size: 60rem;
  text-align: center;
}

.mkx-play .mkx-poster {
  pointer-events: none;
}

.mkx-poster__brand {
  margin: 0 0 1rem;
  color: var(--mk-ink-soft-on-dark);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.mkx-poster__brand span {
  letter-spacing: 0.02em;
  font-weight: 700;
}

.mkx-poster__kicker {
  margin: 0 0 1rem;
  color: rgb(255 255 255 / 0.93);
  font-size: clamp(1.02rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mkx-poster h1 {
  max-width: none;
  margin: 0 0 1.1rem;
  color: var(--color-white, #ffffff);
  font-size: clamp(2.3rem, 5vw, 4.1rem);
  line-height: 1.16;
}

.mkx-poster__facts {
  margin: 0 0 1.7rem;
  color: var(--mk-ink-soft-on-dark);
  font-size: clamp(0.9rem, 1.7vw, 1.02rem);
  font-weight: 700;
}

.mkx-poster__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.6rem;
}

.mkx-poster__sub {
  color: var(--color-white, #ffffff);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.mkx-poster__sub:hover,
.mkx-poster__sub:focus-visible {
  color: var(--color-ochre-light, #f6f4de);
}

.mkx-play .mkx-poster h1 { animation: mkx-in-lcp 0.75s var(--mk-ease-out) 10.7s both; }
.mkx-play .mkx-poster__kicker { animation: mkx-in 0.7s var(--mk-ease-out) 10.95s both; }
.mkx-play .mkx-poster__brand { animation: mkx-in 0.7s var(--mk-ease-out) 11.1s both; }
.mkx-play .mkx-poster__facts { animation: mkx-in 0.7s var(--mk-ease-out) 11.25s both; }
.mkx-play .mkx-poster__actions { animation: mkx-in 0.7s var(--mk-ease-out) 11.4s both; }

@keyframes mkx-in {
  from { opacity: 0; transform: translateY(1.1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* h1だけは再生中も opacity 0.006 で先に描画しておく。
   LCP計測は非ゼロの不透明度で初期ペイント扱いになり、肉眼では見えない。 */
@keyframes mkx-in-lcp {
  from { opacity: 0.006; transform: translateY(1.1rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- 進行バー・操作・下への合図 ---------------- */

.mkx-progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: var(--mk-spectrum);
  transform-origin: left center;
}

.mkx-play .mkx-progress {
  animation: mkx-progress var(--mkx-t) linear both;
}

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

.mkx-cue {
  position: absolute;
  inset-block-end: 1.1rem;
  inset-inline-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transform: translateX(-50%);
  color: var(--mk-ink-soft-on-dark);
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.mkx-cue:hover,
.mkx-cue:focus-visible {
  color: var(--color-white, #ffffff);
}

.mkx-cue__arrow {
  display: inline-block;
}

.mkx-play .mkx-cue {
  animation: mkx-in 0.6s var(--mk-ease-out) 11.7s both;
}

.mkx-done .mkx-cue__arrow {
  animation: mkx-bob 1.8s ease-in-out infinite;
}

@keyframes mkx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.25rem); }
}

.mkx-skip,
.mkx-replay {
  position: absolute;
  inset-block-end: 1.1rem;
  inset-inline-end: 1.2rem;
  display: none;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.25rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 999px;
  background: rgb(27 26 31 / 0.6);
  color: var(--mk-ink-soft-on-dark);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.mkx-skip:hover,
.mkx-skip:focus-visible,
.mkx-replay:hover,
.mkx-replay:focus-visible {
  border-color: var(--color-white, #ffffff);
  color: var(--color-white, #ffffff);
}

.mkx-play .mkx-skip {
  display: inline-flex;
}

.mkx-done .mkx-replay {
  display: inline-flex;
}

.mkx :focus-visible {
  outline-color: var(--color-ochre-light, #f6f4de);
}

/* CTA（ポスター用の白）。共通レシピ .gd-cta を一回り強く */
.mk-cta-strong {
  min-height: 3.4rem;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
}

.mk-cta-strong--light {
  border-color: var(--color-white, #ffffff);
  background: var(--color-white, #ffffff);
  color: var(--color-ink, #1b1a1f);
}

.mk-cta-strong--light:hover,
.mk-cta-strong--light:focus-visible {
  background: var(--color-white, #ffffff);
  color: var(--color-ink, #1b1a1f);
}

/* CMの中間シーンが狭い画面で重ならないように */
@media (max-width: 56rem) {
  .mkx-a1 { inset-block-start: 31%; }
  .mkx-bub--l { inset-inline-start: 34%; }
  .mkx-bub--r { inset-inline-start: 66%; }
  .mkx-c1 { inset-block-start: 43%; }
  .mkx-c2 { inset-block-start: 52%; }

  .mkx-frag {
    padding: 0.55rem 0.7rem;
    column-gap: 0.45rem;
  }

  .mkx-frag svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }

  .mkx-frag:nth-of-type(1) { inset-block-start: 17%; inset-inline-start: 27%; }
  .mkx-frag:nth-of-type(2) { inset-block-start: 26%; inset-inline-start: 71%; }
  .mkx-frag:nth-of-type(3) { inset-block-start: 44%; inset-inline-start: 24%; }
  .mkx-frag:nth-of-type(4) { inset-block-start: 56%; inset-inline-start: 74%; }
  .mkx-frag:nth-of-type(5) { inset-block-start: 73%; inset-inline-start: 28%; }
  .mkx-frag:nth-of-type(6) { inset-block-start: 82%; inset-inline-start: 68%; }

  .mkx-s3a,
  .mkx-s3b {
    inset-inline: 0;
    text-align: center;
    transform: none;
  }

  .mkx-s3a {
    inset-block-start: 16%;
  }

  .mkx-s3b {
    inset-block-start: auto;
    inset-block-end: 16%;
  }

  .mkx-play .mkx-s3a,
  .mkx-play .mkx-s3b {
    animation-name: mkx-s3-center;
  }

  /* 下段中央の「働き方を見る」と重ならないよう、操作は一段上げる */
  .mkx-skip,
  .mkx-replay {
    inset-block-end: 3.6rem;
  }
}

@keyframes mkx-s3-center {
  0% { opacity: 0; transform: translateY(1rem); }
  18%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-1rem); }
}

/* ================================================================
 * #how: 仕事ループ（旧FVの説明用ステージ）
 * ================================================================ */

.mk-how .mk-fv {
  max-width: 56rem;
}

/* ---------------- 仕事ループの舞台 ---------------- */

.mk-fv {
  position: relative;
}

.mk-fv__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 1rem;
  align-items: center;
}

/* master アニメーション。iteration イベントの発生源（見た目は変えない） */
.mk-fv--play .mk-fv__stage {
  animation: mk-master var(--mk-fv-cycle) linear infinite;
}

@keyframes mk-master {
  from { opacity: 1; }
  to { opacity: 1; }
}

.mk-fv__intray {
  display: grid;
  gap: 0.5rem;
  align-content: center;
}

.mk-fv__intray-label {
  margin: 0 0 0.1rem;
  color: var(--mk-ink-soft-on-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.mk-fv__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.26);
  border-radius: 0.45rem;
  background: rgb(255 255 255 / 0.07);
  color: var(--color-white, #ffffff);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
}

.mk-fv__chip svg {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--mk-ink-soft-on-dark);
}

.mk-fv__card {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.45rem 1.4rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
  color: var(--color-ink, #1b1a1f);
  box-shadow: 0 30px 60px -34px rgb(0 0 0 / 0.55);
}

.mk-fv__card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--mk-spectrum);
}

.mk-fv__card .mk-fv__card-head {
  color: var(--color-ink, #1b1a1f);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.mk-fv__brand {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mk-fv__tag {
  flex: none;
  padding: 0.08rem 0.55rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 999px;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.7rem;
  font-weight: 700;
}

.mk-fv__card .mk-fv__role-label {
  margin-bottom: 0.1rem;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mk-fv__card .mk-fv__role {
  margin-bottom: 0.9rem;
  color: var(--color-ink, #1b1a1f);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.mk-fv__doc {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.95rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 0.4rem;
  background: var(--color-paper, #fbfbfa);
}

.mk-fv__line {
  display: block;
  inline-size: var(--mk-line-w, 80%);
  block-size: 0.5rem;
  border-radius: 999px;
  background: var(--color-line, #dedde2);
  transform-origin: left center;
}

.mk-fv__status {
  position: relative;
  min-height: 1.4rem;
  margin: 0;
}

.mk-fv__status-ai,
.mk-fv__status-done {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 750;
}

.mk-fv__status-ai {
  color: var(--color-ink-soft, #66636c);
  /* 静止状態は「完成」を見せるので、作成中の行は隠しておく */
  opacity: 0;
}

.mk-fv__status-ai svg {
  inline-size: 0.95rem;
  block-size: 0.95rem;
}

.mk-fv__status-done {
  color: var(--color-ochre, #68720f);
}

/* 確認印。静止状態でも押されている */
.mk-fv__stamp {
  position: absolute;
  inset-block-end: 3.35rem;
  inset-inline-end: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.7rem;
  border: 2px solid var(--color-ochre, #68720f);
  border-radius: 999px;
  background: var(--color-ochre-light, #f6f4de);
  color: var(--color-ochre, #68720f);
  font-size: 0.78rem;
  font-weight: 800;
  transform: rotate(6deg);
}

.mk-fv__stamp svg {
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

/* ---------------- 4段階の道しるべ ---------------- */

.mk-fv__phases {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 1.1rem 0 0;
  padding: 0 0 0.75rem;
  list-style: none;
}

/* 道そのもの。静止時も「受け取る→…→完了」の全体像が見える */
.mk-fv__phases::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--mk-spectrum);
  opacity: 0.5;
}

/* いま進んでいる区間。再生中だけ道の上を進む */
.mk-fv--play .mk-fv__phases::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -1px;
  inline-size: 25%;
  block-size: 4px;
  border-radius: 999px;
  background: var(--color-white, #ffffff);
  animation: mk-ph-indicator var(--mk-fv-cycle) var(--mk-ease-out) infinite;
}

.mk-fv__phase {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  color: var(--mk-ink-soft-on-dark);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.4;
}

.mk-fv__phase small {
  font-size: 0.68rem;
  font-weight: 800;
  opacity: 0.75;
}

.mk-fv__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  margin-block-start: 0.5rem;
  padding: 0.2rem 0.8rem;
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 999px;
  background: transparent;
  color: var(--mk-ink-soft-on-dark);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 750;
  cursor: pointer;
}

.mk-fv__toggle:hover,
.mk-fv__toggle:focus-visible {
  border-color: var(--color-white, #ffffff);
  color: var(--color-white, #ffffff);
}

/* ---------------- ループの時間割（8秒） ----------------
 *  0-15%   仕事が届く（チップが3枚、順に入ってくる）
 * 15-48%   AI社員が下書き（行が引かれていく）
 * 48-62%   人が確認（印が押される）
 * 62-88%   完了（送付できる状態）
 * 88-100%  片づけて次の仕事へ（JSが担当業務を差し替える）
 * ---------------------------------------------------- */

.mk-fv--play .mk-fv__chip[data-mk-chip='0'] {
  animation: mk-chip-1 var(--mk-fv-cycle) var(--mk-ease-out) infinite;
}

.mk-fv--play .mk-fv__chip[data-mk-chip='1'] {
  animation: mk-chip-2 var(--mk-fv-cycle) var(--mk-ease-out) infinite;
}

.mk-fv--play .mk-fv__chip[data-mk-chip='2'] {
  animation: mk-chip-3 var(--mk-fv-cycle) var(--mk-ease-out) infinite;
}

@keyframes mk-chip-1 {
  0% { opacity: 0; transform: translateX(-2rem); }
  2% { opacity: 0; transform: translateX(-2rem); }
  7%, 88% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(0.6rem); }
}

@keyframes mk-chip-2 {
  0%, 5% { opacity: 0; transform: translateX(-2rem); }
  10%, 88% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(0.6rem); }
}

@keyframes mk-chip-3 {
  0%, 8% { opacity: 0; transform: translateX(-2rem); }
  13%, 88% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(0.6rem); }
}

.mk-fv--play .mk-fv__line {
  animation: mk-line var(--mk-fv-cycle) var(--mk-ease-out) infinite;
  animation-delay: calc(var(--mk-line-i, 0) * 0ms); /* 遅延はkeyframes内で持つ */
}

/* 行ごとの開始をずらすため、開始%を --mk-line-i から算出できないので4本とも
   同じkeyframesで「自分の番まで0のまま待つ」。番手は nth-child で振る */
@keyframes mk-line {
  0%, 16% { transform: scaleX(0); }
  24%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

.mk-fv--play .mk-fv__line:nth-child(2) {
  animation-name: mk-line-2;
}

.mk-fv--play .mk-fv__line:nth-child(3) {
  animation-name: mk-line-3;
}

.mk-fv--play .mk-fv__line:nth-child(4) {
  animation-name: mk-line-4;
}

@keyframes mk-line-2 {
  0%, 22% { transform: scaleX(0); }
  30%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

@keyframes mk-line-3 {
  0%, 28% { transform: scaleX(0); }
  36%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

@keyframes mk-line-4 {
  0%, 34% { transform: scaleX(0); }
  42%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

.mk-fv--play .mk-fv__status-ai {
  animation: mk-status-ai var(--mk-fv-cycle) linear infinite;
}

@keyframes mk-status-ai {
  0%, 14% { opacity: 0; }
  17%, 45% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.mk-fv--play .mk-fv__status-done {
  animation: mk-status-done var(--mk-fv-cycle) linear infinite;
}

@keyframes mk-status-done {
  0%, 59% { opacity: 0; }
  63%, 88% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

.mk-fv--play .mk-fv__stamp {
  animation: mk-stamp var(--mk-fv-cycle) var(--mk-ease-out) infinite;
}

@keyframes mk-stamp {
  0%, 48% { opacity: 0; transform: rotate(6deg) scale(0.55); }
  52% { opacity: 1; transform: rotate(6deg) scale(1.08); }
  54%, 88% { opacity: 1; transform: rotate(6deg) scale(1); }
  93%, 100% { opacity: 0; transform: rotate(6deg) scale(1); }
}

.mk-fv--play .mk-fv__card {
  animation: mk-card var(--mk-fv-cycle) var(--mk-ease-out) infinite;
}

@keyframes mk-card {
  0%, 59% { transform: translateY(0); }
  63%, 90% { transform: translateY(-4px); }
  97%, 100% { transform: translateY(0); }
}

@keyframes mk-ph-indicator {
  0%, 13% { transform: translateX(0); }
  15%, 46% { transform: translateX(100%); }
  48%, 60% { transform: translateX(200%); }
  62%, 94% { transform: translateX(300%); }
  100% { transform: translateX(0); }
}

/* ================================================================
 * AI社員とは（3つの原則）
 * ================================================================ */

.mk-about__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: start;
  margin-bottom: var(--space-6, 3rem);
}

.mk-about__intro > p {
  max-width: var(--reading, 44rem);
  margin: 0;
}

.mk-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mk-principle {
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
}

.mk-principle h3 {
  margin-bottom: 0.6rem;
  font-size: 1.12rem;
}

.mk-principle h3::before {
  content: '';
  display: block;
  inline-size: 2rem;
  block-size: 3px;
  margin-block-end: 0.85rem;
  background: var(--mk-spectrum);
}

.mk-principle p {
  margin: 0;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.92rem;
}

/* ================================================================
 * 見出しの2分割レイアウト（共通）
 * ================================================================ */

.mk-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: start;
  margin-bottom: var(--space-6, 3rem);
}

.mk-heading-split > p {
  max-width: var(--reading, 44rem);
  margin: 0;
}

/* 2分割見出しは列幅が狭い。語の途中で折れないよう一段だけ絞る */
.mk-heading-split h2,
.mk-about__intro h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.45rem);
}

/* ================================================================
 * 例えばこんな仕事
 * ================================================================ */

.mk-job-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-job-grid li {
  display: flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
}

/* ================================================================
 * Before / After（改善イメージ・想定例）
 * ================================================================ */

.mk-ba__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.mk-ba__col {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.5rem 1.35rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
}

.mk-ba__col--after {
  position: relative;
  overflow: hidden;
  border-color: var(--color-ink, #1b1a1f);
}

.mk-ba__col--after::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--mk-spectrum);
}

.mk-ba__col-head {
  color: var(--color-ink, #1b1a1f);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.98rem;
  font-weight: 800;
}

.mk-ba__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--color-ink-soft, #66636c);
  border-radius: 999px;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.mk-ba__badge--after {
  border-color: var(--color-ink, #1b1a1f);
  background: var(--color-ink, #1b1a1f);
  color: var(--color-paper, #fbfbfa);
}

.mk-ba__steps {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

.mk-ba__steps li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.6;
}

.mk-ba__who {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.3rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.mk-ba__who--human {
  border: 1px solid var(--color-ochre, #68720f);
  background: var(--color-ochre-light, #f6f4de);
  color: var(--color-ochre, #68720f);
}

.mk-ba__who--ai {
  border: 1px solid var(--color-ink, #1b1a1f);
  background: var(--color-ink, #1b1a1f);
  color: var(--color-paper, #fbfbfa);
}

.mk-ba__time {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: auto 0 0;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--color-line, #dedde2);
}

.mk-ba__time span {
  color: var(--color-ink-soft, #66636c);
  font-size: 0.78rem;
  font-weight: 750;
}

.mk-ba__time strong {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.mk-ba__time small {
  color: var(--color-ink-soft, #66636c);
  font-size: 0.78rem;
  font-weight: 700;
}

.mk-ba__col--after .mk-ba__time strong {
  color: var(--color-ochre, #68720f);
}

.mk-ba__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding-inline: 0.4rem;
}

.mk-ba__arrow-label {
  color: var(--color-ink-soft, #66636c);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  writing-mode: vertical-rl;
}

.mk-ba__arrow-glyph {
  font-size: 1.5rem;
  font-weight: 800;
}

.mk-ba__note {
  max-width: var(--reading, 44rem);
  margin: var(--space-4, 1.5rem) 0 0;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.9rem;
}

/* ================================================================
 * 3ヶ月のタイムライン
 * 上に1本の道を引き、月の点を打つ。1ヶ月目の終わりに旗が立つ。
 * ================================================================ */

.mk-tl {
  position: relative;
}

.mk-tl__months {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 道。月ラベルの高さに合わせて引く */
.mk-tl__months::before {
  content: '';
  position: absolute;
  inset-inline: 0.35rem;
  inset-block-start: 0.5rem;
  block-size: 2px;
  background: var(--color-line, #dedde2);
}

/* 道の進み。節が見えたら左から引かれる */
.mk-tl__months::after {
  content: '';
  position: absolute;
  inset-inline: 0.35rem;
  inset-block-start: 0.5rem;
  block-size: 2px;
  background: var(--mk-spectrum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mo-dur-draw, 900ms) var(--mk-ease-out) 180ms;
}

.js-motion .makasu-page .mk-tl.is-visible .mk-tl__months::after,
:root:not(.js-motion) .mk-tl__months::after {
  transform: scaleX(1);
}

.mk-tl__month-label {
  color: var(--color-ink, #1b1a1f);
  position: relative;
  display: block;
  margin: 0 0 0.9rem;
  padding-block-start: 1.35rem;
  font-size: 0.98rem;
  font-weight: 800;
}

.mk-tl__phase {
  display: inline-block;
  margin-inline-end: 0.45rem;
  padding: 0.02rem 0.5rem;
  border: 1px solid var(--color-ink, #1b1a1f);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  vertical-align: 0.12em;
}

/* フェーズ名（見つける／つくる／使えるまで）が何をする期間かの1行 */
.mk-tl__sub {
  display: block;
  margin-block-start: 0.3rem;
  color: var(--color-ink, #1b1a1f);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.6;
}

.mk-tl__period {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.76rem;
  font-weight: 700;
}

.mk-tl__note {
  max-width: var(--reading, 44rem);
  margin: var(--space-4, 1.5rem) 0 0;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.88rem;
}

.mk-tl__dot {
  position: absolute;
  inset-block-start: 0.18rem;
  inset-inline-start: 0;
  inline-size: 0.7rem;
  block-size: 0.7rem;
  border: 2px solid var(--color-ink, #1b1a1f);
  border-radius: 50%;
  background: var(--color-paper, #fbfbfa);
}

.mk-tl__nodes {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-tl__node {
  padding: 1.05rem 1.2rem 1.1rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
}

.mk-tl__node h3 {
  margin-bottom: 0.3rem;
  font-size: 1.02rem;
}

.mk-tl__node p {
  margin: 0;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.88rem;
  line-height: 1.65;
}

.mk-tl__node--milestone {
  position: relative;
  overflow: hidden;
  border-color: var(--color-ochre, #68720f);
  background: var(--color-ochre-light, #f6f4de);
}

.mk-tl__node--milestone::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--mk-spectrum);
}

.mk-tl__node--milestone p {
  color: var(--color-ink, #1b1a1f);
}

.mk-tl__flag {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.5rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--color-ochre, #68720f);
  color: var(--color-ochre-light, #f6f4de);
  font-size: 0.72rem;
  font-weight: 800;
}

.mk-tl__node--goal {
  border-color: var(--color-ink, #1b1a1f);
  background: var(--color-ink, #1b1a1f);
}

.mk-tl__node--goal h3 {
  color: var(--color-white, #ffffff);
}

.mk-tl__node--goal p {
  color: var(--mk-ink-soft-on-dark);
}

/* ================================================================
 * 料金（墨の台帳）
 * ================================================================ */

.mk-price__head {
  max-width: 46rem;
  margin-bottom: var(--space-5, 2rem);
}

.mk-price__head p:last-child {
  margin-bottom: 0;
}

@media (min-width: 64rem) {
  .mk-price > .container {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3.5rem;
    align-items: start;
  }

  .mk-price__head {
    margin-bottom: 0;
  }

  .mk-price__card {
    max-width: none;
  }
}

.mk-price__card {
  max-width: 46rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius, 0.5rem);
  background: rgb(255 255 255 / 0.04);
}

.mk-price__term {
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.mk-price__main {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding-block-end: 1.1rem;
  border-block-end: 1px solid rgb(255 255 255 / 0.18);
}

.mk-price__amount {
  color: var(--color-white, #ffffff);
  font-size: clamp(3rem, 8vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.mk-price__unit {
  color: var(--color-white, #ffffff);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 750;
}

.mk-price__tax {
  margin-inline-start: 0.5rem;
  color: var(--mk-ink-soft-on-dark);
  font-size: 0.85rem;
  font-weight: 700;
}

.mk-price__ledger {
  margin: 0 0 1.6rem;
}

.mk-price__ledger > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 0.9rem;
  padding-block: 0.55rem;
}

.mk-price__ledger > div + div {
  border-block-start: 1px solid rgb(255 255 255 / 0.14);
}

.mk-price__ledger dt {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--mk-ink-soft-on-dark);
}

.mk-price__ledger dd {
  margin: 0;
  color: var(--color-white, #ffffff);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 「進め方」行の補足。工程の正本は #flow なので、ここは限定だけを添える */
.mk-price__flow-note {
  display: block;
  margin-block-start: 0.1rem;
  color: var(--mk-ink-soft-on-dark);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.7;
}

.mk-price__ledger dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mk-price__ledger dd a:hover,
.mk-price__ledger dd a:focus-visible {
  color: var(--color-ochre-light, #f6f4de);
}

.mk-price :focus-visible {
  outline-color: var(--color-ochre-light, #f6f4de);
}

.mk-price__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ================================================================
 * 含まれるもの / 含まれないもの
 * ================================================================ */

.mk-scope-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: var(--space-5, 2rem);
}

.mk-scope-col {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
}

.mk-scope-col h3 {
  margin-bottom: 1rem;
  font-size: 1.08rem;
}

.mk-scope-col .check-list {
  margin: 0;
}

.mk-scope-col--out ul {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.mk-scope-col--out ul li {
  position: relative;
  padding-inline-start: 1.4rem;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.95rem;
}

.mk-scope-col--out ul li::before {
  content: '—';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-ink-soft, #66636c);
}

.mk-scope-note {
  margin: 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--color-line, #dedde2);
  font-size: 0.9rem;
}

.mk-costs {
  max-width: none;
}

.mk-costs p:first-child {
  margin-bottom: 0.4rem;
}

/* ================================================================
 * AIと人間の役割 / 情報の扱い
 * ================================================================ */

/* 仕事が流れる1枚図 */
.mk-role-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0 0 var(--space-5, 2rem);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.mk-role-flow__node {
  position: relative;
  padding: 1.15rem 1.25rem 1.2rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
}

.mk-role-flow__node:not(:last-child)::after {
  content: '→';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -1.55rem;
  transform: translateY(-50%);
  color: var(--color-ink-soft, #66636c);
  font-size: 1.15rem;
  font-weight: 800;
}

.mk-role-flow__node--ai {
  position: relative;
  overflow: visible;
  border-color: var(--color-ink, #1b1a1f);
}

.mk-role-flow__node--human {
  border-color: var(--color-ochre, #68720f);
  background: var(--color-ochre-light, #f6f4de);
}

.mk-role-flow__who {
  margin: 0 0 0.5rem;
}

.mk-role-flow__what {
  margin: 0 0 0.25rem;
  color: var(--color-ink, #1b1a1f);
  font-size: 0.98rem;
  font-weight: 800;
}

.mk-role-flow__desc {
  margin: 0;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.82rem;
  line-height: 1.6;
}

.mk-role-flow__node--human .mk-role-flow__desc {
  color: var(--color-ink, #1b1a1f);
}

.mk-roles-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: var(--space-5, 2rem);
}

.mk-role-col {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
}

.mk-role-col h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-size: 1.02rem;
}

.mk-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.7rem;
  border: 1px solid var(--color-ink, #1b1a1f);
  border-radius: 999px;
  background: var(--color-ochre-light, #f6f4de);
  font-size: 0.88rem;
  font-weight: 800;
}

.mk-role-badge--ai {
  background: var(--color-ink, #1b1a1f);
  color: var(--color-paper, #fbfbfa);
}

.mk-role-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.mk-role-col ul li {
  position: relative;
  padding-inline-start: 1.2rem;
  font-size: 0.95rem;
}

.mk-role-col ul li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 0.55rem;
  block-size: 2px;
  background: var(--color-ink-soft, #66636c);
}

.mk-data {
  max-width: 52rem;
}

.mk-data h3 {
  margin-bottom: 0.75rem;
  font-size: 1.08rem;
}

.mk-data .check-list {
  margin: 0;
}

/* ================================================================
 * 対応地域・提供者
 * ================================================================ */

.mk-area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: var(--space-5, 2rem);
}

.mk-area-card {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
}

.mk-area-card__region {
  margin-bottom: 0.35rem;
  color: var(--color-ink, #1b1a1f);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mk-area-card__mode {
  color: var(--color-ink, #1b1a1f);
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.8rem;
  padding: 0.12rem 0.7rem;
  border: 1px solid var(--color-ink, #1b1a1f);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
}

.mk-area-card p:last-child {
  margin: 0;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.93rem;
}

.mk-provider {
  max-width: var(--reading, 44rem);
  margin: 0;
  padding-block-start: var(--space-4, 1.5rem);
  border-block-start: 1px solid var(--color-line, #dedde2);
  color: var(--color-ink-soft, #66636c);
  font-size: 0.93rem;
}

.mk-provider .text-action {
  margin-inline-start: 0.4rem;
}

/* FAQ は global の .faq-list を使う。幅だけ本文向けに絞る */
.mk-faq-list {
  max-width: 52rem;
}

/* ================================================================
 * トップページの広告面（.mk-ad）
 *
 * 「直す・つなぐ・つくる」の直後に置く4つ目の選択肢。セクションの帯ではなく、
 * 紙面の上に1枚だけ貼られた広告として組む: 墨のプレート＋虹の罫＋実務UIカード。
 * プレートの中身は /makasu/ のファーストビューと同じ語彙なので、
 * クリックするとこの1枚が全画面に開く、という関係に見える。
 *
 * 右側の実演は [data-reveal].is-visible を起点に1回だけ流れる。
 * 基底状態＝再生後の完成形（JS無効・reduced-motion でも情報は全部見える）。
 * ================================================================ */

.mk-ad {
  padding-block: clamp(3rem, 5.2vw, 4.35rem);
  background: var(--color-paper, #fbfbfa);
}

/* 墨の面ではサイト既定の violet のフォーカス輪郭が沈むので、/makasu/ と同じ明色にする */
.mk-ad__plate :focus-visible {
  outline-color: var(--color-ochre-light, #f6f4de);
}

.mk-ad__plate {
  position: relative;
  overflow: hidden;
  padding: clamp(1.55rem, 2.8vw, 2.4rem) clamp(1.25rem, 3.2vw, 3rem) clamp(1.75rem, 2.8vw, 2.4rem);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-ink, #1b1a1f);
  box-shadow: 0 34px 74px -46px rgb(27 26 31 / 0.7);
}

/* プレートの天は虹の罫。/makasu/ の下書きカードと同じ合図 */
.mk-ad__plate::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--mk-spectrum);
}

/* ごく淡い光。.mkx と同じ配合で、面が真っ黒に沈まないようにする */
.mk-ad__plate::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(32rem 21rem at 88% -20%, rgb(127 153 206 / 0.17), transparent 66%),
    radial-gradient(28rem 19rem at -6% 118%, rgb(215 217 62 / 0.08), transparent 62%);
}

/* ---------------- 上部の見出し行（誌面のランニングヘッド） ---------------- */

.mk-ad__masthead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.mk-ad__brand {
  margin: 0;
  color: var(--mk-ink-soft-on-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.mk-ad__kicker {
  margin: 0;
  color: rgb(255 255 255 / 0.93);
  font-size: clamp(0.9rem, 1.4vw, 1.06rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ---------------- 本体 ---------------- */

/*
 * 広い画面: 左にコピーとCTA、右に実演（実演は2列目を縦に貫く）。
 * 3行目の 1fr が、実演がコピーより高いぶんの余りを引き受けるので、
 * CTAは本文のすぐ下に残る。
 */
.mk-ad__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(1.8rem, 3.4vw, 3rem);
  row-gap: 0;
}

.mk-ad__copy {
  grid-area: 1 / 1 / 2 / 2;
}

.mk-ad__stage {
  grid-area: 1 / 2 / 4 / 3;
  align-self: start;
}

.mk-ad__actions {
  grid-area: 2 / 1 / 3 / 2;
  align-self: start;
}

.mk-ad h2 {
  max-width: none;
  margin: 0 0 0.95rem;
  color: var(--color-white, #ffffff);
  font-size: clamp(2.3rem, 5.2vw, 4.55rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

.mk-ad__lead {
  max-width: 26rem;
  margin: 0 0 1.5rem;
  color: var(--mk-ink-soft-on-dark);
  font-size: clamp(0.86rem, 1.1vw, 0.95rem);
  font-weight: 500;
  line-height: 1.9;
}

.mk-ad__actions {
  margin: 0;
}

.mk-ad__actions .gd-cta {
  display: inline-flex;
  gap: 1.1rem;
}

/* 期間・費用と対応エリアは、広告の下端に引く一行の仕様欄として持つ */
.mk-ad__spec {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 3rem;
  margin: clamp(1.5rem, 2.4vw, 1.9rem) 0 0;
  padding-block-start: 0.95rem;
  border-block-start: 1px solid rgb(255 255 255 / 0.14);
}

.mk-ad__spec > div {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}

.mk-ad__spec dt {
  color: rgb(255 255 255 / 0.5);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.mk-ad__spec dd {
  margin: 0;
  color: var(--color-white, #ffffff);
  font-size: clamp(0.8rem, 1.05vw, 0.88rem);
  font-weight: 700;
}

/* ================================================================
 * 3ステップ帯（.mk-steps）
 * ----------------------------------------------------------------
 * 「見つける → つくる → 使えるまで」＝導入の3ヶ月。トップの広告面（墨面）と
 * /makasu/ のFV直下（紙面）で同じ形を共有し、同じ商品の同じ約束だと示す。
 *
 * 丸数字も工程をつなぐ線も使わない。トップではこの直後に「相談の流れ」
 * （丸数字1〜5＋線）が、/makasu/ には仕事ループ（4段階＋線）があるため、
 * それらと造形を被らせない。共有するのは各セル上の短い虹の罫だけにする。
 * ================================================================ */

.mk-steps {
  --mk-steps-rule: rgb(255 255 255 / 0.14);
  --mk-steps-rule-soft: rgb(255 255 255 / 0.1);
  --mk-steps-name: var(--color-white, #ffffff);
  --mk-steps-note: var(--mk-ink-soft-on-dark);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--mk-steps-rule);
}

.mk-steps > li {
  padding-block: 0.75rem;
  padding-inline-start: 0.95rem;
  border-inline-start: 1px solid var(--mk-steps-rule);
}

.mk-steps > li:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.mk-steps__mark {
  display: block;
  inline-size: 1.6rem;
  block-size: 2px;
  margin-block-end: 0.5rem;
  border-radius: 1px;
  background: var(--mk-spectrum);
}

.mk-steps__name {
  display: block;
  color: var(--mk-steps-name);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.mk-steps__note {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--mk-steps-note);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.75;
}

/*
 * 紙面の上に置く版（/makasu/ のFV直下）。
 * 墨のCM → 紙の帯 → 墨の #how に挟まれる細い一段なので、墨面の中に置く版より
 * 一回り大きく組む。ここが小さいとページ全体の「工程の宣言」に見えない。
 */
.mk-steps--paper {
  --mk-steps-rule: rgb(27 26 31 / 0.2);
  --mk-steps-rule-soft: rgb(27 26 31 / 0.12);
  --mk-steps-name: var(--color-ink, #1b1a1f);
  --mk-steps-note: var(--color-ink-soft, #66636c);
}

.mk-steps--paper > li {
  padding-block: 0.9rem;
}

.mk-steps--paper .mk-steps__mark {
  inline-size: 2.1rem;
  block-size: 3px;
  margin-block-end: 0.6rem;
}

.mk-steps--paper .mk-steps__name {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}

.mk-steps--paper .mk-steps__note {
  font-size: 0.81rem;
}

/* 広告面の中では、リードとCTAの間に置く */
.mk-ad__copy .mk-steps {
  margin-block: 0 1.35rem;
}

/* ---------------- /makasu/ FV直下の帯 ---------------- */

.mk-intro-steps {
  padding-block: clamp(1.9rem, 3.6vw, 3rem);
  background: var(--color-paper, #fbfbfa);
}

.mk-intro-steps__inner {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.5rem 3rem;
  align-items: start;
}

/*
 * 見出しとして読ませる大きさにする。上に短い墨の罫を置き、右のセル群の
 * 名前（見つける／つくる／使えるまで）と同じ高さから書き出す。
 */
.mk-intro-steps__label {
  position: relative;
  margin: 0;
  padding-block-start: 1.7rem;
  color: var(--color-ink, #1b1a1f);
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.45;
}

.mk-intro-steps__label::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 3rem;
  block-size: 4px;
  border-radius: 1px;
  background: var(--color-teal, #5d2e54);
}

/* ---------------- 右側の実演 ---------------- */

/* 実演は中の要素が順に立ち上がるので、器そのものの出現は短くしておく */
.mk-ad__stage {
  --motion-distance: 0px;
  max-inline-size: 27rem;
}

.js-motion .mk-ad__stage {
  transition-duration: 320ms;
}

.mk-ad__stage-label {
  margin: 0 0 0.6rem;
  color: rgb(255 255 255 / 0.5);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.mk-ad__jobs {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.36rem;
  margin: 0 0 0.95rem;
  padding: 0;
  list-style: none;
}

.mk-ad__job {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.68rem 0.44rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 0.4rem;
  background: rgb(255 255 255 / 0.05);
  color: rgb(255 255 255 / 0.62);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.mk-ad__job svg {
  flex: none;
  inline-size: 0.9rem;
  block-size: 0.9rem;
}

/* 選ばれた1つ。虹の罫が下辺に引かれ、下の下書きカードと対応する */
.mk-ad__job--pick {
  border-color: rgb(255 255 255 / 0.42);
  background: rgb(255 255 255 / 0.11);
  color: var(--color-white, #ffffff);
}

.mk-ad__job--pick::after {
  content: '';
  position: absolute;
  inset-inline: -1px;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--mk-spectrum);
  transform-origin: left center;
}

/* AI社員がつくった下書き。/makasu/ の .mkx-doc と同じ組み方 */
.mk-ad__doc {
  position: relative;
  overflow: hidden;
  padding: 0.85rem 0.95rem 1.45rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: var(--radius, 0.5rem);
  background: var(--color-white, #ffffff);
  color: var(--color-ink, #1b1a1f);
  box-shadow: 0 26px 54px -34px rgb(0 0 0 / 0.66);
}

.mk-ad__doc::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 3px;
  background: var(--mk-spectrum);
}

.mk-ad__doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
  color: var(--color-ink, #1b1a1f);
}

.mk-ad__doc-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.mk-ad__doc-tag {
  flex: none;
  padding: 0.06rem 0.55rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 999px;
  color: var(--color-ink-soft, #66636c);
  font-size: 0.68rem;
  font-weight: 700;
}

.mk-ad__doc-lines {
  display: grid;
  gap: 0.48rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid var(--color-line, #dedde2);
  border-radius: 0.4rem;
  background: var(--color-paper, #fbfbfa);
}

.mk-ad__doc-lines span {
  display: block;
  inline-size: var(--w, 80%);
  block-size: 0.45rem;
  border-radius: 999px;
  background: var(--color-line, #dedde2);
  transform-origin: left center;
}

.mk-ad__stamp {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.26rem 0.6rem;
  border: 2px solid var(--color-ochre, #68720f);
  border-radius: 999px;
  background: var(--color-ochre-light, #f6f4de);
  color: var(--color-ochre, #68720f);
  font-size: 0.7rem;
  font-weight: 800;
  transform: rotate(6deg);
}

.mk-ad__stamp svg {
  inline-size: 0.85rem;
  block-size: 0.85rem;
}

.mk-ad__note {
  margin: 0.6rem 0 0;
  color: rgb(255 255 255 / 0.5);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.7;
}

/* ---------------- 実演の再生（1回だけ） ----------------
 * 仕事の候補が出そろう → 1つが選ばれる → AI社員が下書きをつくる →
 * 人が確認印を押す。ここまでで約1.7秒。
 *
 * 「動かす側」を no-preference と :not(.motion-reduced) で囲って構造的に止める。
 * 後から animation:none で打ち消す形にすると、詳細度でこちらが勝ってしまう。
 * .motion-reduced は ?motion=reduce でも付くので、メディアクエリだけでは足りない。
 */

@media (prefers-reduced-motion: no-preference) {
  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__job {
    animation: mk-ad-rise 0.42s var(--mk-ease-out) both;
  }

  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__job:nth-child(1) { animation-delay: 0.14s; }
  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__job:nth-child(2) { animation-delay: 0.22s; }
  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__job:nth-child(3) { animation-delay: 0.3s; }

  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__job--pick::after {
    animation: mk-ad-rule 0.38s var(--mk-ease-out) 0.62s both;
  }

  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__doc {
    animation: mk-ad-rise 0.48s var(--mk-ease-out) 0.78s both;
  }

  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__doc-lines span {
    animation: mk-ad-rule 0.3s var(--mk-ease-out) both;
  }

  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__doc-lines span:nth-child(1) { animation-delay: 1.02s; }
  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__doc-lines span:nth-child(2) { animation-delay: 1.1s; }
  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__doc-lines span:nth-child(3) { animation-delay: 1.18s; }

  .js-motion:not(.motion-reduced) .mk-ad__stage.is-visible .mk-ad__stamp {
    animation: mk-ad-stamp 0.38s var(--mk-ease-out) 1.32s both;
  }
}

@keyframes mk-ad-rise {
  from { opacity: 0; transform: translateY(0.7rem); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes mk-ad-stamp {
  from { opacity: 0; transform: rotate(6deg) scale(1.3); }
  to { opacity: 1; transform: rotate(6deg) scale(1); }
}

/* ================================================================
 * レスポンシブ
 * ================================================================ */

@media (max-width: 72rem) {
  .mk-role-flow {
    gap: 1.6rem;
  }

  .mk-role-flow__node:not(:last-child)::after {
    inset-inline-end: -1.35rem;
    font-size: 1rem;
  }
}

@media (max-width: 66rem) {
  .mk-job-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-tl__months {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  /* 縦積みでは上の道を消し、左の縦の道に切り替える */
  .mk-tl__months::before,
  .mk-tl__months::after {
    inset-inline: auto;
    inset-inline-start: 0.28rem;
    inset-block: 0.5rem 0.5rem;
    inline-size: 2px;
    block-size: auto;
    transform-origin: top center;
  }

  .mk-tl__months::after {
    transform: scaleY(0);
  }

  .js-motion .makasu-page .mk-tl.is-visible .mk-tl__months::after,
  :root:not(.js-motion) .mk-tl__months::after {
    transform: scaleY(1);
  }

  .mk-tl__month {
    padding-inline-start: 1.6rem;
  }

  .mk-tl__month-label {
    padding-block-start: 0;
  }

  .mk-tl__dot {
    inset-inline-start: -1.6rem;
    inset-block-start: 0.28rem;
  }

  .mk-role-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.9rem;
  }

  .mk-role-flow__node:not(:last-child)::after {
    content: '↓';
    inset-block-start: auto;
    inset-block-end: -1.65rem;
    inset-inline-end: auto;
    inset-inline-start: 1.1rem;
    transform: none;
  }
}

@media (max-width: 56rem) {
  .mk-about__intro,
  .mk-heading-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .mk-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-scope-grid,
  .mk-roles-grid,
  .mk-area-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-ba__board {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-ba__arrow {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-block: 0.2rem;
  }

  .mk-ba__arrow-label {
    writing-mode: horizontal-tb;
  }

  .mk-ba__arrow-glyph {
    transform: rotate(90deg);
  }

  /* 狭い画面は1列。見出し → 実演 → CTA の順に読ませる */
  .mk-ad__body {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .mk-ad__copy {
    order: 1;
  }

  /* 1列では実演も幅いっぱいに（grid配置の align-self を打ち消す） */
  .mk-ad__stage {
    order: 2;
    align-self: stretch;
  }

  .mk-ad__actions {
    order: 3;
  }

  .mk-ad h2 {
    font-size: clamp(2.2rem, 6.4vw, 3.1rem);
  }

  .mk-ad__lead {
    max-width: 34rem;
    margin-bottom: 0;
  }

  .mk-ad__stage {
    max-inline-size: none;
  }

  /*
   * 縦積み。ここで3行を積み上げると広告面が一気に伸びるので、狭い画面では
   * 1ステップ＝1行の台帳組みに切り替える（罫 → 名前 → 補足を同じ行に流す）。
   * 補足は 12rem を切ると自然に次行へ落ちる。
   */
  .mk-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-steps > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.55rem;
    padding-block: 0.5rem;
    padding-inline-start: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--mk-steps-rule-soft);
  }

  .mk-steps > li:first-child {
    border-block-start: 0;
  }

  .mk-steps__mark {
    align-self: center;
    inline-size: 1rem;
    margin-block-end: 0;
  }

  .mk-steps__name {
    flex: 0 0 auto;
    font-size: 0.92rem;
  }

  .mk-steps__note {
    flex: 1 1 12rem;
    margin-block-start: 0;
    font-size: 0.75rem;
    line-height: 1.7;
  }

  /* 狭い画面ではリードの margin-bottom が 0 になるので、こちらで間を取る */
  .mk-ad__copy .mk-steps {
    margin-block: 1.35rem 0;
  }

  .mk-intro-steps__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  /* 1列では見出しが上に来るので、セルの名前へ揃える必要がない */
  .mk-intro-steps__label {
    padding-block-start: 0.75rem;
  }

  .mk-steps--paper > li {
    padding-block: 0.6rem;
  }

  /* 紙面版は罫と本文が一回り大きいので、1行に収まるよう狭い画面だけ詰める */
  .mk-steps--paper .mk-steps__mark {
    inline-size: 1.35rem;
    block-size: 3px;
  }

  .mk-steps--paper .mk-steps__note {
    font-size: 0.78rem;
  }
}

@media (max-width: 40rem) {
  .mk-ad__plate {
    padding-inline: 1.1rem;
  }

  .mk-ad__masthead {
    gap: 0.3rem;
  }

  .mk-ad__spec {
    gap: 0.75rem;
  }

  .mk-ad__spec > div {
    flex-direction: column;
    gap: 0.15rem;
  }

  .mk-ad__job {
    font-size: 0.73rem;
  }

  .mk-fv__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .mk-fv__intray {
    grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start;
    gap: 0.4rem;
  }

  .mk-fv__intray-label {
    grid-column: 1 / -1;
  }

  .mk-fv__chip {
    padding: 0.4rem 0.55rem;
    font-size: 0.72rem;
  }

  .mk-fv__chip svg {
    inline-size: 0.85rem;
    block-size: 0.85rem;
  }

  .mk-fv__stamp {
    inset-block-end: 3.1rem;
    inset-inline-end: 0.8rem;
  }

  .mk-fv__phase {
    flex-direction: column;
    gap: 0.1rem;
  }

  .mk-cta-strong {
    inline-size: 100%;
    justify-content: space-between;
  }

  .mkx-poster__actions .mk-cta-strong {
    inline-size: auto;
    justify-content: center;
    gap: 0.6rem;
  }

  .mk-price__ledger > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .mk-statement__line > span {
    display: block;
  }

  .mk-statement__strong {
    inline-size: fit-content;
  }
}

@media (max-width: 30rem) {
  .mk-job-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-job-grid li {
    min-height: 0;
  }
}

/* ================================================================
 * 動きを弱める設定
 * [data-reveal] とタイムラインの線は即時表示。FVループは makasu-hero.js が
 * 自動再生を止める（ボタンからの明示的な再生は妨げない）。
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .mkx-done .mkx-cue__arrow {
    animation: none;
  }

  .js-motion .makasu-page [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mk-tl__months::after {
    transition: none;
  }
}

.motion-reduced .makasu-page [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-reduced .mkx-done .mkx-cue__arrow {
  animation: none;
}

.motion-reduced .makasu-page .mk-tl__months::after {
  transition: none;
  transform: scaleX(1);
}

@media (max-width: 66rem) {
  .motion-reduced .makasu-page .mk-tl__months::after {
    transform: scaleY(1);
  }
}