@charset "UTF-8";

/* =====================================================================
   ポピンズ familycare リニューアル
   活用事例（VIPケア）
     一覧 … 固定ページ /familycare/service-vipcare/case-study/
     詳細 … カスタム投稿 case の single（renewal/single-case.php）
   Figma: 一覧 SP 368:28930 / 詳細 SP 368:29167
   ---------------------------------------------------------------------
   - header.php が is_page('service-vipcare/case-study') と is_singular('case')
     のときだけ renewal/css/common.css の後に読み込む
   - 変数（--rnw-*）は common.css の :root / [data-property] を利用する
   - 配色は body[data-property="vipcare"] で緑（Figma通り）になる。
     色の直書きはしない
   ===================================================================== */

/* =====================================================================
   0. ページ共通
   ===================================================================== */

.rnw-case,
.rnw-case *,
.rnw-case *::before,
.rnw-case *::after {
  box-sizing: border-box;
}

.rnw-case {
  /* セクション背景のグラデーション（Figma vipcare/gra2）。
     始点の #E6F0EE は common.css にトークンが無いため、このページ内で定義する。
     フッターのお問い合わせ（--rnw-contact-gra）とは停止位置が異なる別値。 */
  --rnw-case-gra: linear-gradient(to bottom, #E6F0EE 0%, #77D0BB 81.731%);

  /* 見出し帯・見出しバーの地色。セクション背景と交互になる（Figma 368:29231 / 368:29254）。
     既定は白背景のセクション用。--tint 側で白に差し替える。 */
  --rnw-case-band: rgba(216, 238, 233, 0.9);
  --rnw-case-bar: var(--rnw-bg2);

  /* 区切り線（common/border）。common.css にトークンが無いためここで持つ。 */
  --rnw-case-line: #E2E2E2;

  /* 固定ヘッダー（.rnw-header）の高さぶんの上余白 */
  padding-top: var(--rnw-header-h-sp);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
}

.rnw-case img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* :where() で詳細度0にして、下のコンポーネント側の指定を残す */
:where(.rnw-case) :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}

:where(.rnw-case) :where(ul) {
  list-style: none;
}

.rnw-case a { text-decoration: none; }


/* =====================================================================
   1. メインビジュアル（Figma 368:28932 一覧 / 368:29169 詳細）
   ===================================================================== */

.rnw-case-mv {
  padding-bottom: 24px;
  background-color: var(--rnw-bg3);   /* common/bg2 #EEE8DE */
}

/* TODO: 一覧のMV写真は未支給のためプレースホルダー。支給後は <img> に差し替える。
   詳細はアイキャッチ画像を入れる。 */
.rnw-case-mv__media {
  aspect-ratio: 375.317 / 240;
  overflow: hidden;
  background-color: #D9D9D9;
}

/* <picture> で囲っているので、中の img に高さ100%を効かせるため
   picture 自体もブロックにする（2026-09-21 MV写真を入れたときに追加）。 */
