@charset "UTF-8";
/* =========================================================
   神戸中央らいおん歯科 求人LP
   色・サイズは docs/top_model.jpg（幅1920px）から採取
   ========================================================= */

:root {
  /* サイトカラー（2026-10-20 にご指定いただいた9色） */
  --c-text: #35230a;        /* ブラウン：本文の文字・フォームの「必須」 */
  --c-orange: #e49842;      /* オレンジ：ENTRY帯、表・フォームの見出しセル、英字見出し、明石の枠 */
  --c-orange-dark: #d06c2e; /* 濃いオレンジ：日本語の見出し、5つの魅力の見出し、「5」の縁取り */
  --c-yellow: #f6df52;      /* イエロー：見出しの下線、枠線、矢印 */
  --c-beige: #fdebb5;       /* ベージュ：経歴の背景 */
  --c-gray: #f0efeb;        /* グレー：グレーのセクション背景 */
  --c-green: #1f7f3b;       /* グリーン：電話番号、診療時間の● */
  --c-lime: #bdd251;        /* ライトグリーン：Voice・Message の英字、Q&A の質問、神戸の枠 */
  --c-pink: #dc79aa;        /* ピンク：先輩の声の帯（今は画像側で表示。CSS で使うときはこの値） */

  /* サイトカラー以外（モデルの素材から取った色・線の色） */
  --c-yellow-soft: #fffee8; /* 「環境づくり」の背景（welcome-03.svg と同じ色） */
  --c-line: #c8c8c8;        /* 表・入力欄の枠線 */
  --c-line-light: #e6e6e6;  /* 白い面どうしの区切り線 */
  --c-line-dark: #b9b9b9;   /* フッターの枠線・罫線 */
  --c-white: #fff;

  --f-base: "Noto Sans JP", sans-serif;
  --f-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; /* 見出し用。モデルに合わせてやや角張った書体 */
  --f-en: "Barlow", "Noto Sans JP", sans-serif;

  --w-content: 1200px;
  /* 大きい画面用：1440px で 0、1920px 以上で 480px（ファイル末尾の「大きい画面」で使う） */
  --k: clamp(0px, 100vw - 1440px, 480px);
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0;
  color: var(--c-text);
  font-family: var(--f-base);
  font-size: 15px;
  line-height: 1.8;
  background: var(--c-white);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }

/* スクロールでふわっと表示（main.js の initReveal が is-reveal-ready を付けたときだけ隠す。JavaScript が動かなければ普通に見える） */
.is-reveal-ready .js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.is-reveal-ready .js-reveal.is-shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 共通の部品 ---------- */
.u-sp-only { display: none; } /* スマホのときだけ表示する（改行など） */

/* ---------- 共通の見出し ---------- */

/* 日本語の大見出し（オレンジ文字＋黄色の下線） */
.c-heading {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1em 18px;
  font-family: var(--f-heading);
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-orange-dark);
  text-align: center;
  letter-spacing: .04em;
  border-bottom: 4px solid var(--c-yellow);
}

/* 英字の大見出し（Voice / Q&A / Clinic など）。span は日本語の副題 */
.c-en-heading {
  position: relative;
  z-index: 0;
  width: fit-content;
  margin: 0 auto;
  font-family: var(--f-en);
  font-size: clamp(52px, 5.2vw, 84px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--c-orange);
}
.c-en-heading span {
  display: block;
  margin-top: 10px;
  font-family: var(--f-heading);
  font-size: clamp(17px, 1.4vw, 22px);
  letter-spacing: .06em;
  color: var(--c-text);
}
.c-en-heading--lime { color: var(--c-lime); }
.c-en-heading--left { margin: 0; text-align: left; }
.c-en-heading--ja { font-family: var(--f-heading); font-size: clamp(28px, 2.4vw, 36px); color: var(--c-text); padding: 18px 0; }
/* 黄色い不定形の背景（SVG）を左後ろに敷く */
.c-en-heading--blob::before,
.c-en-heading--clinic::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -18%;
  width: 1.75em;
  aspect-ratio: 224 / 161;
  background: url("../img/Q&A.svg") no-repeat center / contain;
  transform: translateY(-50%);
}
.c-en-heading--ja::before { left: -38%; width: 2.6em; }
.c-en-heading--clinic::before { top: 70%; left: -22%; background-image: url("../img/clinic.svg"); }
/* 形は同じだが、場所ごとに別ファイルが用意されているので、1か所だけ差し替えられるよう分けて使う */
.p-requirements .c-en-heading--blob::before { background-image: url("../img/bosyuu-youkou.svg"); }
.p-form .c-en-heading--blob::before { background-image: url("../img/entry.svg"); }

/* 黄色い不定形の上に白抜き文字が乗る見出し（教育・研修制度 など） */
.c-blob-heading {
  position: relative;
  z-index: 0;
  padding: 26px 0 26px 38px;
  font-family: var(--f-heading);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  color: var(--c-white);
  letter-spacing: .06em;
  /* 薄黄色の背景でも読めるよう、白文字にグレーの縁取りを付ける */
  -webkit-text-stroke: 4px #8d8379;
  paint-order: stroke fill;
}
.c-blob-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 150px;
  aspect-ratio: 224 / 161;
  background: url("../img/work-environment-01.svg") no-repeat center / contain;
}

/* 黄色い小さな丸が頭に付く中見出し */
.c-sub-heading {
  position: relative;
  z-index: 0;
  padding-left: 14px;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.6;
}
.c-sub-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 42px;
  aspect-ratio: 102 / 96;
  background: url("../img/work-environment-02.png") no-repeat center / contain;
  transform: translateY(-50%);
}

