@charset "UTF-8";

/* =========================================================
   Sun UP — design tokens
   白・グレー・控えめなシャンパンゴールド（第2段階）。
   --c-accent（ゴールド）は白文字のコントラストが足りないため装飾専用とし、
   ボタンなど白文字を載せる背景・リンク文字には --c-accent-deep（深いゴールド）を使う。
   ※ トークン名の blush は第1段階（くすみピンク）の名残。値だけ差し替えている。
   ========================================================= */
:root {
  --c-bg: #FAF9F6;
  --c-surface: #FFFFFF;
  --c-blush-50: #F3F1EC;
  --c-blush-100: #EAE1CF;
  --c-accent: #B9A57E;
  --c-accent-deep: #7A6643;
  --c-accent-deeper: #645335;
  --c-text: #3E3C39;
  --c-text-sub: #67635C;
  --c-line: #E3DED4;
  /* LINEボタンの緑。公式色 #06C755 は白文字とのコントラストが 2.3:1 で読みにくいため、
     同じ色味のまま暗くして白文字 5.0:1 を確保した色を使う（--c-line は罫線色なので別名） */
  --c-line-brand: #05803B;
  --c-line-brand-deep: #046B31;

  --font-serif: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Cormorant Garamond", "Times New Roman", serif;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: clamp(24px, 4vw, 48px);

  --shadow-sm: 0 1px 3px 0 rgb(62 60 57 / 0.08), 0 1px 2px -1px rgb(62 60 57 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(62 60 57 / 0.08), 0 2px 4px -2px rgb(62 60 57 / 0.08);

  --container: 1120px;
  --gutter: 16px;
  --header-h: 64px;
  --sp-cta-h: 64px;

  /* z-index scale */
  --z-header: 10;
  --z-cta: 20;

  --ease-out: ease-out;
  --dur: 150ms;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 80px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body { font-size: 16px; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

/* 見出しで語の途中改行を避けたい箇所をまとめる */
.nw { display: inline-block; }

/* 元サイトのPC幅前提の文中改行。スマホでは不自然な折り返しになるのでPCだけ有効に */
@media (max-width: 767px) {
  br.br-pc { display: none; }
}

/* 見出し以外でも短い一文や住所は文節で折り返す（「くだ｜さい」等を防ぐ） */
.hours__lead,
.trainer__lead,
.gnav__address,
.info__list span,
.site-footer__address span,
.hours__list small {
  word-break: auto-phrase;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  font-weight: inherit;
  text-wrap: balance;
  word-break: auto-phrase;
  /* 明朝見出しは約物の空きを詰めたほうが締まる */
  font-feature-settings: "palt";
}

p { text-wrap: pretty; }

time { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--c-accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.u-sp { display: inline; }
.u-pc { display: none !important; }
@media (min-width: 768px) { .u-sp { display: none; } }
@media (min-width: 960px) { .u-pc { display: inline-flex !important; } }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

.btn--primary {
  background: var(--c-accent-deep);
  color: #fff;
}
.btn--primary:hover { background: var(--c-accent-deeper); }

.btn--outline {
  min-width: 260px;
  border-color: var(--c-accent-deep);
  color: var(--c-text);
  background: transparent;
}
.btn--outline .icon--arrow { color: var(--c-accent-deep); }
.btn--outline:hover {
  background: var(--c-accent-deep);
  color: #fff;
}
.btn--outline:hover .icon--arrow { color: #fff; }

.btn--ghost {
  background: var(--c-surface);
  border-color: var(--c-line);
  color: var(--c-text);
}
.btn--ghost:hover { border-color: var(--c-accent-deep); }

.btn--line {
  background: var(--c-line-brand);
  color: #fff;
  font-weight: 700;
}
.btn--line:hover { background: var(--c-line-brand-deep); }
.btn .icon--line { width: 1.45em; height: 1.45em; }

.btn--light {
  background: var(--c-bg);
  color: var(--c-text);
}
.btn--light:hover { background: var(--c-blush-100); }

.icon--arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon--arrow,
.text-link:hover .icon--arrow { transform: translateX(3px); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease-out);
}
.text-link .icon--arrow { color: var(--c-accent-deep); }
.text-link:hover { border-color: var(--c-accent-deep); }

/* =========================================================
   Tags
   ========================================================= */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tags li,
.tag {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--c-blush-100);
  color: var(--c-text);
  font-size: 12px;
  line-height: 1.8;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(250 249 246 / 0.94);
  border-bottom: 1px solid rgb(227 222 212 / 0.6);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding-inline: var(--gutter);
  padding-top: env(safe-area-inset-top);
}

.site-header__brand { min-width: 0; }

/* 下層ではページ名入りの h1（元サイトと同じ文言）になり長くなるため、
   スマホでは1行で切らずに2行まで折り返す */
.site-header__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.4;
  color: var(--c-text-sub);
  text-wrap: wrap;
}
@media (min-width: 768px) {
  .site-header__title {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.site-header__logo { display: inline-block; margin-top: 2px; }
.site-header__logo img { width: auto; height: 30px; }

@media (min-width: 768px) {
  .site-header__title { font-size: 11px; }
  .site-header__logo img { height: 38px; }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 52px;
  height: 52px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}
.menu-btn:hover { border-color: var(--c-accent-deep); }

.menu-btn__lines,
.menu-btn__lines::before {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
}
.menu-btn__lines {
  position: relative;
  margin-top: 4px;
}
.menu-btn__lines::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
}

.menu-btn__label {
  font-family: var(--font-en);
  font-style: italic;
  font-size: 12px;
  line-height: 1;
}

/* =========================================================
   Global nav (dialog)
   ========================================================= */
.gnav {
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  height: 100dvh;
  max-width: 100%;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-bg);
  color: var(--c-text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gnav::backdrop { background: rgb(62 60 57 / 0.4); }

.gnav__inner {
  padding: calc(16px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom));
}

.gnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.gnav__logo img { width: auto; height: 36px; }

.gnav__close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
}
.gnav__close .icon { width: 22px; height: 22px; }

.gnav__address {
  font-size: 13px;
  color: var(--c-text-sub);
  margin-bottom: 20px;
}

.gnav__list > li { border-bottom: 1px solid var(--c-line); }

.gnav__list a,
.gnav__sub summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  transition: color var(--dur) var(--ease-out);
}
.gnav__list a:hover,
.gnav__sub summary:hover,
.gnav__list a[aria-current="page"] { color: var(--c-accent-deep); }

.gnav__sub summary {
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}
.gnav__sub summary::-webkit-details-marker { display: none; }
.gnav__sub summary::after {
  content: "+";
  font-family: var(--font-en);
  font-size: 24px;
  line-height: 1;
  color: var(--c-accent-deep);
}
.gnav__sub[open] summary::after { content: "−"; }

.gnav__sub ul {
  padding: 0 0 12px 16px;
}
.gnav__sub ul a {
  padding: 8px 4px;
  font-size: 15px;
}

.gnav__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}
.gnav__cta .btn { padding: 0 12px; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 16px 0 56px;
}

.hero__inner {
  display: flex;
  flex-direction: column-reverse;
  gap: 28px;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero__visual {
  position: relative;
  isolation: isolate;
  width: 100%;
}

.hero__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 22% 40%;
  /* 上辺を半円にしてアーチ窓の形に */
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}