.rnw-case-mv__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.rnw-case-mv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma 368:28934：写真に 50px ぶん重ねる（写真240 − カード上端190） */
.rnw-case-mv__card {
  width: 343px;
  margin: -50px auto 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-case-mv__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rnw-case-mv__en {
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;
}

.rnw-case-mv__ja {
  color: var(--rnw-text);
  font-family: var(--rnw-font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}


/* =====================================================================
   2. セクションと見出し
   ===================================================================== */

.rnw-case-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 56px 16px;
  background-color: #FFFFFF;
}

/* ピックアップ・概要（Figma 368:28938 / 368:29174） */
.rnw-case-section--gra { background: var(--rnw-case-gra); }

/* 一覧：見出し → タグ → スライダーがそれぞれ56px（Figma 368:28999） */
.rnw-case-section--list { gap: 56px; }

/* 本文セクション：見出し帯 → 本文が56px（Figma 368:29231） */
.rnw-case-section--body { gap: 56px; }

/* 背景が薄緑になる回。見出し帯と見出しバーは白へ入れ替わる（Figma 368:29254） */
.rnw-case-section--tint {
  --rnw-case-band: rgba(255, 255, 255, 0.9);
  --rnw-case-bar: #FFFFFF;
  background-color: var(--rnw-bg2);
}

/* --- 見出し h2：帯なし（Figma 368:28940 / 368:29176）--- */
.rnw-case-h2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.rnw-case-h2__en {
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;
}

.rnw-case-h2__ja {
  color: var(--rnw-text);
  font-family: var(--rnw-font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

/* --- 見出し h2：帯あり（Figma 368:29233 高さ126）--- */
.rnw-case-h2--band {
  gap: 8px;
  justify-content: center;
  width: 100%;
  height: 126px;
  background-color: var(--rnw-case-band);
}

.rnw-case-h2--band .rnw-case-h2__en {
  width: 100%;
  font-size: 18px;
  letter-spacing: 1.2px;
}

.rnw-case-h2--band .rnw-case-h2__ja {
  width: 100%;
  font-size: 28px;
}


/* =====================================================================
   3. 絞り込み（Figma 1258:21236「Form Item / Selectbox」×2）
   「サービスを選択」「解決したい課題を選択」の2軸。SPは縦積み、PCは横並び。
   JS契約は renewal/js/service-vipcare-case.js の [data-rnw-case-filter] と、
   各 select の data-axis。option の value がタームのスラッグ（空＝すべて）。
   ===================================================================== */

.rnw-case-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.rnw-case-filter__field {
  position: relative;
  width: 100%;
}

/* select のUAスタイルを消してから当てる。右のアイコンぶんを padding で空ける */
.rnw-case-filter__select {
  width: 100%;
  padding: 8px 44px 8px 12px;
  border: 1px solid var(--rnw-main);
  border-radius: 4px;
  background-color: #FFFFFF;
  color: var(--rnw-caption);
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.rnw-case-filter__icon {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 24px;
  height: 24px;
  color: var(--rnw-caption);
  pointer-events: none;
  transform: translateY(-50%);
}

/* 緑グラデの上に置く枠（トップ 1258:9832）は枠線が白 */
.rnw-case-section--gra .rnw-case-filter__select { border-color: #FFFFFF; }


/* =====================================================================
   4. スライダー（Figma 368:28943 / 368:29010）
   JS契約は renewal/js/service-nanny.js の [data-rnw-slider]
   ===================================================================== */

.rnw-case-slider[hidden] { display: none; }

.rnw-case-slider {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* --- 操作UI（Figma 368:28945 幅239 / 高さ24） --- */
.rnw-case-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;
  height: 24px;
  margin-inline: auto;
}

.rnw-case-slider__btn {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.rnw-case-slider__btn img { width: 24px; height: 24px; }

/* 「前へ」は同じアセットを180度回転（Figma 368:28949） */
.rnw-case-slider__btn--prev img { transform: rotate(180deg); }

/* 端に到達したボタンは半透明（Figma 368:28946 opacity 50%） */
.rnw-case-slider__btn[disabled] { opacity: 0.5; cursor: default; }

/* --- 進捗バー（Figma 368:28952 160×1px ＋ 368:28953 33.25×3px r10） --- */
.rnw-case-slider__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: var(--rnw-accent);
}

.rnw-case-slider__bar-thumb {
  position: absolute;
  top: -1px;
  left: 0;
  width: 20.8%;                      /* 33.25 ÷ 160。JS側で実際の割合に更新 */
  height: 3px;
  border-radius: 10px;
  background-color: var(--rnw-accent);
}

/* --- カード列（Figma 368:28959 カード幅311 / gap12） ---
   セクションの左右パディング16pxを打ち消して全幅スクロールにする。 */
.rnw-case-slider__track {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: calc(100% + 32px);
  margin-inline: -16px;
  padding-inline: 16px;
  overflow-x: auto;
  /* overflow-x を指定すると Y 方向もクリップされ、カードの drop-shadow が
     上下で切れる（overflow-y: clip は auto と混ぜると hidden に矯正されるので使えない）。
     内側に影のぶんの余白を作り、同じだけ外へ戻すので見た目の位置は変わらない。 */
  padding-block: 40px;
  margin-block: -40px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
}

.rnw-case-slider__track::-webkit-scrollbar { display: none; }


/* =====================================================================
   5. 事例カード（Figma 368:28960 幅311）
   ===================================================================== */

.rnw-case-card {
  display: flex;
  flex: 0 0 311px;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--rnw-main);
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 3.771px 56.558px rgba(153, 115, 51, 0.08);
}

/* 絞り込みで隠したカード（service-vipcare-case.js が hidden を付ける）。
   .rnw-case-card の display:flex が UA の [hidden] より強いため明示する。 */
.rnw-case-card[hidden] { display: none; }

.rnw-case-card__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 16px;
  color: inherit;
}

/* --- 写真（Figma 368:28964 高さ200） --- */
.rnw-case-card__media {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #D9D9D9;
}

.rnw-case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rnw-case-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Figma 368:28967 トークン SP/text/large/medium */
.rnw-case-card__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* Figma 1258:21263 トークン SP/text/defalut/thin */
.rnw-case-card__lead {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* --- ユースケースのタグ（Figma 368:28970） --- */
.rnw-case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.rnw-case-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 5px;
  border: 0.745px solid var(--rnw-accent);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}


/* =====================================================================
   6. 概要カード（詳細 Figma 368:29180）
   ===================================================================== */

.rnw-case-infos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.rnw-case-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--rnw-main);
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 3.771px 56.558px rgba(153, 115, 51, 0.08);
}

.rnw-case-info__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-case-info__body {
  /* TODO[フォント] Figma指定は MOBO-SemiBold（未導入）。共通の日本語フォントで代替 */
  color: var(--rnw-caption);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
}


/* =====================================================================
   7. 目次（詳細 Figma 368:29207）
   本文セクションの見出しから renewal/single-case.php が組み立てる
   ===================================================================== */

.rnw-case-toc-section {
  padding: 56px 16px;
  background-color: var(--rnw-bg2);
}

.rnw-case-toc-card {
  padding: 16px;
  border: 1px solid var(--rnw-main);
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 3.771px 56.558px rgba(153, 115, 51, 0.08);
}

.rnw-case-toc,
.rnw-case-toc__sub {
  list-style: decimal;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* Figma 368:29215：番号ぶんのインデント27px */
.rnw-case-toc { padding-left: 27px; }

/* 見出しの塊どうしは16px、見出しと小見出しは4px（Figma 368:29212 / 368:29214） */
.rnw-case-toc > li + li { margin-top: 16px; }

/* Figma 368:29216：小見出しはさらに30px下げる */
.rnw-case-toc__sub {
  margin-top: 4px;
  padding-left: 30px;
}


/* =====================================================================
   8. 本文ブロック（詳細 Figma 368:29235）
   ===================================================================== */

.rnw-case-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Figma 368:29242：ブロック間の区切り線 */
.rnw-case-blocks__line {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rnw-case-line);
}

.rnw-case-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Figma 368:29237：地色の帯＋左の縦線。
   縦線はFigmaでは幅0のパスに9pxのstrokeを乗せているため、
   auto-layout上の位置（左から8px）を中心に9px幅で描く。 */
.rnw-case-block__title {
  position: relative;
  padding: 4px 8px 4px 20px;
  background-color: var(--rnw-case-bar);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
}

.rnw-case-block__title::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 3.5px;
  width: 9px;
  background-color: var(--rnw-accent);
}

