/* Layer C: template role corrections shared by light and dark themes. */
:root {
  --scrollbar-quiet-thumb-rgb: var(--amoxi-text-rgb);
  --hours-table-heading-rgb: var(--amoxi-white-rgb);
  --hours-table-text-rgb: var(--amoxi-text-rgb);
  --hours-table-open-rgb: var(--amoxi-base-strong-rgb);
  --hours-table-rule-rgb: var(--amoxi-gray-rgb);
  /* 休みのセルの面。--amoxi-black（#F4F4F6）は区画の地と同じ色で、塗っても
     見えない（2026-09-23 に実測）。罫と同じ灰（--amoxi-gray）を薄く敷いて、
     地との差を作る。 */
  --hours-table-closed-surface-rgb: var(--amoxi-gray-rgb);
  --section-boundary-brand-rgb: var(--amoxi-base-strong-rgb);
  --section-boundary-accent-rgb: var(--amoxi-base-rgb);
  --section-boundary-text-rgb: var(--amoxi-text-rgb);
  --section-boundary-height-desktop: 320px;
  --section-boundary-height-mobile: 160px;
  --section-boundary-slant-front-start: 66%;
  --section-boundary-slant-front-end: 34%;
  --section-boundary-slant-back-start: 48%;
  --section-boundary-slant-back-end: 16%;
  --section-boundary-slant-middle-start: 57%;
  --section-boundary-slant-middle-end: 25%;
  /* ヘッダーのナビから区画へ飛んだときに、固定ヘッダーの下へ空ける余白
     （ユーザー指摘 2026-09-25「ラベルの上の margin あたりに着地しないと違和感しかない」）。
     着地の基準は amoxi-behavior.js の landingFor が読む。 */
  --anchor-landing-gap: 70px;
}

/* 上端のヘッダー（まだ固定になっていない原本）ではナビを出さない。
   ここは屋号と入口だけでよく、区画への近道は読み始めてから要る
   （ユーザー指示 2026-09-25「ヘッダー、非固定ヘッダーの場合には、『医院紹介、診療案内』
   のナビを非表示でよい気がしてきた、ノイズだわ」）。
   出すのは画面に貼り付く複製のほうだけ。項目そのものは消さず、出す面を選ぶ。
   狭い画面では購入 CSS がもともとこの一覧を隠しており、行き先はハンバーガーが持つ。

   display: none ではなく visibility。この一覧がヘッダーの高さを作っており、
   箱ごと消すと上端のヘッダーだけ 106px → 56px に縮んで、屋号が上へ張り付く
   （ユーザー指摘 2026-09-25「初期表示ヘッダー、位置がおかしい、上にはりついてる。
   固定ヘッダーと位置は同じだよ」。実測 1440px: ロゴの上端 原本 12.9 / 複製 37.9）。
   visibility なら場所は残るので、上端と固定とで屋号もハンバーガーも同じ位置に出る。
   見えない一覧は焦点も拾わない。 */
.main-header:not(.sticky-header--cloned) .main-menu {
  visibility: hidden;
}

[data-boundary="about-to-services"] {
  --section-boundary-color-above-rgb: var(--amoxi-black2-rgb);
  --section-boundary-color-below-rgb: var(--amoxi-black-rgb);
  --section-boundary-background-rgb: var(--amoxi-black-rgb);
}

/* 継ぎ目は id ごとに色を持たせないと、3 つのトークンが空のまま既定へ落ちて
   黒い帯になる（2026-09-26 実測: 来院案内の区画の継ぎ目が真っ黒で出た）。
   渡りは about-to-services と同じで、上が診療案内の #FFFFFF、
   下が来院案内の #F4F4F6（この区画は自前の地を持たず body を継ぐ）。 */
[data-boundary="services-to-visit"] {
  --section-boundary-color-above-rgb: var(--amoxi-black2-rgb);
  --section-boundary-color-below-rgb: var(--amoxi-black-rgb);
  --section-boundary-background-rgb: var(--amoxi-black-rgb);
}

/* 仕切りはフッターの上から、診療時間と医院紹介の間へ移した
   （ユーザー指示 2026-09-24）。上は診療時間の地（#F4F4F6）、下は医院紹介の地（白）。
   潜り込み量・帯の高さ・斜線の振れ幅は 2026-09-25 に部品のパラメータへ移した
   （このセレクタへの直書きをやめた）。値は designs/amoxi-3/design.json の
   boundaries[hours-to-about] に置き、site.json の boundaries から
   tpl/layouts/Amoxi.astro の head <style>（brandCss と同じ経路）へ
   [data-boundary="hours-to-about"]{--section-boundary-sink-below:…; …} として出る。
   ここでは above/below/owner の実色 3 つだけを持つ。 */
[data-boundary="hours-to-about"] {
  --section-boundary-color-above-rgb: var(--amoxi-black-rgb);
  --section-boundary-color-below-rgb: var(--amoxi-black2-rgb);
  --section-boundary-background-rgb: var(--amoxi-black2-rgb);
}

.about-three,
.services-three,
.main-footer {
  isolation: isolate;
}

.services-three__bg {
  z-index: -2;
}

/* The boundary is the spacing element when enabled. Do not leave the
   purchased section padding in front of its first in-flow child as well. */
[data-behavior-boundaries="active"] .services-three.section-space-t,
[data-behavior-boundaries="active"] .about-three.section-space {
  padding-top: 0;
}

/* 区画の下の空きは上の区画が持つ（ユーザー指示 2026-09-24「ふつうは、トリツメだから、
   上部セクションに入れるんだよ」）。
   入れるのは白（ユーザー指示「灰色背景色同士を接地させるんじゃねー」「白背景を
   間にいれろっていってる」）。診療時間の地もフッターの地も #F4F4F6 なので、
   そのまま接すると境目が消える。この区画の地は白なので、padding で伸ばせば
   白が間に入る。margin だと外側＝body の地（#F4F4F6）になり、灰と灰が接する。 */
.services-three {
  padding-bottom: 100px;
}

@media (max-width: 767px) {
  .services-three {
    padding-bottom: 72px;
  }
}

.amoxi-btn__text,
.amoxi-btn:hover .amoxi-btn__icon,
.amoxi-circle-btn,
.about-badge__icon,
.social-links a:hover .social-links__icon,
.footer-widget .social-links a:hover .social-links__icon,
.main-footer--three .main-footer__contact,
.funfact-one__item:hover .funfact-one__item__text,
.funfact-one__item:hover .funfact-one__item__count,
.mobile-nav__contact__icon,
.sidebar-three .social-links__icon,
.sidebar-three__newsletter__btn {
  color: var(--amoxi-on-base);
}

.sec-title--three .sec-title__shape::before,
.sec-title--three .sec-title__shape::after,
.hero-three__tagline__shape::before,
.hero-three__tagline__shape::after,
.scroll-to-top__inner {
  background-color: var(--amoxi-on-base);
}

.funfact-one__item:hover .funfact-one__item__count::after {
  background-color: var(--amoxi-on-base);
}

.main-footer__copyright {
  color: var(--amoxi-text);
}

/* 区画のラベルの右に短い罫を引く。ラベルだけが宙に浮いて、右に広い空きが残っていた
   （実測 1440px: 「診療時間」は幅 88px のラベルの右に 1082px、「医院紹介」は 482px の
   空き。ユーザー指示 2026-09-25「『診療時間』とかのラベル、右に罫線をつけたら収まるん
   じゃない？他との統一感という意味で」）。
   形は HERO の札（.hero-three__tagline::after）と同じにする。診療時間の曜日の罫も
   同じ形へ揃えた経緯があり（qo-hours-table.css 163-173）、この画面で三度目の同じ形。
   罫は上の縁として引く。高さを自前で書くと比率の検査（R-T14-3）に掛かる。
   色はラベルと同じにする。ラベルは区画によって塗りが分かれており（下の 2 つの
   グラデーション）、罫だけ別の色になると揃わない。 */
.sec-title__top::after {
  content: "";
  flex: none;
  align-self: center;
  width: 36px;
  border-top: 1px solid var(--amoxi-base-strong);
  opacity: 0.6;
}

/* 中央寄せのラベルは片側だけだと軸が右へずれる（ユーザー指示 2026-09-25「『診療案内』
   これは困るね、中央寄せなので、ここは両端に罫線をつけようか」）。左右そろえて置く。 */
.sec-title--center .sec-title__top::before {
  content: "";
  flex: none;
  align-self: center;
  width: 36px;
  border-top: 1px solid var(--amoxi-base-strong);
  opacity: 0.6;
}

/* 同じ罫を、ハンバーガーの中とフッターのラベルにも引く
   （ユーザー指示 2026-09-25「サイドバーとフッターもお願い」）。
   この 2 つはラベルの要素そのものが色を持っているので currentColor が使える
   （区画のラベルは中の div に塗りが掛かるため、上では色を名指ししている）。
   罫の幅と濃さは HERO の札と同じ。間隔は区画のラベルの包み（.sec-title__top の
   gap: 10px）に合わせる。 */
.sidebar-three__label,
.site-footer__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-three__label::after,
.site-footer__heading::after {
  content: "";
  flex: none;
  width: 36px;
  border-top: 1px solid currentColor;
  opacity: 0.6;
}

.sec-title__tagline.bw-split-text > div {
  background-image: linear-gradient(to left, rgba(var(--amoxi-base-strong-rgb), 0.4) 50%, var(--amoxi-base-strong) 50%);
}

/* Keep generated image dimensions while restoring the template's natural ratio. */
.services-three__item__image img,
.demo-one__image img,
.blog-card-two__image img,
.instagram-gallery__card img,
.portfolio-three__card__image img {
  height: auto;
}

/* P6: readable text and pressable surfaces use the strong brand step. */
a,
.hero-three__tagline,
.hero-three__tagline__text,
.footer-widget__links li a:hover,
.main-menu .main-menu__list > li:hover > a,
.demo-one__title a:hover,
.mobile-nav__contact li a:hover,
.hero-three__title__highlight,
.hero-three__bottom__title span {
  color: var(--amoxi-base-strong);
}

/* ハンバーガーの中の電話の釦を欄の中央に置く。釦は中身ぶんの幅しか持たず、
   包みが block なので左端に貼り付いていた（実測: 412px で右に 22px、768px で 371px、
   1440px で 131px の空きが右だけに残る。ユーザー指示 2026-09-25「診察予約電話の
   中央寄せの話って、内部テキストではないよ、ボタン自体がスマホハンバーガーだと
   左寄せになってるからセンタリングしろ」）。
   釦は inline-flex なので、包みの行揃えで中央へ動く。

   中央へ寄せるのは狭い画面だけ。広い画面のハンバーガーは二欄組みで、釦はナビの
   直下に置かれ、上のナビ項目と左端が揃う。そこで中央へ寄せると釦だけが列から
   外れる（ユーザー指示 2026-09-25「PC版のハンバーガーメニューでは、電話ボタンを
   中央寄せにしないでほしい、ここはメディアクエリで管理して」）。
   境目は、このハンバーガーが二欄組みへ変わる幅（下の min-width: 1024px と対）。 */
