@charset "UTF-8";
/* =========================================================
   Groove-Method LIVE 2026 - style.css
   Bootstrap 5.3 (CDN) をベースに、カスタムのテーマ / レイアウトを定義。
   モバイルファースト。PCは @media (min-width:768px) で拡張。
   カラーは :root のCSS変数で一元管理（デザイン確定後にここを調整）。
   ========================================================= */

:root {
  --c-red:    #cd2a09;
  --c-orange: #ef7f10;
  --c-yellow: #f8ba00;
  --c-dark:   #1a1a1a;
  --c-text:   #2e2e2e;
  --c-bg:     #ffffff;
  --c-cream:  #f0e9d7;  /* 背景クリーム（Figma実測） */
  --c-line:   #e5ddcd;
  --grad-main: linear-gradient(100deg, var(--c-yellow) 0%, var(--c-orange) 48%, var(--c-red) 100%);
  --grad-red:  linear-gradient(100deg, var(--c-orange) 0%, var(--c-red) 100%);

  --ff-en: "Figtree", sans-serif;
  --ff-jp: "Zen Kaku Gothic New", sans-serif;

  /* カード類の共通グラデーション＆面取り（Figma実測 30×40px） */
  --grad-card: linear-gradient(100deg, #f8ba00 0%, #e27204 50%, #cd2a09 100%);
  --chamfer: polygon(30px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 30px) 100%, 0 100%, 0 40px);

  --inner: 900px;       /* CONTENTS カラム幅（Figma 900） */
  --header-side: 120px; /* PC 右ナビの幅 */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }
section[id] { scroll-margin-top: 64px; }
main { position: relative; }

/* ページ右側を貫く背景装飾（ベース）。Figma 背景:1:44 (w355 → 右端フラッシュ)
   head=ベース本体(黄 #eeb417)、body=以降をグラデーションで下端まで伸ばす */
.bg_bass {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: clamp(120px, 29.6%, 355px);
  display: flex;
  flex-direction: column;
  z-index: -1;          /* 装飾(-2)より手前 */
  pointer-events: none;
}

/* 各セクション背面の斜め装飾（Figma 64:3 / 64:11 / 64:17 / 64:20 / 64:23）
   右のベース背景よりさらに奥に置く */
.deco {
  position: absolute;
  z-index: -2;
  height: auto;
  pointer-events: none;
}
/* CONCEPT下部：Figmaどおり細い先端が本文を横切り、太い部分は本文の下へ。
   bottomを本文末尾に合わせ、自身の高さ基準(translateY)で下げるので幅が変わっても比率を保つ */
.deco--1 { top: auto; bottom: 56px; left: 0; width: 70.3%; transform: translateY(56.8%); }
.deco--2 { top: 61%; right: 0; width: 59.1%; }   /* BANDS */
.deco--3 { top: 58%; left: 0;  width: 49.2%; }   /* TICKET */
.deco--4 { top: 24%; right: 0; width: 50.8%; }   /* OPENING ACT */
.deco--5 { top: 12%; left: 0;  width: 49.2%; }   /* INFO */
.bg_bass_head { display: block; width: 100%; height: auto; }
.bg_bass_body {
  flex: 1 0 auto;
  width: 59.16%;          /* SVGのネック幅 210/355（Figma 1:44 更新版） */
  margin-left: auto;
  /* 継ぎ目が小数ピクセルに落ちてもヘアラインが出ないよう1px重ねる */
  margin-top: -1px;
  background: linear-gradient(180deg, #eeb417 0%, var(--c-red) 100%);
}

body {
  font-family: var(--ff-jp);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-cream);
  line-height: 1.9;
  letter-spacing: .02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: currentColor; text-decoration: none; transition: opacity .3s; }
@media (hover: hover) { a:hover { opacity: .65; } }

.font-en { font-family: var(--ff-en); font-weight: 800; letter-spacing: .02em; }

/* 表示切替 */
.show-sp { display: block; }
.show-pc { display: none; }
@media (min-width: 768px) {
  .show-sp { display: none !important; }
  .show-pc { display: block; }
}

/* コンテンツ内側（デスクトップで正確に900px、モバイルは左右24px余白） */
.inner {
  width: min(100% - 48px, var(--inner));
  margin-inline: auto;
}

