@charset "UTF-8";
/* ==========================================================
   Inter BEE 2026の歩き方（index.php 用）
   - トンマナは 2026 の TOP・welcome-guide に合わせる（ガラスのキューブ、白丸矢印のピルボタン、英語の大見出し＋日本語）
   - 角丸は TOP（2026 の部品）に合わせる：カード・パネル 12px／中の画像や小さい要素 8px（小さい番号 6px）／ボタン・ラベル 999px／アイコン 50%
   - グラデーションは使いすぎない。使うのは来場事前登録ボタン（.vg26-btn）・部門カード・ステップ一覧の丸をつなぐ線・ゴールの見出しだけ
   - 文字は共通（body の LINESeedJP）、英数字は Outfit（head_base.php で読み込み済み）
   - アイコンは Font Awesome（head_base.php で読み込み済み）
   - ページの背景は白一色（下層共通の #f0f0f0 と左下のキューブの模様を body.vg26-page で消す）
   ========================================================== */

/* ページの背景は白一色（style.css の @media (min-width: 769px) body:not(.is-top-page) の #f0f0f0 と左下のキューブの模様を消す） */
html body.vg26-page {
    background-color: #fff;
    background-image: none;
}

.vg26 {
    --vg26-ink: #111;
    --vg26-text: #333;
    --vg26-gray: #666;
    --vg26-line: #e3e3ea;
    --vg26-ph: #dcdcdc; /* 写真待ちのグレー枠 */
    --vg26-navy: #000a31; /* 暗い面（TOP の青系グラデーションの起点） */
    --vg26-goal: #e91b3f; /* GOAL の赤（6 STEPS のタブ・06 のフラッグ・Goal のラベル） */
    --vg26-en: "Outfit", sans-serif;
    --vg26-content: 1160px;
    --vg26-gutter: 30px;
    --vg26-shadow: 0 6px 24px rgb(20 30 80 / 8%);
    /* 見出しの大きさは TOP（assets/css/2026_visitor_top.css）と下層ページ（開催概要など。assets/css/style.css）に合わせる */
    --vg26-fs-sec: 38px; /* セクションの見出し（TOP の .page_top .main h2。850px 以下は 34px） */
    --vg26-fs-label: var(--font-size_17); /* 見出しに添える文字（TOP の .main h2 span） */
    --vg26-fs-block: clamp(22px, 3vw, 27px); /* ステップの中のブロックの見出し（下層ページの .c-section-title） */
    /* 余白の段階。まとまりの中は xs〜s、まとまりの間は l、ステップ・セクションの間は xl */
    --vg26-sp-xs: 8px;
    --vg26-sp-s: 16px;
    --vg26-sp-m: 24px;
    --vg26-sp-l: 48px;
    --vg26-sp-xl: 120px;

    /* 文字サイズは TOP（2026_visitor_top.css の :root）と同じ変数。下層ページでは読み込まれないのでここで同じ値を持つ */
    --font-size_13: clamp(11px, 2.5vw, 13px);
    --font-size_14: clamp(12px, 2.5vw, 14px);
    --font-size_15: clamp(13px, 2.5vw, 15px);
    --font-size_16: clamp(14px, 2.5vw, 16px);
    --font-size_17: clamp(15px, 2.5vw, 17px);
    --font-size_18: clamp(16px, 2.5vw, 18px);
    --font-size_19: clamp(17px, 2.5vw, 19px);
    --font-size_20: clamp(18px, 2.5vw, 20px);
    --font-size_22: clamp(20px, 2.5vw, 22px);
    --font-size_24: clamp(22px, 3vw, 24px);
    --font-size_26: clamp(24px, 3vw, 26px);
    --font-size_28: clamp(26px, 3vw, 28px);
    --font-size_34: clamp(30px, 4vw, 34px);
    --font-size_36: clamp(32px, 4vw, 36px);
    --font-size_40: clamp(34px, 4.5vw, 40px);
    /* TOP の来場事前登録ボタンと同じグラデーション（ピンク → 紫）。使うのは .vg26-btn だけ */
    --vg26-brand: linear-gradient(90deg, #e60ea1 0%, #c038e2 100%);

    position: relative;
    color: var(--vg26-ink);
    overflow-x: clip;
}

/* 背景色テスト（雰囲気確認用。2026-10-30 ユーザー指定の値をそのまま）。
   本文全体（.vg26）に薄い色のにじみを 3 か所。採用しない場合はこのブロックごと消す */
.vg26 {
    background-color: #fafcff;
    background-image:
        radial-gradient(ellipse 600px 440px at 95% 10%, rgba(169, 219, 244, .25), transparent 75%),
        radial-gradient(ellipse 540px 480px at 0% 38%, rgba(255, 218, 177, .18), transparent 75%),
        radial-gradient(ellipse 650px 480px at 100% 72%, rgba(177, 229, 209, .22), transparent 75%);
}

/* ---- ステップの色 ----
   --c がそのステップの色（番号・道・アイコン・ラベル）、--c-text は白地に置く文字の色。
   グラデーションは使わず 1 色ずつ（グラデーションは来場事前登録ボタン・部門カード・ゴールの見出しだけ） */
.vg26-c1 { --c: #e60ea1; --c-text: #c8088a; --c-soft: #fde7f5; }
.vg26-c2 { --c: #9b30d9; --c-text: #7b26d6; --c-soft: #f1e7fd; }
.vg26-c3 { --c: #3a4fe6; --c-text: #3a4fe6; --c-soft: #e6ebff; }
.vg26-c4 { --c: #0aa7e0; --c-text: #0f7fd6; --c-soft: #e2f6ff; }
.vg26-c5 { --c: #22b35e; --c-text: #12924a; --c-soft: #e2f8ea; }
.vg26-c6 { --c: #f26b0f; --c-text: #d9480a; --c-soft: #fff0e2; }

.vg26 *,
.vg26 *::before,
.vg26 *::after {
    box-sizing: border-box;
}

.vg26 img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.vg26 a {
    color: inherit;
    text-decoration: none;
}

/* 共通 CSS の button の幅指定（100%）を打ち消す */
/* 共通 CSS の button { width: 100% } を打ち消す。:where で詳細度を下げ、部品側の幅指定（MAP の番号の丸など）が必ず勝つようにする */
:where(.vg26) button {
    width: auto;
}

/* 余白のリセットは :where で詳細度を 0 にし、各部品の class の余白指定が必ず勝つようにする */
:where(.vg26) :where(p, h1, h2, h3, ol, ul, dl, dd, figure) {
    margin: 0;
    padding: 0;
}

:where(.vg26) :where(ol, ul) {
    list-style: none;
}

.vg26 [id] {
    scroll-margin-top: 100px;
}

.vg26-en {
    font-family: var(--vg26-en);
}

/* 番号（縦線の丸・STEP のラベル・6 STEPS の丸・右のドット）は太さを 700 にそろえる。
   共通 CSS の span（500）より強く指定する */
.vg26 .vg26-step__no,
.vg26 .vg26-step__en-no,
.vg26 .vg26-overview__no .vg26-en,
.vg26 .vg26-dots a .vg26-en {
    font-weight: 700;
}

.vg26-inner {
    width: 100%;
    max-width: calc(var(--vg26-content) + var(--vg26-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--vg26-gutter);
}

/* 強調の文字色。ステップの中ではステップの色、外ではブランドのピンク */
.vg26-grad-text {
    color: var(--c-text, #c8088a);
}

/* 装飾のキューブ（welcome-guide の画像を流用）。ゆっくり上下に浮かせる */
.vg26-cube {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

/* ページの左右に浮かべるキューブ（6 STEPS・STEP 02・04・05）は、TOP の境目のキューブ（2026_visitor_top.css）と同じ置き方にする。
   - 画像も TOP と同じ。上から 左（mv_cube）→ 右（overview_cube）→ 左 → 右 と交互に置く
   - 右はセクションの上端（境目）に上下半分ずつまたがせる（translateY(-50%)）。傾けない
   - 左右の寄せは画面の端から。親が中央寄せの箱でも画面の端から測れるよう 50% - 50vw で戻す
   - 大きさは TOP と同じ（右：clamp(124px, 15vw, 300px)・851px 以上は clamp(136px, 16.5vw, 330px)、左：clamp(97px, 12.1vw, 238px)）
   - 左は TOP と同じく画面の左端から 2% に固定し、大きさだけ画面幅で変える（画面の外へははみ出させない）
   - 6 STEPS の左は流れる帯にかぶらないよう、境目にまたがせずセクションの上の余白に置く
   - STEP 04 の左は 6 STEPS の左と同じ大きさ・同じ左の位置にし、04 の丸の上（前のステップとの間の余白）に置く。
     幅によっては縦の線に重なるが、キューブは線の上に重ねてよい（z-index 2。線は 1） */
.vg26-cube--ov,
.vg26-cube--s2,
.vg26-cube--s4,
.vg26-cube--s5 {
    width: var(--cube-size);
}

.vg26-cube--s2,
.vg26-cube--s5 {
    --cube-size: clamp(124px, 15vw, 300px);
    top: 0;
    right: calc(50% - 50vw + 3vw);
    transform: translateY(-50%);
}

.vg26-cube--ov,
.vg26-cube--s4 {
    --cube-size: clamp(97px, 12.1vw, 238px);
    left: calc(50% - 50vw + 2vw);
}

.vg26-cube--ov {
    top: 16px;
}

/* 04 の丸はステップの上端より少し上に出ているので、そのぶん（12px）も足して丸の上に空きを作る */
.vg26-cube--s4 {
    top: calc(var(--cube-size) * -1 - 24px);
    z-index: 2;
}

@media screen and (min-width: 851px) {
    .vg26-cube--s2,
    .vg26-cube--s5 {
        --cube-size: clamp(136px, 16.5vw, 330px);
    }
}

/* SP は TOP と同じく左を縮める（TOP の 78px・70px） */
@media screen and (max-width: 480px) {
    .vg26-cube--ov {
        --cube-size: 78px;
    }

    .vg26-cube--s4 {
        --cube-size: 78px;
    }
}


/* スクロールでふわっと出す（assets/js/visitor_guide.js が .is-js と .is-inview を付ける。JS なしなら最初から表示） */
.vg26.is-js .vg26-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}

.vg26.is-js .vg26-reveal.is-inview {
    opacity: 1;
    transform: none;
}

/* ---- 共通の部品 ---- */

/* 白いカード（枠線なし・影で浮かせる） */
.vg26-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--vg26-shadow);
}

/* カードの動きは TOP のカード（.c26-card__link）と同じ。浮かせずに、わずかに明るくし、画像は枠の中で拡大する */
a.vg26-card,
.vg26-dept__card {
    transition: opacity .3s ease;
}

a.vg26-card:hover,
.vg26-dept__card:hover {
    opacity: .92;
}

/* 画像の枠。TOP と同じく通常時から 1.04 倍にしておき、ホバーで 1.10 倍 */
.vg26-thumb {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

.vg26-thumb img {
    display: block;
    transform: scale(1.04);
    transition: transform .45s ease;
    backface-visibility: hidden;
}

/* STEP 02 のアクセスのカードの画像（経路図・バス・宿泊の地図）は、図や地図が端まで描かれているので拡大しない（切れないように）。
   カードのホバーは明るくなる動きだけ */
.vg26-access .vg26-thumb img {
    transform: none;
}

a:hover .vg26-thumb img,
.vg26-invite:hover .vg26-thumb img {
    transform: scale(1.10);
}

a:hover .vg26-access .vg26-thumb img,
.vg26-access a:hover .vg26-thumb img {
    transform: none;
}

/* 白丸の矢印（TOP の imap26__ttl の丸矢印と同じ見せ方。色はステップの色） */
.vg26-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--c-text, #c8088a);
    border-radius: 50%;
    color: var(--c-text, #c8088a);
    transition: background-color .2s, color .2s;
}

.vg26-arrow::before {
    content: "\f061";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    line-height: 1;
}

/* PDF などのダウンロードは矢印の代わりにダウンロードのアイコン（共通 CSS の .c-text-link[download] と同じ \f019） */
.vg26-arrow.is-dl::before {
    content: "\f019";
}

a:hover .vg26-arrow,
a:hover > .vg26-arrow {
    background: var(--c-text, #c8088a);
    color: #fff;
}

/* グラデーションのピルボタン＋白丸の矢印（TOP の .r26-btn と同じ） */
/* ==== ボタン ====
   サイト共通（TOP の .mv26__btn・.r26-btn・.c-button）と同じ形と動き。
   ピル型の中央に文字、右端に白い丸の矢印。ホバーは少し薄くなるだけ（色の入れ替えや矢印の移動はしない）。
   色は --btn（地）と --btn-icon（丸の中の矢印）で変える */
.vg26 .vg26-btn,
.vg26 .vg26-invite__btn,
.vg26 .vg26-links .vg26-textlink,
.vg26 .vg26-goal__back {
    --btn: var(--c-text);
    --btn-icon: var(--c-text);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 60px 0 32px;
    border: 0;
    border-radius: 999px;
    background: var(--btn);
    color: #fff !important;
    font-size: var(--font-size_16);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none !important;
    transition: opacity .3s;
}

.vg26 .vg26-btn::after,
.vg26 .vg26-invite__btn::after,
.vg26 .vg26-links .vg26-textlink::after,
.vg26 .vg26-goal__back::after {
    content: "\f061";
    position: absolute;
    top: 50%;
    right: 12px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--btn-icon);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
}

.vg26 .vg26-btn:hover,
.vg26 .vg26-invite__btn:hover,
.vg26 .vg26-links .vg26-textlink:hover,
.vg26 .vg26-goal__back:hover {
    opacity: .85;
}

/* 来場事前登録はサイトと同じグラデーション */
.vg26 .vg26-btn {
    --btn: var(--vg26-brand);
    --btn-icon: #e60ea1;
    min-height: 60px;
    padding: 0 64px 0 36px;
    box-shadow: 0 8px 20px rgb(230 14 161 / 28%);
    font-size: var(--font-size_17);
}

/* PDF はダウンロード、最初のステップに戻るは上向きの矢印 */
.vg26 .vg26-invite__btn.is-pdf::after {
    content: "\f019";
}

.vg26 .vg26-goal__back {
    --btn: var(--vg26-ink);
    --btn-icon: var(--vg26-ink);
}

.vg26 .vg26-goal__back::after {
    content: "\f062";
}

/* GOAL の 2 つのボタンは同じ幅（来場事前登録が収まる幅） */
.vg26 .vg26-goal__btns .vg26-btn,
.vg26 .vg26-goal__btns .vg26-goal__back {
    width: 290px;
    max-width: 100%;
}

/* アイコンの丸（ステップの色） */
/* アイコンの地は、ステップの番号やカードのアイコンと同じ角丸の四角 */
.vg26-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: var(--c);
    color: #fff;
    font-size: var(--font-size_19);
}

/* ONLINE／幕張メッセ のラベル */
.vg26-place {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--vg26-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
}

.vg26-place::before {
    content: "\f3c5"; /* location-dot */
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
}

.vg26-place.is-online {
    background: #2f67f6;
    font-family: var(--vg26-en);
}

.vg26-place.is-online::before {
    content: "\f0ac"; /* globe */
}

/* テキストリンク（→ 付き） */
.vg26-textlink {
    color: var(--c-text, #c8088a) !important;
    font-weight: 700;
}

.vg26-textlink::after {
    content: "\f061";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 6px;
    font-size: .85em;
}

.vg26-textlink:hover {
    text-decoration: underline !important;
}

/* セクションの見出し（英語の大見出し＋日本語。中央揃え） */
.vg26-sec-ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--vg26-sp-l);
    text-align: center;
}

.vg26-sec-ttl__en {
    font-size: var(--vg26-fs-sec);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .02em;
}

.vg26-sec-ttl__ja {
    font-size: var(--vg26-fs-label);
    font-weight: 700;
}

/* ステップの中のブロックの見出し（来場前チェックなど） */
.vg26-sub-ttl {
    font-size: var(--vg26-fs-block);
    font-weight: 700;
}

.vg26-sub-ttl small {
    margin-left: 8px;
    color: var(--vg26-gray);
    font-size: 12px;
    font-weight: 500;
}

.vg26-sub-ttl__en {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}

/* ==========================================================
   MV（背景画像の上に見出し・リード・タグ・ボタン・チケット）
   ========================================================== */
/* 背景画像（web-asset.io）。PC は横長の枠なので上下が切れる。下の波を残すよう下端にそろえる */
/* MV の高さの最低値は MV 全体に持たせ、中身（文字＋チケット）は上下の真ん中に置く */
.vg26-mv {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(480px, 42vw, 640px);
    background: #f4f1fb url("https://web-asset.io/Inter_BEE/2026/visitor_2026/visitor_guide/mv_bg.webp") center bottom / cover no-repeat;
}

.vg26-mv > .vg26-inner {
    flex: 1;
}

/* チケットの下端は、左の文字の一番下にある来場事前登録ボタンの下端にそろえる（高さは中身なりなので、文字が下に寄ることはない） */
.vg26-mv__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 28px 56px; /* 見出しの段と、その下の説明文・チケットの段の間は 28px */
    padding: 64px 0 72px;
}

.vg26-mv__en {
    color: var(--vg26-text);
    font-family: var(--vg26-en);
    font-size: var(--font-size_14);
    font-weight: 700;
    letter-spacing: .2em;
}

/* MV の文字は 3 段のメリハリ：見出し（いちばん大きく太く）＞ キャッチ（サイトの色で太く）＞ 説明文（ふつうの太さ・グレー） */
/* 英字ラベルと見出しのまとまり。幅いっぱいの段にして、見出しが折り返さないようにする */
.vg26-mv__head {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vg26-mv__title {
    font-size: clamp(30px, 5vw, 64px);
    font-weight: 900;
    line-height: 1.25;
    word-break: keep-all; /* 狭い画面で折り返すときも「歩き方」などの途中で切れないように */
}

/* 「の歩き方」は、かな・漢字が英字より大きく見えるので 90% に（下端は英字とそろう） */
.vg26 .vg26-mv__title-ja {
    font-size: .9em;
    font-weight: inherit;
    line-height: inherit;
}

/* 見出しの「Inter BEE 2026」は、MV の背景と同じ系統の色（青 → 紫 → マゼンタ）のグラデーション。共通 CSS の span の大きさは打ち消す */
.vg26 .vg26-mv__title-grad {
    font: inherit;
    background: linear-gradient(90deg, #3a4fe6, #c038e2 55%, #e60ea1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 説明文の列はチケットと同じ高さに伸ばし、説明文を上（チケットの上端と横並び）、ボタンを下（チケットの下端とそろう）に置く */
.vg26-intro__text {
    flex: 999 1 460px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-between;
    align-items: flex-start;
    gap: 26px;
}

/* 白い面の余白に負けないよう大きめ（TOP の 28 の変数） */
.vg26-intro__lead {
    color: var(--vg26-text);
    font-size: var(--font-size_18);
    font-weight: 500;
    line-height: 1.9;
    word-break: auto-phrase; /* SP で「めいっ／ぱい」のように切れないよう文節で折り返す */
}

/* キャッチは説明文と行を分けて、大きく太く */
.vg26 .vg26-intro__lead .vg26-grad-text {
    display: block;
    margin-top: 10px;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 900;
    line-height: 1.4;
}

/* 会期・会場・入場。ボタンと見分けがつくよう地は付けず、アイコン＋文字を細い縦線で区切って並べる */
.vg26-intro__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
}

/* 日付・会場・入場料は、同じ書体（LINE Seed JP）・同じ太さ（700）にそろえる */
.vg26-intro__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size_16);
    font-weight: 700;
}

/* タグの文字（折り返す位置を決めるため span で包んでいる）。共通 CSS の span（14〜17px・500）を打ち消す */
.vg26 .vg26-intro__tag > span,
.vg26 .vg26-intro__tag > span > span {
    font: inherit;
}

.vg26-intro__tag + .vg26-intro__tag::before {
    content: "";
    width: 1px;
    height: 16px;
    margin: 0 18px 0 10px;
    background: #b4b7c3;
}

.vg26-intro__tag i {
    color: #c038e2;
}

/* ---- チケット ----
   紙の入場券：上の帯はサイトの色。上と下の縁には、半円のパンチ穴を等間隔に並べる。
   左右の大きな切り欠き（半円）とドットのミシン目で、本体と半券（日程）に分け、半券は少し色の違う紙にする。
   穴と切り欠きは mask で抜いているので、後ろが透けて見える */
.vg26-ticket {
    --notch: 15px; /* 左右の切り欠きの半径 */
    --hole: 7px;   /* 上下の縁のパンチ穴の半径 */
    --hole-gap: 40px; /* パンチ穴の間隔 */
    position: relative;
    flex: 1 1 280px;
    max-width: 300px;
    min-width: 0;
    transform: rotate(3deg);
    filter: drop-shadow(0 16px 26px rgb(20 30 80 / 18%));
    transition: transform .35s ease;
}

/* チケットはリンク（a）なので、文字色・下線は付けない */
a.vg26-ticket {
    display: block;
    color: inherit;
    text-decoration: none;
}

.vg26-ticket:hover {
    transform: rotate(0deg);
}

.vg26-ticket__main,
.vg26-ticket__stub {
    position: relative;
    background: #fff;
}

/* 1 枚目の mask が上の縁のパンチ穴、2・3 枚目が左右の切り欠き。穴は切り欠きの形と重ね合わせ（intersect）で抜く */
.vg26-ticket__main {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    -webkit-mask: radial-gradient(circle var(--hole) at 50% 0, transparent 96%, #000) center top / var(--hole-gap) 100% repeat-x,
                  radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) right / 51% 100% no-repeat;
    -webkit-mask-composite: source-in, source-over;
    mask: radial-gradient(circle var(--hole) at 50% 0, transparent 96%, #000) center top / var(--hole-gap) 100% repeat-x,
          radial-gradient(circle var(--notch) at 0 100%, transparent 98%, #000) left / 51% 100% no-repeat,
          radial-gradient(circle var(--notch) at 100% 100%, transparent 98%, #000) right / 51% 100% no-repeat;
    mask-composite: intersect, add;
}

.vg26-ticket__stub {
    border-radius: 0 0 12px 12px;
    padding: 24px 26px 28px; /* 半券（もぎり）は日程だけ */
    background-color: #f5f3ee; /* 半券は少し色の違う紙 */
    -webkit-mask: radial-gradient(circle var(--hole) at 50% 100%, transparent 96%, #000) center bottom / var(--hole-gap) 100% repeat-x,
                  radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) left / 51% 100% no-repeat,
                  radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) right / 51% 100% no-repeat;
    -webkit-mask-composite: source-in, source-over;
    mask: radial-gradient(circle var(--hole) at 50% 100%, transparent 96%, #000) center bottom / var(--hole-gap) 100% repeat-x,
          radial-gradient(circle var(--notch) at 0 0, transparent 98%, #000) left / 51% 100% no-repeat,
          radial-gradient(circle var(--notch) at 100% 0, transparent 98%, #000) right / 51% 100% no-repeat;
    mask-composite: intersect, add;
}

/* ミシン目：サイトの色の大きめのドットを、本体（白）と半券（クリーム）の境目の上に並べる。
   本体と半券は mask で外側が消えるので、ドットは間に置いた高さ 0 の要素（mask なし）に描く。
   左右の切り欠きの内側にだけ並べる */
.vg26-ticket__perf {
    position: relative;
    z-index: 1;
    display: block;
    height: 0;
}

.vg26-ticket__perf::before {
    content: "";
    position: absolute;
    top: -3.5px;
    right: calc(var(--notch) + 8px);
    left: calc(var(--notch) + 8px);
    height: 7px;
    background: radial-gradient(circle 3.5px, #c8088a 96%, transparent) center / 16px 7px repeat-x;
}

.vg26-ticket__head {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 26px 26px 18px; /* 上はパンチ穴のぶん広め */
    background: #c8088a; /* サイトの色（STEP 01 の文字色と同じマゼンタ） */
    color: #fff;
    font-size: var(--font-size_13);
    font-weight: 700;
    letter-spacing: .18em;
}

/* 開幕まで・開催中・終了後の表示は、券の中央にそろえる（下の日程が左右いっぱいに広がるので、左寄せだと片寄って見える） */
.vg26-ticket__body {
    position: relative;
    padding: 30px 26px 34px;
    text-align: center;
    background: #fff;
}

.vg26-ticket__label {
    color: var(--vg26-gray);
    font-size: var(--font-size_15);
    font-weight: 700;
}

/* 開幕前は、左に「開幕／まで」（2 行）、右に「14日」を横に並べる */
/* 「開幕／まで」の 2 行目（まで）を「14日」の文字の並び（ベースライン）にそろえる */
.vg26-ticket__state[data-state="before"]:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: last baseline;
    gap: 6px;
}

.vg26-ticket__state[data-state="before"] .vg26-ticket__label {
    font-size: var(--font-size_18);
    line-height: 1.3;
    text-align: left;
}

.vg26-ticket__count {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    line-height: 1;
}

/* 日数の数字は Roboto（サイト共通で 900 だけ読み込み済み） */
.vg26-ticket__count .vg26-en {
    font-family: "Roboto", var(--vg26-en);
    font-size: 88px;
    font-weight: 900;
    letter-spacing: -.03em;
}

.vg26-ticket__unit {
    font-size: var(--font-size_26);
    font-weight: 900;
}

.vg26-ticket__now {
    margin-top: 6px;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.2;
}

.vg26-ticket__after {
    margin-top: 6px;
    font-size: var(--font-size_24);
    font-weight: 900;
    line-height: 1.4;
}

/* 日程：左に日付・曜日、右に時間。共通 CSS の dt・dd（17px・行の高さ違い）を上書きし、
   1 行ごとに同じ基準線にそろえる。数字は等幅にして、時間の桁を縦にそろえる */
.vg26-ticket__dates {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: baseline;
    row-gap: 10px;
    font-variant-numeric: tabular-nums;
}

.vg26 .vg26-ticket__dates dt,
.vg26 .vg26-ticket__dates dd {
    margin: 0;
    font-size: var(--font-size_14);
    line-height: 1.4;
}

.vg26 .vg26-ticket__dates dt {
    font-weight: 700;
}

.vg26 .vg26-ticket__dates dd {
    font-weight: 500;
    text-align: right;
}


/* ==========================================================
   6 STEPS（概要）
   ========================================================== */
.vg26-overview {
    position: relative;
    padding: var(--vg26-sp-xl) 0;
}

/* ステップの一覧。白いパネルの上段に区間の帯、下段に番号の丸を線でつないで並べ、左右に START／GOAL のタブ */
.vg26-overview__map {
    --zones: 64px; /* 区間の帯（44px）＋ 帯と地点の間（20px） */
    --flag: 44px; /* 左右の START／GOAL のタブの幅 */
    --cols: repeat(5, minmax(0, 1fr)) 168px; /* 06 の列は名前（会期後の振り返り＋左右の余白）の幅だけにして、GOAL までの余白を START 側と同じにする。
                                                上の帯と下の丸で同じ幅にしないと、会期中の帯が 06 の上にはみ出す */
    position: relative;
    padding: 34px calc(var(--flag) + 24px) 30px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--vg26-shadow);
    overflow: hidden;
}

/* START／GOAL はカードの左右の端に付けた縦長のタブ（縦書き） */
.vg26-overview__flag {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--flag);
    background: var(--vg26-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3em;
    writing-mode: vertical-rl;
}

.vg26-overview__flag.is-start {
    left: 0;
}

.vg26-overview__flag.is-goal {
    right: 0;
    background: var(--vg26-goal);
}

.vg26-overview__track {
    position: relative;
    min-width: 0;
}

/* 区間の帯（来場前／会期中／会期後）。地点と同じ 6 列で、会期中は 02〜05 にまたがる */
.vg26-overview__zones {
    display: grid;
    grid-template-columns: var(--cols);
    gap: 4px;
    margin-bottom: 20px;
}

.vg26-overview__zones li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 8px;
    font-size: var(--font-size_13);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.vg26-overview__zones li .vg26-en {
    font-size: 11px;
    letter-spacing: .1em;
}

.vg26-overview__zones li:nth-child(2) {
    grid-column: 2 / span 4;
}

/* 会期（会場）がいちばん大事なので色を付け、前後のオンラインはグレーで控えめに */
.vg26-overview__zones .is-online {
    background: #f1f1f5;
    color: var(--vg26-ink);
}

.vg26-overview__zones .is-venue {
    background: #eaf0ff;
    color: #2f67f6;
}

/* 6 STEPS の場所のラベル（タブレット・SP で出す）は、PC の上の区間の帯と同じ色にする
   （幕張メッセ＝薄い青に青の文字、オンライン＝グレーに黒の文字） */
.vg26-overview__link .vg26-place {
    background: #eaf0ff;
    color: #2f67f6;
}

.vg26-overview__link .vg26-place.is-online {
    background: #f1f1f5;
    color: var(--vg26-ink);
}

/* PC の各地点は番号・ステップ名・時間（アイコンと場所のラベルは SP で出す） */
.vg26-overview__icon,
.vg26-overview__link .vg26-place {
    display: none;
}

.vg26-overview__list {
    position: relative;
    display: grid;
    grid-template-columns: var(--cols);
    gap: 4px;
}

/* 番号の丸（下の各ステップの .vg26-step__no と同じ作り）。丸から次の丸まではそのステップの色の線でつなぐ */
.vg26-overview__item {
    position: relative;
}

.vg26-overview__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 24px; /* 丸（56px）の中心 − 線の太さの半分 */
    left: 28px; /* 丸は列の左端に置くので、丸の中心から */
    width: calc(100% + 4px); /* 次の丸の中心まで（列の間 4px を足す） */
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--c), var(--c-next));
    background: linear-gradient(in oklch 90deg, var(--c), var(--c-next)); /* 対応ブラウザは oklch で混ぜて中間をくすませない */
}

/* 線は次のステップの色へのグラデーション（--c-next は次の丸の色） */
.vg26-overview__item.vg26-c1 { --c-next: #9b30d9; }
.vg26-overview__item.vg26-c2 { --c-next: #3a4fe6; }
.vg26-overview__item.vg26-c3 { --c-next: #0aa7e0; }
.vg26-overview__item.vg26-c4 { --c-next: #22b35e; }
.vg26-overview__item.vg26-c5 { --c-next: #f26b0f; }

/* 06 からは上の「会期後・オンライン」の帯の右端まで線を伸ばす（オレンジ → GOAL の赤）。端は丸く */
.vg26-overview__item:last-child::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 28px;
    right: 0;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--c), var(--vg26-goal));
    background: linear-gradient(in oklch 90deg, var(--c), var(--vg26-goal));
}

/* 丸とステップ名は列の左端にそろえ、名前は丸の下から右へ伸ばす */
.vg26-overview__link {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    height: 100%;
    text-align: left;
}

/* ホバーでも丸（と中の数字）は動かさず、周りにステップの色の輪を出すだけ */
.vg26-overview__no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 6px 16px rgb(20 30 80 / 18%), 0 0 0 0 transparent;
    color: #fff;
    font-size: var(--font-size_18);
    font-weight: 800;
    transition: box-shadow .25s ease;
}

.vg26-overview__link:hover .vg26-overview__no {
    box-shadow: 0 6px 16px rgb(20 30 80 / 18%), 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent);
}

.vg26-overview__icon {
    color: var(--c-text);
    font-size: var(--font-size_26);
}

/* 6 列で折り返すときは文節で区切る（「展示会場の／見どころ」。auto-phrase 非対応のブラウザは balance だけ効く） */
.vg26-overview__name {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 2.8em; /* 2 行分。下の時間の高さを 6 つでそろえる */
    padding: 0 12px 0 10px; /* 左は丸の左端より少し内側。右は隣の名前との間を空ける（長い名前は文節で 2 行に） */
    font-size: var(--font-size_18);
    font-weight: 900;
    line-height: 1.4;
    word-break: auto-phrase;
    text-wrap: balance;
}

.vg26-overview__link:hover .vg26-overview__name {
    color: var(--c-text);
}

/* 01 の時期は上の帯（来場前）と同じなので PC では出さない。高さはそろえたいので visibility で隠す。
   06 は「展示・コンファレンスアーカイブ配信」（赤字 1106）を出す */
.vg26-overview__item:first-child .vg26-overview__when {
    visibility: hidden;
}

/* 時期の中の span（06 の改行位置を決める）は、共通 CSS の span（17px・500）を打ち消す */
.vg26 .vg26-overview__when .vg26-nobr {
    font: inherit;
}

.vg26-overview__when {
    padding-left: 10px;
    color: var(--vg26-gray);
    font-size: var(--font-size_13);
    font-weight: 700;
}

.vg26-overview__link .vg26-place {
    margin-top: 4px;
}

/* ==========================================================
   流れる文字の帯
   ========================================================== */
.vg26-marquee {
    overflow: hidden;
    padding: 18px 0;
    background: #fff;
}

/* 情報の多いページでチラつかないよう、ゆっくり（1 周 120 秒）流す。中身は同じ並びを 2 回くり返しているので半分動かすとつながる */
.vg26-marquee__track {
    display: flex;
    width: max-content;
    animation: vg26-marquee 120s linear infinite;
}

@keyframes vg26-marquee {
    to { transform: translateX(-50%); }
}

/* 帯の文字は飾りなので、薄いグレーで主張させない */
.vg26-marquee__track span {
    padding: 0 28px;
    color: #b4b7c3;
    font-size: var(--font-size_36);
    font-weight: 900;
    white-space: nowrap;
}

.vg26-marquee__track span.vg26-en {
    font-weight: 800;
    letter-spacing: .04em;
}


/* ==========================================================
   右側のステップナビ（PC のみ）
   ========================================================== */
/* 右下に置く。サイト共通の「ページの先頭へ」ボタン（右下・高さ 53px）の上に、間を空けて重ねない */
.vg26-dots {
    position: fixed;
    right: 22px;
    bottom: 72px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity .3s, transform .3s, visibility .3s;
}

.vg26-dots.is-show {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.vg26-dots ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 85%);
    box-shadow: var(--vg26-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 番号の丸。ふだんは白地に色の数字、今いるステップは色で塗る（動きはなし） */
/* 数字は共通 CSS の span（17px）が効いて丸に対して大きくなるので、ここで指定し直す */
.vg26 .vg26-dots a .vg26-en {
    font-size: 12px;
}

.vg26-dots a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--c);
    border-radius: 50%;
    background: #fff;
    color: var(--c-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .2s, color .2s;
}

.vg26-dots a:hover,
.vg26-dots .is-current a {
    background: var(--c);
    color: #fff;
}

/* 丸の左にステップ名（ホバー中だけ） */
.vg26-dots__label {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vg26-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .2s;
}

.vg26-dots a:hover .vg26-dots__label {
    opacity: 1;
}

/* ==========================================================
   ステップ共通（左に番号と虹の道、右に中身）
   ========================================================== */
.vg26-step {
    position: relative;
    display: flex;
    gap: clamp(16px, 3vw, 40px);
}

.vg26-step__rail {
    position: relative;
    z-index: 1;
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 道（ステップの色）。終わりは次の番号の丸にくっつかないよう少し手前で止める */
.vg26-step__rail::after {
    content: "";
    flex: 1;
    width: 8px;
    margin-top: -4px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: var(--c);
}

.vg26-step__no {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 8px 20px rgb(20 30 80 / 18%);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

/* 06 は道の終わりに GOAL。番号の丸（.vg26-step__no）と同じ作りで、色だけ GOAL の赤 */
.vg26 .vg26-step__goal {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: var(--vg26-goal);
    box-shadow: 0 8px 20px rgb(20 30 80 / 18%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.vg26-step__body {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0 var(--vg26-sp-xl);
}

/* 06 の下の GOAL のパネルは、上端を GOAL の丸にそろえて丸の高さ分だけ上に重ねるので、その分を足してほかのステップと同じ間を空ける */
.vg26-step.is-last .vg26-step__body {
    padding-bottom: calc(var(--vg26-sp-xl) + 64px);
}

.vg26-step__head {
    margin-bottom: var(--vg26-sp-l);
}

/* 見出しの上の小さなラベル「STEP 01 · PREPARATION」。
   日英どちらのページでも同じラベルにし、大きく見せるのは下の見出し（その言語の h2）だけにする */
/* 見出しの上の行：STEP の番号 → 場所（ONLINE／幕張メッセ）と時刻 → すること */
.vg26-step__en {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    line-height: 1.4;
}

.vg26 .vg26-step__en-no {
    font-size: var(--font-size_14); /* MV の VISITOR GUIDE と同じ。38px の見出しを引き立てる大きさ */
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--c);
    color: #fff;
    letter-spacing: .08em;
}

.vg26-step__title {
    margin: var(--vg26-sp-xs) 0 12px;
    font-size: var(--vg26-fs-sec);
    font-weight: 900;
    line-height: 1.3;
}

/* 塗りの札は STEP の番号だけにする。並びは 番号 → 場所 時刻 ｜ すること。文字はすべてステップの色 */
.vg26 .vg26-step__en .vg26-place {
    padding: 0;
    background: none;
    color: var(--c-text);
    font-size: var(--font-size_14);
}

.vg26 .vg26-step__time {
    margin-left: -6px; /* 場所とひと続きに見えるよう、行の間隔（12px）を詰める */
    color: var(--c-text);
    font-size: var(--font-size_14);
    font-weight: 700;
}

.vg26-step__when {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--c-text);
    font-size: var(--font-size_14);
    font-weight: 700;
}

.vg26-step__when::before {
    content: "";
    width: 1px;
    height: 12px;
    background: #c9cbd6;
}

.vg26-step__lead {
    max-width: 720px;
    color: var(--vg26-text);
    font-size: var(--font-size_15);
    line-height: 1.9;
}

/* ==========================================================
   STEP 01 来場前チェック
   ========================================================== */
.vg26-check-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--vg26-sp-s);
}

/* デジタル案内状（6 枚のカードの下に横長）。たくさん使ってほしいので、ほかの白いカードと違う色の面にする。
   全面を濃いピンクにすると目がチカチカするので、地は薄いピンク、ピンクは見出しとボタンだけ */
.vg26-invite {
    display: flex;
    align-items: center;
    gap: var(--vg26-sp-m);
    margin-top: var(--vg26-sp-m);
    padding: 20px 28px 20px 20px;
    border-radius: 12px;
    background: var(--c-soft);
    box-shadow: var(--vg26-shadow);
    color: var(--vg26-ink);
}

/* 画像は TOP の案内状カードと同じもの */
.vg26-invite__img {
    flex-shrink: 0;
    width: 300px;
}

.vg26-invite__img img {
    width: 100%;
    height: auto;
}

.vg26-invite__text {
    flex: 1;
    min-width: 0;
}

.vg26 .vg26-invite__ttl {
    color: var(--c-text);
    font-size: var(--font-size_26);
    font-weight: 900;
    line-height: 1.3;
}

.vg26 .vg26-invite__desc {
    margin-top: 4px;
    color: var(--vg26-text);
    font-size: var(--font-size_15);
}

.vg26-invite__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 見出し → 画像 → 説明文 のカード */
.vg26-check {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vg26-sp-s);
}

.vg26-check > li {
    display: flex;
}

.vg26-check__card {
    position: relative;
    flex: 1;
    gap: 12px;
    padding: 16px 16px 18px;
}

/* 必須（来場事前登録）はステップの色の太枠 */
.vg26-check__card.is-required {
    border: 3px solid var(--c);
}

.vg26-check__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vg26-check__no {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: 6px;
    background: var(--c);
    color: #fff;
    font-size: var(--font-size_14);
    font-weight: 700;
}

.vg26-check__ttl {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size_18);
    font-weight: 900;
    line-height: 1.45;
}

/* 必須・無料。共通 CSS の span（500）で細くなるので、太さと大きさを指定し直す */
.vg26 .vg26-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #e60ea1;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: 2px;
    white-space: nowrap;
}

/* TOP のカード画像（575×260）と同じ比率 */
.vg26-check__img {
    display: block;
    width: 100%;
    aspect-ratio: 575 / 260;
    border-radius: 8px;
    object-fit: cover;
}

.vg26-check__desc {
    color: var(--vg26-text);
    font-size: var(--font-size_14);
    line-height: 1.7;
}

/* ==========================================================
   STEP 02 アクセス
   ========================================================== */
/* 最寄り駅／交通アクセス／宿泊の 3 カラム。カードは STEP 01 の .vg26-check__card と同じ作り */
.vg26-access {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vg26-sp-s);
}

/* 最寄り駅は幅いっぱいの横長：左に見出しと徒歩の分数、右に路線図。
   左の列は下の 1 枚のカードの中身と同じ幅に、路線図は下の 2・3 枚目の中身の左端〜右端にそろえる。
   （カードの内側の余白 16px＝--p、カードの間 16px＝--g から計算） */
.vg26-access .vg26-access__wide {
    --p: 16px;
    --g: var(--vg26-sp-s);
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: calc((100% - var(--g) * 2 - var(--p) * 4) / 3) minmax(0, 1fr);
    grid-template-rows: auto 1fr; /* 見出しの行は中身の高さだけ。余った高さは下の行に回して、徒歩の分数を見出しのすぐ下に置く */
    grid-template-areas:
        "head img"
        "desc img";
    align-content: start; /* 文字は上揃え（路線図の上端と文字の上端をそろえる） */
    column-gap: calc(var(--g) + var(--p) * 2);
}

.vg26-access__wide .vg26-check__head {
    grid-area: head;
    align-self: start;
}

.vg26-access__wide .vg26-access__img {
    grid-area: img;
}

.vg26-access__wide .vg26-check__desc {
    grid-area: desc;
    align-self: start;
}

/* 番号の箱にアイコンを入れる */
.vg26-access .vg26-check__no {
    font-size: var(--font-size_15);
}

/* 改行させたくない語のまとまり（「電車・バス・お車／でのご来場」） */
.vg26 .vg26-nobr {
    display: inline-block;
    font: inherit; /* 共通 CSS の span の太さ・大きさを打ち消す */
}

/* 見出しは「ラベル＋ 2 行」分の高さにそろえ、3 枚の画像の位置をそろえる。折り返しは文節で */
.vg26-access .vg26-check__head {
    min-height: 4.6em;
}

.vg26-access .vg26-check__ttl {
    word-break: auto-phrase;
    text-wrap: balance;
}

.vg26-access__label {
    display: block;
    color: var(--c-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

/* 路線図（既存の交通アクセスページと同じ画像）。STEP 01 の画像と同じ比率の薄い地に、全体が見えるよう収める */
/* 経路図の枠。高さは縦横比で決め、図は枠の内側（余白 10px）に重ねて置く。
   iOS の Safari は、縦横比で決まった高さに対する height: 100% を計算できず、図が元の大きさで出てしまうため、
   図は絶対配置で枠の内側いっぱいにする */
.vg26-access__img {
    position: relative;
    display: block;
    overflow: hidden; /* ホバーで拡大した図が枠の外に出ないように */
    aspect-ratio: 575 / 260;
    border-radius: 8px;
    background: #f7f7fa;
}

.vg26-access__img img {
    position: absolute;
    inset: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: contain;
    mix-blend-mode: multiply; /* GIF の白地を薄い地になじませる */
}

.vg26-access__walk {
    color: var(--vg26-ink);
    font-size: var(--font-size_18);
    font-weight: 900;
}

.vg26-access__walk .vg26-en {
    margin: 0 2px;
    color: var(--c-text);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.vg26-access__cap {
    display: block;
    margin-bottom: 2px;
    font-size: var(--font-size_14);
    color: var(--vg26-ink);
    font-weight: 700;
}

/* ==========================================================
   STEP 03 入場方法
   ========================================================== */
/* 当日の時間（左）とクローク・Wi-Fi（右） */
.vg26-day {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--vg26-sp-s);
    margin-bottom: var(--vg26-sp-l); /* 下の入場の 3 ステップとは別のブロックなので l */
}

.vg26-day__time {
    padding: 22px 28px 8px;
}

.vg26-day__label {
    margin-bottom: 16px;
    color: var(--c-text);
    font-size: var(--font-size_13);
    font-weight: 700;
    letter-spacing: .16em;
}

/* 縦のタイムライン。時刻 → 丸 → 内容。丸どうしを線でつなぐ */
.vg26-time {
    --clock: 76px;
}

.vg26-time li {
    position: relative;
    display: grid;
    grid-template-columns: var(--clock) 1fr;
    align-items: baseline;
    column-gap: 56px; /* 時刻 ↔ 丸 ↔ 内容 をそれぞれ 22px ほど空ける（丸は列の間の真ん中） */
    padding-bottom: 26px;
}

.vg26-time li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: calc(var(--clock) + 22px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 4px var(--c-soft);
}

.vg26-time li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    bottom: -9px;
    left: calc(var(--clock) + 27px);
    width: 2px;
    background: var(--c-soft);
}

.vg26-time__clock {
    color: var(--c-text);
    font-size: var(--font-size_28);
    font-weight: 700;
    line-height: 1;
    text-align: right;
}

.vg26-time__text {
    font-size: var(--font-size_16);
    font-weight: 700;
    line-height: 1.5;
}

.vg26-time__text small {
    display: block;
    color: var(--vg26-text);
    font-size: var(--font-size_13);
    font-weight: 500;
}

/* クローク・Wi-Fi。見出しは TIME TABLE と同じ位置。アイコンの丸＋名前＋場所を縦に 2 つ */
.vg26-day__service {
    padding: 22px 24px;
}

.vg26-facility {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vg26-facility li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vg26-facility .vg26-icon {
    flex-shrink: 0;
}

.vg26-facility li > span:last-child {
    display: flex;
    flex-direction: column;
    color: var(--vg26-text);
    font-size: var(--font-size_14);
    line-height: 1.6;
}

.vg26-facility strong {
    color: var(--vg26-ink);
    font-size: var(--font-size_16);
    font-weight: 900;
}

/* 3ステップ。カード同士の間に ▶ を置く（TOP の Registration と同じ流れの見せ方） */
.vg26-entry {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.vg26-entry__item {
    position: relative;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 22px;
    text-align: center;
}

.vg26-entry__item + .vg26-entry__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    width: 20px;
    height: 24px;
    background: var(--c);
    /* TOP の Registration の三角（2026_visitor_top.css）と同じ SVG で型抜きし、角を少し丸くする */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpolygon points='2,2 18,12 2,22' fill='%23000' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpolygon points='2,2 18,12 2,22' fill='%23000' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transform: translateY(-50%);
}

/* TOP の Registration の「STEP 1」ラベルと同じ形 */
.vg26-entry__label {
    padding: 4px 18px;
    border-radius: 999px;
    background: var(--c);
    color: #fff;
    font-size: var(--font-size_13);
    font-weight: 700;
    letter-spacing: .06em;
}

/* 枠はほかの画像カードと同じ 575×260 の比率。透過のイラストを薄い水色の地に、下寄せで置く */
.vg26-entry__img {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    aspect-ratio: 575 / 260;
    padding: 3%;
    border-radius: 8px;
    background: #dbf0fd;
    overflow: hidden;
}

.vg26-entry__img img {
    width: auto;
    max-width: 90%;
    height: 100%;
    object-fit: contain;
}

.vg26-entry__ttl {
    font-size: var(--font-size_18);
    font-weight: 900;
}

.vg26-entry__desc {
    color: var(--vg26-text);
    font-size: var(--font-size_14);
    line-height: 1.75;
    text-align: left;
}

/* 入場の 3 ステップの下の注意。勘違いしやすい大事な点なので、本番サイトの注意書き（来場事前登録についての .bold.red）と同じ赤で目立たせる */
.vg26-caution {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: var(--vg26-sp-m);
    padding: 20px 24px;
    border-radius: 12px;
    background: #fff2f2;
    line-height: 1.7;
}

.vg26-caution__icon {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 50%;
    background: #ff0000;
    color: #fff;
    font-size: var(--font-size_17);
}

.vg26 .vg26-caution p {
    color: #e00000;
    font-size: var(--font-size_16);
    font-weight: 700;
}

.vg26 .vg26-caution strong {
    color: inherit;
    font-weight: 900;
}

/* 詳細ページへの誘導。このページはまとめなので、テキストリンクではなくステップの色のボタンで目立たせる */
.vg26-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: var(--vg26-sp-m);
}

/* ==========================================================
   STEP 04 見どころ
   ========================================================== */
/* 部門カード：WF の組み方（4 カラム・左揃え）に、既存の部門カード（preview.css の #exhibitor_categories）の色と写真を合わせる */
/* 4 枚の「部門名／キャッチ／説明／ラベル／ボタン」の各段を subgrid でそろえる（文字量が違っても段の位置が同じになる） */
.vg26-dept {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vg26-sp-s);
}

.vg26-dept__card {
    --photo: none;
    --grad: none;
    --btn: #000;
    position: relative;
    display: grid;
    grid-row: span 6; /* 写真・部門名・キャッチ・説明・ラベル・ボタン */
    grid-template-rows: subgrid;
    align-content: start;
    row-gap: 10px;
    padding: 0 18px 22px;
    border-radius: 12px;
    background: var(--grad);
    box-shadow: var(--vg26-shadow);
    color: #fff;
    overflow: hidden;
    transition: transform .25s ease;
}

/* 写真はカードの一番上の段。横長の素材を 16:10 に切り抜き、左右はカードの端まで広げる */
.vg26-dept__card::before {
    content: "";
    aspect-ratio: 16 / 10;
    margin: 0 -18px 8px;
    background: var(--photo) center / auto 104% no-repeat;
    transition: background-size .45s ease;
}

/* 動きはカードが浮くだけ */
/* 写真は枠の中で拡大（TOP の画像と同じ 1.04 → 1.10 倍）。素材は 16:10 より横長なので高さ基準で広げる */
.vg26-dept__card:hover::before {
    background-size: auto 110%;
}

.vg26-dept__card.is-audio {
    --photo: url("../img/forexhibitors/category/cat_pro_audio.webp");
    --grad: linear-gradient(90deg, rgb(4 153 159), rgb(4 119 159));
    --btn: #046f83;
}

.vg26-dept__card.is-media {
    --photo: url("../img/forexhibitors/category/cat_media.webp");
    --grad: linear-gradient(90deg, rgb(226 126 0), rgb(226 153 0));
    --btn: #ca7904;
}

.vg26-dept__card.is-video {
    --photo: url("../img/forexhibitors/category/cat_video.webp");
    --grad: linear-gradient(90deg, rgb(35 112 181), rgb(35 60 181));
    --btn: #05358a;
}

.vg26-dept__card.is-entertainment {
    --photo: url("../img/forexhibitors/category/cat_entertainment.webp");
    --grad: linear-gradient(90deg, rgb(104 37 167), rgb(169 52 106));
    --btn: #7e2481;
}

.vg26-dept__name {
    font-size: var(--font-size_20);
    font-weight: 900;
    line-height: 1.4;
}

.vg26-dept__name small {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
}

/* 部門名のリンクをカード全体に広げる */
.vg26 .vg26-dept__link {
    color: #fff;
}

.vg26-dept__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.vg26-dept__catch {
    color: #fff;
    font-size: var(--font-size_14);
    font-weight: 700;
    line-height: 1.6;
}

.vg26-dept__desc {
    color: #fff;
    font-size: var(--font-size_13);
    line-height: 1.7;
    opacity: .9;
}

.vg26-dept__label {
    align-self: end;
    padding-top: 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* 特別企画のボタン（部門の濃い色。カード全体のリンクの上に出す） */
.vg26-dept__chips {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.vg26-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 6px;
    background: var(--btn);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    transition: background-color .2s, color .2s;
}

.vg26 a.vg26-chip {
    color: #fff;
}

a.vg26-chip::after {
    content: "\f061";
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 10px;
}

.vg26 a.vg26-chip:hover {
    background: #fff;
    color: var(--vg26-ink);
}

/* ---- Inter BEE MAP の枠（中身の .imap26 は下の「Inter BEE MAP」）。TOP の #interbee_map と同じ背景画像に白い見出し ---- */
.vg26-map {
    margin-top: var(--vg26-sp-l);
    padding: 40px 32px 28px;
    border-radius: 12px;
    background: url("../img/top/quick_menu_bg.webp") center / cover no-repeat, #4b2fc9;
    color: #fff;
}

.vg26-map__head {
    margin-bottom: 24px;
    text-align: center;
}

/* 「特別企画」を大きく、「Inter BEE MAP」は上に小さく添える */
.vg26-map__ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: var(--vg26-fs-block);
    font-weight: 700;
    line-height: 1.2;
}

.vg26-map__ttl .vg26-en {
    font-size: var(--font-size_16);
    font-weight: 700;
    letter-spacing: .14em;
}

.vg26-map__note {
    margin-top: 10px;
    color: #fff;
    font-size: var(--font-size_13);
    font-weight: 700;
}

.vg26-map__note i {
    margin-right: 6px;
}

.vg26-map__foot {
    margin-top: 12px;
    color: #fff;
    font-size: 12px;
}

/* カード内のボタンの文字色（.vg26 a の color: inherit で白になるのを戻す） */
.vg26-map .imap26__btn {
    color: var(--imap26-blue);
}

.vg26-map .imap26__btn:hover {
    color: #fff;
}

.vg26-map__foot .vg26-textlink {
    color: #fff !important;
    text-decoration: underline !important;
}

/* ---- 100+ / AWARD ---- */
.vg26-pickup {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--vg26-sp-s);
    margin-top: var(--vg26-sp-l);
}

/* ---- 100+ / AWARD：TOP のカード（.c26-card）と同じ作り。画像の下に見出しと説明（中央揃え） ---- */
.vg26 .vg26-pickup__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #000;
    text-align: center;
    transition: opacity .3s ease;
}

