/* =========================================================================
   home.css — イチオシ採用 ホーム（index.html 専用）
   依存: tokens.css → style.css（reset / .rx-btn / ヘッダー / フッター / FAB / .rx-anim）の後に読み込む
   構成（2026-09 リデザイン・営業資料準拠）:
     1 ヒーロー / 2 実績 / 3 課題ナビ / 4 市場の変化 / 5 仕組み(#service) /
     6 改善ルート(#routes) / 7 導入事例 / 8 料金(#plans) / 9 導入の流れ / 10 最終CTA
   ブレークポイント（DEVICE-RULES §3）: SP ≤768 / TAB 769–1024 / PC ≥1025
   ========================================================================= */

.rx-home {
  --hm-serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
  --hm-sans:  'Zen Kaku Gothic Antique', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --hm-num:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --hm-ink:   #0a0a0c;
  --hm-muted: #6e7280;
  --hm-line:  #e7e7eb;
  --hm-alt:   #fafafa;
  --hm-pink-soft: #fdf0f6;
  font-family: var(--hm-sans);
  color: var(--hm-ink);
  /* 全体の .rx-jp-body は keep-all だが、句読点のない和文の長文が1語扱いになり
     「※」だけ残る等の不自然な改行が出るため、ホームの本文は通常改行に戻す */
  word-break: normal;
}
/* 見出しは文節で改行（DEVICE-RULES §16。未対応ブラウザは通常改行＋指定 <br>） */
@supports (word-break: auto-phrase) {
  .rx-home :is(h1, h2, h3) { word-break: auto-phrase; text-wrap: balance; }
}

/* ボタン内の矢印（スプライトは線画のため塗りを消して線で描く） */
.rx-home .rx-btn__chevron {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* アイコンスプライト本体は描画しない（<use> の参照元） */
.rx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- 共通 */
.rx-home__inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
@media (min-width: 1440px) { .rx-home__inner { max-width: 1280px; } }
@media (min-width: 1920px) { .rx-home__inner { max-width: 1400px; } }

.rx-home-accent { color: var(--rx-accent); }

.rx-home-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 指定改行: PCだけ / SPだけ有効 */
.rx-home .rx-br-pc { display: none; }
@media (min-width: 769px) {
  .rx-home .rx-br-pc { display: inline; }
  .rx-home .rx-br-sp { display: none; }
}

/* =========================================================================
   1. ヒーロー（2026-09-28 デザイン案: 左=コピー＋CTA / 右=4カード / 下=3つの特長の帯）
   - 背景は空の水色→白→淡いピンクのグラデーション＋桜のような淡い色面（radial-gradient。画像なし・blurなし）
   - PCは 2カラム（コピー 34% / カード 2×2）。カードは白カード＋薄い影。帯は画面幅いっぱいの半透明白
   - 並びは grid-template-areas で切り替える（PC: コピー→CTA｜カード / SP: コピー→CTA→カード）
   - 採用AIO対策のカードだけ画像を使わず HTML/CSS/SVG で組む（文字がにじまない・幅に追従する）
   - 動きは「少し下から出る」だけ。視差・追従は使わない（prefers-reduced-motion: reduce で静止）
   ========================================================================= */
.rx-home-hero {
  --hero-cw:   1560px;                       /* デザイン案は内容幅が画面の約92%（1672px中1532px）。他セクションより広い */
  --hero-pad:  clamp(16px, 4vw, 60px);
  --hero-pt:   calc(var(--rx-header-h) + clamp(20px, 2.6vw, 36px));   /* 固定ヘッダー分（§13） */
  --hero-navy: var(--hm-navy);               /* 見出し・カード見出しの濃紺（デザイン案の #081651 に近い） */
  --hero-card-r: clamp(16px, 1.6vw, 22px);
  position: relative;
  overflow: clip;                            /* 装飾のはみ出しを切る（横スクロール防止・§8） */
  display: flex;
  flex-direction: column;
  padding-top: var(--hero-pt);
  background: #f4f8fd;
  color: var(--hero-navy);
}

/* --- 背景（文字の下。可読性を落とさない淡さに留める） --- */
.rx-home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  /* デザイン案の背景（空・街並み・桜のぼかし写真）を、スライド①から文字とカードを取り除いて復元した画像。
     images/home/hero-bg.webp（1672×941）。差し替えるときは同じパスへ上書きする */
  background: #f4f8fd url("../images/home/hero-bg.webp") center / cover no-repeat;
}

/* --- レイアウト（既定=縦積み: コピー → CTA → カード） --- */
.rx-home-hero__inner {
  position: relative;
  z-index: var(--z-elevated);
  flex: 1 0 auto;
  width: min(100%, var(--hero-cw));
  margin: 0 auto;
  padding: 0 var(--hero-pad);
  display: grid;
  grid-template-areas: "copy" "actions" "cards";
  gap: clamp(24px, 4vw, 40px);
  align-content: start;
}
.rx-home-hero__copy    { grid-area: copy; min-width: 0; }
.rx-home-hero__actions { grid-area: actions; }
.rx-home-hero__cards   { grid-area: cards; }

/* --- コピー --- */
.rx-home-hero__title {
  font-family: var(--hm-sans);
  font-weight: 900;
  /* 「応募前の」「職場体験を。」= 最長6文字。どの幅でも1行に収まる係数（PCは下の min() で上書き）
     係数を変えるときは 320/375/768/1025/1440/1920 で確認 */
  font-size: clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);   /* 38 → 68px */
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--hero-navy);
}
.rx-home-hero__title-line { display: block; white-space: nowrap; }
.rx-home-hero__title-line--sm { font-size: .7em; margin-bottom: .12em; }    /* 「採用に、」は小さめ（デザイン案は約0.69em） */
.rx-home-hero__mark { color: var(--rx-accent); }
.rx-home-hero__sub {
  margin-top: clamp(8px, .8vw, 12px);
  font-weight: 900;
  font-size: clamp(1.0625rem, .72rem + 1.2vw, 1.75rem);   /* 17 → 28px */
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--hero-navy);
}
.rx-home-hero__lead {
  margin-top: clamp(14px, 1.6vw, 22px);
  max-width: 34em;
  font-weight: 500;
  font-size: clamp(.9375rem, .9rem + .15vw, 1rem);
  line-height: 1.95;
  color: var(--hero-navy);
}
/* デザイン案の指定改行（5行）は、27文字が1行に入る幅（≥1440px・コピー列 432px）でだけ有効にする。
   それ未満は自然改行（指定改行＋自然改行が混ざるとガタつくため） */
.rx-home-hero__lead .rx-br-pc { display: none; }
@media (min-width: 1440px) {
  .rx-home-hero__lead { font-size: 1rem; }                      /* 16px × 27文字 = 432px < 列幅453px */
  .rx-home-hero__lead .rx-br-pc { display: inline; }
}
@media (min-width: 1920px) {
  .rx-home-hero__lead { font-size: 1.0625rem; }                 /* 17px × 27文字 = 459px < 494px */
}

/* --- CTA（既存 .rx-btn を土台に、ヒーロー用の大きさと配色だけ足す） --- */
.rx-home-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
}
.rx-home-hero__btn {
  width: 100%;
  gap: .8em;
  padding: clamp(.95rem, .8rem + .6vw, 1.2rem) clamp(1.1rem, .7rem + .9vw, 2rem);
  font-family: var(--hm-sans);
  font-size: clamp(.9375rem, .88rem + .3vw, 1.125rem);
  white-space: nowrap;                          /* ボタン文言を途中で折らない */
  letter-spacing: .02em;
}
.rx-home .rx-home-hero__btn .rx-btn__chevron {
  width: 1.05em;
  height: 1.05em;
  opacity: 1;
  transition: transform .25s ease;
}
.rx-home-hero__btn--fill {                       /* ヘッダーの .rx-nav__cta--fill と同じ平塗りピンク */
  background: var(--rx-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--rx-accent-rgb), .32);
}
.rx-home-hero__btn--fill:hover,
.rx-home-hero__btn--fill:focus-visible { background: var(--rx-accent-hover); box-shadow: 0 12px 28px rgba(var(--rx-accent-rgb), .4); }
.rx-home-hero__btn--line {
  background: #fff;
  color: var(--rx-accent-hover);                /* 白背景でのコントラスト確保 */
  border: 1.5px solid rgba(var(--rx-accent-rgb), .55);
  box-shadow: 0 6px 18px rgba(28, 40, 74, .06);
}
.rx-home-hero__btn--line:hover,
.rx-home-hero__btn--line:focus-visible { background: rgba(var(--rx-accent-rgb), .06); border-color: var(--rx-accent); }
/* hover は跳ねさせず、矢印・境界・背景だけを静かに動かす */
.rx-home-hero .rx-btn:hover,
.rx-home-hero .rx-btn:active { transform: none; }
.rx-home-hero__btn:hover  .rx-btn__chevron,
.rx-home-hero__btn:focus-visible .rx-btn__chevron { transform: translateX(4px); }

/* --- 4つのコンテンツカード --- */
.rx-home-hero__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.2vw, 16px);
  min-width: 0;
}
.rx-home-hero__card {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  min-width: 0;
  padding: clamp(16px, 1.4vw, 20px);
  border-radius: var(--hero-card-r);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 30px rgba(28, 40, 74, .08);
}
.rx-home-hero__card-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
}
.rx-home-hero__card-icon {
  flex-shrink: 0;
  width: clamp(36px, 3vw, 46px);
  height: clamp(36px, 3vw, 46px);
  color: var(--rx-accent);
}
.rx-home-hero__card-icon--blue { color: var(--rx-accent-2); --robot-face: #14306b; }
.rx-home-hero__card-title {
  margin: 0;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.125rem, .95rem + .55vw, 1.5rem);     /* 18 → 24px（9文字＋アイコンがカード幅に収まる） */
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--hero-navy);
}
.rx-home-hero__card-sub {
  margin: .3em 0 0;
  font-weight: 500;
  font-size: clamp(.875rem, .82rem + .25vw, 1rem);
  line-height: 1.55;
  color: var(--hero-navy);
}
.rx-home-hero__card-img {
  display: block;
  width: 100%;
  height: auto;                                /* 3枚は縦横比が少し違う（デザイン案どおり）。width/height 属性で面積を先に確保 */
  margin-top: auto;                            /* 同じ行のカードと下端を揃える */
  border-radius: 12px;
  background: var(--hm-pink-soft);             /* 読み込み前の下地 */
}

