/* =============================================
   共通スタイル
   配色: Q6準拠 — 白・水色・サンド基調、黒基調禁止
   ============================================= */

/* ===== 変数 ===== */
:root {
  /* 2026-08-06 FB①③: 純白は冷たいという指摘 → 面の白を「温白」に。淡水色は色相を保ったまま明度のみ微調整 */
  --white:      #fdfcf8;   /* 温白（旧 #ffffff）。カード・セクション面の基調 */
  --paper:      #e8eff0;   /* 基調の片翼＝淡い水色（色相187.5°は旧#edf4f5と同一のまま明度のみ -2%） */
  --paper-2:    #dfeaec;   /* やや濃い淡水色（色相189°は旧#e3eef0と同一） */
  --aqua-pale:  #e7f1f3;
  --aqua-light: #d4e8ec;
  --aqua:       #7ba6b3;
  --aqua-deep:  #4f7d8a;
  --aqua-ink:   #3d6874;   /* 淡水色の面に置く「文章としての」青文字用（AA確保）。ボタン等の面色は --aqua-deep のまま */
  --sage:       #8fa68a;
  --sage-light: #c5d0c2;
  --sand:       #c0a781;   /* アクセント差し色（やや深めにして視認できるよう） */
  --sand-light: #e3d6c4;   /* アクセント差し色 */
  --ink:        #32393a;
  --ink-soft:   #4a504e;   /* FB④「字が読みにくい」→ 濃く（淡水色背景で 6.7:1 以上） */
  --line:       #d8e3e4;   /* 罫線も暖色→クール寄りで清潔感 */
  --maxw:       1160px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Zen Kaku Gothic New", -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  font-weight: 400;   /* FB④: 300は細すぎるとの指摘 → 400へ */
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ===== タイポ共通 ===== */
.en { font-family: "Cormorant Garamond", serif; letter-spacing: .16em; font-weight: 400; }
.mincho { font-family: "Shippori Mincho", serif; }
.eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-size: .74rem; letter-spacing: .48em; text-transform: uppercase;
  color: var(--aqua-deep); font-weight: 400;
  display: inline-flex; align-items: center; gap: 1em;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--sand); opacity: 1; }

/* ===== レイアウト ===== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.4rem, 5vw, 3.5rem); }

/* ===== sec-head ===== */
.sec-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.sec-head .eyebrow { margin-bottom: 1.4rem; }
.sec-title {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  line-height: 1.55; letter-spacing: .07em;
}
.sec-title small {
  display: block; font-size: .58em;
  font-family: "Cormorant Garamond", serif;
  color: var(--ink-soft); letter-spacing: .18em;
  margin-top: .8rem; font-weight: 400;
}

/* ===== 出現アニメ ===== */
.js-anim .reveal { opacity: 0; transform: translateY(32px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.js-anim .reveal.delay-1 { transition-delay: .14s; }
.js-anim .reveal.delay-2 { transition-delay: .28s; }
.js-anim .reveal.delay-3 { transition-delay: .42s; }
.js-anim .reveal.in { opacity: 1; transform: none; }
.js-anim .reveal-line { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); }
.js-anim .reveal-line.in { transform: scaleX(1); }

/* ===== ヘッダー ===== */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem clamp(1.4rem, 5vw, 3.5rem);
  transition: background .6s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
header.scrolled {
  background: rgba(251,250,246,.9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line);
  padding: .8rem clamp(1.4rem, 5vw, 3.5rem);
}
header.no-hero { background: rgba(251,250,246,.95); backdrop-filter: blur(18px); box-shadow: 0 1px 0 var(--line); padding: .9rem clamp(1.4rem, 5vw, 3.5rem); }

.brand-link { display: flex; flex-direction: column; line-height: 1; gap: .4rem; }
.brand-link b {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400; font-size: 1.45rem; letter-spacing: .2em; color: var(--ink);
  transition: color .4s;
}
header.hero-zone .brand-link b { color: #fff; }
.brand-link span { font-size: .57rem; letter-spacing: .38em; color: var(--ink-soft); text-transform: uppercase; }
header.hero-zone .brand-link span { color: rgba(255,255,255,.7); }

nav.main { display: flex; align-items: center; gap: 2rem; }
nav.main a {
  font-size: .74rem; letter-spacing: .14em;
  position: relative; padding: .2rem 0;
  color: var(--ink); transition: color .4s;
}
header.hero-zone nav.main a { color: rgba(255,255,255,.88); }
nav.main a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--aqua); transition: width .4s var(--ease); }
nav.main a:hover::after, nav.main a[aria-current="page"]::after { width: 100%; }
nav.main a[aria-current="page"] { color: var(--aqua-deep); }
header.hero-zone nav.main a[aria-current="page"] { color: #fff; }

.btn-rsv {
  font-size: .72rem; letter-spacing: .2em;
  color: var(--aqua-deep); border: 1px solid var(--aqua-deep);
  padding: .7rem 1.4rem; border-radius: 100px;
  transition: .4s var(--ease); white-space: nowrap;
}
header.hero-zone .btn-rsv { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-rsv:hover { background: var(--aqua-deep); color: #fff; border-color: var(--aqua-deep); transform: translateY(-2px); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.burger span { width: 24px; height: 1px; background: var(--ink); transition: .4s var(--ease); display: block; }
header.hero-zone .burger span { background: #fff; }

/* ===== モバイルナビ ===== */
.mob-nav {
  display: none; position: fixed; inset: 0; z-index: 85;
  background: rgba(251,250,246,.97); backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease);
}
.mob-nav.open { opacity: 1; pointer-events: all; }
.mob-nav a { font-family: "Shippori Mincho", serif; font-size: 1.25rem; letter-spacing: .12em; color: var(--ink); }

/* 2026-09-05 スマホでメニューを閉じられない不具合の修正。
   header が z-index:90、.mob-nav が 85 だったため、開いたメニューの上に
   ヘッダーのバーガーが残り、✕ のクリックがバーガーに吸われていた。
   メニューを手前に出し、開いている間はバーガーを隠す。 */
.mob-nav { z-index: 100; }
.mob-nav .close { z-index: 101; padding: .6rem; margin: -.6rem; }  /* 指で押せる大きさに */
body.nav-open .burger { opacity: 0; pointer-events: none; }
.mob-nav .close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: 0; cursor: pointer; font-size: 1.5rem; color: var(--ink-soft); line-height: 1; }
.mob-nav .btn-rsv-mb {
  margin-top: .8rem; font-size: .8rem; letter-spacing: .18em;
  color: #fff; background: var(--aqua-deep);
  padding: .95rem 2.2rem; border-radius: 100px;
}

/* ===== フローティングサイドバー ===== */
.float-contact {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 70; display: flex; flex-direction: column;
}
.fc-item {
  width: 52px; height: 74px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(255,255,255,.93); backdrop-filter: blur(12px);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  color: var(--aqua-deep); transition: background .3s, color .3s;
}
.fc-item:first-child { border-radius: 6px 0 0 0; }
.fc-item:last-child { border-radius: 0 0 0 6px; border-bottom: 1px solid var(--line); }
.fc-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.fc-item span { font-size: .48rem; letter-spacing: .1em; color: var(--ink-soft); text-align: center; line-height: 1.3; }
.fc-item:hover { background: var(--aqua-pale); }
.fc-rsv { background: var(--aqua-deep); color: #fff; border-color: var(--aqua-deep); }
.fc-rsv span { color: rgba(255,255,255,.85); }
.fc-rsv:first-child { border-radius: 6px 0 0 0; }
.fc-rsv:hover { background: var(--aqua); }
.fc-rsv + .fc-rsv { border-top: 1px solid rgba(255,255,255,.4); }
.fc-rsv svg [fill="white"], .fc-rsv svg [fill="#fff"] { fill: var(--aqua-deep); }

/* ===== トップ ヒーロー ===== */
.hero {
  position: relative;
  height: 100vh; min-height: 640px; max-height: 1080px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* 4枚クロスフェード・スライドショー（各6秒・ゆるやかなケンバーンズ） */
.hero-slideshow .hero-slide {
  position: absolute; inset: 0;
  opacity: 0; will-change: opacity, transform;
  animation: heroCross 24s linear infinite;
}
.hero-slideshow .hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slideshow .hero-slide:nth-child(3) { animation-delay: 12s; }
.hero-slideshow .hero-slide:nth-child(4) { animation-delay: 18s; }
@keyframes heroCross {
  0%   { opacity: 0; transform: scale(1.075); }
  3%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow .hero-slide { animation-duration: 0s; }
  .hero-slideshow .hero-slide:nth-child(1) { opacity: 1; }
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(34,52,57,.28) 0%, rgba(34,52,57,0) 14%),
    linear-gradient(to top right, rgba(34,52,57,.58) 0%, rgba(34,52,57,.16) 36%, rgba(34,52,57,0) 62%),
    linear-gradient(to bottom, rgba(60,82,88,.10) 0%, rgba(60,82,88,0) 45%, rgba(34,52,57,.28) 100%);
}
.hero-arc { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-arc svg { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; opacity: .35; }
.hero-content {
  position: absolute; z-index: 3;
  bottom: clamp(3.5rem, 8vh, 6rem); left: clamp(1.4rem, 7vw, 6rem);
  color: #fff; max-width: min(640px, 86vw);
}
.hero-content .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 2rem; }
.hero-content .eyebrow::before { background: rgba(255,255,255,.6); }
.hero-content h1 {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.45; letter-spacing: .07em; color: #fff;
}
.hero-content h1 em {
  font-style: normal; display: block;
  font-size: .48em; font-weight: 400;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .28em; color: rgba(255,255,255,.78); margin-top: 1.1em;
}
.hero-scroll {
  position: absolute; z-index: 3;
  right: clamp(1.4rem, 4vw, 4rem); bottom: clamp(3.5rem, 8vh, 6rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  color: rgba(255,255,255,.7);
  font-family: "Cormorant Garamond", serif; font-size: .68rem; letter-spacing: .4em; text-transform: uppercase;
}
.scroll-line { width: 1px; height: 64px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.scroll-line::after {
  content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,.85);
  animation: scrolldown 2s var(--ease-out) infinite;
}
@keyframes scrolldown { 0% { top: -100%; } 100% { top: 100%; } }

/* ===== ページ内ヒーロー（下層ページ用） ===== */
.page-hero {
  position: relative;
  height: clamp(280px, 44vw, 500px); max-height: 500px;
  overflow: hidden; display: flex; align-items: flex-end;
  margin-top: 0;
}
.page-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 25%, rgba(48,68,73,.4) 100%);
}
.page-hero-content {
  position: relative; z-index: 2;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.4rem, 7vw, 6rem);
  color: #fff; padding-top: 6rem;
}
.page-hero-content .eyebrow { color: rgba(255,255,255,.82); margin-bottom: 1rem; }
.page-hero-content .eyebrow::before { background: rgba(255,255,255,.6); }
.page-hero-content h1 {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.45; letter-spacing: .08em;
}

/* ===== ページタイトル（写真なし） ===== */
.page-title {
  background: var(--paper);
  padding: clamp(8rem, 18vw, 12rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.page-title .eyebrow { margin-bottom: 1.2rem; }
.page-title h1 {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.4; letter-spacing: .07em;
  margin: .6rem 0 .5rem;
}
.page-title small {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: .96rem; color: var(--ink-soft); letter-spacing: .1em;
}
/* 見出し直下の1行リード（場所などを添える） */
.page-title .page-lead {
  margin-top: .9rem; font-size: .92rem; font-weight: 400;
  color: var(--ink-soft); letter-spacing: .09em; line-height: 2;
}

/* ===== フィロソフィー ===== */
.philosophy { background: var(--white); padding: clamp(6rem, 12vw, 10rem) 0; text-align: center; }
.philosophy-inner { max-width: 860px; margin: 0 auto; padding: 0 clamp(1.4rem, 5vw, 3.5rem); }
.philosophy-arc { margin: 0 auto 3rem; opacity: .3; width: min(280px, 60vw); }
.philosophy-arc svg { display: block; width: 100%; height: auto; }
.philosophy .eyebrow { justify-content: center; margin-bottom: 3rem; }
.philosophy .eyebrow::before { display: none; }
.philosophy-quote {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.7; letter-spacing: .1em; color: var(--ink);
  margin-bottom: 2rem;
}
.philosophy-quote em { font-style: normal; color: var(--aqua-deep); }
.philosophy-sub {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.4rem); color: var(--ink-soft); letter-spacing: .06em; line-height: 1.8;
  margin-bottom: 3.5rem;
}
.philosophy-body { font-size: clamp(.9rem, 1.8vw, 1rem); color: var(--ink-soft); line-height: 2.4; max-width: 36em; margin: 0 auto; letter-spacing: .06em; }
.philosophy-divider { width: 1px; height: 80px; background: var(--line); margin: 4rem auto; }

/* ===== トップ — ページカード導線 ===== */
.page-cards { background: var(--paper); padding: clamp(5rem, 10vw, 9rem) 0; }
.page-cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 3rem;
}
.page-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--white);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  overflow: hidden;
}
.page-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -18px rgba(79,125,138,.18); }
.page-card-img { aspect-ratio: 4/3; overflow: hidden; }
.page-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease-out); }
.page-card:hover .page-card-img img { transform: scale(1.04); }
.page-card-body { padding: 2rem 2rem 2.5rem; flex: 1; display: flex; flex-direction: column; }
.page-card-body .eyebrow { margin-bottom: 1rem; font-size: .68rem; }
.page-card-body h3 { font-family: "Shippori Mincho", serif; font-size: 1.1rem; letter-spacing: .07em; line-height: 1.6; margin-bottom: .8rem; }
.page-card-body p { font-size: .86rem; color: var(--ink-soft); line-height: 2.1; flex: 1; }
.link-more {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: "Cormorant Garamond", serif; font-size: .76rem;
  letter-spacing: .22em; color: var(--aqua-deep);
  margin-top: 1.6rem; transition: gap .4s var(--ease);
}
.link-more::after { content: "→"; }
.link-more:hover { gap: 1rem; }