@media (max-width: 1023px) {
  .sidebar-three__reserve {
    text-align: center;
  }
}

/* 時刻は桁を揃える。書体（Outfit）の数字はもともと字ごとに幅が違い、「1」は「0」の
   半分しかない（送り幅 321 対 659、単位 1000）。そのままだと時刻の列がずれる。
   この書体は等幅数字の機能（tnum）を持っているので、時刻の所だけ呼び出す
   （ユーザー指摘 2026-09-25「等幅だったら、9:00→09:00にすると気持ちよくそろいそう」。
   桁を揃える側は診療時間の値を 09:00 にして対応した）。
   電話番号や住所には掛けない。並べて読む列ではないので、字ごとの幅のほうが自然に見える。 */
.hours-table__time,
.hours-table__list dd,
.hours-table__list dd time {
  font-variant-numeric: tabular-nums;
}

/* 駅からの札は面を持たない。購入は角丸 100px の丸帯（amoxi.css 11097-11105）で、
   同じ画面にある診察予約の釦も角丸 100px の丸帯なので、同じ形が 2 つ並んでいた
   （390px で実測: 札 267x45、釦 342x59、どちらも角 100px。ユーザー指摘 2026-09-25
   「透過バッヂはおしゃれでいいんだけれど、どうしても診察電話ボタンの角丸と見た目が
   似ていて、気持ち悪い」）。
   面をやめ、文字の右に短い罫を添える。丸い面は「押せる物」、罫は「読む物」として
   形で役割が分かれる。区画の見出しにある短い罫と同じ作法（ユーザー決裁 2026-09-25、
   4 案を実際に描いて比較）。
   罫の色は文字と同じにするので、狭い段では白、広い段ではブランド色に自動で揃う。 */
.hero-three__tagline {
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  background-color: transparent;
  align-items: center;
  gap: 14px;
}

/* 罫は上の縁として引く。高さを自前で指定すると、画像の属性と比率が食い違う事故を
   防ぐ検査（R-T14-3）に掛かるため。縁なら高さを書かずに 1px の線になる。 */
.hero-three__tagline::after {
  content: "";
  display: block;
  width: 36px;
  border-top: 1px solid currentColor;
  opacity: 0.6;
}

.amoxi-btn__text,
.amoxi-circle-btn,
.main-footer--three .main-footer__contact,
.about-badge__icon,
.mobile-nav__contact__icon,
.scroll-to-top__wrapper,
.sidebar-three .social-links a {
  background-color: var(--amoxi-base-strong);
}

/* Keep the purchased transparent wrapper while placing the arrow inside the
   only painted surface. Background and foreground always change as a pair. */
.amoxi-btn {
  position: relative;
  gap: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background-color: transparent;
}

/* 左の余白より右を広く取る。右の広さは矢印の場所で、そのぶん「診察予約」から始まる
   文字は面の中心より少し左に寄る。中央に揃えると「診察予約　電話番号」が宙に浮いて
   見える（ユーザー決裁 2026-09-25「テキストは中央寄せではなくて、"診察予約"が左に
   少し寄るバージョンに」。一度は中央に揃えたが戻した）。 */
.amoxi-btn__text {
  padding: 14.5px 72px 14.5px 40px;
  border: 0;
  color: var(--amoxi-on-base);
  background-color: var(--amoxi-base-strong);
}

.amoxi-btn__text::before,
.amoxi-btn__text::after {
  display: none;
}

.amoxi-btn__icon-box {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  block-size: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--amoxi-base-strong);
}

/* 狭い端末では釦が欄からはみ出す（360px で実測: 欄 312px に対し釦 342px）。
   中身は「診察予約」64px ＋ 間 12px ＋ 番号 154px ＝ 230px で縮まない。
   矢印の箱を端へ寄せて細くし（右端から 12px→4px、幅 36px→28px）、右に空けておく
   必要を 48px から 32px へ下げる。箱の地は面と同じ色なので見た目は変わらず、
   中の図形（16px）は箱の中央にあるまま。
   そのうえで余白を左 32px・右 48px にする。幅は 230 + 80 = 310px で欄に収まり、
   左右の差（16px）は残るので「診察予約」が少し左に寄る形も保たれる。
   箱の高さは書かない。自前の height は R-T14-3 に掛かるため。 */
@media (max-width: 575px) {
  .amoxi-btn__icon-box {
    right: 4px;
    width: 28px;
  }

  .amoxi-btn__text {
    padding-left: 32px;
    padding-right: 48px;
  }
}

.amoxi-btn__icon {
  font-size: 16px;
  color: var(--amoxi-on-base);
}

.amoxi-btn:hover {
  background-color: transparent;
}

.amoxi-btn:hover .amoxi-btn__text {
  color: var(--amoxi-on-base);
  background-color: var(--amoxi-base-strong);
}

.amoxi-btn:hover .amoxi-btn__icon {
  color: var(--amoxi-on-base);
  animation: none; /* 第 80 便: hover の slideRight（購入 1061 行）を止める。hover は色の対の入れ替えだけ */
}

.amoxi-btn:hover .amoxi-btn__icon-box {
  background: var(--amoxi-base-strong);
}

.services-three .amoxi-circle-btn:hover {
  color: var(--amoxi-base-strong);
  background-color: var(--amoxi-on-base);
}

.services-three .amoxi-circle-btn {
  transition: color 200ms ease, background-color 200ms ease;
}

.amoxi-circle-btn__icon,
.about-badge__arrow {
  font-size: 24px;
}

/* State colors must use role tokens instead of the light theme's inverted
   white/black surface tokens. Keep every painted state paired with its
   foreground; image-backed decorative strokes have no surface of their own. */
.main-menu .main-menu__list li ul li.current > a,
.main-menu .main-menu__list li ul li:hover > a {
  color: var(--amoxi-on-base);
  background-color: var(--amoxi-base-strong);
}

.mobile-nav__content .social-links a::after {
  background-color: var(--amoxi-base-strong);
}

.mobile-nav__content .social-links a:hover .social-links__icon {
  color: var(--amoxi-on-base);
}

.blog-card-two__title a {
  color: inherit;
  background: none;
  transition: color 200ms ease;
}

.blog-card-two__title a:hover,
.blog-card-two--large:hover .blog-card-two__title a {
  color: var(--amoxi-base-strong);
  background: none;
}

/* The title is the card's single hover cue. Keep the date badge stable. */
.blog-card-two__date__month,
.blog-card-two:hover .blog-card-two__date__month {
  color: var(--amoxi-on-base);
  background-color: var(--amoxi-base-strong);
}

.blog-card-two:hover .blog-card-two__date__day {
  color: var(--amoxi-black5);
  background-color: var(--amoxi-white);
}

.blog-card-two__meta li a:hover,
.blog-card-two__meta li:hover span:last-child {
  color: var(--amoxi-base-strong);
}

.sidebar-three__info__list li:hover .sidebar-three__info__icon,
.sidebar-three__newsletter__input:focus,
.sidebar-three__newsletter__btn:hover {
  color: var(--amoxi-on-base);
  background-color: var(--amoxi-base-strong);
}

.instagram-gallery__card:hover .instagram-gallery__card__content::before,
.instagram-gallery__card:hover .instagram-gallery__card__content::after {
  border-color: var(--amoxi-on-base);
}

.portfolio-three__card:hover .portfolio-three__card__content::before {
  background-color: var(--amoxi-base-strong);
}

.portfolio-three__card:hover .portfolio-three__card__title,
.portfolio-three__card:hover .portfolio-three__card__category,
.portfolio-three__card:hover .portfolio-three__card__serial {
  color: var(--amoxi-on-base);
}

.portfolio-three__card:hover .portfolio-three__card__category::before {
  border-color: var(--amoxi-on-base);
}

.portfolio-three__card:hover .portfolio-three__card__serial {
  -webkit-text-stroke-color: var(--amoxi-on-base);
}



/* Normal-state foregrounds on brand-painted surfaces. These cannot use the
   purchased white token because that token intentionally inverts in light. */
.blog-card-two__date__month,
.blog-card-two__image__link__icon,
.testimonials-two__item__icon,
.expertise-area__box,
.mobile-nav__content .social-links__icon,
.mobile-nav__content .main-menu__list li a button,
.sidebar-three__info__list li .sidebar-three__info__icon {
  color: var(--amoxi-on-base);
}

.progress-box__bar__inner::after {
  background-color: var(--amoxi-on-base);
}

/* The number is above the bar, so its actual surface is the skills section,
   not the painted bar inner. Keep the purchased surface/foreground pairs:
   light #F4F4F6/#5C5955 (6.34:1), dark #1A1B1F/#B2AFA6 (7.85:1). */
.progress-box__number {
  min-width: max-content;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease;
}

.progress-box__number--clear {
  opacity: 1;
}

.expertise-area__box--2 {
  color: var(--amoxi-base-strong);
  background-color: var(--amoxi-on-base);
}

/* Half-scale footer CTA. Clamp-based internals preserve the same balance on
   narrow screens without allowing the 516px desktop width to overflow. */