/* ブランド名の「太陽」をやわらかい円で表現 */
.hero__sun {
  position: absolute;
  z-index: -1;
  top: -6%;
  right: -10%;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-blush-100);
}

.hero__service {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--c-blush-100);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}

.hero__main {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.875rem, 8.4vw, 2.5rem);
  line-height: 1.5;
}
.hero__main span { display: block; }

.hero__sub {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-text-sub);
}

@media (min-width: 768px) {
  .hero { padding: 64px 0 96px; }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 48px;
  }

  .hero__img {
    aspect-ratio: 5 / 6;
    max-height: calc(100svh - var(--header-h) - 96px);
    min-height: 480px;
  }

  .hero__sun {
    top: -4%;
    right: -12%;
    width: 50%;
  }

  /* PCはメインコピーだけ縦書きにして余白の美しさを出す。
     サブコピーは「365」が横倒しになるため横書きのまま */
  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero__service { font-size: 14px; }
  .hero__main {
    margin-top: 36px;
    writing-mode: vertical-rl;
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    line-height: 1.7;
    text-align: start;
  }
  .hero__sub {
    margin-top: 32px;
    font-size: 17px;
    line-height: 2;
  }
}

/* =========================================================
   Section common
   ========================================================= */
.section { padding-block: clamp(72px, 10vw, 128px); }

/* 淡色のセクションは角丸パネルにして、帯より柔らかい印象に */
.course,
.news-guide,
.info,
.section--tint {
  background: var(--c-blush-50);
  margin-inline: clamp(0px, 2vw, 24px);
  border-radius: var(--radius-xl);
}

.sec-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.sec-head--left {
  text-align: left;
  margin-bottom: 24px;
}

.sec-head__en {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1;
  color: var(--c-accent);
}
.sec-head--left .sec-head__en { font-size: clamp(2.25rem, 4vw, 3rem); }

.sec-head__ja {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.6;
}

.sec-foot {
  margin-top: clamp(40px, 6vw, 56px);
  text-align: center;
}

/* =========================================================
   Reason
   ========================================================= */
.reason__list {
  display: grid;
  gap: 48px;
}

.reason-card__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
}

.reason-card__body {
  position: relative;
  padding: 36px 4px 0;
}

.reason-card__num {
  position: absolute;
  top: -30px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--c-bg);
  font-family: var(--font-en);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--c-accent-deep);
}

.reason-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 10px;
}

@media (min-width: 640px) {
  .reason__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 32px;
  }
  .reason-card__img img { aspect-ratio: 4 / 3; }
}

@media (min-width: 1024px) {
  /* 5枚を3+2で中央寄せにするため6カラムで2つずつ占有 */
  .reason__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 64px 40px;
  }
  .reason-card { grid-column: span 2; }
  .reason-card:nth-child(4) { grid-column: 2 / span 2; }
  .reason-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* =========================================================
   Course
   ========================================================= */
.course__list {
  display: flex;
  gap: 16px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 4px var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--c-accent) transparent;
}

.course-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
}

.course-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out);
}
.course-card a:hover { box-shadow: var(--shadow-md); }

.course-card__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.course-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 24px;
}

.course-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.7;
  transition: color var(--dur) var(--ease-out);
}
.course-card a:hover .course-card__title { color: var(--c-accent-deep); }

@media (min-width: 640px) {
  .course__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (min-width: 1024px) {
  .course__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* =========================================================
   Menu
   ========================================================= */
.menu__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 20px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.menu-item__img {
  display: block;
  width: min(100%, 176px);
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  transition: border-color var(--dur) var(--ease-out);
}
.menu-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.menu-item:hover .menu-item__img { border-color: var(--c-accent-deep); }

.menu-item__label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.7;
  transition: color var(--dur) var(--ease-out);
}
.menu-item:hover .menu-item__label { color: var(--c-accent-deep); }

@media (min-width: 768px) {
  .menu__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
  }
}

@media (min-width: 1100px) {
  .menu__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
  }
}

/* =========================================================
   News / Guide
   ========================================================= */
.news-guide__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .news-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

.panel {
  display: flex;
  flex-direction: column;
  padding: 32px 20px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .panel { padding: 48px; }
}

.panel__foot {
  margin-top: auto;
  padding-top: 28px;
  text-align: right;
}

.news-list { border-top: 1px solid var(--c-line); }
.news-list li { border-bottom: 1px solid var(--c-line); }
.news-list a {
  display: block;
  padding: 18px 4px;
}
.news-list__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--c-text-sub);
}
.news-list__title {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  transition: color var(--dur) var(--ease-out);
}
.news-list a:hover .news-list__title { color: var(--c-accent-deep); }

.hours__lead {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--c-accent-deep);
}

.hours__list {
  margin-top: 20px;
  border-top: 1px solid var(--c-line);
}
.hours__list > div {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.hours__list dt { font-weight: 700; }
.hours__list dd { font-variant-numeric: tabular-nums; }
.hours__list small {
  display: block;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* =========================================================
   Blog
   ========================================================= */
.blog__list {
  display: grid;
  gap: 20px;
}

.blog-card a {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 16px;
}

.blog-card__img { grid-row: 1 / 3; }
.blog-card__img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--c-text-sub);
}

.blog-card__title {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  transition: color var(--dur) var(--ease-out);
}
.blog-card a:hover .blog-card__title { color: var(--c-accent-deep); }

@media (min-width: 768px) {
  .blog__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .blog-card a {
    display: flex;
    flex-direction: column;
  }
  .blog-card__img img {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
  }
  .blog-card__meta { margin-top: 16px; }
  .blog-card__title { margin-top: 8px; }
}

/* =========================================================
   Trainer
   ========================================================= */
.trainer__body {
  display: grid;
  gap: 40px;
  align-items: center;
}

.trainer__visual {
  position: relative;
  isolation: isolate;
  width: min(78%, 400px);
  margin-inline: auto;
}
.trainer__visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}
.trainer__sun {
  position: absolute;
  z-index: -1;
  bottom: -8%;
  left: -16%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-blush-100);
}

.trainer__text p + p { margin-top: 1.2em; }
.trainer__lead {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  line-height: 1.7;
  margin-bottom: 1.4em;
}
.trainer__text .btn { margin-top: 36px; }

@media (min-width: 900px) {
  .trainer__body {
    grid-template-columns: 5fr 7fr;
    gap: 80px;
  }
  .trainer__visual { width: 100%; }
}

/* =========================================================
   Information
   ========================================================= */
.info__card {
  display: grid;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.info__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.info__body { padding: 28px 20px 32px; }

.info__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.6;
}

.info__list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.info__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.info__list .icon {
  margin-top: 0.4em;
  color: var(--c-accent-deep);
}
.info__tel {
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.hours--boxed {
  margin-top: 28px;
  padding: 20px 18px;
  background: var(--c-bg);
  border-radius: var(--radius);
}
.hours__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 700;
}
.hours__label .icon { color: var(--c-accent-deep); }
.hours__label span {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 500;
  color: var(--c-text-sub);
}
.hours--boxed .hours__list { border-color: var(--c-line); }

.info__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.info__cta .btn { flex: 1 1 140px; padding: 0 16px; }

