/* ============================================================
   AIカタワーク 生成AI実務化研修 — 研修ページ専用の追加コンポーネント
   ※ styles.css を先に読み込む前提。:root トークン（--navy/--teal 等）を再利用。
   ※ 実務化パートナーLP（/index.html）はこのファイルを読み込まないため無影響。
   ============================================================ */

/* ---------- パンくず（コースLP用） ---------- */
.crumbbar{border-bottom:1px solid var(--line-soft);background:var(--bg-soft);}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);
  max-width:var(--maxw);margin:0 auto;padding:10px 28px;}
.crumb a{color:var(--teal-dark);font-weight:600;}
.crumb a:hover{text-decoration:underline;}
.crumb span[aria-current]{color:var(--navy);font-weight:600;}
.crumb .sep{color:var(--faint);}

/* ---------- Hero：残る成果物カード（ws-card を研修用に微調整） ---------- */
.ws-card__badge--train{color:var(--teal-dark);background:var(--teal-tint);}

/* ---------- 共通方法論：6ステップ ---------- */
.methodflow{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:10px;max-width:1000px;margin:0 auto;}
.mstep{position:relative;flex:1 1 150px;min-width:150px;max-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 16px 16px;box-shadow:var(--shadow-card);}
.mstep--core{background:var(--teal-tint);border:2px solid var(--teal);box-shadow:var(--shadow-lift);}
.mstep__no{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
  background:var(--navy);color:#fff;font-family:var(--font-head);font-size:12px;font-weight:700;margin-bottom:10px;}
.mstep--core .mstep__no{background:var(--teal);}
.mstep__label{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--navy);line-height:1.5;}
.mstep__desc{margin-top:6px;font-size:12px;color:var(--muted);line-height:1.7;}
.methodflow__foot{max-width:760px;margin:26px auto 0;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.9;}
.methodflow__foot b{color:var(--teal-dark);}
@media (max-width:680px){
  .mstep{max-width:none;flex:1 1 100%;}
}

/* ---------- コース一覧（研修ハブ） ---------- */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.course-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 24px;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);}
.course-card--live:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#D7E2DE;}
.course-card--soon{background:var(--bg-soft);}
.course-card__badge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:4px 12px;margin-bottom:14px;}
.course-card--live .course-card__badge{color:#fff;background:var(--teal);}
.course-card--soon .course-card__badge{color:var(--muted);background:#E7ECEE;}
.course-card__name{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--navy);line-height:1.5;}
.course-card__role{margin-top:8px;font-size:12.5px;color:var(--teal-dark);font-weight:600;line-height:1.6;}
.course-card__desc{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.85;}
.course-card__cta{margin-top:auto;padding-top:20px;}
.course-card__soonnote{margin-top:auto;padding-top:20px;font-size:12.5px;color:var(--faint);font-weight:600;}
@media (max-width:860px){ .course-grid{grid-template-columns:1fr;} }

/* ---------- カリキュラム（5回タイムライン・コースLP） ---------- */
.curriculum{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.cu-item{display:flex;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;box-shadow:var(--shadow-card);}
.cu-item--core{background:var(--teal-tint);border:2px solid var(--teal);box-shadow:var(--shadow-lift);}
.cu-no{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:56px;}
.cu-no__k{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--faint);}
.cu-no__n{font-family:var(--font-head);font-size:30px;font-weight:700;color:var(--teal);line-height:1;}
.cu-item--core .cu-no__n{color:var(--teal-dark);}
.cu-body{flex:1 1 auto;}
.cu-title{font-family:var(--font-head);font-size:16.5px;font-weight:700;color:var(--navy);line-height:1.5;}
.cu-core-tag{display:inline-block;margin-left:10px;font-size:11px;font-weight:700;color:#fff;background:var(--teal);border-radius:999px;padding:2px 10px;vertical-align:middle;}
.cu-desc{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.9;}
.cu-out{margin-top:10px;font-size:12.5px;color:var(--teal-dark);}
.cu-out b{font-weight:700;margin-right:6px;}
@media (max-width:680px){
  .cu-item{gap:14px;padding:18px 18px;}
  .cu-no{min-width:42px;}
  .cu-no__n{font-size:24px;}
}

/* ---------- プルーフ（教材・方法論の証拠） ---------- */
.proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.proof{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;box-shadow:var(--shadow-card);}
.proof__tag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--teal-dark);background:var(--teal-tint);border-radius:5px;padding:4px 11px;margin-bottom:14px;}
.proof__title{font-family:var(--font-head);font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.55;margin-bottom:8px;}
.proof__text{font-size:13px;color:var(--muted);line-height:1.85;}
.proofs__foot{margin-top:22px;text-align:center;font-size:13px;color:var(--muted);}
@media (max-width:860px){ .proofs{grid-template-columns:1fr;} }

