/* ==========================================================================
   BODY MAINTE — legacy/css/site-nav.css
   旧サイトから取り込んだページ（note / athletestories / athletestories/timing）で、
   ヘッダー・SPメニュー・ページトップだけを新サイトと同じ見た目にするための CSS。

   base.css は全体のリセット（box-sizing・img・見出し など）を含み、旧ページの本文の
   レイアウトを崩すため読み込まない。代わりに base.css の次の節をそのまま写し、
   リセットは新しい部品の中だけに効かせている（:where で詳細度を 0 にしている）。
     1. Design tokens（使う値だけ）/ 3. u-visually-hidden / 5. Skip link / 6. Header /
     14. Page top / 15. Footer wrapper / 末尾の Unified のナビ指定
   例外は html のタップハイライト（-webkit-tap-highlight-color）だけで、新サイトとそろえるため
   旧ページの本文も含めたページ全体に効かせている（2. Reset）。
   ※ base.css のこれらの節を変更したら、ここも同じように直す。
     直し忘れは npm test（tests/legacy-nav-sync.spec.js）で検出される。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens（base.css と同じ値）
   -------------------------------------------------------------------------- */
:root {
  --c-black: #000;
  --c-text: #000;
  --c-white: #fff;
  --c-bg: #e1e6e3;
  --c-lime: #c4fa64;
  --c-line: #e1e6e3;
  --c-focus: #000;

  --ff-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --ff-en: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --fs-base: 1rem;
  --lh-body: 1.5;
  --ls-body: 0.05em;

  --w-max: 1440px;
  --gutter: 40px;
  --header-h: 100px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media only screen and (max-width: 999px) {
  :root {
    --fs-base: 0.875rem;
    --gutter: 25px;
    --header-h: 65px;
  }
}

/* 1440px 以上は、1440px のデザインをそのまま画面幅に合わせて拡大する（カロリーメイトと同じリキッドレイアウト）。
   body に zoom（画面幅 ÷ 1440）を付ける。値は zoom.js（<head> で同期的に読み込む）が最初の描画の前に --zoom に付け、
   画面幅を変えたときは common.js が付け直す（スクロールバーを除いた幅で計算する。zoom: calc(100vw / 1440px) は Firefox が対応していないため）。
   zoom の中では vw・vh も拡大されるので、PC で使う vw・dvh は var(--vw)・var(--dvh) の倍数で書く
   （1440px 未満は 1vw・1dvh のまま。1440px 以上は 1440px のときの値に戻す） */
:root {
  --zoom: 1;
  --vw: 1vw;
  --dvh: 1dvh;
}

@media only screen and (min-width: 1440px) {
  :root {
    --vw: 14.4px;
    --dvh: calc(1dvh / var(--zoom));
  }

  body {
    zoom: var(--zoom);
  }
}

/* --------------------------------------------------------------------------
   2. Reset（base.css の 2. Reset のうち部品に関わるもの。html のタップハイライトを除き、新しい部品の中だけ）
   -------------------------------------------------------------------------- */
:where(.c-skip, .c-header, .c-pagetop),
:where(.c-skip, .c-header, .c-pagetop) *,
:where(.c-skip, .c-header, .c-pagetop) *::before,
:where(.c-skip, .c-header, .c-pagetop) *::after {
  box-sizing: border-box;
}

/* SP でタップしたときのブラウザ標準のハイライトを出さない（base.css の html と同じ。旧ページの本文も含めてページ全体に効かせる） */
html {
  -webkit-tap-highlight-color: transparent;
}

/* 旧ページの body の書体・字間を引き継がないよう、新サイトの body と同じ指定を部品に持たせる */
:where(.c-skip, .c-header, .c-pagetop) {
  color: var(--c-text);
  font-family: var(--ff-ja);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

:where(.c-header) :is(p, ul, li) {
  margin: 0;
  line-height: inherit;
}

:where(.c-header) ul {
  padding: 0;
  list-style: none;
}

:where(.c-header, .c-pagetop) :is(img, svg) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.c-skip, .c-header) a {
  color: inherit;
  text-decoration: none;
}

:where(.c-header, .c-pagetop) button,
:where(.c-pagetop) {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  background: none;
  cursor: pointer;
}

/* 旧 main.css の a { outline: none; } より優先させる（詳細度は base.css と同じ 0,1,0）。
   共通フッター（.l-footer）も新サイトでは base.css の :focus-visible で枠が出るので同じにする */
:where(.c-skip, .c-header, .c-pagetop):focus-visible,
:where(.c-header, .l-footer) :focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Utilities（base.css と同じ）
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Skip link
   -------------------------------------------------------------------------- */
.c-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  color: var(--c-white);
  background: var(--c-black);
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform 0.2s;
}