.main-footer--three .main-footer__contact {
  width: min(100%, 516px);
  min-height: 89px;
  gap: clamp(12px, 2vw, 25px);
  padding: 13px clamp(18px, 5vw, 65px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
  box-sizing: border-box;
  font-size: clamp(24px, 3.5vw, 50px);
  border-radius: 100px;
}

.main-footer--three .main-footer__contact__icon {
  width: 35px;
  block-size: 35px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 35px;
}

/* Layer B: light-theme surface and foreground tokens. */
:root[data-theme="light"] {
  --amoxi-black2: #FFFFFF;
  --amoxi-black2-rgb: 255, 255, 255;
  --amoxi-black: #F4F4F6;
  --amoxi-black-rgb: 244, 244, 246;
  --amoxi-black4: #FFFFFF;
  --amoxi-black4-rgb: 255, 255, 255;
  --amoxi-black5: #FFFFFF;
  --amoxi-black5-rgb: 255, 255, 255;
  --amoxi-white: #1A1B1F;
  --amoxi-white-rgb: 26, 27, 31;
  --amoxi-white2: #5C5955;
  --amoxi-white2-rgb: 92, 89, 85;
  --amoxi-black6: #F4F4F6;
  --amoxi-black6-rgb: 244, 244, 246;
  --amoxi-black9: #D2D2D5;
  --amoxi-black9-rgb: 210, 210, 213;
  --amoxi-text: #5C5955;
  --amoxi-text-rgb: 92, 89, 85;
  --amoxi-text-gray: #8A8A8A;
  --amoxi-text-gray-rgb: 138, 138, 138;
  --amoxi-gray: #D2D2D5;
  --amoxi-gray-rgb: 210, 210, 213;
}

:root[data-theme="light"] .hero-three__bg {
  filter: saturate(0);
  opacity: 0.6;
}

:root[data-theme="light"] .hero-three {
  /* 透明にする。body が同じ色（--amoxi-black）を敷いているので見た目は変わらず、
     背面に置いた継ぎ目（z-index: -1）が HERO の下端へ食い込んで見えるようになる
     （ユーザー指示 2026-09-25「Dividerが上下セクションにかぶさるようにして、
     HEROセクション側へmargin-topずらしてくれ」）。
     継ぎ目を前に出す手も試したが、装飾は中身より前に出てはいけないという
     部品の規則（z-index は負の整数）に反した。 */
  background-color: transparent;
}

:root[data-theme="light"] .blog-card-two__date__day,
:root[data-theme="light"] .blog-card-two:hover .blog-card-two__date__day {
  color: var(--amoxi-white);
  background-color: var(--amoxi-on-base);
}

:root[data-theme="dark"] .footer-widget .social-links__icon {
  color: var(--amoxi-on-base);
}

/* Instagram のアイコンは hover 時のブランド色の覆い（購入 CSS）の上に白で出る。白地に出ると読み違えて足した地（第 57 便）を外し、前景だけ on-base にする（第 59 便の題と同じ直し）。 */
:root[data-theme="light"] .instagram-gallery__card__icon {
  color: var(--amoxi-on-base);
}

/* The title is white over the purchased translucent card overlay, not a badge. */
:root[data-theme="light"] .instagram-gallery__card__title {
  color: var(--amoxi-on-base);
}

/* 器の最大幅。購入は 1200px（amoxi.css 491-493）で、1280px の画面では左右の余白が
   40px しか残らず占有率 94% になる。Laptop では container-fluid と見分けがつかない
   （ユーザー指摘 2026-09-26「いまの Laptop 幅だと、ほぼ container-fluid と同じように
   見える」「テキストが左端、マップが右端とかで異様」）。
   実測: 1280 で 40px/94%、1366 で 83px/88%、1440 で 120px/83%。
   1140px（Bootstrap の既定。ユーザー決裁）へ下げると 1280 で 70px/89%、1366 で 113px/83%。
   購入 CSS は触らないので、同じ段でこちらから上書きする。
   Full-bleed の装飾はこの器の外にあるので影響しない。 */
@media (min-width: 1200px) {
  .container,
  .hero-three .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .skills-one .container {
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ScrollSmoother keeps its content plane at viewport top, outside the normal
   header's flow. Reserve the normal header's rendered height in that plane
   when the hero is disabled; the fixed clone remains independent. */
.hero-disabled .main-header--three:not(.sticky-header--cloned) {
  position: relative;
  top: 0;
}

.hero-disabled #smooth-content {
  padding-top: 106px;
}

@media (max-width: 1199px) {
  .hero-disabled #smooth-content {
    padding-top: 81px;
  }
}

/* Layer C: contact-one カード（診療時間の帯）。題は購入原本では h3 だが h1 直後の区画で段が飛ぶため p にしている（第 74 便）。
   色だけ見出し色トークンに戻す。hover の塗りは購入ではブランド色（ダーク面・白文字前提）で、ライト面では 16px 本文の 4.5 に届かないため、
   面トークンの持ち上げに置き換える（ユーザー決裁 2026-09-23）。文字色は動かさない。 */
.contact-one__info__title {
  color: var(--amoxi-white);
}

.contact-one__info__card::before {
  background-color: var(--amoxi-black);
}

/* Layer C: back-to-top は購入原本の <a href="#"> を button にしてある（fixes.json back-to-top-native-button、D-86）。
   button の UA 既定（2px outset の枠・1px 6px の余白・ButtonText の文字色）を打ち消し、文字色は購入の a と同じくブランド色（テーマの a と同じ strong）にする。
   購入は横組みの pill を -90° 回転させるが、日本語は回さず縦に積む（ユーザー決裁 2026-09-23。文字の縦組みは JA 層の .lang-ja-vertical）。
   進捗バーは購入 JS が width を動かすので、wrapper だけを購入と同じ -90° で回して縦棒にし、購入原本と同じく文字の上に置く（下から上へ満ちる）。回転で失う高さは margin で確保する。 */
.scroll-to-top {
  border: 0;
  padding: 0;
  color: var(--amoxi-base-strong);
  transform: none;
  flex-direction: column-reverse;
  height: auto;
  /* 器を 1140px へ縮めたので、画面の端に置いても本文に被らない
     （ユーザー指示 2026-09-26「TOPへボタンは、こうなると、コンテナ外でよい
     （コンテンツを被ることがないから）」）。
     実測 1280px: 本文の右端 1195、釦の左端 1238 で 43px 空く。 */
  right: 12px;
}

.scroll-to-top__text {
  /* padding-block-start: 縦組み（.lang-ja-vertical）で直立させた字は、em 箱の中心より
     line-over 側（vertical-rl では右）に寄って描かれる。実測 1.23px（12px の字、Chrome、
     1440px と 390px で同値）。over 側にその 2 倍の余白を置くと、中央寄せが箱ごと半分戻し、
     字の墨が箱の中心に来る。0.19em は実測値（1.23 x 2 / 12 = 0.205em）を丸めたもので、
     この値でバーと墨の重心差は +0.02px。フォントの縦メトリクスから導いた値ではない
     （第 79c 便で 0.38em としたのは発注側の測定の誤り。第 79d 便で訂正）。 */
  padding-block-start: 0.19em;
  margin-right: 0;
  margin-bottom: 0;
}

.scroll-to-top__wrapper {
  transform: rotate(-90deg);
  margin: 13px 0 21px;
}

/* Layer C: サイドバー（fullscreen 方針の markup）は中身の数で列を割る。購入 CSS の SNS は 4 件前提の width: 25%、
   Bootstrap の col-lg-4 は 3 列固定で、newsletter OFF や SNS 2 件では空きが残る。件数に依存しない 1 規則で等分する（ユーザー指摘 2026-09-23）。
   class は col-lg-4 のまま（挙動層 original 方針の display: contents がこの class を選ぶ）。 */
.sidebar-three .social-links a {
  flex: 1 1 0;
}

@media (min-width: 992px) {
  .sidebar-three__content > .container > .row > .col-lg-4 {
    flex: 1 0 0;
    width: auto;
  }
}

/* Layer C: 購入 CSS に残る旧ブランド色のリテラル 3 値（橙系。値は書かない。R-T3 が自前層の文字列を走査するため）のうち、このテンプレのページに効く 3 規則をトークンに置き換える。
   R-T3 は自前層しか見ないので購入 CSS の残りは機械で拾えない（積み残し: converter 側の走査規則）。 */
.testimonials-two__item__ratings__icon {
  background: var(--amoxi-base);
}

.testimonials-two__item__image::before {
  background: linear-gradient(180deg, transparent 49.73%, var(--amoxi-base) 100%);
}

.footer-widget .social-links a::after {
  background: var(--amoxi-base);
}

/* Layer C: 回転した文字を横に戻す。制作事例の番号は購入 CSS が sideways-lr（480px 以下だけ横）で、広い画面ほど読みにくい。
   開院バッジは 1300px 以上だけ sideways-lr で、日本語が回転する。購入自身の 1299px 以下の形（static・横書き・margin-top 30px）を全幅に広げる。
   「上へ戻る」の縦組みはユーザーの希望なのでそのまま（JA 層の .lang-ja-vertical）。 */
.portfolio-three__card__serial {
  writing-mode: horizontal-tb;
}

.about-three__experience {
  position: static;
  writing-mode: horizontal-tb;
  margin-top: 30px;
}

/* Layer D: preserve the two original star silhouettes while tokenizing color. */
.about-three__shape-1,
.about-three__shape-2 {
  width: 163px;
  height: 163px;
}

.about-three__shape-1 {
  background-color: var(--amoxi-white);
  mask: url(/amoxi/images/shapes/about-shape-3-1.png) center / contain no-repeat;
  -webkit-mask: url(/amoxi/images/shapes/about-shape-3-1.png) center / contain no-repeat;
}

.about-three__shape-2 {
  background-color: var(--amoxi-base);
  mask: url(/amoxi/images/shapes/about-shape-3-2.png) center / contain no-repeat;
  -webkit-mask: url(/amoxi/images/shapes/about-shape-3-2.png) center / contain no-repeat;
}

/* Layer D: page-header の飾り 2。購入ラスタは旧ブランド色を 22.96% 含むので輪郭だけ使い、色はブランドトークンで塗る。 */
.page-header__shape-2 {
  width: 203px;
  height: 203px;
  background-color: var(--amoxi-base);
  mask: url(/amoxi/images/shapes/page-header-shape-1-2.png) center / contain no-repeat;
  -webkit-mask: url(/amoxi/images/shapes/page-header-shape-1-2.png) center / contain no-repeat;
}

/* 第 80 便: hover と常時動作を止め、装飾を区画内に収める。 */

/* アコーディオンの矢印は hover で回さない（規則 2）。回すのは「開いている」状態だけ。
   購入は hover でボタン本体を 40° 回す（amoxi.css 22887 行）。ボタンは真円・単色なので
   ボタンごと回しても見た目に回るのは矢印だけ。遷移は購入の a の規則（318 行）が担う。 */
.services-three__item__btn:hover {
  transform: none;
}

/* 開閉の合図は ＋／− にした（ユーザー指示 2026-09-24「アコーディオンは
   プラスマイナスにしよう、矢印がおかしい」）。印そのものが状態を示すので、
   釦を回す必要がない。購入の hover の 40° 回転は上で止めてある。

   円は塗らず、線で抜く（ユーザー指摘「塗りつぶし円もやめよう、抜いた感じに
   しよう、重すぎる」）。塗ると区画の中でいちばん強い要素になってしまう。
   合図は読み手を導くだけで、主役ではない。 */
.services-three__item__btn {
  background-color: transparent;
  border: 0;
  color: var(--amoxi-base-strong);
  font-size: 24px;
}

.services-three__item__btn:hover,
.services-three__item.active .services-three__item__btn {
  background-color: transparent;
  border-color: var(--amoxi-base-strong);
  color: var(--amoxi-base-strong);
}

.services-three__item__btn__minus {
  display: none;
}

.services-three__item.active .services-three__item__btn__plus {
  display: none;
}

.services-three__item.active .services-three__item__btn__minus {
  display: block;
}

/* 開いている診療項目は写真を残しつつ、本文の下だけ面トークンで均す。
   左端 6px は透明にして .services-three__item__bg::before のブランド帯を見せる。 */
.services-three__item.active .services-three__item__top {
  background: linear-gradient(to right, transparent 0 6px, rgba(var(--amoxi-black-rgb), 0.96) 6px);
}

/* 開いていても閉じていても、中身は同じ位置に置く。
   購入は active のときだけ padding-left/right: 30px を足すので、閉じた側が 0 になり、
   番号が面の端で切れる。以前はそれを避けるため閉じた側を 60px にしていたが、こんどは
   閉じているあいだだけ中身が 30px ずつ内へ入る
   （ユーザー指摘 2026-09-25「もとから Open している場合の要素で配置しておいてほしい、
   Close 時が中央によりすぎている」。実測 1440px: 題の左 閉 195 / 開 165、
   ＋ の右 閉 1245 / 開 1275）。
   両方を購入の開いた側と同じ 30px に揃える。開閉で左右に動くものが無くなる。 */
.services-three__item__top {
  padding-left: 30px;
  padding-right: 30px;
  /* 購入はこの要素に transition: all 500ms を掛けている（amoxi.css 22773-22777）。
     左右の余白が状態で変わらなくなったいまも、面や色が 0.5 秒かけて混ざるのは
     開閉の切り替えには要らない（ユーザー指示 2026-09-25「拡縮不要ですわ、ノイズ」）。 */
  transition-property: none;
}

/* 罫は閉じているあいだも出す。購入は同じ 6px の罫を
   .services-three__item__bg::before に持つが、その親は閉じているあいだ opacity 0 で、
   写真ごと消えるので、閉じた側はこちらで引く
   （ユーザー指示「最初から左ブランドカラーborderを表示させておいて」）。
   色は状態で分ける。閉じているあいだは淡い灰、選ばれた項目だけがブランド色になる
   （ユーザー決裁 2026-09-25「初期表示が非ブランドカラーで、選択時にブランドカラー」）。
   四つ並んだ罫が全部ブランド色だと、区画の中でいちばん強い要素になってしまう。 */
.services-three__item:not(.active) .services-three__item__top::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background-color: var(--amoxi-gray);
}

