@charset "UTF-8";
/* =========================================================
   やさしい歯科医院（デモサイト） スタイルシート
   -----------------------------------------------------
   構成
     1. カラー・変数の設定
     2. 全体のリセットと基本設定
     3. 共通パーツ（ボタン・見出し・レイアウト）
     4. ヘッダー / ナビゲーション
     5. 各セクション
     6. フッター / 固定バー
     7. スマホ・タブレット対応
   ========================================================= */


/* =========================================================
   1. カラー・変数の設定
   ここの色を変えるとサイト全体の色が変わります
   ========================================================= */
:root {
  /* --- 基本の色（やわらかい薄ピンク） --- */
  --pink-50:   #fff7f9;   /* いちばん薄いピンク（ページ背景） */
  --pink-100:  #fdeef2;   /* 薄ピンク（セクション背景） */
  --pink-200:  #f9dbe3;   /* 枠線・区切り線 */
  --pink-300:  #f3bfcd;   /* 装飾 */
  --pink-400:  #eb9db1;   /* アクセント */
  --pink-500:  #e0819a;   /* メインのピンク（ボタンなど） */
  --pink-600:  #c96a83;   /* 濃いピンク（ホバー時） */

  /* --- 文字の色 --- */
  --text:      #56474b;   /* 本文（黒よりやわらかい茶グレー） */
  --text-sub:  #8a7a7f;   /* 補足文 */
  --white:     #ffffff;

  /* --- 差し色 --- */
  --mint:      #8fcfc4;   /* 補助アクセント（チェックマークなど） */
  --hero-title: #7a4f48;  /* トップの見出しの色（あたたかい茶色） */
  --cream:     #fffdfa;   /* カードの背景 */

  /* --- 影 --- */
  --shadow-sm: 0 2px 10px rgba(224,129,154,.10);
  --shadow-md: 0 6px 24px rgba(224,129,154,.13);
  --shadow-lg: 0 14px 40px rgba(224,129,154,.16);

  /* --- 角丸 --- */
  --radius:    18px;
  --radius-lg: 28px;

  /* --- 書体 --- */
  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body:  "Noto Sans JP", "Hiragino Sans", sans-serif;

  /* --- ヘッダーの高さ（固定ヘッダー分の余白計算に使用） --- */
  --header-h: 78px;
}


/* =========================================================
   2. 全体のリセットと基本設定
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 固定ヘッダーに隠れないよう、アンカー移動時に余白をとる */
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  color: var(--text);
  background: var(--pink-50);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; transition: .25s; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
iframe { border: 0; display: block; }

/* 画面には見せず、読み上げソフトにだけ伝えるテキスト */
.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;
}

/* パソコンだけ / スマホだけ表示 */
.pc-only { display: inline; }
.sp-only { display: none; }


/* =========================================================
   3. 共通パーツ
   ========================================================= */

/* --- 中身の横幅をそろえる箱 --- */
.container {
  width: min(100% - 48px, 1120px);
  margin-inline: auto;
}
.container--narrow { width: min(100% - 48px, 800px); }

/* --- セクション見出し --- */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head--left { text-align: left; margin-bottom: 28px; }

.section-head__en {
  font-family: var(--font-round);
  font-size: .8rem;
  letter-spacing: .22em;
  color: var(--pink-400);
  margin-bottom: 10px;
}
.section-head__ja {
  font-family: var(--font-round);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}
/* 見出しの下のライン
   見出しの文字幅に合わせて伸びるよう、見出し自体を
   文字の幅までしか広がらない箱（inline-block）にしている */
.section-head:not(.section-head--left) .section-head__ja {
  display: inline-block;
  max-width: 100%;
}
.section-head:not(.section-head--left) .section-head__ja::after {
  content: "";
  display: block;
  width: 100%; height: 4px;
  margin: 18px 0 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pink-300), var(--pink-500));
}
.section-head__text {
  margin-top: 20px;
  color: var(--text-sub);
  font-size: .95rem;
  line-height: 2;
}

/* --- ボタン --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-round);
  font-weight: 700;
  line-height: 1.4;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: .92rem;
  white-space: nowrap;
  transition: transform .25s, box-shadow .25s, background .25s, color .25s;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* 予約ボタン（塗り） */
