/* =================================================================
   阿部接骨院 — Site styles
   Design intent: 1画面1メッセージ / 余白 / 写真主役 / 上品な動き / スマホ最優先
   信頼感・本物感・現場感 を優先（高級感より）
   ================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand blue — matches the real cobalt sign & blue training mat. Clean, honest. */
  --paper:      #f4f6f8;   /* base background (clean cool off-white) */
  --paper-2:    #e9edf1;   /* alt section background */
  --ink:        #14202c;   /* primary text (cool near-black) */
  --ink-soft:   #46535f;   /* secondary text */
  --ink-mute:   #8a9099;   /* tertiary / captions */
  --line:       #dbe0e6;   /* hairlines */
  --field:      #1a4f9c;   /* brand royal blue (logo / sign) — trust accent */
  --field-2:    #0e2744;   /* darker navy for dark sections */
  --accent:     #f3c41a;   /* brand yellow (the "部" accent) — use sparingly */
  --gold:       #c8a34e;   /* restrained gold (legacy) */
  --line-green: #06c755;   /* LINE brand */
  --line-green-d:#05a648;

  --maxw: 1160px;
  --gut: clamp(20px, 5vw, 64px);

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* apple-ish ease-out */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.5; }
p { margin: 0; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.container--narrow { max-width: 760px; }
.section { padding-block: clamp(80px, 14vh, 160px); position: relative; }
.section--alt { background: var(--paper-2); }
.sp-only { display: none; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: 0s;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 0.95em 2em;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background-color 0.3s var(--ease);
  cursor: pointer;
  border: none;
}
.btn--line { background: var(--line-green); color: #fff; box-shadow: 0 8px 24px rgba(6,199,85,0.28); }
.btn--line:hover { background: var(--line-green-d); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(6,199,85,0.34); }
.btn--sm { padding: 0.6em 1.3em; font-size: 0.82rem; }
.btn--lg { padding: 1.05em 2.4em; font-size: 1.02rem; }
.btn__icon {
  width: 1.15em; height: 1.15em; flex: none;
  background: #fff;
  -webkit-mask: var(--line-icon) center/contain no-repeat;
  mask: var(--line-icon) center/contain no-repeat;
}
:root {
  --line-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 5.69 2 10.23c0 4.07 3.56 7.48 8.37 8.13.33.07.78.22.89.5.1.26.07.66.03.92l-.14.86c-.04.26-.2 1.01.89.55s5.86-3.45 8-5.91c1.48-1.62 2.19-3.27 2.19-5.1C22.25 5.69 17.52 2 12 2z'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gut);
  padding-block-start: max(14px, env(safe-area-inset-top));
  transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.site-header.is-solid {
  background: rgba(246,244,239,0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.site-header.is-hidden { transform: translateY(-110%); }
.site-header__logo { display: inline-flex; align-items: center; gap: 0.55em; }
.logo-mark {
  display: grid; place-items: center;
  width: 2em; height: 2em;
  font-family: var(--serif); font-weight: 500;
  background: var(--field); color: #fff;
  border-radius: 7px;
  font-size: 1.05rem;
}
.logo-text {
  font-family: var(--serif);
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.hero .logo-text, .hero ~ * { } /* placeholder */

/* Header text color over hero (transparent state) */
.site-header:not(.is-solid) .logo-text { color: #fff; }
.site-header:not(.is-solid) .logo-mark { background: rgba(255,255,255,0.18); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  isolation: isolate; /* スタッキングコンテキスト化：z-index:-1の写真が背景色の裏に隠れないように */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(15,20,25,0.55) 0%, rgba(15,20,25,0.25) 35%, rgba(15,20,25,0.55) 100%);
}
.hero__inner { padding-inline: var(--gut); max-width: var(--maxw); margin-inline: auto; width: 100%; }
.hero__lead {
  font-size: clamp(0.85rem, 3.4vw, 1.05rem);
  letter-spacing: 0.18em;
  opacity: 0.92;
  margin-block-end: 1.4em;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 11vw, 5.6rem);
  line-height: 1.32;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.25);
}
.hero__list {
  margin-block: 1.8em 2.6em;
  font-size: clamp(1rem, 4.4vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 2;
  opacity: 0.95;
}
.hero__cta { }
.hero__scroll {
  position: absolute;
  inset-block-end: max(22px, env(safe-area-inset-bottom));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 1px; height: 56px;
  overflow: hidden;
}
.hero__scroll-line {
  display: block; width: 1px; height: 100%;
  background: rgba(255,255,255,0.6);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  60%,100% { transform: translateY(100%); }
}

/* ---------- Section heads ---------- */
.section__head { margin-block-end: clamp(40px, 7vw, 72px); }
.section__index {
  display: inline-flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  margin-block-end: 1em;
}
.section__index::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--accent);
  margin-inline-end: 0.9em;
}
.section__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 6.6vw, 3rem);
  line-height: 1.45;
  letter-spacing: 0.05em;
}
.section__title--xl { font-size: clamp(2.4rem, 12vw, 4.6rem); }
.section__sub {
  margin-block-start: 1.1em;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 3.6vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* ---------- Horizontal scroll cards ---------- */
.hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hscroll__track {
  display: flex;
  gap: clamp(14px, 2.4vw, 26px);
  padding-inline: var(--gut);
  padding-block: 6px 10px;
  width: max-content;
}
.hscroll__hint {
  text-align: center;
  margin-block-start: 22px;
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  color: var(--ink-mute);
}

/* Problem cards (S1) */
.hcard {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(238px, 70vw, 286px);
  min-height: clamp(272px, 80vw, 300px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 6vw, 32px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(14px, 3.2vw, 20px);
  box-shadow: 0 14px 40px rgba(28,33,39,0.05);
}
.hcard__no {
  font-family: var(--serif);
  color: var(--field);
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
.hcard__no::after {
  content: "";
  display: block;
  width: 26px; height: 2px;
  margin-block-start: 0.6em;
  background: var(--gold);
  border-radius: 2px;
}
.hcard__icon { display: grid; place-items: center; color: var(--field-2); }
.hcard__icon svg { width: clamp(60px, 17vw, 78px); height: auto; }
.hcard__text {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 4.6vw, 1.34rem);
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: center;
}

/* お悩みカードは「2枚ずつ＋3枚目チラ見せ」 */
.section--worry .hscroll { scroll-padding-inline: var(--gut); }
.section--worry .hcard {
  width: clamp(150px, 41vw, 220px);
  min-height: clamp(220px, 60vw, 270px);
  padding: clamp(18px, 4.6vw, 28px);
  scroll-snap-align: start;
}
.section--worry .hcard__text { font-size: clamp(1rem, 4.2vw, 1.28rem); word-break: keep-all; }
.section--worry .hcard__icon svg { width: clamp(52px, 15vw, 72px); }

/* Device cards (S7) */
.dcard {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(230px, 66vw, 320px);
  min-height: clamp(220px, 42vw, 280px);
  background: var(--field);
  color: #fff;
  border-radius: 18px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7em;
}
.dcard__name {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 5.6vw, 1.85rem);
  letter-spacing: 0.05em;
}
.dcard__desc { font-size: 0.92rem; font-weight: 300; opacity: 0.82; letter-spacing: 0.06em; }

/* Case cards (S8) */
.ccard {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(180px, 52vw, 240px);
  min-height: clamp(200px, 40vw, 250px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.ccard__tag {
  align-self: flex-start;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--field);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35em 0.9em;
}
.ccard__name {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 5.4vw, 1.7rem);
  letter-spacing: 0.04em;
}

/* ---------- Statement sections (S2, S5, S6) ---------- */
.section--statement { text-align: center; }
.statement__kicker {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  margin-block-end: clamp(36px, 7vw, 64px);
}
.statement__lines { display: flex; flex-direction: column; gap: clamp(28px, 6vw, 52px); }
.statement__line {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 8.4vw, 3.4rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.statement__lines--sm .statement__line { font-size: clamp(1.5rem, 6.6vw, 2.6rem); }
.statement__foot {
  margin-block-start: clamp(40px, 8vw, 72px);
  color: var(--ink-soft);
  font-size: clamp(1rem, 4vw, 1.2rem);
  letter-spacing: 0.1em;
}
.section--dark { background: var(--field-2); color: #fff; }
.section--dark .statement__kicker { color: rgba(255,255,255,0.7); }

/* ---------- Split sections (S3, S4) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 6vw, 64px);
  align-items: center;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.feature { padding-block: 1.4em; border-block-end: 1px solid var(--line); }
.feature:first-child { padding-block-start: 0; }
.feature__title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 5.4vw, 1.7rem);
  letter-spacing: 0.05em;
  margin-block-end: 0.5em;
}
.feature__desc { color: var(--ink-soft); font-weight: 300; letter-spacing: 0.06em; }
.feature--note { border-block-end: none; color: var(--ink-soft); font-size: 0.98rem; }
.split__media { margin: 0; }
.split__media img {
  width: 100%; aspect-ratio: 7/5; object-fit: cover;
  border-radius: 18px;
}
.split__media figcaption {
  margin-block-start: 0.9em;
  font-size: 0.82rem; letter-spacing: 0.2em;
  color: var(--ink-mute); text-align: center;
}
.approach {
  display: flex; flex-direction: column; gap: 0.6em;
  font-family: var(--serif);
}
.approach li {
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  letter-spacing: 0.06em;
  padding-block: 0.25em;
  border-block-end: 1px solid var(--line);
}
.approach__note { margin-block-start: 1.6em; color: var(--ink-soft); font-weight: 300; }

/* ---------- Section 9 — 体幹教室 ---------- */
.section--taikan { padding: 0; background: var(--field-2); color: #fff; }
.taikan { display: grid; grid-template-columns: 1fr; }
.taikan__media { margin: 0; }
.taikan__media img { width: 100%; height: clamp(280px, 60vw, 560px); object-fit: cover; }
.taikan__body {
  padding: clamp(56px, 12vw, 110px) var(--gut);
  display: flex; flex-direction: column;
  justify-content: center;
}
.taikan__body .section__index { color: rgba(255,255,255,0.6); }
.taikan__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: 1.4; letter-spacing: 0.05em;
}
.taikan__lead {
  margin-block: 1.4em 1.8em;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
}
.taikan__list { display: flex; flex-direction: column; gap: 0.9em; }
.taikan__list li {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 5.4vw, 1.7rem);
  letter-spacing: 0.05em;
  padding-inline-start: 1.2em;
  position: relative;
}
.taikan__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.85em;
  width: 0.5em; height: 1px; background: rgba(255,255,255,0.6);
}
.taikan__note { margin-block-start: 2em; color: rgba(255,255,255,0.66); font-weight: 300; font-size: 0.95rem; }

/* ---------- Section 10 — Staff（横スクロール・詳細プロフィール） ---------- */
.staff__item {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(258px, 78vw, 340px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(22px, 5.5vw, 32px);
  box-shadow: 0 18px 44px -30px rgba(20, 32, 44, 0.4);
}
.staff__head {
  display: flex; align-items: center; gap: clamp(16px, 4vw, 24px);
  margin-block-end: clamp(18px, 4vw, 26px);
  padding-block-end: clamp(18px, 4vw, 26px);
  border-block-end: 1px solid var(--line);
}
.staff__photo {
  flex: none; margin: 0;
  width: clamp(88px, 24vw, 116px); aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  box-shadow: 0 12px 30px -12px rgba(20, 32, 44, 0.55);
}
.staff__photo img {
  width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.staff__item:hover .staff__photo img { transform: scale(1.05); }
.staff__role {
  font-size: 0.76rem; letter-spacing: 0.18em; color: var(--field);
  margin-block-end: 0.5em;
}
.staff__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.4rem, 6vw, 1.9rem); letter-spacing: 0.07em;
  display: flex; flex-direction: column; gap: 0.25em; line-height: 1.25;
}
.staff__name-en {
  font-family: var(--sans); font-weight: 300;
  font-size: 0.72rem; letter-spacing: 0.2em; color: var(--ink-mute);
}
.staff__detail { display: flex; flex-direction: column; gap: clamp(15px, 3.4vw, 20px); }
.staff__block dt {
  position: relative; padding-inline-start: 1.4em;
  font-size: 0.85rem; letter-spacing: 0.1em; font-weight: 500;
  color: var(--field); margin-block-end: 0.45em;
}
.staff__block dt::before {
  content: "◆"; position: absolute; inset-inline-start: 0; inset-block-start: 0.1em;
  font-size: 0.66em; color: var(--accent);
}
.staff__block dd {
  margin: 0; color: var(--ink-soft); font-weight: 300;
  font-size: 0.92rem; line-height: 1.95; letter-spacing: 0.03em;
}

/* ---------- Section 11 — Menu ---------- */
.menu__list { border-block-start: 1px solid var(--line); }
.menu__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding-block: 1.2em;
  border-block-end: 1px solid var(--line);
}
.menu__name { font-family: var(--serif); font-size: clamp(1.05rem, 4.4vw, 1.3rem); letter-spacing: 0.05em; }
.menu__price { color: var(--ink-soft); letter-spacing: 0.08em; white-space: nowrap; }
.menu__note { margin-block-start: 1.6em; font-size: 0.85rem; color: var(--ink-mute); }

/* ---------- Section 12 — Access ---------- */
.access { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 7vw, 64px); }
.access__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6vw, 2rem);
  letter-spacing: 0.08em;
  margin-block-end: 1em;
  padding-block-end: 0.6em;
  border-block-end: 1px solid var(--line);
}
.access__info { display: grid; grid-template-columns: auto 1fr; gap: 0.5em 1.4em; margin: 0 0 1.6em; }
.access__info dt { color: var(--ink-mute); font-size: 0.85rem; letter-spacing: 0.16em; }
.access__info dd { margin: 0; color: var(--ink-soft); }
.access__map {
  aspect-ratio: 16/10; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line);
}
.access__map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.footer {
  background: var(--field-2);
  color: #fff;
  padding-block: clamp(72px, 14vw, 140px) clamp(40px, 8vw, 64px);
  padding-block-end: max(40px, env(safe-area-inset-bottom));
  text-align: center;
}
.footer__statement {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.4vw, 2.6rem);
  line-height: 1.7; letter-spacing: 0.06em;
  margin-block-end: clamp(48px, 9vw, 80px);
}
.footer__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 0.7em; margin-block-end: 2.4em; }
.logo-mark--lg { width: 2.6em; height: 2.6em; font-size: 1.5rem; background: rgba(255,255,255,0.14); }
.footer__name { font-family: var(--serif); letter-spacing: 0.2em; font-size: 1.05rem; }
.footer__cta { margin-block-end: 3em; }
.footer__contact { display: flex; flex-direction: column; gap: 0.7em; margin-block-end: 2.4em; font-size: 0.92rem; color: rgba(255,255,255,0.8); font-weight: 300; }
.footer__social { display: flex; justify-content: center; gap: 2em; margin-block-end: 3em; }
.footer__social a {
  font-size: 0.88rem; letter-spacing: 0.14em;
  padding-block-end: 0.3em; border-block-end: 1px solid rgba(255,255,255,0.3);
  transition: border-color 0.3s var(--ease);
}
.footer__social a:hover { border-color: rgba(255,255,255,0.9); }
.footer__copy { color: rgba(255,255,255,0.5); font-size: 0.76rem; letter-spacing: 0.1em; }

