/* HAMILLE 訪問歯科 — トップページ専用セクション
   2026-08-19 に site-premium.css から分離。
   トップページにしか現れないブロックのみ（hero-o1 / hero-bridge / trouble /
   voice-card / director-card ほか）。全 13 ページの DOM を走査し、
   他ページに一度も出現しないことを確認済み。
   ★ 読み込み順は必ず site-premium.css の「後」。元ファイル内の記述順を
     保って分離しているため、順序が入れ替わるとカスケードが静かに崩れる。 */


.director-card__voice p {
  margin: 0 0 10px;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink);
}

.director-card__voice p:last-child { margin-bottom: 0; }

.director-card__facts {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: var(--text-note);
}

.director-card__facts dt {
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.director-card__facts dd { margin: 0; color: var(--ink-soft); }


/* Hero h1 — 1行目の句点後のみ手動改行、2行目はアイコン横で1行 */
:lang(ja) .hero-o1__head h1 {
  line-break: strict;
  text-wrap: wrap;
}


/* ── Split storefront hero (home) ── */
.hero-split {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero-split__inner {
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: stretch;
}

.hero-split__media {
  position: relative;
  margin: 0;
  min-height: clamp(340px, 54vh, 580px);
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--navy-deep);
}

.hero-split__slides {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.hero-split__dots {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 46px;
  display: flex;
  gap: 7px;
}

.hero-split__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 1px solid rgba(253, 253, 253, 0.55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.25s ease-out, transform 0.25s var(--ease-out);
}

.hero-split__dot:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.hero-split__media figcaption,
.hero-split__caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 28px 16px 12px;
  font-size: var(--text-note);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(253, 253, 253, 0.92);
  background: linear-gradient(180deg, transparent 0%, rgba(9, 17, 60, 0.88) 100%);
}

.hero-split__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 52px) clamp(22px, 4vw, 44px);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--white) 100%);
}

.hero-split__eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--navy);
}

.hero-split__wordmark {
  margin: 10px 0 0;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--logo-color);
}

.hero-split__sub {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--logo-color);
}

.hero-split__arc {
  display: block;
  width: min(180px, 55%);
  height: 12px;
  margin-top: 10px;
  color: color-mix(in srgb, var(--navy) 45%, var(--line));
}

.hero-split__copy h1 {
  margin: clamp(16px, 2.5vw, 24px) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.9vw, 2.25rem);
  line-height: 1.45;
  color: var(--navy-deep);
  max-width: 14em;
}

.hero-split__lead {
  margin: 14px 0 0;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 36em;
}

.hero-split__hours {
  margin: 16px 0 0;
  max-width: 36em;
  padding: 12px 16px;
  border-left: 3px solid var(--navy);
  background: color-mix(in srgb, var(--navy) 5%, var(--white));
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-soft);
}

.hero-split__hours-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--navy);
}


/* ── Trust ribbon (static — trust-first, no marquee) ── */
.trust-ribbon {
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 35%, transparent);
  background: var(--navy-deep);
  color: rgba(253, 253, 253, 0.92);
}

.trust-ribbon__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--gutter-inline);
  list-style: none;
}

.trust-ribbon__item {
  display: inline-flex;
  align-items: center;
  padding: 14px clamp(12px, 2.5vw, 24px);
  /* 下限 11px は高齢の利用者に小さすぎる（JIS X 8341 の補助文字下限 12px）。
     clamp の下限のみ引き上げ、大画面での見え方は変えない。 */
  font-size: clamp(0.75rem, 1.2vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.trust-ribbon__item:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: clamp(12px, 2.5vw, 24px);
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

.trust-ribbon--static .trust-ribbon__item {
  opacity: 0;
  transform: translateY(5px);
  animation: trust-ribbon-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.trust-ribbon--static .trust-ribbon__item:nth-child(1) { animation-delay: 0.95s; }

.trust-ribbon--static .trust-ribbon__item:nth-child(2) { animation-delay: 1.05s; }

.trust-ribbon--static .trust-ribbon__item:nth-child(3) { animation-delay: 1.15s; }

.trust-ribbon--static .trust-ribbon__item:nth-child(4) { animation-delay: 1.25s; }


.facility-kasan {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.facility-kasan__heading {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  font-weight: 700;
  color: var(--navy-deep);
  text-wrap: balance;
}

.facility-kasan__lead,
.facility-kasan__note {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.facility-kasan__lead { margin-bottom: 16px; }

.facility-kasan__note { margin-top: 16px; }

.facility-kasan__details {
  border: 1px solid var(--line);
  background: var(--white);
  margin-top: 10px;
}

.facility-kasan__details summary {
  padding: 16px 48px 16px 18px;
  font-size: var(--text-body);
}

.facility-kasan__body {
  padding: 0 18px 18px;
}

.facility-kasan__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}

.facility-kasan__list li + li { margin-top: 8px; }

.facility-kasan__unit {
  margin: 14px 0 0;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--navy-deep);
}

.facility-kasan__unit strong {
  font-family: var(--font-logo);
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}


.director-card {
  display: grid;
  grid-template-columns: minmax(200px, 252px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  margin-top: 24px;
}


/* 白マット写真 — コミュニティの tilted polaroid / print mat 系を医療LP向けに抑制 */
.director-card__photo-stage {
  position: relative;
  align-self: start;
  padding: 6px 10px 16px;
  min-width: 0;
}

.director-card__photo-stage::before {
  content: "";
  position: absolute;
  inset: 10px 4px 14px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ill-bg) 65%, white);
  transform: rotate(4.5deg);
  z-index: 0;
  pointer-events: none;
}

.director-card__photo {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(14px, 2.4vw, 20px);
  padding-bottom: clamp(18px, 3vw, 28px);
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow:
    0 1px 0 rgba(9, 17, 60, 0.05),
    0 4px 14px rgba(9, 17, 60, 0.07),
    0 18px 40px -12px rgba(9, 17, 60, 0.2);
  transform: rotate(-2.8deg);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
}

.director-card:hover .director-card__photo {
  transform: rotate(-1.2deg) translateY(-3px);
  box-shadow:
    0 2px 0 rgba(9, 17, 60, 0.04),
    0 8px 20px rgba(9, 17, 60, 0.1),
    0 24px 48px -14px rgba(9, 17, 60, 0.24);
}

.director-card__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: center 24%;
  border-radius: var(--radius-btn);
}

.director-card__greeting {
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-size: var(--text-sub);
  font-weight: 700;
  line-height: 1.75;
  color: var(--navy-deep);
  border-bottom: 2px solid color-mix(in srgb, var(--navy) 18%, var(--line));
  transition: border-color 0.4s ease;
  line-break: auto;
  text-wrap: wrap;
}

.director-card:hover .director-card__greeting {
  border-bottom-color: color-mix(in srgb, var(--navy) 42%, var(--line));
}

.director-card__role {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--navy);
}

.director-card__name {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.3;
}

.director-card__lead {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
  text-wrap: wrap;
  line-break: auto;
}

.director-card--compact {
  grid-template-columns: minmax(132px, 176px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
}

.director-card--compact .director-card__lead {
  margin-top: 10px;
  font-size: var(--text-body);
}


.trouble-facility-link {
  margin: 14px 0 0;
}

#trust .director-card {
  margin-top: 8px;
}

.director-card__points {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.director-card__points li {
  position: relative;
  padding-left: 14px;
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink-soft);
}

.director-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy);
}

.director-card__note {
  margin: 16px 0 0;
  font-size: var(--text-note);
  line-height: 1.65;
  color: var(--ink-soft);
}


.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.voice-card {
  position: relative;
  padding: 24px 20px 20px;
  border: 1px solid var(--line);
  background: var(--white);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.voice-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: color-mix(in srgb, var(--navy) 25%, var(--line));
}

.voice-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.voice-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 10%, white);
  border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--line));
}

.voice-card__quote {
  position: absolute;
  top: 8px;
  right: 16px;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: color-mix(in srgb, var(--navy) 12%, var(--line));
  pointer-events: none;
}

.voice-card p {
  margin: 0;
  font-size: var(--text-body);
  color: var(--ink-soft);
  line-height: 1.9;
}


/* Voices — editorial featured + illustration cards (Plan E #visit-editorial) */
.visit-editorial--featured {
  margin-top: clamp(20px, 3vw, 28px);
  margin-bottom: clamp(18px, 2.5vw, 24px);
}

