/* ============================================================
   司歯科医院 — main stylesheet
   ============================================================ */
@import url("tokens.css");

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  /* 日本語の改行位置。strict = 小書き仮名や長音符の前で折り返さない、
     auto-phrase = 文節の切れ目で折り返す (Chromium 系のみ。他は従来動作) */
  line-break: strict;
  word-break: auto-phrase;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--content-width); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: var(--content-narrow); }
.site-main { padding-right: var(--rail-width); }
@media (max-width: 900px) { .site-main { padding-right: 0; } }

section { padding-block: var(--space-section); }
section.is-warm { background: var(--color-bg-warm); }

/* ---------- typography ---------- */
.heading {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  margin-bottom: calc(var(--space-block) * 1.1);
}
.heading::after {
  content: "";
  display: block;
  width: 3.2em; height: 1px;
  margin: 1.1rem auto 0;
  background: var(--color-gold);
}
.heading--left { text-align: left; }
.heading--left::after { margin-left: 0; }

.subheading {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--color-accent-deep);
  margin-bottom: 1.25rem;
  padding-left: 0.9em;
  border-left: 3px solid var(--color-accent);
}
.lead { font-size: var(--text-lead); text-align: center; text-wrap: balance; max-width: 42em; margin-inline: auto; }
@media (max-width: 640px) { .lead { text-align: left; text-wrap: wrap; } }
.note { font-size: 0.8125rem; color: var(--color-text-weak); line-height: 1.9; }
/* 建物名+階数や電話番号が途中で折り返されないようにする */
.nobr { white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; justify-content: center; align-items: center;
  min-width: 220px; padding: 0.9em 2.2em;
  font-family: var(--font-serif);
  font-size: 0.9375rem; letter-spacing: 0.2em;
  color: var(--color-accent-deep);
  border: 1px solid var(--color-accent);
  background: transparent;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--color-accent); color: #fff; }
.btn--fill { background: var(--color-accent); color: #fff; }
.btn--fill:hover, .btn--fill:focus-visible { background: var(--color-accent-dark); }
.btn-row { text-align: center; margin-top: var(--space-block); }

/* ---------- header / logo ---------- */
.site-logo {
  position: absolute; top: 0; left: 0; z-index: 20;
  background: var(--color-white);
  padding: 1.1rem 1.6rem 1.2rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.site-logo__mark {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--color-accent);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 1.6rem; color: var(--color-accent-deep);
}
.site-logo__name { font-family: var(--font-logo); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.24em; }
.site-logo__en { font-size: 0.5625rem; letter-spacing: 0.28em; color: var(--color-text-weak); }
@media (max-width: 640px) {
  .site-logo { padding: 0.8rem 1.1rem 0.9rem; }
  .site-logo__mark { width: 42px; height: 42px; font-size: 1.25rem; }
  .site-logo__name { font-size: 0.8125rem; }
}

/* ---------- right rail nav (desktop) ---------- */
.rail {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: var(--rail-width);
  background: var(--color-white);
  border-left: 1px solid var(--color-line);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
}
.rail a {
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
  padding: 1.15rem 0.25rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-align: center;
  color: var(--color-text);
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.rail a:first-child { border-top: none; }
.rail a:hover, .rail a:focus-visible { color: var(--color-accent-dark); background: var(--color-bg-warm); }
.rail svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.rail a.is-accent { background: var(--color-accent); color: #fff; }
.rail a.is-accent:hover { background: var(--color-accent-dark); }
@media (max-width: 900px) { .rail { display: none; } }

/* ---------- mobile bottom bar ---------- */
.mobile-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
}
.mobile-bar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.6rem 0.25rem calc(0.6rem + env(safe-area-inset-bottom));
  font-size: 0.625rem; letter-spacing: 0.04em;
}
.mobile-bar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.mobile-bar a.is-accent { background: var(--color-accent); color: #fff; }
@media (max-width: 900px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 64px; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding: 0; }
.hero__img { width: 100%; height: min(78vh, 720px); object-fit: cover; display: block; }
/* 見出しの下に光の帯を敷く。写真を差し替えても左側のコピーが必ず読める */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.94) 0%,
    rgba(255,255,255,0.82) 18%,
    rgba(255,255,255,0.38) 32%,
    rgba(255,255,255,0) 46%);
}
.hero__copy {
  position: absolute; z-index: 1; top: 50%; left: clamp(1.5rem, 7vw, 7rem);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 500; letter-spacing: 0.32em; line-height: 2.1;
  color: var(--color-text);
  text-shadow: 0 0 16px rgba(255,255,255,0.9);
}
@media (max-width: 640px) {
  .hero__img { height: 66vh; }
  .hero::after {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.78) 26%,
      rgba(255,255,255,0) 56%);
  }
}

