@charset "UTF-8";
/* =========================================================
   小松川病院 スタイル
   パレット: ピンク主軸（現行HP継承 #FFBDBD）+ 若草 + ラベンダー
   コントラストは全てWCAG AA以上で確認済み
   ========================================================= */

:root {
  /* ピンク一家（色相0度で統一。明度だけを段階化） */
  --pink-50:  #FFF2F2;
  --pink-100: #FFBDBD;  /* 面・主要カラー */
  --pink-200: #FC9292;
  --pink-300: #EF6C6C;
  --pink-400: #C13F3F;  /* 英字見出し・日付。白背景で 5.18:1（AA） */
  --pink-500: #A83838;  /* ボタン・操作部品 */
  --pink-600: #742F2F;
  --pink-700: #4D2323;  /* 文字・見出し */

  /* 副の色 */
  --green-50:  #F1FFEF;
  --green-100: #C1FFBD;
  --green-500: #4E8A47;
  --lav-50:   #F3F2FF;
  --lav-100:  #C4BDFF;
  --lav-500:  #4A3F8A;

  /* 地と文字 */
  --cream:  #FDFAF7;
  --white:  #FFFFFF;
  --ink:    #4D2323;
  --ink-sub:#7A5C5C;
  --line:   #EADFDA;

  --header-h: 92px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1200px;
}

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

html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; overscroll-behavior-y: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  min-height: 100%;
  overscroll-behavior-y: none;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-500); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--pink-500);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* キーボード操作でフォーカスが来たときは見せる */
.sr-only:focus, .sr-only:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  width: auto; height: auto; margin: 0; padding: 12px 18px;
  overflow: visible; clip: auto; white-space: normal;
  background: var(--pink-500); color: var(--white); border-radius: 10px;
  font-size: 15px; font-weight: 600;
}

.wrap { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }

/* ---------- 見出し ---------- */
.sec-head { text-align: center; margin-bottom: 56px; }
.sec-head .en {
  display: block;
  font-family: "Times New Roman", "YuMincho", serif;
  font-size: 13px; letter-spacing: .3em; color: var(--pink-400);
  margin-bottom: 10px;
}
.sec-head h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink);
}
.sec-head .lead {
  margin: 16px auto 0; max-width: 720px;
  font-size: 15px; color: var(--ink-sub);
}

/* =========================================================
   ヘッダー（左上にロゴを置く。たまの病院と同じ考え方）
   ========================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  pointer-events: none;
}
.site-header .logo-box {
  position: absolute; top: 0; left: 0;
  background: var(--white);
  padding: 18px 30px 22px;
  border-radius: 0 0 18px 0;
  box-shadow: 0 6px 24px rgba(120, 70, 70, .10);
  pointer-events: auto;
  transform-origin: 0 0;
  transition: transform .35s var(--ease);
}
.site-header .logo-box img { width: 152px; }
.site-header.is-scrolled .logo-box { transform: scale(.7); }

.header-right {
  position: absolute; top: 0; right: 0; pointer-events: auto;
  transition: transform .38s var(--ease);
}

.header-top {
  display: flex; align-items: stretch; justify-content: flex-end;
  /* 下段のナビ幅につられて白帯が伸びないよう、中身の幅で確定させる */
  margin-left: auto; width: max-content;
  background: var(--white);
  border-radius: 0 0 0 18px;
  box-shadow: 0 6px 24px rgba(120, 70, 70, .10);
  overflow: hidden;
  transition: transform .38s var(--ease), opacity .38s var(--ease);
}
/* スクロールしたら上段をしまい、ナビだけを残して高さを半分にする */
.site-header.is-scrolled .header-top {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.site-header.is-scrolled .header-right { transform: translate3d(0, -58px, 0); }
.header-top .tel {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px 12px 20px;
  font-size: 13px; color: var(--ink-sub);
}
.header-top .tel a {
  font-size: 22px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
  font-family: "Times New Roman", serif;
}
.header-top .btn-access,
.header-top .btn-pro {
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px; font-size: 13px; text-decoration: none; white-space: nowrap;
  transition: background .25s var(--ease);
}
.header-top .btn-access { background: var(--pink-50); color: var(--pink-700); }
.header-top .btn-access:hover { background: var(--pink-100); }
.header-top .btn-pro { background: var(--pink-500); color: var(--white); font-weight: 600; }
.header-top .btn-pro:hover { background: var(--pink-600); }

/* 暗い地は使わない。写真の上でも読めるよう、ナビ自体を白い帯にする */
.gnav {
  display: flex; justify-content: flex-end; gap: 34px;
  background: rgba(255,255,255,.94);
  border-radius: 0 0 0 18px;
  padding: 16px 30px 14px;
}
.gnav a {
  /* 項目が10個あるので、リンクの中で折り返すと語が切れて読めなくなる */
  white-space: nowrap;
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
  letter-spacing: .08em;
  padding-bottom: 6px; border-bottom: 2px solid transparent;
  transition: border-color .25s var(--ease);
}
.gnav a:hover, .gnav a[aria-current="page"] { border-bottom-color: var(--pink-400); }


.nav-toggle {
  display: none;
  position: absolute; top: 16px; right: 16px;
  width: 56px; height: 56px; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; pointer-events: auto;
}
.nav-toggle span {
  display: block; width: 26px; height: 3px; margin: 5px auto; border-radius: 2px;
  background: var(--pink-500); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  /* 内蔵ブラウザのアドレスバー変動で高さを再計算させない */
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh;
  height: calc(var(--app-vh, 1vh) * 100);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  z-index: 99;
  isolation: isolate;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  padding: 116px 28px 24px;
  /* 画面外に置くとスクロール幅に算入されるため、位置は動かさず不透明度で出し入れする */
  opacity: 0;
  visibility: hidden;
  /* iOS は position:fixed に transform を掛けると表示が崩れることがあるため使わない */
  /* visibility を transition に混ぜると hidden のまま留まり、開いても中身が出ない。
     開くときは即 visible、閉じるときだけ遅らせて hidden に戻す */
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s linear 0s;
}
/* 本編と同じ地。iOS は fixed の中の filter を壊すため、blur を使わず
   グラデーションの減衰だけで輪郭のない色だまりを作る */
.drawer::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 28% at 22% 16%, rgba(255,168,168,.32), transparent 78%),
    radial-gradient(ellipse 54% 30% at 82% 24%, rgba(176,235,170,.40), transparent 78%),
    radial-gradient(ellipse 46% 26% at 42% 56%, rgba(186,176,242,.20), transparent 78%),
    radial-gradient(ellipse 50% 28% at 14% 78%, rgba(176,235,170,.36), transparent 78%),
    radial-gradient(ellipse 44% 24% at 86% 88%, rgba(255,168,168,.26), transparent 78%);
}
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > ul > li { border-bottom: 1px solid var(--line); }
/* 英字を項目名の右へ逃がして1行にする。11項目を1画面に収めるため */
.drawer a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 4px; text-decoration: none; color: var(--ink);
  font-size: 16.5px; font-weight: 600; line-height: 1.5;
}
.drawer .en {
  font-size: 10px; letter-spacing: .2em; color: var(--pink-400);
  font-family: "Times New Roman", serif; font-weight: 400;
  order: 2; flex: none;
}