/* セクション共通の余白 */
section { padding-block: 56px; position: relative; }
@media (min-width: 768px) { section { padding-block: 90px; } }  /* セクション間 180px（Figma実測） */

/* セクション見出し */
/* 共通セクション見出し：[—][日本語ラベル] の上に 大きな英字イタリック */
.sec_ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 36px;
}
.sec_ttl_jp {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: var(--ff-jp);
  font-weight: 700;
  font-size: 1.125rem;   /* 18px */
  color: var(--c-red);
  letter-spacing: .06em;
}
.sec_ttl_jp::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 2px;
  background: linear-gradient(90deg, var(--c-yellow), var(--c-red));
}
.sec_ttl_en {
  font-family: var(--ff-en);
  font-weight: 600;
  font-style: italic;
  font-size: 2.75rem;
  line-height: .85;
  color: var(--c-red);
  letter-spacing: .05em;
}
@media (min-width: 768px) {
  .sec_ttl { gap: 25px; margin-bottom: 60px; }
  .sec_ttl_en { font-size: 3.875rem; }   /* 62px */
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  pointer-events: none;
}
.header_logo {
  position: absolute;
  top: 14px; left: 16px;
  pointer-events: auto;
}
.header_logo img { width: 88px; }
@media (min-width: 768px) {
  .header_logo { top: 24px; left: 32px; }
  .header_logo img { width: 120px; }
}
/* SP：下スクロール中はロゴを隠してコンテンツと重ならないように */
@media (max-width: 767px) {
  .header_logo { transition: opacity .3s ease, transform .3s ease; }
  .header.is-hidden .header_logo {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
  }
}

/* 左端の縦書きロゴ（PCのみ） */
.header_side {
  display: none;
}
@media (min-width: 992px) {
  .header_side {
    display: block;
    position: fixed;
    left: 30px; top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 32px;
    pointer-events: auto;
    z-index: 90;
  }
  .header_side img { width: 100%; }
}

/* メニューボタン（SPのみ）：ベースの弦をイメージした4本線・背景なし */
.header_btn {
  position: absolute;
  top: 18px; right: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 30px; height: 24px;
  padding: 0;
  border: none;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  z-index: 120;
}
/* 弦らしく長さを少しずつ変える */
.header_btn_bar {
  display: block;
  height: 2px;
  background: var(--c-red);
  border-radius: 1px;
  transition: transform .3s ease, opacity .25s ease, width .3s ease, background-color .3s ease;
}
.header_btn_bar:nth-child(1) { width: 100%; }
.header_btn_bar:nth-child(2) { width: 86%; }
.header_btn_bar:nth-child(3) { width: 72%; }
.header_btn_bar:nth-child(4) { width: 58%; }