/* ---------- 実施概要スペック ---------- */
.spec{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-card);}
.spec__row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line-soft);}
.spec__row:last-child{border-bottom:none;}
.spec__k{background:var(--bg-soft);font-size:13.5px;font-weight:700;color:var(--navy);padding:15px 20px;}
.spec__v{font-size:13.5px;color:var(--ink);line-height:1.8;padding:15px 22px;}
.spec__v .todo{color:var(--warn);font-weight:700;}
@media (max-width:680px){
  .spec__row{grid-template-columns:1fr;}
  .spec__k{border-bottom:1px solid var(--line-soft);}
}

/* ---------- 助成金・注記ブロック ---------- */
.subsidy{max-width:820px;margin:28px auto 0;background:var(--bg-soft);border:1px solid var(--line);
  border-left:4px solid var(--warn);border-radius:var(--radius);padding:22px 26px;}
.subsidy__title{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:10px;}
.subsidy__list{margin:0;}
.subsidy__list li{position:relative;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.9;}
.subsidy__list li::before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--warn);}
.subsidy__note{margin-top:12px;font-size:12px;color:var(--faint);line-height:1.75;}

/* ---------- 当事者性（圧縮版・全研修共通） ---------- */
.stance{max-width:860px;margin:0 auto;background:var(--navy);color:#fff;border-radius:16px;padding:40px 40px;}
.stance__label{font-size:12px;font-weight:700;letter-spacing:.08em;color:#5FD0B5;margin-bottom:14px;}
.stance__title{font-family:var(--font-head);font-size:21px;font-weight:700;line-height:1.6;margin-bottom:16px;}
.stance__title .accent{color:#5FD0B5;}
.stance__text{font-size:14.5px;color:#C2D5DF;line-height:1.95;}
.stance__text + .stance__text{margin-top:12px;}
@media (max-width:680px){ .stance{padding:30px 24px;} }

/* ---------- 対象者／前提（scope の色替え再利用を避け専用に） ---------- */
.who{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.who__col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px 30px;box-shadow:var(--shadow-card);}
.who__title{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--navy);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.who__title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal);flex:0 0 auto;}
.who__list li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink);line-height:1.75;}
.who__list li:last-child{border-bottom:none;}
.who__list li::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--teal-tint);
  position:relative;}
.who__col--pre .who__title::before{background:var(--muted);}
@media (max-width:680px){ .who{grid-template-columns:1fr;} }

/* ---------- セクション内リンク（別ページ導線） ---------- */
.xlink{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--teal-dark);}
.xlink::after{content:"→";}
.xlink:hover{text-decoration:underline;}

/* ============================================================
   ヒーロー右ビジュアル：柱・役割ごとに“別物”にする（ws-cardの流用をやめる）
   ============================================================ */