/* =========================================================
   色だまりの地（Forest Park Villas と同じ作り。blur をかけて輪郭を消す）
   セクションごとに2色を替える
   ========================================================= */
.wash {
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  filter: blur(22px);
  animation: wash-breath 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wash-breath {
  from { transform: translate3d(-1.2%, 0, 0) scale(1); }
  to   { transform: translate3d(1.2%, -1%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .wash { animation: none; }
}

/* ピンク × 若草 */
.wash[data-wash="a"] {
  background:
    radial-gradient(ellipse 29% 15% at 18% 34%, rgba(255,168,168,.52), transparent 72%),
    radial-gradient(ellipse 32% 12% at 76% 26%, rgba(176,235,170,.40), transparent 74%),
    radial-gradient(ellipse 25% 13% at 56% 74%, rgba(255,168,168,.44), transparent 70%),
    radial-gradient(ellipse 19% 10% at 86% 70%, rgba(176,235,170,.30), transparent 72%);
}
/* 若草 × ラベンダー（2つめのセクション） */
.wash[data-wash="b"] {
  background:
    radial-gradient(ellipse 30% 15% at 22% 30%, rgba(176,235,170,.46), transparent 72%),
    radial-gradient(ellipse 30% 13% at 74% 34%, rgba(186,176,242,.40), transparent 74%),
    radial-gradient(ellipse 26% 12% at 52% 78%, rgba(176,235,170,.36), transparent 70%),
    radial-gradient(ellipse 20% 11% at 12% 76%, rgba(186,176,242,.28), transparent 72%);
}
/* ラベンダー × ピンク */
.wash[data-wash="c"] {
  background:
    radial-gradient(ellipse 30% 14% at 16% 36%, rgba(186,176,242,.44), transparent 72%),
    radial-gradient(ellipse 31% 13% at 78% 28%, rgba(255,168,168,.44), transparent 74%),
    radial-gradient(ellipse 24% 12% at 60% 76%, rgba(186,176,242,.34), transparent 70%),
    radial-gradient(ellipse 20% 11% at 10% 74%, rgba(255,168,168,.30), transparent 72%);
}
/* 山吹 × ピンク（お知らせ・アクセスなど） */
.wash[data-wash="d"] {
  background:
    radial-gradient(ellipse 28% 14% at 20% 32%, rgba(240,200,130,.40), transparent 72%),
    radial-gradient(ellipse 32% 13% at 76% 30%, rgba(255,168,168,.42), transparent 74%),
    radial-gradient(ellipse 25% 12% at 54% 76%, rgba(240,200,130,.30), transparent 70%);
}

/* wash を敷くセクションは重なり順を確定させる */
.hero, .message, .circles, .section, .everyday {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* wash は親の内側で完結させる。はみ出しでページ幅を広げない */
.wash { inset: -14%; }

/* =========================================================
   HERO（たまの病院の型。まわりに余白と白枠、写真は八角形、地に墨流し）
   ========================================================= */
.hero {
  position: relative;
  height: 100vh; height: calc(var(--app-vh, 1vh) * 100); min-height: 640px;
  padding: 44px;
  background-color: var(--pink-50);
  overflow: hidden;
  isolation: isolate;
}

/* 余白の地に敷く墨流し */
.sumi { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sumi svg { width: 100%; height: 100%; display: block; }
.sumi ellipse { fill: none; stroke: var(--pink-300); vector-effect: non-scaling-stroke; }
.sumi__a ellipse { stroke-width: 2.2; opacity: .58; }
.sumi__b ellipse { stroke-width: 1.7; opacity: .40; }

/* 白枠 */
.hero__frame {
  position: relative;
  height: 100%;
  background: var(--white);
  padding: 13px;
  clip-path: polygon(56px 0, calc(100% - 56px) 0, 100% 56px, 100% calc(100% - 56px), calc(100% - 56px) 100%, 56px 100%, 0 calc(100% - 56px), 0 56px);
  box-shadow: 0 22px 60px rgba(120, 60, 60, .16);
}
/* 写真側の八角形 */
.hero__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(46px 0, calc(100% - 46px) 0, 100% 46px, 100% calc(100% - 46px), calc(100% - 46px) 100%, 46px 100%, 0 calc(100% - 46px), 0 46px);
}

.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .85s var(--ease), visibility 0s linear .85s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity .85s var(--ease), visibility 0s linear 0s; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 5s linear;
}
.hero__slide.is-active img { transform: scale(1); }
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(77,35,35,.62) 0%, rgba(77,35,35,.28) 46%, rgba(77,35,35,.06) 100%);
}

.hero__copy {
  position: absolute; left: 0; right: 0; bottom: 12%; z-index: 3;
  width: min(100% - 96px, 1060px);
  margin-inline: auto;
  color: var(--white);
}
.hero__copy .ttl {
  margin: 0 0 22px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: 1.4; letter-spacing: .12em;
  text-shadow: 0 4px 28px rgba(50,20,20,.5);
}
.hero__copy .txt {
  margin: 0; font-size: clamp(14px, 1.3vw, 17px); line-height: 2.1;
  letter-spacing: .07em; text-shadow: 0 2px 16px rgba(50,20,20,.6);
}

/* =========================================================
   メッセージ（大野記念病院のセクション1の作り。ぼんやり現れる）
   ========================================================= */
.message {
  position: relative;
  padding: 168px 0 176px;
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
/* 淡いにじみを1枚。soft-light で紙のような濃淡を出す */
.message__wash--unused {
  position: absolute; inset: -18% -12%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 48% at 26% 34%, rgba(255,189,189,.60), transparent 62%),
    radial-gradient(ellipse 54% 44% at 78% 62%, rgba(196,189,255,.34), transparent 60%),
    radial-gradient(ellipse 48% 40% at 54% 88%, rgba(193,255,189,.30), transparent 58%);
  mix-blend-mode: soft-light;
  opacity: .9;
}

/* 地図（実データから生成した江戸川区のSVG）。PCは背景として文字の下まで広げてよい */
.message { position: relative; overflow: hidden; text-align: left; }
.message__map {
  position: absolute; z-index: 0; pointer-events: none;
  left: -3%; top: 50%; transform: translateY(-50%);
  height: 116%;
  /* 端に向かって徐々に消して、地とひとつながりに見せる */
  -webkit-mask-image: linear-gradient(172deg, #000 34%, rgba(0,0,0,.5) 60%, transparent 88%);
  mask-image: linear-gradient(172deg, #000 34%, rgba(0,0,0,.5) 60%, transparent 88%);
}
.message__map svg { height: 100%; width: auto; display: block; }
.message .wrap { position: relative; z-index: 1; }

/* 右にメッセージ・左に理念。左は地図を眺めさせるため下寄せ */
.message__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end; min-height: 640px;
}
.message__side { padding-bottom: 8px; }
.message__inner { max-width: 560px; margin-left: auto; }

/* スマホでだけ効かせる改行 */
br.sp { display: none; }
@media (max-width: 900px) { br.sp { display: inline; } }

/* 病院理念 */
.message__rinen { margin: 0; }
.message__rinen-label {
  margin: 0 0 16px;
  font-size: 15px; letter-spacing: .3em; color: var(--pink-400); font-weight: 700;
}
.message__rinen ul { list-style: none; margin: 0; padding: 0; }
.message__rinen li {
  font-size: 17.5px; line-height: 2.5; color: var(--ink);
  letter-spacing: .1em; font-weight: 700;
}

@media (max-width: 900px) {
  /* スマホは 地図（写真つき）→ メッセージ → 理念 の順で縦に */
  .message { text-align: center; }
  .message__map {
    position: static; transform: none;
    height: auto; margin: 0 auto 40px;
    width: 92%; max-width: 440px;
  }
  .message__map svg { width: 100%; height: auto; }
  .message { padding-top: 84px; }
  .message__grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .message__side { order: 2; padding-bottom: 0; margin-top: 8px; }
  .message__inner { margin-inline: auto; max-width: 760px; }
  .message__rinen li { font-size: 15px; }
}

.message__lead {
  margin: 6px 0 46px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 42px);
  letter-spacing: .16em; line-height: 1.7;
  color: var(--ink);
}
.message__line {
  margin: 0 0 34px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 2.5; letter-spacing: .1em;
  color: var(--pink-600);
}
.message__line .en {
  font-family: "Times New Roman", serif;
  font-size: 12px; letter-spacing: .32em; color: var(--pink-400);
}
.message__sign {
  margin: 52px 0 0;
  font-size: 13px; letter-spacing: .16em; color: var(--ink-sub);
}

/* ぼんやり現れる本体 */
html.js [data-blur] {
  filter: blur(18px);
  opacity: 0;
  transition: filter 1.5s var(--ease), opacity 1.5s var(--ease);
  will-change: filter, opacity;
}
html.js [data-blur].is-in { filter: blur(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-blur] { filter: none; opacity: 1; transition: none; }
}

@media (max-width: 900px) {
  .message { padding: 108px 0 112px; }
  .message__lead { margin-bottom: 34px; letter-spacing: .1em; }
  .message__line { margin-bottom: 26px; line-height: 2.3; }
}

/* =========================================================
   ★ 円メニュー（八角形。1つの図形を5つに分ける。各区画が独立したリンク）
   たまの病院は1枚画像でクリックできない。押せる形にしたのが改善点
   ========================================================= */
.circles {
  position: relative;
  padding: 150px 0 140px;
  background: rgba(255,242,242,.34);
  scroll-margin-top: 90px;
  overflow: hidden;
  isolation: isolate;
}

/* 墨流し（薄いピンク）。背景に静かに敷く */
.sumi { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sumi svg { width: 100%; height: 100%; display: block; }
.sumi ellipse { fill: none; stroke: var(--pink-300); vector-effect: non-scaling-stroke; }
.sumi__a ellipse { stroke-width: 2.2; opacity: .62; }
.sumi__b ellipse { stroke-width: 1.7; opacity: .44; }

.wheel {
  display: block;
  width: min(100%, 680px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 16px 40px rgba(120, 60, 60, .16));
}

/* 外周の白枠 */
.wheel__frame {
  fill: none;
  stroke: var(--white);
  stroke-width: 30;
  stroke-linejoin: round;
}

.wheel .seg { cursor: pointer; }
.wheel .seg path { stroke: var(--white); stroke-width: 5; stroke-linejoin: round; }
.wheel .seg__tint { opacity: .88; transition: opacity .45s var(--ease); }
.wheel .seg:hover .seg__tint,
.wheel .seg:focus-visible .seg__tint { opacity: .62; }
.wheel .seg:focus-visible { outline: none; }
.wheel .seg:focus-visible .seg__photo { stroke: var(--pink-700); stroke-width: 8; }

.wheel__hole { fill: var(--cream); stroke: var(--white); stroke-width: 5; stroke-linejoin: round; }

.wheel .seg__ja {
  fill: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 25px; letter-spacing: .06em; text-anchor: middle;
  pointer-events: none;
}
.wheel .seg__en {
  fill: var(--pink-600);
  font-family: "Times New Roman", serif;
  font-size: 10px; letter-spacing: .2em; text-anchor: middle;
  pointer-events: none;
}
.wheel .ctr-ja {
  fill: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 23px; letter-spacing: .08em; text-anchor: middle;
}
.wheel .ctr-en { fill: var(--ink-sub); font-size: 13px; letter-spacing: .1em; text-anchor: middle; }

.circles__note { margin: 48px auto 0; max-width: 660px; text-align: center; font-size: 14px; color: var(--ink-sub); }


@media (max-width: 900px) {
  .circles { padding: 100px 0 96px; }
  .wheel { width: min(100%, 480px); }
  .wheel__frame { stroke-width: 24; }
  .wheel .seg__ja { font-size: 27px; }
  .wheel .seg__en { font-size: 10px; }
  .wheel .ctr-ja { font-size: 26px; }
  .wheel .ctr-en { font-size: 14px; }
}
@media (max-width: 480px) {
  .wheel .seg__ja { font-size: 28px; }
  .wheel .seg__en { font-size: 0; }
  .wheel { width: min(100%, 420px); }
  .wheel .ctr-ja { font-size: 27px; }
}

/* =========================================================
   カルーセル（矢印・ドット・スワイプで手動選択）
   ========================================================= */
.carousel { margin: 56px auto 0; max-width: 100%; }
.ctrack {
  display: flex; gap: 20px;
  list-style: none; margin: 0;
  padding: 6px calc((100% - min(100%, 380px)) / 2) 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.ctrack::-webkit-scrollbar { display: none; }
.ctrack:focus-visible { outline: 3px solid var(--pink-500); outline-offset: 4px; border-radius: 18px; }
.ctrack__item { flex: 0 0 min(100%, 380px); scroll-snap-align: center; }

.ccard {
  display: flex; flex-direction: column; height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  /* 形は内側の擬似要素で作る。リンクの当たり判定は矩形のまま残す */
  position: relative;
  background-clip: padding-box;
}
.ccard:hover, .ccard:focus-visible { transform: translateY(-6px); }
.ccard {
  clip-path: polygon(var(--o-tl,22px) 0, calc(100% - var(--o-tr,22px)) 0, 100% var(--o-tr,22px),
                     100% calc(100% - var(--o-br,22px)), calc(100% - var(--o-br,22px)) 100%,
                     var(--o-bl,22px) 100%, 0 calc(100% - var(--o-bl,22px)), 0 var(--o-tl,22px));
}
.ccard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ccard:hover .ccard__media img { transform: scale(1.05); }
.ccard__body { display: block; padding: 22px 24px 26px; }
.ccard__en {
  display: block; font-family: "Times New Roman", serif;
  font-size: 11px; letter-spacing: .26em; color: var(--pink-400); margin-bottom: 8px;
}
.ccard__ttl {
  display: block; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 22px; letter-spacing: .08em; margin-bottom: 12px;
}
.ccard__txt { display: block; font-size: 14px; line-height: 1.9; color: var(--ink-sub); }
.ccard__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--pink-500);
}
.ccard__more::after { content: "→"; transition: transform .3s var(--ease); }
.ccard:hover .ccard__more::after { transform: translateX(5px); }

.carousel__ui { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.carousel__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  color: var(--pink-600); cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.carousel__arrow svg { width: 20px; height: 20px; }
.carousel__arrow:hover { background: var(--pink-50); border-color: var(--pink-300); }
.motion-toggle {
  min-height: 44px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  box-shadow: 0 5px 16px rgba(65,35,35,.12);
}
.motion-toggle:hover { background: var(--white); border-color: var(--pink-300); }
.cdots { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cdots__b {
  position: relative; width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
/* 押せる範囲は44px、見た目の丸は9pxに保つ */
.cdots__b::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pink-200);
  transform: translate(-50%, -50%);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.cdots__b[aria-current="true"]::before {
  background: var(--pink-500);
  transform: translate(-50%, -50%) scale(1.5);
}

@media (max-width: 900px) {
  .carousel { margin-top: 40px; }
  .ctrack { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .ctrack__item { flex: 0 0 82%; }
  .ccard__ttl { font-size: 20px; }
  .carousel__ui { flex-wrap: wrap; gap: 8px 12px; }
  .carousel__arrow[data-dir="-1"] { order: 1; }
  .carousel__arrow[data-dir="1"] { order: 2; }
  .cdots { order: 3; width: 100%; justify-content: center; gap: 0; }
}

/* =========================================================
   この病院の、ふだん
   スマホでは1項目ずつ画面を占め、背景の写真が切り替わる
   ========================================================= */
.everyday { position: relative; padding: 0 0 96px; overflow: hidden; isolation: isolate; }
.everyday .wash { display: none; }
.everyday .sec-head { padding: 96px 0 8px; }

/* display切替だとアニメーションできず急に変わるため、opacityでフェードさせる */
.everyday__bg {
  display: block; position: fixed; inset: 0; z-index: -1;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.everyday.is-photo .everyday__bg {
  opacity: 1; visibility: visible;
  transition: opacity .7s ease, visibility 0s linear 0s;
}
.everyday__photo {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .55s linear, visibility 0s linear .55s;
}
.everyday__photo.is-on { opacity: 1; visibility: visible; transition: opacity .55s linear, visibility 0s linear 0s; }
/* 写真はそのまま貼る。filter を fixed の中で使うと iOS が低解像度で描画して滲むため禁止 */
.everyday__photo img { width: 100%; height: 100%; object-fit: cover; }
.everyday__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(178deg, rgba(58,24,24,.80) 0%, rgba(58,24,24,.62) 42%, rgba(58,24,24,.84) 100%);
}

.everyday__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.ev {
  min-height: 78vh; min-height: calc(var(--app-vh, 1vh) * 78);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: transparent; border: 0;
  padding: 40px 26px 64px;
  text-align: center;
}
.ev__num {
  margin: 0 0 12px;
  font-family: "Times New Roman", serif;
  font-size: clamp(68px, 7vw, 96px);
  line-height: 1.1; color: var(--pink-500);
}
.ev__unit {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: .38em; margin-left: 6px; color: var(--pink-600); letter-spacing: .06em;
}
.ev__text { margin: 0; font-size: 16px; line-height: 1.95; color: var(--ink-sub); max-width: 21em; }
.ev__num, .ev__unit, .ev__text,
.everyday .sec-head h2, .everyday .sec-head .lead, .everyday .sec-head .en {
  transition: color .5s ease, text-shadow .5s ease;
}

/* 背景が写真になる区間は文字を白に返す（PC・スマホ共通） */
.everyday.is-photo .ev__num { color: var(--white); text-shadow: 0 1px 3px rgba(30,10,10,.55); }
.everyday.is-photo .ev__unit { color: rgba(255,255,255,.9); }
.everyday.is-photo .ev__text { color: #fff; text-shadow: 0 1px 3px rgba(30,10,10,.6); }
.everyday.is-photo .sec-head h2 { color: var(--white); text-shadow: 0 1px 3px rgba(30,10,10,.55); }
.everyday.is-photo .sec-head .lead { color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(30,10,10,.6); }
.everyday.is-photo .sec-head .en { color: var(--pink-100); }

@media (max-width: 900px) {
  /* 下端に固定した電話ボタンに文章が潜らないよう、その高さ分を空ける */
  .ev { padding-bottom: 108px; }
}


/* =========================================================
   角を落とした八角形。カードごとに切り取り量を変えて不均一にする
   ========================================================= */
.oct { clip-path: polygon(
  var(--o-tl, 22px) 0, calc(100% - var(--o-tr, 22px)) 0,
  100% var(--o-tr, 22px), 100% calc(100% - var(--o-br, 22px)),
  calc(100% - var(--o-br, 22px)) 100%, var(--o-bl, 22px) 100%,
  0 calc(100% - var(--o-bl, 22px)), 0 var(--o-tl, 22px)); }

.cards .card:nth-child(1) { --o-tl: 34px; --o-tr: 14px; --o-br: 26px; --o-bl: 18px; }
.cards .card:nth-child(2) { --o-tl: 16px; --o-tr: 32px; --o-br: 16px; --o-bl: 28px; }
.cards .card:nth-child(3) { --o-tl: 26px; --o-tr: 18px; --o-br: 34px; --o-bl: 14px; }

.ctrack__item:nth-child(1) .ccard { --o-tl: 30px; --o-tr: 14px; --o-br: 24px; --o-bl: 18px; }
.ctrack__item:nth-child(2) .ccard { --o-tl: 16px; --o-tr: 30px; --o-br: 16px; --o-bl: 26px; }
.ctrack__item:nth-child(3) .ccard { --o-tl: 24px; --o-tr: 16px; --o-br: 30px; --o-bl: 14px; }
.ctrack__item:nth-child(4) .ccard { --o-tl: 18px; --o-tr: 26px; --o-br: 14px; --o-bl: 32px; }
.ctrack__item:nth-child(5) .ccard { --o-tl: 28px; --o-tr: 18px; --o-br: 22px; --o-bl: 16px; }

.ev:nth-child(1) { --o-tl: 28px; --o-tr: 14px; --o-br: 22px; --o-bl: 16px; }
.ev:nth-child(2) { --o-tl: 14px; --o-tr: 28px; --o-br: 16px; --o-bl: 24px; }
.ev:nth-child(3) { --o-tl: 22px; --o-tr: 16px; --o-br: 28px; --o-bl: 14px; }
.ev:nth-child(4) { --o-tl: 16px; --o-tr: 24px; --o-br: 14px; --o-bl: 28px; }

/* CTAボタンは整った横長の八角形 */
.btn, .fab-tel, .carousel__arrow, .wheel-list a, .notice-list, .hours, .table-scroll {
  border-radius: 0;
}
.btn {
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px),
                     calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}
.fab-tel {
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
                     calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
.carousel__arrow { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
/* 表は横スクロールするので clip-path を掛けない（iOSで左端が切れる） */
.notice-list {
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
                     calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}

/* =========================================================
   事実の見せ方
   A: 主役をひとつだけ立てる（そのページで最も強い事実）
   B: 静かな事実の一覧（病院の掲示物の佇まい）
   ========================================================= */
.lead-fact { margin: 0 0 44px; }
.lead-fact__head {
  margin: 0 0 22px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.62; letter-spacing: .06em;
  color: var(--ink);
}
.lead-fact__head b {
  font-weight: 400; color: var(--pink-500);
  font-size: 1.42em; letter-spacing: .02em;
  font-family: "Times New Roman", serif;
}
.lead-fact p { margin: 0 0 16px; color: var(--ink-sub); line-height: 2.05; font-size: 15px; }
.lead-fact p:last-child { margin-bottom: 0; }

.facts {
  margin: 34px 0 40px;
  display: grid; grid-template-columns: auto 1fr; gap: 0 34px;
}
.facts dt {
  padding: 15px 0; font-size: 14px; color: var(--ink-sub);
  letter-spacing: .08em; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.facts dd {
  margin: 0; padding: 15px 0; font-size: 16px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.facts dd b {
  font-family: "Times New Roman", serif; font-size: 1.5em;
  color: var(--pink-500); font-weight: 400; margin-right: 3px; letter-spacing: .02em;
}

@media (max-width: 600px) {
  /* 狭い画面では項目名を上に、値を下に積む */
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dt {
    padding: 16px 0 2px; border-bottom: 0;
    font-size: 12.5px; letter-spacing: .12em;
  }
  .facts dd { padding: 0 0 16px; font-size: 16px; }
  .lead-fact { margin-bottom: 34px; }
  .lead-fact__head { font-size: 21px; line-height: 1.7; }
}


/* =========================================================
   八角形の縁
   clip-path は断面ごと切り落とすので border が消える。
   切った斜めの辺にも線を回すため、四方向の drop-shadow で輪郭を作る。
   ========================================================= */
.oct-edge {
  filter:
    drop-shadow(1px 0 0 var(--line))
    drop-shadow(-1px 0 0 var(--line))
    drop-shadow(0 1px 0 var(--line))
    drop-shadow(0 -1px 0 var(--line));
}
.oct-edge--strong {
  filter:
    drop-shadow(1.5px 0 0 var(--pink-200))
    drop-shadow(-1.5px 0 0 var(--pink-200))
    drop-shadow(0 1.5px 0 var(--pink-200))
    drop-shadow(0 -1.5px 0 var(--pink-200));
}

/* clip-path を持つ部品は border をやめて、輪郭を drop-shadow に任せる */
.card, .ccard, .notice-list, .callout {
  border: 0;
}
.card, .ccard {
  filter:
    drop-shadow(1px 0 0 var(--line))
    drop-shadow(-1px 0 0 var(--line))
    drop-shadow(0 1px 0 var(--line))
    drop-shadow(0 -1px 0 var(--line));
  transition: transform .4s var(--ease), filter .4s var(--ease);
}
.card:hover, .ccard:hover, .ccard:focus-visible {
  filter:
    drop-shadow(1px 0 0 var(--pink-300))
    drop-shadow(-1px 0 0 var(--pink-300))
    drop-shadow(0 1px 0 var(--pink-300))
    drop-shadow(0 -1px 0 var(--pink-300))
    drop-shadow(0 16px 34px rgba(120, 60, 60, .18));
}
.notice-list, .callout {
  filter:
    drop-shadow(1px 0 0 var(--line))
    drop-shadow(-1px 0 0 var(--line))
    drop-shadow(0 1px 0 var(--line))
    drop-shadow(0 -1px 0 var(--line));
}
/* 表は素直な枠で囲む。スクロールを壊さないことを優先する */
.table-scroll { border: 1px solid var(--line); }
/* ボタンは面で見せるので輪郭は不要。矢印だけ縁を回す */
.carousel__arrow {
  border: 0;
  filter:
    drop-shadow(1px 0 0 var(--line))
    drop-shadow(-1px 0 0 var(--line))
    drop-shadow(0 1px 0 var(--line))
    drop-shadow(0 -1px 0 var(--line));
}

/* =========================================================
   汎用セクション
   ========================================================= */
.section { padding: 104px 0; scroll-margin-top: 90px; }
.section--tint { background: rgba(255,242,242,.42); }
.section--green { background: rgba(241,255,239,.42); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card {
  background: var(--white); overflow: hidden;
  clip-path: polygon(var(--o-tl,22px) 0, calc(100% - var(--o-tr,22px)) 0, 100% var(--o-tr,22px), 100% calc(100% - var(--o-br,22px)), calc(100% - var(--o-br,22px)) 100%, var(--o-bl,22px) 100%, 0 calc(100% - var(--o-bl,22px)), 0 var(--o-tl,22px));
  border: 1px solid var(--line);
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); }
.card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card__body { padding: 24px 24px 28px; flex: 1; }
.card__body h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: .06em; }
.card__body p { margin: 0; font-size: 14px; color: var(--ink-sub); line-height: 1.9; }

/* 表は狭い画面で横スクロールさせる（ページ全体を横に伸ばさない） */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: 12px;
}
.table-scroll > table { min-width: 0; width: 100%; }

/* 診療時間表 */
.hours { width: 100%; border-collapse: collapse; background: var(--white); }
/* 表の見出しは横スクロール領域の外に置く。中に入れると左端が切れる */
.table-title {
  margin: 26px 0 12px;
  font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: .06em;
}
.hours th, .hours td {
  border: 1px solid var(--line); padding: 14px 10px; text-align: center; font-size: 15px;
}
.hours thead th { background: var(--pink-100); color: var(--ink); font-weight: 600; }
.hours tbody th { background: var(--pink-50); font-weight: 600; white-space: nowrap; }
.hours .mark { color: var(--pink-500); font-weight: 700; }
.hours .none { color: var(--ink-sub); }

.notice-list { list-style: none; margin: 0; padding: 0; background: var(--white); border-radius: 14px; border: 1px solid var(--line); }
.notice-list li + li { border-top: 1px solid var(--line); }
.notice-list a {
  display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap;
  padding: 20px 26px; text-decoration: none; color: var(--ink);
  transition: background .25s var(--ease);
}
.notice-list a:hover { background: var(--pink-50); }
.notice-list time { font-family: "Times New Roman", serif; font-size: 14px; color: var(--pink-400); letter-spacing: .06em; }

.btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 15px 40px; border-radius: 40px;
  background: var(--pink-500); color: var(--white);
  text-decoration: none; font-weight: 600; letter-spacing: .08em;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--pink-600); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--pink-500); border: 2px solid var(--pink-500); }
.btn--ghost:hover { background: var(--pink-500); color: var(--white); }
.center { text-align: center; }
/* ボタンの電話番号は必ず2行目に置く（折り返し待ちにしない） */
.btn__tel {
  display: block; width: 100%; text-align: center;
  font-family: "Times New Roman", serif;
  font-size: 1.28em; letter-spacing: .04em; line-height: 1.25;
}
.fab-tel .btn__tel { font-size: 1.2em; }
.fab-tel { line-height: 1.3; font-size: 14px; }

/* =========================================================
   下層ページのヘッダー帯
   ========================================================= */
.page-hero {
  position: relative; margin-top: 0; padding: calc(var(--header-h) + 90px) 0 96px;
  background: linear-gradient(135deg, var(--pink-50) 0%, var(--white) 55%, var(--lav-50) 100%);
  text-align: center; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 30%, rgba(255,189,189,.5), transparent 55%),
              radial-gradient(circle at 78% 68%, rgba(196,189,255,.35), transparent 52%);
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 {
  margin: 0 0 18px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: .14em;
}
.page-hero .en {
  display: block; font-family: "Times New Roman", serif;
  font-size: 12px; letter-spacing: .3em; color: var(--pink-400); margin-bottom: 14px;
}
.page-hero .lead { margin: 0 auto; max-width: 680px; font-size: 15px; color: var(--ink-sub); }


/* ---------- 下層ページのヘッダーに写真を敷く（視覚的にする） ---------- */
.page-hero.has-photo { background: var(--pink-700); }
.page-hero.has-photo .page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero.has-photo .page-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  animation: pageHeroZoom 14s var(--ease) forwards;
}
@keyframes pageHeroZoom { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .page-hero.has-photo .page-hero__bg img { animation: none; transform: none; }
}
.page-hero.has-photo::after {
  background: linear-gradient(180deg, rgba(60,22,22,.58) 0%, rgba(60,22,22,.42) 45%, rgba(60,22,22,.66) 100%);
  z-index: 1;
}
.page-hero.has-photo h1 { color: var(--white); text-shadow: 0 3px 22px rgba(40,14,14,.55); }
.page-hero.has-photo .en { color: var(--pink-100); }
.page-hero.has-photo .lead { color: rgba(255,255,255,.94); text-shadow: 0 2px 14px rgba(40,14,14,.6); }
.page-hero.has-photo > *:not(.page-hero__bg) { position: relative; z-index: 2; }

.breadcrumb { padding: 18px 0; font-size: 13px; color: var(--ink-sub); background: var(--white); border-bottom: 1px solid var(--line); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.breadcrumb li::after { content: "／"; margin-left: 10px; color: var(--line); }
.breadcrumb li:last-child::after { content: none; }
.breadcrumb a { color: var(--ink-sub); }

.prose { max-width: 800px; margin-inline: auto; }
.prose h2 {
  margin: 68px 0 24px;
  font-size: clamp(21px, 2.5vw, 28px); font-weight: 600; letter-spacing: .09em;
  color: var(--ink);
}
.prose h3 { margin: 40px 0 14px; font-size: 18px; font-weight: 600; color: var(--pink-600); }
.prose p { margin: 0 0 20px; }
.prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: 10px; }
.figure { margin: 32px 0; }
.figure img { border-radius: 14px; width: 100%; }
.figure figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-sub); text-align: center; }


