/* ══════════════════════════════════════════════════════════════════════
   共通ヘッダー＋メニュー（トップ index.html の .hd / .menu をそのまま写したもの・2026-10-22）
   ジャーナルもトップと同じヘッダーにして、同じサイトの中を回っていると分かるようにする（本人指摘）。
   違いは1つだけ：トップはFVを過ぎてから出すが、こちらは最初から出す（.hd.show を付けて置く）。
   値を変えるときは index.html と両方を直す。
   ══════════════════════════════════════════════════════════════════════ */
:root{ --col:480px; --header-h:max(48px, min(12.0833vw,58px)); --soft:cubic-bezier(.22,.61,.36,1); }
body.has-hd{padding-top:calc(var(--header-h) + env(safe-area-inset-top))}
/* 下層ページの pages.css にも .hd があるので、写した側の指定で上書きしきる */
body.has-hd .hd{padding:env(safe-area-inset-top) 0 0;margin:0}
body.has-hd .hd-in{max-width:var(--col);padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.hd .hd-amz,.hd .hd-uta,.burger{border:0;text-decoration:none}
@media (min-width:1024px){ .hd,.menu{display:none!important} body.has-hd{padding-top:0} }
@media print{ .hd,.menu{display:none!important} }
@media (prefers-reduced-motion:reduce){ .menu,.menu *{transition:none!important} }

/* ══ 固定ヘッダー（Figma: 白帯480×58 / amazon 89×26 @25 / マーク 68×36 中央 / 二本線 48×16 @右24） ══ */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:calc(var(--header-h) + env(safe-area-inset-top));
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(95,73,72,.09);
  transform:translateY(-100%);transition:transform .28s ease;
}
.hd.show{transform:translateY(0)}
/* Figma実測：amazon 89×26 @x25 ／ マーク 68×36 中央 ／ 二本線 48×16 @右24・1px・#5F4948
   幅480を100cqwとして、そのままの比率で置く。 */
.hd{padding-top:env(safe-area-inset-top)}
.hd-in{
  position:relative;height:100%;max-width:var(--col);margin:0 auto;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  container-type:inline-size;
}
.hd-in > *{position:absolute;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center}
.hd-amz{left:0;padding-left:5.2083cqw;height:100%;justify-content:flex-start}
.hd-amz img{width:18.5417cqw;height:auto;margin-top:.8333cqw} /* 版ではロゴが中央より4px下 */
.hd-uta{left:50%;transform:translate(-50%,-50%);height:100%}
.hd-uta img{width:14.1667cqw;height:auto}
.burger{right:0;padding-right:5cqw;height:100%;background:none;border:0;cursor:pointer;
  justify-content:flex-end}
.burger i{position:relative;display:block;width:10cqw;height:3.3333cqw}
.burger i::before,.burger i::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--ink);
}
.burger i::before{top:0}
.burger i::after{bottom:0}

/* ══ メニュー（Figmaに設計がないので、ページの語彙で組む） ══ */
.menu{
  position:fixed;inset:0;z-index:50;background:var(--ground);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(24px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom));
  /* 幕は跳ねさせない。全画面の面が行き過ぎて戻ると、そこだけ玩具の手ざわりになる。
     反動は小さいものに限る、というのがこのページの決め（DESIGN.md）。
     下りるのも上がるのも同じ .55s / --soft。 */
  transform:translateY(-100%);pointer-events:none;
  transition:transform .55s var(--soft);
}
.menu.open{transform:none;pointer-events:auto}
.menu[hidden]{display:none}
.menu-in{width:100%;max-width:calc(var(--col) - 48px);margin:0 auto}

/* 幕が下りたあと、中身が少し遅れて追いつき、行き過ぎてから収まる（重さの出し方）。
   閉じるときは .open が外れて下の素の指定に戻るので、待たずに一気に消える */
/* 中身は1つずつ飛び込ませず、3つの群でまとめて出す。
   項目が次々に跳ねてくるのは「キャラクター的な可愛さ」で、
   研究や成分で売っているこのページの手ざわりから外れる。 */