/* 背景が赤に近い位置では黄色に（JSで付与）＝赤い線が埋もれるのを防ぐ */
.header_btn.on-red .header_btn_bar { background: #eeb417; }

/* 展開中は白い×に（内側2本を消し、外側2本を交差させる） */
.header.is-active .header_btn_bar { width: 100%; background: #fff; }
.header.is-active .header_btn_bar:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.header.is-active .header_btn_bar:nth-child(2),
.header.is-active .header_btn_bar:nth-child(3) { opacity: 0; }
.header.is-active .header_btn_bar:nth-child(4) { transform: translateY(-11px) rotate(-45deg); }
@media (min-width: 768px) { .header_btn { display: none; } }

/* ナビ（SP：右から左へスライド、背景はベースのグラデーション） */
.header_nav {
  position: fixed;
  inset: 0;
  z-index: 110;
  pointer-events: auto;
}
.header.is-active .header_nav { transform: none; visibility: visible; }
/* ドロワー専用パーツはPCでは使わない */
.nav_bg, .nav_logo { display: none; }

/* ===== SPドロワー（PCには適用しない） ===== */
@media (max-width: 767px) {
  .nav_bg { display: block; }
  .nav_logo { display: block; }
  /* オーバーレイ（ベージュ＋ぼかし）はスライドせず、その場でフェード */
  .header_nav {
    display: block;
    overflow: hidden;
    background: rgba(240, 233, 215, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: opacity .3s ease, visibility .3s;
  }
  .header.is-active .header_nav { opacity: 1; visibility: visible; }
  /* ギター＋メニューだけが右から出てくる */
  .nav_panel {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
  }
  .header.is-active .nav_panel { transform: none; }
  /* 背景：ベース本体は原寸比のまま上部だけ見せ、右側をベタ塗りで埋める（Figma 66:371） */
  .nav_bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  /* ギターはページ背景(.bg_bass)と同じサイズ。ネックの左端を基準にベタを右へ広げる */
  .nav_bg {
    /* .bg_bass と同一サイズ。% だと top で高さ基準になるため vw を使う */
    --bassW: clamp(120px, 29.6vw, 355px);
    --fillX: 48%;                          /* ベタ開始位置＝ネック左端 */
  }
  .nav_bg img {
    position: absolute;
    top: 0;
    left: calc(var(--fillX) - 0.408 * var(--bassW));  /* ネック左端が --fillX に来るよう配置 */
    width: var(--bassW);
    height: auto;
  }
  /* ベタはギターの「右端」から繋ぐ（重ねるとヘッドの曲線が潰れるため） */
  .nav_bg::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: 0;
    left: calc(var(--fillX) + 0.592 * var(--bassW) - 2px);
    background: #eeb417;
  }
  /* ネックが終わる位置から下は、ネック幅ぶんも塗ってベタと繋げる
     （画像高さ = 幅×6.155、ネック開始は高さの29.6% → 幅×1.82） */
  .nav_bg::before {
    content: "";
    position: absolute;
    top: calc(1.82 * var(--bassW) - 1px);   /* 横の継ぎ目が出ないよう1pxだけ上に重ねる */
    bottom: 0; right: 0;
    left: var(--fillX);                     /* ネック左端にぴったり合わせる（はみ出すと段差になる） */
    background: #eeb417;
  }

  /* ドロワー中身：上から ロゴ → ナビ → SNS（Figma 66:2） */
  .nav_inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  /* ロゴはナビの上 */
  .nav_logo {
    width: 40%;
    margin: 0 3% 56px 0;
    text-align: center;
  }
  .nav_logo img { display: block; width: 100%; }
  .nav_logo_year {
    display: block;
    margin-top: 4px;
    font-weight: 800;
    font-style: italic;
    font-size: 1.625rem;   /* 26px */
    line-height: 1;
    letter-spacing: .1em;
    color: var(--c-red);
  }

  .header_nav_item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 25px;
  }
  .header_nav_item a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    padding: 0;
    text-align: right;
    color: var(--c-red);
    font-family: var(--ff-en);
    font-weight: 700;
    font-size: 1.5rem;     /* 24px */
    font-style: italic;
    line-height: 1.2;
    letter-spacing: .02em;
  }
  .header_nav_item a::after {
    content: "";
    flex-shrink: 0;
    width: 20px; height: 2px;      /* Figma実測 20px */
    background: linear-gradient(90deg, var(--c-red), var(--c-yellow));  /* PCと同じグラデ */
    transition: width .25s ease;
  }
  /* タップ／フォーカスでPCのホバーと同じくダッシュが左に伸びる */
  .header_nav_item a:active,
  .header_nav_item a:focus-visible { opacity: 1; }
  .header_nav_item a:active::after,
  .header_nav_item a:focus-visible::after { width: 30px; }
  /* 現在地はPCと同じく白テキスト＋白の長ダッシュ */
  .header_nav_item a.is-current { color: #fff; }
  .header_nav_item a.is-current::after { width: 30px; background: #fff; }
  .header_nav_sns {
    gap: 20px;
    margin: 52px 6% 0 0;
  }
  .header_nav_sns a { display: block; }
  .header_nav_sns img { display: block; width: 35px; height: 35px; }
}


/* PC: 右端に固定ナビ（横組みテキスト + ダッシュ） */
@media (min-width: 768px) {
  /* 画面の縦中央・右端に固定 */
  .header_nav {
    position: fixed;
    /* スクロールバーに潜り込むとバーが隠れるので、コンテンツ右端に合わせる */
    top: 50%; right: 0; bottom: auto; left: auto;
    transform: translateY(-50%);
    width: auto;
    align-items: flex-end;
    gap: 16px;
    padding-right: 0;
    background: transparent;
    visibility: visible;
  }
  .header_nav_item { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
  /* [テキスト右揃え][15px][ダッシュ] を右端フラッシュ配置。ダッシュ右端が揃う */
  .header_nav_item a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    text-align: right;
    color: var(--c-red);
    font-size: .9rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .02em;
    line-height: 1.2;
    transition: color .25s ease;
  }
  .header_nav_item a::after {
    content: "";
    flex-shrink: 0;
    width: 20px; height: 2px;
    background: linear-gradient(90deg, var(--c-red), var(--c-yellow));
    transition: width .25s ease;
  }
  /* ホバー：ダッシュが左に伸びる */
  .header_nav_item a:hover { opacity: 1; }
  .header_nav_item a:hover::after { width: 30px; }
  /* 背景ベースが赤に近い位置では黄色に（JSで付与） */
  .header_nav_item a.on-red { color: #eeb417; }
  .header_nav_item a.on-red::after { background: #eeb417; }
  /* 表示中セクション：白テキスト＋白の長ダッシュ（左に伸びる） */
  .header_nav_item a.is-current { color: #fff; }
  .header_nav_item a.is-current::after { width: 30px; background: #fff; }
  /* 白背景に重なった項目は #2e2e2e（JSで付与） */
  .header_nav_item a.on-white.is-current { color: #2e2e2e; }
  .header_nav_item a.on-white.is-current::after { background: #2e2e2e; }
}

/* =========================================================
   KV
   ========================================================= */
.kv {
  padding: 108px 0 0;
}
@media (min-width: 768px) { .kv { padding: 140px 0 0; } }

.kv_inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin-inline: auto;
  padding-inline: 24px;
  text-align: center;
}
.kv_logo { display: block; width: min(86%, 540px); margin: 0 auto; }
.kv_logo img { display: block; width: 100%; }
/* 2026：ロゴ下・中央（Figtree Bold Italic / #cd2a09 / 48px相当） */
.kv_logo_year {
  display: block;
  margin-top: 6px;
  line-height: 1;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.9rem, 6vw, 3rem);
  letter-spacing: .1em;
  color: var(--c-red);
}

/* 日付バナー（斜めのグラデ帯・左右で互い違い） */
.kv_dates {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}
@media (min-width: 768px) { .kv_dates { margin-top: 64px; } }
.kv_date { color: #fff; }
.kv_date--osaka {
  background: linear-gradient(100deg, var(--c-yellow) 0%, var(--c-orange) 55%, var(--c-red) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%);
}
.kv_date--tokyo {
  background: linear-gradient(100deg, var(--c-red) 0%, var(--c-orange) 100%);
  clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%);
  margin-top: 6px;
}
.kv_date_inner {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 16px 30px;
}
.kv_date--osaka .kv_date_inner { justify-content: flex-end; padding-right: 44px; }
.kv_date--tokyo .kv_date_inner { justify-content: flex-start; padding-left: 52px; }
.kv_date_main { display: grid; gap: 4px; }
.kv_date--osaka .kv_date_main { text-align: right; justify-items: end; }
.kv_date--tokyo .kv_date_main { text-align: left; justify-items: start; }
.kv_date_ymd { display: flex; align-items: flex-end; gap: 6px; margin: 0; line-height: 1; }
.ymd_y  { font-size: 1.5rem; font-weight: 700; font-style: italic; }
.ymd_md { font-size: 2.5rem; font-weight: 700; font-style: italic; letter-spacing: .01em; }
.ymd_dow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; margin-bottom: 3px;
  border-radius: 50%; background: #fff; color: var(--c-red);
  font-size: .78rem; font-weight: 700;
}
.kv_date_sub { margin: 0; font-size: .78rem; font-weight: 700; line-height: 1.5; }
.kv_date_div { width: 1px; align-self: stretch; margin: 4px 0; background: rgba(255,255,255,.7); transform: skewX(-13deg); }
.kv_date_area { writing-mode: vertical-rl; margin: 0; font-weight: 700; font-size: 1.05rem; letter-spacing: .18em; transform: rotate(13deg); }
/* PC: 大阪=左寄せ61% / 東京=右寄せ69% で互い違い（Figma:730/830 of 1200） */
@media (min-width: 768px) {
  .kv_date--osaka { width: 61%; }
  .kv_date--tokyo { width: 69%; margin-left: auto; margin-top: 5px; }
  .kv_date_inner { padding-block: 26px; gap: 36px; }
  .kv_date--osaka .kv_date_inner { padding-right: 56px; }
  .kv_date--tokyo .kv_date_inner { padding-left: 56px; }
  .ymd_y  { font-size: 2rem; }
  .ymd_md { font-size: 3.5rem; }
  .ymd_dow { width: 28px; height: 28px; }
  .kv_date_sub { font-size: .85rem; }
  .kv_date_area { font-size: 1.25rem; }
}

/* =========================================================
   LEAD
   ========================================================= */
/* CONCEPT：flex縦積み。画像↔テキスト間は gap で管理 */
.sec-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 5px 0 56px;  /* 上5px＝日程バーからの余白 */
}
/* 画像は画面幅に追従（SPは端ぎりぎりまで大きく） */
.lead_hero {
  width: calc(100% - 16px);
  max-width: 1600px;
  margin: 0;
}
.lead_hero img {
  display: block;
  width: 100%;
  aspect-ratio: 1140 / 640;
  object-fit: cover;
  border-radius: 0;
}
.lead-txt {
  width: 100%;
  max-width: 900px;
  margin: 0;
  padding-inline: 24px;
  font-weight: 500;
  color: #2e2e2e;
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: .02em;
}
.lead-caption {
  margin: 0;
  padding-inline: 24px;
  color: #0000008f;
  font-size: 0.8rem;
  line-height: 1.95;
  letter-spacing: .02em;
  text-align: right;
}
@media (min-width: 768px) {
  .sec-lead { gap: 120px; padding: 5px 0 118px; }  /* CONCEPT→NEWS 208px（Figma実測） */
  .deco--1 { bottom: 118px; }
  .lead_hero { width: calc(100% - 60px); }
  .lead-txt { padding-inline: 0; font-size: 1.25rem; line-height: 2.15; text-align: left; }
  .lead-caption { font-size: 1.2rem;}
}

/* =========================================================
   NEWS
   ========================================================= */
.news_list { display: flex; flex-direction: column; gap: 5px; }
/* 白いカード：左上と右下のみ斜めカット（Figma実測 15px × 21px） */
.news_item a, .news_item .news_card{
  display: flex;
  align-items: center;
  min-height: 67px;
  padding: 14px 25px;
  background: #fff;
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 15px) 100%, 0 100%, 0 21px);
  transition: opacity .3s;
}
.news_row {
  display: flex;
  align-items: baseline;   /* 和欧混在でも1行目のベースラインを正確に揃える */
  gap: 20px;
  width: 100%;
}
.news_date {
  flex-shrink: 0;
  font-family: var(--ff-en);
  font-weight: 500;
  font-style: italic;
  font-size: 1rem;
  color: #2e2e2e;
  letter-spacing: .06em;
  line-height: 1.75;
}
.news_div {
  flex-shrink: 0;
  align-self: stretch;   /* タイトルの行数に応じた長さ */
  width: 1px;
  background: #2e2e2e;
}
.news_ttl {
  flex: 1;
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
  color: #2e2e2e;
  line-height: 1.75;
  letter-spacing: .02em;
}
@media (min-width: 768px) {
  .news_item a { padding: 14px 30px; }
}
/* SP：日付を上に積んでタイトル幅を確保 */
@media (max-width: 767px) {
  .news_row { flex-direction: column; gap: 4px; }
  .news_div { display: none; }
  .news_date { font-size: .875rem; }
  .news_ttl { font-size: .9375rem; }
}

/* =========================================================
   BAND
   ========================================================= */
/* メンバーカード共通：写真の下にラベル（テキスト幅ぶんだけ） */
.member { display: flex; flex-direction: column; align-items: flex-start; }
.member_photo {
  position: relative;
  width: 100%;
  background: #d9d9d9;
}
.member_photo img {
  display: block;
  width: 100%;
  aspect-ratio: 290 / 210;
  object-fit: cover;
}
.member_name {
  margin: 0;
  padding: 10px 15px;
  background: var(--c-red);
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25;
}

/* メインメンバー（大・2枚） */
.member_main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.member_main .member_photo img { aspect-ratio: 440 / 290; }

/* メンバー／ゲスト（小・3枚） */
.member_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

/* GUESTS 見出し */
.sub_ttl {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 80px 0 0;
  font-family: var(--ff-en);
  font-weight: 600;
  font-style: italic;
  font-size: 2.25rem;   /* 36px */
  line-height: 1.2;
  color: #eeb417;
  letter-spacing: 0;
}
.sub_ttl::before {
  content: "";
  flex-shrink: 0;
  width: 30px; height: 2px;
  background: #eeb417;
}
.guest_list { margin-top: 40px; }
.guest_list .member_name { background: #eeb417; }

/* 日付バッジ（白丸・カード右上にはみ出す） */
.guest_badge {
  position: absolute;
  top: -10px; right: -10px;
  z-index: 2;
  display: flex;
  align-items: center;      /* 丸の中央に配置 */
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #fff;
  color: var(--c-text);
  font-family: var(--ff-en);
  font-weight: 600;
}
/* 内側は1行のインライン文脈：「24」と「日」がベースラインで揃う */
.guest_badge_in {
  display: block;
  font-size: .8125rem;   /* 13px（「日」） */
  line-height: 18px;
  white-space: nowrap;
  /* 数字は下部に余白が無いぶん上に寄るため、実測分だけ下げて光学的に中央へ */
  transform: translateY(0.12em);
}
.guest_badge_in b { font-weight: 600; font-size: 1.375rem; }  /* 22px */

/* And more（Figma 1:1135：カギ状の装飾でテキストを挟む） */
.and_more {
  margin: 82px 0 0;
  text-align: center;
  line-height: 1;
}
.and_more_box {
  position: relative;
  display: inline-block;
  width: 215px; height: 85px;
  color: #fff;
}
.and_more_deco {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.and_more_txt {
  position: absolute;
  left: 33px; top: 17px;
  font-family: var(--ff-en);
  font-weight: 700;
  font-style: italic;
  font-size: 2rem;    /* 32px */
  line-height: 38px;
  white-space: nowrap;
}

/* SP：カードは1〜2列に */
@media (max-width: 767px) {
  .member_main { grid-template-columns: 1fr; gap: 15px; }
  .member_list { grid-template-columns: repeat(2, 1fr); }
  .member_name { font-size: .875rem; padding: 8px 12px; }
  .guest_badge { width: 42px; height: 42px; top: -8px; right: -8px; }
  .guest_badge_in { font-size: .625rem; line-height: 13px; }
  .guest_badge_in b { font-size: .9375rem; }
  .sub_ttl { font-size: 1.75rem; margin-top: 56px; }
}

/* =========================================================
   TICKET
   ========================================================= */
.ticket_lead {
  margin: 0 0 40px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 28px;
  letter-spacing: .02em;
}

/* 価格カード（黄→赤グラデ／左上・右下を面取り 30×40px） */
.price_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0 0 40px;
}
.price_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 150px;
  padding: 20px;
  color: #fff;
  background: linear-gradient(100deg, #f8ba00 0%, #e27204 50%, #cd2a09 100%);
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 30px) 100%, 0 100%, 0 40px);
}
.price_name { font-weight: 700; font-size: 1.25rem; line-height: 24px; letter-spacing: .05em; }
.price_yen  { font-weight: 700; font-size: 1.25rem; line-height: 32px; }
.price_yen b {
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 2.625rem;   /* 42px */
  letter-spacing: .1em;
}

/* エントリー行（白ベタ） */
.entry_list { display: grid; gap: 5px; }
.entry_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 40px;
  background: #fff;
  /* 他のボックスと同じく左上・右下を面取り */
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 30px) 100%, 0 100%, 0 40px);
}
.entry_head { display: flex; align-items: center; gap: 40px; }
.entry_name {
  flex-shrink: 0;
  width: 150px;
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 24px;
  letter-spacing: .02em;
}
.entry_div { flex-shrink: 0; width: 1px; height: 60px; background: var(--c-text); }
.entry_detail { display: block; font-size: .9375rem; line-height: 24px; letter-spacing: .02em; }
.entry_detail > div { display: flex; }
.entry_detail dt { flex-shrink: 0; white-space: nowrap; font-weight: 400; }
.entry_detail dd { margin: 0; }

