/* ススキノサウナクラブ（/sauna/）だけの上書き — 2026-11-10 鈴木さん「デザインマニュアルとデザインアプリで徹底ブラッシュアップ」
   書き出し元の style.css（業者 Cureate9）と hp-custom.css は触らず、このファイルで後から上書きする（design/03 N・00 G）。
   デザイナーの色（金 #9c7c43 / #c9aa6e）・明朝・金のグラデ見出し画像・流れ込む動き（.fade-text）・はみ出す漢字（活力…）はそのまま。
   変えたら index.html の ?v= も更新。

   1 「動きを減らす」設定の人には流れ込みを止めて最初から見せる（design/01 の 9・21）。スライドショーの停止は sauna.js
   2 文字の最小 12.8px（design/07・05 の 2）。9〜12px だった注記・表の見出し・英字ラベルを 12.8〜13px に
   3 AI っぽい形を消す（design/10）: 片側だけの太い金線（プレミアム行・es village の囲み）→ 面の色と細い枠で区別
   4 ボタンはグラデをやめて金の単色（design/05 の 1・03 B）。高さは 48px 以上のまま
   5 ブラウザの「描いていない部分」をブランドの金に（design/10）: 選択色・キーボード操作の枠・下線の位置・数字の桁そろえ
   6 押す場所 44×44px 以上（design/05 の 3・20 HIG）: Instagram・目次・es village のリンク
   7 GSAP の動きを足す節（sauna-motion.js）で、JS が動く前に一瞬出ないようにする指定は無し（gsap.from が実行時に初期状態を作る） */

/* 0 見出しの階層: h2 の次が h4 だったので h4 → h3 に（design/10「見出しの階層が飛ぶ」）。見た目は class で決まっているので同じ。
   style.css の素の h3 { line-height: 1.1 } だけが新しく当たるので、h4 のときと同じく親の行間を継ぐ（class で行間を決めている見出しはそちらが勝つ） */
:where(#page-sauna) h3 { line-height: inherit; }

/* 1 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  #page-sauna .fade-text,
  #page-sauna .fade-text-delayed { opacity: 1 !important; transform: none !important; transition: none !important; }
  #page-sauna .img-wrap img { transition: none !important; }
  .hp-sauna-sticky { transition: none; }
}

/* 2 文字の最小サイズ */
.hp-sauna-plans thead th { font-size: 12.8px; }
.hp-sauna-plans .hp-plan-note { font-size: 12.8px; line-height: 1.5; }
.hp-sauna-table-note { font-size: 13px; }
.hp-step-txt { font-size: 13px; }
.hp-fun-time { font-size: 13px; }
.hp-about-note { font-size: max(.85em, 12.8px); }
.hp-time { font-size: max(.85em, 12.8px); }
.hp-sauna-ways__en { font-size: 12.8px; letter-spacing: .28em; }
.hp-sauna-ways__tag,
.hp-sauna-ways__slots-ttl,
.hp-sauna-ways__slots-day { font-size: 12.8px; }
.hp-sauna-dw-company { font-size: 13px; }
@media (max-width: 768px) {
  .hp-fun-time { font-size: 13px; }
  .hp-sauna-sticky__btn span { font-size: 12.8px; }
  .page-sauna-life__tate-txt { font-size: 13px; }
}
.page-sauna-top__txt { font-size: 12.8px; }
@media (max-width: 600px) {
  .hp-sauna-plans { font-size: 12.8px; }
  .hp-sauna-plans thead th { font-size: 12.8px; letter-spacing: .02em; }
  .hp-sauna-plans .hp-yen { font-size: 12.8px; }
  /* スマホでは表の中の「当ビル8階 es village ご契約者向け」を出さない。すぐ下の囲みに同じ説明とリンクがあり、12.8px にすると行だけ 2 倍の高さになるため（design/10「同じ情報の繰り返し」） */
  .hp-sauna-plans .hp-plan-note { display: none; }
  .hp-sauna-price-notes { font-size: 12.8px; }
}

/* 3 片側だけの太い色線をやめる */
.hp-sauna-plans .hp-row-premium th { box-shadow: none; padding-left: 10px; color: #c9aa6e; }
.hp-sauna-plans .hp-row-premium th,
.hp-sauna-plans .hp-row-premium td { background: rgba(156,124,67,.18); }
.hp-sauna-esv { border-left: none; border: 1px solid rgba(201,170,110,.35); background: rgba(201,170,110,.04); padding: 16px 18px; }
@media (max-width: 600px) {
  .hp-sauna-plans .hp-row-premium th { padding-left: 3px; }
}

/* 4 ボタンは金の単色 */
.hp-sauna-line__btn,
.hp-sauna-sticky__btn { background: #c9aa6e; }
.hp-sauna-line__btn:hover,
.hp-sauna-line__btn:focus-visible { background: #d8bc82; opacity: 1; }
.hp-sauna-line__btn { min-height: 48px; }

/* 5 ブラウザの描いていない部分 */
#page-sauna ::selection { background: #9c7c43; color: #fff; }
#page-sauna a:focus-visible,
#page-sauna button:focus-visible,
.hp-sauna-sticky a:focus-visible { outline: 2px solid #c9aa6e; outline-offset: 3px; }
#page-sauna a { text-underline-offset: 3px; }
.hp-sauna-plans .hp-num,
.hp-sauna-ways__hours dd,
.hp-sauna-ways__slots li { font-variant-numeric: tabular-nums; }

/* 6 押す場所 */
.page-sauna-price__btn a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.page-sauna-price__btn img { display: block; width: 28px; height: 28px; }
.hp-sauna-esv__link { padding: 10px 0; margin-top: 0; }
.hp-sauna-plans .hp-plan-note a { display: inline-block; padding: 6px 0; }
#drawer .dw-nav.hp-sauna-dw li a { display: block; padding: 10px 0; }
.hp-sauna-dw-company a { display: inline-block; padding: 10px 4px; }