.rnw-case-block__body {
  /* TODO[フォント] Figma指定は MOBO-SemiBold（未導入）。共通の日本語フォントで代替 */
  color: var(--rnw-caption);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* Figma 368:29241：本文から24px下に写真（ブロックのgap16との差ぶんを足す） */
.rnw-case-block__media {
  height: 200px;
  margin-top: 8px;
  overflow: hidden;
  background-color: #D9D9D9;
}

.rnw-case-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =====================================================================
   9. 0件表示
   ===================================================================== */

.rnw-case-empty {
  width: 100%;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
}


/* =====================================================================
   10. レスポンシブ（旧CSSと同じ 767/768 で分岐）
   ===================================================================== */

/* ---------- PC ----------
   PCデザイン未確定のため、SPレイアウトを375px幅で中央寄せする暫定対応。
   TODO: PCデザイン確定後にこのブロックを削除してPC用スタイルを追加する。 */
/* =====================================================================
   お問い合わせ（Figma 694:80477）
   ---------------------------------------------------------------------
   footer.php の .rnw-footer__contact と同じ内容だが、Figmaでは
   フッターとは別にページ本文にも置かれている。
   ボタンはこのページでは2つとも common/accent/red。
   （service-vipcare-voice.html は1つ目が vipcare/main で色が違う）
   ===================================================================== */

.rnw-case-contact {
  display: flex;
  flex-direction: column;
  gap: 24px;                          /* 見出し下端182 → カード開始206 */
  align-items: center;
  padding: 56px 16px;
  background: var(--rnw-contact-gra);
}

/* Figma 694:80479：白90%・高さ126 */
.rnw-case-contact__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 343px;
  height: 126px;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

/* Figma 694:80482：白／r8／px16 py24／gap32 */
.rnw-case-contact__card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 343px;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
}