/* ---------- Floating LINE button ---------- */
.fab-line {
  position: fixed;
  inset-block-end: max(18px, env(safe-area-inset-bottom));
  inset-inline-end: 16px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--line-green); color: #fff;
  padding: 0.85em 1.3em;
  border-radius: 999px;
  font-weight: 500; font-size: 0.9rem; letter-spacing: 0.06em;
  box-shadow: 0 10px 28px rgba(6,199,85,0.4);
  transform: translateY(140%);
  transition: transform 0.55s var(--ease), background-color 0.3s var(--ease);
}
.fab-line.is-shown { transform: translateY(0); }
.fab-line:hover { background: var(--line-green-d); }
.fab-line .btn__icon { width: 1.25em; height: 1.25em; }

/* ---------- Logo images (swap white/blue with header state) ---------- */
.logo-img { height: 42px; width: auto; display: block; border-radius: 6px; }
.site-header__loc {
  color: #fff; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.08em;
  white-space: nowrap; line-height: 1; transition: color 0.3s var(--ease);
}
.site-header.is-solid .site-header__loc { color: var(--ink); }
.logo-img--blue { display: none; }
.site-header.is-solid .logo-img--white { display: none; }
.site-header.is-solid .logo-img--blue { display: block; }
.footer__logo { height: 54px; width: auto; margin-inline: auto; }

