@charset "UTF-8";
/* ==========================================================================
   common.css — 全ページ共通のスタイル。ページ固有は top / art / family / beauty.css。
   3 つの下層ページで同じ部品（矢印・白帯・リンクの丸アイコン）は
   9. 共通コンポーネントが持つ。ページ側では再定義しないこと。
   値の出典: XD 案件 260911-_-_-0819 SP_TOP
             （header 16e7306d… / menu 5ee8cc28… / menu_back 522b13dd… / PAGE TOP b747ff7e…）
   ドロワーの動きの出典: 画面収録 2026-08-19 13.20.08.mov のフレーム実測

   目次
   1. リセット（参考サイト「松坂屋の歩き方‐バレンタイン編」に準拠）
   2. ページ枠（750px 固定・PC は中央寄せ / 750px 未満は等倍縮小）
   3. ヘッダー（<div id="nav"> に js/parts.js の PARTS.nav を流し込む）
   4. ハンバーガー（開閉トリガー）
   5. ドロワー本体
   6. PAGE TOP
   7. フッター（#footer に js/parts.js の PARTS.footer を流し込む）
   8. スクロール連動フェードイン
   9. 共通コンポーネント（3 つの下層ページで同じもの）
     9-1. 次のブロックへの下向き矢印（XD: arrow シンボル 30×80）
     9-2. （欠番）地図ピンは白帯ごと画像化したので CSS では持たない
     9-3. リンクボタンの丸アイコン（XD: 前面オブジェクトで型抜き 9）
     9-4. 時刻の中抜き文字（XD: Montserrat Bold 60 / 塗り無効 + 線 2px）
     9-5. 白帯 + 地図ピン + 施設名の画像（XD: グループ 13326）
     9-6. 「※外部サイトへ遷移します」（XD: Noto Sans JP 24 / 中央）
     9-7. main 直下のブロック間の余白（XD: contents の stack spacing = 120px）
   10. ユーティリティ
   11. 全ページ共通の下部ブロック（TOP / 下層 3 ページで同じもの）
   12. 印刷
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. リセット（参考サイト「松坂屋の歩き方‐バレンタイン編」に準拠）
   -------------------------------------------------------------------------- */