/* ===== 強み ===== */
.strengths { background: var(--paper); padding: clamp(5rem, 10vw, 9rem) 0; }
.strengths .wrap { max-width: 960px; }
.str-item {
  display: grid; grid-template-columns: 80px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--line); align-items: start;
}
.str-item:last-child { border-bottom: 1px solid var(--line); }
.str-num { font-family: "Cormorant Garamond", serif; font-size: clamp(3rem, 7vw, 5rem); color: var(--sand); font-weight: 300; line-height: .9; letter-spacing: -.02em; padding-top: .2em; }
.str-body .eyebrow { margin-bottom: 1.2rem; }
.str-body h3 { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.6; letter-spacing: .07em; margin-bottom: 1.4rem; }
.str-body p { font-size: clamp(.88rem, 1.7vw, .97rem); color: var(--ink-soft); line-height: 2.35; max-width: 40em; }

/* ===== フルブリード写真ブレイク ===== */
.photo-break { position: relative; height: clamp(340px, 56vw, 680px); overflow: hidden; }
.photo-break img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s var(--ease-out); }
.photo-break:hover img { transform: scale(1.03); }
.photo-break .caption {
  position: absolute; bottom: clamp(1.5rem, 4vw, 3rem); right: clamp(1.5rem, 4vw, 3rem);
  background: rgba(251,250,246,.92); backdrop-filter: blur(8px);
  padding: 1.4rem 1.8rem; max-width: min(360px, 70vw);
  border-left: 2px solid var(--aqua);
}
.photo-break .caption .en { font-family: "Cormorant Garamond", serif; font-size: .72rem; letter-spacing: .28em; color: var(--aqua-deep); margin-bottom: .5rem; }
.photo-break .caption p { font-family: "Shippori Mincho", serif; font-size: .96rem; line-height: 1.75; letter-spacing: .06em; color: var(--ink); }

/* ===== 診療内容 ===== */
.treatment-s { background: var(--white); padding: clamp(5rem, 10vw, 9rem) 0; }
.treatment-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: end; margin-bottom: clamp(3rem, 7vw, 6rem); }
.treatment-intro h2 { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.65; letter-spacing: .07em; }
.treatment-intro .lead { font-size: clamp(.9rem, 1.7vw, .98rem); color: var(--ink-soft); line-height: 2.4; }
.treat-list { border-top: 1px solid var(--line); }
.treat-item { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
.treat-item .t-name { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: .06em; line-height: 1.7; }
.treat-item .t-name .en-s { display: block; font-family: "Cormorant Garamond", serif; font-size: .75rem; letter-spacing: .22em; color: var(--aqua); margin-bottom: .5rem; font-weight: 400; }
.treat-item .t-desc { grid-column: span 2; font-size: clamp(.86rem, 1.6vw, .94rem); color: var(--ink-soft); line-height: 2.3; }
.treat-note { margin-top: 3rem; padding: 2rem 2.4rem; background: var(--aqua-pale); border-left: 2px solid var(--aqua); font-size: .9rem; color: var(--aqua-deep); line-height: 2.1; letter-spacing: .05em; }
.treat-note b { font-family: "Shippori Mincho", serif; }

/* ===== ドクター（トップ・doctor.html共用） ===== */
.doctor-s { background: var(--paper-2); padding: clamp(5rem, 10vw, 9rem) 0; }
.doctor-inner { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.doc-photo-wrap { position: sticky; top: 6rem; }
/* 院長写真: 1600x1360の横長・被写体左寄り・右下に手元 → 5/4で全身の間合いを残す */
.doc-frame { aspect-ratio: 5/4; overflow: hidden; position: relative; }
.doc-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.doc-badge {
  position: absolute; bottom: 1.2rem; right: 1.2rem;
  background: var(--aqua-deep); color: #fff;
  padding: .9rem 1.2rem; text-align: center; line-height: 1.3;
}
.doc-badge b { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; display: block; font-weight: 400; line-height: .9; }
.doc-badge small { font-size: .62rem; letter-spacing: .18em; opacity: .85; }
.doc-info .eyebrow { margin-bottom: 1.8rem; }
.doc-info .name-ja { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: .12em; line-height: 1.3; }
.doc-info .name-en { font-family: "Cormorant Garamond", serif; letter-spacing: .3em; color: var(--ink-soft); font-size: .82rem; margin-top: .6rem; }
.doc-info .title { margin-top: 1.2rem; color: var(--aqua-deep); font-size: .88rem; letter-spacing: .1em; line-height: 1.9; }
.doc-divider { width: 40px; height: 1px; background: var(--sand); margin: 2.2rem 0; }
.doc-msg { font-size: clamp(.9rem, 1.7vw, .98rem); color: var(--ink); line-height: 2.5; letter-spacing: .06em; }
.doc-msg p + p { margin-top: 1.4em; }
.career { margin-top: 3rem; }
.career-head { font-family: "Shippori Mincho", serif; font-size: .84rem; letter-spacing: .18em; color: var(--aqua-deep); margin-bottom: 1.4rem; }
.career dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.career dl .row { display: contents; }
.career dt { font-family: "Cormorant Garamond", serif; letter-spacing: .1em; color: var(--aqua); padding: .85rem 1.6rem .85rem 0; font-size: .84rem; white-space: nowrap; border-bottom: 1px solid var(--line); }
.career dd { padding: .85rem 0; font-size: .88rem; color: var(--ink); line-height: 1.9; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
.quals { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.quals span { font-size: .74rem; letter-spacing: .08em; color: var(--ink-soft); border: 1px solid var(--line); padding: .38rem .9rem; border-radius: 100px; background: var(--white); }
.doc-sns { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.doc-sns a {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: "Cormorant Garamond", serif; font-size: .76rem;
  letter-spacing: .2em; color: var(--aqua-deep);
  border: 1px solid var(--line); padding: .6rem 1.2rem; border-radius: 100px;
  transition: .4s var(--ease);
}
.doc-sns a:hover { background: var(--aqua-pale); border-color: var(--aqua); }
.doc-sns svg { width: 16px; height: 16px; }

/* ===== 院内スライダー ===== */
.clinic-s { background: var(--white); padding: clamp(5rem, 10vw, 9rem) 0; }
.slider-wrap { margin-top: 3rem; position: relative; overflow: hidden; }
.slides { display: flex; transition: transform 1s var(--ease); }
.slide { min-width: 100%; position: relative; }
.slide img { width: 100%; height: clamp(280px, 52vw, 580px); object-fit: cover; }
.slide-cap {
  position: absolute; left: 0; bottom: 0;
  background: rgba(251,250,246,.92); backdrop-filter: blur(10px);
  padding: 1.2rem 1.8rem; max-width: min(380px, 75%);
  border-top: 2px solid var(--aqua);
}
.slide-cap .en { font-family: "Cormorant Garamond", serif; font-size: .7rem; letter-spacing: .3em; color: var(--aqua-deep); margin-bottom: .4rem; }
.slide-cap h4 { font-family: "Shippori Mincho", serif; font-size: 1rem; letter-spacing: .06em; line-height: 1.6; }
.slider-ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: 1.6rem; padding: 0 clamp(1.4rem, 5vw, 3.5rem); }
.dots { display: flex; gap: .7rem; }
.dots button { width: 28px; height: 1.5px; border: 0; cursor: pointer; padding: 0; background: var(--line); transition: background .4s; }
.dots button.on { background: var(--aqua-deep); }
.arrows { display: flex; gap: .8rem; }
.arrows button {
  width: 46px; height: 46px; border: 1px solid var(--line); background: none;
  border-radius: 50%; cursor: pointer;
  font-family: "Cormorant Garamond", serif; color: var(--ink); font-size: 1rem;
  transition: .4s var(--ease); display: flex; align-items: center; justify-content: center;
}
.arrows button:hover { background: var(--aqua-deep); color: #fff; border-color: var(--aqua-deep); }

/* ===== 診療の流れ ===== */
.flow-s { background: var(--paper); padding: clamp(5rem, 10vw, 9rem) 0; }
.flow-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 3.5rem; }
.flow-track::before { content: ""; position: absolute; top: 10px; left: 10%; right: 10%; height: 1px; background: var(--line); }
.step-item { position: relative; padding: 0 clamp(.6rem, 2vw, 1.2rem); text-align: center; }
.step-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--aqua); margin: 0 auto 1.8rem; position: relative; z-index: 2; }
.step-no { font-family: "Cormorant Garamond", serif; color: var(--sand); letter-spacing: .18em; font-size: .72rem; margin-bottom: .8rem; }
.step-h { font-family: "Shippori Mincho", serif; font-size: clamp(.85rem, 1.8vw, 1rem); letter-spacing: .05em; line-height: 1.6; margin-bottom: .8rem; }
.step-p { font-size: .78rem; color: var(--ink-soft); line-height: 1.9; }

/* ===== 症例 ===== */
.cases-s { background: var(--white); padding: clamp(5rem, 10vw, 9rem) 0; }
.cases-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem); margin-top: 3rem; }
.case-block { border: 1px solid var(--line); }
.case-ba { display: grid; grid-template-columns: 1fr 1fr; }
.case-slot { aspect-ratio: 1; background: var(--paper-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--ink-soft); font-size: .7rem; letter-spacing: .14em; border-bottom: 1px solid var(--line); }
.case-slot.after { background: var(--aqua-pale); }
.case-slot .slot-label { font-family: "Cormorant Garamond", serif; font-size: .82rem; letter-spacing: .22em; color: var(--aqua-deep); }
.case-slot .slot-pending { font-family: "Shippori Mincho", serif; font-size: .7rem; color: var(--sage); letter-spacing: .12em; }
.case-meta { padding: 1.2rem 1.5rem 1.6rem; }
.case-meta h6 { font-family: "Shippori Mincho", serif; font-size: .96rem; letter-spacing: .05em; }
.case-meta p { font-size: .78rem; color: var(--ink-soft); margin-top: .4rem; line-height: 1.85; }
.cases-disclaimer { margin-top: 2.5rem; font-size: .76rem; color: var(--ink-soft); line-height: 2; letter-spacing: .04em; padding-top: 2rem; border-top: 1px solid var(--line); }