.btn--reserve {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--reserve:hover {
  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 電話ボタン（白＋枠） */
.btn--tel {
  background: var(--white);
  color: var(--pink-600);
  border: 2px solid var(--pink-200);
}
.btn--tel:hover { border-color: var(--pink-400); transform: translateY(-2px); }

/* 枠線ボタン */
.btn--outline {
  background: var(--white);
  color: var(--pink-600);
  border: 2px solid var(--pink-300);
}
.btn--outline:hover {
  background: var(--pink-100);
  border-color: var(--pink-500);
  transform: translateY(-2px);
}

/* 大きめボタン */
.btn--lg { padding: 16px 34px; font-size: 1rem; }

/* 特大ボタン（予約セクション用・2行表示） */
.btn--xl {
  flex-direction: column;
  gap: 4px;
  padding: 22px 30px;
  font-size: 1.15rem;
  min-width: 280px;
  border-radius: var(--radius-lg);
}
.btn--xl svg { width: 1.5rem; height: 1.5rem; }
.btn--xl small {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  opacity: .85;
  letter-spacing: .02em;
}
.btn--map { margin-top: 24px; }

/* --- チェックリスト --- */
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: .95rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--mint);
  /* チェックマークを背景画像として描く */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- スクロールで浮かび上がるアニメーション --- */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-in.is-visible { opacity: 1; transform: none; }

/* 動きが苦手な方の設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .hero__bg img { transition: none; }
  .hero__title .char { opacity: 1; transform: none; transition: none; }
}


/* =========================================================
   4. デモお知らせバー / ヘッダー
   ========================================================= */

/* --- デモ表記バー --- */
.demo-bar {
  background: #56474b;
  color: #fff;
  font-size: .74rem;
  line-height: 1.6;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: .02em;
}

/* --- ヘッダー --- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 251, 252, .97);
  border-bottom: 1px solid var(--pink-200);
  transition: box-shadow .3s;
}
/* すりガラス効果はパソコン表示のときだけ。
   ※スマホ幅でも付けると、中のスライドメニュー（position:fixed）が
     画面全体ではなくヘッダーの中に閉じ込められてしまうため */
@media (min-width: 901px) {
  .header { backdrop-filter: blur(12px); }
}
.header.is-scrolled { box-shadow: 0 2px 18px rgba(224,129,154,.12); }

.header__inner {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* --- ロゴ --- */
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-300), var(--pink-500));
  color: var(--white);
}
.logo__mark svg { width: 24px; height: 24px; }
.logo__text strong {
  display: block;
  font-family: var(--font-round);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
}
.logo__text small {
  display: block;
  font-size: .58rem;
  letter-spacing: .16em;
  color: var(--text-sub);
}

/* --- パソコン用ナビ --- */
.gnav { margin-left: auto; }
.gnav__list { display: flex; gap: 22px; }
.gnav__list a {
  position: relative;
  font-family: var(--font-round);
  font-size: .88rem;
  font-weight: 500;
  padding-bottom: 4px;
}
.gnav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--pink-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.gnav__list a:hover { color: var(--pink-600); }
.gnav__list a:hover::after { transform: scaleX(1); }

/* --- ヘッダー右のボタン --- */
.header__cta { display: flex; gap: 10px; flex-shrink: 0; }
.header__cta .btn { padding: 10px 18px; font-size: .84rem; }

/* スライドメニュー内のボタン（パソコン表示では隠す） */
.gnav__cta { display: none; }

/* --- スマホ用メニューボタン（通常は非表示） --- */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 24px; height: 2px;
  border-radius: 2px;
  background: var(--pink-600);
  transition: .3s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* =========================================================
   5-1. ヒーロー（ファーストビュー）
   ========================================================= */
.hero {
  position: relative;
  min-height: min(88vh, 880px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }

/* 背景写真は3枚を重ねて置き、表示中の1枚だけを見せる。
   .is-active が付いた写真がふわっと現れる仕組み */
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero__bg img.is-active { opacity: 1; }
/* 写真の上にピンクのベールをかけて文字を読みやすくする */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,247,249,.38) 0%,
    rgba(255,247,249,.34) 40%,
    rgba(253,238,242,.32) 70%,
    rgba(249,219,227,.30) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100% - 80px, 1560px);   /* ヒーローだけ広め。右下のかたまりを外へ寄せるため */
  margin-inline: auto;
  padding: 72px 0;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hero__title-a,
.hero__title-b { display: block; }

/* 説明文・ボタン・バッジのまとまりは、画面の右下へ */
.hero__lower {
  margin-top: auto;            /* 下へ寄せる */
  align-self: flex-end;        /* 右へ寄せる */
  max-width: min(100%, 760px);
}

/* 見出しを1文字ずつ表示する
   （js/main.js が1文字ずつ span で包み、順番に is-in を付ける） */
.hero__title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.3,1);
}
.hero__title .char.is-in { opacity: 1; transform: none; }

/* ※ 現在は未使用。トップに小さなタグを出したくなったら
      index.html の <h1 class="hero__title"> の直前に
      <p class="hero__lead">会津若松市の歯医者さん</p> を戻すと使えます */
