/* スマホ（縦長の画面）のトップ：390×720 の固定キャンバスに、PC と同じ「スライド＋道の帯」を収める。
   .stage-sp は stage.js が、縦長の画面のときだけ付ける。ここの指定は、すべて .stage-sp の中だけに効く。
   各枠の中身は、1画面（高さ 約520px、幅 約340px）に収まる分だけに絞る */

/* ---------- 共通：道の帯、ページ送り、中身の幅 ---------- */
.stage-sp { --road-b: 6px; }
.stage-sp .stage { --strip-h: 64px; --road-w: 18px; }
.stage-sp .slide__body { padding-top: 28px; }
.stage-sp .stage__dots { display: none; }   /* スマホは、スワイプで進むので、ページ送りの点は出さない */

/* ハンバーガー：3本線だけ。白い線で、下に敷くものはなし。ヘッダーの高さの中央に置く */
.stage-sp .site-header__inner { backdrop-filter: none; align-items: center; }
.stage-sp .gnav { display: flex; align-items: center; }
.stage-sp .gnav__toggle { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; gap: 0; background: none; font-size: 0; line-height: 0; color: transparent; }
.stage-sp .gnav__toggle span { position: relative; width: 22px; height: 2px; background: var(--paper); box-shadow: 0 7px 0 var(--paper), 0 -7px 0 var(--paper); }
.stage-sp[data-slide="contact"] .gnav__toggle span { background: var(--ink); box-shadow: 0 7px 0 var(--ink), 0 -7px 0 var(--ink); }
/* 開いたら、×に変える。線は白（メニューの面が、ティールなので） */
.stage-sp .gnav__toggle[aria-expanded="true"] span { background: transparent !important; box-shadow: none !important; }
.stage-sp .gnav__toggle[aria-expanded="true"] span::before, .stage-sp .gnav__toggle[aria-expanded="true"] span::after { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 2px; background: var(--paper); transform: rotate(45deg); }
.stage-sp .gnav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* メニュー：右から出てくる、画面いっぱいの面。開閉は、ボタンの aria-expanded だけで決める */
.stage-sp .gnav ul, .stage-sp .gnav ul[hidden] {
  display: flex !important; flex-direction: column; justify-content: center; gap: 0;
  position: fixed; inset: 0; z-index: 1; margin: 0; padding: 64px 36px 0;
  background: var(--line); border: 0; border-radius: 0;
  transform: translateX(100%); visibility: hidden;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1), visibility 0s .35s;
}
.stage-sp .gnav__toggle[aria-expanded="true"] + ul, .stage-sp .gnav__toggle[aria-expanded="true"] + ul[hidden] {
  transform: translateX(0); visibility: visible; transition: transform .35s cubic-bezier(.65, 0, .35, 1), visibility 0s;
}
.stage-sp .gnav li + li { border-top: 1px dashed color-mix(in srgb, var(--paper) 40%, transparent); }
.stage-sp .gnav a, .stage-sp[data-slide="contact"] .gnav a { padding: 16px 0; font-size: 1.125rem; letter-spacing: .12em; color: var(--paper); }
.stage-sp .gnav__logo { display: block; width: 150px; margin: 0 0 28px; filter: brightness(0) invert(1); }

.stage-sp .stop__inner, .stage-sp .newsband__inner { max-width: 100%; padding: 0 20px; }
.stage-sp .sec-head { margin-bottom: 10px; gap: 4px; }
.stage-sp .sec-head h2 { font-size: 1.5rem; }
.stage-sp .sec-head p { font-size: .8125rem; line-height: 1.6; }

/* ---------- ヒーロー ---------- */
.stage-sp .hero { min-height: 0; height: 100%; padding: 8px 12px 6px; }
.stage-sp .hero__panel {
  --ill-w: 364px; --crop: 0; --lead: 0px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  height: 100%; min-height: 0; padding: 16px 12px 10px; border-radius: 28px;
}
.stage-sp .hero__bunting { left: 50%; transform: translateX(-50%); width: 200px; }   /* 旗を、パネルの中央に */
.stage-sp .hero__text { --cq: 6px; --logo-w: 210px; margin-top: 14px; }
.stage-sp .hero__edition { font-size: .8125rem; padding: 3px 14px; }
.stage-sp .hero__copy { font-size: .9375rem; margin-top: 4px; white-space: nowrap; letter-spacing: .02em; }
.stage-sp .hero .btn-row { display: none; }   /* スマホでは、ボタンを出さない（メニューから行ける） */
/* 日付・場所は、小さめに */
.stage-sp .hero .when { margin-top: 10px; padding-top: 10px; gap: 6px; }
.stage-sp .when__rows { row-gap: 2px; column-gap: 8px; }
.stage-sp .when__year { font-size: .6875rem; }
.stage-sp .when__date { font-size: 1.625rem; }
.stage-sp .when__time { font-size: 1rem; margin-left: 8px; }
.stage-sp .when__place { font-size: 1.0625rem; gap: 0; }
.stage-sp .when__place span { font-size: .6875rem; }
/* イラストの左の塗り足し（道の端）は、PC と同じく、切り落とす。縦横比は、元のまま */
.stage-sp .hero__illust { width: 320px; flex: none; overflow: hidden; }
.stage-sp .hero__illust img { width: 364px; max-width: none; height: auto; margin-left: -44px; }