/* ---------- ヘッダー ---------- */
.l-header {
  position: relative;
  z-index: 10;
  overflow-x: clip; /* ENTRY の黄色い形が右へはみ出しても横スクロールが出ないよう、横だけ切る（下は写真に重ねる） */
}
.l-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1920px;
  height: 180px;
  margin: 0 auto;
  padding: 0 calc(var(--gutter) + 50px);
}
.l-header__logo img { width: 296px; }
.l-header__tel { margin-left: auto; margin-right: 257px; text-align: center; } /* ENTRY の黄色い形の左端まで 40px */
.l-header__tel-label { font-size: 15px; color: var(--c-green); }
.l-header__tel-number {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-en);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-green);
  text-decoration: none;
}
.l-header__tel-number::before {
  content: "";
  width: .95em;
  height: .95em;
  border-radius: 50%;
  background: var(--c-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") no-repeat center / 60%;
}
/* 黄色い形が画面の右上で切れて見えるようにする。
   リンクの箱はページの右上の角にぴったり置き（ページの外へははみ出させない。Safari のページ全体のスクリーンショットに
   ページの外が写り込まないように）、entry.png（755×695）を背景として左上へずらして、画面の外にあたる部分を箱の中で切り落とす。
   さらに黄色い形の輪郭（entry.png の透明でない部分をなぞった多角形を、この箱に合わせて換算したもの）で切り抜き、
   形の外では反応しないようにする。文字は見えている黄色の中央・ヘッダーの高さの中央に来るよう padding で寄せる */
.l-header__entry {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 287px;
  height: 236px;
  padding: 0 0 56px 4px;
  clip-path: polygon(128.5% 28.0%, 129.0% 34.8%, 129.0% 41.8%, 128.6% 48.9%, 127.2% 55.7%, 125.6% 62.6%, 123.2% 69.2%, 120.4% 75.6%, 117.0% 81.6%, 113.0% 87.0%, 108.4% 91.7%, 103.4% 95.7%, 97.8% 98.2%, 92.0% 99.8%, 86.1% 100.3%, 80.2% 99.5%, 74.6% 98.0%, 69.3% 95.9%, 64.5% 93.5%, 59.9% 91.2%, 55.6% 89.0%, 51.5% 86.8%, 47.4% 84.8%, 43.4% 82.9%, 39.1% 81.4%, 34.4% 80.1%, 29.6% 78.5%, 24.4% 76.7%, 19.0% 74.4%, 13.9% 71.0%, 9.6% 66.5%, 6.0% 61.1%, 3.4% 55.0%, 1.5% 48.5%, 0.1% 41.8%, -0.3% 34.9%, -0.3% 28.0%, 0.4% 21.2%, 1.4% 14.5%, 2.9% 7.9%, 4.9% 1.6%, 6.8% -4.7%, 9.2% -10.8%, 12.1% -16.6%, 15.5% -22.0%, 19.3% -27.0%, 23.5% -31.4%, 28.2% -35.0%, 32.9% -38.4%, 38.1% -40.7%, 43.3% -42.6%, 48.6% -43.8%, 54.0% -44.4%, 59.3% -44.2%, 64.5% -43.7%, 69.5% -42.4%, 74.4% -40.8%, 79.2% -39.0%, 83.8% -36.5%, 88.3% -34.3%, 92.7% -31.5%, 97.0% -28.6%, 101.1% -25.1%, 105.1% -21.5%, 108.9% -17.4%, 112.6% -13.0%, 116.0% -8.2%, 119.1% -3.0%, 121.7% 2.6%, 124.1% 8.6%, 125.9% 14.8%, 127.5% 21.3%);
  background: url("../img/entry.png") no-repeat -38px -150px / 461px 424px;
  font-family: var(--f-en);
  font-size: 40px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .02em;
  z-index: 10;
  transition: opacity .2s;
}
.l-header__entry-label { position: relative; display: inline-flex; align-items: center; gap: 18px; } /* 「ENTRY」と▶をひとまとめにし、下線をこの幅で引く */
.l-header__entry-label::after { /* ▶ */
  content: "";
  border: 9px solid transparent;
  border-left: 13px solid currentColor;
  border-right: 0;
}
.l-header__entry-label::before { /* 下線：文字の左端から▶の右端まで。ふだんは幅0で隠しておく */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.l-header__entry:hover { opacity: .85; }
/* マウスで操作できる画面（PC・タブレット）だけ、ホバーで下線を左から伸ばす。スマホでは出さない */
@media (hover: hover) and (min-width: 768px) {
  .l-header__entry:hover .l-header__entry-label::before { transform: scaleX(1); }
}
/* 切り抜きで枠線が見えないので、キーボード操作時も同じ下線で示す */
.l-header__entry:focus-visible { outline: none; }
.l-header__entry:focus-visible .l-header__entry-label::before { transform: scaleX(1); }

/* ---------- メインビジュアル（左右の写真が見切れるスライダー） ---------- */
.p-mv { overflow: hidden; }
.p-mv__slider { position: relative; }
.p-mv__track {
  display: flex;
  gap: 0;
  transition: transform .9s ease;
  will-change: transform;
}
.p-mv__slide { flex: 0 0 68.5%; }
.p-mv__slide img { width: 100%; aspect-ratio: 1320 / 828; object-fit: cover; }
.p-mv__copy {
  position: absolute;
  left: 19.5%;
  top: 56%;
  font-family: var(--f-heading);
  font-size: clamp(36px, 5.4vw, 104px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-lime);
  letter-spacing: .06em;
  pointer-events: none;
  /* 写真の明るい部分・暗い部分に重なっても読めるよう、薄い白い影をつける（輪郭の近くに細い影＋外側にぼかした影） */
  text-shadow: 0 0 4px rgba(255, 255, 255, .6), 0 0 16px rgba(255, 255, 255, .55);
}

/* ---------- こんな方に向いています ---------- */
.p-welcome {
  position: relative;
  z-index: 1; /* 薄黄色の不定形を、次の「5つの魅力」のグレーの背景より手前に重ねる */
  overflow-x: clip; /* 横だけ切って横スクロールを防ぐ（下へのはみ出しは見せる） */
  padding: 110px var(--gutter) 150px;
  background: linear-gradient(var(--c-white) 82%, var(--c-gray) 82%);
}
.p-welcome::before {
  /* 薄黄色の大きな不定形。モデルでは、上端がメインビジュアルの約120px下、下端が「5つの魅力」のグレーの中（見出しの少し上）。
     ご要望で、そこからさらに 50px 上に表示している。
     中身の高さは画面幅で変わるので、上下の位置をこのセクションに合わせて決め、横幅は形の比率（1537:1052）から決める */
  content: "";
  position: absolute;
  top: 70px;    /* 2026-10-21：大きさを変えずに 50px 上へ（上下とも 50px ずつ） */
  bottom: 60px;
  left: 50%;
  aspect-ratio: 1537 / 1052;
  background: url("../img/welcome-03.svg") no-repeat center / contain;
  transform: translateX(-51.8%); /* モデルでは中央よりわずかに左 */
}
.p-welcome__body { position: relative; max-width: 720px; margin: 0 auto; text-align: center; }
.p-welcome__list {
  display: inline-block;
  margin: 40px 0 56px;
  text-align: left;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 2.25;
}
.p-welcome__list li { padding-left: 2em; background: url("../img/check.png") no-repeat left center / 1.2em auto; }
.p-welcome__lead { font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; }
.p-welcome__photo { position: absolute; z-index: 1; }
.p-welcome__photo--right { top: 40px; right: 0; width: min(390px, 22vw); }
.p-welcome__photo--left { top: 330px; left: 0; width: min(600px, 32vw); }

/* ---------- 5つの魅力 ---------- */
.p-benefits { padding: 40px var(--gutter) 120px; background: var(--c-gray); }
.p-benefits__five {
  display: inline-block;
  margin: 0 .1em;
  font-family: var(--f-en);
  font-size: 2.5em;
  line-height: 0;
  vertical-align: -.12em;
  color: var(--c-white);
  -webkit-text-stroke: 4px var(--c-orange-dark);
  paint-order: stroke fill; /* 縁取りを文字の外側に出し、白い塗りが細らないようにする */
}
.p-benefits__list { max-width: var(--w-content); margin: 70px auto 0; }
.p-benefits__item {
  --num-h: clamp(58px, 5.51vw, 81.2px); /* 番号画像の高さ（見出しの文字の約2.9倍） */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.p-benefits__item + .p-benefits__item { margin-top: 30px; }
.p-benefits__item:nth-child(even) .p-benefits__visual { order: 2; }
.p-benefits__visual { position: relative; }
.p-benefits__shape { position: absolute; inset: 4% -2% -6% -4%; width: 104%; height: auto; }
.p-benefits__photo { position: relative; width: 100%; }
.p-benefits__item:nth-child(even) .p-benefits__shape { inset: -6% -4% 4% 2%; }
.p-benefits__title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-heading);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-orange-dark);
}
.p-benefits__num { flex: none; width: auto; height: var(--num-h); margin-block: calc(var(--num-h) / -2); } /* 番号は見出しの高さに数えない（見出しが1行の 03 だけ本文との間が広がらないよう、5つとも見出しの文字から本文までを同じにする）。番号は見出しの文字の中央にそろったまま */
.p-benefits__text { margin: 22px 0 0 calc(var(--num-h) * 210 / 245 + 14px); font-size: 14px; max-width: 32em; } /* 左端を見出しの文字にそろえる（番号画像の幅＋間隔） */