/* 採用アニメーション: 動画2本（横長 640×360 ＋ 縦長 360×642）を横並び（--pair）。会社紹介動画: 横長1本（--single）。
   --pair はエリアの高さを「隣の採用漫画の画像と同じ比率（432:234）」で固定する＝PCでは採用漫画カードと同じ高さになり、
   再生してもヒーロー全体の高さは動かない（SPではカードがその分だけ常に少し高い）。
   その固定エリアの中で、再生している側は実寸比（切り抜きなし）、もう片方は同じ高さのサムネイル（中央を切り抜き）:
   - 既定（横長が主役）: 横長は右の縦長サムネイル（幅24%）を除いた幅で 16:9・下端揃え。縦長サムネイルはエリアいっぱいの高さ
   - .is-tall-active（縦長を再生）: 縦長は右の位置のまま実寸比でエリアいっぱいの高さ＝幅 30.4%（= 360/642 × 234/432）。横長は残り幅の高さいっぱいサムネイル
   位置は変えず幅だけ変える。再生ボタンは JS が動く環境でだけ出し（.has-js）、再生中は消す（.is-playing）。JS 無効なら標準コントロールだけ */
.rx-home-hero__videos {
  margin-top: auto;                            /* 画像カードと同じく下端を揃える */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24%;
  gap: clamp(8px, 1vw, 12px);
  min-width: 0;
}
.rx-home-hero__videos--pair   { aspect-ratio: 432 / 234; }
.rx-home-hero__videos--single { grid-template-columns: minmax(0, 1fr); }
.rx-home-hero__video {
  position: relative;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hero-navy);
}
.rx-home-hero__video--wide { aspect-ratio: 640 / 360; align-self: end; }
.rx-home-hero__video--tall { aspect-ratio: auto; align-self: stretch; }               /* 既定ではサムネイル */
.rx-home-hero__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rx-home-hero__video video { max-width: none; }                                        /* inset: -1px で 100% を超えるため */
.rx-home-hero__video--tall video { position: absolute; inset: -1px; }             /* サムネイルは1px重ねて端の隙間（下地の線）を出さない */
/* 縦長を再生しているとき */
.rx-home-hero__videos.is-tall-active { grid-template-columns: minmax(0, 1fr) 30.4%; }
.rx-home-hero__videos.is-tall-active .rx-home-hero__video--tall { aspect-ratio: 360 / 642; }
.rx-home-hero__videos.is-tall-active .rx-home-hero__video--tall video { position: static; }
.rx-home-hero__videos.is-tall-active .rx-home-hero__video--wide { aspect-ratio: auto; align-self: stretch; }
.rx-home-hero__videos.is-tall-active .rx-home-hero__video--wide video { position: absolute; inset: -1px; }
@media (prefers-reduced-motion: no-preference) {
  .rx-home-hero__videos--pair { transition: grid-template-columns .4s cubic-bezier(.22, 1, .36, 1); }
}
/* 再生ボタン（白い円＋ピンクの三角）。中央の円だけを押せる大きさにして、下の標準コントロールは隠さない */
.rx-home-hero__video-play {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(36px, 4vw, 52px);
  height: clamp(36px, 4vw, 52px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  cursor: pointer;
  place-items: center;
}
.rx-home-hero__video.has-js:not(.is-playing) .rx-home-hero__video-play { display: grid; }
.rx-home-hero__video-play::after {           /* ピンクの三角（見た目の重心を合わせるため少し右へ） */
  content: "";
  width: 38%;
  height: 38%;
  transform: translateX(12%);
  background: var(--rx-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.rx-home-hero__video-play:hover { background: #fff; }
.rx-home-hero__video-play:focus-visible { outline: 3px solid var(--rx-accent); outline-offset: 2px; }
/* サムネイル側（幅の狭い方）のボタンは一回り小さく */
.rx-home-hero__videos:not(.is-tall-active) .rx-home-hero__video--tall .rx-home-hero__video-play { width: clamp(30px, 3vw, 40px); height: clamp(30px, 3vw, 40px); }

/* 採用AIO対策: 検索窓 → 3項目の一覧（右下にロボット） */
.rx-home-hero__aio {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(.75rem, .5rem + .4vw, .875rem);          /* 12 → 14px（デザイン案の一覧も小さめ） */
  color: var(--hero-navy);
}
.rx-home-hero__aio-search {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: 5px 5px 5px 1.1em;
  border-radius: var(--rx-radius-pill);
  background: #fff;
  box-shadow: 0 4px 14px rgba(28, 40, 74, .1);
  font-weight: 500;
}
.rx-home-hero__aio-glass {
  flex-shrink: 0;
  width: 1.3em; height: 1.3em;
  fill: none; stroke: var(--rx-accent-2); stroke-width: 2.4; stroke-linecap: round;
}
.rx-home-hero__aio-query { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-home-hero__aio-go {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.3em; height: 2.3em;
  border-radius: 10px;
  background: var(--rx-accent);
}
.rx-home-hero__aio-go svg { width: 1.15em; height: 1.15em; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.rx-home-hero__aio-body {
  position: relative;
  --bot: clamp(64px, 6.6vw, 96px);             /* ロボットの円の直径 */
  padding-right: calc(var(--bot) * .3);       /* 一覧の右端をロボットの下へ少し潜らせる（デザイン案どおり）。
                                                 文字は最長の「仕事・社員インタビュー」でも円の左端より手前で終わる */
}
.rx-home-hero__aio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rx-home-hero__aio-list li {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .55em .9em;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 40, 74, .06);
  font-weight: 700;
  line-height: 1.3;
}
.rx-home-hero__aio-list svg { flex-shrink: 0; width: 1.4em; height: 1.4em; color: var(--rx-accent-2); }
.rx-home-hero__aio-bot {
  position: absolute;
  right: -8px;
  bottom: -4px;
  z-index: 1;
  width: var(--bot);
  height: var(--bot);
  border-radius: 50%;
  background: #e3effd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.rx-home-hero__aio-bot::before,
.rx-home-hero__aio-bot::after {               /* 右上の「ハッ」と気づく2本のピンクの線 */
  content: "";
  position: absolute;
  top: -8px;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--rx-accent);
}
.rx-home-hero__aio-bot::before { right: 12px; transform: rotate(28deg); }
.rx-home-hero__aio-bot::after  { right: 2px;  transform: rotate(28deg); top: -2px; }
.rx-home-hero__aio-robot { width: 50%; height: 50%; color: var(--rx-accent-2); --robot-face: #14306b; }
.rx-home-hero__aio-badge {
  font-family: var(--hm-num);
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.5;
  padding: 0 .55em;
  border-radius: 8px;
  border: 1.5px solid rgba(47, 128, 237, .6);
  background: #fff;
  color: #14306b;
}

/* --- 3つの特長の帯 --- */
.rx-home-hero__band {
  position: relative;
  z-index: var(--z-elevated);
  margin-top: clamp(16px, 1.6vw, 24px);
  background: rgba(255, 255, 255, .72);
  border-top: 1px solid rgba(255, 255, 255, .9);
}
.rx-home-hero__features {
  --feature-gap: clamp(16px, 2.2vw, 36px);
  list-style: none;
  width: min(100%, var(--hero-cw));
  margin: 0 auto;
  padding: clamp(14px, 1.2vw, 16px) var(--hero-pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--feature-gap);
}
.rx-home-hero__feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 18px);
  min-width: 0;
}
.rx-home-hero__feature-icon {
  flex-shrink: 0;
  width: clamp(56px, 5vw, 72px);
  height: clamp(56px, 5vw, 72px);
  padding: 6px;
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .08);   /* デザイン案の薄いピンクの円 */
  color: var(--rx-accent);
}
.rx-home-hero__feature-title { margin: 0; font-weight: 900; line-height: 1.3; letter-spacing: .01em; }
.rx-home-hero__feature-title span { display: block; font-size: clamp(.8125rem, .78rem + .2vw, .9375rem); color: var(--hero-navy); }
.rx-home-hero__feature-title b    { display: block; font-size: clamp(.9375rem, .88rem + .35vw, 1.125rem); color: var(--rx-accent-hover); }
.rx-home-hero__feature-text {
  margin: .35em 0 0;
  font-size: clamp(.8125rem, .78rem + .2vw, .9375rem);
  line-height: 1.6;
  color: var(--rx-text-muted);
}
/* 縦積みのときは項目の間に薄い横罫 */
.rx-home-hero__feature + .rx-home-hero__feature::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--feature-gap) / 2);
  height: 1px;
  background: rgba(28, 40, 74, .12);
}

/* =========================== タブレット以上: カードは2列 =========================== */
@media (min-width: 600px) {
  .rx-home-hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 769px) {
  .rx-home-hero__features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rx-home-hero__feature { flex-direction: column; align-items: flex-start; }
  .rx-home-hero__feature + .rx-home-hero__feature::before {   /* 横並びでは縦罫に切り替える */
    left: calc(-1 * var(--feature-gap) / 2);
    right: auto;
    top: 6%;
    width: 1px;
    height: 88%;
  }
}
/* =========================== タブレット（コピー → CTA → カード2列） =========================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .rx-home-hero__inner { max-width: 880px; }
  .rx-home-hero__actions { flex-direction: row; max-width: none; }
  .rx-home-hero__btn { width: auto; flex: 1 1 0; }
  .rx-home-hero__lead { max-width: 42em; }
  .rx-home-hero__feature { flex-direction: row; align-items: center; }
}

/* =========================== PC（2カラム） =========================== */
@media (min-width: 1025px) {
  .rx-home-hero {
    --hero-pt: calc(var(--rx-header-h) + clamp(8px, 1vw, 14px));
  }
  .rx-home-hero__inner {
    grid-template-areas: "copy    cards"
                         "actions cards";
    grid-template-columns: minmax(0, 35%) minmax(0, 1fr);   /* デザイン案の比率（コピー34%・隙間2%・カード64%） */
    grid-template-rows: minmax(0, 1fr) auto;                /* コピーは上に、CTAはカードの下端側へ（下端より少し上に置く。.rx-home-hero__actions の margin-bottom） */
    align-items: start;
    column-gap: clamp(20px, 2vw, 32px);
    row-gap: clamp(20px, 2.2vw, 32px);
  }
  .rx-home-hero__actions {
    align-self: end;
    max-width: min(100%, 440px);
    margin-bottom: clamp(28px, 2.6vw, 44px);   /* カード下端より少し上に置く（2026-09-29 ユーザー指示） */
  }
  /* 見出しは列幅に合わせて画面幅で決める（6文字がコピー列に収まる係数） */
  .rx-home-hero__title { font-size: min(5vw, 4.75rem); }     /* 51 → 76px（1440pxで72px＝デザイン案と同等） */
  .rx-home-hero__sub   { font-size: min(1.85vw, 1.7rem); }   /* 19 → 27px（17文字が1行に収まる） */
  .rx-home-hero__lead  { max-width: none; }
  .rx-home-hero__feature { flex-direction: row; align-items: center; }
}