/* ---------- お知らせ ---------- */
.stage-sp .newsband { padding: 0; }
.stage-sp .newsband__inner { gap: 10px; }
.stage-sp .newsband__main { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 6px; padding: 12px 14px 10px; border-radius: 24px; }
.stage-sp .newsband__person { height: 56px; width: auto; justify-self: start; }
.stage-sp .newsband__main h2 { font-size: 1.25rem; }
.stage-sp .news a, .stage-sp .news .news__plain { grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0 8px; padding-block: 8px; font-size: .8125rem; }
.stage-sp .newsband .news .news__plain { padding-block: 8px; }
.stage-sp .newsband__more { margin-top: 4px; font-size: .8125rem; }
.stage-sp .newsband__side { gap: 10px; }
.stage-sp .pamphlet { padding: 10px 14px; }
.stage-sp .insta { padding: 8px 14px; }

/* ---------- 開催概要（2枚に分ける：概要と数字／開催の情報と「会場でできること」） ---------- */
.stage-sp .about--merged { grid-template-columns: 1fr; gap: 12px; }
.stage-sp .about__logo { width: 300px; margin-bottom: 12px; }
.stage-sp .about__lead { font-size: .9375rem; line-height: 1.85; }
.stage-sp .about__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; margin-top: 18px; }
.stage-sp .about__nums dd { font-size: 1.75rem; }
.stage-sp .about__nums dt { font-size: .625rem; line-height: 1.35; }
.stage-sp .facts > div { padding-block: 6px; grid-template-columns: 3.8em minmax(0, 1fr); gap: 2px 10px; font-size: .8125rem; }
.stage-sp .facts dd small { font-size: .6875rem; }
.stage-sp .about--merged .ways { grid-template-columns: 1fr; gap: 6px; margin-top: 2px; }
.stage-sp .about--merged .ways li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 6px 12px; }
.stage-sp .about--merged .ways img { width: 40px; height: 40px; }
.stage-sp .ways h3 { font-size: .875rem; line-height: 1.3; }
.stage-sp .ways p { font-size: .6875rem; line-height: 1.5; }

/* ---------- 出展団体 ---------- */
.stage-sp .ex-sum { grid-template-columns: 1fr; gap: 8px; }
.stage-sp .ex-sum__total { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.stage-sp .ex-sum__total b { font-size: 3.5rem; }
.stage-sp .ex-sum__total small { flex-basis: 100%; margin-top: 2px; }
.stage-sp .cat-list { columns: 2; column-gap: 20px; }
.stage-sp .cat-list li { padding-block: 5px; font-size: .8125rem; }
.stage-sp .ex-sum__names { display: none; }
.stage-sp #exhibitors .sec-head p { display: none; }

/* ---------- ステージ ---------- */
.stage-sp .timetable { columns: 1; }
.stage-sp .timetable li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: baseline; padding-block: 3px; gap: 0 8px; }
.stage-sp .timetable time { font-size: .8125rem; grid-row: 1 / 3; }
.stage-sp .timetable h3 { font-size: .8125rem; line-height: 1.3; }
.stage-sp .timetable p { font-size: .625rem; line-height: 1.3; grid-column: 2; }
.stage-sp #stage .sec-head h2 { font-size: 1.25rem; }
.stage-sp #stage .sec-head p { display: none; }
.stage-sp #stage .notice { font-size: .6875rem; margin-bottom: 6px; }
.stage-sp #stage .tabs { margin-bottom: 8px; }

/* ---------- アクセス ---------- */
.stage-sp .access { grid-template-columns: 1fr; gap: 10px; }
.stage-sp .access__venue { font-size: 1.125rem; }
.stage-sp .access ul { margin-top: 8px; font-size: .75rem; }
.stage-sp .access li { margin-bottom: 3px; }
.stage-sp .access__map { aspect-ratio: auto; height: auto; min-height: 110px; padding: 14px; }
.stage-sp .access__map p { font-size: .75rem; }

/* ---------- 私たちについて ---------- */
.stage-sp .teaser { grid-template-columns: 1fr; gap: 10px; }
.stage-sp .teaser__text h2 { font-size: 1.25rem; }
.stage-sp .teaser__img { justify-content: center; margin-top: 8px; }
.stage-sp .teaser__img img { height: 170px; }

/* ---------- お問い合わせ（1枚に収める） ---------- */
.stage-sp .site-footer__inner { grid-template-columns: 1fr; gap: 10px; padding: 6px 20px; max-width: 100%; }
.stage-sp .site-footer { font-size: .6875rem; }
.stage-sp .site-footer h2 { font-size: .8125rem; margin-bottom: 2px; }
.stage-sp .contact { font-size: .75rem; gap: 4px; }
.stage-sp .contact dt { font-size: .625rem; width: 5.6em; }
.stage-sp .contact__org { font-size: .9375rem; margin-bottom: 6px; }
.stage-sp .credits { gap: 6px; font-size: .625rem; line-height: 1.5; }
.stage-sp .credits h3 { font-size: .625rem; }
.stage-sp .site-footer__bottom { padding-top: 6px; }
.stage-sp .site-footer__bottom img { width: 84px; }
.stage-sp .site-footer__bottom small { font-size: .5625rem; }

/* スマホは、画面を引っぱっても、ページが動かないようにする */
.stage-sp, .stage-sp body { overscroll-behavior: none; }