.hero__lead {
  display: inline-block;
  align-self: flex-start;    /* 横いっぱいに伸びないようにする */
  font-family: var(--font-round);
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--pink-600);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.hero__title {
  /* 写真の上でも読めるよう、文字のまわりに白いにじみを出す
     （ベールを薄くしたぶんをここで補っている） */
  text-shadow:
    0 0 16px rgba(255,255,255,.95),
    0 0 34px rgba(255,255,255,.85),
    0 0 60px rgba(255,255,255,.7);
  font-family: var(--font-round);
  font-size: clamp(1.85rem, 5vw, 5.2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--hero-title);
  letter-spacing: .03em;
  text-align: center;          /* 画面の中央にそろえる */
  margin-top: clamp(24px, 7vh, 90px);
  margin-bottom: 0;
}

.hero__text {
  /* 文字のまわりの白を濃いめに重ねて、写真の上でもはっきり読めるようにする。
     数字を減らすと白が薄く、増やすと濃くなります */
  position: relative;
  text-shadow:
    0 0 8px  rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,.95);
  font-size: clamp(1rem, 1.15vw, 1.3rem);
  line-height: 2.05;
  color: var(--text);        /* 写真の上なので本文より濃い色にする */
  margin-bottom: 40px;
}
/* 白い背景は「行ごと」に敷く。
   1本の四角で覆うと、短い行の右側に白があまってしまうため。
   ・白の濃さ  … rgba(...,.86) の数字（1に近いほど濃い）
   ・ぼかし具合 … blur(12px) の数字（大きいほどふんわり）
   ・広がり    … inset の数字（マイナスを大きくすると外へ広がる） */
.hero__text span {
  position: relative;
  display: table;            /* 行の文字数ぶんだけの幅になる */
  max-width: 100%;
}
.hero__text span::before {
  content: "";
  position: absolute;
  inset: -1px -14px;
  z-index: -1;
  border-radius: 20px;
  background: rgba(255, 252, 253, .86);
  filter: blur(12px);
}

.hero__btns { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.hero__btns .btn {
  padding: clamp(16px, 1.3vw, 22px) clamp(34px, 3vw, 48px);
  font-size: clamp(1rem, 1.05vw, 1.18rem);
}

.hero__badges { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__badges li {
  font-family: var(--font-round);
  font-size: clamp(.8rem, .8vw, .95rem);
  font-weight: 500;
  color: var(--pink-600);
  background: rgba(255,255,255,.85);
  border: 1px solid var(--pink-200);
  border-radius: 999px;
  padding: 5px 14px;
}


/* =========================================================
   5-2. お知らせ（News）
   ========================================================= */
.news { padding: 56px 0; }
.news__inner {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 34px 40px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  align-items: start;
}
.news__label { font-family: var(--font-round); }
.news__label span {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
}
.news__label em {
  display: block;
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--pink-400);
}
.news__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--pink-200);
  font-size: .92rem;
}
.news__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.news__list time {
  font-family: var(--font-round);
  color: var(--text-sub);
  font-size: .85rem;
  letter-spacing: .04em;
}
.news__tag {
  font-size: .7rem;
  font-family: var(--font-round);
  color: var(--pink-600);
  background: var(--pink-100);
  border-radius: 999px;
  padding: 2px 12px;
}
.news__tag--new { background: var(--pink-500); color: var(--white); }
.news__list p { flex: 1 1 260px; }


/* =========================================================
   5-3. 診療時間表
   ========================================================= */
.hours { padding: 40px 0 90px; }

.hours__table-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 14px;
  overflow-x: auto;           /* 横に狭い画面でも表がはみ出さないように */
  -webkit-overflow-scrolling: touch;
}
.hours__table { min-width: 620px; }
.hours__table th,
.hours__table td {
  text-align: center;
  padding: 16px 8px;
  font-family: var(--font-round);
  border-bottom: 1px solid var(--pink-100);
}
.hours__table thead th {
  font-size: .95rem;
  color: var(--white);
  background: var(--pink-400);
  border-bottom: 0;
}
.hours__table thead th:first-child {
  border-radius: 14px 0 0 0;
  font-size: .85rem;
}
.hours__table thead th:last-child { border-radius: 0 14px 0 0; }
.hours__table thead th.is-sun { background: var(--pink-500); }

.hours__table tbody th {
  font-size: .95rem;
  font-weight: 500;
  background: var(--pink-50);
  white-space: nowrap;
}
.hours__table tbody td {
  font-size: 1.3rem;
  color: var(--pink-500);
  font-weight: 700;
}
.hours__table tbody tr:last-child th,
.hours__table tbody tr:last-child td { border-bottom: 0; }
.hours__table .is-off  { color: var(--pink-200); }
.hours__table .is-half { color: var(--pink-400); }

