/* ============================================
   ひすい歯科 採用サイト — 共通スタイル
   モバイルファースト（ブレイクポイント: 751px）
   ============================================ */

/* ----------------------------------------
   Base
   ---------------------------------------- */

html {
  font-size: var(--fs-base-size);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-gothic);
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-normal);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: var(--transition-base);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}

input,
textarea,
select {
  transition: var(--transition-base);
}

.serif {
  font-family: var(--font-gothic);
}

.font-klee {
  font-family: 'Klee One', var(--font-serif);
  font-weight: 600;
}

/* ----------------------------------------
   Layout
   ---------------------------------------- */

/* 標準コンテンツ幅 */
.innr {
  padding: var(--innr-sp-padding);
}

.innr2 {
  padding: var(--innr2-sp-padding);
}

.innr3 {
  padding: 0;
}

/* セクション間スペース */
.cnt.type-a {
  padding-bottom: var(--cnt-a-sp);
}

.cnt.type-b {
  padding-bottom: var(--cnt-b-sp);
}

.cnt.type-c {
  padding-bottom: var(--cnt-c-sp);
}

/* 白背景ブロック */
.bg__w {
  background-color: var(--color-white);
  margin-bottom: var(--cnt-b-sp);
}

/* 淡緑背景ブロック */
.bg__top {
  background-color: var(--main-color-pale);
  margin-bottom: var(--cnt-b-sp);
}

/* 表示・非表示ユーティリティ */
.visible-xs {
  display: block;
}

.hidden-xs {
  display: none;
}

/* ----------------------------------------
   Header
   ---------------------------------------- */

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  z-index: 9990;
  height: var(--header-h-sp);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: var(--transition-base);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 1vw 2vw;
}

/* ロゴ */
.header__logo a {
  display: block;
  width: var(--header-logo-sp);
}

.header__logo img {
  width: 100%;
  height: auto;
}

.header__logo-text {
  display: block;
  font-size: var(--fs-xs-sp);
  color: var(--color-mid-gray);
  letter-spacing: 0.05em;
  margin-top: 0.3em;
}

/* PCナビ（SP非表示） */
.header__nav {
  display: none;
}

/* ハンバーガーボタン */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 11.28vw;
  height: 11.28vw;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2vw;
  z-index: 9999;
  position: relative;
}

.hamburger__line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-dark-gray);
  transition: transform 0.5s, opacity 0.3s;
  transform-origin: center;
}

/* ハンバーガー アクティブ状態 */
.hamburger.is-active .hamburger__line:nth-child(1) {
  animation: ham-top 0.5s forwards;
}

.hamburger.is-active .hamburger__line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active .hamburger__line:nth-child(3) {
  animation: ham-bottom 0.5s forwards;
}

@keyframes ham-top {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(7px) rotate(0); }
  100% { transform: translateY(7px) rotate(30deg); }
}

@keyframes ham-bottom {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-7px) rotate(0); }
  100% { transform: translateY(-7px) rotate(-30deg); }
}

/* SPナビオーバーレイ */
.sp-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s;
  overflow-y: auto;
  padding: var(--header-h-sp) 0 10vw;
}

.sp-nav.is-open {
  opacity: 1;
  visibility: visible;
}

/* sp-nav 内 閉じるボタン */
.sp-nav__close {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--header-h-sp);
  height: var(--header-h-sp);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  /* 白地のドロワー。ハンバーガー（.hamburger__line）と同じ --color-dark-gray
     を使い、同位置・同色で「☰ が ✕ に変わった」と読ませる（白地 8.07:1） */
  color: var(--color-dark-gray);
  z-index: 1;
  transition: opacity 0.3s;
}

.sp-nav__close:hover {
  opacity: 0.7;
}

.sp-nav__close .material-icons-round {
  font-size: 6.4vw;
}

.sp-nav__list {
  padding: 0;
}

.sp-nav__item {
  border-bottom: 1px solid var(--color-gray);
}

.sp-nav__link {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 4vw 8%;
  color: var(--color-text);
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-medium);
  transition: opacity 0.8s;
}

/* 白地のアイコン。装飾（非テキスト）なので 3:1 が基準だが、メインカラー系は
   白地で #16EDC3 が 1.6:1、#10D0AB が 1.98:1 とどちらもこれを割るため使えない。
   地色だった --color-deep-green を 6.1:1 でそのままインク側へ移している。 */
.sp-nav__link .material-icons-round {
  font-size: 5vw;
  color: var(--color-deep-green);
}

.sp-nav__cta {
  margin: 6vw 8% 0;
  display: flex;
  flex-direction: column;
  gap: 3vw;
}

.sp-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-align: center;
  padding: 3.5vw;
  border-radius: var(--radius-btn);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
}

.sp-nav__btn--primary {
  background-color: var(--main-color);
  color: var(--color-white);
}

/* 二次ボタンは操作要素。SPナビは白地なので、深緑面の二次ボタン
   （.cta__btn-sub / .hyg-cta__btn-sub ＝ 白塗り＋深緑文字）のパターンは使えない
   ── 白地に白で塗っても面が出ない。白地の枠線ボタン .btn.type-b と同じ
   「メインカラー 2px 枠線 ＋ 本文色の文字」に揃える。1px ではなく 2px なのは
   #10D0AB が白地 1.98:1 と弱く、1px では境界として読めないため
   （サイトの枠線ボタンは全て 2px） */
.sp-nav__btn--secondary {
  border: 2px solid var(--main-color);
  color: var(--color-text);
}

/* Material Icons Round の既定は font-size: 24px（Google Fonts 配信の CSS）。
   指定しないと文字 3.58vw（375px幅で約13px）に対しアイコンだけ 24px になり、
   ベースライン揃えで上方向にはみ出す。他の CTA（.mv__btn / .header__cta-btn /
   .cta__btn-main）と同じく文字基準の em で持たせる。
   flex-shrink は reset.css の min-width: 0 対策 */
.sp-nav__btn .material-icons-round {
  font-size: 1.2em;
  flex-shrink: 0;
}

/* ----------------------------------------
   Headings
   ---------------------------------------- */

/* h2.type-a ─ セクション主見出し */
h2.type-a {
  margin-bottom: 7vw;
}

h2.type-a::before {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background-color: var(--main-color);
  margin-bottom: 1.2em;
}

h2.type-a .en-label {
  display: block;
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  /* 読み込むのは EB Garamond italic 500/600。ラベルは 500 */
  font-weight: 500;
  /* .page-title__en と同値。サイト内のラベル英字はこの1サイズに揃える */
  font-size: 4vw;
  color: var(--color-light-brown);
  /* 連綿体ではないため詰める理由がない。ロゴの「ゆったり組む」語彙を弱く反映する */
  letter-spacing: 0.06em;
  text-transform: none;
  margin-bottom: 0.5em;
}

h2.type-a .ja-title {
  display: block;
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  font-weight: var(--fw-normal);
  color: var(--color-text);
  line-height: 1.5;
}

/* h2.type-c ─ サブセクション見出し */
h2.type-c {
  font-size: var(--fs-h3a-sp);
  font-weight: var(--fw-bold);
  color: var(--main-color);
  border-bottom: 2px solid var(--main-color);
  padding-bottom: 0.4em;
  margin-bottom: 1.5em;
}

/* h3.type-a ─ サブセクション区切り
   書体は Klee One。サイト内の Klee One 見出し（h2.type-a .ja-title /
   .sv-qa__title / .promise__title）と同じ扱いで、文字色は --color-text に揃える。
   メインカラーは文字ではなく下線（装飾）side に残す：
   #10D0AB は白地でコントラスト 1.98:1 しかなく、WCAG AA の大文字基準（3:1）を
   満たさない。Klee One は楷書でゴシックより線が細いため、文字色に使うと更に落ちる。
   色を装飾に逃がすことで「メインカラーの記号を持つ見出し」という identity は保たれる。 */
