/* ============================================================
   AI研修ページ — 固有スタイル
   loaded after styles.css and pages.css
   ============================================================ */

/* ---------- FIRST VIEW ---------- */
.tr-hero{ background:var(--teal-paper); }
.tr-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.tr-chips li{ padding:8px 14px; border:1px solid var(--teal-soft); font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.12em; color:var(--teal-deep); background:#fff; }
.tr-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:44px; }
.tr-btn{ display:inline-flex; align-items:center; gap:16px; padding:18px 28px; font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.16em; border:1px solid var(--teal); color:var(--teal); transition:background .25s ease, color .25s ease, gap .25s ease; }
.tr-btn:hover{ gap:24px; background:var(--teal); color:#fff; }
.tr-btn:hover svg{ stroke:#fff; }
.tr-btn--solid{ background:var(--teal); color:#fff; }
.tr-btn--solid svg{ stroke:#fff; }
.tr-btn--solid:hover{ background:var(--teal-deep); border-color:var(--teal-deep); color:#fff; }
.tr-btn--light{ border-color:#fff; color:#fff; }
.tr-btn--light:hover{ background:#fff; color:var(--teal); }
.tr-btn--light:hover svg{ stroke:var(--teal); }
.tr-btn--white{ background:#fff; border-color:#fff; color:var(--teal); }
.tr-btn--white svg{ stroke:var(--teal); }
.tr-btn--white:hover{ background:rgba(255,255,255,.88); color:var(--teal); }

/* ---------- INTRO ---------- */
.tr-intro{ padding:120px var(--pad-x); max-width:var(--max); margin:0 auto; }
.tr-intro-grid{ display:grid; grid-template-columns:240px 1fr; gap:80px; }
.tr-intro .prose{ margin-top:0; max-width:70ch; }

/* ---------- COURSES ---------- */
.tr-courses{ background:var(--ivory); padding:130px var(--pad-x); }
.tr-courses-inner{ max-width:var(--max); margin:0 auto; }
.tr-course-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; align-items:stretch; }
.tr-course{ background:#fff; border:1px solid var(--line); padding:40px 32px 44px; display:flex; flex-direction:column; gap:26px; }
.tc-head{ display:flex; flex-direction:column; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.tc-num{ font-family:var(--en); font-size:12px; letter-spacing:.24em; color:var(--teal); }
.tc-title{ font-family:var(--serif); font-size:22px; font-weight:500; line-height:1.55; letter-spacing:.05em; text-wrap:pretty; }
.tc-hours{ display:inline-flex; align-items:baseline; gap:6px; align-self:flex-start; padding:8px 16px; background:var(--teal); color:#fff; }
.tc-hours-num{ font-family:var(--en); font-size:22px; font-weight:500; line-height:1; letter-spacing:-.01em; }
.tc-hours-unit{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.16em; }
.tc-row{ display:flex; flex-direction:column; gap:8px; }
.tc-key{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--teal); }
.tc-val{ font-size:14px; line-height:1.9; letter-spacing:.04em; color:#2a2a2a; text-wrap:pretty; }
.tc-list{ display:flex; flex-direction:column; gap:10px; }
.tc-list li{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline; padding-bottom:10px; border-bottom:1px solid var(--line-soft); font-size:13px; line-height:1.8; letter-spacing:.03em; }
.tc-list li:last-child{ border-bottom:0; padding-bottom:0; }
.tc-time{ font-family:var(--en); font-size:12px; letter-spacing:.1em; color:var(--teal); white-space:nowrap; }
.tc-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tc-tags li{ padding:6px 12px; background:var(--teal-paper); border:1px solid var(--teal-tint); font-size:11px; letter-spacing:.06em; color:var(--teal-deep); line-height:1.5; }
.tc-goal{ background:var(--teal-paper); padding:18px 20px; border-left:2px solid var(--teal); }
.tc-foot{ margin-top:auto; padding-top:8px; }

/* ---------- FACTS ---------- */
.tr-facts{ padding:130px var(--pad-x); max-width:var(--max); margin:0 auto; }
.tr-fact-table{ border-top:1px solid var(--line); }
.tr-fact-table div{ display:grid; grid-template-columns:260px 1fr; gap:32px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.tf-key{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.14em; color:var(--teal); }
.tf-val{ font-size:14px; line-height:1.95; letter-spacing:.04em; color:#2a2a2a; text-wrap:pretty; }

/* ---------- PRINCIPLES ---------- */
.tr-principles{ background:var(--teal-deep); color:#fff; padding:130px var(--pad-x); }
.tr-principles-inner{ max-width:var(--max); margin:0 auto; }
.tr-principles .display-h2{ color:#fff; }
.tr-principles .label-num, .tr-principles .label-en{ color:var(--teal-tint); border-color:var(--teal-tint); }
.tr-pr-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); }
.tr-pr-grid li{ padding:36px 28px 40px 0; border-right:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; gap:18px; }
.tr-pr-grid li:last-child{ border-right:0; padding-right:0; }
.tp-num{ font-family:var(--en); font-size:12px; letter-spacing:.24em; color:var(--teal-mid); }
.tp-text{ font-family:var(--serif); font-size:19px; font-weight:500; line-height:1.7; letter-spacing:.05em; text-wrap:pretty; }

/* ---------- SCOPE ---------- */
.tr-scope{ padding:130px var(--pad-x); max-width:var(--max); margin:0 auto; }
.tr-scope-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.tr-scope-card{ border:1px solid var(--line); padding:40px 36px; display:flex; flex-direction:column; gap:20px; }
.tr-scope-card.is-out{ background:var(--ivory); border-color:var(--ivory-2); }
.ts-label{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--teal); }
.ts-title{ font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:.06em; line-height:1.6; }
.ts-list{ display:flex; flex-direction:column; gap:12px; }
.ts-list li{ display:grid; grid-template-columns:16px 1fr; gap:12px; font-size:14px; line-height:1.9; letter-spacing:.03em; color:#2a2a2a; }
.ts-mark{ font-family:var(--en); color:var(--teal); line-height:1.9; }
.tr-scope-card.is-out .ts-mark{ color:var(--ink-40); }
.ts-note{ margin-top:8px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; line-height:1.9; color:var(--ink-60); letter-spacing:.03em; }

/* ---------- LECTURER / SUBSIDY ---------- */
.tr-people{ background:var(--teal-paper); padding:130px var(--pad-x); }
.tr-people-inner{ max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.tr-block{ display:flex; flex-direction:column; gap:22px; }
.tr-block-head{ display:flex; align-items:baseline; gap:16px; }
.tr-block-title{ font-family:var(--serif); font-size:24px; font-weight:500; letter-spacing:.12em; }
.tr-person-name{ font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:.1em; }
.tr-person-role{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:var(--teal); }
.tr-body-text{ font-size:14px; line-height:2; letter-spacing:.04em; color:#2a2a2a; text-wrap:pretty; }
.tr-caution{ background:#fff; border:1px solid var(--line); padding:28px 30px; display:flex; flex-direction:column; gap:14px; }
.tr-caution li{ display:grid; grid-template-columns:16px 1fr; gap:12px; font-size:13px; line-height:1.9; letter-spacing:.03em; color:#2a2a2a; }
.tr-caution .ts-mark{ color:var(--teal); }

/* ---------- FAQ ---------- */
.tr-faq{ padding:130px var(--pad-x); max-width:var(--max); margin:0 auto; }
.tr-faq-list{ border-top:1px solid var(--line); max-width:960px; }
.tr-faq-list details{ border-bottom:1px solid var(--line); }
.tr-faq-list summary{ display:flex; align-items:baseline; gap:18px; padding:24px 0; cursor:pointer; list-style:none; font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:.06em; line-height:1.8; transition:color .2s ease; }
.tr-faq-list summary::-webkit-details-marker{ display:none; }
.tr-faq-list summary:hover{ color:var(--teal); }
.tf-q{ font-family:var(--en); font-size:13px; letter-spacing:.16em; color:var(--teal); flex:none; }
.tf-plus{ margin-left:auto; flex:none; width:12px; height:12px; position:relative; }
.tf-plus::before, .tf-plus::after{ content:""; position:absolute; background:var(--teal); transition:transform .25s ease, opacity .25s ease; }
.tf-plus::before{ left:0; top:5px; width:12px; height:1px; }
.tf-plus::after{ left:5px; top:0; width:1px; height:12px; }
.tr-faq-list details[open] .tf-plus::after{ transform:scaleY(0); }
.tf-a{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:0 0 28px; font-size:14px; line-height:2; letter-spacing:.04em; color:#2a2a2a; }
.tf-a-mark{ font-family:var(--en); font-size:13px; letter-spacing:.16em; color:var(--ink-40); }

/* ---------- FINAL CTA tweaks ---------- */
.tr-cta .cta-section::before{ content:"AI TRAINING"; font-family:var(--en); letter-spacing:.12em; }
.tr-cta-buttons{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .tr-course-grid{ grid-template-columns:1fr; gap:24px; }
  .tr-intro-grid{ grid-template-columns:1fr; gap:32px; }
  .tr-pr-grid{ grid-template-columns:1fr 1fr; }
  .tr-pr-grid li{ border-bottom:1px solid rgba(255,255,255,.18); padding:28px 24px 32px 0; }
  .tr-pr-grid li:nth-child(2n){ border-right:0; padding-right:0; }
  .tr-people-inner{ grid-template-columns:1fr; gap:56px; }
}
@media (max-width: 880px){
  .tr-intro, .tr-facts, .tr-scope, .tr-faq{ padding:80px var(--pad-x); }
  .tr-courses, .tr-principles, .tr-people{ padding:80px var(--pad-x); }
  .tr-scope-grid{ grid-template-columns:1fr; }
  .tr-fact-table div{ grid-template-columns:1fr; gap:8px; padding:18px 0; }
  .tr-hero-cta .tr-btn{ flex:1 1 260px; justify-content:space-between; }
}
@media (max-width: 600px){
  .tr-course{ padding:32px 24px 36px; }
  .tr-scope-card{ padding:32px 24px; }
  .tr-pr-grid{ grid-template-columns:1fr; }
  .tr-pr-grid li{ border-right:0; padding-right:0; }
  .tr-cta-buttons .tr-btn{ flex:1 1 100%; justify-content:space-between; }
}
@media (max-width: 520px){
  .tc-title{ font-size:19px; }
  .tr-block-title, .tr-person-name{ font-size:21px; }
  .tr-faq-list summary{ font-size:14px; gap:12px; }
}