@charset "UTF-8";
/* ==========================================================================
   top.css — TOP（index.html）専用
   出典: XD 案件 260911-_-_-0819 / SP_TOP（snapshot 2026-08-19T04-07-53-639Z）
         main 30a04803… / logo 0c8b0c33… / 導入 0b0e2e43…
   ※ サイズ・色・フォント・stack の間隔は XD の実値。
     メインビジュアルのコラージュ（地図・イラスト・写真）は CSS で組まず、
     XD から 1 枚に平坦化して書き出した PNG を貼っている。

   目次
   1. メインビジュアル（750×1050）
   2. タイトルロックアップ（XD: logo 0c8b0c33… ）
   3. 導入（XD: 導入 0b0e2e43… / 650×570・stack gap 60）
   ========================================================================== */

/* セクション間の余白 120px は common.css（main > * + *）が持つ。ここは TOP 固有の例外だけ。 */
.top-mv + .top-intro { margin-top: 81px; }  /* XD: main 下端 1050 → contents visualY 1131 */

/* --------------------------------------------------------------------------
   1. メインビジュアル（750×1050）
   XD: main 30a04803… のコラージュ（地図・イラスト・カップルの写真）は
       1 枚に平坦化した PNG を使う（2 倍 1500×2100 → 表示 750×1050）。
       元の書き出しは右に 61.5px はみ出していたので、アートボード幅で切り落としてある。
   -------------------------------------------------------------------------- */
.top-mv {
  position: relative;
  width: 750px;
  height: 1050px;
  overflow: hidden;
}
.top-mv__img {
  display: block;
  width: 750px;
  height: 1050px;
}

/* --------------------------------------------------------------------------
   2. タイトルロックアップ（XD: logo 0c8b0c33… ）
   グループ 13321 = 357×409 / アートボード座標 x30 y90・縦スタック gap 30。
   ※ 位置は XD の「長方形 10076（あたらしいの白箱 321×90）」の X/Y = 30 / 90。
     ツール側の translation（グループ 13321 の x6 y48 / 白箱の x43）は
     スタック配下で失効していて使えないので、XD の実測値を正とする。
   XD の stack は配列が視覚と逆順なので、並びは
     グループ 13281（タイトル 351×175）→ グループ 13280（キャッチ 357×125）
     → 9.16 WED - 10.6 TUE（294×49）。175 + 30 + 125 + 30 + 49 = 409 で高さが合う。
   こぶりなゴシック W6 の 2 ブロックは画像。会期は Montserrat なのでテキストのまま。
   -------------------------------------------------------------------------- */
.top-logo {
  position: absolute;
  left: 30px;
  top: 90px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}
.top-logo__title { margin: 0; }
.top-logo__title img {   /* XD: グループ 13281 = 白箱 2 段 +「。」 */
  display: block;
  width: 351px;
  height: 175px;
}
.top-logo__catch { margin: 0; }
.top-logo__catch img {   /* XD: グループ 13280 = キャッチ 2 行 + 罫線（357×125）。書き出しは 716×252 */
  display: block;
  width: 357px;
  height: 125px;
}

