/* ============================================
   ひすい歯科 採用サイト — 歯科衛生士特設ページ専用スタイル
   hygienist.css
   ※ .page-main / .breadcrumb / .page-title / h2.type-d / アニメーションは common.css で定義
   モバイルファースト（ブレイクポイント: 751px）
   ============================================ */

/* ----------------------------------------
   キャッチコピー＆リードセクション
   ---------------------------------------- */

.hyg-catch {
  padding: 14vw 0 10vw;
  background-color: var(--color-white);
  text-align: center;
}

.hyg-catch__main {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 5vw;
}

/* キャッチは無装飾とするため、
   ここにあった「一生モノ」のメインカラー + グラデーション下線の指定は削除 */

.hyg-catch__lead {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
  text-align: left;
  max-width: 680px;
  margin: 0 auto;
}

/* ページ内ジャンプ（.hidden-xs によりSPでは非表示、PCのみ表示） */
.hyg-catch__jumps-list {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hyg-catch__jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.4em;
  border: 2px solid var(--main-color);
  border-radius: var(--radius-btn);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
}

.hyg-catch__jump:hover {
  background-color: var(--main-color);
  color: var(--color-white);
}

/* ----------------------------------------
   セクション番号バッジ（①②③④）
   ---------------------------------------- */

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 2vw;
  margin-bottom: 4vw;
}

/* 丸は数字を囲む器であって、それ自体がサイズを主張しない。
   __num と __label は同一フォントサイズとし、丸の直径は数字の約2.1倍に収める
   （ページ内ジャンプナビ「① 臨床」の、丸囲み数字と和文が同サイズで
   1語として読める関係をそのまま着地点に持ち込む） */
.section-badge__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.6vw;
  height: 7.6vw;
  border-radius: 50%;
  background-color: var(--main-color);
  color: var(--color-white);
  font-family: var(--font-gothic);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  line-height: 1;
  flex-shrink: 0;
}

/* ラベルはセクション名（道案内の情報）であってキッカーではないため、
   --color-text で読ませる。ミントは丸バッジだけが持つ */
.section-badge__label {
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: 0.04em;
}

/* 和文ラベルの英語対語。バッジ行全体を1つのキッカーとして読ませるため、
   サイズは __label と同値に揃える（丸と和文を同サイズで1語として読ませる
   __num / __label の設計思想を、そのまま英字まで延長する）。
   書体・色・字送りは common.css の h2.type-a .en-label を踏襲 */
.section-badge__en {
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  /* 読み込むのは EB Garamond italic 500/600。ラベルは 500 */
  font-weight: 500;
  font-size: var(--fs-table-sp);
  color: var(--color-light-brown);
  letter-spacing: 0.06em;
  /* line-height は指定しない。__label と行ボックスの高さを揃えることで、
     .section-badge の align-items: center がベースライン一致として働く */
}

/* 区切りの全角スラッシュ。装飾のため疑似要素で持たせ、HTML には出さない */
.section-badge__en::before {
  content: '／';
  font-family: var(--font-gothic);
  font-style: normal;
  letter-spacing: normal;
  margin-right: 0.1em;
}

/* ----------------------------------------
   共通：セクション本文スタイル
   ---------------------------------------- */

.hyg-body {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

.hyg-body p {
  margin-bottom: 1.4em;
}

.hyg-body p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
   共通：写真ブロック
   ---------------------------------------- */

.photo-figure {
  margin: 0;
}

.photo-figure__wrap {
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 2vw;
}

.photo-figure__img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
}

.photo-figure__wrap:hover .photo-figure__img {
  transform: scale(1.03);
}

/* ----------------------------------------
   Section①【臨床】1日8人 — ズームフェードインアニメーション
   ---------------------------------------- */

@keyframes hyg-zoom-fade-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hyg-clinical__photo.fade-in.is-visible .photo-figure__img {
  animation: hyg-zoom-fade-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ----------------------------------------
   Section①【臨床】1日8人
   ---------------------------------------- */

.hyg-clinical {
  padding: 14vw 0;
  background-color: var(--color-white);
}

/* 本文冒頭のドロップキャップ（`::first-letter` で「6」を拡大）は廃止した。
   ::first-letter は先頭1文字しか取れず、「60分予約制」の2桁の数値を分断して
   「6」が「0分」に続くのか次行の「では、1日」に続くのか判別できなかったため。
   → 仕様書 8-2章「和文本文にドロップキャップを使わない」 */

/* 強調テキスト（太字斜体 + ミントグリーン下線 — SP） */
.hyg-emphasis {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: rgba(16, 208, 171, 0.5);
  text-underline-offset: 0.2em;
}

/* 数値強調（サークルアイコン） */
.mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8vw;
  order: 0;
}

.mini-stat {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
  overflow: visible;
  z-index: 2;
}