@media (min-width: 900px) {
  .info__card { grid-template-columns: 5fr 6fr; }
  .info__img img { aspect-ratio: auto; }
  .info__body { padding: 48px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  margin-top: clamp(48px, 6vw, 80px);
  padding: 64px 0 calc(24px + var(--sp-cta-h) + env(safe-area-inset-bottom));
  background: var(--c-text);
  color: var(--c-bg);
}

@media (min-width: 768px) {
  .site-footer { padding-bottom: 24px; }
}

.site-footer a { transition: color var(--dur) var(--ease-out); }
.site-footer__nav a:hover,
.site-footer__address a:hover,
.site-footer__sns:hover { color: var(--c-blush-100); text-decoration: underline; text-underline-offset: 4px; }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 20px;
  font-size: 14px;
}
.site-footer__heading {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(250 249 246 / 0.2);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
}
.site-footer__nav li + li { margin-top: 6px; }

@media (min-width: 768px) {
  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

.site-footer__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgb(250 249 246 / 0.2);
  font-size: 14px;
}

.site-footer__logo img { width: 96px; }

.site-footer__address p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.site-footer__address p + p { margin-top: 6px; }
.site-footer__address .icon { margin-top: 0.35em; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 16px;
}

.site-footer__sns {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-footer__copy {
  margin-top: 48px;
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
}

/* =========================================================
   SP fixed CTA
   ========================================================= */
/* 体験予約はゴールド、LINE相談は緑。どちらも白文字で、色で用途を見分けられるようにする。
   バーの高さは --sp-cta-h（＋端末の下端のセーフエリア）。フッターの下余白も同じ値で確保している */
.sp-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-cta);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgb(250 249 246 / 0.96);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -2px 8px rgb(62 60 57 / 0.06);
}

.sp-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: calc(var(--sp-cta-h) - 16px);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.sp-cta .icon { width: 20px; height: 20px; color: #fff; }
.sp-cta .is-primary { background: var(--c-accent-deep); }
.sp-cta .is-line { background: var(--c-line-brand); }
.sp-cta .is-line .icon { width: 24px; height: 24px; }

@media (min-width: 768px) {
  .sp-cta { display: none; }
}

/* =========================================================
   Lower pages — common
   ========================================================= */
.container--narrow { max-width: calc(880px + var(--gutter) * 2); }

.u-center { text-align: center; }
.u-mt-lg { margin-top: clamp(48px, 7vw, 80px); }

.note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* ページ見出し：英字ラベル＋ページ名＋パンくず、右に写真 */
.page-hero {
  overflow: hidden;
  padding: 24px 0 clamp(56px, 8vw, 96px);
}

.page-hero__inner {
  display: grid;
  gap: 28px;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-hero__en {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--c-accent);
}

/* 見た目上の大見出し（h1 はヘッダー側）。h1 だった時と同じ組み方を保つ */
.page-hero__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.5;
  font-feature-settings: "palt";
  text-wrap: balance;
  word-break: auto-phrase;
}

.page-hero__visual {
  position: relative;
  isolation: isolate;
}
.page-hero__visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  /* 右上だけ大きく丸めて、トップの「太陽」の円と呼応させる */
  border-radius: var(--radius-lg) clamp(80px, 12vw, 180px) var(--radius-lg) var(--radius-lg);
}
.page-hero__sun {
  position: absolute;
  z-index: -1;
  top: -12%;
  right: -8%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-blush-100);
}

@media (min-width: 768px) {
  .page-hero { padding-top: 56px; }
  .page-hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
  }
  .page-hero__visual img { aspect-ratio: 16 / 9; }
}

.breadcrumb {
  margin-top: 20px;
  font-size: 13px;
  color: var(--c-text-sub);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb li + li::before {
  content: "/";
  margin-inline: 10px;
  color: var(--c-accent);
}
.breadcrumb a {
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
.breadcrumb a:hover { color: var(--c-accent-deep); }

/* セクション内の小見出し */
.sub-head {
  margin-bottom: 32px;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.7;
}
.sub-head::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 16px auto 0;
  background: var(--c-accent);
}

/* リード文：長文の中央揃えは読みにくいので、スマホは左揃え */
.lead {
  max-width: 760px;
  margin-inline: auto;
}
.lead p + p { margin-top: 1em; }
.lead__catch {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.8;
  color: var(--c-accent-deep);
}
@media (min-width: 768px) {
  .lead { text-align: center; }
}

.prose p + p { margin-top: 1em; }

/* 写真を並べるだけのギャラリー */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (min-width: 900px) {
  .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

/* 表＋画像など、左右2分割 */
.split {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: 40px;
  }
}
.split__img img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* 画像＋テキスト */
.media {
  display: grid;
  gap: 24px;
  align-items: center;
}
.media + .media { margin-top: clamp(56px, 8vw, 96px); }

.media__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.media__img--arch {
  width: min(80%, 420px);
  margin-inline: auto;
}
.media__img--arch img {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}

.media__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 3rem;
  line-height: 1;
  color: var(--c-accent);
}

.media__title {
  margin-bottom: 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.7;
}

.media__body p + p { margin-top: 1em; }
.media__body .btn { margin-top: 28px; }

.signature {
  text-align: right;
  font-family: var(--font-serif);
  font-weight: 600;
}

@media (min-width: 900px) {
  .media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
  }
  .media--reverse .media__img { order: 2; }
  .media__img--arch { width: 100%; }
}

/* 概要テーブル（dl） */
.data-table {
  padding: 4px 20px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.data-table > div {
  display: grid;
  gap: 2px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line);
}
.data-table > div:last-child { border-bottom: 0; }
.data-table dt {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-accent-deep);
}
@media (min-width: 640px) {
  .data-table { padding: 8px 40px; }
  .data-table > div {
    grid-template-columns: 9em minmax(0, 1fr);
    gap: 24px;
    padding: 20px 0;
  }
  .data-table dt { font-size: 15px; }
}

/* 地図 */
.map {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--c-blush-100);
}
.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (min-width: 768px) {
  .map { aspect-ratio: 16 / 7; }
}
/* カード内に置く小さめの地図（トップの店舗情報） */
.map--inline {
  margin-top: 24px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
}

/* スタッフ */
.staff-list {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .staff-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

.staff-card {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: 32px 20px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
  .staff-card { padding: 40px; }
}

.staff-card__img {
  width: 168px;
  margin-inline: auto;
}
.staff-card__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--radius) var(--radius);
}

.staff-card__name {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.5;
}

.staff-card .data-table { padding: 0; }
.staff-card .data-table > div {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 0;
}
.staff-card__head { text-align: center; }
.staff-card__role { font-size: 13px; color: var(--c-text-sub); }
/* 経歴は「トレーナー歴」「資格」を並べて、ひと目で読めるようにする */
.staff-card__career {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.staff-card__career > div {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--c-blush-50);
  text-align: center;
}
.staff-card__career dt { font-size: 12px; color: var(--c-text-sub); }
.staff-card__career dd { font-weight: 700; line-height: 1.6; }
.staff-card__label {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--c-accent-deep);
}
.staff-card__points { display: grid; gap: 6px; }
.staff-card__points li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
}
.staff-card__points li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.staff-card__message {
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font-size: 14px;
}

/* よくある質問（details のアコーディオン） */
.faq-list {
  display: grid;
  gap: 12px;
  max-width: 880px;
  margin-inline: auto;
}

.faq-item {
  background: var(--c-surface);
  border-radius: var(--radius);
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 56px 18px 18px;
  font-weight: 500;
  line-height: 1.8;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  translate: 0 -50%;
  font-family: var(--font-en);
  font-size: 28px;
  line-height: 1;
  color: var(--c-accent-deep);
}
.faq-item[open] summary::after { content: "−"; }