/* 購入 JS のカーソル追従 class を外しても、丸ボタンの配置は購入 CSS と同じに保つ。 */
.services-three .amoxi-circle-btn-static-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}

/* 常時動くものは 0（規則 3）。購入 1348 行の shapeRotate を止める。静止位置は keyframes の開始位置と同じ。 */
.about-badge .curved-circle {
  animation: none;
}

/* 常時回る飾り 1 を止める（規則 3）。購入 8585 行の無限回転。飾り 2 のスクロール連動はテンプレ層で class を外して止めた。 */
.page-header__shape-1 {
  animation: none;
}

/* 医院紹介の飾り 1・2 の常時の伸縮（購入 13457・13462 行）を止める（規則 3）。
   位置と mask は既存のテーマ規則のまま。 */
.about-three__shape-1 {
  animation: none;
}

.about-three__shape-2 {
  animation: none;
}

/* ブログ小カードの写真が hover で拡大する（購入 6688 行）のを止める（規則 2）。
   大カードは購入規則が既に打ち消しており、この規則は全カードに同じ見た目で効く。 */
.blog-card-two:hover .blog-card-two__image img {
  transform: none;
}

/* 袋文字の常時アニメ（購入 11312 行と基底規則）を止める（規則 3）。
   購入は keyframes の外で fill を指定しないため、袋文字の静止形として塗りを透明にし、輪郭は購入の stroke に任せる。 */
.hero-three__image .stroke-text-title svg text {
  animation: none;
  fill: transparent;
}

/* 診療時間の区画は購入元が暗い背景を前提にしており、見出しが白で出る。
   この区画の地は明るいので、本文と同じ色に戻す（ユーザー指摘 2026-09-23
   「診療時間」は小見出しじゃないの？ を受けて区画の見出しに昇格させた）。 */
/* この区画のラベルは購入 CSS（amoxi.css 5091 行）が白のグラデーションで塗る
   — 購入元が暗い背景を前提にしているため。ほかの区画（同 658 行）はブランド色
   なので、同じ見え方になるよう既定のグラデーションに戻す
   （ユーザー指摘 2026-09-23「診療時間、文字色ちがう」）。 */
/* 塗り直す色は --amoxi-base-strong。ほかの区画のラベルと同じにする。
   以前はここだけ --amoxi-base（#E84883）で、区画の地 #F4F4F6 に対して
   コントラスト比 3.36 しかなく、17〜22px / 500 は WCAG の大文字扱いに
   ならないため AA 不合格だった（2026-09-26 の ClaudeDesign レビュー B-6、
   こちらで検算して一致。--amoxi-base-strong は 4.80 で合格）。
   色が区画ごとに違うと「診療時間だけ別扱い」の意味を読者が探す、という
   指摘も同時に解ける。ユーザー決裁 2026-09-26「base-strong へ統一」。
   --amoxi-base は面とロゴ、および HERO の大きな字に残す。 */
.contact-one .sec-title__tagline.bw-split-text > div {
  background-image: linear-gradient(to left, rgba(var(--amoxi-base-strong-rgb), 0.4) 50%, var(--amoxi-base-strong) 50%);
}

/* 2026-09-23 に「診療時間、文字色ちがう」への手当てとして、この見出しだけ
   background-image: none と -webkit-text-fill-color: currentColor で塗りを潰し、
   --amoxi-text-strong で色を指定していた。
   いま測ると --amoxi-text-strong は定義が無く（fallback の #1A1B1F が効いていた）、
   購入のグラデーションの終着色 var(--amoxi-white) も同じ #1A1B1F。つまり色は
   すでに一致しており、潰す理由が無くなっている。
   一方で .bw-split-text の動きは backgroundPositionX の scrub なので、
   background-image を消すと動く対象そのものが無くなる。この区画の見出しだけ
   アニメーションが効いていなかった（ユーザー指摘 2026-09-26「『ご予約を優先
   しています』ここにテキストアニメーションがかかっていない」）。
   ただし購入は .contact-one を暗い地の変種として作っており、amoxi.css:5091 で
   この区画の見出しだけ --amoxi-black2 で塗る。この木は black2 を #FFFFFF へ
   割り当てているので、白地に白で消える（実測: rgba(255,255,255,0.4) → rgb(255,…)）。
   そこで塗りを消すのではなく、ほかの 3 区画と同じ色へ差し替える。
   終着色 var(--amoxi-white) は #1A1B1F で、2026-09-23 に指定していた色と同値。 */
.contact-one .sec-title__title {
  color: var(--amoxi-white);
}

.contact-one .sec-title__title.bw-split-text > div {
  background-image: linear-gradient(to left, rgba(var(--amoxi-white-rgb), 0.2) 50%, var(--amoxi-white) 50%);
}

/* フッターの診療時間は曜日の群（月・火・水・金・土）と「休診日」がラベル、
   時刻や休診の内容が値。列幅 245px に対して語が長く、ラベルの途中で折れると
   「休／診／日」のように 1 字ずつ縦に割れる。ラベルは折らず、値だけを折る
   （ユーザー指摘 2026-09-23。朝から 3 度出ている崩れ）。 */
.footer-widget--links-2 .footer-widget__links li,
.sidebar-three__info__list li {
  /* 245px の列に「ラベル + 値」を横に並べると、行ごとに折れ方が変わって
     見え方が揃わない（ある行は値が下に落ち、ある行は横並び、ある行は値が
     2 行に折れる）。ラベルを上、値を下の 2 段にして全行を同じ形にする。 */
  display: block;
  margin-bottom: 14px;
}

.footer-widget--links-2 .footer-widget__links li > time,
.sidebar-three__info__list li > time {
  display: block;
}

.footer-widget--links-2 .footer-widget__links li > span,
.sidebar-three__info__list li > span {
  /* ラベル（曜日の群・休診日）は折らない。折れると「休／診／日」のように
     1 字ずつ縦に割れる（ユーザー指摘 2026-09-23）。 */
  display: block;
  white-space: nowrap;
}

/* The brand mark stands on its own; a filled disc behind it repeats the mark's own circle. */
.about-three__image__shape {
  background-color: transparent;
  width: 104px;
  height: 104px;
}

.about-three__image__two::before {
  background-color: rgb(var(--amoxi-base-rgb));
}

.about-three__image__shape img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 第 92 便: 右上の釦を、全幅で唯一のナビゲーションパネルにする。 */
.main-header .mobile-nav__toggler,
body .mobile-nav__wrapper {
  display: none;
}

.main-header button.sidebar-btn__toggler {
  padding: 0;
  border: 0;
}

body .sidebar-three {
  inset: 0;
  width: 100%;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  /* 地は透かさない（ユーザー指示 2026-09-24「ハンバーガーメニューの背景透過、
     全幅で取り下げ。現状の背景色でよい」）。一度は後ろのページが灰色に透ける
     形にしたが、採らなかった。開く動きは濃さで付けるので、層が乗ったことは
     その動きで分かる。 */
  background-color: var(--amoxi-black4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: opacity 240ms ease-out;
}

body .sidebar-three.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  /* 購入の .active は transition を transform と visibility に差し替えるので、
     開くときに濃さが動かず、いきなり出ていた（2026-09-24 に実測。1 フレーム目で
     すでに濃さ 1）。開く側でも同じ移りを指し直す
     （ユーザー指摘「Openアニメーションが消えてるな」）。 */
  transition: opacity 240ms ease-out;
}

.sidebar-three__inner {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 0;
}

.sidebar-three__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-three__col--info {
  flex: 1 0 auto;
}

.sidebar-three__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.sidebar-three__logo {
  display: block;
}

.sidebar-three__logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.sidebar-three__close {
  /* 開く釦と中心を合わせ、開いた指がその場で押し戻せるようにする
     （ClaudeDesign 決定書 2026-09-24 D-06）。44 は下限であって目標ではない。 */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--amoxi-black4);
  color: var(--amoxi-white);
  transform: none;
}

.sidebar-three__close:hover {
  /* --amoxi-white は明るい画面で #1A1B1F に反転するトークンで、背景に入れると
     ほぼ黒になっていた（ユーザー指摘 2026-09-24）。ブランド色の対に替える。 */
  background: var(--amoxi-base-strong);
  color: var(--amoxi-on-base);
  transform: none;
}

.sidebar-three__nav {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border-top: 1px solid var(--amoxi-gray);
}

.sidebar-three__nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  font-size: 17px;
  font-weight: 700;
  color: var(--amoxi-white);
  text-decoration: none;
  border-bottom: 1px solid var(--amoxi-gray);
}

.sidebar-three__nav a:hover {
  color: var(--amoxi-base-strong);
}

.sidebar-three__lead {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--amoxi-white2);
}

.sidebar-three__section {
  margin-top: 28px;
}

.sidebar-three__label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: var(--amoxi-base-strong);
}

.sidebar-three__hours {
  margin: 0;
  display: grid;
  gap: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--amoxi-white2);
}

.sidebar-three__hours dt {
  margin: 0;
  font-weight: 700;
  color: var(--amoxi-white);
}

.sidebar-three__hours dd {
  margin: 0;
}

.sidebar-three__contact {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 20px 0;
  background: var(--amoxi-black4);
  border-top: 1px solid var(--amoxi-gray);
}

.sidebar-three__tel {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 2px solid var(--amoxi-base-strong);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  background: var(--amoxi-base-strong);
  color: var(--amoxi-on-base);
  transform: none;
}

