:root{
  --bg:#0a0a0c;
  --text:#f4f4f5;
  --muted: rgba(244,244,245,.68);
  --line: rgba(244,244,245,.16);
  --max: 1100px;
  --padX: 20px;
  --r: 14px;
}

html, body{
  width: 100%;
  overflow-x: hidden;
}

/* 変なはみ出しが起きた時の保険 */
img, svg{
  max-width: 100%;
  height: auto;
  display: block;
    -webkit-touch-callout: none; /* iOS 長押しメニュー抑制 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}


/* タイトル直下の日時 */
/* ===== nitiji：スマホ（デフォルト） ===== */
/* ===== nitiji：相対値（スマホ〜PCまで滑らか） ===== */
.nitiji{
  text-align: center;
}

/* スマホだけ上書き */
@media (max-width: 600px){
  .nitiji{
    margin-top: -350px; 
  }
}


.nitiji p{
  margin: 0;
  color: #fff;
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1.15;

  /* 最小(スマホ) → 可変 → 最大(PC=80px) */
  font-size:80px;
}

@media (max-width: 600px){
  .nitiji p{
    margin-top: 150px; 
    font-size: 32px;/* 好きに調整：16〜32くらいが無難 */
  }
}

.date-blue{
  color: yellow;
  font-weight: 950;
}

.nitiji-sub{
  display: inline-block;
  margin-top: .25em;

  /* 本文より小さく（相対） */
  font-size: 0.32em;   /* 0.28〜0.40で好みに調整 */
  letter-spacing: .12em;
  opacity: .85;
  font-weight: 800;
}



*{ box-sizing:border-box; }
body{
  margin:0;
  padding-top: 72px;

  /* ★写真背景に変更 */
  background: url("img/back.jpg") center/cover no-repeat fixed;

  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic", "Meiryo", sans-serif;
  line-height:1.85;
  position: relative;
  font-size: 16px;      /* ←全体の大きさ */
  font-weight: 1200;     /* ←全体の太さ */
}

@media (max-width: 768px){
  /* iOS対策：body直のfixed背景は使わない */
  body{
    background: #000; /* 写真外の余白色（黒が無難） */
  }

  body::before{
    content:"";
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;

    /* 9:16の箱（画面にフィットさせつつ比率維持） */
    height: 100vh;
    width: calc(100vh * 9 / 16);
    max-width: 100vw;
    max-height: calc(100vw * 16 / 9);

    background: url("img/back_media.jpg") center / cover no-repeat;
  }
}

.section-title{
  font-size: clamp(32px, 4.8vw, 40px); 
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 18px;
  font-weight: 950;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;              /* はみ出し防止 */
  white-space: nowrap; 
  position: relative;
}

.section-title .title-wrap > span{
  display: inline-block;
  padding-left: 14px;
}


.section-title::before{
  content:"";
  position:absolute;
  left:0;
  top: 0.18em;
  width: 3px;
  height: 0.9em;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
}


.section-title .under{
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.section-title .under::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  bottom: -0.10em;    /* 位置調整 */
  background: currentColor;
  opacity: .95;
}



/* JS有効時だけ、最初は隠す */
/* タイトル塊は必ずinline-block化 */
.section-title .title-wrap{
  display: inline-block;
  will-change: transform, opacity, filter;
}

/* JS有効時：初期は塊ごと左外へ */
.js .section-title .title-wrap{
  opacity: 0;
  transform: translateX(-120%);   /* ←ココ重要：pxじゃなく% */
  filter: blur(10px);
}

/* is-animatedでスライドイン */
.js .section-title .title-wrap.is-animated{
  animation: titleSlideIn 1s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes titleSlideIn{
  0%   { opacity: 0; transform: translateX(-120%); filter: blur(10px); }
  60%  { opacity: 1; transform: translateX(10px);  filter: blur(0); }
  100% { opacity: 1; transform: translateX(0);     filter: blur(0); }
}

.section-title.no-upper{
  text-transform: none !important;
}
/* =========================
   Section title: responsive
========================= */

/* 1) タブレット以下：少し詰める */
@media (max-width: 980px){
  .section-title{
    margin: 0 0 14px;
    letter-spacing: .10em;
  }
}

/* 2) スマホ：折り返しOK + 左棒の扱い調整 */
@media (max-width: 600px){
  .section-title{
    font-size: 20px;          /* ここ好みで clamp にしてもOK */
    white-space: normal;      /* ← 重要：nowrap解除 */
    line-height: 1.2;
    padding-left: 10px;       /* 左棒分の逃げ（棒残す場合） */
  }

  /* 左棒を残すなら小さくする */
  .section-title::before{
    top: .22em;
    width: 2px;
    height: .85em;
    opacity: .75;
  }

  /* spanの左パディングが強いなら弱める */
  .section-title span{
    padding-left: 10px;
  }

  /* スマホはアニメの移動量を軽く（任意） */
  .js .section-title .title-wrap{
    transform: translateX(-90%);
  }
}

/* 3) もっと小さい端末：さらに詰める */
@media (max-width: 380px){
  .section-title{
    font-size: 20px;
    letter-spacing: .01em;
  }
}


a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }



/* ===== HERO ===== */
.hero-top{ padding: 25px 0 44px; }
.hero-inner{
  width: min(var(--max), calc(100% - (var(--padX) * 2)));
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 150px;
  text-align:center;
}





.hero-logo{
  width: min(820px, 92%);
  height:auto;
  display:block;
  margin: 30px auto -40px;
}
@media (max-width: 820px){
  .hero-logo{
    width: min(820px, 90%);
    margin: 0 auto -10px;
  }
  .hero-inner{
    margin-top: 100px;
  }
}
/* 既存はそのままでOK */

/* スマホだけ SNS_real を大きくする */
@media (max-width: 820px){
  .hero-logo--sns{
    width: min(820px, 92%);   /* 外枠はそのままでもOK */
    transform: scale(1.25);   /* ←ここを 1.15〜1.5で調整 */
    transform-origin: center top;
    margin: 10px auto -10px;  /* 拡大でズレる分を調整 */
  }
}


.hero-logo2{
  width: min(820px, 30%);
  height:auto;
  display:block;
  margin: 0 auto 0px;
}
@media (max-width: 600px){
  .hero-logo2{
    width: min(820px, 60%);
    margin: 0 auto 20px;
  }
}

.hero-sub{
  margin: 0 0 16px;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 12px;
}
.hero-meta{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pill{
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing:.06em;
  background: rgba(255,255,255,.06);
}
.hero-actions{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 950;
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.btn-fill{
  background: #fff;
  color:#000;
  border-color: #fff;
}
.btn:hover{ text-decoration:none; }

/* ===== Sticky Header ===== */
/* ===== FIXED HEADER ===== */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(10,10,12,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}


.header-inner{
  width: min(var(--max), calc(100% - (var(--padX) * 2)));
  margin: 0 auto;
  height: 72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

@media (max-width: 720px){
  .header-inner{
    height: 32px;
    font-size: 8px;
  }
}

/* mini brand */
.brand-mini{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 160px;
}
.brand-dot{
  width: 10px; height:10px;
  border: 1px solid var(--text);
  border-radius: 999px;
}
.brand-text{
  font-weight: 950;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text);
}

/* Desktop nav（等間隔） */
.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
  width: min(720px, 100%);
}
.nav a{
  flex: 1;
  text-align:center;
  font-size: 13px;
  letter-spacing: .14em;
  font-weight: 900;
  color: var(--muted);
  padding: 10px 6px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav a:hover{
  color: var(--text);
  text-decoration:none;
  border-bottom-color: var(--text);
}
.nav-cta{
  flex: 0 0 auto;
  margin-left: 10px;
  background:#fff;
  color:#000;
  border: 1px solid #fff;
  padding: 10px 14px;
  border-radius: 999px;
  letter-spacing: .12em;
}
.nav-cta:hover{ border-bottom-color: transparent !important; }

/* Mobile toggle */
.nav-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  padding: 10px;
}
.nav-toggle span{
  display:block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
/* ===== Floating SNS ===== */
.sns-float{
  position: fixed;
  top: 88px;     /* ヘッダー(72px)の下に出したいならこのくらい */
  left: 14px;
  z-index: 120;  /* headerより上にしたいなら headerより大きく */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sns-float-btn{
  width: 70px;
  height: 70px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: transparent;
  backdrop-filter: blur(10px);
}

.sns-float-btn:hover{
  transform: translateY(-1px);
  text-decoration: none;
  opacity: .92;
}

/* スマホは少し小さく */
@media (max-width: 720px){
  .sns-float{ top: 80px; left: 10px; }
  .sns-float-btn{ width: 40px; height: 40px; border-radius: 12px; }
}


/* ===== PCではdrawer/overlay非表示 ===== */
.drawer{ display:none; }
.overlay{ display:none; }

/* ハンバーガーが×になる */
.site-header.is-open .nav-toggle span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.site-header.is-open .nav-toggle span:nth-child(2){ opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}


/* ===== Mobile ===== */
@media (max-width: 980px){
  .nav{ display:none; }
  .nav-toggle{ 
    display:flex; 
    height: 32px;
    width: 32px;
  }
  .hero-top{ padding: 48px 0 34px; }

  .overlay{
    display:block;
    position: fixed;
    inset: var(--headerH) 0 0 0;  
    background: rgba(0,0,0,.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 55;
  }
  .site-header.is-open .overlay{
    opacity: 1;
    pointer-events: auto;
  }

  .drawer{
    display:block;
    position: fixed;
    top: var(--headerH);          
    right: 0;
    height: calc(100dvh - var(--headerH));
    width: min(50vw, 320px);
    background: rgba(10,10,12,.92);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 60;
    padding: 14px;
    overflow: auto;
  }
  .site-header.is-open .drawer{
    transform: translateX(0);
  }

  .drawer-nav{
    display:flex;
    flex-direction: column;
    gap: 10px;
  }
  .drawer-nav a{
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-weight: 950;
    letter-spacing:.14em;
    font-size: 10px;
    color: var(--text);
    background: rgba(255,255,255,.06);
  }
  .drawer-cta{
    background:#fff;
    color:#000;
    border-color:#fff;
  }
}


/* 仮の本文見やすく */
.dummy{
  padding: 40px 20px;
}
.dummy section{
  width: min(var(--max), calc(100% - (var(--padX) * 2)));
  margin: 0 auto 48px;
  padding: 28px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.dummy h2{
  margin:0;
  font-size: 18px;
  letter-spacing: .14em;
}

.brand-logo{
  height: 40px;   /* 好きに調整 */
  width: auto;
  display:block;
}

@media screen {
  .brand-logo{
    height: 20px;
  }
}


/* ===== MAIN: 独立した白い面 ===== */
.main{
  padding: 32px 32px 88px;
}

.main-inner{
  width: min(980px, calc(100% - 56px));
  margin: 0 auto 80px;

  /* ★箱を消す */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;

  /* 文字色は白ベースに戻す */
  color: var(--text);
}


/* セクションの基本 */
.section{
  padding: 44px 22px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.section:first-child{ border-top: none; }

.kicker{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  text-align: center;
}



@keyframes titleJoin{
  to{
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* 動き苦手設定の人には止める */
@media (prefers-reduced-motion: reduce){
  .section-title .char{
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* 概要カード */
.card{
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 18px;
  background: transparent;
  color:#fff
}

.lead{
  margin: 0 0 14px;
  color: #fff;
  line-height: 1.9;
}

@media (max-width: 720px){
  .lead{
    font-size: 12px;
  }
}


/* DATE/OPEN/VENUE */
.info{
  margin: 0;
  padding: 0;
}
.info .row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}
.info .row:first-child{ border-top: none; }
.info dt{
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}
.info dd{
  margin: 0;
  font-weight: 800;
  color: rgba(0,0,0,.88);
}

/* 概要 */
.card--summarybg{
  letter-spacing: .12em; 
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.summary-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 18px 30px;
  font-size: 17px;
  min-width: 280px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  letter-spacing: .08em;
  font-weight: 700;
  transition: transform .2s ease, background-color .2s ease;
  background: transparent;
}

@media (max-width: 480px){
  .summary-cta{
    padding: 12px 12px;
    font-size: 15px;
  }
}

.summary-cta:hover{
  transform: translateY(-1px);
  background: transparent;
}

/* 画像ギャラリー（2列） */
.summary-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
  align-items: start;
}

/* 画像共通 */
.summary-img{
  width: 100%;
  max-width: 420px;      /* 好きに調整 */
  height: auto;
  display: block;
  border-radius: 12px;  /* 好み */
}


/* 奇数枚で最後の1枚が余る時も中央寄せ */
.summary-gallery > .summary-img:last-child:nth-child(odd){
  grid-column: 1 / -1;
  justify-self: center;
}

/* スマホは1列 */
@media (max-width: 640px){

  .summary-img{
    width: 100px;
    display: block;
  }

}



/* 文字を暗幕より前に */
.card--summarybg > *{
  position: relative;
  z-index: 1;
}

/* もし lead が暗い色指定になってたら上書き */
.card--summarybg .lead{
  color: rgba(255,255,255,.92);
}
.card--summarybg .muted{
  color: rgba(255,255,255,.72);
}



/* 見出し部分（クリック領域） */
.summary-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;

  padding: 18px 18px;
  cursor: pointer;
  user-select: none;

  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
}

.summary-title{
  font-weight: 950;
  letter-spacing: .16em;
  font-size: 60px;
  text-align: center;
  width: 100%;
}

/* スマホだけ 24px */
@media (max-width: 600px){
  .summary-title{
    font-size: 24px;
  }
}


.summary-acc > summary{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 右側のアイコン（＋→× みたいな動き） */
.summary-icon{
  width: 18px;
  height: 18px;
  position: relative;
  flex: 0 0 18px;
}
.summary-icon::before,
.summary-icon::after{
  content:"";
  position:absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: rgba(0,0,0,.75);
  transform: translateY(-50%);
  border-radius: 2px;
}
.summary-icon::after{
  transform: translateY(-50%) rotate(90deg);
  transition: transform .2s ease, opacity .2s ease;
}

/* 開いたら「＋」の縦棒を消して「−」に */
.summary-acc[open] .summary-icon::after{
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

/* 展開部分（カード） */
.summary-body{
  margin-top: 12px;
  border-radius: 16px;
}

/* ふわっと出る（detailsの中は高さアニメが難しいのでopacityで） */
.summary-acc .summary-body{
  animation: summaryFade .25s ease both;
}
@keyframes summaryFade{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* フォーカス見やすく */
.summary-head:focus{
  outline: 2px solid rgba(40,120,255,.55);
  outline-offset: 3px;
}


/* モバイル */
@media (max-width: 720px){
  .main-inner{
    width: calc(100% - 32px); /* 左右16px */
  }
}

/* ===== Artists Grid ===== */
/* ===== Artists: 背景統一（カード背景なし） ===== */
.artists-grid{
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* PC: 2×2 */
  gap: 18px;
  max-width: 920px;
}

.artist-logo{
  width: 120px;     /* ← まずはここを触る */
  max-width: 100%;
  justify-content: center;
  height: auto;
  margin-bottom: 12px;
  opacity: .9;
  margin-bottom: 2em;
}


.artist-logo2{
  width: 180px;        /* ← まずはここを触る */
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
  opacity: .9;
  margin-bottom: 2em;
}

@media (max-width: 720px) {
  .artist-logo{
    justify-self: center;
    width: 80px;
  }
  .artist-logo2{
    justify-self: center;
    width: 120px;
  }
}


.artist-item{
  text-align: center;
}
/* スマホ用：写真の下にロゴ */
.artist-logo-sp{
  display: none; /* デフォルトは非表示（=PC） */
}

@media (max-width: 768px){
  .artist-photo{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; 
    gap: 10px; /* 写真とロゴの間 */
  }

  .artist-logo-sp{
  display: block;
  width: min(200px, 64%);   /* ← ここで小さく（好みで 180〜220px） */
  height: auto;
  margin: 10px auto 0;      /* ← これが中央寄せの本体 */
  justify-self: center;
}


}

/* 右上の＋ボタン */
.artist-plus{
  position: absolute;
  top: 12px;
  right: 12px;

  width: 38px;
  height: 38px;
  border-radius: 16px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;
}

.artist-plus:hover{ opacity: .92; }
.artist-plus:active{ transform: scale(.96); }

/* スマホで少し大きくして押しやすく */
@media (max-width: 768px){
  .artist-plus{
    width: 44px;
    height: 44px;
    font-size: 24px;
    top: 190px;
    right: 10px;
  }
}

/* 画像だけ“額縁っぽく”整える（背景は作らない） */
.artist-img{

  width: 100%;
  aspect-ratio: 1 / 1;      /* 正方形で統一（好みで 4/3 や 16/10 に） */
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  display: block;
}

/* 名前はメインと同じ白背景の上にそのまま */
.artist-name{
  margin: 10px 0 0;
  font-weight: 950;
  letter-spacing: .06em;
  font-size: 14px;
  color:#fff;
}

/* スマホ：写真の下の名前（button） */
.artist-name-sp{
  display: none;              /* デフォは非表示（PCは出さない） */
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: #000;
  backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 950;
  letter-spacing: .10em;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 768px){
  .artist-name-sp{
    display: block;
  }
}

.modal-title-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-logo{
  height: 28px;     /* 好きに調整OK */
  width: auto;
  object-fit: contain;
  display: none;    /* JSでsrc入った時だけ表示 */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); /* お好み */
}

#modalTitle{ display:none; }


/* ===== Artists layout ===== */

.artists-list{
  display: grid;
  gap: 56px;
}

/* PC：左写真 / 右ロゴ+説明 */
.artist-row{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  align-items: start;
}

/* 写真枠（比率固定 + トリミング） */
.artist-photo{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
}

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

/* ロゴ */
.artist-text .artist-logo,
.artist-text .artist-2logo{
  display: block;
  max-width: 320px;
  height: auto;
  margin: 0 0 12px;
}



/* 説明（共通） */
.artist-desc{
  font-size: 14px;
  line-height: 1.9;
  opacity: .85;
}

/* PC：短文/MOREは不要、長文 */
.artist-desc--teaser{ display:none; }
.artist-more{ display:none; }
.artist-desc--full{ display:block; }

/* ===== SP（スマホ）：写真 → ロゴ → teaser → MORE ===== */
@media (max-width: 768px){
  .artists-list{ gap: 24px; }

  .artist-row{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* スマホ正方形にしたい場合 */
  .artist-photo{
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }

  .artist-text{
    display: grid;
    gap: 10px;
  }

  .artist-desc--full{ display:none; }
  .artist-desc--teaser{
    display:block;
    margin: 0;
    line-height: 1.75;
    opacity: .9;
  }

  .artist-more{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    padding: 10px 16px;
    background: rgba(0,0,0,.25);
    color: inherit;
    letter-spacing: .12em;
    font-weight: 900;
  }
}





.artist-name-btn{
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-weight: 950;
  letter-spacing: .06em;
  font-size: 14px;
  color:#eee;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.artist-name-btn:hover{ opacity: .85; }

/* ===== Modal ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.modal.is-open{ display: block; }

.modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.modal-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100% - 32px));
  background: #000;
  color: #fff;
  border-radius: 18px;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 1px rgba(40,120,255,.35),
    0 28px 90px rgba(0,0,0,.45),
    0 0 50px rgba(40,120,255,.22);
  overflow: hidden;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.modal-media{
  aspect-ratio: 16 / 9;
  background: #eee;
}
.modal-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-body{ padding: 18px 18px 22px; }
.modal-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .06em;
}
.modal-desc{
  margin: 0;
  line-height: 1.9;
  font-size: 14px;
}

.modal.is-open .modal-panel{
  animation: pop .18s ease-out;
}
@keyframes pop{
  from{ transform: translate(-50%, -48%) scale(.98); opacity: 0; }
  to  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Location */
.map-embed{
  margin-top: 14px;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
}

/* 16:9で固定（スマホでも横スクロ出ない） */
.map-embed iframe{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  height:auto;
}

.loc-meta{
  margin-top: 12px;
  display:flex;
  justify-content:center;
}

.loc-link{
  display:inline-block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 12px;
  background: rgba(255,255,255,.08);
}
.loc-link:hover{ text-decoration:none; opacity:.9; }
@media (max-width: 720px){
  .loc-meta{
    font-size: 16px;
  }
  .loc-link{
    width: 600px;
  }
}
/* もし lead / muted がまだ無ければ */
.muted{ color: var(--muted); }

/* Ticket（中央寄せ＆大きめ） */

#ticket{
  text-align: center;
}
.ticket-card{
  text-align: center;
}

.ticket-head{
  background: #0b0b0b;
  color: #fff;
  border-radius: 14px;
  padding: 16px 12px;
  margin-bottom: 18px;
}

.ticket-head-title{
  margin: 0;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 14px;
}

.ticket-prices{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 auto 22px;
  width: min(760px, 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.price-box{
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 12px;
  background: rgba(255,255,255,.06);
}

.price-label{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(0,0,0,.88);
}

.price-value{
  margin: 0;
  font-weight: 950;
  font-size: 22px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.ticket-sale{
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.sale-kicker{
  margin: 0 0 6px;
  font-weight: 950;
  text-transform: uppercase;
  font-size: 24px;
}

@media (max-width: 720px){
  .sale-kicker{
    font-size: 16px;
  }
}

.sale-date{
  margin: 0 0 12px;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .08em;
}

.sale-link{
  display: inline-block;   /* ←横並びにする本体 */
  vertical-align: middle;
  margin: 12px 10px;       /* 間隔 */
  text-align: center;
  overflow: hidden;
}


@media (max-width: 600px){
  .sale-link{
    display: block;       /* ←縦一列 */
    margin: 12px auto;    /* ←中央寄せ */
    width: fit-content;   /* ←中身サイズに合わせて中央 */
  }
}


.sale-link:hover{ text-decoration:none; opacity:.92; }

.sale-link-img{
  display: block;
  height: 144px;     /* ボタン高さで揃える */
  width: auto;
  object-fit: contain;
}



/* スマホ：価格は縦並びに */
@media (max-width: 720px){
  .ticket-prices{
    grid-template-columns: 1fr;
  }
  .price-value{ font-size: 12px; }
  .pripri{
    font-size: 10px;
  }
  .sale-link-img{
  display: block;
  height: 80px;     /* ボタン高さで揃える */
  width: auto;
  object-fit: contain;
}

}

/* SNS */
.sns-card{ text-align:center; }

.sns-lead{
  margin: 0 0 14px;
  font-weight: 900;
  letter-spacing: .08em;
}

.sns-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* PC: 2列 */
  gap: 12px;
  width: min(820px, 100%);
  margin: 0 auto 16px;
}

.sns-btn{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 16px 12px;
  background: rgba(255,255,255,.02);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
}

.sns-icon{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sns-label{
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}

.sns-handle{
  color: rgba(0,0,0,.65);
  font-weight: 800;
  font-size: 12.5px;
}

.sns-btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.sns-share{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}

.share-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: #0b0b0b;
  color:#fff;
  border-radius: 999px;
  padding: 12px 14px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
}

.share-btn:hover{ opacity:.92; text-decoration:none; }

.sns-note{
  margin: 8px 0 0;
  color: rgba(0,0,0,.65);
  font-weight: 800;
}

.tag{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  font-weight: 950;
  letter-spacing: .08em;
}

/* スマホ：1列 */
@media (max-width: 720px){
  .sns-grid{ grid-template-columns: 1fr; }
}


/* JS無効でも見えるように（デフォで表示） */
.reveal{ opacity: 1; transform: none; }

/* JSが有効な時だけ最初は隠す */
.js .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.js .reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ===== EBメッセージ：写真グリッド ===== */
.people-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* PC: 6列 */
  gap: 12px;
}

.person{
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  color: inherit;
}

.person-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  display: block;
  transition: transform .18s ease, box-shadow .18s ease;
}

.person-name{
  display: block;
  margin-top: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person:hover .person-img{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

@media (max-width: 980px){
  .people-grid{ grid-template-columns: repeat(4, 1fr); } /* タブ/スマホ大: 4列 */
}
@media (max-width: 520px){
  .people-grid{ grid-template-columns: repeat(3, 1fr); } /* スマホ: 3列 */
}

/* ===== モーダル ===== */
.msg-modal{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;              /* 初期は非表示 */
}

.msg-modal.is-open{ display: block; }

.msg-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  border: 0;
}

.msg-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100% - 36px));
  max-height: calc(100dvh - 36px);

  background: #000;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  padding: 18px 18px 22px;
  overflow: auto;

  /* 閉じてる状態（少し下＆透明） */
  transform: translate(-50%, -50%) translateY(18px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

.msg-modal.is-open .msg-panel{
  transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}


.msg-modal.is-open .msg-panel{
  transform: translateX(0);
  opacity: 1;
}

.msg-close{
  position: sticky;
  top: 0;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  font-size: 18px;
  cursor: pointer;
}

.msg-head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.msg-avatar{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
}

.msg-name{
  margin: 0;
  font-weight: 950;
  letter-spacing: .10em;
}

.msg-sub{
  margin: 4px 0 0;
  opacity: .6;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.msg-text{
  margin: 14px 0 0;
  line-height: 1.9;
  letter-spacing: .02em;
  white-space: pre-line; /* \n を改行として表示 */
}

/* ===== Shooting Star (on load) ===== */
.shooting-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.shooting-star{
  position: absolute;

  /* 星ごとの値（JSで上書きする） */
  top: var(--y, 12%);
  left: var(--x, 110%);

  width: 220px;
  height: 2px;
  border-radius: 999px;

  /* 形（頭/尾）はここ。今のままでOKなら触らない */
  background: linear-gradient(to left,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.55) 35%,
    rgba(255,255,255,0) 100%
  );

  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
  opacity: 0;

  /* 傾き（/ にしたいなら rotate の符号を調整） */
  transform: rotate(var(--rot, -600dg));

  animation: shooting-rtl var(--dur, 1.1s) ease-out var(--delay, .25s) 1 both;
}

@keyframes shooting-rtl{
  0%   { transform: translate3d(0,0,0) rotate(var(--rot, 60deg)) scaleX(.4); opacity: 0; }
  10%  { opacity: 1; }
  85%  { transform: translate3d(-180vw, 40vh, 0) rotate(var(--rot, -2deg)) scaleX(1.2); opacity: 1; }
  100% { transform: translate3d(-180vw, 40vh, 0) rotate(var(--rot, -2deg)) scaleX(.12); opacity: 1; } /* 残す */
}


/* 端末が「動き少なめ」なら無効化 */
@media (prefers-reduced-motion: reduce){
  .shooting-star{ animation: none; display:none; }
}


/* ===== Floating Star (on load) ===== */
.float-star-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;              /* noiseより上にしたいならこのまま */
  overflow: hidden;
}

.float-star{
  position: absolute;
  left: 50%;
  top: 22%;                /* 出現位置：上寄せ。好みで調整 */
  width: 120px;
  aspect-ratio: 1 / 1;

  /* 5角星 */
  background: #fff;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  opacity: 0;
  transform: translate(-50%, 18px) scale(.85);
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.35))
    drop-shadow(0 0 32px rgba(255,255,255,.18));

  animation: floatStar 1.2s cubic-bezier(.2,.9,.2,1) .15s 1 both;
}

@keyframes floatStar{
  0%   { opacity: 0; transform: translate(-50%, 26px) scale(.7); }
  40%  { opacity: 1; transform: translate(-50%, 0px)  scale(1.0); }
  70%  { opacity: 1; transform: translate(-50%, -10px) scale(1.03); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(.98); }
}

@media (prefers-reduced-motion: reduce){
  .float-star{ animation: none; display:none; }
}


.coming-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.coming-box{
  position: relative;
  aspect-ratio: 16 / 9;     /* ←ここ！16:9に統一 */
  min-width: 0;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(10px);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
}

/* 画像を入れても箱にピッタリ（トリミング） */
.coming-box img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキストは画像の上に */
.coming-text{
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .9;
  font-size: clamp(14px, 3.2vw, 18px);
}

@media (max-width: 900px){
  .coming-grid{
    grid-template-columns: 1fr; /* スマホは縦1列 */
    /* width:200px; は入れない */
  }
}

/* ===== Gallery Lightbox ===== */
.gmodal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.gmodal.is-open{ display: grid; place-items: center; }

.gmodal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}

.gmodal-panel{
  position: relative;
  width: min(92vw, 980px);
  max-height: 86vh;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,10,12,.55);
}

.gmodal-img{
  display: block;
  width: 100%;
  height: 86vh;
  max-height: 86vh;
  object-fit: contain; /* 切らずに収める */
}

.gmodal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* モバイルでタップしやすく */
@media (max-width: 900px){
  .gmodal-panel{ width: 94vw; }
  .gmodal-close{ width: 46px; height: 46px; font-size: 28px; }
}


.coming-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 横2列 */
  gap: 16px; /* 重ならない間隔 */
  width: 100%;
}

/* news内のリンクに🔗を付ける */
#news .news-excerpt a::before{
  content: " 📍";
  display: inline-block;
  margin-left: .25em;
  opacity: .85;
  transform: translateY(-1px);
}


.news-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* PC: 3列 */
  gap: 14px;
}

.news-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(10px);
  text-decoration: none;
  min-width: 0;
}


.news-list{
  list-style: none;
  padding: 0;
  margin: 18px auto 0;
  width: min(920px, 100%);
  border-top: 1px solid rgba(255,255,255,.18);
  text-align: center;
}

.news-item{
  padding: 22px 10px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.news-title{
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;

  text-decoration: underline;
  text-underline-offset: 6px;  /* 下線を少し下げる */
  text-decoration-thickness: 2px; /* 太さ */
}

.news-title.no-upper{
  text-transform: none !important;
}


.news-excerpt{
  margin: 0 auto 14px;
  max-width: 780px;
  line-height: 1.9;
  letter-spacing: .04em;
  opacity: .92;
}

.news-more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  letter-spacing: .12em;
  font-weight: 900;
  text-decoration: none;
}

.news-more:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
/* =========================
   NEWS – smartphone: app-like (NO HTML change)
   ========================= */
@media (max-width: 768px){

  /* 既存：中央寄せをスマホでは左寄せに（レイアウト自体はそのまま） */
  #news .news-list{
    text-align: left;
    width: min(920px, 100%); /* 今の幅ルールを尊重 */
  }

  /* 出典（news-title）を “見出しっぽく” 小さめに */
  #news .news-title{
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: none;          /* SPICE / avex EB とかは自然表記 */
    opacity: .92;

  
  }

  /* 本文ブロックの余白を詰める */
  #news .news-excerpt{
    margin: 0;                     /* いま 0 auto 14px なのでスマホは詰める */
    max-width: none;
    line-height: 1.65;
    letter-spacing: .02em;
    content: " 📍";
  }

  /* 本文（a）を “2〜3行で … ” にする */
  #news .news-excerpt a{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;         /* 2行にしたければ 2 */
    font-size: 10px;
    








    /* 既存で a の装飾を消してるならそのままでOK。
       下線が欲しいなら下の1行を有効化 */
    /* text-decoration: underline; */
    text-underline-offset: 3px;

    /* クリックできる感：タップ範囲少し広げる */
    padding: 2px 0;
  }

}