.faq-item__badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-accent-deep);
  color: #fff;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
}
.faq-item__badge--a {
  background: var(--c-blush-100);
  color: var(--c-accent-deep);
}

.faq-item__a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 18px 22px;
}
.faq-item__a > div { padding-top: 2px; }

@media (min-width: 768px) {
  .faq-item summary { padding: 22px 64px 22px 28px; }
  .faq-item__a { padding: 0 28px 26px; }
}

.faq-group + .faq-group { margin-top: clamp(48px, 7vw, 72px); }

/* お客様の声 */
.voice-list {
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px) {
  .voice-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.voice-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 22px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
  .voice-card { padding: 36px 32px; }
}

.voice-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.7;
}

.voice-card__body {
  font-size: 14px;
  line-height: 1.95;
}
.voice-card__body p + p { margin-top: 0.8em; }

.voice-card__profile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--c-line);
  font-size: 13px;
  color: var(--c-text-sub);
}
.voice-card__profile .icon { color: var(--c-accent-deep); }

/* 写真つき（お客様の声ページ） */
.voice-card--photo { gap: 20px; }
.voice-card__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (min-width: 900px) {
  .voice-card--photo {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    column-gap: 40px;
  }
  .voice-card--photo .voice-card__img { grid-row: 1 / span 5; }
  .voice-card--photo .voice-card__img img { aspect-ratio: 1; }
}

/* ご利用の流れ */
.flow {
  max-width: 960px;
  margin-inline: auto;
}

.flow__item {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 0 0 48px 60px;
}
/* ステップ同士をつなぐ点線 */
.flow__item::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 4px;
  left: 21px;
  border-left: 1px dashed var(--c-accent);
}
.flow__item:last-child { padding-bottom: 0; }
.flow__item:last-child::before { display: none; }

.flow__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-accent-deep);
  color: #fff;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 20px;
  line-height: 1;
}

.flow__title {
  padding-top: 4px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.6;
}
.flow__body p + p { margin-top: 0.6em; }

.flow__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  .flow__item {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: auto 1fr;
    column-gap: 40px;
    padding-left: 76px;
  }
  .flow__item::before { left: 27px; top: 60px; }
  .flow__num {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
  .flow__title { padding-top: 10px; }
  .flow__img {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* お悩み・チェック項目のカード */
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px) {
  .check-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
  .check-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.check-card {
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius);
}
.check-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.check-card__text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}
.check-card__text .icon {
  margin-top: 0.2em;
  color: var(--c-accent-deep);
}
@media (min-width: 768px) {
  .check-card__text {
    padding: 16px 20px 20px;
    font-size: 15px;
  }
}

/* チェックリスト（セルフチェック・おすすめの人など） */
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist .icon {
  margin-top: 0.35em;
  color: var(--c-accent-deep);
}

.checklist-cards {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .checklist-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.checklist-card {
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.checklist-card > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.checklist-card__body { padding: 22px 22px 26px; }
.checklist-card__label {
  display: inline-block;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--c-blush-100);
  font-size: 12px;
  line-height: 1.8;
}
.checklist-card__title {
  margin: 8px 0 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.6;
}

/* お客様の変化（写真ギャラリー） */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
}
@media (min-width: 900px) {
  .case-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
  }
}
/* ビフォーアフター画像は比率がまちまちで文字入りのため、切らずに全体を見せる */
.case-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--c-surface);
  border-radius: var(--radius);
}

/* セクション冒頭に1枚だけ置くアーチ型の写真 */
.feature-img {
  width: min(72%, 360px);
  margin: 0 auto clamp(48px, 7vw, 72px);
}
.feature-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}

/* 元サイトで強調（下線＋斜体）されていた語 */
.marker {
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.case-card__caption {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}
@media (min-width: 768px) {
  .case-card__caption { font-size: 16px; }
}

/* 番号つきメソッド */
.method-list {
  display: grid;
  gap: clamp(48px, 7vw, 80px);
}
.method-list .media + .media { margin-top: 0; }

/* 相談への誘導ブロック */
.cta-block {
  display: grid;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.cta-block__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.cta-block__body { padding: 32px 22px 36px; }
.cta-block__body p + p { margin-top: 1em; }
.cta-block__catch {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--c-accent-deep);
}
.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.cta-block__actions .btn { flex: 1 1 160px; padding: 0 16px; }
@media (min-width: 900px) {
  .cta-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .cta-block__img img { aspect-ratio: auto; }
  .cta-block__body { padding: 56px 56px 56px 48px; }
}

/* 一覧ページ：サイドバーつき */
.with-side {
  display: grid;
  gap: 48px;
}
/* グリッドの子要素が中身の幅で広がり、横スクロールが出るのを防ぐ */
.with-side > * { min-width: 0; }
@media (min-width: 1024px) {
  .with-side {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: start;
    gap: 56px;
  }
}

.side-box {
  padding: 24px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.side-box + .side-box { margin-top: 20px; }
.side-box__title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
}
.side-box li { border-bottom: 1px solid var(--c-line); }
.side-box li:last-child { border-bottom: 0; }
.side-box a {
  display: block;
  padding: 10px 2px;
  font-size: 14px;
  transition: color var(--dur) var(--ease-out);
}
.side-box a:hover,
.side-box a[aria-current="page"] { color: var(--c-accent-deep); }

@media (min-width: 768px) {
  .with-side .blog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .with-side .blog__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 一覧ページではコースを縦に並べる（トップの横スクロールは使わない） */
.course__list--stack {
  display: grid;
  gap: 20px;
  margin-inline: 0;
  padding: 0;
  overflow: visible;
}

/* ページ送り */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease-out);
}
.pagination a:hover { border-color: var(--c-accent-deep); }
.pagination [aria-current="page"] {
  background: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
  color: #fff;
}

/* お問い合わせ */
.tel-box {
  padding: 36px 22px;
  text-align: center;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.tel-box__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
}
.tel-box__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 16px;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-deep);
}

.form {
  padding: 12px 20px 36px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .form { padding: 16px 48px 48px; }
}

.form__row {
  display: grid;
  gap: 10px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 768px) {
  .form__row {
    grid-template-columns: 13em minmax(0, 1fr);
    gap: 24px;
  }
  .form__row > .form__label { padding-top: 10px; }
}

.form__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
fieldset.form__row {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  min-width: 0;
}
fieldset.form__row legend {
  float: left;
  padding: 0;
}

.req {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--c-accent-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.9;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: var(--c-bg);
  color: inherit;
  font: inherit;
  transition: border-color var(--dur) var(--ease-out);
}
.form textarea {
  min-height: 180px;
  resize: vertical;
}
.form input:focus,
.form textarea:focus { border-color: var(--c-accent-deep); }

.radio-group {
  display: grid;
  gap: 4px;
}
.radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}
.form input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-accent-deep);
}
.file-group {
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.form input[type="file"] {
  max-width: 100%;
  color: var(--c-text-sub);
  font: inherit;
  font-size: 13px;
}
.form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out);
}
.form input[type="file"]::file-selector-button:hover { border-color: var(--c-accent-deep); }

.form__submit {
  margin-top: 36px;
  text-align: center;
}
.form__submit .btn { min-width: 260px; }

