@charset "UTF-8";

/* =========================================================
   CA career LP  —  ベース / リセット / 変数定義

   モバイルファースト設計（Google / web.dev 推奨）:
   ベーススタイル = モバイル向け。以降は min-width で上書き・追加していく。
     ベース   : 〜560px   スマートフォン
     561px〜  : 大きめのスマホ / 小型タブレット
     921px〜  : タブレット横向き / デスクトップ
     1081px〜 : ワイドデスクトップ
   ========================================================= */

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

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

img,
picture,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

ul,
ol { list-style: none; }

:root {
  /* カラー */
  --navy:        #1a2f5a;   /* ヘッダー / 濃色パネル */
  --navy-deep:   #0d315d;   /* 見出しのアクセント     */
  --navy-ink:    #12294f;
  --gold-1:      #c0aa79;
  --gold-2:      #c3a461;
  --gold-text:   #9c7c2e;
  --gold-grad:   linear-gradient(228deg, #c0aa79 14%, #c3a461 86%);
  --ink:         #333333;
  --ink-soft:    #5b5b60;
  --bg:          #ffffff;
  --bg-soft:     #f5f7fb;
  --bg-band:     #eef1f7;
  --line:        #e2e6ee;
  --error:       #ec0000;

  /* フォント */
  --font-sans: "Noto Sans JP", system-ui, sans-serif;
  --font-serif: "Zen Old Mincho", "Noto Serif JP", serif;

  /* レイアウト */
  --container: 1080px;
  /* サイト全体の最大幅。.container / .nav と、コンテナ外に絶対配置している
     要素（.intro__photo-doctor など）の位置計算で共有する */
  --container-max: 1280px;
  --gutter: 24px;
  --radius: 20px;
  /* 固定ヘッダーが画面上部で占める高さ
     = .site-header の上パディング18px + .nav の高さ64px。
     アンカーの着地位置（.intro の scroll-margin-top）で使う。
     921px以上ではナビが72pxになるため、そちらで上書きしている */
  --header-h: 82px;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 18px;
}

/* ---- 各セクション共通の見出し ---- */
.section { padding-block: 52px; }
.confirm .section,
.error .section{padding-block:160px;}

.sec-head { text-align: center; margin-bottom: 32px; }
.sec-head__en {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .28em;
  color: var(--gold-text);
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.sec-head__ja {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--navy);
  letter-spacing: .02em;
}
.sec-head__ja .u-gold { color: var(--gold-text); }
.sec-head__lead {
  margin-top: 18px;
  font-size: 16px;
  color: var(--ink);
  line-height: 2;
}

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  transition: opacity .2s ease;
}

.btn--gold {
  background: var(--gold-grad);
  color: #fff;
  padding: 16px 34px;
  font-size: 16px;
}
.btn--gold .ico { width: 18px; height: 14px; fill: currentColor; }
.btn--gold .arw { width: 6px; height: 11px; }

.btn--lg { padding: 22px 60px; font-size: 20px; }

/* サイト全体で使う金色の角丸「ピル型」CTAボタン。
   モバイル: display:block + fit-content にすることで、親の text-align に関係なく中央寄せになる
   （inline-flex だと親の text-align に従ってしまうため） */
.cta-pill {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  background: var(--gold-grad);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 30px;
  border-radius: 35px;
  transition: opacity .2s ease;
}
.cta-pill .arw { width: 7px; height: 12px; flex: none; }

.u-gold { color: var(--gold-text); }

/* 小さい山型（シェブロン）矢印アイコン用 */
.arw path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px clamp(16px, 4vw, 57px) 0;
  display: flex;
  justify-content: center;
}
.nav {
  width: 100%;
  max-width: var(--container-max);
  height: 64px;
  background: var(--navy);
  border-radius: 105px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 24px;
}
.nav__logo { display: flex; align-items: center; flex: none; width: 135px; height: 18px; transition: opacity .2s ease; }
.nav__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

/* モバイル: 開くと画面全体を覆うフルスクリーンのオーバーレイメニュー。
   中身は画面中央に縦積みで配置する */
.nav__menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 横向きスマホなど画面が低いときは項目の合計高さが画面を超える。
     中央寄せのままだと上端がはみ出して選べなくなるため、あふれる場合だけ
     上寄せにしてスクロールできるようにする（safe 未対応ブラウザは上の
     center にフォールバックする） */
  justify-content: safe center;
  overflow-y: auto;
  gap: 12px;
  background: var(--navy);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.nav.is-open .nav__menu { opacity: 1; visibility: visible; }
/* メニュー項目は同じ幅（均等）にそろえて画面中央に配置する */
.nav__menu a {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 16px;
  text-align: center;
  border-radius: 40px;
  width: 100%;
  max-width: 320px;
  /* ホバーで文字色をゴールドに変えるため color も transition の対象にする */
  transition: color .2s ease, opacity .2s ease;
}
/* 通常リンクだけ block 化する（<a> はインラインだと width が効かないため）。
   CTA は .btn の inline-flex を保ち、アイコン＋テキスト＋矢印を横並びのままにする */
.nav__menu a:not(.nav__cta) { display: block; }
.nav__cta {
  height: 56px;
  padding: 0 26px;
  font-size: 16px;
  margin-top: 8px;
}

/* ハンバーガーメニューのアイコン */
.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  /* オーバーレイ(z-index:10)より前面に置き、開いた状態でも×で閉じられるようにする */
  position: relative;
  z-index: 20;
}
.nav__toggle span { display: block; width: 24px; height: 2px; background: #fff; transition: transform .25s ease, opacity .2s ease; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero {
  position: relative;
  padding-top: 120px;
  padding-bottom: 40px;
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.hero__label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero__title {
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.3;
  letter-spacing: .01em;
}
.hero__title .kanji {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 900;
  color: var(--gold-text);
  /* 10vw（旧 4.9vw）にして小型スマホでも縮むようにする。旧設定の下限46pxだと
     「また来たい」と が1行に収まらず、モバイルで「と」だけが行あふれしていた */
  font-size: clamp(40px, 10vw, 69px);
  line-height: 1.1;
  /* 行頭の括弧「が持つ左側の字面アキ（約0.66em）を詰めて、1・3行目の行頭と揃える */
  margin-left: -0.64em;
}
.hero__title .kanji u {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}
.hero__lead {
  margin-top: 26px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--ink);
}
.hero__cta { margin-top: 34px; }

