@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");

/* ==========================================================================
   共通変数（デザイントークン）
   出典: docs/design-system.md §2（Figma のローカル変数＋各ページの実データ）
   ========================================================================== */
:root {
  /* 色 */
  --c-navy: #183d81;        /* メインテキストカラー */
  --c-blue: #2460cf;        /* 青（枠線・グラデ濃い側） */
  --c-blue-light: #5db7e9;  /* グラデ淡い側・トップのボタン */
  --c-blue01: #8dceff;      /* 色01 セクション背景（濃い水色） */
  --c-blue02: #e3f5ff;      /* 色02 セクション・カード背景（淡い水色） */
  --c-blue03: #a4e4ff;      /* 色03 カード背景（中間）・マーカー */
  --c-blue-pale: #f5fcff;   /* タグの地色 */
  --c-yellow: #fff7d6;      /* 回数券・注意ボックス */
  --c-pink: #ffdce7;        /* 装飾円・マーカー */
  --c-black: #151f2f;       /* Figma変数「黒」。実装では未使用（--c-navy に統一） */
  --c-bg: #f7f7f5;          /* ページ全体のベース背景 */
  --c-white: #ffffff;
  --c-line-green: rgba(0, 185, 0, 0.9); /* 追従CTA（LINE） */
  --c-reserve-blue: #0597e7;            /* 追従CTA（ご予約） */

  /* グラデーション */
  --c-gradient: linear-gradient(to left, #2460cf 0%, #5db7e9 80%);
  --c-gradient_header: linear-gradient(to left, rgba(0, 123, 199, 1) 0%, rgba(108, 102, 225, 1) 80%);

  /* フォント */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-ja: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  /* 幅・高さ */
  --inner: 1080px;          /* 基準コンテンツ幅 */
  --inner-wide: 1260px;     /* ページMVの背景帯・フッター中身 */
  --header-h: 112px;        /* ヘッダー占有高（上余白16px + 白バー80px + 下余白16px） */

  /* 影 */
  --shadow-hard: 8px 8px 0 rgba(36, 96, 207, 0.1); /* 写真・パネル・丸番号 */
  --shadow-hard-left: 8px 8px 0 rgba(36, 96, 207, 0.1);
  --shadow-header: 0 4px 4px rgba(86, 102, 131, 0.05);

  /* 角丸 */
  --r-card: 16px;
  --r-panel: 32px;
  --r-band: 120px;
  --r-pill: 999px;
}

/* ==========================================================================
   ルートフォントサイズ（サイト全体の rem 基準）
   --------------------------------------------------------------------------
   サイト内の font-size は px ではなく rem で指定し、ここで決める html の
   フォントサイズに比例して画面幅に応じて拡縮する。

   基準は 1rem = 16px（Figma カンプ 1440px 幅の等倍）。
   換算式は px ÷ 16 = rem（逆は rem × 16 = px）。16 は 2 の 4 乗なので、
   整数 px は必ず小数4桁以内で割り切れる（端数は出ない）。

   ── px → rem 対比表（1px刻み）──────────────────────────────────
     10px = 0.625     20px = 1.25      30px = 1.875     40px = 2.5
     11px = 0.6875    21px = 1.3125    31px = 1.9375    41px = 2.5625
     12px = 0.75      22px = 1.375     32px = 2         42px = 2.625
     13px = 0.8125    23px = 1.4375    33px = 2.0625    43px = 2.6875
     14px = 0.875     24px = 1.5       34px = 2.125     44px = 2.75
     15px = 0.9375    25px = 1.5625    35px = 2.1875    45px = 2.8125
     16px = 1         26px = 1.625     36px = 2.25      46px = 2.875
     17px = 1.0625    27px = 1.6875    37px = 2.3125    47px = 2.9375
     18px = 1.125     28px = 1.75      38px = 2.375     48px = 3
     19px = 1.1875    29px = 1.8125    39px = 2.4375

   ── 48px 超（見出し・欧文大見出しで使う値）──────────────────────
     50px = 3.125     64px = 4         88px = 5.5      112px = 7
     52px = 3.25      72px = 4.5       96px = 6        120px = 7.5
     56px = 3.5       80px = 5        102px = 6.375
     60px = 3.75

   ※ 0.5px 単位が必要なときも同じ式で出せる（例: 14.6px = 0.9125 /
     15.6px = 0.975 / 20.8px = 1.3 / 29.6px = 1.85）。カンプの実測値が
     整数でない場合はそのまま px ÷ 16 して小数4桁まで書く。

   スケールの考え方:
   - PC（992px〜）: コンテンツ幅 1080px（--inner）を基準に画面幅へ比例させる。
     16px ÷ 1080px = 1.4815vw。コンテンツ幅が最大になる 1080px 以上では
     16px（カンプ等倍）で固定され、それより狭い範囲で比例縮小する（下限 14px）。
   - タブレット（768〜991px）: 16px 固定。このレンジは各CSSのメディアクエリで
     文字サイズを手調整しているため、基準そのものは動かさない。
   - SP（〜767px）: 375px を基準に比例（16px ÷ 375px = 4.2667vw）。
     375px 以上は 16px で固定されるので既存の見た目は変わらず、
     375px 未満の小型端末でだけ縮小する（下限 13px）。

   スケールを調整したいときは、下の3つの clamp() だけを触れば全ページに効く。
   ========================================================================== */
html {
  font-size: 16px;
}

/* PC: コンテンツ幅 1080px 基準で比例（1080px 以上は 16px 固定 / 下限 14px） */
@media (min-width: 992px) {
  html {
    font-size: clamp(14px, 1.4815vw, 16px);
  }
}

/* SP: 375px 基準で比例（375px 以上は 16px 固定 / 下限 13px） */
@media (max-width: 767.98px) {
  html {
    font-size: clamp(13px, 4.2667vw, 16px);
  }
}

/* ==========================================================================
   リセット
   ========================================================================== */
* {
  box-sizing: border-box;
}

/* カンプは装飾円や写真を画面の外まで置く（見切れる）作りなので、
   横方向はみ出しはクリップして横スクロールを出さない。
   body だけに overflow-x: hidden を付けてもビューポート側は
   html の overflow を見るため止まらないので、html 側にも付ける。 */
html {
  overflow-x: hidden;
  /* アンカーリンク（#id）の着地点が固定ヘッダーに隠れないよう、
     スクロール位置をヘッダーぶん下げる。ヘッダーは外周padding16px＋バー80px＝96pxなので
     余白24pxを足した120px。991px以下はヘッダーが48pxなので下のメディアクエリで64pxにする。
     ページ内リンク・ページ読み込み時のハッシュ・ブラウザの検索ジャンプすべてに効く。
     ※ヘッダーの高さを変えたときはこの値も直すこと（→ docs/design-system.md §38） */
  scroll-padding-top: 120px;
  scroll-behavior: smooth;
}

body:has(form) {
  scroll-behavior: auto;
}


@media (max-width: 991.98px) {
  html { scroll-padding-top: 64px; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--c-bg);
  color: var(--c-navy);
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

a:hover {
  opacity: 0.75;
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
}

/* ==========================================================================
   レイアウト（l-）
   ========================================================================== */

/* 基準コンテンツ幅 1080px（左右余白 180px） */
.l-inner {
  width: 100%;
  max-width: var(--inner);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* 広い版 1260px（ページMV背景帯・フッター中身） */
.l-inner--wide {
  max-width: var(--inner-wide);
}

/* セクション背景の大きな角丸帯 */
.l-band {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}

.l-band--blue01 { background: var(--c-blue01); }
.l-band--blue02 { background: var(--c-blue02); }
.l-band--blue03 { background: var(--c-blue03); }
.l-band--white  { background: var(--c-white); }

.l-band--r { border-radius: var(--r-band) 0 0 var(--r-band); }
.l-band--l { border-radius: 0 var(--r-band) var(--r-band) 0; }

/* ==========================================================================
   共通部品：ボタン・リンク（c-btn / c-btn-text / c-float-cta）
   ========================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 236px;
  min-height: 48px;
  padding: 8px 40px;
  border-radius: var(--r-pill);
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

.c-btn p { margin: 0; }

.c-btn--primary { background: var(--c-gradient); color: var(--c-white); }
.c-btn--light   { background: var(--c-blue-light); color: var(--c-white); }
.c-btn--sub     { background: var(--c-blue03); color: var(--c-navy); }
.c-btn--blue01  { background: var(--c-blue01); color: var(--c-white); }
.c-btn--ghost   { background: var(--c-white); color: var(--c-navy); }

.c-btn--lg { min-width: 364px; min-height: 64px; }

.c-btn--sm {
  min-width: 181px;
  min-height: 48px;
  padding: 6px 24px;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

/* テキストリンク（下線＋アイコン） */
.c-btn-text {
  display: inline-flex;
  align-items: center;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--c-navy);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-btn-text--arrow::after,
.c-btn-text--external::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 矢印「>」（画像を増やさず CSS の三角で表現） */
.c-btn-text--arrow::after {
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* 外部リンクアイコン（カンプ 20px。マタニティのメニュー行など） */
.c-btn-text--external::after {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  background-image: url("/system_panel/uploads/images/common_icon-external.svg");
}

/* 追従CTA（LINE・ご予約） */
.c-float-cta {
  position: fixed;
  right: 44px;
  bottom: 24px;
  z-index: 90;
  display: flex;
  gap: 12px;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* フッターに到達したら消す（assets/js/float-cta.js が付け外しする）。
   visibility も切るのでリンクを踏めなくなる。
   ※ JSが動かない環境では is-hidden が付かず、従来どおり出たままになる */
.c-float-cta.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  pointer-events: none;
}

.c-float-cta-btn {
  display: block;
  width: 143px;
  height: 143px;
  border-radius: 50%;
  overflow: hidden;
}

.c-float-cta-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.c-float-cta-btn--line    { background: var(--c-line-green); }
.c-float-cta-btn--reserve { background: var(--c-reserve-blue); }

/* ==========================================================================
   共通部品：ページ共通の枠組み
   ========================================================================== */

/* パンくず（固定ヘッダーの下に置く） */
.c-breadcrumb {
  padding-top: calc(var(--header-h) + 6px);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.7;
}

.c-breadcrumb-current::before {
  content: "＞";
  margin: 0 0.5em;
}

@media (max-width: 991.98px) {
  .c-breadcrumb {
    padding-top: 60px;
  }
  
}


/* --------------------------------------------------------------------------
   下層ページのメインビジュアル
   カンプ改訂版（Figma 1259- 番台）の仕様。旧版（996- 番台）にあった
   水色の背景帯（240px角丸）は無くなり、ページ背景の上に
   装飾円＋写真2枚を置く作りに変わっている。
   ページ側では padding-bottom・写真/装飾円の位置だけを指定する。
   -------------------------------------------------------------------------- */
.c-page-mv {
  position: relative;
  padding-top: 62px;
}

/* 下層ページのMV（「Pick Up Menu」系・記事型の両方）は、写真を left / width の％で
   置いて画面右端まで見切れさせている。
   そのままだと画面が広いほど写真も一緒に拡大して右端に張り付き続けるので、
   MVの枠自体をカンプ幅 1440px で止めて中央寄せにする。
   1440px を超える画面では、写真・装飾円・白ボックスがまとめてカンプの
   レイアウトのまま固定され、左右に余白（ページ背景）が出る。
   ※ 1440px 以下では max-width が効かないので従来どおり画面幅に比例する。 */
.c-page-mv--pickup,
.c-page-mv--article {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.c-page-mv-body {
  position: relative;
  z-index: 1;
  /* margin-left: 272px; */
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
}

.c-page-mv .c-deco-circle { z-index: 0; }

.c-page-mv-en {
  font-family: var(--font-base);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--c-blue-light);
}

/* 欧文見出しをグラデ文字にする版（はじめての方へ） */
.c-page-mv-en--grad {
  background: var(--c-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.c-page-mv-title {
  margin-top: 8px;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.2em;
}

.c-page-mv-sub {
  margin-top: 40px;
  font-family: var(--font-ja);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.c-page-mv-lead {
  max-width: 540px;
  margin-top: 40px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.1em;
}

.c-page-mv-lead + .c-page-mv-lead { margin-top: 22px; }

.c-page-mv-photo {
  position: absolute;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-hard);
}

/* 「Pick Up Menu」ラベル（ペルケア／マタニティ／交通事故／出張整体）
   改訂版カンプ（1259- 番台・ペルケアで確認）では旧版の「グラデの帯」ではなく
   24px のグラデ文字になっている */
.c-page-mv-label {
  font-family: var(--font-base);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  background: var(--c-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* MVの白ボックス（Pick Up Menu ＋ ページ名の h1）
   「Pick Up Menu」系ページ共通（ペルケア／マタニティ／交通事故／出張整体）。
   カンプでは高さ125px・x180 固定で、幅だけページごとに違うのでページ側で指定する。
   左端の 8px のグラデ帯はカンプでは画像だが CSS のグラデーションで再現している。 */
.c-page-mv-head {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.p-homevisit-mv-head,
.p-pelcare-mv-head,
.p-maternity-mv-head,
.p-accident-mv-head {
  position: relative;
  z-index: 1;
  padding: 20px 64px;
  background: var(--c-white);
  border-radius: 0 var(--r-card) var(--r-card) 0;
}

.p-homevisit-mv-head::before,
.p-pelcare-mv-head::before,
.p-maternity-mv-head::before,
.p-accident-mv-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(to bottom, #2460cf 0%, #5db7e9 100%);
}


/* SP未満 1060pxまで */
@media (min-width: 767px) and (max-width: 1060px) {
  .p-homevisit-mv-head,
  .p-pelcare-mv-head,
  .p-maternity-mv-head,
  .p-accident-mv-head,
  .c-page-mv-catch {
    margin-left: 20px;
  }
}




/* 白ボックスの中の h1（カンプ Zen Maru Bold 40px・字送り 0.2em）
   字送りは最後の1文字の後ろにも入るので、負のマージンで相殺して
   カンプどおりの幅（文字幅＋左右64px）で折り返さないようにする */
.c-page-mv-head .c-page-mv-title {
  margin-top: 12px;
  margin-right: -0.2em;
  font-size: 2.5rem;
  line-height: 1.2;
  letter-spacing: 0.2em;
}

/* MVのキャッチコピー（白ベタ・角丸なし・文字幅ぶんの箱を縦に並べる） */
.c-page-mv-catches {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 24px;
  /* margin-left: 180px; */
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.c-page-mv-catch {
  padding: 10px;
  background: var(--c-white);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
}

.c-page-mv-catch + .c-page-mv-catch { margin-top: 8px; }

/* 装飾円 */
.c-deco-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.c-deco-circle--pink  { background: var(--c-pink); }
.c-deco-circle--cream { background: var(--c-yellow); }
.c-deco-circle--blue  { background: var(--c-blue02); }

.c-deco-circle--sm { width: 78px;  height: 78px; }
.c-deco-circle--md { width: 122px; height: 122px; }
.c-deco-circle--lg { width: 158px; height: 158px; }
.c-deco-circle--xl { width: 240px; height: 240px; }

/* --------------------------------------------------------------------------
   装飾円をふわふわ浮かせる（全ページ共通・2026-09-28）

   ・動かすのは transform だけ（GPU処理）。装飾円は left/top/right/bottom で
     位置を決めているので、transform で動かしても位置の指定とはぶつからない。

   ・**HTMLを一切変えずに1つずつ動きを変えるため**、次の2つを掛け合わせている。
       色のモディファイア（--blue / --pink / --cream / --blue-small）… 基本の周期と振れ幅
       同じ親の中での並び順（:nth-child）              … 周期の上乗せと開始位置のズレ
     装飾円はどのページでも連続した兄弟として並んでいるので、
     1グループ（最大4個）の中では :nth-child が必ず全部違う値になり、
     結果として**同じ周期の円が1つも出ない**。

   ・遅れ（--dl）を負の値にしているのがポイント。読み込んだ時点でそれぞれ
     途中の状態から始まるので、全部が同時に動き出さない。

   ・色のモディファイアが無い円（first の --blue-lower など）は
     .c-deco-circle の既定値が使われるので、放っておいても動く。
   -------------------------------------------------------------------------- */
.c-deco-circle {
  --dur: 8s;   /* 基本の周期（色ごとに上書き） */
  --fx: 7px;   /* 左右の振れ幅 */
  --fy: 14px;  /* 一番上がったときの高さ */
  --ds: 0s;    /* 周期の上乗せ（並び順ごと） */
  --dl: -0.4s; /* 開始位置のズレ（並び順ごと） */
  animation: c-deco-float calc(var(--dur) + var(--ds)) ease-in-out var(--dl) infinite;
}

@keyframes c-deco-float {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(var(--fx), calc(var(--fy) * -0.55)); }
  50%      { transform: translate(0, calc(var(--fy) * -1)); }
  75%      { transform: translate(calc(var(--fx) * -1), calc(var(--fy) * -0.45)); }
}

/* 色ごとの基本値。大きい円ほどゆっくり大きく、小さい円ほど速く小さく動かして
   重さの違いを出している */
.c-deco-circle--blue       { --dur: 9s;   --fx: 8px; --fy: 16px; }
.c-deco-circle--pink       { --dur: 8.2s; --fx: 7px; --fy: 13px; }
.c-deco-circle--cream      { --dur: 7.4s; --fx: 6px; --fy: 12px; }
.c-deco-circle--blue-small { --dur: 6.6s; --fx: 5px; --fy: 11px; }

/* 並び順ごとの上乗せ。0 / 0.3 / 1.2 / 2.3 秒は、上の周期どうしの差
   （0.6 / 0.8 / 1.0 / 1.4 / 1.6 / 2.4秒）と重ならない値を選んである。
   そのため「色 × 並び順」の20通りの周期がすべて別の値になる */
.c-deco-circle:nth-child(4n + 1) { --ds: 0s;   --dl: -0.4s; }
.c-deco-circle:nth-child(4n + 2) { --ds: 0.3s; --dl: -2.3s; }
.c-deco-circle:nth-child(4n + 3) { --ds: 1.2s; --dl: -3.6s; }
.c-deco-circle:nth-child(4n)     { --ds: 2.3s; --dl: -1.5s; }

/* セクション見出し（欧文＋点線＋和文サブ） */
.c-sec-title { text-align: center; }

.c-sec-title-en {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 4px dotted var(--c-navy);
  font-family: var(--font-base);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--c-navy);
}

.c-sec-title--lg .c-sec-title-en { font-size: 3rem; }

/* 欧文をグラデ文字にする版（点線は青の実線色で残す） */
.c-sec-title--grad .c-sec-title-en {
  background: var(--c-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom-color: var(--c-blue);
}

/* 点線を出さない版（改訂版カンプの FIRST VISIT / GALLERY など） */
.c-sec-title--nodot .c-sec-title-en {
  padding-bottom: 0;
  border-bottom: 0;
}

.c-sec-title-ja {
  margin-top: 12px;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

.c-sec-title-ja--sm {
  margin-top: 10px;
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* 点線区切り（原則は直前の見出しの border-bottom で表現する） */
.c-dotted {
  border-bottom: 4px dotted var(--c-navy);
}

/* ==========================================================================
   共通部品：パネル・カード
   ========================================================================== */

/* POINT の白パネル（太枠） */
.c-point-panel {
  position: relative;
  max-width: 890px;
  margin: 0 auto;
  padding: 64px;
  background: var(--c-white);
  border: 4px solid var(--c-blue);
  border-radius: var(--r-card);
}

.c-point-panel--yellow { background: var(--c-yellow); }

/* --------------------------------------------------------------------------
   POINT の見出し行（グースケ ＋ POINT ラベル ＋ 和文見出し）
   改訂版カンプのペルケア／マタニティで寸法が完全に一致する。
   親に d-flex align-items-center を付けて使う。
   -------------------------------------------------------------------------- */
.c-point-head-mascot {
  flex: none;
  width: 127px;
  margin-right: 16px;
}

.c-point-head-text { min-width: 0; }

/* 「POINT」（Noto Bold 24px のグラデ文字＋幅75pxの点線） */
.c-point-label {
  display: inline-block;
  min-width: 75px;
  padding-bottom: 16px;
  border-bottom: 4px dotted var(--c-blue);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  background: var(--c-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.c-point-title {
  margin-top: 16px;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

/* 紺の吹き出しラベル（POINT / 企業様向け） */
.c-point-badge {
  position: relative;
  display: inline-block;
  padding: 8px 40px;
  background: var(--c-navy);
  border-radius: var(--r-card);
  color: var(--c-white);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.c-point-badge::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 0;
  height: 0;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid var(--c-navy);
}

/* 面パネル（カード地） */
.c-panel {
  padding: 48px;
  border-radius: var(--r-card);
}

.c-panel--blue01 { background: var(--c-blue01); }
.c-panel--blue02 { background: var(--c-blue02); }
.c-panel--blue03 { background: var(--c-blue03); }
.c-panel--yellow { background: var(--c-yellow); }
.c-panel--white  { background: var(--c-white); }

/* 白パネル（細枠・大角丸） */
.c-panel--outline {
  background: var(--c-white);
  border: 2px solid var(--c-blue);
  border-radius: var(--r-panel);
  padding: 48px 64px;
}

.c-panel-title {
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-card-title {
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* 「MENU / FEATURE / STEP」ラベル＋丸番号 */
.c-numlabel-label {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--c-navy);
  min-width: 86px;
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
}

.c-numlabel-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: 12px;
  background: var(--c-white);
  border: 2px solid var(--c-navy);
  border-radius: var(--r-pill);
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

/* 縦積みカード */
.c-card > * + * { margin-top: 16px; }
.c-card img { border-radius: var(--r-card); }

/* 横長カード（画像＋テキスト） */
.c-feature-row + .c-feature-row { margin-top: 24px; }
.c-feature-row img { border-radius: var(--r-card); }

/* ==========================================================================
   共通部品：タグ・ラベル・リスト
   ========================================================================== */

.c-tag-list { gap: 8px; }
.c-tag-list--sm { gap: 6px 8px; }

.c-tag {
  display: inline-flex;
  align-items: center;
  /* letter-spacing は最後の1文字の後ろにも入るため、右 padding で相殺する */
  padding: 8px calc(16px - 0.2em) 8px 16px;
  background: var(--c-blue-pale);
  border: 1px solid var(--c-navy);
  border-radius: var(--r-pill);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.c-tag--sm { font-size: 0.875rem; }

.c-tag--fill {
  background: var(--c-blue01);
  border-color: transparent;
}

/* 枠なし・16px・字送りなしの塗りタグ（マタニティのメニュー分類「マタニティ」「産後」） */
.c-tag--md {
  padding: 4px 16px;
  border-color: transparent;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

.c-tag--yellow { background: var(--c-yellow); border-color: transparent; }
.c-tag--pink   { background: var(--c-pink);   border-color: transparent; }

/* 紺枠を残したまま地色だけ白にする版（出張整体の症状タグ・健康保険が使える症状）
   既定の c-tag は地色が --c-blue-pale なので、有色の帯の上に置くページで使う */
.c-tag--white { background: var(--c-white); }


/* 白ベタのpillタグ（施術分類ラベル: 手技療法 / 物理療法） */
.c-tag--plain {
  background: var(--c-white);
  border-color: transparent;
}

/* 機器写真＋「←使うのはコレ」の注記（施術案内・交通事故） */
.c-device {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.c-device img { display: block; }

.c-device-note {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* 枠線タグ（所要時間など） */
.c-note-tag {
  display: inline-block;
  padding: 4px 24px;
  border: 1px solid var(--c-navy);
  border-radius: var(--r-card);
  font-size: 1rem;
  font-weight: 500;
}

/* 紺ベタのラベル帯 */
.c-label-band {
  display: inline-block;
  padding: 4px 24px;
  background: var(--c-navy);
  color: var(--c-white);
  font-family: var(--font-ja);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.c-label-band--blue { background: var(--c-blue); }

.c-label-band--pill {
  padding: 8px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-base);
}

/* テキストマーカー（span が使えないので p を分割して並べる） */
.c-marker {
  padding: 0 8px;
  background: var(--c-blue03);
}

.c-marker--pink  { background: var(--c-pink); }
.c-marker--blue  { background: var(--c-blue03); }
.c-marker--white { background: var(--c-white); }

/* 文中の一部だけ太字にする・文字サイズを変える
   span が使えないため p を分割し、この親の中だけ p をインライン表示にする。
   装飾したい p にだけ c-rich-b（太字）などを当てる。
   段落の区切りは c-rich を段落ごとに置いて表現する。 */
.c-rich > p { display: inline; }

.c-rich-b { font-weight: 700; }

/* 箇条書き（ul/li が使えないので p の ::before で点を描く） */
.c-list-item {
  position: relative;
  padding-left: 1.2em;
  font-size: 1rem;
  line-height: 1.8;
}

.c-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--c-navy);
  border-radius: 50%;
}

/* 写真（角丸＋硬い影） */
.c-photo {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-hard);
}

.c-photo--flat { box-shadow: none; }

/* 注記・小さい本文 */
.c-note {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.7;
}

/* ==========================================================================
   共通部品：コンテンツブロック
   ========================================================================== */

/* 「こちらの施術が オススメ です！」＋写真3枚 */
.c-reco {
  padding-top: 36px;
  border-top: 1px solid rgba(24, 61, 129, 0.25);
}

.c-reco-head {
  gap: 4px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.c-reco .row {
  margin-top: 28px;
  margin-left: 0;
  margin-right: 0;
}

.c-reco .row > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

.c-reco img {
  width: 100%;
  border-radius: var(--r-card);
}

.c-reco-caption {
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

/* 料金パネル */
.c-price-row + .c-price-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(24, 61, 129, 0.25);
}

.c-price-name {
  font-size: 1.25rem;
  font-weight: 700;
}

.c-price-num {
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.c-price-unit {
  font-size: 1.25rem;
  font-weight: 700;
}

/* 回数券ボックス（黄） */
.c-ticket-box {
  padding: 24px 32px;
  background: var(--c-yellow);
  border-radius: var(--r-card);
}

.c-ticket-box--outline {
  padding: 48px 64px;
  border: 2px solid var(--c-navy);
}

.c-ticket-title {
  font-size: 1rem;
  font-weight: 700;
}

/* CTAセクション（見出し＋ボタン2つ＋マスコット） */
.c-cta {
  position: relative;
  padding-top: 56px;
  padding-bottom: 56px;
  text-align: center;
}

.c-cta-title {
  font-family: var(--font-ja);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.c-cta-btns {
  gap: 16px;
  margin-top: 32px;
}

.c-cta-mascot {
  position: absolute;
  right: 110px;
  bottom: 32px;
  /* width: 142px; */
}

/* ==========================================================================
   SPメニューパネル（ハンバーガー展開時）
   ========================================================================== */
.c-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(24, 61, 129, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* SPメニューのパネル（カンプ 412-11375。SP 375px 幅で 343×598・左下だけ角丸32px）
   画面右上から下ろす形で、高さは中身なり。左に32px残してオーバーレイを見せる。 */
.c-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 32px);
  max-width: 343px;
  max-height: 100vh;
  padding-bottom: 16px;
  background: var(--c-white);
  border-bottom-left-radius: 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.is-menu-open .c-menu-overlay { opacity: 1; visibility: visible; }
.is-menu-open .c-menu-panel { transform: translateX(0); }

/* パネル直下の要素はすべて 16px 間隔（Follow Me ボタンだけ下で 4px に詰める） */
.c-menu-panel > * + * { margin-top: 16px; }

/* ロゴ行（高さ48px・×ボタンはパネル右端まで寄せる） */
.c-menu-head {
  width: 100%;
  min-height: 48px;
  padding-left: 16px;
}

/* ロゴはヘッダーと同じ画像を高さ22pxで使う（院名が Kosugi Maru のため画像） */
.c-menu-logo img { display: block; height: 22px; }

/* ×ボタン（48×48のタップ領域。×はCSSで描く） */
.c-menu-close {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

.c-menu-close p { position: absolute; left: -9999px; }

.c-menu-close::before,
.c-menu-close::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 15px;
  width: 18px;
  height: 2px;
  background: var(--c-navy);
}

.c-menu-close::before { transform: rotate(45deg); }
.c-menu-close::after  { transform: rotate(-45deg); }

/* ナビ（上下1px罫。罫は左右16px内側まで） */
.c-menu-nav {
  width: calc(100% - 32px);
  /* 罫線から先頭文字まで16px。内訳はここの12px＋各リンクの padding 4px */
  padding: 12px 0;
  border-top: 1px solid var(--c-navy);
  border-bottom: 1px solid var(--c-navy);
}

/* 項目の送りはカンプどおり25px（文字17px＋間隔8px）。
   間隔を margin ではなく padding で持たせて、タップ領域を少しでも広く取る */
.c-menu-nav a {
  display: block;
  padding: 4px 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

/* 追従CTAと同じ丸ボタンを80pxで2つ並べる（画像も追従CTAと共用） */
.c-menu-cta { gap: 8px; padding: 5px; }

/* 追従CTA側のレスポンシブ指定（96px / 76px）に勝たせるため詳細度を上げている */
.c-menu-cta .c-float-cta-btn { width: 80px; height: 80px; }

.c-menu-insta-lead {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* Instagram の Follow Me ボタン（白地・紺2px枠・硬い影）
   Instagramマークは隣の文言と意味が重複する装飾なので background-image で置く。
   上下 padding はカンプの6pxではなく4px。CSSでは枠線2px×2も高さに含まれるため、
   合計をカンプどおりの44pxに合わせている（2+4+32+4+2）。 */
.c-follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  padding: 4px 48px;
  background: var(--c-white);
  border: 2px solid var(--c-navy);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 0 rgba(24, 61, 129, 0.2);
}

.c-follow-btn p {
  padding-left: 43px; /* アイコン31px＋間隔12px */
  background: url("/system_panel/uploads/images/common_icon-instagram.png") no-repeat left center / 31px 31px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

.c-menu-panel > .c-follow-btn { margin-top: 4px; }

/* お問い合わせは共通ボタンをパネル幅いっぱいで使う */
.c-menu-panel .c-btn { width: calc(100% - 32px); max-width: none; }

.c-menu-copy {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

/* ==========================================================================
   ユーティリティ：改行の出し分け（nobr_pc / nobr_sp）
   --------------------------------------------------------------------------
   デザインの改行位置が PC と SP で違うとき、テキスト側（<br> の親。
   p / h1〜h5 / div など）にクラスを付けて、中の <br> をまとめて制御する。
   Smooth CMS では <br> 自体にクラスを付けられないため、この形にしている。
   「nobr」＝ その画面幅では改行しない（中の <br> を消す）という意味。

     class="nobr_pc" … PC（992px〜）では中の <br> を無効化 ＝ SP だけ改行する
     class="nobr_sp" … SP・タブレット（〜991px）で無効化 ＝ PC だけ改行する

     例1）PC はカンプどおり改行し、SP では自然に折り返させる（いちばん多い使い方）
     <h2 class="c-point-title nobr_sp">産前＆産後のデリケートな身体に、<br>国家資格で安心！</h2>

     例2）SP でだけ改行を入れて2行にする
     <p class="c-page-mv-lead nobr_pc">妊娠中から出産後にかけて、<br>女性の身体は大きく変化します。</p>

   ※ 付けた要素の中の <br> すべてに効く（入れ子の p の中の <br> も含む）。
      同じ要素の中で「この <br> は PC だけ／別の <br> は SP だけ」と
      1本ずつ分けたい場合はこの方法では表現できないので要相談。
   ※ このサイトのタブレット（768〜991px）は SP 側として扱う
      （992px 未満はレイアウトが SP 寄りに組み替わるため）。
      タブレットを PC 側に含めたい場合は、下2つのメディアクエリの
      992px / 991.98px を 768px / 767.98px に変えれば全ページに効く。
   ========================================================================== */
@media (min-width: 992px) {
  .nobr_pc br { display: none; }
}

@media (max-width: 991.98px) {
  .nobr_sp br { display: none; }
}

/* ==========================================================================
   ユーティリティ：スクロール表示アニメーション（fade-in）
   --------------------------------------------------------------------------
   要素が画面内に入ったら `assets/js/fade-in.js` が `is-inview` を付ける。
   動きの種類・速さ・遅れはすべてクラスで指定する（Smooth CMS では data-* 属性を
   登録できないため、AOS などの属性方式のライブラリは使えない）。

     <div class="fade-in fade-in--up">…</div>          … 下からふわっと
     <div class="fade-in fade-in--left fade-in--d2">…</div>  … 左から・0.2秒遅れ
     <div class="row fade-in-stagger">                 … 子を0.1秒ずつずらす
       <div class="col-4 fade-in fade-in--up">…</div>
       …
     </div>

   ※ 要素を透明にする指定は、すべて `html.is-fade-ready` の中に入れてある。
      このクラスは fade-in.js が動いたときだけ付くので、
        ・Smooth CMS の管理画面のように CSS だけ読み込まれる環境
        ・iframe の中（管理画面のプレビュー）
        ・JS の読み込みを入れ忘れた本番ページ
      では要素が隠れず、そのまま表示・編集できる。
      → この入れ子を外すと管理画面で要素が消えて編集できなくなるので注意。
   ※ **transition は既定では無効（transition-property: none）**にしてある。
      「隠す」変化までアニメーションすると、読み込み時に画面内にある要素が
      「薄くなりかけて戻る」だけの動きになり、アニメーションしていないように見える。
      JS が1フレーム後に `html.is-fade-armed` を足してから有効化し、
      そこから先（＝表示するとき）の変化だけをアニメーションさせている。
      shorthand の `transition` を使っていないのは、`--fast` や `--d1` などの
      モディファイア（詳細度が低い）が上書きできなくなるため。
   ※ 一覧・使い方の詳細は docs/design-system.md §39。
   ========================================================================== */
.fade-in {
  /* MVの表示アニメーション（top.css の p-top-mv-fadein）と同じイージング */
  transition-duration: 0.8s;
  transition-timing-function: cubic-bezier(0.22, 0.72, 0.3, 1);
  transition-property: none;
}

/* 初期状態（透明＋動き出しの位置）。JSが動いたときだけ効く。
   この時点では transition-property: none なので、隠れる動きは一瞬で終わる */
.is-fade-ready .fade-in { opacity: 0; }

.is-fade-ready .fade-in--up    { transform: translateY(24px); }
.is-fade-ready .fade-in--down  { transform: translateY(-24px); }
.is-fade-ready .fade-in--left  { transform: translateX(-24px); }
.is-fade-ready .fade-in--right { transform: translateX(24px); }
.is-fade-ready .fade-in--zoom  { transform: scale(0.94); }

/* 隠し終わった次のフレームでJSが付ける。ここから先の変化がアニメーションになる */
.is-fade-armed .fade-in { transition-property: opacity, transform; }

/* 画面に入ったあと */
.is-fade-ready .fade-in.is-inview {
  opacity: 1;
  transform: none;
}

/* 速さ */
.fade-in--fast { transition-duration: 0.4s; }
.fade-in--slow { transition-duration: 1.2s; }

/* 遅れ（0.1秒刻み） */
.fade-in--d1 { transition-delay: 0.1s; }
.fade-in--d2 { transition-delay: 0.2s; }
.fade-in--d3 { transition-delay: 0.3s; }
.fade-in--d4 { transition-delay: 0.4s; }
.fade-in--d5 { transition-delay: 0.5s; }

/* 連続表示（親に付ける）。直下の .fade-in を上から 0.1秒ずつずらす。
   カードを横並びにした row などに付ける想定で、10個まで対応。
   個別の fade-in--d1〜d5 より優先される（詳細度が高いため） */
.fade-in-stagger > .fade-in:nth-child(1)  { transition-delay: 0s; }
.fade-in-stagger > .fade-in:nth-child(2)  { transition-delay: 0.1s; }
.fade-in-stagger > .fade-in:nth-child(3)  { transition-delay: 0.2s; }
.fade-in-stagger > .fade-in:nth-child(4)  { transition-delay: 0.3s; }
.fade-in-stagger > .fade-in:nth-child(5)  { transition-delay: 0.4s; }
.fade-in-stagger > .fade-in:nth-child(6)  { transition-delay: 0.5s; }
.fade-in-stagger > .fade-in:nth-child(7)  { transition-delay: 0.6s; }
.fade-in-stagger > .fade-in:nth-child(8)  { transition-delay: 0.7s; }
.fade-in-stagger > .fade-in:nth-child(9)  { transition-delay: 0.8s; }
.fade-in-stagger > .fade-in:nth-child(10) { transition-delay: 0.9s; }

/* OS側で「視差効果を減らす」にしている端末では動かさず、最初から表示する
   （MVのアニメーションと同じ扱い） */
@media (prefers-reduced-motion: reduce) {
  .is-fade-ready .fade-in,
  .is-fade-ready .fade-in.is-inview {
    opacity: 1;
    transform: none;
    transition-property: none;
  }

  /* 追従CTAの消え方もフェードさせずに切り替える（消えること自体は残す） */
  .c-float-cta { transition: none; }
  .c-float-cta.is-hidden { transform: none; }

  /* 装飾円のふわふわも止める */
  .c-deco-circle { animation: none; }
}

/* ==========================================================================
   レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
   ※ SP・タブレットのカンプが無いため、こちら側で設計した値
   ========================================================================== */
@media (max-width: 991.98px) {
  /* ページMV（c-page-mv）は 768px以上はすべてPCと同じ表示にする方針のため、
     ここにタブレット向けの指定は置かない。767px以下の指定は下の
     c-page-mv--pickup（Pick Up Menu系）／c-page-mv--article（記事型）の
     ブロックにまとめてある。 */
  .c-point-head { flex-wrap: wrap; }
  .c-point-head-mascot { width: 96px; }
  .c-point-title { font-size: 1.5rem; }
  .c-point-panel { padding: 40px 24px; }
  .c-panel { padding: 32px 24px; }
  .c-panel--outline { padding: 32px 24px; }
  .l-band { padding-top: 56px; padding-bottom: 56px; }
  .l-band--r, .l-band--l { border-radius: 60px; }
  .c-float-cta { right: 16px; bottom: 16px; gap: 8px; }
  .c-float-cta-btn { width: 96px; height: 96px; }
  .c-cta-mascot { position: static; display: block; margin: 24px auto 0; }
}

@media (max-width: 767.98px) {
  body { font-size: 0.9375rem; line-height: 1.7; }
  .c-btn { min-width: 0; width: 100%; max-width: 320px; font-size: 1rem; padding: 8px 24px; }
  .c-btn--lg { min-width: 0; width: 100%; max-width: 320px; min-height: 56px; }
  .c-btn--sm { width: auto; min-width: 0; }
  .c-sec-title-en { font-size: 1.75rem; }
  .c-sec-title--lg .c-sec-title-en { font-size: 2rem; }
  .c-sec-title-ja { font-size: 1.375rem; }
  .c-sec-title-ja--sm { font-size: 1rem; }
  .c-page-mv-title { font-size: 1.5rem; }
  .c-page-mv-en { font-size: 2.125rem; }
  .c-page-mv-sub { font-size: 1.25rem; margin-top: 28px; }
  .c-page-mv-lead { max-width: none; margin-top: 28px; font-size: 1rem; letter-spacing: 0.04em; }
  .c-panel-title { font-size: 1.375rem; }
  .c-card-title { font-size: 1.25rem; }
  /* POINT の見出し行はグースケを上に置いて縦積みにする */
  .c-point-head { justify-content: center; }
  .c-point-head-mascot { margin-right: 0; margin-bottom: 16px; }
  .c-point-head-text { width: 100%; }
  .c-point-title { font-size: 1.25rem; }
  .c-point-badge { font-size: 1.5rem; padding: 6px 24px; }
  .c-tag { font-size: 0.875rem; padding: 6px 12px; white-space: normal; text-align: center; }
  .c-tag--sm { font-size: 0.8125rem; }
  .c-cta-title { font-size: 1.375rem; }
  .c-reco-head { font-size: 1rem; }
  .c-reco-caption { font-size: 0.875rem; }
  .c-float-cta-btn { width: 76px; height: 76px; }
}

/* ==========================================================================
   「Pick Up Menu」系ページ（c-page-mv--pickup）のSP版MV
   カンプ 1396-21433（ペルケア・SP 375px）。ペルケア／マタニティ・産後ケア／
   出張整体で共通。PC・タブレットの見た目は従来どおりで、767px以下だけ差し替える。

   カンプの並びは 白ボックス → キャッチ → 写真 → リード。HTMLのDOM順は
   PCの絶対配置に合わせて写真が先に来ているので、order で入れ替えている。
   左右の余白は要素ごとに持つ（白ボックス・キャッチ・写真は左32pxから始まり、
   写真だけ画面右端まで抜ける）ので、MV自身の左右paddingは外す。
   ========================================================================== */
@media (max-width: 767.98px) {
  .c-page-mv.c-page-mv--pickup {
    display: flex;
    flex-direction: column;
    /* パンくずの下から32px。従来の130pxは固定ヘッダー用の余白と二重になっていた */
    /* padding-top: 80px; */
    padding-left: 0;
    padding-right: 0;
  }

  .c-page-mv.c-page-mv--pickup .c-page-mv-head    { order: 1; }
  .c-page-mv.c-page-mv--pickup .c-page-mv-catches { order: 2; }
  .c-page-mv.c-page-mv--pickup .c-page-mv-photos  { order: 3; }
  .c-page-mv.c-page-mv--pickup .c-page-mv-body    { order: 4; }

  /* 白ボックス（カンプ 322×115 @32,0）。幅は中身なりで、画面右端までで折り返す。
     高さはカンプの115pxに合わせて padding 20px＋行送りで組んでいる
     （カンプの padding 32px はFigmaが文字ボックスを詰めた値なので、
       そのまま入れると159pxになってしまう。PC版と同じ考え方） */
  .c-page-mv.c-page-mv--pickup .c-page-mv-head {
    width: fit-content !important;
    max-width: calc(100% - 32px);
    margin-left: 32px;
    margin-right: 0;
    /* padding: 20px 64px; */
    border-radius: 0 var(--r-card) var(--r-card) 0;
  }

  .c-page-mv.c-page-mv--pickup .c-page-mv-label { font-size: 1.25rem; }

  .c-page-mv.c-page-mv--pickup .c-page-mv-head .c-page-mv-title {
    margin-top: 10px;
    font-size: 2.25rem;
    line-height: 1.2;
    letter-spacing: 0.2em;
  }

  /* キャッチコピー（カンプ @32,139・箱の間8px。文字幅ぶんの白ベタ） */
  .c-page-mv.c-page-mv--pickup .c-page-mv-catches {
    max-width: calc(100% - 32px);
    margin: 24px 0 0 32px;
  }

  .c-page-mv.c-page-mv--pickup .c-page-mv-catch { font-size: 1.125rem; }

  /* 写真（カンプ 343×193.87 @32,277）。左32pxから画面右端まで抜けるので
     左側だけ角丸。縦横比はカンプの 322:182 で切り抜く */
  .c-page-mv.c-page-mv--pickup .c-page-mv-photos {
    max-width: none;
    margin: 32px 0 0 32px;
  }

  .c-page-mv.c-page-mv--pickup .c-page-mv-photo {
    /* PCの絶対配置を解除する（991px以下の共通指定から pickup を除外したので、ここで持つ） */
    position: static;
    /* flex: 1 1 0 が残っていると aspect-ratio が効かないので解除 */
    flex: none;
    width: 100% !important;
    height: auto;
    aspect-ratio: 322 / 182;
    object-fit: cover;
    border-radius: var(--r-card) 0 0 var(--r-card) !important;
    box-shadow: var(--shadow-hard);
  }

  /* リード文（カンプ 幅300px・中央寄せ・14px / 行送り1.5 / 字送り0.2em） */
  .c-page-mv.c-page-mv--pickup .c-page-mv-body {
    /* max-width: 300px; */
    margin: 32px auto 0;
  }

  .c-page-mv.c-page-mv--pickup .c-page-mv-body > * {
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.2em;
    /* 字送りは最後の1文字の後ろにも入るので相殺する。
       これが無いと1行あたり17文字になり、カンプ（18文字）より行数が増える */
    margin-right: -0.2em;
  }

  .c-page-mv.c-page-mv--pickup .c-page-mv-body > * + * { margin-top: 16px; }

  /* 装飾円（カンプはSPでも表示する。位置はカンプの絶対座標からMVの上端を引いた値） */
  .c-page-mv.c-page-mv--pickup .c-deco-circle { display: block; }

  .c-page-mv.c-page-mv--pickup .c-deco-circle--pink  { left: 270px; top: 108px; width: 91px;  height: 91px; }
  .c-page-mv.c-page-mv--pickup .c-deco-circle--blue  { left: 247px; top: 163px; width: 55px;  height: 55px; }
  .c-page-mv.c-page-mv--pickup .c-deco-circle--cream { left: 6px;   right: auto; top: 536px; width: 61px;  height: 61px; }
}

/* ==========================================================================
   「記事型」ページ（c-page-mv--article）のSP版MV
   カンプ 1396-21350（はじめての方へ・SP 375px）。
   はじめての方へ／当院について／施術案内／採用情報 で共通。
   768px以上（タブレット・PC）は同じ表示で、767px以下だけ差し替える。

   カンプの並びは 欧文見出し → h1 → 写真2枚 → キャッチ → リード本文。
   写真（c-page-mv-photos）は c-page-mv-body の外にあり、flex の order は
   親が違うと効かないので、body を display: contents にして中の要素を
   MV直下の flex アイテムに引き上げ、その間に写真を order で割り込ませる。
   ========================================================================== */
@media (max-width: 767.98px) {
  .c-page-mv.c-page-mv--article {
    display: flex;
    flex-direction: column;
    /* パンくずの下から32px（カンプはヘッダー48pxの下48px） */
    padding-top: 80px;
    padding-left: 0;
    padding-right: 0;
  }

  /* body の箱を消して、中の要素を MV 直下の flex アイテムにする */
  .c-page-mv.c-page-mv--article .c-page-mv-body { display: contents; }

  /* 本文系は左右32px（カンプの本文幅311px＝375−64）・ブロック間32px。
     写真より後ろに置くので order は写真(3)より大きい値 */
  .c-page-mv.c-page-mv--article .c-page-mv-body > * {
    order: 4;
    max-width: none;
    margin-top: 32px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* 欧文見出し（カンプ 48px / 行送り1.05） */
  .c-page-mv.c-page-mv--article .c-page-mv-en {
    order: 1;
    margin-top: 0;
    font-size: 3rem;
    line-height: 1.05;
  }

  /* h1（カンプ 24px / 行送り1.6 / 字送り0.2em） */
  .c-page-mv.c-page-mv--article .c-page-mv-title {
    order: 2;
    margin-top: 8px;
    font-size: 1.5rem;
    line-height: 1.6;
    letter-spacing: 0.2em;
  }

  /* リード本文（カンプ 14px / 行送り1.5 / 字送り0.2em）。
     字送りは最後の1文字の後ろにも入るので相殺する */
  .c-page-mv.c-page-mv--article .c-page-mv-lead {
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.2em;
    margin-right: -0.2em;
  }

  /* 当院についてのキャッチ（他ページは p-XXX-mv-catch をページ側で指定） */
  .c-page-mv.c-page-mv--article .c-page-mv-sub {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  /* 写真2枚（カンプ 342×182 のグループを画面右端に寄せる。左端は33px） */
  .c-page-mv.c-page-mv--article .c-page-mv-photos {
    order: 3;
    position: relative;
    display: block;
    width: calc(100% - 33px);
    max-width: none;
    margin: 32px 0 0 33px;
    aspect-ratio: 342 / 182;
  }

  /* 小さい写真（カンプ 119×67 @0,0・硬い影・大きい写真より前面） */
  .c-page-mv.c-page-mv--article .c-page-mv-photo--sm {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 34.8%;
    height: auto;
    aspect-ratio: 119 / 67;
    object-fit: cover;
    border-radius: var(--r-card);
    box-shadow: var(--shadow-hard);
  }

  /* 大きい写真（カンプ 253.24×142.18 @88.76,39.82・影なし） */
  .c-page-mv.c-page-mv--article .c-page-mv-photo--lg {
    position: absolute;
    left: 25.95%;
    top: 21.88%;
    z-index: 1;
    width: 74.05%;
    height: auto;
    aspect-ratio: 253.24 / 142.18;
    object-fit: cover;
    border-radius: var(--r-card);
  }

  /* 装飾円（カンプはSPでも表示する。位置はカンプの絶対座標 − 64px）。
     色クラスで振り分ける（2つある水色は --blue が上・--blue-small が下） */
  .c-page-mv.c-page-mv--article .c-deco-circle {
    display: block;
    mix-blend-mode: multiply;
  }

  .c-page-mv.c-page-mv--article .c-deco-circle--cream      { left: 270px; top: 95px;  width: 90.5px; height: 90.5px; }
  .c-page-mv.c-page-mv--article .c-deco-circle--pink       { left: 247px; top: 150px; width: 54.5px; height: 54.5px; }
  .c-page-mv.c-page-mv--article .c-deco-circle--blue       { left: 34px;  top: 419px; width: 61px;   height: 61px; }
  .c-page-mv.c-page-mv--article .c-deco-circle--blue-small { left: 188px; top: 691px; width: 61px;   height: 61px; background: var(--c-blue02); }
}