/* =========================================================
   文字の大きさ切り替え（小・中・大）と、改行位置の調整
   html に data-fs="m"（中）/ "l"（大）が付くと本文の文字が大きくなる
   小（標準）は何も付かない
   ========================================================= */
html[data-fs="m"] { --fz: 1.15; }
html[data-fs="l"] { --fz: 1.3; }

/* 本文〜小見出しの文字だけ大きくする（大見出しはそのままでレイアウトを崩さない） */
html[data-fs] {
  --fs-xs:   calc(0.8125rem * var(--fz));
  --fs-sm:   calc(0.9375rem * var(--fz));
  --fs-base: calc(1.0625rem * var(--fz));
  --fs-md:   calc(1.125rem  * var(--fz));
  --fs-lg:   calc(1.375rem  * (1 + (var(--fz) - 1) / 2));
  --fs-xl:   calc(1.625rem  * (1 + (var(--fz) - 1) / 2));
}

/* ---------- 切り替えボタン ---------- */
.fs-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-family: var(--font-serif);
  white-space: nowrap;
}
.fs-switch__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-light);
  margin-right: 4px;
  letter-spacing: 0.05em;
}
.fs-switch__btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--clr-green-light);
  border-radius: 50%;
  background: transparent;
  color: var(--clr-text-light);
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.fs-switch__btn[data-fs-set="s"] { font-size: 11px; }
.fs-switch__btn[data-fs-set="m"] { font-size: 13px; }
.fs-switch__btn[data-fs-set="l"] { font-size: 15px; }
.fs-switch__btn:hover { border-color: var(--clr-green); color: var(--clr-green-dark); }
.fs-switch__btn[aria-pressed="true"] {
  background: var(--clr-green);
  border-color: var(--clr-green);
  color: var(--clr-white);
}
.fs-switch__btn:focus-visible { outline: 2px solid var(--clr-rose); outline-offset: 2px; }

@media (max-width: 768px) {
  .fs-switch__label { display: none; }
  .fs-switch__btn { width: 26px; height: 26px; }
  .fs-switch { margin-right: 2px; }
}
@media (max-width: 360px) {
  .fs-switch__btn { width: 22px; height: 22px; }
}

/* ---------- 改行位置（段落ち）の調整 ----------
   ・auto-phrase：日本語を言葉の区切りで折り返す（「デコルテ」「ご案内」などの途中で切れにくい）
   ・pretty：最後の行に1〜2文字だけ残る改行を避ける
   ・balance：見出しの行の長さをそろえる */
body {
  word-break: auto-phrase;
  text-wrap: pretty;
}
h1, h2, h3, h4, .section-title, .service-card__title, .page-hero__title, .page-hero__sub {
  text-wrap: balance;
}

/* ロゴは文字サイズ切り替えの影響を受けない・2行に分かれないように */
.logo__name-en { white-space: nowrap; font-size: 1.375rem; }
/* スマホ：ロゴ・文字サイズ・JP/EN・メニューボタンが重ならないように少しずつ詰める */
@media (max-width: 480px) {
  .logo { gap: 8px; }
  .logo__mark { width: 38px; height: 38px; }
  .logo__name-en { font-size: 1.1rem; letter-spacing: 0.04em; }
  .header__right { gap: 4px; }
  .lang-toggle { padding: 4px 7px; }
  .hamburger { width: 38px; }
}
@media (max-width: 360px) {
  .header__inner { padding-left: 10px; padding-right: 10px; }
  .logo { gap: 6px; }
  .logo__mark { width: 32px; height: 32px; }
  .logo__name-en { font-size: 0.95rem; letter-spacing: 0.02em; }
  .header__right { gap: 3px; }
  .lang-toggle { padding: 3px 5px; }
  .hamburger { width: 34px; }
}

/* 文字を大きくしたとき、スマホで単語の途中で折り返さないように */
@media (max-width: 768px) {
  /* トップのメニューカード見出し（「アロマトリートメン／ト」「〜エス／テ」にならない大きさに） */
  .service-card { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .service-card__title { font-size: min(var(--fs-xl), 5vw); }
  /* メニュー・料金ページの見出し（枠からはみ出さない大きさに） */
  .menu-category__title { font-size: min(var(--fs-xl), 5.6vw); padding-left: var(--sp-4); padding-right: var(--sp-4); }
  /* 予約ページのメニュー：名前を1段目、金額を2段目にする */
  html[data-fs] .bk-menu { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  html[data-fs] .bk-menu__price { align-self: flex-end; }
  /* メニュー名は画面幅に合わせた大きさにして、枠からはみ出さないように（iPhone は文字幅が広め） */
  html[data-fs] .bk-menu { min-width: 0; }
  html[data-fs] .bk-menu__name { width: 100%; font-size: min(1em, 5vw); overflow-wrap: anywhere; }
  html[data-fs] .bk-menu__time { font-size: min(var(--fs-sm), 4.6vw); }
  /* 予約ページの日付ボタン（11/14 など）が枠からはみ出さないように */
  html[data-fs] .bk-date__md { font-size: min(var(--fs-md), 4.6vw); }
}