/* ---------- care cards ---------- */
.care-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.care-card { display: flex; flex-direction: column; background: var(--color-white); }
.care-card__photo { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.care-card__title {
  font-family: var(--font-serif); font-size: 1.125rem; font-weight: 500;
  letter-spacing: 0.16em; text-align: center;
  background: var(--color-white);
  margin: -1.6rem auto 0; padding: 0.7rem 1.6rem;
  position: relative; min-width: 72%;
}
.care-card__body { padding: 1rem 1.4rem 1.6rem; flex: 1; font-size: 0.9375rem; }
.care-card__foot { padding: 0 1.4rem 1.8rem; text-align: center; }
.care-card__foot .btn { min-width: 170px; padding: 0.7em 1.4em; font-size: 0.875rem; }
@media (max-width: 800px) { .care-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* sub menu (small cards) */
.sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.sub-card { display: flex; align-items: center; gap: 1rem; background: var(--color-white); border: 1px solid var(--color-line); padding: 0.8rem; transition: border-color var(--duration) var(--ease); }
.sub-card:hover { border-color: var(--color-accent); }
.sub-card img { width: 84px; height: 62px; object-fit: cover; flex-shrink: 0; }
.sub-card span { font-family: var(--font-serif); font-size: 0.9375rem; letter-spacing: 0.1em; }
@media (max-width: 800px) { .sub-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- feature strip ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.feature { text-align: center; padding: 0 0.5rem; }
.feature__num { font-family: var(--font-serif); font-size: 0.8125rem; letter-spacing: 0.3em; color: var(--color-gold); }
.feature__title { font-family: var(--font-serif); font-size: 1.125rem; letter-spacing: 0.14em; margin: 0.5rem 0 0.9rem; }
.feature p { font-size: 0.9063rem; text-align: left; }
@media (max-width: 800px) { .features { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- proof band (実写真 + キャプション) ---------- */
.proof { margin-top: var(--space-block); }
.proof img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.proof figcaption {
  font-size: 0.8125rem; color: var(--color-text-weak); line-height: 1.9;
  margin-top: 0.7rem; text-align: center; text-wrap: balance;
}
@media (max-width: 640px) { .proof img { aspect-ratio: 4 / 3; } }

/* ---------- concept ---------- */
.concept { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.concept__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 縦位置写真を置く場合。上下の余白は本文側と揃える */
.concept--portrait { grid-template-columns: 0.8fr 1fr; }
.concept--portrait .concept__img img { aspect-ratio: 3 / 4; }
@media (max-width: 800px) {
  .concept, .concept--portrait { grid-template-columns: 1fr; }
  .concept--portrait .concept__img img { aspect-ratio: 4 / 3; }
}

/* ---------- schedule / access ---------- */
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 800px) { .access-grid { grid-template-columns: 1fr; } }
.map-embed { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; }

.schedule { width: 100%; font-size: 0.9375rem; background: var(--color-white); }
.schedule th, .schedule td { border: 1px solid var(--color-line); padding: 0.65em 0.4em; text-align: center; }
.schedule thead th { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.1em; background: var(--color-bg-warm); }
.schedule .off { color: var(--color-text-weak); }

.info-list dt { font-family: var(--font-serif); letter-spacing: 0.12em; color: var(--color-accent-deep); margin-top: 1.1rem; }
.info-list dd { margin-top: 0.15rem; }

/* ---------- group clinic ---------- */
.group-card {
  display: grid; grid-template-columns: 380px 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-white); border: 1px solid var(--color-line);
  padding: clamp(1.5rem, 4vw, 2.75rem); align-items: center;
}
.group-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.group-card__name { font-family: var(--font-serif); font-size: 1.375rem; letter-spacing: 0.16em; margin-bottom: 0.75rem; }

/* ---------- オンライン診療の案内 (グループ院への導線) ---------- */
/* 歯科の診療メニューと混ざらないよう、グループ医院セクションの中だけに置く */
.online-care {
  background: var(--color-white); border: 1px solid var(--color-line);
  padding: clamp(1.5rem, 4vw, 2.75rem); margin-top: clamp(1rem, 2vw, 1.5rem);
}
.online-care__title {
  font-family: var(--font-serif); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 500; letter-spacing: 0.12em; line-height: 1.8;
  padding-left: 0.9rem; border-left: 2.5px solid var(--color-accent); margin-bottom: 1.1rem;
}
.online-care__lead { font-size: 0.9375rem; }
.online-care__sub {
  font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0.1em;
  color: var(--color-accent-deep); margin: 1.75rem 0 0.7rem;
}
.online-care__list { font-size: 0.9063rem; }
.online-care__list li { padding-left: 1.1rem; position: relative; margin-top: 0.4rem; }
.online-care__list li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 5px; height: 5px; background: var(--color-gold);
}
/* 注意書き・免責。医療広告ガイドラインの記載要件なので折りたたまない */
.online-care__note {
  background: var(--color-bg-warm); border-left: 3px solid var(--color-gold);
  padding: 1.1rem 1.35rem; margin-top: 1.75rem;
  font-size: 0.8125rem; line-height: 1.95; color: var(--color-text);
}
.online-care__note b { font-family: var(--font-serif); letter-spacing: 0.1em; display: block; margin-bottom: 0.35rem; }
.online-care__note li { padding-left: 1em; text-indent: -1em; }
.online-care__note li::before { content: "・"; }

/* 予約先サービスの明示。外部サイトへ飛ぶ前に行き先が分かるようにする */
.online-care__via { text-align: center; margin-top: var(--space-block); }
.online-care__via span {
  display: block; font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--color-text-weak); margin-bottom: 0.7rem;
}
/* ロゴは第三者の商標。拡大・変色・加工はしない */
.online-care__via img { width: 132px; height: auto; margin-inline: auto; }
@media (max-width: 700px) { .group-card { grid-template-columns: 1fr; } }

/* ---------- news ---------- */
.news-list { max-width: var(--content-narrow); margin-inline: auto; }
.news-list li { display: flex; gap: 1.75rem; padding: 1.1rem 0.25rem; border-bottom: 1px solid var(--color-line); }
.news-list li:first-child { border-top: 1px solid var(--color-line); }
.news-list time { font-family: var(--font-serif); letter-spacing: 0.1em; color: var(--color-accent-deep); flex-shrink: 0; }
@media (max-width: 640px) { .news-list li { flex-direction: column; gap: 0.15rem; } }

/* ---------- page hero (subpages) ---------- */
.page-hero { background: var(--color-bg-warm); padding: clamp(4.5rem, 6vw, 6.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
.page-hero h1 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 500; letter-spacing: 0.2em; text-wrap: balance; }
@media (max-width: 700px) { .page-hero { padding-top: 9.5rem; } }
.page-hero .en { font-size: 0.75rem; letter-spacing: 0.3em; color: var(--color-gold); display: block; margin-top: 0.6rem; text-transform: uppercase; }
.breadcrumb { font-size: 0.75rem; color: var(--color-text-weak); padding: 1rem 0; }
.breadcrumb a:hover { color: var(--color-accent-dark); }

/* treatment sub navigation */
.tnav { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.75rem; }
.tnav a {
  font-size: 0.8125rem; letter-spacing: 0.08em;
  padding: 0.45em 1.1em; border: 1px solid var(--color-line); background: var(--color-white);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.tnav a:hover, .tnav a[aria-current="page"] { border-color: var(--color-accent); color: var(--color-accent-deep); }

/* ---------- article blocks ---------- */
.article section { padding-block: calc(var(--space-section) * 0.55); }
.article .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.article .split img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* 縦位置写真を並べる場合。写真側の列を狭めて本文とのバランスを取る */
.article .split--portrait { grid-template-columns: 0.72fr 1fr; }
.article .split--portrait img { aspect-ratio: 3 / 4; }
@media (max-width: 760px) {
  .article .split, .article .split--portrait { grid-template-columns: 1fr; }
  .article .split--portrait img { aspect-ratio: 4 / 3; }
}

.step-list { counter-reset: step; }
.step-list li { position: relative; padding: 1.1rem 0 1.1rem 4.2rem; border-bottom: 1px solid var(--color-line); }
.step-list li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0.4rem; top: 1.15rem;
  font-family: var(--font-serif); font-size: 1.4rem; color: var(--color-gold); letter-spacing: 0.05em;
}
.step-list b { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.1em; color: var(--color-accent-deep); display: block; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.compare > div { border: 1px solid var(--color-line); padding: 1.4rem 1.6rem; background: var(--color-white); }
.compare h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.14em; margin-bottom: 0.5rem; }
.compare .is-good { border-color: var(--color-accent); }
.compare .is-good h4 { color: var(--color-accent-deep); }
@media (max-width: 700px) { .compare { grid-template-columns: 1fr; } }

.qa dt { font-family: var(--font-serif); letter-spacing: 0.1em; color: var(--color-accent-deep); padding: 1.1rem 0 0.2rem; }
.qa dt::before { content: "Q. "; color: var(--color-gold); font-size: 1.05em; }
.qa dd { border-bottom: 1px solid var(--color-line); padding-bottom: 1.1rem; }
.qa dd::before { content: "A. "; color: var(--color-accent); font-family: var(--font-serif); }

.caution {
  background: var(--color-bg-warm); border-left: 3px solid var(--color-gold);
  padding: 1.25rem 1.5rem; font-size: 0.875rem; line-height: 1.9; margin-top: var(--space-block);
}
.caution b { font-family: var(--font-serif); letter-spacing: 0.1em; display: block; margin-bottom: 0.3rem; }

/* office gallery — 中身は figure + figcaption (キャプション無しの img 直置きも可) */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 2vw, 1.4rem); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery figcaption {
  font-family: var(--font-serif); font-size: 0.8125rem; letter-spacing: 0.12em;
  color: var(--color-accent-deep); text-align: center; margin-top: 0.6rem;
}
/* 縦位置の写真を並べる場合 (外観・入口など) */
.gallery--portrait { grid-template-columns: repeat(2, 1fr); }
.gallery--portrait img { aspect-ratio: 3 / 4; }
@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gallery--portrait img { aspect-ratio: 4 / 5; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--color-bg-warm); border-top: 1px solid var(--color-line); padding: var(--space-section) 0 2rem; text-align: center; }
.site-footer .site-logo__mark { margin-inline: auto; }
.footer-name { font-family: var(--font-logo); font-weight: 600; letter-spacing: 0.26em; margin-top: 0.9rem; }
.footer-info { font-size: 0.8438rem; color: var(--color-text-weak); margin-top: 0.8rem; line-height: 2.1; }
.footer-links { display: flex; gap: 2rem; justify-content: center; margin-top: 1.6rem; font-size: 0.8125rem; flex-wrap: wrap; }
.footer-links a:hover { color: var(--color-accent-dark); }
.copyright { font-size: 0.75rem; color: var(--color-text-weak); margin-top: 2.5rem; letter-spacing: 0.1em; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); animation: reveal 0.9s var(--ease) 0.1s forwards; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* ---------- print / PDF ---------- */
@media print {
  .rail, .mobile-bar { display: none !important; }
  body { padding-bottom: 0; }
  .site-main { padding-right: 0; }
  .hero__img { height: 480px; }
  .hero__copy { font-size: 1.375rem; line-height: 1.9; }
  .reveal { animation: none; opacity: 1; transform: none; }
  /* セクション単位で改ページを避けると、長いセクションが丸ごと次ページへ送られて
     白紙が大量に出る。分割は「途中で切れると困る小さい塊」だけに絞る */
  section { padding-block: 1.75rem; }
  .care-card, .feature, .group-card, .caution,
  .gallery figure, .proof, .concept, .split, .schedule, .qa dd, .step-list li { break-inside: avoid; }
  .heading, .subheading, .care-card__title, .feature__title { break-after: avoid; }
  .hero { break-after: avoid; }
  /* 地図は印刷すると空欄になるので、案内文の枠に置き換える */
  .map-embed { display: none; }
  .access-grid::before {
    content: "地図はウェブサイト上でご覧いただけます";
    display: flex; align-items: center; justify-content: center; text-align: center;
    aspect-ratio: 4 / 3; padding: 1rem;
    border: 1px solid var(--color-line); background: var(--color-bg-warm);
    color: var(--color-text-weak); font-size: 0.8125rem; letter-spacing: 0.08em;
  }
}