.mini-stat__circle {
  width: 28vw;
  height: 28vw;
  max-width: 130px;
  max-height: 130px;
  border-radius: 50%;
  border: 1px solid var(--main-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5vw;
}

/* 指標アイコン（Material Icons Round）。
   処方は .numbers__icon（top.css）/ .benefit-card__icon と同じ ── メインカラーの線画で、
   アイコン自身は円背景を持たない。円の「内側」に置くのは、外側に置くと
   ミントの線画アイコンとミントの円が上下に分かれ、1つのまとまりにミントの丸い塊が
   2つ並ぶ状態（仕様書 5章が .numbers__icon に円背景を禁じている理由）になるため。
   内側なら円は 1px の輪郭ひとつのままで、.numbers__panel の縦順
   （アイコン → 数値+単位 → 指標名）もそのまま再現できる。
   font-size は .mini-stat__num の 0.64 ＝ .numbers__icon の SP 比と同値。

   min() の上限 25px は .mini-stat__circle が max-width: 130px で成長を止める
   viewport 464px 時点の実効値（5.4vw × 464 = 25.06px）。
   円だけが止まって中身が vw のまま伸びると、内容高 18.43vw が 130px を超える
   viewport 705px 以降で文字が円からはみ出す（.mini-stat は overflow: visible）。
   SP のブレイクポイントは 750px までなので iPad mini 縦（744px）が該当する。
   同じ理由で __num / __unit にも同じ地点の cap を入れ、円の内側の比率を凍結する。 */
.mini-stat__icon {
  display: block;
  font-size: min(5.4vw, 25px);
  color: var(--main-color);
  line-height: 1;
  margin-bottom: 1.5vw;
}

.mini-stat__num {
  font-size: min(calc(var(--fs-num-sp) * 0.55), 39px);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--main-color), #0eb596);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mini-stat__unit {
  font-size: min(var(--fs-xs-sp), 12px);
  color: var(--color-mid-gray);
  display: block;
  margin-top: 0.2em;
  -webkit-text-fill-color: var(--color-mid-gray);
}

/* 指標名。かつて --fs-xs-sp（サイト最小）で、数値との比が 0.30 しかなく
   「何の数値か」を読み落とす状態だった（.numbers__label が塗りピルを外して
   引き上げた経緯と同じ問題）。--fs-table-sp で比 0.42 とし、
   .numbers__panel の指標名÷数値（SP 0.40 / PC 0.36）と同じ階層に揃える。
   円の外にあるので cap は持たせない（溢れる先が無く、SP を vw で通すのが全体方針）。 */
.mini-stat__label {
  display: block;
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  color: var(--color-brown);
  letter-spacing: 0.05em;
}

/* 本文 + 写真スタック */
.hyg-clinical__main {
  display: flex;
  flex-direction: column;
  margin-bottom: 8vw;
}

/* SP: テキストは写真の後（order:2）、写真スタックが先（order:1） */
.hyg-clinical__text {
  order: 2;
  margin-top: -30px;
  background: #fff;
  border-radius: 20px;
  /* 左右 0：本文の左端を .innr の 8% ガター（見出し・他セクション本文）に揃える。
     SP はセクション背景と同じ白のためカード輪郭は見えず、左右パディングは
     余白を広げるだけになっていた */
  padding: 24px 0;
  position: relative;
  z-index: 2;
}

/* 写真スタック（SP: メイン大きく、サブを右下に25〜30%重ねる） */
.hyg-clinical__photo-stack {
  order: 1;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 14%; /* サブ写真がはみ出す分の余白 */
  /* ガターではなくレイアウト装置。右下に重ねるサブ写真（right: 0 でパディングボックス
     right = ガター位置に着地する）の分だけ、メイン写真を内側へ寄せる */
  padding-right: 8%;
}

.hyg-clinical__photo {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

/* サブ写真（ポラロイド風・右下に重ねる） */
.hyg-clinical__sub-photo {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 52%;
  z-index: 3;
}

/* ポラロイド風スタイル */
.polaroid .photo-figure__wrap {
  background: var(--color-white);
  padding: 6px 6px 22px 6px;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transform: rotate(3deg);
  margin-bottom: 0;
  overflow: visible;
}

.polaroid .photo-figure__img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.polaroid .photo-figure__wrap:hover .photo-figure__img {
  transform: scale(1.04);
  filter: saturate(1.2) brightness(1.03);
}

/* ----------------------------------------
   Section②【教育】院内研修
   ---------------------------------------- */

.hyg-education {
  padding: 14vw 0;
  position: relative;
  /* bg__top クラスで背景色＋margin-bottom 指定 */
}

/* 抽象形状の背景装飾（PC で visible） */
.hyg-education::after {
  content: '';
  position: absolute;
  top: -8%;
  right: -8%;
  width: 55vw;
  height: 55vw;
  background: rgba(16, 208, 171, 0.06);
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
  pointer-events: none;
  z-index: 0;
  display: none; /* SPでは非表示、PCで表示 */
}

/* ベネフィットカード（SP: 大きな角丸 + 浮遊感のある全方向拡散シャドウ） */
.benefit-grid {
  display: flex;
  flex-direction: column;
  gap: 5vw;
  margin-bottom: 8vw;
  position: relative;
  z-index: 1;
}

.benefit-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 5vw var(--pad-card-sp);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 0 14px rgba(16, 208, 171, 0.07);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 左端アクセントライン */
.benefit-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--main-color), var(--main-color-hover));
}

/* ホバー：ミントグリーンが内側から広がる塗りつぶしアニメーション */
.benefit-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(16, 208, 171, 0.1) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 0 20px rgba(16, 208, 171, 0.12);
}

.benefit-card:hover::after {
  opacity: 1;
}

/* コンテンツを ::after より前面に */
.benefit-card__heading,
.benefit-card__body,
.benefit-card__icon {
  position: relative;
  z-index: 1;
}

/* アイコン */
.benefit-card__icon {
  display: block;
  font-size: 2rem;
  color: var(--main-color);
  margin-bottom: 2.5vw;
}

/* アイコン：ホバー時にわずかに跳ねる */
@keyframes hyg-icon-bounce {
  0%, 100% { transform: translateY(0); }
  35%       { transform: translateY(-8px); }
  65%       { transform: translateY(-3px); }
}