.sidebar-three__tel:hover {
  background: var(--amoxi-black4);
  color: var(--amoxi-base-strong);
  transform: none;
}

.sidebar-three__tel-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sidebar-three__addr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--amoxi-white2);
}

.sidebar-three__addr address {
  margin: 0;
  color: inherit;
}

.sidebar-three__addr-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  background: var(--amoxi-black6);
  color: var(--amoxi-base-strong);
}

@media (prefers-reduced-motion: reduce) {
  body .sidebar-three {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .sidebar-three__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    padding: 48px 80px;
    overflow: hidden;
  }

  .sidebar-three__col {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .sidebar-three__col--info {
    flex: none;
  }

  .sidebar-three__close {
    position: absolute;
    top: 54px;
    right: 80px;
  }

  .sidebar-three__nav {
    margin-top: 72px;
    border-top: 0;
  }

  .sidebar-three__nav-item {
    min-height: 0;
    padding: 6px 0;
    font-size: 48px;
    line-height: 1.2;
    border-bottom: 0;
    justify-content: flex-start;
    gap: 16px;
  }

  .sidebar-three__lead {
    margin: auto 0 0;
    max-width: 440px;
    font-size: 16px;
  }

  /* 区画の間は 40px。128px は旧い構成（ナビの下に情報を置いていた頃）の名残で、
     診療時間と来院案内のあいだに大きな空きを作っていた（実測 128px）。
     余った高さは表が吸う（ユーザー指示 2026-09-24）。 */
  .sidebar-three__section {
    margin-top: 40px;
  }

  .sidebar-three__section:first-child {
    margin-top: 0;
  }

  .sidebar-three__contact {
    position: static;
    margin-top: auto;
    padding-bottom: 0;
    border-top: 0;
  }
}

/* 複製ヘッダーは購入 JS が上スクロール時だけ .active を付ける（amoxi.js 969-993）。
   原本ヘッダーが画面から出た後は、方向に関係なく出したままにする
   （ユーザー決裁 2026-09-24「常に出したままにする」）。値は購入 3588-3591 の .active と同じで、
   基底 3574-3587（詳細度 0,1,0）に 0,2,0 で勝つ。!important は使わない。 */
.sticky-header--cloned.sticky-header--pinned {
  transform: translateY(0%);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  /* 固定ヘッダーの地と、中身との区切り（ユーザー決裁 2026-09-25）。
     地は半透明 + ぼかし。色は購入原本の .sticky-header--cloned.main-header--three
     （amoxi.css 3604 行）が参照する --amoxi-black と同じトークンを使い、
     不透明度だけ落とす（生の色を増やさない。実測は下の @supports 節と対）。 */
  background-color: rgba(var(--amoxi-black-rgb), 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* 区切りは細い罫 1px（ユーザー決裁「控えめ」）。色は既存の薄い罫の例
     （.sidebar-three__nav 等の --amoxi-gray）と同じトークンを使う。 */
  border-bottom: 1px solid var(--amoxi-gray);
}

/* backdrop-filter が効かない環境では地を不透明に戻す。透けたまま読めなくなるのが
   最悪（ユーザー決裁 2026-09-25）。 */
@supports not (backdrop-filter: blur(1px)) {
  .sticky-header--cloned.sticky-header--pinned {
    background-color: rgb(var(--amoxi-black-rgb));
  }
}

/* 購入は複製を画面の外へ出し入れして見せ隠しする。そのため出るときは必ず
   「上から降りてくる」動きになり、直前に原本が上へ抜けているので、
   ヘッダーが飛んでいって戻ってくるように見える
   （ユーザー指摘 2026-09-24「ヘッダーのバウンスを止めたい」）。
   位置は動かさずその場に置き、濃さだけで現れさせる。隠れている間は
   透明なだけで面は残るので、押せないようにしておく。 */
.sticky-header--cloned {
  transform: translateY(0%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease-out;
}

/* ロゴの高さを確定させる。幅を auto のままにすると、狭い段では flex の中で幅が
   決まらず 0 になった（ベクターへ替えたあと 2026-09-25 に実測。1199px 以下の
   すべての幅で 0×0）。高さが決まれば、ベクターの縦横比から幅が決まる。
   1199px 以下はナビが隠れてヘッダーの高さが 86px になるので、この幅では高さを
   抑える（2026-09-24 に実測）。 */
@media (max-width: 1199px) {
  .main-header__logo img {
    /* 幅で指定する。高さを自前で指定すると、画像の属性と比率が食い違う事故を
       防ぐ検査（R-T14-3）に掛かる。幅が決まれば高さは属性の比率から決まる。
       幅を auto のままにすると、狭い段では flex の中で幅が決まらず 0 になった
       （ベクターへ替えたあと 2026-09-25 に実測）。 */
    width: 249px;
  }
}

/* 棚部品 site-footer への橋渡し。部品はテーマの語彙を知らないので、
   ここでブランドのトークンを渡す（hours-table と同じ作法）。 */
.main-footer {
  /* 見出しはブランド色。走査の負荷を下げる（ユーザー指示 2026-09-24）。
     base（#E84883）は地 #F4F4F6 で比 3.36 と足りず、base-strong（#BE396A）が 4.80。
     全画面メニューの見出しも同じ色を使っている。 */
  --site-footer-heading-rgb: var(--amoxi-base-strong-rgb);
  --site-footer-text-rgb: var(--amoxi-text-rgb);
  /* 項目名と法的表記は本文色。--amoxi-gray は罫線用で、文字に使うと
     コントラスト 1.37（2026-09-24 に実測。基準 4.5）で読めない。 */
  --site-footer-label-rgb: var(--amoxi-text-rgb);
  /* リンクは下線で識別し、色は濃い前景にする。ブランド色は白地で
     コントラスト 2.50（2026-09-24 の画素実測）で本文の大きさには足りない。 */
  --site-footer-link-rgb: var(--amoxi-white-rgb);
  --site-footer-rule-rgb: var(--amoxi-gray-rgb);
}

/* 全画面メニューの改訂（ClaudeDesign 決定書 2026-09-24）。
   左列は「動く」（ナビ → 予約釦）、右列は「知る」（診療時間 → 来院案内）。 */

/* 購入テーマは矢印を右下へ回す。内ページへの遷移には合わないので水平に戻す（D-09）。 */
.sidebar-three__nav-arrow {
  transform: none;
}

.sidebar-three__reserve {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  /* 釦の周りが詰まりすぎていた（ユーザー指摘 2026-09-24）。上下に余裕を取り、
     端末のシステム領域のぶんも足して最下部へ置く。 */
  padding: 24px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--amoxi-black4);
  border-top: 1px solid var(--amoxi-gray);
}

.sidebar-three__visit-list {
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--amoxi-white2);
}

.sidebar-three__visit-list address,
.sidebar-three__visit-list p {
  margin: 0;
  font-style: normal;
}

@media (min-width: 1024px) {
  /* 中央の空白は「左列が短いナビ、右列が固定幅」から出る。全体の幅を絞って
     余白を外側へ移す。外側の余白は額縁として読めるが、中央の余白は欠けに見える（D-05）。 */
  .sidebar-three__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    column-gap: 64px;
    align-content: start;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding: 48px 48px 56px;
    overflow: hidden;
  }

  .sidebar-three__head {
    grid-column: 1 / -1;
    height: 48px;
  }

  /* 広い画面では釦を下端に貼らず、ナビの直下に置く（D-07）。 */
  .sidebar-three__reserve {
    position: static;
    margin-top: 40px;
    padding: 0;
    border-top: 0;
    background: none;
  }

  /* 診療時間と来院案内のあいだが 128px 空いていた（実測）。余白で埋めるより
     表を伸ばした方が読みやすい（ユーザー指示 2026-09-24）。 */
  .sidebar-three__col--info {
    display: flex;
    flex-direction: column;
  }

  .sidebar-three__hours-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .sidebar-three__hours-section .hours-table {
    flex: 1 1 auto;
  }
}

/* 本文と印の群の間は、購入の 25px だと見た目 29.6px で、本文の行送り 29.6px と
   同値になる（2026-09-24 に実測）。同値だと印が本文の次の行に見え、段が切れない
   （ユーザー指摘「何でもお気軽にお尋ねください。の下部に、少し余白がほしい、
   つまりすぎている」）。印の群が自分の下に取る余白と同じだけ上にも取る。 */
.about-three__text {
  margin-bottom: 40px;
  /* 日本語レイヤは既定で word-break: keep-all。句読点でしか折れないので
     読点ごとに階段状の改行になる（ユーザー指摘 2026-09-24「意図した改行不要、
     そのまま表示でよい」）。ここだけ普通の折り返しに戻す。 */
  word-break: normal;
}

/* 医院紹介の印は本文を支える添え物で、主役ではない。購入の 18px / 700 だと
   本文より強く出てしまう（ユーザー指摘 2026-09-24「太字が強すぎる。
   こちらでいいたいのは、文章のほう」）。 */
.about-three__item__title {
  font-size: 16px;
  font-weight: 400;
}

/* 診療案内の写真は出所がばらばらで、原色のままだと並べたときに統一感が出ない
   （ユーザー指摘 2026-09-24）。同じ調整を全部に掛けて色の幅を揃える。 */
.services-three__item__image img,
.services-three__item__bg,
.hero-three__image__inner img,
.about-three__image__one img,
.about-three__image__two img,
.about-three__profile__image img {
  filter: saturate(0.85) contrast(0.98) brightness(1.02) sepia(0.04);
}

/* HERO の題は 3 行。最長の行は「こどもからおとなまで」で 10 字ある。ところが
   1200px 以上では題の枠が 522px しかなく（2026-09-24 に実測。右半分は写真）、
   購入の 65px / 75px では 1 行に収まらない。枠に収まる大きさへ落とす
   （ユーザー指示 2026-09-24「サイズも小さくして」）。枠の幅は画面幅に比例せず、
   1200 で 2 段組に変わって狭くなるので、段ごとに実測して決める。
   行分割は字が組まれる前に決まるので、代替書体の分の余裕を残す。 */
.hero-three__title {
  font-size: 44px;
  /* 購入は題に overflow: hidden を掛けている（行分割の演出で、字を箱の外から
     せり上がらせるため）。その演出を題から外したのでこの覆いには仕事が無く、
     下の跡が箱の底で切られて「語の途中から生えている」ように見えていた
     （2026-09-24 に実測。ユーザー指摘「実装バグに見える」）。覆いを外す。 */
  overflow: visible;
}

@media (max-width: 1199px) {
  .hero-three__title {
    font-size: 50px;
  }
}

/* 狭い段では端末の幅に連動させる。最長の行は「ずっと通える歯科医院」で 10 字
   なので、1 字あたり 8.6vw/10 = 0.86vw。左右の余白 30px を引いた幅に必ず収まる。
   固定値だと最小の端末に合わせることになり、大きい端末で損をする
   （ユーザー指摘 2026-09-24「俺のAndroidだとまだ大きくできそうだけど、
   他端末だと厳しいのかな」）。 */