.vg26-pickup__item:hover {
    opacity: .92;
}

.vg26-pickup__thumb {
    position: relative;
    margin-bottom: 12px;
    aspect-ratio: 575 / 260;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgb(2 4 45 / 17%);
}

.vg26-pickup__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vg26-pickup__ttl {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 12px;
    font-size: var(--font-size_20);
    font-weight: 700;
}

/* 「100+」「初日発表」は画像の右上の角にぴったり付けた四角いリボン。どちらの画像の上でも目立つサイトのピンク。
   画像と一緒には拡大しない */
.vg26 .vg26-pickup__ribbon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 14px 26px;
    border-radius: 0 0 0 12px;
    background: #e60ea1;
    color: #fff;
    font-size: var(--font-size_22);
    font-weight: 700;
    line-height: 1.2;
}

/* AWARD の見出しは TOP のカード（.c26-card__ttl--award）と同じロゴ画像。高さも TOP と同じ 20px */
.vg26-pickup__ttl.is-award {
    min-height: 1.6em; /* となりの文字の見出しと同じ高さにして、下の説明文の位置をそろえる */
}

.vg26-pickup__ttl.is-award img {
    width: auto;
    max-height: 20px;
}

.vg26-pickup__desc {
    font-size: var(--font-size_14);
    line-height: 1.7;
}