/* =========================== スマートフォン =========================== */
@media (max-width: 768px) {
  .rx-home-hero__title { line-height: 1.16; }
  .rx-home-hero__btn { max-width: none; justify-content: center; }
  .rx-home-hero__lead { max-width: none; }
}
@media (max-width: 480px) {
  /* 320px幅でも「職場体験を。」「「ここで働く」が、応募前に見える。」が1行に収まるところまで落とす */
  .rx-home-hero__title { font-size: clamp(2rem, 1.2rem + 4.2vw, 2.5rem); }
  .rx-home-hero__sub   { font-size: clamp(.9375rem, .72rem + 1.3vw, 1.125rem); letter-spacing: 0; }
  .rx-home-hero__card  { padding: 14px; }
  .rx-home-hero__aio-body { --bot: 68px; }
}

/* --- 表示時の軽い立ち上がり（reduce では一切動かさない） --- */
@media (prefers-reduced-motion: no-preference) {
  .rx-home-hero__copy > *,
  .rx-home-hero__actions,
  .rx-home-hero__card,
  .rx-home-hero__band {
    opacity: 0;
    animation: rx-hero-up .85s cubic-bezier(.22, 1, .36, 1) forwards;
  }
  .rx-home-hero__copy > *:nth-child(1) { animation-delay: .05s; }
  .rx-home-hero__copy > *:nth-child(2) { animation-delay: .14s; }
  .rx-home-hero__copy > *:nth-child(3) { animation-delay: .22s; }
  .rx-home-hero__actions { animation-delay: .34s; }
  .rx-home-hero__card:nth-child(1) { animation-delay: .18s; }
  .rx-home-hero__card:nth-child(2) { animation-delay: .28s; }
  .rx-home-hero__card:nth-child(3) { animation-delay: .38s; }
  .rx-home-hero__card:nth-child(4) { animation-delay: .48s; }
  .rx-home-hero__band { animation-delay: .6s; }
}
@keyframes rx-hero-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   7. 効果の確かめ方（旧 実績の数字。2026-09-28 に提案書 最終版 p21 の「4つの指標」へ差し替え）
   - 人物・写真・イラスト・グラフは使わない。カードの「問い」（応募が増えたか 等）が主役
   - 自社の成果数値は載せない（最終版の提案書に無いため）
   ========================================================================= */
.rx-home-stats {
  position: relative;
  overflow: clip;                                /* 斜め装飾のはみ出しを切る（§8） */
  background: #fff;
  padding: clamp(72px, 8.5vw, 132px) 0 clamp(64px, 7.5vw, 116px);
}

/* 左右の基準位置をHEROに合わせる（共通コンテナは width:min(100%,1200px) が
   max-width の拡張を打ち消してしまい、ワイド画面でHEROより40px内側に入るため） */
.rx-home-stats .rx-home__inner {
  position: relative;
  z-index: var(--z-elevated);
  --stats-cw: 1200px;
  width: min(100%, var(--stats-cw));
}
@media (min-width: 1440px) { .rx-home-stats .rx-home__inner { --stats-cw: 1280px; } }
@media (min-width: 1920px) { .rx-home-stats .rx-home__inner { --stats-cw: 1400px; } }

/* --- 数値カード --- */
.rx-home-stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 24px);
  margin-top: clamp(36px, 4.5vw, 64px);
}
.rx-home-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;                           /* 中身は中央ぞろえ */
  text-align: center;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 38px) clamp(14px, 1.6vw, 26px) clamp(18px, 2.2vw, 30px);
  background: linear-gradient(180deg, #fff 0%, #fff6fa 100%);
  border: 1px solid rgba(var(--rx-accent-rgb), .22);
  border-radius: var(--rx-radius-lg);
}
.rx-home-stats__label {
  font-weight: 700;
  font-size: clamp(.9375rem, .86rem + .3vw, 1.0625rem);
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--hm-ink);
}
.rx-home-stats__bar {                            /* 項目名の下の短いピンクの線 */
  display: block;
  width: clamp(28px, 2.8vw, 40px);
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--rx-accent-rgb), .55);
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(14px, 1.8vw, 26px);
}

.rx-home-stats__note {
  width: 100%;
  margin-top: clamp(14px, 1.8vw, 24px);
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid rgba(var(--rx-accent-rgb), .16);  /* 補足の上に細い罫 */
  font-size: clamp(.75rem, .72rem + .15vw, .8125rem);
  line-height: 1.7;
  color: var(--rx-text-muted);
}

