/* ═══════════════════════════════════
   sp.css — SHIGIRA BEACH DJ SUMMER LIVE 2026
   対象: max-width 767px
   ── 最新PC版（content_band 一枚通し構造）に準拠 ──
═══════════════════════════════════ */

@media (max-width: 767px) {


/* ──────────────────────────────────
   body / 全体
────────────────────────────────── */

  body {
    font-size: 1.4rem;
  }

  /* 両端グロー帯: SP では極細に */
  .edge_glow {
    width: clamp(6px, 3vw, 20px);
  }


/* ──────────────────────────────────
   HEADER
────────────────────────────────── */

  #header {
    padding: 12px 16px;
    gap: 12px;
    transition: transform 0.3s ease, padding 0.3s ease;
  }
  #header.is-slim {
    padding: 8px 16px;
  }
  /* SP: MV表示中はヘッダーを上に隠す（MVを過ぎると現れる） */
  #header.is-over-mv {
    transform: translateY(-100%);
  }
  /* SP: ロゴ・日付を非表示 */
  .header_logo {
    display: none;
  }
  /* SP: ナビを中央寄せ・少し大きく */
  .header_nav {
    gap: 8px;
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .header_nav_btn {
    font-size: 1.3rem;
    padding: 4px 10px;
    letter-spacing: 0.04em;
  }


/* ──────────────────────────────────
   MV
────────────────────────────────── */

  #mv {
    height: 85vh;
    min-height: 580px;
  }

  /* SP: PC用MV画像を非表示、SP用を表示 */
  .mv_bg--pc   { display: none; }
  .mv_bg--sp   { display: block; }
  .mv_moji--pc { display: none; }
  .mv_moji--sp {
    display: block;
    top: 50%;
    width: 100vw;
    max-width: 100vw;
    max-height: 80vh;
    object-fit: contain;
    transform: translate(-50%, -50%);
  }


/* ──────────────────────────────────
   MV下ネオンライン
────────────────────────────────── */

  .mv_divider_line--1 { height: 4px; }
  .mv_divider_line--2 { height: 2px; }
  .mv_divider_line--3 { height: 1px; }


/* ──────────────────────────────────
   コンテンツ帯（content_band 一枚通し）
   PCの玉虫色帯をSPでは画面いっぱい近くまで広げる
────────────────────────────────── */

  .content_band {
    /* 左右に玉虫色下地を見せるため帯幅を狭める（左右 各約7%） */
    max-width: 86%;
  }

  /* 提灯(kazari): SPでも両端に表示（PCと同じ雰囲気・サイズだけ縮小） */
  .kazari { width: clamp(110px, 32vw, 170px); }

  /* コンテンツ内側 */
  .page_section .inner {
    max-width: calc(100% - 48px);
    padding: 22px 0 32px;
  }

  /* 区切りライン: 帯幅にあわせる */
  .club_divider {
    height: 12px;
  }


/* ──────────────────────────────────
   見出し（ABOUT / DJ / SHOP）
────────────────────────────────── */

  .sec_label {
    font-size: 3.8rem;
    margin-bottom: 28px;
  }

  /* サイド装飾の飾り文字: SP では非表示（PC側でも指定済み） */
  .sec_side_label {
    display: none;
  }


/* ──────────────────────────────────
   リード（イントロ）
────────────────────────────────── */

  .body_produce_label {
    font-size: 1.35rem;
    margin-bottom: 8px;
  }
  .body_title_en {
    font-size: 4.2rem;
    margin-bottom: 8px;
  }
  .body_title_script {
    font-size: 4.2rem;
    margin-bottom: 12px;
  }
  .body_title_ja {
    font-size: 1.25rem;
    margin-bottom: 26px;
  }
  .body_title_catch {
    font-size: 1.7rem;
    margin-bottom: 24px;
    letter-spacing: -0.04em;
  }
  .lead_text {
    font-size: 1.4rem;
    line-height: 1.95;
    text-align: left;
  }

  /* PC用 lead_text の br を SP では非表示 → SP用改行を表示 */
  .lead_text br { display: none; }
  .sp_br { display: inline; }

  /* 右側装飾テキスト: SP では非表示（PC側でも指定済み） */
  .lead_side_deco {
    display: none;
  }

  /* フォトスライダー: 帯内いっぱい・写真を少し小さく */
  .lead_photo_slider {
    width: 100%;
    left: 0;
    transform: none;
    height: 180px;
  }
  .lead_photo_item {
    width: 180px;
    height: 130px;
  }
  .lead_photo_item.is-center {
    width: 230px;
    height: 168px;
  }


