/*----------------------------------------
KV（旧 /lesson 同様、上部画像を高め 700px に）
----------------------------------------*/
.coursePage::before {
  height: 700px;
}

/* sticky を効かせるため clip に（hidden だと sticky が無効化される。見た目は同じ） */
.coursePage .contents {
  overflow: clip;
}

/*----------------------------------------
タブナビ（固定ヘッダー直下に sticky 追従）
----------------------------------------*/
.courseTabNav {
  position: sticky;
  top: 94px;
  z-index: 200;
  margin-top: -100px;
  padding: 10px 20px;
  background: transparent;
}

.courseTabNav__inner {
  display: flex;
  max-width: 900px;
  margin: 0 auto;
}

/* タブ間の区切り線（端には出さない） */
.courseTab + .courseTab {
  border-left: 1px solid #DDDDDD;
}

.courseTab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 8px;
  background: #F0F0F0;
  color: #666666;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.courseTab__num {
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.courseTab__name {
  font-size: 15px;
  font-weight: bold;
}

.courseTab.is-active {
  color: #FFFFFF;
}

.courseTab--orange.is-active {
  background: #FAA100;
}

.courseTab--red.is-active {
  background: #B30000;
}

.courseTab--blue.is-active {
  background: #0063B9;
}

@media (max-width: 768px) {
  .courseTabNav {
    top: 60px;
    margin-top: -60px;
    padding: 8px 12px;
  }

  .courseTab {
    padding: 12px 4px;
  }

  .courseTab__num {
    font-size: 10px;
  }

  .courseTab__name {
    font-size: 12px;
  }
}

/*----------------------------------------
パネル
----------------------------------------*/
.coursePanel {
  display: none;
}

.coursePanel.is-active {
  display: block;
}

.courseHead__num {
  display: block;
  margin-bottom: 4px;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

.coursePanel__lead {
  margin-top: 18px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
}

.courseFaq .txt {
  margin-bottom: 34px;
}

/* 募集要項（FEEの .joiningFee と同じ白ボックス＋CAMPUSと同じ定義リスト） */
.requirements {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 35px;
  padding: 50px;
  line-height: 1.8;
  background: #FFFFFF;
}

.requirements dt {
  width: 110px;
  padding: 6px 0;
  font-weight: bold;
}

.requirements dd {
  width: calc(100% - 110px);
  padding: 6px 0;
}

@media (max-width: 768px) {
  .requirements {
    display: block;
    margin-top: 20px;
    padding: 15px 20px 20px;
    font-size: 14px;
  }

  .requirements dt {
    width: 100%;
    padding: 8px 0 0;
  }

  .requirements dd {
    width: 100%;
    padding: 0 0 8px;
  }
}

/* FAQページの .box と同じ体裁（グレー地に白のQAカード） */
.courseFaq__box {
  padding: 45px;
  background: #F4F4F4;
}

.courseFaq__box .qa:first-child {
  margin-top: 0;
}

@media (max-width: 768px) {
  .coursePanel__lead {
    font-size: 16px;
  }

  .courseFaq .txt {
    margin-bottom: 22px;
  }

  .courseFaq__box {
    margin: 0 -24px;
    padding: 24px;
  }
}

/* コース詳細（DETAIL）は LESSON ページの CLASS/FEE と同じ体裁。
   見出しは共通の .h1、本文は .joiningFee（スタイルは common.css / lesson.css 側）を流用。 */

/* DETAIL内で注記リスト（.ul）が連続する場合は、間隔を詰めて1つのリストに見せる */
.joiningFee .ul + .ul {
  margin-top: 0;
}

/*----------------------------------------
開講キャンパス
----------------------------------------*/
.campusInfo {
  margin-top: 35px;
  padding: 50px;
  background: #FFFFFF;
}

.campusInfo__name {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #B30000;
}

/* FAQボタンと問い合わせボタンの間隔（同一セクション内で連続させる） */
.courseFaq .btnWrap + .btnWrap {
  margin-top: 28px;
}

.campusInfo__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  line-height: 1.8;
}

.campusInfo__list dt {
  width: 110px;
  padding: 6px 0;
  font-weight: bold;
}

.campusInfo__list dd {
  width: calc(100% - 110px);
  padding: 6px 0;
}

.campusInfo .txt {
  margin-top: 12px;
}

.campusInfo__map {
  position: relative;
  width: 100%;
  height: 360px;
  margin-top: 24px;
}

.campusInfo__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .campusInfo {
    margin-top: 20px;
    padding: 20px 20px 24px;
  }

  .campusInfo__name {
    font-size: 16px;
  }

  .campusInfo__list {
    display: block;
    font-size: 14px;
  }

  .campusInfo__list dt {
    width: 100%;
    padding: 8px 0 0;
  }

  .campusInfo__list dd {
    width: 100%;
    padding: 0 0 8px;
  }

  .campusInfo__map {
    height: 280px;
  }
}

/* 果実籠スケジュールの白ボックスに、他セクション（.acd / FEE / 募集要項）と
   同じ上余白(35px)を付けてリード文との間隔を揃える */
#kajitsukago-schedule .schedule {
  margin-top: 35px;
}

/* レッスンコースのスケジュールはアコーディオンを廃止したため、
   .acd が持っていた上余白(35px)を .classLesson に付けて間隔を保つ */
#lesson-course-schedule .classLesson {
  margin-top: 35px;
}

/* スケジュールの期間名（本文上の見出し）。左の月レンジ列とは別に右の本文側に表示。
   左の月見出しと横ラインを揃えるため relative で微調整（見出しが上にずれるのを下げる） */
.schedule__phase {
  display: block;
  position: relative;
  top: 1px;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: bold;
  color: #B30000;
  line-height: 1.5;
}

/* スライダーの左右矢印を黒に（lesson.css のオレンジ指定を上書き） */
.slide .slick-prev::after {
  border-color: transparent #000000 transparent transparent;
}

.slide .slick-next::after {
  border-color: transparent transparent transparent #000000;
}

/* スライダー画像のアスペクト比を3:2に統一（コース間で高さを揃える。
   レッスン系は元々3:2のため無変化、正方形のYOSAKOI写真は上下をトリミング） */
.coursePage .slide__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* コース概要スライダーを一旦非表示にした影響で、直後のDANCE/YOSAKOI等セクションの
   人物写真(.person)が本文テキストに重なってしまうため、間隔を確保する */
#course01 > section.white .container,
#course02 > section.white .container,
#course03 > section.white .container {
  margin-bottom: 100px;
}

@media (max-width: 768px) {
  #course01 > section.white .container,
  #course02 > section.white .container,
  #course03 > section.white .container {
    margin-bottom: 60px;
  }
}