@charset "utf-8";

/* =========================
   Root & base
   ========================= */
:root{
  --frame-size: 20px;             /* 枠の太さ */
}
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 50px; }

/* 画面のいちばん上に枠を重ねる */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
  background: linear-gradient(
    to right,
    #e36ca4 0%,
    #e36ca4 50%,
    #fdeb1d 50%,
    #fdeb1d 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: var(--frame-size);
  opacity: 0;                       /* ← 最初は見えない */
  transition: opacity .3s ease;     /* フェード */
}
/* HEROを抜けたら（JSで .has-frame を付ける）見える */
body.has-frame::before { opacity: 1; }
/* モバイルは細め or オフで圧迫感を軽減 */
@media (max-width: 768px){ :root{ --frame-size: 6px; } }
@media (max-width: 480px){ :root{ --frame-size: 0; } }
/* 印刷時は非表示 */
@media print{ body::before{ display:none; } }

@media print { .nocopy { display: none !important; } }


/* 該当要素のみテキスト選択不可（アクセシビリティを考え限定的に） */
.nocopy { -webkit-user-select: none; user-select: none; }
/* iOSの長押しメニュー抑止（画像など） */
.nocopy, .nocopy img { -webkit-touch-callout: none; }

/* ===== ベース ===== */
body {
  margin: 0; padding: 0;
  color: #333;
  font-family: 'Jost','BIZ UDGothic',"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;
  line-height: 1.7; font-size: 1rem;
}
main,#history,#story, #tickets { background: url("../img/noise_whitegrain.jpg") repeat #fdf9f2;}
#intro  {
  background: linear-gradient(
    to right,
    #e36ca4 0%,
    #e36ca4 50%,
    #fdeb1d 50%,
    #fdeb1d 100%
  );
}
nav,h2 {font-family: Bebas,sans-serif;}
#history h2{font-family: 'Jost','BIZ UDGothic',"Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3","メイリオ",sans-serif;}
p { line-height: 1.75; }
#intro p { background: url("../img/noise_whitegrain.jpg") repeat #fdf9f2;padding: 0.5em; }