.hours__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin-top: 24px;
  font-size: .87rem;
  color: var(--text-sub);
}
.hours__note li { display: flex; align-items: center; gap: 8px; }
.hours__note span {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  font-size: .7rem;
  border-radius: 50%;
  background: var(--pink-100);
  color: var(--pink-600);
  font-family: var(--font-round);
}

.hours__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}


/* =========================================================
   5-4. ごあいさつ
   ========================================================= */
.greeting {
  padding: 90px 0;
  background: var(--pink-100);
}
.greeting__inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 60px;
  align-items: start;
}
.greeting__photo { position: relative; }
.greeting__photo img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: center 22%;
}
.greeting__caption {
  position: absolute;
  left: 50%; bottom: -20px;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--pink-600);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  padding: 8px 28px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.greeting__catch {
  font-family: var(--font-round);
  font-size: clamp(1.3rem, 3.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--pink-600);
  margin-bottom: 24px;
}
.greeting__body p { margin-bottom: 18px; font-size: .95rem; }
.greeting__body strong { color: var(--pink-600); }

/* 経歴リスト */
.profile {
  margin-top: 32px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
}
.profile > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--pink-200);
  font-size: .9rem;
}
.profile > div:last-child { border-bottom: 0; padding-bottom: 0; }
.profile > div:first-child { padding-top: 0; }
.profile dt {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--pink-600);
}
.profile dd { margin: 0; line-height: 1.9; }


/* =========================================================
   5-5. 3つの特色
   ========================================================= */
.features { padding: 100px 0; }
.features__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--pink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;               /* 写真の角をカードの丸みに合わせる */
  text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* カード上部の写真 */
.feature-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--pink-100);
}
.feature-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 写真の左上に乗せる番号バッジ */
.feature-card__num {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--font-round);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--white);
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  border-radius: 999px;
  padding: 4px 16px;
  box-shadow: var(--shadow-sm);
}

/* 写真より下の文章エリア */
.feature-card__body { padding: 0 30px 34px; }

/* 丸アイコンは写真の下辺に重ねる */
.feature-card__icon {
  position: relative;
  width: 68px; height: 68px;
  margin: -34px auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 4px solid var(--cream);
  color: var(--pink-500);
  box-shadow: var(--shadow-sm);
}
.feature-card__icon svg { width: 34px; height: 34px; }
.feature-card h3 {
  font-family: var(--font-round);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.feature-card p { font-size: .89rem; line-height: 2; color: var(--text-sub); text-align: left; }


/* =========================================================
   5-6. どなたでも安心して通える医院
   ========================================================= */
.barrier { padding: 90px 0; background: var(--pink-100); }
.barrier__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.barrier__photo img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.barrier__body p { font-size: .95rem; margin-bottom: 24px; }
.barrier__body .check-list li { background: var(--white); border-radius: 12px; padding: 10px 14px 10px 40px; }
.barrier__body .check-list li::before { left: 12px; top: .78em; }


/* =========================================================
   5-7. 設備・衛生管理
   ========================================================= */
.equipment { padding: 100px 0; }
.equip-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.equip-card {
  display: grid;
  grid-template-columns: 190px 1fr;   /* 左に写真、右に文章 */
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;                   /* 写真の角をカードの丸みに合わせる */
  border-left: 5px solid var(--pink-300);
  box-shadow: var(--shadow-sm);
  transition: transform .3s, border-color .3s;
}
.equip-card:hover { transform: translateX(4px); border-left-color: var(--pink-500); }

/* カード左側の写真 */
.equip-card__photo { background: var(--pink-100); }
.equip-card__photo img {
  width: 100%; height: 100%;
  min-height: 180px;
  object-fit: cover;
}
.equip-card__body { padding: 26px 28px; }
.equip-card h3 {
  font-family: var(--font-round);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
}
/* 「診断」「衛生」のラベルは見出しの上に置いて、
   カードごとの高さがそろうようにしている */
.equip-card__tag {
  display: block;
  width: fit-content;
  margin-bottom: 10px;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--white);
  background: var(--pink-400);
  border-radius: 999px;
  padding: 3px 12px;
}
.equip-card p { font-size: .88rem; line-height: 2; color: var(--text-sub); }


/* =========================================================
   5-8. 予防歯科
   ========================================================= */