/* ---------- Device lineup media (S7) ---------- */
.devices-media { max-width: var(--maxw); margin: 0 auto clamp(34px, 6vw, 56px); padding-inline: var(--gut); }
.devices-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 18px; }

/* ---------- Full-bleed 現場感 band ---------- */
.band { position: relative; min-height: clamp(320px, 62vw, 540px); display: grid; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band__overlay {
  position: relative; display: grid; place-items: center;
  padding: var(--gut);
  background: linear-gradient(rgba(14,39,68,0.5), rgba(14,39,68,0.62));
}
.band__text {
  font-family: var(--serif); color: #fff; text-align: center;
  font-size: clamp(1.6rem, 7vw, 3rem); letter-spacing: 0.06em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

/* ---------- Access exterior photo ---------- */
.access__exterior { margin: 0 0 clamp(20px, 4vw, 30px); }
.access__exterior img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; }

/* =================================================================
   Tablet / Desktop
   ================================================================= */
@media (min-width: 768px) {
  .sp-only { display: none; }
  .split { grid-template-columns: 1.05fr 1fr; }
  .split--reverse .split__text { order: 2; }
  .split--reverse .split__media { order: 1; }
  .taikan { grid-template-columns: 1.1fr 1fr; }
  .taikan__media img { height: 100%; min-height: 520px; }
  .staff__item { width: 360px; }
  .access { grid-template-columns: 1fr 1fr; }
  .fab-line { inset-inline-end: 24px; }
  .logo-img { height: 46px; }
  .site-header__loc { font-size: 0.9rem; }
}

@media (min-width: 1024px) {
  .hcard { width: 320px; }
  .dcard { width: 340px; }
  .ccard { width: 260px; }
}

/* Larger pointer = no drag hint needed, but keep it subtle */
@media (hover: hover) and (pointer: fine) {
  .hscroll__hint { opacity: 0.7; }
}

/* =================================================================
   Refinement pass
   ① 日本語を文節単位で改行（読みやすく）
   ② 余白のリズムを締めて "間延び" を解消
   ③ タイポ・写真の仕上げを上品に
   ================================================================= */

/* ① 文節区切りでの自然な改行＋行頭行末そろえ */
.hero__title, .hero__list,
.section__title, .section__sub,
.statement__kicker, .statement__line, .statement__foot,
.taikan__title, .taikan__lead, .taikan__list li,
.footer__statement,
.approach li, .feature__title,
.hcard__text, .dcard__name, .ccard__name,
.band__text, .access__name, .menu__name, .staff__name {
  word-break: auto-phrase;        /* 文節で折る（対応ブラウザ） */
  line-break: strict;
  text-wrap: balance;             /* 各行の長さをそろえる */
}
.feature__desc, .approach__note, .taikan__note,
.menu__note, .staff__bio, .dcard__desc {
  text-wrap: pretty;              /* 段落の最終行の孤立文字を防ぐ */
}

/* ② 余白のリズムを締める（間延び解消・意図的な静けさへ） */
.section { padding-block: clamp(72px, 9.5vh, 124px); }
.section--statement { padding-block: clamp(88px, 12vh, 148px); }
.statement__foot { margin-block-start: clamp(30px, 5.5vw, 56px); }
.section__head { margin-block-end: clamp(34px, 5.5vw, 60px); }

/* ③-a 大きな明朝のタイポを上品に */
.hero__title  { font-size: clamp(2.35rem, 9.6vw, 5rem); line-height: 1.4; letter-spacing: 0.06em; }
.statement__line { line-height: 1.62; letter-spacing: 0.08em; }
.statement__lines { gap: clamp(24px, 5vw, 44px); }
.section__title { line-height: 1.5; letter-spacing: 0.06em; }
.statement__kicker { letter-spacing: 0.18em; }

/* ③-b セクション番号を細く端正に */
.section__index { font-size: 0.78rem; letter-spacing: 0.36em; }
.section__index::before { width: 30px; height: 1px; background: var(--field); opacity: 0.45; }

/* ③-c 写真に統一した角丸・極細枠・やわらかい影で奥行きを */
.split__media img,
.devices-media img,
.access__exterior img,
.staff__photo,
.access__map {
  border-radius: 14px;
  box-shadow: 0 22px 48px -26px rgba(14, 32, 44, 0.5);
}
.split__media img,
.devices-media img,
.access__exterior img { outline: 1px solid rgba(14, 32, 44, 0.05); outline-offset: -1px; }

/* ③-d ヒーローの諧調を少し深めて文字を読みやすく */
.hero__scrim {
  background:
    linear-gradient(to bottom,
      rgba(12, 18, 26, 0.55) 0%,
      rgba(12, 18, 26, 0.30) 38%,
      rgba(12, 18, 26, 0.62) 100%);
}

/* ③-e カード/ボタンの影をひと段やわらかく */
.hcard { box-shadow: 0 18px 44px -28px rgba(20, 32, 44, 0.4); }

/* =================================================================
   Premium layer — グラデーション・奥行き・スクロール連動の動き
   （スマホで効く演出を中心に。reduced-motion は無効化）
   ================================================================= */
:root {
  --grad-brand:  linear-gradient(120deg, #1a4f9c 0%, #2f74d6 52%, #46c2ff 100%);
  --grad-deep:   linear-gradient(158deg, #091a30 0%, #07142a 50%, #0e2b52 100%);
}

/* --- スクロール進捗バー（最上部・グラデ） --- */
.scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 14px rgba(63, 155, 230, 0.7);
  z-index: 200; pointer-events: none;
}

/* --- リビールを上質に（ぼかし＋わずかな拡大から立ち上がる） --- */
.reveal {
  filter: blur(8px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.reveal.is-visible { filter: blur(0); }

/* --- ダーク系セクションを深いグラデ＋ゆっくり動く"オーロラ"光に --- */
.section--dark,
.section--taikan,
.footer { background: var(--grad-deep); }
.section--dark,
.section--taikan,
.footer { position: relative; overflow: hidden; }
.section--dark::before,
.section--taikan::before,
.footer::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(40% 50% at 14% 16%, rgba(70, 150, 230, 0.28), transparent 60%),
    radial-gradient(46% 56% at 88% 84%, rgba(34, 92, 180, 0.30), transparent 64%),
    radial-gradient(26% 32% at 62% 44%, rgba(110, 185, 245, 0.12), transparent 70%);
  filter: blur(18px);
  animation: aurora 20s var(--ease) infinite alternate;
  pointer-events: none; z-index: 0;
}
.section--dark > *,
.section--taikan > *,
.footer > * { position: relative; z-index: 1; }
@keyframes aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1);     opacity: 0.85; }
  100% { transform: translate3d(4%, 3%, 0)  scale(1.18);   opacity: 1; }
}

/* --- ヒーロー：暗がりに加えブランド光をほのかに立ち上げる --- */
.hero__scrim {
  background:
    radial-gradient(120% 78% at 50% 14%, rgba(10, 20, 34, 0) 0%, rgba(9, 17, 30, 0.30) 56%, rgba(8, 14, 26, 0.80) 100%),
    linear-gradient(to top, rgba(52, 132, 228, 0.34), rgba(10, 18, 30, 0) 36%);
}