@media (max-width: 767px) {
  .hero-three__title {
    font-size: min(8.6vw, 40px);
  }
}

/* 行は箱で分ける。br だと購入の行分割が字の組まれる前の幅で折り直してしまう
   （2026-09-24 に実測。390px で「ず／っと」と語の途中で折れていた）。 */
.hero-three__title__line {
  display: block;
}

/* 下線は語の幅に紐づける。購入は 75px の「ずっと」に合わせた固定幅で、字を
   小さくすると語からはみ出す（2026-09-24 に実測）。
   さらに、真っ直ぐな 1 本線は語を邪魔するだけだった（ユーザー指摘
   「とくにいらねーな、ノイズだわ」）。マーカーで一度引いた跡にする。

   置き場は字の下（重ねない）。太さは字の 0.26em で、線ではなく跡に見える幅。
   手書きらしさは、わずかな傾きと四隅の不揃いな丸みだけで出す
   （ユーザー指示 2026-09-24「マーカーをもっと下に配置する／1 本でよい／
   倍くらい太くする」）。

   角丸は箱の高さより小さくする。高さより大きい角丸を指定すると端が先細って
   消え、跡が語の途中から生えて見えた（同日に実測）。

   なお題の overflow は visible に戻してある。購入の覆い（行分割の演出用）が
   残っていると、字の下へ出した跡が箱の底で切られる。 */
.hero-three__title__highlight::after {
  left: -0.09em;
  /* 末尾は語より長く出す。字の右端とそろうと、引き終えた跡に見えない
     （ユーザー指摘 2026-09-24「医院の末尾とマーカー末尾がそろってる、
     マーカーをはみだしてほしい」）。
     right で伸ばそうとしたが効かなかった（計算値が 0px のままになる）。
     幅で決めると確実に伸びる。 */
  right: auto;
  /* 字に掛かりすぎると引っ掛き傷に見える（ユーザー指摘 2026-09-24
     「バグに見えてしまう、文字にかかりすぎる」）。字の下へ外す。 */
  bottom: -0.3em;
  width: calc(100% + 0.5em);
  height: 0.26em;
  border-radius: 0.06em 0.1em 0.07em 0.09em;
  /* 語の色に近いと、字の一部に見える（ユーザー指摘「歯科医院の文字色に近いのもダメ」）。
     薄くして、別の層で引いた跡だと分かるようにする。 */
  opacity: 0.4;
  z-index: -1;
  transform: rotate(-2.8deg) scaleX(0);
  transform-origin: left center;
  animation: hero-underline-draw 460ms ease-out 700ms forwards;
}

@keyframes hero-underline-draw {
  to {
    transform: rotate(-2.8deg) scaleX(1);
  }
}

/* 動きを望まない設定では、跡は最初から引かれた状態で置く。 */
@media (prefers-reduced-motion: reduce) {
  .hero-three__title__highlight::after {
    animation: none;
    transform: rotate(-2.8deg) scaleX(1);
  }
}

/* HERO の説明文は見出し 75px に対して 16px で、最初の画面では小さすぎて読まれない
   （ユーザー指摘 2026-09-24「小さすぎる、見えない」）。本文の区画より一段大きくする。 */
.hero-three__text {
  font-size: 19px;
  line-height: 1.8;
  /* 日本語レイヤは既定で word-break: keep-all。句読点でしか折れないので、
     読点ごとに階段状の改行になる（ユーザー指摘 2026-09-24「意図的な改行不要、
     そのままの1文でよいです」）。ここだけ普通の折り返しに戻す。 */
  word-break: normal;
}

@media (max-width: 767px) {
  .hero-three__text {
    font-size: 17px;
  }
}

/* 釦は「何をするか」と「番号」の 2 つを持つ。行為の名は細く、番号を太くして、
   押す前に番号が読めるようにする（ユーザー指示 2026-09-24）。 */
.amoxi-btn__lead {
  font-weight: 400;
  margin-right: 12px;
}

.amoxi-btn__value {
  font-weight: 700;
  font-size: 25px;
}

/* 狭い画面では 25px だと釦が画面からはみ出す（実測 362px / 画面 375px）。 */
@media (max-width: 767px) {
  .amoxi-btn__value {
    font-size: 24px;
  }
}

/* ブランドの印は写真ではないので、写真に掛ける調整の対象外にする。
   写真の規則と詳細度が同じなので、後ろに置いて勝たせる。 */
.about-three__image__shape img {
  filter: none;
}

/* ── スマホ版の見直し（ClaudeDesign 決定書 2026-09-24）─────────────────
   幅 390 でページ全高 5959px（7.1 画面）。順は変えず高さを削る、という決定。
   広い画面の見た目は変えたくないので、すべて 767px 以下だけに効かせる。
   決定書の案はそのままでは粗い箇所があるため、要点だけを採っている。 */
/* 広い画面でも最初の画面に HERO を収める。購入は PC で区画の高さを固定の余白
   （267px / 190px）だけで作っており、画面の高さと無関係に 824.2px になる。
   2026-09-25 実測: 1440x900 では下に次の区画が 76px 覗き、1366x768 では 56px、
   1280x800 では 24px はみ出して釦の下が切れる（ユーザー指摘「PC のファーストビューで、
   HERO セクションが縦に長いね。スマホでは 1st ビューで HERO 全面表示だけど、PC も
   そうありたいんだけれど、いまは HERO セクションが縦に長すぎる」）。
   狭い段は 100lvh / 100svh で同じことを既にやっている（すぐ下の節）。同じ考えを
   広い段へ持ってくる。

   置き方は grid の align-content。この区画で場所を取るのは .container だけで、
   ほかの 2 つ（__bg と __image）は position: absolute なので並びに入らない。
   grid の欄は横いっぱいに伸びるため、container の max-width と auto の左右余白は
   そのまま効く（実測 1440px: 欄 1440 → container 1200、左 83px のまま）。

   上下の余白は同じ値にする。同じなら中身の中心は区画の中心のままで、いまの見え方が
   変わらない（実測 1440x900: 現行 267〜634.2 に対しこの規則で 266.5〜633.5）。
   画面がとても低いときだけ、この余白が固定ヘッダーの下に中身を留める床になる。
   値は固定ヘッダーの厚み（広い段で 106px）。 */
@media (min-width: 768px) {
  .hero-three {
    display: grid;
    align-content: center;
    min-height: 100svh;
    padding-top: 106px;
    padding-bottom: 106px;
  }
}