.top-logo__date {                /* XD: 9.16 WED - 10.6 TUE / Montserrat 40 + 20 の混在 */
  /* flex + margin 6px で区切りを近似していたが、XD は " WED" / " - 10.6" / " TUE" の
     半角スペースもその range の書体で組んでいる（40px のスペースは 6px より広い）。
     そのぶんが足りず XD 実測 294 に対し 284.4px（-9.6）に詰まっていたので、
     インライン組みへ戻してスペースを実文字で持たせる。
     XD の characterSpacing は 4 range とも 0 なので letter-spacing は指定しない
     （以前の .02em は body { font-size: 0 } を継承していて computed が normal になり
     効いていなかった。font-size を足すと今度は XD より広がるので入れない）。 */
  height: 49px;                  /* XD: テキスト枠 294×49（行送り 60 は 1 行なので不使用） */
  margin: 0;
  font-family: var(--f-en);
  color: var(--c-ink);
  line-height: 49px;
  white-space: nowrap;
}
.top-logo__date-num {
  font-size: 2.5rem;  /* 40px */
  font-weight: 600;
}
.top-logo__date-dow {
  font-size: 1.25rem;  /* 20px */
  font-weight: 800;
}
.top-logo__date-sep {
  font-size: 2.5rem;  /* 40px */
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. 導入（XD: 導入 0b0e2e43… / 650×570・stack gap 60）
   並び順はスクリーンショットで確認: 見出し → サブ → 会期 → リード文
   -------------------------------------------------------------------------- */
.top-intro {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.top-intro__head {               /* XD: グループ 6903 = 536×180・stack gap 30 */
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.top-intro__title {              /* XD: あたらしい栄を歩こう。/ YuGothic Bold 44px */
  /* XD は YuGothic Bold だが、游ゴシックは Web フォントが用意できず端末依存で
     フォールバックが変わる。ここは画像化せず Noto Sans JP Bold で組む指示。 */
  font-family: var(--f-jp);
  font-size: 2.75rem;  /* 44px */
  font-weight: 700;
  line-height: 44px;               /* XD: テキスト枠 527×44（行送り 62 は 1 行なので不使用） */
  letter-spacing: .1em;            /* XD: characterSpacing 100 */
  /* XD のこの行には文字ツメが入っていない（44px × 11 字 + 字間 4.4px × 11 ≒ 532 で
     XD 実測 527 とほぼ一致）。common.css の共通 palt が効いたままだと 477.7px まで
     詰まって XD より 49px 短く組まれるので打ち消す。リード文（.top-intro__lead）は
     逆に palt 有りで XD 実測 650 と 2.6px 差なので、あちらは触らない。 */
  font-feature-settings: normal;
  color: var(--c-ink);
}
.top-intro__sub {                /* XD: 秋は、街ごと遊ぶ。栄の秋を巡る。/ YuGothic Bold 32px */
  /* 見出しと同じ理由で Noto Sans JP Bold（.top-intro__title のコメント参照） */
  font-family: var(--f-jp);
  font-size: 2rem;  /* 32px */
  font-weight: 700;
  line-height: 32px;               /* XD: テキスト枠 536×32（行送り 60 は 1 行なので不使用） */
  letter-spacing: .05em;           /* XD: characterSpacing 50 */
  font-feature-settings: normal;   /* 見出しと同じ理由（.top-intro__title のコメント参照） */
  color: var(--c-ink);
}
.top-intro__date {               /* XD: 30px と 20px の混在（styleRanges 12 個） */
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--f-jp);
  font-weight: 600;
  height: 44px;                    /* XD: テキスト枠 44（2026年 96×44 / 9月16日… 352×44） */
  line-height: 44px;
  /* letter-spacing はこの要素に置かない。common.css の body { font-size: 0 } を継承していて
     自前の font-size を持たないため、em が 0px に解決されて computed が normal になる
     （実測で確認済み）。XD の characterSpacing 50 は 30px で +1.5px / 20px で +1px なので、
     どちらにせよ親に 1 つ置いても両方は表せない。font-size を持つ子側で指定する。 */
  /* XD のこの行にも文字ツメは入っていない。共通の palt が効いたままだと（水）（火）が詰まり、
     字間ゼロと合わせて XD 実測 451 に対し 405.6px まで縮んでいた。 */
  font-feature-settings: normal;
  color: var(--c-ink);
}
.top-intro__date-lg { font-size: 1.875rem;  /* 30px */ letter-spacing: .05em; }  /* XD: 50 → +1.5px */
.top-intro__date-sm { font-size: 1.25rem;  /* 20px */ letter-spacing: .05em; }   /* XD: 50 → +1px */
/* XD は styleRange 単位で字詰めを変えていて、「日」（（水）(火) の直前）と（水）の「）」の
   3 文字だけ characterSpacing -250 が入っている。span を range どおりに割って再現する。
   これが無いと行が XD 実測 451 に対し 471.6px（+20.6）に伸びる。 */
.top-intro__date-tight { letter-spacing: -.25em; }  /* XD: -250 → 20px で -5px */
.top-intro__date-arrow {         /* XD: パス 4388 = 軸 + 1 本の矢じりの折れ線（2 セグメント） */
  /* border + skewX(45deg) scaleY(.5) で描いていたものは天地が半分に潰れていて
     デザインの矢じりと形が違っていたので、XD から書き出した実データに差し替えた。
     XD 実測: パス bbox 34.19×7.86 / 線 2px 中央 → 描画 bbox 36.77×9.60（書き出し 37×10）。
     位置も XD 実測に合わせている（アートボード x 299.91 / 会期テキストのベースライン y 1302 に対し
     描画下端 y 1295.87 = ベースラインの 6.13px 上）。 */
  position: relative;
  bottom: 6px;                   /* ベースラインからの持ち上げ（XD 実測 6.13px） */
  display: block;
  flex: none;
  width: 37px;
  height: 10px;
  /* 左右の空きは XD の 2 倍レンダー（グループ 6903）を列ごとに走査して合わせた実測値。
     XD: 矢印の字面は グループ左端から 250.0〜286.5、前の空き 9.5px / 後ろ 12.0px。
     実装は「）」が Noto Sans JP で XD より 2px 細いぶん前の空きが 11.5px になるが、
     矢印そのものの位置（249.5 / XD 250.0）と行全体の字面幅（436.5 / XD 436.5）が
     いちばん合う値としてこの左右を採っている。 */
  margin: 0 9.5px 0 3px;
  background: url(../img/top/top_intro_date_arrow.png) no-repeat 0 0 / 37px 10px;
}
.top-intro__lead {               /* XD: グループ 6902 = 650×330 / Noto Sans JP Medium 28px */
  font-family: var(--f-jp);
  font-size: 1.75rem;  /* 28px */
  font-weight: 500;
  line-height: 2.07;
  letter-spacing: .08em;
  color: var(--c-ink);
}