.callout {
  background: var(--pink-50);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  padding: 30px 34px; margin: 36px 0;
}
.callout h3 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

.faq { border-top: 1px solid var(--line); }
.faq__h { margin: 0; font-size: inherit; font-weight: inherit; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 22px 6px; background: none; border: 0; cursor: pointer;
  font-size: 17px; font-weight: 600; text-align: left; color: var(--ink); font-family: inherit;
}
.faq__q::after { content: "＋"; color: var(--pink-400); font-size: 20px; flex: 0 0 auto; }
.faq__q[aria-expanded="true"]::after { content: "－"; }
.faq__a { padding: 0 6px 24px; margin: 0; color: var(--ink-sub); }
.faq__a[hidden] { display: none; }

/* =========================================================
   フッター
   ========================================================= */
.site-footer { background: var(--pink-700); color: rgba(255,255,255,.86); padding: 76px 0 32px; margin-top: 0; }
.site-footer a { color: rgba(255,255,255,.86); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 46px; }
.footer-logo img { width: 130px; background: var(--white); border-radius: 12px; padding: 12px; }
.footer-info { margin-top: 22px; font-size: 14px; line-height: 2; font-style: normal; }
.footer-info .tel { font-size: 26px; font-family: "Times New Roman", serif; letter-spacing: .04em; }
.footer-info .tel a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer h2 { font-size: 14px; letter-spacing: .16em; margin: 0 0 16px; color: var(--pink-100); }
.site-footer ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.site-footer li { margin-bottom: 11px; }
.copyright { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; text-align: center; }