/* =========================================================
   第2段階：共通部品（ヘッダー2段・予約導線・確認中表示など）
   ========================================================= */
.u-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.u-tab { display: none !important; }
@media (min-width: 768px) { .u-tab { display: inline-flex !important; } }

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: calc(var(--z-header) + 1);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--c-text);
  color: #fff;
}
.skip-link:focus { top: 8px; }

/* 外部サイトへ移動するリンクの印 */
.icon--ext {
  width: 0.95em;
  height: 0.95em;
  opacity: 0.75;
}
.icon--prev { transform: rotate(180deg); }

/* 確認中（オーナー確認待ちの情報） */
.pending {
  display: inline-block;
  padding: 0 10px;
  border: 1px dashed var(--c-accent-deep);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-accent-deep);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.9;
  white-space: nowrap;
  vertical-align: 0.1em;
}
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text-sub);
}
.section--tint .notice { background: var(--c-surface); }

.sub-title {
  margin: 32px 0 14px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.6;
}
.sub-title:first-child { margin-top: 0; }

/* ヘッダー：PC は2段目にメインメニュー */
.site-nav { display: none; }
@media (min-width: 1100px) {
  .site-nav {
    display: block;
    border-top: 1px solid rgb(227 222 212 / 0.6);
  }
  .site-nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 4px;
    max-width: calc(var(--container) + var(--gutter) * 2 + 120px);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .site-nav a {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    transition: color var(--dur) var(--ease-out);
  }
  .site-nav a:hover,
  .site-nav a[aria-current="page"] { color: var(--c-accent-deep); }
  .site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--c-accent);
    text-underline-offset: 6px;
  }
  html { scroll-padding-top: calc(var(--header-h) + 48px); }
}

/* メニュー（ダイアログ）内の予約導線・補助リンク */
.gnav__cta {
  grid-template-columns: 1fr;
  margin: 0 0 8px;
}
.gnav__note {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--c-text-sub);
}
.gnav__sublist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 20px;
  font-size: 14px;
}
.gnav__sublist a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
}
.gnav__address {
  margin: 20px 0 0;
}

/* ---- ファーストビュー ---- */
.hero__area {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--c-blush-100);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
}
.hero__main { margin-top: 14px; }
.hero__text { margin-top: 14px; }
.hero__sub { margin-top: 0; }
.hero__desc {
  margin-top: 12px;
  font-weight: 500;
  line-height: 1.9;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.hero__actions .btn {
  flex: 1 1 220px;
  padding: 0 18px;
}
.cta-final__price strong,
.gnav__note strong {
  color: var(--c-accent-deep);
  font-size: 1.15em;
}
.trial-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: inherit;
  gap: 2px 14px;
}
.trial-inline__label {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--c-blush-100);
  font-size: 12px;
  color: var(--c-text);
}
.cta-final__price .trial-inline { justify-content: center; }

.data-table small {
  display: block;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text-sub);
}

/* スマホでは写真の高さを抑え、地域・コピー・予約ボタンを早く見せる。顔が切れない位置で切り抜く */
@media (max-width: 767px) {
  .hero { padding-top: 12px; }
  .hero__inner { gap: 20px; }
  .hero__img {
    aspect-ratio: 16 / 10;
    object-position: 24% 26%;
    border-radius: 120px 120px var(--radius-lg) var(--radius-lg);
  }
  .hero__sun { width: 38%; top: -8%; right: -6%; }
  .hero__actions { margin-top: 18px; }
  .hero__main { font-size: clamp(1.75rem, 8vw, 2.25rem); }
}

@media (min-width: 768px) {
  .hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .hero__copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 28px;
    align-items: start;
    text-align: left;
  }
  .hero__area {
    grid-column: 1 / -1;
    justify-self: start;
    font-size: 14px;
  }
  .hero__main {
    grid-row: 2;
    grid-column: 1;
    margin-top: 28px;
    font-size: clamp(2rem, 3.2vw, 3rem);
  }
  .hero__text {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    margin-top: 0;
  }
  .hero__sub { font-size: 16px; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* ---- 共感 ---- */
.empathy { text-align: center; }
.empathy__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.6;
}
.empathy__list {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 32px auto 0;
  text-align: left;
}
.empathy__list li {
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--c-blush-50);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.7;
}
.empathy__text {
  margin-top: 28px;
  line-height: 2;
}

/* ---- 3つのステップ ---- */
.steps {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}
.step {
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.step__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.step__body {
  position: relative;
  padding: 36px 22px 26px;
}
.step__num {
  position: absolute;
  top: -28px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-surface);
  font-family: var(--font-en);
  font-style: italic;
  font-size: 24px;
  color: var(--c-accent-deep);
}
.step__title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
}
.steps + .note { margin-top: 24px; }

/* ---- 目指す変化 ---- */
.goal {
  display: grid;
  gap: 32px;
  align-items: center;
}
.goal__visual img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}
.goal__visual {
  width: min(80%, 380px);
  margin-inline: auto;
}
.goal__title {
  margin: 10px 0 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.625rem, 3.4vw, 2.25rem);
  line-height: 1.5;
}
.goal__list {
  display: grid;
  gap: 12px;
  margin: 24px 0 16px;
}
.goal__list li {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-left: 2px solid var(--c-accent);
  background: var(--c-blush-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.8;
}
.goal__label {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-accent-deep);
}
@media (min-width: 900px) {
  .goal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .goal__visual { width: 100%; }
}

/* ---- お客様の声（一覧カード） ---- */
.voice-tiles {
  display: grid;
  gap: 20px;
}
@media (min-width: 768px) {
  .voice-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
  .voice-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.voice-tile a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease-out);
}
.voice-tile a:hover { box-shadow: var(--shadow-md); }
.voice-tile__img {
  background: var(--c-bg);
}
/* ビフォーアフター写真は文字入り・縦長が多いので切らずに見せる */
.voice-tile__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.voice-tile__img--none {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  font-size: 13px;
  color: var(--c-text-sub);
}
.voice-tile__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 20px 22px 24px;
}
.voice-tile__profile {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--c-text-sub);
}
.voice-tile__profile .icon { color: var(--c-accent-deep); }
.voice-tile__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.voice-tile__excerpt {
  font-size: 14px;
  line-height: 1.9;
}
.voice-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-accent-deep);
}
.voice-tile a:hover .icon--arrow { transform: translateX(3px); }

/* お客様の声（詳細） */
.voice-detail {
  display: grid;
  gap: 28px;
  padding: 28px 22px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.voice-detail__img img {
  width: 100%;
  max-height: 560px;
  object-fit: contain;
  background: var(--c-bg);
  border-radius: var(--radius);
}
.voice-detail__title {
  margin: 8px 0 16px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.6;
}
.voice-detail__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 20px;
  font-size: 13px;
}
.voice-detail__tags dt { font-weight: 700; }
.voice-detail__text p + p { margin-top: 1em; }
.voice-detail__text + .note { margin-top: 24px; }
@media (min-width: 768px) {
  .voice-detail { padding: 48px; }
}

/* 前後の記事 */
.post-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  font-size: 14px;
}
.post-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.post-nav a:hover { color: var(--c-accent-deep); }
.post-nav__next { justify-self: end; text-align: right; }
.post-nav__list {
  padding: 8px 18px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
}