.site-footer{
  padding: 28px 16px;
  text-align: center;
  color: rgba(255,255,255,.75);
  border-top: 1px solid rgba(255,255,255,.12);
}

.site-footer p{
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase; /* いらなければ消してOK */
}

/* PC: 右端に貼り付け（縦） */
.ticket-float{
  position: fixed;
  font-size: small;
  z-index: 300;
  right: 0;
  top: 80%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* ボタン本体（PC） */
.ticket-float__btn{
  display: grid;
  place-items: center;

  width: 56px;          /* ←縦書きなので幅が先 */
  height: 200px;        /* ←高さ */
  padding: 12px 10px;

  border-radius: 14px 0 0 14px; /* 右端にくっつく */
  border: 1px solid rgba(255,255,255,.25);
  border-right: 0;
  background: rgba(10,10,12,.70);
  backdrop-filter: blur(10px);

  color: #fff;
  font-weight: 950;

  /* ✅ 縦書き */
  writing-mode: vertical-rl;
  text-orientation: mixed; /* 日本語は立つ / 英数は横向きになりがち */
}

.ticket-float__btn:hover{
  transform: translateX(-2px);
  text-decoration: none;
  opacity: .95;
}

/* SP: 下固定（角丸なし・横書きに戻す） */
@media (max-width: 768px){
  .ticket-float{
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    gap: 0;
    align-items: stretch;
  }

  .ticket-float__btn{
    width: 100%;
    height: 56px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    box-shadow: none;

    /* ✅ スマホは横書き */
    writing-mode: horizontal-tb;
  }

  body{
    padding-bottom: 60px;
  }
}

/* ===== TIMETABLE ===== */
.timetable-card{
  max-width: 600px;
  margin: 0 auto;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(10px);
}

.tt{
  margin: 0;
  padding: 0;
}

.tt-row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 6px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.tt-row:first-child{ border-top: 0; }

.tt-time{
  margin: 0;
  font-weight: 950;
  letter-spacing: .14em;
  white-space: nowrap;
  opacity: .95;
}

.tt-item{
  margin: 0;
  font-weight: 850;
  letter-spacing: .06em;
  opacity: .92;
}

.tt-note{
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: .10em;
  opacity: .72;
}

/* スマホは詰める */
@media (max-width: 600px){
  .timetable-card{
    border-radius: 0;                 /* ←スマホは丸みいらない流れなら */
    border-left: 0;
    border-right: 0;
  }

  .tt-row{
    grid-template-columns: 86px 1fr;
    gap: 10px;
    padding: 12px 4px;
  }

  .tt-time{ font-size: 12px; }
  .tt-item{ font-size: 12px; }
}
/* =========================
   HOW TO ENJOY (enjoy only)
   - PC/SP: 2 columns
   - Even rows: reversed (keeps your original)
   - Star image
   - Slide-in animation (odd: left, even: right)
========================= */

#enjoy .enjoy-steps{
  display: grid;
  gap: 22px;
  max-width: 920px;
  margin: 0 auto;
}