/* タブレット・スマホ: 2列×2段（4列に押し込まない） */
@media (max-width: 1024px) {
  .rx-home-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 狭いスマホ: 数字の読みやすさを優先して1列にし、数字を大きく見せる */
@media (max-width: 420px) {
  .rx-home-stats__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  
  
}

/* =========================== PC（左テキスト＋右3カード） =========================== */

/* =========================== タブレット（見出し→3カード） =========================== */

/* =========================== スマートフォン（縦積み） =========================== */

/* =========================== PC（左ビジュアル＋右コピー） =========================== */

/* =========== タブレット・スマホ: 見出し → ビジュアル → 数値 → 出典 の縦並び =========== */

/* =========================== スマートフォン =========================== */

/* =========================== PC（横一本の図解） =========================== */

/* =========================== タブレット・スマホ（縦の流れ） =========================== */

/* =========================== PC（横一列の比較） =========================== */

/* =========================== タブレット・スマホ（縦に組み替え・罫線は維持） =========================== */

/* =========================== PC =========================== */

/* =========================== タブレット =========================== */

/* =========================== スマートフォン =========================== */

/* =========================== タブレット =========================== */

/* =========================== スマートフォン =========================== */

/* =========================== PC =========================== */

/* =========================== タブレット（3列＋2列） =========================== */

/* =========================== スマートフォン（縦並び） =========================== */

/* =========================================================================
   10. 最後のCTA
   - ページ最後。写真・人物は置かず、余白とCTAだけで締める（強さは「弱〜中」）
   - 視覚的な強さは 背景 → 3カード → CTAボタン の順に上がるようにする
   ========================================================================= */
.rx-home-cta {
  position: relative;
  overflow: clip;
  background: #fff;
  padding: clamp(84px, 10vw, 156px) 0 clamp(96px, 11vw, 176px);   /* 下はフッターとの間を広めに */
}

.rx-home-cta__inner {
  position: relative;
  z-index: var(--z-elevated);
  --cta-cw: 1200px;
  width: min(100%, var(--cta-cw));
}
@media (min-width: 1440px) { .rx-home-cta__inner { --cta-cw: 1280px; } }
@media (min-width: 1920px) { .rx-home-cta__inner { --cta-cw: 1400px; } }

/* --- 3つの案内カード（CTAより明確に弱く） --- */
.rx-home-cta__list {
  /* カードの枚数が変わっても中央に並ぶようにする（現在は2枚。資料ダウンロードの案内は未掲載） */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  justify-content: center;
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(34px, 4.2vw, 56px);
}
.rx-home-cta__list > li {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px);
  min-width: 0;
  padding: clamp(20px, 2.6vw, 36px) clamp(18px, 2.2vw, 30px);
  background: linear-gradient(180deg, #fff 0%, #fff8fb 100%);
  border: 1px solid rgba(var(--rx-accent-rgb), .2);
  border-radius: var(--rx-radius-lg);
}
.rx-home-cta__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(40px, 3.6vw, 54px);
  aspect-ratio: 1;
  border-radius: 14px;                              /* デザイン案は円ではなく角丸の四角 */
  background: rgba(var(--rx-accent-rgb), .09);
}
.rx-home-cta__icon svg {
  width: 52%; height: 52%;
  fill: none; stroke: var(--rx-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.rx-home-cta__body { display: grid; gap: .25em; min-width: 0; }
.rx-home-cta__name {
  font-weight: 700;
  font-size: clamp(.875rem, .84rem + .3vw, 1.0625rem);
  line-height: 1.5;
  color: var(--hm-ink);
}
.rx-home-cta__text {
  font-size: clamp(.6875rem, .66rem + .18vw, .8125rem);
  line-height: 1.65;
  color: var(--rx-text-muted);
}

/* --- 2つのCTA（このセクションの主役） --- */
.rx-home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(32px, 4vw, 52px);
}
.rx-home-cta__btn {
  gap: 1.2em;
  min-width: min(100%, 300px);
  padding: clamp(1rem, .85rem + .6vw, 1.2rem) clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
}
.rx-home .rx-home-cta__btn .rx-btn__chevron {
  width: 1.05em;
  height: 1.05em;
  opacity: 1;
  transition: transform .25s ease;
}

/* hoverは跳ねさせず、色と矢印だけを動かす */
.rx-home-cta .rx-btn:hover,
.rx-home-cta .rx-btn:active { transform: none; }
.rx-home-cta__btn:hover .rx-btn__chevron,
.rx-home-cta__btn:focus-visible .rx-btn__chevron { transform: translateX(3px); }

.rx-home-cta__btn:focus-visible { outline: 3px solid rgba(var(--rx-accent-rgb), .45); outline-offset: 3px; }

.rx-home-cta__note {
  margin-top: clamp(20px, 2.6vw, 34px);
  font-size: clamp(.6875rem, .66rem + .12vw, .75rem);
  line-height: 1.8;
  text-align: center;
  color: var(--rx-text-muted);
}

/* =========================== タブレット =========================== */
@media (min-width: 701px) and (max-width: 1024px) {
  .rx-home-cta__inner { max-width: 880px; margin-inline: auto; }
}
@media (min-width: 701px) and (max-width: 820px) {
  .rx-home-cta__list { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .rx-home-cta__list { grid-template-columns: minmax(0, 1fr); }
}
/* =========================== スマートフォン =========================== */
@media (max-width: 700px) {
  .rx-home-cta__list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rx-home-cta__actions { flex-direction: column; align-items: stretch; }
  .rx-home-cta__btn { width: 100%; min-width: 0; justify-content: center; }
}

/* ホームのフッター上余白はCTA帯と連続させる */
.rx-home + .rx-footer { margin-top: 0; }

/* ヘッダーCTA: 狭いSPでは「無料診断」だけにしてハンバーガーを画面内に保つ（DEVICE-RULES §7） */

/* =========================================================================
   セクション共通の出現アニメーション（.rx-anim → JSが .is-in を付与）
   - 2026-09-28: 見出しの1文字ずつの出現・data-reveal は廃止。カードが少し下から出るだけ
   ========================================================================= */

/* カード類は少しずつ遅れて出る（ページ全体の動きを強める） */
@media (prefers-reduced-motion: no-preference) {
  .rx-home-stats__item:nth-child(2) { transition-delay: .10s; }

  .rx-home-stats__item:nth-child(3) { transition-delay: .20s; }

  .rx-home-stats__item:nth-child(4) { transition-delay: .30s; }

  /* 入場は少し大きめに動かす */
  .rx-home .rx-anim { transform: translateY(28px); }
  /* style.css の .rx-anim.is-in と同詳細度のため、後勝ちで戻し切れるよう明示する
     （これが無いと表示後も28px下にズレたままになり、直下の注記に重なる） */
  .rx-home .rx-anim.is-in { transform: none; }
}

/* =========================================================================
   02〜10 共通（2026-09-28 新デザイン案スライド②〜⑦）
   - 白地＋桜の花びら（SVG のデータURI。画像ファイルなし）
   - 見出しは中央寄せ・太ゴシック900。小見出しはピンクの「＼ ／」で挟む
   - 手書き風の一言は Zen Kurenaido（ペン書き）。多用しない
   ========================================================================= */
.rx-home { --hm-navy: #101c4d; }                /* デザイン案の濃紺（#081651）に近い、見出し・本文の色 */
.rx-home__inner { width: min(100%, 1400px); }   /* デザイン案の内容幅（画面の約92%）に合わせて広げる（2026-09-28） */
.rx-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- キャンペーン告知（ヒーロー直下）
   bizform.contentsx.jp ホームの .home-campaign と同じ構成（バッジ｜文言｜白いCTAピル を1枚のリンクに横並び）。
   色だけ当サイトのアクセント（ピンク）に置き換え、矢印は共通スプライト #i-arrow を使う */
.rx-home-campaign { padding: clamp(20px, 2.4vw, 32px) 0 0; background: #fff; }
.rx-home-campaign__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: clamp(18px, 1.4vw + 12px, 24px) clamp(20px, 2.4vw, 32px);
  border-radius: var(--rx-radius);
  color: #fff;
  background: var(--rx-accent);
  box-shadow: 0 14px 30px rgba(var(--rx-accent-rgb), .28);
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rx-home-campaign__link:hover,
.rx-home-campaign__link:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(var(--rx-accent-rgb), .36); }
.rx-home-campaign__badge {
  padding: 4px 12px;
  border-radius: var(--rx-radius-pill);
  color: #fff;
  background: var(--hm-navy);
  font-family: var(--hm-sans);
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.rx-home-campaign__text {
  font-family: var(--hm-sans);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem);
  font-weight: 800;
  line-height: 1.4;
}
.rx-home-campaign__text span { display: inline-block; white-space: nowrap; vertical-align: middle; }   /* 「10月キャンペーン」「実施中！」の単位で折る */
.rx-home-campaign__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                                                             /* タップ44px（DEVICE-RULES §12） */
  padding: 8px 20px;
  border-radius: var(--rx-radius-pill);
  color: var(--rx-accent-hover);
  background: #fff;
  font-family: var(--hm-sans);
  font-weight: 800;
}
.rx-home-campaign__cta .rx-btn__chevron { width: 1em; height: 1em; opacity: 1; transition: transform .25s ease; }
.rx-home-campaign__link:hover .rx-btn__chevron,
.rx-home-campaign__link:focus-visible .rx-btn__chevron { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .rx-home-campaign__link, .rx-home-campaign__cta .rx-btn__chevron { transition: none; }
  .rx-home-campaign__link:hover, .rx-home-campaign__link:focus-visible { transform: none; }
  .rx-home-campaign__link:hover .rx-btn__chevron { transform: none; }
}

.rx-hs {
  position: relative;
  overflow: clip;
  padding: clamp(56px, 6.4vw, 92px) 0;
  background: #fff;
  color: var(--hm-navy);
}
.rx-anchor { position: relative; height: 0; }   /* 旧アンカーの救済用（scroll-margin-top は style.css の [id] に任せる） */
.rx-hs .rx-home__inner { position: relative; z-index: var(--z-elevated); }
.rx-hs__deco {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cdefs%3E%3Cfilter id='b' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='%23f6a8c8' filter='url(%23b)'%3E%3Cellipse cx='90' cy='120' rx='34' ry='15' transform='rotate(-35 90 120)' opacity='.7'/%3E%3Cellipse cx='1320' cy='80' rx='40' ry='17' transform='rotate(25 1320 80)' opacity='.65'/%3E%3Cellipse cx='1250' cy='260' rx='26' ry='12' transform='rotate(-50 1250 260)' opacity='.5'/%3E%3Cellipse cx='60' cy='520' rx='30' ry='13' transform='rotate(40 60 520)' opacity='.55'/%3E%3Cellipse cx='1360' cy='560' rx='34' ry='15' transform='rotate(-20 1360 560)' opacity='.6'/%3E%3Cellipse cx='700' cy='30' rx='22' ry='10' transform='rotate(15 700 30)' opacity='.4'/%3E%3Cellipse cx='200' cy='820' rx='36' ry='16' transform='rotate(-15 200 820)' opacity='.55'/%3E%3Cellipse cx='1100' cy='850' rx='28' ry='12' transform='rotate(35 1100 850)' opacity='.45'/%3E%3Cellipse cx='30' cy='300' rx='22' ry='10' transform='rotate(-60 30 300)' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 1400px 900px;
  background-position: center top;
}
.rx-hs__eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .9em;
  margin: 0;
  font-weight: 500;
  font-size: clamp(.9375rem, .88rem + .3vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--hm-navy);
  text-align: center;
}
.rx-hs__eyebrow::before,
.rx-hs__eyebrow::after {                          /* ピンクの「＼ ／」 */
  content: "";
  flex: 0 0 auto;
  width: 2px;
  height: 1.2em;
  border-radius: 2px;
  background: var(--rx-accent);
  transform: rotate(-32deg);
}
.rx-hs__eyebrow::after { transform: rotate(32deg); }
.rx-hs__eyebrow--sub { margin-top: clamp(36px, 4.5vw, 64px); }
.rx-hs__eyebrow--sm  { font-weight: 900; font-size: .9375rem; white-space: nowrap; }
.rx-hs__eyebrow--hand {                           /* 02 だけ手書き風（スライドどおり） */
  font-family: 'Zen Kurenaido', var(--hm-sans);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem);
}
.rx-hs__eyebrow--hand::before,
.rx-hs__eyebrow--hand::after { display: none; }
.rx-hs__title {
  margin: .45em 0 0;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.625rem, 1.05rem + 2.5vw, 3.25rem);   /* 26 → 52px */
  line-height: 1.3;
  letter-spacing: .01em;
  text-align: center;
  color: var(--hm-navy);
}
.rx-hs__ul {                                      /* ピンク文字＋薄いピンクの下線（02 の「働くイメージ」） */
  color: var(--rx-accent);
  background: linear-gradient(transparent 78%, rgba(var(--rx-accent-rgb), .22) 78%);
}
.rx-hs__lead {
  max-width: 60em;
  margin: clamp(14px, 1.6vw, 22px) auto 0;
  font-weight: 500;
  font-size: clamp(.9375rem, .9rem + .3vw, 1.125rem);
  line-height: 1.85;
  text-align: center;
  color: var(--hm-navy);
}
.rx-hs__hand {
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  font-family: 'Zen Kurenaido', var(--hm-sans);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.05rem + 1.5vw, 2.375rem);
  line-height: 1.4;
  letter-spacing: .02em;
  text-align: center;
  color: var(--rx-accent);
}

/* =========================================================================
   02. 悩み
   ========================================================================= */
.rx-hs--issue { padding-bottom: clamp(96px, 11vw, 168px); }   /* 下端の街並みの分 */
.rx-hs__city { position: absolute; inset: 0; z-index: var(--z-base); pointer-events: none; }
.rx-hs__city::before,
.rx-hs__city::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: clamp(150px, 22vw, 340px);
  aspect-ratio: 320 / 301;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  /* 上端を透明に溶かす（切り出し元のカード下端・文字の残りを隠す） */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%);
          mask-image: linear-gradient(180deg, transparent 0, #000 28%);
}
.rx-hs__city::before { left: 0;  background-image: url("../images/home/issue-city-l.webp"); }
.rx-hs__city::after  { right: 0; background-image: url("../images/home/issue-city-r.webp"); background-position: bottom right; }

.rx-issue__list {
  list-style: none;
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
.rx-issue__item {
  background: #fff;
  border-radius: clamp(16px, 1.6vw, 22px);
  box-shadow: 0 10px 30px rgba(28, 40, 74, .08);
  padding: clamp(16px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
}
.rx-issue__head { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.rx-issue__no {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(48px, 4.2vw, 60px);
  height: clamp(48px, 4.2vw, 60px);
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .12);
  font-family: var(--hm-num);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  color: var(--rx-accent);
}
.rx-issue__title {
  margin: 0;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);     /* 17 → 22px */
  line-height: 1.4;
  color: var(--hm-navy);
}
.rx-issue__img { display: block; width: 100%; height: auto; margin-top: auto; border-radius: 12px; }

.rx-issue__so { position: relative; margin-top: clamp(40px, 5vw, 72px); text-align: center; }
.rx-issue__arrow {                                 /* 下向きのピンクの三角 */
  display: block;
  width: 0; height: 0;
  margin: 0 auto clamp(16px, 2vw, 28px);
  border-left: clamp(20px, 2.2vw, 32px) solid transparent;
  border-right: clamp(20px, 2.2vw, 32px) solid transparent;
  border-top: clamp(16px, 1.8vw, 26px) solid var(--rx-accent);
}
.rx-issue__so-eyebrow {
  margin: 0;
  font-weight: 900;
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.5rem);
  color: var(--hm-navy);
}
.rx-issue__so-title {
  margin: .2em 0 0;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.375rem, .95rem + 2.1vw, 2.75rem);      /* 22 → 44px */
  line-height: 1.35;
  color: var(--hm-navy);
}
.rx-issue__so-text {
  margin: clamp(12px, 1.4vw, 18px) auto 0;
  max-width: 44em;
  font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.85;
  color: var(--hm-navy);
}
@supports (word-break: auto-phrase) { .rx-issue__so-title { word-break: auto-phrase; text-wrap: balance; } }