h3.type-a {
  font-family: 'Klee One', serif;
  font-size: var(--fs-h3a-sp);
  /* Klee One は 400/600 のみ読み込み。reset の inherit 任せにせず実描画値を書く */
  font-weight: var(--fw-normal);
  color: var(--color-text);
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 0.4em;
  margin-bottom: 1em;
}

/* h3.type-b（白文字＋メインカラーのベタ塗りラベル）は廃止した。
   唯一の使用箇所だった .benefit-card--index の見出しは
   .benefit-card__title（hygienist.css・素テキスト）へ移した。→ 仕様書5章「ピルの語彙」 */

/* h4 ─ セパレーター型見出し */
h4 {
  font-size: var(--fs-h3b-sp);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 1em;
}

h4::before,
h4::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-gray);
}

/* ----------------------------------------
   和文の折り返し（SP）
   ----------------------------------------

   ブラウザ既定の和文改行は「禁則にかからない限りどの文字位置でも折る」ため、
   幅の狭い SP では最終行に1文字だけ取り残されたり（`…教育漏れをゼロ / に`）、
   語の途中で折れたり（`…取れますか？祝 / 日は…`）する。
   word-break: auto-phrase は形態素の区切り（文節）でのみ折るので、これが解消する。

   適用は見出し・キャッチ・CTAコピーに限る。本文は行数が多く1文字取り残しが
   目立たないうえ、文節優先で折ると行末の凸凹が増えて可読性が落ちるため対象外。

   このポリシーは6ページ横断で1つのものなので、対象セレクタが専用CSS側の
   クラスであっても定義はここへ集約する。7ファイルに散らすと「どこに効いて
   いるか」を一覧できず、文言変更時に追随できなくなるため。

   PC（751px 以上）では効かせない。1行あたりの文字数が SP の約2倍あり
   取り残しがそもそも起きないうえ、既存の折り返し位置を動かさないため
   （下の @media (min-width: 751px) で normal に戻す）。

   未対応ブラウザ（Firefox）では宣言が無視され、従来どおりの折り返しに戻るだけ。 */
h2.type-a .ja-title,
h3.type-a,
.page-title__ja,
/* index */
.cta__copy,
.promise__title,
.guide-panel__catch,
/* doctor */
.doctor-catch__main,
.doctor-cta__copy,
/* doctor — 99の質問（question.js がデータから生成する設問・回答） */
.question,
.answer,
/* dental-hygienist */
.hyg-catch__main,
.hyg-cta__copy,
.benefit-card__title,
.story-item__title,
/* staff-voice */
.sv-lead__catch,
.sv-qa__title,
.sv-cta__copy,
/* recruit */
.recruit-catch__copy,
.recruit-cta__copy,
/* faq */
.faq-item__question,
.faq-cta__copy {
  word-break: auto-phrase;
}

/* MVキャッチ（.mv__catch-main）は対象外。
   <br class="visible-xs"> で改行位置を手で決めており（仕様書 8-1 の X-1 例外）、
   文節改行を重ねると意図した3行構成が崩れる。 */

/* ----------------------------------------
   強調テキスト装飾（仕様書 8章）
   ---------------------------------------- */

/* 本文用：ミントのマーカー帯。見出しには使わない（帯が太くなり文字が沈むため） */
strong {
  font-weight: var(--fw-bold);
  background: linear-gradient(transparent 60%, var(--main-color-pale) 60%);
}

/* ----------------------------------------
   見出し・キャッチの強調装飾（4要素システム・仕様書 8-1）

   文字を強調する手段は 色・サイズ・線・点 の4つ。単独で使えるのは3つで、
   色だけは単独の軸を持たない（下の C-1）。

   C. 色
     C-1. 文字色だけを変えて強調しない。色は順序を持たず単独では合図にならない
     C-2. 文字色を変えてよいのは .em-num のみ。必ず拡大とセット
     C-3. 強調に使う色はメインカラー1色に限る。強調専用色を新設しない
     C-4. 白地に載る文字色はコントラスト 3:1 以上。メインカラー #10D0AB は
          1.98:1 のため文字色に使わず、装飾（線・下線・背景）側に置く
   S. サイズ
     S-1. サイズで強調してよいのは数字・時刻だけ。和文の語には使わない
     S-2. 倍率は --em-num-scale の単一値のみ。箇所ごとの直値を作らない
   L・D. 線と点の選び分け
     L/D-1. 述語（〜する/〜を/〜に）＝線、名詞（状態の名前）＝点
     L/D-2. 医院が語る語＝線（下）、求職者・スタッフの語＝点（上）
     L/D-3. 傍点は2〜4文字・全角のみ。L/D-4. 下線は5文字以上で --long
   X. 併用
     X-1. 線と拡大は1見出しに合わせて1箇所まで
     X-2. 点は対比構造なら両極に2箇所まで
     X-3. 点と線は併用しない　X-4. 点と拡大は併用可
     X-5. 見出しに strong のマーカー帯は使わない
     X-6. 意図的に無装飾の見出しを残す

   X-1 の例外は index.html の MV キャッチ1箇所のみ（仕様書に記録済み）。
   ---------------------------------------- */

/* 軸1 ルーペ ─ 数字を拡大する。書体は変えない。
   書体を変えると和文の中に別の声が混ざり、数字だけが浮く。
   font-family: inherit で見出しと同じ書体を保ち、サイズという一軸だけで階層をつくる。
   ※ かつてゴシックの先頭は Roboto（ネオグロテスク）で、Klee One の隣に置いたときの
     浮きが特に激しかった。現在は Noto Sans JP に統合して差は縮まっているが、
     「和文の中で書体を切り替えない」という原則自体は変わらない（→ 2章）。
   ウェイト 600 は Klee One では実フォント、Noto Sans JP では 700 に解決され、
   いずれも合成ボールドにならない。 */
.em-num {
  display: inline-block;      /* 数字の途中で改行させない */
  font-family: inherit;
  font-size: calc(1em * var(--em-num-scale));
  font-weight: 600;
  color: var(--em-num-color);
  line-height: 1;             /* 拡大分が行送りを押し広げないようにする */
  vertical-align: baseline;
}

/* 軸2 鉛筆風アンダーライン ─ 想い・約束を語る語の下に引く。
   Klee One（楷書・手書きの筆致）に対し、手で引いた線は出自が揃う。

   3本のストロークを重ねて筆圧のムラと擦れを作る：
     太い主線（不透明）／細い二度書き（0.5）／破線のかすれ（0.3）

   SVG は mask として敷き、色は background-color 側の CSS 変数で与える。
   データURI に色を焼き込むと --main-color から切り離されるため。
   ストロークを白にしているのは、alpha / luminance どちらのマスクモードで
   解釈されても「見せる」側になり結果が変わらないため。
   ※ mask-* は Safari / iOS Safari で -webkit- プレフィックスが必須 */
.em-line {
  position: relative;
  display: inline-block;      /* ::after の基準を作る。語が行末で割れるのも防ぐ */
  font-style: normal;         /* <em> の既定のイタリックを打ち消す（和文にイタリックは使わない） */

  /* インラインブロックの高さは「親の line-height × フォントサイズ」になる。
     下線は ::after の bottom でこのボックス下端に紐づくため、指定しないと
     親の line-height が大きいページほど下線が文字から離れる
     （recruit 1.4 → 0.20em ／ faq 1.7 → 0.35em）。1 に固定して切り離す。
     下の bottom: -0.33em はこれとセットの値。 */
  line-height: 1;
}