/* ===== 料金 ===== */
.price-s { background: var(--paper); padding: clamp(5rem, 10vw, 9rem) 0; }
.price-desc { max-width: 38em; font-size: .95rem; color: var(--ink-soft); line-height: 2.3; margin-top: 1.6rem; margin-bottom: 3rem; }
.price-table { border-top: 1px solid var(--line); }
.price-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: center; padding: 1.5rem clamp(.5rem, 2vw, 1.5rem); border-bottom: 1px solid var(--line); }
.price-row.head { padding: .8rem clamp(.5rem, 2vw, 1.5rem); font-family: "Shippori Mincho", serif; letter-spacing: .12em; color: var(--ink-soft); font-size: .78rem; }
.price-row .name { font-family: "Shippori Mincho", serif; font-size: .98rem; letter-spacing: .04em; }
.price-row .name small { display: block; font-family: "Zen Kaku Gothic New"; font-size: .74rem; color: var(--ink-soft); margin-top: .2rem; font-weight: 300; }
.price-row .amt { font-family: "Cormorant Garamond", serif; font-size: 1.15rem; color: var(--aqua-deep); letter-spacing: .04em; text-align: right; }
.price-row .amt small { font-family: "Zen Kaku Gothic New"; font-size: .7rem; color: var(--ink-soft); }
.price-note { margin-top: 1.8rem; font-size: .8rem; color: var(--ink-soft); line-height: 2.05; }