@media (max-width: 767px) {
  /* D-01 見出しの段差をつくる。HERO の題 32px に対し区画の題が 30px で、
     差が 2px しかなく同格に見えていた（2026-09-24 に実測）。 */
  .sec-title__title {
    font-size: 26px;
    line-height: 1.4;
  }

  /* ここから下は、字の大きさを HERO の 2 段（題 約33px / 本文 17px）へ寄せる。
     スマホで 13/14/15/16/17/18/26/28/33 の 9 種類が混ざっていた
     （ユーザー指摘 2026-09-24「フォントサイズがバラバラ感が否めない。
     スマホだとHEROセクションの2サイズでちょうどよくて」）。
     読ませる文はすべて 17px、添える字は 15px、表だけ 13px に落とす。 */

  /* 区画のラベルは「読ませる文」の 17px から上げる。狭い段では区画ラベル 17 に対し
     曜日・フッター見出し・来院案内の群が 15/15/14 で、差が最大 3px しかなく、
     どれが区画の名でどれが群の名か見分けられなかった
     （ユーザー指摘 2026-09-26「PC ほどフォントサイズに差異がないから、ラベルなのか
     セクションタイトルのラベルなのか、よくわからん」。実測 17/15/15/14、
     4 つとも同じブランド色・同じ太さ 500）。
     20px にすると下位（14px に揃える。下記）との差が 6px になる。

     これは 2026-09-24 の「読ませる文はすべて 17px、添える字は 15px」の体系を
     ラベルについてだけ外れる。ユーザー決裁 2026-09-26（案 B を 4 案から選択）。 */
  .sec-title__tagline {
    font-size: 20px;
  }

  /* 読ませる文はすべて同じ大きさ。 */
  .sec-title__lead,
  .about-three__text,
  .services-three__item__text,
  .site-footer__facts {
    font-size: 17px;
  }

  /* 診療科の名は本文より一段上。番号と並ぶので行の高さは本文に合わせる。
     body を前置するのは、購入側に同じ詳細度の指定があるため。 */
  body .services-three__item__title {
    font-size: 20px;
  }

  /* 添える字（注記・補記・見出しの札）。
     棚部品の CSS はテーマより後に読まれるので、body を前置して勝たせる。 */
  body .hours-table__list,
  body .hours-table__notes,
  body .about-three__item__title {
    font-size: 15px;
  }

  /* ラベルの段は 14px で揃える（PC と同じ）。上の区画ラベル 20px との差を 6px にする。
     一覧そのものは 15px のまま（上の規則）。ここで下げるのは曜日のラベルだけで、
     時刻の値は 15px を保つ。 */
  body .hours-table__list dt,
  body .site-footer__heading {
    font-size: 14px;
  }

  /* 法的表記はいちばん小さくてよいが、12px は下限を割る。 */
  body .site-footer__legal {
    font-size: 13px;
  }

  /* D-05 閉じた診療案内の項目が 327px（画面の 39%）あり、4 項目で 2.5 画面を
     使っていた。閉じているあいだは説明文を出さない。矢印は開閉の唯一の合図
     なので残す（決定書は矢印も隠す案だったが、それだと開くことが分からない）。 */
  .services-three__item:not(.active) .services-three__item__description {
    display: none;
  }

  /* 上下だけを詰める。一括指定にすると左右も 0 になり、閉じた項目だけ
     番号と ＋ が画面の端に貼り付く（2026-09-25 実測 390px: 閉 0px / 開 30px、
     題の左が 15 と 45 で 30px 飛ぶ。ユーザー指摘 2026-09-26「スマホの
     アコーディオンがおかしい」）。左右は開いた側と同じ値のまま置く
     （上の .services-three__item__top と対）。 */
  .services-three__item__top {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  /* 閉じた項目を「番号・科名・矢印」の 1 行にする（決定書 D-05、ユーザー決裁
     2026-09-24「アコーディオンがスマホレイアウトだと不要」）。購入は狭い段で
     3 つの列を縦に積むので、閉じていても 210px あった。 */
  .services-three__item .accordion-title .row {
    flex-wrap: nowrap;
    align-items: center;
  }

  .services-three__item .accordion-title .row > .col-lg-5 {
    flex: 1 1 auto;
    width: auto;
  }

  .services-three__item .accordion-title .row > .col-lg-2 {
    flex: 0 0 auto;
    width: auto;
  }

  /* 開いたときだけ説明文を次の行へ落とす。 */
  .services-three__item.active .accordion-title .row {
    flex-wrap: wrap;
  }

  .services-three__item.active .accordion-title .row > .col-lg-5 + .col-lg-5 {
    flex: 0 0 100%;
    width: 100%;
    order: 3;
  }

  /* 番号と科名は購入だと縦積み（28 + 10 + 29 = 67px）。横に並べて 1 行に収める。 */
  .services-three__item__title {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    padding-right: 0;
  }

  /* 最初の画面に釦まで収める（ユーザー指示「スマホのviewport縦にあわせてほしい、
     1stviewで診察電話ボタンまで表示させたい」）。
     購入は狭い段で区画に 230px / 190px の余白を取っており、それだけで
     画面の半分を使っていた（2026-09-24 に実測）。上は固定ヘッダー分だけ残す。 */
  /* 高さは 2 つに分けて持つ。
     - 覆う高さ: 100lvh（帯が消えたときの高さ＝いちばん大きい）。これで帯の
       出入りに関わらず、下から次の区画の白地が覗かない。
     - 中身の高さ: 100svh（帯が出ているときの高さ＝いちばん小さい）。これで
       帯が出ていても釦が画面に入る。
     その差（100lvh - 100svh）を区画の下余白に置くと、両方が同時に成り立つ。
     dvh（その瞬間の高さ）で決めていたが、滑らかスクロールが position: fixed の
     器を使うため実機では帯の出入りと更新がずれ、白地が覗いた
     （ユーザー指摘 2026-09-24「1stViewの下が白になってる、高さ判定がおかしい」）。
     PC では lvh と svh が同じなので、下余白は 0 になる。 */
  .hero-three {
    padding-top: 102px;
    padding-bottom: calc(100lvh - 100svh);
  }

  .hero-three__image {
    min-height: 100lvh;
  }

  /* 画面の高さから上の余白を引いた分を下限にし、余りは釦の上へ集める。
     svh は「ブラウザの帯を含まない高さ」。vh だと帯のぶん下が隠れる。 */
  .hero-three__content {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 102px);
  }

  /* 2026-09-24 はここで面を敷き直していた（購入の面は黒の 7% で、暗い写真の上では
     消えてしまい「文字だけが浮いて見える」というユーザー指摘があったため）。
     2026-09-25 に面そのものをやめる決裁が出たので、この敷き直しも要らなくなった。
     「文字だけ」に見えないようにする役目は、下の短い罫が引き継ぐ。 */

  /* 釦は画面の中央に置く（ユーザー指示「スマホだと診察電話ボタンを中央寄せしたい」）。 */
  .hero-three__button__inner {
    display: flex;
    justify-content: center;
  }

  /* 文字群を最初の画面の中央寄りへ下ろす。上に詰めるとヘッダーに触れる
     （ユーザー指摘 2026-09-24「テキストがヘッダーナビにかかってしまってる」）。
     上と釦の両方に auto を置くと、余りが上下で折半される。 */
  .hero-three__top {
    margin-top: auto;
  }

  /* 釦は下端より釦 1 つぶん上に置く（ユーザー指示 2026-09-24「最下部と
     いったけど、もうボタン一つ分だけ上にしましょう」）。釦の高さは 86px（実測）。 */
  .hero-three__button {
    margin-top: auto;
    padding-bottom: 118px;
  }

  /* 最初の画面が文字だけで印象が薄い（ユーザー指摘 2026-09-24
     「スマホのファーストビュー…インパクトが薄すぎます」）。購入はスマホで
     診療風景を丸ごと隠している（display: none）。敷き直して背景にする。 */
  .hero-three__image {
    display: block;
    width: 100%;
    left: 0;
    z-index: 0;
  }

  /* 写真はゆっくり引いていく（ユーザー指示 2026-09-24「めっちゃゆっくり
     ズームアウトできたりします？」）。画像そのものには購入の JS が変形を
     掛けている（inline の transform）ので、外側の箱を動かす。
     外側で切り抜いて、縮み切ったところで区画とぴったり重なる。 */
  /* 写真は暗い側へ寄せる（ユーザー指示「ダークよりにフィルタでどうだろう？
     あまりにも白すぎる」）。白へ寄せると診療風景が飛んで、敷いた意味が消える。 */
  .hero-three__image__inner img {
    filter: saturate(0.62) contrast(1.05) brightness(0.6);
  }

  /* 白の薄衣。濃さは本文と地の比を実測して決める。 */
  .hero-three__image::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 暗い衣。濃さは文字との比を実測して決める。 */
    background-color: rgba(var(--amoxi-white-rgb), 0.42);
  }

  .hero-three__content {
    position: relative;
    z-index: 1;
  }

  /* 暗い地に乗るので、文字は白とブランドにする。ブランドは明るい側の段
     （--amoxi-base）。濃い側（base-strong）は暗い地で沈む。 */
  .hero-three__title {
    color: var(--amoxi-black4);
  }

  /* 打ち消す範囲は HERO の中だけにする。素の .hero-three__title__highlight は
     広い段で濃い側の段（base-strong）を使い続ける（配色段階の宣言どおり）。 */
  .hero-three__content .hero-three__title__highlight {
    color: var(--amoxi-base);
  }

  /* サブテキストは題より一段落とす（ユーザー指示「タイトルキャッチコピーより
     色調で落としてほしい」）。白のままだと題と同格に見える。 */
  .hero-three__text {
    color: var(--amoxi-gray);
  }

  .hero-three__content .hero-three__tagline,
  .hero-three__content .hero-three__tagline__text {
    color: var(--amoxi-black4);
  }

  /* D-06「TOP へ」の柱は右端 x=348・幅 30 で、本文（右余白 15px）と
     診療案内の矢印に重なっていた（2026-09-24 に実測・目視）。
     柱をやめて右下の丸い釦にする。見えていたのは 4x30px の細い棒だけで、
     札は伏せてあった。これでは見えないし押せない（ユーザー指摘
     「PagetTopボタンが見えにくい、押しにくい、配置も微妙に上な気がする」）。
     札を横書きで出し、面を敷き、下端へ寄せる。 */
  /* 購入は表示中に .show を足し、その規則で bottom を決める（詳細度 0,2,0）。
     こちらも .show を含めて上書きする。 */
  body .scroll-to-top,
  body .scroll-to-top.show {
    right: 14px;
    /* env に予備値が無いと、対応していない環境で指定ごと捨てられる。 */
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--amoxi-base-strong);
    color: var(--amoxi-on-base);
  }

  /* 札は読み上げにだけ残す（ユーザー指示「「ＴＯＰへ」ではなくて上矢印でいい」）。 */
  body .scroll-to-top__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  body .scroll-to-top__icon {
    display: block;
    font-size: 22px;
  }

  /* 進み具合を示す細い棒は、矢印と並ぶと読みにくいので出さない。 */
  body .scroll-to-top__wrapper {
    display: none;
  }

  /* D-10 医院紹介の印は文言が 4〜8 字で、1 列に並べる必要がない。
     1 項目 113px × 4 = 452px を 2 列にして半分にする。 */
  .about-three__item-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
  }

  .about-three__item + .about-three__item {
    margin-top: 0;
  }
}

/* D-07 法的表記のリンクは押せる 11 要素のうち唯一 44px に足りない（120x22 を実測）。
   幅に関わらず指で押せる高さにする。 */
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 題に続く一文。題は「名」なので短く、句点を伴う文はこちらへ置く
   （ClaudeDesign 決定書 D-02 / D-03、ユーザー決裁 2026-09-24）。
   本文の区画と同じ大きさにして、題との段差をはっきりさせる。 */
.sec-title__lead {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--amoxi-text);
}

/* HERO の診療時間の行。最初の画面で「いつ開いているか」を渡す（決定書 D-09）。
   表ではなく行なので、曜日の幅だけ揃えて並べる。 */
.hero-three__hours {
  display: grid;
  row-gap: 4px;
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--amoxi-text);
  font-variant-numeric: tabular-nums;
}

.hero-three__hours__row {
  display: flex;
  gap: 12px;
}

.hero-three__hours__day {
  flex: none;
  min-width: 7em;
  font-weight: 500;
  color: var(--amoxi-white);
}

/* スマホのブラウザは住所の帯のぶん、見える高さが縮む。滑らかスクロールは
   読み込み時の高さで送れる量を決めるので、帯が出ている間はフッターの最後が
   届かない（ユーザー指摘「スマホフッター最下部が見切れています、
   バウンスさせることでしかみれない」）。
   lvh（帯が消えた高さ）と svh（帯が出ている高さ）の差が、ちょうど足りない分。
   画面に帯が無いとき（PC を含む）は 0 になる。 */
@media (max-width: 767px) {
  .main-footer {
    padding-bottom: calc(100lvh - 100svh);
  }
}

/* 上矢印は狭い段だけで使う。広い段は従来どおり縦書きの札と棒。 */
.scroll-to-top__icon {
  display: none;
}

/* 開閉の釦を 1 つにする（ユーザー指示 2026-09-24「閉じるアイコンを別に作らずに、
   全幅で、ハンバーガーアイコンが閉じるアイコンと行き来するように」）。
   別に置くと開いた瞬間に印が横へ動く（実測: ハンバーガー x=304 / 閉じる x=322）。
   さらに閉じる釦で閉じると先頭へ飛ぶ（実測 1800 → 0）。ヘッダーの釦なら
   位置が保たれる（1800 → 1800）ので、視座のずれも同時に消える。 */
.sidebar-three__head {
  display: none;
}

/* 最初の画面のヘッダーは面を持たない。送ると背景つきの複製へ引き継ぐ。
   スマホだけこの形にしていたが、広い段でも同じにする
   （ユーザー指示 2026-09-24「ヘッダーの挙動、スマホとLaptopあわせていいよ、
   Laptopが逆に違和感になってる」）。 */
.main-header:not(.sticky-header--cloned) .main-header__inner,
.main-header:not(.sticky-header--cloned) .main-header__left {
  background-color: transparent;
  border-radius: 0;
}

/* 複製ヘッダーの中の板を外す。購入は 1199px 以下だけ .main-header__inner に
   角丸 20px と不透明の地を塗り、左右 15px 内側へ寄せた「浮いた板」を作る
   （amoxi.css 3283-3288）。上の規則は原本だけを対象にしていたので、複製には
   届いておらず、半透明の帯の中に不透明の板が重なって見えていた
   （ユーザー指摘 2026-09-25「スマホのヘッダーが背景色がおかしい、以前の
   フロート調のデザインも残ってる」。390px で実測: 帯 rgba(244,244,246,.82) の上に
   不透明 rgb(244,244,246) の板が x=15 幅 360 角丸 20px）。
   1440px では購入がこの板を塗らないので、広い段と同じ姿に揃う。
   余白は購入のまま残す。中身の位置が変わらないようにするため。 */
@media (max-width: 1199px) {
  .sticky-header--cloned .main-header__inner {
    background-color: transparent;
    border-radius: 0;
  }
}

