/* ===== Design tokens ===== */
:root {
  --color-primary: #333;
  --color-green: #339952;
  --color-bg-green: #f2fff6;
  --color-border-green: #caedd5;
  --color-white: #fff;
  --font-heading: 'Zen Maru Gothic', sans-serif;
  --font-tel: 'Dongle', sans-serif;
}

/* Uniform "whole artwork" scale factor.
   Figma has THREE independent, fixed reference designs: SP (375px),
   Tablet (1024px), PC (1440px). Each breakpoint's --scale tracks viewport
   width 1:1 against ITS OWN reference, floored/ceilinged at the adjacent
   breakpoint boundary so nothing scales past what Figma actually shows. */
@media (min-width: 1280px) {
  :root { --scale: clamp(0.8889, calc(100vw / 1440px), 1); }
}
@media (min-width: 600px) and (max-width: 1279px) {
  :root { --scale: clamp(0.5859, calc(100vw / 1024px), 1.25); }
}
@media (max-width: 599px) {
  :root { --scale: clamp(0.75, calc(100vw / 375px), 1.597); }
}

/* The header's full-nav layout (logo + nav + phone number in one row) only
   needs to fit in the 1025-1440px range (it switches to a hamburger below
   that), but that range doesn't line up with the --scale breakpoints above,
   so --scale can render close to its native 1440px size as early as 1025px
   and the row overflows/wraps. --header-scale tracks 1025-1440px on its own
   dedicated 0-to-1 curve so header text always shrinks enough to fit. */
@media (min-width: 1025px) {
  :root { --header-scale: clamp(0.9, calc(100vw / 1440px), 1); }
}

html, body {
  font-family: var(--font-heading);
  color: var(--color-primary);
  background: var(--color-white);
  font-weight: 500;
  overflow-x: hidden;
}
p {
  line-height: 1.6;
}
.txt_link {
  position: relative;
  color: var(--color-green);
  font-variation-settings: "wght" 400;

  transition:
    color .3s ease,
    font-variation-settings .4s ease;
}

.txt_link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #2a8144;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.txt_link:hover {
  color: #2a8144;
  font-variation-settings: "wght" 700;
}

.txt_link:hover::after {
  transform: scaleX(1);
}

.small { font-size: 0.875em; }

/* The whole page is treated as one artwork, but full-bleed section
   backgrounds/photos must still fill the viewport beyond 1440px — only the
   readable content inside each section caps out (each section's own
   __inner/__area wrapper carries its own max-width, e.g. .header__inner,
   .messeage__inner, .medical_services__area, .footer__cta-box). --scale
   itself already stops growing past 1440px via its clamp() ceiling, so
   capping .site-wrap's width too was double-capping and left the
   full-bleed backgrounds/photos with white bars past 1440px. */
.site-wrap { width: 100%; background: var(--color-white); overflow: hidden; }