/* ===== FAQ ===== */
.faq-s { background: var(--white); padding: clamp(5rem, 10vw, 9rem) 0; }
.faq-list { margin-top: 3rem; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; display: flex; align-items: flex-start; gap: 1.5rem; background: none; border: 0; cursor: pointer; padding: 1.7rem .2rem; text-align: left; font-family: inherit; }
.qa .qm { font-family: "Cormorant Garamond", serif; color: var(--aqua); font-size: 1.15rem; flex-shrink: 0; margin-top: .05em; }
.qa .qt { font-family: "Shippori Mincho", serif; font-size: clamp(.92rem, 1.8vw, 1.02rem); letter-spacing: .05em; color: var(--ink); flex: 1; line-height: 1.75; }
.qa .plus { width: 20px; height: 20px; position: relative; flex-shrink: 0; margin-top: .2em; }
.qa .plus::before, .qa .plus::after { content: ""; position: absolute; background: var(--aqua-deep); transition: .4s var(--ease); }
.qa .plus::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.qa .plus::after { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
.qa.open .plus::after { transform: translateX(-50%) scaleY(0); }
.qa .ans { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
.qa .ans-in { padding: .2rem 2rem 1.8rem 3.4rem; font-size: .92rem; color: var(--ink-soft); line-height: 2.2; }

/* ===== アクセス ===== */
.access-s { background: var(--paper-2); padding: clamp(5rem, 10vw, 9rem) 0; }
.access-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; margin-top: 3rem; }
.access-info dl { border-top: 1px solid var(--line); }
.access-info dt { font-family: "Shippori Mincho", serif; color: var(--aqua-deep); padding: 1rem 1.6rem 1rem 0; font-size: .88rem; letter-spacing: .06em; border-bottom: 1px solid var(--line); float: left; clear: left; width: 6em; }
.access-info dd { padding: 1rem 0; font-size: .9rem; border-bottom: 1px solid var(--line); margin-left: 6em; line-height: 1.9; }
.access-info dd::after { content: ""; display: table; clear: both; }
.access-map { background: var(--paper); border: 1px solid var(--line); min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--ink-soft); text-align: center; }
.access-map .en { font-family: "Cormorant Garamond", serif; font-size: 1.1rem; color: var(--sand); letter-spacing: .22em; }
.access-map .note { font-size: .78rem; letter-spacing: .1em; }
.access-sns { margin-top: 2.5rem; display: flex; gap: 1rem; }
.access-sns a { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: .4s var(--ease); }
.access-sns a:hover { background: var(--aqua-deep); border-color: var(--aqua-deep); color: #fff; transform: translateY(-3px); }
.access-sns svg { width: 20px; height: 20px; }

/* ===== ニュース ===== */
.news-s { background: var(--white); padding: clamp(4rem, 8vw, 7rem) 0; }
.news-list { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.news-item { display: grid; grid-template-columns: auto auto 1fr auto; gap: 1.6rem; align-items: center; padding: 1.4rem .2rem; border-bottom: 1px solid var(--line); transition: background .3s; }
.news-item:hover { background: var(--paper); }
.news-item time { font-family: "Cormorant Garamond", serif; letter-spacing: .1em; color: var(--ink-soft); font-size: .86rem; }
.news-item .cat { font-size: .66rem; letter-spacing: .14em; color: var(--aqua-deep); border: 1px solid var(--aqua); padding: .25rem .8rem; border-radius: 100px; }
.news-item p { font-size: .9rem; letter-spacing: .04em; }
.news-item .arrow { font-family: "Cormorant Garamond", serif; color: var(--sand); font-size: .8rem; }

/* ===== ライトCTAセクション (Q6: 暗色禁止) ===== */
.cta-light { background: var(--aqua-pale); overflow: hidden; }
.cta-light-wrap { display: grid; grid-template-columns: 1fr .85fr; max-width: var(--maxw); margin: 0 auto; }
.cta-light-content { padding: clamp(5rem, 10vw, 8rem) clamp(1.4rem, 7vw, 6rem); }
.cta-light-content .eyebrow { margin-bottom: 2rem; }
.cta-light-content h2 { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.7; letter-spacing: .09em; color: var(--ink); margin-bottom: 1.2rem; }
.cta-light-content p { font-size: clamp(.88rem, 1.7vw, .96rem); color: var(--ink-soft); line-height: 2.3; margin-bottom: 2.8rem; }
.cta-light-img { position: relative; overflow: hidden; min-height: 360px; }
.cta-light-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.cta-btn-solid { background: var(--aqua-deep); color: #fff; padding: 1.1rem 2.2rem; border-radius: 100px; font-size: .78rem; letter-spacing: .2em; transition: .4s var(--ease); }
.cta-btn-solid:hover { background: var(--aqua); transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(79,125,138,.4); }
.cta-btn-outline { border: 1px solid var(--aqua-deep); color: var(--aqua-deep); padding: 1.1rem 2.2rem; border-radius: 100px; font-size: .78rem; letter-spacing: .2em; transition: .4s var(--ease); }
.cta-btn-outline:hover { background: var(--aqua-pale); transform: translateY(-2px); }
.cta-light-policy { margin-top: 2rem; font-size: .72rem; color: var(--ink-soft); line-height: 2; border-top: 1px solid var(--line); padding-top: 1.5rem; letter-spacing: .05em; }

/* ===== 予約フォーム ===== */
.reserve-s { background: var(--white); padding: clamp(5rem, 10vw, 9rem) 0; }
.reserve-intro { max-width: 42em; margin-bottom: 3.5rem; }
.reserve-intro p { font-size: .96rem; color: var(--ink-soft); line-height: 2.4; margin-top: 1.2rem; }
.reserve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.4rem; }
.form-row { display: flex; flex-direction: column; gap: .5rem; }
.form-row label { font-size: .78rem; letter-spacing: .12em; color: var(--aqua-deep); font-family: "Shippori Mincho", serif; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: .9rem 1.2rem;
  border: 1px solid var(--line); background: var(--paper);
  font-family: "Zen Kaku Gothic New", sans-serif; font-size: .9rem;
  color: var(--ink); line-height: 1.7; letter-spacing: .04em;
  transition: border-color .3s;
  border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--aqua); background: var(--white);
}
.form-row textarea { resize: vertical; min-height: 140px; }
.form-submit {
  background: var(--aqua-deep); color: #fff;
  border: none; cursor: pointer;
  padding: 1.3rem 3rem; border-radius: 100px;
  font-family: "Zen Kaku Gothic New", sans-serif; font-size: .8rem;
  letter-spacing: .22em; transition: .4s var(--ease);
  align-self: flex-start;
}
.form-submit:hover { background: var(--aqua); transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(79,125,138,.4); }
.form-notice { font-size: .74rem; color: var(--ink-soft); line-height: 2; margin-top: .5rem; }
.policy-box { background: var(--paper); border: 1px solid var(--line); padding: 2rem 2.4rem; }
.policy-box h3 { font-family: "Shippori Mincho", serif; font-size: 1.05rem; letter-spacing: .06em; margin-bottom: 1.2rem; }
.policy-box p { font-size: .84rem; color: var(--ink-soft); line-height: 2.2; }
.policy-box p + p { margin-top: .8em; }
.rsv-info { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.rsv-info-item {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.4rem 1.6rem; border: 1px solid var(--line);
  background: var(--white); transition: .3s var(--ease);
}
.rsv-info-item:hover { border-color: var(--aqua); background: var(--aqua-pale); }
.rsv-info-item svg { width: 20px; height: 20px; color: var(--aqua-deep); flex-shrink: 0; }
.rsv-info-item .ri-label { font-size: .72rem; letter-spacing: .16em; color: var(--aqua-deep); }
.rsv-info-item .ri-val { font-family: "Shippori Mincho", serif; font-size: .95rem; letter-spacing: .05em; color: var(--ink); margin-top: .2rem; }

/* ===== ライトフッター (Q6: 黒背景禁止) ===== */
footer {
  background: var(--paper-2);
  color: var(--ink);
  padding: clamp(4rem, 8vw, 6rem) 0 2rem;
  border-top: 1px solid var(--line);
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.foot-brand b { font-family: "Cormorant Garamond", serif; font-size: 1.55rem; letter-spacing: .2em; color: var(--ink); display: block; font-weight: 400; }
/* 院名の下の「BEAUTY CLINIC」だけ。文の中に足される span（折り返し用）にかけない */
.foot-brand > span { font-size: .56rem; letter-spacing: .36em; color: var(--ink-soft); margin-top: .5rem; display: block; }
.foot-brand p { margin-top: 1.4rem; font-size: .8rem; line-height: 2; color: var(--ink-soft); }
.foot-sns { display: flex; gap: .8rem; margin-top: 1.6rem; }
.foot-sns a { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: .4s var(--ease); }
.foot-sns a:hover { background: var(--aqua-deep); border-color: var(--aqua-deep); color: #fff; transform: translateY(-2px); }
.foot-sns svg { width: 17px; height: 17px; }
.foot-col h6 { font-family: "Shippori Mincho", serif; letter-spacing: .14em; color: var(--aqua-deep); font-size: .8rem; margin-bottom: 1.4rem; }
.foot-col a, .foot-col p { display: block; font-size: .8rem; line-height: 2.3; color: var(--ink-soft); transition: color .3s; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; font-size: .68rem; letter-spacing: .08em; color: var(--ink-soft); flex-wrap: wrap; gap: .8rem; }

/* ===== モバイル固定予約バー ===== */
.mob-rsv {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  background: rgba(255,255,255,.95); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: .6rem 1rem; gap: .7rem;
}
.mob-rsv a { flex: 1; text-align: center; padding: .9rem; border-radius: 100px; font-size: .78rem; letter-spacing: .12em; }
.mob-rsv .line { border: 1px solid var(--aqua-deep); color: var(--aqua-deep); }
.mob-rsv .web { background: var(--aqua-deep); color: #fff; }

/* ===== コンセプトボックス（aboutページ用） ===== */
.concept-s { background: var(--white); padding: clamp(5rem, 10vw, 9rem) 0; }
.concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem, 8vw, 8rem); align-items: center; }
.concept-img { position: relative; }
.concept-img img { width: 100%; aspect-ratio: 5/4; object-fit: cover; object-position: center 22%; }
.concept-img-caption { margin-top: .8rem; font-family: "Cormorant Garamond", serif; font-size: .68rem; letter-spacing: .22em; color: var(--ink-soft); text-align: right; }
.concept-text .eyebrow { margin-bottom: 1.8rem; }
.concept-text h2 { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.65; letter-spacing: .07em; margin-bottom: 2rem; }
.concept-text p { font-size: .96rem; color: var(--ink-soft); line-height: 2.5; letter-spacing: .05em; }
.concept-text p + p { margin-top: 1.4em; }

/* ===== レスポンシブ ===== */
@media (max-width: 1000px) {
  .page-cards-grid { grid-template-columns: 1fr 1fr; }
  .cta-light-img { min-height: 280px; }
}
@media (max-width: 900px) {
  nav.main, .btn-rsv { display: none; }
  .burger { display: flex; }
  .mob-rsv { display: flex; }
  .float-contact { display: none; }
  body { padding-bottom: 60px; }

  .doctor-inner { grid-template-columns: 1fr; }
  .doc-photo-wrap { position: static; }
  .doc-frame { aspect-ratio: 5/4; max-width: 420px; }

  .treatment-intro { grid-template-columns: 1fr; }
  .treat-item { grid-template-columns: 1fr; gap: 1rem; }
  .treat-item .t-desc { grid-column: auto; }

  .flow-track { grid-template-columns: 1fr; gap: 0; }
  .flow-track::before { display: none; }
  .step-item { display: grid; grid-template-columns: 20px 1fr; gap: 1.2rem; text-align: left; padding-bottom: 2rem; }
  .step-dot { margin: 0; flex-shrink: 0; margin-top: .15rem; }
  .step-inner { padding-left: .5rem; }

  .cases-inner { grid-template-columns: 1fr; }

  .access-grid { grid-template-columns: 1fr; }
  .access-map { min-height: 240px; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .foot-brand { grid-column: 1 / -1; }

  .price-row { grid-template-columns: 1fr auto; }
  .price-row.head { display: none; }

  .hero-content h1 { font-size: 2rem; }
  .hero-content .eyebrow { font-size: .66rem; }

  .cta-light-wrap { grid-template-columns: 1fr; }
  .cta-light-img { min-height: 260px; }

  .concept-grid { grid-template-columns: 1fr; }
  .reserve-grid { grid-template-columns: 1fr; }

  .str-item { grid-template-columns: 56px 1fr; gap: 1.2rem; }
  .str-num { font-size: 2.8rem; }
}
@media (max-width: 700px) {
  .page-cards-grid { grid-template-columns: 1fr; }
  .news-item { grid-template-columns: auto auto 1fr; }
  .news-item .arrow { display: none; }
}
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr; }
  .philosophy-quote { font-size: 1.55rem; }
  .slide img { height: 220px; }
  .hero-scroll { display: none; }
}

/* ===== 仮置き（テストサイト）表示 ===== */
.kari{display:inline-block;font-size:.62rem;line-height:1;letter-spacing:.08em;color:#fff;background:var(--aqua-deep);border-radius:3px;padding:.3em .5em .26em;margin:0 .15em;vertical-align:middle;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;transform:translateY(-1px)}
.brand-kari{font-size:.58rem;letter-spacing:.12em;color:var(--ink-soft);margin-left:.45em;font-family:"Zen Kaku Gothic New",sans-serif}
.foot-test{display:block;width:100%;margin-top:.7rem;font-size:.66rem;color:var(--ink-soft);letter-spacing:.02em;line-height:1.7}
.kari-note{display:block;font-size:.74rem;line-height:1.8;color:var(--ink-soft);letter-spacing:.03em;margin-top:1.1rem;padding:.8rem 1rem;background:var(--aqua-pale);border-left:2px solid var(--aqua);border-radius:2px}

/* =============================================
   2026-08-04 改修分
   ============================================= */

/* ===== ヒーロー サブコピー ===== */
/* 明るいヒーロー写真でも白文字が沈まないよう、影のみで可読性を確保（配色は変更しない） */
.hero-content h1, .hero-content .hero-sub { text-shadow: 0 1px 26px rgba(34,52,57,.5); }
header.hero-zone .brand-link b, header.hero-zone .brand-link span,
header.hero-zone nav.main a, header.hero-zone .btn-rsv { text-shadow: 0 1px 10px rgba(34,52,57,.55); }
header.hero-zone .burger span { box-shadow: 0 0 7px rgba(34,52,57,.6); }
@media (max-width: 900px) {
  .hero-content .hero-sub { font-size: .78rem; letter-spacing: .07em; line-height: 2; }
}
.hero-content .hero-sub {
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  color: rgba(255,255,255,.92);
  font-size: clamp(.82rem, 1.6vw, .96rem);
  line-height: 2.1; letter-spacing: .12em;
}
.hero-content .hero-sub .sub-strong {
  display: block; font-family: "Shippori Mincho", serif;
  font-size: 1.08em; letter-spacing: .16em; margin-bottom: .35em;
}

/* ===== 信頼バッジ（ヒーロー直下・カード枠なしのエディトリアル帯） ===== */
.trust-band { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-band .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item {
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding: clamp(2.2rem, 4.5vw, 3.2rem) clamp(.5rem, 2vw, 1.6rem);
}
.trust-item + .trust-item::before {
  content: ""; position: absolute; left: 0; top: 24%; bottom: 24%;
  width: 1px; background: var(--line);
}
.trust-item svg { width: 26px; height: 26px; color: var(--aqua); }
.trust-item .t-label {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(.82rem, 1.6vw, .96rem); letter-spacing: .09em; line-height: 1.7;
}
.trust-item .t-sub { font-size: .72rem; color: var(--ink-soft); letter-spacing: .05em; line-height: 1.9; }
@media (max-width: 820px) {
  .trust-band .wrap { grid-template-columns: 1fr 1fr; }
  .trust-item + .trust-item::before { display: none; }
  .trust-item:nth-child(2n)::after {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 1px; background: var(--line);
  }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ===== 重要なお知らせバナー（important=true のときだけJSが表示） ===== */
.news-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  background: var(--aqua-deep); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.news-banner a {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  height: 44px; padding: 0 clamp(1rem, 4vw, 2rem);
  font-size: .78rem; letter-spacing: .08em; color: #fff;
}
.news-banner .news-banner-tag {
  flex-shrink: 0; font-family: "Cormorant Garamond", serif;
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.5); border-radius: 100px; padding: .22rem .8rem;
}
.news-banner .news-banner-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-banner .news-banner-arrow { flex-shrink: 0; opacity: .8; font-family: "Cormorant Garamond", serif; }
body.has-news-banner header { top: 44px; }
@media (max-width: 700px) {
  .news-banner .news-banner-tag { display: none; }
  .news-banner a { font-size: .72rem; }
}

/* ===== 予約導線ボタン（config.js のURL有無で表示が変わる） ===== */
.rsv-ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.rsv-way { background: var(--white); border: 1px solid var(--line); padding: clamp(1.8rem, 4vw, 2.6rem); }
.rsv-way.primary { border-color: var(--aqua); background: var(--aqua-pale); }
.rsv-way .way-no { font-family: "Cormorant Garamond", serif; font-size: .72rem; letter-spacing: .3em; color: var(--aqua-deep); text-transform: uppercase; }
.rsv-way h3 { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1.05rem, 2.2vw, 1.25rem); letter-spacing: .07em; line-height: 1.7; margin: .9rem 0 .9rem; }
.rsv-way p { font-size: .86rem; color: var(--ink-soft); line-height: 2.2; }
.rsv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.6rem; padding: 1.05rem 2.2rem; border-radius: 100px;
  font-size: .78rem; letter-spacing: .2em; text-align: center;
}
.rsv-btn.is-ready { background: var(--aqua-deep); color: #fff; transition: .4s var(--ease); }
.rsv-btn.is-ready:hover { background: var(--aqua); transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(79,125,138,.4); }
.rsv-btn.is-pending { background: var(--paper-2); color: var(--ink-soft); border: 1px dashed var(--aqua); cursor: not-allowed; }
.rsv-pending-note { margin-top: .9rem; font-size: .76rem; color: var(--ink-soft); line-height: 1.95; letter-spacing: .04em; }
@media (max-width: 820px) { .rsv-ways { grid-template-columns: 1fr; } }

/* ===== お知らせ記事（CMS描画時） ===== */
.news-entry { padding: 2.2rem .2rem; border-bottom: 1px solid var(--line); }
.news-entry-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: .9rem; }
.news-entry-head time { font-family: "Cormorant Garamond", serif; letter-spacing: .1em; color: var(--ink-soft); font-size: .86rem; }
.news-entry-head .cat { font-size: .66rem; letter-spacing: .14em; color: var(--aqua-deep); border: 1px solid var(--aqua); padding: .25rem .8rem; border-radius: 100px; }
.news-entry-title { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1rem, 2.1vw, 1.12rem); letter-spacing: .06em; line-height: 1.75; }
.news-entry-body { margin-top: 1.1rem; font-size: .9rem; color: var(--ink-soft); line-height: 2.2; letter-spacing: .04em; }
.news-entry-body p + p { margin-top: 1em; }
.news-entry-body a { color: var(--aqua-deep); text-decoration: underline; }
.news-entry-body ul, .news-entry-body ol { padding-left: 1.4em; margin: .6em 0; }
.news-entry-body img { margin: 1.2rem 0; }

/* ===== YouTube 埋込枠（動画URL確定後に使用） ===== */
.youtube-s { background: var(--white); padding: clamp(4rem, 8vw, 7rem) 0; }
.youtube-frame { position: relative; aspect-ratio: 16/9; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; margin-top: 2.5rem; }
.youtube-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== 院長ページ 引用ブロック ===== */
.doc-quote { background: var(--white); border-top: 2px solid var(--aqua); padding: clamp(1.8rem, 4vw, 2.6rem); }
.doc-quote p { font-family: "Shippori Mincho", serif; font-size: clamp(1rem, 2.1vw, 1.22rem); line-height: 2.05; letter-spacing: .08em; color: var(--ink); }
.doc-quote .sign { margin-top: 1.6rem; font-family: "Cormorant Garamond", serif; font-size: .74rem; letter-spacing: .2em; color: var(--ink-soft); }

/* ===== 症例テンプレ: 施術内容・費用・主なリスク併記欄 ===== */
.case-spec { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; }
.case-spec dt { font-size: .72rem; letter-spacing: .08em; color: var(--aqua-deep); white-space: nowrap; }
.case-spec dd { font-size: .74rem; color: var(--ink-soft); line-height: 1.9; }
/* 料金ページのリスク併記表（項目名の幅を固定して読みやすく／スマホは縦積み） */
.risk-spec { grid-template-columns: 8em 1fr; gap: .7rem 1.2rem; }
.risk-spec dt, .risk-spec dd { font-size: .8rem; }
@media (max-width: 700px) {
  .risk-spec { grid-template-columns: 1fr; gap: .1rem; }
  .risk-spec dt { margin-top: .9rem; }
}

@media (max-width: 400px) {
  .mob-rsv a { font-size: .7rem; letter-spacing: .04em; padding: .85rem .3rem; }
  .mob-rsv { gap: .5rem; }
}

/* ===== 導線カード2枚組 ===== */
.page-cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-left: auto; margin-right: auto; }