/* ---------- ENTRY 帯 ---------- */
.p-entry-band { padding: 50px var(--gutter) 60px; background: var(--c-orange); text-align: center; color: var(--c-white); }
.p-entry-band__title {
  font-family: var(--f-en);
  font-size: clamp(56px, 5.4vw, 104px);
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px var(--c-white);
  letter-spacing: .02em;
}
.p-entry-band__lead { margin-top: 14px; font-size: clamp(15px, 1.3vw, 20px); font-weight: 500; }
.p-entry-band__buttons { display: flex; justify-content: center; gap: 4vw; margin-top: 30px; }
.p-entry-band__button { width: min(520px, 42%); transition: transform .2s; } /* 白枠と角丸はボタン画像に含まれている */
.p-entry-band__button:hover { transform: translateY(-3px); }
.p-entry-band__button img { width: 100%; }

/* ---------- 働きやすく成長できる環境づくり ---------- */
.p-environment {
  position: relative;
  padding: 110px var(--gutter) 160px;
  /* 不定形に切り抜いた写真3枚（2026-11-11 に白い形の png から差し替え）。位置・大きさは指示のスクショ（幅1600px相当）から割り出した値。
     画像は周りに透明な余白を含むので、余白ごと画面幅に対する割合で置き、写真の一部を画面の外へはみ出させる。
     左：モニター（back02・2354×2693）／右上：医院の外観（back01・2047×2342。右上が欠けているので、その部分は必ず画面の外に出す）／右下：CT（back03・2238×1849） */
  background:
    url("../img/work-environment-back02.webp") no-repeat left -45.2vw top 561px / 75.2vw auto,
    url("../img/work-environment-back01.webp") no-repeat left 56.7vw top -201px / 77.2vw auto,
    url("../img/work-environment-back03.webp") no-repeat left 58.8vw top 1189px / 79.7vw auto,
    var(--c-yellow-soft);
}
.p-environment__block { max-width: var(--w-content); margin: 90px auto 0; }
.p-environment__block > .c-sub-heading,
.p-environment__block > .p-clinics,
.p-environment__block > .p-flow,
.p-environment__block > .p-training { max-width: 1000px; margin-left: auto; margin-right: auto; }
.p-environment__block > .c-sub-heading { margin-top: 30px; margin-bottom: 30px; }
.p-environment__block > .c-sub-heading + .p-flow { margin-top: 0; }

.p-clinics {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 60px;
  margin-bottom: 120px;
  padding: 50px 60px 30px;
  border: 5px solid var(--c-yellow);
  border-radius: 30px;
}
.p-clinics__label {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 10px 36px;
  background: var(--c-yellow);
  border-radius: 999px;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 700;
  transform: translate(-50%, -60%);
  white-space: nowrap;
}
.p-clinics__box { padding: 24px 28px; background: var(--c-white); border: 5px solid; border-radius: 26px; font-size: 16px; line-height: 1.6; }
.p-clinics__box li + li { margin-top: 8px; }
.p-clinics__box--kobe { border-color: var(--c-lime); }
.p-clinics__box--akashi { border-color: var(--c-orange); }
.p-clinics__area { font-family: var(--f-heading); font-size: 26px; font-weight: 700; text-align: center; line-height: 1.3; }
.p-clinics__box--kobe .p-clinics__area { color: var(--c-lime); }
.p-clinics__box--akashi .p-clinics__area { color: var(--c-orange); }
.p-clinics__name { margin: 4px 0 18px; font-size: 15px; text-align: center; }
.p-clinics__between { text-align: center; font-size: 15px; line-height: 1.7; }
.p-clinics__arrow {
  display: block;
  width: 130px;
  height: 34px;
  margin: 50px auto 0;
  background: var(--c-yellow);
  clip-path: polygon(0 50%, 22% 0, 22% 30%, 78% 30%, 78% 0, 100% 50%, 78% 100%, 78% 70%, 22% 70%, 22% 100%);
}

.p-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.p-flow li {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 80px;
  padding: 10px;
  background: var(--c-white);
  border: 3px solid var(--c-line-light);
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}
.p-flow li + li::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%;
  border: 9px solid transparent;
  border-left: 12px solid var(--c-yellow);
  border-right: 0;
  transform: translateY(-50%);
}
.p-training { display: flex; gap: 50px; margin-top: 40px; padding-left: 50px; }
.p-training__lead { flex: none; font-size: 16px; font-weight: 500; }
.p-training__list { display: flex; flex-wrap: wrap; gap: 0 26px; font-size: 13px; line-height: 1.9; }
.p-training__list li::before { content: "・"; }

.p-environment__detail { max-width: 600px; margin: -14px 0 0 calc(50% - 200px); }
.p-environment__lead { font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; }
.p-environment__points { margin-top: 18px; font-size: 15px; line-height: 2; }
.p-environment__points li { padding-left: 1em; text-indent: -1em; }
.p-environment__points li::before { content: "・"; }

/* ---------- 先輩の声 ---------- */
.p-voice { padding: 110px var(--gutter) 160px; }
.p-voice .c-en-heading span { font-weight: 700; }
.p-voice__list { max-width: 1040px; margin: 40px auto 0; }
.p-voice__item { position: relative; color: var(--c-text); }
.p-voice__bg { width: 100%; }
.p-voice__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 7% 5%;
  width: 52%;
}
.p-voice__catch span {
  display: table;
  margin-bottom: 4px;
  padding: 2px 12px;
  background: var(--c-white);
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 700;
  line-height: 1.6;
}
.p-voice__role { margin-top: auto; font-size: clamp(14px, 1.3vw, 19px); font-weight: 700; line-height: 1.7; }
.p-voice__meta { margin-top: 6px; font-size: 13px; }

/* ---------- Q&A ---------- */
.p-faq { padding: 120px var(--gutter); background: var(--c-gray); }
.p-faq__list { max-width: 1200px; margin: 80px auto 0; }
.p-faq__list dt {
  padding: 18px 28px;
  background: var(--c-lime);
  border-radius: 14px;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.5;
}
.p-faq__list dd { padding: 22px 48px 60px; font-size: 14px; font-weight: 500; }
.p-faq__list dd:last-child { padding-bottom: 0; }