/* ---- 担当者と店内 ---- */
.studio {
  display: grid;
  gap: 24px;
}
.studio__trainer,
.studio__room {
  display: grid;
  gap: 20px;
  padding: 28px 22px;
  background: var(--c-blush-50);
  border-radius: var(--radius-lg);
}
.studio__trainer p + p { margin-top: 0.8em; }
.studio__photo {
  width: 140px;
}
.studio__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--radius) var(--radius);
}
.studio__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
}
.studio__name span {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--c-text-sub);
}
.studio__career {
  display: inline-block;
  margin-bottom: 12px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--c-surface);
  font-size: 13px;
  font-weight: 500;
}
.studio .text-link { margin-top: 16px; }
.studio__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.studio__gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (min-width: 640px) {
  .studio__trainer { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
  .studio__photo { width: 100%; }
}
@media (min-width: 1024px) {
  .studio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .studio__trainer, .studio__room { padding: 40px; }
}

/* ---- 初回体験 ---- */
.trial {
  display: grid;
  gap: 24px;
}
.trial__about,
.trial__price {
  padding: 28px 22px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.trial__actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
@media (min-width: 900px) {
  .trial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .trial__about, .trial__price { padding: 40px; }
}

.flow-mini {
  display: grid;
  gap: 8px;
  counter-reset: flow;
}
.flow-mini li {
  display: flex;
  align-items: center;
  gap: 12px;
  counter-increment: flow;
}
.flow-mini li::before {
  content: counter(flow);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-blush-100);
  font-family: var(--font-en);
  font-style: italic;
  font-size: 15px;
  color: var(--c-accent-deep);
}

/* ---- 料金 ---- */
.price-list {
  display: grid;
  gap: 12px;
}
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 18px 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.price-row__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
}
.price-row__detail {
  font-size: 13px;
  line-height: 1.7;
}
.price-row__meta {
  font-size: 13px;
  color: var(--c-text-sub);
}
.price-row__price {
  font-size: 1.375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-deep);
  white-space: nowrap;
}
.price-row__spec {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding-top: 10px;
  border-top: 1px dashed var(--c-line);
  font-size: 13px;
}
.price-row__spec > div { display: flex; gap: 8px; align-items: baseline; }
.price-row__spec dt { color: var(--c-text-sub); }
/* 「（税込）」は金額より小さく添える */
.tax { font-size: 0.8em; font-weight: 400; }
.price-row__price .tax,
.plan-cards__price .tax { font-size: 13px; }

/* 回数券：回数ごとのカード。通常料金と体験当日ご契約の料金を同じ形で並べる。
   スマホでは縦に積み、横長の表を縮小しない */
.ticket-course {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: var(--c-blush-50);
}
.section--tint .ticket-course { background: var(--c-surface); }
.ticket-course__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
}
.ticket-course__detail { font-size: 14px; }
.ticket-tax {
  margin-top: 10px;
  font-size: 13px;
  color: var(--c-text-sub);
}
.ticket-cards {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.ticket-card {
  padding: 20px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.ticket-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.ticket-card__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.4;
}
.ticket-card__validity { font-size: 14px; color: var(--c-text-sub); }
.ticket-card__validity strong { color: var(--c-text); font-weight: 700; }
.ticket-card__plans {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.ticket-card__plan {
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.ticket-card__plan--discount {
  border-color: var(--c-blush-100);
  background: #FBF8F1;
}
.ticket-card__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-weight: 700;
  font-size: 14px;
}
.ticket-card__off {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--c-accent-deep);
  color: #fff;
  font-size: 12px;
  line-height: 1.8;
}
.ticket-card__amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.ticket-card__amounts > div { display: grid; }
.ticket-card__amounts dt { font-size: 12px; line-height: 1.6; color: var(--c-text-sub); }
.ticket-card__amounts dd {
  font-size: 1.25rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ticket-card__cond {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-blush-100);
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text-sub);
}
@media (min-width: 640px) {
  .ticket-card { padding: 24px 28px; }
  .ticket-card__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 食事：セッション内のアドバイスと、別料金のオンラインサポートを並べて区別する */
.support-split {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .support-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.support-split__item {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
}
.support-split__tag {
  justify-self: start;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--c-blush-100);
  font-size: 12px;
  line-height: 1.9;
}
.support-split__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.6;
}
.support-split__price {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--c-accent-deep);
}
.support-split__price .pending { font-size: 12px; }

/* 予約・ご相談：ご来店の前に */
.before-visit {
  padding: 24px 22px;
  border-radius: var(--radius-lg);
  background: var(--c-blush-50);
}
.before-visit p + p { margin-top: 10px; }
@media (min-width: 768px) { .before-visit { padding: 32px 40px; } }

/* ---- アクセス（トップ） ---- */
.access {
  display: grid;
  gap: 24px;
}
@media (min-width: 900px) {
  .access { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .access .map { aspect-ratio: 4 / 3.4; }
}

.home-news {
  margin-top: clamp(48px, 7vw, 72px);
  padding: 28px 22px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.home-news .news-list { margin-bottom: 16px; }
@media (min-width: 768px) { .home-news { padding: 36px 40px; } }

/* ---- 最後の体験予約案内 ---- */
.cta-final__box {
  padding: 40px 22px;
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-blush-100);
  border-radius: var(--radius-xl);
}
.cta-final__en {
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(2.25rem, 5vw, 3rem);
  line-height: 1;
  color: var(--c-accent);
}
.cta-final__title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.6;
}
.cta-final__text { margin-top: 14px; }
.cta-final__price {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.9;
}
.cta-final__actions {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 24px auto 16px;
}
@media (min-width: 640px) {
  .cta-final__actions { grid-template-columns: 1fr 1fr; }
  .cta-final__box { padding: 56px 48px; }
}
.cta-final__link { margin-top: 16px; }

/* ---- 下層：ページ見出しのリード文・画像なし版 ---- */
.page-hero__lead {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.8;
}
.page-hero--text .page-hero__inner { grid-template-columns: 1fr; }

/* ---- 記事（読みもの・お知らせ） ---- */
.article {
  padding: 28px 22px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) { .article { padding: 48px 56px; } }
.article__head { margin-bottom: 24px; }
.article__title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.8vw, 1.625rem);
  line-height: 1.6;
}
.article__thumb img {
  width: min(100%, 520px);
  margin: 0 auto 28px;
  border-radius: var(--radius);
}
.article__body { line-height: 2; overflow-wrap: anywhere; }
.article__body > * + * { margin-top: 1em; }
.article__body h2,
.article__body h3,
.article__body h4 {
  margin-top: 1.8em;
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.6;
}
.article__body h2 { font-size: 1.375rem; }
.article__body h3 { font-size: 1.1875rem; }
.article__body ul { padding-left: 1.4em; list-style: disc; }
.article__body ol { padding-left: 1.4em; list-style: decimal; }
.article__body img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}
.article__body a {
  color: var(--c-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.article__body th,
.article__body td {
  padding: 8px 10px;
  border: 1px solid var(--c-line);
}
.blog-card__noimg {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--c-blush-100);
  font-family: var(--font-en);
  font-style: italic;
  color: var(--c-accent-deep);
}
.tags a:hover { color: var(--c-accent-deep); }

/* ---- 予約・ご相談の窓口 ---- */
.contact-cards {
  display: grid;
  gap: 20px;
}
@media (min-width: 900px) {
  .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 22px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.contact-card--main { border: 2px solid var(--c-accent); }
.contact-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.25rem;
}
.contact-card__title .icon { color: var(--c-accent-deep); }
.contact-card__title .icon--line { color: var(--c-line-brand); width: 1.3em; height: 1.3em; }
.contact-card .btn { margin-top: auto; }
.contact-card__tel {
  font-size: 1.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent-deep);
}