/* ==========================================================
   STEP 05 ブレイクタイム（ポラロイドを貼ったボード）
   ========================================================== */
.vg26-board {
    padding: 38px clamp(14px, 2vw, 28px) 30px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--vg26-shadow);
}

.vg26-board__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 28px;
}

.vg26-snap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100% !important;
    margin: 0;
    padding: 10px 10px 18px;
    border: 1px solid #ececf2;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 10px 22px rgb(20 30 80 / 12%);
    color: var(--vg26-ink);
    font: inherit;
    text-align: left;
    transform: rotate(var(--tilt, 0deg));
    cursor: pointer;
    transition: transform .25s ease;
}



/* マスキングテープ */
.vg26-snap::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 80px;
    height: 22px;
    margin-left: -40px;
    background: var(--tape);
    transform: rotate(var(--tape-tilt, 0deg));
}

/* 写真の比率は 6 枚とも 4:3 にそろえる（元の写真の比率がばらばらでも、はみ出す分は切り取る） */
.vg26-snap__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.vg26-snap__cat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 0;
    color: var(--c-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

.vg26-snap__ttl {
    padding: 0 4px;
    font-size: var(--font-size_18);
    font-weight: 900;
    line-height: 1.45;
}

.vg26-snap__desc {
    padding: 0 4px;
    color: var(--vg26-text);
    font-size: var(--font-size_14);
    line-height: 1.7;
}

/* カードの中の小さいボタン。形はほかのボタンと同じ（右端に白い丸の ＋）。カードにマウスを乗せると少し薄くなる */
.vg26-snap__more {
    position: relative;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 6px 4px 0;
    padding: 0 40px 0 16px;
    border-radius: 999px;
    background: var(--c-text);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    transition: opacity .3s;
}

.vg26-snap__more::after {
    content: "\2b";
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: var(--c-text);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%);
}