/* 固定の電話ボタン（スマホ）。小ぶりな八角形。fixed の中なので filter は使わない */
.fab-tel {
  display: none;
  position: fixed; left: 50%; bottom: 14px; z-index: 90;
  transform: translateX(-50%);
  width: max-content; min-width: 230px;
  padding: 11px 30px;
  background: var(--pink-500); color: var(--white);
  text-align: center; text-decoration: none; font-weight: 700; letter-spacing: .08em;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
                     calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
/* 下へ読み進めている間は引っ込める。本文と表を覆わないため */
.fab-tel.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1080px) {
  .header-top .tel a { font-size: 21px; }
  /* 10項目を1行に収める。900pxからはドロワーへ切り替わる */
  .gnav { gap: 14px; padding: 16px 20px 14px; }
  .gnav a { font-size: 13.5px; letter-spacing: .03em; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .header-right { display: none; }
  .nav-toggle { display: block; }
  .site-header .logo-box,
  .site-header.is-scrolled .logo-box {
    padding: 10px 14px 12px; border-radius: 0 0 14px 0;
    transform: none; transition: none;
  }
  .site-header .logo-box img,
  .site-header.is-scrolled .logo-box img { width: 76px; transition: none; }

  .hero { height: 92vh; height: calc(var(--app-vh, 1vh) * 92); padding: 18px; }
  .hero__frame { padding: 9px; clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px); }
  .hero__inner { clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px); }
  .hero__copy { bottom: 14%; width: calc(100% - 40px); }
  /* 「荒川と江戸川の間、」が折り返して「間、」だけが次行に落ちないよう、
     画面幅に追従させる。3行の構成はPCと同じに保つ */
  .hero__copy .ttl { font-size: clamp(22px, 7.2vw, 34px); }
  .wash { animation: none; will-change: auto; }
        
  .circles { padding: 80px 0 90px; }
  .circles__field { aspect-ratio: 1 / 1.28; }
  .circle--endoscopy  { width: 52%; left: 24%; top: 0; }
  .circle--outpatient { width: 48%; left: 50%; top: 20%; }
  .circle--checkup    { width: 47%; left: 42%; top: 48%; }
  .circle--partner    { width: 50%; left: 10%; top: 64%; }
  .circle--admission  { width: 48%; left: 2%;  top: 28%; }

  .cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .fab-tel { display: block; }
  .site-footer { padding-bottom: 112px; }
  main { padding-bottom: 24px; }
  .section:last-of-type, .everyday { padding-bottom: 108px; }
  .section { padding: 72px 0; }
}

