@charset "utf-8";


:root{
  --base:#18181b;           /* 背景メイン（黒寄りティール） */
  --base-mid:#212124;       /* セクション交互（やや明） */
  --base-light:#0f0d16;     /* セクション交互（さらに明） */
  --paper:#F8FFF9;          /* 白背景（ミントホワイト） */
    --text-on-paper:#0B1F1F;  /* 本文用（やわらかい黒） */
  --card:#212124;           /* カード地 */
  --text-main:#e7e7eb;      /* 柔らかい白文字 */
  --text-dark:#aeaeb2;      /* カード上の文字 */
  --muted:#ccc;          /* サブテキスト */
  --line:#243131;           /* 区切り線・ボーダー */

  --accent:#3EA7FF;       /* ネオンシアン（控えめ） */
  --accent-2:#FF4EB8;     /* ソフトネオンピンク（控えめ） */
  --cta:#C6FF00;            /* CTA（黄緑）—使用は限定的に */
  --yellow:#FFE358;    /* ライトライン用の淡黄 */
    
    
}
/* --- メインカラー --- */

/* Base */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:72px }
body{
  margin:0;
  font-family: 'Outfit', 'BIZ UDPGothic',
    'Hiragino Sans', 'ヒラギノ角ゴ ProN W3',
    'メイリオ', Meiryo, sans-serif;
  line-height:1.8;
  color:var(--text-main);
  background:var(--base);
  position:relative;
  overflow-x:hidden;
}


a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline; text-decoration-color:var(--accent) }
img{ max-width:100%; display:block }
.container{  width: min(1000px, 90vw); margin-inline:auto }


.section-title,.event-title,.cat-pill,.copy{ font-family: "Raleway", sans-serif; }

.num, time, .price {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums; /* 桁揃え（チケットや時刻に◎） */
  letter-spacing: 0.03em;
}

.cat-pill span,.ja-sub,.main-title{   font-family: 'Outfit', 'BIZ UDPGothic',
    'Hiragino Sans', 'ヒラギノ角ゴ ProN W3',
    'メイリオ', Meiryo, sans-serif;}


/* ===============================
   Header / Nav（完成版）
   =============================== */
/* ---- Header / Nav ---- */
.site-header{
  position:fixed; inset:0 0 auto 0; height:68px; z-index:1001;
  display:flex; align-items:center; justify-content:space-between;
  color:#fff; background:transparent;
}
.site-header .brand{position: relative;padding:1rem .8rem .8rem .8rem; }
.site-header .brand img{height:36px}
/* ヘッダー内の重ね方 */

.site-header .brand .brand-logo { display: block; }
.site-header .brand .header-loader { display: none; }

/* Hamburger */
.nav-toggle{ appearance:none; border:3px solid #000; border-radius:999px;
  width:68px; height:68px; display:grid; place-items:center;
  background:#fff; color:#000; box-shadow:0 6px 24px rgba(0,0,0,.3); cursor:pointer;z-index:1000;
}
.nav-toggle .bars{ position:relative; width:30px; height:30px }
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bar{
  content:""; position:absolute; left:0; right:0; height:3px; background:#0C0F14; border-radius:8px; transition:.25s ease;
}
.nav-toggle .bars::before{ top:8px }
.nav-toggle .bar{ top:50%; transform:translateY(-50%) }
.nav-toggle .bars::after{ bottom:8px }
body.nav-open .nav-toggle .bars::before{ top:50%; transform:translateY(-50%) rotate(45deg) }
body.nav-open .nav-toggle .bar{ opacity:0 }
body.nav-open .nav-toggle .bars::after{ bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg) }

