/* main */

.main_pic {
  position: relative;
  height: 60vw;
  max-height: 420px;
  min-height: 250px;
  overflow: hidden;
}

.main_pic>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main_pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.main_pic_school .main_copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 縦中央 */
  text-align: center;
  color: #fff;
}

.main_pic_school h1 {
  font-family: "Montserrat", sans-serif;
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 0 8px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
}

.main_pic_school .main_sub {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}


.aboutclass {
  padding: 24px 16px 40px;
}

.aboutclass__radio {
  position: absolute;
  left: -9999px;
}

.aboutclass__inner {
  margin-top: 16px;
}

/* タブ */
.aboutclass__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0 14px;
}

.aboutclass__tab {
  position: relative;
  display: grid;
  place-items: center;
  height: 44px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid #1f6d3a;
  /* 緑枠 */
  background: #fff;
  color: #1f6d3a;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .15);

}

/* 選択中（濃い緑） */
#aboutclass-tab-adult:checked~.aboutclass__inner .aboutclass__tab--adult,
#aboutclass-tab-junior:checked~.aboutclass__inner .aboutclass__tab--junior {
  background: #1f6d3a;
  color: #fff;
}

/* 選択中の「小さな三角（しっぽ）」 */
#aboutclass-tab-adult:checked~.aboutclass__inner .aboutclass__tab--adult::after,
#aboutclass-tab-junior:checked~.aboutclass__inner .aboutclass__tab--junior::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #1f6d3a;
}

/* 表示エリア */
.aboutclass__panels {
  padding-top: 10px;
  /* 三角の分ちょい空け */
}

/* 初期は全部隠して、checkedの方だけ表示 */
.aboutclass__panel {
  display: none;
}

#aboutclass-tab-adult:checked~.aboutclass__inner .aboutclass__panel--adult {
  display: block;
}

#aboutclass-tab-junior:checked~.aboutclass__inner .aboutclass__panel--junior {
  display: block;
}

/* カード縦並び */
.aboutclass__list {
  display: grid;
  gap: 10px;
}

.aboutclass__card {
  position: relative;
  /* ← 追加：擬似要素の基準 */
  border: 1px solid #333;
  border-radius: 0;
  padding: 12px 12px 12px 20px;
  box-shadow: none;
}

.aboutclass__card::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0;
  background: #cfcfcf;
}

.aboutclass__cardTitle {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #001F62;
  border-bottom: 1px solid #001F62;
  padding-bottom: 8px;
}

.aboutclass__cardTitle span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

.aboutclass__cardText {
  padding: 10px 5px;
  display: block;
  color: #001F62;
  padding-left: 5px;
  font-size: 12px;
  line-height: 1.5;
}

/* パネル上の余白（タブの三角分） */
.aboutclass__panels {
  padding-top: 14px;
}

/* クラス別の色（必要に応じて調整してOK） */
.aboutclass__card--beginner::before {
  background: #73FDEA;
}

.aboutclass__card--low::before {
  background: #56C1FF;
}

.aboutclass__card--lowmid::before {
  background: #00A2FF;
}

.aboutclass__card--mid::before {
  background: #0076BA;
}

.aboutclass__card--high::before {
  background: #FF42A1;
}

.aboutclass__card--sinia::before {
  background: #B51700;
}
.aboutclass__card--game::before {
  background: #FF95CA;
}
.aboutclass__card--singles::before {
  background: #FF95CA;
}

.aboutclass__card--red::before {
  background: #FF644E;
}

.aboutclass__card--orange::before {
  background: #FFB74D;
}

.aboutclass__card--green::before {
  background: #61D836;
}

.aboutclass__card--deepgreen::before {
  background: #FFF056;
}

.aboutclass__card--juniorHS::before {
  background: #FF42A1;
}




.schoolprice {

  padding: 32px 24px 50px;

}

.schoolprice__inner {

  margin-top: 24px;

}

.schoolprice__block {

  margin-top: 30px;

}

/* 入会金・年会費 */

.schoolprice__entry {
  margin: 22px auto 36px;
}