.em-line::after {
  content: '';
  position: absolute;
  left: -0.06em;
  right: -0.06em;             /* 語より少しはみ出させ、書き始め・書き終わりの勢いを出す */
  bottom: -0.33em;            /* .em-line の line-height: 1 とセット（→ 上のコメント） */
  height: 0.22em;
  background-color: var(--em-line-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M5 10.6C46 7.2 88 12.6 132 9.4 172 6.4 208 11.2 235 8.4' stroke-width='4.2' stroke-dasharray='52 2.4 34 1.8 74 2.2 46'/%3E%3Cpath d='M11 7.5C52 4.8 94 9.9 138 6.7 176 4 206 8.3 229 6.1' stroke-width='2' stroke-opacity='.45' stroke-dasharray='40 3 60 2.5 50'/%3E%3Cpath d='M8 12.5C50 9.9 96 14.4 140 11.2 178 8.6 210 12.6 232 10.8' stroke-width='1.3' stroke-opacity='.3' stroke-dasharray='2.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M5 10.6C46 7.2 88 12.6 132 9.4 172 6.4 208 11.2 235 8.4' stroke-width='4.2' stroke-dasharray='52 2.4 34 1.8 74 2.2 46'/%3E%3Cpath d='M11 7.5C52 4.8 94 9.9 138 6.7 176 4 206 8.3 229 6.1' stroke-width='2' stroke-opacity='.45' stroke-dasharray='40 3 60 2.5 50'/%3E%3Cpath d='M8 12.5C50 9.9 96 14.4 140 11.2 178 8.6 210 12.6 232 10.8' stroke-width='1.3' stroke-opacity='.3' stroke-dasharray='2.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;

  /* 未描画。右端を閉じておき、画面に入ったら左から開く。
     transform: scaleX() や background-size ではマスクごと横に潰れて
     波形が変形するため、完成した線を見せていく clip-path を使う。 */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

/* 5〜6文字の語用。同じ描線を 360 単位まで延長し、60単位/em の密度を保つ。
   基準の SVG（240単位）は4文字＝60単位/em で設計しているため、そのまま
   6文字に使うと 40単位/em まで引き伸ばされ、波も擦れも伸びきって
   「定規で引いた線」に見えてしまう。
   破線パターンは 360 単位を1周する長さに引き直してある。240単位用の値を
   流用すると途中で巻き戻り、線の後半が欠けて「インクが切れた」ように見える。
   上書きするのは mask-image だけでよく、色・サイズ・描画演出は継承される。 */
.em-line--long::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 16' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M5 10.6C25 8.2 45 12.4 65 10.2C85 8 105 12.6 125 10.4C145 8.2 165 12.2 185 10C205 7.8 225 12.4 245 10.2C265 8 285 12.6 305 10.4C325 8.2 342 11.8 355 9.6' stroke-width='4.2' stroke-dasharray='74 2.4 48 1.8 92 2.2 58 1.6 80'/%3E%3Cpath d='M11 7.5C31 5.2 51 9.2 71 7.2C91 5 111 9.4 131 7.4C151 5.2 171 9 191 7C211 4.8 231 9.2 251 7.2C271 5 291 9.4 311 7.4C331 5.2 344 8.6 352 6.8' stroke-width='2' stroke-opacity='.45' stroke-dasharray='58 3 88 2.6 74 2.4 92'/%3E%3Cpath d='M8 12.5C28 10.2 48 14.2 68 12.2C88 10 108 14.4 128 12.4C148 10.2 168 14 188 12C208 9.8 228 14.2 248 12.2C268 10 288 14.4 308 12.4C328 10.2 344 13.6 354 11.8' stroke-width='1.3' stroke-opacity='.3' stroke-dasharray='2.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 16' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M5 10.6C25 8.2 45 12.4 65 10.2C85 8 105 12.6 125 10.4C145 8.2 165 12.2 185 10C205 7.8 225 12.4 245 10.2C265 8 285 12.6 305 10.4C325 8.2 342 11.8 355 9.6' stroke-width='4.2' stroke-dasharray='74 2.4 48 1.8 92 2.2 58 1.6 80'/%3E%3Cpath d='M11 7.5C31 5.2 51 9.2 71 7.2C91 5 111 9.4 131 7.4C151 5.2 171 9 191 7C211 4.8 231 9.2 251 7.2C271 5 291 9.4 311 7.4C331 5.2 344 8.6 352 6.8' stroke-width='2' stroke-opacity='.45' stroke-dasharray='58 3 88 2.6 74 2.4 92'/%3E%3Cpath d='M8 12.5C28 10.2 48 14.2 68 12.2C88 10 108 14.4 128 12.4C148 10.2 168 14 188 12C208 9.8 228 14.2 248 12.2C268 10 288 14.4 308 12.4C328 10.2 344 13.6 354 11.8' stroke-width='1.3' stroke-opacity='.3' stroke-dasharray='2.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* 7文字以上の語句用。同じ描線を 540 単位まで延長し、60単位/em の密度を保つ。
   index.html の `約束する3つのこと`（約 8.5em ／ 半角数字を 0.5em として算出）が
   これにあたる。--long（360単位）を流用すると 42単位/em まで引き伸ばされ、
   基準SVG を6文字に使ったときと同じ「定規で引いた線」の状態になる。
   540 ÷ 8.5 ≒ 63単位/em で、4文字（60）・6文字（60）と同じ帯に収まる。
   破線パターンは 540 単位を1周する長さに引き直してある（→ --long と同じ理由。
   240/360単位用の値を流用すると途中で巻き戻り、線の後半が欠ける）。
   かすれ（3本目）の 2.5 5.5 は単位あたりの点密度を決める値で、密度が
   60単位/em に戻っている以上そのままでよい。 */
.em-line--xlong::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 16' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M5 10.6C25 8.2 45 12.4 65 10.2C85 8 105 12.6 125 10.4C145 8.2 165 12.2 185 10C205 7.8 225 12.4 245 10.2C265 8 285 12.6 305 10.4C325 8.2 345 12.2 365 10C385 7.8 405 12.4 425 10.2C445 8 465 12.6 485 10.4C505 8.2 522 11.8 535 9.6' stroke-width='4.2' stroke-dasharray='100 2.4 70 1.8 120 2.2 86 1.6 156'/%3E%3Cpath d='M11 7.5C31 5.2 51 9.2 71 7.2C91 5 111 9.4 131 7.4C151 5.2 171 9 191 7C211 4.8 231 9.2 251 7.2C271 5 291 9.4 311 7.4C331 5.2 351 9 371 7C391 4.8 411 9.2 431 7.2C451 5 471 9.4 491 7.4C511 5.2 524 8.6 532 6.8' stroke-width='2' stroke-opacity='.45' stroke-dasharray='88 3 132 2.6 110 2.4 142'/%3E%3Cpath d='M8 12.5C28 10.2 48 14.2 68 12.2C88 10 108 14.4 128 12.4C148 10.2 168 14 188 12C208 9.8 228 14.2 248 12.2C268 10 288 14.4 308 12.4C328 10.2 348 14 368 12C388 9.8 408 14.2 428 12.2C448 10 468 14.4 488 12.4C508 10.2 524 13.6 534 11.8' stroke-width='1.3' stroke-opacity='.3' stroke-dasharray='2.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 16' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M5 10.6C25 8.2 45 12.4 65 10.2C85 8 105 12.6 125 10.4C145 8.2 165 12.2 185 10C205 7.8 225 12.4 245 10.2C265 8 285 12.6 305 10.4C325 8.2 345 12.2 365 10C385 7.8 405 12.4 425 10.2C445 8 465 12.6 485 10.4C505 8.2 522 11.8 535 9.6' stroke-width='4.2' stroke-dasharray='100 2.4 70 1.8 120 2.2 86 1.6 156'/%3E%3Cpath d='M11 7.5C31 5.2 51 9.2 71 7.2C91 5 111 9.4 131 7.4C151 5.2 171 9 191 7C211 4.8 231 9.2 251 7.2C271 5 291 9.4 311 7.4C331 5.2 351 9 371 7C391 4.8 411 9.2 431 7.2C451 5 471 9.4 491 7.4C511 5.2 524 8.6 532 6.8' stroke-width='2' stroke-opacity='.45' stroke-dasharray='88 3 132 2.6 110 2.4 142'/%3E%3Cpath d='M8 12.5C28 10.2 48 14.2 68 12.2C88 10 108 14.4 128 12.4C148 10.2 168 14 188 12C208 9.8 228 14.2 248 12.2C268 10 288 14.4 308 12.4C328 10.2 348 14 368 12C388 9.8 408 14.2 428 12.2C448 10 468 14.4 488 12.4C508 10.2 524 13.6 534 11.8' stroke-width='1.3' stroke-opacity='.3' stroke-dasharray='2.5 5.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* 画面に入ったら左から右へ引かれる（.is-visible は js/main.js の
   IntersectionObserver が付与。親の .fade-in-up が 0.7s でフェードインするため、
   文字が読める状態になってから線が走るよう 0.45s 遅らせている） */
.em-line.is-visible::after {
  clip-path: inset(0 0 0 0);
}

/* モーション低減時は最初から全長で表示 */
@media (prefers-reduced-motion: reduce) {
  .em-line::after {
    clip-path: inset(0 0 0 0);
    transition: none;
  }
}

/* 軸3 傍点 ─ 語をそのまま名指しする。
   鉤括弧「」が担っていた「この語を引用する／名前として呼ぶ」役割を引き継ぐ。
   下線が医院の側の述語（約束）に引かれるのに対し、傍点は求職者・スタッフの
   側の言葉に打つ。位置が語の上下に分かれ、役割も分かれる。

   2〜4文字の語に打つのが原則。長い語句に打つと点が並びすぎて
   強調ではなくノイズに見えるため、核となる語だけに絞る。

   .em-line と違いスクロール連動の描画演出は付けない（静的表示）。
   線が「引かれていく」動きは医院からの語りかけの演出であり、
   引用である傍点は最初からそこにある方が意味に合う。

   text-emphasis は使わない。あの点はフォントのアセント（コンテンツ領域の
   上端）の外側に描かれるが、和文グリフの上端はベースラインから 0.88em で
   止まるため、その差がそのまま「文字と点の距離」になって語から浮く。
   CSS にこのオフセットを制御するプロパティは存在しない（側を選ぶ
   text-emphasis-position はあるが、距離は指定できない）。
   結果、下側の間隔が固定のまま line-height で上側だけが動き、点が上下
   どちらの行に属するのか読めなくなる。点を自前で描いて距離を持つ。

   全角1文字はちょうど 1em 幅なので、1em ピッチの背景を敷けば点が文字の
   中心に揃う。裏返すと半角・英数字が混ざる語には使えない（→ 仕様書 8-1）。 */
.em-dot {
  position: relative;
  display: inline-block;   /* ::after の基準を作る。語が行末で割れるのも防ぐ（.em-line と同じ） */
  font-style: normal;      /* <em> の既定のイタリックを打ち消す（.em-line と同じ） */

  /* 高さを em ボックスに固定する。これで ::after の bottom: 100% が
     和文グリフの上端に一致し、親の line-height が違うページでも
     点と文字の距離が変わらない（.em-line の line-height: 1 と同じ理屈）。 */
  line-height: 1;
}

.em-dot::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.06em);   /* 文字上端からの距離。傍点の見え方はこの1行で決まる */
  height: 0.15em;
  background-image: radial-gradient(circle at 50% 50%, var(--em-dot-color) 0 0.075em, transparent 0.076em);
  background-size: 1em 0.15em;   /* 全角1文字（1em）につき点1つ */
  background-repeat: repeat-x;
}