/* --- 機器カードをブランドのグラデに（平面 → 奥行き） --- */
.dcard {
  background: var(--grad-brand);
  box-shadow:
    0 20px 48px -18px rgba(52, 132, 228, 0.85),
    0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* --- 現場感バンド：オーバーレイをブランドグラデ＋光に --- */
.band { overflow: hidden; }
.band__overlay {
  background:
    radial-gradient(60% 70% at 30% 25%, rgba(60, 145, 240, 0.46), transparent 60%),
    linear-gradient(150deg, rgba(10, 28, 52, 0.58), rgba(14, 39, 68, 0.62));
}

/* --- セクション番号にグラデの差し色 --- */
.section__index {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section__index::before {
  background: var(--grad-brand); opacity: 0.9;
}

/* --- パララックス対象は figure 側でクリップ --- */
.split__media,
.taikan__media,
.access__exterior { overflow: hidden; }
.split__media img,
.taikan__media img,
.access__exterior img,
.band__img { will-change: transform; }

/* --- LINEボタン/FABをわずかに立体的なグラデ緑へ --- */
.btn--line { background: linear-gradient(135deg, #08cf5b, #04ad49); }
.btn--line:hover { background: linear-gradient(135deg, #06c755, #03963f); }
.fab-line { background: linear-gradient(135deg, #08cf5b, #04ad49); }

/* --- ダーク背景の白文字を読みやすく（影で浮かせる） --- */
.section--dark .statement__kicker,
.section--dark .statement__line,
.section--dark .statement__foot,
.taikan__title,
.taikan__lead,
.taikan__list li,
.taikan__note,
.band__text,
.footer__statement {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
/* 体幹セクションの本文側はさらに暗い土台で文字を確実に読ませる */
.taikan__body { position: relative; }
.taikan__body::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(5, 12, 24, 0.35), rgba(5, 12, 24, 0.55));
  pointer-events: none;
}

/* =================================================================
   ヒーローの可読性・冒頭メッセージ強調 ＋ フローティングSNS
   ================================================================= */
/* 文字側（左）を暗く落として白文字をくっきり読ませる */
.hero__scrim {
  background:
    linear-gradient(100deg, rgba(6,11,20,0.82) 0%, rgba(6,11,20,0.56) 40%, rgba(6,11,20,0.34) 70%, rgba(6,11,20,0.30) 100%),
    linear-gradient(to top, rgba(6,11,20,0.66) 0%, rgba(6,11,20,0.10) 50%),
    linear-gradient(rgba(6,11,20,0.20), rgba(6,11,20,0.20));
}
/* 冒頭のひとことを主役に */
.hero__lead {
  font-size: clamp(1rem, 4.6vw, 1.3rem);
  font-weight: 400; letter-spacing: 0.14em; opacity: 1; line-height: 1.85;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero__lead::before {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--accent); border-radius: 2px; margin-block-end: 1.1em;
}
.hero__title { text-shadow: 0 3px 28px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45); }
.hero__list { text-shadow: 0 2px 14px rgba(0,0,0,0.55); }

/* フローティング：Instagram ＋ LINE をまとめてスクロールで出現 */
:root {
  --ig-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.281.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.218 4.109 4.109 0 0 0 0-8.218zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z'/%3E%3C/svg%3E");
}
.fab-group {
  position: fixed;
  inset-block-end: max(18px, env(safe-area-inset-bottom));
  inset-inline-end: 16px;
  z-index: 90;
  display: flex; align-items: center; gap: 10px;
  transform: translateY(170%);
  transition: transform 0.55s var(--ease);
}
.fab-group.is-shown { transform: translateY(0); }
/* 固定配置はグループに任せ、LINEボタン自体は通常配置に */
.fab-line {
  position: static; inset: auto; transform: none;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.fab-line:hover { transform: translateY(-2px); }
/* 予約LINEボタンをそっと光らせて目を引く */
.fab-line { animation: linePulse 2.6s ease-in-out infinite; }
.fab-line:hover { animation: none; }
.btn--line { animation: linePulse 2.6s ease-in-out infinite; }
.btn--line:hover { animation: none; }
@keyframes linePulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(6,199,85,0.40), 0 0 0 0 rgba(6,199,85,0.0); }
  50% { box-shadow: 0 12px 30px rgba(6,199,85,0.55), 0 0 22px 5px rgba(6,199,85,0.55); }
}

/* HEROの言葉を、そっと包むような温かい光と呼吸 */
.hero__title { position: relative; isolation: isolate; }
.hero__title::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 130%; height: 180%; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.84);
  background: radial-gradient(closest-side, rgba(255,233,198,0.34), rgba(255,233,198,0) 72%);
  animation: heroEmbraceGlow 6.5s ease-in-out infinite;
}
.hero__title-inner {
  position: relative; z-index: 1; display: inline-block; transform-origin: center;
  animation: heroEmbraceBreath 6.5s ease-in-out infinite;
}
@keyframes heroEmbraceGlow {
  0%, 100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.82); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes heroEmbraceBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
.fab-ig {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 10px 26px -8px rgba(214,36,159,0.6);
  transition: transform 0.3s var(--ease);
}
.fab-ig:hover { transform: translateY(-2px); }
.fab-ig__icon {
  width: 23px; height: 23px; background: #fff;
  -webkit-mask: var(--ig-icon) center/contain no-repeat;
  mask: var(--ig-icon) center/contain no-repeat;
}

/* --- reduced-motion 配慮 --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none !important; }
  .section--dark::before,
  .section--taikan::before,
  .footer::before { animation: none; }
  .fab-group { transition: none; }
  .fab-line, .btn--line, .hero__title::before, .hero__title-inner { animation: none; }
}

/* =================================================================
   料金カード（S11）
   ================================================================= */
.menu__intro {
  font-size: clamp(1rem, 4vw, 1.15rem);
  color: var(--ink-soft); letter-spacing: 0.06em; line-height: 1.95;
}
.menu__intro strong { color: var(--field); font-weight: 500; }
.menu__hint { margin-block-start: 0.7em; font-size: 0.85rem; color: var(--ink-mute); letter-spacing: 0.03em; }

.price-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(244px, 74vw, 320px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(22px, 5vw, 30px);
  box-shadow: 0 18px 44px -30px rgba(20, 32, 44, 0.4);
}
.price-card__head { display: flex; align-items: center; gap: 0.7em; margin-block-end: 0.7em; }
.price-card__no {
  flex: none; display: grid; place-items: center;
  width: 1.95em; height: 1.95em; border-radius: 50%;
  font-family: var(--serif); font-size: 0.98rem; font-weight: 500; color: #fff;
  background: var(--grad-brand);
  box-shadow: 0 7px 18px -7px rgba(26, 79, 156, 0.75);
}
.price-card__no--alt { background: linear-gradient(135deg, #c8a34e, #e7cb83); box-shadow: 0 7px 18px -7px rgba(176, 138, 60, 0.7); }
.price-card__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.18rem, 5vw, 1.5rem); letter-spacing: 0.04em; line-height: 1.4;
}
.price-card__lead {
  color: var(--ink-soft); font-weight: 300;
  font-size: 0.95rem; line-height: 1.85; margin-block-end: 1.1em;
}
.price-list { display: flex; flex-direction: column; }
.price-list__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
  padding-block: 0.7em; border-block-start: 1px solid var(--line);
}
.price-list__row:first-child { border-block-start: none; padding-block-start: 0.2em; }
.price-list__k { color: var(--ink); letter-spacing: 0.08em; white-space: nowrap; }
.price-list__v { font-family: var(--serif); color: var(--field); letter-spacing: 0.03em; text-align: right; }
.price-list__row--head { color: var(--ink-mute); font-size: 0.84rem; }
.price-list__row--head span { letter-spacing: 0.12em; }
.price-card__meta { margin-block-start: 1em; color: var(--field); font-size: 0.92rem; letter-spacing: 0.05em; line-height: 1.7; }
.price-card__small { color: var(--ink-mute); font-size: 0.82rem; letter-spacing: 0.02em; }
.price-card--sub { background: var(--paper); }
.menu__note { margin-block-start: clamp(22px, 5vw, 34px); font-size: 0.85rem; color: var(--ink-mute); text-align: center; letter-spacing: 0.03em; }

/* メニュー横スクロールの上アキ */
.section--menu .hscroll { margin-block-start: clamp(22px, 5vw, 34px); }

/* =================================================================
   HERO コピー（静かで上品・余白大きめ・1行ごとに意味）
   ================================================================= */
.hero__media img { object-position: 62% 32%; }
.hero__inner { padding-block: clamp(40px, 12vh, 96px); }
.hero__title {
  font-size: clamp(2.1rem, 8.4vw, 3.9rem);
  line-height: 1.45;
  letter-spacing: 0.07em;
  margin-block-start: 0.7em;
}
.hero__message {
  margin-block: clamp(1.9em, 6vw, 2.8em) clamp(2em, 7vw, 3em);
  display: flex;
  flex-direction: column;
  gap: clamp(1.3em, 4.5vw, 1.9em);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(0.96rem, 4vw, 1.16rem);
  line-height: 2;
  letter-spacing: 0.1em;
  opacity: 0.97;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero__message p { margin: 0; }

/* 横スクロール案内をカード上に置く版 */
.hscroll__hint--top { margin-block: 0 16px; }

/* =================================================================
   治療機器バナー（S7）— ネイビー×ゴールド・生きた文字で再現
   ================================================================= */
.section--s7 { padding-block-end: clamp(52px, 10vw, 92px); }
.devbanner { position: relative; margin: 0; min-height: clamp(380px, 72vw, 580px); display: grid; overflow: hidden; }
.devbanner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.devbanner__overlay {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(56px, 13vw, 120px) var(--gut);
  background:
    radial-gradient(78% 56% at 50% 46%, rgba(6,12,24,0.52), rgba(6,12,24,0) 72%),
    linear-gradient(rgba(8,16,30,0.28), rgba(8,16,30,0.30));
}
.devbanner__index {
  font-family: var(--serif); color: var(--gold);
  letter-spacing: 0.34em; font-size: 0.85rem; margin-block-end: 1.6em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.devbanner__title {
  font-family: var(--serif); font-weight: 500; color: #fff;
  font-size: clamp(1.75rem, 7.4vw, 3.3rem); line-height: 1.6; letter-spacing: 0.09em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 4px 26px rgba(0,0,0,0.6);
  word-break: auto-phrase; text-wrap: balance;
}
.devbanner__rule {
  display: block; width: clamp(48px, 12vw, 80px); height: 2px;
  margin-block: clamp(1.5em, 4.5vw, 2.2em);
  background: linear-gradient(90deg, transparent, var(--gold) 28%, var(--gold) 72%, transparent);
  box-shadow: 0 0 14px rgba(200,163,78,0.6);
}
.devbanner__sub {
  font-family: var(--serif); color: #e6cf8e;
  letter-spacing: 0.2em; font-size: clamp(1rem, 4.4vw, 1.3rem);
  text-shadow: 0 2px 6px rgba(0,0,0,0.85), 0 2px 16px rgba(0,0,0,0.55);
}
.section--s7 .hscroll { margin-block-start: clamp(40px, 8vw, 72px); }

/* =================================================================
   機器：3D カバーフロー（Apple Cover Flow 風）
   ================================================================= */
.coverflow { margin-block-start: clamp(34px, 7vw, 60px); }
.coverflow__stage {
  position: relative;
  height: clamp(260px, 66vw, 350px);
  margin-inline: auto;
  perspective: 1200px;
  perspective-origin: 50% 44%;
  overflow: hidden;
  touch-action: pan-y;
  outline: none;
  cursor: grab;
}
.coverflow__stage:active { cursor: grabbing; }
.coverflow__track {
  list-style: none; margin: 0; padding: 0;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.cf-card {
  position: absolute; top: 50%; left: 50%;
  width: clamp(140px, 40vw, 188px);
  margin: 0; padding: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.44s ease;
  will-change: transform, opacity;
  cursor: pointer;
}
.cf-card__icon {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 38px -28px rgba(20, 32, 44, 0.5);
  transition: box-shadow 0.44s ease, border-color 0.44s ease, filter 0.44s ease;
}
.cf-card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 0.44s ease; }
/* 左右＝背景に控えている機器（小さく・薄く・少しトーンを落とす） */
.cf-card:not(.is-active) .cf-card__icon { filter: saturate(0.9) brightness(0.99); }
.cf-card:not(.is-active) .cf-card__icon img { opacity: 0.9; }
/* 中央＝主役の展示品（浮遊感・強い影・ブルーの光と縁取り） */
.cf-card.is-active .cf-card__icon {
  border: 1.5px solid rgba(47, 116, 214, 0.55);
  box-shadow:
    0 54px 92px -28px rgba(16, 28, 44, 0.66),
    0 0 0 4px rgba(47, 116, 214, 0.10),
    0 0 46px -4px rgba(47, 116, 214, 0.42);
}
/* 床に映る淡い影 */
.cf-card::after {
  content: ""; position: absolute; left: 50%; bottom: -16px;
  width: 78%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(16, 28, 44, 0.34), rgba(16, 28, 44, 0) 75%);
  opacity: 0; transition: opacity 0.44s ease; pointer-events: none;
}
.cf-card.is-active::after { opacity: 1; }

.coverflow__caption {
  text-align: center; margin-block-start: clamp(20px, 5vw, 30px);
  padding-inline: var(--gut); min-height: 5.4em;
}
.coverflow__name {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.18rem, 5.2vw, 1.6rem); letter-spacing: 0.04em; line-height: 1.45;
  margin: 0 0 0.45em;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.coverflow__desc {
  color: var(--ink-soft); font-weight: 300; font-size: 0.95rem; line-height: 1.85;
  margin: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.coverflow__caption.is-changing .coverflow__name,
.coverflow__caption.is-changing .coverflow__desc {
  opacity: 0; transform: translateY(6px);
}
.coverflow__nav {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 4vw, 22px); margin-block-start: clamp(16px, 4vw, 24px);
}
.coverflow__btn {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 1.5rem; line-height: 1; display: grid; place-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 12px 26px -18px rgba(20, 32, 44, 0.6);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.coverflow__btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.coverflow__btn:active { transform: translateY(0); }
.coverflow__dots { display: flex; align-items: center; gap: 7px; }
.coverflow__dot {
  width: 7px; height: 7px; border-radius: 999px; background: #cdd5dd;
  transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}
.coverflow__dot.is-active { width: 22px; background: var(--field); }

/* =================================================================
   よく読まれている記事
   ================================================================= */
.articles {
  list-style: none; margin: clamp(34px, 7vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 24px);
}
.article-card { display: flex; }
.article-card__link {
  display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 5.5vw, 32px);
  box-shadow: 0 18px 44px -30px rgba(20, 32, 44, 0.4);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.article-card__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -28px rgba(20, 32, 44, 0.5);
  border-color: rgba(47, 116, 214, 0.3);
}
.article-card__cat {
  align-self: flex-start;
  color: var(--field); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.12em;
  padding: 0.34em 0.95em; border: 1px solid var(--line); border-radius: 999px;
  margin-block-end: 1.1em;
}
.article-card__title {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.15rem, 4.8vw, 1.34rem); line-height: 1.5; letter-spacing: 0.03em;
  margin: 0 0 0.6em;
}
.article-card__desc {
  color: var(--ink-soft); font-weight: 300; font-size: 0.92rem; line-height: 1.85;
  margin: 0 0 1.3em;
}
.article-card__more {
  margin-block-start: auto;
  color: var(--field); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  .articles { grid-template-columns: repeat(3, 1fr); }
}

/* =================================================================
   ブログ記事ページ
   ================================================================= */
.post-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 76vw, 520px);
  padding: calc(72px + env(safe-area-inset-top)) 0 clamp(30px, 7vw, 52px);
  background: var(--field-2);
  color: #fff;
  overflow: hidden;
}
.post-hero__bg { position: absolute; inset: 0; z-index: -1; }
.post-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.post-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,20,38,0.92) 0%, rgba(8,20,38,0.7) 38%, rgba(8,20,38,0.45) 68%, rgba(8,20,38,0.4) 100%);
}
.post-hero__inner { position: relative; z-index: 1; width: 100%; }
.post-hero__crumb { font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); margin-block-end: 1.4em; }
.post-hero__crumb a { color: rgba(255,255,255,0.9); }
.post-hero__crumb span { margin-inline: 0.5em; }
.post-hero__cat {
  display: inline-block; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.12em;
  color: #fff; background: var(--field); border-radius: 999px;
  padding: 0.4em 1.1em; margin-block-end: 1.1em;
}
.post-hero__kicker {
  font-size: clamp(0.92rem, 3.8vw, 1.05rem); font-weight: 400; line-height: 1.7;
  color: rgba(255,255,255,0.92); margin: 0 0 0.5em; text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.post-hero__title {
  font-family: var(--serif); font-weight: 600; line-height: 1.5; letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 6.4vw, 2.4rem); margin: 0;
  text-shadow: 0 3px 20px rgba(0,0,0,0.55);
}
.post-hero__sub {
  font-size: clamp(0.9rem, 3.7vw, 1rem); font-weight: 300; line-height: 1.85;
  color: rgba(255,255,255,0.88); margin: 1em 0 0; max-width: 34em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.post-hero__meta { margin: 1.6em 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.72); letter-spacing: 0.04em; }

