/* ============================================================
   ANZAS v2 — page-three-months.css
   /three-months/(3ヶ月で英語を身につけるために)だけで使う装飾。
   共通シャーシ(pages.css)・共通部品(main.css)・図の部品(figures.css)の後に読み込む。
   研究カードと図(.av2-gx-ev / .av2-gx-vbar / .av2-gx-cycle / .av2-gx-meta / .av2-gx-refs)の
   装飾は figures.css にあり、新コースのページと共用する。
   BP: 900 / 640 / 560(共通シャーシと共通部品に合わせる)
   ============================================================ */

/* ページヘッダーの一言は、ANZASについてと同じ地味なラベル(バッジにしない)。 */

/* 答えの箱の下の数字 4 つ。ANZASについての設計思想の節と同じ型。 */
.av2-tm-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 48px 0 0; }

/* ---------- 01 なぜ「喋りまくる」のか ─ 本文(左)と、絞り出すの箱(右) ---------- */

/* 左右は同じ幅・同じ高さ。本文の先頭を右の箱の上端に、左の箱の下端を右の箱の下端にそろえる。
   余った高さは、左は本文と新コースの箱のあいだ、右は本文と循環の図のあいだで吸収する。 */
.av2-tm-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: stretch; margin-top: 48px; }
.av2-tm-cols__main { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
/* 1 行目の上の行間の半分(行の高さ 2.0 − 1em の半分)を詰め、文字の頭を右の箱の上辺にそろえる。 */
.av2-tm-cols__lead > .av2-psec__text:first-child { margin-top: -0.5em; }
.av2-tm-cols .av2-psec__text + .av2-psec__text { margin-top: 20px; }
.av2-tm-squeeze { display: flex; flex-direction: column; border-width: 1.5px; padding: 28px 30px 26px; }
.av2-tm-squeeze h3.av2-box__title { margin-top: 14px; font-size: 20px; }
.av2-tm-squeeze .av2-box__text + .av2-box__text { margin-top: 12px; }
.av2-tm-squeeze .av2-gx-fig { margin: auto 0 0; padding-top: 24px; }

/* 本文の下 ─ 同じ上達法を体験とともに行うコース(新コース)への導線。 */
.av2-tm-gx { border-width: 1.5px; padding: 28px 28px 26px; }
.av2-main h3.av2-tm-gx__title { margin-top: 12px; font-size: 19px; line-height: 1.6; }
.av2-tm-gx__title > span, .av2-tm-gx__name > span { display: inline-block; }
.av2-tm-gx__name { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.7; color: var(--av2-brand); }
/* 1 日の流れ。色は新コースのページの時間の帯と同じ。 */
.av2-tm-gx__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 18px 0 4px; padding: 0; list-style: none; }
.av2-tm-gx__step { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; }
.av2-tm-gx__step span { font-size: 11px; font-weight: 700; line-height: 1.4; opacity: .85; }
.av2-tm-gx__step b { font-size: 15px; line-height: 1.4; }
.av2-tm-gx__step--learn { background: var(--av2-brand); color: #fff; }
.av2-tm-gx__step--use { background: var(--av2-yellow); color: var(--av2-ink); }
.av2-tm-gx__step--reflect { background: var(--av2-tint); color: var(--av2-ink); box-shadow: inset 0 0 0 1px var(--av2-tint-border); }
.av2-tm-gx__step:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -17px; translate: 0 -50%; font-family: var(--av2-en); font-size: 13px; font-weight: 700; color: var(--av2-brand); }
.av2-tm-gx__more { margin: 18px 0 0; }

/* ---------- 02 集中 ─ 授業時間の箱(本文と縦棒)・環境 3 つ ---------- */

.av2-tm-hours { margin-top: 48px; padding: 32px 32px 30px; }
.av2-tm-hours__row { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: center; }
.av2-tm-hours h3.av2-box__title { font-size: 22px; }
.av2-tm-hours .av2-box__text { margin-top: 12px; }
.av2-tm-hours .av2-note { margin-top: 14px; }
.av2-tm-hours .av2-gx-fig { margin: 0; }

.av2-tm-env { margin-top: 32px; }
.av2-tm-env h3.av2-box__title { margin-top: 12px; font-size: 17px; }

/* ---------- 03 その先に ─ リンク 2 本 ---------- */

.av2-tm-beyond { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 36px; }

/* ---------- 折り返し(新コースのページと同じ考え方) ---------- */

/* ページヘッダーの H1・コピーと各節のリードは、<span> の単位で折り返す(語の途中で割らない)。 */
.av2-phead__title > span, .av2-phead__copy > span, .av2-psec__copy > span { display: inline-block; }
/* コピーはトップの H1 と同じ 3 文。文ごとに行頭から始め、文の中は <span> の単位で折る。 */
.av2-phead__copy > .av2-tm-line { display: block; }
.av2-tm-line > span { display: inline-block; }

/* 見出し・カードの見出し・FAQ の質問・コピーは、文節で折り返す(Chromium 系だけに効く)。 */
.av2-main :where(h2, h3, summary, .av2-phead__copy, .av2-psec__copy) { word-break: auto-phrase; }
.av2-main :where(h2, h3, summary, .av2-psec__copy) { text-wrap: balance; }

/* 答えの箱は最初に読まれる要約なので、本文も文節で折り返す。太字は塊のまま次の行へ送る。 */
.av2-answer__body { word-break: auto-phrase; }
.av2-answer__body b, .av2-tm-squeeze b, .av2-tm-hours b, .av2-tm-gx b { display: inline-block; }

/* 本文は、最後の行に 1〜2 文字だけ残るのを避ける(対応しているブラウザだけに効く)。 */
.av2-main :where(p) { text-wrap: pretty; }

/* 図の箇条書き(研究 03・05・06)は短い文なので、文節で折り、行の長さを均す。 */
.av2-main .av2-gx-meta__points li { word-break: auto-phrase; text-wrap: balance; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
  .av2-tm-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .av2-tm-cols { grid-template-columns: 1fr; gap: 32px; }
  .av2-tm-cols__lead > .av2-psec__text:first-child { margin-top: 0; }
  .av2-tm-hours__row { grid-template-columns: 1fr; gap: 28px; }
  .av2-tm-hours .av2-gx-fig { max-width: 420px; }
}
/* 3 項目なので、2 列に折ると 1 つだけ下に余る。1 列になる幅(640px)までは 3 列のままにする。 */
@media (min-width: 641px) and (max-width: 900px) {
  .av2-tm-env { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .av2-tm-nums { margin-top: 36px; }
  .av2-tm-cols { margin-top: 36px; }
  .av2-tm-squeeze { padding: 22px 18px 20px; }
  .av2-tm-cols__main { gap: 28px; }
  .av2-tm-gx { padding: 22px 18px 20px; }
  .av2-main h3.av2-tm-gx__title { font-size: 17px; }
  .av2-tm-gx__flow { gap: 16px; }
  .av2-tm-gx__step { padding: 8px 10px; }
  .av2-tm-gx__step b { font-size: 14px; }
  .av2-tm-gx__step:not(:last-child)::after { right: -13px; font-size: 12px; }
  .av2-tm-squeeze h3.av2-box__title { font-size: 18px; }
  .av2-tm-hours { margin-top: 36px; padding: 22px 18px 20px; }
  .av2-tm-hours h3.av2-box__title { font-size: 19px; }
  .av2-tm-env { margin-top: 24px; }
  .av2-tm-beyond { flex-direction: column; gap: 14px; }
}