.visit-editorial--featured .visit-editorial__inner {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  align-items: stretch;
  background: color-mix(in srgb, var(--cream, #f3ede4) 55%, white);
  box-shadow: var(--shadow-soft);
}

.visit-editorial--featured .visit-editorial__media {
  border-radius: 0;
  box-shadow: none;
  min-height: clamp(200px, 32vw, 280px);
}

.visit-editorial--featured .visit-editorial__media--staff {
  min-height: 0;
}

.visit-editorial--featured .visit-editorial__media--staff img {
  width: 100%;
  height: 100%;
  min-height: clamp(200px, 32vw, 280px);
  object-fit: cover;
  object-position: 32% 18%;
}

@media (min-width: 861px) {
  .visit-editorial--featured .visit-editorial__media--staff img {
    min-height: 100%;
    object-position: 28% 16%;
  }
}

.visit-editorial--featured .visit-editorial__media--illus {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-lavender, #e8dff5) 35%, white);
}

.visit-editorial--featured .visit-editorial__media--illus .visit-editorial__illus {
  width: clamp(140px, 28vw, 220px);
  height: auto;
  object-fit: contain;
  padding: clamp(16px, 3vw, 28px);
}

.visit-editorial--featured .visit-editorial__media--illus img {
  min-height: auto;
  width: clamp(140px, 28vw, 220px);
  height: auto;
}

.visit-editorial--featured .visit-editorial__body {
  padding: clamp(20px, 3vw, 28px);
}
/* blockquote の既定マージンが左右 28px ずつ残っていて、引用の幅が
   422 → 366px に削られていた。19.2px の文字で 1 行 19 字しか入らず、
   word-break: auto-phrase の折り返しが階段状に見えていた原因。 */
.visit-editorial--featured blockquote {
  margin: 0;
}

.visit-editorial--featured .visit-editorial__note {
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--navy) 12%, var(--line));
}


.voices-grid--illus {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.voice-card--illus {
  padding: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
}

.voice-card--illus::before {
  display: none;
}

.voice-card--illus:hover {
  transform: translateY(-3px);
}

.voice-card__scene {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--navy) 5%, white) 0%,
    color-mix(in srgb, var(--ill-bg, #e8f3fa) 40%, white) 100%
  );
  border-bottom: 1px solid var(--line);
}

.voice-card__illus {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--navy) 4%, white);
  border: 1px solid color-mix(in srgb, var(--navy) 10%, var(--line));
  padding: 4px;
}

.voice-card__scene-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.voice-card__content {
  padding: 18px 18px 20px;
}

.voice-card--illus .voice-card__content p {
  font-size: var(--text-body);
  line-height: 1.85;
}


@media (max-width: 860px) {
  .voices-grid--illus {
    grid-template-columns: 1fr;
  }

  .director-card--compact .director-card__photo-stage {
    width: min(100%, 168px);
  }
}


@media (prefers-reduced-motion: reduce) {
  .visit-photo-stack__card {
    animation: none !important;
    transition: none !important;
  }

  .director-card__photo {
    transform: rotate(-1.5deg) !important;
    transition: none !important;
  }

  .director-card:hover .director-card__photo {
    transform: rotate(-1.5deg) !important;
  }

  .hero-o1__accent {
    animation: none !important;
    opacity: 1 !important;
    transform: rotate(-5deg) !important;
  }

  .trust-ribbon--static .trust-ribbon__item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


@media (max-width: 860px) {
  .hero-split__inner {
    grid-template-columns: 1fr;
  }

  .hero-split__media {
    min-height: clamp(240px, 42vw, 320px);
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .hero-split__copy {
    padding: 24px clamp(16px, 4vw, 24px) 28px;
  }

  .director-card {
    grid-template-columns: 1fr;
    max-width: none;
    gap: 20px;
    align-items: start;
  }

  .director-card__photo-stage {
    width: min(100%, 300px);
    margin-inline: auto;
    padding: 8px 16px 20px;
  }

  .director-card__photo-stage::before {
    inset: 12px 8px 18px 12px;
    transform: rotate(3.5deg);
  }

  .director-card__photo {
    transform: rotate(-2.2deg);
  }

  .director-card__photo img {
    aspect-ratio: 3 / 4;
    object-position: center 22%;
  }

  .visit-editorial--featured .visit-editorial__body {
    padding: 16px var(--gutter-inline, 14px) 18px;
  }

  .visit-editorial--featured .visit-editorial__quote {
    font-size: clamp(0.98rem, 4.1vw, 1.1rem);
    line-height: 1.65;
  }
}


.voice-card:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--navy) 22%, var(--line));
}


.trouble-hub {
  margin-top: var(--space-stack-sm);
  width: 100%;
  --trouble-gap: clamp(8px, 1.2vw, 12px);
  --trouble-tile-pad: clamp(6px, 1vw, 10px);
  --trouble-icon-max: 136px;
}


.trouble-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--trouble-gap);
  margin-bottom: 16px;
  width: 100%;
}

/* 説明欄は押したタイルの行の直下に差し込まれる（配置は JS 側）。
   グリッドの子として全列にまたがらせることで、その場で開いたように見せる。
   ── 全 8 項目のうち関係するのは普通ひとつなので、常時ぜんぶ見せるより
      「選んだものだけその場で開く」ほうが読み手の負担が小さい。 */
.trouble-grid > .trouble-detail {
  grid-column: 1 / -1;
  margin: 0;
}

/* 開いた説明と、その上のタイルを線でつなぐ */
.trouble-grid > .trouble-detail::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  /* 選択中のタイルの真下に来るよう、位置は JS が --tail-x で渡す。
     中央固定だと、どのタイルを開いたのか線が指し示せない。 */
  margin: 0 0 14px calc(var(--tail-x, 50%) - 17px);
  border-radius: 0 0 2px 2px;
  background: var(--navy);
  transition: margin-left 0.25s var(--ease-out);
}


.trouble-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: clamp(6px, 1vw, 8px);
  border: 1px solid color-mix(in srgb, var(--navy) 6%, var(--line));
  border-radius: var(--radius-card);
  background: var(--white);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  box-shadow: 0 3px 12px rgba(9, 17, 60, 0.05);
  transition: box-shadow 0.25s var(--ease-out), transform 0.2s var(--ease-out);
}


.trouble-ico {
  width: 100%;
  max-width: var(--trouble-icon-max);
  aspect-ratio: 1;
  height: auto;
  flex-shrink: 0;
  margin: 0 auto 6px;
  display: block;
  overflow: hidden;
  /* hover の拡大分を吸収する余白。これが無いと拡大した瞬間に絵の端が切れる */
  padding: 4%;
  box-sizing: border-box;
  border-radius: var(--illus-radius, 22px);
  box-shadow: none;
}

/* WebP 優先の <picture> を挟んだぶん、img の 100% が参照する箱を作る */
.trouble-ico picture {
  display: block;
  width: 100%;
  height: 100%;
}

.trouble-ico img {
  display: block;
  width: 100%;
  height: 100%;
  /* 2026-08-21 cover → contain。
     もとは cover ＋ transform: scale(1.06) で、168px の枠に 178px で描画され、
     .trouble-ico の overflow: hidden に上下左右 3% ずつ削られていた。
     写真なら切れてよいが、これは構図の決まった水彩画で、家の屋根や
     人物の頭が欠けていた（実際に指摘を受けた）。
     枠に 4% の余白を持たせ、hover の拡大はその余白の中で収まるようにする。 */
  object-fit: contain;
  transform: none;
  transform-origin: center center;
  transition: transform 0.25s var(--ease-out);
}

.trouble-tile:hover .trouble-ico img {
  transform: scale(1.045);
}


.trouble-tile__label {
  display: block;
  width: 100%;
  /* 8 つのお悩みタイルの見出し。下限 11px では高齢の利用者に小さすぎる。
     JIS X 8341 の補助文字下限 12px を守る。 */
  font-size: clamp(1rem, 3vw, 1.0625rem);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.35;
}


.trouble-mobile-hint {
  display: none;
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--navy) 38%, var(--ink-soft));
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--navy) 10%, var(--line));
}


.trouble-detail {
  padding: 22px 24px;
  border: none;
  border-radius: var(--radius-card);
  background: var(--white);
  scroll-margin-top: 72px;
  box-shadow: 0 12px 40px rgba(9, 17, 60, 0.07);
  width: 100%;
  box-sizing: border-box;
}

.trouble-detail__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.35;
}

.trouble-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trouble-detail__cell {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft);
}

.trouble-detail__cell strong {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
}

.trouble-detail__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trouble-detail__list li { padding: 3px 0; }

.trouble-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}


.trouble-detail__grid--simple {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.trouble-cta-band {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.trouble-cta-band__text {
  margin: 0 0 14px;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.6;
}


@media (max-width: 767px) {
  .trouble-detail__grid--simple { grid-template-columns: 1fr; }
}


.visit-editorial {
  padding-top: 0;
}

.visit-editorial__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
}

.visit-editorial__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.visit-editorial__media img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.visit-editorial__body {
  padding: 8px 0;
}

.visit-editorial__eyebrow {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--navy);
}

.visit-editorial__quote {
  margin: 0 0 12px;
  font-family: var(--font-display);
  /* 19.2px はトークン外の値だった。小節見出しと同じ段に載せる。 */
  font-size: var(--text-sub);
  text-wrap: pretty;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.75;
  line-break: auto;
  text-wrap: wrap;
}

.visit-editorial__note {
  margin: 0;
  font-size: var(--text-note);
  color: var(--ink-soft);
  line-height: 1.6;
}


@media (max-width: 767px) {
  .trouble-mobile-hint { display: block; }

  .trouble-grid {
    margin-bottom: 12px;
  }

  .trouble-detail {
    scroll-margin-top: 56px;
  }

  .trouble-detail__grid { grid-template-columns: 1fr; }

  .visit-editorial__inner { grid-template-columns: 1fr; }
}


