@charset "UTF-8";

/*
 * もりはな小児科 / Figma 75:3 / トップページ
 * 01 Tokens → 02 Base → 03 Shared → 04 Header → 05 Home → 06 Footer → 07 Responsive
 * 命名: block__element--modifier。JSはdata-*のみを参照する。
 * PC基準: 1440px = sidebar 240px + main 1180px + gutter 20px。
 */

/* 01. Design tokens — 色・幅・書体はここを起点に変更する。 */
:root {
  --color-primary: #e63651;
  --color-primary-soft: #fce9ec;
  --color-text: #661010;
  --color-text-muted: rgba(102, 16, 16, 0.72);
  --color-border: rgba(102, 16, 16, 0.12);
  --color-pink-surface: #fbf4f5;
  --color-orange: #f0873c;
  --color-orange-soft: #ffefe3;
  --color-orange-surface: #fef7f2;
  --color-green: #55836a;
  --color-green-surface: #eef5f0;
  --color-white: #fff;
  --font-heading: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body: "Gen Interface JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --sidebar-width: 240px;
  --page-width: 1440px;
  --section-gutter: clamp(36px, 8.333vw, 120px);
  --radius-panel: 40px;
  --radius-button: 16px;
  --transition: 180ms ease;
}

/* 02. Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.1em;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: url("./assets/top/texture-clinic.webp") left top / cover repeat-y;
  background-attachment: fixed;
  filter: grayscale(1);
  opacity: 0.09;
  content: "";
  pointer-events: none;
}

h1, h2, h3, p, figure {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}

button, summary {
  font: inherit;
  cursor: pointer;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

address {
  font-style: normal;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 5px;
}

/* 03. Shared components */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 20px;
  transform: translateY(-150%);
  background: var(--color-white);
  color: var(--color-text);
}

.skip-link:focus {
  transform: none;
}

.section-padding {
  padding-inline: var(--section-gutter);
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 20px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.section-badge--orange {
  background: var(--color-orange-soft);
  color: #b95b1e;
}

.section-heading {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 16px 38px 16px 22px;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-align: center;
  transition: filter var(--transition);
}

.button:hover {
  filter: brightness(0.91);
}

.button--orange {
  background: var(--color-orange);
}

.button--green {
  background: var(--color-green);
}

.button__arrow {
  position: absolute;
  top: calc(50% - 5px);
  right: 20px;
  width: 13px;
  height: 10px;
}

/* 04. Site layout / header */
.succession-notice {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  min-height: 50px;
  padding: 12px 16px;
  background: var(--color-primary);
  color: white;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.succession-notice a {
  font-weight: 700;
  text-decoration: underline;
}

.site-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  align-items: start;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 20px 20px 20px 0;
}

.site-header {
  position: sticky;
  top: 0;
  padding: 20px;
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

.site-header__logo,
.site-header__logo img {
  display: block;
  width: 200px;
  height: 43px;
}

.site-header__logo img {
  object-fit: contain;
}

.site-navigation {
  margin-top: 28px;
}

.site-navigation__toggle {
  display: none;
}

/* detailsはPCで常時展開。SPでは標準のopen属性に従う。 */
.site-navigation:not([open]) > .site-navigation__panel {
  display: block;
}

.site-navigation__list {
  display: grid;
  gap: 8px;
}

.site-navigation__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 51px;
  padding: 13px 20px;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: white;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  transition: filter var(--transition);
}

.site-navigation__link:hover {
  filter: brightness(0.91);
}

.site-navigation__link img {
  flex: 0 0 13px;
  width: 13px;
  height: 10px;
}

.site-header__contact {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.site-header__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
}

.site-header__phone span {
  color: var(--color-text-muted);
  font-size: 13px;
}

.site-header__phone strong {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.sidebar-decoration {
  position: relative;
  height: 216px;
  margin: 26px -4px 0;
  overflow: hidden;
  pointer-events: none;
}

.sidebar-decoration > img,
.sidebar-decoration > span {
  position: absolute;
}

.sidebar-decoration__leaf {
  z-index: 2;
  top: 58px;
  left: 0;
  object-fit: cover;
  transform: rotate(-14deg);
}

.sidebar-decoration__heart {
  top: 121px;
  left: 115px;
  object-fit: cover;
  transform: rotate(37deg);
}

.sidebar-decoration__balloon {
  top: 84px;
  left: 137px;
  width: 57px;
  height: 70px;
  transform: rotate(49deg);
}

.sidebar-decoration__balloon img {
  position: absolute;
  left: -18%;
  width: 126%;
  max-width: none;
  height: 102%;
}

.sidebar-decoration__star {
  z-index: 2;
  top: 129px;
  left: 10px;
  width: 59px;
  height: 74px;
  transform: rotate(-22deg);
}

.sidebar-decoration__star img {
  position: absolute;
  left: -18%;
  width: 127%;
  max-width: none;
  height: 102%;
}

.sidebar-decoration__hearts {
  z-index: 3;
  top: 110px;
  left: 15px;
  width: 58px;
  height: 58px;
  transform: rotate(-14deg);
}

.sidebar-decoration__hearts img {
  position: absolute;
  inset: 0;
  width: 58px;
  height: 58px;
}

.sidebar-decoration__rabbit {
  z-index: 1;
  top: 0;
  left: 62px;
  width: 104px;
  height: 196px;
  transform: rotate(9deg);
}

.sidebar-decoration__rabbit img {
  position: absolute;
  top: -1%;
  left: -50%;
  width: 197%;
  max-width: none;
  height: 104%;
}

.page-shell {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: var(--radius-panel);
  background: white;
}

/* 05. Home sections */
.home-hero {
  position: relative;
  min-height: 588px;
  overflow: hidden;
  padding: 100px var(--section-gutter) 160px;
  background: var(--color-primary);
  color: white;
}

.home-hero__photo {
  position: absolute;
  top: -1.31%;
  right: 0;
  width: 76.74%;
  height: 102.62%;
  max-width: none;
  object-fit: cover;
}

.home-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-primary) 30.288%, rgba(230, 54, 81, 0));
  content: "";
}