/* お知らせ抜粋: カテゴリバッジの左端と「すべて見る」リンクの左端を縦に揃える */
.news-s .news-item { grid-template-columns: 96px auto 1fr auto; }
.news-s .news-more { margin-left: calc(96px + 1.6rem); }
@media (max-width: 900px) {
  .news-s .news-item { grid-template-columns: 72px auto 1fr; }
  .news-s .news-more { margin-left: calc(72px + 1.6rem); }
}

/* =============================================
   2026-08-06 社内FB反映
   A①白の温度 / A②可読性 / A③情報の強弱 / A④奥行き / B改行 / C文章の強弱
   ※淡ブルー基調の色相は変更していない（白の温度と明度のみ調整）
   ============================================= */

/* ---- A① 白の温度: 半透明の白面も温白へ揃える（純白の板が浮かないように） ---- */
.fc-item { background: rgba(253,252,248,.93); }
.mob-rsv { background: rgba(253,252,248,.96); }
.photo-break .caption, .slide-cap { background: rgba(253,252,248,.94); }

/* ---- A① ヒーローの白飛び軽減: 写真の明部を少しだけ沈める（配色は変えず濃度のみ） ---- */
.hero-overlay {
  background:
    linear-gradient(to bottom, rgba(34,52,57,.34) 0%, rgba(34,52,57,0) 16%),
    linear-gradient(to top right, rgba(34,52,57,.62) 0%, rgba(34,52,57,.22) 38%, rgba(34,52,57,.04) 64%),
    linear-gradient(to bottom, rgba(60,82,88,.14) 0%, rgba(60,82,88,.04) 45%, rgba(34,52,57,.34) 100%);
}
.page-hero-overlay {
  background: linear-gradient(to bottom, rgba(48,68,73,.12) 0%, rgba(48,68,73,.06) 30%, rgba(48,68,73,.46) 100%);
}

/* ---- A② 可読性: 注記・小さい文字の細さとコントラストを補正 ---- */
/* C: 文章の強弱。文言は変えず、要所だけ字面を強くする（色付けは本文の中だけに限定） */
b, strong { font-weight: 500; }
p b, p strong, dd b, li b, .ans-in b { color: var(--ink); }
.treat-note { color: var(--aqua-ink); }
.treat-note b { color: var(--aqua-ink); }
.note-box, .note-box span { color: var(--aqua-ink) !important; }   /* 注記ボックス（各ページのインライン指定を上書き） */
/* 「文章として読む」青文字は AA を満たす濃さへ（ボタン等の面色 --aqua-deep は据え置き） */
.price-row .amt, .form-row label, .rsv-info-item .ri-label,
.access-info dt, .news-item .cat, .case-spec dt, .qa .qm,
.doc-info .title { color: var(--aqua-ink); }
.step-p, .case-meta p, .cases-disclaimer, .price-note, .form-notice,
.foot-col a, .foot-col p, .foot-brand p, .kari-note, .trust-item .t-sub,
.access-map .note, .concept-img-caption { color: var(--ink-soft); }
.foot-bottom { color: var(--ink-soft); }

/* ---- A④ 奥行き: 控えめな影とオフセット枠（Aman型の静けさは崩さない） ---- */
.page-card { box-shadow: 0 14px 32px -24px rgba(40,66,74,.5); }
.page-card:hover { box-shadow: 0 26px 52px -20px rgba(40,66,74,.32); }
.trust-band { box-shadow: 0 14px 26px -26px rgba(40,66,74,.65); }
.photo-break .caption, .slide-cap { box-shadow: 0 18px 40px -28px rgba(40,66,74,.6); }
.slider-wrap .slides { box-shadow: 0 20px 46px -34px rgba(40,66,74,.6); }
.doc-frame { box-shadow: 0 24px 48px -30px rgba(40,66,74,.6); }
.rsv-way, .policy-box, .case-block, .access-map { box-shadow: 0 12px 28px -24px rgba(40,66,74,.45); }
/* 写真の左下に1本ずらした枠を敷いて、面に厚みを出す
   ※ .doc-photo-wrap は position:sticky + top:6rem を持つため触らない（relative化するとtopが効いて写真がずれる） */
.concept-img::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--aqua-light);
  transform: translate(-13px, 13px);
  pointer-events: none;
}
.concept-img img { position: relative; }
.concept-img img { box-shadow: 0 24px 48px -32px rgba(40,66,74,.6); }
.concept-img-caption { position: relative; }

/* ---- A③ 情報の強弱: 中核（philosophy / doctor）を大きく、補助（news / access）を控えめに ---- */
.philosophy { padding: clamp(7rem, 13vw, 11.5rem) 0; }
.philosophy-quote { font-size: clamp(1.95rem, 4.6vw, 3.2rem); }
/* 上の clamp が既存の 600px 用指定より後ろに来るため、スマホ値をここで再指定（横あふれ防止） */
@media (max-width: 600px) { .philosophy-quote { font-size: 1.55rem; } }
.philosophy-body { font-size: clamp(.94rem, 1.9vw, 1.04rem); }
.doctor-s { background: var(--white); padding: clamp(6rem, 11.5vw, 10rem) 0; }
.doctor-s .sec-title { font-size: clamp(1.7rem, 3.8vw, 2.5rem); }
.trust-band { background: var(--paper); border-bottom: 0; }
.news-s { padding: clamp(3.4rem, 6vw, 5.2rem) 0; }
.news-s .sec-head { margin-bottom: clamp(1.8rem, 3vw, 2.4rem); }
.news-s .sec-title { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.access-s { padding: clamp(4rem, 7vw, 6.5rem) 0; }

/* ---- B⑦ アクセス: 受付写真（※イメージ） ---- */
.access-visual { display: flex; flex-direction: column; gap: 1.6rem; }
.access-photo { margin: 0; }
.access-photo img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  box-shadow: 0 20px 42px -30px rgba(40,66,74,.6);
}
.access-photo figcaption {
  margin-top: .8rem; font-size: .76rem; color: var(--ink-soft);
  letter-spacing: .06em; line-height: 1.9;
}