/* Mobile Nav */
.nav-overlay{position:fixed; inset:0; display:none; z-index:999}
body.nav-open #mobile-nav{display:block}
.nav-panel{
  position:absolute; inset:0; display:grid;   grid-template-rows: auto 1fr auto;  /* ← 3行にする（末尾にSNSの場所を作る） */
  background:var(--ink-surface); color:#fff; padding:40px 24px 32px; z-index:2; /* nav-dim より上 */
}
.nav-dim{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.nav-grid{position:relative; z-index:2; display:grid; place-items:center; gap:18px}
.nav-item{font-size:clamp(22px,4vw,30px); font-weight:800; color:#fff}
.nav-item:hover{ color:var(--accent) }


/* PCのみの出し分け */
@media (min-width:1024px){
  /* ▼ トップ以外：header-loader だけ常時表示（brand-logo は完全に非表示） */
  body:not(.is-home) .site-header .brand .header-loader { display: block !important; }
  body:not(.is-home) .site-header .brand .brand-logo   { display: none !important; }

  /* ▼ トップ（HEROあり）：
        - HERO内：どちらも出さない（= header-loader を非表示 / brand-logo も非表示）
        - HERO通過後（.post-hero）：header-loader だけ表示 */
  body.is-home .site-header .brand .brand-logo         { display: none !important; }
  body.is-home .site-header .brand .header-loader      { display: none !important; } /* HERO内 */
  body.is-home.post-hero .site-header .brand .header-loader { display: block !important; } /* HERO以降 */
}

/* === モバイルで brand を消してもハンバーガーを右に === */
@media (max-width: 1023px) {
  /* PC専用ロゴはスマホで非表示 */
  .site-header .brand.pc { display: none !important; }

  /* 中身は右寄せ（brandが無くても右端へ） */
  .header-inner {
    justify-content: flex-end;   /* ← ここがポイント */
  }

  /* 念のため右寄せの保険（単体でも右端へ押し出す） */
  .nav-toggle {
    margin-left: auto;
  }

  /* （任意）スマホではボタンを少し小さくする */
  .nav-toggle {
    width: 56px;
    height: 56px;
  }
  .nav-toggle .bars { width: 24px; height: 20px; }
  .nav-toggle .bars::before { top: 3px; }
  .nav-toggle .bar { top: 50%; transform: translateY(-50%); }
  .nav-toggle .bars::after { bottom: 3px; }
}


 /* SNS */
.nav-sns {
    display: flex;
    justify-content: center;
    gap: 22px;           /* アイコン間の余白 */
    padding: 20px 0;     /* 上下余白 */
}

.nav-sns img {
    width: 28px;         /* アイコンサイズ */
    height: auto;
    display: block;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.nav-sns img:hover {
    opacity: 1;
}


.nav-sns a img {
    width: 28px;
    height: auto;
    opacity: .9;
    transition:
        transform .25s ease,
        filter .25s ease,
        opacity .25s ease;
}

/* hover */
.nav-sns a:hover img {
    opacity: 1;
    transform: scale(1.18);
    filter:
        brightness(0) invert(1)                        /* 白にする */
        drop-shadow(0 0 8px rgba(80,150,255,0.9))      /* 青系の強めグロー */
        drop-shadow(0 0 14px rgba(80,150,255,0.65));   /* 外側にもじわっと拡散 */
}


/* スマホでは少し小さく */
@media (max-width: 480px) {
    .nav-sns img {
        width: 24px;
        gap: 12px;
    }
}/*end*/




/* Hero */
.hero{margin-top: -65px;/*ナビ分*/
  position:relative; width:100%; height:88vh; min-height:520px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#1A2424 0%, #1E2A2A 100%); color:#fff;
}
@media (max-width: 768px){
.hero{margin-top:0;
height:100vh;

}
}/**/


.hero-bg{ position:absolute; inset:0; overflow:hidden }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center center; opacity:0; animation:heroSlide 24s infinite }
.hero-slide:nth-child(1){ animation-delay:0s }
.hero-slide:nth-child(2){ animation-delay:7s }
.hero-slide:nth-child(3){ animation-delay:14s }
@keyframes heroSlide{
  0%{opacity:0;transform:scale(1.02)}
  4%{opacity:1}
  28%{opacity:1;transform:scale(1.12) translate(-2%,-2%)}
  50%{opacity:0}
  100%{opacity:0}
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 500px at 60% 12%, rgba(57,231,255,.16), transparent 60%),
             radial-gradient(700px 600px at 12% 85%, rgba(255,122,239,.12), transparent 65%);
  mix-blend-mode:screen;
}
.logo-wrap{   position: absolute;
  z-index: 2;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
  animation: logoBounce 1.6s cubic-bezier(.34,1.56,.64,1) 0.3s both;
  /* both = 最初と最後のtransformを保持 */ }
.hero-logo{ display:block; width:min(45vw,500px); max-height:50vh; height:auto;   animation: logoBounce 10s ease-in-out 1s infinite;}
/* ボヨヨン */
@keyframes logoBounce {
  0%, 70% {
    transform: translateY(0) scale(1);
  }
  78% {
    transform: translateY(6px) scale(1.08, 0.92); /* 下に沈み、少し潰れる */
  }
  86% {
    transform: translateY(-8px) scale(0.95, 1.07); /* 上に跳ねて伸びる */
  }
  94% {
    transform: translateY(0) scale(1.02, 0.98); /* 戻るとき少しバウンド */
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.hero-copy1,.hero-copy2{ position:absolute; left:50%; transform:translateX(-50%); text-align:center; }
.hero-copy1{ top:10% } .hero-copy2{ bottom:8% }
.hero-copy1 img {width: clamp(240px, 60vh, 580px);}
.hero-copy2 img {width: clamp(200px, 40vh, 360px);}

.bubble{ position:absolute; z-index:3 }
.bubble-img{ width:100%; animation:metronome 7s ease-in-out infinite }
/*縦幅基準　スマホ縦基準で確実に揃えたい*/
.bubble--miru{   top:14%; left:18%;  width:clamp(84px,14vh,170px) }
.bubble--kiku{   top:14%; right:16%; width:clamp(90px,14vh,168px) }
.bubble--asobu{  bottom:12%; left:16%; width:clamp(88px,14vh,160px) }
.bubble--taiken{ bottom:10%; right:18%; width:clamp(76px,10vh,128px) }


@media (max-width: 768px) {
.hero-copy1{ top:9% ; width: clamp(240px, 88vw, 580px);} .hero-copy2{ bottom:8%;width: clamp(200px, 70vw, 360px); }
 
.bubble--miru{ top:16%; left:6%; }
.bubble--kiku{ top:16%; right:6%;  }
.bubble--asobu{ bottom:16%; left:6%; }
.bubble--taiken{ bottom:16%; right:6%; }

}/**/


@keyframes metronome{ 0%{transform:rotate(-6deg)} 50%{transform:rotate(6deg)} 100%{transform:rotate(-6deg)} }

/* Belt */
.belt{
  position:relative; overflow:hidden; color:#EAF2FF;
  border-block:1px solid var(--line);
}
.belt .inner{ width:min(1200px,92vw); margin:auto; padding:28px 0 }
.belt .row{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between }
.belt h2{ margin:0; font-weight:900; letter-spacing:.02em; font-size:clamp(18px,3.4vw,28px); line-height:1.15 }
.belt .sub{ opacity:.95; font-size:16px }

@media (max-width: 768px) {
  .belt .row{
    justify-content: center;      /* 横方向の配置を中央に */
    text-align: center;            /* テキストも中央揃え */
  }

  .event-title{
    width: 100%;
  }
}/**/

.lightline{ position:relative; height:12px; -webkit-mask:linear-gradient(90deg,transparent,black 15% 85%,transparent); mask:linear-gradient(90deg,transparent,black 15% 85%,transparent) }
.lightline::before{
  content:""; position:absolute; inset:0; opacity:.14;
  background:radial-gradient(circle,#F5F8FA,transparent 55%), linear-gradient(90deg,var(--accent-2),var(--accent));
  mix-blend-mode:screen;
}

#home-page .news-grid {
  display: grid;
  gap: 2rem;
  margin: 2rem;
  grid-template-columns: repeat(3, 1fr); /* PCでは均等3列 */
}
.page-room .news-grid {
  display: grid;
  gap: 2rem;
  margin: 2rem;

  /* デフォルト: auto-fitで列自動調整、最小300px、最大1fr */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* PC以上: 左大きめ、右aside小さめ */
@media (min-width: 992px) {
  .page-room .news-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}

/* モバイル: 1列にして縦並び */
@media (max-width: 991px) {
#home-page .news-grid ,
    .page-room .news-grid { gap: 1rem;
  margin: 1rem;
    grid-template-columns: 1fr;
  }
}

.text-center{margin: auto;text-align: center;width: 80%;}
.card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2rem;
  text-align: left;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;box-shadow: 0 6px 12px rgba(0,0,0,0.5);
}
.news-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2rem;
  text-align: left;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;margin-bottom: 2rem;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}



.news-date {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 0.5rem;
}

.news-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.news-desc {
  font-size: 1rem;
  opacity: 0.85;
  line-height: 1.8;
}

.btn--circle {
  position: absolute;
  bottom: 1.2rem;
  right: 1.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--accent);
  border-radius: 50%;
color:var(--base); 
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s ease;
}

.btn--circle:hover {
  background: var(--accent-2);color:var(--base); 
}

/* 共通フェードアップ効果 */
.fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.fadeup.inview {
  opacity: 1;
  transform: translateY(0);
}



.event-title{
  display:inline-block; font-weight:900; letter-spacing:.02em;
  font-size:clamp(22px,3vw,30px);
background:linear-gradient(90deg, #E1AFFF, #A6D3FF);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.event-title-sub{ font-weight:500; font-size:clamp(12px,1.5vw,15px);}


.hd{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:28px; flex-direction:column; text-align:center }

.sub{ color:var(--muted); font-size:14px ;line-height: 1.2;}
.section-underline{ width: 10%; height:1px;background: var(--accent-2);opacity:.6 }
#home-page .hd .sub{ color:var(--accent-2);}

/* 日英併記（下に控えめ） */
.ja-sub,
.en-sub{
  display:block;
  font-size:.8rem; opacity:.72;
  letter-spacing:.04em;
}


/* ベース：本文セクションの見出し */
.section-title{
  display:block; margin:0 auto .6rem;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  line-height:1.15; font-weight:800;
  letter-spacing:.01em; color:#EAF1FF;
  text-align:center; 
}
.section-title.is-accent{}

.section-category h1.main-title {
  display: inline-block;
  margin: 0 auto .6rem;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;
  position: relative;
  z-index: 2;
  color: #fff; /* 白文字メイン */
}
.section-category h1.main-title span{font-size: clamp(16px, 2vw, 25px);}
/* やわらかな発光オーラ */
.section-category h1.main-title::before {
  content: "";
  position: absolute;
  inset: -2px; /* 少しだけ外へ */
  border-radius: 999px;
  background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
  filter: blur(3px);     /* 光の広がりを控えめに */
  opacity: 0.1;         /* 明るさを落とす */
  z-index: -1;
}
h2.category-copy{ display:block; margin:0 auto .6rem;
  line-height:1.15; font-weight:800;
  letter-spacing:.01em;
  font-size: clamp(22px, 3vw, 30px);
background:linear-gradient(90deg, #E1AFFF, #A6D3FF);
  -webkit-background-clip:text;
  color:transparent;  text-align:center;position: relative; z-index: 2;border-radius:999px; 
}

.category-text{padding: 2rem;}



/* コメントボックス */
.comment-box {
  position: relative;
  margin-top: 2.5em;
  padding: 1.8em 2em;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 18px rgba(255, 180, 255, 0.1);
  font-size: 1rem;
  line-height: 1.7;
  color: #EAEFFF;
  backdrop-filter: blur(4px);
}



/* タイトルバッジ（丸囲み） */
.comment-title {
  position: absolute;
  top: -0.9em;
  left: 1.4em;
    background: var(--accent);
    color: #f9f9f9;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: .05em;
  padding: 0.3em 1.1em;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  text-shadow: none;
}

/* コメント文 */
.comment-box p {
  margin: 0;
  font-size: 0.95rem;
  color: #EAF4FF;
}

/* 強調行 */
.comment-box strong {
  display: inline-block;
  margin-top: .6em;
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
}
.comment-author {
  text-align: right;
  margin-top: 0.8em;
  font-weight: 600;
  color: #E1AFFF; /* 名前だけ少し淡いピンクブルー */
  font-style: italic;
  letter-spacing: 0.03em;
}


@media (max-width: 768px){
.comment-box {
  padding: 1.8em 1em;
}
  .category-text{padding: 1rem;}  
}/**/






/* 見出し（共通） */
.section-title.sound{
  display:block;
  margin:0 auto 1.2rem;
  text-align:center;
  font-weight:800;
  letter-spacing:.04em;
  font-size:clamp(1.8rem,2.8vw,2.3rem);
  color:#EAF1FF;

  /* スクロールイン前は静か */
  opacity:0;
  transform:scale(.96);
  transform-origin:center;
  transition:opacity .6s ease, transform .6s ease;

  position:relative;   /* 粒子の定位先 */
  overflow:visible;
}

/* ビューポートに入った瞬間だけ鼓動する */
.section-title.sound.inview{
  opacity:1;
  transform:scale(1);
  animation:beatIntro 1.6s ease-out both;
}

/* 読み込まれた時に一度だけドクン → 静止 */
@keyframes beatIntro{
  0%   { transform:scale(1);   text-shadow:none;          opacity:0; }
  30%  { transform:scale(1.12);text-shadow:0 0 18px #00c8ff,0 0 36px #6cf; opacity:1; }
  55%  { transform:scale(.97); text-shadow:0 0 10px #ff66cc,0 0 20px #ff99e0; }
  100% { transform:scale(1);   text-shadow:0 0 10px #ff66cc,0 0 20px #ff99e0;         opacity:1; }
}
.particle{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  pointer-events:none; opacity:0; will-change:transform,opacity;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.25));
}

@keyframes popNoteSoft{
  0%   { transform: translate(-50%, 0) scale(.7) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translate(calc(-50% + var(--dx)), calc(-1 * var(--dy)))
                 scale(1.08) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-0.85 * var(--dy)))
                 scale(1) rotate(var(--rot)); opacity: 0; }
}

/* デフォルト: PC=3列 / SP=1列。列数は変数で上書き可能 */
.grid{
  display:grid;
  gap:18px;
  justify-content:center; /* 2列時も中央に寄せる */
    grid-template-columns: repeat(var(--cols-desktop, 2), minmax(320px,420px));    gap: 36px;  
}
  .grid > .card{ max-width:400px; margin-inline:auto; }

@media (max-width: 768px){
  .grid{ grid-template-columns: 1fr; } /* 1列 */
.grid > .card{ max-width:90%;} 
    
}/**/



/* 色トークン（必要なら調整） */
:root{
  --neon-blue:   rgba( 80,180,255,1);
  --neon-blue-w: rgba( 80,180,255,.28);
  --neon-pink:   rgba(255,100,250,1);
  --neon-pink-w: rgba(255,100,250,.26);
}


.card__overlay{
  position: absolute; inset: 0;
  z-index: 1; display: block; /* キーボードフォーカス可 */
}

/* クリック時の体験向上：hover/focusでカードを少し持ち上げる */

.card__overlay:focus-visible{
  outline: none;
  transform: translateY(-3px);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

/* （任意）フォーカスリングを見やすく */
.card__overlay:focus-visible{
  /*box-shadow: 0 0 0 3px rgba(57,231,255,.5), 0 10px 24px rgba(0,0,0,.28);*/
  border-radius: 8px; /* カードの角丸に合わせる */
}




.card:hover{overflow: hidden; 
box-shadow:
    0 6px 12px var(--neon-blue-w),
    0 6px 12px var(--neon-pink-w),
    inset 0 0 6px 12px rgba(0,180,255,.08);
transition: transform .4s ease, box-shadow .4s ease, filter .4s ease;
}

.thumb{ position:relative; aspect-ratio:16/9; overflow:hidden }
.thumb img:hover{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform .8s ease }

/* 写真キャプション */
.photo-credit {
  position: absolute;
  bottom: 5px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 8px;
  border-radius: 8px;
}

/* 右下配置（デフォルト） */
.photo-credit.right {
  right: 12px;
  text-align: right;
}

/* 左下配置 */
.photo-credit.left {
  left: 12px;
  text-align: left;
}



.badges{ position:absolute; left:10px; top:10px; display:flex; gap:6px; z-index:2 }
.badge{ font-size:12px; padding:.2rem .6rem; border-radius:999px; background:rgba(25,25,25,.8); border:1px solid rgba(225,175,255,.25); }
.badge.free{ background:var(--accent); color:var(--base); box-shadow:0 0 10px rgba(51,255,255,.22) }
.badge.set{ background: rgba(255, 78, 184, 0.8); color:var(--text-main); box-shadow:0 0 10px rgba(255,120,200,.8) }
.meta{ padding:12px 14px 0; font-size:13px; display:flex; gap:10px; flex-wrap:wrap }

.detail{ padding:0 14px 14px; font-size:14px; color:#445 }
.price{ display:flex; gap:10px; flex-wrap:wrap }
.price .tag{ background:#333; color:#f9f9f9; border-radius:999px; padding:.3rem .6rem; font-size:.8em }
.price .u30{ background:#666; color:#f9f9f9; border-radius:999px; padding:.3rem .6rem; font-size:.8em }


.cardtitle{font-size:18px ;
  margin: 0 .5rem .5rem .9rem;         /* タイトル下の余白を極小に */
  line-height: 1.4;         /* 詰める */
  font-weight: 700;
}

.cardtitle .en-sub{
  display: block;            /* 行を分けて“同一ヘッダ”扱い */
  font-size: .73rem;           /* 小さめ */
  margin: .05rem 0 1rem;        /* ほぼ密着 */
  opacity: .72;              /* 主従をつける */
  letter-spacing: .02em;
  font-weight: 500;
}

/* もしカード全体の見た目でさらに寄せたい場合（任意） */
.card .meta{ margin-bottom: .35rem; } /* メタ下の余白を減らす */

/* Table */
.table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:.92rem; background:var(--paper); color: var(--text-on-paper); }
.table th,.table td{ padding:12px; border-top:1px solid #eef2f2; vertical-align:top }
.table thead th{ background:#f7fbfb; text-align:left; border-top:none; color:#0B3C46 }
.table .table-link{
  display:inline-block;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#0f1115;
  color:#e7e7eb;
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none;
  transition:transform .15s ease, background .15s ease;
}
.table .table-link:hover{
  background:#171a20;
  transform:translateY(-1px);
  text-decoration:none;
}

@media (max-width: 768px) {
    .table{font-size:.8rem;}
  .table .table-link span { display: none; } /* 文字非表示 */
  .table .table-link::after { content: '▶︎'; } /* アイコンに切替 */
}


/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:800; letter-spacing:.02em; border-radius:30px; padding:12px 18px;
  border:0; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
}
.btn--sm{ padding:9px 14px; font-size:.92rem; border-radius:30px }
.btn--xl{ padding:16px 26px; font-size:1.05rem; border-radius:30px }
.btn--primary{background: linear-gradient(30deg, #FF4EB8 0%, #8F6BFF 45%, #3EA7FF 100%);
    color: #f5f5f5;
  box-shadow:0 0 0 rgba(0,0,0,0);      /* 発光は基本オフ */
}
.btn--primary:hover{
  box-shadow:0 0 18px rgba(100,200,255,.25); /* ホバー時だけ淡く */
}
.btn--accent{ background:var(--accent); color:#061014 }
.btn--secondary{ background:#F5F8FA; color:#0B1F1F; border:1px solid rgba(0,0,0,.08) }
.btn--outline{ background:transparent; color:#EAF2FF; box-shadow:inset 0 0 0 2px rgba(255,255,255,.6) }
.cta.btn-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.cta .btn { width: 100%; }
/* =============================
   Footer Layout
============================= */
footer.access-split {
  position: relative;
  background:
    linear-gradient(180deg, rgba(12,16,20,.5), rgba(10,10,12,.3) 60%, rgba(0,0,0,.4)),
    url('../img/bgcenter-moto.jpg') center bottom / cover no-repeat;
  color: rgba(255,255,255,.85);
  overflow: hidden;
}

footer .access-wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 60px clamp(16px,4vw,80px);
  min-height: 340px;
}

footer .col {
  position: relative;
}

footer .credit table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12px, 1.6vw, 15px);
  line-height: 1.6;
}
footer .credit th {vertical-align: top;
  text-align: left;
  white-space: nowrap;
  opacity: .7;
  padding-right: 0.8em;
}
footer .credit td {vertical-align: top;
  text-align: left;
}
footer .credit th span,
footer .credit td span { background-color: rgba(0,0,0,0.9) }

footer .copy {
  font-size: 0.8rem;
  opacity: .6;
  margin-top: 1.6em;
}



.footer-sns {
    display:flex;
    justify-content:center;
    gap:22px;
    padding:60px 0 0;
}

.footer-sns a img {
    width:28px;
    opacity:.9;
    transition:
        transform .25s ease,
        filter .25s ease,
        opacity .25s ease;
}

/* hover：青い発光（ナビと同じ質感） */
.footer-sns a:hover img {
    opacity:1;
    transform:scale(1.18);
    filter:
        brightness(0) invert(1)
        drop-shadow(0 0 8px rgba(80,150,255,.9))
        drop-shadow(0 0 14px rgba(80,150,255,.65));
}


/* =============================
     detail-page 専用 FOOTER
   ============================= */

/* detail-page フッターを3カラムレイアウトに変更 */
.detail-page #access .access-wrap {
  display: flex;
  justify-content: center; /* 中央寄せのベース */
  align-items: center;
}

/* 左右は幅を詰める（中身が無いので最小幅） */
.detail-page #access .col-left,
.detail-page #access .col-right {
  flex: 0 0 auto;
}

/* ★ 中央が広く取られるようにする */
.detail-page #access .col-center {
  flex: 1 1 auto;  /* 中央が自動で広がる */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}



/* コピーライト中央 */
.detail-page .copy {background-color: #000;
  text-align: center;
  font-size: 14px;
}


/* 右下固定＆表示制御はそのまま */
.pagetop{
  position: fixed;
  right: clamp(8px, 3vw, 12px);
  bottom: clamp(8px, 3vw, 14px);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
  background: transparent; border: 0;
  display: grid; place-items: center;
  width: 100px; height: 100px;
}
.pagetop.is-show{
  opacity: 1; pointer-events: auto; transform: translateY(0);
}

/* ふわふわは通常時のみ（launch中は止める） */
.pagetop-icon{
  width: 80px; height: auto; display:block;
  animation: floatY 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.40))
          drop-shadow(0 0 24px rgba(57,231,255,.25));
  transition: transform .4s ease, opacity .4s ease, filter .4s ease;
}
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.pagetop:hover .pagetop-icon{
  transform: scale(1.08);
  opacity: .95;
  filter: drop-shadow(0 0 18px rgba(255,180,255,.5))
          drop-shadow(0 0 36px rgba(57,231,255,.4));
}


/* === HERO同期：発光パルスを追加合成 === */
.pagetop.syncing .pagetop-icon{
  animation:
    floatY 3.5s ease-in-out infinite,
    glowPulse 3s ease-in-out infinite;  /* 発光の鼓動 */
}
@keyframes glowPulse{
  0%,100%{
    filter: drop-shadow(0 0 10px rgba(225,175,255,.35))
            drop-shadow(0 0 24px rgba(57,231,255,.22));
  }
  50%{
    filter: drop-shadow(0 0 18px rgba(225,175,255,.65))
            drop-shadow(0 0 40px rgba(57,231,255,.45));
  }
}

/* 初回だけ“ポンッ”と同期 cue */
.pagetop.sync-cue .pagetop-icon{
  animation: cuePop .9s cubic-bezier(.2,.7,.1,1) both, floatY 3.5s ease-in-out infinite;
}
@keyframes cuePop{
  0%   { transform: translateY(0) scale(1);   }
  40%  { transform: translateY(-8px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* クリック時の発進（既存） */
.pagetop.launch .pagetop-icon{
  animation: launchUp .55s cubic-bezier(.2,.7,.1,1) forwards !important; /* 他アニメより優先 */
  will-change: transform, opacity, filter;
}
@keyframes launchUp{
  0%   { transform: translateY(0) scale(1);   opacity:1; filter: blur(0) drop-shadow(0 0 12px rgba(255,255,255,.4)); }
  100% { transform: translateY(-150px) scale(.96); opacity:0;  filter: blur(1.2px); }
}

/* 発進の残光ストリーク */
.pagetop::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 6px; height: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(120,200,255,.0));
  border-radius: 999px;
  transform: translate(-50%,-50%) scaleY(.2);
  opacity: 0; pointer-events:none; filter: blur(1px);
}
.pagetop.launch::before{ animation: streakUp .55s ease-out forwards; }
@keyframes streakUp{
  0%   { opacity:.0; transform: translate(-50%,-40%) scaleY(.2); height: 10px; }
  20%  { opacity:.45; }
  60%  { opacity:.25; }
  100% { opacity:0; transform: translate(-50%,-160px) scaleY(1.2); height: 140px; }
}

/* スマホでは縦並びに */
@media (max-width: 992px) {
  footer .access-wrap {  min-height: 240px;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 20px;
  }
  .footer-action {width: 100%;
    margin-top: 2rem auto;text-align: center;
  }
}


.banner {margin: auto;text-align: center;width: 300px;max-width: 300px;}
.banner img{max-width: 300px;}


@media (max-width: 768px) {
.banner {margin: auto;text-align: center;width: 100%;max-width:60%;}
.banner img{max-width:100%;}
 
}/**/

/* Sections */
.section{ padding:64px 0; 
position:relative; z-index:1; }


.section:nth-of-type(even){ --grad-left:  rgba(255,122,239,.16);  /* 左端：ピンク（ネオンマゼンタ寄り） */
--grad-right: rgba(57,231,255,.16);   /* 右端：シアン（ネオンアクアブルー） */
--center-a: .96;                      /* 中央の暗さ（1に近いほど真っ黒） */
--center-w: 10;                       /* 中央の暗部幅（%） */
  background:linear-gradient(90deg,
    var(--grad-left) 0%,
    rgba(19,9,18,var(--center-a)) calc(50% - var(--center-w)*1%/2),
    rgba(19,9,18,var(--center-a)) calc(50% + var(--center-w)*1%/2),
    var(--grad-right) 100%);} /* 交互でリズムだけ残す */

.section:nth-of-type(even)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/wave.svg") center/cover no-repeat;
  opacity: .5;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* レイヤー：::before=模様 / ::after=左右グラデ */
.section::before,
.section::after{ content:""; position:absolute; inset:0; pointer-events:none }
.section::before{ z-index:-1; mix-blend-mode:screen }
.section::after{ z-index:-2; mix-blend-mode:screen }

/* 左右グラデ（変数で制御） */
.section-gradient::after{
--grad-left:  rgba(255,122,239,.16);  /* 左端：ピンク（ネオンマゼンタ寄り） */
--grad-right: rgba(57,231,255,.16);   /* 右端：シアン（ネオンアクアブルー） */
--center-a: .96;                      /* 中央の暗さ（1に近いほど真っ黒） */
--center-w: 10;                       /* 中央の暗部幅（%） */
  background:linear-gradient(90deg,
    var(--grad-left) 0%,
    rgba(19,9,18,var(--center-a)) calc(50% - var(--center-w)*1%/2),
    rgba(19,9,18,var(--center-a)) calc(50% + var(--center-w)*1%/2),
    var(--grad-right) 100%);
}

/* アクセス背景（注：適宜パスを更新） */


#tickets,#news{background:
    radial-gradient(120% 200% at 50% -20%, rgba(255,180,200,.04), transparent 70%),
    linear-gradient(180deg, rgba(10,15,20,.96), rgba(20,28,36,.98));}

.detail-page #tickets{background:none;}
/* ===== LOADER (BON! → HERO) ===== */
#loader{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: var(--base); /* 既存のベース色に合わせる */
  transition: opacity .55s ease, visibility .55s ease;
}
.loader-inner{ position: relative; display:grid; place-items:center }
.loader-logo{
  width: clamp(140px, 26vw, 300px);
  will-change: transform, opacity;
  animation: bonPop .9s cubic-bezier(.16,.84,.24,1) both;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.45));
}
/* ほのかな発光(コスト低) */
.loader-glow{
position: absolute;
inset: auto;
width: clamp(200px, 40vw, 520px);
height: clamp(200px, 40vw, 520px);
border-radius: 50%;
background:
  radial-gradient(closest-side, rgba(100,200,255,.42), transparent 60%),
  radial-gradient(closest-side, rgba(255,120,200,.40), transparent 70%);
mix-blend-mode: screen;
filter: blur(2px);
animation: glowBeat 1.4s ease-in-out .1s both;
}