@media (min-width: 640px) {
  .trouble-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


@media (min-width: 1024px) {
  .trouble-hub {
    --trouble-gap: 12px;
    --trouble-tile-pad: 10px;
    --trouble-icon-max: 168px;
  }

  .trouble-tile__label { font-size: 1rem; }
}


@media (min-width: 1200px) {
  .trouble-hub {
    --trouble-icon-max: 176px;
  }
}


.hero-o1 {
  position: relative;
  background: var(--ill-bg);
  border-bottom: none;
  overflow: hidden;
}

.hero-o1__visual {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ill-bg);
  pointer-events: none;
}

.hero-o1__accent {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  width: min(104px, 20vw);
  max-width: 120px;
  height: auto;
  margin-top: clamp(2px, 0.5vw, 6px);
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(1, 73, 154, 0.14));
  transform-origin: 50% 80%;
  will-change: transform, opacity;
  animation: hero-o1-accent-hop 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.hero-o1__title-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1.2vw, 14px);
  width: 100%;
  max-width: min(640px, 100%);
  margin-top: clamp(4px, 0.8vw, 8px);
}

.hero-o1__title-row h1 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  max-width: none;
}

/* 2026-09-02 修正：無条件の nowrap だったため、スマホ幅で h1 の枠を
   55〜100px はみ出し、親の overflow:hidden で文字が切れていた。
   以前は収まっていた（320px で余裕 7px）が、見出しを大きくした結果あふれた。
   文書の横スクロールは発生しないので、横溢れの検査では検出できない。
   実測で 550px 以上なら1行に収まる。560px 以上に限定する。 */
@media (min-width: 560px) {
  .hero-o1__title-line2 {
    white-space: nowrap;
  }
}

/* 560px 未満では折り返す。この h1 は .section-title ではないため
   :lang(ja) の折り返し指定（auto-phrase / pretty）の対象外で、
   「…できま / す。」のように 2 文字だけが最終行に残っていた。
   文節で折り、2行の長さを均す。 */
@media (max-width: 559px) {
  .hero-o1__title-line2 {
    word-break: auto-phrase;
    text-wrap: balance;
  }
}

/* height ではなく min-height。固定高だと視口が低いときに
   clamp() の下限が内容の高さを下回り、overflow:hidden で
   最終行（.hero-o1__cta-note）が途中で切れる。 */
.hero-o1__plate {
  position: relative;
  z-index: 4;
  width: min(1200px, 100%);
  margin-inline: auto;
  min-height: var(--hero-o1-visual-height, clamp(210px, 30vh, 280px));
  box-sizing: border-box;
}

.hero-o1__head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 100%;
  padding: clamp(52px, 7vw, 62px) clamp(20px, 4vw, 40px) clamp(14px, 2vw, 20px);
  max-width: min(720px, 82%);
  box-sizing: border-box;
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .hero-o1__plate {
    display: flex;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 48px);
  }

  .hero-o1__head { flex: 1 1 auto; }

  .hero-o1__area {
    /* 図＋テキストの横並び。街景帯が「経路」を担うのに対し、
       ここは「範囲」を担う（同心円＝半径16km の目安）。 */
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
    align-self: center;
    width: min(336px, 28vw);
    margin-right: clamp(20px, 4vw, 40px);
    padding: 17px 19px;
    background: rgba(253, 253, 253, 0.82);
    border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--line));
    border-radius: var(--radius-sm);
    color: var(--navy-deep);
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease-out);
  }

  .hero-o1__area:hover {
    background: #fff;
    border-color: var(--navy);
    transform: translateY(-1px);
  }

  .hero-o1__area:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--navy) 45%, transparent);
    outline-offset: 2px;
  }

  .hero-o1__area-fig {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
  }
  .hero-o1__area-text {
    display: grid;
    gap: 3px;
    min-width: 0;
  }
  /* 外側の円がゆっくり広がる。「範囲が届く」感じを出す。
     街景帯と同様、動きを減らす設定では停止する。 */
  .hbr-ring { transform-origin: center; transform-box: fill-box; }
  .hbr-ring--3 { animation: hbr-pulse 3.4s ease-out infinite; }
  .hbr-ring--2 { animation: hbr-pulse 3.4s ease-out infinite .5s; }
  @keyframes hbr-pulse {
    0%   { transform: scale(.96); opacity: .28; }
    45%  { opacity: .7; }
    100% { transform: scale(1.07); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hbr-ring--3, .hbr-ring--2 { animation: none; opacity: .5; }
  }

  .hero-o1__area-label {
    font-size: var(--text-note);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--navy);
  }

  .hero-o1__area-main {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .hero-o1__area-sub {
    font-size: var(--text-note);
    color: var(--ink-soft);
  }

  .hero-o1__area-go {
    display: inline-flex;
    vertical-align: -2px;
    margin-left: 5px;
    color: var(--navy);
    transition: transform 0.2s var(--ease-out);
  }
  .hero-o1__area:hover .hero-o1__area-go { transform: translateX(3px); }
}


.hero-o1__eyebrow {
  margin: 0;
  font-size: var(--text-note);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--navy) 82%, var(--ink-soft));
}

.hero-o1__head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  line-height: 1.36;
  /* 角ゴシックは丸ゴシックより字面が締まるため、字間をわずかに開ける。
     .section-title と同値に揃える。 */
  letter-spacing: 0.02em;
  color: var(--navy-deep);
}

.hero-o1__head .hero-o1__hours {
  margin: clamp(6px, 1vw, 10px) 0 0;
  padding: 0;
  border: none;
  background: transparent;
  /* 2026-08-24 clamp(11px,0.95vw,13px) → 15〜17px。
     「いつ来てくれるのか」はファーストビューで最も知りたいことのひとつなのに、
     実測でページ内で最も小さい 11px の部類に入っていた（費用 16px・エリア 18px 太字と比べて逆転）。
     飾りを足さずに、字の大きさだけで順番を直す。 */
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  color: var(--ink);
}

.hero-o1__head .hero-split__hours-label {
  display: block;
  margin-bottom: 2px;
  /* 診療時間はファーストビューの要点。10px から引き上げる */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--navy);
}

.hero-o1__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  pointer-events: auto;
}

.hero-o1__cta-note {
  margin: 8px 0 0;
  font-size: 1rem;
  /* 1.5 は日本語の本文としては詰まりすぎ。業界指針の下限は 1.6。 */
  line-height: 1.7;
  color: var(--ink-soft);
}


.why-visit {
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, var(--line));
  background: color-mix(in srgb, var(--navy) 3%, var(--white));
}

.why-visit__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  width: min(1200px, 100%);
}

.why-visit__list li {
  padding: 14px 16px;
  text-align: center;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.7;
  color: var(--navy-deep);
  border-right: 1px solid color-mix(in srgb, var(--navy) 8%, var(--line));
}

.why-visit__list li:last-child {
  border-right: 0;
}


.trouble-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 16px 0 0;
}

.trouble-audience a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  background: white;
  text-decoration: none;
}

.trouble-audience a:hover {
  border-color: color-mix(in srgb, var(--navy) 35%, var(--line));
  background: color-mix(in srgb, var(--navy) 4%, white);
}

.hero-o1__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ill-bg) 94%, white) 0%,
    color-mix(in srgb, var(--ill-bg) 70%, white) 36%,
    transparent 58%
  );
}

@media (min-width: 861px) {
  .hero-o1__visual {
    height: var(--hero-o1-visual-height, clamp(320px, 42vh, 400px));
  }

  .hero-o1__plate {
    min-height: var(--hero-o1-visual-height, clamp(320px, 42vh, 400px));
  }

  .hero-o1__accent {
    width: min(112px, 14vw);
    max-width: 128px;
    margin-top: 4px;
  }
}

@media (min-width: 1101px) {
  .hero-o1__accent {
    width: min(120px, 12vw);
    max-width: 136px;
  }
}

/* 訪問の動線帯（ヒーロー下部）— 2026-08-18
   3D ステッカーを撤去した代わりに、「東京5院 → 訪問車 → ご自宅」を
   ここで示す。波形の区切りはそのまま下に残し、この帯は区切りの直前に置く。 */
.hero-bridge__street {
  background: var(--ill-bg);
  padding: 0 clamp(12px, 4vw, 40px);
  line-height: 0;
}

.hero-bridge__street-art {
  display: block;
  width: 100%;
  /* 帯としての比率を保つ。1280px まで広げたら高さが 422px になり、
     本文ブロックより大きくなって主役が入れ替わってしまった。
     幅は --wrap-max に合わせ、高さは 240px を上限に抑える。 */
  max-width: var(--wrap-max);
  max-height: 240px;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 640px) {
  /* 狭い画面では文字ラベルが潰れるため、帯そのものを少し詰める */
  .hero-bridge__street { padding-inline: 8px; }
}


.hero-bridge__seam {
  display: block;
  line-height: 0;
  background: var(--ill-bg);
}