.vg26-snap:hover .vg26-snap__more {
    opacity: .85;
}

.vg26-board__note {
    margin-top: var(--vg26-sp-s);
    color: var(--vg26-text);
    font-size: var(--font-size_13);
    line-height: 1.75;
}

.vg26-board__note > i {
    margin-right: 6px;
    color: var(--c-text);
}

/* #interbee を押すとコピー。コピー後は「コピーしました」に 2 秒切り替える */
.vg26 .vg26-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 2px;
    padding: 2px 10px;
    border: 1px solid var(--c-text);
    border-radius: 999px;
    background: #fff;
    color: var(--c-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.vg26 .vg26-copy:hover,
.vg26 .vg26-copy.is-copied {
    background: var(--c-text);
    color: #fff;
}

/* コピー後もボタンの幅は変えない。アイコンだけチェックに替え、「コピーしました」はボタンの上に吹き出しで出す */
.vg26-copy {
    position: relative;
}

.vg26-copy__check {
    display: none;
}

.vg26-copy.is-copied .vg26-copy__icon {
    display: none;
}

.vg26-copy.is-copied .vg26-copy__check {
    display: inline;
}

.vg26 .vg26-copy__done {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--vg26-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity .2s, visibility .2s;
    pointer-events: none;
}

.vg26-copy.is-copied .vg26-copy__done {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================
   STEP 06 振り返り
   ========================================================== */
.vg26-after {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vg26-sp-s);
}

.vg26-after__card {
    position: relative;
    gap: 6px;
    padding: 22px 20px 52px;
}

/* アイコンは STEP 01 の番号・STEP 02 のアイコンと同じ角丸の四角 */
.vg26-after__card .vg26-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 6px;
    font-size: var(--font-size_15);
}