/* ----------------------------------------
   Buttons（仕様書 5章）
   ---------------------------------------- */

/* btn.type-a — 白背景＋メインカラーボーダー */
.btn.type-a a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1em 2em;
  background-color: var(--color-white);
  border: 2px solid var(--main-color);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  text-align: center;
  transition: var(--transition-btn);
  width: 100%;
}

.btn.type-a a::after {
  content: 'arrow_forward';
  font-family: 'Material Icons Round';
  font-size: 1.1em;
  color: var(--main-color);
  transition: transform var(--transition-btn);
}

.btn.type-a a:hover {
  background-color: var(--main-color);
  color: var(--color-white);
}

.btn.type-a a:hover::after {
  color: var(--color-white);
  transform: translateX(4px);
}

/* btn.type-b — ピル型 */
.btn.type-b a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 2em;
  background-color: transparent;
  border: 2px solid var(--main-color);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
  width: 100%;
}

.btn.type-b a:hover {
  background-color: var(--main-color);
  color: var(--color-white);
}

/* ----------------------------------------
   Footer
   ---------------------------------------- */

#footer {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* フッターは .innr を持たないため、ガター 8% を自前で持つ */
.footer__main {
  padding: 12.9vw 8%;
}

.footer__logo {
  width: var(--footer-logo-sp);
  margin-bottom: 4vw;
}

.footer__logo img {
  width: 100%;
  height: auto;
}

.footer__logo-text {
  font-size: var(--fs-xs-sp);
  color: var(--color-mid-gray);
  margin-top: 0.5em;
}

.footer__tagline {
  font-size: var(--fs-sm-sp);
  color: var(--color-mid-gray);
  line-height: 1.8;
  margin-bottom: 6vw;
}

/* SP は .footer__links が hidden-xs で消えるため .footer__site-link が
   .footer__main の最終要素になる。ここに margin-bottom を持たせると
   .footer__main の下パディングに上乗せされるので、下余白は
   .footer__main の padding に一本化する（PC も同じ理由で 0 のまま）。 */
.footer__site-link {
  display: inline-flex;
  align-items: center;
  gap: 1.5vw;
  padding: 2.4vw 6vw;
  margin-bottom: 0;
  border: 1px solid var(--main-color);
  border-radius: 100px;
  color: var(--main-color);
  font-size: var(--fs-sm-sp);
  font-weight: var(--fw-medium);
  transition: background-color var(--transition-btn), color var(--transition-btn);
}

.footer__site-link:hover {
  background-color: var(--main-color);
  color: var(--color-white);
}

.footer__site-link-icon {
  font-size: 3.8vw;
}

.footer__nav-title {
  font-size: var(--fs-xs-sp);
  font-weight: var(--fw-medium);
  color: var(--color-mid-gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2vw;
}

.footer__nav-list {
  margin-bottom: 6vw;
}

.footer__nav-item a {
  display: block;
  font-size: var(--fs-sm-sp);
  color: var(--color-dark-gray);
  padding: 1.5vw 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition: color var(--transition-btn);
}

.footer__nav-item a:hover {
  color: var(--main-color);
}

.footer__sns {
  display: flex;
  gap: 3vw;
  flex-shrink: 0;
}

/* .footer__tel a と同じ「素のテキストリンク」に揃える。
   かつては塗りの丸（rgba(0,0,0,.06) の円）だったが、5章「ピルの語彙」の
   “線は操作要素・塗りはラベル” に反してリンクを塗りで表していた
   サイト内唯一の例外だったため廃止した。 */
.footer__sns-link {
  display: inline-flex;
  align-items: center;
  gap: 1.5vw;
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-medium);
  color: var(--color-dark-gray);
  transition: color var(--transition-btn);
}