/* エントリーボタン（赤ベタ・矢印つき） */
.btn-entry {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 230px; height: 50px;
  padding: 0 22px;
  background: var(--c-red);
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}
/* ホバー：#EEB417 のグラデーションが流れるアニメーション */
.btn-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 2周期ぶんのグラデ → 1周期ぶん動かすとシームレスにループ */
  background: linear-gradient(100deg,
    #eeb417 0%, var(--c-red) 25%, #eeb417 50%, var(--c-red) 75%, #eeb417 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover: hover) {
  .btn-entry:hover { opacity: 1; }
  .btn-entry:hover::before {
    opacity: 1;
    animation: btn-flow 3s linear infinite;
  }
}
/* 背景を右へ送る＝模様が左→右に流れる */
@keyframes btn-flow {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-entry:hover::before { animation: none; }
}
.btn_arrow { flex-shrink: 0; width: 24px; height: 5px; }

/* SP */
@media (max-width: 767px) {
  .price_list { grid-template-columns: 1fr; gap: 15px; }
  .price_card { min-height: 120px; }
  .price_yen b { font-size: 2rem; }
  .entry_row { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 25px; }
  /* SP：ラベルを上に積んで明細に幅を確保 */
  .entry_head { flex-direction: column; align-items: stretch; gap: 12px; }
  .entry_div { display: none; }
  .entry_name { width: auto; font-size: 1.125rem; }
  .entry_name br { display: none; }
  .btn-entry { width: 100%; }
}