.rnw-case-contact__block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* 2つとも common/accent/red（Figma 694:80488 / 694:80489） */
.rnw-case-contact__block .rnw-btn--main {
  background-color: var(--rnw-link);
}

/* Figma 694:80486 トークン SP/title/h3 */
.rnw-case-contact__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
}

/* 電話側の見出しだけ文字色がグレー（Figma 694:80495） */
.rnw-case-contact__title--tel { color: var(--rnw-caption); }

.rnw-case-contact__line {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rnw-caption);
}

/* Figma 694:80496 SP/text/defalut/bold（tracking0.168） */
.rnw-case-contact__hours {
  width: 100%;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

/* Figma 694:80497 Lusitana Bold 45 / lh1.8 / tracking1.2 */
.rnw-case-contact__tel {
  color: var(--rnw-text);
  font-family: var(--rnw-font-en);
  font-size: 45px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-case-contact__tel a { color: inherit; }


/* ---------- PC（Figma 820:9913）----------
   1440px幅・コンテンツ1280px・左右余白80px。
   余白は狭い画面でも詰まるよう clamp で可変にする
   （service-vipcare.css / service-vipcare-voice.css と同じ型）。
   ------------------------------------------------------------------ */
@media only screen and (min-width: 768px) {

  .rnw-case {
    --pc-pad: clamp(24px, 5.56vw, 80px);
    --pc-max: 1280px;
  }

  /* --- 見出し（Figma PC/title/h2） --- */
  .rnw-case-h2 { gap: 8px; }
  .rnw-case-h2__en { font-size: 24px; letter-spacing: 1.2px; }
  .rnw-case-h2__ja { font-size: 42px; }

  /* ---------- 1. メインビジュアル（Figma 820:9915） ----------
     写真は画面全幅400px、カードは中央に重ねる。 */
  .rnw-case-mv {
    position: relative;
    padding-bottom: 0;
  }

  .rnw-case-mv__media { aspect-ratio: 1440 / 400; }

  /* Figma 820:9920：640×158／p32 を中央に */
  .rnw-case-mv__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    max-width: calc(100% - var(--pc-pad) * 2);
    margin: 0;
    padding: 32px;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .rnw-case-mv__head { gap: 8px; }
  .rnw-case-mv__en   { font-size: 24px; letter-spacing: 1.2px; }
  .rnw-case-mv__ja   { font-size: 42px; }

  /* ---------- 2-3. ピックアップ／絞り込み（Figma 820:9922・820:9974） ----------
     見出し→中身はどちらも32px。 */
  .rnw-case-section {
    gap: 32px;
    padding: 120px var(--pc-pad);
  }

  .rnw-case-section--list { gap: 32px; }

  .rnw-case-h2,
  .rnw-case-slider {
    width: 100%;
    max-width: var(--pc-max);
  }

  /* Figma 1258:21236：幅1000・gap24の2カラム */
  .rnw-case-filter {
    flex-direction: row;
    gap: 24px;
    width: 100%;
    max-width: 1000px;
  }

  .rnw-case-filter__field { flex: 1 0 0; min-width: 0; }

  .rnw-case-filter__select {
    padding-right: 56px;
    font-size: 20px;
  }

  .rnw-case-filter__icon {
    width: 32px;
    height: 32px;
  }

  /* 「ユースケース・状況で絞り込む」はPCでは1行（Figma 820:9977 は高さ55） */
  .rnw-case-h2__ja br { display: none; }

  /* Figma 820:9928：コントロールは幅400（ボタン40／バー260） */
  .rnw-case-slider__ctrl {
    width: 400px;
    height: 40px;
  }

  .rnw-case-slider__btn,
  .rnw-case-slider__btn img {
    width: 40px;
    height: 40px;
  }

  .rnw-case-slider__bar { width: 260px; }

  /* セクションの左右余白を打ち消して画面端までスクロールさせる */
  .rnw-case-slider__track {
    width: calc(100% + var(--pc-pad) * 2);
    margin-inline: calc(var(--pc-pad) * -1);
    padding-inline: var(--pc-pad);
  }

  /* Figma 820:9944：カード幅400 */
  .rnw-case-card { flex-basis: 400px; }

  /* ---------- 4. お問い合わせ（Figma 820:10033） ----------
     カードが「フォーム｜電話」の2列になる。 */
  .rnw-case-contact {
    gap: 56px;
    padding: 56px var(--pc-pad);
  }

  .rnw-case-contact__head {
    width: 640px;
    max-width: 100%;
    height: auto;
    padding: 0 32px;
    background-color: transparent;
  }

  .rnw-case-contact__card {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: var(--pc-max);
    padding: 24px 16px;
    border-radius: 0;
  }

  .rnw-case-contact__block {
    flex: 1 0 0;
    min-width: 0;
    justify-content: flex-start;
    padding-inline: 40px;
  }

  /* 電話側は横に広い（Figma 820:10047 は 820px） */
  .rnw-case-contact__block:last-child { flex: 2 0 0; }

  .rnw-case-contact__title { font-size: 24px; }

  /* SPは横の点線、PCは縦の1本線（Figma 820:10046） */
  .rnw-case-contact__line {
    width: 0;
    height: auto;
    align-self: stretch;
    margin: 0;
    border-top: 0;
    border-left: 1px solid var(--rnw-caption);
  }

  .rnw-case-contact__block .rnw-btn {
    width: 100%;
    max-width: 480px;
  }

  /* ==================================================================
     詳細ページ（Figma 820:10178）
     一覧とはMV・概要・本文の組みが違うので --single で分ける。
     ================================================================== */

  /* --- MV：PCは写真だけ。タイトルは写真の下の別セクションになる
         （Figma 820:10180 → 820:10185）。DOMは一覧と同じ入れ子のまま、
         カードの重ねを解除して下に置く。 --- */
  .rnw-case--single .rnw-case-mv {
    padding: 0 var(--pc-pad) 120px;
    background: var(--rnw-case-gra);
  }

  .rnw-case--single .rnw-case-mv__media {
    width: calc(100% + var(--pc-pad) * 2);
    margin-inline: calc(var(--pc-pad) * -1);
  }

  /* Figma 820:10187：白90%／p32／幅1280 */
  .rnw-case--single .rnw-case-mv__card {
    position: static;
    width: 100%;
    max-width: var(--pc-max);
    margin: 80px auto 0;
    padding: 32px;
    transform: none;
    text-align: left;
  }

  /* --- 概要（Figma 820:10189）：カードが「見出し｜本文」の2列 --- */
  .rnw-case--single .rnw-case-section {
    padding: 56px var(--pc-pad);
  }

  .rnw-case-infos {
    gap: 24px;
    width: 100%;
    max-width: 1100px;
  }

  /* Figma 820:10193：p40／gap16／見出し幅200 */
  .rnw-case-info {
    flex-direction: row;
    gap: 16px;
    align-items: center;
    padding: 40px;
  }

  .rnw-case-info__title {
    flex-shrink: 0;
    width: 200px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
  }

  .rnw-case-info__body {
    font-size: 16px;
    font-weight: 500;
  }

  /* --- 目次（Figma 820:10211） --- */
  .rnw-case-toc-section {
    padding: 56px var(--pc-pad);
  }

  .rnw-case-toc-card {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding: 40px;
  }

  /* --- 本文セクション（Figma 820:10234 / 820:10256 / 820:10286） ---
     見出し帯は1280px、中身は1100px。 */
  .rnw-case--single .rnw-case-section--body {
    gap: 56px;
    padding: 120px var(--pc-pad);
  }

  .rnw-case-h2--band {
    height: auto;
    max-width: var(--pc-max);
    margin-inline: auto;
    padding: 32px;
  }

  .rnw-case-h2--band .rnw-case-h2__en { font-size: 24px; }
  .rnw-case-h2--band .rnw-case-h2__ja { font-size: 42px; }

  .rnw-case-blocks {
    max-width: 1100px;
  }

  /* Figma 820:10239：見出しの帯は左の縦線＋文字だけで、地色は付かない */
  .rnw-case-block__title {
    padding: 12px 8px 12px 20px;
    font-size: 24px;
  }

  .rnw-case-block__title::before {
    top: 12px;
    bottom: 12px;
  }

  .rnw-case-block__body { font-size: 16px; }

  /* Figma 820:10243：写真は幅いっぱい200px */
  .rnw-case-block__media { height: 200px; }
}

/* ---------- PC中間幅（1199px以下） ----------
   お問い合わせの2列は狭い画面だと入らないので縦に積む。 */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .rnw-case-mv__card { width: min(640px, 80%); padding: 24px; }
  .rnw-case-mv__ja   { font-size: 32px; }

  .rnw-case-contact__card {
    flex-direction: column;
    gap: 32px;
  }

  .rnw-case-contact__block { padding-inline: 0; }

  .rnw-case-contact__line {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--rnw-caption);
    border-left: 0;
  }

  /* 概要カードの「見出し200px｜本文」は狭い画面だと本文が痩せるので縦積み */
  .rnw-case-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
  }

  .rnw-case-info__title { width: auto; }

  .rnw-case--single .rnw-case-mv__card { padding: 24px; }
}