/* 上の段：左にアイコン、右に「いつ見られるか」 */
.vg26-after__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.vg26 .vg26-after__when {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--c-soft);
    color: var(--c-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.vg26-after__card .vg26-arrow {
    position: absolute;
    right: 18px;
    bottom: 16px;
}

/* いちばん見てほしいカードは、STEP 01 の必須カード（.vg26-check__card.is-required）と同じく白地にステップの色の太枠 */
.vg26-after__card.is-main {
    border: 3px solid var(--c);
}

.vg26-after__ttl {
    font-size: var(--font-size_18);
    font-weight: 900;
    line-height: 1.45;
}

.vg26-after__desc {
    color: var(--vg26-text);
    font-size: var(--font-size_14);
    line-height: 1.7;
}

/* SNS・メールマガジンは会期後もつながる手段なので、上のカードと同じまとまり（間は m）にし、下の出展ナビとは l で離す */
.vg26-sns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--vg26-sp-m);
}

.vg26-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--vg26-shadow);
    font-size: var(--font-size_13);
    font-weight: 700;
    transition: background-color .2s, color .2s;
}

/* ボタンだとわかるよう、右に遷移のアイコンを付ける。サイト共通の仕様に合わせ、
   ページ移動は ›（fa-chevron-right。ご来場ガイドのボタンと同じ）、別タブは \f35d（共通 CSS の .c-text-link[target="_blank"] と同じ） */