/* ===== shared "heading" block (English label + Japanese title) ===== */
.heading { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.heading__en { color: var(--color-green); font-weight: 500; }
.heading__ja { color: var(--color-primary); font-weight: 500; }
.heading__deco { position: absolute; pointer-events: none; }

/* ===== shared "logo" block ===== */
.logo { display: flex; flex-direction: column; }
.logo__sub, .logo__main { font-weight: 700; }
.header__logo .logo__main { transition: color .2s ease; }
.header__logo:hover .logo__main { color: var(--color-green); }

/* ===== shared "tel" block ===== */
.tel { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.tel__number a { font-family: var(--font-tel); color: var(--color-green); line-height: 1; transition: color .2s ease; }
.tel__number a:hover { color: #2a8144; }
/* Dongle's ascent/descent metrics aren't symmetric around the digits' own
   ink, so trimming the box with line-height/margin math (font-metric-based)
   never lands the glyph exactly centered. Instead, .tel__number is given a
   real, deliberately-small height and centers its content with flexbox:
   that guarantees the glyph overflows equally above and below by
   construction, independent of the font's internal metrics. */
.tel__number { height: 0.39em; display: flex; align-items: center; overflow: visible; transform: translateY(2px); }

/* ===== shared bullet list (small green square marker) ===== */
.bullet-list li { position: relative; color: var(--color-primary); font-weight: 500; }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--color-green); border-radius: 2px; }

/* ===== shared bullet-circle heading (○ marker + title, used inside content blocks) ===== */
.bullet-heading { display: flex; align-items: center; color: var(--color-green); font-weight: 700; }
.bullet-heading img { flex-shrink: 0; }

@media (min-width: 1280px) {
  .heading__en { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); line-height: min(32px, calc(var(--scale) * 32px)); letter-spacing: .1em; }
  .heading__ja { font-size: clamp(22px, calc(var(--scale) * 32px), 32px); line-height: min(32px, calc(var(--scale) * 32px)); letter-spacing: .1em; margin-top: min(10px, calc(var(--scale) * 10px)); }
  .bullet-list { gap: min(12px, calc(var(--scale) * 12px)); display: flex; flex-direction: column; }
  .bullet-list li { padding-left: min(20px, calc(var(--scale) * 20px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.6; letter-spacing: .1em; text-align: justify; }
  .bullet-heading { gap: min(8px, calc(var(--scale) * 8px)); min-height: min(44px, calc(var(--scale) * 44px)); font-size: clamp(16px, calc(var(--scale) * 19px), 19px); letter-spacing: .1em; }
  .bullet-heading img { width: min(16px, calc(var(--scale) * 16px)); height: min(16px, calc(var(--scale) * 16px)); transform: translateY(1px); }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .heading__en { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); line-height: min(32px, calc(var(--scale) * 32px)); letter-spacing: .1em; }
  .heading__ja { font-size: clamp(22px, calc(var(--scale) * 32px), 32px); line-height: min(32px, calc(var(--scale) * 32px)); letter-spacing: .1em; margin-top: min(10px, calc(var(--scale) * 10px)); }
  .bullet-list { gap: min(12px, calc(var(--scale) * 12px)); display: flex; flex-direction: column; }
  .bullet-list li { padding-left: min(20px, calc(var(--scale) * 20px)); font-size: clamp(14px, calc(var(--scale) * 16px), 16px); line-height: 1.6; letter-spacing: .1em; text-align: justify; }
  .bullet-heading { gap: min(8px, calc(var(--scale) * 8px)); min-height: min(44px, calc(var(--scale) * 44px)); font-size: clamp(16px, calc(var(--scale) * 19px), 19px); letter-spacing: .1em; }
  .bullet-heading img { width: min(16px, calc(var(--scale) * 16px)); height: min(16px, calc(var(--scale) * 16px)); transform: translateY(1px); }
}
@media (max-width: 599px) {
  .heading__en { font-size: clamp(12px, calc(var(--scale) * 14px), 14px); line-height: min(32px, calc(var(--scale) * 32px)); letter-spacing: .1em; }
  .heading__ja { font-size: clamp(18px, calc(var(--scale) * 22px), 22px); line-height: min(24px, calc(var(--scale) * 24px)); letter-spacing: .1em; margin-top: min(0px, calc(var(--scale) * 0px)); }
  .bullet-list { gap: min(10px, calc(var(--scale) * 10px)); display: flex; flex-direction: column; }
  .bullet-list li { padding-left: min(20px, calc(var(--scale) * 20px)); font-size: clamp(13px, calc(var(--scale) * 16px), 16px); line-height: 1.6; letter-spacing: .1em; text-align: justify; }
  .bullet-heading { gap: min(8px, calc(var(--scale) * 8px)); min-height: min(44px, calc(var(--scale) * 44px)); font-size: clamp(15px, calc(var(--scale) * 19px), 19px); letter-spacing: .1em; }
  .bullet-heading img { width: min(16px, calc(var(--scale) * 16px)); height: min(16px, calc(var(--scale) * 16px)); transform: translateY(1px); }
}

/* ===== shared button ===== */
.btn {
  background: var(--color-green);
  color: var(--color-white);
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  display: block;
  width: 100%;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn:hover {
  background: #2a8144;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(51, 153, 82, .3);
}

/* =========================================================
   Header
   ========================================================= */
.header { background: var(--color-white); position: relative; z-index: 20; }
.header__inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.header__nav-area { display: flex; align-items: center; }
.header__nav { display: flex; align-items: center; }
.header__nav-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.header__nav-item .header__nav-label { transition: color .2s ease; }
.header__nav-item:hover .header__nav-label { color: var(--color-green); }
.header__nav-icon { display: flex; align-items: center; justify-content: center; }
.header__nav-icon img { width: 100%; height: 100%; object-fit: contain; }
.header__nav-divider { display: block; background: var(--color-primary); opacity: .25; }

/* Hover dropdown on the 診療科目 nav item, listing the medical-services
   sub-pages (vaccine schedules). Only relevant where the full nav is
   shown (>=1025px); harmless if left in the DOM at narrower widths since
   .header__nav-area itself is hidden there. */
.header__nav-item-wrap { position: relative; }
.header__nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--color-white);
  border: 1px solid var(--color-border-green);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  padding: 8px;
  width: max-content;
  max-width: 320px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 30;
}
.header__nav-item-wrap:hover .header__nav-dropdown,
.header__nav-item-wrap:focus-within .header__nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.header__nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-align: left;
  line-height: 1.4;
  letter-spacing: .05em;
  transition: background-color .2s ease, color .2s ease;
}
.header__nav-dropdown a:hover { background: var(--color-bg-green); color: var(--color-green); }
@media (prefers-reduced-motion: reduce) {
  .header__nav-dropdown { transition: none; }
}
.header__hamburger { display: none; }