/* ナビの文字は即座に消す。購入はリンクに transition: all 500ms を掛けており
   （amoxi.css 3694-3704）、visibility は「途中の値はすべて見える」扱いなので、
   親を hidden にしても文字だけ 500ms 残って最後にパッと消えていた
   （ユーザー指摘 2026-09-25「ハンバーガーOpenしたときに、ヘッダーナビテキストが
   遅れて非表示になる、これが気持ち悪い、スッと消えてほしい」。実測: 親は 0ms で
   hidden、文字は 480ms まで見えたまま 520ms で消える）。
   移り変わりの対象を色だけに絞る。色の移り変わり（触れたときの変化）は残る。 */
body.locked .main-header__nav .main-menu__list > li > a,
body:has(.sidebar-three.active) .main-header__nav .main-menu__list > li > a {
  transition-property: color;
}

/* ナビの文字は本文と同じ濃さにする。購入の割り当ては明るい段の「地の文字」
   トークン（--amoxi-white = #1A1B1F）で、本文（--amoxi-text = #5C5955）より
   濃く、ヘッダーだけ強く出ていた（ユーザー指摘 2026-09-25「ヘッダーナビテキストの
   文字色が黒で強い、もうちょっと穏やかにしてほしい」）。
   いま見ている区画の印と、触れたときの色は購入の規則（詳細度が 1 つ上）が
   そのまま勝つので、下線代わりの色は変わらない。
   地 #F4F4F6 との明暗比は 15.7 対 1 から 6.3 対 1 へ。読みの下限 4.5 は上回る。 */
.main-header__nav .main-menu__list > li > a {
  color: var(--amoxi-text);
}

/* ヘッダーは最初から固定の床に置く。購入は原本が top: 25px の絶対配置、複製が
   top: 0 の固定で、入れ替わるたびに 25px ずれていた（ユーザー指摘 2026-09-24
   「配置がずれるのがきもい」「初期表示だとずれてしまうから。固定の床に
   合わせておけば問題ない」）。原本も複製と同じ床に合わせると、
   入れ替わりで動くものが無くなる。 */
.main-header:not(.sticky-header--cloned) {
  top: 0;
}

/* 開いている間だけ原本を床へ貼り付ける。常に固定にすると「画面から出た」判定が
   起きず、背景つきの複製が永久に出なくなる（2026-09-24 に実測。送った後も
   複製の濃さが 0 のままだった）。ユーザー指摘「下スクロール時は透過をやめて
   背景色つけてくれ」。 */
body.locked .main-header:not(.sticky-header--cloned) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

body:has(.sidebar-three.active) .main-header:not(.sticky-header--cloned) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

/* 開いている間、ヘッダーに残すのは開閉の釦だけにする。ロゴとナビはパネルの
   中身と重複する（ユーザー指摘「ハンバーガーメニューでは「めぐみ歯科」の
   表記不要」「Laptop側で、ハンバーガーメニューでヘッダーが表示され続けている
   不具合」）。面も持たせない。 */
/* 伏せるのはナビだけ。パネルの中身と重複するため。ロゴは出したままにする
   （ユーザー指示 2026-09-24「めぐみ歯科画像消すやつ、やっぱり表示させたままで
   いいや、消す動作のほうがノイズでした」）。パネル側の頭は使っていないので
   重複しない。場所は残したまま伏せる。display: none にすると箱が縮み、
   開いた瞬間に釦が 25px 上へ動いた（同日に実測）。 */
body.locked .main-header__nav {
  visibility: hidden;
}

body:has(.sidebar-three.active) .main-header__nav {
  visibility: hidden;
}

body.locked .main-header__inner,
body.locked .main-header__left {
  background-color: transparent;
}

body:has(.sidebar-three.active) .main-header__inner,
body:has(.sidebar-three.active) .main-header__left {
  background-color: transparent;
}

/* 開いている間は複製を出さない。原本 1 枚だけを面の上に置く。 */
body.locked .sticky-header--cloned {
  opacity: 0;
  pointer-events: none;
}

body:has(.sidebar-three.active) .sticky-header--cloned {
  opacity: 0;
  pointer-events: none;
}

/* 3 本の線が ✕ へ移る。線の間隔は 8px（実測）。 */
.sidebar-btn__toggler__line {
  transition: transform 200ms ease, opacity 200ms ease;
}

/* 印はbody.locked だけに頼らない。付く時期が遅れると印が変わらないことがある
   （ユーザー指摘「ハンバーガーアイコンが閉じるアイコンになるはずが、高確率で
   ならない」）。パネル自身の状態も見る。 */
body.locked .sidebar-btn__toggler__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

body:has(.sidebar-three.active) .sidebar-btn__toggler__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

body.locked .sidebar-btn__toggler__line:nth-child(2) {
  opacity: 0;
}

body:has(.sidebar-three.active) .sidebar-btn__toggler__line:nth-child(2) {
  opacity: 0;
}

body.locked .sidebar-btn__toggler__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

body:has(.sidebar-three.active) .sidebar-btn__toggler__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* パネルの頭を外したぶん、中身がヘッダーの下に潜らないよう余白を取る。 */
.sidebar-three__body {
  padding-top: 118px;
}

@media (max-width: 767px) {
  .sidebar-three__body {
    padding-top: 98px;
  }
}

/* ハンバーガーは面を持たない（ユーザー指示 2026-09-24「ブランドカラー背景色塗りを
   やめて、シンプルにしよう」）。仕切りの縦棒も出さない（同「ヘッダーナビの縦棒も不要」）。
   面が無くなるぶん、線は地に対して濃い前景にする。 */
.main-header .sidebar-btn__toggler {
  background-color: transparent;
}

.main-header .sidebar-btn__toggler::before {
  display: none;
}

.main-header .sidebar-btn__toggler__line {
  background-color: var(--amoxi-white);
}

@media (max-width: 767px) {
  /* ロゴは左端に寄せる。購入は面を持つ板の中に置いていたので内側に寄っていたが、
     板をやめた今は寄せる理由がない（ユーザー指摘 2026-09-24「もともとの
     レイアウトにひきづられている。制約なくなったいまは普通に左寄せでいいのでは？」）。 */
  .main-header__left {
    padding-left: 0;
  }

  /* ロゴ画像そのものに透明の余白が入っている（880px 中 64px。表示 214px で
     15.6px 相当。2026-09-24 に実測）。箱を左端に置いても、見えている絵は
     その分だけ内側に落ちる。絵の位置を箱に合わせる
     （ユーザー指示「ハンバーガーアイコンと調和取れる位置で、左に寄せてほしい」）。
     本来は画像の余白を落とすべきで、これは暫定の光学補正。 */
  .main-header__logo {
  }

  /* 複製は左右の余白を持たないので、原本と同じだけ与えて印の位置を揃える
     （実測: 閉 x=319 / 開 x=304 と 15px ずれていた）。広い段では原本も
     余白を持たないので、そちらは触らない。 */
  .sticky-header--cloned.main-header--three .main-header__inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 最初の画面だけは暗い写真の上に乗るので、線は白にする。 */
  .main-header:not(.sticky-header--cloned) .sidebar-btn__toggler__line {
    background-color: var(--amoxi-black4);
  }

  /* 開いている間は明るい面の上なので、濃い前景へ戻す。 */
  body.locked .main-header .sidebar-btn__toggler__line {
    background-color: var(--amoxi-white);
  }

  body:has(.sidebar-three.active) .main-header .sidebar-btn__toggler__line {
    background-color: var(--amoxi-white);
  }
}

/* 釦を抱く円弧は「地（.services-three__bg）の下端より下へ出た釦の部分」で描かれる。
   出る量は地の高さ指定そのもの。購入は段ごとに 113 / 90 / 50 / 30 / 0px とばらばらで、
   狭い段ほど円弧が潰れていた（2026-09-24 に実測）。全幅で同じ 213px にそろえる
   （ユーザー確認: PC はこの値で OK。スマホも同じにする）。 */
.services-three__bg {
  height: calc(100% - 213px);
}

@media (max-width: 1199px) {
  .services-three__bg {
    height: calc(100% - 213px);
  }
}

@media (max-width: 991px) {
  .services-three__bg {
    height: calc(100% - 213px);
  }
}

/* 狭い段は釦の輪（273px）の 3/5 ＝ 164px 出す（ユーザー指示 2026-09-24
   「半円だとゆるやか、3/5円くらいで」）。区画の下余白が 72px（広い段は 100px）で
   28px ずれるので、その分を引いた値にする。 */
@media (max-width: 767px) {
  .services-three__bg {
    height: calc(100% - 136px);
  }
}


/* HERO の下の継ぎ目だけ前に出す。部品の既定は背面（z-index: -1）で、それは
   「装飾は中身より前に出ない」という正しい既定。ここは HERO の写真の上へ弧を
   掛けるのが目的なので、意図して逸脱する（ユーザー指示 2026-09-25「写真にも
   掛けたい」「上下セクションの上にDividerが存在する必要がある」）。
   帯の上端は HERO の文字の最下端より 50px 下にあり、文字には掛からない（実測）。 */
.section-boundary[data-boundary="hero-to-hours"] {
  /* 部品の CSS はこの層より後に読まれるので、印を二つ重ねて詳細度で勝つ。 */
  z-index: 1;
  /* 帯そのものの地を透明にする。既定は上の区画の色を敷くが、区画の上へ重ねる
     この継ぎ目では、地が写真を覆って写真がそこで切れて見えた（ユーザー指摘
     「HEROセクションが隠れてない」）。 */
  background: transparent;
}

/* 数字だけの書体（ユーザー指示 2026-09-25「数字部分だけ縦長スタイリッシュなフォントを
   導入してください、エレガントで特徴的にして、高級感やスタイリッシュ感につなげたい」。
   書体の選定はユーザー決裁で Outfit）。
   Google Fonts から配信すると、その書体がラテン文字すべてに効いてしまい、英字まで
   変わる。数字だけに効かせるには、数字だけを含む部分集合を自前で持ち、unicode-range
   で範囲を絞るしかない。部分集合は 4.9KB。
   書体名は "QO Numerals"。Outfit そのものの名を使うと、他の経路で読み込まれた同名の
   書体と混ざる。
   ライセンス: SIL Open Font License 1.1（原文を同じ場所に outfit-OFL.txt として置いた）。 */
@font-face {
  font-family: "QO Numerals";
  font-style: normal;
  /* 数字だけ細くする。可変の重みをここで 1 つに定めると、周囲がどの重さを要求しても
     数字はこの値で出る（ユーザー指示 2026-09-25「数字の書体、重いのでboldはずして
     ください」「数字フォントって、もっとThinにできない？」。実際に 100/200/300 を描いて
     比べ、ユーザー決裁で 200）。ファイル自体は 100〜900 の軸を持っているので、
     値を変えれば他の太さも出せる。 */
  font-weight: 200;
  font-display: swap;
  src: url("/amoxi/fonts/outfit-numerals.woff2") format("woff2");
  unicode-range: U+0030-0039;
}