/* ==========================================================
   年代別ページ（高校生／専門・大学生／社会人・転職）
   色は各ページの --tg（メイン）と --tg-tint（淡い背景）で切り替える
   ========================================================== */

/* ---------- ヒーロー ---------- */
.tg-hero { padding: 0; background: var(--tg-tint); position: relative; overflow: hidden; }
.tg-hero::before { content: ""; position: absolute; right: -8%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .55; }
.tg-hero-in { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 60px); align-items: center; padding: clamp(48px, 6vw, 84px) 0; }
.tg-hero .crumbs { display: flex; flex-wrap: wrap; gap: .6em; font-size: .72rem; letter-spacing: .06em; color: #666; }
.tg-hero .crumbs a { border-bottom: 1px solid currentColor; }
.tg-en { display: block; margin-top: 1.6em; font-family: var(--font-en); font-size: .82rem; letter-spacing: .2em; color: var(--tg); }
.tg-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.25; letter-spacing: .03em; margin-top: .25em; }
.tg-lead { font-size: clamp(.9rem, 1.2vw, 1rem); line-height: 2; margin-top: 1.2em; word-break: auto-phrase; }
.tg-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2em; }
.tg-acts .btn { min-width: 0; }
.tg-hero-ph { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; box-shadow: 0 24px 50px rgba(0, 0, 0, .12); }
.tg-hero-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-hero-ph.ph--soon { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, #f3f3f3 0 12px, #ececec 12px 24px); }
.tg-hero-ph.ph--soon span { font-size: .86rem; letter-spacing: .12em; color: #999; padding: .5em 1.2em; border: 1px dashed #bbb; border-radius: 999px; background: #fff; }

/* 見出しの縦線・キャプションをページの色に */
.tg .h2 h2 { border-left-color: var(--tg); }
.tg .h2 .cap { color: var(--tg); }

/* ---------- おすすめのコース ---------- */
.tg-course { background: var(--tg-tint); }
.tg-courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.tg-cc { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s ease; }
.tg-cc:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .08); }
.tg-cc-ph { display: block; aspect-ratio: 2 / 1; background: var(--ph-bg, #f3f3f3); }
.tg-cc-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tg-cc-tx { display: flex; flex-direction: column; padding: 18px 22px 22px; }
.tg-cc-tx b { font-size: 1.08rem; letter-spacing: .02em; }
.tg-cc-tx small { font-size: .8rem; color: #555; margin-top: .2em; }
.tg-cc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.tg-cc-tags em { font-style: normal; font-size: .7rem; padding: .25em .75em; border: 1.5px solid var(--tg); border-radius: 4px; }
.tg-cc-go { margin-top: auto; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 1.1em; border-radius: 6px; background: var(--tg); color: #fff; font-size: .8rem; letter-spacing: .06em; }
.tg-cc-go i { font-style: normal; }

/* ---------- 受講生の声 ---------- */
.tg-voice { background: var(--bg-soft); }

/* ---------- ほかの年代 ---------- */
.tg-other-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.tg-other { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; border: 2px solid var(--tg); border-radius: 14px; overflow: hidden; background: #fff; }
.tg-other-ph { aspect-ratio: 4 / 3; background: var(--bg-soft); }
.tg-other-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-other-tx { display: flex; flex-direction: column; gap: .2em; padding: 18px 56px 18px 22px; position: relative; }
.tg-other-tx small { font-family: var(--font-en); font-size: .7rem; letter-spacing: .16em; color: var(--tg); }
.tg-other-tx b { font-size: 1.15rem; }
.tg-other-tx i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--tg); color: #fff; font-style: normal; font-size: .8rem; }

/* ---------- SP ---------- */
@media (max-width: 1099px) {
  .tg-hero-in { grid-template-columns: minmax(0, 1fr); padding: 28px 0 40px; gap: 24px; }
  .tg-hero-ph { order: -1; border-radius: 12px; }
  .tg-hero::before { width: 120%; right: -50%; top: -10%; }
  .tg-en { margin-top: 1em; }
  .tg-acts .btn { width: 100%; }
  .tg-courses, .tg-other-list { grid-template-columns: minmax(0, 1fr); }
  .tg-other { grid-template-columns: 120px minmax(0, 1fr); }
  .tg-other-tx b { font-size: 1rem; }
}

/* ---------- イラスト枠（画像が届くまでは「イラスト準備中」） ---------- */
.tg-illust { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #fff; }
.tg-illust img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tg-illust.is-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; padding: 16px; text-align: center; border: 2px dashed color-mix(in srgb, var(--tg) 45%, #fff); background: repeating-linear-gradient(-45deg, #fafafa 0 12px, #f2f2f2 12px 24px); }
.tg-illust-lbl { font-size: .8rem; letter-spacing: .12em; color: var(--tg); background: #fff; padding: .35em 1.1em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tg) 40%, #fff); }
.tg-illust-memo { font-size: .72rem; line-height: 1.6; color: #888; word-break: auto-phrase; }
.tg-illust-file { font-family: monospace; font-size: .66rem; color: #aaa; }

/* ---------- セクション見出し（LP風・中央寄せ） ---------- */
.tg-sec-en { text-align: center; font-family: var(--font-en); font-size: .9rem; letter-spacing: .24em; color: var(--tg); }
.tg-sec-h { text-align: center; font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.5; letter-spacing: .04em; margin-top: .3em; }
.tg-sec-h em { font-style: normal; color: var(--tg); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--tg) 22%, #fff) 62%); }
.tg-sec-h .sp { display: none; }

/* ---------- お悩み（LP風：人物イラスト＋吹き出し → 矢印 → 解決） ---------- */
.tg-worry { background: var(--bg-soft); padding-bottom: 0; }
.tg-worry-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 44px; }
.tg-illust--worry { aspect-ratio: 3 / 4; }
.tg-bubbles { list-style: none; display: grid; gap: 26px; }
.tg-bubbles li { position: relative; padding: 22px 24px; background: #fff; border: 2px solid #222; border-radius: 22px; font-size: .95rem; line-height: 1.8; word-break: auto-phrase; box-shadow: 4px 4px 0 #222; }
.tg-bubbles li::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; background: #fff; border-right: 2px solid #222; border-bottom: 2px solid #222; }
.tg-bubbles--l li::after { right: -11px; transform: translateY(-50%) rotate(-45deg); }
.tg-bubbles--r li::after { left: -11px; transform: translateY(-50%) rotate(135deg); }
.tg-bubbles--l li:nth-child(2) { margin-left: 28px; }
.tg-bubbles--r li:nth-child(2) { margin-right: 28px; }
.tg-arrow { width: 0; height: 0; margin: 48px auto 0; border-left: 90px solid transparent; border-right: 90px solid transparent; border-top: 56px solid var(--tg); }
.tg-solve { padding: 34px 0 72px; text-align: center; }
.tg-solve-sub { font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: .06em; }
.tg-solve-h { font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.4; letter-spacing: .04em; margin-top: .2em; }
.tg-solve-h span { color: var(--tg); background: linear-gradient(transparent 60%, #ffe45c 60%); padding: 0 .1em; }
.tg-solve-keys { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.tg-solve-keys li { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.4em; border-radius: 999px; background: var(--tg); color: #fff; font-size: .9rem; letter-spacing: .03em; }
.tg-solve-keys i { font-size: .8rem; }

/* ---------- 選ばれる理由（イラストと文章を左右交互に） ---------- */
.tg-points { display: grid; gap: clamp(40px, 5vw, 70px); margin-top: 40px; }
.tg-pt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.tg-pt--rev .tg-illust { order: 2; }
.tg-pt-no { display: flex; align-items: baseline; gap: .4em; font-family: var(--font-en); font-size: .9rem; letter-spacing: .14em; color: var(--tg); }
.tg-pt-no b { font-size: 3.4rem; line-height: 1; letter-spacing: 0; }
.tg-pt h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.5; margin-top: .4em; padding-bottom: .6em; border-bottom: 3px solid var(--tg); word-break: auto-phrase; }
.tg-pt p { font-size: .92rem; line-height: 2.05; margin-top: 1em; word-break: auto-phrase; }

/* ---------- 学び方のイメージ（イラストつきステップ） ---------- */
.tg-weeks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 36px; }
.tg-weeks li { position: relative; display: flex; flex-direction: column; }
.tg-weeks li + li::before { content: "▶"; position: absolute; left: -32px; top: 28%; color: var(--tg); font-size: 1rem; }
.tg-wk-step { margin-top: 18px; font-family: var(--font-en); font-size: .74rem; letter-spacing: .18em; color: var(--tg); }
.tg-wk-when { display: inline-block; align-self: flex-start; margin-top: .3em; padding: .2em .9em; border-radius: 4px; background: var(--tg); color: #fff; font-size: .9rem; letter-spacing: .06em; }
.tg-wk-what { display: block; font-size: .95rem; line-height: 1.85; margin-top: .7em; word-break: auto-phrase; }

/* ---------- 受講までの流れ ---------- */
.tg-flow { background: var(--tg-tint); }
.tg-flows { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; counter-reset: fl; }
.tg-flows li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 34px 18px 26px; background: #fff; border-radius: 14px; text-align: center; }
.tg-flows li + li::before { content: ""; position: absolute; left: -13px; top: 50%; transform: translateY(-50%); border-left: 10px solid var(--tg); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tg-fl-no { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--font-en); font-size: .82rem; color: #fff; background: var(--tg); padding: .25em .9em; border-radius: 999px; }
.tg-flows i { font-size: 1.8rem; color: var(--tg); }
.tg-flows b { font-size: .98rem; margin-top: .3em; }
.tg-flows small { font-size: .76rem; line-height: 1.7; color: #555; word-break: auto-phrase; }

@media (max-width: 1099px) {
  .tg-sec-h .sp { display: inline; }
  .tg-worry-stage { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 30px; }
  .tg-illust--worry { order: -1; width: 62%; margin-inline: auto; }
  .tg-bubbles { gap: 14px; }
  .tg-bubbles li, .tg-bubbles--l li:nth-child(2), .tg-bubbles--r li:nth-child(2) { margin: 0; padding: 16px 18px; font-size: .86rem; box-shadow: 3px 3px 0 #222; }
  .tg-bubbles li::after { display: none; }
  .tg-arrow { margin-top: 32px; border-left-width: 60px; border-right-width: 60px; border-top-width: 36px; }
  .tg-solve { padding: 22px 0 52px; }
  .tg-solve-keys { flex-direction: column; align-items: stretch; }
  .tg-pt, .tg-pt--rev { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tg-pt--rev .tg-illust { order: 0; }
  .tg-pt-no b { font-size: 2.6rem; }
  .tg-weeks { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tg-weeks li + li::before { content: "▼"; left: 50%; top: -28px; transform: translateX(-50%); }
  .tg-flows { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tg-flows li + li::before { left: 50%; top: -16px; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 10px solid var(--tg); border-bottom: 0; }
}
.tg-solve-h .sp { display: none; }
@media (max-width: 1099px) { .tg-solve-h .sp { display: inline; } }