:root {
    /* 初期値。実際の色は管理画面「基本設定」から layout.php が上書きする */
    --content-bg: #1a1a1a;
    --bg: #1a1a1a;
    --surface: #262626;
    --text: #ffffff;
    --muted: #b3b3b3;
    --line: #3d3d3d;
    --accent: #e0566a;
    --accent-text: #fff;
    --accent-strong: #8b1e2d;
    --link: #ff3300;
    --menu-bg: #000000;
    --info-bg: #1c2733;
    --error-bg: #3a1f22;
    --success-bg: #1d3221;
}
/* 外枠（旧サイトと同じ黒地＋左メニュー）。旧ページの見た目を変えないよう、本文の装飾は .main--native の中だけに効かせる */
body { margin: 0; background: var(--menu-bg); }
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
/* 本文側の body 指定（文字サイズなど）がメニューに移らないよう、フレームだった頃の既定値に固定する */
.side { font-size: 16px; line-height: normal; font-family: initial; flex: 0 0 var(--menu-w, 150px); width: var(--menu-w, 150px); position: sticky; top: 0; max-height: 100vh; overflow-y: auto; background: var(--menu-bg); }
.side-extra { padding: 12px 6px; font-size: 13px; line-height: 1.6; }
.side-extra a { color: #ff3300; }
.main { flex: 1 1 auto; min-width: 0; min-height: 100vh; }
.legacy-content { overflow-x: auto; background-color: var(--content-bg); color: var(--text); }
.legacy-content a:link { color: var(--link); }
.legacy-content img { max-width: 100%; height: auto; }
.m-bar { display: none; }
@media (max-width: 760px) {
    .shell { display: block; }
    .m-bar { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 50; background: #000; padding: 6px 12px; border-bottom: 1px solid #333; }
    .m-bar img { display: block; height: 36px; width: auto; }
    .m-menu-btn { background: none; border: 1px solid #888; color: #fff; border-radius: 4px; padding: 6px 12px; font: 600 14px/1 sans-serif; letter-spacing: .1em; }
    .side { position: static; width: auto; max-height: none; padding: 8px 12px 16px; border-bottom: 1px solid #333; }
    .side img { max-width: 100%; height: auto; }
    .has-js .side:not(.is-open) { display: none; }
    .main { min-height: calc(100vh - 49px); }
    .legacy-content table { max-width: 100%; }
}

.main--native { background: var(--bg); color: var(--text); font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; line-height: 1.7; }
/* 本文が短いページでも、フッターを画面のいちばん下に置く */
.main--native { display: flex; flex-direction: column; }
@media (min-width: 761px) { .main--native { min-height: 100vh; } }   /* スマホは上に帯があるので、画面の高さに合わせない */
.main--native > .container { flex: 1 0 auto; width: 100%; }
/* サイト全体の背景画像（基本設定の「サイト全体の背景画像」）。画面いっぱいに広げて固定。本文の面は少しだけ透かす */
.main--native.has-site-bg { background: var(--bg) var(--site-bg) center center / cover no-repeat fixed; }
.has-site-bg .page-body { background: color-mix(in srgb, var(--page-surface, #ffffff) 90%, transparent); }
.main--native * { box-sizing: border-box; }
.main--native a:where(:not([class])) { color: var(--link); }
.container { max-width: 880px; margin: 0 auto; padding: 0 16px; }
.main--native > .container { padding-top: 24px; padding-bottom: 48px; }
/* 共通のフッター（front/partials/footer.php）。事務所の名前・住所・メールは管理画面の基本設定から。色は基本設定の配色から */
.site-footer { margin-top: 32px; border-top: 3px solid var(--accent-strong, #8b1e2d); background: color-mix(in srgb, var(--bg, #1a1a1a) 82%, #000000); color: var(--muted, #aaaaaa); font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; font-size: .875rem; line-height: 1.7; }
.site-footer *, .site-footer *::before { box-sizing: border-box; }
.site-footer__inner { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1160px; margin: 0 auto; padding: 32px 20px 24px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 2px; }
.site-footer__site { color: var(--text, #ffffff); font-size: 1.5rem; font-weight: 800; letter-spacing: .18em; line-height: 1.2; }
.site-footer__name { color: var(--accent, #dd6071); font-size: .9rem; font-weight: 700; letter-spacing: .12em; }
.site-footer__address { display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; }
.site-footer__address address { font-style: normal; }
.site-footer__address:hover, .site-footer__address:focus-visible { color: var(--text, #ffffff); }
.site-footer__icon { flex: none; width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: -.25em; }
.site-footer__address .site-footer__icon { margin-top: .2em; color: var(--accent, #dd6071); }
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.site-footer__mail { display: inline-flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; }
.site-footer__mail .site-footer__icon { color: var(--accent, #dd6071); }
.site-footer__mail:hover, .site-footer__mail:focus-visible { color: var(--text, #ffffff); }
.site-footer__button { display: inline-flex; gap: 6px; align-items: center; padding: 9px 18px; border: 1px solid var(--accent, #dd6071); border-radius: 999px; color: var(--text, #ffffff); font-weight: 700; text-decoration: none; transition: background-color .2s ease; }
.site-footer__button:hover, .site-footer__button:focus-visible { background: var(--accent-strong, #8b1e2d); }
.site-footer__copy { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line, #333333); color: var(--muted, #888888); font-size: .75rem; letter-spacing: .08em; text-align: center; }
@media (min-width: 760px) {
    .site-footer__inner { grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; padding: 36px 32px 28px; }
    .site-footer__contact { justify-content: flex-end; }
}
.main--native h1 { font-size: 1.6rem; margin: 0 0 16px; }
.main--native h2 { font-size: 1.2rem; margin: 32px 0 12px; }
.muted { color: var(--muted); }
.meta { color: var(--muted); margin: 4px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.performance-list { list-style: none; padding: 0; }
.performance-list a { text-decoration: none; color: inherit; display: block; }
.performance-list h2 { margin: 0; color: var(--accent); }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { border-bottom: 1px solid var(--line); padding: 8px; text-align: left; vertical-align: top; }
.num { text-align: right; white-space: nowrap; }
.btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 6px; text-decoration: none; cursor: pointer; font: inherit; }
.btn-primary { background: var(--accent-strong); color: var(--accent-text); }
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.alert-info { background: var(--info-bg); }
.alert-error { background: var(--error-bg); }
.alert-success { background: var(--success-bg); }
.form fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 16px; padding: 16px; background: var(--surface); }
.form legend { font-weight: 700; padding: 0 4px; }
.form label { display: block; margin-bottom: 12px; }
.form label.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.form input[type=text], .form input[type=email], .form input[type=tel] { display: block; width: 100%; padding: 8px; margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.form select { padding: 6px; font: inherit; }
.req { font-size: .75rem; color: var(--accent); }
.field-error { color: var(--accent); margin: -8px 0 12px; font-size: .9rem; }
.code { font-size: 1.4rem; letter-spacing: .1em; }
@media (max-width: 600px) {
    .showtimes td, .showtimes th { padding: 6px 4px; font-size: .92rem; }
}

/* コーナー（公演・えん魔伝説など）の中のメニュー。本文の上に横に並べる。色は基本設定から */
.section-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    margin: 0 0 18px; padding: 10px 14px;
    background: var(--surface); border-left: 4px solid var(--accent); border-radius: 4px;
    font-size: 14px; line-height: 1.5; text-align: left;
}
.section-bar__title { font-weight: 700; color: var(--text); }
.section-bar ul { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.section-bar a {
    display: inline-block; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
    color: var(--text) !important; text-decoration: none; background: transparent;
}
.section-bar a:hover, .section-bar a:focus-visible { border-color: var(--accent); }
.section-bar a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.legacy-content > .section-bar { margin: 12px 12px 18px; }

/* 旧サイトの白地向けの透過画像（黒い文字の GIF など）は、黒地でも読めるよう下地を敷く（App\Services\DarkGraphics が印を付ける。色は基本設定） */
.is-dark-graphic {
    background: var(--graphic-bg, transparent);
}

/* 管理画面「メニュー」で作った左メニュー（App\Services\SideMenu）。旧メニューと同じ幅 140px の画像ボタンを縦に並べる */
.side--edited { padding: 3px 15px 16px; }
.side-menu { list-style: none; margin: 0; padding: 0; }
.side-menu li { margin: 0 0 3px; }
.side-menu__button { position: relative; display: inline-block; vertical-align: top; }
.side-menu__button img { display: block; max-width: 100%; height: auto; }
.side-menu__hover { position: absolute; inset: 0; opacity: 0; }
.side-menu a:hover .side-menu__hover, .side-menu a:focus-visible .side-menu__hover { opacity: 1; }
.side-menu a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.side-menu__text { display: block; padding: 4px 6px 4px 1px; font: 13px/1.6 "Hiragino Sans", "Noto Sans JP", sans-serif; color: var(--link); }
a.side-menu__text:hover { text-decoration: underline; }
.side-menu__text[aria-current] { font-weight: 700; }
.side-menu__line { height: 0; margin: 10px 0; border-top: 1px solid #808080; }
/* リンクの無い画像（いちばん上のロゴ）は、メニューの左右の中央に置き、上下に 15px あける */
.side--edited .side-menu__plain:has(img) { display: flex; justify-content: center; margin: 0 0 3px; padding: 15px 0; }
/* 文字のボタン（英語を Impact で。マウスを乗せると日本語に入れ替わる）。Impact の無い端末（スマホなど）は同じ形の Anton（assets/fonts） */
@font-face { font-family: "FantomaImpact"; src: local("Impact"), local("Impact Regular"), url("/assets/fonts/anton-latin.woff2") format("woff2"); font-display: swap; }
.side-menu__word { position: relative; display: block; height: 34px; margin: 0; overflow: hidden; background: #000000; color: #ffffff; text-decoration: none; }
.side-menu__word::before, .side-menu__word::after { content: ""; position: absolute; width: 10px; height: 18px; border: 0 solid currentColor; transition: border-color .2s ease; z-index: 1; }
.side-menu__word::before { top: 4px; left: 2px; border-width: 3px 0 0 3px; }
.side-menu__word::after { right: 2px; bottom: 4px; border-width: 0 3px 3px 0; border-color: var(--accent, #dd6071); }
.side-menu__en, .side-menu__ja { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 14px; white-space: nowrap; }
.side-menu__en { font: 400 26px/1 "FantomaImpact", Impact, "Arial Narrow", sans-serif; letter-spacing: -.01em; text-transform: uppercase; transition: transform .18s cubic-bezier(.6, 0, .9, .4), opacity .18s ease; }
.side-menu__ja { background: #ffffff; color: #000000; font: 900 19px/1 "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; letter-spacing: 0; transform: translateX(-110%) skewX(-24deg); }
/* マウスを乗せたとき: 英語は右へはじき出し、日本語はアクセント色で叩きつけるように左から入って白に落ち着く */
.side-menu__word:hover .side-menu__en, .side-menu__word:focus-visible .side-menu__en { transform: translateX(120%) skewX(-24deg); opacity: 0; }
.side-menu__word:hover .side-menu__ja, .side-menu__word:focus-visible .side-menu__ja { animation: side-word-in .42s cubic-bezier(.2, 1.5, .35, 1) forwards; }
.side-menu__word:hover::after, .side-menu__word:focus-visible::after { animation: side-word-corner .42s ease-out; }
@keyframes side-word-in {
  0% { transform: translateX(-110%) skewX(-24deg); background: var(--accent-strong, #8b1e2d); color: #ffffff; }
  45% { transform: translateX(6%) skewX(8deg); background: var(--accent-strong, #8b1e2d); color: #ffffff; }
  70% { transform: translateX(-2%) skewX(-3deg); background: #ffffff; color: #000000; }
  100% { transform: translateX(0) skewX(0); background: #ffffff; color: #000000; }
}
@keyframes side-word-corner {
  0% { transform: translate(0, 0); }
  40% { transform: translate(4px, 3px) scale(1.3); }
  100% { transform: translate(0, 0); }
}
.side-menu__word:hover::before, .side-menu__word:focus-visible::before { border-color: #000000; }
.side-menu__en-alt { color: #cccccc; }
.side-menu__word[aria-current] .side-menu__en { color: var(--accent, #dd6071); }
.side-menu__word[aria-current] .side-menu__en-alt { color: color-mix(in srgb, var(--accent, #dd6071) 80%, #000000); }
.side-menu__word:focus-visible { outline: 2px solid var(--accent, #dd6071); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .side-menu__en { transition: none; }
  .side-menu__word:hover .side-menu__ja, .side-menu__word:focus-visible .side-menu__ja { animation: none; transform: none; }
  .side-menu__word:hover::after, .side-menu__word:focus-visible::after { animation: none; }
}
/* 左メニューの幅は余白込み（基本設定の「左メニューの幅」がそのまま全体の幅になる） */
.side--edited { box-sizing: border-box; }
/* バナー（枠つきの画像）: メニューの幅いっぱい。ACT cafe へのバナーなど */
.side-menu__banner { display: block; margin: 12px 0 4px; padding: 4px; border: 2px solid var(--accent-strong, #8b1e2d); border-radius: 6px; background: #000000; transition: border-color .2s ease, transform .2s ease; }
.side-menu__banner-img { display: block; width: 100%; height: auto; border-radius: 3px; }
a.side-menu__banner:hover, a.side-menu__banner:focus-visible { border-color: var(--accent, #dd6071); transform: translateY(-1px); }
@media (max-width: 760px) {
    .side--edited { padding: 8px 15px 16px; }
    .side-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 12px; }
    .side-menu li { margin: 0; }
    .side-menu__line { grid-column: 1 / -1; margin: 6px 0; }
    .side-menu__plain:has(img), .side--edited .side-menu__plain:has(img) { display: none; }
    .side-menu li:has(.side-menu__banner) { grid-column: 1 / -1; max-width: 320px; }
    .side-menu__banner { margin: 8px 0 0; }
}

/* ACT cafe のサブドメイン: 左メニューなし、上に ACT cafe のメニュー */
.shell--act { display: block; }
.shell--act .main { min-height: calc(100vh - 64px); }
.act-header { position: sticky; top: 0; z-index: 50; background: #000; font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; line-height: 1.7; }
.act-header .section-bar { margin: 0; border: 0; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
.act-header .section-bar__title { color: #fff; }
.act-header .section-bar a { color: #fff; }
@media (max-width: 760px) { .act-header { position: static; } }

/* チケット予約フォーム（/tickets/〜） */
.ticket-form { max-width: 720px; }
.ticket-form h1 { font-size: 1.4rem; }
.ticket-steps { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 0 0 16px; color: var(--muted); font-size: .9rem; }
.ticket-steps li + li::before { content: '＞'; margin-right: 16px; }
.ticket-steps .is-current { color: var(--text); font-weight: 700; }
.ticket-form__intro { margin-bottom: 12px; }
.ticket-form__zip { max-width: 12em; }
.ticket-stages { display: grid; gap: 6px; }
.form label.ticket-stage { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.ticket-stage > input { grid-row: 1 / span 3; }
.form label.ticket-stage:has(input:checked) { border-color: var(--accent); }
.ticket-stage.is-closed { opacity: .55; cursor: not-allowed; }
.ticket-stage__note { color: var(--accent); font-size: .9rem; font-weight: 700; }
.ticket-stage__note, .ticket-stage__memo { grid-column: 2; }
.ticket-stage__memo { color: var(--muted); }
.form textarea { display: block; width: 100%; padding: 8px; margin-top: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; box-sizing: border-box; }
.ticket-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ticket-stage-list { margin: 0; padding-left: 1.2em; }
.ticket-stage__seats { grid-column: 2; color: var(--muted); }
.ticket-stage__seats b { color: var(--accent); }

/* ステージの選択: 小さい丸だけでは押すものと分かりにくい、と言われたため大きなカードにする */
.form label.ticket-stage { padding: 14px 16px; gap: 4px 14px; border-width: 2px; background: var(--bg); transition: border-color .15s, background-color .15s; }
.form label.ticket-stage:not(.is-closed):hover { border-color: var(--accent); }
.ticket-stage > input[type=radio] { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; margin: 0; border: 2px solid var(--muted); border-radius: 50%; background: var(--surface); display: grid; place-items: center; align-self: center; cursor: pointer; }
.ticket-stage > input[type=radio]::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .12s; }
.ticket-stage > input[type=radio]:checked { border-color: var(--accent); }
.ticket-stage > input[type=radio]:checked::before { transform: scale(1); }
.ticket-stage > input[type=radio]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.form label.ticket-stage:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.ticket-stage__name { font-size: 1.05rem; font-weight: 700; }
.ticket-stages__hint { margin: 0 0 8px; font-size: .9rem; color: var(--muted); }

/* メールフォーム（/contact/〜） */
.contact-form__help { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; }
.contact-form__field { margin-bottom: 12px; }
.contact-form__label { display: block; }
.contact-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.contact-form__pair label { margin: 0; }
.contact-form select { display: block; width: 100%; max-width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form fieldset.contact-form__choices { border: 0; padding: 0; margin: 0 0 12px; background: none; }
.contact-form__choices legend { padding: 0; font-weight: 400; }
.contact-form__options { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; }
.contact-form__options--list { display: grid; gap: 6px; }
.form label.contact-form__option { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.form label.contact-form__option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.contact-form__option input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.contact-form__date { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.contact-form__date label { margin: 0; }
.contact-form__date input { width: 5.5em !important; }
.contact-form__date select { width: auto !important; display: inline-block !important; margin: 0 !important; }
.contact-form__zip { max-width: 10em; }

/* トップページの最初の文字の演出（front/partials/intro.php）。JavaScript が動くときだけ出す（html.is-intro）。
   黒い幕（85% の黒）の上に 2 枚の文字を出し、文字が消えてから幕が上へ抜けて本文が出る */
.intro { display: none; }
.is-intro .intro { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0, 0, 0, .85); cursor: pointer; }
.is-intro body { overflow: hidden; }
.intro__phrase { position: absolute; left: 0; top: 50%; width: 100vw; display: flex; flex-direction: column; align-items: center; opacity: 0;
    color: #ffffff; font-family: "FantomaImpact", Impact, "Arial Narrow", sans-serif; font-weight: 400; line-height: .84; text-transform: uppercase; white-space: nowrap;
    transform: translateY(-50%) scaleY(var(--intro-scale, 1)) scale(1.08); transform-origin: center center; }
.intro__line { display: block; letter-spacing: -.01em; }
/* 文字の形に画像を切り抜いて見せる */
.intro__phrase--image { background: var(--intro-img) center center / cover no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro__phrase.is-on { animation: intro-hit .65s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes intro-hit {
  0% { opacity: 0; transform: translateY(-50%) scaleY(var(--intro-scale, 1)) scale(1.18); }
  18% { opacity: 1; transform: translateY(-50%) scaleY(var(--intro-scale, 1)) scale(1); }
  80% { opacity: 1; transform: translateY(-50%) scaleY(var(--intro-scale, 1)) scale(.98); }
  100% { opacity: 0; transform: translateY(-50%) scaleY(var(--intro-scale, 1)) scale(.96); }
}
/* 文字が消えたあと、幕が上へ抜けて本文が出る */
.intro.is-out { transform: translateY(-100%); transition: transform .38s cubic-bezier(.7, 0, .3, 1); pointer-events: none; }
.intro.is-out .intro__phrase { display: none; }