/* BON! のポップ */
@keyframes bonPop{
  0%   { opacity:0; transform: scale(.62) }
  60%  { opacity:1; transform: scale(1.08) }
  100% { transform: scale(1) }
}
/* うっすら鼓動 */
@keyframes glowBeat{
  0%   { transform: scale(.8); opacity:.0 }
  40%  { transform: scale(1.06); opacity:.9 }
  100% { transform: scale(1); opacity:.5 }
}

/* ロード完了後にフェードアウトして非表示に */
body.is-loaded #loader{ opacity:0; visibility:hidden }

/* HEROをほんの少しだけ見せ出し(負担小) */
body.is-loaded .hero{
  animation: heroReveal .6s ease .05s both;
}
@keyframes heroReveal{
  from{ opacity:.0; transform: translateY(6px) }
  to  { opacity:1;  transform: translateY(0)   }
}

body.is-loaded #loader { transition-delay: .15s; }
/* ------------------------------------------------------------------- 
 * e.t.c
/*-------------------------------------------------------------------*/
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
/* ------------------------------------------------------------------- 
 * responsive:
 *  e.t.c
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
} /*end*/



/* ------------------------------------------------------------------- 
 * etc
 * ------------------------------------------------------------------- */
.notes-toggle {
  margin-top: 1.5rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.03);
}