/* =========================================================
   OPENING ACT
   ========================================================= */
/* 見出し（英字なし・赤の2行タイトル） */
.opening_head {
  margin: 0 0 60px;
  font-weight: 700;
  font-size: 2.625rem;   /* 42px */
  line-height: 60px;
  color: var(--c-red);
  letter-spacing: .05em;
}
/* 白ボックス（他と同じく左上・右下を面取り） */
.opening_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 40px;
  background: #fff;
  clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 30px) 100%, 0 100%, 0 40px);
}
.opening_body { width: 100%; }
.opening_ttl {
  margin: 0 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--c-cream);
  font-weight: 700;
  font-size: 1.75rem;    /* 28px */
  line-height: 32px;
  letter-spacing: .02em;
}
.opening_txt {
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
  line-height: 32px;
  letter-spacing: .02em;
}
/* 応募受付期間（クリーム地の帯） */
.opening_period {
  width: 100%;
  margin: 0;
  padding: 15px 10px;
  background: var(--c-cream);
  text-align: center;
  font-weight: 700;
  font-size: 1.25rem;    /* 20px */
  line-height: 26px;
  letter-spacing: .02em;
}
.btn-entry--lg { width: 340px; }

@media (max-width: 767px) {
  .opening_head { font-size: 1.75rem; line-height: 1.5; margin-bottom: 32px; }
  .opening_box { gap: 24px; padding: 24px 25px; }
  .opening_ttl { font-size: 1.25rem; line-height: 1.5; }
  .opening_period { font-size: 1rem; line-height: 1.6; }
  .btn-entry--lg { width: 100%; }
}