.vg26-pill::after {
    content: "\f054";
    margin-left: 2px;
    color: var(--vg26-gray);
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 1em; /* 文字と同じ大きさ */
    font-weight: 900;
    transition: color .2s;
}

/* LINE Seed JP は字面が上寄りなので、左右のアイコンを 1px 上げて見た目の中心を文字にそろえる */
.vg26-pill > i,
.vg26-pill::after {
    position: relative;
    top: -1px;
}

.vg26-pill[target="_blank"]::after {
    content: "\f35d";
}

.vg26-pill:hover::after {
    color: #fff;
}

.vg26-pill:hover {
    background: var(--vg26-ink);
    color: #fff;
}

/* 出展ナビへの横長のバナー（STEP 01 のデジタル案内状と同じ作り：左に画像、右に文字） */
.vg26-next {
    flex-direction: row;
    align-items: center;
    gap: var(--vg26-sp-m);
    margin-top: var(--vg26-sp-l);
    padding: 20px 28px 20px 20px;
}

.vg26-next__img {
    flex-shrink: 0;
    width: 200px;
    border-radius: 8px;
}

.vg26-next__img img {
    width: 100%;
    height: auto;
}

.vg26-next__label {
    align-self: flex-start;
    margin-bottom: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--c); /* STEP 06 のオレンジ */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}

.vg26-next__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--vg26-gray);
    font-size: 12px;
    line-height: 1.7;
}

/* 説明文。共通 CSS の span（17px）が効いて見出しより大きくなるので指定し直す */
.vg26 .vg26-next__body > span {
    font-size: var(--font-size_14);
}

.vg26-next__body strong {
    color: var(--vg26-ink);
    font-size: var(--font-size_16);
    font-weight: 900;
}

/* ==========================================================
   Goal（白いパネルに、左に文字とボタン、右に写真。見出しだけグラデーション）
   ========================================================== */
.vg26-goal {
    --rail: 64px; /* 左の縦線の列の幅（.vg26-step__rail） */
    padding: 0 0 var(--vg26-sp-xl);
}

/* パネルは各ステップの中身と同じ左端（縦線の列＋間）から始め、上端は左の GOAL の丸（列と同じ大きさ）の上端にそろえる */
.vg26-goal .vg26-goal__box {
    margin-top: calc(var(--rail) * -1);
    margin-left: calc(var(--rail) + clamp(16px, 3vw, 40px));
}

.vg26-goal__box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 写真を横長で見せられるよう、文字と写真を半分ずつ */
    align-items: center; /* 横長の写真は、左の文字の上下中央にそろえる */
    gap: 28px var(--vg26-sp-l);
    padding: clamp(32px, 5vw, 64px);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--vg26-shadow);
    color: var(--vg26-ink);
}

/* 写真（昨年の会場風景。準備中はグレー）。縦長は写真を選びにくいので、横長（3:2）で切り抜く */
.vg26 .vg26-goal__img {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    object-fit: cover;
}

.vg26-cube--goal1 {
    top: -70px;
    right: -30px;
    z-index: 3;
    width: clamp(175px, 17.5vw, 288px);
}

.vg26-cube--goal2 {
    bottom: -60px;
    left: -110px;
    z-index: 3;
    width: clamp(147px, 14.6vw, 228px);
    transform: rotate(14deg);
}

/* 中身が最大幅まで広がっている PC（1220px 以上）は、カードの左下からさらに外へ出す */
@media screen and (min-width: 1220px) {
    .vg26-cube--goal2 {
        bottom: -80px;
        left: -190px;
    }
}