.hero-bridge__wave {
  display: block;
  width: 100%;
  height: clamp(18px, 3vw, 28px);
}

.hero-bridge__wave path {
  fill: var(--white);
}

.hero-bridge__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ── 3D → 实景云彩桥（渐变溶入 + 波浪裁切，无平底白带） ── */
.hero-bridge {
  position: relative;
  background: var(--white);
}

.hero-bridge__scene {
  position: relative;
  margin-top: calc(-1 * clamp(32px, 5vw, 52px));
  z-index: 2;
}

.hero-bridge__scene-visual {
  position: relative;
  overflow: hidden;
  height: clamp(200px, 32vh, 320px);
  background: color-mix(in srgb, var(--ill-bg) 55%, #c5dff5);
  clip-path: url(#hero-scene-wave);
}

.hero-bridge__scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  display: block;
  filter: saturate(0.94) contrast(1.02);
}

.hero-bridge__scene-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 55% at 18% 0%, rgba(255, 255, 255, 0.92) 0%, transparent 62%),
    radial-gradient(ellipse 70% 48% at 82% 4%, rgba(255, 255, 255, 0.78) 0%, transparent 58%),
    linear-gradient(
      180deg,
      var(--ill-bg) 0%,
      color-mix(in srgb, var(--ill-bg) 88%, transparent) 12%,
      color-mix(in srgb, var(--ill-bg) 48%, transparent) 26%,
      color-mix(in srgb, var(--ill-bg) 16%, transparent) 40%,
      transparent 54%
    );
}

.hero-bridge__scene-floor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 62%,
    color-mix(in srgb, var(--white) 35%, transparent) 82%,
    var(--white) 100%
  );
}

.hero-bridge__scene-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: min(1200px, 100%);
  margin-inline: auto;
  left: 0;
  right: 0;
  padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 40px);
  box-sizing: border-box;
  pointer-events: none;
}

.hero-bridge__scene-copy {
  max-width: min(380px, 90%);
  padding: clamp(12px, 1.8vw, 16px) clamp(14px, 2vw, 18px);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--white) 90%, transparent);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(9, 17, 60, 0.07);
  pointer-events: auto;
}

.hero-bridge__scene-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.45;
  color: var(--navy-deep);
}

.hero-bridge__scene-lead {
  margin: 0;
  font-size: clamp(0.8125rem, 1.4vw, 0.9375rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero-bridge__scene-badge {
  position: absolute;
  bottom: clamp(20px, 4vw, 36px);
  right: clamp(20px, 4vw, 40px);
  margin: 0;
  padding: 4px 10px;
  font-size: var(--text-note);
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-sm);
  pointer-events: none;
}


/* 棉花云动效 — 扇贝区与天空区连贯 */
.hero-bridge__clouds {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

.hero-bridge__clouds--bridge {
  bottom: calc(-1 * clamp(20px, 3.5vw, 36px));
  height: clamp(72px, 11vw, 112px);
}

.hero-bridge__clouds--sky {
  top: 0;
  height: 46%;
}

.hero-bridge__cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  filter: blur(14px);
  will-change: transform;
}

.hero-bridge__cloud--a {
  width: 22%;
  height: 70%;
  left: 8%;
  top: 10%;
  animation: bridge-cloud-drift-a 32s ease-in-out infinite;
}

.hero-bridge__cloud--b {
  width: 18%;
  height: 55%;
  left: 38%;
  top: 20%;
  animation: bridge-cloud-drift-b 26s ease-in-out infinite;
}

.hero-bridge__cloud--c {
  width: 14%;
  height: 48%;
  right: 12%;
  top: 8%;
  animation: bridge-cloud-drift-c 30s ease-in-out infinite;
}

.hero-bridge__cloud--d {
  width: 28%;
  height: 55%;
  left: 6%;
  top: 8%;
  animation: bridge-cloud-drift-d 36s ease-in-out infinite;
}

.hero-bridge__cloud--e {
  width: 20%;
  height: 42%;
  left: 42%;
  top: 4%;
  animation: bridge-cloud-drift-e 28s ease-in-out infinite;
}

.hero-bridge__cloud--f {
  width: 16%;
  height: 38%;
  right: 18%;
  top: 12%;
  animation: bridge-cloud-drift-f 34s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bridge__cloud {
    animation: none;
  }
}


.hero-bridge__cta {
  background: var(--white);
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, var(--line));
}

.hero-bridge__cta-inner {
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: var(--space-stack) var(--gutter-inline) var(--space-block);
  box-sizing: border-box;
}

.hero-bridge__cta .hero-split__lead {
  margin: 0;
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 40em;
}


/* ── Fused hero — 3D clay + 实景单图合成（hero-o1-bridge-fused） ── */
.hero-bridge--fused {
  background: var(--white);
}

.hero-bridge--fused .hero-o1__head {
  max-width: min(520px, 58%);
  padding: 0;
  height: auto;
}

.hero-bridge--fused .hero-bridge__scene-copy {
  pointer-events: auto;
}

.hero-bridge--fused .hero-bridge__scene-badge {
  bottom: clamp(14px, 2.5vw, 24px);
  right: clamp(20px, 4vw, 40px);
}


.visit-narrative {
  background: var(--white);
  padding: var(--space-block) 0 var(--space-stack);
  border-bottom: 1px solid var(--line);
}

.visit-narrative__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-block);
  align-items: center;
  width: min(var(--wrap-max), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter-inline);
}

.visit-narrative__copy {
  padding-left: clamp(0px, 2vw, 12px);
}

.visit-narrative__title {
  margin: 0 0 8px;
  line-height: 1.45;
  color: var(--navy-deep);
  /* font-size / font-family は site-premium.css の小節見出しルールに任せる。
     ここで clamp(1.05rem, 2.2vw, 1.35rem) を重ねていたため、
     h2 なのに 21.6px となり、h3（22px）より小さいという逆転が起きていた。 */
}

.visit-narrative__lead {
  margin: 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 28em;
}


/* 訪問ナラティブ — 写真スタック（ポラロイド扇形3枚 · F-lite） */
.visit-photo-stack {
  position: relative;
  margin: 0;
  padding-bottom: 12px;
}

.visit-photo-stack__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: visible;
}

.visit-photo-stack__stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12px 8px -10px 16px;
  border-radius: var(--illus-radius);
  background: color-mix(in srgb, var(--navy) 5%, var(--ill-bg));
  box-shadow: 0 4px 16px rgba(1, 73, 154, 0.07);
  transform: rotate(-2.5deg);
}

.visit-photo-stack__card {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  border: 4px solid var(--white);
  border-radius: var(--illus-radius);
  overflow: hidden;
  background: var(--white);
  box-shadow:
    0 6px 20px rgba(1, 73, 154, 0.1),
    0 0 0 1px color-mix(in srgb, var(--navy) 8%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(10px, 14px) rotate(3deg) scale(0.92);
  transition:
    transform 0.68s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.visit-photo-stack__card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 42%;
}

.visit-photo-stack__badge,
.visit-photo-stack__caption {
  display: none;
}


.trouble-3d-band {
  margin-bottom: clamp(20px, 3vw, 28px);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--navy) 10%, var(--line));
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.trouble-3d-band img {
  width: 100%;
  display: block;
  max-height: 200px;
  object-fit: cover;
  object-position: center top;
}

.trouble-3d-band__cap {
  margin: 0;
  padding: 8px 12px;
  font-size: var(--text-note);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
  border-top: 1px solid var(--line);
}


@media (max-width: 860px) {
  .hero-o1 {
    --hero-o1-visual-height: auto;
    display: flex;
    flex-direction: column;
    padding-top: clamp(52px, 12vw, 58px);
  }

  .hero-o1__shade {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--ill-bg) 92%, white) 0%,
      color-mix(in srgb, var(--ill-bg) 78%, white) 100%
    );
  }

  /* モバイル — 3Dアイコンはタイトル右隣 */
  .hero-o1__accent {
    display: block;
    width: min(64px, 16vw);
    max-width: 68px;
    margin-top: 2px;
  }

  .hero-o1__title-row {
    gap: clamp(2px, 0.6vw, 6px);
    max-width: 100%;
  }

  .hero-o1__plate {
    position: relative;
    width: 100%;
    height: auto;
    order: 1;
  }

  .hero-o1__head {
    position: static;
    max-width: none;
    height: auto;
    padding: 0 max(14px, var(--gutter-inline)) clamp(14px, 3vw, 18px);
    pointer-events: auto;
  }

  .hero-o1__eyebrow {
    display: block;
    /* 10px は高齢の利用者に小さすぎる。JIS X 8341 の補助文字下限に合わせる */
    font-size: 1rem;
  }

  .hero-o1__head h1 {
    font-size: clamp(1.7rem, 7.5vw, 2.1rem);
    line-height: 1.4;
  }

  .hero-o1__head .hero-o1__hours {
    margin-top: 8px;
    max-width: none;
    font-size: var(--text-note);
    line-height: 1.45;
  }

  .hero-o1__actions {
    flex-direction: column;
    width: 100%;
    margin-top: 12px;
  }

  .why-visit__list {
    grid-template-columns: 1fr;
  }

  .why-visit__list li {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--navy) 8%, var(--line));
    text-align: left;
    padding-inline: max(14px, var(--gutter-inline));
  }

  .why-visit__list li:last-child {
    border-bottom: 0;
  }

  .visit-narrative__lead {
    max-width: none;
  }

  .hero-bridge__cta .hero-split__lead {
    max-width: none;
  }

  .visit-narrative__inner {
    grid-template-columns: 1fr;
    gap: var(--space-stack);
  }

  .visit-narrative__copy {
    padding-left: 0;
  }

  .visit-narrative__frame {
    order: -1;
  }

  .visit-narrative {
    padding: var(--space-stack) 0 var(--space-stack-sm);
  }

  .hero-bridge__cta-inner {
    padding: var(--space-stack-sm) var(--gutter-inline) var(--space-stack);
  }

  .trouble-3d-band {
    margin-bottom: 16px;
  }

  .trouble-3d-band img {
    max-height: 140px;
  }
}


