/* =====================================
   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;
  }
}