.vg26-goal__text {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* 見出しは 1 行で、文字と写真の上に 2 列ぶち抜きで置く */
.vg26-goal__title {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: clamp(44px, 5.6vw, 78px);
    font-weight: 800;
    line-height: 1;
}

/* 共通 CSS の h2 span の文字サイズを打ち消す。
   グラデーションは文字の箱の中しか塗られないので、j・y の下が切れないよう下に余白を足し、そのぶん下の間隔は詰める */
.vg26-goal__title .vg26-grad-text {
    display: inline-block;
    padding-bottom: 0.15em;
    margin-bottom: -0.15em;
    font-size: inherit;
    line-height: inherit;
    background: linear-gradient(90deg, #0dccff, #c038e2 50%, #e60ea1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vg26-goal__lead {
    color: var(--vg26-text);
    font-size: var(--font-size_16);
    line-height: 1.9;
}

.vg26-goal__btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

/* ==========================================================
   タブレット
   ========================================================== */
@media screen and (max-width: 850px) {
    .vg26 {
        --vg26-fs-sec: 34px;
    }
}

/* MV の日付・会場・入場料：1100px 以下は 1 行ずつ縦に並べる（区切りの縦線は外す） */
@media screen and (max-width: 1100px) {
    .vg26-intro__tags {
        flex-direction: column;
        align-items: flex-start;
    }

    .vg26-intro__tag + .vg26-intro__tag::before {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .vg26-check,
    .vg26-board__grid,
    .vg26-after {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* 部門カード・交通アクセスは 2 列（3 枚目は次の段へ） */
    .vg26-access,
    .vg26-dept {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* デジタル案内状：左に画像、右に文字、ボタンは文字の下に横並び */
    .vg26-invite {
        display: grid;
        grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
        grid-template-areas: "img text" "img btns";
        align-items: center;
        column-gap: var(--vg26-sp-m);
        row-gap: 14px;
    }

    .vg26-invite__img {
        grid-area: img;
        width: 100%;
    }

    .vg26-invite__text {
        grid-area: text;
        align-self: end;
    }

    .vg26-invite__btns {
        grid-area: btns;
        flex-direction: row;
        align-self: start;
    }

    .vg26 .vg26-invite__btn {
        flex: 1;
        min-width: 0;
    }

    /* MV：タブレットもチケットを説明文の右に並べたまま（下に落とさない）。チケットは少し小さく */
    .vg26-mv__inner {
        gap: 24px 32px;
    }

    .vg26-intro__text {
        flex: 1 1 0;
    }

    .vg26-ticket {
        flex: 0 0 260px;
    }

    .vg26-ticket__count .vg26-en {
        font-size: 84px;
    }


    /* 100+・初日発表の札は、カードが小さくなるぶん小さく */
    .vg26 .vg26-pickup__ribbon {
        padding: 10px 18px;
        font-size: var(--font-size_17);
    }

    .vg26-dots {
        display: none;
    }
}

/* ==========================================================
   SP
   ========================================================== */
@media screen and (max-width: 767px) {
    /* SP は余白の段階ごと小さくする（各部品の余白はこの変数に従う） */
    .vg26 {
        --vg26-gutter: 16px;
        --vg26-sp-m: 16px;  /* ブロックの間（PC は 24px） */
        --vg26-sp-l: 24px;  /* 見出しの下など（PC は 48px） */
        --vg26-sp-xl: 56px; /* ステップの間・セクションの上下（PC は 120px） */

        /* 文字の大きさ：画面幅で縮む変数の下限を上げ、本文は 14px、注記・ラベルも 12px より小さくしない
           （画面幅で縮むままだと 390px で 14px の指定が 12px、13px の指定が 11px になる） */
        --font-size_13: 12px;
        --font-size_14: 14px;
        --font-size_15: 15px;
        --font-size_16: 15px;
    }

    .vg26 br.pc {
        display: none;
    }

    .vg26-btn {
        min-height: 54px;
        padding: 0 64px 0 26px;
        font-size: var(--font-size_15);
    }

    .vg26-sec-ttl {
        margin-bottom: 28px;
    }

    .vg26-mv {
        min-height: 0;
    }

    .vg26-mv__inner {
        padding: 40px 0 48px;
    }

    .vg26-intro__lead {
        font-size: var(--font-size_16);
    }

    /* SP のキャッチは説明文と同じ大きさ（サイトの色と太さで目立たせる） */
    .vg26 .vg26-intro__lead .vg26-grad-text {
        margin-top: 6px;
        font-size: 1em;
        line-height: inherit;
    }

    .vg26-intro__tag {
        font-size: var(--font-size_13);
    }

    /* 見出しは SP でも 1 行に収まる大きさ（390px 幅で約 26px） */
    .vg26-mv__title {
        font-size: 6.6vw;
    }

    .vg26-ticket {
        transform: rotate(1.5deg);
    }

    .vg26-ticket__count .vg26-en {
        font-size: 84px;
    }















    /* SP は帯の文字を小さく（見出しより目立たないように。1 まとまりずつ画面に入る大きさ） */
    .vg26-marquee {
        padding: 12px 0;
    }

    .vg26 .vg26-marquee__track span {
        padding: 0 18px;
        font-size: 22px;
    }

    /* 左の縦の線の列は細く（丸 32px・中身との間 12px）して、中身の幅を広げる */
    .vg26-step {
        gap: 12px;
    }

    .vg26-step__rail {
        flex-basis: 32px;
    }

    .vg26-step.is-last .vg26-step__body {
        padding-bottom: calc(var(--vg26-sp-xl) + 32px);
    }

    .vg26-goal {
        --rail: 32px;
    }

    .vg26-goal .vg26-goal__box {
        margin-left: calc(var(--rail) + 12px);
    }

    .vg26-step__rail::after {
        width: 5px;
    }

    .vg26-step__no,
    .vg26 .vg26-step__goal {
        width: 32px;
        height: 32px;
        border-width: 3px;
        font-size: 12px;
    }

    .vg26 .vg26-step__goal {
        font-size: 8px;
        letter-spacing: 0;
    }

    .vg26-step__lead {
        font-size: var(--font-size_14);
    }


    /* SP は画像 → 文字 → ボタンの縦並び。ボタンは横に 2 つ並べると文字が切れるので、幅いっぱいで縦に積む */
    .vg26-invite__text,
    .vg26-invite__btns {
        align-self: stretch;
    }

    .vg26-invite {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .vg26-invite__img {
        width: 100%;
    }

    .vg26-invite__btns {
        flex-direction: column;
    }

    .vg26 .vg26-invite__btn {
        flex: none;
        width: 100%;
    }

    /* 最寄り駅の横長カードも、SP は見出し → 路線図 → 徒歩の分数の縦並び */
    .vg26-access .vg26-access__wide {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "img"
            "desc";
        row-gap: 12px;
    }

    .vg26-check,
    .vg26-access,
    .vg26-dept,
    .vg26-pickup,
    .vg26-after,
    .vg26-board__grid {
        grid-template-columns: 1fr;
    }

    .vg26-day {
        grid-template-columns: 1fr;
    }

    .vg26-day__time {
        padding: 20px 18px 6px;
    }

    .vg26-time {
        --clock: 58px;
    }

    .vg26-time li {
        column-gap: 44px;
    }

    .vg26-time__clock {
        font-size: var(--font-size_22);
    }

    .vg26-time li::before {
        top: 5px;
        left: calc(var(--clock) + 16px);
    }

    .vg26-time li:not(:last-child)::after {
        top: 17px;
        left: calc(var(--clock) + 21px);
    }

    .vg26-day__service {
        padding: 20px 18px;
    }

    .vg26-caution {
        align-items: flex-start;
        padding: 16px 18px;
    }

    .vg26 .vg26-links .vg26-textlink {
        flex: 1 1 100%;
        min-width: 0;
    }

    .vg26-entry {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* 縦に並ぶので ▶ を下向きに */
    .vg26-entry__item + .vg26-entry__item::before {
        top: -27px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }

    /* SP は 1 列なので段をそろえない */
    .vg26-dept__card {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    .vg26-dept__label {
        align-self: auto;
    }

    .vg26-map {
        padding: 28px 12px 20px;
    }

    /* 出展ナビのバナーは、画像 → 文字の縦並び。矢印は文字の右下 */
    .vg26-next {
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px;
    }

    .vg26-next__img {
        width: 100%;
    }

    .vg26-board {
        padding-inline: 18px;
    }

    .vg26-cube--goal1 {
        top: -44px;
        right: -16px;
        width: 110px;
    }

    /* SP の GOAL のボタンは、カードの幅いっぱい */
    .vg26 .vg26-goal__btns .vg26-btn,
    .vg26 .vg26-goal__btns .vg26-goal__back {
        width: 100%;
    }

    /* SP は GOAL の説明文が幅に収まらないので、ひとまとまりの指定を外して折り返す */
    .vg26 .vg26-goal__lead .vg26-nobr {
        display: inline;
    }

    /* 場所のバッジ（ONLINE・幕張メッセ）も SP は 12px より小さくしない */
    .vg26-place {
        font-size: 12px;
    }

    /* STEP 02・05 の右上のキューブは、SP では見出しの横の「当日の朝」「ひと休み＆お楽しみ」にかからないよう上げる */
    .vg26-cube--s2 {
        top: -24px;
    }

    .vg26-cube--s5 {
        top: -40px;
    }

    /* SP も GOAL の左下のキューブを出す。小さくして、カードの左下に少しだけはみ出させる */
    .vg26-cube--goal2 {
        bottom: -36px;
        left: -43px;
        width: 96px;
    }

    .vg26-goal__lead {
        font-size: var(--font-size_14);
    }

    /* SP は写真 → 見出し → 文字・ボタンの縦並び。列は幅いっぱい（ボタンの 290px に引っぱられて、はみ出さないように） */
    .vg26-goal__box {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--vg26-sp-m);
    }

    .vg26 .vg26-goal__img {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 3 / 2;
    }

    .vg26-goal__title {
        grid-row: 2;
    }

    .vg26-goal__text {
        grid-column: 1;
        grid-row: 3;
    }
}

/* 6 STEPS の一覧：タブレットでも横並びだと文字が詰まるので、1024px 以下は SP と同じ縦並び（左に丸・右に文字）にする */
@media screen and (max-width: 1024px) {
    /* SP は道を縦にして、左にピン・右に文字 */
    .vg26-overview__map {
        --flag: 32px;
        padding: calc(var(--flag) + 20px) 18px;
    }
    /* SP は丸を縦に並べ、線も縦につなぐ */
    .vg26-overview__item:not(:last-child)::after {
        top: 22px;
        left: 19px; /* 丸（44px）の中心 − 線の太さの半分 */
        width: 6px;
        height: calc(100% + 18px); /* 次の丸の中心まで（行の間 18px を足す） */
        border-radius: 3px;
        background: linear-gradient(180deg, var(--c), var(--c-next));
        background: linear-gradient(in oklch 180deg, var(--c), var(--c-next));
    }
    /* SP は道が縦なので、START をカードの上端、GOAL を下端に付けた横長の帯にする */
    .vg26-overview__flag {
        left: 0;
        right: 0;
        width: auto;
        height: var(--flag);
        writing-mode: horizontal-tb;
    }
    .vg26-overview__flag.is-start {
        top: 0;
        bottom: auto;
    }
    .vg26-overview__flag.is-goal {
        top: auto;
        bottom: 0;
    }
    .vg26-overview__list {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .vg26-overview__link {
        display: grid;
        grid-template-columns: 44px 1fr;
        align-items: center;
        column-gap: 16px;
        row-gap: 2px;
        text-align: left;
    }
    .vg26-overview__no {
        grid-row: 1 / span 4;
        width: 44px;
        height: 44px;
        margin: 0;
        border-width: 4px;
        font-size: var(--font-size_15);
    }
    /* SP は縦並びなので高さをそろえない（左寄せ） */
    .vg26-overview__name {
        display: block;
        min-height: 0;
        padding: 0;
    }
    /* 06 から下の GOAL の帯まで縦に伸ばす */
    .vg26-overview__item:last-child::after {
        top: 22px;
        left: 19px;
        right: auto;
        bottom: -20px;
        width: 6px;
        height: auto;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(180deg, var(--c), var(--vg26-goal));
        background: linear-gradient(in oklch 180deg, var(--c), var(--vg26-goal));
    }
    .vg26-overview__icon {
        display: none;
    }
    /* SP は区間の帯を出さず、各地点に時期と場所のラベルを出す */
    .vg26-overview__zones {
        display: none;
    }
    /* SP は上の帯がないので、01・06 の時期も出す */
    .vg26-overview__when,
    .vg26-overview__item:first-child .vg26-overview__when,
    .vg26-overview__item:last-child .vg26-overview__when {
        padding-left: 0;
        visibility: visible;
    }
    .vg26-overview__link .vg26-place {
        display: inline-flex;
        justify-self: start;
        margin-top: 2px;
    }
}

/* MV のチケット：タブレット・SP（1024px 以下）は小さく（幅 220px）。中の文字・余白・穴もひと回り小さく。
   タブレットは文字の右、SP は文字の下の中央に置く（置き場所は上の @media） */
@media screen and (max-width: 1024px) {
    .vg26-ticket {
        --notch: 12px;
        --hole: 5px;
        --hole-gap: 30px;
        flex: 0 0 220px;
    }

    .vg26-ticket__head {
        padding: 20px 18px 14px;
        font-size: 11px;
    }

    .vg26-ticket__body {
        padding: 22px 18px 24px;
    }

    .vg26-ticket__state[data-state="before"] .vg26-ticket__label {
        font-size: 14px;
    }

    .vg26-ticket__count .vg26-en {
        font-size: 64px;
    }

    .vg26-ticket__unit {
        font-size: 20px;
    }

    .vg26-ticket__stub {
        padding: 18px 18px 22px;
    }

    .vg26 .vg26-ticket__dates dt,
    .vg26 .vg26-ticket__dates dd {
        font-size: 12px;
    }

}

/* 6 STEPS の一覧：タブレット・大きめの SP（480〜1024px）は縦並びのままだと右が空くので、01〜03 と 04〜06 の 2 列にする。
   列の切れ目（03 → 04）の線は出さない。
   START は左の列（01）の上、GOAL は右の列（06）の下に、丸の左端から始まる帯で付ける（上下いっぱいの帯はやめる） */
@media screen and (min-width: 480px) and (max-width: 1024px) {
    .vg26-overview__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        gap: 26px 32px; /* 行の間 26px・列の間 32px */
    }

    .vg26-overview__item:nth-child(3)::after {
        display: none;
    }

    /* 番号の丸は、ステップ名（1 行目）と横一列にそろえる。
       丸（44px）の中心をステップ名の行の中心（上から 13px）に合わせるので、丸を 9px 上げ、線もそこから引く */
    .vg26-overview__link {
        align-items: start;
    }

    .vg26-overview__no {
        grid-row: 1 / span 2;
        margin-top: -9px;
    }

    /* 1 行目はステップ名と「ONLINE」「幕張メッセ」の場所のラベルを横に並べ、2 行目に時期。
       ラベルはステップ名の長さに合わせて、名前のすぐ右（10px あけて）に付ける */
    .vg26-overview__link {
        grid-template-columns: 44px auto 1fr;
        column-gap: 10px;
        row-gap: 6px;
    }

    .vg26-overview__name {
        grid-column: 2;
        grid-row: 1;
        margin-left: 6px;
    }

    .vg26-overview__when {
        grid-column: 2 / -1;
        grid-row: 2;
        margin-left: 6px;
    }

    .vg26-overview__link .vg26-place {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        margin-top: 0;
    }

    .vg26-overview__item:not(:last-child)::after,
    .vg26-overview__item:last-child::after {
        top: 13px;
    }

    /* 次の丸の中心まで（行の間 26px を足す） */
    .vg26-overview__item:not(:last-child)::after {
        height: calc(100% + 26px);
    }

    /* 白いカードの内側の余白は上下左右とも 24px（--pad）。START・GOAL の帯もカードの端から 24px に置き、
       一覧は帯の高さ（32px）と帯との間（16px）のぶん下げる */
    .vg26-overview__map {
        --pad: 24px;
        padding: calc(var(--pad) + 32px + 16px) var(--pad);
    }

    /* 帯の幅は、それぞれの列（左：01〜03、右：04〜06）の幅ちょうど。列の左右の端と帯の端をそろえる */
    .vg26-overview__flag {
        width: calc((100% - var(--pad) * 2 - 32px) / 2);
        height: 32px;
        border-radius: 999px;
    }

    .vg26-overview__flag.is-start {
        top: var(--pad);
        right: auto;
        left: var(--pad);
    }

    /* 右の列の左端 ＝ 左の余白 ＋ 左の列の幅 ＋ 列の間 32px */
    .vg26-overview__flag.is-goal {
        bottom: var(--pad);
        right: auto;
        left: calc(var(--pad) + (100% - var(--pad) * 2 - 32px) / 2 + 32px);
    }
}

/* 6 STEPS の一覧：2 列（480〜1024px）のときは、場所のラベルをステップ名の横ではなく時期の下に置き、
   ステップ名・時期・場所の 3 行にする */
@media screen and (min-width: 480px) and (max-width: 1024px) {
    .vg26-overview__link {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .vg26-overview__no {
        grid-row: 1 / span 3;
    }

    .vg26-overview__name,
    .vg26-overview__when {
        grid-column: 2;
    }

    .vg26-overview__link .vg26-place {
        grid-column: 2;
        grid-row: 3;
        margin-left: 6px;
    }

    /* 右の列（04〜06）は START の帯の高さ＋間（32px ＋ 16px）だけ上げる。
       04 の上端が START の上端に、GOAL の下端が 03 の文字の下端（＝一覧の下端）にそろう */
    .vg26-overview__item:nth-child(n + 4) {
        transform: translateY(-48px);
    }

    .vg26-overview__map {
        padding-bottom: var(--pad);
    }
}

/* 6 STEPS の一覧：SP（479px 以下・1 列）も、番号の丸をステップ名（1 行目）と横一列にそろえる。
   丸（44px）の中心をステップ名の行の中心（SP は文字が小さいので上から 11px）に合わせるので、丸を 11px 上げ、線もそこから引く */
@media screen and (max-width: 479px) {
    /* カードの上下の余白。上は 01 の丸（ステップ名に合わせて 11px 上げている）が START の帯から 12px 離れるように 帯 32px ＋ 23px、
       下は GOAL の帯 32px ＋ 16px */
    .vg26-overview__map {
        padding-top: calc(var(--flag) + 23px);
        padding-bottom: calc(var(--flag) + 16px);
    }

    .vg26-overview__link {
        align-items: start;
    }

    .vg26-overview__no {
        grid-row: 1 / span 3;
        margin-top: -11px;
    }

    .vg26-overview__item:not(:last-child)::after,
    .vg26-overview__item:last-child::after {
        top: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vg26 *,
    .vg26 *::before,
    .vg26 *::after {
        animation: none !important;
        transition: none !important;
    }
}
/* ==========================================================================
   ここから下は TOP（assets/css/2026_visitor_top.css）の Inter BEE MAP の CSS をそのまま写したもの。
   TOP 側を直したら、ここも合わせて直す。このページ用の上書きは上の「Inter BEE MAP の枠」
   ========================================================================== */


/* ==========================================================================
   Inter BEE MAP（2026 デザイン）
   --------------------------------------------------------------------------
   左: エリア一覧 / 右: 地図（ピンを HTML で重ねる）＋ 選択中エリアのカード。
   一覧・ピン・カードは index.php の $imap26_areas から出していて、
   data-area で対応を取る（切り替えは index.php の initializeMapInteraction）。
   旧構成（.flex_box / .map_img / .map_img_area）向けのルールは上に残っているが、
   その class はもう HTML に無いので効いていない。
   ========================================================================== */
.imap26 {
  --imap26-blue: #1f8fe5;
  display: grid;
  grid-template-columns: minmax(260px, 30%) 1fr;
  gap: 28px;
  padding: 0 28px 0 0;
  border-radius: 12px;
  background: rgb(255 255 255 / 18%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* ---- 左: エリア一覧 ---- */
.imap26__side {
  padding: 28px 16px 28px 16px;
  background: rgb(255 255 255 / 55%);
}

.imap26__label {
  margin: 0 0 16px 8px;
  color: #666;
  font-size: var(--font-size_12, 12px);
}

.imap26__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.imap26__list li + li {
  margin-top: 12px;
}

.imap26__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #111;
  font: inherit;
  font-weight: 700;
  font-size: var(--font-size_15, 15px);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s;
}

.imap26__item:hover {
  background: rgb(255 255 255 / 60%);
}

.imap26__item.is-active {
  background: rgb(160 210 245 / 75%);
}

/* 数字は line-height:1 と Outfit（head_base.php で読み込み済み）で丸の中央に置く */
.imap26__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.imap26__item.is-active .imap26__num {
  background: var(--imap26-blue);
  color: #fff;
}

.imap26__name small {
  display: block;
  font-size: var(--font-size_12, 12px);
  font-weight: 500;
}

/* ---- 右: 地図 ---- */
.imap26__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 0;
}

.imap26__map {
  position: relative;
  /* 地図を中央から少し右へずらす（PC 20px）。img に margin を付けるとピン（left: %）とずれるので箱ごと動かす。
     タブレット・SP は下の @media で個別に指定 */
  left: 20px;
  /* 枠が狭い PC 幅（1001〜1240px 付近）でずらした分がはみ出さないよう、左右に余裕を持たせる */
  width: calc(100% - 60px);
  max-width: 720px;
  margin: 0 auto;
}

.imap26__map img {
  display: block;
  width: 100%;
  height: auto;
}

/* ピン。--x / --y は地図画像の左上基準の %（index.php の pin）で、丸の中心をその位置に置く */
.imap26__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(40 40 40 / 85%);
  color: #fff;
  font: inherit;
  /* 一覧の番号（.imap26__num）と同じく、丸の中心に収まる Outfit にする */
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}

.imap26__pin:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.imap26__pin.is-active {
  z-index: 2;
  background: rgb(31 143 229 / 90%);
}

/* ---- 右下: 選択中エリアのカード ---- */
.imap26__card {
  /* 白地の余白も含めてカード全体をタイトルのリンクにする（下の .imap26__ttl a::before） */
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
}

.imap26__card[hidden] {
  display: none;
}

.imap26__thumb {
  flex-shrink: 0;
  width: 26%;
  max-width: 180px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
}

.imap26__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imap26__body {
  min-width: 0;
}

.imap26__ttl {
  margin: 0 0 6px;
  font-size: var(--font-size_20, 20px);
  font-weight: 700;
  line-height: 1.3;
}

.imap26__ttl a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: #111;
}

.imap26__ttl small {
  font-size: var(--font-size_14, 14px);
}

/* タイトル横の丸矢印（白地に青枠） */
.imap26__ttl a::after {
  content: '\f061';
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--imap26-blue);
  border-radius: 50%;
  color: var(--imap26-blue);
  font-size: 11px;
  transition: background-color .2s, color .2s;
}

.imap26__ttl a:hover::after,
.imap26__card:hover .imap26__ttl a::after {
  background: var(--imap26-blue);
  color: #fff;
}

/* タイトルのリンクをカード全体に広げる（::after は丸矢印で使用中なので ::before） */
.imap26__ttl a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.imap26__desc {
  margin: 0;
  color: #111;
  font-size: var(--font-size_13, 13px);
  line-height: 1.6;
}

.imap26__btns {
  /* ボタンは全体リンクの上に出し、それぞれの飛び先へ */
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

/* 白ピルに青枠、右端に青丸の矢印 */
.imap26__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 4px 12px;
  border: 1.5px solid var(--imap26-blue);
  border-radius: 999px;
  background: #fff;
  color: var(--imap26-blue);
  font-size: var(--font-size_12, 12px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}

.imap26__btn::after {
  content: '\f061';
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--imap26-blue);
  color: #fff;
  font-size: 8px;
}

.imap26__btn:hover {
  background: var(--imap26-blue);
  color: #fff;
}

.imap26__btn:hover::after {
  background: #fff;
  color: var(--imap26-blue);
}

/* ---- タブレット・SP: 地図 → カード → 一覧（2列）の縦積み ---- */
@media screen and (max-width: 1000px) {
  .imap26 {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .imap26__main {
    order: -1;
    padding: 20px;
  }

  /* 地図の外のピン（CINEMA の ⑤ は -2.7%）が角丸の枠で切れないよう、左右に余白を取る */
  .imap26__map {
    /* 左を多めに取って右へ寄せる（padding だとピンの基準がずれるので margin と width で） */
    width: calc(100% - 84px);
    /* 最大幅（720px）で止まる幅でも、中央から右へ 18px ずらす */
    margin: 0 auto;
    position: relative;
    left: 18px;
  }

  /* タブレットは地図が PC より小さく見えるので、ピンも一回り小さく（PC 32px / SP 24px） */
  .imap26__pin {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .imap26__side {
    padding: 20px;
  }

  /* 2 列でも番号は縦に読む順（左列 1〜5・右列 6〜9）。行の間は詰める */
  .imap26__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    gap: 8px 8px;
  }

  .imap26__list li + li {
    margin-top: 0;
  }
}

@media screen and (max-width: 600px) {
  .imap26__main,
  .imap26__side {
    padding: 14px;
  }

  .imap26__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 2px;
  }

  .imap26__card {
    flex-direction: column;
    align-items: stretch;
  }

  .imap26__thumb {
    width: 100%;
    max-width: none;
  }

  .imap26__ttl {
    font-size: var(--font-size_18, 18px);
  }

  /* ピンは 24px。ラベルにかぶらないよう左へ 4px（transform は :hover で使うので margin で） */
  .imap26__pin {
    width: 24px;
    height: 24px;
    margin-left: -4px;
    font-size: 14px;
  }

  /* SP は右へ寄せず、半透明の枠の内側いっぱいに広げる（ピンはすべて地図の内側） */
  .imap26__main {
    padding-inline: 6px;
  }

  .imap26__map {
    width: 100%;
    margin: 0;
    left: 0;
  }

  /* 地図の下のカードは今までどおり枠から 14px（padding-inline を詰めた分を戻す） */
  .imap26__card {
    margin-inline: 8px;
  }
}

/* MV のチケット：SP（480〜767px）も説明文の右に並べ、来場事前登録ボタンと下揃え（揃えは .vg26-mv__inner の指定）。
   チケットの幅は画面幅に合わせて 160〜220px。中の数字も合わせて小さくする */
@media screen and (max-width: 767px) {
    .vg26-mv__inner {
        column-gap: 16px;
    }

    .vg26-ticket {
        flex: 0 0 clamp(160px, 30vw, 220px);
    }

    .vg26-ticket__count .vg26-en {
        font-size: clamp(44px, 8.4vw, 64px);
    }

    /* 帯の文字・日程・余白も、チケットの幅（160〜220px）に合わせて小さくする */
    .vg26-ticket__head {
        padding-right: clamp(8px, 2.4vw, 18px);
        padding-left: clamp(8px, 2.4vw, 18px);
        font-size: clamp(9px, 1.45vw, 11px);
        letter-spacing: .12em;
    }

    .vg26-ticket__body,
    .vg26-ticket__stub {
        padding-right: clamp(10px, 2.4vw, 18px);
        padding-left: clamp(10px, 2.4vw, 18px);
    }

    .vg26 .vg26-ticket__dates dt,
    .vg26 .vg26-ticket__dates dd {
        font-size: clamp(10px, 1.57vw, 12px);
        line-height: 1.3;
    }

    /* 日程の行の間は詰める */
    .vg26-ticket__dates {
        row-gap: 4px;
    }
}

/* 480px 未満はミニチケット（幅 130px）：日付・会場・入場料の右に小さく置き、来場事前登録ボタンはその下に幅いっぱいで置く。
   半券の日程は 9px で 3 行 */
@media screen and (max-width: 479px) {
    .vg26-mv__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 130px;
        grid-template-areas:
            "head head"
            "lead lead"
            "tags ticket"
            "btn btn";
        gap: 20px 12px;
        align-items: center;
    }

    .vg26-mv__head {
        grid-area: head;
    }

    .vg26-intro__text {
        display: contents;
    }

    .vg26-intro__lead {
        grid-area: lead;
    }

    .vg26-intro__tags {
        grid-area: tags;
    }

    .vg26-intro__text > .vg26-btn {
        grid-area: btn;
        justify-self: start;
    }

    .vg26-ticket {
        --notch: 7px;
        --hole: 3px;
        --hole-gap: 16px;
        grid-area: ticket;
        width: 130px;
        margin: 0;
        filter: drop-shadow(0 8px 14px rgb(20 30 80 / 18%));
    }

    .vg26-ticket__head {
        padding: 10px 4px 6px;
        font-size: 8px;
        letter-spacing: .06em;
    }

    /* 帯の文字は span なので、共通 CSS の span（14px）を打ち消す */
    .vg26 .vg26-ticket__head span {
        font-size: 9px;
        white-space: nowrap;
    }

    .vg26-ticket__body {
        padding: 10px 6px 12px;
    }

    .vg26-ticket__state[data-state="before"]:not([hidden]) {
        gap: 3px;
    }

    .vg26-ticket__state[data-state="before"] .vg26-ticket__label {
        font-size: 10px;
    }

    .vg26-ticket__count .vg26-en {
        font-size: 34px;
    }

    .vg26-ticket__unit {
        font-size: 12px;
    }

    .vg26-ticket__label,
    .vg26-ticket__now,
    .vg26-ticket__after {
        font-size: 11px;
    }

    .vg26-ticket__stub {
        padding: 10px 7px 12px;
    }

    .vg26-ticket__dates {
        row-gap: 3px;
    }

    .vg26 .vg26-ticket__dates dt,
    .vg26 .vg26-ticket__dates dd {
        font-size: 9px;
        line-height: 1.3;
        white-space: nowrap;
    }

    .vg26-ticket__perf::before {
        right: calc(var(--notch) + 4px);
        left: calc(var(--notch) + 4px);
        height: 4px;
        top: -2px;
        background: radial-gradient(circle 2px, #c8088a 96%, transparent) center / 9px 4px repeat-x;
    }
}