@media (min-width: 1280px) {
  .header__inner { height: min(140px, calc(var(--scale) * 140px)); padding: min(15px, calc(var(--scale) * 15px)) min(40px, calc(var(--scale) * 40px)) min(12px, calc(var(--scale) * 12px)); }
  .header__logo { display: flex; flex-direction: column; gap: min(4px, calc(var(--scale) * 4px)); }
  .logo__sub { font-size: clamp(11px, calc(var(--scale) * 13px), 13px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; letter-spacing: .1em; }
  .logo__main { font-size: clamp(20px, calc(var(--scale) * 29.5px), 29.5px); line-height: 1.4576; letter-spacing: .05em; }
  .header__nav-area { gap: min(20px, calc(var(--scale) * 20px)); align-self: stretch; }
  .header__nav { gap: min(20px, calc(var(--scale) * 20px)); }
  .header__nav-item { gap: min(10px, calc(var(--scale) * 10px)); }
  .header__nav-icon { height: min(60px, calc(var(--scale) * 60px)); width: min(50px, calc(var(--scale) * 50px)); }
  .header__nav-label { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; font-weight: 700; letter-spacing: .1em; }
  .header__nav-divider { width: 1px; height: min(90px, calc(var(--scale) * 90px)); }
  .header__tel .tel__note { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1.4; letter-spacing: .1em; max-width: 100%; color: var(--color-green); font-weight: 600; }
  .header__tel .tel__number { font-size: 48px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
  .header__tel .tel__hours { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1.2; text-align: center; font-weight: 500; letter-spacing: .13em; }
  .header__tel { gap: 12px; align-items: center; text-align: left; }
  .sp-nav, .sp-fixed-banner { display: none !important; }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .header__inner { height: min(140px, calc(var(--scale) * 140px)); padding: min(15px, calc(var(--scale) * 15px)) min(40px, calc(var(--scale) * 40px)) min(12px, calc(var(--scale) * 12px)); }
  .header__logo { display: flex; flex-direction: column; gap: min(4px, calc(var(--scale) * 4px)); }
  .logo__sub { font-size: clamp(11px, calc(var(--scale) * 13px), 13px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; letter-spacing: .1em; }
  .logo__main { font-size: clamp(20px, calc(var(--scale) * 29.5px), 29.5px); line-height: 1.4576; letter-spacing: .05em; }
  .header__nav-area { gap: min(20px, calc(var(--scale) * 20px)); align-self: stretch; }
  .header__nav { gap: min(20px, calc(var(--scale) * 20px)); }
  .header__nav-item { gap: min(10px, calc(var(--scale) * 10px)); }
  .header__nav-icon { height: min(60px, calc(var(--scale) * 60px)); width: min(50px, calc(var(--scale) * 50px)); }
  .header__nav-label { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; font-weight: 700; letter-spacing: .1em; }
  .header__nav-divider { width: 1px; height: min(90px, calc(var(--scale) * 90px)); }
  .header__tel .tel__note { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1.4; letter-spacing: .1em; max-width: 100%; color: var(--color-green); font-weight: 600; }
  .header__tel .tel__number { font-size: 48px; line-height: 1; letter-spacing: 0; white-space: nowrap; }
  .header__tel .tel__hours { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1.2; text-align: center; font-weight: 500; letter-spacing: .13em; }
  .header__tel { gap: 12px; align-items: center; text-align: left; }
  .sp-fixed-banner { display: none !important; }
}

/* Header-only fluid sizing for the 1025-1440px full-nav range, using
   --header-scale instead of --scale (see its definition above) so the
   logo/nav/phone-number row shrinks enough to never wrap in that range. */
@media (min-width: 1025px) {
  .header__inner { height: min(140px, calc(var(--header-scale) * 140px)); padding: min(15px, calc(var(--header-scale) * 15px)) min(40px, calc(var(--header-scale) * 40px)) min(12px, calc(var(--header-scale) * 12px)); }
  .header__logo { gap: min(4px, calc(var(--header-scale) * 4px)); }
  .logo__sub { font-size: clamp(11px, calc(var(--header-scale) * 13px), 13px); white-space: nowrap; }
  .logo__main { font-size: clamp(20px, calc(var(--header-scale) * 29.5px), 29.5px); white-space: nowrap; }
  .header__nav-area { gap: min(20px, calc(var(--header-scale) * 20px)); }
  .header__nav { gap: min(20px, calc(var(--header-scale) * 20px)); }
  .header__nav-item { gap: min(10px, calc(var(--header-scale) * 10px)); }
  .header__nav-icon { height: min(60px, calc(var(--header-scale) * 60px)); width: min(50px, calc(var(--header-scale) * 50px)); }
  .header__nav-label { font-size: clamp(13px, calc(var(--header-scale) * 16px), 16px); white-space: nowrap; }
  .header__nav-divider { height: min(90px, calc(var(--header-scale) * 90px)); }
  .header__tel .tel__note { font-size: clamp(11px, calc(var(--header-scale) * 14px), 14px); white-space: nowrap; }
  .header__tel .tel__number { font-size: clamp(20px, calc(var(--header-scale) * 48px), 48px); white-space: nowrap; }
  .header__tel .tel__hours { font-size: clamp(11px, calc(var(--header-scale) * 14px), 14px); line-height: 1.2; text-align: center; }
  .header__tel { gap: min(12px, calc(var(--header-scale) * 12px)); }
}

@media (max-width: 599px) {
  .header__inner { padding: min(20px, calc(var(--scale) * 20px)); }
  .header__logo { display: flex; align-items: center; gap: min(4px, calc(var(--scale) * 4px)); }
  .logo__sub { font-size: clamp(9px, calc(var(--scale) * 11px), 11px); }
  .logo__main { font-size: clamp(15px, calc(var(--scale) * 20px), 20px); letter-spacing: .05em; }
  .header__hamburger img { width: 100%; height: 100%; }
}

/* The header's full nav + phone number needs more horizontal room than the
   tablet body layout does, so it switches to the hamburger menu at a wider
   threshold (1024px) than the tablet/PC design breakpoint (1280px). This is
   independent of the SP/Tablet/PC --scale breakpoints above. */
@media (max-width: 1024px) {
  .header__nav-area { display: none !important; }
  .header__hamburger { display: block !important; width: min(24px, calc(var(--scale) * 24px)); height: min(16px, calc(var(--scale) * 16px)); }
  .sp-fixed-banner { display: flex !important; }
}
@media (min-width: 1025px) {
  .header__nav-area { display: flex !important; }
  .header__hamburger { display: none !important; }
  .sp-nav, .sp-fixed-banner { display: none !important; }
}

/* =========================================================
   SP navigation drawer
   ========================================================= */
.sp-nav { position: fixed; inset: 0; z-index: 100; }
.sp-nav[hidden] { display: none; }
.sp-nav__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); opacity: 0; transition: opacity .3s ease; }
.sp-nav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw; background: var(--color-white); overflow-y: auto; display: flex; flex-direction: column; padding: 20px 26px; gap: 20px; transform: translateX(100%); transition: transform .3s ease; }
.sp-nav.is-open .sp-nav__overlay { opacity: 1; }
.sp-nav.is-open .sp-nav__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .sp-nav__overlay, .sp-nav__panel { transition: none; }
}
.sp-nav__head { display: flex; align-items: center; justify-content: space-between; }
.sp-nav__logo { font-weight: 700; font-size: 20px; letter-spacing: .05em; }
.sp-nav__close img { width: 19px; }
.sp-nav__list { display: flex; flex-wrap: wrap; border-top: 1px solid var(--color-border-green); }
.sp-nav__list > a { display: flex; align-items: center; justify-content: center; text-align: center; width: 50%; padding: 16px 10px; font-weight: 700; font-size: 18px; letter-spacing: .1em; border-bottom: 1px solid var(--color-border-green); transition: background-color .2s ease, color .2s ease; }
.sp-nav__list > a:hover { background: var(--color-bg-green); color: var(--color-green); }
.sp-nav__list > a.sp-nav__col-right { border-left: 1px solid var(--color-border-green); }
.sp-nav__sublink { width: 100% !important; font-weight: 500 !important; font-size: 16px !important; letter-spacing: .1em; border-bottom: 1px dashed #e2e2e2 !important; border-right: none !important; justify-content: flex-start !important; text-align: left; }
.sp-nav__tel .tel__note { font-size: 11px; line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; letter-spacing: .05em; }
.sp-nav__tel .tel__number { font-size: 44px; line-height: 1; letter-spacing: .02em; }
.sp-nav__tel .tel__hours { font-size: 11px; line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; letter-spacing: .1em; }
.sp-nav__tel { gap: 16px; margin-top: 10px; }

/* =========================================================
   SP fixed footer banner (CTA)
   ========================================================= */
.sp-fixed-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--color-white);
  border-top: 1px solid var(--color-border-green);
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 10px 20px;
}
.sp-fixed-banner__icon { width: 30px; flex-shrink: 0; }
.sp-fixed-banner .tel__note { font-size: 10px; line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; letter-spacing: .05em; color: var(--color-green); }
.sp-fixed-banner .tel__number { font-size: 33px; line-height: 1; letter-spacing: .02em; transform: translateY(4px); }
.sp-fixed-banner .tel__hours { font-size: 10px; line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; letter-spacing: .1em; }
.sp-fixed-banner .tel { gap: 7px; min-width: 0; }
.sp-fixed-banner .tel__note, .sp-fixed-banner .tel__hours { max-width: 100%; }