.footer__sns-link:hover {
  color: var(--main-color);
}

/* Material Icons は 24 の em box に対し字形の live area が 20（周囲 2 の余白込み）。
   SVG はビューボックス 24 いっぱいに字形が乗るため、同じ値を指定すると
   SVG のほうが大きく見える。.footer__tel-icon の 5vw に対し
   20/24 = 4.2vw とすることで光学的な大きさを揃える。 */
.footer__sns-icon {
  width: 4.2vw;
  height: 4.2vw;
  flex-shrink: 0;
  display: block;
  color: var(--main-color);   /* fill="currentColor" の解決先 */
}

/* 電話番号と Instagram は「アイコン＋テキスト」の同じ型で1行に並べる。
   flex-wrap は保険 ── 幅が足りないときに文字を潰さず2段に落とすため
   （reset.css の * { min-width: 0 } でフレックス項目は既定で縮む）。 */
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6vw;
  row-gap: 3vw;
  margin-bottom: 6vw;
}

.footer__tel {
  margin-bottom: 0;   /* 下余白は .footer__contact が持つ */
  flex-shrink: 0;
}

.footer__tel a {
  display: inline-flex;
  align-items: center;
  gap: 1.5vw;
  font-size: var(--fs-body-sp);
  font-weight: var(--fw-medium);
  color: var(--color-dark-gray);
  transition: color var(--transition-btn);
}

.footer__tel a:hover {
  color: var(--main-color);
}

.footer__tel-icon {
  font-size: 5vw;
  color: var(--main-color);
}

.footer__copy {
  padding: 5vw 8% 14vw;
  background-color: rgba(0, 0, 0, 0.05);
  text-align: center;
  font-size: var(--fs-xs-sp);
  color: var(--color-mid-gray);
  letter-spacing: 0.05em;
}

/* ----------------------------------------
   固定UI（仕様書 7章）
   ---------------------------------------- */

/* SPフッター固定バナー
   ファーストビューでは非表示。js/main.js の initFooterBanner() が
   .is-visible を付与する（トップは MV 通過後、下層は 200px から）。
   常時表示だと MV のボタン2つと重なり、ファーストビューに応募導線が
   4つ並ぶうえ、バナー（約16.4vw / --sp-footer-banner-h）が
   .mv__scroll（bottom: 5vw）を覆う。 */
.sp-footer-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9997;
  display: flex;
  gap: 1vw;
  padding: 2vw;
  background-color: var(--color-white);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity var(--transition-btn), visibility var(--transition-btn), transform var(--transition-btn);
}

.sp-footer-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sp-footer-banner {
    transform: none;
  }
}

.sp-footer-banner__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 3vw;
  border-radius: var(--radius-btn);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  transition: var(--transition-btn);
}

.sp-footer-banner__btn--primary {
  background-color: var(--main-color);
  color: var(--color-white);
}

.sp-footer-banner__btn--primary:hover {
  background-color: var(--main-color-hover);
}

.sp-footer-banner__btn--secondary {
  border: 2px solid var(--main-color);
  color: var(--main-color);
  background-color: var(--color-white);
}

.sp-footer-banner__btn--secondary:hover {
  background-color: var(--main-color-light);
}

.sp-footer-banner__btn .material-icons-round {
  font-size: 4.5vw;
}

/* ページトップボタン */
.page-top {
  position: fixed;
  right: 15px;
  /* バナー（.sp-footer-banner）は height を持たず vw で伸縮するため、
     退避距離を px で固定すると広い SP 幅で下端が食い込む。
     バナー実高から導出し、2vw の間隔を空ける。PC ではこの行を
     @media (min-width: 751px) の bottom: 40px が上書きする。 */
  bottom: calc(var(--sp-footer-banner-h) + 2vw);
  width: 14vw;
  height: 14vw;
  max-width: 46px;
  max-height: 46px;
  background-color: var(--main-color);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9996;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-btn), visibility var(--transition-btn), background-color var(--transition-btn);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:hover {
  background-color: var(--main-color-hover);
}

.page-top .material-icons-round {
  /* ボタン本体が max-width: 46px で止まるので、アイコンも同じ幅で頭打ちにする
     （旧 max-font-size は存在しないプロパティで無効だった） */
  font-size: min(5vw, 20px);
}

/* ============================================
   下層ページ共通コンポーネント
   （doctor.css / hygienist.css 等で共用）
   ============================================ */

/* --- main ヘッダー固定分オフセット --- */
.page-main {
  padding-top: var(--header-h-sp);
}

/* --- パンくずリスト --- */
/* 横パディングは内側の .innr が持つ。ここで 8% を重ねると二重掛けになる */
.breadcrumb {
  padding: 3vw 0;
  background-color: var(--color-white);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-sm-sp);
  color: var(--color-light-brown);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: 'chevron_right';
  font-family: 'Material Icons Round';
  font-size: 1em;
  color: var(--color-gray);
}

.breadcrumb__item a {
  color: var(--color-light-brown);
  transition: color var(--transition-btn);
}

.breadcrumb__item a:hover {
  color: var(--main-color);
}

.breadcrumb__item[aria-current="page"] {
  color: var(--color-mid-gray);
}

/* --- ページタイトルエリア（仕様書 5章）--- */
.page-title {
  position: relative;
  height: 46vw;
  overflow: hidden;
}

.page-title__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* テキスト背後だけを覆う局所パネル。帯の左下角に密着させ、幅は内容に合わせて縮む。
   写真全面に白フェードを掛けていた頃と違い、パネルの外側は写真が素のまま見える。 */