/* ---- B⑧ 診療内容: 導入文 + 項目別クリック展開（details/summary・JSなしでも開閉可能） ---- */
.treat-intro-note {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.8rem, 3.5vw, 2.4rem) clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--aqua-pale); border-left: 2px solid var(--aqua);
}
.treat-intro-note .tin-head {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(1.02rem, 2.1vw, 1.2rem); letter-spacing: .07em;
  line-height: 1.7; margin-bottom: .9rem; color: var(--ink);
}
.treat-intro-note p { font-size: clamp(.88rem, 1.7vw, .95rem); color: var(--aqua-ink); line-height: 2.25; letter-spacing: .04em; }
.treat-intro-note p b { color: var(--aqua-ink); }
.note-box b { color: inherit; }
.treat-acc { border-top: 1px solid var(--line); }
.treat-detail { border-bottom: 1px solid var(--line); }
.treat-detail > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.7rem, 3.2vw, 2.4rem) .2rem;
}
.treat-detail > summary::-webkit-details-marker { display: none; }
.treat-detail > summary:hover .t-name { color: var(--aqua-deep); }
/* 旧 .treat-item .t-name の見え方を details 版でも維持する */
.treat-detail .t-name {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(1.05rem, 2.3vw, 1.3rem); letter-spacing: .06em; line-height: 1.7;
  transition: color .35s var(--ease);
}
.treat-detail .t-name .en-s {
  display: block; font-family: "Cormorant Garamond", serif;
  font-size: .75rem; letter-spacing: .22em; color: var(--aqua);
  margin-bottom: .5rem; font-weight: 400;
}
.treat-detail .t-lead {
  display: block; margin-top: .7rem;
  font-size: clamp(.85rem, 1.6vw, .93rem); color: var(--ink-soft); line-height: 2.1;
}
.treat-detail .t-mark { width: 20px; height: 20px; position: relative; flex-shrink: 0; }
.treat-detail .t-mark::before, .treat-detail .t-mark::after {
  content: ""; position: absolute; background: var(--aqua-deep); transition: transform .4s var(--ease);
}
.treat-detail .t-mark::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.treat-detail .t-mark::after { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
.treat-detail[open] .t-mark::after { transform: translateX(-50%) scaleY(0); }
.treat-detail-body {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start;
  padding: 0 .2rem clamp(2.2rem, 4vw, 3rem);
}
.treat-detail-body p { font-size: clamp(.88rem, 1.7vw, .95rem); color: var(--ink-soft); line-height: 2.35; }
.treat-detail-body figure { margin: 0; }
.treat-detail-body img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  box-shadow: 0 18px 38px -28px rgba(40,66,74,.6);
}
.treat-detail-body figcaption { margin-top: .7rem; font-size: .72rem; color: var(--ink-soft); letter-spacing: .06em; }
@media (max-width: 760px) {
  .treat-detail-body { grid-template-columns: 1fr; }
}

/* ---- B⑪ 改行対策（390px想定）: 4〜6文字のラベルが折り返さない幅・字間に ---- */
/* 最大の原因: 後から足した .page-cards-grid.cols-2 が 700px用の1カラム指定より詳細度が高く、
   スマホでも2カラム(実測約140px幅)のままになっていた。→「診療内容」「クリニックについて」
   「詳しく見る」等が数文字で改行していた。ここで1カラムに戻す。 */
@media (max-width: 700px) {
  .page-cards-grid, .page-cards-grid.cols-2 { grid-template-columns: 1fr; }
}
.access-info dt { width: 8.4em; padding-right: 1.1rem; white-space: nowrap; }
.access-info dd { margin-left: 8.4em; }
@media (max-width: 460px) {
  /* 信頼バッジ: 2カラム時に「診察・デザイン料込み」等が折れないよう字間だけ詰める（サイズは維持） */
  .trust-item .t-label { letter-spacing: .02em; }
  .trust-item { padding-left: .35rem; padding-right: .35rem; }
  /* 英字アイブロウ: 超字間のまま数字番号の右カラムに入ると折り返すため、字間を弱める */
  .str-body .eyebrow, .page-card-body .eyebrow { letter-spacing: .18em; font-size: .66rem; }
  .str-body .eyebrow::before, .page-card-body .eyebrow::before { width: 18px; }
  .eyebrow { letter-spacing: .3em; }
  /* フッターの英見出し・下部注記 */
  .foot-col h6 { letter-spacing: .16em; }
  .foot-bottom { font-size: .66rem; }
  /* モバイル固定バー */
  .mob-rsv a { letter-spacing: .04em; }
  /* 予約導線カードの英ラベル */
  .rsv-way .way-no { letter-spacing: .22em; }
  .price-row.head { letter-spacing: .16em; }
}

/* first.html 冒頭コピー: 390pxで指定の一文が3行に割れないよう、見出しだけ少し詰める */
@media (max-width: 460px) {
  /* 最長行「何をすればいいか分からない」でも、＝18文字が345pxに収まる値（実測で調整） */
  .first-lead-title { font-size: 1.12rem !important; letter-spacing: .04em !important; }
}

/* ---- A② スマホの本文サイズを1〜2px上げる（FB④「スマホで読みにくい」） ---- */
@media (max-width: 700px) {
  body { line-height: 1.95; }
  .philosophy-body, .philosophy-body p, .concept-text p, .doc-msg, .str-body p,
  .treat-detail-body p, .treat-detail .t-lead, .page-card-body p, .reserve-intro p,
  .policy-box p, .rsv-way p, .qa .ans-in, .news-entry-body, .price-desc,
  .access-info dd, .cta-light-content p, .treat-intro-note p, .treatment-intro .lead,
  .doc-quote p, .career dd { font-size: .95rem; }
  .step-p, .price-note, .case-meta p, .cases-disclaimer, .form-notice,
  .foot-col a, .foot-col p, .foot-brand p, .kari-note, .trust-item .t-sub,
  .access-photo figcaption, .rsv-pending-note, .cta-light-policy,
  .concept-img-caption, .foot-test { font-size: .84rem; }
  .qa .qt { font-size: .95rem; }   /* 1remまで上げると15文字の設問が2行に割れるため */
  .qa button { gap: 1.1rem; }
  .price-row .name { font-size: 1rem; }
  .price-row .name small { font-size: .82rem; }
  .treat-note { font-size: .93rem; }
  .quals span, .news-item .cat { font-size: .78rem; }
}

/* ============================================================
   2026-09-02 院長フィードバック対応
   「予約への導線を、もっと分かりやすく」
   - 右上の予約ボタン: 白線＋白文字で背景写真に埋もれていた → テーマカラーの塗りへ
   - 右端の固定タブ: 文字もアイコンも小さく、3つが同列で優先順位が分からなかった
     → Web予約を主・LINE/Instagramを従にして、大きさとコントラストで差をつける
   ============================================================ */

/* ---- 右上「ご予約」を塗りボタンに ---- */
.btn-rsv {
  font-size: .78rem;
  letter-spacing: .16em;
  color: #fff;
  background: var(--aqua-deep);
  border: 1px solid var(--aqua-deep);
  padding: .82rem 1.9rem;
  box-shadow: 0 2px 14px rgba(79,125,138,.3);
}
.btn-rsv:hover {
  background: var(--aqua-ink);
  border-color: var(--aqua-ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(79,125,138,.4);
}
/* ヒーロー上でも塗りを維持する（従来は白線＋白文字で埋もれていた） */
header.hero-zone .btn-rsv {
  color: #fff;
  background: var(--aqua-deep);
  border-color: var(--aqua-deep);
  text-shadow: none;
  box-shadow: 0 2px 16px rgba(34,52,57,.35);
}
header.hero-zone .btn-rsv:hover { background: var(--aqua-ink); border-color: var(--aqua-ink); }

/* ---- 右端の固定タブ：Web予約を主役にする ---- */
.fc-item {
  width: 60px;
  height: 78px;
  gap: .45rem;
}
.fc-item svg { width: 19px; height: 19px; }
.fc-item span { font-size: .58rem; letter-spacing: .06em; }

.fc-rsv {
  width: 68px;
  height: 98px;
  background: var(--aqua-deep);
  border-color: var(--aqua-deep);
  box-shadow: -2px 0 14px rgba(79,125,138,.26);
}
.fc-rsv svg { width: 23px; height: 23px; }
.fc-rsv span {
  font-size: .64rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .04em;
}
.fc-rsv:hover { background: var(--aqua-ink); }

/* ---- モバイル下部バーもWeb予約を主に ---- */
.mob-rsv .web {
  background: var(--aqua-deep);
  color: #fff;
  font-weight: 500;
}


/* 「注入治療に特化」を加えて5項目に */
.trust-band .wrap { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .trust-band .wrap { grid-template-columns: repeat(2, 1fr); }
  /* 折り返した先頭列に縦罫が出るのを消す（元の定義が .trust-item + .trust-item なので同じ詳細度で上書きする） */
  .trust-item + .trust-item:nth-child(odd)::before { display: none; }
}
@media (max-width: 520px) {
  .trust-band .wrap { grid-template-columns: 1fr; }
  .trust-item + .trust-item::before { display: none; }
  .trust-item { padding-top: 2rem; padding-bottom: 2rem; }
  .trust-item + .trust-item { border-top: 1px solid var(--line); }
}

/* ============================================================
   開院前ページ（ティザー）
   2026年9月〜10月上旬のみ使う。正式公開後は使われない。
   既存のトークン（--aqua-deep / --sand / --paper 等）だけで組み、
   新しい色は足していない。
   ============================================================ */

/* ヘッダーのブランド表示（開院前は院名の代わりに場所と診療内容） */
.brand-link.brand-teaser b {
  font-family: "Shippori Mincho", serif;
  font-size: .92rem; letter-spacing: .1em; font-weight: 500; text-transform: none;
}
.brand-link.brand-teaser span {
  letter-spacing: .16em; font-size: .58rem; text-transform: none;
}

/* ---------- ヒーロー ---------- */
.ts-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, var(--paper) 0%, var(--aqua-pale) 46%, var(--white) 100%);
  padding: clamp(7rem, 17vw, 12rem) 0 clamp(7rem, 14vw, 11rem);
}
/* 弧が本文の文字に重なって読みづらい、というご指摘（2026-09-07）。
   高さを抑えて下端に寄せ、本文より後ろに置く。 */
.ts-arc {
  position: absolute; inset: auto 0 -1px 0; height: 22%;
  pointer-events: none; z-index: 0; opacity: .55;
}
.ts-hero .wrap { position: relative; z-index: 1; }
.ts-arc svg { width: 100%; height: 100%; display: block; }
.ts-hero h1 {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(1.85rem, 5.2vw, 3.3rem); line-height: 1.62; letter-spacing: .07em;
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); color: var(--ink); position: relative;
}
.ts-lead {
  font-size: clamp(.92rem, 1.5vw, 1.02rem); line-height: 2.3; color: var(--ink-soft);
  margin: 0 0 1.8rem; letter-spacing: .05em; position: relative;
}
.ts-note {
  display: inline-block; font-size: .84rem; line-height: 2; color: var(--aqua-ink);
  border-left: 2px solid var(--sand); padding: .1rem 0 .1rem 1rem;
  margin: 0; letter-spacing: .04em; position: relative;
}