/* =========================================================
   footer
   ========================================================= */
.footer { background: var(--color-white); }
.footer__access { background: var(--color-bg-green); display: flex; justify-content: center; }
.footer__access-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.footer__access-content { display: flex; flex-direction: column; align-items: center; width: 100%; }
.footer__map { width: 100%; max-width: 800px; aspect-ratio: 1424 / 771; border-radius: 12px; overflow: hidden; }
.footer__map img { width: 100%; height: 100%; object-fit: cover; }
.footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.footer__info { background: var(--color-white); border-radius: 20px; width: 100%; max-width: 800px; display: flex; flex-direction: column; }
.footer__info > div { display: flex; }
.footer__info-label { color: var(--color-green); flex-shrink: 0; }
.footer__info p { font-weight: 500; line-height: min(32px, calc(var(--scale) * 32px)); }

/* Continuous auto-scrolling photo strip (marquee): .footer__photos is the
   overflow-hidden viewport, .footer__photos__track holds the 6 photos plus
   an identical decorative copy of them back-to-back, and is animated from
   translateX(0) to translateX(-50%) — since both halves are identical, the
   loop point is seamless regardless of the track's actual pixel width. */
.footer__photos { width: 100%; overflow: hidden; }
.footer__photos__track { display: flex; width: max-content; animation: footer-photos-scroll 36s linear infinite; }
.footer__photos:hover .footer__photos__track,
.footer__photos:focus-within .footer__photos__track { animation-play-state: paused; }
.footer__photos__track img { flex-shrink: 0; display: block; object-fit: cover; }
@keyframes footer-photos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .footer__photos__track { animation: none; }
}