.page-title__content {
  position: absolute;
  left: 0;
  /* inset: 0 をやめる。right/top が auto になり幅は内容に縮む。
     下端を 0 ではなく -1px にして帯の外へ 1px 食み出させる。mask を持つ要素は
     独自のラスタライズ面になるため、帯の下辺が端数ピクセルに来ると（例：SP 390px で
     46vw = 179.391px / PC でも帯の bottom は 480.391px）最終行が半透明になり、
     写真が 1px の線として透ける。食み出し分は .page-title の overflow: hidden が
     切るので見た目は変わらない。padding-bottom で 1px 足し戻し、文字は動かさない。
     左辺は 0（SP）/ 60px（PC の margin）で、どの dpr でも整数デバイスピクセルに
     着地するため同じ処理は要らない。 */
  bottom: -1px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 92%;
  /* 左右の 8% はサイト共通ガター。% は包含ブロック .page-title（＝窓幅）に対して
     解決されるため、直下のパンくず・本文と同じ縦ラインから文字が始まる。
     max-width: 92% と合わせ、パネルの右端もちょうど右ガターに着地する。
     下は bottom: -1px の食み出し分を足し戻すため calc で +1px する。 */
  padding: 4.2vw 8% calc(3.5vw + 1px);
  /* 写真の明度に依存せず AA を保証するための不透明パネル。
     最悪ケース（真っ黒な写真の上）でも実効背景は #F0F0F0 となり、
     英字ラベルの --color-brown (#7C6546) で 4.79:1 を確保する。
     不透明度を下げて backdrop-filter で溶かす方向は採れない。0.90 まで落とすと
     最悪ケースの実効背景が #E6E6E6 となり英字ラベルが 4.42:1 で AA を割る。
     かつ 0.94 では写真が 6% しか透けないため blur がほぼ視認できない。 */
  background-color: rgba(255, 255, 255, 0.94);
  /* 写真に接する2辺（上・右）をフェードで解き、境界の直線を消す。パネルは帯の左下角に
     密着しているため、左辺・下辺は帯の端と一致して境界を持たない（フェード不要）。
     フェードは padding の内側に収まり文字の真下は 0.94 のまま残るので、上記 AA の
     根拠は動かない。パネル側の角丸は廃止した（フェード領域と重なって読めないため）。
     「対角に1コーナーだけ丸める」語彙は帯本体（.page-title）が引き続き担う。
     ※ mask-* は Safari / iOS Safari で -webkit- プレフィックスが必須 */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 3.4vw),
    linear-gradient(to left,   transparent 0, #000 6vw);
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 3.4vw),
    linear-gradient(to left,   transparent 0, #000 6vw);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* 2枚のマスクは「両方が不透明な領域だけを残す」。旧 WebKit / Blink の合成モデルでは
     source-in が intersect に相当する。未対応環境では和（add）で合成されるため、
     ほぼ全面不透明＝フェード前と同じ crisp なパネルに退行する（可読性は損なわれない）。 */
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.page-title__en {
  display: block;
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-size: 4vw;
  /* 読み込むのは EB Garamond italic 500/600。ラベルは 500 */
  font-weight: 500;
  /* 白フェードの上に載る小さめの文字。--color-light-brown(#B7A895) は白地でも
     コントラスト比 2.3:1 で WCAG AA(4.5:1) 未達のため、同系の濃い方を使う（5.5:1） */
  color: var(--color-brown);
  letter-spacing: 0.06em;
  text-transform: none;
  margin-bottom: 0.6em;
}

.page-title__ja {
  display: block;
  font-family: 'Klee One', serif;
  font-size: 7.17vw;
  font-weight: var(--fw-normal);
  color: var(--color-text);
  line-height: 1.4;
}

/* --- h2.type-d — 縦書き + 英字ラベル横配置（仕様書 3章）--- */
h2.type-d {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.9em;
  margin-bottom: 6vw;
}

h2.type-d .ja-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Klee One', serif;
  font-size: var(--fs-h2-small-sp);
  font-weight: var(--fw-normal);
  color: var(--color-text);
  letter-spacing: 0.2em;
  line-height: 1.4;
}

h2.type-d .en-label {
  font-family: var(--font-en);
  /* --font-en はイタリックで使う。指定を落とすとロゴのローマン体と競合する */
  font-style: italic;
  font-weight: 500;
  font-size: 4vw;
  color: var(--color-light-brown);
  letter-spacing: 0.06em;
  text-transform: none;
  /* 縦書きの .ja-title と横並びになる。EB Garamond はアセント／ディセンダの比率が
     ゴシックと異なるため、この padding-top と line-height は目視で再調整すること */
  padding-top: 0.3em;
  line-height: 2;
}

/* --- スクロールアニメーション共通 --- */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

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