.post { padding: clamp(44px, 9vw, 76px) 0 clamp(56px, 11vw, 96px); }
.post__lead {
  font-size: clamp(1.05rem, 4.4vw, 1.18rem); line-height: 2.15; color: var(--ink);
  font-weight: 400; margin: 0 0 clamp(40px, 8vw, 60px);
  padding: clamp(20px, 5vw, 28px) clamp(20px, 5vw, 26px);
  background: var(--paper-2); border-radius: 14px; border-inline-start: 4px solid var(--field);
}
.post__sec { margin-block-end: clamp(36px, 7vw, 56px); }
.post__h2 {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.2rem, 4.8vw, 1.5rem); line-height: 1.5; letter-spacing: 0.02em;
  margin: 0 0 0.9em; padding-block-end: 0.5em; border-block-end: 1px solid var(--line);
}
.post p { color: #2c3742; font-weight: 400; font-size: clamp(1rem, 4.1vw, 1.06rem); line-height: 2.0; margin: 0 0 1.4em; }
.post strong { color: var(--ink); font-weight: 700; }
.post__list, .post__check { list-style: none; margin: 0.4em 0 1.4em; padding: 0; }
.post__list li, .post__check li {
  position: relative; color: #2c3742; font-weight: 400; font-size: clamp(1rem, 4.1vw, 1.06rem); line-height: 1.85;
  padding-inline-start: 1.5em; margin-block-end: 0.7em;
}
.post__list li::before { content: ""; position: absolute; inset-inline-start: 0.2em; inset-block-start: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--field); }
.post__check li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.15em; width: 1.1em; height: 1.1em; background: var(--field); border-radius: 4px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/0.8em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/0.8em no-repeat; }
.post__check li { padding-inline-start: 1.8em; margin-block-end: 0.7em; }
.post__quote {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.08rem, 4.4vw, 1.3rem); line-height: 1.85; letter-spacing: 0.02em;
  margin: 1.6em 0; padding: clamp(20px, 5vw, 30px); text-align: center;
  background: var(--paper-2); border-radius: 16px;
}
.post__note { font-size: 0.84rem; color: var(--ink-mute); font-weight: 300; }
.post__back { margin-block-start: clamp(36px, 7vw, 52px); }
.post__back a { color: var(--field); font-weight: 500; font-size: 0.92rem; }

