/* ============================================================
   /course/online/ 専用のスタイル

   前提: tokens.css → layout.css → button.css → course/css/local.css の順で
   読み込んだあとに、このファイルを最後に置く。
   /course/writing-correction/ /course/speaking/ と同じ組み立て方で、
   借りている上位クラスも同じ（.course-info-box / .faq-section-inline）。
   ============================================================ */

/* --- ヒーローと共通の小物 ------------------------------------ */
.on-hero .ds-lede,
.on-cta .ds-lede {
  max-width: var(--measure);
}
.on-note {
  max-width: var(--measure);
  margin: var(--space-4) 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
.on-note--small {
  font-size: var(--fs-micro);
  color: var(--ink-subtle);
}
.on-note a {
  color: var(--sky-700);
}

/* ============================================================
   1週間の流れ
   縦の1本線でつないで、順番に進むことを見せる。
   「決まった時刻」の1ステップだけ色を載せる。ここが時差の論点そのものなので、
   全部を同じ見た目にすると、いちばん伝えたい一点が埋もれる。
   ============================================================ */
.on-flow {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.on-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-4);
  padding: 0 0 var(--space-6);
}
.on-flow__item:last-child {
  padding-bottom: 0;
}
/* 番号どうしをつなぐ縦線。最後の項目には引かない。 */
.on-flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.5rem;
  bottom: 0.25rem;
  left: 1.125rem;
  width: 2px;
  background: var(--line);
}
.on-flow__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-muted);
}
.on-flow__item--sync .on-flow__no {
  border-color: var(--sky-600);
  background: var(--sky-600);
  color: #fff;
}
.on-flow__body {
  padding-top: 0.2rem;
}
.on-flow__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}
.on-flow__badge {
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--sky-600);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}
.on-flow__when {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--sky-700);
}
.on-flow__text {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* ============================================================
   時差の表
   列を落とすと比較にならないので、狭い画面では横スクロールさせる。
   ============================================================ */
.on-table-scroll {
  overflow-x: auto;
  margin: var(--space-6) 0 var(--space-3);
  -webkit-overflow-scrolling: touch;
}
.on-tz {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: lining-nums tabular-nums;
  background: var(--surface);
}
.on-tz th,
.on-tz td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.on-tz thead th {
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
}
.on-tz tbody th {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
}
.on-tz tbody tr:last-child th,
.on-tz tbody tr:last-child td {
  border-bottom: 0;
}
/* 基準の行だけ色を載せる。どこから換算しているのかが一目で分かるように。 */
.on-tz__base {
  background: var(--sky-50);
}
.on-tz__base th,
.on-tz__base td {
  color: var(--sky-800);
  font-weight: 700;
}

/* ============================================================
   使うツール
   ============================================================ */
.on-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.on-tool {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.on-tool__for {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--sky-600);
}
.on-tool__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}
.on-tool__desc {
  flex: 1;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
.on-tool__link {
  margin-top: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sky-700);
}

/* ============================================================
   コース別の進み方
   ============================================================ */
.on-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.on-mode {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.on-mode__name {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}
.on-mode__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink);
}
.on-mode__facts {
  flex: 1;
  margin: 0 0 var(--space-4);
}
.on-mode__facts > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 30rem) {
  .on-mode__facts > div {
    grid-template-columns: 9.5rem 1fr;
    gap: var(--space-2);
  }
}
.on-mode__facts dt {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--ink-muted);
}
.on-mode__facts dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink);
}
.on-mode__link {
  margin-top: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sky-700);
}

/* コース別の場合分け見出し（info-box の中）。
   補講のようにサミットにしか無い仕組みを説明するとき、
   どのコースの話なのかを見出しで区切らないと両方に効くように読める
   （2026-08-21）。 */
.on-case__title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sky-800);
}
.on-case__title:first-of-type {
  margin-top: var(--space-4);
}

/* 1週間の進み方を2コース並べるための小見出し（2026-08-21）。
   同じ .on-flow を2回出すので、どちらの話かをここで区切る。 */
.on-h3 {
  margin: var(--space-8) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink-strong);
}
.on-h3:first-of-type {
  margin-top: var(--space-6);
}
/* 2つ目以降の .on-flow は上の見出しとの間隔を詰める */
.on-h3 + .on-note + .on-flow,
.on-h3 + .on-flow {
  margin-top: var(--space-4);
}