@media (min-width: 861px) and (max-width: 1100px) {
  .hero-o1 {
    --hero-o1-visual-height: clamp(300px, 40vh, 380px);
  }

  .hero-o1__head {
    max-width: min(640px, 72%);
  }

  .hero-o1__accent {
    width: min(96px, 12vw);
    max-width: 108px;
  }
}


/* ── ヒーローの相談ボタン：スマホでは出さない ──
   2026-08-20。スマホには画面下部に固定バーがあり「電話相談 / Web予約」が
   常時出ている。ヒーローに同じ 2 つを置くと同一画面に二重で並び、
   さらに 96px を占めて挿絵と写真を折り返しの下へ押し出していた。
   スマホでは文字リンク 1 行に置き換え、大画面（固定バーが無い）では
   ボタンのまま残す。 */
@media (max-width: 860px) {
  .hero-o1__actions { display: none; }
  .hero-o1__cta-note--pc { display: none; }
  .hero-o1__cta-note--sp { display: block; margin-top: 4px; }
  .hero-o1__cta-note--sp .text-link {
    font-size: var(--text-body);
    font-weight: 700;
  }
}

@media (min-width: 861px) {
  .hero-o1__cta-note--sp { display: none; }
}


/* ══════════════════════════════════════════════════════
   訪問体制（4枚カード）と できること（3項目）
   2026-08-20 クライアント確認を受けて新設。

   旧版は語句を裸の <li> で並べただけで、スマホでは折り返した
   文字列にしか見えなかった。「何を言いたいのか分からない」という
   指摘は正しく、情報の型（＝これは事実の一覧である）が
   形から読み取れないことが原因だった。
   ══════════════════════════════════════════════════════ */

/* ── 訪問体制：濃紺の面に 2×2 ── */
.visit-system {
  padding-block: clamp(32px, 5vw, 52px);
  background: var(--navy-deep);
  color: var(--white);
}

.visit-system__label {
  margin: 0 0 clamp(16px, 2.5vw, 22px);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(253, 253, 253, 0.72);
}

.visit-system__grid {
  display: grid;
  /* 既定は1列。列数は下のブレークポイントで上げる。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(253, 253, 253, 0.16);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(253, 253, 253, 0.04);
}

.visit-system__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2.6vw, 24px);
}

/* 罫線は列数に合わせて引く。列数が変わるのに規則が変わらないと、
   行をまたぐ線が中途半端に残る（実際そうなっていた）。 */

/* 1列：下線だけ、最後は無し */
.visit-system__item { border-bottom: 1px solid rgba(253, 253, 253, 0.16); }
.visit-system__item:last-child { border-bottom: 0; }

/* 2列 */
@media (min-width: 700px) {
  .visit-system__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit-system__item { border-right: 1px solid rgba(253, 253, 253, 0.16); }
  .visit-system__item:nth-child(2n) { border-right: 0; }
  .visit-system__item:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* 4列：短い項目が4つ並ぶだけなので、広い画面では横に使い切る。
   2列のままだと 1440px で1枠 596px に対して文字が 225px しか無く、
   6割が空いて「間延びして見える」（院方の指摘どおり）。 */
/* 説明文を 16px にしたことで、4列に必要な幅が上がった。
   1格に必要なのは 256px＋左右余白 36px＝292px。
   実測で 1260px では 267px しか取れず折り返し、1280px で 301px 取れて収まる。
   4列の開始を 1100 → 1280px に上げる。 */
@media (min-width: 1280px) {
  .visit-system__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .visit-system__item { border-bottom: 0; border-right: 1px solid rgba(253, 253, 253, 0.16); }
  .visit-system__item:last-child { border-right: 0; }
}

.visit-system__body { display: flex; flex-direction: column; gap: 4px; }

.visit-system__body strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--white);
}

.visit-system__body > span {
  font-size: var(--text-note);
  line-height: 1.7;
  color: rgba(253, 253, 253, 0.7);
}

/* ── できること：白地に淡い赤のアイコン ── */
.benefit {
  padding-block: var(--space-section-y);
  background: var(--white);
}

.benefit__list {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.benefit__item {
  display: flex;
  gap: clamp(14px, 2vw, 20px);
  align-items: flex-start;
  padding: clamp(16px, 2.4vw, 22px) 0;
  border-bottom: 1px solid var(--line);
}

.benefit__item:last-child { border-bottom: 0; }


.benefit__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.benefit__body strong {
  font-family: var(--font-display);
  /* 19px は説明文 18px との差が 1px しかなく、主従が読み取れなかった。
     21px に上げて差をつける（区画の高さは +3px）。 */
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy-deep);
}

.benefit__body span {
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
  text-wrap: pretty;
}


/* ── お悩み区画の見出し（2026-08-20） ──
   ラベル・見出し・リードが同じ調子で縦に並び、区画の始まりに見えなかった。
   問いかけの絵を左に置き、見出しの一部に下線を引いて視線の入口を作る。 */
.trouble-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
  margin-bottom: clamp(18px, 2.6vw, 26px);
}

.trouble-head__mark {
  display: block;
  /* 参考画像に合わせて大きめに。小さいと「添え物」に見えて効かない */
  width: clamp(84px, 11vw, 132px);
  margin-top: -6px;
  flex-shrink: 0;
}

.trouble-head__mark svg { width: 100%; height: auto; display: block; }

.trouble-head__text { min-width: 0; }

/* 見出しの一部だけに下線。全体に引くと読みにくくなる */
.trouble-head__mark-line {
  /* 2026-09-06 #FCE8A8 → #F5D66A。加齢で水晶体が黄変すると淡い黄は地色に
     溶けて強調が消える（青の透過率 35% 減で模擬して確認）。一段深くしても
     若い目には蛍光ペンの範囲に収まる。 */
  background-image: linear-gradient(transparent 62%, #F5D66A 62%);
  background-repeat: no-repeat;
  padding-bottom: 0.05em;
}

/* スマホでは絵を上に置き、文字幅を確保する */
@media (max-width: 640px) {
  .trouble-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .trouble-head__mark { width: 96px; margin-top: 0; }
}

/* .br-sp（スマホだけ改行）は全ページで使うため site-premium.css へ移した（2026-09-06） */


/* 事例と予約リンクのあいだの橋渡し（2026-08-20） */
.voices-bridge {
  margin: clamp(16px, 2.4vw, 22px) 0 10px;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink);
}


/* 訪問時間の下に添える一行（2026-08-20）。
   「完全予約制」と「受付は時間外も可」は時間帯とは別の情報なので、
   同じ行に詰め込まず改行して従属させる。 */
.hero-o1__hours-note {
  display: block;
  margin-top: 4px;
  font-size: var(--text-note);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
}


/* ══════════════════════════════════════════════════════
   重要ブロックの見え方（2026-08-20）

   .flow-prepare は「訪問歯科を利用できる方」「持参する機材」
   「初回にご用意いただくもの」という、読み手が最も知りたい 3 つに
   使われている。ところが白地に 1px の細線という指定で、
   区画の背景も白のため、囲みとして機能していなかった。

   左に色帯を立てる手は使わない（どのサイトでも見るうえ、
   「重要そうに見せる」だけで中身を説明しない）。
   代わりに、地色・余白・見出しの扱いで格を上げる。
   ══════════════════════════════════════════════════════ */
.flow-prepare {
  position: relative;
  margin: clamp(20px, 3vw, 28px) 0;
  padding: clamp(20px, 3vw, 28px) clamp(18px, 2.6vw, 26px);
  border: 1px solid color-mix(in srgb, var(--navy) 16%, var(--line));
  border-radius: var(--radius-card);
  /* 白地の区画では淡い青、地色の区画では白。どちらでも浮くように
     背景に応じて反転させる（下の .section--paper 側で上書き） */
  background: color-mix(in srgb, var(--navy) 4%, var(--white));
  box-shadow: 0 2px 10px rgba(9, 17, 60, 0.04);
}

.section--paper .flow-prepare,
.section--trouble .flow-prepare {
  background: var(--white);
  box-shadow: 0 4px 16px rgba(9, 17, 60, 0.06);
}