.benefit-card:hover .benefit-card__icon {
  animation: hyg-icon-bounce 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* カード見出し。同ページの .equip-banner__title / .story-item__title と同格（--fs-h3b 系）。
   かつては common.css の h3.type-b（白文字＋メインカラーのベタ塗り）を流用していたが廃止した
   （→ 仕様書5章「ピルの語彙」）。見出しは「拾わせたい語」であり、塗りは padding のぶん字を
   小さく保つ圧力とコントラスト低下を招く。ミントはアイコンと罫線に残し、文字はサイズと色で立てる。
   reset.css が h3 の font-size / font-weight を inherit にしているため実描画値を書く。
   下マージンは持たない（reset.css の margin: 0 のまま）。見出しと本文の間隔は
   .benefit-card__heading 側が一括で持ち、flex の中央揃えを狂わせない。 */
.benefit-card__title {
  font-size: var(--fs-h3b-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: 1.4;
}

/* 旧実装では h3 の margin-bottom: 1em（＝4.6vw）が加算されて実効 7.6vw あった。
   塗りラベル廃止でその 1em が消えるため、こちら側で間隔を引き取る */
.benefit-card__heading {
  margin-bottom: 4vw;
}

.benefit-card__body {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

/* プルクォート（エディトリアル強化：大きなクォートマーク + ドットテクスチャ） */
.pullquote {
  border-left: none;
  background-color: rgba(255, 255, 255, 0.88);
  background-image: radial-gradient(circle, rgba(16, 208, 171, 0.14) 1px, transparent 1px);
  background-size: 18px 18px;
  /* 左だけ広いのは装飾クォートマーク（::before）を逃がすための非対称インデント。
     ガターでもカード内側の標準値でもないため、左のみトークンから外す */
  padding: 5vw var(--pad-card-sp) 5vw 7vw;
  border-radius: 12px;
  margin: 6vw 0;
  position: relative;
  overflow: hidden;
}

/* 大きな装飾クォートマーク */
.pullquote::before {
  content: '\201C';
  position: absolute;
  top: -0.1em;
  left: 0.15em;
  font-size: 5.5em;
  line-height: 1;
  color: var(--main-color);
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

.pullquote__text {
  font-size: var(--fs-h3b-sp);
  color: var(--color-brown);
  line-height: 1.7;
  font-style: normal;
  position: relative;
  z-index: 1;
}

/* 教育写真フレーム：非対称 border-radius（SP は控えめに） */
.hyg-education__photo .photo-figure__wrap {
  border-radius: 20px 6px 20px 6px;
}

/* 教育セクション スクロールアニメーション：テキスト先行→写真スライドイン */
.hyg-education__text.fade-in-up {
  transition-delay: 0s;
}

.hyg-education__photo.fade-in {
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s,
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.hyg-education__photo.fade-in.is-visible {
  transform: translateX(0);
}

/* ----------------------------------------
   Section③【設備】新レイアウト
   Item-1（最優先）→ Item-2（優先）→ Item-3/4（補足）
   ---------------------------------------- */

.hyg-equipment {
  padding: 14vw 0;
}

.hyg-equipment .hyg-body {
  margin-bottom: 6vw;
}

/* ── Item-1: ジェットウォッシャー（SP: 画像フルワイド → テキスト下） ── */
.equip-main {
  display: flex;
  flex-direction: column;
  margin-bottom: 10vw;
}

/* .innr の内側から窓幅いっぱいへ逃がす。
   -8% では親の内容幅（0.84W）に対する 6.72% しか戻らず、窓端に 1.28% の隙間が残るため、
   窓幅を直接指定して中央基準で振り出す。SP は 751px 未満でスクロールバーを持たないので
   100vw が窓幅と一致する（PC では下の media query が上書きする）。 */
.equip-main__image-wrap {
  position: relative;
  order: 1;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.equip-main__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 写真の上の文字は白フェード＋濃い文字色（→ 仕様書1章「写真上の文字の可読性」）。
   .mv__overlay / .sv-turn__overlay と同じ手法で、かつてここだけがミントのベールに
   白文字を載せていた（サイト内で唯一の写真上の有彩色ベール）。

   2段目のストップが要る理由: この要素は padding 8vw / 4vw と1行の行高で高さが決まり、
   文字が載るのは下端から 23〜54% の帯にあたる。下端から上端へ一直線に退色させると
   文字の上端では実効不透明度が 0.38 まで落ち、濃い文字が沈む。文字の帯を 0.86 で
   平らに保ち、その上（写真だけが見える領域）でだけ 0 まで退色させる。

   MV・転換バンドと違って長さ基準ではなく % を使うのは、あちらが「帯高は svh /
   aspect-ratio 基準・文字は vw 基準」で単位系が食い違うのに対し、ここは高さ自体が
   コンテンツ側（padding + 行高）から決まり、SP は全部 vw・PC は全部 px で閉じているため。
   結果、文字帯の占める割合は SP 23.1〜53.8% / PC 24.3〜51.5% とほぼ一致し、
   55% の1値で両方を覆える（PC メディアクエリ側に上書きは不要）。

   コントラストは最悪ケース（真っ黒な画素の上）で 0.90 → #E6E6E6 で 10.5:1、
   0.86 → #DBDBDB で 9.4:1。SP 3.8vw ≒ 14px / PC 16px と大文字扱いにならないサイズ
   （AA 4.5:1 必須）なので、転換バンドの下限 0.62（4.88:1）ではなく余裕を取る。 */
.equip-main__catchcopy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.90) 0,
    rgba(255, 255, 255, 0.86) 55%,
    rgba(255, 255, 255, 0)   100%
  );
  color: var(--color-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sp);
  /* 親 .equip-main__image-wrap が窓幅いっぱいなので、この 8% はそのまま
     サイト共通ガターと一致する */
  padding: 8vw 8% 4vw;
  line-height: 1.4;
}

.equip-main__text {
  order: 2;
  padding: 6vw 0 0;
}

.equip-main__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3b-sp);
  color: var(--color-text);
  margin-bottom: 0.6em;
  line-height: 1.4;
  border-left: 4px solid var(--main-color);
  padding-left: 0.6em;
}

.equip-main__desc {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.8;
}

/* ── Item-2: クラスB滅菌器（SP: 背景色付きカード） ── */
/* .equip-main__image-wrap と同じ理由の全幅ブリード。
   内側ガターは vw で持つ（% だと親 .innr の内容幅に解決され 6.72% になる）ため、
   バナー内のテキストが他セクションの本文と同じ縦ラインから始まる。 */
.equip-banner {
  background-color: #F0F9F8;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 10vw;
  padding: 8vw var(--innr-bleed-sp-padding);
}

.equip-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 5vw;
}