.prevention {
  padding: 100px 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(243,191,205,.35) 0, transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(143,207,196,.22) 0, transparent 42%),
    var(--pink-50);
}
.prevention__inner { text-align: center; }
.prevention__lead {
  font-family: var(--font-round);
  font-size: clamp(1.1rem, 2.8vw, 1.4rem);
  font-weight: 500;
  line-height: 2;
  color: var(--pink-600);
  margin-bottom: 22px;
}
.prevention__text {
  max-width: 720px;
  margin: 0 auto 50px;
  font-size: .95rem;
  text-align: left;
}
.prevention__text strong {
  color: var(--pink-600);
  background: linear-gradient(transparent 62%, var(--pink-200) 62%);
  padding: 0 2px;
}
.prevention__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.prevention__points li {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;              /* 写真の角をカードの丸みに合わせる */
  box-shadow: var(--shadow-sm);
}

/* カード上部の写真 */
.prevention__photo {
  aspect-ratio: 16 / 10;
  background: var(--pink-100);
}
.prevention__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 写真より下の文章エリア */
.prevention__body { padding: 0 26px 30px; }

/* 番号の丸は写真の下辺に重ねる */
.prevention__no {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin: -26px auto 14px;
  border-radius: 50%;
  background: var(--pink-100);
  border: 4px solid var(--white);
  color: var(--pink-500);
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
}
.prevention__points strong {
  display: block;
  font-family: var(--font-round);
  font-size: 1.02rem;
  margin-bottom: 10px;
}
.prevention__points p { font-size: .86rem; line-height: 1.95; color: var(--text-sub); }


/* =========================================================
   5-9. 診療案内メニュー
   ========================================================= */
.menu { padding: 100px 0; background: var(--pink-100); }
/* 横に --cols 個ずつ並べる。あまった分は中央に寄る */
.menu__list {
  --cols: 5;
  --gap: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.menu__list > li {
  width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

/* --- カプセル型のボタン --- */
.menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  aspect-ratio: 1 / 1.22;      /* たて長のカプセル形 */
  padding: 24px 10px;          /* 「予防歯科・クリーニング」が1行に収まる幅を確保 */
  background: var(--white);
  border-radius: 999px;        /* 上下が丸いカプセルになる */
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .3s, box-shadow .3s, background .3s;
}
.menu-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
/* 選択中のボタン
   （イラストが線画なので、塗りつぶさず薄ピンク＋枠で示す） */
.menu-card.is-active {
  background: var(--pink-100);
  box-shadow: 0 0 0 3px var(--pink-400), var(--shadow-md);
}
.menu-card.is-active .menu-card__title { color: var(--pink-600); }

/* アイコンはイラスト画像。白い背景を「乗算」で敷くと、
   カードの色が変わっても四角い白地が出ない */
.menu-card__icon img {
  width: 76px; height: 76px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.menu-card__title {
  font-family: var(--font-round);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
  transition: color .3s;
}
/* 説明文は画面には出さず、クリック時に下のエリアへ表示する */
.menu-card__desc { display: none; }

/* --- クリックで開く説明エリア --- */
.menu__detail {
  position: relative;
  margin-top: 28px;
  padding: 34px 40px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-left: 5px solid var(--pink-400);
}
.menu__detail[hidden] { display: none; }
.menu__detail-title {
  font-family: var(--font-round);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pink-600);
  margin-bottom: 12px;
  padding-right: 40px;
}
.menu__detail-body p { font-size: .95rem; line-height: 2; margin-bottom: 16px; }
.menu__detail-body p:last-child { margin-bottom: 0; }

/* 「こんなことでお悩みでは〜」の一行 */
.menu-detail__lead {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .9rem !important;
  color: var(--pink-600);
  margin-bottom: 12px !important;
}
/* 症状の箇条書き */
.menu-detail__symptoms {
  margin-bottom: 24px;
  padding: 20px 26px;
  background: var(--pink-50);
  border-radius: var(--radius);
}
.menu-detail__symptoms li {
  position: relative;
  padding-left: 24px;
  font-size: 1rem;
  line-height: 1.9;
}
.menu-detail__symptoms li::before {
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--pink-400);
}
/* 説明用の図・写真 */
.menu-detail__figure {
  margin: 0 0 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pink-50);
}
.menu-detail__figure img { width: 100%; height: auto; }

/* 写真は高さを抑えて切り抜く。
   図解（歯周病の進行など）は全体を見せたいので、このクラスは付けない */
.menu-detail__figure--crop img {
  height: 320px;
  object-fit: cover;
  object-position: center 55%;
}
/* 人物が写っていて上下を切りたくない写真用（少し高め・上寄りで切り抜く） */
.menu-detail__figure--tall img {
  height: 430px;
  object-position: center 28%;
}
/* 見せたいものが写真の下側にある場合（手元・器具など） */
.menu-detail__figure--low img {
  height: 480px;
  object-position: center 62%;
}
.menu__detail-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--pink-600);
  background: var(--pink-100);
  transition: background .25s;
}
.menu__detail-close:hover { background: var(--pink-200); }