.flow-prepare h2,
.flow-prepare h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  font-size: var(--text-sub);
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 12%, var(--line));
}

/* 見出しの前に小さな印。装飾ではなく「ここは条件の一覧」の合図 */
.flow-prepare h2::before,
.flow-prepare h3::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--navy);
}

/* 条件のリストは「あてはまるか照合するもの」なので、点ではなく印を置く */
.flow-prepare ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.flow-prepare li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 28px;
  font-size: var(--text-body);
  line-height: 1.85;
  color: var(--ink);
}

.flow-prepare li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 13px;
  height: 7px;
  border-left: 2.4px solid var(--navy);
  border-bottom: 2.4px solid var(--navy);
  transform: rotate(-45deg);
}

.flow-prepare li:last-child { margin-bottom: 0; }

.flow-prepare p {
  margin: 14px 0 0;
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}

.flow-prepare > p:first-of-type { margin-top: 0; margin-bottom: 14px; }


/* ══════════════════════════════════════════════════════
   平坦だった 3 区画に厚みを持たせる（2026-08-20）
   実績の数字・よくある質問・5院の一覧は、いずれも
   「文字が並んでいるだけ」で、区画としての存在感が無かった。
   ══════════════════════════════════════════════════════ */

/* ── ① 実績の数字：4 枚のカードにする ── */
.clinic-features-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 14px);
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.clinic-features-stats li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 24px) clamp(14px, 2vw, 20px);
  border: 1px solid color-mix(in srgb, var(--navy) 14%, var(--line));
  border-radius: var(--radius-card);
  background: var(--white);
  /* 数字は「実績」なので、紙のカードのように少し持ち上げる */
  box-shadow: 0 3px 14px rgba(9, 17, 60, 0.05);
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-soft);
}

.clinic-features-stats strong {
  display: block;
  font-family: var(--font-logo);
  font-size: clamp(1.5rem, 4.4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--navy);
}

/* 「年」「施設」「人」など数字に付く単位は一段小さく */
.clinic-features-stats strong .stat-value { font-size: 1em; }

.clinic-features-note {
  margin: clamp(14px, 2vw, 18px) 0 0;
  font-size: var(--text-note);
  line-height: 1.75;
  color: var(--ink-soft);
}

@media (min-width: 861px) {
  .clinic-features-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── ② よくある質問：たたんだ状態でも「押せる」と分かる形に ── */
/* ★ .faq-item は施設加算の折りたたみ（.facility-kasan 配下）でも使い回されている。
   あちらは「算定要件」であって問いではないので、Q 印を付けてはいけない。
   そのため以下はすべて .faq-list の直下に限定する。 */
.faq-list {
  margin-top: clamp(18px, 2.6vw, 24px);
  border: 1px solid color-mix(in srgb, var(--navy) 12%, var(--line));
  border-radius: var(--radius-card);
  background: var(--white);
  overflow: hidden;
}

.faq-list > .faq-item { border-bottom: 1px solid var(--line); }

.faq-list > .faq-item:last-child { border-bottom: 0; }

.faq-list > .faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 20px) clamp(46px, 6vw, 56px) clamp(16px, 2.4vw, 20px) clamp(16px, 2.2vw, 22px);
  position: relative;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.7;
  color: var(--navy-deep);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.2s ease;
}

.faq-list > .faq-item > summary::-webkit-details-marker { display: none; }

.faq-list > .faq-item > summary:hover { background: color-mix(in srgb, var(--navy) 3%, var(--white)); }

/* 問いであることを示す Q。装飾ではなく、答えとの対を作るための印 */
.faq-list > .faq-item > summary::before {
  content: "Q";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--navy) 10%, var(--white));
  font-family: var(--font-logo);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--navy);
}

/* 開閉の合図 */
.faq-list > .faq-item > summary::after {
  content: "";
  position: absolute;
  right: clamp(18px, 2.4vw, 24px);
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-right: 2.2px solid var(--navy);
  border-bottom: 2.2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}

.faq-list > .faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }

.faq-list > .faq-item[open] > summary { background: color-mix(in srgb, var(--navy) 4%, var(--white)); }

.faq-list > .faq-item > p {
  margin: 0;
  padding: 0 clamp(16px, 2.2vw, 22px) clamp(18px, 2.6vw, 22px) clamp(52px, 6vw, 58px);
  font-size: var(--text-body);
  line-height: 1.9;
  color: var(--ink-soft);
}

/* ── ③ 5院の一覧：押せる面にする ── */
.clinic-compact--linked {
  display: grid;
  gap: 10px;
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}

.clinic-compact--linked li {
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--navy) 12%, var(--line));
  border-radius: var(--radius-card);
  background: var(--white);
  font-size: var(--text-note);
  line-height: 1.7;
  color: var(--ink-soft);
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease-out);
}

.clinic-compact--linked li:hover {
  border-color: color-mix(in srgb, var(--navy) 34%, var(--line));
  box-shadow: 0 6px 20px rgba(9, 17, 60, 0.07);
}

/* 行ぜんぶを押せるようにする。院名だけが的だと狙いにくい */
.clinic-compact--linked li > a {
  display: block;
  padding: clamp(14px, 2vw, 18px) clamp(40px, 5vw, 48px) 4px clamp(14px, 2vw, 18px);
  position: relative;
  text-decoration: none;
  border-bottom: 0;
}

.clinic-compact--linked li > a::after {
  content: "";
  position: absolute;
  right: clamp(16px, 2.2vw, 20px);
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2.2px solid var(--navy);
  border-right: 2.2px solid var(--navy);
  transform: rotate(45deg);
}

.clinic-compact--linked li > a strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.55;
  color: var(--navy-deep);
}

/* エリア名は <a> の外にあるテキストなので、左右の余白だけ揃える */
.clinic-compact--linked li {
  padding-bottom: clamp(12px, 1.8vw, 16px);
  padding-left: clamp(14px, 2vw, 18px);
  padding-right: clamp(40px, 5vw, 48px);
}

.clinic-compact--linked li > a { padding-left: 0; padding-right: 0; }


/* ── 街並みの帯：手描き画像＋HTML ラベル（2026-08-21） ── */
.hero-bridge__street { position: relative; }

img.hero-bridge__street-art {
  display: block;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  /* 既存の .hero-bridge__street-art には max-height: 240px が掛かっており、
     height:auto と併用すると縦が潰れる。高さを固定し、
     object-fit で比率を保ったまま上下の余白側を切る。
     生成画像の地色は #EAF3FC。帯の背景と同じなので継ぎ目は出ない。 */
  height: clamp(104px, 17vw, 240px);
  object-fit: cover;
  object-position: center 42%;
}

.hero-bridge__street-labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(6px, 1.4vw, 14px);
  margin: 0;
  /* ラベルはビルと家の真下に置く。画面端に寄せると、
     どちらを指しているのか分からなくなる。
     絵の中でビルは中心から約 28% 左、家は約 28% 右にある。 */
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(18px, 21%, 320px);
  pointer-events: none;
}

.hero-bridge__street-label {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
}


/* ───────── 訪問エリアの郵便番号チェック（2026-08-21 に作り直し） ─────────
   もとは「郵便番号で確認できます →」と書いてあるだけのリンクで、
   押す → エリアページへ移動 → 入力欄を探す → 入力 → 判定 と 5 手かかっていた。
   判定ロジックは area/ 側にすでにあるので、入口を素の <form> にして
   ?postal= で渡すだけにする（新しい仕組みは足していない。JS 無しでも動く）。
   1024px 未満では丸ごと隠れていたが、「うちは範囲内か」は訪問歯科で
   いちばん多い問いなので、スマホでも出す。 */
.area-check {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 18px 0 0;
  padding: 16px 18px;
  background: rgba(253, 253, 253, 0.92);
  border: 1px solid color-mix(in srgb, var(--navy) 18%, var(--line));
  border-radius: var(--radius-card);
  box-shadow: 0 6px 22px rgba(9, 17, 60, 0.08);
  text-align: left;
}
.area-check__fig { flex: 0 0 auto; width: 68px; height: 68px; }
.area-check__body { min-width: 0; flex: 1; }
.area-check__label {
  margin: 0;
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--navy);
}
.area-check__main {
  margin: 2px 0 8px;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-deep);
}
.area-check__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.area-check__zip {
  display: flex;
  align-items: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.area-check__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 1.0625rem;            /* 16px 未満だと iOS が拡大する */
  letter-spacing: .08em;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--navy) 26%, var(--line));
  border-radius: var(--radius-sm);
}
.area-check__input::placeholder { color: #9AA3B2; letter-spacing: .08em; }
.area-check__input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
.area-check__btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 18px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .18s var(--ease-out);
}
.area-check__btn:hover { background: var(--navy-hover); }
.area-check__btn:focus-visible { outline: 2px solid var(--navy-deep); outline-offset: 2px; }
.area-check__note {
  margin: 8px 0 0;
  font-size: var(--text-note);
  color: var(--ink-soft);
}
/* 外側の輪がゆっくり広がる（範囲が届く感じ）。動きを減らす設定では止める。 */
.area-check .hbr-ring { transform-origin: center; transform-box: fill-box; }