#enjoy .enjoy-step{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: center;

  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  overflow: visible;

  margin-top: 60px;

  /* アニメ初期状態（JSでis-inを付ける） */
  opacity: 0;
  transform: translateX(-28px);
  filter: blur(6px);
  transition:
    opacity .7s cubic-bezier(.2,.9,.2,1),
    transform .7s cubic-bezier(.2,.9,.2,1),
    filter .7s cubic-bezier(.2,.9,.2,1);
  will-change: transform, opacity, filter;
}

/* 偶数は右から出てくる */
#enjoy .enjoy-step:nth-child(even){
  grid-template-columns: 1fr 240px; /* 左=文章 右=画像 */
  transform: translateX(28px);      /* 初期は右に */
}

/* 偶数の並び替え */
#enjoy .enjoy-step:nth-child(even) .enjoy-media{ order: 2; }
#enjoy .enjoy-step:nth-child(even) .enjoy-text{ order: 1; }

/* 表示状態 */
#enjoy .enjoy-step.is-in{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

/* ===== Star media ===== */
/* 星形（太め） */
#enjoy .enjoy-media{
  aspect-ratio: 1 / 1; /* 星は正方形の方が安定 */
  overflow: hidden;
  border-radius: 0;
  -webkit-clip-path: polygon(
    50% 3%,
    64% 34%,
    98% 38%,
    72% 60%,
    82% 96%,
    50% 76%,
    18% 96%,
    28% 60%,
    2% 38%,
    36% 34%
  );
  clip-path: polygon(
    50% 3%,
    64% 34%,
    98% 38%,
    72% 60%,
    82% 96%,
    50% 76%,
    18% 96%,
    28% 60%,
    2% 38%,
    36% 34%
  );
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
}
#enjoy .enjoy-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