.equip-banner__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.equip-banner__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3b-sp);
  color: var(--color-text);
  margin-bottom: 0.6em;
  line-height: 1.4;
}

.equip-banner__desc {
  font-size: var(--fs-body-sp);
  color: var(--color-dark-gray);
  line-height: 1.8;
}

/* ── Item-3 & 4: ルーペ ＆ Apple Watch（SP: 縦積みコンパクト）── */
.equip-sub-grid {
  display: flex;
  flex-direction: column;
  gap: 4vw;
}

.equip-sub-card {
  display: flex;
  flex-direction: column;
}

.equip-sub-card__photo {
  margin-bottom: 4vw;
}

/* ポラロイドの傾き（設備セクション限定・左右交互 -2° / +1.5° / -2°）
   共有 .polaroid（#clinical）に影響しないよう .equip-sub-grid 配下にスコープ */
.equip-sub-grid .polaroid .photo-figure__wrap {
  transform: rotate(-2deg);
}

.equip-sub-grid .equip-sub-card:nth-child(2) .polaroid .photo-figure__wrap {
  transform: rotate(1.5deg);
}

.equip-sub-card__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4-sp);
  color: var(--color-text);
  margin-bottom: 0.4em;
  line-height: 1.4;
}

.equip-sub-card__desc {
  font-size: var(--fs-sub-sp);
  color: var(--color-dark-gray);
  line-height: 1.8;
}

/* ----------------------------------------
   Section④【1日の流れ】
   写真+カード型ストーリーフロー
   SP: 写真→カード 縦積み
   PC: 写真↔カード 横並び（ジグザグ交互）
   ゴール(18:40): フルブリード
   ---------------------------------------- */

.hyg-timeline {
  padding: 14vw 0;
  background-color: var(--color-white);
  margin-bottom: var(--cnt-c-sp);
  overflow: hidden; /* goal のフルブリード margin が親を突き抜けるのを抑制 */
}

/* h2.type-d デコレーション + h2.type-a 主見出しの組み合わせ */
.timeline-heading {
  margin-bottom: 8vw;
}

/* タイムライン導入テキスト（幅制約） */
.hyg-timeline__intro {
  max-width: 700px;
}

/* ストーリーフロー */
.story-flow {
  list-style: none;
  padding: 0;
  margin: 0;
}

.story-item {
  margin-bottom: 12vw;
  position: relative;
}

.story-item:last-child {
  margin-bottom: 0;
}

/* 写真エリア */
.story-item__photo {
  margin: 0 0 5vw;
}

.story-item__photo-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--main-color-pale);
}

/* <picture> をラッパーいっぱいに広げ、内側 img の height:100% 基準を確保 */
.story-item__photo-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.story-item__photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 時刻バッジ（写真右下オーバーレイ） */
.story-item__time {
  position: absolute;
  right: 4vw;
  bottom: 4vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18vw;
  height: 18vw;
  border-radius: 50%;
  background-color: var(--main-color);
  color: var(--color-white);
  font-family: var(--font-gothic);
  font-size: 4.8vw;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(16, 208, 171, 0.3);
}

/* テキストカード（背景を持たない素のテキスト。
   周囲の本文と同じ縦ラインに揃えるため横インデントは持たせない） */
.story-item__card {
  padding: 0;
}

.story-item__meta {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-bottom: 3vw;
  color: var(--color-light-brown);
}

.story-item__icon {
  font-size: 3.8vw;
}

.story-item__time-text {
  font-family: var(--font-gothic);
  font-size: 3vw;
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  line-height: 1;
}

.story-item__title {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h3b-sp);
  font-weight: var(--fw-normal);
  color: var(--color-text);
  margin-bottom: 3vw;
  line-height: 1.5;
}

.story-item__note {
  font-size: var(--fs-body-sp);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 4vw;
}

.story-item__label {
  font-size: var(--fs-sm-sp);
  font-weight: var(--fw-bold);
  color: var(--color-light-brown);
  letter-spacing: 0.1em;
}

/* ゴール（18:40退勤）フルブリード（viewport端まで）。
   全幅ブロックなので内側はカードトークンではなくガター（vw 版）を使う */
.story-item--goal {
  margin: 16vw calc((100vw - 100%) / -2) 0;
}

.story-item--goal .story-item__photo {
  margin: 0;
}

.story-item--goal .story-item__photo-wrap {
  border-radius: 0;
  aspect-ratio: 3 / 4;
}

.story-item--goal .story-item__time {
  right: 6vw;
  bottom: 6vw;
  width: 22vw;
  height: 22vw;
  font-size: 5.8vw;
}

.story-item--goal .story-item__card {
  padding: 8vw var(--innr-bleed-sp-padding);
  text-align: center;
  background-color: var(--main-color-pale);
}

