/* ==========================================================================
   Recruit TOP 専用 — Marketing Platform の管理画面UIモック（.fwd-mp）
   採用トップ（/recruit/）だけが読み込む。Sales / Creative / Engineer では
   使わないため、共通基盤の forward.css から切り出した（#233 / #198）。
   ⚠️ ルート直下の assets/css/top.css は**コーポレートTOP**用の別ファイル。
      取り違えないこと。こちらは採用トップ用。
   ⚠️ 中身は forward.css から**そのまま移しただけ**。宣言・順序・値・
      メディアクエリは1文字も変えていない（#233 は移動のみ。CSS の改良は別 Issue）。
   ⚠️ 読み込み順は forward.css → top.css。forward.css が Recruit 共通基盤、
      こちらが採用トップ固有。切り出し前と同じ cascade 順になる。
   ========================================================================== */

/* ------------------------------------------------------------
   MARKETING PLATFORM（.fwd-mp）— 自社SaaS管理画面のUIモック
   実際の管理画面（白・ライトグレー基調）へ寄せた採用ページ用のモック。
   ⚠️ 画像は使わない。HTML / CSS / SVG だけで描く（幅で構成が変わるため、
      1枚のスクリーンショットを縮小する方式は採らない）。
   ⚠️ 外側は採用ページの余白・スケールに合わせ、内側は管理画面本来の
      白基調を保つ（Recruitのgrainは内部へ重ねない）。
   ⚠️ 配色はこのブロック限定のローカル変数。プロダクトUIとして読ませる
      ためのもので、外へは漏らさない。
   ⚠️ 操作できないモックなので frame ごと aria-hidden。文字は画像化せず
      HTML text のまま持ち、内容は直下の figcaption が説明する。
   段階：
     1024px以上  … サイドバー展開（ロゴ＋店舗＋メニュー）
     700〜1023px … サイドバーをアイコンレールへ、店舗は上部バーへ
     699px以下   … サイドバーなし。上部バー＋クイックメニュー＋カード
------------------------------------------------------------ */
.fwd-mp {
  --mp-bg: #f5f7fa;
  --mp-surface: #fff;
  --mp-line: #e6eaf0;
  --mp-text: #1f2933;
  --mp-sub: #5a6779;
  --mp-faint: #606d7f;
  --mp-accent-a: #4c5fd7;
  --mp-accent-b: #5c9cf5;
  --mp-accent-line: #12a08c;
  --mp-up: #0a7f5f;
  --mp-down: #c93a6b;
  margin: 3.5rem 0 0;
}
.fwd-mp__frame {
  display: flex;
  background: var(--mp-bg);
  border: 1px solid var(--mp-line);
  border-radius: 4px;
  box-shadow: 0 30px 70px -30px rgba(11, 31, 58, 0.35);
  overflow: hidden;
  color: var(--mp-text);
}