/* ヒーローの画像グループ */
.hero__media {
  position: relative;
  min-height: 300px;
  /* 幅を明示することで、%指定の絶対配置画像に確定した基準ボックスを与える。
     さらに、auto マージンでこの（中身のない）グリッド要素が幅0に潰れるのも防ぐ */
  width: 100%;
  max-width: 460px;
  /* ヒーローが縦積み（モバイル/タブレット）のときに画像グループを中央寄せにして、
     左に寄って右側が大きく空いてしまうのを防ぐ */
  margin-inline: auto;
}
.hero__media img {
  position: absolute;
  border: 10px solid #fff;
  border-radius: 20px;
  object-fit: cover;
}
.hero__media .ph1 {
  width: 62%;
  aspect-ratio: 1 / 1;
  left: 0;
  bottom: 0;
}
.hero__media .ph2 {
  width: 51%;
  aspect-ratio: 316 / 421;
  right: 0;
  top: 0;
}

/* =========================================================
   イントロ（そのつらさ）
   ========================================================= */
.intro {
  position: relative;
  background: var(--bg-soft);
  padding-block: 60px;
  overflow: hidden;
  /* ヘッダーは position: fixed のため、ナビの「サービスについて」(#about) で
     ジャンプすると先頭の「クレームが止まらない。」がヘッダーの下に隠れる。
     ヘッダーの高さ＋余白24px ぶん手前で止めて、隠れないようにする */
  scroll-margin-top: calc(var(--header-h) + 24px);
}
/* ここに z-index は付けない: 付けると写真レイヤーが独自の重なり文脈に閉じ込められ、
   .intro__photo-clinic を院長写真の下に配置できなくなる */
.intro__inner {
  position: relative;
  display: grid;
  /* minmax(0, …) にしないと、列の最小幅が .intro__photo の固定幅(320px)まで
     広がってしまい、画面幅が 356px（320px + 左右パディング18px）未満のとき
     コンテナからはみ出して本文が右端で切れる */
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  text-align: center;
}
.intro__photo {
  position: relative;
  width: 320px;
  max-width: 100%;
  height: 300px;
  margin-inline: auto;
}
/* 円形リング付きのクリニック内観写真。セクションの最背面レイヤー。
   モバイル: 写真ボックスの右下に配置 */
.intro__photo-clinic {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 236px;
  height: 236px;
  z-index: 0;
}
.intro__photo-clinic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.intro__photo-clinic::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 14px solid #fff;
  border-radius: 50%;
  pointer-events: none;
}
/* 切り抜いた院長写真。セクション内容の背面レイヤーで、.intro__photo ではなく
   .intro 直下に置くことでセクション全体にまたがれるようにしている。
   モバイルは写真の上にテキストが重なる縦積みなので、ここでは写真の帯の中に収める。
   セクション全体へのはみ出しは、左カラムが空く 921px 以上で有効になる */
.intro__photo-doctor {
  position: absolute;
  inset: auto;
  height: 300px;
  z-index: 1;
  pointer-events: none;
  /* コンテナ（最大幅 --container-max）の左端が、画面幅いっぱいの .intro の
     左端から何px内側にあるか。画面が最大幅より狭いあいだは 0 */
  --container-offset: max(0px, calc((100% - var(--container-max)) / 2));
}
.intro__photo-doctor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}
/* テキストは2枚の写真レイヤーより前面に配置 */
.intro__body { position: relative; z-index: 2; text-align: left; }
.intro__claim {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: .02em;
  margin-top: 22px;
}
.intro__title {
  position: relative;
  margin-top: 22px;
  padding: 12px 18px;
  background: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy-deep);
  letter-spacing: .03em;
  text-align: center;
  z-index: 1;
}
.intro__text {
  margin-top: 24px;
  font-size: 16px;
  line-height: 2.1;
  color: var(--ink);
}
.intro__text b { font-weight: 700; }
/* 手動の <br> はデスクトップの行長に合わせて調整してある。小さい画面では
   自然な折り返しと衝突して1〜2文字だけが行あふれするため、921px 以上で
   デスクトップ用のレイアウトが改行を復活させるまでは自然な折り返しに任せる */
.intro__text br { display: none; }

/* =========================================================
   ジャーニー（患者体験の全体像）
   ========================================================= */
.journey { background: #fff; }
.journey__lead {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-top: -28px;
  margin-bottom: 44px;
}
.journey .sec-head__ja { color: var(--navy); }

/* モバイル: 横スクロールのカルーセルではなく、縦積みにしてページと一緒にスクロールさせる。
   横並びは 921px 以上で復活させる */
.journey__track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.jcard {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 400px;
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 22px 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.jcard__stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: 56px;
  padding: 9px 8px;
  width: 100%;
  max-width: 153px;
}
.jcard__photo {
  display: block;
  width: 73px;
  height: 73px;
  border-radius: 50%;
  overflow: hidden;
  margin: 16px 0 12px;
}
.jcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.jcard__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 14px;
  min-height: 33px;
}
/* モバイル: 中央寄せのリスト。各 li を中身の幅に合わせて中央寄せし、
   点（bullet）とテキストが一緒に中央へ寄るようにする。921px 以上で再び左寄せ */
.jcard__list {
  text-align: center;
  align-self: stretch;
}
.jcard__list li {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  font-size: 14px;
  line-height: 2;
  padding-left: 15px;
}
.jcard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
}
.journey__note {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 44px;
}

/* =========================================================
   お悩み（課題提起 / こんなお悩み）
   ========================================================= */