/* =========================================================
   INFORMATION
   ========================================================= */
/* イベント名の帯 */
.info_event_ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin: 0 0 10px;
  padding: 12px 20px;
  background: var(--grad-card);
  clip-path: var(--chamfer);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 1.875rem;   /* 30px */
  line-height: 1.2;
  letter-spacing: .05em;
}

/* 大阪／東京の2カラム：グラデーションは2枚にまたがって連続 */
.info_cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.info_col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 40px;
  color: #fff;
  clip-path: var(--chamfer);
  background-image: var(--grad-card);
  background-repeat: no-repeat;
  background-size: calc(200% + 20px) 100%;  /* 2カラム＋gap ぶんに引き伸ばす */
}
.info_col:first-child { background-position: left center; }
.info_col:last-child  { background-position: right center; }

.info_area {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
  font-weight: 700;
  font-size: 1.4375rem;   /* 23px */
  line-height: 24px;
  letter-spacing: .08em;
}
.info_body { display: flex; flex-direction: column; gap: 20px; }
.info_when { display: grid; gap: 5px; }
.info_date { margin: 0; font-weight: 700; font-size: 1.25rem; line-height: 24px; letter-spacing: .02em; }
.info_time { margin: 0; font-weight: 700; font-size: 1rem;    line-height: 20px; letter-spacing: .02em; }
.info_detail p { margin: 0; font-weight: 700; font-size: 1rem; line-height: 24px; letter-spacing: .02em; }

