@charset "UTF-8";

/*==================================================
  コース一覧ページ共通レイアウト
==================================================*/

/* ページ全体の余白調整 */
article#course section {
  padding: 0 0 50px;
}

/* 見出しまわり（共通.cssの上書きは最小限） */
article#course h1 {
  text-align: center;
  margin-bottom: 1.5em;
}

article#course h1 span {
  display: block;
  font-size: 60%;
  margin-top: .3em;
}

/* 「授業コース一覧」ボックス内の本文 */
article#course .box p {
  font-size: 1.5rem;
  line-height: 1.6;
}

/*==================================================
  コース一覧テーブル（ここが今回の本丸）
  横スクロールなしでスマホ幅に収める
==================================================*/

article#course .js-scrollable {
  /* ScrollHint を使わないので、特別な指定は不要。
     念のためはみ出しを隠しておく。 */
  overflow-x: hidden;
}

/* テーブル本体 */
article#course .course_table {
  width: 100%;              /* コンテナ幅にフィット */
  max-width: 100%;          /* 700px 固定をやめる */
  table-layout: fixed;      /* 各列幅を均等ベースで計算 */
  border-collapse: collapse;
  font-size: 1.5rem;
}

/* ヘッダ・セル共通 */
article#course .course_table th,
article#course .course_table td {
  padding: 8px 4px;
  word-wrap: break-word;
  white-space: normal;
}

/* ヘッダ */
article#course .course_table th {
  background: #333;
  color: #fff;
  text-align: center;
}

/* 1列目：コース名（やや広め） */
article#course .course_table th:nth-child(1),
article#course .course_table td:nth-child(1) {
  width: 40%;
}

/* 2列目：曜日時間 */
article#course .course_table th:nth-child(2),
article#course .course_table td:nth-child(2) {
  width: 25%;
  text-align: center;
}

/* 3列目：対象学年 */
article#course .course_table th:nth-child(3),
article#course .course_table td:nth-child(3) {
  width: 35%;
}

/* リンク（コース名）の装飾は既存デザインを尊重 */
article#course .course_table td a {
  display: inline-block;
  padding: 0 0.5em;
  color: #FF2700;
  border-bottom: 1px solid #ff2700;
  position: relative;
  font-weight: 600;
}

article#course .course_table td a::after {
  content: "▶";
  font-size: 0.9em;
  margin-left: 0.3em;
}

/* スマホ向け微調整 */
@media screen and (max-width: 600px) {

  article#course .course_table {
    font-size: 1.3rem;      /* 全体を少しだけ小さく */
  }

  article#course .course_table th,
  article#course .course_table td {
    padding: 4px 2px;
  }

  /* 念のためはみ出しを確実にカット */
  article#course .js-scrollable {
    overflow-x: hidden;
  }
}

/*==================================================
  学年別の説明ブロック（アコーディオン）
==================================================*/

article#course .course_list {
  margin-top: 30px;
}

/* アコーディオンの見出し（dt） */
article#course .course_list dl dt {
  background: #333;
  color: #fff;
  padding: 0.8em 1em;
  margin-top: 10px;
  cursor: pointer;
  position: relative;
  font-weight: 600;
}

/* 見出しの右側の「＋／－」マーク */
article#course .course_list dl dt::after {
  content: "＋";
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
}

/* 開いている状態 */
article#course .course_list dl dt.active::after {
  content: "－";
}

/* 中身（dd） */
article#course .course_list dl dd {
  display: none;
  padding: 1em;
  background: #f8eded;
  line-height: 1.6;
}

/* 中の見出しなど */
article#course .course_list dl dd h3 {
  margin: 1em 0 0.5em;
  font-size: 1.7rem;
}

article#course .course_list dl dd p {
  font-size: 1.5rem;
  margin-bottom: 1em;
}

/* 体験記リンク */
article#course .course_list dl dd a {
  display: inline-block;
  margin-top: 0.5em;
  color: #CF1114;
  border-bottom: 1px solid #CF1114;
}

/*==================================================
  細かい調整
==================================================*/

article#course .txt_center {
  text-align: center;
}