.notes-toggle[open] {
  background: rgba(255,255,255,0.05);
}

.notes-title {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
}

.notes-toggle .kome {
  margin: 1rem 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.notes-toggle .kome li {
  line-height: 1.55;
}


ul.kome {font-size: 0.9rem;opacity: 0.75;
    list-style-type: none;
    padding-left: 1em;
    margin-left: 0.1em;
}
ul.kome li {
    text-indent: -1.5em;
    line-height: 1.65;
}
ul.kome li:before {
    content: "※";
    margin-right: 0.5em;
}
/*HOME チケット一覧の箇所*/
.home-page-ticket-kome ul.kome {font-size: 0.8rem;padding: 1rem;
}


ul.ten {opacity: 0.75;
    list-style-type: none;
    padding-left: 1em;
    margin-left: 0.1em;
}
ul.ten li {
    text-indent: -0.85em;
    line-height: 1.65;
}
ul.ten li:before {
    content: "·";
    margin-right: 0.5em;
}


/* ------------------------------------------------------------------- 
 * responsive:
 * etc
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
ul {font-size: 0.8rem;
}
} /**/



/* ---- 2カラムを“ゆったり中央寄せ＋丸い間”に ---- */
@media (min-width:769px){
  .grid{
    grid-template-columns: repeat(var(--cols-desktop, 2), minmax(320px, 450px));
    gap: 36px;
    justify-content: center;
  }
  .grid > .card{ max-width: 420px; margin-inline: auto; border-radius: 8px; }
}

/* 中央の丸い抜き：2列のときだけ“呼吸”を作る */
.grid.round-gap{ position: relative; isolation: isolate; }
.grid.round-gap::before{
  content:"";
  position:absolute; inset:0 50% 0 auto;
  width: 96px; margin-right: -48px;
  background: radial-gradient(48px at left center, transparent 44px, rgba(0,0,0,.10) 45px);
  opacity: .9; z-index: -1;
}
@media (max-width:768px){
  .grid.round-gap::before{ display: none; } /* SPは1列なので非表示 */
}

/* ===== Tickets Table: Dark Theme (section限定上書き) ===== */
#tickets .table{
  background: rgba(255,255,255,.04);        /* ほんのり透けるダーク */
  color: var(--text-main);
  border-color: #2a3333;
}
#tickets .table th,
#tickets .table td{
  border-top: 1px solid #2a3333;
}
#tickets .table thead th{
  background: rgba(255,255,255,.06);        /* ヘッダを少しだけ明るく */
  color: var(--text-main);
  text-align: left;                     /* 長い表でもヘッダが見える */
  top: 68px;                                /* 固定ヘッダ高に合わせる */
  backdrop-filter: blur(6px);
}
#tickets .table tbody tr:nth-child(even){
  background: rgba(255,255,255,.03);        /* うっすらゼブラ */
}
#tickets .table .kbd{ color: var(--text-main); }
#tickets .table .table-link{
  background: transparent;
  color: var(--accent);
  border-color: rgba(255,255,255,.18);
}
#tickets .table .table-link:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  text-decoration: none;
}