@media (max-width: 767px) {
  /* SP：見出しに装飾が重ならないよう下げる */
  .deco--5 { top: 28%; }
  .info_event_ttl { min-height: 64px; font-size: 1.25rem; }
  .info_cols { grid-template-columns: 1fr; gap: 15px; }
  /* SPは縦積みなので各カラムで完結したグラデーションに */
  .info_col { padding: 24px 25px; background-size: 100% 100%; background-position: left center; }
  .info_area { font-size: 1.25rem; }
  .info_date { font-size: 1.125rem; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;   /* 背景ベースより前面に */
  z-index: 1;
  padding: 0 30px 30px;
  background: none;
}
/* 白ボックス */
.footer_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 40px;
  background: #fff;
  /* 他のボックスと同じく左上・右下を面取り */
  clip-path: var(--chamfer);
}

/* 協賛社 */
.sponsor { width: 100%; }
.sponsor_label {
  margin: 0 0 40px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 20px;
  letter-spacing: .02em;
}
.sponsor_list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.sponsor_list li { background: #d9d9d9; }
.sponsor_list img {
  display: block;
  width: 100%;
  aspect-ratio: 160 / 80;
  object-fit: contain;
}

/* SNS・ロゴ・コピーライト */
.footer_bottom { display: flex; flex-direction: column; align-items: center; }
.footer_sns { display: flex; gap: 20px; margin: 0 0 48px; }
.footer_sns a { display: block; }
.footer_sns img { display: block; width: 35px; height: 35px; }
.footer_logo { margin: 0 0 20px; }
.footer_logo img { width: 100px; }
.footer_copy {
  font-weight: 500;
  font-size: .875rem;   /* 14px */
  line-height: 20px;
  letter-spacing: .05em;
  text-align: center;
}

@media (max-width: 767px) {
  .footer { padding: 0 15px 15px; }
  .footer_box { gap: 40px; padding: 30px 25px; }
  .sponsor_label { margin-bottom: 24px; }
  .sponsor_list { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .footer_copy { font-size: .75rem; }
}


/* =========================================================
   ANIMATION
   ・スクロールで要素がふわっと表示（JSで .js-reveal / .is-shown を付与）
   ・KVは読み込み時に順番に登場（body.is-loaded）
   ・「動きを減らす」設定の環境では無効
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* --- スクロール表示 --- */
  .js-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity .9s cubic-bezier(.22,.7,.25,1) var(--rd, 0s),
      transform .9s cubic-bezier(.22,.7,.25,1) var(--rd, 0s);
    will-change: opacity, transform;
  }
  .js-reveal.is-shown { opacity: 1; transform: none; }

  /* --- 斜め装飾：画面の端から伸びてくる（左側の装飾は左端から、右側は右端から） --- */
  .deco {
    clip-path: inset(0 100% 0 0);   /* 左起点：右側を隠す */
    transition: clip-path 1.1s cubic-bezier(.22,.7,.25,1);
  }
  .deco--2, .deco--4 { clip-path: inset(0 0 0 100%); }   /* 右起点：左側を隠す */
  .deco.is-shown { clip-path: inset(0 0 0 0); }

  /* --- KV：ロゴ → 2026 → 日程バー（左右から） --- */
  .kv_logo img {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    transition: opacity 1s ease .15s, transform 1s cubic-bezier(.22,.7,.25,1) .15s;
  }
  .kv_logo_year {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s ease .6s, transform .8s cubic-bezier(.22,.7,.25,1) .6s;
  }
  /* 日程バーはワイプで出現（大阪＝左→右／東京＝右→左）。
     面取りのclip-pathと同じ頂点数にしてあるのでそのまま補間される */
  .kv_date--osaka {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 1s cubic-bezier(.22,.7,.25,1) .85s;
  }
  .kv_date--tokyo {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: clip-path 1s cubic-bezier(.22,.7,.25,1) 1.05s;
  }
  body.is-loaded .kv_date--osaka { clip-path: polygon(0 0, 100% 0, calc(100% - 36px) 100%, 0 100%); }
  body.is-loaded .kv_date--tokyo { clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%); }

  body.is-loaded .kv_logo img,
  body.is-loaded .kv_logo_year { opacity: 1; transform: none; }
}