/* ---------- 院長メッセージ ---------- */
.p-message { padding: 170px var(--gutter) 180px; background: var(--c-gray); }
.p-message__inner {
  position: relative;
  display: grid;
  /* 列：本文の枠（54%）を「中身＋重なり用の 40px」に分け、その後ろにすき間（1fr）と写真の列（40%）。
     経歴の箱は「重なり用の 40px」から始めるので、本文の白い枠に 40px だけかぶさり、枠の内側の余白（56px）より内側の文字には重ならない */
  --msg-overlap: 40px;
  grid-template-columns: calc(54% - var(--msg-overlap)) var(--msg-overlap) 1fr 40%;
  grid-template-rows: auto auto;
  max-width: 1380px;
  margin: 0 auto;
}
.p-message__text {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  align-self: start;
  margin-top: 54px;
  padding: 56px 56px 70px;
  background: var(--c-white);
}
.p-message__body { margin-top: 14px; font-size: 15px; font-weight: 500; line-height: 2; }
.p-message__catch { margin-top: 36px; font-family: var(--f-heading); font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--c-lime); letter-spacing: .04em; } /* メインHPのコメントの見出し */
.p-message__name { display: flex; flex-direction: column; margin-top: 56px; font-weight: 700; line-height: 1.5; }
.p-message__org, .p-message__job { font-size: 13px; }
.p-message__position { font-size: 17px; }
.p-message__person { margin: 10px 0 8px; font-size: 26px; letter-spacing: .1em; }
.p-message__photo { grid-column: 4; grid-row: 1; width: 100%; aspect-ratio: 599 / 700; object-fit: cover; }
.p-message__career {
  grid-column: 2 / 5;
  grid-row: 2;
  padding: 50px 56px 56px;
  background: var(--c-beige);
}
.p-message__career h3 { margin-bottom: 18px; font-size: 22px; }
.p-message__career dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 14px; font-weight: 700; line-height: 1.7; }

/* ---------- 医院概要（流れる写真） ---------- */
.p-clinic { padding: 40px 0 160px; background: var(--c-gray); overflow: hidden; }
.p-clinic__row { margin-top: 20px; }
.p-clinic__row:first-of-type { margin-top: 60px; }
.p-clinic__track { display: flex; gap: 20px; width: max-content; animation: lionsika-marquee 60s linear infinite; }
.p-clinic__row--right .p-clinic__track { animation-direction: reverse; }
.p-clinic__track img { width: clamp(220px, 28vw, 525px); aspect-ratio: 787 / 579; object-fit: cover; }
@keyframes lionsika-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); } /* 同じ並びを2回出しているので半分（＋gapの半分）動けば継ぎ目なくつながる */
}

/* ---------- 募集要項 ---------- */
.p-requirements { padding: 160px var(--gutter) 260px; }
/* 線を見出しセルと内容セルで別々に描くため、セルの線を重ねない（separate）。
   見出しセル（オレンジ）は行の間に白い線だけを引き、左右には線を出さない。内容セルはグレーの枠で囲む */
.p-requirements__table { width: 100%; max-width: 960px; margin: 50px auto 0; font-size: 15px; line-height: 1.95; border-collapse: separate; border-spacing: 0; }
.p-requirements__table th,
.p-requirements__table td { padding: 20px 40px; }
.p-requirements__table th {
  width: 27%;
  background: var(--c-orange);
  border-bottom: 2px solid var(--c-white);
  color: var(--c-white);
  font-weight: 700;
  white-space: nowrap;
}
.p-requirements__table tr:last-child th { border-bottom: 0; }
.p-requirements__table td { border: 2px solid var(--c-line); border-top-width: 0; }
.p-requirements__table tr:first-child td { border-top-width: 2px; }

/* ---------- 応募フォーム（Contact Form 7 の出力に合わせる） ---------- */
.p-form { padding: 140px var(--gutter) 60px; background: var(--c-gray); }
.p-form__lead { margin-top: 40px; font-size: 14px; line-height: 1.8; text-align: center; }
.p-form__body { max-width: 1180px; margin: 60px auto 0; }
.p-form__table { width: 100%; border: 2px solid var(--c-line); background: var(--c-white); }
.p-form__table th {
  width: 43%;
  padding: 22px 20px 22px 70px;
  background: var(--c-orange);
  border-bottom: 2px solid #f5c88f;
  color: var(--c-white);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}
