/* 和田デジタルラボ 共通ナビゲーション（全ページ共通）
   独立したファイルにしてあるのは、販売ページが自前のCSSを抱えているため。
   こちらは .sitenav 以下だけを持ち、どのページの既存の指定にも触らない。

   色はページ側の変数をそのまま借りる（--bg / --fg / --muted / --accent / --line）。
   変数を持たないページでも崩れないよう、すべてに控えの値を添えてある。

   ★★**この帯の文字は、本文（1rem＝16px）より大きくすること。下回らせるのは論外。**
     2026-08-13、和田さんの指摘：「一番上にあるメニューの文字やアイコンが小さい。
     **ここは一番大事な部分**」。それまで文字は本文と同じ 1rem で、製品のアイコンは 18px しか
     なかった——**全ページの一番上に常に出ていて、どこへ行くかを決める帯**なのに、
     本文と同じ重さだった。いまは 1.125rem（18px）／アイコン 22px・屋号 26px。
     **番人は test/navSize.test.js**（CSS から実際に効く値を読む）。 */

.sitenav {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg, #0a0d13);
  border-bottom: 1px solid var(--line, #222b38);
}
/* ★2026-08-13、820 → 900 → 980px と2回広げた。理由はどちらも同じで、**中身が入らないと
   折り返して帯の高さが2倍以上になる**（44px → 106px。全ページの上に居座る帯なので、1枚の話ではない）。
     820 → 900 … 「ブログ」を足して 848px 必要になった
     900 → 980 … 文字を 18px・アイコンを 22px に上げて 935px 必要になった
     980 → 1140 … 「ブログ」にアイコンを付けて 1104px 必要になった（2026-08-24）
   🔴 **980 のままの間、帯はすでに折り返していた**（1072px 必要／高さ 111px）。
     ぺたたびを足した回に測っていない。★**下の「足す前に測る」は、足す人が守らないと
     誰も気づかない**——折り返しても赤くならないので、次に見る人が現れるまで残る。
   ★**詰めるほうを選ばない。** 文字を小さくして収めるのは、この店の決まり（本文 16px 以上・
     帯はそれより大きく）に反する。**収まらないなら器を広げる。**
   ★本文の列と幅が揃わなくなるが、揃っていたのはもともと一部のページだけで、
     販売ページの列は 880px（＝ナビのほうが狭かった）。**揃えるべき正本が無い。**
   ★次に項目を足す人へ: **足す前に必要な幅を測る**（`.sitenav-in` の子の幅 ＋ gap ＋ padding）。
     ブラウザで測らないと分からない——**検査は全部緑のまま折り返す。** */
.sitenav-in {
  max-width: 1140px; margin: 0 auto; padding: 9px 20px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 26px;
}
.sitenav a { text-decoration: none; }

/* 屋号。どのページからでもトップへ戻れる一本道にする。
   マークは飾りではなく屋号そのものなので、文字と一緒に動くよう a の中に置く。 */
.sitenav-home {
  margin-right: auto; padding: 6px 0; white-space: nowrap;
  font-size: 1.125rem; font-weight: 700; color: var(--fg, #eef2f8);
  display: inline-flex; align-items: center; gap: 10px;
}
.sitenav-home img { width: 28px; height: 28px; flex: none; }

/* 製品。4つとも常に見えていること（畳んで隠さない）。
   4つしかないので、開いて閉じる仕掛けを挟むほうが遠くなる。 */
.sitenav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 22px;
}
.sitenav-list a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 1.125rem; line-height: 1.6;
  color: var(--muted, #94a1b2);
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
/* 商品の見分けはアイコンが持つ。色は全ページ同じなので、色では分けない。
   飾りではなく識別なので、文字が折り返しても離れないよう a の中に置く。
   ★18px から 24px に上げた（2026-08-13）。18px は「絵があること」しか分からない大きさで、
     **どの商品かを見分ける**という役目を果たしていなかった。
   ★行の高さ（18px × 1.6 ＝ 28.8px）の内側なので、大きくしても帯は高くならない。 */
.sitenav-list img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.sitenav-list a:hover { color: var(--fg, #eef2f8); }

/* ブログ（.sitenav-blog）。**製品ではないが、同じ .sitenav-list の中に置いてある。**
   ★★外（<ul> の隣）に置くと、狭い画面で**必ず1行まるごと増える**——<ul> は1個の箱として
     折り返すので、ブログのリンクは製品と同じ行に並べない。iPhone の幅（375px）で
     実測 124px → 159px（2026-08-13）。中に入れれば製品と一緒に流れて、増えるのは数px。
   ★見た目の指定を持たせない（.sitenav-list a がそのまま当たる）。ここだけ目立たせると、
     製品より先に押される。
   ★2026-08-24、和田さんの指示でアイコンを付けた（「ブログはアプリではないのでカタカナしか無い。
     アイコンがあると少し分かりやすい」）。**それまでは「アイコンが無いこと」が製品との違いだった**
     ので、違いは色のほうへ移した——**商品の色を持たせず、屋号のマークと同じ紺**にしてある
     （絵は /assets/blog-icon.svg）。ここを商品らしい色にすると、6つ目の商品に見える。
   ★ナビの見出しは「製品の案内」から「サイト内の案内」に変えてある（製品でないものが入ったため）。 */

/* いま居る場所。色だけでなく下線でも示す（色が見分けにくい方に届かせる）。 */
.sitenav a[aria-current="page"] {
  color: var(--fg, #eef2f8); font-weight: 600;
  border-bottom-color: var(--accent, #6ea8ff);
}

/* 上に居座る帯が、ページ内リンクの着地点を隠さないようにする。 */
[id] { scroll-margin-top: 78px; }

/* 狭い画面。文字は小さくできない（＝畳むか、貼り付くのをやめるかの二択）ので、
   **貼り付くのをやめる**。4つとも見えたまま、読み始めれば画面を全部返す。
   畳むと、4つのうち3つが最初から見えないページになる。 */
@media (max-width: 560px) {
  .sitenav { position: static; }
  .sitenav-in { padding: 6px 16px 8px; gap: 0 18px; }
  .sitenav-home { padding: 4px 0; }
  /* ★項目の間だけ 18px → 14px（2026-08-24）。「ブログ」にアイコンが付いて、iPhone の幅（375px）で
     製品の行が3行から4行に増えた（175px → 214px）ぶんを、**文字とアイコンを1px も縮めずに**戻す。
     ★ここで縮めてよいのは**すきま**だけ。文字とアイコンには下限があり、番人が赤で止める。 */
  .sitenav-list { gap: 0 14px; }
  .sitenav-list a { padding: 4px 0; }
  [id] { scroll-margin-top: 12px; }
}