/* --- 研修ハブ：コースマップ（共通メソッド → 職種別コース横並び → 残る力） --- */
.coursemap{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);padding:20px 20px 22px;}
.coursemap__method{font-size:12px;font-weight:700;color:var(--teal-dark);background:var(--teal-tint);border:1px solid #CFE4DD;border-radius:8px;padding:10px 12px;line-height:1.7;text-align:center;}
.coursemap__arr{text-align:center;font-size:11.5px;color:var(--muted);margin:9px 0 8px;}
.coursemap__arr::before{content:"↓　";color:var(--teal);}
.coursemap__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.cmap{border:1px solid var(--line);border-radius:10px;padding:11px 8px 10px;text-align:center;background:var(--bg-soft);display:flex;flex-direction:column;align-items:center;gap:3px;}
.cmap--live{background:var(--teal-tint);border-color:var(--teal);}
.cmap__role{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.35;}
.cmap__biz{font-size:10.5px;color:var(--muted);line-height:1.4;}
.cmap__badge{margin-top:4px;font-size:10px;font-weight:700;border-radius:999px;padding:2px 9px;}
.cmap--live .cmap__badge{background:var(--teal);color:#fff;}
.cmap:not(.cmap--live) .cmap__badge{background:#E7ECEE;color:var(--muted);}
.coursemap__out{margin-top:12px;text-align:center;font-size:12.5px;font-weight:700;color:var(--navy);background:#fff;border:1px dashed var(--teal);border-radius:8px;padding:10px;}
.coursemap__out b{color:var(--teal-dark);}

/* --- 営業コース：中核3工程チェックポイント（人の確認・停止・AIの事故例） --- */
.coreflow{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lift);padding:20px 22px;}
.coreflow__in{text-align:center;font-size:13px;font-weight:700;color:var(--navy);background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:9px 10px;}
.coreflow__arr{text-align:center;color:var(--teal);font-size:15px;line-height:1;margin:7px 0;}
.corestep{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.corestep--hl{background:var(--teal-tint);border-color:var(--teal);box-shadow:var(--shadow-card);}
.corestep__no{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.corestep--hl .corestep__no{background:var(--teal);}
.corestep__t{font-size:14px;font-weight:700;color:var(--navy);line-height:1.4;}
.corestep__chk{margin-top:4px;font-size:11.5px;color:var(--teal-dark);display:flex;align-items:center;gap:6px;line-height:1.5;}
.corestep__chk::before{content:"";flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--teal-tint);border:1.5px solid var(--teal);}
.corestep__chk--stop{color:var(--warn);}
.corestep__chk--stop::before{background:rgba(192,107,42,.14);border-color:var(--warn);border-radius:3px;}
.hallu{margin-top:14px;background:#fff;border:1px dashed #E3B7AC;border-radius:12px;padding:12px 14px;}
.hallu__label{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:9px;}
.hallu__x{display:inline-block;font-size:12px;font-weight:700;color:#B03A2E;background:rgba(176,58,46,.08);border-radius:6px;padding:4px 10px;margin:0 6px 6px 0;}

/* ---------- ブランドハブ：2本柱カード ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto;}
.pillar{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 32px;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:#D7E2DE;}
.pillar__tag{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:4px 12px;margin-bottom:14px;}
.pillar--partner .pillar__tag{color:#fff;background:var(--navy);}
.pillar--training .pillar__tag{color:#fff;background:var(--teal);}
.pillar__name{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--navy);line-height:1.45;}
.pillar__sub{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.7;}
.pillar__list{margin:16px 0 22px;}
.pillar__list li{position:relative;padding:8px 0 8px 20px;font-size:13.5px;color:var(--ink);line-height:1.7;border-bottom:1px solid var(--line-soft);}
.pillar__list li:last-child{border-bottom:none;}
.pillar__list li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--teal);}
.pillar--partner .pillar__list li::before{background:var(--navy);}
.pillar .btn{margin-top:auto;}
.hubhero{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center;}
.hubhero .hero__sub{max-width:38em;margin-left:auto;margin-right:auto;}
.hubhero .hero__cta{justify-content:center;}
@media (max-width:760px){ .pillars{grid-template-columns:1fr;} }

/* ---------- コースLP：向き不向き ---------- */
.whofit{max-width:820px;margin:26px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.whofit__box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow-card);}
.whofit__box--pre{background:var(--bg-soft);}
.whofit__k{font-size:13px;font-weight:700;color:var(--teal-dark);margin-bottom:9px;display:flex;align-items:center;gap:7px;}
.whofit__k::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal);flex:0 0 auto;}
.whofit__box--pre .whofit__k{color:var(--warn);}
.whofit__box--pre .whofit__k::before{background:var(--warn);}
.whofit__t{font-size:13.5px;color:var(--ink);line-height:1.9;}
.whofit__box--pre .whofit__t{color:var(--muted);}
@media (max-width:680px){ .whofit{grid-template-columns:1fr;} }