.post-cta {
  margin-block-start: clamp(48px, 9vw, 72px);
  background: var(--field-2); color: #fff; border-radius: 20px;
  padding: clamp(32px, 7vw, 52px) clamp(24px, 6vw, 48px); text-align: center;
}
.post-cta .post-cta__lead { font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(1.04rem, 4.4vw, 1.24rem); line-height: 1.9; margin: 0 0 1.6em; }
.post-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn--web { background: #fff; color: var(--field-2); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.btn--web:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.28); }

/* =================================================================
   HERO — スマホ:写真バンド＋文字を少し重ねる / PC:写真にオーバーレイ
   2人が必ず見える構成。
   ================================================================= */
.hero {
  flex-direction: column;
  justify-content: flex-start;
  background: var(--grad-deep);
  padding-block-start: calc(env(safe-area-inset-top) + 52px);
}
.hero__scroll { display: none; }
.hero__media { position: relative; inset: auto; width: 100%; z-index: 0; }
.hero__media img {
  position: relative;
  width: 100%; height: auto;
  object-fit: contain;
  transform: none; animation: none;
}
.hero__scrim {
  background: linear-gradient(to bottom,
    rgba(8,18,34,0) 40%, rgba(9,20,38,0.5) 66%, rgba(10,26,48,0.9) 88%, #0a1c38 100%);
}
.hero__inner {
  position: relative; z-index: 1; width: 100%; color: #fff;
  margin-block-start: clamp(-168px, -34vw, -104px);
  padding-block-end: clamp(40px, 11vw, 84px);
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}

@media (min-width: 768px) {
  .hero { flex-direction: column; justify-content: flex-end; padding-block-start: 0; }
  .hero__media { position: absolute; inset: 0; z-index: -1; }
  .hero__media img { height: 100%; object-fit: cover; object-position: 50% 26%; }
  .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(5,10,20,0.84) 0%, rgba(5,10,20,0.5) 32%, rgba(5,10,20,0.22) 58%, rgba(5,10,20,0.1) 100%),
      linear-gradient(95deg, rgba(5,10,20,0.66) 0%, rgba(5,10,20,0.24) 46%, rgba(5,10,20,0) 80%);
  }
  .hero__inner { margin-block-start: 0; padding-block: clamp(56px, 10vh, 110px); }
}

/* =================================================================
   Section 8 — 症例紹介（ネイビー×ホワイト・タップで詳細展開）
   ================================================================= */