/* --- サイドバー ------------------------------------------------ */
.fwd-mp__side {
  flex: none;
  width: 13.5rem;
  padding: 1.1rem 0.9rem 1.4rem;
  background: var(--mp-surface);
  border-right: 1px solid var(--mp-line);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.fwd-mp__brand {
  display: flex;
  align-items: center;
  padding-left: 0.25rem;
}
/* 正規の Marketing Platform ロゴ（lp/mp のインラインSVGと同じパス・同じ色）。
   シンボル＋2行のワードマークが1つの viewBox に入った公式ロックアップなので、
   幅だけ指定して比率はSVGへ任せる。 */
.fwd-mp__logo {
  display: block;
  width: 9.4rem;
  height: auto;
}
/* アイコンレール時に使うシンボルのみの版（同じパスを viewBox で切り出す）。 */
.fwd-mp__logomark {
  display: none;
  width: 1.85rem;
  height: auto;
}
/* <symbol> の置き場。描画されないが、display:none にすると一部ブラウザで
   <use> の解決が不安定になるため、サイズ0で視界から外すだけにする。 */
.fwd-mp__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* 上部バーのロゴ。サイドバーが細くなる幅（1023px以下）から、
   サイドバーの代わりにここで正式ロックアップを見せる。 */
.fwd-mp__toplogo {
  display: none;
  width: 8.6rem;
  height: auto;
}
/* 店舗切替。左端はサイドバーの縁に接する直角、右端だけ大きなRを付けて
   「左から伸びてくるバー」に見せる。グラデーションは深いBLUEから
   CYAN寄りへ一続きに流し、2色に割れて見えないようにする。
   ⚠️ 白文字が乗るのは左〜中央なので、その範囲は白との比が 4.5:1 を
      下回らない明度に抑えている（明るいCYANは文字が終わる右側だけ）。 */
.fwd-mp__store {
  position: relative;
  display: flex;
  align-items: center;
  /* サイドバーの左padding分だけ外へ出して、左端を縁に密着させる */
  margin-left: -0.9rem;
  padding: 0.62rem 2rem 0.62rem 1.15rem;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(100deg, #3e4edc 0%, #4466d5 30%, #4d7cca 55%, #5e95cd 75%, #76b1da 90%, #8cc6e9 100%);
  color: #fff;
}
.fwd-mp__store-name {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.fwd-mp__store-caret {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  transform: translateY(-50%);
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fwd-mp__nav {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.fwd-mp__navitem {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mp-sub);
}
.fwd-mp__navitem.is-active {
  background: #eef1f6;
  color: var(--mp-text);
}
/* 下位項目。アイコンを持たず、親のインデントに合わせて一段下げる。 */
.fwd-mp__navitem--sub {
  padding: 0.34rem 0.7rem 0.34rem 2.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mp-faint);
}
.fwd-mp__navicon {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- メイン ---------------------------------------------------- */
.fwd-mp__main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.6rem 1.7rem;
}
.fwd-mp__topbar {
  display: none;
}
.fwd-mp__label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--mp-faint);
  margin: 0 0 0.55rem;
}
.fwd-mp__quick {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.fwd-mp__quickitem {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mp-sub);
  white-space: nowrap;
}
.fwd-mp__quickicon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--mp-faint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fwd-mp__quickitem:first-child .fwd-mp__quickicon {
  fill: var(--mp-faint);
  stroke: none;
}
.fwd-mp__section {
  margin: 1.5rem 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--mp-text);
}
.fwd-mp__card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
}

/* --- サマリー4指標 --------------------------------------------- */
.fwd-mp__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--mp-line);
}
.fwd-mp__kpi-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mp-sub);
}
.fwd-mp__kpi-tag {
  flex: none;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #eef1f6;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--mp-sub);
}
.fwd-mp__kpi-value {
  margin: 0.3rem 0 0;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mp-text);
  font-variant-numeric: tabular-nums;
}
.fwd-mp__kpi-unit {
  margin-left: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--mp-sub);
}
.fwd-mp__kpi-delta {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--mp-faint);
}
.fwd-mp__kpi-delta span {
  font-weight: 800;
}
.fwd-mp__kpi-delta.is-up span {
  color: var(--mp-up);
}
.fwd-mp__kpi-delta.is-down span {
  color: var(--mp-down);
}

/* --- グラフ（棒＝CSS / 折れ線＝SVG） ---------------------------- */
.fwd-mp__chart {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  margin-top: 1.1rem;
  height: 12.5rem;
}
/* 目盛りは等間隔ではない（左＝75000/40000/20000/0、右＝1000/750/500/250/0）。
   ラベルは実際の高さへ絶対配置して、点線グリッド・棒の位置と必ず合わせる。 */
