/* =====================================
   基本：投稿ページの非表示要素・体裁
===================================== */
.entry-meta, .breadcrumb, #comments, .comments-area,
.nav-links, .post-navigation, .site-footer, footer { display:none !important; }

.entry-title { text-align:center; }

/* 通常リンク（※ヒーロー内は個別で上書き） */
a {
  color:#002147;
  text-decoration:underline;
  text-decoration-color:#002147;
}


/* =====================================
   記事下部の「前/次」カードをタイトル一覧に寄せる（VK/Lightning）
   ※黒帯の原因 .vk_post_body の absolute を解除
   ===================================== */

/* 1) 画像（NO IMAGE含む）を消す */
.single .card-intext .vk_post_imgOuter{
  display: none !important;
}

/* 2) 黒帯（.vk_post_body）のレイアウトを解除して"普通の本文"に戻す */
.single .card-intext .card-intext-inner .vk_post_body{
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  z-index: auto !important;
  padding: 0 !important;
}

/* hover で高さ100%になる挙動も無効化 */
.single .card-intext .card-intext-inner:hover .vk_post_body{
  height: auto !important;
}

/* 3) カードっぽい枠や影を弱めて「テキスト一覧」寄せ */
.single .card-intext.card{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 4) リンク領域を"区切り線つきの行"に */
.single .card-intext .card-intext-inner{
  padding: 12px 0 !important;
  border-top: 1px solid rgba(0,0,0,.12) !important;
}

/* 5) タイトルを強調 */
.single .card-intext .vk_post_title{
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

/* 6) 日付など要らないなら消す（不要なら残してOK） */
.single .card-intext .vk_post_date{
  display: none !important;
}

/* タイトルが消える（白文字のまま）対策：文字色を戻す */
.single .card-intext .vk_post_body,
.single .card-intext .vk_post_body *{
  color: var(--vk-color-text-body) !important;
}

/* リンクとしての見た目（好みで） */
.single .card-intext a{
  color: var(--vk-color-text-link) !important;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,.25);
}
.single .card-intext a:hover{
  color: var(--vk-color-text-link-hover) !important;
  text-decoration-color: currentColor;
}

/* 前/次ラベルをCSSで付与（左＝前、右＝次） */
.single .card-intext{
  position: relative;
}

.single .card-intext::before{
  display: inline-block;
  font-size: .82rem;
  font-weight: 800;
  opacity: .65;
  margin: 0 0 6px;
  letter-spacing: .03em;
  content: "記事";
}

/* 2枚の並び順で判定：1枚目＝前、2枚目＝次 */
.single .card-intext:nth-of-type(1)::before{
  content: "前の記事";
}
.single .card-intext:nth-of-type(2)::before{
  content: "次の記事";
}