.pink{color:#e36ca4;}
.yellow{color:#fdeb1d;}
span.marker--pink  { background: #e36ca4; color: #fff; padding: 0 .5em;}
span.marker--yellow{ background: #fdeb1d; color: #222; padding: 0 .5em;}

h1, h2, h3, h4 { line-height: 1.5; }

/* ===== レイアウト ===== */
#wrapper{ width:100%; }
.panel{ position:relative; overflow:hidden; }
.container {
  width: 100%; max-width: 1000px;
  margin: 0 auto; padding: 0;
  position: relative; z-index: 1;
}
@media (max-width: 900px){ .container { max-width: 90%; padding: 0; margin: auto; } }

/* =========================
   Header / Nav
   ========================= */
/* 初期は透過（HEROの上に載せる用） */
header{
  position: sticky; top: 0;
  z-index: 1500;
  background: transparent;
  color: #fff;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

/* ロゴ／ナビは親の色を継承させておく */
.logo a, .logo a:visited { color: inherit; }
.site-nav a { color: inherit;   text-shadow:
    1px 1px 0 #fff,
   -1px 1px 0 #fff,
    1px -1px 0 #fff,
   -1px -1px 0 #fff;}
.site-nav a:last-child{margin-right: 30px;}

.site-nav a:hover { background: rgba(255,255,255,.12); }

@media (max-width: 900px){
  .nav-toggle-bar{ background: currentColor; }
}

/* ヒーローを抜けたら “白ベース＋ブラー＋ダーク文字” に切替 */
header.is-solid{
  backdrop-filter: saturate(120%) blur(8px);
  color: #333;
}
header.is-solid .site-nav a:hover{ background: rgba(0,0,0,.06);border-radius: 30px; }

/* モバイルの全画面メニューは既存のまま */
header .bar {
  display: flex; justify-content: flex-end;align-items: center; gap: 12px;
  min-height: 56px; padding:5px 15px;
}

/* 固定ロゴ（SVG・左上） */
@media (min-width: 901px) {
  .logo-fixed {
    position: fixed; top: 20px; left: 32px;
    opacity: 0; transform: translateY(-10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    z-index: 1600; pointer-events: none;
  }
  header.is-solid ~ .logo-fixed {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .header-logo-img { width: 140px; height: auto; display: block; }
  .logo-fixed a:hover .header-logo-img { transform: scale(1.04); transition: transform 0.3s ease; }
}
@media (max-width: 900px) { .logo-fixed { display: none !important; } }

/* PCナビ */
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 20px;}
.site-nav a {
  text-decoration: none; color: #333; font-size: 14px;
  padding: 6px 8px; border-radius: 6px;
}
.site-nav a:hover { background: rgba(0,0,0,.06); }

/* ハンバーガー */
.nav-toggle {
  appearance: none; border: 0; background: transparent; padding: 8px; border-radius: 8px;
  display: none; cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.nav-toggle-bar {
  display: block; width: 24px; height: 2px; background: #000; margin: 5px 0;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-open .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
.nav-open .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* モバイルナビ（オーバーレイ） */
@media (max-width: 900px){
  .nav-toggle{ display: inline-block; }
  .site-nav{ display: none; }
  .lock-scroll, .lock-scroll body { height: 100%; overflow: hidden; }

  .site-nav-panel {
    position: fixed; inset: 0;
    background: #eee9e3;
    place-items: center;
    width: 100vw; height: 100vh;
    opacity: 0; transform: scale(.98);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
    z-index: 2000;
  }
  .site-nav-panel.open { opacity: 1; transform: scale(1); pointer-events: auto; }

  .site-nav-panel-inner {
    width: 90%; max-width: 340px; margin: auto;
    padding:110px 0 0 0; text-align: center; justify-items: center;
  }
  .site-nav-panel-inner a {
    display: block; font-size: 18px; padding: 14px 8px;
    text-decoration: none; color: #333; border-radius: 10px;
  }
  .site-nav-panel-inner a:hover { background: rgba(0,0,0,.06); }

  .nav-close{
    position: absolute; top: 16px; right: 16px;
    min-width: 44px; min-height: 44px;
    padding: 8px 12px; border: 1px solid #333;
    background: #333; color: #fff;
    border-radius: 30px; font-size: 20px; line-height: 1;
    cursor: pointer; z-index: 1002; pointer-events: auto;
  }
  .nav-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
}

/* =========================
   Sections & headings
   ========================= */
section { padding: 72px 0; }
@media (max-width: 480px){ section{ padding: 40px 0; } }
/* stacking context保険 */
main, section, .container, .h2-wrapper, h2 { position: relative; z-index: 0; }

/* H2 */
h2 {
  text-transform: uppercase; font-weight: 700; margin: 0 auto 2em; text-align: center;
  font-size: 1.2em; position: relative; width: fit-content; min-width: 100%;
  opacity: 0; transform: rotate(-2deg) translateY(12px) scale(.96);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  background-image: url("../svg/h2-bg.svg"); background-size: 260px;
  background-repeat: no-repeat; background-position: center top;
  padding-top:105px; min-height: 60px;
}

#tickets h2 {
  padding-top:115px; 
}


h2.is-visible { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
h2, h2.is-visible { z-index: 0 !important; }
@media (prefers-reduced-motion: reduce){ h2 { opacity: 1; transform: none; } h2 span { opacity: 1; transform: none; } }

/* デフォルト（スマホ・タブレット）は左揃え */
h3 { text-align: left; }
/* PCサイズ以上だけ中央揃え */
@media screen and (min-width: 1024px) { h3 { text-align: center; } }

span.marker {
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .25em;
}
@media (max-width: 900px){ h2{ font-size: 18px; background-size: 180px ;padding-top:85px;} #tickets h2 {
  padding-top:85px; 
}

}

.h2-wrapper{ position: relative; display:flex; justify-content:center; }
h2 span { opacity:0; display:inline-block; transform: translateY(20px); }
h2 span.show { animation: charUp .6s ease forwards; }
@keyframes charUp { to { opacity:1; transform: translateY(0); } }

.note{
  position:absolute; font-size: 1em; opacity:0; pointer-events:none;
  animation: note-float 1.2s ease-out forwards;
}
@keyframes note-float{
  0%{ transform:translate(0,0) scale(.8); opacity:0;}
  20%{ opacity:1;}
  100%{ transform:translate(var(--x,0), var(--y,-30px)) scale(1); opacity:0;}
}

.archive-link { text-align: center; margin: 2.5em auto; }

/* =========================
   共通ボタン（統合）
   ========================= */
/* ==== Box型ボタン 共通（open-modal-btn / story-toggle / staff-trigger）==== */
.open-modal-btn,
.story-toggle,
.staff-trigger {
  display: inline-block;
  position: relative;
  padding: 0.3em 1.6em;
  text-decoration: none;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.15s ease;
  user-select: none;
  border: solid 3px #333;
  background-clip: padding-box;
  box-shadow: 5px 5px 0 var(--btn-shadow, #555);
}
/* 共通の押し込み感 */
.open-modal-btn:active,
.story-toggle:active,
.staff-trigger:active { transform: translate(2px, 2px); }

/* 青ボタン：open-modal-btn / story-toggle */
.open-modal-btn,
.story-toggle {
  --btn-shadow: #1a5fb3;
  background: #2e86e6;
  color: #fff;
}
.open-modal-btn:hover,
.story-toggle:hover { background: #4b9df0; }
.open-modal-btn:active,
.story-toggle:active { background: #1d6ed0; }

/* グレーボタン：staff-trigger */
.staff-trigger {
  --btn-shadow: #555;
  background: #888;
  color: #fff;
  margin-top: .6rem;
}
.staff-trigger:hover { background: #999; }
.staff-trigger:active { background: #777; }
.staff-trigger:focus-visible { outline: 2px dashed #333; outline-offset: 2px; }
.staff-trigger:disabled { opacity: .5; cursor: not-allowed; }

/* 並び用 */
.btn-wrap a { margin-right: 10px; }

/* =========================
   CAST
   ========================= */
.cast-section { padding: 40px 0; position: relative; overflow: hidden;}
.cast-section::before {
  content: ""; position: absolute; inset: 0;
  background: url("../svg/pattern3.svg") repeat; background-size: 300px;
  opacity: 0.2; animation: floaty 40s linear infinite; pointer-events: none;
}
@keyframes floaty { from { background-position: 0 0; } to { background-position: 500px -500px; } }

.cast-grid{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding:0; margin:auto;}
.cast-card{overflow:hidden; position:relative;margin:auto;text-align: center;padding-bottom: 50px;}
.card-figure{margin:auto; position:relative;width:100%;max-width: 300px;}
.card-figure img{
  width:100%;max-width: 300px; height:auto; display:block;
  aspect-ratio:4/5; object-fit:cover; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.card-caption{padding:12px 14px 16px;}
.card-caption .role{margin:0 0 6px;font-size:.8rem;}
.card-caption .name{margin:0; line-height:1.15; font-weight:800; font-size:1.6rem}
.card-caption .name span{display:inline-block;font-weight:600;font-size: 0.85rem;}
.cast-card .comment-box{display:none !important;line-height: 1.6;}
.role-chip{padding:.14rem .2rem; border-radius:999px; font-size:.86rem;}
.role-chip.pink{background: #e36ca4; color: #fff; padding: 0 .5em;border-radius: 30px;}
.role-chip.yellow{background: #fdeb1d; color: #222; padding: 0 .5em;border-radius: 30px;}


/* 画像クリック用の透明リンク（画像全面がクリック対象に） */
.cast-figure-link{
  position:absolute; inset:0;
  display:block;
  text-indent:-9999px; /* 視覚的には消す（aria-labelで可読） */
  background: transparent;
  z-index: 3; /* figcaptionより上に */
  cursor: pointer;
}

/* ぬるっと拡大演出 */
.card-figure{ position:relative; overflow:hidden; } /* はみ出し非表示 */
.card-figure img{
  transition: transform .32s ease; will-change: transform;
}

/* ホバー時（マウス環境のみ）に軽くズーム */
@media (hover:hover) and (pointer:fine){
  .card-figure:hover img{ transform: scale(1.04); }
}

/* クリック時の一瞬のズーム強調（JSで付与/削除） */
.card-figure.is-zoom img{ transform: scale(1.06); }




@media (max-width:768px){
  .cast-grid{grid-template-columns:1fr;}
  .card-figure{max-width: 200px;}
  .card-figure img{width:100%;max-width: 200px;}
}

/* =========================
   Modal
   ========================= */
.modal-backdrop{position:fixed; inset:0; background:rgba(15, 17, 20, .55); backdrop-filter:saturate(140%) blur(6px); display:none; z-index:9998;}
.modal-backdrop[data-open="true"]{ display:block; }

.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  opacity:0; transform:translateY(8px) scale(.98);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
  z-index:9999;
  pointer-events:none;
}
.modal[data-state="open"]{
  opacity:1; transform:none;
  pointer-events:auto;
  visibility: visible;
}
.modal[data-state="closed"] {
  visibility: hidden;
  pointer-events: none;
}

.modal-dialog{
  background: #fff; color: #111;
  max-width: 960px; width: min(92vw, 960px); max-height: 88vh;
  border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.3);
  overflow: hidden; display: flex; flex-direction: column;
  transform: translateY(0); opacity: 1;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.7,.2,1);
  will-change: transform, opacity;
}
.modal-dialog.dragging { transition: none !important; }



/* コメント本文 */
.modal .comment { font-size: 0.9rem; }

/* プロフィール枠 */
.modal .profile {
  font-size: 0.8rem; padding: 0.5em;line-height: 1.4;
  margin-top: 10px; word-break: break-word; overflow-wrap: anywhere; hyphens: auto;
}
.modal .profile::before {
  content: "PROFILE";
  display: block;
  font-size: .72rem;
  letter-spacing: .08em;
  color: #fff;background: #777;border-radius: 12px;width:60px;padding: 0 0.8em;
  margin-bottom: 6px;
  opacity: .95;
}

/* ==============================
   モーダル閉じるボタン（.nav-closeに合わせた配色）
   ============================== */

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #333;
  background: #333;
  color: #fff;
  border-radius: 30px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1002;
  pointer-events: auto;
  transition: all 0.2s ease;
}

/* hover時の軽い反応 */
.close-btn:hover {
  background: #555;
  border-color: #222;
}

/* focus-visible対応 */
.close-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* 非表示状態（開閉アニメ制御） */
.modal[data-state="closed"] .modal-dialog {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}


/* 新しい構造 */
.modal-body{
  display:grid; grid-template-columns:320px 1fr; gap:18px;
  padding:3% 5%; overflow:auto; position:relative; margin: auto;
    background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
    url("../svg/pattern3.svg") repeat;
  background-size: 200px;
}
.modal-head{ }
.modal-text{ display:flex; flex-direction:column; text-align: justify; }
.modal .modal-title{ font-size: 1.6rem; padding-top: 5px;font-weight: 600;}
.modal .modal-title span { font-size: 0.8rem; }
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; color: #333;}
#castModal .role-chip{display: none;}
.modal-photo img {max-width: 320px;}
.comment p{font-size:.9rem; margin-top:12px; line-height: 1.5;background-color:rgba(255,255,255,0.85);padding: 0.5em;}



/* NEXT/PREV ページャは使わない（統一） */
.modal .pager { display: none !important; }

/* mobile */
@media (max-width:900px){
  .modal-body{grid-template-columns:1fr;}
.modal-photo {
  width: 200px;
  height:200px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  margin: 0 auto;
}

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

/* ensure CTA above overlay */
.open-modal-btn{position:relative; z-index:10}
.cast-card::after{pointer-events:none}

/* スマホ幅のcomment-boxサイズ（念のため） */
@media (max-width: 768px){
  .comment-box{ width: 90%; }
}

/* =========================
   STAFF
   ========================= */
.staff-section{ margin: auto; text-align: center; }

/* リストとカード */
.staff-grid {
  display: grid;
  grid-template-columns: 1fr; /* 縦1列固定 */
  gap: 1.2rem;
  margin:0;
  list-style: none;
  padding: 0;
}

.staff-card {margin:1rem 0 2rem;}
.staff-role span{
  font-size: .8rem; padding: 0 0.8em;
  color: #fff; background-color: #333;
  letter-spacing: .04em; border-radius: 30px;
}
.staff-name {
  font-size: 1.15rem; font-weight: 700; margin-top: .25rem;
}
.staff-name .small { font-size: .85rem; font-weight: 400; color: #555; }

/* スタッフ用：コメント余白（集約） */
.comment-box .comment-body p { margin: .6em 0; }
.comment-box .profile {
  margin-top: 1em;
  font-size: .9rem;
  line-height: 1.6;
  color: #444;
}

/* スタッフモーダル（テキスト1カラムに統一） */
.modal.modal--staff .modal-body { display: block; }
.modal.modal--staff .modal-text { padding: 8px 0 0; }
/* 見出し微調整 */
#staffModal .modal-title { margin-top: 6px; }
#staffModal .comment p { margin: .6em 0; }
/* ロールチップ（スタッフの色味固定） */
#staffModal .role-chip { background: #333; color: #fff; padding: 0 .6em; border-radius: 32px; }


/* ==============================
   STAFFボタン（base-btnを小型化）
   ============================== */
.staff-trigger.label-button {
  @apply base-btn; /* ← Tailwind使っていないなら、下のスタイルが優先される */
  display: inline-block;
  padding: 0.4em 1em;           /* 少し小さく */
  font-size: 0.9rem;            /* 他より小さめ */
  box-shadow: 3px 3px 0 #333;   /* 影を浅くして軽い印象に */
  border-width: 2px;            /* フチも少し細めに */
  transition: all 0.15s ease;
}

/* 押したときの沈み込みも軽く */
.staff-trigger.label-button:active {
  box-shadow: none;
  transform: translate(1px, 1px);
}

/* カラーバリエーション（他と同じ指定が有効） */
.staff-trigger.label-button.orange {
  --btn-shadow: #cc7a00;
  background: #ff9900;
  color: #111;
}
.staff-trigger.label-button.orange:hover { background: #ffad33; }
.staff-trigger.label-button.orange:active { background: #e08a00; }

/* スマホで押しやすく（少し大きめ） */
@media (max-width: 600px) {
  .staff-trigger.label-button {
    font-size: 1rem;
    padding: 0.6em 1.2em;
    box-shadow: 4px 4px 0 #333;
  }
}

/* ====== STAFF：コンテナ（1000px・白背景・黒縁） ====== */
#staff .staff-wrap{
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255,255,255,0.4);
  border: 1px solid #999;
  padding: 24px 28px;
  box-sizing: border-box;
}

/* ====== 共通カード調整 ====== */
#staff .staff-card{ min-width: 0; }

#staff .staff-role{
  /* 役職は背景なし・小さめ（名前より小さい） */
  margin-bottom: .28em;
}
#staff .staff-role > span{
  background: none !important;
  color: #333 !important;
  font-size: .85rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  letter-spacing: .02em;
  display: inline-block;
}

#staff .staff-name{
  font-size: 1rem !important;   /* 指定どおり */
  font-weight: 600;
  line-height: 1.4;
  color: #111;
  word-break: keep-all;
}

/* ====== グリッド：上段（主要） PC2 / SP1 ====== */
#staff .staff-grid--lead{
  display: grid;
  grid-template-columns: 1fr;      /* SP: 1列 */
  gap: 18px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px){
  #staff .staff-grid--lead{
    grid-template-columns: repeat(2, minmax(0,1fr)); /* PC: 2列 */
  }
}

/* ====== グリッド：下段（その他） PC4 / SP2 ====== */
#staff .staff-grid--rest{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));   /* SP: 2列 */
  gap: 18px 24px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;border-top: 1px solid #999;
}
@media (min-width: 768px){
  #staff .staff-grid--rest{
    grid-template-columns: repeat(4, minmax(0,1fr)); /* PC: 4列 */
  }
}



/* =========================
   Piano / Lede list
   ========================= */
.lede-list{
  margin: 3em auto 5em; text-align: center; font-size: 1.1rem; width: 100%;
}
.piano-role span{
  font-size: .8rem; padding: 0 0.8em; color: #222;
  background: linear-gradient(to right, #fdeb1d 0%, #fdeb1d 50%, #e36ca4 50%, #e36ca4 100%);
  letter-spacing: .04em; border-radius: 30px;
}
.piano-name { font-size: 1.15rem; font-weight: 700; margin-top: .25rem; }

/* =========================
   Tickets/Subnav
   ========================= */
#tickets ul.subnav {
  display: flex; flex-wrap: wrap; gap: 12px;
  list-style: none; padding: 0; margin: 1.5em 0; justify-content: center;
}
#tickets ul.subnav li { margin: 0; }
#tickets ul.subnav a { font-size: 0.9rem; }

.ticket-table {
  width: 96%; border-collapse: collapse; margin: 1.5em auto;
  font-size: 1rem; line-height: 1.4;
}
.ticket-table th, .ticket-table td {
  border-bottom: 1px solid #ccc; padding: 0.7em; text-align: left; vertical-align: top;
}
.ticket-table th { width: 20%; white-space: nowrap; }
.ticket-label{font-weight: 400;
  font-size:0.8rem; display: inline-block; min-width: 110px; letter-spacing: .04em;
  padding: 2px 6px; color: #fff; border-radius: 999px; background: #999; text-align: center; box-sizing: border-box;
}
/* レスポンシブ（スマホ時は縦並び） */
@media (max-width: 768px) {
  .ticket-table, .ticket-table thead, .ticket-table tbody, .ticket-table th, .ticket-table td, .ticket-table tr {
    display: block; width: 100%;
  }
  .ticket-table tr { margin-bottom: 1em; border-radius: 5px; overflow: hidden; }
  .ticket-table th { padding: 0.6em; width: 100%; border-bottom: none; }
  .ticket-table td { padding: 0.6em; }
}

.ticket-section {
  display: grid;
  gap: 1.5em;
  padding: 1.5em;

}

.ticket-item {
  padding: 1em 1.2em;
  border-left: 1px solid #333;
  background: #fff;
}

.ticket-item h3 {
  margin: 0 0 0.4em;
  font-size: 1em;
}

/* ボタンを見出し直下に配置・幅統一 */
.ticket-btn {
  display: block;
  width:290px;
  max-width: 100%;
  margin: 0 auto 0.4em;
  text-align: center;
  box-sizing: border-box;
}

/* レスポンシブ対応（スマホ時は全幅） */
@media (max-width: 600px) {
  .ticket-btn {
    width: 100%;
  }
}

.ticket-item p {
  margin: 0.2em 0;
  font-size: 0.95em;
}
/* =========================
   Story
   ========================= */
.story-body {
  max-height: 1000px; overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  opacity: 1; padding:20px 30px; border: 1px solid #ddd; background: #fafafa; margin-bottom: 20px;
}
.story-body.closed { max-height: 0; opacity: 0; }

.story-previous {margin: auto;text-align: center;}
#prev-story{margin: auto;text-align: left;}

/* 雑誌風（PC） */
@media (min-width: 980px){
  .story-current.magazine{ display: block; position: relative; }
  .story-current.magazine .story-image{
    float: left; max-width: 50%; margin: 0 28px 12px 0px;
    shape-outside: inset(0); shape-margin: 30px;
  }
  .story-current.magazine .story-image img{ display:block; width:100%; height:auto; }
  .story-current.magazine .story-text{ line-height: 2; }
  .story-current.magazine::after{ content:""; display:block; clear:both; }
}
/* モバイルは縦積み */
@media (max-width: 979px){
  .story-current.magazine{ display:flex; flex-direction:column; gap:1rem; }
  .story-current.magazine .story-image{ float:none; width:100%; margin:0; shape-outside:none; clip-path:none; }
}

/* パララックス */
.parallax{ height:min(100vw, 100%); overflow:hidden; position:relative; border:1px solid #eee; }
.parallax img{
  width:100%; height:120%; object-fit:cover; display:block;
  transform: translateY(-10%); transition: transform .6s ease-out;
}
.parallax.is-inview img{ transform: translateY(0%); }

/* =========================
   News (topics)
   ========================= */
#news { margin: 0 auto; padding: 60px 0; }
.topics-box {
  width: auto; margin: 0 auto 0; height: 150px; overflow: auto;
  padding: 1rem 2rem; color: #555555; font-weight: bold; text-align: center;
}
#feed { width: 100%; }
#feed ul.entry { margin-left: 30px; }
#feed ul.entry li {
  line-height: 1.2; padding: 20px; margin: 0; text-align: left; font-size: 0.9rem;
  margin-bottom: 10px; border-bottom: 1px solid #cac4bd;
}
#feed ul.entry li a, #feed ul.entry li a:visited { color: #333; text-decoration: none; }
#feed ul.entry li .entry-date { color: #e36ca4; margin-right: 10px; }
.news-more{ text-align: center; margin: auto; }
/* responsive */
@media screen and (max-width:1240px) {
  #news { padding: 30px 0; width: 100%; max-width: 100%; }
  .topics-box { margin: 15px auto 0; padding: 15px; min-width: 80%; min-height: 200px; }
  #feed { width: 100%; }
  #feed ul.entry { margin: 0 auto; }
  #feed ul.entry li { line-height: 1.8; }
  #feed ul.entry li .entry-date { display: block; }
}

/* =========================
   Footer
   ========================= */
footer {
  padding: 40px 0; color: #333; text-align: center;
  background: linear-gradient(to right, #e36ca4 0%, #e36ca4 50%, #fdeb1d 50%, #fdeb1d 100%);
}
footer p { margin: 0.5em 0; }
footer .footer-logo-img{margin: auto;width: 50%;max-width: 300px;}
footer .sns img { vertical-align: middle; transition: transform 0.3s ease; }
footer .sns img:hover { transform: scale(1.1); }
.sns{ padding: 20px 0; }
.sns img{vertical-align:middle;}

/* PCだけ表示（992px〜） */
.pc { display: none; }
@media (min-width: 992px) { .pc { display: block; } }
/* スマホだけ表示（〜767px） */
.sp { display: none; }
@media (max-width: 767px) { .sp { display: block; } }

/* =========================
   Loading
   ========================= */
#loading{
  position: fixed; inset: 0; z-index: 20000;
  background: #000; display: grid; place-items: center;
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .6s ease, visibility .6s ease;
}
#loading.is-hide{ opacity: 0; visibility: hidden; pointer-events: none; }

#loading .loading-box{ display: grid; justify-items: center; transform: scale(0.5); transform-origin: center; padding: 0; }
#loading .logo{ width: min(70vw, 520px); height: auto; display: block; }
@media (max-width: 600px){ #loading .loading-box{ transform: scale(0.42); } }

/* =========================
   Hero
   ========================= */
.hero { position:relative; height:100vh; overflow:hidden; z-index:4; margin-top: -70px;}
.hero-inner { position:absolute; z-index: 5; top:42%; bottom:0; right:0; left:0; margin:auto; width:40%;
  opacity: 0; transform: scale(0.9) translateY(40px);
}


/* 幅1921px以上のとき */
@media (min-width: 1921px) {
  .hero-inner {
    width: 32%;
  }
}



.hero-inner.is-active { animation: popIn 1.1s cubic-bezier(0.25, 1.3, 0.5, 1) forwards; }
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.8) translateY(40px); }
  60% { opacity: 1; transform: scale(1.05) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.hero-title-img{ width:100%;}
.hero__grid { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; }
.hero-text{ text-align: center;}

@media(max-width:1024px){
  .hero{ height:170vh;}
  .hero__grid{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  .hero-inner { top:33%; bottom:0; right:0; left:0; margin:auto; width:60%;}
}
@media(max-width:640px){
  .hero{ height:130vh;}
  .hero-inner { top:33%; bottom:0; right:0; left:0; margin:auto; width:60%;}
}

.panel { position:relative; overflow:hidden; }
.panel__layer {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.03);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.panel__layer.is-active { opacity:1; transform:scale(1); }



/* ----------------------------
* top-movie
---------------------------- */
#top-movie {
  z-index: 2;
  padding: 30px 0;
  background: #231815;
  position: relative;
  top: auto;
  left: auto;
}

/* ----------------------------
* 動画プレイヤー部分
---------------------------- */
.top-movie-content {
  padding: 0 0 30px 0;
}

.top-movie-C {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
}

/* 動画の配置と比率（16:9） */
.movie--node {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

#movie01,
#movie02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#movie01 iframe,
#movie02 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}

/* ----------------------------
* 複数動画横並び（PC）／縦並び（SP）
---------------------------- */
#topics-movie .videos {
  width: 100%;
  max-width: 860px; /* ★ここが重要。PCで比率崩れを防ぐ */
  padding: 50px 0;
  margin: 0 auto;
  text-align: center;
}


.col_1{ max-width: 860px;  margin: 0 auto;}

.col_2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.col_2 > div {
  width: 48%;
  min-width: 300px;
}

/* ----------------------------
* レスポンシブ対応（スマホ用）
---------------------------- */
@media screen and (max-width: 992px) {
  #top-movie {

  }


  #topics-movie .videos {
    padding: 0;
    width: 100%;
    max-width: 80%;
    background: none;
  }

    
  .col_1 > div {
    width: 100%;
  }
    
  .col_2 > div {padding-top: 5%;
    width: 100%;
  }
}




/* =========================
   base-btn（既存運用を尊重）
   ========================= */
.base-btn {
  display: inline-block;
  position: relative;
  padding: 0.6em 1.6em;   /* ← base-btnは少し大きめ */
  text-decoration: none;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.15s ease;
  user-select: none;

  border: solid 3px #333;      /* ふち */
  background-clip: padding-box;
  box-shadow: 5px 5px 0 var(--btn-shadow, #555);
}

/* 押したときの軽い沈み込み */
.base-btn:active {
  box-shadow: none;
  transform: translate(2px, 2px);
}

/* ▼ カラーバリエーション（従来互換） */
.base-btn.blue {
  --btn-shadow: #1a5fb3;
  background: #2e86e6;
  color: #fff;
}
.base-btn.blue:hover { background: #4b9df0; }
.base-btn.blue:active { background: #1d6ed0; }

.base-btn.red {
  --btn-shadow: #b72a27;
  background: #e53935;
  color: #fff;
}
.base-btn.red:hover { background: #f35652; }
.base-btn.red:active { background: #c72f2b; }

.base-btn.gray {
  --btn-shadow: #555;
  background: #888;
  color: #fff;
}
.base-btn.gray:hover { background: #999; }
.base-btn.gray:active { background: #777; }

.base-btn.orange {
  --btn-shadow: #cc7a00;
  background: #ff9900;
  color: #111;
}
.base-btn.orange:hover { background: #ffad33; }
.base-btn.orange:active { background: #e08a00; }


/* =========================
   てん（・）リスト
   ========================= */
.ten {
  list-style: none;
  padding-left: 1.25em;
  margin: 0.75em 0;
  font-size: 0.8rem;
  line-height: 1.4;
}
.ten li { position: relative; margin: 0.35em 0; }
.ten li::before { content: "・"; position: absolute; left: -1.1em; top: 0; }

/* =========================
   Utility
   ========================= */
.pc { display: none; }
@media (min-width: 992px) { .pc { display: block; } }
.sp { display: none; }
@media (max-width: 767px) { .sp { display: block; } }