.cases { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 24px); }
.case {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 44px -30px rgba(20, 32, 44, 0.4);
  overflow: hidden;
}
.case__summary {
  list-style: none; cursor: pointer;
  display: block;
  padding: clamp(22px, 5.2vw, 28px);
}
.case__summary::-webkit-details-marker { display: none; }
.case__head {
  display: flex; align-items: center;
  gap: clamp(12px, 3.4vw, 16px);
}
.case__headtext { min-width: 0; }
.case__cat {
  color: var(--field); font-weight: 500;
  font-size: 0.8rem; letter-spacing: 0.1em;
  margin: 0 0 0.15em;
}
.case__pic {
  flex: 0 0 auto;
  display: block; margin: 0;
  width: clamp(58px, 15.5vw, 74px);
}
.case__pic img { width: 100%; height: auto; display: block; }
.case__title {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.18rem, 4.8vw, 1.42rem); letter-spacing: 0.04em;
  line-height: 1.25; margin: 0;
}
.case__lead {
  color: var(--ink-soft); font-weight: 300; font-size: 0.94rem; line-height: 1.85;
  margin-block-start: clamp(14px, 3.6vw, 18px);
}
.case__more {
  display: inline-flex; align-items: center; gap: 0.5em;
  margin-block-start: 1.3em;
  color: var(--field); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.06em;
}
.case__more-close { display: none; }
.case[open] .case__more-open { display: none; }
.case[open] .case__more-close { display: inline; }
.case__chev {
  width: 0.58em; height: 0.58em;
  border-right: 2px solid var(--field); border-bottom: 2px solid var(--field);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.case[open] .case__chev { transform: translateY(1px) rotate(-135deg); }
.case__detail {
  padding: clamp(20px, 5vw, 26px) clamp(24px, 5.5vw, 30px) clamp(26px, 6vw, 32px);
  margin-inline: clamp(24px, 5.5vw, 30px);
  padding-inline: 0;
  border-block-start: 1px solid var(--line);
  display: flex; flex-direction: column; gap: clamp(16px, 4vw, 22px);
}
.case__h {
  font-family: var(--serif); color: var(--field); font-size: 1rem; letter-spacing: 0.08em;
  margin-block-end: 0.55em; padding-inline-start: 0.7em;
  border-inline-start: 3px solid var(--gold);
}
.case__block p { color: var(--ink-soft); font-weight: 300; line-height: 1.9; font-size: 0.93rem; }
.case__list { display: flex; flex-direction: column; gap: 0.3em; margin-block: 0.5em; }
.case__list li {
  position: relative; padding-inline-start: 1.2em;
  color: var(--ink); font-size: 0.93rem; line-height: 1.8;
}
.case__list li::before {
  content: ""; position: absolute; inset-inline-start: 0.1em; inset-block-start: 0.85em;
  width: 0.55em; height: 1px; background: var(--field);
}
.case__voice {
  margin: 0.2em 0; padding: 1em 1.2em; border-radius: 12px;
  background: var(--paper-2); border-inline-start: 3px solid var(--field);
  font-family: var(--serif); color: var(--ink); line-height: 1.95; font-size: 0.95rem;
}
.case__disc { color: var(--ink-mute); font-size: 0.78rem; line-height: 1.85; letter-spacing: 0.02em; }
.case--soon {
  display: none;                 /* スマホは実例のみ表示 */
  padding: clamp(24px, 5.5vw, 30px);
  border-style: dashed; opacity: 0.78;
}
.case--soon .case__title { color: var(--ink-mute); }
@media (min-width: 768px) {
  .cases { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .case--soon { display: block; }
}

/* 症例：強調語と「阿部接骨院の視点」パネル */
.case__block strong { color: var(--field); font-weight: 600; }
.case__block--view {
  background: linear-gradient(160deg, rgba(26,79,156,0.06), rgba(14,39,68,0.05));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(16px, 4vw, 22px);
}

/* 症例を横スクロールカードに */
.cases-track { align-items: flex-start; }
.cases-track .case {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: clamp(258px, 78vw, 340px);
}
.case[open] .case__detail {
  max-height: 64vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.case__subtitle { color: var(--ink-mute); font-size: 0.82rem; margin-block: -0.1em 0.5em; letter-spacing: 0.02em; }

/* 文の改行を整える（語中で割れないように）＋エコー縦長＋フッターロゴ＋ドット */
.statement__line { word-break: keep-all; line-break: strict; text-wrap: normal; font-size: clamp(1.6rem, 6.6vw, 3rem); }
.footer__statement { word-break: keep-all; line-break: strict; text-wrap: normal; }
.split__media--echo img { aspect-ratio: 16 / 9; }
.footer__logo { border-radius: 6px; }

.hscroll__dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-block-start: 14px; padding-inline: var(--gut); }
.hscroll__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: width 0.3s var(--ease), background-color 0.3s var(--ease); flex: none; }
.hscroll__dot.is-active { width: 22px; background: var(--field); }

/* HERO: スマホは「写真＋私たちが…＋引用」で1画面、続きの2文は次画面へ */
.hero__message { margin-block-start: clamp(40px, 14vh, 150px); }
@media (min-width: 768px) {
  .hero__message { margin-block-start: clamp(1.9em, 6vw, 2.8em); }
}

/* 川西整体院メニュー（料金の下に独立したネイビーカード） */
.kw-menu {
  margin-block-start: clamp(28px, 6vw, 44px);
  background: #0c2540;                 /* fallback */
  background: var(--grad-deep);
  color: #fff;
  border-radius: 18px;
  padding: clamp(26px, 6vw, 38px);
  box-shadow: 0 22px 54px -26px rgba(14,39,68,0.6);
}
.kw-menu__head {
  display: flex; align-items: baseline; gap: 0.8em; flex-wrap: wrap;
  margin-block-end: 1.1em; padding-block-end: 1em;
  border-block-end: 1px solid rgba(255,255,255,0.16);
}
.kw-menu__badge { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 5.6vw, 1.7rem); letter-spacing: 0.08em; }
.kw-menu__sub { color: #e6cf8e; letter-spacing: 0.14em; font-size: 0.95rem; }
.kw-menu__rows { display: flex; flex-direction: column; gap: 0.2em; }
.kw-menu__rows li {
  display: flex; flex-direction: column; gap: 0.3em;
  padding-block: 0.85em; border-block-start: 1px solid rgba(255,255,255,0.12);
}
.kw-menu__rows li:first-child { border-block-start: none; }
.kw-menu__rows .k { color: #e6cf8e; letter-spacing: 0.14em; font-size: 0.8rem; }
.kw-menu__rows .v { font-family: var(--serif); color: #fff; letter-spacing: 0.04em; font-size: 1.08rem; line-height: 1.7; }
.kw-menu__note { margin-block-start: 1.3em; color: rgba(255,255,255,0.7); font-size: 0.82rem; font-weight: 300; letter-spacing: 0.04em; line-height: 1.8; }

/* メディア掲載・紹介実績 */
.media-grid { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 3vw, 22px); }
.media-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 5.5vw, 32px);
  box-shadow: 0 18px 44px -30px rgba(20, 32, 44, 0.4);
}
.media-card__top { display: flex; align-items: center; gap: 0.7em; margin-block-end: 1em; flex-wrap: wrap; }
.media-card__tag {
  display: inline-block; background: var(--field-2); color: #fff;
  font-size: 0.74rem; letter-spacing: 0.16em; padding: 0.38em 0.95em; border-radius: 999px;
}
.media-card__pub { color: var(--ink-mute); font-size: 0.82rem; letter-spacing: 0.06em; }
.media-card__name {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.2rem, 5vw, 1.5rem); letter-spacing: 0.04em; line-height: 1.55;
  margin-block-end: 0.6em;
}
.media-card__desc { color: var(--ink-soft); font-weight: 300; font-size: 0.94rem; line-height: 1.9; }
.media-card__link { display: inline-block; margin-block-start: 1em; color: var(--field); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.06em; }
/* 写真を敷くインタビューカード（顔が見えるよう上を空け、文字は下に） */
.media-card--photo {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(240px, 64vw, 300px);
}
.media-card__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  opacity: 0.55; filter: saturate(1.06);
  pointer-events: none;
}
.media-card--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.30) 42%,
    rgba(255,255,255,0.74) 100%);
  pointer-events: none;
}
.media-card__body { position: relative; z-index: 1; margin-block-start: auto; }
/* 書籍カードは表紙（縦長・明るい）を背景に */
.media-card--book .media-card__bg { object-position: 50% 14%; opacity: 0.3; }
.media-card--book::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.8) 100%);
}
/* 文字列に白のスモークをかけて、表紙の上でも読みやすく */
.media-card--book .media-card__name,
.media-card--book .media-card__desc,
.media-card--book .media-card__link,
.media-card--book .media-card__pub {
  text-shadow:
    0 0 7px rgba(255,255,255,0.96),
    0 0 14px rgba(255,255,255,0.9),
    0 0 22px rgba(255,255,255,0.8);
}
.media-note { margin-block-start: clamp(20px, 5vw, 32px); font-size: 0.82rem; color: var(--ink-mute); text-align: center; letter-spacing: 0.03em; }
@media (min-width: 768px) { .media-grid { grid-template-columns: 1fr 1fr; } }

/* =================================================================
   書籍ポップアップ — 本を開いたような見開きデザイン
   ================================================================= */
.bookmodal[hidden] { display: none; }
.bookmodal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 4vw, 40px);
}
.bookmodal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 18, 32, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: bookFade 0.3s var(--ease);
}
.bookmodal__spread {
  position: relative; z-index: 1;
  width: min(940px, 100%); max-height: 90vh; overflow: auto;
  background: #fff; border-radius: 4px;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.55);
  animation: bookRise 0.42s var(--ease);
}
.bookmodal__close {
  position: absolute; top: 8px; right: 12px; z-index: 3;
  border: none; background: transparent;
  font-size: 1.7rem; line-height: 1; color: var(--ink-mute);
  width: 1.5em; height: 1.5em; cursor: pointer;
  transition: color 0.2s var(--ease);
}
.bookmodal__close:hover { color: var(--ink); }
.book {
  display: grid; grid-template-columns: 1fr;
  font-family: var(--serif); color: var(--ink); line-height: 1.95;
}
.book__page { padding: clamp(34px, 7vw, 56px) clamp(28px, 8vw, 64px); }
.book__pub { font-size: 0.8rem; letter-spacing: 0.16em; color: var(--ink-mute); margin: 0 0 0.7em; }
.book__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.3rem, 5.6vw, 1.8rem); letter-spacing: 0.05em; line-height: 1.55; margin: 0;
}
.book__rule { border: none; border-top: 1px solid var(--line); margin: clamp(22px, 5vw, 32px) 0; }
.book__rule--soft { margin: clamp(20px, 4.5vw, 28px) 0; opacity: 0.7; }
.book__body p, .book__sec p { font-size: 0.95rem; font-weight: 300; color: var(--ink-soft); margin: 0 0 1.25em; }
.book__lead { font-weight: 500; color: var(--ink); margin-block-end: 0.3em; }
.book__byline { font-size: 0.92rem; font-weight: 400; color: var(--field); letter-spacing: 0.06em; margin: 0 0 1.4em; }
.book__sec--comment p { font-style: normal; color: var(--ink); background: var(--surface, #f5f6f4); border-radius: 10px; padding: clamp(14px, 3vw, 20px); font-size: 0.92rem; }
.book__sign { display: inline-block; margin-inline-start: 0.2em; color: var(--ink-mute); }
.book__h { font-size: 1.02rem; font-weight: 500; letter-spacing: 0.1em; color: var(--ink); margin: 0 0 0.9em; }
.book__quote { font-size: 1.04rem; font-weight: 400; color: var(--ink); line-height: 1.9; margin: 0 0 1em; }
.book__sec { margin-block-end: clamp(8px, 2vw, 14px); }
.book__list { list-style: none; padding: 0; margin: 0; }
.book__list li {
  position: relative; padding-inline-start: 1.1em;
  font-size: 0.95rem; font-weight: 300; color: var(--ink-soft); margin-block: 0.55em;
}
.book__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.78em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--field);
}
.book__foot { font-size: 0.8rem; color: var(--ink-mute); letter-spacing: 0.02em; margin: clamp(20px, 4vw, 28px) 0 0; }
@media (min-width: 768px) {
  .book { grid-template-columns: 1fr 1fr; }
  /* 中央の綴じ（ノド）を表現 */
  .book__page--left { box-shadow: inset -1px 0 0 rgba(20, 32, 44, 0.07); }
  .book__page--right { box-shadow: inset 14px 0 28px -24px rgba(20, 32, 44, 0.4); }
}
body.is-modal-open { overflow: hidden; }
@keyframes bookFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bookRise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }

/* HEROの動き：スクロールでズーム＋文字ドリフトのため、写真をクリップ */
.hero__media { overflow: hidden; }

/* 施術の流れカード（タイトル＋説明） */
.hcard--flow { width: clamp(250px, 78vw, 304px); }
.hcard--flow .hcard__text { font-size: clamp(1.15rem, 4.8vw, 1.4rem); margin-block-end: 0.5em; }
.hcard__desc {
  font-family: var(--sans); font-weight: 300;
  font-size: 0.86rem; line-height: 1.85; letter-spacing: 0.02em;
  color: var(--ink-soft); text-align: center;
}

/* 見極める：評価イラスト＋3項目（ネイビー×ホワイト） */
.evaluate__illust { margin: 0 0 clamp(26px, 5vw, 44px); }
.evaluate__illust img { width: 100%; height: auto; display: block; }
.evaluate__cols { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 4.5vw, 34px); }
.evaluate__col { text-align: center; padding-block-start: clamp(16px, 3vw, 0px); position: relative; }
.evaluate__col + .evaluate__col { border-block-start: 1px solid var(--line); padding-block-start: clamp(20px, 4vw, 0px); }
.evaluate__h {
  font-family: var(--serif); font-weight: 500; color: var(--field);
  font-size: clamp(1.12rem, 4.6vw, 1.35rem); letter-spacing: 0.05em; margin-block-end: 0.55em;
}
.evaluate__d { color: var(--ink-soft); font-weight: 300; font-size: 0.92rem; line-height: 1.9; letter-spacing: 0.02em; }
.evaluate__note {
  margin-block-start: clamp(26px, 5vw, 40px); text-align: center;
  color: var(--field); font-size: clamp(0.95rem, 3.6vw, 1.05rem); letter-spacing: 0.08em;
}
@media (min-width: 768px) {
  .evaluate__cols { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); }
  .evaluate__col + .evaluate__col { border-block-start: none; border-inline-start: 1px solid var(--line); padding-block-start: 0; padding-inline-start: clamp(24px, 3vw, 40px); }
}

/* 見極める：エコー注記（①の下） */
.evaluate__echo {
  margin-block-start: 0.9em; font-size: 0.82rem; color: var(--field);
  letter-spacing: 0.04em; line-height: 1.7;
}
/* 施術する：ネイビー×ゴールドの差し色 */
.treat__col .evaluate__h { padding-block-start: 0.7em; }
.treat__col .evaluate__h::before {
  content: ""; display: block; width: 30px; height: 2px; border-radius: 2px;
  background: var(--gold); margin: 0 auto 0.7em;
}
.treat__note { color: var(--field); }

/* 施術：箇条書き（ゴールドのダッシュ） */
.treat__list { display: inline-flex; flex-direction: column; gap: 0.35em; margin-block-start: 0.9em; text-align: left; }
.treat__list li { position: relative; padding-inline-start: 1.1em; color: var(--ink-soft); font-weight: 300; font-size: 0.9rem; line-height: 1.7; }
.treat__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; width: 0.55em; height: 1px; background: var(--gold); }

/* 機器バナー：背景写真なしのソリッド版 */
/* 機器バナー：全機器が必ず入る背景写真（contain で切り取らない） */
.devbanner--photo { min-height: clamp(340px, 64vw, 500px); background: var(--grad-deep); }
.devbanner--photo .devbanner__img {
  object-fit: contain; object-position: center;
  filter: saturate(1.02) contrast(1.02);
}
.devbanner--photo .devbanner__overlay {
  background:
    radial-gradient(72% 60% at 50% 50%, rgba(6,12,24,0.30), rgba(6,12,24,0) 72%),
    linear-gradient(rgba(8,16,30,0.22), rgba(8,16,30,0.30));
}

/* ドットの余白（カード上に置くため下アキ多め） */
.hscroll__dots { margin-block: 2px 14px; }

/* 機器カードを写真付き白カードに */
.dcard {
  width: clamp(228px, 70vw, 286px);
  min-height: 0;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  box-shadow: 0 18px 44px -28px rgba(20,32,44,0.4);
}
.dcard__img { aspect-ratio: 4 / 3; overflow: hidden; background: #0e2744; }
.dcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard__name {
  font-family: var(--serif); color: var(--ink);
  font-size: clamp(1.16rem, 4.6vw, 1.4rem); letter-spacing: 0.04em;
  padding: clamp(15px,4vw,19px) clamp(18px,4.5vw,22px) 0;
}
.dcard__desc {
  font-size: 0.9rem; color: var(--ink-soft); font-weight: 300; opacity: 1;
  letter-spacing: 0.04em; line-height: 1.7;
  padding: 0.45em clamp(18px,4.5vw,22px) clamp(18px,4.5vw,22px);
}

/* 施術アイコン（ネイビー円形）。アイコン使用時は金線を非表示 */
.treat__icon { display: block; width: clamp(74px, 19vw, 96px); margin: 0 auto 0.5em; }
.treat__icon img { width: 100%; height: auto; display: block; }
.treat__col .evaluate__h::before { content: none; }
.treat__col .evaluate__h { padding-block-start: 0; }

/* 機器カード：画像準備中のプレースホルダー（ネイビー×ゴールド） */
.dcard__img--ph { display: grid; place-items: center; background: var(--grad-deep); }
.dcard__img--ph span { color: #e6cf8e; font-family: var(--serif); letter-spacing: 0.12em; font-size: 0.95rem; }

/* 体幹教室：ラベル＆対象/定員 */
.taikan__label {
  color: #e6cf8e; letter-spacing: 0.18em;
  font-size: clamp(0.9rem, 3.6vw, 1.05rem); margin-block-end: 1em;
}
.taikan__meta { display: flex; flex-direction: column; gap: 0.55em; margin-block: clamp(1.4em, 4vw, 1.9em) 0; }
.taikan__meta > div { display: flex; gap: 1.1em; align-items: baseline; }
.taikan__meta dt { color: rgba(255,255,255,0.6); font-size: 0.78rem; letter-spacing: 0.16em; min-width: 3.2em; }
.taikan__meta dd { margin: 0; color: #fff; font-family: var(--serif); letter-spacing: 0.05em; font-size: clamp(1rem, 4vw, 1.15rem); }

/* 体幹教室：余白を広げて見やすく */
.taikan__body { padding-block: clamp(64px, 14vw, 120px); }
.taikan__label { margin-block-end: 1.5em; }
.taikan__title { line-height: 1.55; margin-block-end: 0.2em; }
.taikan__list { gap: clamp(1.1em, 4vw, 1.5em); margin-block-start: clamp(1.6em, 5vw, 2.2em); }
.taikan__list li { line-height: 1.7; }
.taikan__meta { margin-block: clamp(2em, 5.5vw, 2.6em) 0; gap: 0.85em; }
.taikan__note { margin-block-start: clamp(2.2em, 6vw, 3em); line-height: 1.85; }

/* 機器カード：アイコン版（中央配置） */
.dcard { padding: clamp(26px, 5.5vw, 34px); align-items: center; text-align: center; }
.dcard__icon { display: block; width: clamp(104px, 30vw, 140px); margin: 0 auto 0.5em; }
.dcard__icon img { width: 100%; height: auto; display: block; }
.dcard__name { padding: 0; }
.dcard__desc { padding: 0.5em 0 0; }