.story-item__goal-copy {
  font-size: 6.4vw;
  line-height: 1.6;
  color: var(--color-brown);
  margin-bottom: 4vw;
}

.story-item--goal .story-item__note {
  font-size: var(--fs-body-sp);
  color: var(--color-text);
  margin-bottom: 0;
}

/* 補足ノート */
.timeline-note {
  background-color: var(--color-bg);
  border-radius: 8px;
  padding: 4vw var(--pad-card-sp);
  margin-top: 10vw;
}

.timeline-note__title {
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin-bottom: 2vw;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.timeline-note__title .material-icons-round {
  color: var(--main-color);
  font-size: 1.2em;
}

.timeline-note__body {
  font-size: var(--fs-sub-sp);
  color: var(--color-dark-gray);
  line-height: 1.9;
}

.timeline-note__body p {
  margin-bottom: 1em;
}

.timeline-note__body p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
   CTA（衛生士ページ版）
   ---------------------------------------- */

.hyg-cta {
  padding: 14vw 0;
  background-color: var(--color-deep-green);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* 背景装飾 */
.hyg-cta::before,
.hyg-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(16, 208, 171, 0.06);
  pointer-events: none;
}

.hyg-cta::before {
  width: 60vw;
  height: 60vw;
  top: -20%;
  right: -15%;
}

.hyg-cta::after {
  width: 40vw;
  height: 40vw;
  bottom: -15%;
  left: -10%;
}

.hyg-cta__inner {
  position: relative;
  z-index: 1;
}

.hyg-cta__copy {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  color: var(--color-white);
  line-height: 1.7;
  margin-bottom: 5vw;
}

.hyg-cta__sub {
  font-size: var(--fs-sub-sp);
  /* .75 は深緑地（L* 41）で 4.26:1 と AA を割る。.85 で 4.96:1
     （→ variables.css の --color-deep-green：この面の階層は不透明度で作らない） */
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 7vw;
  line-height: 1.8;
}

.hyg-cta__btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 3vw;
  align-items: center;
}

/* メインボタン */
.hyg-cta__btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 4.5vw;
  background: linear-gradient(135deg, var(--main-color), var(--main-color-50));
  color: var(--color-white);
  border-radius: var(--radius-btn);
  font-size: var(--fs-h4-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
  box-shadow: 0 4px 16px rgba(16, 208, 171, 0.4);
}

.hyg-cta__btn-main:hover {
  background: linear-gradient(135deg, var(--main-color-hover), var(--main-color));
  box-shadow: 0 6px 24px rgba(16, 208, 171, 0.55);
  transform: translateY(-2px);
}

.hyg-cta__btn-main .material-icons-round {
  font-size: 1.2em;
}

/* サブボタン */
.hyg-cta__btn-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  width: 100%;
  padding: 3.5vw;
  /* 白で塗り、インクを深緑に反転させる。地色だった --color-deep-green をそのまま文字側へ
     移す形で、SPナビ（.sp-nav__link のアイコン）が確立した反転と同じ語彙。白地 6.03:1。
     文字にメインカラーは使えない（#10D0AB は白地 1.98:1）。
     枠線パターン（透過地＋白枠線）から塗りへ変えたのは、エントリー導線が面を持たず
     軽く見えていたため。トップCTAの .cta__btn-sub（top.css）と対で同じ形を持つ。
     枠線は白で残す。塗りと同色なので見えないが、外すと外形寸法が変わるため。 */
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-btn);
  color: var(--color-deep-green);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
}

/* ホバーは淡ミント地に沈める。文字は深緑のまま（#DBF8F3 上で 5.38:1）。
   一次ボタン .hyg-cta__btn-main の translateY(-2px) ＋ box-shadow の語彙を侵さないので、
   同じ深緑面に隣接して並んでいても主従が保たれる。 */
.hyg-cta__btn-sub:hover {
  background-color: var(--main-color-pale);
  border-color: var(--main-color-pale);
}

/* Material Icons Round の既定は 24px。指定しないと文字 --fs-table-sp（約13px）に対して
   アイコンだけ 24px で描画される。.cta__btn-sub / .hyg-cta__btn-main と同じ 1.2em に揃える */
.hyg-cta__btn-sub .material-icons-round {
  font-size: 1.2em;
}

/* ----------------------------------------
   PC（751px 以上）
   ---------------------------------------- */