.menu .cl,.menu .mk,.menu li,.menu .acts a,.menu .faq,.menu .mlegal,.menu .mft{
  opacity:0;transform:translateY(-8px);
  transition:opacity .14s ease,transform .14s ease;
}
/* 規約・会社情報。買う導線ではないので、一段落として最後に置く */
.menu .mlegal{display:flex;flex-direction:column;margin-top:18px;padding-top:14px}   /* 上は線で区切らない */
.menu .mlegal a{
  font-size:12px;line-height:1.8;color:var(--ink-muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.menu.open .cl,.menu.open .mk,.menu.open li,
.menu.open .acts a,.menu.open .faq,.menu.open .mlegal,.menu.open .mft{
  opacity:1;transform:none;
  transition:opacity .45s var(--soft) var(--md,.10s),
             transform .45s var(--soft) var(--md,.10s);
}
.menu.open .cl,.menu.open .mk{--md:.10s}          /* 群1：ロゴと閉じる */
.menu.open li,.menu.open .acts a{--md:.16s}       /* 群2：行き先 */
.menu.open .faq,.menu.open .mlegal,.menu.open .mft{--md:.22s}        /* 群3：補足 */

/* ×は版のSTEPバッジと同じ語彙で、細い輪郭の丸に収める。
   44pxだと「押せるもの」に見えないので52pxまで大きくした */
.menu .cl{
  position:absolute;top:calc(8px + env(safe-area-inset-top));
  right:calc(10px + env(safe-area-inset-right));
  width:52px;height:52px;padding:0;cursor:pointer;
  background:none;border:1px solid rgba(95,73,72,.22);border-radius:50%;
}
.menu .cl::before,.menu .cl::after{
  content:"";position:absolute;left:15px;top:25px;width:22px;height:1.6px;
  background:var(--ink);border-radius:2px;
}
.menu .cl::before{transform:rotate(45deg)}
.menu .cl::after{transform:rotate(-45deg)}
.menu.open .cl:active{transform:scale(.93)}
.menu .mk{width:68px;margin:4px auto 26px}
.menu ul{list-style:none}
.menu li{border-bottom:1px solid rgba(95,73,72,.12)}
.menu li a{display:flex;align-items:baseline;gap:10px;min-height:48px;padding:13px 2px;text-decoration:none;font-size:16px;font-weight:700}
.menu .acts{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.menu .acts a{
  display:flex;align-items:center;justify-content:center;gap:5px;
  min-height:60px;border-radius:100px;text-decoration:none;font-weight:700;font-size:15px;
}
.m-amz{background:var(--amz);color:var(--amz-ink);font-size:17px}
.m-line{background:var(--line-dark);color:var(--white);font-size:17px}
.faq{margin-top:34px}
.faq h2{font-size:15px;font-weight:700;letter-spacing:.04em;margin-bottom:4px}
.faq details{border-bottom:1px solid rgba(95,73,72,.12)}
.faq summary{
  min-height:48px;padding:13px 2px;font-size:14px;cursor:pointer;list-style:none;
  display:flex;gap:9px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--f-latin);font-weight:700;color:var(--accent);flex:0 0 auto}
.faq details p{padding:0 2px 15px 24px;font-size:13px;line-height:1.95;color:#6E6A64}
.menu .mft{font-size:11px;color:var(--ink-soft);margin-top:28px;line-height:1.9}   /* 中央寄せにしない */


/* ── 左パネル（PC）とメニュー（スマホ）の項目のアイコン（2026-10-23 本人指示・DESIGN.md §12.1 と同じ Lucide）──
   ストーリー＝book-open／商品＝milk／使ってくれている家族から＝heart／選んだもの＝leaf／ジャーナル＝notebook-pen／よくあるご質問＝circle-help。
   線は文字と同じ色。トップの本文（版下）には入れない。クラスは .nv-*（既存の版下とぶつけない） */
.nv-ic{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu li a:has(.nv-ic),.brand nav.mnav a:has(.nv-ic){align-items:center}
.brand nav.mnav .nv-ic{width:16px;height:16px}