@media (min-width: 751px) {

  body {
    font-size: var(--fs-body);
    min-width: 1200px;
  }

  /* 和文の折り返しは SP 専用。上のブロックと同じ順・同じ並びで打ち消す。
     セレクタを足すときは両方に足すこと（→ 上の「和文の折り返し（SP）」） */
  h2.type-a .ja-title,
  h3.type-a,
  .page-title__ja,
  .cta__copy,
  .promise__title,
  .guide-panel__catch,
  .doctor-catch__main,
  .doctor-cta__copy,
  .question,
  .answer,
  .hyg-catch__main,
  .hyg-cta__copy,
  .benefit-card__title,
  .story-item__title,
  .sv-lead__catch,
  .sv-qa__title,
  .sv-cta__copy,
  .recruit-catch__copy,
  .recruit-cta__copy,
  .faq-item__question,
  .faq-cta__copy {
    word-break: normal;
  }

  /* Layout */
  .innr {
    width: var(--innr-pc-width);
    margin: 0 auto;
    padding: var(--innr-pc-padding);
  }

  .innr2 {
    width: var(--innr-pc-width);
    margin: 0 auto;
    padding: var(--innr-pc-padding);
  }

  .innr3 {
    width: var(--innr-pc-width);
    margin: 0 auto;
    padding: 0;
  }

  /* セクション間スペース */
  .cnt.type-a  { padding-bottom: var(--cnt-a-pc); }
  .cnt.type-b  { padding-bottom: var(--cnt-b-pc); }
  .cnt.type-c  { padding-bottom: var(--cnt-c-pc); }
  .bg__w       { margin-bottom: var(--cnt-b-pc); }
  .bg__top     { margin-bottom: var(--cnt-b-pc); }

  /* 表示・非表示 */
  .visible-xs { display: none; }
  .hidden-xs  { display: block; }

  /* 下層ページ共通 PC */
  .page-main { padding-top: 109px; }

  .breadcrumb {
    padding: 14px 0;
    background-color: var(--color-white);
  }

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

  .page-title {
    height: 320px;
    border-radius: 30px 0 30px 0;
    margin: 0 60px;
    overflow: hidden;
  }

  .page-title__content {
    max-width: 60%;
    /* 左は 40px 据え置き（全5ページで文字左端を帯の左端から 40px に揃える規定）。
       上と右だけフェード距離のぶん広げるため、4値で非対称に指定する。
       下の 25px は 24px ＋ bottom: -1px の食み出し分 */
    padding: 28px 48px 25px 40px;
    /* padding と対で上書きする。片方だけ書き換えると vw のフェード距離が残り、
       PC の px の余白と噛み合わなくなる（フェードが文字に掛かる／余白が余る） */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 22px),
      linear-gradient(to left,   transparent 0, #000 40px);
            mask-image:
      linear-gradient(to bottom, transparent 0, #000 22px),
      linear-gradient(to left,   transparent 0, #000 40px);
  }

  .page-title__en      { font-size: 1.25rem; }
  .page-title__ja      { font-size: 2.25rem; }

  h2.type-d { margin-bottom: 40px; }
  h2.type-d .ja-title { font-size: var(--fs-h2-small2); }
  h2.type-d .en-label { font-size: 1.25rem; }

  /* Flexbox ユーティリティ */
  .fb {
    display: flex;
    justify-content: space-between;
  }

  /* ----------------------------------------
     Header PC
     ---------------------------------------- */

  /* 高さを .page-main の padding-top と同じ 109px で固定する。
     auto のままだと 751〜1279px でナビが消えた分ロゴ基準（13+57+20=90px）まで
     縮み、本文オフセットと食い違う。定値にすることで .header__inner の
     height: 100% も解決し、align-items: flex-end が効く。 */
  #header {
    height: 109px;
  }

  .header__inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 13px 40px 20px;
    align-items: flex-end;
  }

  /* reset.css の * { min-width: 0 } でフレックス項目の min-width: auto が
     無効化されているため、幅が足りないと各項目が内容より小さく潰れ、
     ロゴが親からはみ出してナビの下に潜り込む。潰れを禁止して、
     足りない場合は「重なる」ではなく「右にはみ出す」挙動にする。 */
  .header__logo,
  .header__nav,
  .header__nav-list,
  .header__nav-item,
  .header__cta,
  .header__cta-btn {
    flex-shrink: 0;
  }

  .header__logo a {
    width: var(--header-logo-pc);
  }

  .header__logo-text {
    font-size: var(--fs-xs);
  }

  /* PCナビは 1280px 以上でのみ表示する（下の @media を参照）。
     751〜1279px では横幅が足りずロゴと重なるため、ハンバーガーに切り替える。
     .hidden-xs { display: block } を打ち消すために明示する。 */
  .header__nav {
    display: none;
    align-items: flex-end;
    gap: 0.3em;
  }

  .header__nav-list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .header__nav-item {
    position: relative;
  }

  /* ロゴ320 + ナビ8項目 + CTA を 1280px に収めるための寸法。
     0.875rem / padding 1em では必要幅 1307px に対し確保できるのが 1220px で、
     どのPC幅でも 87px 以上足りなかった。 */
  .header__nav-link {
    display: block;
    padding: 0.5em 0.6em;
    font-size: 0.8125rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
    white-space: nowrap;
    position: relative;
    background-color: var(--color-white);
    border-radius: 4px 4px 0 0;
    transition: color var(--transition-btn);
  }

  /* HOMEナビリンク（シンボルロゴ付き） */
  .header__nav-link--home {
    display: flex;
    align-items: center;
    gap: 0.4em;
  }

  .header__nav-link--home img {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .header__nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--main-color);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: var(--transition-nav);
  }

  .header__nav-link:hover::after,
  .header__nav-link.is-current::after {
    width: 80%;
    transform: translateX(-50%) scaleX(1);
  }

  .header__nav-link:hover {
    color: var(--main-color);
  }

  /* 予約ボタン（PC） */
  .header__cta {
    display: flex;
    gap: 0.5em;
    margin-left: 0.5em;
  }

  .header__cta-btn {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 1.2em;
    border-radius: var(--radius-btn);
    /* ナビリンク（.header__nav-link）と同値の 13px。--fs-table(15px) のままだと
       グローバルメニューより大きく見え、かつ内容が min-width 160px を超える */
    font-size: 0.8125rem;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    transition: var(--transition-btn);
  }

  /* Material Icons Round の既定は font-size: 24px（Google Fonts 配信の CSS）。
     指定しないと文字 13px に対しアイコンだけ 24px になり、内容が幅を超えて
     字形が「見」に重なる。他の CTA（.mv__btn / .cta__btn-main 等）と同じく
     文字基準の em で持たせる。flex-shrink は reset.css の min-width: 0 対策 */
  .header__cta-btn .material-icons-round {
    font-size: 1.2em;
    flex-shrink: 0;
  }

  .header__cta-btn--primary {
    background-color: var(--main-color);
    color: var(--color-white);
    /* 中身の自然幅は 143px（padding 15.6 + アイコン 15.6 + gap 5.2 + 文字 91 + padding 15.6）。
       160px は見た目の下限として確保する値で、内容の実寸ではない。width ではなく
       min-width にしているのは、内容が増えたときに潰れて重なるのを構造的に防ぐため */
    min-width: 160px;
    justify-content: center;
  }

  .header__cta-btn--primary:hover {
    background-color: var(--main-color-hover);
  }

  /* ----------------------------------------
     ハンバーガー / SPナビ（751〜1279px でも使う）
     ---------------------------------------- */

  /* .visible-xs { display: none } を名指しで打ち消す。ユーティリティ自体は
     触らない（MVキャッチの <br class="visible-xs"> などに波及させないため）。 */
  .hamburger { display: flex; }
  .sp-nav    { display: block; }

  /* SPナビ一式は vw 指定のため、1279px ではハンバーガーが 144px、
     リンクの余白が 51px まで肥大する。この帯では px 基準に置き換える。 */
  .hamburger {
    width: 48px;
    height: 48px;
    padding: 8px;
  }

  .sp-nav {
    padding: 109px 0 60px;
  }

  .sp-nav__close {
    width: 72px;
    height: 72px;
  }

  .sp-nav__close .material-icons-round {
    font-size: 32px;
  }

  /* 幅いっぱいに間延びさせない */
  .sp-nav__list,
  .sp-nav__cta {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }

  .sp-nav__link {
    padding: 14px 24px;
    font-size: 1rem;
  }

  .sp-nav__link .material-icons-round {
    font-size: 22px;
  }

  .sp-nav__cta {
    margin-top: 32px;
    gap: 12px;
  }

  .sp-nav__btn {
    padding: 14px;
    font-size: var(--fs-table);
  }

  /* ----------------------------------------
     Headings PC
     ---------------------------------------- */

  h2.type-a {
    margin-bottom: 50px;
  }

  h2.type-a::before {
    width: 40px;
    margin-bottom: 1.4em;
  }

  h2.type-a .en-label {
    font-size: 1.25rem;
  }

  h2.type-a .ja-title {
    font-size: var(--fs-h2-small2);
  }

  h2.type-c {
    font-size: var(--fs-h3a);
  }

  h3.type-a {
    font-size: var(--fs-h3a);
  }

  h4 {
    font-size: var(--fs-h4);
  }

  /* ----------------------------------------
     Buttons PC
     ---------------------------------------- */

  .btn.type-a a {
    font-size: var(--fs-table);
    max-width: 320px;
  }

  .btn.type-b a {
    font-size: var(--fs-table);
    max-width: 260px;
  }

  /* ----------------------------------------
     Footer PC
     ---------------------------------------- */

  .footer__main {
    padding: 50px 60px;
    display: flex;
    gap: 60px;
    align-items: flex-start;
  }

  /* 280px は電話番号（約125px）+ gap 24px + Instagram（約95px）＝約244px を
     収めるための幅。240px では余白が残らず、reset.css の * { min-width: 0 }
     により、はみ出さずに文字が潰れて折り返す形で壊れる。 */
  .footer__brand {
    flex-shrink: 0;
    width: 280px;
  }

  .footer__logo {
    width: var(--footer-logo-pc);
    margin-bottom: 16px;
  }

  .footer__logo-text {
    font-size: var(--fs-xs);
  }

  .footer__tagline {
    font-size: var(--fs-sm);
    margin-bottom: 20px;
  }

  /* margin-bottom は持たない。PC でもブランド列の最終要素になるため、
     下余白は .footer__main の padding: 50px に一本化する。 */
  .footer__site-link {
    gap: 6px;
    padding: 8px 20px;
    font-size: var(--fs-sm);
  }

  .footer__site-link-icon {
    font-size: 16px;
  }

  .footer__sns {
    gap: 16px;
  }

  .footer__sns-link {
    gap: 6px;
    font-size: var(--fs-body);   /* .footer__tel a と同値 */
  }

  .footer__sns-icon {
    width: 15px;                 /* .footer__tel-icon 18px × 20/24 */
    height: 15px;
  }

  .footer__contact {
    column-gap: 24px;
    row-gap: 8px;
    margin-bottom: 20px;
  }

  .footer__tel a {
    gap: 6px;
    font-size: var(--fs-body);
  }

  .footer__tel-icon {
    font-size: 18px;
  }

  .footer__links {
    flex: 1;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
  }

  .footer__nav-block {
    min-width: 140px;
  }

  .footer__nav-title {
    font-size: var(--fs-xs);
    margin-bottom: 12px;
  }

  .footer__nav-item a {
    font-size: var(--fs-sm);
    padding: 5px 0;
  }

  .footer__copy {
    padding: 16px 60px;
    text-align: center;
    font-size: var(--fs-xs);
  }

  /* ----------------------------------------
     固定UI PC
     ---------------------------------------- */

  /* SPフッター固定バナー → PC縦型右端ボタン
     ボタンはピル型（--radius-btn）で他のCTAと揃えるため、画面右端には
     密着させず right: 12px 分だけ内側へ逃がす。影はコンテナが
     background: none のため矩形の halo になるので、ボタン側で持つ。 */
  .sp-footer-banner {
    top: 148px;
    bottom: auto;
    left: auto;
    right: 12px;
    width: 13rem;
    height: auto;
    flex-direction: column;
    padding: 4px;
    gap: 4px;
    background: none;
    /* 右端の縦型ボタンのため、退避方向を下（SP）から右へ差し替える。
       right: 12px の分だけ 100% では抜けきらないので加算する */
    transform: translateX(calc(100% + 12px));
  }

  .sp-footer-banner.is-visible {
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .sp-footer-banner {
      transform: none;
    }
  }

  .sp-footer-banner__btn {
    flex-direction: row;
    padding: 12px 6px;
    letter-spacing: 0.1em;
    font-size: var(--fs-xs);
    border-radius: var(--radius-btn);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    gap: 8px;
  }

  .sp-footer-banner__btn .material-icons-round {
    font-size: 18px;
    flex-shrink: 0;
  }

  /* ページトップ PC */
  .page-top {
    right: 68px;
    bottom: 40px;
    width: 46px;
    height: 46px;
  }

  .page-top .material-icons-round {
    font-size: 20px;
  }
}