@media (min-width: 1024px) {
  .area-check {
    width: min(360px, 30vw);
    margin: 0 clamp(20px, 4vw, 40px) 0 0;
    align-self: center;
    flex: 0 0 auto;
  }
  .area-check__fig { width: 76px; height: 76px; }
}
@media (max-width: 1023px) {
  /* hero の中では左右のガターに合わせる（画面端に貼り付かせない） */
  .area-check {
    width: calc(100% - var(--gutter-inline) * 2);
    margin-inline: var(--gutter-inline);
  }
  /* 同心円（半径16km）は、すぐ下の街並みイラストと同じことを言っている。
     どちらも「東京5院 → ご自宅・施設の範囲」を表しており、
     狭い画面で縦に並ぶと重複して見え、円と入力欄の位置もそろわない。
     スマホでは円を外し、カードは入力に徹させる。
     PC では街並みとカードが離れて配置されるので、円はそのまま残す。 */
  .area-check__fig { display: none; }
  .area-check { gap: 0; }
}
@media (max-width: 480px) {
  .area-check { gap: 11px; padding: 14px; }
  .area-check__fig { width: 54px; height: 54px; }
  .area-check__btn { padding: 0 14px; font-size: 1rem; }
}


/* 変わること 3 件の絵（2026-08-21）
   線画アイコン（26px）から水彩画へ。水彩は 56px 未満だとつぶれるので、
   枠を 52px → 56px に上げている。診療内容と同じ寸法。 */
.benefit__illus {
  /* 元画像は 384px あるのに 56px 表示で、6.9 倍の縮小になっていた。
     同じ挿絵は「お悩み」タイルでは 154px で使っており、ここだけ小さすぎた。
     96px へ。白地の枠は 56px の小さな絵に足場を与えるためのものだったが、
     大きくすると余計な包装になるので外す。 */
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  object-fit: contain;
}


/* ───────── 見出しに添える飾り（2026-08-21）─────────
   お悩みの「？」吹き出しと同じ役割。ただし**全部の区画には付けない**。
   見出し右の余白を実測し、
     ・余白が広い（60%超）
     ・見出しの直後が文章だけ（写真・地図・番号などの視覚要素が無い）
     ・絵にできる意味がある
   の 3 つを満たす区画にだけ置く。
   実測では faq だけが該当した（余白 65%・直後は文章）。
   voices 55%・credentials 43% は余白こそ広いが、すぐ下に写真や
   4 つの数字カードがあるため、足すと過剰になる。 */
.section-head--withmark {
  display: flex;
  /* 上ぞろえだと、文字ブロックが 2 行しかない区画では飾りが下へ突き出す。
     中央ぞろえにして、文字の重心と合わせる。 */
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
}
.section-head__text { min-width: 0; }
/* 大きさは「文字ブロックの高さの 6 割前後」を目安にする。
   お悩みの吹き出しは 114px ÷ 文字ブロック 193px = 0.59 で収まっている。
   faq は文字ブロックが 80px（ラベル＋見出し 1 行）しかないので、
   同じ 110px を当てると 1.25 倍になり、飾りのほうが大きくなっていた。 */
.head-mark {
  display: block;
  flex-shrink: 0;
  width: clamp(50px, 5vw, 64px);
}
.head-mark svg { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
  .head-mark { width: 48px; }
  .section-head--withmark { gap: 10px; }
}


/* ───────── お悩みの詳細：スマホは下から出るシート（2026-08-21）─────────
   もとは押した行の下にその場で開いていた。スマホ（2 列 4 行）だと
   詳細が 599px あり、開いた瞬間に見えるタイルが 2 枚だけになって、
   残り 6 枚が画面外へ押し出されていた。さらに 300px 自動スクロールするため、
   「どこを見ていたか」が分からなくなる。

   シートは画面に重ねて出すので、背景（8 枚のタイル）は動かない。
   閉じれば元の位置にそのまま戻る。 */
@media (max-width: 767px) {
  .trouble-detail:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 53;          /* mobile-bar 40 / header 46 / nav 47 より上 */
    max-height: 84vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -14px 44px rgba(9, 17, 60, 0.24);
    animation: trouble-sheet-up 0.26s var(--ease-out);
    /* 画面下の固定バー（メニュー／電話相談／Web予約）にシートの末尾が
       隠れないよう、その高さぶん余白を取る。
       実測で「Web予約」ボタンの下端 778px がバーの上端 731px に潜っていた。 */
    padding-bottom: calc(20px + var(--mobile-bar-offset, 76px));
  }
  /* つなぎ線（タイルの下に出る三角）はシートでは不要 */
  .trouble-detail:not([hidden])::before,
  .trouble-detail:not([hidden])::after { display: none; }

  body.has-trouble-sheet::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 52;
    background: rgba(9, 17, 60, 0.42);
    animation: trouble-sheet-fade 0.26s var(--ease-out);
  }
  /* シートを開いているあいだは背面を動かさない */
  body.has-trouble-sheet { overflow: hidden; }

  /* 2026-09-03 修正：上の暗幕がシート本体まで覆っていた。
     .section は全区画に isolation: isolate が掛かっており（site-premium.css L154）、
     区画ごとに層叠上下文ができる。シートは position:fixed / z-index:53 だが、
     その 53 は区画の内側でしか効かない。区画自体は根の文脈で z-index:auto なので、
     区画ごとシートごと、body::after（z-index 52）の下に沈んでいた。
     実測: シート中央の最前面要素が body、背景が rgb(133,138,158) まで暗くなる。
     シートを開いているあいだだけ隔離を外し、53 を根の文脈で効かせる。
     背面のタイルは z-index:auto のままなので、暗幕は本来どおり背面だけを覆う。
     詳細度 (0,3,0) で .section (0,1,0) に勝つ。
     修正後: 最前面がシート内の li、背景 rgb(224,225,229)、タイルは暗いまま。 */
  body.has-trouble-sheet .section--trouble { isolation: auto; }

  .trouble-detail__close {
    position: sticky;
    top: 0;
    float: right;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: -4px -4px 0 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--navy) 8%, #ffffff);
    color: var(--navy-deep);
    cursor: pointer;
  }
  .trouble-detail__close svg { width: 20px; height: 20px; }
}
/* PC では閉じるボタンは出さない（その場で開く／もう一度押すと閉じる） */
@media (min-width: 768px) {
  .trouble-detail__close { display: none; }
}

@keyframes trouble-sheet-up {
  from { transform: translateY(14%); opacity: 0.4; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes trouble-sheet-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .trouble-detail:not([hidden]) { animation: none; }
  body.has-trouble-sheet::after { animation: none; }
}


/* ───────── 費用の目安：数字を主役にする（2026-08-24）─────────
   読み手がいちばん知りたいのは「いくらか」なのに、
   「約2,000〜3,000円」が 16px の本文のまま、文の途中に埋もれていた。
   実測：費用 16px / 訪問時間 11px に対し、交通費・エリア・完全予約制は 18px 太字。
   つまり視覚の強さが、知りたさの順番と合っていなかった。
   飾りは足さず、字の大きさと並びだけで直す。 */
.price-summary-list { display: grid; gap: 0; }
.price-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 10%, var(--line));
}
.price-row:last-child { border-bottom: 0; }
.price-row__label {
  font-size: var(--text-note);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--navy);
}
.price-row__figure {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy-deep);
  font-variant-numeric: tabular-nums;
}
/* 「不要」「別途算定」は数字ではないので、金額ほど大きくしない */
.price-row__figure--word { font-size: clamp(1.1875rem, 2.2vw, 1.4375rem); }
.price-row__note {
  font-size: var(--text-note);
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 720px) {
  .price-row {
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: baseline;
    column-gap: 20px;
  }
  .price-row__label { grid-row: 1; align-self: center; }
  .price-row__figure { grid-column: 2; }
  .price-row__note { grid-column: 2; }
}


/* ── 体制の区画（2026-09-14 改訂）─────────────────────────────
   以前はここで 1000px 以上のとき #director（担当医カード）を見出しの右の
   細い列（260〜330px）へ逃がしていた。肩書と名前しかない空のカードが
   1194px の行を丸ごと使ってしまい、右側が大きく空いていたため。
   院方資料でスタッフ 3 名の経歴・ことばが揃い、#director が読ませる
   中身になったので、この指定ごと外して全幅の 1 列に戻す。
   （見出し・リード・スタッフ・拠点・施設向けが素直に上から並ぶ） */

/* ── 街景帯を hero-o1__plate の中へ移したことへの対応 ─────────────
   狭い画面では「見出し → 街景（東京5院→ご自宅）→ 郵便番号カード」の順になる。
   従来は郵便番号カード（185px）が街景を首屏の外へ押し出しており、
   553px 幅では 177px のうち 36px しか見えていなかった。
   1024px 以上は従来どおり「見出し｜カード」を横並びにし、街景は下段に回す。
   移動前と同じ見え方（枠 = 画面幅、絵 = 画面幅 - 左右余白）を保つこと。 */