#enjoy .enjoy-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== text ===== */
#enjoy .enjoy-text{
  padding: 0;
  text-align: left;
  min-width: 0;
}

#enjoy .enjoy-time{
  margin: 0 0 10px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 14px;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#enjoy .enjoy-desc{
  margin: 0;
  line-height: 1.95;
  letter-spacing: .04em;
  opacity: .92;
  font-weight: 800;
  min-width: 0;
}

/* ===== Tablet ===== */
@media (max-width: 980px){
  #enjoy .enjoy-steps{ gap: 18px; }

  #enjoy .enjoy-step{
    grid-template-columns: 190px 1fr;
    gap: 14px;
    align-items: start;
  }

  #enjoy .enjoy-step:nth-child(even){
    grid-template-columns: 1fr 190px;
  }

  #enjoy .enjoy-time{
    font-size: 13px;
    letter-spacing: .14em;
  }

  #enjoy .enjoy-desc{
    font-size: 12px;
    line-height: 1.85;
  }
}

/* ===== Small phones ===== */
@media (max-width: 520px){
  #enjoy .enjoy-step{
    grid-template-columns: 130px 1fr;
    gap: 12px;
  }
  #enjoy .enjoy-step:nth-child(even){
    grid-template-columns: 1fr 130px;
  }
  #enjoy .enjoy-desc{ font-size: 11px; }
}