.fwd-mp__axis {
  position: relative;
  flex: none;
  width: 2.5rem;
  font-size: 0.6rem;
  color: var(--mp-faint);
  font-variant-numeric: tabular-nums;
}
.fwd-mp__axis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
.fwd-mp__axis--r {
  width: 2.1rem;
}
.fwd-mp__axis--r span {
  right: auto;
  left: 0;
}
.fwd-mp__axis--l span:nth-child(1) { top: 0; }
.fwd-mp__axis--l span:nth-child(2) { top: 25%; }
.fwd-mp__axis--l span:nth-child(3) { top: 50%; }
.fwd-mp__axis--l span:nth-child(4) { top: 75%; }
.fwd-mp__axis--l span:nth-child(5) { top: 100%; }
.fwd-mp__axis--r span:nth-child(1) { top: 0; }
.fwd-mp__axis--r span:nth-child(2) { top: 25%; }
.fwd-mp__axis--r span:nth-child(3) { top: 50%; }
.fwd-mp__axis--r span:nth-child(4) { top: 75%; }
.fwd-mp__axis--r span:nth-child(5) { top: 100%; }
.fwd-mp__plot {
  position: relative;
  flex: 1;
  min-width: 0;
}
.fwd-mp__grid {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dotted #d9dfe7;
}
.fwd-mp__grid:nth-child(1) { top: 0; }
.fwd-mp__grid:nth-child(2) { top: 25%; }
.fwd-mp__grid:nth-child(3) { top: 50%; }
.fwd-mp__grid:nth-child(4) { top: 75%; }
.fwd-mp__grid:nth-child(5) { top: 100%; }
.fwd-mp__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fwd-mp__line {
  fill: none;
  stroke: var(--mp-accent-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.fwd-mp__line--prev {
  stroke-dasharray: 4 4;
  opacity: 0.85;
}
.fwd-mp__bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 0 0.5rem;
}
.fwd-mp__bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}
.fwd-mp__bar b {
  display: block;
  height: var(--mp-a, 10%);
  background: var(--mp-accent-a);
}
.fwd-mp__bar i {
  display: block;
  height: var(--mp-b, 30%);
  background: var(--mp-accent-b);
}
.fwd-mp__months i {
  display: block;
  font-style: normal;
}
.fwd-mp__months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 0.5rem;
  /* 左右の軸ラベル（幅＋gap）分だけ内側へ寄せて、棒の位置と合わせる */
  margin: 0.45rem 2.7rem 0 3.1rem;
  text-align: center;
  font-size: 0.64rem;
  line-height: 1.35;
  color: var(--mp-sub);
}
.fwd-mp__legend {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--mp-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--mp-sub);
}
.fwd-mp__legenditem {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.fwd-mp__legenditem::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
}
.fwd-mp__legenditem--a::before { background: var(--mp-accent-a); }
.fwd-mp__legenditem--b::before { background: var(--mp-accent-b); }
.fwd-mp__legenditem--line::before,
.fwd-mp__legenditem--prev::before {
  width: 1.1rem;
  height: 0;
  border-radius: 0;
  border-top: 2px solid var(--mp-accent-line);
}
.fwd-mp__legenditem--prev::before {
  border-top-style: dotted;
}

/* --- 注記 ------------------------------------------------------ */
.fwd-mp__caption {
  margin: 1.1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(11, 31, 58, 0.68);
}