/* =========================================================
   5-10. 初めての方へ
   ========================================================= */
.first { padding: 100px 0; }

.flow {
  counter-reset: none;
  display: grid;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto 56px;
}
.flow li {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 30px 24px 32px;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--pink-300);
}
/* ステップ同士をつなぐ縦線 */
.flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -18px;
  width: 2px; height: 18px;
  background: var(--pink-300);
}
.flow__step {
  display: inline-block;
  font-family: var(--font-round);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--white);
  background: var(--pink-400);
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 10px;
}
.flow h3 {
  font-family: var(--font-round);
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.flow p { font-size: .89rem; color: var(--text-sub); }

.belongings {
  max-width: 860px;
  margin: 0 auto;
  background: var(--pink-100);
  border-radius: var(--radius-lg);
  padding: 34px 40px;
}
.belongings h3 {
  font-family: var(--font-round);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--pink-600);
}


/* =========================================================
   5-11. よくあるご質問
   ========================================================= */
.faq { padding: 100px 0; background: var(--pink-100); }
.faq__list { display: grid; gap: 14px; }

.faq__item {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq__item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .98rem;
  padding: 20px 60px 20px 58px;
  transition: background .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--pink-50); }

/* 左の「Q」マーク */
.faq__item summary::before {
  content: "Q";
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pink-400);
  color: var(--white);
  font-size: .8rem;
}
/* 右の開閉マーク（＋ → ×） */
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 26px; top: 50%;
  width: 13px; height: 13px;
  transform: translateY(-70%) rotate(45deg);
  border-right: 2px solid var(--pink-500);
  border-bottom: 2px solid var(--pink-500);
  transition: transform .3s;
}
.faq__item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }

.faq__answer {
  position: relative;
  padding: 0 30px 22px 58px;
  font-size: .9rem;
  color: var(--text-sub);
  line-height: 2;
}
.faq__answer::before {
  content: "A";
  position: absolute;
  left: 22px; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--white);
  font-family: var(--font-round);
  font-size: .8rem;
}


/* =========================================================
   5-12. 予約セクション
   ========================================================= */
.reserve {
  padding: 100px 0;
  text-align: center;
  background: linear-gradient(135deg, var(--pink-300), var(--pink-500));
  color: var(--white);
}
.reserve__en {
  font-family: var(--font-round);
  font-size: .78rem;
  letter-spacing: .24em;
  opacity: .9;
  margin-bottom: 10px;
}
.reserve__title {
  font-family: var(--font-round);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 20px;
}
.reserve__text { font-size: .95rem; line-height: 2.1; margin-bottom: 40px; }
.reserve__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
/* 予約セクション内はボタンの色を反転させる */
.reserve .btn--reserve {
  background: var(--white);
  color: var(--pink-600);
}
.reserve .btn--reserve:hover { background: var(--cream); }
.reserve .btn--outline {
  background: transparent;
  border-color: rgba(255,255,255,.8);
  color: var(--white);
}
.reserve .btn--outline:hover { background: rgba(255,255,255,.16); }
.reserve__note { margin-top: 26px; font-size: .78rem; opacity: .88; }


/* =========================================================
   5-13. アクセス
   ========================================================= */
.access { padding: 100px 0; }
.access__inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 44px;
  align-items: start;
}
.access__dl > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--pink-200);
  font-size: .92rem;
}
.access__dl dt {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--pink-600);
}
.access__dl dd { margin: 0; }
.access__dl a { color: var(--pink-600); font-weight: 700; }
.access__dl a:hover { text-decoration: underline; }

.access__map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--pink-100);
}
.access__map iframe { width: 100%; height: 100%; }

/* 地図を読み込む前の案内カード */
.access__map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 30px;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 14px,
      rgba(255,255,255,.55) 14px 28px),
    var(--pink-100);
}
.access__map-placeholder svg { width: 46px; height: 46px; color: var(--pink-400); }
.access__map-placeholder p {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: .95rem;
  color: var(--pink-600);
}
.access__map-placeholder small { font-size: .74rem; color: var(--text-sub); }


/* =========================================================
   6. フッター / 固定バー
   ========================================================= */
.footer {
  background: #4b3d41;
  color: #f6ecef;
  padding: 64px 0 0;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 48px;
}
.logo--footer .logo__text small { color: rgba(246,236,239,.6); }
.footer__address {
  margin-top: 18px;
  font-size: .85rem;
  line-height: 2;
  color: rgba(246,236,239,.82);
}
.footer__address a { color: var(--pink-300); font-weight: 700; }

.footer__nav ul { display: grid; gap: 10px; }
.footer__nav a { font-size: .87rem; color: rgba(246,236,239,.82); }
.footer__nav a:hover { color: var(--pink-300); }

