/* =========================================================
   コースページ オープンキャンパス
   ※既存のタブサイズ・余白・形状・レイアウトは変更しない
========================================================= */
.infoOC {
  margin-bottom: 2rem;
}
.infoOC__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 30px 0;
}

.infoOC__tab {
  appearance: none;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 10px 24px;
  background-color: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;
    font-size: 14px;
}

.infoOC__tab.is-active {
  background-color: #fff;
  color: #fc809b;
}

.infoOC__panel[hidden] {
  display: none;
}

.notfound {
    font-size: 14px;
    color: #fff;
}

@media screen and (max-width: 767px) {
  .infoOC__tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 16px 0;
  }
  article[id^=r-course] .infoOC__notice {
      margin-bottom: 16px;
  }
  .infoOC__tab {
    width: 100%;
    padding: 6px 5px;
    font-size: 13px;
  }
  article[id^=r-course] .infoOC__lists {
      gap: 10px;
  }
  
    article[id^=r-course] .infoOC__heading {
        margin-bottom: 16px;
    }
    article[id^=r-course] .infoOC__btn {
        margin: 16px auto 0;
    }
    article[id^=r-course] .infoOC {
        padding: 32px 18px;
    }
}


/*
 * 既存CSS例：
 *
 * article[id^="r-course"] .infoOC {
 *   background-color: #e60012;
 *   min-width: 1280px;
 *   padding: 60px 40px 80px;
 * }
 *
 * このCSSでは背景色のみコース別に上書きします。
 * min-width、padding、タブデザインは既存CSSを維持します。
 */

article[id^="r-course"] .infoOC {
  --info-oc-color: #fc809b;

  background-color: var(--info-oc-color);
}

/* =========================================================
   タブの選択状態
   サイズ・余白・背景・ボーダーなどは既存CSSを使用
========================================================= */

article[id^="r-course"] .infoOC .infoOC__tab.is-active {
  color: var(--info-oc-color);
}

/* =========================================================
   校舎パネルの表示制御
========================================================= */

article[id^="r-course"] .infoOC .infoOC__panel[hidden] {
  display: none !important;
}

/* =========================================================
   コース別カラー
========================================================= */

/* 声優・エンターテイナー学部 */
article[id^="r-course"] .infoOC.infoOC--entertainment {
  --info-oc-color: #fc809b;
}

/* アニメーション学部 */
article[id^="r-course"] .infoOC.infoOC--animation {
  --info-oc-color: #1a6ec7;
}

/* クリエイター学部 */
article[id^="r-course"] .infoOC.infoOC--creator {
  --info-oc-color: #19A245;
}

/* 芸能スタッフ学部 */
article[id^="r-course"] .infoOC.infoOC--entertainmentstaff {
  --info-oc-color: #aa4dcc;
}

/* リモート学部 */
article[id^="r-course"] .infoOC.infoOC--remote {
  --info-oc-color: #05a6a8;
}


/* =========================================================
   必要に応じて追加するコース
========================================================= */

/*
article[id^="r-course"] .infoOC.infoOC--new-course {
  --info-oc-color: #00a7a0;
}
*/