html {
  width: 100%;
  height: 100%;
  /* rem の基準 = 16px（ブラウザ既定）。参考サイトも html に font-size を持たず
     既定の 16px を基準に 1.96rem / 2.4rem / 2.8rem … と書いているので同じ流儀に揃える。
     XD の px を 16 で割った値を font-size に書き、元の px は末尾のコメントに残す。 */
  font-size: 100%;
  background: var(--c-gray01);
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  background: var(--c-gray01);
  color: var(--c-ink);
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 0;   /* インライン画像の隙間対策（参考サイトと同じ書き方） */
  line-height: 0;
  /* XD（Adobe）は和文の約物を自動でツメて組む。ブラウザ既定はベタ組みなので
     同じ文字数・同じ letter-spacing でも 1 行が 70px ほど長くなり、
     XD では 1 行に収まる行が折り返してしまう（TOP 導入のリード文で実測）。
     palt で XD と同じツメ組みにする。欧文（Montserrat）には palt が無いので無害。 */
  font-feature-settings: "palt";
  /* 和文の線が PC で太って見えるのを抑える。既定の auto は macOS の
     Chrome / Safari でガンマ補正が掛かり、DPR 2〜3 のスマホ実機より太く出る。
     実機（高 DPI）側の見え方へ揃えるため grayscale AA に固定する。
     ※ 解釈されるのは macOS の Chrome / Safari だけ（Windows・iOS 実機では no-op）。
       差が出るのは主に 1x 表示で、Retina Mac では小さい。
     ※ ラスタライズ指定なのでアドバンス幅は変わらない。XD 実測に合わせた
       line-height / margin 補正と行数はこの指定では動かない（4 ページで実測確認済み）。 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
/* 疑似要素まで含める。`body *` だけだと ::before / ::after が content-box のまま残り、
   border で図形を描いている部品が線のぶんだけ大きくなる
   （.arrow-down::after は XD の 30×15 に対し 32.5×16.3、.link-btn::after は 38×8 に対し 39.5×9.5）。 */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6,
p, pre, blockquote, ul, ol, li, dl, dt, dd, figure {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-weight: inherit;
}
li, dt, dd { list-style-type: none; }
img { border: 0; max-width: 100%; height: auto; vertical-align: top; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   2. ページ枠（750px 固定・PC は中央寄せ / 750px 未満は等倍縮小）
   PC_TOP は 1441px の中に 750px の contents を x=345（= (1441-750)/2）で
   置いただけなので、max-width: 750px + margin: 0 auto で PC カンプと一致する。

   750px 未満（= viewport メタを無視する PC ブラウザを狭めたとき）は
   750px のレイアウトを崩さず zoom でまるごと縮小する。参考サイト
   （松坂屋の歩き方‐バレンタイン編）は 750px 未満で画像だけ % 縮小して
   文字サイズは据え置きだが、こちらは XD の絶対座標（回転イラスト・
   コラージュ・白枠の中の文字位置）で組んであるため、幅だけ可変にすると
   全部の位置関係が崩れる。実機（viewport width=750px）でブラウザが
   750px を画面幅に縮めているのと同じ見え方に揃えるほうが正確なので、
   文字・画像・余白を同じ率で縮める。
   ※ zoom は transform: scale と違い position: fixed の子（ヘッダー /
      ドロワー / PAGE TOP）を壊さない。scale だと fixed が .l-page 基準に
      なってしまうため使えない。
   -------------------------------------------------------------------------- */
.l-page {
  position: relative;
  max-width: var(--page-w);
  margin: 0 auto;
  background: var(--c-gray01);
  overflow-x: hidden;
  zoom: var(--zoom, 1);
}
/* JS が動く前の初期値。100vw は縦スクロールバーぶん実幅より広いので、
   script.js の updateScale() が clientWidth ÷ 750 で上書きして詰める。 */
@media screen and (max-width: 749px) {
  :root { --zoom: calc(100vw / 750); }
}

/* 750px を超えたとき（= PC で 750px の枠を中央寄せしたとき）に左右へ残る余白の色。
   枠の中（.l-page）はアートボードの塗り gray01 のまま、外側だけ gray02 にして
   ページ本体との境目を出す（2026-08-25 ユーザー指示）。
   html と body の両方に書くのは、キャンバスの背景色が html → body の順で
   拾われるため（html に色があると body は canvas へ伝播しない）。 */
@media screen and (min-width: 751px) {
  html,
  body { background: var(--c-gray02); }   /* #C4C8CC = XD: gray02 */
}

/* --------------------------------------------------------------------------
   3. ヘッダー（<div id="nav"> に js/parts.js の PARTS.nav を流し込む）
   XD: menu_back = 750×120 / #D4D8DC / opacity .5
       header    = 750×120、中に 435×70 の白箱（padding 15）+ タイトル + 14×14 の図形
   ※ こぶりなゴシックのタイトルは画像（img/common/header_title_atarashii_sakae.png）
   挙動: 参考サイトと同じく、最初は出さずメインビジュアルを過ぎたら現れて固定される
         （script.js が .is-fixed を付け外しする）。position は常に fixed のままで
         表示だけ切り替える（static ⇄ fixed を入れ替えるとレイアウトが 120px ぶん飛ぶため）。
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: var(--gutter);
  z-index: 100;
  width: 100%;
  max-width: var(--page-w);
  height: var(--header-h);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s linear, visibility 0s linear .3s;
}
.site-header.is-fixed {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s linear, visibility 0s linear 0s;
}
/* 下層ページはメインビジュアルを待たず最初から固定表示（2026-08-20 ユーザー指示）。
   XD でも menu_back / header は y0 で 01_mainv に重なっており、
   下層 3 枚とも MV の上端 120px は何も置かれていない＝ヘッダーぶんの空き。
   フェードインさせないよう transition ごと打ち消す。 */
.is-header-fixed .site-header {
  opacity: 1;
  visibility: visible;
  transition: none;
}
.site-header__bg {           /* XD: menu_back = #D4D8DC / opacity .5 だが、
                                背景は完全に透明にする指示（2026-08-20）。
                                帯を出さず、白箱のタイトルとハンバーガーだけを浮かせる。 */
  position: absolute;
  /* inset は Safari 14.1 から。14.0 でも位置が決まるよう longhand を先に書く */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: transparent;
}
.site-header__title {        /* XD: グループ 13282 + 長方形 10076 = 435×70 / x43 y25 */
  position: absolute;
  left: 20px;
  top: 25px;
  display: block;
  width: 435px;
  height: 70px;
  background: var(--c-white);
}
/* 画像は白箱ごと（余白 + 「。」まで）書き出したもの＝ 436×70。
   中の文字は 401×36 で XD のテキスト 391×40 + パス 38837（。）とほぼ一致。
   1px ぶんは書き出しの丸め誤差なので box に合わせて敷き詰める。 */
.site-header__title img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   4. ハンバーガー（開閉トリガー）
   XD: 楕円形 16 = 82×82 / border 2px #333、中の「•••」= 40×8、× は 40×40（INDEX）
   動画で確認したこと: 円は動かず同じ位置に留まり、中のアイコンだけが「•••」⇄「×」に
   変化する。＝ ボタンは 1 つで、閉じるボタンは別に置かない。
   秒数は動画の実測（0.06〜0.10 秒）ではなく、サイトの雰囲気に合わせて --icon-morph
   （0.35 秒・専用の ease-in-out）まで遅くしている（2026-08-19 ユーザー指示）。
   アイコンは SVG ではなく span と疑似要素の CSS transform / opacity で作る
   （jQuery 1.7.2 環境に新しい JS ライブラリを持ち込まない判断）。
   -------------------------------------------------------------------------- */
.drawer-trigger {
  position: fixed;
  top: 19px;
  z-index: 120;
  right: calc(var(--gutter) + 20px);  /* 750px 枠の右端から 30px */
  width: 82px;
  height: 82px;
  padding: 0;
  border: 2px solid var(--c-ink);
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.drawer-trigger__icon {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  /* 点・線の動き出しと止まり際を柔らかくする。 */
  --icon-ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* 動画の「•••」→「×」は、3 点をそのまま太らせる動きではない。
   左右の点は時計回りに左上／右下へ回り、左上を始点に「\\」が引かれる。
   中央の点は位置を変えずに消え、固定位置の「/」がフェードインする。 */
.drawer-trigger__icon::before,
.drawer-trigger__icon::after {
  position: absolute;
  z-index: 0;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-ink);
  content: '';
  pointer-events: none;
}
/* 中央の点と入れ替わる「/」。位置は動かさず、不透明度だけを変える。 */
.drawer-trigger__icon::before {
  /* 4px 化しても斜線の中心（左下）は従来どおりに保つ。 */
  top: 32px;
  left: 6px;
  opacity: 0;
  transform: rotate(-45deg);
  transform-origin: left center;
  transition: opacity calc(var(--icon-morph) * .60) var(--icon-ease);
}
/* 左上の点を始点に、右下の点へ向けて伸びる「\\」。 */
.drawer-trigger__icon::after {
  /* 4px 化しても斜線の中心（左上）は従来どおりに保つ。 */
  top: 4px;
  left: 6px;
  opacity: 0;
  transform: rotate(45deg) scaleX(0);
  transform-origin: left center;
  /* 閉じるときは線を先に薄くして、左上に短線を残さない。 */
  transition:
    transform calc(var(--icon-morph) * .65) var(--icon-ease),
    opacity   calc(var(--icon-morph) * .45) var(--icon-ease);
}
.drawer-trigger__icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--c-ink);
  transition:
    transform var(--icon-morph) var(--icon-ease),
    opacity   calc(var(--icon-morph) * .60) var(--icon-ease);
}
.drawer-trigger__icon span:nth-child(1) {
  /* 左点は \ の始点へ回り込み、すぐに線へ溶け込む。 */
  transition:
    transform calc(var(--icon-morph) * .45) var(--icon-ease),
    opacity   calc(var(--icon-morph) * .45) var(--icon-ease);
  transform: rotate(0deg) translateX(-16px);
}
.drawer-trigger__icon span:nth-child(3) {
  /* 右点は線の伸縮と同時に動き、途中で終点へ吸収される。 */
  transition:
    transform calc(var(--icon-morph) * .90) var(--icon-ease),
    opacity   calc(var(--icon-morph) * .60) var(--icon-ease);
  transform: rotate(0deg) translateX(16px);
}
.drawer-trigger__icon span:nth-child(2) {
  /* 中央の点は移動させない。 */
  transition: opacity calc(var(--icon-morph) * .60) var(--icon-ease);
}

/* 開いている状態 = 「×」。左右の点は同じ 45°回転で左上／右下に着地する。 */
.drawer-trigger.is-open .drawer-trigger__icon::before {
  opacity: 1;
  transition-delay: 0s;
}
.drawer-trigger.is-open .drawer-trigger__icon::after {
  opacity: 1;
  transform: rotate(45deg) scaleX(1);
  /* 開くときは左上を始点に右下へ伸ばし、線はすぐに不透明にする。 */
  transition:
    transform var(--icon-morph) var(--icon-ease),
    opacity   calc(var(--icon-morph) * .18) var(--icon-ease);
  transition-delay: 0s;
}
.drawer-trigger.is-open .drawer-trigger__icon span:nth-child(1) {
  /* 動画では全要素が同時に動き始め、左点は短い \ へ変わる。 */
  opacity: 0;
  transition:
    transform calc(var(--icon-morph) * .45) var(--icon-ease),
    opacity   calc(var(--icon-morph) * .45) var(--icon-ease);
  transform: rotate(45deg) translateX(-20px);
}
.drawer-trigger.is-open .drawer-trigger__icon span:nth-child(3) {
  /* 右点も同時に右下へ回り、\ が届く前に透明化する。 */
  opacity: 0;
  transition:
    transform calc(var(--icon-morph) * .90) var(--icon-ease),
    opacity   calc(var(--icon-morph) * .60) var(--icon-ease);
  transform: rotate(45deg) translateX(20px);
}
.drawer-trigger.is-open .drawer-trigger__icon span:nth-child(2) {
  opacity: 0;
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   5. ドロワー本体
   XD: 長方形 5791 = 553×1342 の白／パス 29330 = #333333 opacity .5 の暗幕
   動き（動画実測）: 右から水平スライド。開き 0.28s ease-out / 閉じ 0.12s。
                     暗幕はフェードせず即時に切り替わる。
   ※ .is-open が付いている間だけ transition-duration が「開き」の値になるので、
      クラスを外すときは自動的に「閉じ」の速さになる（非対称の指定はここだけ）。
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  top: 0;
  right: var(--gutter);
  z-index: 110;
  width: var(--drawer-w);
  max-width: 100%;
  height: 100%;
  padding: 150px 60px 60px;
  background: var(--c-white);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  /* visibility を遅延で切り替えて、閉じ切ったあとに隠す。
     position: fixed は .l-page の overflow-x: hidden で切り取られないため、
     これが無いと PC 表示（750px を中央寄せ）でページ右の余白に白いパネルが見えてしまう。 */
  visibility: hidden;
  transition:
    transform  var(--drawer-close) var(--drawer-ease),
    visibility 0s linear var(--drawer-close);
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform  var(--drawer-open) var(--drawer-ease),
    visibility 0s linear 0s;
}
.drawer-scrim {              /* XD: パス 29330。フェードさせない */
  position: fixed;
  /* inset は Safari 14.1 から。14.0 では位置が決まらず暗幕が潰れて、
     見た目が消えるだけでなく「外側タップで閉じる」まで効かなくなるので
     longhand を先に書いてフォールバックにする。 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 105;
  background: var(--scrim);
  display: none;
}
.drawer-scrim.is-open { display: block; }

/* ドロワーの中身（XD の stack を flex で再現） */
.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.drawer__top {               /* XD: TOP / Montserrat 40 / stroke 1.5px */
  font-family: var(--f-en);
  font-size: 2.5rem;  /* 40px */
  font-weight: 400;
  line-height: 1;
  letter-spacing: .15em;
  color: var(--c-ink-strong);
  -webkit-text-stroke: 1.5px var(--c-ink-strong);
  margin-bottom: 10px;
}
.drawer__item {              /* XD: グループ 13307 / 13322 / 13323（427×74・gap 15） */
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.drawer__item-en {           /* 01.ART ROUTE 等 */
  font-family: var(--f-en);
  font-size: 1.5rem;  /* 24px */
  font-weight: 500;
  line-height: 30px;
  letter-spacing: .15em;
  color: var(--c-ink-strong);
}
.drawer__item-jp {           /* アートを楽しむ秋 等 */
  /* XD は YuGothic（游ゴシック）。9-5 の白帯と同じ理由で 2 倍 PNG の画像に置き換えている。
     大きさは高さ側だけ指定し、幅は画像の縦横比に任せる（下の .is-current で 40px に伸びる）。 */
  display: block;
}
.drawer__item-jp img {
  display: block;
  width: auto;
  height: 30px;              /* XD: 30px */
}
/* 開いているページのナビだけ大きくする（参考サイトの li.nav_cnt_ttl を引き継ぐ仕様）。
   参考サイトは通常 28px → 現在ページ 40px（= TOP 項目と同じ大きさ / 約 1.33 倍）だったので、
   同じ倍率を当てて 24px → 32px、30px → 40px にしている。
   ドロワーの内容幅は 553 - 60*2 = 433px。和文は画像なので 40px 表示時の幅は
   書き出し画像の比率で決まり、いちばん長い「秋の美容を楽しむ秋」で 289 × 40/30 ≒ 385px。
   .is-current は script.js が location のファイル名と href を突き合わせて付ける。 */
.drawer__item.is-current .drawer__item-en {
  font-size: 2rem;  /* 32px（通常 24px） */
}
.drawer__item.is-current .drawer__item-jp img {
  height: 40px;  /* 40px（通常 30px） */
}
/* TOP 項目は元から 40px（= 最大）なので、現在ページでもサイズは変えない。
   参考サイトも first-of-type が常に 40px で同じ挙動。 */

.drawer__divider {           /* XD: パス 38930（高さ 0 の水平パス → 罫線） */
  width: 427px;
  max-width: 100%;
  height: 0;
  margin: 70px 0;
  /* <hr> の UA スタイル（border: 1px inset）を先に消す。
     消さないと border-bottom が残って実測 2px の二重線になる（XD は 1px）。 */
  border: 0;
  border-top: 1px solid var(--c-ink-strong);
}
.drawer__links {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.drawer__link {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: var(--f-jp);
  font-size: 1.5rem;  /* 24px */
  font-weight: 500;
  line-height: 2;              /* XD 行送り 48px = 24px の 2 倍 */
  color: var(--c-ink);
}
.drawer__link img { width: 25px; height: 25px; }
.drawer__sns {               /* XD: グループ 12202（370×55・gap 50） */
  display: flex;
  flex-direction: row;
  gap: 50px;
  margin-top: 30px;
}
.drawer__sns img { width: 55px; height: 55px; }

/* --------------------------------------------------------------------------
   6. PAGE TOP
   XD: 縦組みの「TOP」（Zen Maru Gothic 26 / stroke 1px / rotate -90deg）+ 65×13 の線
       ※ 長方形 5748 とパス 4384 は XD で非表示なので実装しない
   -------------------------------------------------------------------------- */
.page-top {
  position: fixed;
  bottom: var(--page-top-bottom);  /* XD: y1175 + 高さ139 = 1314。アートボード高 1342 との差 = 28px。
                                      script.js の clampPageTop() が margin-bottom で押し上げて
                                      .page-foot の下端より下へ行かないようにする */
  right: calc(var(--gutter) + 10px); /* XD: x703 + 37 = 740。右端から 10px */
  z-index: 90;
  display: none;             /* スクロールで表示（script.js） */
  width: 37px;
  height: 139px;
  cursor: pointer;
}
.page-top__line {            /* XD: パス 4385（65×13・stroke 2px #171717）
                                = 縦線 + 片側だけの矢じり。XD から SVG で書き出した実データ。
                                以前は縦線だけ 2px の div で描いていて矢じりが無かった。
                                SVG 内での縦線の中心は右端から 1px（x13.633 / 幅 14.633）、
                                線の上端は y2.576 なので、その 2 つを基準に置いている */
  position: absolute;
  top: -2.6px;               /* 線の頭が .page-top の y0 に来るように上へ逃がす */
  left: 50%;
  margin-left: -13.6px;      /* SVG 内の縦線を .page-top の中央に合わせる */
  width: 14.7px;
  height: 67.2px;
  background: url(../img/common/pagetop_arrow.svg) no-repeat 0 0 / 14.7px 67.2px;
}
.page-top__label {           /* XD: TOP（Zen Maru Gothic 26 / stroke 1px / rotate -90deg / 62×37） */
  position: absolute;
  left: 50%;
  top: 89.5px;               /* 139 - 62/2 - 37/2。回転後の描画が下端 62px に収まる位置 */
  width: 62px;
  height: 37px;
  margin-left: -31px;
  transform: rotate(-90deg);
  transform-origin: center;
  font-family: var(--f-round);
  font-size: 1.625rem;  /* 26px */
  font-weight: 400;
  line-height: 37px;
  letter-spacing: .2em;
  text-align: center;
  color: var(--c-ink-strong);
  -webkit-text-stroke: 1px var(--c-ink-strong);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. フッター（#footer に js/parts.js の PARTS.footer を流し込む）
   参考サイト「松坂屋の歩き方‐バレンタイン編」の _include/css/footer.css と
   ページ側 style.css の #footer 規則を 750px 固定用に統合したもの
   -------------------------------------------------------------------------- */
.site-footer {
  /* XD ではフッターが .page-foot の白帯の直下から始まる（間の余白は白帯の
     padding-bottom 100px に含まれる）ので、ここに margin は入れない。 */
  padding: 50px 60px 80px;
  max-width: var(--page-w);
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-jp);
  text-align: left;
}
.site-footer .footer_link {
  margin-bottom: 10px;
  font-size: 1.8125rem;  /* 29px */
  line-height: 49px;
}
.site-footer .footer_link_child {
  margin-top: 10px;
  padding-left: 1.5em;
}
.site-footer .footer_link_small_text { font-size: 1.5rem;  /* 24px */ }
.site-footer a {
  color: var(--c-white);
  display: inline-block;
  vertical-align: top;
}
.site-footer a::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  /* フッターは参考サイト（松坂屋の歩き方‐バレンタイン編）からの流用で、XD に対応する
     ノードが無い＝正解の寸法を照合できない。上のリセットを border-box に広げると
     この矢じりだけ 16×16 → 14×14 に縮んで見た目が変わってしまうので、
     ここだけ従来どおり content-box のままにして現状の見え方を保つ。 */
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border-top: 2px solid var(--c-white);
  border-right: 2px solid var(--c-white);
  transform: rotate(45deg);
}
.site-footer .footer_link_child a::before { width: 12px; height: 12px; }
.site-footer .footer-copyright {
  margin-top: 30px;
  text-align: center;
}
/* line-height を書かないと 1. のリセット（body { line-height: 0 }）がここまで効く。
   24px の文字に対して行ボックスが 0 になり、文字が箱から 18px 上へはみ出して
   上の 30px と .site-footer の padding-bottom 80px が見た目どおりに効かなくなる。
   上の .footer_link（29px / 49px ≒ 1.69）と同じ比率に揃える。 */
.site-footer .footer-copyright small {
  font-size: 1.5rem;  /* 24px */
  line-height: 40px;
}

/* --------------------------------------------------------------------------
   8. スクロール連動フェードイン
   参考サイトの style.css をそのまま流用（秒数・遅延も変更しない）
   -------------------------------------------------------------------------- */
.scrollanime { opacity: 0; }
.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
#idx .fadeInDown:nth-child(even) { animation-delay: .4s; }
@keyframes fadeInDown {
  0%   { opacity: 0; }
  100% { opacity: 1; transform: translate(0); }
}
.downup { transform: translateY(100px); }

/* アンカーで飛んだ先の見せ方（script.js の scrollToTarget() がクラスを付ける）

   .is-anchor-target … 飛び先の <section>。飛ぶと決まった時点で付く
   .is-arrived       … スクロールが着地した時点で付く

   - transform: none … 上下の動き（translateY(100px)）は打ち消す。
     800ms のスクロールが終わったあとも 3s のフェードで 100px 動き続けると、
     着地位置が定まらない（実測で 232.8 → 132.8 と 2 秒かけてせり上がっていた）
   - フェードは残すが、通常の 3s ではなく --anchor-fade（.8s）で、
     しかも着地に合わせて始める。3s のまま着地時点から数えると
     不透明度が 2 割ほどしかなく、画像の読み込みが遅い回線では
     「灰色の空白に飛ばされた」ように見えてしまうため
   - スクロールして自力でたどり着いたときは従来どおり 3s + 上下の動きが出る */
/* 動かしてよいのは「飛び先の中身」だけ。飛び先の <section> そのものは固定する。
   停止位置を測る基準がここなので、ここが動くと着地位置が定まらない
   （実測で 232.8 → 132.8 と 2 秒かけてせり上がっていたのがこれ）。
   中の .scrollanime は動かしてよいので、下からのフェードインはそのまま出せる。 */
.is-anchor-target { transform: none !important; }

/* 以下 2 つは「着地後に画面へ入る要素」だけに付く（script.js が選ぶ）。
   画面外に残る要素にはこれを付けない ＝ 通常のスクロール連動フェードのまま
   にしておく。全部まとめて出すと、SEASON INFORMATION の 6 連バナーのように
   画面外のぶんまで着地と同時に消化されてしまい、あとからスクロールしても
   1 枚ずつ出てこなくなる。 */

/* 着地までは伏せる。animation を消すと .scrollanime の opacity: 0 に戻る
   （ここで opacity: 0 !important と書いてはいけない。!important は animation
   より強いので、次の .is-arrived のフェードまで殺してしまう）。 */
.is-anchor-fade { animation: none !important; }

/* 着地したら「下からフェードイン」。発火は 1 回だけで、
   一度出たものを踏み直しても再生しない（サイト全体の .scrollanime と同じ方針）。 */
.is-anchor-target.is-arrived .is-anchor-fade {
  animation: anchorFadeIn var(--anchor-fade) ease-out 0s forwards !important;
}

/* すでに出ている / すでに画面に入っているものは伏せずにそのまま見せる。
   目の前で一度消えてから出るとちらついて見えるため。 */
.is-anchor-shown {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* 通常のスクロール連動フェード（.downup + fadeInDown）と同じ 100px の上下動。
   違いは秒数（3s → --anchor-fade）と、着地に合わせて始まること。 */
@keyframes anchorFadeIn {
  from { opacity: 0; transform: translateY(100px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 確認用（?noanim=1）: フェードインを止めて最終状態で見せる。
   XD との位置照合をこの状態で行う。本番の表示には関与しない。 */
.no-anim .scrollanime,
.no-anim .is-anchor-target,
.no-anim .is-anchor-target .scrollanime {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   9. 共通コンポーネント（3 つの下層ページで同じもの）

   ART / FAMILY / BEAUTY で同じ見た目の部品が別々のクラス名・別々の書き方で
   3 セットあったものを 1 つにまとめている。XD 側もそれぞれ 1 つのシンボル
   （arrow / 型抜き 9）なので、実装も 1 つにするのが正しい。
   -------------------------------------------------------------------------- */

/* 9-1. 次のブロックへの下向き矢印（XD: arrow シンボル 30×80）
   縦線（パス 38565 = 0×80 / stroke 2px）+ 下向きシェブロン（パス 38566 = 30×15 / stroke 2px）。
   シェブロンは 21×21 の正方形を 45° 回して 2 辺だけ描いたもの（21×√2 ≒ 29.7×14.85 = XD の 30×15）。
   margin: 0 auto は BEAUTY 用（親がフレックスでないため）。ART / FAMILY の親は
   align-items: center なので影響しない。 */
.arrow-down {
  position: relative;
  display: block;
  width: 30px;
  height: 80px;
  margin-right: auto;
  margin-left: auto;
}
.arrow-down::before {        /* 縦線 */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 80px;
  margin-left: -1px;
  background: var(--c-ink);
}
.arrow-down::after {         /* シェブロン。回転後の先端がちょうど y80 に来る */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 21px;
  height: 21px;
  margin-left: -10.5px;
  border-right: 2px solid var(--c-ink);
  border-bottom: 2px solid var(--c-ink);
  transform: rotate(45deg);
}

/* 9-2. （欠番）地図ピン
   XD の icon_pin は 9-5 の白帯画像に焼き込まれているため、CSS の部品は持たない。 */

/* 9-3. リンクボタンの丸アイコン（XD: 前面オブジェクトで型抜き 9）
   36px の黒丸に右向き三角を抜いたもの。三角は border で作る。 */
.link-icon {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-ink);
}
.link-icon::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--c-gray00);
}

/* 9-4. 時刻の中抜き文字（XD: Montserrat Bold 60 / テキスト枠 73px / 塗り無効 + 線 2px）
   ART / FAMILY / BEAUTY の 3 ページで同じ部品。ページ側で再定義しないこと。

   ■ なぜ SVG 画像なのか（-webkit-text-stroke に戻さないこと）
   Montserrat の 1 / 2 / 3 などは、字形が「自己交差した 1 本の輪郭」で描かれている
   （例: 1 は旗の斜線が軸と交差する）。塗り（nonzero）では交差部が見えないが、
   -webkit-text-stroke も SVG <text> の stroke も交差した線ごと描いてしまうため、
   1 の旗の中や 2 の左下に三角形が出る（実測で 2px / 1.5px / SVG <text> すべて再現）。
   XD は輪郭を結合してから線を引くのでこれが出ない。
   そこで Montserrat Bold の輪郭を union して自己交差を解消した SVG を書き出し、
   img/common/time_hhmm.svg として貼っている。
   生成条件は XD と同値: font-size 60 / characterSpacing 100（= 6px）/ 線 2px 中央 / #333333。
   時刻を追加・変更するときは tools/gen_timenum.py で SVG を作り直す（使い方はスクリプト冒頭）。
   既存の SVG が生成条件どおりかは tools/gen_timenum.py --check で確かめられる。
   テキストに戻すと三角が復活するので戻さないこと。

   ■ 余白の打ち消し
   SVG には線 2px（中央揃えなので外へ 1px）とマイターぶんの余白として上下左右 4px を
   持たせてある（実寸 81px = 73 + 4 + 4）。<p> 側は XD のテキスト枠どおり 73px に固定し、
   SVG は position: relative で 4px 戻して枠からはみ出させる。
   ※ 負の margin では打ち消さないこと。.art-spot__time / .family-time は flex だが
      .beauty-spot__head はブロックで、下の -4px が次要素の margin-top: 15px と相殺されて
      間隔が 11px に縮む（BEAUTY だけページ高が 16px 縮むのを実測で確認済み）。 */
.time-num {
  display: block;
  height: 73px;            /* XD: テキスト枠 73px */
}
.time-num img {
  display: block;
  position: relative;      /* レイアウトを動かさずに SVG の余白 4px ぶんだけ戻す */
  left: -4px;
  top: -4px;
  /* 1. のリセットの img { max-width: 100% } を打ち消す（.place-band img と同じ理由） */
  max-width: none;
}

/* 9-5. 白帯 + 地図ピン + 施設名の画像（XD: グループ 13326 = 長方形 10098 80px + icon_pin + Text）
   施設名の書体は XD が YuGothic（游ゴシック）。Web フォントが用意できず端末側の有無で
   フォールバックが変わってしまうため、tokens.css のこぶりなゴシックと同じ方針で
   「白帯・地図ピンごと 2 倍 PNG で書き出して貼る」に変更した（実テキストは alt に持たせる）。
   帯の寸法は書き出し画像そのものが持つので、ページ側でも width を指定しない。 */
.place-band {
  display: block;
}
.place-band img {
  display: block;
  /* 1. のリセットの img { max-width: 100% } を打ち消す。FAMILY 16:00 の帯だけ
     XD 実寸が 651px あり（長方形 10098 = 651×80）、650px のコンテンツ幅に
     収まらないため 650px へ縮められて 1px 潰れていた（実測 650×80）。 */
  max-width: none;
}

/* 9-6. （欠番）「※外部サイトへ遷移します」の .ext-note があった枠。
   XD にはリンクボタン下に注記（Noto Sans JP 24 / 行送り 38 / 中央）が実在するが、
   4 か所すべて削除する指示（2026-09-10）のためクラスごと撤去した。
   XD から取り直すときに復活させないこと。 */

/* --------------------------------------------------------------------------
   10. ユーティリティ
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ドロワーを開いている間も背面のスクロールは止めない（2026-08-19 ユーザー指示）。
   参考サイトも止めていない（scroll-prevent はコメントアウトされたまま）。 */

/* --------------------------------------------------------------------------
   9-7. main 直下のブロック間の余白（XD: contents の stack spacing = 120px）
   4 ページとも main の直下に「メインビジュアル → 本文 → 共通ブロック群」が並ぶ。
   メインビジュアルと本文の間の 120px もこの 1 行が作る。個別 CSS 側で
   margin-top: 120px を書き足さないこと（二重になる／同じものが 3 通りになる）。
   ※ BEAUTY だけは本文が main の直下ではなく .beauty-page の中にあるためこの規則が
     届かない。beauty.css の .beauty-body が同じ 120px を自前で持っている。
   -------------------------------------------------------------------------- */
main > * + * { margin-top: 120px; }

/* --------------------------------------------------------------------------
   11. 全ページ共通の下部ブロック（TOP / 下層 3 ページで同じもの）
   出典: XD SP_TOP contents（menu_01 5de76320… / menu_02 cbfb2ea9… /
         menu_03 ea724cd1… / menu_quizrally b44ce943… / グループ 13319）
   ※ 各ページの HTML はこのクラス名で書き、CSS はここ 1 か所だけに持つ（オーナーは共通側）。
   ※ ルートカードと QUIZ RALLY は XD から 1 枚に平坦化して書き出した PNG を貼る。
      個別の写真・イラストを CSS で組み直さない（位置が XD と 1px も違わなくなる）。
   -------------------------------------------------------------------------- */

/* ---- ルートカード 3 枚（XD: menu_01 / menu_02 / menu_03 = 各 750×375） ----
   カード内のコラージュ（色面・写真・イラスト・番号・EN・コピー・START ボタン）は
   1 枚に平坦化した PNG を使う（2 倍 1500×750 → 表示 750×375）。
   画像に焼き込まれた文字は <a> の中に .u-visually-hidden の実テキストで残す。 */
.route-cards {
  display: flex;
  flex-direction: column;
  gap: 30px;              /* XD: グループ 13324 の stack spacing */
}
.route-card {
  display: block;
  width: 750px;
  /* 背景は敷かない。カードの PNG は角まわりが透過なので、
     ページ地色（--c-gray01）をそのまま透かす（2026-08-20 ユーザー指示）。 */
}
.route-card__img {
  display: block;
  width: 750px;
  height: 375px;          /* XD: 長方形 10095 / 10092 / 10089 */
}

/* ---- EVENT / QUIZ RALLY ---- */
.quiz-rally {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;              /* XD: グループ 13435 の stack spacing */
  width: 750px;
}
/* EVENT / SEASON INFORMATION の英字見出し（XD: Montserrat 40 SemiBold ls.15 中央） */
.quiz-rally__head,
.season-info__head {
  font-family: var(--f-en);
  font-size: 2.5rem;  /* 40px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: .15em;
  color: var(--c-ink-strong);
  text-align: center;
}
.quiz-rally__body {       /* XD: menu_quizrally = 750×360。中身は 1 枚に平坦化した PNG。
                              <a> なので display: block が必須（既定は inline）。
                              リンク先は未確定（href="#" のプレースホルダー、page_*.html 参照） */
  display: block;
  width: 750px;
}
.quiz-rally__img {
  display: block;
  width: 750px;
  height: 360px;
}

/* ---- SEASON INFORMATION ---- */
.season-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;              /* XD: グループ 13319 の stack spacing */
  width: 750px;
}
.season-info__list {
  display: flex;
  flex-direction: column;
  gap: 30px;              /* XD: グループ 13318 の stack spacing */
  width: 475px;
}
.season-info__item {      /* XD: 長方形 10115 = 475×304。6 枚とも支給バナー画像に置換済み */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 475px;
  height: 304px;
  background: #ADADAD;    /* 画像が読み込まれる前の下地 */
}
.season-info__item img {
  display: block;
  width: 475px;
  height: 304px;
}

/* ---- 注意書き + 松坂屋名古屋店ボタンの箱 ---- */
.page-foot {              /* XD: グループ 12231（650×225）→ 60px → 長方形 9315（650×120） */
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: var(--page-w);
  /* 白地。内側の余白は XD 実測で上 60px / 下 100px。
     この白帯の下端にフッターが直接つく（間に隙間は入らない）。
     上の 120px（グレー）は contents スタックの間隔なので main > * + * が持つ。 */
  padding: 60px 0 100px;
  background: var(--c-white);
}

.notes {                  /* XD: グループ 12231 = 650×225 */
  width: 650px;
  margin: 0 auto;
  font-family: var(--f-jp);
  font-size: 1.5rem;  /* 24px */
  font-weight: 400;
  line-height: 1.58;
  color: var(--c-ink);
}

/* ---- 松坂屋名古屋店ボタン ---- */
.link-btn {               /* XD: 長方形 9315 = 650×120 白・2px 線・角丸 20 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 650px;
  height: 120px;
  margin: 0 auto;
  background: var(--c-white);
  border: 2px solid var(--c-ink);
  border-radius: 20px;
  box-sizing: border-box;
  font-family: var(--f-jp-serif);
  font-size: 1.75rem;  /* 28px */
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: .12em;
  color: var(--c-ink);
}
.link-btn::after {        /* XD: パス 26834 = 38×8 の矢印（線 1.5px） */
  content: "";
  display: block;
  width: 38px;
  height: 8px;
  border-bottom: 1.5px solid var(--c-ink);
  border-right: 1.5px solid var(--c-ink);
  transform: skewX(45deg) scaleY(.5);
}

/* --------------------------------------------------------------------------
   12. 印刷
   @media print が無いと 3 つ壊れる（実測。page_art.html 750px 幅で 16 ページ中
   13 ページが白紙、うち固定 UI だけは全 16 ページに焼き直される）:
   1) スクロール連動フェードの .scrollanime は opacity: 0 が初期値。画面に
      入って JS が .fadeInDown を付けるまで opacity: 0 のままなので、印刷も
      「どこまでスクロールしたか」で白紙の量が変わる（未スクロールで 13/16
      ページ白紙）。.no-anim（8. の ?noanim=1）と同じセレクタで最終状態に固定する
   2) position: fixed のヘッダー・ハンバーガー・ドロワー・PAGE TOP は
      Chromium が全ページに描き直す。.page-top は script.js が
      style="display:inline" を直接書くため、消すには !important が要る
      （無いと 16 ページ全部に「TOP」が残ることを実測で確認済み）
   3) --zoom は script.js が <html> の inline style に書くため print にも
      効いてしまい、印刷する側のウィンドウ幅で刷り上がりの大きさ・ページ数が
      変わる（幅 375 で刷ると 8 ページ・幅 750 以上で刷ると 16 ページ、を実測）。
      zoom: 1（＝750px）は A4 の印字幅（余白込みで実測 717.8px）を超えるので
      使わない。.9（＝675px）なら 10mm 余白でも左右に余りが出て収まる
   ※ 750px 固定の SP 専用ページなので、印刷は「実機で確認しながら詰める」
     対象にはしていない（そこまでの運用が要るか不明。CLAUDE.md 参照）。
     この節は「白紙ページが出る」という壊れ方を止めるための最小限。 -------------------------------------------------------------------------- */
@page { size: A4 portrait; margin: 10mm; }

@media print {
  .site-header,
  .drawer-trigger,
  .drawer,
  .drawer-scrim,
  .page-top { display: none !important; }

  .scrollanime,
  .is-anchor-target,
  .is-anchor-target .scrollanime {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .l-page { zoom: .9 !important; }
}