@media (min-width: 1024px) {
  .hero-o1__plate {
    flex-wrap: wrap;
    /* 折り返した2行目（街景）にも gap が効いて 43px 下がっていた。
       行間は街景側の余白で持たせる。 */
    row-gap: 0;
  }
  .hero-o1__head { order: 1; }
  .area-check { order: 2; }
  .hero-o1__plate > .hero-bridge__street {
    order: 3;
    /* flex-basis を 100% にすると plate の 1200px に張り付いて絵が細くなる。
       移動前は .hero-bridge 直下で画面幅いっぱいだったので 100vw を基準にする。
       ページ側に overflow-x のガードがあるため、スクロールバー分は
       横スクロールにはならない。 */
    flex: 0 0 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: clamp(12px, 4vw, 40px);
  }
}

/* ── 訪問体制の帯：記号を立て、外枠を外す（2026-09-02）──────────────
   4項目が同じ重さで並び、外枠＋背景があるため「仕様表」に見えていた。
   B: 各項目に線画の記号を置き、読む前に話題が分かるようにする。
   C: 外枠と背景を外し、区切り線だけにする。ラベルを 18→20px に上げて
      説明文（15px）との差を作る。 */
.visit-system__ico {
  /* 30px・線 1.6px・不透明度 0.82 では線が細く「にじんで見える」状態だった。
     コントラスト自体は 12.1:1 で足りており、問題は線の太さのほう。
     38px・線 2.0px・不透明度なしにする。下の挿絵アイコン（56px）より
     十分小さいので、役割の違い（線画 / 挿絵）は保たれる。 */
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  stroke: #fdfdfd;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visit-system__grid {
  border: 0;
  background: transparent;
  border-radius: 0;
}

.visit-system__item {
  gap: 12px;
  padding-block: clamp(10px, 1.4vw, 14px);
  /* 説明文を 16px に上げると 1440px の4列で 6px 足りず2行になる。
     左右の余白を 24→18px にして1行に収める。 */
  padding-inline: 18px;
}

.visit-system__body strong {
  font-size: clamp(1.1875rem, 1.6vw, 1.3125rem);
  letter-spacing: 0.01em;
}

/* 紺地に白は、コントラスト（9:1 前後）が足りていても
   乱視のある人には halation（にじみ）で読みにくくなる。
   乱視は人口の半数近くにあり、加齢で増える。自動のコントラスト検査では
   検出できないため、字を 16px に上げ、字重を 500 にして線を太くする。 */
/* site-premium.css の h2.visit-system__label (0,1,1) に負けるため、
   こちらも要素名まで書いて同じ詳細度にする。読み込み順で後勝ち。 */
h2.visit-system__label {
  font-size: 1rem;
}

.visit-system__body > span {
  font-size: var(--text-note);
  font-weight: 500;
}

/* 見出しの不揃い（857/703px）は「障がい者」が割れていたのが原因で、
   HTML 側に jp-keep を付けた時点で 787/773px に収まった。
   text-wrap: balance を全 .section-title に入れる案は不要だったので入れない
   （既存の :lang(ja) 指定は pretty で、そちらのほうが末尾の孤立を防ぐ）。 */

/* 担当医カード（スマホ）— 2026-09-06
   経歴・談話が院方確認待ちで、写真＋肩書＋名前しかない。縦積みで写真を
   300px に伸ばすと「中身が空」に見える（iPhone で院方指摘）。
   狭い幅では名札のような横並びの小さなカードにして、意図した形に見せる。
   1000px 以上は見出しの右に置く既存の配置のまま。 */
@media (max-width: 999px) {
  #trust .director-card--compact {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    max-width: 420px;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--white);
  }
  #trust .director-card--compact .director-card__photo-stage {
    width: 104px;
    margin: 0;
    padding: 0;
  }
  #trust .director-card--compact .director-card__photo-stage::before { display: none; }
  #trust .director-card--compact .director-card__photo { transform: none; }
  #trust .director-card--compact .director-card__photo img { aspect-ratio: 3 / 4; }
}

/* ── スタッフのご紹介（2026-09-14 / 2026-09-17 簡素化）──────────────
   訪問歯科は「知らない人を家に上げる」判断を伴うので、
   誰が来るのか・電話に出るのは誰かが分かることに価値がある。
   9/17 に中身を「写真・肩書・氏名・ふりがな＋事実 1 行」に絞った
   （理由は index.html #director 直前のコメント）。顔で覚えてもらうのが
   主目的になったので、写真を 84px → 112px / 136px に上げた。
   ・〜639px    写真と肩書・名前を横に並べ、事実は下に全幅
   ・640〜1179px 写真を左の列に通し、右にまとめる（1 枚ずつ縦に並ぶ）
   ・1180px〜    3 枚を横に並べる。#director の幅が約 1,100px を超えないと
                 片田の大学院の行が 1 枚の中で 4 行以上に折れるため、この境目。 */
.staff-list {
  display: grid;
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.staff-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-areas:
    "photo head"
    "facts facts";
  gap: 0 16px;
  align-items: center;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 4px 16px rgba(9, 17, 60, 0.05);
}
.staff-card__photo {
  grid-area: photo;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--paper);
}
.staff-card__head { grid-area: head; min-width: 0; }
.staff-card__role {
  margin: 0 0 4px;
  font-size: var(--text-label);
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
}
.staff-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sub-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-deep);
}
.staff-card__kana {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: var(--text-note);   /* 旧 15px。16px を下限に */
  font-weight: 400;
  color: var(--ink-soft);
}
.staff-card__facts {
  grid-area: facts;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--ink);
}
.staff-card__facts li + li { margin-top: 4px; }

@media (min-width: 640px) and (max-width: 1179.98px) {
  .staff-card {
    grid-template-columns: 136px minmax(0, 1fr);
    grid-template-areas:
      "photo head"
      "photo facts";
    align-items: start;
    gap: 0 24px;
    padding: 24px;
  }
  .staff-card__photo { width: 136px; height: 136px; }
  .staff-card__facts { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 1180px) {
  .staff-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .staff-card { padding: 22px; }
}

/* ── お知らせ（2026-09-30）──────────────────────────────
   中身は院の方がコラムの WordPress に書く（public/js/visit-news.js が並べる）。
   件数が 0 のときは hidden のまま出さない。見出しは職員が書く文字なので、
   長さが決まらない。日付と見出しは狭い画面では縦に積む。 */
.news-band[hidden] { display: none; }
.news-band {
  padding-block: var(--space-section-y-compact);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.news-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px var(--space-inline);
  margin-bottom: var(--space-stack-sm);
}
.news-band__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--navy-deep);
}
.news-band__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.news-band__item { border-bottom: 1px solid var(--line); }
.news-band__link {
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 14px 4px;
  color: var(--ink);
  text-decoration: none;
}
.news-band__date {
  font-size: var(--text-note);
  color: var(--ink-soft);
}
.news-band__item-title {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.news-band__link:hover .news-band__item-title,
.news-band__link:focus-visible .news-band__item-title { text-decoration-thickness: 2px; }
@media (min-width: 768px) {
  .news-band__link {
    grid-template-columns: 11em minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-inline);
  }
}

/* ── できること：スマホでは説明文をカードの全幅に（2026-10-03）──────
   挿絵が左に 1 列を取り、説明文の欄が約 210px（1 行 11 字前後）しかなかった。
   2 文の説明が 3〜4 行の細切れになり、高齢の方には読みにくい（院方「字が小さい」の一因）。
   挿絵と見出しを 1 行目に並べ、説明文は 2 行目から全幅で流す。1 行 15〜16 字になる。
   copy を display: contents にして、見出しと説明をそれぞれ格子の項目にする。 */
@media (max-width: 639.98px) {
  .service-name-list a {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }
  .service-name-list__copy { display: contents; }
  .service-name-list__illus { grid-row: 1; width: 48px; height: 48px; }
  .service-name-list__title { grid-column: 2; grid-row: 1; }
  .service-name-list__desc { grid-column: 1 / -1; }
}

/* ── 施設・ケアマネジャーさまへ（折りたたみ・2026-10-03）──────────────
   .faq-item[open] summary::after（site-home.css）は子孫セレクタなので、外側を開くと
   中の「算定要件」2 つ（閉じている）まで「−」になっていた。閉じているものは「＋」に戻す。 */
.facility-collapse .faq-item:not([open]) > summary::after { content: "+"; }
.facility-collapse__body { padding-top: 4px; }

/* ── 訪問診療で変わること：スマホでは説明文を全幅に（2026-10-04）──────
   「できること」と同じ問題。挿絵が左に 1 列を取り、説明文が 1 行 8 字前後に
   切れて 4〜5 行になっていた。挿絵と小見出しを 1 行目に、説明文は 2 行目から全幅。 */
@media (max-width: 639.98px) {
  .benefit__item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
  }
  .benefit__body { display: contents; }
  .benefit__illus { grid-row: 1; flex: none; width: 56px; height: 56px; }
  .benefit__body strong { grid-column: 2; grid-row: 1; }
  .benefit__body span { grid-column: 1 / -1; }
}