.footer__cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.footer__cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.footer__cta-box { position: relative; z-index: 1; background: var(--color-white); border-radius: 20px; width: auto; display: flex; flex-direction: column; align-items: center; }
.footer__cta-top { display: flex; width: 100%; }
.footer__cta-addr { font-weight: 500; }
.footer__cta-nav { display: flex; flex-wrap: wrap; align-items: center; width: 100%; justify-content: space-between; }
.footer__cta-nav a { font-weight: 700; color: var(--color-primary); transition: color .2s ease; }
.footer__cta-nav a:hover { color: var(--color-green); }
.footer__cta-divider { display: block; flex-shrink: 0; width: 1px; background: var(--color-primary); opacity: .25; }
.footer__copyright { position: absolute; z-index: 1; font-weight: 500; text-align: center; left: 50%; transform: translateX(-50%); }

@media (min-width: 1280px) {
  .footer__access-inner { max-width: 1440px; padding: min(100px, calc(var(--scale) * 100px)) 20px; gap: min(60px, calc(var(--scale) * 60px)); }
  .footer__access-content { gap: min(30px, calc(var(--scale) * 30px)); }
  .footer__heading { gap: 0; }
  .footer__heading .heading__deco--firstaid { width: min(40px, calc(var(--scale) * 40px)); height: min(37px, calc(var(--scale) * 37px)); left: clamp(-64px, calc(var(--scale) * -64px), -44px); top: clamp(12px, calc(var(--scale) * 18px), 18px); transform: rotate(-15deg); }
  .footer__heading .heading__deco--cup { width: min(24px, calc(var(--scale) * 24px)); height: min(41px, calc(var(--scale) * 41px)); left: clamp(112px, calc(var(--scale) * 163px), 163px); top: clamp(11px, calc(var(--scale) * 16px), 16px); transform: rotate(15deg); }
  .footer__info { padding: min(40px, calc(var(--scale) * 40px)) min(60px, calc(var(--scale) * 60px)); gap: 0; font-size: clamp(14px, calc(var(--scale) * 16px), 16px); }
  .footer__info > div { gap: min(20px, calc(var(--scale) * 20px)); }
  .footer__photos__track { gap: calc(var(--scale) * 16px); }
  .footer__photos__track img { width: min(400px, calc(var(--scale) * 400px)); height: min(300px, calc(var(--scale) * 300px)); }
  .footer__cta { height: min(500px, calc(var(--scale) * 500px)); padding: min(95px, calc(var(--scale) * 95px)) min(274px, calc(var(--scale) * 274px)); gap: min(61px, calc(var(--scale) * 61px)); }
  .footer__cta-box { min-width: min(800px, 100%); padding: min(60px, calc(var(--scale) * 60px)); gap: min(40px, calc(var(--scale) * 40px)); }
  .footer__copyright { bottom: calc(var(--scale) * 72px); font-size: clamp(11px, calc(var(--scale) * 12px), 12px); }
  .footer__cta-top { justify-content: space-between; align-items: flex-start; }
  .footer__cta-logo { gap: min(4px, calc(var(--scale) * 4px)); }
  .footer__cta-logo .logo__sub { font-size: clamp(11px, calc(var(--scale) * 13px), 13px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  .footer__cta-logo .logo__main { font-size: clamp(20px, calc(var(--scale) * 29.5px), 29.5px); line-height: 1.4576; }
  .footer__cta-addr { font-size: clamp(12px, calc(var(--scale) * 14px), 14px); margin-top: min(8px, calc(var(--scale) * 8px)); }
  .footer__cta-top .tel { gap: 12px; align-items: center; text-align: left; }
  .footer__cta-top .tel__note { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1.4; letter-spacing: .1em; max-width: 100%; color: var(--color-green); font-weight: 600; }
  .footer__cta-top .tel__number { font-size: clamp(40px, calc(var(--scale) * 48px), 48px); line-height: 1; letter-spacing: 0; }
  .footer__cta-top .tel__hours { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; font-weight: 500; letter-spacing: .13em; }
  .footer__cta-nav a { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); }
  .footer__cta-divider { height: min(11px, calc(var(--scale) * 11px)); }
}
@media (min-width: 600px) and (max-width: 1279px) {
  .footer__access-inner { max-width: 1440px; padding: min(100px, calc(var(--scale) * 100px)) 20px; gap: min(60px, calc(var(--scale) * 60px)); }
  .footer__access-content { gap: min(30px, calc(var(--scale) * 30px)); }
  .footer__heading { gap: 0; }
  .footer__heading .heading__deco--firstaid { width: min(40px, calc(var(--scale) * 40px)); height: min(37px, calc(var(--scale) * 37px)); left: clamp(-64px, calc(var(--scale) * -64px), -44px); top: clamp(12px, calc(var(--scale) * 18px), 18px); transform: rotate(-15deg); }
  .footer__heading .heading__deco--cup { width: min(24px, calc(var(--scale) * 24px)); height: min(41px, calc(var(--scale) * 41px)); left: clamp(112px, calc(var(--scale) * 163px), 163px); top: clamp(11px, calc(var(--scale) * 16px), 16px); transform: rotate(15deg); }
  .footer__info { padding: min(40px, calc(var(--scale) * 40px)) min(60px, calc(var(--scale) * 60px)); gap: 0; font-size: clamp(14px, calc(var(--scale) * 16px), 16px); }
  .footer__info > div { gap: min(20px, calc(var(--scale) * 20px)); }
  .footer__photos__track { gap: calc(var(--scale) * 16px); }
  .footer__photos__track img { width: min(400px, calc(var(--scale) * 400px)); height: min(300px, calc(var(--scale) * 300px)); }
  .footer__cta { min-height: calc(var(--scale) * 500px); height: auto; padding: min(60px, calc(var(--scale) * 60px)) 40px; gap: min(30px, calc(var(--scale) * 30px)); }
  .footer__cta-box { width: 100%; max-width: 800px; min-width: 0; padding: min(60px, calc(var(--scale) * 60px)); gap: min(40px, calc(var(--scale) * 40px)); }
  .footer__copyright { position: static; margin-top: min(20px, calc(var(--scale) * 20px)); left: auto; transform: none; font-size: clamp(11px, calc(var(--scale) * 12px), 12px); }
  .footer__cta-top { justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: min(30px, calc(var(--scale) * 30px)); }
  .footer__cta-logo { gap: min(4px, calc(var(--scale) * 4px)); }
  .footer__cta-logo .logo__sub { font-size: clamp(11px, calc(var(--scale) * 13px), 13px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  .footer__cta-logo .logo__main { font-size: clamp(20px, calc(var(--scale) * 29.5px), 29.5px); line-height: 1.4576; }
  .footer__cta-addr { font-size: clamp(12px, calc(var(--scale) * 14px), 14px); margin-top: min(8px, calc(var(--scale) * 8px)); }
  .footer__cta-top .tel { gap: 12px; align-items: center; text-align: left; }
  .footer__cta-top .tel__note { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1.4; letter-spacing: .1em; max-width: 100%; color: var(--color-green); font-weight: 600; }
  .footer__cta-top .tel__number { font-size: clamp(40px, calc(var(--scale) * 48px), 48px); line-height: 1; letter-spacing: 0; }
  .footer__cta-top .tel__hours { font-size: clamp(11px, calc(var(--scale) * 14px), 14px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; font-weight: 500; letter-spacing: .13em; }
  .footer__cta-nav a { font-size: clamp(13px, calc(var(--scale) * 16px), 16px); }
  .footer__cta-divider { height: min(11px, calc(var(--scale) * 11px)); }
}
@media (max-width: 599px) {
  .footer__access-inner { padding: min(60px, calc(var(--scale) * 60px)) 20px; gap: min(30px, calc(var(--scale) * 30px)); }
  .footer__access-content { gap: min(30px, calc(var(--scale) * 30px)); }
  .footer__heading { gap: 0; }
  .footer__heading .heading__deco--firstaid { width: min(34px, calc(var(--scale) * 34px)); height: min(32px, calc(var(--scale) * 32px)); left: clamp(-47px, calc(var(--scale) * -47px), -38px); top: clamp(11px, calc(var(--scale) * 13px), 13px); transform: rotate(-15deg); }
  .footer__heading .heading__deco--cup { width: min(20px, calc(var(--scale) * 20px)); height: min(35px, calc(var(--scale) * 35px)); left: clamp(97px, calc(var(--scale) * 118px), 118px); top: clamp(22px, calc(var(--scale) * 27px), 27px); transform: rotate(15deg); }
  .footer__info { padding: min(40px, calc(var(--scale) * 40px)) 20px; gap: 0; font-size: clamp(13px, calc(var(--scale) * 16px), 16px); }
  .footer__info > div { flex-direction: column; gap: 0; }
  .footer__info-label { font-weight: 700; }
  .footer__photos__track { gap: min(10px, calc(var(--scale) * 10px)); }
  .footer__photos__track img { width: min(220px, calc(var(--scale) * 220px)); height: min(135px, calc(var(--scale) * 135px)); }
  .footer__cta { padding: min(40px, calc(var(--scale) * 40px)) 20px; gap: min(20px, calc(var(--scale) * 20px)); }
  .footer__cta-box { padding: min(30px, calc(var(--scale) * 30px)) 20px min(20px, calc(var(--scale) * 20px)); gap: min(12px, calc(var(--scale) * 12px)); }
  .footer__cta-top { flex-direction: column; align-items: center; text-align: center; }
  .footer__cta-logo { align-items: center; gap: min(4px, calc(var(--scale) * 4px)); }
  .footer__cta-logo .logo__sub { font-size: clamp(11px, calc(var(--scale) * 13px), 13px); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  .footer__cta-logo .logo__main { font-size: clamp(20px, calc(var(--scale) * 29.5px), 29.5px); line-height: 1.4576; }
  .footer__cta-addr { font-size: clamp(12px, calc(var(--scale) * 14px), 14px); margin-top: min(8px, calc(var(--scale) * 8px)); }
  .footer__cta-nav { display: none; }
  .footer__cta-top .tel { display: none; }
  .footer__copyright { position: static; margin-top: min(20px, calc(var(--scale) * 20px)); left: auto; transform: none; font-size: clamp(10px, calc(var(--scale) * 12px), 12px); }
  body { padding-bottom: 66px; }
}

/* =========================================================
   Back to top button
   ========================================================= */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--color-green);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .25s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #2a8144; }
.back-to-top svg { display: block; }

/* Sit above the fixed phone-call banner while it's shown (<=1024px). */
@media (max-width: 1024px) {
  .back-to-top { bottom: 82px; }
}

/* =========================================================
   Scroll reveal (each top-level <section> fades/slides up into
   view as the page is scrolled; js/scroll-reveal.js adds
   .is-revealed when a section enters the viewport)
   ========================================================= */
main > section.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
main > section.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}