.footer__hours h3 {
  font-family: var(--font-round);
  font-size: .95rem;
  color: var(--pink-300);
  margin-bottom: 12px;
}
.footer__hours p { font-size: .85rem; line-height: 2; color: rgba(246,236,239,.82); }
.footer__hours span { font-size: .8rem; opacity: .8; }
.footer__off { margin-top: 8px; }

.footer__copy {
  text-align: center;
  font-size: .74rem;
  letter-spacing: .04em;
  padding: 18px 16px;
  border-top: 1px solid rgba(246,236,239,.14);
  color: rgba(246,236,239,.6);
}

/* --- スマホ用の画面下固定バー（通常は非表示） --- */
.fixed-bar { display: none; }


/* =========================================================
   6-2. 右側のアイコンメニュー
   スクロールすると出てきて、いま見ているセクションが光る。
   画面の広いパソコンだけに表示（狭いと本文に重なるため）
   ========================================================= */
.sidenav { display: none; }

@media (min-width: 1280px) {
  .sidenav {
    display: block;
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) translateX(14px);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
  }
  /* 少しスクロールしたら出てくる */
  .sidenav.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }

  .sidenav ul { display: grid; gap: 9px; }

  .sidenav a {
    position: relative;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--pink-200);
    color: var(--pink-500);
    box-shadow: var(--shadow-sm);
    transition: background .25s, color .25s, transform .25s, border-color .25s;
  }
  .sidenav a svg { width: 20px; height: 20px; }

  .sidenav a:hover {
    background: var(--pink-500);
    border-color: var(--pink-500);
    color: var(--white);
    transform: translateX(-3px);
  }
  /* いま表示しているセクション */
  .sidenav a.is-current {
    background: linear-gradient(140deg, var(--pink-400), var(--pink-500));
    border-color: transparent;
    color: var(--white);
  }

  /* 「ページの先頭へ」は少し離して置く */
  .sidenav__top { margin-top: 8px; }

  /* マウスを乗せたときに出る名前 */
  .sidenav__label {
    position: absolute;
    right: calc(100% + 10px);
    white-space: nowrap;
    font-family: var(--font-round);
    font-size: .72rem;
    font-weight: 700;
    color: var(--white);
    background: var(--pink-600);
    border-radius: 999px;
    padding: 5px 13px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(6px);
    transition: opacity .25s, transform .25s;
  }
  .sidenav a:hover .sidenav__label,
  .sidenav a:focus-visible .sidenav__label {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 動きを減らす設定のときは、動かさず出し入れだけにする */
@media (prefers-reduced-motion: reduce) {
  .sidenav,
  .sidenav a,
  .sidenav__label { transition: none; }
}


/* =========================================================
   7. タブレット・スマホ対応
   ========================================================= */

/* --- 1100px 以下 --- */
@media (max-width: 1100px) {
  .gnav__list { gap: 16px; }
  .gnav__list a { font-size: .82rem; }
  .header__cta .btn { padding: 9px 14px; font-size: .78rem; }
  .menu__list { --cols: 4; }
}

/* --- 900px 以下（タブレット）--- */
@media (max-width: 900px) {
  :root { --header-h: 66px; }

  .pc-only { display: none; }
  .sp-only { display: inline; }

  /* ナビをスライドメニューに切り替え */
  .hamburger { display: flex; }
  .header__cta { display: none; }

  .gnav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 340px);
    background: var(--white);
    box-shadow: -8px 0 40px rgba(224,129,154,.2);
    padding: 96px 32px 40px;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    margin-left: 0;
  }
  .gnav.is-open { transform: translateX(0); }
  .gnav__list { flex-direction: column; gap: 0; }
  .gnav__list li { border-bottom: 1px dashed var(--pink-200); }
  .gnav__list a {
    display: block;
    padding: 18px 4px;
    font-size: 1rem;
  }
  .gnav__list a::after { display: none; }

  /* スライドメニュー下部の予約・電話ボタン */
  .gnav__cta {
    display: grid;
    gap: 12px;
    margin-top: 32px;
  }
  .gnav__cta .btn { width: 100%; padding: 14px 18px; }

  /* メニューを開いたときの背景の暗幕 */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(86,71,75,.45);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 99;
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }

  /* セクション余白を圧縮 */
  .features, .equipment, .prevention, .menu, .first, .faq, .reserve, .access { padding: 70px 0; }
  .greeting, .barrier { padding: 70px 0; }

  /* 2カラム → 1カラム */
  .greeting__inner,
  .barrier__inner,
  .access__inner { grid-template-columns: 1fr; gap: 44px; }

  .greeting__photo { max-width: 460px; margin-inline: auto; }
  /* 写真が先、文章が後ろに来るよう順番を固定 */
  .barrier__photo { order: -1; }

  .features__list,
  .equip-list,
  .prevention__points { grid-template-columns: 1fr; }

  .menu__list { --cols: 3; }

  .news__inner { grid-template-columns: 1fr; gap: 8px; padding: 26px 26px; }
  .news__label { display: flex; align-items: baseline; gap: 10px; }

  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* --- 768px 以下（スマホ）--- */