.c-skip:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   6. Header
   PC：ロゴ 100×100（黄緑、下角 5px）／ナビは白 40% + ぼかしのピル 50px
   SP：ロゴ 60×60／メニューボタン 46×46（白 40% + ぼかし）
   -------------------------------------------------------------------------- */
/* ロゴとナビ（SP はロゴとメニューボタン）をスクロールに追従させる（PC・SP 共通）。
   sticky で文書の流れに残し、負のマージンで従来どおり本文に重ねる */
.c-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  margin-bottom: calc(var(--header-h) * -1);
  pointer-events: none;
}

.c-header__inner {
  position: relative;
  max-width: var(--w-max);
  height: 100%;
  margin: 0 auto;
}

.c-header__logo {
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: 100px;
  height: 100px;
  pointer-events: auto;
}

.c-header__logo a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--c-lime);
  border-radius: 0 0 5px 5px;
}

/* マウスオーバーで、ロゴのタブの上側が一度だけ少し伸びて、元に戻る（9/30）。ロゴの下の余白は変えず、上に足す。
   元の形に戻って終わるので、押してページを移っても形は変わらない */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .c-header__logo a:hover {
    animation: logo-stretch 0.8s cubic-bezier(0.33, 0, 0.2, 1); /* 10/5 気持ち遅く（0.6s → 0.8s） */
  }
}

@keyframes logo-stretch {
  40% {
    height: calc(100% + 8px);
    padding-top: 8px;
  }
}

.c-header__logo img {
  width: 67px;
  height: auto;
}

.c-header__nav {
  position: absolute;
  top: 25px;
  right: var(--gutter);
  pointer-events: auto;
}

.c-nav__list {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 50px;
  padding: 5px;
  background: rgb(255 255 255 / 40%);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.c-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

/* 区切り線：1px × 30px（背景色と同じ #e1e6e3） */
.c-nav__item--sep::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: 30px;
  margin-right: 20px;
  background: var(--c-line);
}

.c-nav__link {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  font-family: var(--ff-en);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: background-color 0.25s;
}

/* カレント：一覧ページは aria-current="page"、記事など下の階層のページは親の項目に aria-current="true" */
.c-nav__link[aria-current="page"],
.c-nav__link[aria-current="true"] {
  background: rgb(255 255 255 / 80%);
}

/* マウスオーバーはライトグリーンの囲み（参考：sunbousai.jp）。
   囲みはナビ全体で1つ（.c-nav__blob。common.js の initNavBlob で PC のときだけ作る）。
   最初に乗せたときは透明・小さい状態から不透明・等倍へ出し、別の項目へ移るときは囲みが滑って移動する。
   JS が無いときは、項目ごとに背景色を付ける。PC だけにする（この指定は SP のメニューの .c-nav__link:hover より
   詳細度が高いので、幅で限らないと SP のメニューにもライトグリーンが付いてしまう）。
   最初の大きさ・出る時間・移動の時間は CSS 変数（--nav-blob-from・--nav-blob-in・--nav-blob-move）で変えられる */
@media only screen and (min-width: 1000px) {
  .c-nav__list:not(.has-blob) .c-nav__link:hover {
    background: var(--c-lime);
  }
}

.c-nav__list.has-blob {
  position: relative;
}

.c-nav__list.has-blob .c-nav__item {
  z-index: 1;
}

.c-nav__blob {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: var(--c-lime);
  opacity: 0;
  scale: var(--nav-blob-from, 0.2);
  pointer-events: none;
  transition: opacity 0.2s ease-out, scale 0.5s ease-out;
}

