/* =========================================================
   全ページ共通：上の帯（.site-nav）・下の帯（.site-foot）・見出しの大きさ
   2026-10-11 制作Cowork
   ・KiMiさん（10/10）：「ヘッダーとフッターを全ページ共通に」「見出しの段階を決める」「余白は8の倍数」
     を参考に見直し → 「任せる」
   ・各ページの <style> より後に読み込む。色はページごとの変数に頼らず、ここで固定する
     （商品ページは紫・緑など独自の色を持っているため）
   ・余白・高さはすべて 8 の倍数（4 は細い線・小さな間だけ）
   ========================================================= */
:root{
  --chr-ink:#1F2C29; --chr-soft:#5D6864; --chr-teal:#18564F; --chr-teal-d:#0B3F3A;
  --chr-paper:#FAF6EA; --chr-line:rgba(31,44,41,.08);
  /* 見出しの段階（PC／スマホ）。トップの大見出し（.hero-mega）だけは別 */
  --chr-h1:40px; --chr-h2:32px; --chr-h3:18px;
}
@media(max-width:720px){ :root{ --chr-h1:32px; --chr-h2:24px; --chr-h3:16px; } }

/* ---------- 上の帯 ---------- */
.site-nav{position:sticky;top:0;z-index:50;margin:0 !important;padding:0 !important;box-shadow:none;height:72px;box-sizing:border-box;
  background:rgba(250,246,234,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:0;border-bottom:1px solid var(--chr-line);}
.site-nav .nav-inner{max-width:1180px;margin:0 auto;padding:0 24px;height:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:24px;}
.site-nav .nav-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--chr-ink);
  border:0;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.site-nav .nav-logo:hover{transform:translateY(-1px);}