/* =========================================================================
   03. フェーズ
   ========================================================================= */
.rx-phase__contents {
  list-style: none;
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.rx-phase__content {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(28, 40, 74, .08);
  padding: clamp(10px, 1.2vw, 16px);
  text-align: center;
}
.rx-phase__content-name {
  margin: 0 0 .5em;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1rem, .9rem + .45vw, 1.3125rem);
  color: var(--hm-navy);
}
.rx-phase__content img { display: block; width: 100%; height: auto; border-radius: 10px; }

.rx-phase__table-wrap {
  margin-top: clamp(20px, 2.6vw, 36px);
  padding: clamp(8px, 1vw, 14px);
  border-radius: 20px;
  background: rgba(var(--rx-accent-rgb), .045);
  overflow-x: auto;                               /* 6列の表はスマホでは横スクロール */
  -webkit-overflow-scrolling: touch;
}
.rx-phase__table {
  width: 100%;
  min-width: 700px;                              /* 769px 幅（内側≈708px）でも横スクロールが出ない下限。≤768px はカードに組み替える */
  border-collapse: separate;
  border-spacing: 8px;
  table-layout: fixed;
}
.rx-phase__corner { width: 19%; }
.rx-phase__step { padding: 0 0 4px; vertical-align: top; font-weight: 700; }
.rx-phase__chev {                                  /* 矢羽根 */
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: clamp(52px, 4.6vw, 66px);
  padding: 6px 12px 6px 8px;
  background: linear-gradient(90deg, #f78ab8, var(--rx-accent));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  color: #fff;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1rem, .92rem + .45vw, 1.3125rem);
  letter-spacing: .04em;
  white-space: nowrap;
}
.rx-phase__step:first-of-type .rx-phase__chev { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); border-radius: 999px 0 0 999px; }
.rx-phase__chev-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(36px, 3.2vw, 46px);
  height: clamp(36px, 3.2vw, 46px);
  border-radius: 50%;
  background: #fff;
  color: var(--rx-accent);
}
.rx-phase__chev-icon svg { width: 60%; height: 60%; }
.rx-phase__step-desc {
  display: block;
  margin-top: 8px;
  font-weight: 500;
  font-size: clamp(.75rem, .7rem + .25vw, .9375rem);
  line-height: 1.5;
  text-align: center;
  color: var(--hm-navy);
}
.rx-phase__table tbody th,
.rx-phase__table tbody td {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(28, 40, 74, .05);
  padding: 8px 10px;
  vertical-align: middle;
}
.rx-phase__table tbody th {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(.875rem, .8rem + .35vw, 1.0625rem);
  color: var(--hm-navy);
}
.rx-phase__table tbody th img { flex-shrink: 0; width: clamp(56px, 5.4vw, 76px); height: auto; border-radius: 8px; }
.rx-phase__table tbody td { text-align: center; }
.rx-phase__yes,
.rx-phase__no { display: inline-grid; place-items: center; vertical-align: middle; }
.rx-phase__yes { width: 32px; height: 32px; border-radius: 50%; background: var(--rx-accent); color: #fff; }
.rx-phase__yes svg { width: 18px; height: 18px; }
.rx-phase__no  { width: 14px; height: 14px; border-radius: 50%; background: #d3d6e0; }

/* 手書き風の一言＋筆の矢印（ロゴの下の矢印と同じ形。文字の真下に、文字と同じ幅で置く） */
.rx-phase__tag { position: relative; display: block; }
.rx-phase__tag-wrap { display: inline-block; max-width: 100%; }
.rx-phase__tag-text { display: block; }
.rx-phase__tag-arrow {
  display: block;
  width: 100%;
  height: auto;
  margin: -.15em 0 0;                          /* 文字の真下に寄せる */
  overflow: visible;
  color: var(--rx-accent);
}
.rx-phase__tag-brush,
.rx-phase__tag-head { fill: currentColor; }
.rx-phase__tag-head { transform-origin: 360px 19px; }
/* 描画アニメーション: マスクの線を左から伸ばし、最後に矢じりが出る（reduce では最初から表示） */
@media (prefers-reduced-motion: no-preference) {
  .rx-phase__tag-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .rx-phase__tag-head   { opacity: 0; transform: scale(.4); }
  .rx-phase__tag.is-in .rx-phase__tag-reveal { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1) .45s; }
  .rx-phase__tag.is-in .rx-phase__tag-head   { opacity: 1; transform: none; transition: opacity .25s ease 1.2s, transform .35s cubic-bezier(.22, 1, .36, 1) 1.2s; }
}

/* =========================================================================
   04. 場面
   ========================================================================= */
.rx-scene__list {
  list-style: none;
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
}
.rx-scene__item {
  background: #fff;
  border-radius: clamp(16px, 1.6vw, 22px);
  box-shadow: 0 10px 30px rgba(28, 40, 74, .08);
  padding: clamp(16px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
}
.rx-scene__head { display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 18px); }
.rx-scene__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(52px, 4.4vw, 64px);
  height: clamp(52px, 4.4vw, 64px);
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .1);
  color: var(--rx-accent);
}
.rx-scene__icon svg { width: 48%; height: 48%; }
.rx-scene__title {
  margin: 0;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height: 1.35;
  color: var(--hm-navy);
}
.rx-scene__text { margin: .3em 0 0; font-size: clamp(.875rem, .84rem + .2vw, 1rem); line-height: 1.7; color: var(--hm-navy); }
.rx-scene__fig { margin: auto 0 0; }
.rx-scene__fig img { display: block; width: 100%; height: auto; border-radius: 12px; }
.rx-scene__fig--note {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.rx-scene__fig--note img { width: 100%; max-width: 190px; margin: 0 auto; }
.rx-scene__note {
  font-family: 'Zen Kurenaido', var(--hm-sans);
  font-size: clamp(1rem, .9rem + .4vw, 1.25rem);
  line-height: 1.35;
  color: var(--rx-accent);
  transform: rotate(-8deg);
  text-align: left;
  padding-left: .4em;
}

/* =========================================================================
   05. AIO
   ========================================================================= */
.rx-aio__grid {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
.rx-aio__panel {
  background: #fff;
  border-radius: clamp(16px, 1.6vw, 22px);
  box-shadow: 0 10px 30px rgba(28, 40, 74, .08);
  padding: clamp(16px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}
.rx-aio__panel-head { display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 18px); }
.rx-aio__panel-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .1);
  color: var(--rx-accent);
}
.rx-aio__panel-icon svg { width: 50%; height: 50%; }
.rx-aio__panel-icon--blue { color: var(--rx-accent-2); --robot-face: #14306b; }
.rx-aio__panel-title {
  margin: 0;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);   /* 20文字の見出しがパネル幅で1行に収まる */
  line-height: 1.4;
  color: var(--hm-navy);
}
.rx-aio__panel-text { margin: .4em 0 0; font-size: clamp(.875rem, .84rem + .2vw, 1rem); line-height: 1.7; color: var(--hm-navy); }

.rx-aio__map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}
.rx-aio__map::before {                             /* 破線の輪 */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 72%;
  aspect-ratio: 1.15;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(var(--rx-accent-rgb), .45);
  border-radius: 50%;
  pointer-events: none;
}
.rx-aio__channels { display: contents; list-style: none; margin: 0; padding: 0; }
.rx-aio__ch {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(28, 40, 74, .09);
}
.rx-aio__ch > svg {
  grid-row: 1 / 3;
  width: 40px; height: 40px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .1);
  color: var(--rx-accent);
}
.rx-aio__ch > svg.rx-aio__ch-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rx-aio__ch b { font-family: var(--hm-sans); font-weight: 900; font-size: clamp(.875rem, .85rem + .2vw, 1rem); white-space: nowrap; color: var(--hm-navy); }
.rx-aio__ch span { font-size: clamp(.6875rem, .66rem + .15vw, .8125rem); line-height: 1.45; color: var(--rx-text-muted); }
.rx-aio__ch--top { grid-column: 1 / -1; justify-self: center; width: min(100%, 300px); }
.rx-aio__phone { position: relative; z-index: 1; grid-column: 1 / -1; display: block; width: min(100%, 220px); height: auto; margin: 0 auto; }

.rx-aio__arrow {
  justify-self: center;
  width: 28px; height: 28px;
  border-right: 6px solid var(--rx-accent);
  border-bottom: 6px solid var(--rx-accent);
  transform: rotate(45deg);
}