@media (max-width: 768px) {
  body { font-size: 15px; }

  .container, .container--narrow { width: calc(100% - 36px); }

  /* ヒーロー */
  .hero { min-height: auto; }
  .hero__inner { width: calc(100% - 36px); padding: 56px 0 64px; }
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(255,247,249,.38) 0%,
      rgba(255,247,249,.34) 55%,
      rgba(249,219,227,.32) 100%);
  }
  .hero__lower { padding-top: 30px; }   /* 見出しと近づきすぎないように */
  .hero__text { font-size: 1rem; }
  .hero__btns { flex-direction: column; }
  .hero__btns .btn { width: 100%; }

  .section-head { margin-bottom: 40px; }

  /* 診療時間表：スマホでも横スクロールなしで全部見えるように縮める */
  .hours { padding: 30px 0 70px; }
  .hours__table-wrap { padding: 8px; }
  .hours__table { min-width: 0; }
  .hours__table th,
  .hours__table td { padding: 12px 2px; }
  .hours__table thead th { font-size: .8rem; }
  .hours__table thead th:first-child { font-size: .68rem; }
  .hours__table tbody th { font-size: .74rem; padding-inline: 4px; }
  .hours__table tbody td { font-size: 1.05rem; }
  .hours__note { flex-direction: column; align-items: flex-start; }
  .hours__cta { flex-direction: column; }
  .hours__cta .btn { width: 100%; }

  .greeting__caption { font-size: .88rem; padding: 7px 22px; }
  .profile { padding: 20px 22px; }
  .profile > div { grid-template-columns: 60px 1fr; gap: 10px; font-size: .86rem; }

  .feature-card__body { padding: 0 24px 28px; }

  .prevention__body { padding: 0 22px 26px; }

  /* 設備カードはスマホでは写真を上、文章を下に */
  .equip-card { grid-template-columns: 1fr; }
  .equip-card__photo img { min-height: 0; aspect-ratio: 16 / 9; }
  .equip-card__body { padding: 22px 24px; }
  .belongings { padding: 26px 24px; }
  .flow li { padding: 20px 22px; }

  /* 診療メニューは2列に */
  .menu__list { --cols: 2; --gap: 14px; }
  .menu-card { aspect-ratio: 1 / 1.14; gap: 12px; padding: 18px 12px; }
  .menu-card__icon img { width: 64px; height: 64px; }
  .menu-card__title { font-size: .9rem; line-height: 1.55; }
  .menu-detail__symptoms { padding: 16px 20px; }
  .menu-detail__symptoms li { font-size: .92rem; }
  .menu__detail { padding: 26px 22px; }
  .menu__detail-title { font-size: 1.08rem; }

  .faq__item summary { padding: 16px 48px 16px 52px; font-size: .92rem; }
  .faq__answer { padding: 0 22px 18px 52px; }

  .reserve__btns { flex-direction: column; align-items: stretch; }
  .btn--xl { min-width: 0; width: 100%; }

  .footer__inner { grid-template-columns: 1fr; }

  /* --- 画面下の固定CTAバーを表示 --- */
  .fixed-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1px;
    background: var(--pink-200);
    box-shadow: 0 -4px 20px rgba(224,129,154,.22);
    /* iPhone のホームバー分の余白 */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .fixed-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 11px 6px;
    font-family: var(--font-round);
    font-weight: 700;
    font-size: .78rem;
  }
  .fixed-bar a svg { width: 20px; height: 20px; }
  .fixed-bar__tel { background: var(--white); color: var(--pink-600); }
  .fixed-bar__reserve {
    background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
    color: var(--white);
  }

  /* 固定バーに隠れないよう、ページ末尾に余白を足す */
  .footer { padding-bottom: 68px; }
}

/* --- 360px 以下（画面の狭いスマホ）---
   見出しの段差ぶんの余白がとれず折り返してしまうので、
   ここだけ文字を少し小さく、段差も浅くする */
@media (max-width: 360px) {
  .hero__title { font-size: 1.5rem; }
}

/* --- 400px 以下（小さいスマホ）--- */
@media (max-width: 400px) {
  .logo__text strong { font-size: .95rem; }
  .logo__text small { font-size: .5rem; }
  .menu__list { --cols: 2; }
}