/* =========================================================
   Course page — match course-design.png / Figma
   ========================================================= */

.page-course{
  --g: #0d8a46;
  --r: #9c0a1c;
  --ink: #1a1a1a;
  --mute: #555;
  --line: #9f9f9f;
  --line-soft: #e0e0e0;
  --side: clamp(20px, 5.5vw, 120px);
  --w: 90%;

  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background: #fff;
}

.course-main{
  overflow-x: clip;
}

/* ---------- SECTION ---------- */
.course-section{
  padding: 80px var(--side) 40px;
}

.course-section--tight{
  padding-top: 40px;
  padding-bottom: 120px;
}

.course-block + .course-block{
  margin-top: 80px;
}

/* ---------- SECTION HEAD ---------- */
.course-head{
  text-align: center;
  margin-bottom: 64px;
}

.course-head__en{
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--g);
}

.course-head__jp{
  margin-top: 16px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}

/* ---------- SUBHEAD ---------- */
.course-subhead{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}

.course-subhead span{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--g);
  flex: none;
}

/* ---------- TABLE SHELL ---------- */
.course-scroll{
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.course-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 720px;
  border: 1px solid var(--line);
}

.course-table th,
.course-table td{
  border: 1px solid var(--line);
  vertical-align: middle;
  word-break: break-word;
}

.course-table thead th{
  background: var(--r);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  padding: 20px 12px;
  border-color: #fff;
  border-top-color: var(--r);
}

.course-table thead th:first-child{
  border-left-color: var(--r);
}

.course-table thead th:last-child{
  border-right-color: var(--r);
}

.course-table tbody th,
.course-table tbody td{
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  padding: 24px 16px;
  font-weight: 400;
}

.course-table tbody th{
  font-weight: 500;
  text-align: center;
  font-size: 18px;
  line-height: 2.4;
}

.course-table__center{
  text-align: center;
}

.course-table__mark{
  text-align: center;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
}

.course-table td p{
  margin: 0;
}

.course-table td p + p{
  margin-top: 0;
}

/* Goals table */
.course-table--goals{
  min-width: 900px;
}

.course-table--goals thead th:nth-child(1){ width: 18.3%; }
.course-table--goals thead th:nth-child(2){ width: 60%; }
.course-table--goals thead th:nth-child(3){ width: 21.7%; }

.course-table--goals tbody td:nth-child(2){
  text-align: left;
  font-size: 16px;
  line-height: 1.7;
  padding: 24px;
}

.course-table--goals tbody td:nth-child(3){
  text-align: center;
  font-size: 16px;
}

/* Levels table */
.course-table--levels{
  min-width: 1100px;
}

.course-table--levels thead th{
  font-size: 16px;
  padding: 14px 8px;
}

.course-table--levels thead tr:first-child th:nth-child(1),
.course-table--levels tbody td:nth-child(1){ width: 8.3%; }

.course-table--levels thead tr:first-child th:nth-child(2),
.course-table--levels tbody td:nth-child(2){ width: 8.3%; }

.course-table--levels thead tr:first-child th:nth-child(3),
.course-table--levels tbody td:nth-child(3){ width: 8.3%; }

.course-table--levels thead tr:first-child th:nth-child(4),
.course-table--levels tbody td:nth-child(4){ width: 10%; }

.course-table--levels thead tr:first-child th:nth-child(5){ width: 20%; }

.course-table--levels thead tr:last-child th{ width: 10%; }

.course-table--levels thead tr:first-child th:nth-child(6),
.course-table--levels tbody td:nth-child(7){ width: 45%; }

.course-table--levels tbody td:nth-child(5),
.course-table--levels tbody td:nth-child(6){
  text-align: center;
  font-weight: 500;
  font-size: 18px;
}

.course-table--levels tbody td:nth-child(3),
.course-table--levels tbody td:nth-child(4){
  font-weight: 500;
  font-size: 18px;
}

.course-table--levels tbody td:last-child{
  text-align: left;
  font-size: 16px;
  line-height: 1.7;
  padding: 24px;
  vertical-align: top;
}

/* Capacity tables */
.course-table--capacity{
  min-width: 800px;
}

.course-table--capacity thead th{
  font-size: 18px;
  padding: 28px 12px;
}

.course-table--capacity thead th:nth-child(1){ width: 11.7%; }
.course-table--capacity thead th:nth-child(2){ width: 16.7%; }
.course-table--capacity thead th:nth-child(3){ width: 16.7%; }
.course-table--capacity thead th:nth-child(4){ width: 10%; }
.course-table--capacity thead th:nth-child(5){ width: 10%; }
.course-table--capacity thead th:nth-child(6){ width: 35%; }

.course-table--capacity tbody td{
  text-align: center;
  font-size: 16px;
  padding: 22px 12px;
}

.course-table--capacity tbody th{
  font-size: 18px;
  font-weight: 500;
}

.course-table__subtotal td,
.course-table__total td{
  font-weight: 700;
  text-align: center;
}

.course-table__subtotal td:first-child,
.course-table__total td:first-child{
  text-align: center;
}

.course-note{
  max-width: var(--w);
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .course-section{
    padding: 56px 20px 24px;
  }

  .course-section--tight{
    padding-bottom: 80px;
  }

  .course-head{
    margin-bottom: 40px;
  }

  .course-block + .course-block{
    margin-top: 56px;
  }

  .course-subhead{
    margin-bottom: 24px;
    font-size: 20px;
  }

  .course-table thead th{
    font-size: 14px;
    padding: 14px 8px;
  }

  .course-table tbody th,
  .course-table tbody td{
    font-size: 14px;
    padding: 16px 12px;
  }

  .course-table--levels tbody td:nth-child(3),
  .course-table--levels tbody td:nth-child(4),
  .course-table--levels tbody td:nth-child(5),
  .course-table--levels tbody td:nth-child(6){
    font-size: 14px;
  }

  .course-table--capacity thead th{
    padding: 16px 8px;
    font-size: 14px;
  }
}

@media (max-width: 600px){
  .course-head__jp{
    font-size: 22px;
  }

  .course-subhead{
    font-size: 18px;
    gap: 12px;
  }
}