/* ブラウザ風モック（装飾） */
.rx-aio__browser {
  margin-top: auto;
  padding: 10px 12px 12px;
  border-radius: 16px;
  background: #f3f6fb;
  border: 1px solid #e2e8f3;
  font-size: clamp(.75rem, .7rem + .2vw, .875rem);
  color: var(--hm-navy);
}
.rx-aio__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rx-aio__bar span { width: 10px; height: 10px; border-radius: 50%; background: #f26a5a; }
.rx-aio__bar span:nth-child(2) { background: #f7c14a; }
.rx-aio__bar span:nth-child(3) { background: #5cc46e; }
.rx-aio__bar i { flex: 1; height: 10px; margin-left: 6px; border-radius: 5px; background: #e2e8f3; }
.rx-aio__nav {
  display: flex;
  align-items: center;
  gap: clamp(6px, .9vw, 12px);
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
}
.rx-aio__nav b { font-family: var(--hm-sans); font-weight: 900; font-size: 1.15em; color: var(--hm-navy); }
.rx-aio__nav b span { color: var(--rx-accent); }
.rx-aio__nav > span { font-weight: 700; font-size: .85em; }
.rx-aio__nav em { margin-left: auto; padding: .35em .8em; border-radius: 999px; background: var(--rx-accent); color: #fff; font-style: normal; font-weight: 700; }
.rx-aio__search {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-top: 10px;
  padding: 5px 5px 5px 1em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(28, 40, 74, .08);
  font-weight: 700;
  font-size: 1.1em;
}
.rx-aio__search > svg { width: 1.3em; height: 1.3em; fill: none; stroke: var(--rx-accent-2); stroke-width: 2.4; stroke-linecap: round; }
.rx-aio__search > span { flex: 1; }
.rx-aio__search i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 10px; background: var(--rx-accent); }
.rx-aio__search i svg { width: 1.2em; height: 1.2em; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.rx-aio__answer { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rx-aio__bot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: clamp(60px, 5.4vw, 76px);
  height: clamp(60px, 5.4vw, 76px);
  border-radius: 50%;
  background: #e3effd;
  color: var(--rx-accent-2);
  --robot-face: #14306b;
}
.rx-aio__bot svg { width: 46%; height: 46%; }
.rx-aio__bot b { padding: 0 .5em; border-radius: 6px; border: 1.5px solid rgba(47, 128, 237, .6); background: #fff; font-family: var(--hm-num); font-size: .9em; color: #14306b; }
.rx-aio__answer p { flex: 1; margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff; line-height: 1.6; font-weight: 500; }
.rx-aio__tiles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rx-aio__tiles li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.rx-aio__tiles svg { width: 28px; height: 28px; color: var(--rx-accent-2); }

/* 期待できる効果（05・06 共通） */
.rx-effects {
  list-style: none;
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.rx-effects__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(14px, 1.6vw, 22px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(28, 40, 74, .08);
}
.rx-effects__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(56px, 5vw, 76px);
  height: clamp(56px, 5vw, 76px);
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .1);
  color: var(--rx-accent);
}
.rx-effects__icon svg { width: 50%; height: 50%; }
.rx-effects__name { margin: 0; font-family: var(--hm-sans); font-weight: 900; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.3; color: var(--rx-accent); }
.rx-effects__sub  { margin: .25em 0 0; font-weight: 900; font-size: clamp(.875rem, .84rem + .25vw, 1rem); color: var(--rx-accent-hover); }
.rx-effects__text { margin: .4em 0 0; font-size: clamp(.8125rem, .78rem + .2vw, .9375rem); line-height: 1.7; color: var(--hm-navy); }

/* =========================================================================
   06. 変化（背景はヒーローと同じ復元画像）
   ========================================================================= */
.rx-hs--change {
  background: #f4f8fd url("../images/home/hero-bg.webp") center / cover no-repeat;
}
.rx-hs--change .rx-hs__deco {                     /* 花びらは出さず、白い薄膜で文字の下地をつくる */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .7) 60%, rgba(255, 255, 255, .55));
  background-size: auto;
}
.rx-change__grid {
  margin-top: clamp(28px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}
.rx-change__panel {
  background: rgba(255, 255, 255, .94);
  border-radius: clamp(16px, 1.6vw, 22px);
  box-shadow: 0 10px 30px rgba(28, 40, 74, .08);
  padding: clamp(16px, 1.8vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}
.rx-change__panel-head { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.rx-change__badge {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  min-width: 6.2em;
  padding: .45em 1.2em;
  border-radius: 999px;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.4375rem);
  color: #fff;
}
.rx-change__badge--before { background: #4b5570; }
.rx-change__badge--after  { background: var(--rx-accent); }
.rx-change__panel-text { margin: 0; font-weight: 900; font-size: clamp(.9375rem, .88rem + .4vw, 1.1875rem); line-height: 1.5; color: var(--hm-navy); }

.rx-change__before { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block: auto; }
.rx-change__job {
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3e7f0;
  font-size: .8125rem;
  color: var(--hm-navy);
}
.rx-change__job-title { margin: 0 0 12px; font-weight: 700; font-size: 1rem; }
.rx-change__job-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; margin: 0; }
.rx-change__job-rows dt { padding: 4px 8px; border-radius: 6px; background: #eef1f7; font-weight: 700; white-space: nowrap; }
.rx-change__job-rows dd { margin: 0; height: 10px; border-radius: 5px; background: #e1e5ee; }
.rx-change__job-btn { display: block; margin-top: 14px; padding: 12px; border-radius: 8px; background: #7a8299; color: #fff; font-weight: 700; text-align: center; }
.rx-change__voices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.rx-change__voices li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px 18px 18px 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(28, 40, 74, .08);
}
.rx-change__voices img { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; }
.rx-change__voices p { margin: 0; font-weight: 700; font-size: .8125rem; line-height: 1.5; color: var(--hm-navy); }

.rx-change__arrow {
  justify-self: center;
  width: 28px; height: 28px;
  border-right: 6px solid var(--rx-accent);
  border-bottom: 6px solid var(--rx-accent);
  transform: rotate(45deg);
}

.rx-change__after { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rx-change__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rx-change__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(28, 40, 74, .07);
}
.rx-change__card-head { display: flex; align-items: flex-start; gap: 8px; }
.rx-change__card-head > svg { flex-shrink: 0; width: 30px; height: 30px; color: var(--rx-accent); }
.rx-change__card-head > svg.rx-change__card-icon--blue { color: var(--rx-accent-2); --robot-face: #14306b; }
.rx-change__card h3 { margin: 0; font-family: var(--hm-sans); font-weight: 900; font-size: .9375rem; line-height: 1.3; color: var(--hm-navy); }
.rx-change__card p  { margin: .2em 0 0; font-size: .6875rem; line-height: 1.45; color: var(--hm-navy); }
.rx-change__card img { display: block; width: 100%; height: auto; margin-top: auto; border-radius: 8px; }
.rx-change__aio { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: .75rem; color: var(--hm-navy); }
.rx-change__aio-search { display: flex; align-items: center; gap: .5em; padding: 4px 4px 4px .8em; border-radius: 999px; background: #f3f6fb; font-weight: 700; }
.rx-change__aio-search > svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--rx-accent-2); stroke-width: 2.4; stroke-linecap: round; }
.rx-change__aio-search i { margin-left: auto; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 7px; background: var(--rx-accent); }
.rx-change__aio-search i svg { width: 1.1em; height: 1.1em; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.rx-change__aio-answer { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: #f3f6fb; line-height: 1.45; font-weight: 500; }
.rx-change__aio-answer > svg { flex-shrink: 0; width: 34px; height: 34px; color: var(--rx-accent-2); --robot-face: #14306b; }

.rx-change__gains { display: flex; flex-direction: column; gap: 10px; }
.rx-change__gain-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rx-change__gain-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(28, 40, 74, .07);
}
.rx-change__gain-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .1);
  color: var(--rx-accent);
}
.rx-change__gain-icon svg { width: 50%; height: 50%; }
.rx-change__gain-list b { display: block; font-family: var(--hm-sans); font-weight: 900; font-size: clamp(.875rem, .8rem + .2vw, 1rem); line-height: 1.35; color: var(--rx-accent); }
.rx-change__gain-list span { display: block; font-size: .75rem; line-height: 1.45; color: var(--hm-navy); }

/* =========================================================================
   10. 流れ
   ========================================================================= */
.rx-flow__hand { display: none; }
.rx-flow__steps {
  list-style: none;
  margin: clamp(28px, 3.4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  counter-reset: none;
}
.rx-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(16px, 1.6vw, 22px) clamp(12px, 1.2vw, 16px);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fff7fa 100%);
  border: 1px solid rgba(var(--rx-accent-rgb), .14);
  text-align: center;
}
.rx-flow__no {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--rx-accent);
  color: #fff;
  font-family: var(--hm-num);
  font-weight: 700;
  font-size: 1.125rem;
}
.rx-flow__title {
  width: 100%;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--rx-accent-rgb), .3);
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  color: var(--hm-navy);
}
.rx-flow__text { width: 100%; margin: 0; font-size: clamp(.8125rem, .78rem + .2vw, .9375rem); line-height: 1.7; text-align: left; color: var(--hm-navy); }
.rx-flow__fig { width: 100%; margin: auto 0 0; }
.rx-flow__fig img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.rx-flow__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(var(--rx-accent-rgb), .1);
  color: var(--rx-accent-hover);
  font-weight: 700;
  font-size: .8125rem;
}
.rx-flow__pill svg { width: 16px; height: 16px; }
.rx-flow__tiles { list-style: none; width: 100%; margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rx-flow__tiles li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(var(--rx-accent-rgb), .06);
  font-weight: 700;
  font-size: .75rem;
  color: var(--hm-navy);
}
.rx-flow__tiles img { width: auto; height: 46px; }
.rx-flow__team-note {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--rx-accent-rgb), .1);
  color: var(--rx-accent-hover);
  font-weight: 700;
  font-size: .75rem;
  line-height: 1.5;
  text-align: left;
}
.rx-flow__team-note svg { flex-shrink: 0; width: 28px; height: 28px; color: var(--rx-accent); }
.rx-flow__places { list-style: none; width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.rx-flow__places li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .6875rem; font-weight: 700; color: var(--hm-navy); }
.rx-flow__places span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--rx-accent-2); color: #fff; }
.rx-flow__places svg { width: 55%; height: 55%; }
.rx-flow__checks { list-style: none; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rx-flow__checks li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .8125rem; color: var(--hm-navy); text-align: left; }
.rx-flow__checks svg { flex-shrink: 0; width: 22px; height: 22px; padding: 3px; border-radius: 5px; background: var(--rx-accent); color: #fff; }

.rx-flow__team {
  margin-top: clamp(20px, 2.4vw, 32px);
  padding: clamp(18px, 2.4vw, 32px);
  border-radius: 22px;
  background: #fdf1f6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}
.rx-flow__team-eyebrow { margin: 0; font-family: var(--hm-num); font-weight: 700; font-size: .75rem; letter-spacing: .18em; color: var(--rx-accent); }
.rx-flow__team-title { margin: .4em 0 0; font-family: var(--hm-sans); font-weight: 900; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.4; color: var(--hm-navy); }
.rx-flow__members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.rx-flow__members img { display: block; width: 100%; max-width: 160px; height: auto; }
.rx-flow__member-name { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-family: var(--hm-sans); font-weight: 900; font-size: .875rem; white-space: nowrap; color: var(--hm-navy); }
.rx-flow__member-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rx-accent); color: #fff; }
.rx-flow__member-icon svg { width: 58%; height: 58%; }
.rx-flow__member-text { margin: 4px 0 0; font-size: .75rem; line-height: 1.5; color: var(--rx-text-muted); }
.rx-flow__others-title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--hm-sans); font-weight: 900; font-size: .9375rem; line-height: 1.3; color: var(--hm-navy); }
.rx-flow__others-title svg { flex-shrink: 0; width: 30px; height: 30px; color: var(--rx-accent); }
.rx-flow__others-text { margin: 8px 0 0; font-size: .75rem; line-height: 1.6; color: var(--rx-text-muted); }