.c-nav__list.is-hover .c-nav__blob {
  opacity: 1;
  scale: 1;
  transition:
    left var(--nav-blob-move, 0.4s) cubic-bezier(0.175, 0.885, 0.32, 1.03),
    width var(--nav-blob-move, 0.4s) cubic-bezier(0.175, 0.885, 0.32, 1.03),
    scale var(--nav-blob-in, 0.3s) cubic-bezier(0.175, 0.885, 0.32, 1.03),
    opacity 0.2s ease-out;
}

/* 表示中のページの項目に乗せたときは、白い囲みの代わりにライトグリーンの囲みを見せる */
.c-nav__list.is-hover .c-nav__link[aria-current="page"]:hover,
.c-nav__list.is-hover .c-nav__link[aria-current="true"]:hover {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .c-nav__blob,
  .c-nav__list.is-hover .c-nav__blob {
    scale: 1;
    transition: opacity 0.2s ease-out;
  }
}

.c-nav__text {
  display: none;
}

.c-nav__cart {
  display: grid;
  place-items: center;
  width: 68px;
  height: 40px;
  background: var(--c-lime);
  border-radius: var(--radius-pill);
  transition: transform 0.25s var(--ease-out);
}

.c-nav__cart:hover {
  transform: scale(1.06);
}

.c-nav__cart svg {
  width: 28px;
  height: 28px;
}

.c-nav__cart-label {
  display: none;
}

.c-nav__chevron {
  display: none;
}

.c-header__toggle {
  display: none;
}