@media (min-width: 751px) {

  /* キャッチ */
  .hyg-catch {
    padding: 80px 0 60px;
    text-align: center;
  }

  .hyg-catch__main { font-size: 2.25rem; margin-bottom: 28px; }
  .hyg-catch__lead { font-size: var(--fs-body); }

  /* セクションバッジ */
  .section-badge { gap: 10px; margin-bottom: 20px; }
  .section-badge__num {
    width: 32px;
    height: 32px;
    font-size: var(--fs-table);
  }
  .section-badge__label { font-size: var(--fs-table); }
  .section-badge__en { font-size: var(--fs-table); }

  /* Section① 臨床 */
  .hyg-clinical {
    padding: 80px 0;
  }

  /* PC: mini-statsをグリッド1列目・1行目に配置 */
  .mini-stats {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: none;
    margin-bottom: 24px;
    order: unset;
  }

  /* 110px から拡大。アイコンが加わって内容高が 52.8px → 78.8px になり、
     110px のままでは充填率 72% で円の内側が窮屈になる。124px なら 64% で SP と同等。
     列幅（.hyg-clinical__main の 1fr ＝ 1080px ÷ 2.2 ≒ 491px を 2列 gap 16px で分けて
     各 237.5px）に対しては十分な余裕がある */
  .mini-stat__circle {
    width: 124px;
    height: 124px;
    max-width: none;
    max-height: none;
    margin-bottom: 8px;
  }

  /* SP ベースの min(5.4vw, 25px) は PC でも 25px として生き続けるため、
     ここで必ず上書きする。書き漏らすとアイコンだけ SP 比（0.65）のまま残る。
     20px は .mini-stat__num(38.4px) の 0.52 ＝ .numbers__icon の PC 比 0.50 相当 */
  .mini-stat__icon  { font-size: 1.25rem; margin-bottom: 6px; }
  .mini-stat__num   { font-size: 2.4rem; }
  .mini-stat__unit  { font-size: var(--fs-xs); -webkit-text-fill-color: var(--color-mid-gray); }
  /* 数値の 0.39。アイコン(20px)との比は 1.33（.numbers__panel は 1.40） */
  .mini-stat__label { font-size: var(--fs-table); }

  /* PC: テキストと写真スタックの2段グリッド */
  .hyg-clinical__main {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0;
    margin-bottom: 50px;
  }

  .hyg-clinical__text {
    grid-column: 1;
    grid-row: 2;
    order: unset;
    margin-top: 0;
    /* 左 0：本文の左端を .innr のガター線（見出し h2.type-a・.section-badge・
       同じ1列目の .mini-stats）に揃える。パネルの背景 rgba(255,255,255,0.9) は
       セクション背景 --color-white と同色で、左側は白地に白＝面が見えないため、
       左パディングはインデントだけを残していた（SP 側と同じ理由 → base 側のコメント）。
       右 60px は残す。margin-right: -100px でパネルが写真カラムへ食い込む側では
       白パネルが写真の上に載って実際に面として見え、border-radius: 20px の角に
       文字が寄らないためのカード内側余白として機能している。 */
    padding: 48px 60px 48px 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 0 20px 20px 0;
    margin-right: -100px;
    position: relative;
    z-index: 2;
  }

  /* PC: 説明文を2カラム */
  .hyg-clinical__text .hyg-body {
    column-count: 2;
    column-gap: 1.8em;
  }

  /* PC: 強調テキストは下線なし（太字斜体のみ） */
  .hyg-emphasis {
    text-decoration: none;
  }

  /* 写真スタック（PC: グリッド右列を占有） */
  .hyg-clinical__photo-stack {
    grid-column: 2;
    grid-row: 1 / span 2;
    order: unset;
    position: relative;
    align-self: stretch;
    padding-bottom: 0;
    padding-right: 0;
  }

  .hyg-clinical__photo {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .hyg-clinical__photo .photo-figure__wrap {
    height: 100%;
    border-radius: 0;
    margin-bottom: 0;
  }

  .hyg-clinical__photo .photo-figure__img {
    height: 100%;
    object-fit: cover;
  }

  /* サブ写真（PC: メイン画像の右下に重ねる） */
  .hyg-clinical__sub-photo {
    position: absolute;
    bottom: -6%;
    right: -5%;
    width: 50%;
    z-index: 3;
  }

  /* ポラロイド（PC: 傾き・白縁を維持） */
  .polaroid .photo-figure__wrap {
    padding: 8px 8px 28px 8px;
  }

  .hyg-body { font-size: var(--fs-body); }

  /* Section② 教育 */
  .hyg-education {
    padding: 80px 0;
    overflow: hidden; /* 抽象形状が枠外にはみ出さないようにクリップ */
  }

  /* 抽象形状の背景装飾 PC で表示 */
  .hyg-education::after {
    display: block;
    width: 40vw;
    height: 40vw;
  }

  .benefit-grid {
    flex-direction: row;
    gap: 24px;
    margin-bottom: 50px;
  }

  .benefit-card { flex: 1; padding: 32px var(--pad-card-pc); }
  .benefit-card__icon { font-size: 2.4rem; margin-bottom: 16px; }
  .benefit-card__title { font-size: var(--fs-h3b); }
  /* 旧実効値は 16px + h3 の 1em（20px）≒ 36px。塗りラベル廃止分をここで引き取る */
  .benefit-card__heading { margin-bottom: 20px; }
  .benefit-card__body { font-size: var(--fs-body); }

  .pullquote { padding: 28px var(--pad-card-pc) 28px 48px; margin: 40px 0; }
  .pullquote__text { font-size: var(--fs-h3b); }

  /* PC: 教育写真 + テキスト オーバーラップレイアウト */
  .hyg-education__main {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    align-items: start;
    position: relative;
    z-index: 1;
  }

  .hyg-education__photo {
    width: auto;
    flex-shrink: unset;
    position: relative;
    z-index: 1;
  }

  /* PC: 非対称 border-radius（対角線上に強調） */
  .hyg-education__photo .photo-figure__wrap {
    border-radius: 30px 6px 30px 6px;
  }

  /* PC: テキストが写真左端に重なる */
  .hyg-education__text {
    flex: unset;
    margin-left: -60px;
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 20px 0 0 20px;
    padding: 60px 60px 60px 80px;
    align-self: center;
  }

  /* PC: 教育写真スライドイン方向を右から（写真が左配置のため） */
  .hyg-education__photo.fade-in {
    transform: translateX(-40px);
  }

  /* Section③ 設備 PC */
  .hyg-equipment { padding: 80px 0; }
  .hyg-equipment .hyg-body { margin-bottom: 48px; }

  /* Item-1: ジェットウォッシャー PC フルワイド＋テキストオーバーレイ */
  .equip-main {
    display: block;
    position: relative;
    margin-bottom: 60px;
  }

  .equip-main__image-wrap {
    order: unset;
    margin: 0;
    width: 100%;
  }

  .equip-main__img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 12px;
  }

  /* キャッチコピーをグラデーション退色エリア外（右寄り）に限定 */
  .equip-main__catchcopy {
    left: 50%;
    font-size: var(--fs-body);
    padding: 40px 28px 20px;
    border-radius: 0 0 12px 0;
  }

  /* テキストブロックを画像左側にオーバーレイ */
  .equip-main__text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 62%;
    order: unset;
    padding: 48px 10% 48px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    background: linear-gradient(
      to right,
      #F3F0EC 0%,
      #F3F0EC 52%,
      rgba(243, 240, 236, 0) 100%
    );
  }

  .equip-main__title { font-size: var(--fs-h2-small); }
  .equip-main__desc  { font-size: var(--fs-body); }

  /* Item-2: クラスB滅菌器 PC innr幅カード。SPの全幅ブリードを解除する */
  .equip-banner {
    width: auto;
    margin: 0 0 60px;
    padding: 48px var(--pad-card-pc);
    background-color: var(--color-white);
    border-radius: 12px;
  }

  .equip-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }

  .equip-banner__image-wrap { flex: 1; }
  .equip-banner__text       { flex: 1; }

  .equip-banner__img {
    height: 280px;
    object-fit: cover;
  }

  .equip-banner__title { font-size: var(--fs-h3a); }
  .equip-banner__desc  { font-size: var(--fs-body); }

  /* Item-3 & 4: ルーペ ＆ Apple Watch PC 2カラム */
  .equip-sub-grid {
    flex-direction: row;
    gap: 24px;
    padding: 0;
  }

  .equip-sub-card {
    flex: 1;
  }

  .equip-sub-card__photo {
    margin-bottom: 16px;
  }

  .equip-sub-card__title { font-size: var(--fs-h4); }
  .equip-sub-card__desc  { font-size: var(--fs-sub); }

  /* Section④ タイムライン */
  .hyg-timeline {
    padding: 80px 0;
    margin-bottom: var(--cnt-c-pc);
  }

  .timeline-heading { margin-bottom: 60px; }

  /* ストーリーフロー */
  .story-flow { margin: 0; }

  .story-item {
    display: flex;
    align-items: stretch;
    gap: 56px;
    margin-bottom: 72px;
  }

  /* ジグザグ：偶数番目は写真を右に */
  .story-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  .story-item__photo {
    flex: 0 0 440px;
    margin: 0;
  }

  .story-item__photo-wrap {
    aspect-ratio: 1 / 1;
  }

  /* 時刻バッジ（PC） */
  .story-item__time {
    right: 20px;
    bottom: 20px;
    width: 88px;
    height: 88px;
    font-size: 1.375rem;
  }

  /* カード（PC：縦中央揃え） */
  .story-item__card {
    flex: 1;
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .story-item__meta {
    gap: 10px;
    margin-bottom: 16px;
  }

  .story-item__icon {
    font-size: 1rem;
  }

  .story-item__time-text {
    font-size: var(--fs-sm);
    letter-spacing: 0.15em;
  }

  .story-item__title {
    font-size: var(--fs-h3a);
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .story-item__note {
    font-size: var(--fs-body);
    margin-bottom: 20px;
  }

  .story-item__label {
    font-size: var(--fs-sm);
  }

  /* ゴール項目：PC = 写真左2/3 + テキスト右1/3 のフルブリード横並び */
  .story-item.story-item--goal {
    display: flex;
    flex-direction: row;   /* :nth-child(even) の row-reverse を打ち消す */
    gap: 0;
    align-items: stretch;
    margin: 120px calc((100vw - 100%) / -2) 0;
  }

  .story-item--goal .story-item__photo {
    flex: 0 0 66.6667%;    /* 画面幅の 2/3 */
    margin: 0;
  }

  .story-item--goal .story-item__photo-wrap {
    width: 100%;
    aspect-ratio: 3 / 1;
    max-height: 560px;
    border-radius: 0;
  }

  .story-item--goal .story-item__time {
    right: 40px;
    bottom: 40px;
    width: 120px;
    height: 120px;
    font-size: 1.875rem;
  }

  .story-item--goal .story-item__card {
    flex: 1;               /* 残り 1/3 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px var(--pad-card-lg-pc);
    text-align: center;
    /* ミント背景は base ルールから継承 */
  }

  .story-item__goal-copy {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }

  .story-item--goal .story-item__note {
    font-size: var(--fs-body);
  }

  /* 補足ノート */
  .timeline-note { padding: 28px var(--pad-card-pc); margin-top: 60px; }

  .timeline-note__title {
    font-size: var(--fs-body);
    margin-bottom: 12px;
  }

  .timeline-note__body { font-size: var(--fs-sub); }

  /* CTA */
  .hyg-cta { padding: 100px 0; }

  .hyg-cta::before { width: 480px; height: 480px; top: -120px; right: -80px; }
  .hyg-cta::after  { width: 300px; height: 300px; bottom: -80px; left: -60px; }

  .hyg-cta__copy { font-size: 1.75rem; margin-bottom: 20px; }
  .hyg-cta__sub  { font-size: var(--fs-sub); margin-bottom: 40px; }

  .hyg-cta__btn-wrap {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .hyg-cta__btn-main {
    padding: 18px 36px;
    font-size: var(--fs-h4);
    width: auto;
    min-width: 300px;
  }

  .hyg-cta__btn-sub {
    padding: 16px 30px;
    font-size: var(--fs-table);
    width: auto;
    min-width: 220px;
  }
}

/* ============================================
   セクションB レイアウト改修
   ============================================ */

/* ----------------------------------------
   edu-layout: メインレイアウト（SP: 縦並び）
   ---------------------------------------- */
.edu-layout {
  display: flex;
  flex-direction: column;
  gap: 8vw;
  margin-bottom: 10vw;
}

/* ----------------------------------------
   共感ボックス（過去の悩み）
   ---------------------------------------- */
.edu-empathy {
  border-radius: 12px;
  padding: 5vw var(--pad-card-sp);
  margin: 0 0 28px;
  font-size: var(--fs-body-sp);
  color: var(--color-mid-gray);
  line-height: 1.9;
}

.edu-empathy p { margin-bottom: 0.8em; }
.edu-empathy p:last-child { margin-bottom: 0; }

.edu-empathy__main {
  font-family: 'Klee One', serif;
}

.edu-empathy__question {
  color: var(--color-brown);
  font-style: italic;
}

/* ----------------------------------------
   解決テキスト（ひすい歯科の日常）
   ---------------------------------------- */
/* 背景を持たない素のテキスト。横インデントは持たせない */
.edu-solution {
  padding: 0;
  font-size: var(--fs-body-sp);
  line-height: 1.9;
  color: var(--color-dark-gray);
}

.edu-solution p { margin-bottom: 1em; }
.edu-solution p:last-child { margin-bottom: 0; }

/* 強調は common.css の strong（ミントのマーカー帯）をそのまま使う */

/* ----------------------------------------
   ダイアリー群（要素5→要素3→要素4）
   ---------------------------------------- */
.edu-diary {
  display: flex;
  flex-direction: column;
}

/* 点線コネクタ */
.edu-diary__connector {
  width: 2px;
  height: 6vw;
  border-left: 2px dashed var(--main-color-50);
  margin: 0 auto;
}

/* キャッチコピー（繊細なイタリック） */
.edu-diary__quote {
  margin: 0;
  position: relative;
  z-index: 2;
}

.edu-diary__quote .pullquote__text {
  font-style: italic;
}

/* 研修後写真 */
.edu-diary__after {
  margin-top: 0;
}

/* ----------------------------------------
   ゴールドアンダーライン
   ---------------------------------------- */
.edu-gold-line {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: #B8960C;
  text-underline-offset: 0.2em;
}

/* ----------------------------------------
   INDEX風カード（要素1リニューアル）SP
   ---------------------------------------- */
.benefit-grid--index {
  flex-direction: column;
  gap: 0;
  margin-top: 6vw;
  margin-bottom: 0;
  border-top: 1px solid var(--color-gray);
}

.benefit-card--index {
  background: transparent;
  border-radius: 0;
  padding: 5vw 0;
  box-shadow: none;
  border-bottom: 1px solid var(--color-gray);
  overflow: visible;
  transition: none;
}

.benefit-card--index:hover {
  transform: none;
  box-shadow: none;
}

.benefit-card--index::before,
.benefit-card--index::after {
  display: none;
}

/* アイコン + 見出しを横並びに */
.benefit-card--index .benefit-card__heading {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.benefit-card--index .benefit-card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.benefit-card__content {
  flex: 1;
  min-width: 0;
}

/* ----------------------------------------
   セクションB レイアウト改修 — PC（751px以上）
   ---------------------------------------- */
@media (min-width: 751px) {

  /* edu-layout: PC 左右2カラム */
  .edu-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 60px;
  }

  /* 共感ボックス PC */
  .edu-empathy {
    padding: 32px var(--pad-card-pc);
    margin: 0;
    font-size: var(--fs-body);
  }

  /* 解決テキスト PC */
  .edu-solution {
    margin-top: 32px;
    padding: 0;
    font-size: var(--fs-body);
  }

  /* ダイアリー点線コネクタ PC */
  .edu-diary__connector {
    height: 28px;
  }

  /* INDEXカード PC: 横並び */
  .benefit-grid--index {
    flex-direction: row;
    gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--color-gray);
    border-bottom: 1px solid var(--color-gray);
  }

  .benefit-card--index {
    padding: 40px var(--pad-card-lg-pc);
    border-bottom: none;
    border-right: 1px solid var(--color-gray);
    gap: 24px;
    flex: 1;
  }

  .benefit-card--index:last-child {
    border-right: none;
  }

  .benefit-card--index .benefit-card__icon {
    margin-bottom: 0;
  }

}


/* ============================================
   セクションB左カラム PC版レイアウト改修
   ============================================ */

@media (min-width: 751px) {

  /* ブロック1: グレーボックスを縦書き大テキスト用に再定義 */
  .edu-empathy {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
  }

  /* 縦書き本文（h2.type-a .ja-title と同等サイズ・フォント） */
  .edu-empathy__main {
    writing-mode: vertical-rl;
    font-family: 'Klee One', serif;
    font-size: var(--fs-h2-small2); /* 2.25rem — h2.type-a .ja-title と同値 */
    letter-spacing: 0.12em;
    margin-bottom: 0;
  }

  /* ブロック2: 共感の問いかけ（横書き・中央寄せ・デフォルトカラー） */
  .edu-empathy__followup {
    text-align: center;
    font-size: var(--fs-body);
    color: var(--color-dark-gray);
    font-style: normal;
    margin: 28px 0;
    line-height: 1.8;
  }

  /* ブロック3: 解決策（横書き・標準） */
  .edu-solution {
    margin-top: 0; /* ブロック2のmarginで調整済み */
  }
}

/* .font-klee 上書き（common.css より後に読み込まれるため詳細度で競合回避） */
.hyg-catch__main.font-klee {
  font-family: 'Klee One', serif;
}