/* =========================== タブレット以上 =========================== */
@media (min-width: 600px) {
  .rx-scene__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-change__before { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .rx-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 769px) {
  .rx-issue__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rx-phase__contents { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rx-effects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rx-aio__map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .rx-aio__ch--top { grid-column: 2; grid-row: 1; width: auto; justify-self: stretch; }
  .rx-aio__ch--l1 { grid-column: 1; grid-row: 2; }
  .rx-aio__ch--r1 { grid-column: 3; grid-row: 2; }
  .rx-aio__ch--l2 { grid-column: 1; grid-row: 3; }
  .rx-aio__ch--r2 { grid-column: 3; grid-row: 3; }
  .rx-aio__phone  { grid-column: 2; grid-row: 2 / 4; width: min(100%, 200px); }
  .rx-flow__team { grid-template-columns: minmax(0, 1fr) auto; }
  .rx-flow__team-lead { grid-column: 1 / -1; }
  .rx-flow__members { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; }
  .rx-flow__others { grid-column: 1 / -1; max-width: 46em; }
}
@media (min-width: 1025px) {
  .rx-scene__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rx-aio__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .rx-aio__arrow { align-self: center; transform: rotate(-45deg); }
  .rx-change__grid { grid-template-columns: minmax(0, 40%) auto minmax(0, 1fr); }
  .rx-change__arrow { align-self: center; transform: rotate(-45deg); }
  .rx-flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* CREATIVE TEAM を 見出し｜メンバー4人｜その他 の3カラムにするのは、メンバー名が折れない 1200px 以上だけ */
@media (min-width: 1200px) {
  .rx-flow__team { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rx-flow__team-lead { grid-column: auto; padding-right: clamp(16px, 2vw, 28px); border-right: 1px solid rgba(var(--rx-accent-rgb), .3); }
  .rx-flow__members { grid-column: auto; }
  .rx-flow__others { grid-column: auto; max-width: 220px; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid rgba(var(--rx-accent-rgb), .3); }
}
@media (min-width: 1200px) {
  .rx-flow__steps { grid-template-columns: 1fr 1fr 1fr 1.45fr 1fr 1fr; }
  .rx-flow__step + .rx-flow__step::before {          /* 工程の間のピンクの三角 */
    content: "";
    position: absolute;
    left: calc(-1 * clamp(14px, 1.6vw, 22px) / 2 - 8px);
    top: 44%;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 14px solid var(--rx-accent);
    opacity: .85;
  }
  .rx-flow__hand {
    display: block;
    position: absolute;
    right: clamp(16px, 3vw, 48px);
    top: clamp(70px, 6vw, 110px);
    margin: 0;
    font-size: clamp(1.125rem, 1rem + .7vw, 1.75rem);
    line-height: 1.45;
    text-align: left;
    transform: rotate(-8deg);
  }
  .rx-flow__hand::after {
    content: "";
    display: block;
    width: 78%;
    height: 10px;
    margin: 2px 0 0 auto;
    border-bottom: 2px solid currentColor;
    border-radius: 0 0 60% 50% / 0 0 100% 100%;
  }
}
/* =========================== スマートフォン =========================== */
@media (max-width: 599px) {
  .rx-scene__fig--note { grid-template-columns: minmax(0, 1fr); }
  .rx-scene__note { text-align: center; padding-left: 0; transform: none; }
  .rx-change__voices li { border-radius: 18px; }
}
@media (min-width: 1440px) { .rx-home__inner { max-width: none; } }   /* 旧 1280/1400px の上限を無効化（width で 1400px に揃える） */

/* =========================================================================
   幅ごとの調整（02〜11）
   ========================================================================= */
/* 11 最後のCTA: ボタンはヒーローと同じ見た目で中央に置き、幅はコピー幅に留める（2026-09-29 資料DLを外し1つ） */
.rx-home-cta__actions { flex-direction: column; align-items: center; gap: 12px; }
.rx-home-cta .rx-home-cta__btn { width: min(100%, 440px); }

/* 06 変化: 導入後（4カード＋変化5つ）を横に並べるのは、パネルに700px以上あるときだけ
   （769〜1024px は1カラム配置でパネルが全幅、1200px 以上は2カラムでも足りる） */
@media (min-width: 769px) and (max-width: 1024px), (min-width: 1200px) {
  .rx-change__after { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
}
@media (min-width: 1025px) and (max-width: 1199px) {
  .rx-change__before { grid-template-columns: minmax(0, 1fr); }   /* 求人票のモックと3つの声を縦に */
}

/* スマートフォン */
@media (max-width: 599px) {
  .rx-hs__eyebrow { font-size: .875rem; text-wrap: balance; }
  .rx-aio__nav > span:nth-of-type(n+3) { display: none; }          /* ブラウザ風モックのメニューは2項目まで */
  .rx-flow__member-name { font-size: .8125rem; }
}
@media (max-width: 480px) {
  .rx-change__cards { grid-template-columns: minmax(0, 1fr); }     /* 2列だと「採用アニメーション」が途中で折れる */
}

/* =========================================================================
   03. フェーズ（スマホ）: 6列の表を「コンテンツごとのカード」に組み替える（2026-09-28）
   - 横スクロールに頼ると「認知」「応募」の列が見切れる（ユーザー指摘）ため、≤768px では
     行＝カード、5つのセルは data-phase の列名を ::before で表示する。列見出し（thead）は読み上げ専用
   ========================================================================= */
.rx-phase__legend { display: none; }
@media (max-width: 768px) {
  .rx-phase__table-wrap { overflow: visible; padding: 0; background: none; border-radius: 0; }
  .rx-phase__table,
  .rx-phase__table tbody { display: block; min-width: 0; border-spacing: 0; }
  .rx-phase__table thead {                          /* 視覚的には隠し、読み上げには残す */
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .rx-phase__table tbody tr {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 26px rgba(28, 40, 74, .08);
  }
  .rx-phase__table tbody th {
    grid-column: 1 / -1;
    padding: 0 0 8px;
    border-radius: 0;
    border-bottom: 1px solid rgba(var(--rx-accent-rgb), .2);
    box-shadow: none;
    font-size: .9375rem;
  }
  .rx-phase__table tbody th img { width: 56px; }
  .rx-phase__table tbody td {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 2px;
    border-radius: 10px;
    background: rgba(var(--rx-accent-rgb), .06);
    box-shadow: none;
  }
  .rx-phase__table tbody td::before {
    content: attr(data-phase);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--hm-navy);
  }
  .rx-phase__yes { width: 26px; height: 26px; }
  .rx-phase__yes svg { width: 15px; height: 15px; }
  .rx-phase__no { width: 12px; height: 12px; margin: 7px 0; }
  /* 列見出しの説明（PCでは矢羽根の下に出るもの）を、SPでは表の下の凡例として出す */
  .rx-phase__legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px 14px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--rx-text-muted);
  }
  .rx-phase__legend b { display: inline-block; min-width: 4.2em; margin-right: .4em; font-weight: 900; color: var(--rx-accent-hover); }
}

/* =========================================================================
   07. 効果の確かめ方（旧 実績の数字のカードを流用。数値ではなく「問い」を主役にする）
   ========================================================================= */
.rx-home-stats__q {
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height: 1.35;
  color: var(--rx-accent);
}
.rx-home-stats__label { color: var(--hm-navy); }
.rx-home-stats__note  { color: var(--hm-navy); }

/* =========================================================================
   08. 流れ: 納期の目安（提案書 最終版 p25）
   ========================================================================= */
.rx-flow__note {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: clamp(.8125rem, .78rem + .2vw, .9375rem);
  line-height: 1.7;
  text-align: center;
  color: var(--rx-text-muted);
}

/* =========================================================================
   09. 料金（スライド⑧）
   ========================================================================= */
.rx-hs--price {
  padding-bottom: clamp(96px, 11vw, 160px);         /* 下端の街並みの分 */
  background: linear-gradient(180deg, #fff8fb 0%, #fdeef4 100%);
}
.rx-hs__city--price::before,
.rx-hs__city--price::after {
  width: clamp(200px, 32vw, 560px);
  aspect-ratio: 520 / 203;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.rx-hs__city--price::before { background-image: url("../images/home/price-city-l.webp"); }
.rx-hs__city--price::after  { background-image: url("../images/home/price-city-r.webp"); }
.rx-price__title { font-size: clamp(1.875rem, 1.2rem + 3vw, 4rem); }      /* 30 → 64px（スライドは見出しが大きい） */
.rx-price__hl {
  position: relative;
  display: inline-block;
  color: var(--rx-accent);
}
.rx-price__hl::after,
.rx-price__brand-text::after {                     /* 文字の下の筆の一本線 */
  content: "";
  position: absolute;
  left: 4%; right: 2%;
  bottom: -.04em;
  height: .11em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--rx-accent-rgb), 0), rgba(var(--rx-accent-rgb), .55) 12%, rgba(var(--rx-accent-rgb), .55) 88%, rgba(var(--rx-accent-rgb), 0));
  transform: rotate(-1.5deg);
  pointer-events: none;
}
.rx-price__lead { font-weight: 900; font-size: clamp(1.0625rem, .95rem + .6vw, 1.5rem); }
.rx-price__sub {
  max-width: 44em;
  margin: clamp(10px, 1.2vw, 16px) auto 0;
  font-size: clamp(.875rem, .84rem + .25vw, 1rem);
  line-height: 1.8;
  text-align: center;
  color: var(--hm-navy);
}
.rx-price__grid {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.rx-price__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.rx-price__chip {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(14px, 1.6vw, 24px) clamp(16px, 1.8vw, 28px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 30px rgba(28, 40, 74, .06);
}
.rx-price__chip-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(64px, 6vw, 92px);
  height: clamp(64px, 6vw, 92px);
  border-radius: 50%;
  background: rgba(var(--rx-accent-rgb), .12);
  color: var(--rx-accent);
}
.rx-price__chip-icon svg { width: 50%; height: 50%; }
.rx-price__chip-icon--blue { color: var(--rx-accent-2); --robot-face: #14306b; }
.rx-price__chip-name { margin: 0; font-family: var(--hm-sans); font-weight: 900; font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); line-height: 1.3; white-space: nowrap; color: var(--hm-navy); }
.rx-price__chip-text { margin: .3em 0 0; font-size: clamp(.875rem, .84rem + .2vw, 1rem); line-height: 1.55; color: var(--hm-navy); }
.rx-price__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  min-height: clamp(220px, 24vw, 340px);
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: linear-gradient(180deg, #fff3f7 0%, #fde7ef 100%);
  box-shadow: 0 10px 30px rgba(236, 45, 135, .12), inset 0 0 0 1px rgba(255, 255, 255, .8);
}
.rx-price__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  font-family: var(--hm-sans);
  font-weight: 900;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.2;
  color: var(--hm-navy);
}
.rx-price__brand-text { position: relative; display: inline-block; padding-bottom: .12em; }
.rx-price__mark { position: relative; width: .7em; height: .8em; }
.rx-price__mark::before,
.rx-price__mark::after {                           /* 「ハッ」と気づく2本の線 */
  content: "";
  position: absolute;
  width: 3px;
  height: .5em;
  border-radius: 2px;
  background: var(--rx-accent);
}
.rx-price__mark--l::before { left: 0;    top: .25em; transform: rotate(-35deg); }
.rx-price__mark--l::after  { left: .32em; top: 0;    transform: rotate(-35deg); }
.rx-price__mark--r::before { right: 0;    top: .25em; transform: rotate(35deg); }
.rx-price__mark--r::after  { right: .32em; top: 0;    transform: rotate(35deg); }
.rx-price__amount {
  display: flex;
  align-items: baseline;
  gap: .25em;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  color: var(--rx-accent);
}
.rx-price__unit   { font-family: var(--hm-sans); font-weight: 900; font-size: clamp(1.25rem, .9rem + 1.5vw, 2.25rem); color: var(--hm-navy); margin-right: .2em; }
.rx-price__figure { font-family: var(--hm-num); font-weight: 700; font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rx-price__yen    { font-family: var(--hm-sans); font-weight: 900; font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.rx-price__script {
  position: absolute;
  right: clamp(14px, 2vw, 32px);
  bottom: clamp(8px, 1.2vw, 18px);
  font-family: 'Dancing Script', cursive;
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  line-height: 1;
  color: rgba(var(--rx-accent-rgb), .55);
  transform: rotate(-10deg);
}
.rx-price__note { margin-top: clamp(28px, 3.4vw, 48px); font-weight: 700; }
.rx-price__legal {
  max-width: 44em;
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  font-size: clamp(.6875rem, .66rem + .15vw, .8125rem);
  line-height: 1.7;
  text-align: center;
  color: var(--rx-text-muted);
}

/* =========================================================================
   10. 導入事例・制作実績（スライド⑨）
   ========================================================================= */
.rx-hs--works { padding-bottom: clamp(96px, 11vw, 160px); }      /* 下端の街並みの分 */
.rx-hs__eyebrow--accent { font-weight: 900; color: var(--rx-accent); }
.rx-works__title { font-size: clamp(2rem, 1.2rem + 3.4vw, 4.5rem); letter-spacing: .02em; }   /* 32 → 72px（スライドは特大） */
.rx-works__list {
  list-style: none;
  margin: clamp(24px, 3vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 24px);
}
.rx-works__item {
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(28, 40, 74, .12);
}
.rx-works__item img { display: block; width: 100%; height: auto; aspect-ratio: 295 / 374; object-fit: cover; }
.rx-works__item:nth-child(5) { grid-column: 1 / -1; width: calc(50% - clamp(5px, .7vw, 12px)); justify-self: center; }   /* 2列のとき、5枚目は中央に */
.rx-works__actions { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 44px); }
.rx-works__btn { width: auto; max-width: 100%; white-space: normal; text-align: center; line-height: 1.5; }
@media (max-width: 480px) { .rx-works__btn { font-size: .9375rem; padding-inline: 1.2rem; } }
.rx-works__note {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: clamp(.75rem, .72rem + .2vw, .9375rem);
  line-height: 1.7;
  text-align: center;
  color: var(--hm-navy);
}
.rx-works__more { margin: 10px 0 0; text-align: center; }
.rx-works__link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 44px;
  font-weight: 700;
  font-size: .875rem;
  color: var(--rx-accent-hover);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.rx-works__link::after { content: ""; width: .4em; height: .4em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }

/* 表紙ボタン（本編があるもの）。「読む」ラベルとホバーは js/works-viewer.js が .is-ready を付けたときだけ出す
   （スマホはホバーが無いので、ラベルを常に出して押せることを伝える・DEVICE-RULES §6）。
   li の .rx-anim が transform を使うため、動きはボタンの中の画像にだけ付ける */
.rx-works__open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  font: inherit;
  color: inherit;
  cursor: default;
}
.rx-works__open.is-ready { cursor: pointer; }
.rx-works__open img { transition: transform .35s ease; }
.rx-works__open:focus-visible { outline: 3px solid var(--rx-accent); outline-offset: -3px; }   /* li の overflow で外側の枠が切れるため内側に */
.rx-works__read {
  position: absolute;
  right: clamp(6px, .8vw, 10px);
  bottom: clamp(6px, .8vw, 10px);
  display: none;
  align-items: center;
  gap: .3em;
  padding: .4em .85em .4em .7em;
  border-radius: var(--rx-radius-pill);
  background: rgba(16, 28, 77, .84);
  box-shadow: 0 4px 12px rgba(16, 28, 77, .25);
  font-weight: 700;
  font-size: clamp(.6875rem, .62rem + .25vw, .8125rem);
  line-height: 1.2;
  letter-spacing: .06em;
  color: #fff;
  transition: background-color .2s ease;
}
.rx-works__open.is-ready .rx-works__read { display: inline-flex; }
.rx-works__read svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rx-works__open.is-ready:focus-visible .rx-works__read { background: var(--rx-accent); }
@media (hover: hover) {
  .rx-works__open.is-ready:hover img { transform: scale(1.04); }
  .rx-works__open.is-ready:hover .rx-works__read { background: var(--rx-accent); }
}
@media (prefers-reduced-motion: reduce) { .rx-works__open img { transition: none; } }

/* 制作実績の読み画面（<dialog id="worksViewer">・js/works-viewer.js）。
   showModal() の最前面表示（top layer）なので z-index は使わない（固定CTA・ヘッダーより必ず上に出る）。
   上に題名と × の帯、その下を縦スクロールにして全ページを縦に並べる */
html.is-mv-open { overflow: hidden; }            /* 開いている間は後ろのページをスクロールさせない */
.rx-mv {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #090d20;                          /* 不透明（半透明だと後ろのヘッダーや表紙が透けて見える） */
  color: #fff;
  text-align: left;
  overflow: hidden;
}
.rx-mv[open] { display: flex; flex-direction: column; }
.rx-mv::backdrop { background: rgba(9, 13, 32, .6); }
@keyframes rx-mv-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .rx-mv[open] { animation: rx-mv-in .22s ease-out; } }

.rx-mv__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rx-mv__title {                                  /* 長い題名は2行まで（ホームの見出しは text-wrap: balance で折り返すため、1行省略ではなく行数で止める） */
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: clamp(.875rem, .8rem + .35vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.4;
}
.rx-mv__count { flex: none; font-size: .75rem; color: rgba(255, 255, 255, .7); }
.rx-mv__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.rx-mv__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.rx-mv__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;                 /* 端まで読んでも後ろのページへスクロールを渡さない */
  padding-top: clamp(0px, 2vw, 24px);
}
.rx-mv__scroll:focus { outline: none; }
.rx-mv__scroll:focus-visible { outline: 2px solid var(--rx-accent); outline-offset: -2px; }
/* ページの幅: スマホは画面幅いっぱい。PCは1ページが画面の高さに収まる幅（4:5）で、480〜720px の範囲。
   左右の暗い所を押すと閉じる（js）。<ol> は style.css のリセット対象外なので padding を自分で消す（BUGS.md 2026-09-28） */
.rx-mv__pages {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, max(calc((100vh - 96px) * .8), 480px), 720px);     /* 96px ＝ 題名の帯（約61px）＋上の余白（最大24px）＋ゆとり */
  width: min(100%, max(calc((100dvh - 96px) * .8), 480px), 720px);
  margin: 0 auto;
  padding: 0;
}
.rx-mv__page { background: rgba(255, 255, 255, .06); }   /* 読み込み前の下地（width/height で高さは先に確保される） */
.rx-mv__page img { width: 100%; height: auto; }