/* ──────────────────────────────────
   ABOUT
────────────────────────────────── */

  /* 横並びを縦積みに */
  .about_layout {
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }
  .about_hanabi_cut {
    width: 100%;
  }
  .about_hanabi_cut img {
    height: 200px;
  }
  .event_info_table th {
    font-size: 1.4rem;
    padding: 10px 16px 10px 0;
    width: 76px;
  }
  .event_info_table td {
    font-size: 1.55rem;
    padding: 10px 0;
  }
  .event_schedule_list li {
    font-size: 1.5rem;
    gap: 8px;
    letter-spacing: -0.04em;
  }
  .event_time {
    font-size: 1.4rem;
    min-width: 62px;
  }
  .event_note {
    font-size: 1.2rem;
  }


/* ──────────────────────────────────
   DJ / PERFORMER
────────────────────────────────── */

  /* DJカード: 横並び → 縦積み */
  .artist_row {
    flex-direction: column;
    gap: 18px;
    align-items: center;
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
  /* 通常カード（DJ246）のアバター */
  .artist_avatar_wrap {
    width: 190px;
    height: 190px;
    border-radius: 14px;
  }
  /* featured（DJ KAORI）のアバターは少し大きめを維持 */
  .artist_row--featured .artist_avatar_wrap {
    width: 210px;
    height: 210px;
    border-radius: 16px;
  }
  .artist_text {
    width: 100%;
  }
  /* SPECIAL GUEST / PRODUCED BY ラベル */
  .artist_special_label {
    font-size: 1.3rem;
    text-align: left;
  }
  /* 名前＋アイコン行: 左揃え */
  .artist_name_row {
    justify-content: flex-start;
  }
  .artist_name {
    font-size: 2.6rem;
    text-align: left;
    margin-bottom: 0;
  }
  .artist_row--featured .artist_name {
    font-size: 2.8rem;
  }
  .artist_body {
    font-size: 1.4rem;
    line-height: 1.75;
  }

  /* 浴衣のプライド 見出し */
  .performance_title {
    font-size: 1.9rem;
  }

  /* cast: 3カラム → 1カラム縦積み */
  .cast_grid_col3 {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* カード: グリッドで
     [写真][名前+ふりがな]
     [ロール             ]
     [テキスト           ]  */
  .cast_col_item {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    row-gap: 0;
    align-items: start;
    text-align: left;
  }

  /* 写真: 1行目・1列目 */
  .cast_col_item .cast_avatar_wrap_lg {
    grid-column: 1;
    grid-row: 1;
    width: 130px;
    height: 130px;
    margin: 0;
    border-radius: 12px;
  }

  /* 名前+ふりがな: 1行目・2列目 */
  .cast_col_item .cast_name {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.8rem;
    padding-top: 6px;
    align-self: center;
  }

  /* ロール: 2行目・全幅 */
  .cast_col_item .cast_role {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 1.5rem;
    margin-top: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
  }
  .cast_col_item .cast_role br {
    display: none;
  }

  /* テキスト: 3行目・全幅 */
  .cast_col_item .cast_body_text {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 1.4rem;
  }


/* ──────────────────────────────────
   SHOP & SPECIAL SEAT
────────────────────────────────── */

  .shop_lead {
    font-size: 1.45rem;
    margin-bottom: 24px;
  }

  /* ショップ: 3カラム → 1カラム縦積み（リード文の下） */
  .shop_grid {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-bottom: 0;
    padding-top: 0;
  }
  .shop_lead {
    border-top: 1px solid rgba(0,0,0,0.10);
    padding-top: 32px;
    margin-top: 32px;
  }
  .shop_name_ja {
    font-size: 1.7rem;
  }
  .shop_name_ja br { display: none; }
  .shop_name_en {
    font-size: 1.2rem;
  }
  .shop_desc {
    font-size: 1.4rem;
  }

  /* スペシャルシート（先頭） */
  .special_seat_block {
    padding-top: 8px;
    margin-bottom: 0;
    max-width: 100%;
  }
  .special_seat_tag {
    font-size: 1.25rem;
  }
  .special_seat_title {
    font-size: 2.0rem;
  }
  .special_seat_sub {
    font-size: 1.4rem;
  }
  .special_seat_detail {
    max-width: 100%;
  }
  .special_seat_row {
    font-size: 1.5rem;
    gap: 16px;
    padding: 10px 4px;
  }
  .special_seat_row dt {
    min-width: 76px;
  }
  .special_seat_btn {
    font-size: 1.45rem;
    padding: 15px 28px;
    width: 100%;
    text-align: center;
    display: block;
  }


/* ──────────────────────────────────
   FOOTER
────────────────────────────────── */

  .footer_logo {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
  }
  .footer_notes {
    font-size: 1.1rem;
    padding: 0 20px;
  }


/* ──────────────────────────────────
   フェードイン: SP では動きを控えめに
────────────────────────────────── */

  .fade_up {
    transform: translateY(36px);
  }
  .fade_item {
    transform: translateY(20px);
  }


} /* end @media (max-width: 767px) */