/* =====================================
   SNSボタン
===================================== */
.social-buttons{ display:flex; gap:40px; justify-content:center; padding:20px 0; }
.social-btn{
  font-size:26px; color:#fff; background:#777; width:50px; height:50px; border-radius:50%;
  display:flex; justify-content:center; align-items:center; text-decoration:none;
  transition:background-color .3s ease, transform .3s ease;
}
.social-btn:hover{ transform:scale(1.1); }
.social-btn.youtube:hover{ background:#FF0000; }
.social-btn.x:hover{ background:#fff; }
.social-btn.instagram:hover{ background:#C13584; }
.social-btn.facebook:hover{ background:#3b5998; }
@media (max-width:768px){
  .social-btn{ width:40px; height:40px; font-size:18px; }
}

/* =====================================
   イベントカード（fade-in）
===================================== */
.fadein-post{ opacity:0; transform:translateY(20px); transition:opacity 1.6s ease, transform 1.2s ease; }
.fadein-post.visible{ opacity:1; transform:translateY(0); }
.event-item-link{ text-decoration:none; display:block; color:inherit; transition:transform .3s, box-shadow .3s; }
.event-item-link:hover{ transform:translateY(-5px); box-shadow:0 6px 12px rgba(0,0,0,.15); }
.fadein-area .event-item{
  background:#F9FAFB; padding:1em; border-left:5px solid transparent;
  background-image:linear-gradient(to bottom,#E5E7EB,#0000);
  background-repeat:no-repeat; background-position:left center; background-size:5px 100%;
  border-radius:10px; box-shadow:0 2px 5px rgba(0,0,0,.08); margin-bottom:1.5em; color:inherit;
}
.fadein-area .event-item .event-date{ font-weight:700; color:#111; margin-bottom:.4em; font-size:1.3em; letter-spacing:.06em; }
.fadein-area .event-item .event-title{ font-size:1.1em; font-weight:600; color:#000; margin-bottom:.4em; }
.fadein-area .event-item .event-excerpt{ font-size:.95em; color:#696969; }
.fadein-area .event-item .event-readmore{ margin-top:.6em; font-size:.9em; color:#696969; font-weight:500; }
.fadein-area .event-item:hover{ box-shadow:0 4px 12px rgba(225,225,225,.2); }
.event-item-link:hover .event-title{ color:#000; }
@media (max-width:768px){
  .fadein-area .event-item{ padding:.8em; font-size:.95em; }
  .fadein-area .event-item .event-title{ font-size:1em; }
  .event-item-link:hover{ transform:none !important; box-shadow:none !important; }
  .fadein-area .event-item .event-readmore{ margin-top:.5em; font-size:.85em; }
}

/* スマホで縦積みになった時の余白（マガジン上・間・ニュース下） */
@media (max-width: 768px){
  /* カラム全体の外側余白（マガジン上・ニュース下） */
  .pba-lists-2col{
    margin-top: 3rem;       /* マガジン上 */
    margin-bottom: 6rem;    /* ニュース下 */
  }

  /* 縦積み時のカラム間隔（マガジンとニュースの間） */
  .pba-lists-2col.wp-block-columns > .wp-block-column{
    margin-bottom: 6rem !important; /* 間隔を強制 */
  }

  /* 最後のカラムのmargin-bottomは消す */
  .pba-lists-2col.wp-block-columns > .wp-block-column:last-child{
    margin-bottom: 0 !important;
  }
}


/* NEWSとMAGAZINEのホーム画面 CSS */
.pba-title-list { margin: 0; }
.pba-title-items { list-style: none; padding: 0; margin: 0; }

.pba-title-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.pba-date {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
}

.pba-title {
  font-size: 16px;
  color: #111;
  text-decoration: none;
  line-height: 1.6;
}
.pba-title:hover { color: #002147; text-decoration: underline; }

.pba-more { text-align: right; margin-top: 14px; }
.pba-more a { color: #333; text-decoration: none; }
.pba-more a:hover { color: #002147; text-decoration: underline; }

@media (max-width: 768px) {
  .pba-title-item {
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 8px 0;
  }
  .pba-date { font-size: 14px; }
  .pba-title { font-size: 15px; }
}



/* NEWS 固定ページについて */
.news-list-items, .magazine-list-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list-item, .magazine-list-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

.news-date, .magazine-date {
  min-width: 8rem;
  color: #555;
  font-size: 0.9rem;
}

.news-title, .magazine-title {
  color: #000;
  text-decoration: none;
}

.news-title:hover, .magazine-title:hover {
  text-decoration: underline;
}


/* =====================================
   VKボタン（shine）
===================================== */
.vk_button.vk_button-color-custom{ transition:transform .3s, box-shadow .3s; }
.vk_button.vk_button-color-custom:hover{ transform:translateY(-3px); box-shadow:0 6px 12px rgba(255,255,255,.2); }
.vk_button.vk_button-color-custom:hover .vk_button_link_txt{
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:#fff;
}

/* =====================================
   過去投稿カード
===================================== */
ul.concert-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:2em; padding:0; list-style:none; }
ul.concert-list li{
  width:280px; background:#000; position:relative; overflow:hidden; border-radius:8px; transition:transform .3s;
}
ul.concert-list li:hover{ transform:scale(1.03); }
ul.concert-list li img{ width:100%; height:auto; object-fit:cover; display:block; }
ul.concert-list a.wp-block-latest-posts__post-title{
  color:#fff; text-decoration:none; display:block; padding:.6em; font-size:1em; font-weight:700;
  background:linear-gradient(to top, rgba(0,0,0,.8), transparent); position:absolute; bottom:0; width:100%;
}

/* =====================================
   Hero（全画面動画・下寄せ）
===================================== */
.hero-full{ position:relative; width:100%; height:100vh; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.2)); z-index:2; }

.hero-overlay{
  position:relative; z-index:3; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; padding:clamp(16px,5vw,48px); max-width:1200px; color:#fff; font-family:'Perpetua', serif;
}

.hero-title{
  font-size:clamp(2rem,5vw,3.5rem); line-height:1.15; font-weight:700; letter-spacing:.01em; margin:0 0 1rem;
}

/* SEASON（横型） */
.hero-season{
  display:inline-block; white-space:nowrap; padding:.55rem 1rem; border:1px solid rgba(255,255,255,.9);
  background:rgba(0,0,0,.15); backdrop-filter:blur(2px); letter-spacing:.06em; font-size:clamp(14px,2.6vw,16px);
  margin:0 0 2rem;
}
.hero-season:hover{ background:rgba(255,255,255,.08); }

/* 縦型バッジ */
.hero-season.hero-season--vertical{
  display:inline-flex !important; flex-direction:column; align-items:center; justify-content:center;
  width:auto !important; max-width:max-content !important; padding:1rem 1.5rem;
  border:1px solid rgba(255,255,255,.9); background:rgba(0,0,0,.2); backdrop-filter:blur(2px);
  text-align:center; white-space:nowrap; box-sizing:border-box; color:#fff !important; text-decoration:none !important;
}
.hero-season.hero-season--vertical:link,
.hero-season.hero-season--vertical:visited,
.hero-season.hero-season--vertical:hover,
.hero-season.hero-season--vertical:active{ color:#fff !important; text-decoration:none !important; }
.hero-season--vertical .season-label{ font-size:1rem; letter-spacing:.1em; font-weight:500; margin-bottom:.25rem; }
.hero-season--vertical .season-year{ font-size:2.6rem; font-weight:700; letter-spacing:.05em; line-height:1.05; }
.hero-season.hero-season--vertical:hover{ background:rgba(255,255,255,.1); border-color:#fff; transition:background .25s, border-color .25s; }

/* =====================================
   Lightningの制約解除（ヒーローをフル幅に）
===================================== */
body.home .hero-full{
  width:100vw; margin-left:50%; transform:translateX(-50%); max-width:none; border-radius:0;
}
/* トップのページタイトル等を非表示 */
body.home .entry-title, body.home .page-header, body.home .vk_page_header{ display:none; }
body.home .entry-content > *:first-child{ margin-top:0 !important; }

/* ===================== PC（≥769px）調整 ===================== */
@media (min-width: 769px) {
  /* タイトル（左）を小さく */
  .hero-frame .frame-brand{
    font-size: 4.0rem;            /* ←好みで 2.4〜3.4rem で調整 */
    line-height: 1.15;
    margin: 0;
  }

  /* Artistic Director（右）を小さく */
  .hero-frame .frame-director .dir-label{ font-size: 1.1rem; letter-spacing: .10em; }
  .hero-frame .frame-director .dir-name { font-size: 0.9rem; font-weight: 600; }

  /* メニューを上に寄せる（値をマイナス方向に増やすとさらに上へ） */
  .hero-frame .frame-nav{ margin-top: -3rem; }
}

/* ===================== モバイル（≤768px）調整 ===================== */
@media (max-width: 768px){
  /* ヒーロー内要素を画面中央に寄せる */
  .hero-overlay{
    justify-content: center;     /* 縦中央 */
    align-items: center;         /* 横中央 */
    padding: 2rem 1.5rem;
    text-align: center;
  }

  /* タイトル・ディレクター・メニュー全体の縦余白を広げる */
  .hero-frame{
    display: flex; flex-direction: column;
    row-gap: 2.4rem;             /* ←全体の縦間隔（さらに広げたい場合 3rem など） */
    align-items: center;
    margin: 0;
  }

  /* タイトルとディレクターの間の余白 */
  .hero-frame .frame-top{
    display:flex; flex-direction:column; align-items:center;
    row-gap: 1.4rem; margin:0;
  }

  .frame-brand, .frame-director{ margin:0; }

  /* Artistic Director の中央揃え & 小さめ文字 */
  .hero-frame .frame-top .frame-director{
    width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center !important; margin:0 auto;
  }
  .hero-frame .frame-top .frame-director .dir-label{
    display:block; font-size:.8rem; letter-spacing:.1em; margin:0;
  }
  .hero-frame .frame-top .frame-director .dir-name{
    display:block; font-size:.7rem; font-weight:600; margin:0;
  }

  /* メニューの横間隔 */
  .frame-nav{ display:flex; justify-content:center; column-gap:1.2rem; flex-wrap:wrap; }

  /* SEASONカード中央寄せ＋サイズ微調整 */
  .hero-season.hero-season--vertical{ margin-left:auto; margin-right:auto; }
  .hero-title{ font-size:2rem; margin-bottom:2rem; }
  .hero-season--vertical .season-year{ font-size:2rem; }
}


/* ===============================
   モバイル：メニューボタンを右上に強制固定
   （干渉系を全てリセット）
=============================== */
@media (max-width: 768px){
  :root{
    --menu-btn-top: 24px;   /* 上からの距離 */
    --menu-btn-right: 20px; /* 右からの距離 */
    --menu-btn-size: 48px;  /* 直径 */
  }

  /* 祖先の transform/backdrop 影響を受けないよう最前面＆完全固定 */
  html, body { position: static; } /* 念のため */

  .vk-mobile-nav-menu-btn{
    position: fixed !important;
    /* 右上にピン留め（left を必ず解除） */
    inset: calc(env(safe-area-inset-top, 0px) + var(--menu-btn-top))
           calc(env(safe-area-inset-right, 0px) + var(--menu-btn-right))
           auto auto !important;
    top: calc(env(safe-area-inset-top, 0px) + var(--menu-btn-top)) !important;
    right: calc(env(safe-area-inset-right, 0px) + var(--menu-btn-right)) !important;
    left: auto !important;   /* ← これが重要 */
    bottom: auto !important;

    width: var(--menu-btn-size);
    height: var(--menu-btn-size);
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);

    display: flex; align-items: center; justify-content: center;
    z-index: 99999 !important; /* ヘッダーや動画より前に */
    transform: none !important; /* テーマ側の変形を無効化 */
    transition: transform .2s ease, background .3s ease, box-shadow .3s ease;
  }

  /* ハンバーガーのライン（白） */
  .vk-mobile-nav-menu-btn .menu-icon,
  .vk-mobile-nav-menu-btn .menu-icon::before,
  .vk-mobile-nav-menu-btn .menu-icon::after{
    background:#fff !important;
    width: calc(var(--menu-btn-size) * 0.5);
    height: 2px;
    border-radius: 1px;
  }
  .vk-mobile-nav-menu-btn .menu-icon::before{ top:-7px; }
  .vk-mobile-nav-menu-btn .menu-icon::after{ top:7px; }
}

/* =========================
   Home：ヘッダーを透過化＆ロゴ非表示
========================= */
body.home .site-header{
  background: transparent;
  box-shadow: none;
}
body.home .site-header .site-header-logo,
body.home .site-header .site-branding { display: none; }

/* PCではヘッダーナビを隠し、フレーム内ナビを使う */
@media (min-width: 769px){
  body.home .site-header nav { display: none; }
}

/* =========================
   ヒーロー内フレーム（上下の細線）
========================= */
.hero-frame{
  position: relative;
  width: min(1200px, 92vw);
  color: #fff;
}
.hero-frame::before,
.hero-frame::after{
  content:"";
  display:block;
  height: 1px;
  background: rgba(255,255,255,.9);
}
.hero-frame::before{ margin-bottom: clamp(18px, 3.5vw, 28px); }
.hero-frame::after{ margin-top: clamp(18px, 3.5vw, 28px); }

/* 上段：左に3段タイトル、右にディレクター */
.frame-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

/* 3段ブランド */
.frame-brand{
  margin:0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(28px, 7vw, 64px);
}
.frame-brand span{ display:block; }

/* 右肩テキスト */
.frame-director{
  margin: .2em 0 0;
  text-align:right;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight:700;
  line-height:1.2;
  font-size: clamp(12px, 1.6vw, 16px);
}
.frame-director .dir-label{ opacity:.95; display:block; }
.frame-director .dir-name{ display:block; margin-top:.25em; }

/* 下段ナビ（中央） */
.frame-nav{
  display:flex;
  flex-wrap:wrap;
  gap: clamp(14px, 2.2vw, 28px);
  justify-content:center;
  align-items:center;
  padding: clamp(10px, 2vw, 14px) 0;
}
.frame-nav a{
  color:#fff !important;
  text-decoration:none !important;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  font-size: clamp(12px, 1.6vw, 16px);
  position:relative;
  padding-bottom: 2px;
}
.frame-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0%; height:1px;
  background:#fff;
  transition: width .25s ease;
}
.frame-nav a:hover::after{ width:100%; }


/* =========================
   レスポンシブ
========================= */
@media (max-width: 768px){
  /* スマホではフレームを中央寄せ＆余白調整 */
  .hero-overlay{ align-items:center; }
  .hero-frame{ width: 92vw; }

  /* 右肩テキストは下に回す */
  .frame-top{
    flex-direction: column;
    align-items: flex-start;
  }
  .frame-director{
    margin-top: .75rem;
    text-align:left;
    letter-spacing:.1em;
    font-weight:600;
  }

  /* スマホはハンバーガー運用にする場合は下記でフレーム内ナビを隠す */
  /* .frame-nav{ display:none; } */
}

/* ========== Hero: フレームを上側にきれいに配置 ========== */
/* 下寄せのままでも、hero-frame を上に固定したい場合のラッパ */
.hero-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* フレーム全体を独立配置（上のラインと動画の距離を整える） */
.hero-frame {
  margin-top: clamp(32px, 9vh, 80px);   /* ここで"上に空白"をつくる */
  margin-bottom: clamp(24px, 6vh, 56px);
}

/* PCで右肩テキストが折れ過ぎるのを防ぐ（最大幅を許容） */
.frame-director { max-width: 40ch; }

/* ========== アクセシビリティ / リンク見栄え ========== */
.frame-nav a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.frame-nav a:active { opacity: .85; }

/* ========== Home専用：ヘッダーとヒーローの干渉を回避 ========== */
body.home .site-header {
  pointer-events: auto;   /* クリックを正常化 */
}
@media (max-width: 768px) {
  /* ホームの先頭がヘッダーに潜らないよう保険の余白 */
  body.home { padding-top: env(safe-area-inset-top, 0px); }
}

/* ========== モバイルメニュー（右上固定の微調整） ========== */
@media (max-width: 768px){
  :root{
    --menu-btn-top: 24px;      /* 好みで微調整可 */
    --menu-btn-right: 20px;
  }
  .vk-mobile-nav-menu-btn{
    /* safe-area に 4px の逃げ */
    top: calc(env(safe-area-inset-top, 0px) + var(--menu-btn-top) + 4px) !important;
    right: calc(env(safe-area-inset-right, 0px) + var(--menu-btn-right) + 4px) !important;
  }
}

/* =========================
   Hero Frame: メニュー右寄せ
========================= */
.hero-frame {
  display: flex;
  flex-direction: column
}

/* 上段を左右配置 */
.frame-top {
  display: flex;
  justify-content: space-between; /* タイトル左、メニュー右 */
  align-items: flex-start;
}

/* タイトルブロック */
.frame-brand {
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(28px, 7vw, 64px);
}

/* 右側メニューを横並び＆右寄せ */
.frame-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 右寄せ */
}

/* メニューリンクの基本スタイル */
.frame-nav a {
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  font-size: clamp(12px, 1.6vw, 16px);
  position: relative;
  padding-bottom: 2px;
}

/* ホバー時の下線 */
.frame-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: #fff;
  transition: width .25s ease;
}
.frame-nav a:hover::after {
  width: 100%;
}

/* モバイル用：縦積み */
@media (max-width: 768px) {
  .frame-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .frame-nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ====== Hero を完全フル幅に（コンテナ制約解除）====== */
body.home .hero-overlay{
  max-width: none !important;   /* 1200px制限を外す */
  width: 100vw !important;      /* 画面幅いっぱい */
  margin-left: 50% !important;  /* コンテナからはみ出し対策：中央寄せ */
  transform: translateX(-50%) !important;
  padding-left: clamp(16px, 3vw, 32px) !important;  /* 左右の安全余白 */
  padding-right: clamp(16px, 3vw, 32px) !important;
  box-sizing: border-box;
}

/* フレーム＆ラインも画面いっぱいに */
.hero-frame{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
  padding: 0;                    /* 余白は overlay 側で管理 */
  box-sizing: border-box;
}
.hero-frame::before,
.hero-frame::after{
  width: 100% !important;
}

/* スマホ微調整（はみ出し防止） */
@media (max-width:768px){
  body.home .hero-overlay{
    width: 100vw !important;
    margin-left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ====== Hero: SEASON カード ====== */
.hero-season-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  padding: 0.8rem 1.5rem;
  margin-bottom: 1rem; /* タイトルとの間隔 */
  color: #fff;
  text-align: center;
  max-width: max-content;
}

.hero-season-card .season-label {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.hero-season-card .season-year {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.hero-season-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  transition: background 0.25s, border-color 0.25s;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .hero-season-card {
    padding: 0.6rem 1rem;
  }
  .hero-season-card .season-year {
    font-size: 1.4rem;
  }
}

.hero-full {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.2));
  z-index: 2;
}

.hero-overlay {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: clamp(16px, 3vw, 32px);
}

.hero-season.hero-season--vertical {
  position: absolute;
  bottom: clamp(24px, 4vh, 64px);
  left: clamp(24px, 4vw, 64px);
}

/* 上部メニュー部分を完全非表示 */
body .site-header,
body .vk_page_header,
body .page-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* スライダーについて。画面幅いっぱい（左右はみ出し対策） */
.hero-slider .swiper{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}

/* PC=横長 / SP=正方形 のアスペクト比 */
.hero-slider .swiper{ aspect-ratio: 1 / 1; }          /* SP: 正方形 */
@media (min-width:1025px){
  .hero-slider .swiper{ aspect-ratio: 21 / 9; }       /* PC: かなり横長（16/9でも可） */
}

/* スライドの土台 */
.swiper-slide{ position:relative; background:none !important; }
.slide-inner{ position:relative; width:100%; height:100%; }

/* 画像（全面フィット） */
.slide-media, .slide-media img{ display:block; width:100%; height:100%; }
.slide-bg{ object-fit:cover; }

/* ヒーロースライダーだけ矢印を表示 */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}


.swiper-button-prev{ left: clamp(10px, 2vw, 20px); }
.swiper-button-next{ right: clamp(10px, 2vw, 20px); }

.swiper-button-prev:hover,
.swiper-button-next:hover{
  background: rgba(0,0,0,.52);
}

/* ページネーション */
.swiper-pagination-bullets .swiper-pagination-bullet{
  background: rgba(255,255,255,.8);
  opacity:.6; width:8px; height:8px;
}
.swiper-pagination-bullet-active{ opacity:1; }

/* 上部の進行バー */
.swiper-progress{
  position:absolute; top:0; left:0;
  height:3px; width:0;
  background:#fff; z-index:5;
}

/* スマホ：矢印を少し小さく・内側に */
@media (max-width:768px){
  .swiper-button-prev, .swiper-button-next{
    width:40px; height:40px;
  }
  .swiper-button-prev{ left: 10px; }
  .swiper-button-next{ right: 10px; }
}




/* ==== ホームのNEWS / Magazine行をflexに上書き（タイトルが左に落ちるのを防ぐ） ==== */
.pba-title-item{
  display: flex !important;
  align-items: baseline;
  gap: 12px;            /* 日付と本文の間隔 */
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* 日付は固定幅で左カラム扱い */
.pba-title-item .pba-date{
  min-width: 140px;     /* 既存グリッドの横幅に相当 */
  white-space: nowrap;
}

/* 右側（NEW＋タイトル）は自然に横並び */
.pba-title-item .bk-new-badge{
  flex: 0 0 auto;       /* 伸びない */
  margin: 0 8px 0 0;    /* NEWの右余白 */
  align-self: center;
}
.pba-title-item .pba-title{
  flex: 1 1 auto;       /* タイトルが残り幅に収まる */
  line-height: 1.6;
}

/* スマホ時の調整（既存レスポンシブに合わせる） */
@media (max-width: 768px){
  .pba-title-item{
    gap: 8px;
    padding: 8px 0;
  }
  .pba-title-item .pba-date{
    min-width: 100px;   /* 既存スマホ幅に合わせる */
    font-size: 14px;
  }
  .pba-title-item .pba-title{
    font-size: 15px;
  }
}


/* =====================================
   Hero 左下パネル（SEASON + PBA CHOR）
   ※ このブロックを CSS の一番下に置く
===================================== */

/* Hero 全体は既に position:relative 指定済みだが、
   念のため再指定しても問題なし */
.hero-full {
  position: relative;
}

/* 左下の「ひとまとまりパネル」 */
.hero-lower-left {
  position: absolute;
  left: clamp(24px, 4vw, 64px);   /* 画面幅に応じて左余白 */
  bottom: clamp(32px, 6vh, 88px); /* 下からの距離：好みで微調整可 */
  z-index: 20;

  display: flex;
  flex-direction: column;
  gap: 0.7rem;                    /* SEASON と PBA CHOR の間隔 */
}

/* --- SEASON カード：hero-lower-left 内では通常フローに --- */
.hero-lower-left .hero-season.hero-season--vertical {
  position: static;   /* ここで absolute を打ち消す */
  bottom: auto;
  left: auto;

  width: 190px;       /* 下のボタンと横幅をそろえる */
  max-width: 100%;
  margin: 0;
}

/* --- PBA CHOR ボタン --- */
.hero-chorus-btn {
  display: block;
  width: 190px;           /* SEASON と同じ幅 */
  padding: 0.6rem 0;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none;

  text-align: center;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
  font-family: "Times New Roman", "游明朝", serif;
  text-transform: uppercase;

  transition: all 0.25s ease;
  box-sizing: border-box;
}

.hero-chorus-btn:hover {
  background-color: #ffffff;
  color: #000000;
}

/* --- モバイル（〜768px）：全体を少し上＆内側へ --- */
@media (max-width: 768px) {

  .hero-lower-left {
    left: clamp(20px, 5vw, 32px);
    bottom: clamp(24px, 10vh, 80px);
    gap: 0.6rem;
  }

  .hero-lower-left .hero-season.hero-season--vertical,
  .hero-chorus-btn {
    width: 170px;           /* スマホでは少し細く */
  }

  .hero-chorus-btn {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    padding: 0.55rem 0;
  }
}

#pba-chorus{
  scroll-margin-top: 110px; /* 固定ヘッダー分。必要なら 90〜140px で調整 */
}




/* =====================================
   Home：PBA Chorus（簡易2ブロック版）
===================================== */

.home-chorus-simple {
  background: #faf7f3;
  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding: 3.5rem 0;
  margin: 5rem auto;
}

.hcs-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hcs-heading {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2.5rem;
}

.hcs-grid {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
}

.hcs-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  padding: 2rem;
  border-radius: 10px;
  width: 100%;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.hcs-item h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.hcs-item p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.hcs-btn {
  display: inline-block;
  padding: 0.7rem 2rem;
  background: #111;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .25s, transform .25s, box-shadow .25s;
}

.hcs-btn:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .hcs-grid {
    flex-direction: column;
    gap: 1.5rem;
  }
  .hcs-item {
    padding: 1.6rem;
  }
  .hcs-heading {
    font-size: 1.5rem;
  }
}


/* =====================================
   Home：PBA Chorus（東京/郡山：見やすく区切る版）
   ※ ここから下が「置き換え後」
===================================== */

/* 都市ごとに "箱" で囲ってブロック感を出す */
.home-chorus-simple .hcs-city{
  margin-top: 2.4rem;
  padding: 2.2rem 1.8rem 1.8rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.06);
}


/* =====================================
   Home：PBA Chorus（都市見出しを"セクション見出し"化）

===================================== */

.home-chorus-simple .hcs-city-title-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 1.6rem;
}

/* 左右のライン */
.home-chorus-simple .hcs-city-title-wrap::before,
.home-chorus-simple .hcs-city-title-wrap::after{
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,.14);
}

/* 中央の都市名（ピルをやめて見出し化） */
.home-chorus-simple .hcs-city-title{
  margin: 0;
  padding: .2rem 0;
  background: transparent;
  border: 0;
  color: #111;
  font-size: 1.48rem;
  font-weight: 850;
  letter-spacing: .20em;
  line-height: 1.2;
  text-transform: uppercase; /* 「TOKYO」等にしたいなら活きる（日本語でも害なし） */
}



/* スマホ：左右ラインを短くして詰まり回避 */
@media (max-width: 768px){
  .home-chorus-simple .hcs-city-title-wrap{
    gap: 12px;
    margin-bottom: 1.2rem;
  }
  .home-chorus-simple .hcs-city-title{
    font-size: 1.02rem;
    letter-spacing: .14em;
  }
}


/* =====================================
   PBA Chor 練習スケジュールページ
===================================== */
.pba-chor-schedule {
  max-width: 960px;
  margin: 0 auto 5rem;
  padding: 0 1.5rem 4rem;
  box-sizing: border-box;
}

/* 導入文 */
.pba-chor-intro {
  font-size: 0.98rem;
  line-height: 1.9;
  color: #444;
  margin-bottom: 2.5rem;
}

/* セクション全体 */
.pba-chor-section {
  margin-bottom: 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* 見出し */
.pba-chor-h2 {
  font-size: 1.6rem;
  margin: 0 0 1.4rem;
}

/* リード文 */
.pba-chor-lead {
  font-size: 0.95rem;
  color: #555;
  margin: 0 0 1.6rem;
}

/* 箇条書き */
.pba-chor-list {
  margin: 0 0 1.2rem 1.2em;
  padding: 0;
}
.pba-chor-list li {
  margin-bottom: 0.4rem;
  line-height: 1.8;
}

/* 表まわり */
.pba-chor-table-wrap {
  overflow-x: auto;
}

.pba-chor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #fff;
}

.pba-chor-table thead {
  background: #f5f5f5;
}

.pba-chor-table th,
.pba-chor-table td {
  padding: 0.7rem 0.8rem;
  border: 1px solid #e0e0e0;
  text-align: left;
  white-space: nowrap;
}

.pba-chor-table td:nth-child(5) {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: keep-all;
}


/* メールリンク */
.pba-chor-section a {
  color: #002147;
  text-decoration: underline;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .pba-chor-schedule {
    padding: 0 1rem 3rem;
  }
  .pba-chor-h2 {
    font-size: 1.4rem;
  }
  .pba-chor-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
  }
  .pba-chor-table th,
  .pba-chor-table td {
    padding: 0.55rem 0.5rem;
    font-size: 0.88rem;
  }
}


/* ===============================
   スマホ：表をカード表示にして見やすく
   =============================== */
@media (max-width: 768px){

  /* ジャンプボタンをスマホ向けに */
  .pba-chor-schedule .pba-chor-nav{
    justify-content: flex-start;
    gap: 8px;
    margin: 12px 0 16px;
  }
  .pba-chor-schedule .pba-chor-nav__btn{
    padding: 8px 12px;
    font-size: .92rem;
  }

  /* 横スクロールをやめてカード化 */
  .pba-chor-schedule .pba-chor-table-wrap{
    overflow: visible;
  }

  .pba-chor-schedule .pba-chor-table,
  .pba-chor-schedule .pba-chor-table thead,
  .pba-chor-schedule .pba-chor-table tbody,
  .pba-chor-schedule .pba-chor-table tr,
  .pba-chor-schedule .pba-chor-table th,
  .pba-chor-schedule .pba-chor-table td{
    display: block;
    width: 100%;
  }

  /* ヘッダーは非表示（各行にラベルを付ける） */
  .pba-chor-schedule .pba-chor-table thead{
    display: none;
  }

  /* 1行 = 1カード */
  .pba-chor-schedule .pba-chor-table tbody tr{
    margin: 0 0 12px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
  }

  /* セルを「ラベル：値」の2カラムに */
  .pba-chor-schedule .pba-chor-table tbody tr td{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 0;
    border-top: 1px solid rgba(0,0,0,.06);
    text-align: left;
    white-space: normal !important; /* スマホは折り返しOKに */
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
  }
  .pba-chor-schedule .pba-chor-table tbody tr td:first-child{
    border-top: 0;
  }

  /* 左のラベル */
  .pba-chor-schedule .pba-chor-table tbody tr td::before{
    flex: 0 0 4.5em;
    font-weight: 800;
    color: rgba(0,0,0,.6);
    letter-spacing: .03em;
    line-height: 1.3;
    content: "";
  }
  .pba-chor-schedule .pba-chor-table tbody tr td:nth-child(1)::before{ content: "日付"; }
  .pba-chor-schedule .pba-chor-table tbody tr td:nth-child(2)::before{ content: "曜日"; }
  .pba-chor-schedule .pba-chor-table tbody tr td:nth-child(3)::before{ content: "時間"; }
  .pba-chor-schedule .pba-chor-table tbody tr td:nth-child(4)::before{ content: "会場"; }
  .pba-chor-schedule .pba-chor-table tbody tr td:nth-child(5)::before{ content: "練習曲"; }

  /* バッジをスマホ向けに少し小さく */
  .pba-chor-schedule .pba-badge{
    font-size: .78em;
    padding: .18em .55em;
    margin-right: .45em;
  }

  /* 状態（終了/本日/次回/開催中）をカードとして分かりやすく */
  .pba-chor-schedule .pba-chor-table tr.is-past{
    opacity: .65;
    box-shadow: none;
  }
  .pba-chor-schedule .pba-chor-table tr.is-next{
    border-width: 2px;
  }
  .pba-chor-schedule .pba-chor-table tr.is-now{
    border-width: 2px;
  }
}

/* ===============================
   スマホ：文字サイズUP + 過去枠（折りたたみ）
   =============================== */
@media (max-width: 768px){

  /* 全体を少し大きく */
  .pba-chor-schedule{
    font-size: 16.5px;
  }
  .pba-chor-intro{
    font-size: 1rem;
  }
  .pba-chor-h2{
    font-size: 1.45rem;
  }

  /* カードの本文（td）を大きめに */
  .pba-chor-schedule .pba-chor-table tbody tr td{
    font-size: 1rem;
    line-height: 1.55;
  }

  /* 左ラベル（::before） */
  .pba-chor-schedule .pba-chor-table tbody tr td::before{
    font-size: .95rem;
  }

  /* "すでに終わった練習" セクション */
  .pba-chor-schedule .pba-chor-past{
    margin-top: 14px;
  }
  .pba-chor-schedule .pba-chor-past__head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 10px 2px 8px;
  }
  .pba-chor-schedule .pba-chor-past__title{
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .02em;
  }
  .pba-chor-schedule .pba-chor-past__toggle{
    appearance: none;
    border: 1px solid rgba(0,0,0,.18);
    background: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
  }

  /* 過去枠のカードは少し薄め（見分け） */
  .pba-chor-schedule .pba-chor-table--past tbody tr{
    opacity: .88;
  }
}




/* =======================================
   PBA Chor 団員募集ページ（/pba_chor2/）
======================================= */

.pba-chor2-main{
  max-width: 960px;
  margin: 3rem auto 5rem;
  padding: 2.5rem 2rem 3.5rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,.05);
  box-sizing: border-box;
}

/* ベース文字 */
.pba-chor2-main p,
.pba-chor2-main li{
  font-size: 0.98rem;
  line-height: 1.9;
  color: #333;
}

/* 見出し */
.pba-chor2-main h1{
  font-size: 1.9rem;
  margin: 0 0 1.6rem;
  text-align: center;
}
.pba-chor2-main h2{
  font-size: 1.5rem;
  margin: 2.5rem 0 1.2rem;
}
.pba-chor2-main h3{
  font-size: 1.05rem;
  margin: 1.6rem 0 .6rem;
}

/* 区切り線 */
.pba-chor2-main hr{
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin: 2.4rem 0;
}

/* 箇条書き */
.pba-chor2-main ul{
  margin: 0 0 1.2rem 1.3em;
  padding: 0;
}
.pba-chor2-main ul li{
  margin-bottom: .4rem;
}

/* Q&A -------------------------- */
.pba-qa-list{
  margin-top: 1rem;
}
.pba-qa-item{
  margin-bottom: 1.4rem;
}
.pba-qa-item h3{
  position: relative;
  padding-left: 2.4em;
}
.pba-qa-item h3::before{
  content: "Q";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: #222;
  color: #fff;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .05em;
}
.pba-qa-item p{
  background: #faf4ed;
  border-left: 3px solid #e1c3a0;
  padding: .7rem 1rem;
  margin-top: .3rem;
  border-radius: 4px;
}

/* 申込ボタン（Googleフォーム） */
.pba-chor2-main .vk_button{
  display:inline-block;
  margin: 1.2rem 0 .8rem;
  padding: 0.9rem 2.6rem;
  border-radius: 999px;
  background:#111;
  color:#fff !important;
  text-decoration:none !important;
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  transition: background .25s, transform .15s, box-shadow .15s;
}
.pba-chor2-main .vk_button:hover{
  background:#333;
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

/* PDFリンクをタグ風に */
.pba-chor2-main a[href$=".pdf"]{
  display:inline-block;
  margin-top:.6rem;
  padding:.4rem 1.2rem;
  border-radius:999px;
  border:1px solid #888;
  font-size:.85rem;
  text-decoration:none !important;
  color:#333;
}
.pba-chor2-main a[href$=".pdf"]:hover{
  background:#f2f2f2;
}

/* 汎用リンク色 */
.pba-chor2-main a{
  color:#002147;
}

/* スマホ調整 */
@media (max-width: 768px){
  .pba-chor2-main{
    margin: 2rem auto 4rem;
    padding: 1.8rem 1.2rem 2.6rem;
    border-radius: 10px;
  }
  .pba-chor2-main h1{
    font-size: 1.6rem;
  }
  .pba-chor2-main h2{
    font-size: 1.3rem;
  }
  .pba-chor2-main h3{
    font-size: 1.0rem;
  }
  .pba-chor2-main .vk_button{
    width: 100%;
    text-align: center;
  }
}


/* ===============================
   PBA Chor スケジュールボタン
=============================== */
.pba-chor-schedule-btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  background: #111;
  color: #fff !important;
  font-size: 0.95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: background .25s ease, transform .15s ease, box-shadow .15s ease;
}

.pba-chor-schedule-btn:hover {
  background: #333;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* スマホでは幅100%にして親切に */
@media (max-width: 768px){
  .pba-chor-schedule-btn {
    width: 100%;
    text-align: center;
  }
}



/* =====================================
   ABCシリーズ（テンプレ）デザイン
   ※ .abc6__heroのgrid定義は削除（実際は.abc6__heroContentがgridコンテナ）
   ===================================== */

.abc-template .entry-header{ display:none; } /* タイトル重複を抑える（テーマ側） */

.abc6{
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 34px) 14px 26px;
}

/* .abc6__heroのgrid定義は削除済み（functions.phpで管理） */