/* ---- サービス一覧（下層の関連リンク） ---- */
.service-links {
  display: grid;
  gap: 12px;
}
@media (min-width: 768px) {
  .service-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.service-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease-out);
}
.service-links a:hover { border-color: var(--c-accent-deep); }
.service-links__name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.0625rem;
}
.service-links__desc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--c-text-sub);
}
.service-links .icon--arrow { color: var(--c-accent-deep); flex-shrink: 0; }

/* 写真が用意できていない箇所の枠（確認用サイトのみで使用） */
.photo-pending {
  display: grid;
  place-items: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  padding: 16px;
  border: 1px dashed var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-bg);
  text-align: center;
  font-size: 13px;
  color: var(--c-text-sub);
}

/* 確認する項目などのカード */
.point-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
.point {
  padding: 22px 22px 24px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
.point__title {
  margin-bottom: 6px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-accent-deep);
}
.point p + p { line-height: 1.9; }

.checklist--card {
  padding: 8px 24px;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
}
/* 料金：3つの通い方 */
.plan-cards {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .plan-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
.plan-cards a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 24px 22px;
  background: var(--c-blush-50);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-out);
}
.plan-cards a:hover { border-color: var(--c-accent); }
.plan-cards__step { font-size: 12px; color: var(--c-text-sub); }
.plan-cards__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.375rem;
}
.plan-cards__desc { font-size: 14px; line-height: 1.8; }
.plan-cards__price {
  margin-top: auto;
  padding-top: 10px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--c-accent-deep);
}

.point-grid--3 { }
@media (min-width: 900px) {
  .point-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.section--tint .point { background: var(--c-surface); }
.section:not(.section--tint) .point { background: var(--c-blush-50); }

.data-table--plain { padding: 0; background: transparent; }
.contact-card__price { font-size: 13px; line-height: 1.9; }

/* 確認中の項目一覧 */
.pending-list {
  display: grid;
  gap: 10px;
}
.pending-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  background: var(--c-surface);
  border-radius: var(--radius);
}

/* 道順の写真枠（準備中） */
.route {
  display: grid;
  gap: 12px;
}
@media (min-width: 768px) {
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

.u-mt-0 { margin-top: 0; }
.u-mt-md { margin-top: 32px; }

/* =========================================================
   Page-specific（共通コンポーネントで表現できないものだけ）
   ========================================================= */
/* --- [pages-a] bodymake / training / health --- */
/* --- [/pages-a] --- */
/* --- [pages-b] conditioning / other / treatment-policy --- */
/* 該当データが空の一覧（お客様の声が0件など）は見出し＋一覧ボタンだけになるため、間延びさせない */
.sec-head + .sec-foot { margin-top: 0; }
/* 横長写真をアーチ型に切り抜くと中央の人物が切れるもの用に、右寄りを残す */
.feature-img--focus-right img { object-position: 85% 50%; }
/* --- [/pages-b] --- */
/* --- [pages-c] list / voice / news / blog --- */
/* お客様の声ページの写真は文字入りのビフォーアフター（縦長が多い）。
   共通の 4:3 / 1:1 切り抜きだと頭や「BEFORE/AFTER」が切れるので、全体を見せる */
.voice-list--ba .voice-card__img {
  width: min(100%, 360px);
  margin-inline: auto;
}
.voice-list--ba .voice-card__img img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--c-bg);
}
@media (min-width: 900px) {
  .voice-list--ba .voice-card__img {
    width: auto;
    margin-inline: 0;
  }
}
/* --- [/pages-c] --- */
/* --- [pages-d] faq / contact --- */
/* よくある質問：カテゴリへのページ内リンク */
.faq-nav { margin-bottom: clamp(48px, 7vw, 72px); }
.faq-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
/* 同じページの下へ移動するリンクなので矢印を下向きに（hover の translateX も下方向になる） */
.faq-nav .icon--arrow { rotate: 90deg; }
/* 固定ヘッダー分（scroll-padding-top）に加え、見出しの上に少し余白を残す */
.faq-group { scroll-margin-top: 24px; }
/* --- [/pages-d] --- */

