@charset "UTF-8";
/*
 * さとみ UTATTEMITA TOUR 特設LP
 * デザイン: Figma「さとみくんソロ」2026-10-23 版（セクション「261021」）
 *   TOP編集中 [134:1585]（SP 393px）/ PC [2:11]（1440px）/ news [169:5853] / news/xxx [170:8704]
 * 寸法は Figma の px ÷ 10 = rem。SP は画面幅 393px で 1rem=10px、幅に比例して拡大縮小する。600px 以上は 1rem=10px 固定
 * 寸法表: ../../design/spec_*.txt（stpr-build/fig-tools/spec.mjs で .fig から生成）
 */

:root {
  --ink: #492424;
  --pink: #ff85d0;
  --glow: #ffb5e3;
  --cyan: #00a6ff;
  --em: #ff00ae;
  --gray: #949494;
  --en: "Special Gothic Expanded One", sans-serif;
  --ja: "M PLUS 1", sans-serif;
}

html { font-size: calc(100vw / 39.3); -webkit-text-size-adjust: 100%; }   /* ページ内リンクのスクロールは main.js（1.2秒・ゆっくり始まりゆっくり止まる） */
@media (min-width: 600px) { html { font-size: 10px; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--ja); font-weight: 500; color: var(--ink); background: #fff; }
body.is-menu-open { overflow: hidden; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---- ページ（SP のデザイン幅の列）------------------------------------------ */
.page {
  position: relative;
  width: 100%;
  background: #fff url(/assets/images/bg_sp.webp) repeat-y 0 0 / 39.3rem auto;   /* 1859px の1周期を縦に繰り返す */
  overflow: hidden;
}

/* ---- ヘッダー（menu [134:2121]）------------------------------------------- */
.hd {
  position: fixed; z-index: 50; top: 0; left: 0;
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; height: 4.8rem; padding: 1.1rem 1.2rem 1.1rem 1.4rem;
  background: rgba(255, 255, 255, .8);
}
.hd__logo img { width: 8rem; height: 3.8rem; }
.hd__menu { display: flex; flex-direction: column; gap: .4rem; width: 3.7rem; }
.hd__bar { display: block; width: 3.7rem; height: .4rem; background: var(--pink); transition: transform .2s; }
.hd__menu-txt { font-family: var(--en); font-weight: 400; font-size: 1rem; line-height: 1rem; color: var(--pink); text-align: left; text-transform: uppercase; }
.hd__menu[aria-expanded="true"] .hd__bar:nth-child(1) { transform: translateY(.4rem) rotate(20deg); }
.hd__menu[aria-expanded="true"] .hd__bar:nth-child(2) { transform: translateY(-.4rem) rotate(-20deg); }

/* メニューを開いた状態（デザイン無し。PC 右側のメニューと同じ見た目で仮に作成） */
.gnav {
  position: fixed; z-index: 40; inset: 4.8rem 0 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem;
  padding: 2.4rem 0 4rem;
  background: rgba(255, 255, 255, .95);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.gnav.is-open { opacity: 1; visibility: visible; }

/* メニューの並び（SP のメニュー・PC 右側で共通） */
.menu { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 13.6rem; }
.menu a { display: block; width: 100%; font-family: var(--en); font-weight: 400; font-size: 2rem; line-height: 3.4rem; letter-spacing: .03em; text-align: center; text-transform: uppercase; color: var(--pink); }
.menu-btns { display: flex; flex-direction: column; gap: 1.6rem; }

/* ---- KV ----------------------------------------------------------------- */
.kv { margin-top: 4.8rem; scroll-margin-top: 4.8rem; }   /* /#top で開いたとき（下層のメニュー「top」・ページ内で top を押した後の再読み込み）に KV がヘッダーの下に隠れないよう、ヘッダーの高さぶん止める位置を下げる＝ページの一番上で止まる */
.kv img { width: 39.4rem; height: 22.1rem; margin-left: -.1rem; }

/* ---- 章 ------------------------------------------------------------------ */
.sec { margin-top: 8rem; padding: 0 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 4rem; scroll-margin-top: 9.8rem; }   /* ページ内リンクで止まる位置＝ヘッダー 48 ＋ 余白 50（章の頭をヘッダーに付けない。参考: めておら学園祭 LP は見出しの上が 50px 空く。2026-10-26 ユーザー指示。章の配置は変えない） */
.sec--full { padding: 0; }
#movie, #contact { margin-top: 8.5rem; }   /* GOODS・MOVIE の見出し画像は 82px（ほかは 87px）で、デザインは位置をそのままにしてあるため */

/* 見出し（英字・✦・日本語・線がデザイン側で1枚の画像になっている） */
.ttl img { width: 36.9rem; height: 8.7rem; }
.ttl--s img { height: 8.2rem; }

/* ボタン（button [59:2753]） */
.btn {
  display: flex; justify-content: center; align-items: center; gap: .8rem;
  width: 31.3rem; height: 5.3rem; padding: 1.2rem 2.4rem;
  background: linear-gradient(90deg, #fff 2.37%, #ff64c3 97.33%);
  border: 1px solid #fff; border-radius: 10rem; box-shadow: 0 0 .8rem var(--glow);
}
.btn__txt { width: 23.3rem; font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; letter-spacing: .03em; white-space: nowrap; }
.btn__arw { width: 2.5rem; height: 1.5rem; margin: -.15rem; flex: none; }   /* 絵は 22×12。先が枠からはみ出すので SVG に四方 1.5px の余白を付けてあり、その分を負の margin で戻す（並びは 22×12 のまま） */
.btn--s { width: 22rem; }
.btn--s .btn__txt { width: 14rem; }
/* 文字の長いボタン（フッターの「Satomi Official Fanclub - backstage -」。2026-10-27 先方指示で差し替え）。
 * 1行だと 14px でも幅 23.3rem からはみ出す（12px まで下げないと入らない）ので、ボタンの大きさはそのままで2行にする */
.btn--long { padding-block: .8rem; }
.btn--long .btn__txt { font-size: 1.4rem; line-height: 1.8rem; white-space: normal; }

/* 開閉の三角（plus [76:1127]）: 閉＝ピンクの▽、開＝水色の▲。20x20 の枠に 20x12 */
.tri { flex: none; width: 2rem; height: 2rem; background: url(/assets/images/tri_close.svg) no-repeat center / 2rem 1.2rem; }
details[open]:not(.is-closing) > summary .tri { background-image: url(/assets/images/tri_open.svg); }   /* .is-closing＝閉じる動きの最中（main.js）。押した時点で印を閉じた形に戻す */

/* 開閉ボックス（accordion [59:2422] / accordion_会場 [73:354]） */
.acc { width: 36.9rem; }
.acc__sum { display: flex; align-items: center; gap: 1.6rem; min-height: 5.6rem; padding: 1.6rem; background: #fff; }
.acc__q { flex: 1; font-size: 1.4rem; font-weight: 800; line-height: 2.4rem; }   /* 文字スタイル「本文_ExBold」 */
.acc__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 1.6rem; background: rgba(255, 255, 255, .6); }
.acc__txt { width: 100%; font-size: 1.4rem; line-height: 2.4rem; white-space: pre-line; }
.acc__txt .em { color: var(--em); }
.acc__txt a { font-weight: 800; color: var(--pink); text-decoration: underline; }

/* ---- 日程（date [56:1017]）----------------------------------------------- */
.schedule { margin-top: 6.4rem; gap: 6.4rem; }
.venue { display: flex; flex-direction: column; gap: 4rem; width: 36.9rem; }
.venue__head { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.venue__area { display: flex; justify-content: center; align-items: center; gap: .6rem; font-family: var(--en); font-weight: 400; font-size: 1.8rem; line-height: 1.8rem; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.venue__area img { width: 1.6rem; height: 1.6rem; }
.venue__name { font-family: var(--en); font-weight: 400; font-size: 2.7rem; line-height: 4.6rem; letter-spacing: .03em; color: #fff; text-align: center; white-space: nowrap; }
.venue__days { display: flex; flex-direction: column; gap: 1.2rem; width: 36rem; }
/* 1日分: 左に日付、右に公演（昼・夜）を幅 200px で縦に並べる */
.day { display: flex; justify-content: space-between; align-items: flex-start; }
.day__date { display: flex; align-items: center; gap: .8rem; height: 3.8rem; font-family: var(--en); font-weight: 400; text-transform: uppercase; }
.day__md { width: 9.6rem; font-size: 2.8rem; line-height: 2.8rem; }   /* Figma の文字の箱は 96px（ブラウザの数字はそれより狭いので幅を固定して曜日の位置を合わせる） */
.day__wd { font-size: 1.3rem; line-height: 1.3rem; }
.day__shows { display: flex; flex-direction: column; gap: .8rem; width: 20rem; }
.show { display: flex; flex-direction: column; gap: .4rem; }
.show__name { font-size: 1.2rem; font-weight: 800; line-height: 2rem; }
.show__time { display: flex; align-items: center; gap: .6rem; height: 1.4rem; font-family: var(--en); font-weight: 400; text-transform: uppercase; }
.show__t { width: 5.4rem; font-size: 1.4rem; line-height: 1.4rem; }
.tag { padding: .1rem .3rem; background: rgba(255, 255, 255, .8); font-family: var(--en); font-weight: 400; font-size: .8rem; line-height: .8rem; color: var(--pink); text-transform: uppercase; }
/* 点線（2px の線・2 描いて 4 空ける。Figma は線の端から 0.5px 手前で描き始める）。高さ 0 の線として並ぶよう上下を -1px */
.dots { width: 36rem; height: 2px; margin: -1px 0; border: 0; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 6px) -.5px 0; }
.dots--s { width: 20rem; }

.acc--venue { box-shadow: 0 0 .8rem var(--glow); }   /* 影のスタイル shadow_pink（ノード側の写しが空で、道具を直すまで寸法表に出ていなかった） */
.map { display: flex; align-items: center; gap: .8rem; font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; color: var(--pink); }
.map img { width: 1.5rem; height: 1.7rem; }
.inq { display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 33.7rem; padding: .8rem 1.6rem; background: #fff; }
.inq__org, .inq__hours { width: 100%; font-size: 1.4rem; line-height: 2.4rem; text-align: center; white-space: pre-line; }
.inq__tel { display: flex; align-items: center; gap: .8rem; font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; color: var(--cyan); }
.inq__tel img { width: 1.7rem; height: 1.7rem; }
.inq__url { max-width: 100%; font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; color: var(--cyan); text-decoration: underline; overflow-wrap: anywhere; }

/* 右下に浮かぶ TICKET ボタン（floating [170:16647]）。台は画像、文字は HTML。SP の画面 393x852 で右 8・下 27 */
.fab {
  position: fixed; z-index: 30; right: .8rem; bottom: 2.7rem;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .2rem;
  width: 12.7rem; height: 4.5rem;
  background: url(/assets/images/fab_bg.webp) no-repeat center / 100% 100%;
  filter: drop-shadow(0 0 .4rem var(--glow));   /* Figma の影 8px（drop-shadow は半分の値で同じ見え方） */
  color: #fff;
}
.fab { transition: opacity .4s, visibility .4s; }
.fab.is-hidden { opacity: 0; visibility: hidden; }   /* KV・フッターが画面にある間は隠す（main.js。参考: めておら学園祭 LP） */
.fab__en { font-family: var(--en); font-weight: 400; font-size: 1.6rem; line-height: 1.6rem; letter-spacing: .03em; }
.fab__ja { display: flex; justify-content: center; align-items: center; gap: .8rem; font-size: 1.2rem; font-weight: 800; line-height: 1.2rem; }
.fab__ja img { width: 1.45rem; height: .75rem; margin: -.075rem; }   /* 絵は 13×6。SVG の四方 0.75px の余白を負の margin で戻す */

/* ---- チケット（Ticket [134:2066]）---------------------------------------- */
.ticket__group { display: flex; flex-direction: column; gap: 2.4rem; width: 36.9rem; }
.ticket__group--sales { gap: 3rem; }
.ticket__point { width: 16.8rem; height: 2.4rem; }
.ticket__note { font-size: 1.4rem; font-weight: 800; line-height: 2.4rem; color: var(--em); text-align: center; }

/* 券種と価格（ticket2 [212:6737]） */
.price { box-shadow: 0 0 .8rem var(--glow); }
.price__head { display: flex; flex-direction: column; gap: .4rem; padding: 1.2rem 1.6rem; background: var(--pink); color: #fff; }
.price__name { font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; letter-spacing: .03em; }
.price__sub { font-size: 1.2rem; line-height: 2rem; letter-spacing: .03em; }
.price__body { display: flex; justify-content: center; align-items: center; gap: .6rem; padding: 1.6rem; background: rgba(255, 255, 255, .6); }
.price__yen { font-family: var(--en); font-weight: 400; font-size: 2.8rem; line-height: 4.8rem; letter-spacing: .03em; }
.price__tax { font-size: 1.4rem; font-weight: 800; line-height: 2.4rem; }   /* 本文_ExBold */

/* 受付ごとの開閉（ticket [73:829]）。見出しはタグ・名前・三角の3つを grid で並べる（summary の中に div を置かないため） */
.tk { box-shadow: 0 0 .8rem var(--glow); }
.tk__head { display: grid; grid-template-columns: 1fr 2rem; align-items: center; gap: .4rem 1.6rem; padding: 1.2rem 1.6rem; background: var(--pink); color: #fff; }
.tk__head .tri { grid-column: 2; grid-row: 1 / span 2; }
.tk__tags { display: flex; gap: .8rem; }
.jtag { padding: .1rem .6rem; background: #fff; font-size: 1.2rem; font-weight: 800; line-height: 2rem; letter-spacing: .03em; color: var(--pink); }
.jtag--first { background: var(--cyan); color: #fff; }   /* 先着 */
.tk__name { font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; letter-spacing: .03em; }
.tk__body { display: flex; flex-direction: column; align-items: center; gap: 4rem; padding: 2.4rem 1.6rem 4rem; background: rgba(255, 255, 255, .6); }
.tk__terms { display: flex; flex-direction: column; gap: 2.4rem; width: 33.7rem; }
.tk__term { display: flex; flex-direction: column; gap: 1.6rem; }
.band { padding: .1rem .6rem; background: var(--cyan); font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; letter-spacing: .03em; color: #fff; text-align: center; }
.band--v { background: #d485ff; }
.tk__date { font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; text-align: center; }
.tk__txt { width: 100%; font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; }
/* 券種の下の注記（デザイン無し。2026-10-27 先方指示で最速に追加。本文と同じ 14px、※の行は2行目以降を ※ の幅だけ下げる） */
.tk__note { display: flex; flex-direction: column; gap: .8rem; font-size: 1.4rem; line-height: 2.4rem; }
.tk__kome { padding-left: 1em; text-indent: -1em; }
.tk__note .nobr { white-space: nowrap; }   /* ファンクラブ名の途中で改行しない */
/* 受付終了（部品集のバリアント3）: 見出し・帯を灰色に、タグの文字を灰色に */
.tk--end .tk__head, .tk--end .band { background: var(--gray); }
.tk--end .jtag { background: #fff; color: var(--gray); }

/* ---- ニュース（news [59:3233]）------------------------------------------ */
.news__list { display: flex; flex-direction: column; gap: 2.4rem; width: 36.9rem; }
.nw { display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: 1.6rem; background: rgba(255, 255, 255, .6); border: 1px solid #fff; }
.nw__date { align-self: flex-start; padding: .1rem .3rem; background: rgba(255, 255, 255, .8); font-family: var(--en); font-weight: 400; font-size: 1.2rem; line-height: 1.2rem; color: var(--pink); text-transform: uppercase; }
.nw--empty { font-size: 1.4rem; line-height: 2.4rem; text-align: center; }   /* 記事が0件のときだけ残る（data-stpr-empty。デザイン無し） */
.nw__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-height: 7.1rem; font-size: 1.4rem; line-height: 2.4rem; }   /* Figma の3行切りの箱は 71px */

/* ---- よくある質問（QA [75:954]）----------------------------------------- */
.faq__list { display: flex; flex-direction: column; gap: 2.4rem; width: 36.9rem; }
.faq__list[hidden] { display: none; }   /* display:flex が [hidden] に勝つため */
/* タブ（2026-10-28 先方指示。すにすて3rd と同じ切り替え。デザイン無し＝白の半透明の箱とピンクで、ページの部品に合わせた）。
 * 章の中の間隔は 4rem なので、タブと質問の間だけ 2.4rem（質問どうしと同じ）に詰める */
.faq__tabs { display: flex; gap: .8rem; width: 36.9rem; margin-bottom: -1.6rem; }
.faq__tab {
  flex: 1 1 0; min-width: 0; display: flex; justify-content: center; align-items: center; height: 5.2rem; padding: 0 .2rem;
  background: rgba(255, 255, 255, .6); border: 1px solid #fff; border-radius: 0; appearance: none;
  font: inherit; font-size: 1.2rem; font-weight: 800; line-height: 1.6rem; letter-spacing: 0; color: var(--ink); text-align: center; cursor: pointer;   /* 「お申し込みについて」を1行に収めるため字間0・余白 .2rem */
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.faq__tab.is-on { background: var(--pink); color: #fff; box-shadow: 0 0 .8rem var(--glow); cursor: default; }
.qa__sum { display: flex; align-items: flex-start; gap: 1.6rem; padding: 1.6rem; background: #fff; }
.qa__mark { width: 1.7rem; flex: none; font-family: var(--en); font-weight: 400; font-size: 1.8rem; line-height: 2.5rem; letter-spacing: .03em; text-align: center; text-transform: uppercase; color: var(--cyan); }
.qa__q { width: 26.8rem; font-size: 1.4rem; font-weight: 800; line-height: 2.4rem; }   /* 本文_ExBold */
.qa__body { display: flex; gap: .8rem; padding: 1.6rem; background: rgba(255, 255, 255, .6); }
.qa__body .qa__mark { color: var(--pink); }
.qa__a { width: 31.2rem; font-size: 1.4rem; line-height: 2.4rem; }
.qa__a b { font-weight: 800; }
.qa__a a { font-weight: 800; color: var(--pink); text-decoration: underline; }   /* 色は変数 pink（写しの #3a3d5a は古い） */

/* ---- COMING SOON（Comingsoon [134:2090]）------------------------------- */
.soon { display: flex; justify-content: space-evenly; align-items: center; gap: 1.4rem; width: 100%; height: 12rem; padding: 3.8rem 1.2rem 3.7rem; background: rgba(255, 255, 255, .8); box-shadow: 0 0 .8rem var(--glow); }
.soon__txt { font-family: var(--en); font-weight: 400; font-size: 2.6rem; line-height: 2.6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pink); white-space: nowrap; }
.soon__l { width: 3.6rem; height: 4.478rem; }
.soon__r { width: 3.5rem; height: 4.354rem; }

/* ---- お問い合わせ ---------------------------------------------------------- */
.contact__btns { display: flex; flex-direction: column; gap: 2.4rem; }

/* ---- フッター（QA/footer [76:2627]）------------------------------------- */
.ft { margin-top: 12rem; }
.ft__main { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 6.4rem; padding: 4rem 1.2rem 6.4rem; min-height: 48.5rem; }   /* 白い山形（485px）の下端にコピーライトの帯を付ける。2026-10-28 の SNS のボタン化で中身が 446px に縮んだため */
/* 白い山形（Share [76:2501] の影 shadow_pink は、中身＝山形の輪郭に沿って出る。drop-shadow は Figma のぼかしの半分の値） */
.ft__main::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url(/assets/images/footer_shape.svg) no-repeat 0 0 / 39.3rem auto; filter: drop-shadow(0 0 .4rem var(--glow)); }
.ft__share { display: flex; flex-direction: column; align-items: center; gap: 3.2rem; }
.ft__share-ttl { font-family: var(--en); font-weight: 400; font-size: 2.6rem; line-height: 2.6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pink); }
/* SHARE・SNS の文字のボタン（2026-10-28 のデザインでアイコンから変更。tag [388:5331]）。PC 左の SHARE も 2026-10-30 先方指示で同じボタンに（.fig の PC はアイコンのまま）: 77×30・角丸・ピンク・白の枠・グロウ */
.ft__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.ft__tags a { display: flex; justify-content: center; align-items: center; width: 7.7rem; height: 3rem; padding: .8rem .6rem; background: var(--pink); border: 1px solid #fff; border-radius: 10rem; box-shadow: 0 0 .8rem var(--glow); font-family: var(--en); font-weight: 400; font-size: 1.2rem; line-height: 1.2rem; color: #fff; white-space: nowrap; }
.ft__sns { display: flex; flex-direction: column; align-items: center; gap: 4rem; width: 36.1rem; }
.ft__sns-ttl { display: flex; justify-content: center; align-items: center; gap: .8rem; font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; }
.spark { width: 1.4rem; height: 1.4rem; }
.ft__copy { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; height: 5.2rem; padding: 1.6rem; background: var(--pink); font-size: 1.2rem; font-weight: 800; line-height: 2rem; color: #fff; }

/* ---- 下層ページ（news [169:5853] / news/xxx [170:8704]。404 はデザイン無し＝記事の枠で構成）---------- */
.page--sub main > .sec:first-child { margin-top: 11.2rem; }   /* ヘッダー 48 ＋ 64 */
.page--sub #contact { margin-top: 12rem; }   /* TOP の #contact（8.5rem）より優先させる */
.page--sub .ft { margin-top: 8rem; }
.news__kv { width: 36.9rem; height: 20.698rem; object-fit: cover; }
.article { display: flex; flex-direction: column; gap: 2.4rem; width: 36.9rem; padding: 1.6rem; background: rgba(255, 255, 255, .6); border: 1px solid #fff; }
.article__thumb { width: 33.5rem; height: 18.791rem; object-fit: cover; }
.article .nw__date { color: var(--pink); }
.article__title { font-size: 1.6rem; font-weight: 800; line-height: 2.7rem; overflow-wrap: anywhere; }
/* 題名と本文の間の点線（2 描いて 4 空ける。左端を Figma に合わせた。Figma は両端に合わせて間隔を少し詰めるので右端は 1px ずれる） */
.article__line { height: 2px; margin: -1px 0; border: 0; background: repeating-linear-gradient(90deg, var(--pink) 0 2px, transparent 2px 6px) -1px 0; }
/* 本文（microCMS のリッチエディタの HTML）: 見出し＝本文_ExBold、段落＝本文_Medium。見出しと次の段落は 8px、まとまりの間は 24px */
.article__body { font-size: 1.4rem; line-height: 2.4rem; overflow-wrap: anywhere; }
.article__body > * { margin: 0; }
.article__body > * + * { margin-top: 2.4rem; }
.article__body :is(h1, h2, h3, h4, h5, h6) { font-size: 1.4rem; font-weight: 800; line-height: 2.4rem; }
.article__body :is(h1, h2, h3, h4, h5, h6) + * { margin-top: .8rem; }
.article__body strong, .article__body b { font-weight: 800; }
.article__body a { font-weight: 800; color: var(--pink); text-decoration: underline; }
.article__body img { width: 100%; height: auto; }
.article__body :is(ul, ol) { padding-left: 1.5em; }
.article__body ul { list-style: disc; }
.article--404 { align-items: center; text-align: center; }
.nf__en { font-family: var(--en); font-weight: 400; font-size: 2.6rem; line-height: 2.6rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pink); }

/* ---- PC の外枠 ----------------------------------------------------------------
 * 画面の幅・高さを変えたときの動きは めておら学園祭 LP（meteorites-fanmeeting2026.stpr.com）に合わせた
 *   600px〜  : 中央に 393px の列＋左右の縦帯（参考 LP は 768px 以下で中央の列だけだが、帯は幅 40px で収まるので出す＝2026-10-26 ユーザー判断）
 *   1025px〜 : 左右のパネルも出す（参考 LP は 1024px 以下で左右の中身を隠す）
 * 左右のパネルは「縦帯の外側の空き領域」の中に割合で置く。1440px ではデザインの位置と一致し、幅が変われば領域と一緒に動く。
 * 領域の幅・画面の高さに入りきらないときは main.js が縮める（--s）。縦帯との間 40px・画面の端との間 24px は必ず空ける（main.js が寄せる） */
.pc-bar, .pc-side { display: none; }
@media (min-width: 600px) {
  body { background: linear-gradient(-40.42deg, #ffbced 14.83%, #ffd7e0 50%, #fff4dc 84.83%) fixed; }
  body::before { content: ""; position: fixed; inset: 0; background: url(/assets/images/bg_pc.webp) no-repeat center / cover; pointer-events: none; }
  .page { width: 39.3rem; margin: 0 auto; }
  .hd { left: 50%; width: 39.3rem; transform: translateX(-50%); }
  .gnav { left: 50%; right: auto; width: 39.3rem; transform: translateX(-50%); }
  .fab { right: calc(50% - 19.65rem + .8rem); }
  /* 縦帯（Frame 290460 / 290461）: 幅 40・白 80%。左は上から下へ、右は下から上へ読む */
  .pc-bar { position: fixed; z-index: 20; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 4rem; background: rgba(255, 255, 255, .8); box-shadow: 0 0 .8rem var(--glow); }   /* 影 shadow_pink。overflow: hidden だと影が切れるので外した（縦書きの文字は帯に収まる） */
  .pc-bar--l { right: calc(50% + 19.65rem); }
  .pc-bar--r { left: calc(50% + 19.65rem); }
  /* 2026-10-30 会場名を正式名称（Zepp Namba (OSAKA) など）にして文字列が約 45 文字ぶん（2rem で 897px）に伸びたため、画面の高さに入りきらないときだけ文字を縮める。
   * 間隔・✦ も em にして一緒に縮める（2rem のときの見た目は変えていない） */
  .pc-bar__in { display: flex; align-items: center; gap: 1.2em; writing-mode: vertical-rl; font-family: var(--en); font-weight: 400; font-size: min(2rem, calc((100vh - 4rem) / 45)); line-height: 1em; letter-spacing: .03em; text-transform: uppercase; color: var(--glow); white-space: nowrap; }
  .pc-bar__in .n { text-transform: none; }
  .pc-bar--r .pc-bar__in { transform: rotate(180deg); }
  .pc-bar__in img { width: .7em; height: .7em; }
  .pc-bar__in .x3 { display: flex; flex-direction: row; gap: .8em; }   /* 縦書きの中では row が縦方向 */
}
/* TICKET ボタン: 右の縦帯の外側の余白に収まる幅（帯の外 143px＝ボタン 127＋右 16）からは列の外・画面の右下に出す。
 * 758px 以下は余白が足りないのでスマホと同じく列の中に浮かせる */
@media (min-width: 759px) {
  .fab { right: 1.6rem; }
}
@media (min-width: 1025px) {
  .fab { display: none; }   /* 右のパネルに同じ行き先の「チケット情報」ボタンがあるので出さない（列の中の文字に重なるため。2026-10-26 ユーザー指摘） */
  /* 左右のパネル（Frame 290463 / 290464）。領域＝画面の端〜縦帯。1440px のデザインで、パネルの中心は
   * 左が領域の 54.19%（x=262 / 483.5）、右が 39.40%（(1147-956.5) / 483.5）、上下は画面の中央 */
  .pc-side { position: fixed; z-index: 20; top: 0; bottom: 0; display: block; width: calc(50% - 19.65rem - 4rem); pointer-events: none; }
  .pc-side--l { left: 0; }
  .pc-side--r { right: 0; }
  .pc-side__in { position: absolute; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 4rem; transform: translate(-50%, -50%) scale(var(--s, 1)); pointer-events: auto; }
  .pc-side--l .pc-side__in { left: 54.19%; width: 28.4rem; }
  .pc-side--r .pc-side__in { left: 39.4%; width: 22rem; }
  .pc-side__logo { width: 28.4rem; height: 13.285rem; object-fit: cover; }
  .pc-share { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
}