/* ---------- ごあいさつ ---------- */
.ts-greet { background: var(--white); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.ts-greet h2, .ts-scope h2, .ts-stance h2, .ts-read h2, .ts-plan h2, .ts-info h2 {
  font-family: "Shippori Mincho", serif; font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem); letter-spacing: .1em;
  margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--ink);
}
.ts-greet-body { max-width: 40em; }
.ts-greet-body p {
  font-size: .93rem; line-height: 2.5; color: var(--ink-soft);
  letter-spacing: .045em; margin: 0 0 1.5rem;
}
.ts-sign {
  font-family: "Shippori Mincho", serif; font-size: 1rem; color: var(--ink);
  letter-spacing: .12em; margin-top: 2.6rem !important; padding-top: 1.6rem;
  border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.ts-sign small {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: .74rem; color: var(--ink-soft); letter-spacing: .04em;
}

/* ---------- 診療について ---------- */
.ts-scope { background: var(--paper); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.ts-scope-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: 2.6rem;
}
/* 「行う／行わない」の対置をやめ、専門とする治療だけを示す形にした（2026-09-07 院長ご指摘）。
   1枠になったので、横に間延びしないよう幅を抑えて左に置く。 */
.ts-scope-single {
  background: var(--white); border: 1px solid var(--line);
  border-top: 2px solid var(--aqua-deep);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(2rem, 4vw, 3rem);
  margin-bottom: 2.6rem; max-width: 26em;
}
.ts-scope-single h3 {
  font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 1.02rem;
  letter-spacing: .1em; margin: 0 0 1.3rem; padding-bottom: .8rem;
  color: var(--aqua-deep); border-bottom: 1px solid var(--aqua-light);
}
.ts-scope-single ul { list-style: none; margin: 0; padding: 0; }
.ts-scope-single li {
  font-size: .96rem; line-height: 2.5; letter-spacing: .05em; color: var(--ink);
  padding-left: 1.5rem; position: relative;
}
.ts-scope-single li::before {
  content: ""; position: absolute; left: 0; top: 1.1em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--aqua-deep);
}
.ts-scope-col { background: var(--white); padding: clamp(1.8rem, 3.5vw, 2.6rem); }
.ts-scope-col h3 {
  font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 1.02rem;
  letter-spacing: .1em; margin: 0 0 1.3rem; padding-bottom: .8rem;
}
.ts-do h3    { color: var(--aqua-deep); border-bottom: 1px solid var(--aqua-light); }
.ts-dont h3  { color: var(--ink-soft);  border-bottom: 1px solid var(--line); }
.ts-scope-col ul { list-style: none; margin: 0; padding: 0; }
.ts-scope-col li {
  font-size: .92rem; line-height: 2.4; letter-spacing: .04em; color: var(--ink-soft);
  padding-left: 1.4rem; position: relative;
}
.ts-do li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--aqua-deep);
}
.ts-dont li::before {
  content: ""; position: absolute; left: 0; top: 1.35em;
  width: 8px; height: 1px; background: var(--ink-soft); opacity: .5;
}
.ts-scope-note {
  font-size: .88rem; line-height: 2.3; color: var(--ink-soft);
  letter-spacing: .04em; max-width: 44em; margin: 0;
}