.p-form__table tr:last-child th { border-bottom: 0; }
.p-form__table th .p-form__required {
  float: right;
  padding: 2px 16px;
  background: var(--c-text);
  font-size: 15px;
}
.p-form__table td { padding: 18px 24px; border-bottom: 2px solid var(--c-line-light); }
.p-form__table input[type="text"],
.p-form__table input[type="tel"],
.p-form__table input[type="email"],
.p-form__table textarea {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--c-line);
  font: inherit;
  font-size: 16px; /* iPhoneで入力時に画面が拡大しないよう16px以上 */
}
.p-form__table textarea { height: 600px; resize: vertical; }
/* チェックボックス（ご連絡方法・問合せ内容）。行の高さを入力欄（53px）に揃え、見出しセルの文字と高さを合わせる */
.p-form__table .wpcf7-checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; min-height: 53px; }
.p-form__table .wpcf7-list-item { margin: 0; } /* Contact Form 7 標準の左余白を消し、入力欄の左端に揃える */
.p-form__table .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.p-form__table input[type="checkbox"] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-orange-dark); cursor: pointer; }
.p-form__submit { margin-top: 90px; text-align: center; }
.p-form__submit .wpcf7-submit {
  min-width: 400px;
  padding: 26px 96px; /* 右の矢印（右から 50px）に文字がかからないよう、左右を同じだけ空けて文字を中央に保つ */
  background: var(--c-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M1 1l10 10L1 21'/%3E%3C/svg%3E") no-repeat right 50px center / 12px auto;
  border: 3px solid var(--c-white);
  border-radius: 14px;
  box-shadow: 0 0 0 1px #e8c9a0;
  color: var(--c-white);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.p-form__submit .wpcf7-submit:hover { opacity: .85; }
.p-form .wpcf7-spinner { display: block; margin: 12px auto 0; }
.p-form .wpcf7-not-valid-tip { font-size: 14px; }
.p-form .wpcf7-response-output { margin: 30px 0 0 !important; padding: 12px 20px !important; text-align: center; background: var(--c-white); }
.p-form__closing {
  width: fit-content;
  margin: 90px auto 0;
  padding: 20px 80px;
  background: var(--c-white);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
}

/* ---------- フッター ---------- */
.l-footer__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 90px var(--gutter);
}
.l-footer__clinic { justify-self: end; text-align: center; }
.l-footer__tel {
  display: inline-flex;
  align-items: flex-end;
  gap: .28em;
  padding-top: 24px; /* 上の「むし歯ゼロ」の分の余白 */
  font-family: var(--f-en);
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-green);
  text-decoration: none;
}
/* 受話器のアイコン。モデルに合わせ、数字とほぼ同じ高さで縦長・太めにする（下線の外に置く） */
.l-footer__tel::before {
  content: "";
  flex: none;
  width: .56em;
  height: .82em;
  margin-bottom: .14em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18' preserveAspectRatio='none' fill='%231f7f3b'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
/* 下線は番号の下だけ */
.l-footer__tel-number { padding: 0 4px 6px 0; white-space: nowrap; border-bottom: 4px solid var(--c-yellow); } /* 折り返すと語呂合わせが前の行に重なる */
/* 語呂合わせ「むし歯ゼロ」：6480 の各数字の真上に1つずつ（む=6・し=4・歯=8・ゼロ=0） */
.l-footer__tel-goro { position: relative; display: inline-block; }
.l-footer__tel-ruby {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  display: flex;
  margin-bottom: 4px;
  font-family: var(--f-base);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}
.l-footer__tel-ruby span { flex: 1; text-align: center; white-space: nowrap; }
.l-footer__address { margin-top: 26px; font-size: 17px; font-weight: 700; }
.l-footer__access { display: flex; justify-content: center; gap: 50px; margin-top: 22px; }
/* 2026-11-11 駐車場の表示を消し、駅の表示を1つの横長の枠にした（狭い画面では「徒歩8分」の前で折り返す） */
.l-footer__access li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .8em;
  min-width: 210px;
  padding: 14px 44px; /* 2026-11-11 枠を1つにしたので、ひと回り大きくした */
  border: 2px solid var(--c-line-dark);
  border-radius: 14px;
  font-size: 18px;
  line-height: 1.5;
}
.l-footer__hours { width: 100%; max-width: 500px; margin: 28px auto 0; font-size: 18px; }
.l-footer__hours th, .l-footer__hours td { padding: 8px 6px; border-bottom: 2px solid var(--c-line-dark); font-weight: 500; }
.l-footer__hours thead th { border-bottom-width: 2px; }
.l-footer__hours td { color: var(--c-green); text-align: center; font-size: 22px; line-height: 1; }
.l-footer__hours td.is-off { color: var(--c-text); font-size: 18px; }
.l-footer__hours-note { margin-top: 16px; font-size: 17px; }
.l-footer__hours-note span { margin-right: 24px; color: var(--c-green); font-weight: 700; }
.l-footer__illust-map img { width: 100%; max-width: 640px; } /* yellow-map.png（1351×1035） */
.l-footer__gmap iframe { display: block; width: 100%; height: 580px; border: 0; }
.l-footer__bottom { padding: 70px var(--gutter) 60px; text-align: center; }
.l-footer__logo img { width: 280px; }
.l-footer__nav ul { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 60px; }
.l-footer__nav li { border-left: 3px solid var(--c-yellow); }
.l-footer__nav li:last-child { border-right: 3px solid var(--c-yellow); }
.l-footer__nav a { display: block; padding: 2px 18px; font-size: 18px; line-height: 1.3; text-decoration: none; }
.l-footer__nav a span { display: block; font-family: var(--f-en); font-size: 12px; color: var(--c-lime); }
.l-footer__medical { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 40px; margin-top: 40px; font-size: 16px; }
.l-footer__medical a { text-decoration: none; }
.l-footer__medical a::before { content: "・"; }
.l-footer a:hover { opacity: .75; }

/* ---------- その他の固定ページ ---------- */
.p-page { max-width: 960px; margin: 0 auto; padding: 80px var(--gutter) 120px; }
.p-page__content { margin-top: 50px; }

/* =========================================================
   タブレット以下
   ========================================================= */
@media (max-width: 1199px) {
  .l-header__inner { height: 125px; padding: 0 var(--gutter); }
  .l-header__logo img { width: 220px; }
  .l-header__tel { margin-right: 198px; } /* ENTRY の黄色い形の左端まで 30px */
  .l-header__tel-number { font-size: 30px; }
  .l-header__entry { width: 189px; height: 154px; padding: 0 0 30px 3px; background-position: -25px -101px; background-size: 304px 280px; font-size: 30px; clip-path: polygon(128.7% 27.3%, 129.2% 34.2%, 129.2% 41.3%, 128.8% 48.4%, 127.4% 55.3%, 125.8% 62.3%, 123.4% 68.9%, 120.6% 75.4%, 117.2% 81.4%, 113.1% 86.8%, 108.6% 91.6%, 103.6% 95.6%, 97.9% 98.2%, 92.1% 99.8%, 86.2% 100.3%, 80.3% 99.5%, 74.7% 98.0%, 69.4% 95.8%, 64.5% 93.5%, 60.0% 91.1%, 55.7% 88.9%, 51.6% 86.7%, 47.5% 84.7%, 43.4% 82.8%, 39.1% 81.2%, 34.5% 79.9%, 29.6% 78.3%, 24.4% 76.5%, 19.0% 74.1%, 13.9% 70.7%, 9.6% 66.2%, 6.0% 60.7%, 3.4% 54.6%, 1.5% 48.0%, 0.1% 41.2%, -0.3% 34.3%, -0.3% 27.3%, 0.4% 20.4%, 1.4% 13.7%, 2.9% 7.1%, 4.9% 0.7%, 6.8% -5.7%, 9.2% -11.8%, 12.1% -17.7%, 15.5% -23.1%, 19.3% -28.1%, 23.5% -32.6%, 28.2% -36.3%, 33.0% -39.7%, 38.2% -42.0%, 43.4% -43.9%, 48.7% -45.2%, 54.0% -45.7%, 59.4% -45.5%, 64.5% -45.0%, 69.6% -43.7%, 74.5% -42.1%, 79.3% -40.2%, 83.9% -37.8%, 88.5% -35.5%, 92.8% -32.7%, 97.2% -29.8%, 101.2% -26.3%, 105.3% -22.6%, 109.1% -18.5%, 112.7% -14.0%, 116.1% -9.2%, 119.3% -4.0%, 121.9% 1.7%, 124.2% 7.7%, 126.1% 14.0%, 127.7% 20.5%); }
  .p-message__text { padding: 40px; }
  .p-message__inner { --msg-overlap: 24px; } /* 本文の枠の余白が 40px になるので、重なりも小さくする */
}

/* =========================================================
   スマホ（モデルが無いため、PCのデザインを縦に並べて読みやすくする）
   ========================================================= */