.home-hero__content {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 900;
}

.home-hero__logo {
  width: 335px;
  height: 73px;
  margin-bottom: 24px;
  object-fit: contain;
}

.home-hero__heading {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.home-hero__lead {
  margin-top: 24px;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.home-hero__wave {
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: 0;
  width: 106%;
  max-width: none;
  height: 79px;
}

.home-succession {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  min-height: 491px;
  padding-top: 0;
  padding-bottom: 60px;
  background: var(--color-pink-surface);
}

.home-succession__visual {
  position: relative;
  margin-top: -76px;
}

.home-succession__photo-frame {
  position: relative;
  aspect-ratio: 553 / 385;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

.home-succession__photo-frame img {
  position: absolute;
  top: -15.37%;
  left: -23.66%;
  width: 131.51%;
  height: 125.99%;
  max-width: none;
}

.home-succession__clouds {
  position: absolute;
  bottom: 0;
  left: -50px;
  width: 135px;
  height: 120px;
}

.home-succession__clouds img:first-child {
  position: absolute;
  top: -8px;
  left: 0;
  transform: rotate(-28deg);
}

.home-succession__clouds img:last-child {
  position: absolute;
  top: 26px;
  left: 25px;
}

.home-succession__content {
  position: relative;
  margin-top: -56px;
  padding-top: 20px;
}

.home-succession .section-heading {
  white-space: nowrap;
}

.home-succession__portrait {
  position: absolute;
  top: -75px;
  right: 0;
  width: 161px;
  height: 161px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-pink-surface);
}

.home-succession__portrait img {
  position: absolute;
  top: -9px;
  left: 3%;
  width: 94%;
  height: 176px;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.home-succession__eyebrow {
  margin: 20px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.home-succession__text {
  margin-top: 22px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.1em;
}

.home-succession__button {
  max-width: 320px;
  margin-top: 24px;
}

.home-care {
  padding-block: 60px;
}

.home-care__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 30px;
}

.home-care__intro {
  max-width: 610px;
  color: var(--color-text-muted);
  font-size: 16px;
}

.home-care__header .section-title {
  flex-shrink: 0;
}

.care-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.care-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-pink-surface);
}

.care-card--cardiology {
  border-color: rgba(107, 158, 127, 0.45);
  background: var(--color-green-surface);
}

.care-card__heading {
  display: flex;
  align-items: center;
  gap: 17px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.care-card__heading img {
  flex: 0 0 35px;
  object-fit: contain;
}

.care-card__text {
  color: var(--color-text-muted);
  font-size: 16px;
}

.care-card .button {
  margin-top: auto;
}

.fever-notice {
  margin-top: 20px;
  padding: 28px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: #fff4ed;
}

.fever-notice__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.fever-notice__heading {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.fever-notice__heading img {
  flex-shrink: 0;
}

.fever-notice__phone {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 8px 28px;
  border-radius: var(--radius-button);
  background: var(--color-orange);
  color: white;
  font-family: var(--font-heading);
  line-height: 1.5;
  white-space: nowrap;
}

.fever-notice__phone span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.fever-notice__phone strong {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.fever-notice > p {
  color: var(--color-text-muted);
}

.home-news {
  background: linear-gradient(to bottom, white 50%, var(--color-orange-surface) 50%);
}

.home-news__panel {
  display: grid;
  grid-template-columns: 202px minmax(0, 1fr);
  gap: 40px;
  padding: 60px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: white;
}

.home-news__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.news-list__item + .news-list__item {
  border-top: 1px solid var(--color-border);
}

.news-list__link {
  display: grid;
  grid-template-columns: 95px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  padding: 14px 0 14px 20px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.9;
}

.news-list__link:hover .news-list__title {
  text-decoration: underline;
}

.news-list__link time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.news-list__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-list__badge {
  flex-shrink: 0;
  padding: 1px 9px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

.home-schedule {
  position: relative;
  min-height: 661px;
  padding-block: 60px;
  background: var(--color-orange-surface);
}

.home-schedule__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 60px;
}

.home-schedule__hours .section-heading {
  font-size: clamp(24px, 2.36vw, 34px);
  white-space: nowrap;
}

.hours-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  color: var(--color-text-muted);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.hours-table th,
.hours-table td {
  height: 67px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}

.hours-table th:first-child {
  width: 120px;
  padding-left: 0;
  text-align: left;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hours-table td {
  color: #b9591a;
  font-size: 13px;
}

.home-schedule__notes {
  margin-top: 34px;
  padding-left: 1.5em;
  color: #8a7171;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.08em;
  list-style: disc;
}

.home-schedule__button {
  width: min(100%, 320px);
  margin: 42px auto 0;
}

.home-schedule__decoration {
  position: absolute;
  right: 110px;
  bottom: -28px;
  width: 130px;
  height: 115px;
  object-fit: cover;
  pointer-events: none;
}

.clinic-calendar {
  min-width: 0;
  font-family: var(--font-heading);
  letter-spacing: 0;
}

.clinic-calendar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 67px;
  margin-bottom: 14px;
}

.clinic-calendar__header button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.clinic-calendar__header button:hover {
  background: var(--color-orange-soft);
}

.clinic-calendar__previous img {
  transform: rotate(180deg);
}

.clinic-calendar button:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

.clinic-calendar__heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: auto;
  line-height: 1;
}

.clinic-calendar__month {
  font-size: 56px;
  font-weight: 500;
}

.clinic-calendar__year {
  font-size: 20px;
  font-weight: 700;
}

.clinic-calendar__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 4px;
  text-align: center;
}

.clinic-calendar__table th {
  height: 34px;
  color: #7c7c7c;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}

.clinic-calendar__table th:first-child {
  color: #b9591a;
}

.clinic-calendar__table td {
  height: 50px;
  padding: 0;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.clinic-calendar__table td > span {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 50px;
}

.clinic-calendar__day--full {
  background: var(--color-orange);
  color: #fff;
}

.clinic-calendar__day--morning {
  background: #ffd8bc;
  color: #a84609;
}

.clinic-calendar__day--closed {
  background: rgba(0, 0, 0, 0.08);
  color: #766b63;
}

.clinic-calendar__day--outside {
  color: #bcaeaa;
}

.clinic-calendar__day--unknown {
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.clinic-calendar__legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
}

.clinic-calendar__legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.clinic-calendar__swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
}

.clinic-calendar__swatch--full {
  background: var(--color-orange);
}

.clinic-calendar__swatch--morning {
  background: #ffd8bc;
}

.clinic-calendar__swatch--closed {
  background: rgba(0, 0, 0, 0.08);
}

.clinic-calendar__status {
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.home-access {
  display: grid;
  gap: 40px;
  padding-block: 60px;
}

.home-access__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
}

.home-access__header {
  padding-top: 20px;
}

.home-access__header address {
  margin-top: 20px;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

.access-panel,
.parking-panel {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-pink-surface);
}

.access-panel__map {
  flex: 392;
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
}

.access-panel__map iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 392 / 269;
  border: 0;
}

.access-panel__parking {
  position: relative;
  flex: 250;
  min-width: 0;
}

.access-panel__parking img {
  width: 100%;
  height: auto;
  aspect-ratio: 250 / 268;
  object-fit: cover;
  mix-blend-mode: darken;
}

.access-panel__parking figcaption {
  position: absolute;
  top: 71.2%;
  left: 55%;
  padding: 2px 0;
  background: var(--color-pink-surface);
  color: #a94354;
  font-size: clamp(9px, 1vw, 14px);
  line-height: 1.9;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

.parking-panel__directions {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  align-items: start;
  flex: 422;
  min-width: 0;
}

.parking-panel__route {
  width: 100%;
  height: auto;
  aspect-ratio: 249 / 229;
  object-fit: contain;
}

.parking-panel__transport {
  display: grid;
  gap: 12px;
  padding-left: 6px;
  font-size: 10.326px;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

.parking-panel__transport h3 {
  position: relative;
  margin-bottom: 6px;
  padding-left: 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.parking-panel__transport h3 img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
}

.parking-panel__transport p {
  padding-left: 24px;
}

.parking-panel__photo {
  flex: 233;
  width: 0;
  min-width: 0;
  height: auto;
  aspect-ratio: 233 / 229;
  object-fit: cover;
}

.reservation-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-block: 70px;
  background: #fff6f0;
  text-align: center;
}

.reservation-section::before {
  position: absolute;
  inset: 0;
  background: url("./assets/top/texture-clinic.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.1;
  content: "";
  pointer-events: none;
}

.reservation-section > * {
  position: relative;
}

.reservation-section .section-title {
  align-items: center;
}

.reservation-section > p {
  color: var(--color-text-muted);
  font-family: var(--font-heading);
}

.reservation-section .reservation-section__heart {
  position: absolute;
  top: -16px;
  left: calc(50% - 30px);
  width: 61px;
  height: 57px;
  object-fit: cover;
}

.reservation-section__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.reservation-section__actions .button {
  min-width: 236px;
}

.reservation-section__phone {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.reservation-section__phone span {
  white-space: nowrap;
}

/* 06. Footer / Splideによる院内写真の連続ループ */
.site-footer {
  padding-block: 40px;
  background: white;
}

.clinic-gallery {
  visibility: visible;
  pointer-events: none;
  user-select: none;
}

.clinic-gallery__viewport {
  overflow: hidden;
}

.clinic-gallery__track {
  display: flex;
}

.clinic-gallery:not(.is-initialized) .clinic-gallery__track {
  gap: 20px;
}

.clinic-gallery__slide {
  flex: 0 0 auto;
  width: 246px;
}

.clinic-gallery__track img {
  width: 246px;
  height: 164px;
  border-radius: 40px;
  object-fit: cover;
}

.site-menu-dialog__close:active {
  transform: scale(0.96);
}

/* ネイティブdialogのトップレイヤーで、固定受診バーより手前に表示。 */
.site-menu-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--color-text);
}

.site-menu-dialog::backdrop {
  background: rgba(40, 16, 20, 0);
  transition: background-color 180ms ease-in;
}

.site-menu-dialog.is-open::backdrop {
  background: rgba(40, 16, 20, 0.35);
  transition-timing-function: ease-out;
}

.site-menu-dialog__drawer {
  width: min(420px, 100%);
  height: 100%;
  margin-left: auto;
  padding: max(20px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: white;
  font-family: var(--font-heading);
  transform: translateX(100%);
  transition: transform 220ms ease-in;
}

.site-menu-dialog.is-open .site-menu-dialog__drawer {
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-menu-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  color: var(--color-primary);
  font-weight: 700;
}

.site-menu-dialog__close {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px;
  border: 0;
  background: transparent;
  font-size: 14px;
}

.site-menu-dialog__close span {
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.site-footer__content {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  margin-top: 40px;
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
}

.site-footer__clinic {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 12px;
}

.site-footer__logo,
.site-footer__logo img {
  width: 218px;
  height: 47px;
}

.site-footer__logo img {
  object-fit: contain;
}

.site-footer__clinic address {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.8;
}

.site-footer__clinic p,
.site-footer__copyright {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* フッターの診療時間（要約）。内容は inc/site-config.php の hours_summary。 */
.site-footer__hours {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.8;
}

.site-footer__hours div {
  display: flex;
  gap: 12px;
}

.site-footer__hours dt {
  flex: 0 0 5em;
  color: var(--color-text);
  font-weight: 700;
}

.site-footer__hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.site-footer__navigation {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  /* 6項目を3+3の2行に揃える。 */
  max-width: 420px;
  gap: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.site-footer__navigation a:hover {
  text-decoration: underline;
}

.social-links {
  display: flex;
  gap: 8px;
}

.social-links a {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
}

.social-links img {
  object-fit: contain;
}

.mobile-actions {
  display: none;
}

/* 07. Responsive — PCカンプから自然にリフロー。固定高さで文字を切らない。 */
@media (min-width: 1600px) {
  .site-header {
    top: 20px;
  }
}

@media (min-width: 1101px) and (max-width: 1330px) {
  :root {
    --section-gutter: 48px;
  }

  .home-news__panel {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
    padding: 36px;
  }

  .care-card {
    padding: 24px;
  }

  .care-card__heading {
    gap: 10px;
    font-size: 17px;
  }

  .fever-notice__phone {
    gap: 8px;
    padding-inline: 16px;
  }

  .home-access__row {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .access-panel,
  .parking-panel {
    padding: 28px;
  }
}

@media (max-height: 780px) and (min-width: 1101px) {
  .site-header {
    max-height: 100dvh;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .sidebar-decoration {
    height: 180px;
  }
}

@media (max-width: 1100px) {
  :root {
    --section-gutter: 40px;
  }

  html {
    scroll-padding-top: 105px;
  }

  .site-layout {
    display: block;
    padding: 0 20px 20px;
  }

  .site-header {
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    margin-inline: -20px;
    padding: 18px 24px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
  }

  .site-navigation {
    margin-top: 0;
  }

  .site-navigation__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 48px;
    min-height: 48px;
    padding: 10px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    list-style: none;
  }

  .site-navigation__toggle::-webkit-details-marker {
    display: none;
  }

  .site-navigation__toggle-lines {
    width: 23px;
    height: 16px;
    border-block: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  }

  .site-navigation[open] .site-navigation__toggle-lines {
    border: 0;
    background: linear-gradient(45deg, transparent 45%, currentColor 46%, currentColor 54%, transparent 55%), linear-gradient(-45deg, transparent 45%, currentColor 46%, currentColor 54%, transparent 55%);
  }

  .site-navigation__panel {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    width: min(420px, 100%);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: 88px 24px 32px;
    background: white;
  }

  /* JS無効時のdetails用。通常時はdialog内の閉じるボタンを使用。 */
  .site-navigation[open] > .site-navigation__toggle {
    position: fixed;
    z-index: 51;
    top: 16px;
    right: 20px;
  }

  .site-menu-dialog .site-navigation__panel {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  .site-navigation:not([open]) > .site-navigation__panel {
    display: none;
  }

  .site-header__contact {
    max-width: 420px;
    margin-inline: auto;
  }

  .sidebar-decoration {
    display: none;
  }

  .page-shell {
    margin-top: 16px;
  }

  .home-care__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .home-succession .section-heading {
    font-size: clamp(21px, 2.6vw, 27px);
  }

  .home-succession__portrait {
    top: -55px;
    width: 126px;
    height: 126px;
  }

  .home-succession__portrait img {
    height: 142px;
  }

  .care-card {
    padding: 24px;
  }

  .care-card__heading {
    gap: 10px;
    font-size: 17px;
  }

  .fever-notice__header {
    flex-wrap: wrap;
  }

  .home-news__panel {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    padding: 32px;
  }

  .news-list__link {
    grid-template-columns: 88px minmax(0, 1fr) 18px;
    gap: 12px;
    padding-left: 0;
    font-size: 14px;
  }

  .home-schedule__columns {
    gap: 32px;
  }

  .home-schedule__hours .section-heading {
    font-size: 25px;
  }

  .home-access__row {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .access-panel,
  .parking-panel {
    padding: 24px;
  }

  .parking-panel {
    flex-wrap: wrap;
  }

  .parking-panel__directions {
    flex-basis: 100%;
  }

  .parking-panel__photo {
    flex: none;
    width: 100%;
    max-width: 233px;
  }

  .site-footer__content {
    flex-direction: column;
    gap: 28px;
  }

  .site-footer__links {
    align-items: flex-start;
  }

  .site-footer__navigation {
    justify-content: flex-start;
    max-width: none;
  }

  .site-footer__clinic {
    flex-shrink: 1;
  }
}

@media (max-width: 767px) {
  :root {
    --section-gutter: 24px;
    --radius-panel: 24px;
  }

  html {
    scroll-padding-top: 96px;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    font-size: 14px;
    letter-spacing: 0.05em;
  }

  .succession-notice {
    padding: 10px 14px;
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 0.02em;
  }

  .site-layout {
    padding: 0 12px 12px;
  }

  .site-header {
    min-height: 78px;
    margin-inline: -12px;
    padding: 14px 20px;
  }

  .site-header__logo,
  .site-header__logo img {
    width: 190px;
    height: 41px;
  }

  .site-navigation__toggle {
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 5px;
    font-size: 9px;
  }

  .site-navigation__toggle-label {
    line-height: 1;
  }

  .page-shell {
    margin-top: 8px;
  }

  .section-title {
    gap: 10px;
  }

  .section-heading {
    font-size: 28px;
    letter-spacing: 0.02em;
  }

  .section-badge {
    font-size: 11px;
    padding-inline: 16px;
  }

  .button {
    min-height: 56px;
    font-size: 15px;
  }

  .home-hero {
    min-height: 495px;
    padding-top: 52px;
    padding-bottom: 90px;
  }

  .home-hero__photo {
    width: 100%;
    opacity: 0.65;
    object-position: 68% center;
  }

  .home-hero::after {
    background: linear-gradient(90deg, #e63651 0%, rgba(230, 54, 81, 0.78) 42%, rgba(230, 54, 81, 0.13));
  }

  .home-hero__logo {
    width: 250px;
    height: 55px;
    margin-bottom: 28px;
  }

  .home-hero__heading {
    font-size: clamp(25px, 6.6vw, 36px);
    line-height: 1.65;
    letter-spacing: 0.02em;
  }

  .home-hero__heading span {
    text-wrap: balance;
  }

  .home-hero__heading .home-hero__phrase {
    display: inline-block;
    white-space: nowrap;
  }

  .home-hero__lead {
    margin-top: 26px;
    font-size: 15px;
    line-height: 1.8;
  }

  .home-hero__wave {
    height: 45px;
  }

  .home-succession {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 52px;
  }

  .home-succession__visual {
    margin-top: -25px;
    padding-right: 42px;
  }

  .home-succession__photo-frame {
    max-width: 460px;
  }

  .home-succession__clouds {
    right: -12px;
    bottom: -13px;
    left: auto;
    transform: scale(0.6);
    transform-origin: bottom right;
  }

  .home-succession__content {
    margin-top: 0;
    padding-top: 12px;
  }

  .home-succession__portrait {
    top: -17px;
    right: 0;
    width: 92px;
    height: 92px;
  }

  .home-succession__portrait img {
    top: -4px;
    height: 104px;
  }

  .home-succession .section-heading {
    margin-top: 15px;
    white-space: normal;
    font-size: clamp(23px, 5.8vw, 29px);
  }

  .home-succession__eyebrow {
    margin-top: 14px;
    font-size: 13px;
  }

  .home-succession__text {
    margin-top: 20px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }

  .desktop-break {
    display: none;
  }

  .home-care {
    padding-block: 52px;
  }

  .home-care__intro {
    font-size: 14px;
  }

  .care-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .care-card {
    gap: 18px;
    padding: 26px;
  }

  .care-card__heading {
    gap: 16px;
    font-size: 20px;
  }

  .care-card__text {
    font-size: 14px;
  }

  .fever-notice {
    padding: 24px;
  }

  .fever-notice__header {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  .fever-notice__heading {
    gap: 12px;
    font-size: 17px;
  }

  .fever-notice__phone {
    flex-direction: column;
    gap: 3px;
    padding: 12px;
  }

  .home-news__panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 22px;
  }

  .home-news__header {
    display: contents;
  }

  .home-news__more {
    order: 2;
  }

  .news-list__link {
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 5px 14px;
    padding-block: 18px;
  }

  .news-list__link time {
    grid-column: 1;
    font-size: 12px;
  }

  .news-list__title {
    grid-column: 1;
    grid-row: 2;
    flex-wrap: wrap;
    font-size: 14px;
  }

  .news-list__link > img {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .home-schedule {
    min-height: 0;
    padding-block: 48px 58px;
  }

  .home-schedule__columns {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .home-schedule__hours .section-heading {
    font-size: clamp(22px, 6vw, 28px);
    white-space: normal;
  }

  .hours-table {
    margin-top: 20px;
    font-size: 13px;
  }

  .hours-table th,
  .hours-table td {
    height: 55px;
    padding-inline: 2px;
  }

  .hours-table th:first-child {
    width: 102px;
  }

  .home-schedule__notes {
    margin-top: 22px;
    font-size: 12px;
    letter-spacing: 0.03em;
  }

  .clinic-calendar {
    width: min(100%, 440px);
    margin-inline: auto;
  }

  .clinic-calendar__table td,
  .clinic-calendar__table td > span {
    min-height: 40px;
    height: 40px;
    font-size: 17px;
  }

  .clinic-calendar__table td {
    border-radius: 9px;
  }

  .clinic-calendar__legend {
    justify-content: flex-start;
    gap: 8px 10px;
    font-size: 10px;
  }

  .home-schedule__decoration {
    right: 5px;
    bottom: -24px;
    width: 82px;
    height: 73px;
  }

  .home-access {
    gap: 40px;
    padding-block: 52px 64px;
  }

  .home-access__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-access__header {
    padding-top: 0;
  }

  .home-access__header address {
    margin-top: 14px;
    font-size: 14px;
  }

  .home-access__header address br:nth-child(2) {
    display: none;
  }

  .access-panel {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px;
  }

  .access-panel__map,
  .access-panel__parking {
    flex: none;
    width: 100%;
  }

  .access-panel__parking {
    max-width: 240px;
  }

  .access-panel__parking figcaption {
    font-size: 13px;
  }

  .parking-panel {
    padding: 20px;
    gap: 24px;
    justify-content: center;
  }

  .parking-panel__directions {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .parking-panel__route {
    max-width: 250px;
    margin-inline: auto;
  }

  .parking-panel__transport {
    gap: 18px;
    padding: 0;
    font-size: 13px;
    letter-spacing: 0.03em;
  }

  .parking-panel__transport h3 {
    font-size: 14px;
  }

  .reservation-section {
    gap: 22px;
    padding-block: 62px 50px;
  }

  .reservation-section__actions {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .reservation-section__actions .button {
    width: 100%;
    min-width: 0;
  }

  .reservation-section__phone {
    display: flex;
    flex-direction: column;
    font-size: 14px;
  }

  .reservation-section__phone span {
    font-size: 24px;
    font-weight: 900;
  }

  .site-footer {
    padding-block: 26px 34px;
  }

  .clinic-gallery:not(.is-initialized) .clinic-gallery__track {
    gap: 12px;
  }

  .clinic-gallery__slide {
    width: 205px;
  }

  .clinic-gallery__track img {
    flex-basis: 205px;
    width: 205px;
    height: 137px;
    border-radius: 24px;
  }

  .site-footer__content {
    margin-top: 28px;
  }

  .site-footer__navigation {
    gap: 8px 18px;
    font-size: 12px;
  }

  .site-footer__navigation a {
    display: inline-block;
    padding-block: 8px;
  }

  .social-links a {
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-actions {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--color-border);
    background: white;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .mobile-actions a {
    display: grid;
    place-items: center;
    min-height: 64px;
    font-size: 14px;
  }

  .mobile-actions__reservation {
    background: var(--color-orange);
    color: white;
  }
}

@media (max-width: 374px) {
  :root {
    --section-gutter: 18px;
  }

  .home-succession .section-heading {
    font-size: 21px;
  }

  .care-card,
  .fever-notice,
  .home-news__panel {
    padding-inline: 18px;
  }

  .home-hero__heading {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
  }
}

@media print {
  body {
    padding-bottom: 0;
  }

  body::before,
  .site-header,
  .site-menu-dialog,
  .mobile-actions,
  .clinic-calendar__header button {
    display: none !important;
  }

  .site-layout {
    display: block;
    padding: 0;
  }

  .page-shell {
    overflow: visible;
    border: 0;
  }

  .home-hero,
  .care-card,
  .clinic-calendar,
  .home-access__row {
    break-inside: avoid;
  }
}

/* 2026-10-28: hero-only neutral palette and progressive slideshow. */
.home-hero { background:#f5efe5; color:#493f37; padding-bottom:140px; }
.home-hero::after { background:linear-gradient(90deg,#f5efe5 26%,rgba(245,239,229,.96) 39%,rgba(245,239,229,.12) 77%); pointer-events:none; }
.home-hero__slides { position:absolute; inset:0; }
.home-hero__slides .home-hero__photo { top:0; height:100%; width:70%; opacity:0; transition:opacity 1.4s ease; object-position:center; }
.home-hero__slides .home-hero__photo.is-active { opacity:1; }
.home-hero__content { max-width:650px; }
.care-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.clinic-hours { max-width:100%; }
.clinic-hours .hours-table { width:100%; table-layout:fixed; }
.clinic-hours .hours-table th:first-child { width:30%; white-space:nowrap; }
.clinic-hours .hours-table caption { text-align:left; font-size:14px; margin-bottom:12px; }
@media(max-width:767px) {
 .home-hero { min-height:760px; padding-top:36px; padding-bottom:320px; }
 .home-hero::after { background:linear-gradient(180deg,#f5efe5 0%,#f5efe5 42%,rgba(245,239,229,0) 66%); }
 .home-hero__slides .home-hero__photo { top:auto; bottom:0; width:100%; height:52%; object-position:center; }
 .home-hero__heading { font-size:clamp(23px,6vw,32px); }
 .care-list { grid-template-columns:1fr; }
 .clinic-hours .hours-table { font-size:11px; }
 .clinic-hours .hours-table th,.clinic-hours .hours-table td { padding:10px 2px; }
}
@media(prefers-reduced-motion:reduce) {
 .home-hero__slides .home-hero__photo { transition:none; }
}

/* Official DoctorQube banner: retain the original artwork and aspect ratio. */
.reservation-provider { margin:28px auto 0; max-width:320px; text-align:center; }
.reservation-provider__label { margin:0 0 10px; font-size:14px; line-height:1.7; }
.reservation-provider__banner { display:block; border-radius:4px; }
.reservation-provider__banner img { display:block; width:100%; height:auto; }
.reservation-provider__banner:focus-visible { outline:3px solid var(--color-text); outline-offset:4px; }

/* Keep the Sunday/holiday heading on one line at narrow table widths. */
.clinic-hours .hours-table thead th { white-space:nowrap; font-size:14px; }
.clinic-hours .hours-table thead th:last-child { width:4em; }
@media(max-width:767px) {
 .clinic-hours .hours-table thead th { font-size:11px; }
}

/* Give the footer's longer service label its own unbroken column. */
.site-footer__clinic { min-width:0; max-width:100%; }
.site-footer__hours { width:100%; }
.site-footer__hours div { display:grid; grid-template-columns:10em minmax(0,1fr); }
.site-footer__hours dt { white-space:nowrap; }
.site-footer__hours dd { min-width:0; }
@media(max-width:480px) {
 .site-footer__hours div { grid-template-columns:1fr; gap:0; }
}

/* Scroll entrances are enabled only after their observer is installed. */
.motion-wait { opacity: 0; transform: translateY(20px); }
@media (prefers-reduced-motion: reduce), print {
  .motion-wait { opacity: 1 !important; transform: none !important; }
}

/* Each glyph settles into its original position; headings retain their line breaks. */
.motion-letter { display: inline-block; transform-origin: 50% 85%; }

/* A small rabbit guides visitors back to the top, clear of mobile booking actions. */
.back-to-top { position:fixed; right:20px; bottom:max(22px, var(--back-to-top-clearance, 0px)); z-index:35; display:flex; flex-direction:column; align-items:center; gap:2px; width:94px; padding:4px; border:0; background:transparent; color:#713e37; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.back-to-top[hidden] { display:none; }
.back-to-top__rabbit { display:block; width:auto; height:94px; object-fit:contain; filter:drop-shadow(0 3px 3px rgba(78,53,43,.12)); transform-origin:center bottom; }
.back-to-top__label { display:block; white-space:nowrap; border:1px solid #ead9cb; border-radius:999px; background:#fffaf3; padding:6px 8px; font-size:11px; font-weight:700; line-height:1.5; box-shadow:0 3px 12px rgba(78,53,43,.08); }
.back-to-top:focus-visible { outline:3px solid #b65b45; outline-offset:3px; border-radius:18px; }
@media (hover:hover) { .back-to-top:hover .back-to-top__rabbit { animation:rabbit-hop 600ms cubic-bezier(.22,1,.36,1); } }
.back-to-top:active .back-to-top__rabbit { transform:translateY(-4px) scale(.97); }
@keyframes rabbit-hop { 0%,100% { transform:translateY(0) rotate(0); } 35% { transform:translateY(-9px) rotate(-5deg); } 65% { transform:translateY(-3px) rotate(3deg); } }
@media(max-width:1100px) { .back-to-top { right:10px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); width:82px; } .back-to-top__rabbit { height:72px; } .back-to-top__label { font-size:10px; padding:5px 7px; } }
@media(prefers-reduced-motion:reduce) { .back-to-top:hover .back-to-top__rabbit { animation:none; } .back-to-top:active .back-to-top__rabbit { transform:none; } }
@media print { .back-to-top { display:none !important; } }

/* Hero copy has its own line-mask entrance, independent of character animation. */
.home-hero__heading .hero-copy__line {
  display: block;
  overflow: hidden;
  padding-block: .08em;
  margin-block: -.08em;
}
.home-hero__heading .hero-copy__ink {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.home-hero__lead { max-width: 32em; font-weight: 500; }
@media (max-width: 600px) {
  .home-hero__lead { max-width: 24em; font-size: 14px; }
}

.home-hero__heading .hero-copy__chunk { display: inline-block; white-space: nowrap; }

/* Mobile: four headline lines and four supporting lines, then a short succession preview. */
.hero-copy__mobile-break { display: none; }
@media (max-width: 600px) {
  .home-hero { min-height: 0; height: auto; padding: 16px 22px 40px; }
  .home-hero__slides .home-hero__photo { height: 100%; }
  .home-hero::after {
    background: linear-gradient(180deg, rgba(245,239,229,.98) 0%, rgba(245,239,229,.93) 24%, rgba(245,239,229,.85) 70%, rgba(245,239,229,.35) 100%);
  }
  .home-hero__logo { width: 190px; height: auto; margin-bottom: 14px; }
  .home-hero__heading { font-size: clamp(24px, calc(2.5svh + 7px), 29px); line-height: 1.4; letter-spacing: .02em; }
  .home-hero__heading .hero-copy__chunk { display: block; }
  .hero-copy__mobile-break { display: inline; }
  .home-hero__lead { margin-top: 14px; font-size: clamp(14px, 1.8svh, 16px); line-height: 1.6; }
  .home-succession { gap: 10px; }
  .home-succession__visual { margin-top: -22px; padding-right: 68px; }
  .home-succession__photo-frame { height: clamp(62px, calc(100svh - 680px), 120px); aspect-ratio: auto; border-radius: 22px; }
  .home-succession__photo-frame img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
  .home-succession__content { padding-top: 2px; }
  .home-succession__eyebrow { margin-top: 8px; }
  .home-succession__portrait { width: 72px; height: 72px; top: -12px; }
  .home-succession__portrait img { height: 82px; }
  .home-succession__clouds { transform: scale(.5); }
}
@media (max-width: 600px) and (max-height: 740px) {
  .home-hero { padding-top: 6px; padding-bottom: 52px; }
  .home-hero__logo { width: 150px; margin-bottom: 6px; }
  .home-hero__lead { margin-top: 10px; }
  .home-succession { gap: 0; }
  .home-succession__photo-frame { height: 40px; }
}

/* Centered mobile opening: two headline lines and three supporting lines. */
@media (max-width: 600px) {
  .home-hero__content { text-align: center; }
  .home-hero__logo { display: block; width: 220px; margin: 0 auto 20px; }
  .home-hero__heading { font-size: clamp(19px, 5.15vw, 29px); line-height: 1.75; letter-spacing: 0; }
  .home-hero__heading .hero-copy__chunk { display: inline; }
  .home-hero__heading .hero-copy__ink { white-space: nowrap; }
  .hero-copy__mobile-break { display: none; }
  .home-hero__lead { max-width: none; margin: 20px auto 0; font-size: clamp(11px, 3.05vw, 17px); line-height: 1.9; letter-spacing: 0; }
  .home-hero { padding-top: 28px; padding-bottom: 66px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .home-hero { padding-top: 18px; padding-bottom: 58px; }
  .home-hero__logo { width: 200px; margin-bottom: 16px; }
  .home-hero__lead { margin-top: 16px; }
}

/* Balance the mobile succession photo and portrait on one row. */
.home-succession__portrait--mobile { display: none; }
@media (max-width: 600px) {
  .home-hero__logo { width: min(280px, 100%); margin-inline: auto; }
  .home-succession__visual { display: grid; grid-template-columns: minmax(0, 1fr) 86px; align-items: center; gap: 16px; padding-right: 0; }
  .home-succession__photo-frame { width: 100%; height: 110px; }
  .home-succession__portrait--mobile { display: block; position: relative; inset: auto; width: 86px; height: 86px; margin: 0; }
  .home-succession__portrait--mobile img { height: 98px; }
  .home-succession__content > .home-succession__portrait { display: none; }
  .home-succession__clouds { display: none; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .home-hero__logo { width: min(260px, 100%); }
  .home-succession__photo-frame { height: 72px; }
  .home-succession__visual { grid-template-columns: minmax(0, 1fr) 72px; gap: 12px; }
  .home-succession__portrait--mobile { width: 72px; height: 72px; }
  .home-succession__portrait--mobile img { height: 82px; }
}

/* Give the opening room to breathe and restore the photo's desktop proportions. */
@media (max-width: 600px) {
  .home-hero { padding-top: 48px; padding-bottom: 100px; }
  .home-hero__logo { margin-bottom: 28px; }
  .home-hero__lead { margin-top: 26px; }
  .home-succession__visual { grid-template-columns: minmax(0, 1fr) min(52vw, 215px); gap: 12px; align-items: center; }
  .home-succession__photo-frame { height: auto; aspect-ratio: 553 / 385; }
  .home-succession__portrait--mobile { width: min(215px, 100%); height: auto; aspect-ratio: 1; justify-self: center; }
  .home-succession__portrait--mobile img { width: 94%; height: 113%; top: -5%; left: 3%; object-fit: contain; }
}
@media (max-width: 600px) and (max-height: 740px) {
  .home-hero { padding-top: 36px; padding-bottom: 84px; }
  .home-hero__logo { margin-bottom: 24px; }
  .home-hero__lead { margin-top: 22px; }
}
@media (max-width: 600px) {
  .home-succession__visual { display: block; min-height: calc(min(52vw, 215px) + 55px); }
  .home-succession__photo-frame { width: 62%; }
  .home-succession__portrait--mobile { position: absolute; top: 55px; right: 0; left: auto; width: min(52vw, 215px); }
}

/* Restore specialist care alongside the existing services. */
@media (min-width: 768px) { .care-list--three { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.care-menu--five > :last-child { grid-column: 1 / -1; }