/* --- 初回表示の立ち上がり ------------------------------------------
   「実際に動く管理画面」の説得力を足すための、1回だけの控えめな演出。
   forward.js が
     is-anim-ready … 初期状態（棒を潰す / 折れ線を隠す）を作る
     is-animated   … 最終状態へ遷移させる（発火は IntersectionObserver で1回きり）
   を付ける。**どちらのクラスも付かない場合は最終状態のまま**なので、
   JS 無効・IntersectionObserver 非対応・reduce-motion では静止画として出る。
   ⚠️ ループしない。transition なので再生は1回で終わり、再スクロールでも復活しない。
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* 棒は i（予約組数）と b（架電）の積み上げを1本として下から立ち上げる。
     個別に伸ばすと積み上げの意味が崩れるため、棒そのものを scaleY する。 */
  .fwd-mp__bar {
    transform-origin: bottom;
    transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .fwd-mp.is-anim-ready .fwd-mp__bar {
    transform: scaleY(0);
  }
  .fwd-mp.is-animated .fwd-mp__bar {
    transform: none;
  }
  /* 12本に 26ms ずつの時差。全体で 0.29s 程度に収め、波打って見せない。 */
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(1) { transition-delay: 0ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(2) { transition-delay: 26ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(3) { transition-delay: 52ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(4) { transition-delay: 78ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(5) { transition-delay: 104ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(6) { transition-delay: 130ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(7) { transition-delay: 156ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(8) { transition-delay: 182ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(9) { transition-delay: 208ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(10) { transition-delay: 234ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(11) { transition-delay: 260ms; }
  .fwd-mp.is-animated .fwd-mp__bar:nth-child(12) { transition-delay: 286ms; }

  /* 折れ線は SVG 全体を左から見せていく。stroke-dasharray は
     preserveAspectRatio="none" + non-scaling-stroke と相性が悪く、
     長さの単位がずれるため使わない（clip-path なら拡大率に依存しない）。 */
  .fwd-mp__lines {
    transition: clip-path 900ms cubic-bezier(0.33, 0.78, 0.42, 1) 200ms;
  }
  .fwd-mp.is-anim-ready .fwd-mp__lines {
    clip-path: inset(0 100% 0 0);
  }
  .fwd-mp.is-animated .fwd-mp__lines {
    clip-path: inset(0 0 0 0);
  }
  /* 前年線は本線より一拍あとに、うっすら現れる程度にとどめる。 */
  .fwd-mp__line--prev {
    transition: opacity 620ms ease 640ms;
  }
  .fwd-mp.is-anim-ready .fwd-mp__line--prev {
    opacity: 0;
  }
  /* ベース値（0.85）へ戻す。is-anim-ready は外さない運用なので、
     同じ詳細度で上書きしないと前年線が出たまま消える。 */
  .fwd-mp.is-animated .fwd-mp__line--prev {
    opacity: 0.85;
  }
}

/* --- 700〜1023px：サイドバーをアイコンレールへ ------------------- */
@media (max-width: 1023px) {
  .fwd-mp__side {
    width: 3.9rem;
    padding: 1rem 0.5rem 1.2rem;
    align-items: center;
    gap: 0.9rem;
  }
  .fwd-mp__logo,
  .fwd-mp__store,
  .fwd-mp__navlabel,
  .fwd-mp__navitem--sub {
    display: none;
  }
  .fwd-mp__logomark {
    display: block;
  }
  .fwd-mp__brand {
    padding-left: 0;
  }
  .fwd-mp__nav {
    align-items: center;
    gap: 0.35rem;
    width: 100%;
  }
  .fwd-mp__navitem {
    justify-content: center;
    padding: 0.5rem;
    width: 2.4rem;
  }
  .fwd-mp__navicon {
    width: 1.15rem;
    height: 1.15rem;
  }
  .fwd-mp__main {
    padding: 0 1.2rem 1.4rem;
  }
  /* 上部バー：1段目に正式ロゴ、2段目に店舗名のグラデーションピル。
     サイドバーがアイコンレールになる幅なので、ブランドの読み取りは
     ここが担う（シンボルだけにしてプロダクト名が消えるのを避ける）。 */
  .fwd-mp__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 -1.2rem 1.2rem;
    padding-top: 1.1rem;
  }
  .fwd-mp__toplogo {
    display: block;
    flex: none;
    margin: 0 1.2rem 0.85rem;
  }
  .fwd-mp__burger {
    display: none;
  }
  .fwd-mp__topstore {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    padding: 0.9rem 2.4rem 0.9rem 1.2rem;
    border-bottom-right-radius: 16px;
    background: linear-gradient(100deg, #3e4edc 0%, #4466d5 30%, #4d7cca 55%, #5e95cd 75%, #76b1da 90%, #8cc6e9 100%);
    color: #fff;
  }
  .fwd-mp__topstore .fwd-mp__store-name {
    font-size: 0.9rem;
  }
  .fwd-mp__quick {
    gap: 0.55rem 1.2rem;
  }
  .fwd-mp__chart {
    height: 11rem;
  }
}

/* --- 699px以下：サイドバーなし ---------------------------------- */
@media (max-width: 699px) {
  .fwd-mp {
    margin-top: 2.5rem;
  }
  .fwd-mp__side {
    display: none;
  }
  .fwd-mp__main {
    padding: 0 1rem 1.2rem;
  }
  /* SPはサイドバーを畳むぶん、ここがプロダクトの顔になる。
     1段目に正式ロゴ（+ メニューアイコン）、2段目に店舗切替のグラデーションピル。
     PCの縮小版に見せないため、PCの「横並びサイドバー」ではなく
     SP専用の縦積みヘッダーとして組む。 */
  .fwd-mp__topbar {
    position: relative;
    gap: 0;
    margin: 0 -1rem 1rem;
    padding: 0.9rem 0;
    background: var(--mp-surface);
    border-bottom: 1px solid var(--mp-line);
  }
  /* ロゴと店舗ピルの間に幅100%・高さ0の行を挟んで確実に改行させる。
     ロゴ自身を flex-basis:100% にすると SVG が行幅まで拡大されるため使えない。 */
  .fwd-mp__topbar::before {
    content: "";
    order: 1;
    flex: 0 0 100%;
    height: 0;
  }
  .fwd-mp__toplogo {
    order: 0;
    flex: none;
    width: 8.2rem;
    margin: 0 1rem 0.8rem;
  }
  .fwd-mp__topstore {
    order: 2;
  }
  .fwd-mp__burger {
    /* 1段目の右端。flexの行送りに影響させたくないので浮かせる */
    position: absolute;
    top: 1.05rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.05rem;
    height: 0.75rem;
  }
  .fwd-mp__burger i {
    display: block;
    height: 1.5px;
    background: var(--mp-sub);
  }
  /* 店舗切替。PC / TB と同じ「左端は直角で縁に密着、右端だけ大きなR」を
     SPでも保つ。左右のpaddingを持たない上部バーに入れることで密着させる。 */
  .fwd-mp__topstore {
    flex: none;
    /* 右の余白を広めに取る。狭いと「Bistro esprot」がグラデーションの
       明るい側まで届き、白文字のコントラストが落ちるため。 */
    padding: 0.6rem 2.6rem 0.6rem 1rem;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(100deg, #3e4edc 0%, #4466d5 30%, #4d7cca 55%, #5e95cd 75%, #76b1da 90%, #8cc6e9 100%);
    color: #fff;
  }
  .fwd-mp__topstore .fwd-mp__store-name {
    font-size: 0.92rem;
  }
  /* クイックメニューはSPでは出さない。狭い画面では反響サマリーが主役で、
     6項目のメニューは情報階層として下げる（見出しごと非表示にし、
     余白も残さない）。PC / TB では従来どおり表示する。 */
  .fwd-mp__label,
  .fwd-mp__quick {
    display: none;
  }
  .fwd-mp__section {
    margin-top: 0;
    font-size: 0.88rem;
  }
  .fwd-mp__card {
    padding: 0.85rem 0.85rem 0.95rem;
  }
  .fwd-mp__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 0.8rem;
    padding-bottom: 0.95rem;
  }
  .fwd-mp__kpi-head {
    font-size: 0.68rem;
    gap: 0.3rem;
  }
  .fwd-mp__kpi-tag {
    font-size: 0.58rem;
    padding: 0.12rem 0.35rem;
  }
  .fwd-mp__kpi-value {
    font-size: 1.15rem;
  }
  .fwd-mp__kpi-delta {
    font-size: 0.62rem;
  }
  .fwd-mp__chart {
    height: 10.2rem;
    margin-top: 1rem;
    gap: 0.35rem;
  }
  .fwd-mp__axis {
    width: 2.35rem;
    font-size: 0.63rem;
  }
  .fwd-mp__axis--r {
    width: 1.7rem;
  }
  .fwd-mp__bars {
    gap: 0 0.22rem;
  }
  .fwd-mp__months {
    margin: 0.4rem 1.95rem 0 2.65rem;
    gap: 0 0.22rem;
    font-size: 0.68rem;
  }
  .fwd-mp__legend {
    margin-top: 0.7rem;
    padding-top: 0.65rem;
    gap: 0.35rem 0.8rem;
    font-size: 0.7rem;
  }
  /* 注記はCASE 02本文と内容が重なり、SPでは縦を伸ばすだけになる。
     見た目からは外すが、モックの意味を伝える文としてDOMには残す。 */
  .fwd-mp__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* --- 400px以下：月ラベルを間引く ------------------------------- */
@media (max-width: 699px) {
  /* 年は落として月だけの1行にする（期間は下の注記とグラフの文脈で足りる） */
  .fwd-mp__months i {
    display: none;
  }
  .fwd-mp__months span {
    white-space: nowrap;
  }
}
@media (max-width: 400px) {
  .fwd-mp__months span:nth-child(even) {
    visibility: hidden;
  }
}