/* =====================================================================
   MVのタイトルカードを写真より手前に（2026-09-21）
   ---------------------------------------------------------------------
   カードは写真に -50px 重なるが、どちらも position 指定が無いため
   写真（置換インライン要素）が後から描かれてカードの上に乗っていた。
   カード側に重なり順を持たせる。PCは元から absolute だが揃えて指定する。
   ===================================================================== */
.rnw-case-mv__card {
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 768px) {
  .rnw-case-mv__card { z-index: 1; }
}

/* =====================================================================
   MVの写真（2026-09-21）
   ---------------------------------------------------------------------
   固定ページ本文を貼り替えずに差し替えられるよう、背景画像で出す。
   PC/SPで切り出しが違うので画像を2枚用意している。
   img/picture が入っている場合もそのまま上に載るので両対応。
   ===================================================================== */
.rnw-case-mv__media {
  /* 写真未支給時の #D9D9D9 プレースホルダーを打ち消す。
     img/picture が何らかの理由で出なくても、ここの背景写真が残る。 */
  background-color: transparent;
  background-image: url('../../img/service-vipcare-case/mv_case_sp.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media only screen and (min-width: 768px) {
  .rnw-case-mv__media {
    background-image: url('../../img/service-vipcare-case/mv_case_pc.jpg');
  }
}