.rx-mv__end {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 4vw, 48px) 16px calc(clamp(28px, 4vw, 48px) + env(safe-area-inset-bottom));
}
.rx-mv__end-close {
  min-width: 200px;
  min-height: 48px;
  padding: 0 2em;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: var(--rx-radius-pill);
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .08em;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}
.rx-mv__close:focus-visible,
.rx-mv__end-close:focus-visible { outline: 3px solid var(--rx-accent); outline-offset: 2px; }
@media (hover: hover) {
  .rx-mv__close:hover,
  .rx-mv__end-close:hover { background: rgba(255, 255, 255, .22); }
}

/* =========================================================================
   11. 最後のCTA: 診断でわかること（3つ）・電話とメール（提案書 p26）
   ========================================================================= */
.rx-home-cta__list-head { margin: clamp(28px, 3.4vw, 44px) 0 -14px; font-weight: 900; font-size: .9375rem; text-align: center; color: var(--hm-navy); }
.rx-home-cta__list { grid-template-columns: repeat(auto-fit, minmax(240px, 400px)); }
.rx-home-cta__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-family: var(--hm-num);
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .5vw, 1.375rem);
  color: var(--hm-navy);
}
.rx-home-cta__contact a { min-height: 44px; display: inline-flex; align-items: center; }
.rx-home-cta__contact a:hover, .rx-home-cta__contact a:focus-visible { color: var(--rx-accent); }
.rx-home-cta__contact-sub { font-family: var(--hm-sans); font-weight: 500; font-size: .8125rem; color: var(--rx-text-muted); }
.rx-home-cta__contact-sep { width: 1px; height: 1.2em; background: rgba(28, 40, 74, .2); }
@media (max-width: 599px) { .rx-home-cta__contact-sep { display: none; } .rx-home-cta__contact { flex-direction: column; gap: 2px; } }

/* =========================== タブレット以上 =========================== */
@media (min-width: 600px) {
  .rx-price__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 769px) {
  .rx-works__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rx-works__item:nth-child(5) { grid-column: auto; width: auto; }
  .rx-works__item:nth-child(4) { grid-column: 1 / 2; }
  .rx-works__list { justify-items: stretch; }
}
@media (min-width: 1025px) {
  .rx-price__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr); align-items: stretch; }
  .rx-price__chip-icon { width: clamp(56px, 5vw, 92px); height: clamp(56px, 5vw, 92px); }
  .rx-price__chips { grid-template-columns: minmax(0, 1fr); }
  .rx-works__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rx-works__item:nth-child(4) { grid-column: auto; }
}