.schoolprice__entry .schoolprice__table {
  width: 78%;
  margin: 0 auto;
  border: 1px solid #999;
}

.schoolprice__entry th {
  width: 45%;
  background: #001F62;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 16px 10px;
}

.schoolprice__entry td {
  width: 55%;
  text-align: center;
  padding: 16px 10px;
}

.schoolprice__price {
  white-space: nowrap;
}

/* テーブル全体 */
.schoolprice__table {

  width: 100%;

  border-collapse: collapse;

  border: 1px solid #B9B9B9;

  background: #fff;

}

/* 見出し（濃いネイビー） */
.schoolprice__table thead th {
  background: #001F62;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  padding: 14px 4px;
}

/* 本文セル */
.schoolprice__table tbody th,
.schoolprice__table tbody td {

  border: 1px solid #b9b9b9;

  padding: 8px 4px;

  font-size: 10px;

  line-height: 1.4;

  vertical-align: middle;

}

.schoolprice__entry .schoolprice__table tbody th {
  background: #001F62;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  padding: 14px 8px;
}

/* 1列目（コース名）：左寄せで見やすく */
.schoolprice__table tbody th {

  text-align: center;
  color: #001F62;

  font-weight: 700;

}

/* 時間・料金は中央寄せ */
.schoolprice__table tbody td {
  text-align: center;
  color: #001F62;

}

/* 料金の強調 */
.schoolprice__yen {
  font-size: 12px;
  font-weight: 700;
  color: #001F62;
}

.schoolprice__tax {

  display: inline;
  color: #001F62;

  font-size: 6px;

}

.schoolprice__heading {
  font-size: 16px;
  font-weight: 700;
  color: #001F62;
  margin: 30px 0 10px;
}

/* 列幅（SPでも崩れにくく） */
.schoolprice__block:first-child .schoolprice__table thead th:nth-child(1),
.schoolprice__block:nth-child(2) .schoolprice__table thead th:nth-child(1) {

  width: 36%;

}

.schoolprice__block:first-child .schoolprice__table thead th:nth-child(2),
.schoolprice__block:nth-child(2) .schoolprice__table thead th:nth-child(2) {

  width: 12%;

}

.schoolprice__block:first-child .schoolprice__table thead th:nth-child(3),
.schoolprice__block:first-child .schoolprice__table thead th:nth-child(4),
.schoolprice__block:first-child .schoolprice__table thead th:nth-child(5),

.schoolprice__block:nth-child(2) .schoolprice__table thead th:nth-child(3),
.schoolprice__block:nth-child(2) .schoolprice__table thead th:nth-child(4),
.schoolprice__block:nth-child(2) .schoolprice__table thead th:nth-child(5) {

  width: 17.3%;

}

.schoolprice__note {

  font-size: 9px;

  line-height: 1.8;

  margin-top: 8px;

}

.schoolprice__strong {
  font-weight: 700;
  color: #001F62;
}

.schoolschedule {
  padding: 24px 16px 40px;
}

.schoolschedule__inner {
  margin-top: 30px;
}

.schoolschedule__block+.schoolschedule__block {
  margin-top: 20px;
}

.schoolschedule__heading {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  color: #001F62;
}


/* 画像まわり */
.schoolschedule__pic {
  display: block;
}

.schoolschedule__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e5e5e5;
  /* 画像の輪郭が白背景で消えるの防止 */
  border-radius: 6px;
  /* 角丸が不要なら消してOK */
}

/* 注意書き */
.schoolprice__text {
  font-size: 12px;
  margin-top: 12px;

  color: #001F62;


}

.schoolschedule__note {
  margin-top: 12px;
  font-size: 12px;
  color: #001F62;
}

/*==================================
Schedule / System 共通
==================================*/

.schoolschedule{
    padding:30px 30px 0;
}

.schoolschedule__inner,
.system__inner{
    margin-top:24px;
}

.schoolschedule__block{
    margin-bottom:30px;
}


/*==================================
PDF Button
==================================*/