@media (max-width: 767px) {
  body { font-size: 14px; }
  .u-sp-only { display: inline; }
  .c-heading { padding: 0 0 12px; border-bottom-width: 3px; }
  .c-blob-heading { padding: 18px 0 18px 26px; }
  .c-blob-heading::before { width: 100px; }

  .l-header__inner { height: 72px; gap: 10px; }
  .l-header__logo img { width: 150px; }
  .l-header__tel { display: none; }
  .l-header__entry { width: 108px; height: 89px; padding: 0 0 15px 3px; background-position: -14px -58px; background-size: 175px 161px; font-size: 20px; clip-path: polygon(129.1% 27.6%, 129.6% 34.5%, 129.6% 41.5%, 129.2% 48.6%, 127.8% 55.5%, 126.1% 62.4%, 123.8% 69.0%, 120.9% 75.4%, 117.5% 81.5%, 113.5% 86.9%, 108.9% 91.6%, 103.9% 95.6%, 98.2% 98.2%, 92.4% 99.8%, 86.5% 100.3%, 80.6% 99.5%, 75.0% 98.0%, 69.7% 95.8%, 64.8% 93.5%, 60.2% 91.2%, 55.9% 88.9%, 51.7% 86.7%, 47.6% 84.8%, 43.6% 82.8%, 39.3% 81.3%, 34.6% 80.0%, 29.7% 78.4%, 24.5% 76.6%, 19.1% 74.2%, 14.0% 70.8%, 9.6% 66.3%, 6.1% 60.9%, 3.4% 54.7%, 1.5% 48.2%, 0.1% 41.4%, -0.3% 34.5%, -0.3% 27.6%, 0.4% 20.7%, 1.4% 14.0%, 2.9% 7.4%, 4.9% 1.0%, 6.8% -5.3%, 9.2% -11.5%, 12.1% -17.3%, 15.6% -22.7%, 19.3% -27.7%, 23.6% -32.1%, 28.3% -35.8%, 33.1% -39.2%, 38.3% -41.5%, 43.5% -43.5%, 48.8% -44.7%, 54.2% -45.2%, 59.5% -45.0%, 64.8% -44.5%, 69.8% -43.2%, 74.8% -41.6%, 79.6% -39.8%, 84.2% -37.3%, 88.7% -35.0%, 93.1% -32.3%, 97.5% -29.3%, 101.6% -25.8%, 105.6% -22.2%, 109.4% -18.1%, 113.1% -13.6%, 116.5% -8.8%, 119.7% -3.6%, 122.3% 2.1%, 124.6% 8.0%, 126.5% 14.3%, 128.1% 20.8%); }
  .l-header__entry-label { gap: 8px; }
  .l-header__entry-label::after { border-width: 6px 0 6px 9px; }

  .p-mv__slide { flex-basis: 86%; }
  .p-mv__slide img { aspect-ratio: 4 / 3; }
  .p-mv__copy { left: 11%; top: auto; bottom: 8%; }

  /* スマホ：上に左の写真（welcome-02）→ 見出し・リスト → 下に右の写真（welcome-01）。背景はスマホ用の縦長の形（welcome-03-sp.svg）。
     位置と大きさは指示のスクショ（2026-10-20）を幅 375px に換算した値 */
  .p-welcome { display: flex; flex-direction: column; padding: 26px var(--gutter) 40px; background: var(--c-white); }
  .p-welcome::before {
    top: 93px;
    bottom: auto;
    left: 0;
    width: 99%;
    aspect-ratio: 988 / 1276;
    background-image: url("../img/welcome-03-sp.svg");
    transform: none;
  }
  .p-welcome__photo { position: relative; top: auto; left: auto; right: auto; display: block; }
  .p-welcome__photo--left { order: 0; align-self: flex-start; width: 43%; margin-left: calc(-1 * var(--gutter)); } /* 画面の左端につける */
  .p-welcome__body { order: 1; margin-top: 29px; }
  .p-welcome__photo--right { order: 2; align-self: flex-end; width: 55%; margin: 15px calc(-1 * var(--gutter)) 0 0; } /* 右側が切れた写真なので画面の右端につける */
  .p-welcome .c-heading { font-size: min(20px, 5.3vw); letter-spacing: .02em; } /* 見出しを2行に収める（幅 360px の機種でも2行） */
  .p-welcome__list { margin: 29px 0 28px; font-size: 13px; line-height: 2; }
  .p-welcome__lead { font-size: 12px; } /* スクショどおり1行に収める */

  .p-benefits { padding: 60px var(--gutter) 70px; }
  .p-benefits__five { line-height: 1.1; } /* 2行目の頭に来るので、大きな「5」の高さぶん行を広げて上の行と重ならないようにする */
  .p-benefits__list { margin-top: 40px; }
  .p-benefits__item { grid-template-columns: 1fr; gap: 24px; }
  .p-benefits__item + .p-benefits__item { margin-top: 56px; }
  .p-benefits__item:nth-child(even) .p-benefits__visual { order: 0; }
  .p-benefits__visual { width: 92%; margin: 0 auto; }
  .p-benefits__text { margin: 14px 0 0; }

  .p-entry-band { padding: 40px var(--gutter); }
  .p-entry-band__title { -webkit-text-stroke-width: 2px; }
  .p-entry-band__buttons { flex-direction: column; align-items: center; gap: 14px; }
  .p-entry-band__button { width: 100%; max-width: 400px; }

  .p-environment {
    padding: 60px var(--gutter) 80px;
    /* 2026-11-11 背景が写真になり、スマホでは本文が画面幅いっぱいのため、どこに置いても文字に重なる。スマホでは写真を出さない */
    background: var(--c-yellow-soft);
  }
  .p-environment__block { margin-top: 50px; }
  .p-clinics { grid-template-columns: 1fr; padding: 44px 18px 22px; margin-bottom: 60px; border-width: 4px; }
  .p-clinics__box { border-width: 4px; padding: 18px; }
  .p-clinics__arrow { width: 34px; height: 70px; margin: 14px auto 0; clip-path: polygon(50% 0, 100% 22%, 70% 22%, 70% 78%, 100% 78%, 50% 100%, 0 78%, 30% 78%, 30% 22%, 0 22%); }
  .p-flow { grid-template-columns: 1fr; gap: 26px; }
  .p-flow li + li::before { left: 50%; top: -20px; border: 8px solid transparent; border-top: 11px solid var(--c-yellow); border-bottom: 0; transform: translateX(-50%); }
  .p-training { flex-direction: column; gap: 10px; padding-left: 0; }
  .p-environment__detail { margin: 6px 0 0; }

  .p-voice { padding: 70px var(--gutter) 80px; }
  .p-voice__list { display: grid; gap: 20px; max-width: 420px; }
  /* スマホ用の画像は上が写真、下（上から約45〜57%より下）が色の帯。文字は写真に重ならないよう、色の帯の中（上から58%）より下に置き、
     カードの下に寄せる。コメントと名前の間（24px）と名前の下の余白は3人とも同じ。文字が帯に収まらない幅では、カードを帯と同じ色で下へ伸ばす */
  .p-voice__item--lime { background: var(--c-lime); }
  .p-voice__item--pink { background: var(--c-pink); }
  .p-voice__item--yellow { background: var(--c-yellow); }
  .p-voice__item { container-type: inline-size; } /* 中の文字の位置をカードの幅（cqw）で決めるため */
  .p-voice__bg { display: block; }
  .p-voice__body {
    position: relative;
    inset: auto;
    display: flex; /* コメント＋名前をひとかたまりにしてカードの下に寄せる（名前の下の余白を3人とも同じにする） */
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin-top: -57cqw; /* 画像の高さ（カード幅の 135.8%）のうち、上から58%の位置まで文字を引き上げる（カード幅の 57%） */
    min-height: 57cqw; /* 文字が少なくても、カードの高さは画像の高さ以上にする（次のカードと重ならないように） */
    padding: 0 7cqw 7cqw;
  }
  .p-voice__catch span { margin-bottom: 3px; padding: 0 8px; font-size: 12.5px; }
  .p-voice__role { margin-top: 24px; padding-top: 0; font-size: 13.5px; line-height: 1.6; } /* コメントとの間 */
  .p-voice__item:nth-child(n+2) .p-voice__role { margin-top: 40px; } /* 2人目・3人目はコメントが短く上が空きやすいので、間を広めにとってコメントを上げる */
  .p-voice__meta { margin-top: 2px; font-size: 11px; }

  .p-faq { padding: 70px var(--gutter); }
  .p-faq__list { margin-top: 50px; }
  .p-faq__list dt { padding: 14px 18px; border-radius: 10px; }
  .p-faq__list dd { padding: 14px 8px 36px; }

  .p-message { padding: 70px var(--gutter); }
  .p-message__inner { grid-template-columns: 1fr; }
  .p-message__text, .p-message__photo, .p-message__career { grid-column: 1; grid-row: auto; }
  .p-message__photo { order: -1; width: 80%; margin: 0 auto; }
  .p-message__text { margin-top: -40px; padding: 30px 22px 36px; position: relative; }
  .p-message__career { margin: 0; padding: 30px 22px; }

  .p-clinic { padding: 20px 0 80px; }
  .p-clinic__row:first-of-type { margin-top: 40px; }
  .p-clinic__track { gap: 10px; animation-duration: 45s; }
  .p-clinic__track img { width: 200px; }
  @keyframes lionsika-marquee { to { transform: translateX(calc(-50% - 5px)); } }

  .p-requirements { padding: 80px var(--gutter) 100px; }
  .p-requirements__table, .p-requirements__table tbody, .p-requirements__table tr, .p-requirements__table th, .p-requirements__table td { display: block; width: 100%; }
  .p-requirements__table th, .p-requirements__table td { padding: 10px 16px; }
  .p-requirements__table td, .p-requirements__table tr:first-child td { border-top-width: 0; } /* スマホは見出しセルの下に内容が続くので、内容の上には線を引かない */

  .p-form { padding: 80px var(--gutter) 50px; }
  .p-form__lead { text-align: left; }
  .p-form__lead br { display: none; }
  .p-form__body { margin-top: 36px; }
  .p-form__table, .p-form__table tbody, .p-form__table tr, .p-form__table th, .p-form__table td { display: block; width: 100%; }
  .p-form__table th { padding: 12px 16px; font-size: 16px; border-bottom: 0; }
  .p-form__table th .p-form__required { font-size: 13px; }
  .p-form__table td { padding: 14px 16px; }
  .p-form__table textarea { height: 220px; }
  .p-form__table .wpcf7-checkbox { gap: 10px 24px; min-height: 0; }
  .p-form__submit { margin-top: 40px; }
  .p-form__submit .wpcf7-submit { min-width: 0; width: 100%; max-width: 340px; padding: 18px 40px; font-size: 18px; background-position: right 22px center; } /* 幅 320px でも「上記の内容で送信する」と矢印の間を空ける */
  .p-form__closing { margin-top: 50px; padding: 14px 32px; font-size: 15px; }

  .l-footer__info { grid-template-columns: 1fr; gap: 36px; padding: 60px var(--gutter); }
  .l-footer__clinic { justify-self: center; }
  /* 40px のままだと幅 360px 未満で番号が2行に折り返し、「むし歯ゼロ」が上の行に重なるため、画面幅に合わせて小さくする（320px で約 39px） */
  .l-footer__tel { font-size: clamp(28px, 14vw - 6px, 40px); }
  .l-footer__tel { padding-top: 18px; }
  .l-footer__tel-ruby { font-size: 11px; margin-bottom: 3px; }
  .l-footer__tel-number { padding-bottom: 4px; border-bottom-width: 3px; }
  .l-footer__address { font-size: 14px; }
  .l-footer__access { flex-direction: column; align-items: center; gap: 12px; }
  .l-footer__access li { padding: 12px 20px; font-size: 16px; } /* 幅 320px でも1行に収まる大きさ */
  .l-footer__hours { font-size: 14px; }
  .l-footer__hours td { font-size: 17px; }
  .l-footer__hours-note { font-size: 14px; }
  .l-footer__gmap iframe { height: 320px; }
  .l-footer__bottom { padding: 50px var(--gutter); }
  .l-footer__logo img { width: 220px; }
  .l-footer__nav ul { margin-top: 36px; gap: 14px 0; }
  .l-footer__nav a { padding: 2px 12px; font-size: 14px; }
  .l-footer__medical { gap: 4px 18px; font-size: 14px; }
}