.music-section{
  margin-top: 26px;
}

.music-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.music-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}

.music-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
}

.music-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}

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

.music-play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 44px;
  opacity: .9;
  text-shadow: 0 8px 28px rgba(0,0,0,.65);
}

.music-cap{
  margin: 0;
  padding: 10px 12px 12px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  font-size: 14px;
  opacity: .95;
}

/* ===== YouTube Embed Grid ===== */
.music-section{
  margin-top: 26px;
}

.yt-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.yt-item{
  min-width: 0;
}

.yt-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.yt-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.yt-cap{
  margin: 0;
  padding: 10px 12px 12px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.35;
  font-size: 14px;
  opacity: .95;
}

/* スマホも2列で行きたい（崩れにくくする） */
@media (max-width: 480px){
  .yt-grid{ 
    gap: 12px;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .yt-embed{ border-radius: 10px; }
  .yt-cap{ font-size: 12px; padding: 8px 10px 10px; }
}

/* もし「超小さい端末だけ1列」にしたいならこれをON
@media (max-width: 360px){
  .yt-grid{ grid-template-columns: 1fr; }
}
*/



@media (max-width: 768px){
  .music-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ←2列 */
    gap: 12px;                                       /* ←スマホは少し詰める */
  }

  .music-card{ border-radius: 12px; }                /* 0だと角が死ぬので戻す */
  .music-cap{ font-size: 12px; padding: 8px 10px 10px; }
  .music-play{ font-size: 38px; }
}

/* 改行位置を固定する */
.fixed-lines .line{
  display:block;
  white-space:nowrap;   /* ← これで“勝手な折り返し”を禁止 */
}

/* 空行の高さ（段落間） */
.fixed-lines .blank{
  line-height: 1.6;
}

/* スマホは文字サイズを少し下げて、はみ出しを起こしにくくする */
@media (max-width: 480px){
  .concept-text{
    font-size: 12px;   /* 好みで 13〜15 くらい */
  }
}
.concept-fit{
  display: flex;
  justify-content: center;
}

.concept-fit__inner{
  transform-origin: top center;
  will-change: transform;
}

/* このリンクだけ下線を出す（a共通の下線OFFを上書き） */
a.link-underline,
a.link-underline:visited{
  text-decoration: underline;
  text-underline-offset: .18em;   /* 下線の位置ちょい下げ */
  text-decoration-thickness: .08em; /* 太さ */
  color: inherit;                 /* 色はサイトに馴染ませる */
}

a.link-underline:hover{
  text-decoration-thickness: .12em; /* hoverでちょい強く */
}