@media (max-width: 900px) {
  /* 左上に居座るロゴの下に文字が潜らないよう、見出しと表に逃げを持たせる */
  .prose h2, .prose h3 { padding-right: 4px; }
  .hours caption, .table-scroll { margin-top: 6px; }
  .sec-head { padding-top: 8px; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .wrap { width: calc(100% - 32px); }
  .hero__copy .ttl { letter-spacing: .05em; }
}

/* 320px前後の狭い機種。「荒川と江戸川の間、」の「間、」だけが
   次の行に落ちるのを防ぐため、ここだけ一段小さくする */
@media (max-width: 360px) {
  .hero__copy .ttl { font-size: clamp(19px, 6.6vw, 26px); letter-spacing: .04em; }
}


/* 印刷 */
@media print {
  body { background: #fff; }
}

/* このページの内容について（監修と最終確認日） */
.supervised {
  margin: 72px auto 0;
  padding: 26px 28px;
  background: var(--white);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
                     calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
.supervised__label {
  margin: 0 0 8px;
  font-size: 12px; letter-spacing: .2em; color: var(--pink-400); font-weight: 600;
}
.supervised__body {
  margin: 0; font-size: 14px; line-height: 1.95; color: var(--ink-sub);
}
@media (max-width: 900px) {
  .supervised { margin-top: 56px; padding: 22px 20px; }
}

/* 狭い画面では表の文字を折り返す。折り返せないと料金表が画面からはみ出す */
@media (max-width: 900px) {
  .hours th, .hours td {
    white-space: normal;
    padding: 12px 8px;
    font-size: 14px;
    line-height: 1.6;
  }
  .hours tbody th { white-space: normal; }
}

/* トップの概要セクションの写真 */
.about-photo { margin: 0 0 36px; }
.about-photo img {
  width: 100%; height: auto; display: block;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px),
                     calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
}

/* 週の受付時間表（●形式）。8列を390pxに収める */
.hours--week th, .hours--week td { padding: 12px 5px; font-size: 14px; }
.hours--week tbody th { white-space: normal; font-size: 13px; }
@media (min-width: 901px) {
  .hours--week th, .hours--week td { padding: 14px 10px; font-size: 15px; }
  .hours--week tbody th { font-size: 15px; }
}