/* =========================================================
   大きい画面（1440px より広い）
   1440px では上の値のまま、1920px でモデル（top_model.jpg・幅1920px）の大きさになるよう、画面幅に比例して大きくする。
   --k は 1440px で 0、1920px で 480px になる長さ。値 = 1440px の値 ＋（1920px の値 − 1440px の値）× --k ÷ 480
   1920px の値は、モデルの同じ文字の幅を測って割り出した（2026-10-20）。1920px より広い画面ではモデルの大きさのまま
   ========================================================= */
@media (min-width: 1441px) {
  .c-heading { font-size: calc(33.12px + 14.88 * var(--k) / 480); }
  .c-en-heading { font-size: calc(74.88px + 35.12 * var(--k) / 480); }
  .c-en-heading span { font-size: calc(20.16px + 10.84 * var(--k) / 480); margin-top: calc(10px + 4 * var(--k) / 480); }
  .c-en-heading--ja { font-size: calc(34.56px + 13.44 * var(--k) / 480); }
  .p-clinic .c-en-heading span { font-size: calc(20.16px + 25.84 * var(--k) / 480); }
  .p-form .c-en-heading span { font-size: calc(20.16px + 16.84 * var(--k) / 480); }
  .c-blob-heading { font-size: calc(31.68px + 14.32 * var(--k) / 480); }
  .c-blob-heading::before { width: calc(150px + 50 * var(--k) / 480); }
  .c-sub-heading { font-size: calc(18.72px + 10.28 * var(--k) / 480); }
  .c-sub-heading::before { width: calc(42px + 14 * var(--k) / 480); }
  .p-mv__copy { font-size: calc(77.76px + 11.24 * var(--k) / 480); }
  .p-welcome__body { max-width: calc(720px + 280 * var(--k) / 480); }
  .p-welcome__list, .p-welcome__lead { font-size: calc(17.28px + 10.72 * var(--k) / 480); }
  .p-benefits__title { font-size: calc(27.36px + 10.64 * var(--k) / 480); }
  .p-benefits__item { --num-h: calc(79.34px + 8.66 * var(--k) / 480); }
  .p-benefits__text { font-size: calc(14px + 3 * var(--k) / 480); max-width: calc(448px + 152 * var(--k) / 480); }
  .p-entry-band__title { font-size: calc(77.76px + 32.24 * var(--k) / 480); }
  .p-entry-band__lead { font-size: calc(18.72px + 9.28 * var(--k) / 480); }
  .p-environment__block > .c-sub-heading, .p-environment__block > .p-clinics, .p-environment__block > .p-flow, .p-environment__block > .p-training { max-width: calc(1000px + 200 * var(--k) / 480); }
  .p-clinics { grid-template-columns: 1fr calc(200px + 60 * var(--k) / 480) 1fr; }
  .p-clinics__label { font-size: calc(21.6px + 8.4 * var(--k) / 480); }
  .p-clinics__box { font-size: calc(16px + 7 * var(--k) / 480); }
  .p-clinics__area { font-size: calc(26px + 6 * var(--k) / 480); }
  .p-clinics__name { font-size: calc(15px + 7 * var(--k) / 480); }
  .p-clinics__between { font-size: calc(15px + 7 * var(--k) / 480); }
  .p-flow li { font-size: calc(16px + 7 * var(--k) / 480); min-height: calc(80px + 20 * var(--k) / 480); }
  .p-training__lead { font-size: calc(16px + 7 * var(--k) / 480); }
  .p-training__list { font-size: calc(13px + 4 * var(--k) / 480); }
  .p-environment__lead { font-size: calc(18.72px + 10.28 * var(--k) / 480); }
  .p-environment__points { font-size: calc(15px + 8 * var(--k) / 480); }
  .p-environment__detail { max-width: calc(600px + 300 * var(--k) / 480); }
  .p-voice__catch span { font-size: calc(18.72px + 5.28 * var(--k) / 480); }
  .p-voice__role { font-size: calc(18.72px + 4.28 * var(--k) / 480); }
  .p-voice__meta { font-size: calc(13px + 3 * var(--k) / 480); }
  .p-faq__list dt { font-size: calc(21.6px + 8.4 * var(--k) / 480); }
  .p-faq__list dd { font-size: calc(14px + 3 * var(--k) / 480); }
  .p-message__body { font-size: calc(15px + 3 * var(--k) / 480); }
  .p-message__catch { font-size: calc(22px + 8 * var(--k) / 480); }
  .p-message__org, .p-message__job { font-size: calc(13px + 3 * var(--k) / 480); }
  .p-message__position { font-size: calc(17px + 6 * var(--k) / 480); }
  .p-message__person { font-size: calc(26px + 8 * var(--k) / 480); }
  .p-message__career h3 { font-size: calc(22px + 8 * var(--k) / 480); }
  .p-message__career dl { font-size: calc(14px + 4 * var(--k) / 480); }
  .p-requirements__table { font-size: calc(15px + 3 * var(--k) / 480); }
  .p-form__lead { font-size: calc(14px + 3 * var(--k) / 480); }
  .p-form__table th { font-size: calc(18px + 6 * var(--k) / 480); }
  .p-form__table th .p-form__required { font-size: calc(15px + 4 * var(--k) / 480); }
  .p-form__table input[type="text"], .p-form__table input[type="tel"], .p-form__table input[type="email"], .p-form__table textarea { font-size: calc(16px + 4 * var(--k) / 480); }
  .p-form__table .wpcf7-list-item label { font-size: calc(16px + 4 * var(--k) / 480); }
  .p-form__submit .wpcf7-submit { font-size: calc(22px + 8 * var(--k) / 480); }
  .p-form__closing { font-size: calc(18px + 10 * var(--k) / 480); }
  /* 余白：モデル（1920px）の見出し・ブロックの位置を測り、その間隔になるようにした */
  .p-welcome { padding-top: calc(110px + 106 * var(--k) / 480); padding-bottom: calc(150px + 41 * var(--k) / 480); }
  .p-welcome__list { margin-top: calc(40px + 72 * var(--k) / 480); margin-bottom: calc(56px + 26 * var(--k) / 480); }
  .p-benefits { padding-bottom: calc(120px + -23 * var(--k) / 480); }
  .p-benefits__list { max-width: calc(1200px + 240 * var(--k) / 480); } /* モデルは写真の列が広い（行の幅 1440px） */
  .p-benefits__item + .p-benefits__item { margin-top: calc(30px + 47 * var(--k) / 480); }
  .p-environment { padding-top: calc(110px + 61 * var(--k) / 480); padding-bottom: calc(160px + 83 * var(--k) / 480); }
  .p-environment__block { margin-top: calc(90px + -23 * var(--k) / 480); margin-bottom: calc(0px + 202 * var(--k) / 480); }
  .p-environment__block--side { margin-top: calc(90px + 22 * var(--k) / 480); margin-bottom: 0; }
  .p-environment__block > .c-sub-heading { margin-top: calc(30px + 70 * var(--k) / 480); margin-bottom: calc(30px + -19 * var(--k) / 480); }
  .p-clinics { margin-bottom: calc(120px + 78 * var(--k) / 480); }
  .p-training { margin-top: calc(40px + 52 * var(--k) / 480); }
  /* モデルでは、見出しが短い「キャリアアップ」は説明が見出しのすぐ横から始まり、長い「認定医…」は見出しの下から始まる */
  .p-environment__block--side .p-environment__detail { margin-top: calc(-14px + 4 * var(--k) / 480); }
  .p-environment__block--side + .p-environment__block--side .p-environment__detail { margin-top: calc(-14px + -39 * var(--k) / 480); }
  .p-welcome__photo--left { top: calc(330px + 157 * var(--k) / 480); }
  .p-welcome__photo--right { top: calc(40px + 67 * var(--k) / 480); width: calc(316.8px + 139.2 * var(--k) / 480); }
  .p-voice { padding-top: calc(110px + -19 * var(--k) / 480); padding-bottom: calc(160px + 91 * var(--k) / 480); }
  .p-faq { padding-top: calc(120px + 20 * var(--k) / 480); padding-bottom: calc(120px + 12 * var(--k) / 480); }
  .p-faq__list { margin-top: calc(80px + 18 * var(--k) / 480); }
  .p-faq__list dd { padding-bottom: calc(60px + 20 * var(--k) / 480); }
  .p-faq__list dd:last-child { padding-bottom: 0; }
  .p-message { padding-bottom: calc(180px + -34 * var(--k) / 480); }
  .p-message__inner { grid-template-columns: calc(54% - var(--msg-overlap)) var(--msg-overlap) 1fr calc(552px + 48 * var(--k) / 480); } /* モデルは院長の写真が大きい（幅 600px）。1440px 以上では枠が 1380px 固定なので px で指定 */
  .p-clinic { padding-bottom: calc(160px + 91 * var(--k) / 480); }
  .p-clinic__row:first-of-type { margin-top: calc(60px + 15 * var(--k) / 480); }
  .p-requirements { padding-top: calc(160px + 68 * var(--k) / 480); }
  .p-requirements__table { margin-top: calc(50px + 23 * var(--k) / 480); }
  .p-requirements__table th, .p-requirements__table td { padding-top: calc(20px + -6 * var(--k) / 480); padding-bottom: calc(20px + -6 * var(--k) / 480); }
  .p-form { padding-top: calc(140px + 51 * var(--k) / 480); padding-bottom: calc(60px + 92 * var(--k) / 480); }
  .p-form__lead { margin-top: calc(40px + 32 * var(--k) / 480); }
  .p-form__body { margin-top: calc(60px + -11 * var(--k) / 480); }
  .p-form__closing { margin-top: calc(90px + -25 * var(--k) / 480); }
}