/* =========================================================
   研修ページ(/training/ /training/claude-code/ /training/codex/)専用
   共通部品は site.css。ここには研修ページだけで使うものを置く
   ========================================================= */

/* ---------- ヒーロー写真の位置(横長写真を4:3で切り抜くため) ---------- */
.page-training-codex .page-hero-figure img { object-position: 88% 50%; }

/* ---------- 表 ---------- */
.table--curriculum { min-width: 880px; }
.table--curriculum tbody th { width: 6.5em; }
.table--curriculum .col-theme { width: 13em; font-weight: 700; color: var(--ink); }
.table--curriculum .col-work { width: 15em; }
.table--roles { min-width: 760px; }
.table--roles .col-sessions { white-space: nowrap; font-family: var(--num); font-size: 17px; font-weight: 600; color: var(--green); }
.table--spiral { min-width: 720px; }
.table--spiral .col-topic { width: 15em; font-weight: 700; color: var(--ink); }
.table--risk { min-width: 760px; }
.table--risk .col-rule { width: 40%; color: var(--ink); font-weight: 500; }
.t-tag {
  display: block; width: fit-content; margin-top: 6px; padding: 0 8px; border-radius: 2px;
  font-size: 11.5px; font-weight: 700; line-height: 1.8; letter-spacing: .06em;
  background: var(--green); color: #fff;
}

/* 項目と内容の2列表。スマホでも横スクロールさせず、縦に積む */
.table--spec { min-width: 0; }
.table--spec tbody th { width: 11em; color: var(--green-dark); }
.table--spec td a { font-weight: 700; }

/* ---------- 到達レベル ---------- */
.level .level-check {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.8; color: var(--muted);
}
.level .level-check b { display: block; color: var(--ink-2); font-size: 12px; letter-spacing: .06em; }

/* ---------- 比較(.vs)の中の箇条書き ---------- */
.t-list { list-style: none; }
.t-list li { position: relative; padding-left: 20px; margin: 0 0 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }
.t-list li::before { content: ""; position: absolute; left: 0; top: .9em; width: 10px; height: 1.5px; background: var(--line-strong); }
.vs-col--em .t-list li::before { background: var(--green); }
.vs-col--em .t-list li { color: var(--ink); }

/* ---------- 業務でできること(番号+見出し | 説明+指示の例) ---------- */
.uc-list { list-style: none; border-top: 1px solid var(--line-strong); }
.uc-item {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px;
  padding: 32px 0; border-bottom: 1px solid var(--line-strong);
}
.uc-head { display: flex; align-items: baseline; gap: 18px; }
.uc-head .num { font-size: 30px; flex: none; }
.uc-title { font-size: 19px; font-weight: 900; line-height: 1.55; }
.uc-body > p { margin: 0; font-size: 15px; color: var(--ink-2); }
.prompt-ex { margin: 16px 0 0; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green); }
.prompt-ex-label { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: .08em; }
.prompt-ex ul { list-style: none; }
.prompt-ex li { font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.8; }
.prompt-ex li + li { margin-top: 6px; }

/* ---------- CLAUDE.md の記載例 ---------- */
.file-sample { margin: 0; border: 1px solid var(--line-strong); background: #fff; }
.file-sample-name {
  margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--num); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--green-dark);
  background: var(--green-50);
}
.file-sample-body { padding: 18px 20px 20px; font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.file-sample-h { font-size: 14px; font-weight: 700; color: var(--ink); margin: 14px 0 2px; }
.file-sample-h:first-child { margin-top: 0; }
.file-sample-body ul { list-style: none; }
.file-sample-body li { padding-left: 1em; text-indent: -1em; }
.file-sample-body li::before { content: "- "; color: var(--muted); }
.file-sample figcaption { padding: 0 20px 14px; font-size: 12px; color: var(--muted); }

/* ---------- 研修で扱う回のカード ---------- */
.session-card .card-tag { margin-bottom: 10px; }

/* ---------- 見出し(h3)と囲み ---------- */
.block-title { font-size: 20px; font-weight: 900; margin: 0 0 16px; line-height: 1.55; }
.callout + .callout { margin-top: 16px; }
.split > .callout + .callout, .cards > .callout + .callout { margin-top: 0; }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 6px !important; }

/* ---------- Codex: 演習の手順・強調カード ---------- */
.flow-v .flow-v-title { font-size: 17px; font-weight: 900; margin: 0 0 4px; line-height: 1.6; }
.card--em, .section--beige .card--em { border: 2px solid var(--green); }
.card .check-list { margin-top: 16px; }
.card .check-list li { font-size: 14.5px; }
.callout--check { margin: 8px 0 0; }

/* ---------- 余白 ---------- */
/* 直後に白地のFAQ(section)が続くときは下の余白を詰める */
.t-before-faq { padding-bottom: 0; }
.t-gap { margin-top: 56px; }
.t-gap-sm { margin-top: 32px; }
.callout .t-link-row { margin-top: 18px; }

/* 料金の数字(p の既定の下余白を消す) */
.price-item-value { margin: 0; }

@media (max-width: 860px) {
  .uc-item { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .uc-head .num { font-size: 26px; }
  .uc-title { font-size: 17.5px; }
  .t-gap { margin-top: 40px; }
  .t-gap-sm { margin-top: 24px; }
  .cards--verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cards--verbs .card { padding: 22px 18px; }
  .cards--verbs .card-num { font-size: 28px; margin-bottom: 10px; }
}

@media (max-width: 560px) {
  .table--spec tbody th, .table--spec tbody td { display: block; width: auto; }
  .table--spec tbody th { padding-bottom: 2px; border-bottom: 0; }
  .table--spec tbody td { padding-top: 0; }
}