.site-nav .nav-logo__mark{width:32px;height:32px;flex-shrink:0;transition:transform .55s cubic-bezier(.4,0,.2,1);}
.site-nav .nav-logo:hover .nav-logo__mark{transform:rotate(-12deg);}
.site-nav .nav-logo__txt{display:flex;flex-direction:column;line-height:1.2;}
.site-nav .nav-logo__name{white-space:nowrap;font-family:'Noto Serif JP','Source Serif 4',serif;font-style:italic;font-weight:500;font-size:17px;letter-spacing:.005em;color:var(--chr-ink);}
.site-nav .nav-logo__sub{font-family:'Source Serif 4',serif;font-style:italic;font-size:10px;letter-spacing:.2em;color:var(--chr-soft);margin-top:2px;text-transform:uppercase;}
.site-nav .nav-menu{display:flex;align-items:center;gap:24px;margin:0;padding:0;font-size:inherit;}
.site-nav .nav-menu a{white-space:nowrap;font-family:'Noto Sans JP',-apple-system,'Hiragino Sans',sans-serif;line-height:1.5;font-size:14px;letter-spacing:.08em;color:var(--chr-ink);font-weight:500;text-decoration:none;border:0;padding:0;transition:color .2s;}
.site-nav .nav-menu a:hover{color:var(--chr-teal);}
.site-nav .nav-menu a.nav-current{color:var(--chr-teal);border-bottom:2px solid var(--chr-teal);padding-bottom:2px;}
.site-nav .nav-menu a.nav-cta{background:var(--chr-teal);color:#fff;padding:8px 16px;border-radius:999px;font-weight:700;border:0;}
.site-nav .nav-menu a.nav-cta:hover{background:var(--chr-teal-d);color:#fff;}
@media(max-width:880px){ .site-nav .nav-menu a.nav-about{display:none;} .site-nav .nav-menu{gap:16px;} }
@media(max-width:800px){ .site-nav .nav-menu a{font-size:13px;} }
@media(max-width:720px){
  .site-nav{height:64px;}
  .site-nav .nav-inner{padding:0 16px;}
  .site-nav .nav-logo__sub{display:none;}
  .site-nav .nav-logo__name{font-size:15px;}
  .site-nav .nav-logo__mark{width:24px;height:24px;}
  .site-nav .nav-menu{gap:8px;}
  .site-nav .nav-menu a:not(.nav-cta){display:none;}
  .site-nav .nav-menu a.nav-cta{display:inline-flex !important;font-size:12px !important;padding:8px 16px;letter-spacing:.04em;}
}

/* 375px 前後：ロゴ＋LINE相談＋フィットネスのロゴ＋メニューが入りきらず、メニューが16pxはみ出した（2026-10-11 本番で実測）
   要る幅 ロゴ131＋間24＋（88＋8＋64＋8＋48）＝371 ＞ 使える 339 → 間と余白を詰めて 331 にする */
@media(max-width:420px){
  .site-nav .nav-inner{padding:0 12px;gap:8px;}
  .site-nav .nav-menu{gap:4px;}
  .site-nav .nav-menu a.nav-cta{padding:8px 12px;}
}
/* 320px 前後：それでも14pxはみ出す → 社名の文字を隠して丸い f の印だけにする（印から Home に戻れる） */
@media(max-width:360px){ .site-nav .nav-logo__txt{display:none;} }

/* ---------- 下の帯 ---------- */
.site-foot{margin:0;padding:48px 0 40px;text-align:center;background:var(--chr-paper);color:var(--chr-soft);
  border:0;border-top:1px solid var(--chr-line);font-size:13px;line-height:1.8;}
.site-foot .sf-inner{max-width:1080px;margin:0 auto;padding:0 24px;box-sizing:border-box;}
.site-foot .sf-brand{font-family:'Noto Serif JP','Source Serif 4',serif;font-style:italic;font-size:18px;color:var(--chr-ink);margin:0 0 4px;}
.site-foot .sf-sub{font-size:12px;letter-spacing:.08em;margin:0 0 24px;color:var(--chr-soft);}
.site-foot .sf-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:0 0 16px;padding:0;}
.site-foot .sf-nav a{font-size:13px;color:var(--chr-soft);text-decoration:none;border:0;padding:0;}
.site-foot .sf-nav a:hover{color:var(--chr-teal);}
.site-foot .sf-nav--products a{color:var(--chr-ink);font-weight:500;}
.site-foot .sf-co{font-size:12px;margin:24px 0 8px;color:var(--chr-soft);}
.site-foot .sf-tm{font-size:11px;line-height:1.8;color:#8A857A;margin:0 auto 8px;max-width:720px;}
.site-foot .sf-copy{font-size:11px;letter-spacing:.06em;color:#8A857A;margin:0;}
@media(max-width:720px){ .site-foot{padding:40px 0 32px;} .site-foot .sf-nav{gap:8px 16px;} }

/* ---------- 見出しの段階（中身の見出しだけ。上の帯・下の帯と、class="chr-keep" を付けた見出しは対象外）
   トップの大見出し（.hero-mega）は chr-keep を付けて対象外にしている ---------- */
body h1:not(.chr-keep){font-size:var(--chr-h1) !important;line-height:1.4 !important;}
body h2:not(.chr-keep){font-size:var(--chr-h2) !important;line-height:1.45 !important;}
body h3:not(.chr-keep){font-size:var(--chr-h3) !important;line-height:1.6 !important;}

/* ---------- 文節で折る（2026-10-12 #64）----------
   HTML の文章には文節の切れ目に <wbr> を入れてある（BudouX・見える文字は変えていない）。
   keep-all で「切れ目以外では折らない」、入りきらない長い語だけ anywhere で折る（はみ出しの保険） */
body{word-break:keep-all;overflow-wrap:anywhere;line-break:strict;}
/* 表のせまいマスは、文節にこだわると「（」だけが行の終わりに残る（price.html 320px）→ ふつうの折り方に戻す */
td,th{word-break:normal;overflow-wrap:normal;}
/* 320〜420px：大見出しの1文節（「見つけられていますか。」11字）が 32px だと入らず「。」だけ次の行に落ちた → 28px */
@media(max-width:420px){ :root{ --chr-h1:28px; } }