/* ===== 円レイヤー ===== */
.bgwrap{position:relative; overflow:clip}
.orb-layer{position:absolute; inset:0; z-index:0; pointer-events:none}

/* 円の見た目（濃さ・発光・ブラーは深度で制御） */
.orb{
  position:absolute;
  --x:0px; --y:0px; --px:0px; --py:0px; --sx:0px; --sy:0px; --s:1; --d:.5;
  transform: translate3d(calc(var(--x) + var(--px) + var(--sx)),
                         calc(var(--y) + var(--py) + var(--sy)),0)
             scale(var(--s));
  will-change: transform;
  opacity: calc(.65 + var(--d) * .35); /* 0.65〜1.0 と濃く */
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.25))
    drop-shadow(0 0 24px rgba(255,255,255,.16))
    blur(calc((1 - var(--d)) * 0.6px));  /* 背景側だけごく薄くぼかす */
}
.orb img{display:block;width:100%;height:auto;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* PCは全体スケール底上げ（大きさの不満を解消） */
@media (min-width:1024px){
  .orb{ transform: translate3d(calc(var(--x) + var(--px) + var(--sx)),
                               calc(var(--y) + var(--py) + var(--sy)),0)
                    scale(calc(var(--s,1) * 1.25)); } /* +25% */
}

/* リサイズ中のチラつき対策：一時的に回転停止・少し薄く */
.resizing .orb img { animation-play-state: paused; }
.resizing .orb     { opacity: calc(.55 + var(--d) * .25); } /* 少しだけ薄く */
/* ===== End: style.css ===== */

/* ===== Begin: other.css ===== */
/* =========================================================
  個別ページ（.page-room）最終スタイル — cleaned
  ・セクションヘッダー（.section-category）は“変更不可”として原文そのまま保持
  ・それ以外を整理／誤記修正／可読性改善（行幅・チケット・プロフィール・DL）
  ・ノーグロー（page全体 hover のネオン演出は無効）
  依存：style.css の --accent / --accent-2 / --text-main ほか
========================================================= */

/* ---- 共通トークン参照（フォールバック付） ---- */
.page-room{
  --theme-a: var(--accent,  #E1AFFF);
  --theme-b: var(--accent-2,#A6D3FF);
  --ink:     var(--text-main, rgba(255,255,255,.88));
  --ink-dim: var(--text-dim,  rgba(255,255,255,.66));
  --panel:   var(--panel,     #12171E);
  --line:    var(--line,      rgba(255,255,255,.08));
}

/* ---- コンテナ＆セクション余白 ---- */
.page-room .container{ max-width:1000px; margin:0 auto; padding:0 clamp(16px,4vw,28px); }
.page-room .section{ padding: clamp(14px, 4vw, 48px) 0;background: none; }
.page-room .hd{ margin-bottom: clamp(14px,2.6vw,22px); }

/* =========================================================
   見出しヘッダー（ピル＋下線） ★ここは原文そのまま★
========================================================= */
.page-room .section-menu{ position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); z-index:5; }

.page-room .section-category{
  position: relative; display:flex; flex-direction: column; justify-content: center; align-items:center; text-align:center;
  min-height: 400px; padding-top: 100px;
  background:
    linear-gradient(180deg, rgba(12,16,20,.1), rgba(10,10,12,.4) 60%, rgba(0,0,0,0.8)),
    url('../img/bgcenter-moto.jpg') center top / cover no-repeat;
  color: rgba(255,255,255,.85);
  overflow: visible;
}

.page-room .section-pill{font-size:1.2rem;
  display:inline-flex; align-items:center; gap:.5em; padding:.65em 1.1em; border-radius:999px;
  background: rgba(255,255,255,.10); backdrop-filter: blur(6px);
  border:2px solid rgba(255,255,255,.18); color:#eee; font-weight:800; letter-spacing:.02em;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
@media (max-width: 992px){
    .page-room .section-pill{font-size:1rem;}

}/**/
/* =========================================================
   2カラムレイアウト（イントロ）
========================================================= */
.page-room .intro-grid {margin: auto;
background: #333;padding-top:3rem;
}

.page-room .intro-grid .card,
.page-room .intro-grid h2{border-radius: 0;
}


.page-room .intro-grid .card{margin: auto;box-shadow: none;
background: #333;
}
.intro-thumb{max-width: 900px;}


@media (max-width: 992px){ 
    
    .page-room .section-category{

  min-height: 240px; padding-top: 50px;

}

    
    
    .page-room .intro-grid {padding-top:0;
}
    
    .page-room .intro-grid .card{ padding: 0; }
}



/* =========================================================
   カード（ノーグロー：面＋枠＋黒影）
========================================================= */


/* 本文パネル（細縁＋黒影） */
.page-room .panel{
  background: rgba(255, 255, 255, 0.08);
  border:1px solid rgba(200,220,255,.15);
  border-radius:18px; box-shadow: 0 10px 28px rgba(0,0,0,.35);
  padding: clamp(16px,2.4vw,24px);
}
.page-room .panel .lead{ color: var(--ink); line-height:1.85; }

/* =========================================================
   OVERVIEW（定義リスト）
========================================================= */

.page-room .spec{ display:grid; gap: .9rem 1.2rem; }
.page-room .spec .row{
  display:grid; grid-template-columns: 180px 1fr; gap: .8rem 1rem; align-items:start;
  padding: .6rem .75rem; /* 可読性UP */
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease;
}
.page-room .spec .row:hover{ background: rgba(255,255,255,.08); }
.page-room .spec dt{ font-weight:800; color:#EAF1FF; letter-spacing:.01em; opacity:.95; }
.page-room .spec dd{ margin:0; color: var(--ink); line-height:1.85; max-width:70ch;letter-spacing: 0.052em; }
.page-room .spec .artists .en-sub{ display:block; opacity:.72; }
.page-room .program-outline .desc{ margin:.6rem 0 0; color: var(--ink); max-width:70ch; }
.page-room .program-outline .signature{ display:inline-block; margin-left:.4em; opacity:.82; }

@media (max-width: 720px){ .page-room .spec .row{ grid-template-columns: 1fr; } .page-room .spec dt{ opacity:.9; } }

/* =========================================================
   プロフィール（2→1カラム）
========================================================= */
.page-room .profiles {
  display: grid;
  gap: clamp(15px, 2vw, 30px);
  align-items: stretch; /* ← 高さを揃える！ */
  justify-content: center;
}

/* PCデフォルト：2列固定 */
@media (min-width: 1024px) {
  .page-room .profiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1件しかない場合のみ中央1列 */
@media (min-width: 1024px) {
  .page-room .profiles:has(> .profile-card:only-child) {
    grid-template-columns: minmax(320px, 450px);
    justify-content: center;
  }
}

/* カード全体を高さ均等化（flexboxで中身を下まで広げる） */
.page-room .profile-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 中身が短いときも底まで伸びる */
  height: 100%; /* grid内で高さを揃える */
  max-width: 450px;
  margin-inline: auto;
}



/* 氏名・肩書：日英併記 */
.page-room .name{ margin:.4em 0 .2em; color:#fff; font-weight:800; font-size: clamp(18px, 2.1vw, 20px);line-height:1.25; }
.page-room .name .en{ display:inline-block; margin-left:.5em; font-weight:400; font-size: .85em; opacity:.72; letter-spacing:.02em; }
.page-room .role{ color: rgba(255,255,255,.78); font-size: clamp(13px,1.6vw,14px); margin-bottom:.4em; }
.page-room .role .en{ display:inline-block; margin-left:.5em; opacity:.72; font-size:.95em; }
@media (max-width: 560px){ .page-room .name .en, .page-room .role .en{ display:block; margin:.15em 0 0; } }

.page-room .bio, .page-room .meta{ color: var(--ink-dim); line-height:1.75; }

/* 仕切り（静か） */
.page-room .divider{ height:1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); margin: clamp(14px,2vw,18px) 0; }

/* バッジ／チップ */
.page-room .badge{ display:inline-flex; align-items:center; gap:.4em; height:28px; padding:0 .8em; border-radius:999px; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color:#fff; font-weight:700; font-size:.78rem; backdrop-filter: blur(2px); }


/* カード全体は余白ナシ（サムネを端まで） */
.card.profile-card,
.card.profile-card .thumb{
  padding: 0;margin: 0 auto;
  overflow: hidden;
}


/* テキスト部分にだけパディングを付与 */
.card.profile-card .name,
.card.profile-card .role,
.card.profile-card .bio {
  padding-inline: 1.2rem; /* 左右にゆとり */
}

.card.profile-card .name {
  margin-top: 0.8rem;
  margin-bottom: 0.2rem;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.2vw, 1.25rem);
}

.card.profile-card .role {
  color: rgba(255,255,255,.75);
  margin-bottom: 0.6rem;
}

.card.profile-card .bio {
  line-height: 1.75;
  margin-bottom: 1rem;
}

/* スマホでは少しコンパクトに */
@media (max-width: 600px) {
  .card.profile-card .name,
  .card.profile-card .role,
  .card.profile-card .bio {
    padding-inline: 1rem;
  }
}

/* =========================================================
   テーブル（読みやすく）
========================================================= */
.page-room table{ width:100%; border-collapse: collapse; }
.page-room th, .page-room td{ padding:.6em .8em; border-bottom:1px solid rgba(255,255,255,.08); color: var(--ink); }
.page-room th{ text-align:left; white-space:nowrap; opacity:.85; }

/* =========================================================
   チケット（視線誘導／カード化）
========================================================= */
.page-room .tickets-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 18px); }
@media (max-width: 820px){ .page-room .tickets-grid{ grid-template-columns: 1fr; } }

.page-room .tickets-grid .t-block{
  border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 1rem 1.2rem;
  background: rgba(255,255,255,.08); backdrop-filter: blur(4px); box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background .25s ease, transform .2s ease;
}
.page-room .tickets-grid .t-block:hover{ background: rgba(28,32,40,.92); transform: translateY(-2px); }

.page-room .tickets-grid .t-block h3{ margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.45; }
.page-room .tickets-grid .prices{ list-style:none; margin:.4rem 0 0; padding:0; }
.page-room .tickets-grid .prices li{ display:flex; align-items:baseline; gap:.5em; padding:.35rem .5rem; border-radius:8px; }
.page-room .tickets-grid .prices li:nth-child(odd){ background: rgba(255,255,255,.05); }

.page-room .tickets-grid .prices li::before{ content:"・"; color: rgba(255,255,255,.45); }
.page-room .tickets-grid .prices li strong, .page-room .tickets-grid .prices li b{ font-size:1.08em; letter-spacing:.02em; }

.page-room .notes{ margin-top:.9rem; font-size:.9rem; line-height:1.75; opacity:.7; }

.ticket-outlet-simple {
  margin-bottom: 1.5rem;
}

.outlet-heading {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--text-main);
}

.outlet-list {
  margin: 0;
  padding: 0;
}

.outlet-item {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.outlet-item:last-child {
  border-bottom: none;
}

.outlet-item dt {
  min-width: 3.5rem;
  font-weight: 600;
  color: var(--text-main);
}

.outlet-item dd {
  margin: 0;
  line-height: 1.55;
}

.outlet-item dd .sub {
  font-size: 0.85em;
  opacity: 0.75;
}


/* ========= patch: thumbnail top-only rounding ========= */



/* サムネ容器と画像は “上だけ角丸 / 下は直線” にする */
.card .thumb { 
  border-radius: 8px 8px 0 0;   /* 上左右だけ丸い */
  overflow: hidden;               /* 画像の角をクリップ */
}
.card .thumb img {
  border-radius: inherit;         /* 上だけ角丸を継承 */
}

/* 既存の「img { border-radius: inherit; }」より強い指定で確実に適用 */
.card > picture > img,
.card .media img { border-radius: 8px 8px 0 0; }


/* ===== Card thumbnail spacing tweak ===== */
.card,
.page-room .card {
  /* カード本体：余白を詰め気味に */
  padding: 0;
  overflow: hidden;
}

/* サムネの下余白を消す */
.card .thumb,
.page-room .card .thumb {
  margin-bottom: 0;
  display: block;
}



/* thumb画像をカード上辺にピタッと */
.card .thumb img,
.page-room .card .thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}

/* ===== .subnav ===== */

.subnav {
  text-align: center;
  margin: 1.6rem auto; 
  position: relative;
  z-index: 5;
}

.subnav ul {
  display: inline-flex;
  gap: 1.4rem; /* ← 自然な間隔 */
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.subnav a {
  position: relative;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
  -webkit-background-clip: text;
  color: transparent;
  padding-bottom: 0.18em;
  transition: all .3s ease;
}

/* 下線：最初は淡く、中央寄せ */
.subnav a::after {
  content: "";
  position: absolute;
  left: 15%;
  bottom: 0;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, #E1AFFF, #A6D3FF);
  opacity: 0.4;
  border-radius: 8px;
  transition: opacity .3s ease, background .3s ease;
}

/* === ホバー時 === */
.subnav a:hover {
  color: #999;
  -webkit-background-clip: border-box;
  background: none;
  text-shadow: 0 0 10px rgba(255,255,255,.55);
}
.subnav a:hover::after {
  background: rgba(255,255,255,.1);
  opacity: 1;
}

/* モバイル調整 */
@media (max-width: 600px) {
  .subnav ul {
    gap: 1rem;
  }
  .subnav a {
    font-size: 0.9rem;
  }
}

/* ===== Ticket Card (based on OVERVIEW style) ===== */
.ticket-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 2rem;
    max-width: 1000px;
  margin-inline: auto;
  margin-top: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ticket-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}
.ticket-card__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* テキストとバッジ */
.ticket-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}
.ticket-meta .badge {
  background: var(--accent);
  color: var(--base);
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.ticket-meta .when .num {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 購入ボタン（80%幅） */
.ticket-card .buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.ticket-card .buy a.btn {
  width: 80%;
  max-width: 480px;
  padding: 1rem 1.2rem;
  font-size: 1.1rem;
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
}

.ticket-card .btn--outline {
  border: 2px solid rgba(255, 255, 255, 0.85);
   color: #f5f5f5;
  background: transparent;
}
.ticket-card .btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* カウントダウン・注記 */
.ticket-card .chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}
.ticket-card .note {
 
}

/* スマホ調整 */
@media (max-width: 600px) {
  .ticket-card {
    padding: 1.5rem;
  }
  .ticket-card .buy a.btn {
    width: 100%;
    font-size: 1rem;
  }
}

/* ===== Ticket prices block ===== */
.ticket-prices {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
}
.ticket-prices__title {color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .8rem;
}
.ticket-prices__subtitle {color: var(--accent-2);
  font-size: 0.95rem;
  margin-top: 1.4rem;
  margin-bottom: .5rem;
  opacity: .9;
}
.ticket-prices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.ticket-prices__list li {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  padding: .3rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.ticket-prices__list .label {
  opacity: 0.9;
}
.ticket-prices__list .price {
  font-weight: 700;
}


/* ===== Mobile Nav enhancement ===== */
/* ===== Fullscreen Neon Nav ===== */
:root {
  --bg: #0a0a0f;
  --fg: #e9f5ff;
  --muted: #a8b3c2;
  --neon-cyan: #00e5ff;
  --neon-magenta: #ff1bf1;
  --neon-lime: #adff2f;
  --line: rgba(255,255,255,0.08);
}

.nav-overlay { position: fixed; inset: 0; display: none;}
.nav-overlay.is-open { display: block; }
.nav-dim { position:absolute; inset:0; background: rgba(0,0,0,0.6); }

.nav-panel.nav-panel--full{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 80% 20%, rgba(0,229,255,0.15), transparent 60%),
    radial-gradient(1000px 700px at 20% 80%, rgba(255,27,241,0.12), transparent 60%),
    var(--bg);
  color: var(--fg);
  display:flex; flex-direction:column;
}

/* header */
.nav-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.nav-title img{ height:28px; width:auto; display:block; filter: drop-shadow(0 0 10px rgba(0,229,255,.25)); }
.nav-close{
  appearance:none; background:none; color:var(--fg); border:none; font-size:28px; line-height:1;
  padding:6px 10px; cursor:pointer;
}

/* main list */
.nav-list{
  flex:1; overflow:auto; padding: 8px 0 32px;
}

/* row base: no rounded corners */
.nav-row{
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  padding: 18px 24px; text-decoration:none; color: var(--fg);
  border-bottom: 1px solid var(--line);
  font-size: clamp(18px, 4vw, 28px);
  letter-spacing: .02em;
  transition: color .2s ease, background .2s ease;
}
.nav-row:hover, .nav-row:focus{
  background: linear-gradient(90deg, rgba(0,229,255,0.08), transparent 60%);
  outline: none;
  color:#fff;
}
.nav-label{ font-weight:700; text-shadow: 0 0 10px rgba(0,229,255,.35); }
.nav-meta{ color: var(--muted); font-weight:500; margin-left:auto; margin-right:12px; }

/* arrow motion */
.nav-arrow{
  display:inline-block;
  transform: translateX(0);
  transition: transform .18s ease;
  text-shadow:
    0 0 8px var(--neon-cyan),
    0 0 16px var(--neon-cyan);
}
.nav-row:hover .nav-arrow{ transform: translateX(6px); }

/* groups (details/summary) */
.nav-group{ border-bottom: 1px solid var(--line); }
.nav-group > summary { list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker{ display:none; }
.nav-group[open] > summary{
  background: linear-gradient(90deg, rgba(255,27,241,0.08), transparent 60%);
}
.nav-sublist{
  display:grid; grid-template-columns: 1fr; /* モバイル1列 */
  gap: 0;
  border-top: 1px dashed var(--line);
}
.nav-subrow{
  display:block; padding: 14px 24px 14px 40px; color: var(--muted); text-decoration:none;
  border-bottom: 1px dashed var(--line);
  font-size: clamp(14px, 3.2vw, 18px);
  transition: color .2s ease, background .2s ease, text-shadow .2s;
}
.nav-subrow:hover, .nav-subrow:focus{
  color:#fff;
  background: linear-gradient(90deg, rgba(173,255,47,0.08), transparent 60%);
  text-shadow: 0 0 6px rgba(173,255,47,.6);
  outline:none;
}

/* large screens：左右2カラム感（任意） */
@media (min-width: 960px){
  .nav-list{ padding: 24px 0 48px; }
  .nav-group[open] .nav-sublist{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* focus visible */
.nav-row:focus-visible, .nav-subrow:focus-visible, summary:focus-visible{
  outline: 2px solid var(--neon-cyan);
  outline-offset: -2px;
}

/* =========================================================
   ABOUT 専用レイヤー
   ページ：<main id="about" class="page-room about-page">
========================================================= */


#about .container{width: 90%;text-align: center;margin: auto;}


.about-page{
  /* テーマカラー（夜の統一感） */
  --about-pink: #E1AFFF;
  --about-cyan: #68F3FF;
  --about-ink:  #0B1016;
  --panel-bg:  rgba(12,18,24,.58);
  --panel-bd:  rgba(255,255,255,.08);
  --panel-glow: 0 10px 40px rgba(80,180,255,.12);
}

/* ---------------- HERO（チラシビジュアル＋グラデ被せ） ---------------- */
.about-page .hero-about {
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 16vw, 260px) 0 clamp(64px, 12vw, 140px);
  text-align: center;
  overflow: clip;

  background:
    linear-gradient(90deg, rgba(10,12,16,0), rgba(10,16,22,0.5)),
    url("../img/about-img.jpg") center / cover no-repeat;
  background-attachment: scroll;
}

/* PCだけゆったり版 */
@media (min-width: 900px) {
  .about-page .hero-about {
    padding-top: clamp(200px, 20vw, 300px);
    padding-bottom: clamp(80px, 14vw, 100px);
  }
}
@media (min-width:1024px){
  .about-page .hero-about{ background-attachment: fixed; }
}


/* タイトル：日本語×英語（グラデ文字） */
.about-page .hero-about .main-title{
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .01em;
  font-size: clamp(28px, 6vw, 40px);
  margin:9rem auto .8em;
  background: linear-gradient(90deg, var(--about-pink), var(--about-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 12px 12px rgba(255,255,255,.1);
}

/* 英文サブ（下のspan） */
.about-page .hero-about .main-title span{
  display:inline-block;
  font-weight:700;
  font-size: clamp(14px, 2.6vw, 18px);
  letter-spacing: .06em;
  opacity:.9;
}

/* セクションピル（右下に小さく） */
.about-page .hero-about .section-menu{
  margin-top: clamp(12px,1.8vw,16px);
}
.about-page .hero-about .section-pill{
  display:inline-block;
  padding: .45em 1.1em;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #0C0F14;
  background: linear-gradient(135deg, var(--about-pink), var(--about-cyan));
  box-shadow: 0 6px 24px rgba(90,200,255,.25);
}

/* ---------------- 本文パネル（落ち着いた透過カード） ---------------- */
.about-page .panel{
  background: var(--panel-bg);
  border: 1px solid var(--panel-bd);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 32px) clamp(18px, 3vw, 36px);
  box-shadow: var(--panel-glow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* サイドの薄い光の縁取り（Sカーブ風の陰影） */
  position: relative;
  overflow: clip;
}
.about-page .panel::before{
  content:""; position:absolute; inset:-1px;
  background:
    radial-gradient(120% 40% at 0% 50%, rgba(225,175,255,.10), transparent 70%),
    radial-gradient(120% 40% at 100% 50%, rgba(104,243,255,.10), transparent 70%);
  mask: linear-gradient(180deg, rgba(0,0,0,.0), #000 20% 80%, rgba(0,0,0,.0));
  pointer-events:none;
}

/* 日本語本文 */
.about-page .about-body{
  width: min(920px, 100%);
  margin-inline: auto;
  color: #EAF2FF;
}
.about-page .about-body .lead{
  font-size: clamp(16px, 2.2vw, 18px);
  color: #F7FBFF;
  margin-bottom: .8em;
}
.about-page .about-body p{
  line-height: 1.9;
  font-size: clamp(15px, 2vw, 16px);
  margin: 0 0 1.1em;
  color: #DCE8F6;
}

/* 署名（右寄せ） */
.about-page .about-body .author,
.about-page .en-block .author{
  text-align: right;
  font-weight: 700;
  color: var(--about-pink);
  font-style: italic;
  letter-spacing: .03em;
  margin-top: .6em;
}

/* ---------------- 英文ブロックは少しトーン変更 ---------------- */
.about-page .en-block{
  width: min(920px, 100%);
  margin-inline: auto;
  background: rgba(14,20,28,.55);
  box-shadow: 0 12px 40px rgba(40,120,180,.10);
}
.about-page .en-block .section-ttl{
  font-weight: 900;
  font-size: clamp(18px, 3.2vw, 24px);
  margin: .2em 0 .8em;
  background: linear-gradient(90deg, var(--about-cyan), var(--about-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-page .en-block .section-ttl span{
  font-size: .9em; opacity: .85;
}
.about-page .en-block p{
  color: #E6F5FF;
}

/* ---------------- 読み易さの小技 ---------------- */
/* 段落の最初だけ行頭を少し下げる（読み物感を演出） */
@media (min-width:768px){
  .about-page .about-body p + p,
  .about-page .en-block p + p{ text-indent: 1em; }
}

/* 強調 */
.about-page .about-body strong,
.about-page .en-block strong{
  color:#fff;
  text-shadow: 0 0 10px rgba(225,175,255,.25);
  font-weight: 800;
}

/* ---------------- PageTop（ABOUTでも馴染む微調整） ---------------- */
.about-page .pagetop .pagetop-icon{
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.4))
    drop-shadow(0 0 26px rgba(225,175,255,.28))
    drop-shadow(0 0 36px rgba(104,243,255,.24));
}


.youtube-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 アスペクト比 */
  height: 0;
  overflow: hidden;
  border-radius: 12px; /* 角丸つけたい場合 */
}

.youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------- HISTORY --------------- */



.history-box,.works-box,.A-to-Z-box {max-width: 1100px;
  margin: auto;
  padding: 3.5rem 0 1.5rem;
}

.history-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* PC時は7列 */
.history-item {
  width: calc(100% / 7);
  text-align: center;
}

.history-item img {
  width: 100%;
  height: auto;
  display: block;
}

.history-item img.img-download{  width: 15px;
  height: 15px;}
.history-item img.img-caret-right{  width: 15px;
  height: 15px;}
.accordion img.img-caret-down{  width: 15px;
  height: 15px;}
.accordion img.img-caret-right{  width: 15px;
  height: 15px;}

.web-link {margin-top: 10px;
}
.flyer-link,.web-link,.accordion label img.img-caret-down{
  display: inline-flex;
  align-items: center;   /* 垂直位置を中央に揃える */
  text-decoration: none; /* 必要なら下線を消す */
}
.flyer-link .img-download,.flyer-link .img-caret-right {
  width: 15px;
  height: 15px;margin-right: 3px;
}


@media (max-width: 768px) {
 .history-box,.works-box,.A-to-Z-box {max-width:90%;
  margin: auto;
  padding: 3.5rem 0 1.5rem;
}

    .history-item {padding-top: 30px;
    width: calc(50% - 10px); /* スマホでは2列 */
  }
 
}/**/

#history h3{color: #999;line-height: 1.4;}

.ABC-artist{text-align: justify;line-height: 1.6;font-size:0.9em;color: #888;}
.ABC-artist span{padding: 0 0.2em 0 0.4em;font-weight: 700;font-size:0.95em;}
span.ABC-count{font-weight: 700;font-size:2rem;color: #038cc9;}


.ABCorder{font-size:0.8em;margin-bottom: 1em;width: 100%;}
.ABCorder a{font-size:0.9rem;line-height: 2;text-decoration: none;padding: 0 0.2em;}

.ABCorder-box{margin:0 0 1em 0 ;}
.ABCorder-midashi{text-align: left;}
.ABCorder-txt{font-size:0.8em;}


/* アーティスト名前 */
ul.artist-list{font-weight: 600;list-style: none;padding: 0;}
ul li.artist-name{font-size: 1em;padding-top: 0.5em;}
ul li.artist-name img.img-caret-right{
  display: inline-flex;
  align-items:left;   /* 垂直位置を中央に揃える */
}


/* 曲名 */
ul.artist-title{font-weight: 400;font-size: 1em;}
ul.artist-title li {font-size: 0.9em;
  list-style-type: none;
 text-indent: -0.9em;
  padding: 0 0.5em 0 0.9em;
}
ul.artist-title li:before {
  display: inline;
  content: "- ";
}

@media (max-width: 768px) {
span.ABC-count{font-size:1.2rem;}
 
}

/*------------------------------
アコーディオン
------------------------------*/

.accordion {
width: 98%;
	margin: 10px auto 40px;
	text-align: center;
}

/* チェックボックスを非表示にする */
.accordion-hidden{
  display: none;
}

/* Question部分 */
.accordion-open {
  display: block;
  padding: 0.2em 0.5em;
font-size:1em;
background: #333;color: #eee;border:1px solid #666;width: 100%;font-weight: 600;
  cursor: pointer;
  margin:0 auto;
	text-align: center;
}

/* Answer部分は最初は表示しない */
.accordion-close {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;/* 表示速度の設定 */margin:auto;

}

/* チェックボックスにチェックが入ったらAnswer部分を表示 */
.accordion-hidden:checked + .accordion-open + .accordion-close {
  height: auto;font-size: 0.9em;
  opacity: 1;	text-align: left;
  padding: 1.5em;
	line-height: 1.75;
  background: #eee;color: #444;
}


.accordion_prev {font-size:0.9rem;font-weight:400;}
.accordion_midashi {font-size:0.9rem;font-weight:600;background: #e4f9ff;padding:0.2rem 0.5rem;margin:0.5rem 0 0.5rem;}
.accordion_prof {font-size:0.8rem;font-weight:400;padding: 0 0.2rem;margin:1rem 0.5rem 0.5rem 0;background: #e4f9ff;border:1px solid #999;}




    /* ポップアップ全体の背景 */
.pst-overlay {
  display: none; /* 初期非表示 */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 1rem;
  transition: opacity 0.3s ease;
}

/* アクティブ時に表示 */
.pst-overlay.active {
  display: flex;
  opacity: 1;
}

/* ポップアップ内部 */
.pst-content {
  background: #333;
  padding: 1.5rem;
  max-width: 700px;
  width: 100%;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: pstFade 0.3s ease;
  
  /* スマホ対応：縦スクロール */
  max-height: 90vh; /* 画面高さの90%まで */
  overflow-y: auto;
}

/* 閉じるボタン */
.pst-close {
  position: absolute;
  top: 1rem;
  right: 0.5rem;
  width: 50px;
  height: 50px;
  background: #fff;
  border: 3px solid #333;
  border-radius: 50%;
  color: #333;
  font-size: 2rem;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

/* タイトル・サブタイトル */
.pst-title,
.pst-subtitle {
  border: 2px solid #ff13f0;   /* ネオンピンク寄りの鮮やかカラー */
  border-radius: 0.8rem;
  padding: 0.3rem 1rem;
  margin-top: 1rem;
  color: #fff;

  text-shadow:
    0 0 6px #ff13f0,
    0 0 14px #ff13f0,
    0 0 22px #ff13f0;

  box-shadow:
    0 0 0.1rem #ff13f0,
    0 0 0.3rem #ff13f0,
    inset 0 0 0.45rem #ff13f0;
}

/* アニメーション */
@keyframes pstFade {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* 開くボタン */
.pst-btn {
  cursor: pointer;
}


 @media (max-width: 768px) {
    
  .pst-content {
    max-width: 95%; /* 横幅を画面に合わせる */
    padding: 1rem;
  }
  .pst-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 40px;
    height: 40px;
    font-size: 1.8rem;
    line-height: 36px;
  }
  } /**/


.set-banner{width: 400px;text-align: center;
margin: auto;
  }
.set-banner img{max-width: 400px;
  }
@media (max-width: 768px) {
.set-banner{
    width: 90%; 
margin: auto;
  }
 .set-banner img{max-width: 100%;
  }
  } /**/