/* ===== 書体（ページで使う文字だけの woff2。作り直しは要件定義.md を参照）
   和文は游ゴシックに近い Zen Kaku Gothic New（400・500・700。ファーストビューの縦書きも同じ）、数字と英字は Montserrat（400・500） ===== */
@font-face { font-family: "Mizuha Sans"; src: url("../assets/fonts/zenkaku-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mizuha Sans"; src: url("../assets/fonts/zenkaku-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mizuha Sans"; src: url("../assets/fonts/zenkaku-700.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Mizuha En"; src: url("../assets/fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mizuha En"; src: url("../assets/fonts/montserrat-500.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* ===== 配色（参考と同じ組み方：白い地・濃い紺の見出し・明るい青の差し色・淡い青の面。
   色相は参考の青 204° から、水を思わせる青緑寄りの 194° へ） ===== */
:root {
  --navy: #0b4a5e;          /* 見出し・表の印・フッターの地（白の上で 9.7） */
  --accent: #1b7d9c;        /* 小見出しの札・リンクの文字（白の上で 4.7） */
  --accent-2: #3ba3c2;      /* 丸い矢印・アイコンの差し色・手書きの英字（飾りだけ。文字には使わない） */
  --pale: #d6edf3;          /* ファーストビューの地 */
  --wash: #f4fafb;          /* 診療内容の段のごく淡い面 */
  --ink: #333b40;           /* 本文（白の上で 11.4） */
  --line: rgba(51, 59, 64, 0.2);
  --band: 28px;
  --hd-h: 7.1875rem;

  --ff: "Mizuha Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --en: "Mizuha En", "Mizuha Sans", sans-serif;
  --ease: cubic-bezier(0.3, 0.1, 0.1, 1);
}
@media (max-width: 77.4375rem) { :root { --hd-h: 5.625rem; } }
@media (max-width: 40.625rem) { :root { --hd-h: 4rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--ff);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.6;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; }
.en { font-family: var(--en); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ib { display: inline-block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== サンプルの帯 ===== */
.demo {
  position: relative;
  z-index: 200;
  height: var(--band);
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  line-height: var(--band);
  text-align: center;
  letter-spacing: 0.06em;
}
.demo a { text-decoration: underline; text-underline-offset: 3px; }

/* 本文の幅 */
.inner { max-width: 78rem; margin: 0 auto; padding: 0 1.5rem; }

/* 小見出しの札：2本の波の印＋青い文字 */
.label {
  display: flex;
  align-items: center;
  color: var(--accent);
  font-size: clamp(1rem, 0.962rem + 0.16vw, 1.125rem);
  font-weight: 700;
  line-height: 1.2;
}
.label svg { flex: none; width: 1rem; height: 1rem; margin-right: 0.5rem; color: var(--accent-2); }
.label--c { justify-content: center; }

/* 段の見出し（中央） */
.h2c {
  margin-top: 2rem;
  color: var(--navy);
  font-size: clamp(1.25rem, 0.906rem + 1.47vw, 2.375rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 40.625rem) { .h2c { margin-top: 1.5rem; } }

/* 「詳しくはこちら」：青い文字と丸い矢印 */
.more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
}
.more__t { color: var(--accent); font-size: clamp(1rem, 0.962rem + 0.16vw, 1.125rem); letter-spacing: 0.1em; transition: transform 0.4s ease; }
.more__m {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-2);
  color: #fff;
  transition: transform 0.4s ease, background-color 0.4s ease;
}
.more__m svg { width: 1.125rem; height: 0.5625rem; transition: transform 0.4s ease; }
.more:hover .more__t { transform: translateX(0.3125rem); }
.more:hover .more__m { transform: scale(0.9); background-color: var(--navy); }
.more:hover .more__m svg { transform: translateX(2px); }

/* 写真の角丸 */
.r12 { overflow: hidden; border-radius: 0.75rem; }
.r12 img { width: 100%; height: 100%; object-fit: cover; }

/* ふわっと出る */
.js .fade { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js .fade.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .fade { opacity: 1; transform: none; transition: none; }
}