/* ----------------------------------------
   ヘッダーナビ切替（1280px以上）
   ロゴ320 + ナビ8項目 + CTA を並べるには最低 1280px 必要。
   これ未満はハンバーガー（上の 751px ブロックで px 化済み）に切り替える。
   サイト全体のブレイクポイントは 751px のままで、この帯はヘッダー専用。
   ---------------------------------------- */
@media (min-width: 1280px) {

  .header__nav {
    display: flex;
  }

  .hamburger,
  .sp-nav {
    display: none;
  }
}

/* ----------------------------------------
   応募フォーム前の確認モーダル（.entry-gate）

   全51箇所の forms.gle リンクを js/main.js の委譲ハンドラで捕まえ、
   フォームへ遷移する前にこのダイアログを挟む（→ 仕様書 5章「遷移先の統一方針」）。
   マークアップは全6ページの固定UIブロック末尾に複製されている。

   開閉は .sp-nav と同じ opacity + visibility + .is-open 方式。
   display の切り替えは transition が走らないため使わない。
   visibility: hidden が支援技術からの除外も兼ねるので aria-hidden は二重管理しない。
   ---------------------------------------- */

/* z-index 10000 ─ SPナビ(9998)を開いた状態から CTA を押す経路があるため、
   固定UI（sp-nav 9998 / sp-footer-banner 9997 / page-top 9996 / header 9990）の
   すべてより上に出す必要がある（→ 7章 重ね順） */
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-btn), visibility var(--transition-btn);
}

/* 開く側は visibility を即座に visible へ切り替える（transition 時間 0）。
   ベースの visibility 0.3s は「閉じるときにフェードが終わるまで消さない」ために
   要る指定だが、開く側にも掛かると Chrome では 0.3s のあいだ hidden のままになり、
   その間パネルがフォーカス不能＝キーボード操作の受け口が遅れる */
.entry-gate.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-btn), visibility 0s;
}

/* 無彩色の黒幕は使わない。99の質問の黒暗幕がクライアントの「暗い雰囲気」指摘で
   廃止された経緯（→ 1章）に合わせ、ページ背景 #F3F0EC と地続きの暖色にする。
   値は --color-text (#3A2F20) 系。透過が要るため直値 */
.entry-gate__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(58, 47, 32, 0.55);
}

.entry-gate__panel {
  position: relative;
  z-index: 1;
  /* SP は幅も文字も vw 基準で相似にスケールさせる。px の max-width を置くと
     750px 付近でパネルだけが伸びなくなり、リード文が余計に折り返す
     （PC 側は下のメディアクエリで 480px に固定する） */
  width: 84%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 11vw 7vw 7vw;
  background-color: var(--color-white);
  border-radius: 12px;
  /* ベージュ地ではなく暗いスクリムの上だが、無方向グローは面が沈むという
     規定（→ 5章「ベージュ背景に置く白カードの影」）に合わせ y オフセットを持たせる */
  box-shadow: 0 12px 40px rgba(60, 55, 45, 0.25);
  text-align: center;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--transition-btn);
}

.entry-gate.is-open .entry-gate__panel {
  transform: none;
}

/* .sp-nav__close と同じ語彙（同色 --color-dark-gray・白地 8.07:1） */
.entry-gate__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 11vw;
  height: 11vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-dark-gray);
  transition: opacity 0.3s;
}

.entry-gate__close:hover {
  opacity: 0.7;
}

/* Material Icons Round の既定 24px を必ず上書きする（→ 5章） */
.entry-gate__close .material-icons-round {
  font-size: 6.4vw;
  flex-shrink: 0;
}

/* 書体は body 既定の --font-gothic。操作の確認ダイアログ＝「情報の声」なので
   Klee One（語りの声）は使わない（→ 2章 / 5章 セクションバッジ） */
.entry-gate__lead {
  margin-bottom: 4vw;
  color: var(--color-text);
  font-size: var(--fs-body-sp);
  line-height: 1.9;
}

/* 階層は色ではなくサイズとウェイトで作る。メインカラーは文字色に使わない
   （白地 1.98:1 で AA 未達。→ 8-1章 C-4）。質問文 ÷ リード文 = 1.25 */
.entry-gate__q {
  margin-bottom: 5vw;
  color: var(--color-text);
  font-size: var(--fs-h3b-sp);
  font-weight: var(--fw-bold);
  line-height: 1.6;
}

.entry-gate__actions {
  display: flex;
  gap: 3vw;
}

/* 白地に一次／二次が並ぶ形。.sp-nav__cta の .sp-nav__btn--primary / --secondary
   と同じパターンで、新しい語彙を増やさない。
   角丸は応募導線ボタン共通の --radius-btn（ピル型・例外なし。→ 5章） */
.entry-gate__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5vw;
  border-radius: var(--radius-btn);
  font-size: var(--fs-table-sp);
  font-weight: var(--fw-bold);
  text-align: center;
  cursor: pointer;
  /* --transition-btn を単独で書くと transition-property が all になり、
     親から継承する visibility まで 0.3s 遅れてボタンがフォーカス不能になる。
     変化させたいプロパティを明示すること */
  transition: background-color var(--transition-btn),
              color var(--transition-btn),
              border-color var(--transition-btn);
}

.entry-gate__btn--yes {
  background-color: var(--main-color);
  color: var(--color-white);
}

.entry-gate__btn--yes:hover {
  background-color: var(--main-color-hover);
}

/* 枠線が 1px ではなく 2px なのは #10D0AB が白地 1.98:1 と弱く、
   1px では境界として読めないため（サイトの枠線ボタンは全て 2px） */
.entry-gate__btn--no {
  background: none;
  border: 2px solid var(--main-color);
  color: var(--color-text);
}

.entry-gate__btn--no:hover {
  background-color: var(--main-color-pale);
}

@media (min-width: 751px) {

  .entry-gate__panel {
    max-width: 480px;
    padding: 52px 48px 48px;
  }

  .entry-gate__close {
    width: 44px;
    height: 44px;
  }

  .entry-gate__close .material-icons-round {
    font-size: 24px;
  }

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

  .entry-gate__q {
    margin-bottom: 28px;
    font-size: var(--fs-h3b);
  }

  .entry-gate__actions {
    gap: 16px;
  }

  .entry-gate__btn {
    padding: 14px 20px;
    font-size: var(--fs-table);
  }
}

/* .sp-footer-banner と同じ扱い（→ 7章）。transform を殺してフェードのみにする */
@media (prefers-reduced-motion: reduce) {

  .entry-gate__panel {
    transform: none;
    transition: none;
  }
}