/* sauna sense LP 共通スタイル */
:root {
  --bg: #F5F5F7;
  --ink: #16161C;
  --sub: #6B7280;
  --card: #FFFFFF;
  --edge: #E4E4E9;
  --sauna: #E8862E;
  --mizu: #2E9BC7;
  --totonoi: #3FA36B;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101014;
    --ink: #F5F5F7;
    --sub: #9CA3AF;
    --card: #1A1A20;
    --edge: #2A2A32;
    --sauna: #FF9A3D;
    --mizu: #35C7F5;
    --totonoi: #4ADE80;
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}
.latin { font-family: "Kanit", -apple-system, sans-serif; font-weight: 600; }

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

header.site {
  padding: 14px 0;
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 245, 247, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge);
}
@media (prefers-color-scheme: dark) {
  header.site { background: rgba(16, 16, 20, 0.72); }
}
header.site .wrap { display: flex; align-items: center; gap: 12px; }
header.site img { width: 34px; height: 34px; }
header.site .name { font-size: 17px; letter-spacing: 0.02em; }

.hero { padding: 72px 0 64px; text-align: center; }
.hero img.mark { width: 132px; height: 132px; margin-bottom: 20px; }
.hero h1 { font-size: clamp(38px, 8vw, 56px); letter-spacing: 0.01em; line-height: 1.15; text-wrap: balance; }
.hero .kana { color: var(--sub); font-size: 15px; letter-spacing: 0.5em; margin: 10px 0 30px; padding-left: 0.5em; }
.hero .tagline { font-size: clamp(19px, 4vw, 24px); font-weight: 700; text-wrap: balance; }
.hero .lead { color: var(--sub); font-size: 15px; margin: 18px auto 0; max-width: 34em; text-align: left; }
.hero .cta { margin-top: 36px; display: inline-block; background: var(--ink); color: var(--bg);
  padding: 13px 30px; border-radius: 99px; text-decoration: none; font-weight: 700; font-size: 15px; }
.hero .cta-note { display: block; color: var(--sub); font-size: 12px; margin-top: 10px; }

.phases { display: flex; justify-content: center; gap: 26px; margin: 40px 0 0; flex-wrap: wrap; }
.phase { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.phase svg { width: 17px; height: 17px; }
.phase.sauna svg { color: var(--sauna); }
.phase.mizu svg { color: var(--mizu); }
.phase.totonoi svg { color: var(--totonoi); }

section.features { padding: 30px 0 70px; }
.feature {
  background: var(--card); border: 1px solid var(--edge); border-radius: 18px;
  padding: 28px 28px 24px; margin-bottom: 18px;
}
.feature .eyebrow { font-size: 12px; letter-spacing: 0.14em; font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 7px; }
.feature .eyebrow svg { width: 16px; height: 16px; flex: none; }
.feature.sauna .eyebrow { color: var(--sauna); }
.feature.mizu .eyebrow { color: var(--mizu); }
.feature.totonoi .eyebrow { color: var(--totonoi); }
.feature h2 { font-size: 21px; margin-bottom: 10px; line-height: 1.5; text-wrap: balance; }
.feature p { color: var(--sub); font-size: 14.5px; }

footer.site {
  border-top: 1px solid var(--edge);
  padding: 34px 0 56px; color: var(--sub); font-size: 13px;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
footer.site a { color: var(--sub); }

/* 記事ページ(プライバシー・サポート) */
main.doc { padding: 24px 0 72px; }
main.doc h1 { font-size: 27px; margin: 26px 0 8px; line-height: 1.4; }
main.doc .updated { color: var(--sub); font-size: 13px; margin-bottom: 30px; }
main.doc h2 { font-size: 18px; margin: 34px 0 10px; }
main.doc p, main.doc li { font-size: 15px; }
main.doc ul { padding-left: 1.4em; }
main.doc a { color: var(--ink); }