@media only screen and (max-width: 999px) {
  .c-header__logo {
    left: 10px;
    width: 60px;
    height: 60px;
  }

  .c-header__logo img {
    width: 40px;
  }

  /* 展開メニュー上でも左上にTOPへ戻るロゴを表示 */
  .is-nav-open .c-header__logo {
    z-index: 130;
  }

  .c-header__toggle {
    position: absolute;
    top: 10px;
    right: 9px;
    z-index: 130;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    background: rgb(255 255 255 / 40%);
    border-radius: 50%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    pointer-events: auto;
  }

  /* 3本線：16px / 16px / 10px（右揃え）、太さ 2px、間隔 6px */
  .c-header__toggle-bars {
    position: relative;
    display: block;
    width: 16px;
    height: 14px;
  }

  .c-header__toggle-bars::before,
  .c-header__toggle-bars::after,
  .c-header__toggle-bars span {
    content: "";
    position: absolute;
    right: 0;
    height: 2px;
    background: var(--c-black);
    transition: transform 0.3s var(--ease-out), top 0.3s var(--ease-out), width 0.3s, opacity 0.3s;
  }

  .c-header__toggle-bars::before { top: 0; width: 16px; }
  .c-header__toggle-bars span { top: 6px; width: 16px; }
  .c-header__toggle-bars::after { top: 12px; width: 10px; }

  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars::before {
    top: 6px;
    transform: rotate(45deg);
  }

  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars span {
    opacity: 0;
  }

  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars::after {
    top: 6px;
    width: 16px;
    transform: rotate(-45deg);
  }

  /* 展開メニュー：背景 #e1e6e3、ナビ幅 315px */
  .c-header__nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    padding: calc(var(--header-h) + 40px) 30px 40px;
    background: var(--c-bg);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
  }

  /* 開くときは visibility を即座に切り替え、キーボードで開いた直後に先頭リンクへフォーカスできるようにする */
  .c-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0s;
  }

  /* 消える動きは、メニューを閉じたときだけ（common.js が閉じる間だけ is-closing を付ける）。
     常に付けておくと、幅が PC から SP に変わった瞬間（PC ではナビが表示されている）にも消える動きが出て、
     メニューが半透明でページに重なって見える */
  .c-header__nav.is-closing {
    transition: opacity 0.3s, visibility 0.3s;
  }

  .c-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100%, 315px);
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .c-nav__item {
    display: block;
  }

  /* グループ区切り：白 1px 線。項目の行送り 58px、区切りをまたぐ行送り 78px（Figma） */
  .c-nav__item--sep {
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--c-white);
  }

  .c-nav__item--sep::before {
    display: none;
  }

  /* 1項目 58px（min-height は下の Unified の .c-nav__link で指定）。
     カレントの白背景（PC と同じピル形）に余白を持たせるため左右 15px はみ出させる */
  .c-nav__link {
    position: relative;
    justify-content: flex-start;
    gap: 10px;
    margin-inline: -15px;
    padding: 0 35px 0 15px;
    font-size: 2.375rem;
    font-weight: 200;
    letter-spacing: -0.01em;
    border-radius: var(--radius-pill);
  }

  .c-nav__link:hover {
    background: none;
    text-decoration: none;
  }

  /* カレント：PC と同じ薄い白を敷く */
  .c-nav__link[aria-current="page"],
  .c-nav__link[aria-current="true"] {
    background: rgb(255 255 255 / 80%);
  }

  /* 和文ラベル：黒ピル 13px / 1.8 / 5%、左右 10px。幅をそろえて右側の列（375px 幅で x194〜310）に右揃え */
  .c-nav__text {
    display: inline-block;
    min-width: 116px;
    margin: 0 15px 0 auto;
    padding: 4px 10px;
    text-align: center;
    color: var(--c-white);
    font-family: var(--ff-ja);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
    text-transform: none;
    background: var(--c-black);
    border-radius: var(--radius-pill);
  }

  /* 右端の矢印（5.3×10.5、線 1.83px） */
  .c-nav__chevron {
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    width: 6px;
    height: 11px;
    transform: translateY(-50%);
  }

  /* ONLINE STORE：315×50 黄緑ピル、Oswald Light 20px */
  .c-nav__item--cart {
    margin-top: 50px;
  }

  .c-nav__cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding: 5px 20px;
    font-family: var(--ff-en);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .c-nav__cart-label {
    display: block;
    flex: 1 1 auto;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   14. Page top（40×60 の黒ピル、矢印は背景色）
   -------------------------------------------------------------------------- */
/* 追従範囲はフッターの上まで（--pagetop-lift は common.js がフッターの見えている高さを設定）。
   位置は Figma どおり 下 10px・右 PC 20px / SP 10px（フッターの上の帯 70px ＝ ボタン 60px ＋ 下 10px） */
.c-pagetop {
  position: fixed;
  right: 20px;
  bottom: calc(10px + var(--pagetop-lift, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 40px;
  height: 60px;
  color: var(--c-bg);
  background: var(--c-black);
  border-radius: var(--radius-pill);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease-out);
}

.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* メニューを開いている間は隠す（TOP など .l-wrapper が重なりの基準になるページでメニューの上に出るため）。
   開いた瞬間に消す（transition が効くと約0.3秒見えたままになるため）。閉じたときは通常の transition で戻る */
.is-nav-open .c-pagetop {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.c-pagetop svg {
  width: 16px;
  height: 18px;
}

/* マウスオーバー（9/30）：ほかのボタンと同じくライトグリーンになり、矢印が少し上へ進む（行き過ぎて戻る動きは付けない。10/5） */
@media (hover: hover) {
  .c-pagetop svg {
    transition: translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .c-pagetop.is-visible {
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease-out), background-color 0.25s, color 0.25s;
  }

  .c-pagetop:hover {
    color: var(--c-black);
    background: var(--c-lime);
  }

  .c-pagetop:hover svg {
    translate: 0 -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-pagetop svg {
    transition: none;
  }
}

@media only screen and (max-width: 999px) {
  .c-pagetop {
    right: 10px;
  }
}

/* --------------------------------------------------------------------------
   15. Footer wrapper（本体は共通フッター /bdm/footer/css/footer.css）
   -------------------------------------------------------------------------- */
.l-footer {
  position: relative;
  z-index: 1;
}

/* 本文の字間（body の letter-spacing）を共通フッターに継承させない。
   SP の「個人情報の取り扱いについて」（10px×13字）が 130px の枠内で改行されるのを防ぐ */
.footer {
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Unified（base.css 末尾のナビに関わる指定と同じ）
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 999px) {
  .c-nav__list { max-width: 100%; }
  .c-nav__link { height: auto; min-height: 58px; flex-wrap: wrap; }
  .c-nav__en { min-width: 0; overflow-wrap: anywhere; }
  .c-nav__link { overflow-wrap: anywhere; }
}