.schoolschedule__button {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  height: 56px;

  padding: 0 22px;

  margin-bottom: 20px;

  background: #0B7B1D;

  border-radius: 999px;

  text-decoration: none;

  color: #fff;

  box-sizing: border-box;

}


.schoolschedule__icon {

  width: 22px;

  height: 22px;

  flex-shrink: 0;

}


.schoolschedule__text {

  flex: 1;

  margin-left: 14px;

  font-size: 14px;

  font-weight: 700;

  color: #fff;

  line-height: 1;

}


.schoolschedule__arrow {

  font-size: 26px;

  font-weight: 700;

  line-height: 1;

  color: #fff;

}

.schoolschedule__pdf {
  position: relative;
  width: 100%;
  padding-top: 141.4%;
  margin-top: 20px;
}

.schoolschedule__pdf iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}




/* PC（960px〜）*/


@media screen and (min-width: 960px) {


  .schoolprice,
  .schoolschedule {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0 80px;
  }

  /* 中身：本文の幅（academyと同じ） */
  .section_title,
  .section_sub,
  .aboutclass__inner,
  .schoolprice__inner,
  .schoolschedule__inner,
  .system__inner,
  .schoolprice,
  .schoolschedule,
  .system {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
  }



  .aboutclass__inner,
  .schoolprice__inner,
  .schoolschedule__inner {
    margin-top: 0;
  }



  .aboutclass {
    background: #f3f3f3;
  }

  .aboutclass__inner {
    max-width: 900px;
    /* 画像は1200より細めに見えるので */
    margin: 20px auto 0;
  }

  /* タブ：横幅を広めに＆中央 */
  .aboutclass__tabs {
    max-width: 520px;
    margin: 16px auto 26px;
    gap: 18px;
  }

  .aboutclass__tab {
    height: 48px;
    border-radius: 0;
    font-size: 14px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
  }

  /* 三角ちょい下 */
  #aboutclass-tab-adult:checked~.aboutclass__inner .aboutclass__tab--adult::after,
  #aboutclass-tab-junior:checked~.aboutclass__inner .aboutclass__tab--junior::after {
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1f6d3a;
  }

  /* リスト間隔 */
  .aboutclass__list {
    gap: 10px;
  }

  /* ===== ここが肝：カードを2カラムにする ===== */
  .aboutclass__card {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: stretch;
    padding: 0;
    border: 1px solid #9a9a9a;
    background: #fff;
  }

  /* タイトル：左カラム中央寄せ＋縦中央 */
  .aboutclass__cardTitle {
    display: grid;
    place-items: center;
    margin: 0;
    padding: 14px 20px;
    border-bottom: none;
    border-right: 1px solid #9a9a9a;
    text-align: center;
    font-size: 14px;
    color: #0e2f66;
    font-weight: 800;
  }

  /* 本文：右側に余白 */
  .aboutclass__cardText {
    margin: 0;
    padding: 12px 14px 12px 18px;
    /* 左余白多め（ライン分） */
    font-size: 12px;
    line-height: 1.6;
    color: #222;
  }



  .aboutclass__card {
    position: relative;
  }

  .schoolprice {
    padding: 40px 24px 64px;
  }

  .schoolprice__inner {
    max-width: 1200px;
    margin: 20px auto 0;
  }

  .schoolprice__block+.schoolprice__block {
    margin-top: 22px;
  }

  .schoolprice__table thead th {
    font-size: 14px;
    padding: 14px 10px;
  }

  .schoolprice__table tbody th,
  .schoolprice__table tbody td {
    font-size: 14px;
    padding: 16px 10px;
  }

  .schoolprice__yen {
    font-size: 16px;
  }

  .schoolprice__tax {
    font-size: 12px;
  }

  .schoolprice__note {
    font-size: 13px;
  }

 
  

.schoolschedule{
    padding:40px 24px 64px;
}

.schoolschedule__inner,
.system__inner{
    max-width:1000px;
    margin:20px auto 0;
    padding:0 40px;
    box-sizing:border-box;
}

.schoolschedule__button{
    width:100%;
}

}