@charset "UTF-8";
/* ==========================================================================
   tokens.css — デザイントークン
   出典: XD 案件 260911-_-_-0819 / get_design_tokens (source: document-assets)
   ※ XD 側で名前が付いていたのは gray00 / gray01 / gray02 の 3 つだけ。
     他は name: null だったため、値はそのままに意味の分かる名前を付けている。
   ========================================================================== */

:root {
  /* --- color（XD のドキュメントアセット） --- */
  --c-white:        #FFFFFF;
  --c-gray00:       #E4E8EC; /* XD: gray00 */
  --c-gray01:       #D4D8DC; /* XD: gray01 … ページ地色（アートボードの塗り） */
  --c-gray02:       #C4C8CC; /* XD: gray02 */
  --c-ink:          #333333; /* 本文・見出し */
  --c-ink-strong:   #171717; /* ナビ・英字見出し */
  --c-orange:       #FF9933;
  --c-amber:        #F0A820;
  --c-yellow:       #FFE000;
  --c-green:        #60D080;

  /* --- SNS ブランドカラー（アイコン差し替え時の参考） --- */
  --c-line:         #06C755;
  --c-facebook:     #1877F2;

  /* --- font ---
     Koburina Gothic Std（こぶりなゴシック W6）は Web フォントを使わず画像で書き出す方針。
     該当箇所: ヘッダーのタイトル / 松坂屋×HAERA×PARCO / 栄を歩こう
     XD の YuGothic（游ゴシック）も同じ理由で --f-yu を廃止し、次のとおりに振り分けた:
       ・TOP 導入の見出し / サブ見出し … Noto Sans JP Bold（--f-jp）で組む
       ・白帯 + 地図ピン + 施設名 / 店名の白箱 / ドロワーの和文ナビ … 白帯ごと画像で書き出す

     -apple-system / BlinkMacSystemFont は Web フォントの「後ろ」に置く。先頭に置くと
     iOS / macOS でこの 2 つが和文の Hiragino Sans に解決されて Noto Sans JP より勝ってしまい、
     SP 専用のこの案件では iPhone で Web フォントが一切使われなくなるため（XD と字面が変わる）。
     明朝（--f-jp-serif）と丸ゴシック（--f-round）は書体の性格そのものが変わるので入れない。 */
  --f-jp:      "Noto Sans JP", -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", sans-serif;
  --f-jp-serif:"Noto Serif JP", "ヒラギノ明朝 ProN", serif;
  --f-en:      "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-round:   "Zen Maru Gothic", "Noto Sans JP", sans-serif;

  /* --- font-size は rem で書く（基準 16px = ブラウザ既定。参考サイトと同じ流儀） ---
     XD の px ÷ 16 = rem。全部割り切れるので端数は出ない。実装では末尾に元の px をコメントで残す。
       20px→1.25    24px→1.5     26px→1.625   28px→1.75    30px→1.875
       32px→2       36px→2.25    40px→2.5     44px→2.75    45px→2.8125
       48px→3       50px→3.125   60px→3.75    70px→4.375   80px→5
       90px→5.625  100px→6.25   120px→7.5
     ※ 幅・余白・角丸などの寸法は px のまま（参考サイトも寸法は px 主体）。 */

  /* --- layout（750px 固定・スマホのみ） --- */
  --page-w:       750px;
  /* 750px 未満のときに .l-page ごと等倍縮小する率（1 = 等倍）。
     実機は viewport が width=750px なので常に 1（ブラウザ側が 750 を画面幅に縮める）。
     効くのは viewport メタを無視する PC ブラウザを 750px 未満に狭めたときで、
     参考サイト（バレンタイン編）と同じく横スクロールを出さずに収める。
     初期値は下の @media（100vw ベース）、JS 実行後は script.js が
     clientWidth ÷ 750（スクロールバーを除いた実測）で上書きする。 */
  --zoom:         1;
  /* ページ左右の余白。script.js が (clientWidth - 750) / 2 を毎回入れる。
     position: fixed の要素はスクロールバーを含む幅を基準にしてしまい、
     margin: 0 auto で中央寄せした .l-page と PC で数 px ずれるため、
     50% ではなくこの実測値で寄せる。SP（スクロールバー無し）では 0。 */
  --gutter:       0px;
  --header-h:     120px;
  --header-offset: 132px; /* アンカースクロールの停止位置（ヘッダー + 余白） */
  /* PAGE TOP ボタンの画面下からの位置。script.js の clampPageTop() も同じ値を読み、
     .page-foot の下端に来たらそこで止める（参考サイトと同じ挙動）。 */
  --page-top-bottom: 28px;
  /* 止まったときに .page-foot の下端との間に空ける余白。
     浮いているとき（--page-top-bottom）と同じ 28px にして、
     画面下との間合いと止まったときの間合いを揃えている。 */
  --page-top-stop:   28px;
  /* アンカーで飛んだ先のフェードイン。通常のスクロール連動フェード（3s）と別枠。
     着地してから数え始めるので、3s のままだと空白を長く見せることになる。 */
  --anchor-fade:   .8s;

  /* --- drawer（XD 実測 + 画面収録の実測） --- */
  --drawer-w:        553px;            /* XD: 長方形 5791 の幅 */
  /* 動画の実測は 開 0.26〜0.28s / 閉 0.10〜0.12s。
     サイトの雰囲気に合わせて両方遅くしている（2026-08-19 ユーザー指示）。
     非対称（閉じるほうが速い）という実測の性格は保ったまま伸ばした。 */
  --drawer-open:     .45s;
  --drawer-close:    .25s;
  --drawer-ease:     cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out */
  /* 「•••」⇄「×」の変化。動画の実測は 0.06〜0.10 秒だったが、
     サイトの雰囲気に合わせて意図的に遅くしている（2026-08-19 ユーザー指示） */
  --icon-morph:      .35s;
  --scrim:           rgba(51, 51, 51, .5); /* XD: パス 29330 #333333 / opacity .5 */
}