/* ============================================================
   /course/working-adults/ 専用のスタイル

   前提: tokens.css → layout.css → button.css → course/css/local.css の順で
   読み込んだあとに、このファイルを最後に置く。
   /course/ 配下の他ページと同じ組み立て方。
   ============================================================ */

.wa-hero .ds-lede,
.wa-cta .ds-lede,
.wa-note {
  max-width: var(--measure);
}

/* 節の末尾に置く補足。本文と同じ見た目のまま離れていると宙に浮くので、
   区切り線を引いて注記だと分かるようにし、上下の間隔を詰める。 */
.wa-note {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

/* --- どのコースを選ぶか（A / B の2分岐）---------------------- */
/* 番号ではなく A / B にしてあるのは、順番のある手順ではなく
   どちらか一方を選ぶ分岐だから（高校生ページの .hs-steps とは別物）。 */
.wa-patterns {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

/* 広い画面ではAとBを横に並べる。
   1カラムのままだと、カードは全幅なのに本文が測度（42em）で折り返すため、
   右半分がまるごと空いて見える（course/css/local.css の .course-info-box に
   同じ理由で入っている2カラム化と同じ話）。
   AとBは「どちらか一方を選ぶ」対なので、横に並べたほうが対比も読み取りやすい。
   ブレークポイントは .course-info-box と同じ 64rem に揃える。 */
@media (min-width: 64rem) {
  .wa-patterns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    /* align-items は既定の stretch のまま。本文の長さが違っても下端はそろえる。 */
  }
}

/* カードの下に続く .course-info-box が密着して見えていたので離す
   （.course-info-box 側は margin-bottom しか持っていない）。 */
.wa-patterns + .course-info-box {
  margin-top: var(--space-8);
}

.wa-pattern {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.wa-pattern__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  border-radius: 999px;
  background: var(--sky-600);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
}

.wa-pattern__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wa-pattern__when {
  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);
}

.wa-pattern__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.wa-pattern__pick {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  color: var(--ink);
}

.wa-pattern__pick strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--sky-700);
}

.wa-pattern__body {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.wa-pattern__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sky-700);
}

@media (max-width: 63.999rem) {
  .wa-pattern__lead,
  .wa-pattern__body {
    max-width: var(--measure);
  }
}

/* --- 時刻が決まっているのはどこか ---------------------------- */
/* 4列あるので、狭い画面では表ごと横スクロールさせる
   （ページ本体が横に伸びないようにする）。 */
.wa-fixed-wrap {
  margin: var(--space-6) 0 0;
  overflow-x: auto;
}

.wa-fixed {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.wa-fixed th,
.wa-fixed td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.wa-fixed thead th {
  border-bottom-width: 2px;
  color: var(--ink-strong);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.wa-fixed tbody th {
  width: 11rem;
  color: var(--ink-strong);
  font-weight: 700;
}

.wa-fixed tbody td {
  color: var(--ink-muted);
}

/* --- フルタイムで対策できる場合 ------------------------------ */
/* 3つとも「何を増やしたいか → どのコースか」の対なので、
   A/B のカードと同じ作りで横に3枚並べる。
   dt/dd の2段組にすると本文がラベル列を引いた幅までしか伸びず、
   広い画面で右側が大きく空いてしまう。 */
.wa-fulltime {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .wa-fulltime {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* align-items は既定の stretch のまま。start にすると本文の長さぶんだけ
       カードが縮み、下端が不ぞろいになる（2026-08-27 指摘）。 */
  }
}

.wa-fulltime__item {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.wa-fulltime__q {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}

.wa-fulltime__a {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

@media (max-width: 63.999rem) {
  .wa-fulltime__a {
    max-width: var(--measure);
  }
}

/* --- 費用 / 向いていない場合 --------------------------------- */
.wa-cost,
.wa-notfor {
  max-width: var(--measure);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.wa-cost li,
.wa-notfor li {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

.wa-cost li:last-child,
.wa-notfor li:last-child {
  border-bottom: 1px solid var(--line);
}

.wa-cost strong,
.wa-notfor strong {
  color: var(--ink-strong);
}

/* --- 予約は取れるのか ---------------------------------------- */
/* 3点とも「枠の出し方」の話なので、フルタイムの節と同じカード3枚にそろえる。 */
.wa-booking {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .wa-booking {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.wa-booking__item {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.wa-booking__title {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--ink-strong);
}

.wa-booking__body {
  flex: 1;
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.wa-booking__link {
  align-self: flex-start;
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--sky-700);
}

@media (max-width: 63.999rem) {
  .wa-booking__body {
    max-width: var(--measure);
  }
}