/* =========================================================
   Motion preference
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
  }
}

/* 初回体験：90分をおすすめとして案内し、60分も並べて選べる */
.trial-options { display: grid; gap: 16px; }
.trial-option { min-width: 0; padding: 22px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.trial-option--recommended { border: 2px solid var(--c-accent-deep); background: #FBF8F1; }
.trial-option h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 10px; }
.trial-option__badge { display: inline-block; padding: 4px 12px; margin-bottom: 12px; border-radius: 999px; background: var(--c-accent-deep); color: #fff; font-size: 13px; font-weight: 700; }
.trial-option__price { margin: 12px 0; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.trial-option .btn { margin: 12px 0; max-width: 100%; }
.ticket-card__recommend { margin-bottom: 16px; }
.ticket-card__recommend span { display: block; color: var(--c-text-sub); font-size: 12px; margin-bottom: 4px; }
.ticket-course__detail .nw { white-space: normal; }
@media (max-width: 374px) {
  .ticket-card__amounts { grid-template-columns: 1fr; }
  .sp-cta a { font-size: 13px; gap: 5px; }
}

/* 提供写真の構図に合わせる。カウンセリング・指導・施術は全体を残す。 */
img.photo--counseling { aspect-ratio: 4 / 3; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }
img.photo--movement { aspect-ratio: 4 / 3; height: auto; object-fit: contain; object-position: 50% 42%; border-radius: var(--radius-lg); }
img.photo--treatment { aspect-ratio: 4 / 3; height: auto; object-fit: contain; object-position: 50% 56%; border-radius: var(--radius-lg); }
img.photo--lunge { aspect-ratio: 4 / 3; height: auto; object-fit: contain; object-position: 48% 50%; border-radius: var(--radius-lg); }
img.photo--posture { aspect-ratio: 3 / 2; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }
img.photo--about { aspect-ratio: 4 / 3; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }
img.photo--overview { aspect-ratio: 4 / 3; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }
img.photo--mirror { aspect-ratio: 3 / 2; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }
img.photo--machine { aspect-ratio: 1212 / 1297; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }
.goal__visual img.photo--goal { aspect-ratio: 941 / 1672; height: auto; object-fit: contain; object-position: 50% 35%; border-radius: var(--radius-lg); }
.hero__img.photo--lifestyle { aspect-ratio: 3 / 2; height: auto; min-height: 0; max-height: none; object-fit: cover; object-position: 35% 50%; border-radius: var(--radius-lg) 90px var(--radius-lg) var(--radius-lg); }
.photo-grid--studio { align-items: start; }
.photo-grid--studio figure { margin: 0; min-width: 0; }
.photo-grid--studio figcaption { margin-top: 12px; font-size: 14px; color: var(--c-text-sub); }
@media (max-width: 767px) {
  .hero__img.photo--lifestyle { aspect-ratio: 6 / 5; object-position: 15% 50%; border-top-right-radius: 64px; }
  .photo-grid--studio { grid-template-columns: 1fr; }
  .photo-grid--studio img.photo--machine { max-width: 420px; margin-inline: auto; }
}
@media (min-width: 768px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .photo-grid--studio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* About：04の指導写真は頭上の手と両足を含む元の構図を表示 */
img.photo--daily-review { aspect-ratio: 1536 / 1024; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }

/* 02 動かす：伸ばした手と脚を含む構図を表示 */
img.photo--balance { aspect-ratio: 1536 / 1024; height: auto; object-fit: contain; object-position: 50% 50%; border-radius: var(--radius-lg); }

/* 指導の写真は元の比率で表示し、手足・マット・ケア部位を残す。 */
img.photo--session {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
  object-position: 50% 50%; border-radius: var(--radius-lg);
}
img.photo--sakamoto-black-posture,
img.photo--hiraoka-teal-posture { object-position: 50% 18%; }
img.photo--sakamoto-pink-hip-stretch,
img.photo--hiraoka-teal-half-kneeling { object-position: 48% 58%; }
img.photo--sakamoto-pink-core,
img.photo--hiraoka-teal-knee-plank,
img.photo--sakamoto-black-bird-dog { object-position: 50% 65%; }
img.photo--sakamoto-white-foot-care { object-position: 60% 65%; }
img.photo--sakamoto-white-quadruped { object-position: 45% 65%; }
img.photo--hiraoka-teal-squat { object-position: 48% 60%; }
img.photo--sakamoto-black-walking { object-position: 45% 60%; }
.media.media--text-only {
  grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 760px;
  margin-inline: auto; padding-left: 24px; border-left: 2px solid var(--c-accent);
}
.media--text-only .media__body { min-width: 0; }
.plan-consultation { max-width: 480px; margin-inline: auto; }
/* htmlのscroll-paddingに加え、固定ヘッダー下へ余白を確保。 */
#program-title { scroll-margin-top: 24px; }

/* 初回体験の独立した担当者紹介。写真全体を残して二人を紹介する。 */
.studio.studio--first-trial { grid-template-columns: minmax(0, 1fr); }
.first-trial-trainers { display: grid; gap: 24px; }
.first-trial-trainers__card { min-width: 0; padding: 24px; background: var(--c-blush-50); border-radius: var(--radius-lg); }
.first-trial-trainers__photo { aspect-ratio: 4 / 3; margin-bottom: 20px; overflow: hidden; border-radius: var(--radius-lg); }
.first-trial-trainers__photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.first-trial-trainers__card .studio__career { margin-top: 12px; }
@media (min-width: 768px) {
  .first-trial-trainers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 指定素材の構図と自然な色味を保つ、掲載箇所限定の画像設定。 */
.page-hero__visual img.photo--price-table { aspect-ratio: 16 / 10; object-fit: cover; object-position: 48% 65%; }
#greeting img.photo--representative { width: 100%; max-width: 380px; height: auto; aspect-ratio: 3 / 4; object-fit: contain; object-position: 50% 50%; margin-inline: auto; }
.staff-card__img img.photo--hiraoka-profile { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; object-position: 50% 50%; }

.staff-card__img.staff-card__img--counseling { width: 100%; max-width: 380px; }
.staff-card__img img.photo--hiraoka-profile { border-radius: var(--radius-lg); }

/* お客様の実例：原本の比較写真を切り抜かず、横並びで読む。 */
.customer-cases { display: grid; gap: 48px; }
.customer-case { min-width: 0; padding: 28px 20px; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); scroll-margin-top: 24px; }
.customer-case__profile { color: var(--c-text-sub); font-size: 14px; margin-bottom: 8px; }
.customer-case__title { font-family: var(--font-serif); font-size: clamp(1.35rem, 3vw, 1.85rem); margin-bottom: 28px; }
.customer-case__layout { display: grid; gap: 28px; }
.customer-case__layout > *, .customer-comparison__side { min-width: 0; }
.customer-comparison { margin: 0; }
.customer-comparison__pair, .customer-teasers__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.customer-comparison__label { text-align: center; font-size: 13px; margin-bottom: 10px; }
.customer-comparison__zoom { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.customer-comparison__zoom:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 4px; }
.customer-comparison__zoom img, .customer-teasers__pair img { display: block; width: 100%; height: auto; object-fit: contain; }
.customer-comparison > figcaption { color: var(--c-text-sub); font-size: 12px; margin-top: 12px; }
.customer-case__angles { margin-top: 24px; border-top: 1px solid var(--c-line); padding-top: 16px; }
.customer-case__angles summary { cursor: pointer; margin-bottom: 16px; }
.customer-case__body h3 { font-size: 14px; color: var(--c-text-sub); margin: 20px 0 8px; }
.customer-case__body h3:first-child { margin-top: 0; }
.customer-case__body blockquote { margin: 0; padding: 16px 20px; border-left: 2px solid var(--c-accent); background: #fbf8f1; }
.customer-case__period { margin: 24px 0 12px; }
.customer-case__body .note { margin-top: 20px; }
.customer-teasers { list-style: none; padding: 0; display: grid; gap: 24px; margin-top: 28px; }
.customer-teasers > li { min-width: 0; padding: 24px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.customer-teasers h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 20px; }
.customer-teasers__pair figure { margin: 0; min-width: 0; }
.customer-teasers__pair figcaption { text-align: center; font-size: 12px; margin-top: 8px; }
.customer-teasers .note { margin: 16px 0; }
.case-image-dialog { width: min(96vw, 1100px); max-height: 94dvh; padding: 16px; border: 0; border-radius: var(--radius-lg); overflow: auto; }
.case-image-dialog::backdrop { background: rgb(0 0 0 / .65); }
.case-image-dialog > img { display: block; width: auto; max-width: 100%; max-height: 74dvh; height: auto; margin: 16px auto; object-fit: contain; }
@media (min-width: 900px) {
 .customer-case { padding: 40px; }
 .customer-case__layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; }
 .customer-teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 男性の事例も同じ白・アイボリー・淡いゴールドの比較枠を使用。 */
.voice-tile--comparison > a { border: 1px solid var(--c-line); box-shadow: none; }
.male-comparison { min-width: 0; padding: 20px; background: var(--c-surface); }
.male-comparison__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.male-comparison__pair figure { min-width: 0; margin: 0; }
.male-comparison__pair figcaption { text-align: center; font-size: 13px; margin-bottom: 10px; }
.male-comparison__pair img { display: block; width: 100%; height: auto; object-fit: contain; }
.male-comparison__caption { margin-top: 16px; color: var(--c-text-sub); font-size: 13px; }
.male-comparison__stats { margin: 16px 0; border-top: 1px solid var(--c-line); }
.male-comparison__stats > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.male-comparison__stats dt { color: var(--c-text-sub); font-size: 13px; }
.male-comparison__stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.voice-detail--comparison { border: 1px solid var(--c-line); }
.voice-detail--comparison .male-comparison { padding: 0; }

/* 姿勢・ボディラインの事例を一つのカード群に整理。比較は常に左右表示。 */
.bodymake-case-cards { list-style: none; padding: 0; display: grid; gap: 24px; }
.bodymake-case-card { min-width: 0; padding: 24px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.bodymake-case-card > h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 24px; }
.bodymake-case-card__description { margin-top: 20px; }
.bodymake-case-card > .note { margin-bottom: 16px; }
@media (min-width: 900px) {
 .bodymake-case-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}