/* ---------- 診療の姿勢 ---------- */
.ts-stance { background: var(--white); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.ts-stance-list { list-style: none; margin: 0; padding: 0; }
.ts-stance-list li {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 0 1.2rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0; border-top: 1px solid var(--line);
}
.ts-stance-list li:last-child { border-bottom: 1px solid var(--line); }
.ts-n {
  font-family: "Cormorant Garamond", serif; font-size: 1.55rem;
  color: var(--aqua-deep); letter-spacing: .08em; line-height: 1.3;
}
.ts-stance-list h3 {
  font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 1.02rem;
  letter-spacing: .08em; margin: 0 0 .7rem; color: var(--ink);
}
.ts-stance-list p {
  font-size: .89rem; line-height: 2.25; color: var(--ink-soft);
  letter-spacing: .04em; margin: 0; max-width: 42em;
}

/* ---------- 読みもの ---------- */
.ts-read { background: var(--paper); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.ts-read-lead {
  font-size: .89rem; line-height: 2.3; color: var(--ink-soft);
  letter-spacing: .04em; max-width: 44em; margin: -1.4rem 0 2.8rem;
}
.ts-read-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.ts-read-card {
  display: block; background: var(--white); text-decoration: none; color: inherit;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.ts-read-card:hover { transform: translateY(-4px); box-shadow: 0 12px 34px rgba(79,125,138,.13); }
.ts-read-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.ts-read-txt { padding: 1.4rem 1.5rem 1.7rem; }
.ts-read-txt h3 {
  font-family: "Shippori Mincho", serif; font-weight: 500; font-size: .97rem;
  line-height: 1.75; letter-spacing: .05em; margin: 0 0 .8rem; color: var(--ink);
}
.ts-read-txt p {
  font-size: .8rem; line-height: 2; color: var(--ink-soft); letter-spacing: .03em; margin: 0;
}

/* ---------- 開院までの予定 ---------- */
.ts-plan { background: var(--white); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.ts-plan-list { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.ts-plan-list li {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.4rem; align-items: baseline;
  padding: 1.1rem 0 1.1rem 1.6rem; position: relative; border-left: 1px solid var(--line);
}
.ts-plan-list li::before {
  content: ""; position: absolute; left: -4.5px; top: 1.75rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line);
}
.ts-plan-list li.is-done::before { background: var(--aqua-deep); border-color: var(--aqua-deep); }
.ts-plan-list li.is-goal::before { background: var(--sand); border-color: var(--sand); width: 11px; height: 11px; left: -5.5px; }
.ts-when {
  font-family: "Shippori Mincho", serif; font-size: .92rem;
  letter-spacing: .07em; color: var(--aqua-ink);
}
.ts-what { font-size: .89rem; line-height: 2.1; color: var(--ink-soft); letter-spacing: .04em; }
.ts-plan-list li.is-goal .ts-when,
.ts-plan-list li.is-goal .ts-what { color: var(--ink); font-weight: 500; }
.ts-plan-note { font-size: .84rem; color: var(--ink-soft); letter-spacing: .04em; margin: 0; }

/* ---------- 概要 ---------- */
.ts-info { background: var(--paper); padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.ts-table { width: 100%; border-collapse: collapse; max-width: 46em; }
.ts-table th, .ts-table td {
  text-align: left; vertical-align: top; padding: 1.15rem 1rem;
  border-bottom: 1px solid var(--line); font-size: .89rem; line-height: 2.1; letter-spacing: .04em;
}
.ts-table th {
  font-family: "Shippori Mincho", serif; font-weight: 500; color: var(--aqua-ink);
  white-space: nowrap; width: 1%; padding-left: 0;
}
.ts-table td { color: var(--ink-soft); }
.ts-table small {
  display: block; font-size: .76rem; color: var(--ink-soft); opacity: .8; margin-top: .3rem;
}

@media (max-width: 900px) {
  .ts-read-list { grid-template-columns: 1fr; }
  .ts-scope-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ts-stance-list li { grid-template-columns: 3.2rem 1fr; }
  .ts-plan-list li { grid-template-columns: 1fr; gap: .3rem; }
  .ts-table th { display: block; padding-bottom: .3rem; border-bottom: none; }
  .ts-table td { display: block; padding-top: 0; padding-left: 0; }
}

/* スマートフォンでだけ改行する（見出しの末尾が2文字だけ折り返すのを防ぐ） */
.br-sp { display: none; }
@media (max-width: 520px) { .br-sp { display: inline; } }

/* ---------- 開院前ページ：スマートフォンでの調整 ---------- */
@media (max-width: 640px) {
  /* ヘッダーのブランド名が2行に割れて「注入治療専／門クリニック」と分断されていた */
  .brand-link.brand-teaser b {
    font-size: .76rem; letter-spacing: .04em; white-space: nowrap;
  }
  .brand-link.brand-teaser span { font-size: .54rem; letter-spacing: .1em; }

  /* ヒーロー：上下の余白が 17vw = 66px しかなく窮屈だった */
  .ts-hero { padding: 5.5rem 0 4.5rem; }

  .ts-hero h1 { font-size: 1.6rem; line-height: 1.95; letter-spacing: .05em; margin-bottom: 1.6rem; }
  .ts-lead { font-size: .87rem; line-height: 2.15; margin-bottom: 1.4rem; }
  .ts-note { font-size: .78rem; line-height: 1.95; padding-left: .8rem; }

  /* 各セクションの見出しと本文も、画面幅に合わせて詰める */
  .ts-greet, .ts-scope, .ts-stance, .ts-read, .ts-plan, .ts-info { padding: 3.6rem 0; }
  .ts-greet-body p { font-size: .87rem; line-height: 2.25; }
  .ts-scope-col { padding: 1.5rem 1.4rem; }
  .ts-stance-list p, .ts-scope-note, .ts-read-lead, .ts-what { font-size: .85rem; }
}

/* 弧が本文の文字に重なって読みづらい、という院長ご指摘（2026-09-07）。
   画面が広いときだけ、本文の下を通る位置に出す。
   1100px以下では本文が縦に伸びて重なるので、出さない。 */
@media (max-width: 1100px) {
  .ts-arc { display: none; }
}

/* ===== 正式ロゴ =====
   縦組みの正式ロゴから、マーク・和文・英文をベクターのまま取り出し横に並べたもの。
   各パーツの形と和文・英文の位置関係は原本のまま。 */
.brand-link.brand-logo { gap: 0; }
.brand-logo img { display: block; height: 44px; width: auto; transition: height .5s var(--ease), filter .4s; }
header.scrolled .brand-logo img { height: 38px; }
/* トップの写真の上（スクロール前）だけ、ナビと同じく白抜きで見せる。
   スクロールすると背景が白くなるので、白抜きのままだと消える */
header.hero-zone:not(.scrolled) .brand-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(34,52,57,.5)); }
@media (max-width: 700px) {
  .brand-logo img { height: 30px; }
  header.scrolled .brand-logo img { height: 28px; }
}

/* ===== アクセス：主要駅からの所要時間 =====
   「1駅1行で、駅→路線→乗り換え→四谷三丁目駅と流れる形」。イラストは使わない。
   HTMLの文字で組み、画像にしない（検索・読み上げのため）。
   広い画面：各行を細い点線でつなぎ、右の「四谷三丁目駅」に入る。丸ノ内線の区間は4行とも同じ列（6列目）にそろえる。
   900px以下：各行を縦の流れに切り替え、最後に「四谷三丁目駅」を出す。
   路線の色（東京メトロの路線カラー）は路線名の前の小さな印だけ。色だけで区別せず、路線名を必ず書く。 */
.route-block {
  --c-m: #f62e36;   /* 丸ノ内線 */
  --c-f: #9c5e31;   /* 副都心線 */
  --rt-dot: repeating-linear-gradient(90deg, var(--aqua) 0 3px, transparent 3px 7px);
  margin-top: clamp(4rem, 8vw, 6rem);
}
.route-block .sec-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.route-lead { margin-top: 1rem; font-size: .9rem; color: var(--ink-soft); line-height: 2.1; }
.route-map {
  display: grid; grid-template-columns: 1fr clamp(9.8rem, 13vw, 10.8rem);
  background: var(--white);
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.2rem, 2.6vw, 2.2rem);
  box-shadow: 0 12px 28px -24px rgba(40,66,74,.45);
}
.route-list { list-style: none; display: grid; row-gap: .9rem; }
.route { display: grid; grid-template-columns: 14em 1fr; align-items: center; }
.rt-from { display: flex; align-items: center; gap: .8rem; min-height: 5.6rem; padding: .7rem .9rem; background: var(--aqua-pale); }
.rt-ico { flex: none; width: 5rem; height: 3.9rem; object-fit: contain; object-position: center bottom; }
.rt-name { display: flex; flex-direction: column; line-height: 1.6; }
.rt-sta { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 1.12rem; letter-spacing: .08em; color: var(--ink); }
.rt-sum { font-size: .74rem; color: var(--ink-soft); letter-spacing: .03em; white-space: nowrap; }

/* 流れ：行の端から端まで点線を1本引き、区間の札をその上に置く。札の左に小さな三角 */
.rt-flow {
  position: relative; display: grid; align-items: center;
  grid-template-columns: .8fr 10.2em 1fr 7.4em 1fr 10.6em 1fr;
  background: var(--rt-dot) left center / 100% 1.5px no-repeat;
}
.rt-flow::after {   /* 右端の三角＝四谷三丁目駅へ入る */
  content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 8px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8'%3E%3Cpath d='M0 0L6 4L0 8z' fill='%237ba6b3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rt-step {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3.9rem; padding: .45rem .4rem; background: var(--white); border: 1px solid var(--line);
  text-align: center; font-size: .74rem; line-height: 1.55; letter-spacing: .02em; color: var(--ink-soft);
}
.rt-line { white-space: nowrap; }   /* 「東京メトロ丸ノ内線／で」のような泣き別れを防ぐ */
.rt-step::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 6px; height: 8px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8'%3E%3Cpath d='M0 0L6 4L0 8z' fill='%237ba6b3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rt-f { grid-column: 2; }
.rt-x { grid-column: 4; background: var(--aqua-pale); border-color: var(--aqua-pale); }
.rt-m { grid-column: 6; }
.rt-f .rt-line::before, .rt-m .rt-line::before {   /* 路線の印 */
  content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .35em; vertical-align: .05em; background: var(--c-m);
}
.rt-f .rt-line::before { background: var(--c-f); }
.rt-min { font-size: 1.16rem; font-weight: 500; letter-spacing: .06em; line-height: 1.4; color: var(--aqua-ink); }
.rt-xsta { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: .9rem; letter-spacing: .04em; color: var(--ink); }
.rt-end { display: none; }

/* 到着駅：4行の流れがここに入る */
.route-to {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background: var(--aqua-light); text-align: center; padding: 1rem .6rem;
}
.rt-to-ico { width: 5.2rem; height: 4.4rem; object-fit: contain; object-position: center bottom; margin-bottom: .4rem; }
.rt-to-sta { font-family: "Shippori Mincho", serif; font-weight: 500; font-size: clamp(1.08rem, 1.6vw, 1.32rem); letter-spacing: .08em; line-height: 1.5; color: var(--ink); }
.rt-to-line { font-size: .74rem; color: var(--ink-soft); letter-spacing: .03em; white-space: nowrap; }
.rt-to-line::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .35em; vertical-align: .05em; background: var(--c-m); }

.route-note { margin-top: 1.4rem; font-size: .8rem; color: var(--ink-soft); line-height: 2.1; letter-spacing: .03em; }

/* ---- 901〜1080px：駅の枠を「絵の下に駅名」にして幅を詰める ---- */
@media (min-width: 901px) and (max-width: 1080px) {
  .route { grid-template-columns: 8.6em 1fr; }
  .rt-from { flex-direction: column; align-items: flex-start; gap: .35rem; padding: .7rem .8rem; }
  .rt-ico { width: 3.6rem; height: 2.6rem; object-position: left bottom; }
}
/* ---- 900px以下：各行を縦の流れに（800px前後では横の形だと右の到着駅がはみ出すため） ---- */
@media (max-width: 900px) {
  .route-map { grid-template-columns: 1fr; padding: 1rem clamp(1rem, 4vw, 1.6rem) 1.2rem; }
  .route-to { display: none; }
  .route-list { row-gap: 1.4rem; max-width: 34rem; }
  .route { grid-template-columns: 1fr; }
  .rt-from { min-height: 0; padding: .55rem .9rem; gap: .9rem; }
  .rt-ico { width: 3.2rem; height: 2.6rem; }
  .rt-name { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .9em; }
  .rt-flow {
    display: flex; flex-direction: column; align-items: stretch; gap: .75rem;
    padding: .75rem 0 0 1.6rem;
    background: repeating-linear-gradient(180deg, var(--aqua) 0 3px, transparent 3px 7px) .95rem 0 / 1.5px 100% no-repeat;
  }
  .rt-flow::after { display: none; }
  .rt-step { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; column-gap: .6em; min-height: 0; padding: .55rem .8rem; text-align: left; }
  .rt-step::before { left: calc(-.65rem - 4px); width: 8px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0L8 0L4 6z' fill='%237ba6b3'/%3E%3C/svg%3E"); }
  .rt-f, .rt-x, .rt-m { grid-column: auto; }
  .rt-min { font-size: 1.04rem; }
  .rt-end {
    display: block; position: relative; margin: .75rem 0 0 1.6rem; padding: .55rem .8rem; background: var(--aqua-light);
    font-family: "Shippori Mincho", serif; font-weight: 500; font-size: 1rem; letter-spacing: .06em; color: var(--ink);
  }
  .rt-end::before {
    content: ""; position: absolute; left: calc(-.65rem - 4px); top: 50%; width: 8px; height: 6px; transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0L8 0L4 6z' fill='%237ba6b3'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
@media (max-width: 600px) {
  .route-lead, .route-note { font-size: .88rem; }
}

/* =============================================
   トップの最初の画面は受付の内装（実際の写真が撮れたら差し替える）。
   院内の画像には「※ イメージ」を添える
   ============================================= */
.hero-bg img { object-position: 50% 50%; }
@media (max-width: 900px) {
  /* 縦長の画面では、受付カウンターの右側と壁のロゴが入る位置 */
  .hero-bg img { object-position: 66% 50%; }
}
.hero-content .hero-note {
  margin-top: 1.2rem;
  font-size: .68rem; letter-spacing: .12em;
  color: rgba(255,255,255,.78);
}

/* トップの院長紹介: 写真（1）が縦長になったので枠も縦長に */
.doc-frame { aspect-ratio: 4 / 5; }
.doc-frame img { object-position: center 12%; }
@media (max-width: 900px) {
  .doc-frame { aspect-ratio: 4 / 5; max-width: 360px; }
}

/* =============================================
   スマホでもPCでも不自然な改行が出ないようにする
   見出しは行の長さをそろえ（balance）、本文は最後の行が1〜2文字だけにならないようにする（pretty）。
   どちらも対応していないブラウザでは今までどおりの改行になるだけで、表示は崩れない
   ============================================= */
h1, h2, h3, h4, .sec-title, .name, dt, summary, .qt, figcaption { text-wrap: balance; }
p, li, dd, td, th, small, .t-lead, .foot-test, .note { text-wrap: pretty; }
/* 最後の5文字を途中で折り返さない塊にする（common.js が付ける） */
.nw { white-space: nowrap; }
/* 見出し・短い文は文節の切れ目（common.js が入れる <wbr>）でだけ折る。入りきらない長さのときは今までどおり折れる */
.pw { word-break: keep-all; overflow-wrap: anywhere; }
/* トップの院長紹介の見出し: 改行を指定した1行（「この先生に相談したい」と）が、
   PC の広い画面（1536px〜・欄が約555px）でもスマホ（375px・欄が約330px）でも1行に収まる大きさにする */
.doctor-s .sec-title { font-size: clamp(1.3rem, 5.8vw, 2.2rem); }
@media (max-width: 600px) {
  /* お知らせの一覧: 題名の欄が約7文字分しかなく「まちこビューテ｜ィクリニック」と折れていた。日付と種類を1行目、題名を2行目に */
  .news-item, .news-s .news-item { grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .45rem; }
  .news-item .cat { justify-self: start; }
  .news-item p { grid-column: 1 / -1; }
  /* アクセスの表: 項目名の欄が左に幅を取り、院名が入り切らなかった。項目名を上、中身を下に */
  .access-info dt { float: none; width: auto; padding-bottom: .15rem; border-bottom: 0; }
  .access-info dd { margin-left: 0; padding-top: 0; }
}

/* =============================================
   ロゴを大きく目立たせ、トップの院長紹介の写真は全体のバランスに合う大きさに抑える
   ============================================= */
.brand-logo img { height: 56px; }
header.scrolled .brand-logo img { height: 46px; }
@media (max-width: 700px) {
  .brand-logo img { height: 38px; }
  header.scrolled .brand-logo img { height: 34px; }
}
/* 写真の枠だけ（院長プロフィールの同じ枠には引用文が入るので除く） */
.doctor-inner .doc-photo-wrap:has(.doc-frame) { max-width: 340px; justify-self: center; width: 100%; }
@media (max-width: 900px) {
  .doctor-inner .doc-photo-wrap:has(.doc-frame) { max-width: 280px; }
  .doc-frame { max-width: 280px; }
}
/* アクセス：Google マップと、駅からの道順の図 */
.access-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.access-guide { margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; max-width: 880px; }
.access-guide img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.access-guide figcaption { margin-top: .6rem; font-size: .78rem; color: var(--ink-soft); }