.worry { background: var(--bg-soft); }
.worry__title { color: var(--navy); }
.worry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.worry-card {
  background: #fff;
  border: 1px solid var(--navy);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.worry-card__img { aspect-ratio: 2752 / 1536; overflow: hidden; }
.worry-card__img img { width: 100%; height: 100%; object-fit: cover; }
.worry-card__body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.worry-card__ttl {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: #111;
  letter-spacing: -.02em;
  font-feature-settings: "palt" 1;
}
.worry-card__desc {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #111;
  flex: 1;
}
.worry-card__quote {
  background: var(--bg-soft);
  font-size: 13px;
  line-height: 2;
  color: #111;
  text-align: left;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}
.worry__close {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  margin-top: 40px;
}
.worry__cta { text-align: center; margin-top: 28px; }

/* =========================================================
   ビフォー / アフター
   ========================================================= */
.ba { background: #fff; }
.ba__title { color: var(--navy); }
.ba__lead { margin-top: 14px; font-weight: 500; color: var(--ink); }
.ba__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 16px;
}
.ba-panel { padding: 26px 32px 30px; }
.ba-panel__img { border-radius: 20px; overflow: hidden; aspect-ratio: 2752 / 1536; }
.ba-panel__img img { width: 100%; height: 100%; object-fit: cover; }
.ba-panel__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 71px;
  color: #fff;
  font-weight: 700;
  margin: 16px auto 18px;
  width: 100%;
}
.ba-panel--before { background: #eee; }
.ba-panel--before .ba-panel__label { background: var(--navy); font-size: 15px; }
.ba-panel--after {
  background: #fefbf4;
  border: 1.5px solid var(--gold-text);
}
.ba-panel--after .ba-panel__label { background: var(--gold-text); font-size: 18px; height: 46px; }

.ba-list { display: flex; flex-direction: column; gap: 12px; }
.ba-list li { display: flex; align-items: center; gap: 12px; }
.ba-list .ba-mark { font-weight: 300; line-height: 1; flex: none; }
.ba-list b { display: block; color: #111; font-weight: 700; }
.ba-list small { display: block; color: #555; font-weight: 500; }
.ba-list--before .ba-mark { color: #888; font-size: 20px; }
.ba-list--before b { font-size: 15px; }
.ba-list--before small { font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.ba-list--after .ba-mark { color: var(--gold-text); font-size: 24px; }
.ba-list--after b { font-size: 18px; }
.ba-list--after small { font-size: 15px; line-height: 1.5; margin-top: 3px; }

/* 縦積みレイアウト時は矢印を下向きにする */
.ba__arrow {
  width: 28px;
  flex: none;
  transform: rotate(90deg);
  margin-inline: auto;
}
.ba__arrow svg { width: 100%; height: auto; }
.ba__cta { text-align: center; margin-top: 44px; }

/* =========================================================
   ソリューション（3ステップ）
   ========================================================= */
.solution { background: var(--bg-soft); }
.solution__title { color: var(--navy); }
.steps {
  /* 矢印コネクターと共有し、両者の間隔がずれないようにする */
  --steps-gap: 62px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--steps-gap);
  /* アーチが各カードの上に46pxはみ出す。縦積み時はその分の余白が必要 */
  margin-top: 62px;
}
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--navy);
  padding: 29px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* カード上辺のアーチ（Figma: 半径53の円、中心はカード上辺の8px下。
   これによりアーチは幅104.8px・高さ45pxになる）。白い塗りでアーチ部分の
   カード自身の上ボーダーを消している */
.step::before {
  content: "";
  position: absolute;
  /* -46 ではなく -47: 絶対配置のオフセットはパディングボックス基準で解決され、
     1pxのボーダー分だけ1px下にずれるため */
  top: -47px;
  left: 50%;
  transform: translateX(-50%);
  width: 105px;
  height: 48px;
  background: no-repeat center / 105px 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105 48'%3E%3Cpath d='M0.1 46.5A53 53 0 0 1 104.9 46.5L104.9 48L0.1 48Z' fill='%23ffffff'/%3E%3Cpath d='M0.1 46.5A53 53 0 0 1 104.9 46.5' fill='none' stroke='%231A2F5A' stroke-width='1'/%3E%3C/svg%3E");
}
.step__num {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-text);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__head {
  width: 100%;
  background: var(--navy);
  color: #fff;
  border-radius: 56px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 14.5px;
  font-feature-settings: "palt" 1;
  letter-spacing: -.01em;
}
.step__ico { width: 22px; height: 22px; flex: none; }
.step__img {
  width: 76%; /* Figma: コンテンツ幅299に対して227.5 */
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 227 / 127;
  margin: 20px 0 16px;
}
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step__desc {
  font-size: 13px;
  line-height: 1.7;
  color: #222;
  text-align: center;
  flex: 1;
}
.step__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  width: 100%;
}
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  padding: 6px 14px;
  white-space: nowrap;
}
.tag--navy { background: var(--navy); }
.tag--gold { background: var(--gold-text); flex-basis: 100%; }
/* 紺色タグ2つで1行目を分け合い、端から端まで埋める */
.step__tags .tag--navy { flex: 1; }

/* =========================================================
   実績（数字で見る成果 / 導入事例）
   ========================================================= */
.results { background: #fff; }
.results__title { color: var(--navy); }
.results__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1080px;
  margin-inline: auto;
}
.case {
  border: 1px solid var(--navy);
  overflow: hidden;
  background: #fff;
}
.case__head {
  background: #f7f9fc;
  border-bottom: 1px solid #d7deea;
  padding: 16px 24px;
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
}
.case__body { padding: 20px 24px 24px; }
.case__row { display: flex; align-items: center; gap: 12px; }
.case__row p { font-size: 12px; color: #222; }
.case__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 2px;
  width: 80px;
}
.case__label--issue { background: #9aa1ad; }
.case__label--work { background: var(--gold-text); }
.case__chevron {
  text-align: center;
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  margin: 0 0 18px;
}
.case__row--work p { font-weight: 700; }
.case__result {
  background: #f7f2e6;
  border-radius: 6px;
  text-align: center;
  padding: 18px 16px;
  margin: 16px 0;
}
.case__metric { font-size: 18px; font-weight: 700; color: #222; }
/* 数字を「点」「万円」などの単位とくっつけて、単位だけが次の行に取り残されないようにする */
.case__metric .num { font-weight: 700; white-space: nowrap; }
.case__metric .num--hi {
  color: var(--gold-text);
  font-size: 30px;
  vertical-align: -2px;
  border-bottom: 1px solid var(--gold-text);
  white-space: nowrap;
}
.case__metric small { font-size: 13px; font-weight: 500; color: #555; }
/* 成果を複数行並べるときに、行同士がくっつかないよう余白を入れる */
.case__metric + .case__metric { margin-top: 12px; }
/* 数値ではなく成果を箇条書きで見せるパターン。
   親（.case__result）が中央寄せなので、リスト自体を inline-block にして
   ブロックごと中央に置きつつ、中の文字は左揃えのまま読ませる */
.case__list {
  display: inline-block;
  text-align: left;
  list-style: none;
}
.case__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  font-weight: 700;
  color: #222;
  line-height: 1.6;
}
.case__list li + li { margin-top: 8px; }
/* 行頭のチェックマーク */
.case__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold-text);
  font-weight: 700;
}
/* 箇条書きの中の強調数値も、左カード（.case__metric）と同じ金色＋下線で強調する。
   単独の指標（.case__metric の30px）ほど大きくすると行が崩れるので 26px に抑え、
   line-height を詰めて行間が広がりすぎないようにする */
.case__list .num--hi,
.case__metric .num--hi {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--gold-text);
  vertical-align: -2px;
  border-bottom: 1px solid var(--gold-text);
  white-space: nowrap;
}
.case__stars { color: #e0b23a; font-size: 20px; letter-spacing: 4px; margin-top: 2px; }
.case__sub { font-size: 13px; color: #333; margin-top: 4px; }
.case__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.case__meta .tag { font-size: 12.5px; padding: 6px 14px; }

/* お客様の声（吹き出し） */
.voice {
  display: grid;
  /* スマホ: 左（アバター）を1/3、右（吹き出し）を2/3にする */
  grid-template-columns: 1fr 2fr;
  column-gap: 8px;
  align-items: stretch;
  margin-top: 26px;
}
/* 幅を基準に aspect-ratio で高さを決めるので、常に正円を保つ */
.voice__avatar {
  height: auto;
  /* スマホ: 1/3カラムいっぱいに広げ、aspect-ratio で正円を維持する */
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: #eef1f7;
  grid-row: span 2;
  align-self: center;
}
/* 横長の集合写真を円に切り抜くと中央が写る。被写体の位置に合わせて
   切り抜き範囲を少し右にずらす */
.voice__avatar--shift-right { object-position: 40% center; }
.voice__avatar--shift-left { object-position: 60% center; }
.voice__bubble {
  position: relative;
  background: var(--bg-soft);
  padding: 16px 18px;
  display: flex;
  justify-content: center;
}
/* 吹き出しのしっぽ: 左下角から突き出す14×12の直角三角形（Figma） */
.voice__bubble::before {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-top: 12px solid var(--bg-soft);
  border-right: 14px solid transparent;
}
.voice__quote { font-size: 14px; font-weight: 700; color: #222; line-height: 1.6; }
/* モバイルではデスクトップ用の改行を無効にし、吹き出しのテキストを自然に折り返させる */
.voice__quote br { display: none; }
.voice__name { font-size: 13px; font-weight: bold; color: var(--navy); margin-top: 10px; padding-left: 4px; }

/* =========================================================
   料金表
   ========================================================= */
.pricing { background: var(--bg-soft); }
.pricing__title { color: var(--navy); }
/* モバイル: 表（.ptable）だけを横スクロールさせる。見出し・リード・ヒントはスクロールさせない */
.ptable-scroll { overflow-x: auto; }
/* 横スクロールできることをユーザーに知らせるヒント（横スクロール不要になる921px以上では非表示） */
.pricing__hint {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-text);
  margin-bottom: 8px;
}
.ptable {
  display: grid;
  grid-template-columns: 150px repeat(3, minmax(150px, 1fr));
  min-width: 640px;
  max-width: 960px;
  margin: 20px auto 0;
  align-items: stretch;
}
.pt-corner { background: transparent; }

/* プランのヘッダー */
.pt-head {
  position: relative;
  background: var(--navy);
  color: #fff;
  text-align: center;
  /* モバイル: 上部に帯を確保して、狭い横スクロール列でも「人気プラン」バッジが
     プラン名に重ならないようにする。3つのヘッダーで共通にして高さを揃える。
     バッジの横にプラン名が1行で収まる921px以上では8pxに戻す */
  padding: 52px 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,.12);
}
.pt-head:last-of-type { border-right: none; }
.pt-head--popular { background: var(--gold-text); }
.pt-head__name { font-size: 12.5px; font-weight: 700; }
.pt-head__price { font-size: 14px; font-weight: 700; margin: 2px 0 4px; }
.pt-head__price b { font-size: 24px; }
.pt-head__desc { font-size: 11px; font-weight: 500; line-height: 1.5; opacity: .95; }
/* 正方形サイズを固定して中央寄せし、ラベルの文言に関係なく正円を保つ */
.pt-badge {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 46px;
  height: 46px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 機能名（項目名）のセル */
.pt-feat {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 10px;
  border: 1px solid #2b3f66;
  min-height: 40px;
}
.pt-feat--gold { background: var(--gold-text); border-color: #b28f38; }

/* 値（○×など）のセル */
.pt-cell {
  background: #fff;
  border: 1px solid #c9d0dc;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 8px;
  min-height: 40px;
}
.pt-check { color: #1a1a1a; font-size: 16px; font-weight: 400; }
.pt-x { color: #bbb; font-size: 14px; }
.pt-x--light { color: #fff; }
.pt-cell--gold { background: var(--gold-text); border-color: #b28f38; }
.pt-note { color: #fff; font-weight: 700; font-size: 12px; line-height: 1.3; }
.pt-note small { display: block; font-weight: 500; font-size: 11px; }

/* CTA（申し込みボタン）の行 */
.pt-cta {
  padding: 22px 10px 0;
  display: flex;
  justify-content: center;
}
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 190px;
  padding: 14px 20px;
  border-radius: 35px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  transition: opacity .2s ease;
}
.plan-btn .arw { width: 6px; height: 11px; }
.plan-btn--navy { background: linear-gradient(232deg, #4d5f83 14%, #1a2f5a 86%); }
.plan-btn--gold { background: linear-gradient(232deg, #c0aa79 14%, #9c7c2e 86%); }

/* =========================================================
   選ばれる理由（選ばれる3つの理由）
   ========================================================= */
.reasons { background: #fff; }
.reasons__title { color: var(--navy); }
.reasons__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.reason {
  background: #fff;
  border: 1px solid var(--navy);
  padding: 16px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.reason__badge {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 56px;
  width: 100%;
  max-width: 299px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason__img {
  width: 100%;
  /* 元画像（1024×683）と同じ3:2にして、トリミングも歪みもなく表示する */
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: #c4c4c4;
}
.reason__img img { width: 100%; height: 100%; object-fit: cover; }
.reason__ttl {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: #111;
}
.reason__desc { font-size: 14px; font-weight: 500; line-height: 1.6; color: #111; }

/* =========================================================
   チーム（担当チーム紹介）
   ========================================================= */
.team { background: var(--bg-soft); }
.team__title { color: var(--navy); }
.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.member {
  background: #fff;
  border: 1px solid var(--navy);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
}
.member__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.member__avatar {
  flex: none;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  overflow: hidden;
  background: #dfe5f0;
  border: 2px solid #dfe5f0;
}
.member__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* 氏名を出さず肩書のみ掲載するため、肩書がカードの見出しの役割を担う */
.member__role {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  font-feature-settings: "palt" 1;
}
.member__bio { font-size: 13px; color: #555; font-weight: 500; line-height: 1.6; margin-top: 5px; }
.member__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tag-sm {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 18px;
}

/* =========================================================
   FAQ（よくある質問）
   ========================================================= */
.faq { background: #fff; }
.faq__title { color: var(--navy); }
.faq__list {
  max-width: 936px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-item { border-radius: 12px; overflow: hidden; }
.faq-item__q {
  list-style: none;
  cursor: pointer;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  padding: 18px 18px 18px 22px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* 開閉時の角丸の変化だけをなめらかにする（ホバー演出は付けない） */
  transition: border-radius .2s ease;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__q { border-radius: 12px 12px 0 0; }
.faq-item__caret {
  flex: none;
  width: 16px;
  height: 16px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
  transition: transform .25s ease;
  margin-top: -6px;
}
.faq-item[open] .faq-item__caret { transform: rotate(-135deg); margin-top: 4px; }
.faq-item__a {
  background: var(--bg-soft);
  border-radius: 0 0 12px 12px;
  padding: 24px 22px 28px 32px;
}
.faq-item__a p {
  font-size: 14px;
  line-height: 1.7;
  color: #1a1a1c;
  letter-spacing: .04em;
}
/* 回答が複数段落になる場合、段落同士の間隔を確保する */
.faq-item__a p + p { margin-top: 1em; }

/* =========================================================
   CTA / お問い合わせフォーム
   ========================================================= */
.cta { background: var(--bg-soft); }
.cta__title { color: var(--navy); }
.contact {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 4px;
  overflow: hidden;
}
.contact__head {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  padding: 18px 16px;
  letter-spacing: .02em;
}
.contact__body { padding: 32px 20px 28px; }
.field { margin-bottom: 18px; }
.field__label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: #1a1a1a;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.req { font-weight: 400; font-size: 14px; }
.req--must { color: var(--error); }
.req--any { color: #1a1a1a; }
.field__input {
  width: 100%;
  height: 56px;
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: 12px 16px;
  font: inherit;
  font-size: 16px;
  color: #1a1a1a;
  background: #fff;
}
.field__input:focus { outline: 2px solid var(--gold-2); outline-offset: 1px; }

.checks { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 4px; }
.checks label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #333;
  cursor: pointer;
}
.checks input { position: absolute; width: 0; height: 0; }
.checks input {
  width: 18px;
  height: 18px;
  border: 2px solid var(--navy);
  border-radius: 4px;
  display: inline-block;
  position: relative;
  flex: none;
  transition: background .15s ease;
	margin:0;
}

.checks .mwform-checkbox-field{
	margin-left: 0!important;
}

.contact__submit {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 32px auto 0;
  padding: 20px;
  border-radius: 35px;
  background: var(--gold-grad);
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  transition: opacity .2s ease;
	border: none;
}

.contact__confirm {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 32px auto 0;
  padding: 20px;
  border-radius: 35px;
  background: var(--gold-grad);
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  transition: opacity .2s ease;
	border: none;
}

.contact__back {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 32px auto 0;
  padding: 20px;
  border-radius: 35px;
  background: #efefef;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 18px;
  transition: opacity .2s ease;
	border: none;
}

/* 入力エラー表示 */
.field__input--error { border-color: var(--error); }
.field__error {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--error);
  letter-spacing: .02em;
}

/* 送信結果メッセージ */
.contact__submit:disabled { opacity: .6; cursor: default; }
.contact__status {
  max-width: 400px;
  margin: 20px auto 0;
  padding: 14px 16px;
  border: 2px solid;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  letter-spacing: .02em;
}
.contact__status--ok { border-color: var(--navy); background: var(--bg-soft); color: var(--navy); }
.contact__status--ng { border-color: var(--error); background: #fdf1f1; color: var(--error); }

.contact__confirm,
.contact__back,
.contact__submit {
	display: none;
}

body.clinic-support .contact__confirm {
	display: block;
}

body.confirm .contact__back,
body.confirm .contact__submit {
	display: block;
	margin: 20px auto;
}

body.error .contact__back {
	display: block;
}

body.confirm form,
body.error form{
	max-width: 720px;
    margin: 0 auto;
}
.contact__tel { text-align: center; font-size: 14px; color: #111; margin-top: 20px; }
/* 電話番号の tel: リンク。見た目は本文のままにして、ホバーだけ他の押せる要素にそろえる */
.contact__tel a,
.footer__office a { transition: opacity .2s ease; }

/* =========================================================
   フッター
   ========================================================= */
.footer { background: var(--navy); color: #fff; padding-top: 56px; }
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid #fff;
}
/* 拠点が3つに増えたので、住所が極端に折り返さない幅を確保する */
.footer__brand { width: 340px; }
.footer__logo { width: 210px; height: 27px; object-fit: contain; object-position: left center; margin-bottom: 28px; }
.footer__company { font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.footer__addr { font-size: 14px; font-weight: 500; line-height: 1.7; display: flex; flex-direction: column; gap: 16px; }
/* オフィス名だけ少し強調して、拠点の区切りを分かりやすくする */
.footer__office-name { display: block; font-weight: 700; }
.footer__head { font-size: 20px; font-weight: 700; margin-bottom: 24px; }
.footer__links { display: flex; flex-direction: column; gap: 16px; }
.footer__links a { font-size: 14px; font-weight: 500; transition: opacity .2s ease; }
.footer__links--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.footer__bottom {
  padding: 22px 16px;
}
.footer__copy { text-align: center; font-size: 11px; font-weight: 500; }

/* =========================================================
   マウスオーバー（ホバー）演出

   対象は「押せるもの」＝ボタンとリンクのみ。カードや画像など、
   クリックできない要素には付けない（押せそうに見せないため）。

   演出は2種類:
     1. ヘッダーのナビリンク（テキストのみのメニュー項目）
        … 文字色をゴールドに変えて下線を引く
     2. それ以外の押せるもの（CTA・各種ボタン・ロゴ・フッターリンクなど）
        … 不透明度80%（opacity: .8 / .2s ease）
   移動（浮かせる動き）や影は使わない。

   マウスを使う環境だけに限定する:
   タッチ端末では :hover がタップ後に貼り付いたまま残ってしまうため、
   (hover: hover) and (pointer: fine) で囲って完全に無効化している。
   （transition 自体は各要素の定義側に置いてあるが、:hover が発火しない
   タッチ端末では何も起きない）
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

  /* ヘッダーのナビリンク: ゴールドの文字色 + 下線。
     CTA（.nav__cta）はボタンなので除外し、下の不透明度80%の方を適用する */
  .nav__menu a:not(.nav__cta):hover {
    color: var(--gold-1);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }

  /* 押せるものは共通で不透明度80%
     ヘッダー: ロゴ / ヘッダーCTA
     ヒーロー・料金表・フォームのボタン
     フッターのリンク / 電話番号（tel:リンク）
     ※ よくある質問（.faq-item__q）は開閉のアニメーションがあるため、
       ホバー演出は付けない */
  .nav__logo:hover,
  .nav__cta:hover,
  .cta-pill:hover,
  .plan-btn:hover,
	.contact__confirm:hover,
  .contact__submit:hover,
  .footer__links a:hover,
  .contact__tel a:hover,
  .footer__office a:hover {
    opacity: .8;
  }

  /* ハンバーガーボタンは中身が3本の線だけなので、
     線をまとめている親の側に不透明度をかける */
  .nav__toggle { transition: opacity .2s ease; }
  .nav__toggle:hover { opacity: .8; }
}

/* 動きを減らす設定（OSの「視差効果を減らす」など）を尊重する */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   561px〜  —  大きめのスマホ / 小型タブレット
   ========================================================= */
@media (min-width: 561px) {
  .container { padding-inline: var(--gutter); }
  .section { padding-block: 64px; }
  .sec-head { margin-bottom: 48px; }
  .sec-head__ja { font-size: 28px; }

  .nav__logo { width: 165px; height: 22px; }

  .cta-pill {
    display: inline-flex;
    width: auto;
    margin-inline: 0;
    padding: 16px 70px;
    font-size: 18px;
  }

  .hero__label { font-size: 22px; }
  .hero__lead { font-size: 24px; }

  .intro__claim { font-size: 22px; margin-top: 0; }
  .intro__title { font-size: 23px; }

  .journey__note,
  .worry__close { font-size: 20px; }

  .worry__grid,
  .team__grid { gap: 40px; }

  .case__list .num--hi,
  .case__metric .num--hi {
    font-size: 24px;
  }

  /* アバターは固定サイズにする。カラムの高さに追従させると、
     コメントの行数が違う左右のカードで円の大きさがそろわないため */
  .voice { grid-template-columns: auto 1fr; column-gap: 12px; }
  .voice__avatar { width: 110px; align-self: center; }
  .case__head { font-size: 20px; }
  .pt-note small { display: inline; }

  .contact__body { padding: 40px 40px 36px; }

  .faq-item__q { font-size: 16px; padding: 24px 24px 24px 48px; }
  .faq-item__a { padding: 32px 40px 40px 80px; }
  .faq-item__a p { font-size: 15px; }

  /* 可読性: 大きめのスマホ / 小型タブレットでは本文を少し大きくする */
  .sec-head__lead { font-size: 17px; }
  .worry-card__desc { font-size: 15px; }
  .worry-card__quote { font-size: 14px; }
  .step__desc { font-size: 14px; }
  .reason__desc { font-size: 15px; }
  .member__bio { font-size: 14px; }
  .voice__quote { font-size: 14.5px; }
  .case__row p { font-size: 14px; }

  .member__top { flex-direction: row; align-items: stretch; text-align: start; }
  .member__tags { justify-content: flex-start; }

  /* フッターはここではまだ縦積みのまま — 3カラムを横並びにするには「会社情報」列が
     不自然に折り返さずに収まる約920pxが必要（921px以上のルールを参照） */
  .footer__links--grid { grid-template-columns: 140px auto; }
}

/* =========================================================
   740px〜  —  タブレット縦向き
   3項目の画像セクションを2列にして、大きな画像が延々と1列で
   積み上がらないようにする。（921px以上で3列になる）
   740px = iPad mini 縦(744px)を含める下限。列が狭くなるぶん、
   お悩みカードの見出しだけ画面幅に応じて縮める */
@media (min-width: 740px) {
  .worry__grid,
  .reasons__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .worry-card__ttl { font-size: clamp(17px, 2.3vw, 20px); }

  /* この幅からは料金表がスクロールなしで収まるので、横スクロールのヒントは隠す
     （コンテンツ幅 = 760 - 48 = 712px ≧ .ptable の min-width 640px） */
  .pricing__hint { display: none; }
}

/* =========================================================
   921px〜  —  タブレット横向き / デスクトップ
   ========================================================= */
@media (min-width: 921px) {
  .section { padding-block: 88px; }
  .sec-head__ja { font-size: 35px; }

  /* 可読性: デスクトップでは本文を最も大きくする。
     .worry-card__desc / .reason__desc は3カラムになる幅では列が狭く、
     手動 <br> と衝突して行末に1文字だけ落ちるため、1081px以上で拡大する */
  .sec-head__lead { font-size: 18px; }
  .step__desc { font-size: 14.5px; }
  .faq-item__a p { font-size: 16px; }

  .case__list .num--hi,
  .case__metric .num--hi {
    font-size: 28px;
  }

  /* デスクトップ用に調整した手動改行を復活させる（モバイルでは無効化） */
  .intro__text br,
  .voice__quote br { display: inline; }

  /* ヘッダー → 横並びメニュー */
  /* ナビが64px→72pxに高くなるので、#about の着地位置もその分下げる */
  :root { --header-h: 90px; }
  .nav { height: 72px; padding: 0 24px 0 40px; }
  .nav__toggle { display: none; }
  .nav__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    background: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
  }
  .nav__menu a { padding: 16px 18px; text-align: start; width: auto; max-width: none; font-size: 14px; }
  .nav__cta { margin-top: 0; margin-left: 48px; width: auto; max-width: none; height: 48px; font-size: 15px; }

  /* ヒーロー */
  .hero__inner { grid-template-columns: 1fr 1.05fr; gap: 20px; }
  .hero__title { font-size: clamp(34px, 3.9vw, 55px); }
  .hero__media { min-height: 540px; max-width: none; }

  /* イントロ */
  .intro__inner { grid-template-columns: 360px 1fr; gap: 36px; text-align: start; }
  .intro__body { text-align: right; }
  .intro__photo { width: auto; height: 430px; margin-inline: 0; }
  .intro__photo-clinic { width: 400px; height: 400px; top: 20%; bottom: auto; left: 50%; }
  /* 院長写真: セクションの高さではなく「幅」を基準にサイズを決め、左下に固定する。
     これにより 921〜1080px でテキスト列が縦に伸びても大きさが一定に保たれ、
     膨れ上がらない。透明な上部ははみ出してクリップされる。
     左端はセクション（画面幅いっぱい）ではなくコンテナの左端にそろえる。
     画面がコンテナの最大幅より広くなっても .intro__inner から離れない */
  .intro__photo-doctor {
    inset: 0 auto 0 var(--container-offset);
    width: clamp(420px, 38vw, 580px);
    height: auto;
  }
  .intro__photo-doctor img { width: 100%; height: auto; object-fit: fill; }
  .intro__claim { font-size: 30px; }
  .intro__title {
    font-size: clamp(26px, 2.4vw, 34px);
    padding: 14px 6px 14px 40px;
    text-align: start;
  }
  /* 白い帯をセクションの右端までブリードさせる */
  .intro__title::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100vw;
    background: #fff;
    z-index: -1;
  }

  /* ジャーニー → コネクター付きの中央寄せ横並び */
  .journey__track {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 32px;
  }
  /* カードを flex-shrink させて、5枚並べてもコンテナからはみ出さないようにする
     （旧: 固定180px×5 + 45pxギャップ = 1080px で、約1128px未満の画面でははみ出していた）。
     max-width で余裕があるときは元の180pxの見た目を保つ */
  .jcard { flex: 1 1 0; width: auto; min-width: 0; max-width: 180px; }
  /* 狭いカード内ではリストを再び左寄せに戻す */
  .jcard__list { text-align: left; padding-left: 4px; }
  .jcard__list li { width: auto; margin-inline: 0; }
  /* カード間をつなぐ細い線矢印のコネクター（Figmaに合わせる） */
  .jcard::after {
    content: "";
    position: absolute;
    top: 116px;
    right: -30px;
    width: 28px;
    height: 12px;
    background: no-repeat center / contain;
    background-image: url("../images/vector-11.png");
  }
  .jcard:last-child::after { display: none; }

  /* 1カラム → 3カラムのグリッド */
  .worry__grid,
  .reasons__grid,
  .team__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* 横並びのとき、左右の事例カードの高さをそろえる。
     .result-col を親グリッドの行に参加させる（subgrid）ことで、
     1行目＝事例カード / 2行目＝お客様の声 が、それぞれ左右で同じ高さになり、
     カード下端と吹き出しの開始位置がそろう */
  .results__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .result-col {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  /* 高さをそろえた分の余白は成果ボックスに吸収させ、
     左右の成果ボックスとタグの位置がそろうようにする。
     伸びたぶん中身が上に寄ってしまうので、grid にして上下中央に置く
     （justify-items: center で、これまでの「中央寄せ」の見え方も保つ） */
  .case { display: flex; flex-direction: column; }
  .case__body { flex: 1; display: flex; flex-direction: column; }
  .case__result {
    flex: 1;
    display: grid;
    align-content: center;
    justify-items: center;
  }
  /* 吹き出しも左右で同じ高さになるので、コメントを上下中央に置く */
  .voice__bubble { align-items: center; }
  /* 78px = Figma のリード文下の32pxギャップ + アーチのはみ出し46px */
  .steps { --steps-gap: 40px; grid-template-columns: repeat(3, 1fr); margin-top: 78px; }
  /* ステップ間をつなぐ矢印: アーチからアーチまで伸び、カード上辺の上に配置する。
     矢じり部分は固定サイズの片羽（Figma）なので、線だけが伸びる */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: -25px;
    left: calc(50% + 67px);
    right: calc(67px - 50% - var(--steps-gap));
    height: 10px;
    z-index: 3;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M9 9L1 1' fill='none' stroke='%231A2F5A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right bottom / 10px 10px,
      linear-gradient(var(--navy), var(--navy)) no-repeat left bottom / 100% 2px;
  }

  /* ビフォー/アフター → 横並び */
  .ba__grid { grid-template-columns: 1fr auto 1.14fr; gap: 26px; }
  .ba__arrow { transform: none; margin-inline: 0; }

  /* 料金表 → スクロールなしで収まる */
  .ptable-scroll { overflow-x: visible; }
  .ptable { grid-template-columns: 190px repeat(3, 1fr); min-width: 0; }

  /* フッター → 横並び（ブランド + ナビ2列を並べられる幅が確保できた） */
  .footer__inner { flex-direction: row; align-items: stretch; gap: 56px; }
}

/* =========================================================
   561px〜920px  —  タブレット縦向き（ヘッダーはハンバーガーのまま）
   モバイル用の1カラムのままだと、画面幅に対して中身が小さく中央に
   寄りすぎて余白だらけになるため、この帯だけ個別に整える
   ========================================================= */
@media (min-width: 561px) and (max-width: 920px) {
  /* ヒーロー: 画像グループを画面幅に見合う大きさにする。
     min-height は縦長の .ph2（幅51% × 421/316 ≒ 幅の0.68倍）が
     はみ出さない高さにしておく（560 × 0.51 × 1.33 ≒ 381px） */
  .hero__media { max-width: 560px; min-height: 400px; }

  /* イントロ: 院長写真は .intro を基準にした絶対配置で、既定では
     セクションの左端（x=0）に置かれる。タブレットでは中央寄せの写真ボックスと
     大きく離れて構図が崩れるため、ボックスの左端に合わせて動かす */
  .intro__photo { width: 520px; height: 380px; }
  .intro__photo-clinic { width: 300px; height: 300px; }
  .intro__photo-doctor { height: 380px; margin-left: calc(50% - 260px); }

  /* ジャーニー: 5枚の縦1列は間延びするので3枚ずつ並べる。
     6分割グリッドで1枚2列ぶんを使い、余る4・5枚目は1列ずらして中央に置く */
  .journey__track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }
  .jcard { width: auto; max-width: none; grid-column: span 2; }
  .jcard:nth-child(4) { grid-column: 2 / span 2; }

  /* フッター: 3列を横に並べる幅はないので、ブランド情報を1段目に広げ、
     ナビ2列を2段目に横並びにする（住所の不自然な折り返しも解消される） */
  .footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 40px;
  }
  .footer__brand { grid-column: 1 / -1; width: auto; }
}

/* 740px〜920px  —  チーム紹介も2列にする。
   列が狭くなるぶん、アバターを上に置く縦積み（モバイルと同じ）に戻して
   肩書きの「ー」だけが次の行に落ちるのを防ぐ */
@media (min-width: 740px) and (max-width: 920px) {
  .team__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .member__top { flex-direction: column; align-items: center; text-align: center; }
  .member__tags { justify-content: center; }
}

/* =========================================================
   921px〜1080px  —  タブレット横向き
   デスクトップ用レイアウト（横並びメニュー・3カラム）に切り替わるが、
   幅が足りず折り返し・重なりが起きる箇所をこの帯だけ調整する
   ========================================================= */
@media (min-width: 921px) and (max-width: 1080px) {
  /* ヒーロー: 69px のままだと「また来たい」に続く「と」が次の行へ落ちるので、
     テキスト列の幅に収まるサイズにする */
  .hero__title .kanji { font-size: clamp(40px, 6.3vw, 69px); }

  /* ジャーニー: 5枚を横一列に並べるとカードが狭すぎて文章が細切れになるため、
     タブレット縦と同じ3枚+2枚のグリッドにする。
     矢印は同じ行のカード間だけに残す（3枚目と5枚目は行末なので消す） */
  .journey__track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
  }
  .jcard { width: auto; max-width: none; grid-column: span 2; }
  .jcard:nth-child(4) { grid-column: 2 / span 2; }
  .jcard::after { right: -24px; width: 24px; }
  .jcard:nth-child(3)::after { display: none; }

  /* 3カラムの列が狭いので、見出しを1段階小さくして
     行末に1〜2文字だけ落ちるのを防ぐ */
  .worry-card__ttl { font-size: clamp(14.5px, 1.6vw, 18px); }
  .reason__ttl { font-size: 20px; }

  /* メンバーカードも列が狭いため、アバターを上に置く縦積みに戻す */
  .member__top { flex-direction: column; align-items: center; text-align: center; }
  .member__tags { justify-content: center; }

  /* 料金表: 列幅が狭く「人気プラン」バッジがプラン名に重なるので、
     モバイルと同じく .pt-head 上部の帯（padding-top: 52px）を残す */
}

/* =========================================================
   921px〜1259px  —  横並びメニューが原寸では収まらない幅
   ロゴ・メニュー・CTAの合計は約1125px必要で、それ未満の幅では
   各項目が2行に折り返してしまう。画面幅に合わせて連続的に詰める
   （921pxで最小値、1260px以降はデスクトップの原寸に戻る）
   ========================================================= */
@media (min-width: 921px) and (max-width: 1259px) {
  .nav { padding: 0 16px 0 24px; }
  .nav__logo { width: clamp(135px, 13vw, 165px); }
  .nav__menu { gap: 4px; }
  .nav__menu a {
    padding: 12px clamp(8px, 1.1vw, 18px);
    font-size: clamp(12.5px, 1.15vw, 14px);
    white-space: nowrap;
  }
  .nav__cta {
    margin-left: clamp(16px, 2.6vw, 48px);
    height: 44px;
    padding: 0 clamp(16px, 1.8vw, 26px);
    font-size: clamp(13px, 1.2vw, 15px);
  }
}

/* =========================================================
   1081px〜  —  ワイドデスクトップ
   ========================================================= */
@media (min-width: 1081px) {
  .hero__title { white-space: nowrap; }
  .intro__inner { grid-template-columns: 440px 1fr; gap: 56px; }
  .intro__title { white-space: nowrap; }
  .footer__inner { gap: 96px; }

  /* 可読性: 列に余裕があるので本文を最も大きくする */
  .worry-card__desc { font-size: 16px; }
  .reason__desc { font-size: 16px; }

  /* 幅広の列: バッジの横にプラン名が1行で収まるので、上部の帯は不要 */
  .pt-head { padding: 8px 12px; }
}

/* =========================================================
   921px〜1199px  —  イントロの写真と本文の重なり解消
   この幅では「院長写真 + 丸い写真 + 本文」が横に並びきらず、
   丸い写真が本文の行頭に重なってしまう（重ならずに収まるのは約1200px以上）。
     ・院長写真は幅ではなく高さ基準にして、写真ボックスの下端にそろえる
     ・丸い写真は院長写真の右肩から覗く位置に置く
     ・本文は右寄せの固定幅にして、写真と重ならない位置で折り返させる
   1081px以上のデスクトップ指定を上書きするため、この位置に置いている
   ========================================================= */
@media (min-width: 921px) and (max-width: 1199px) {
  .intro__inner { grid-template-columns: clamp(300px, 33vw, 380px) 1fr; gap: 28px; align-items: end; }
  .intro__photo { height: clamp(340px, 38vw, 420px); }
  .intro__photo-clinic {
    width: clamp(240px, 27vw, 300px);
    height: clamp(240px, 27vw, 300px);
    top: auto;
    bottom: 0;
    left: auto;
    right: clamp(-100px, -9vw, -60px);
  }
  /* bottom の 60px は .intro の padding-block と同じ値（写真ボックスの下端に合わせる） */
  .intro__photo-doctor { inset: auto auto 60px var(--container-offset); width: auto; height: clamp(340px, 38vw, 420px); }
  .intro__photo-doctor img { width: auto; height: 100%; object-fit: contain; object-position: left bottom; }
  .intro__body { max-width: 450px; margin-left: auto; }
  /* 本文幅を絞ったぶん、リード文と白帯の見出しも収まるサイズにする */
  .intro__claim { font-size: 22px; }
  .intro__title { font-size: 20px; padding: 14px 6px 14px 24px; }
  /* デスクトップの行長に合わせた手動改行は、この幅では自然な折り返しに任せる */
  .intro__text br { display: none; }
}

/* 1200px〜1279px  —  コンテナが最大幅(1280px)に達するまでの間は、
   本文の行が長く丸い写真に食い込むため、行長だけ抑えて右に寄せる */
@media (min-width: 1200px) and (max-width: 1279px) {
  .intro__claim { font-size: 25px; }
  .intro__text { max-width: 500px; margin-left: auto; }
  .intro__text br { display: none; }
}