/* ========================================
   Training SP Styles (max-width: 768px)
   ======================================== */

/* ── Hero ── */
.tr-hero { min-height:auto; }
.tr-hero-text {
  padding:32px 20px;
  gap:12px;
}
.tr-hero-label { font-size:12px; letter-spacing:2px; }
.tr-hero h1 {
  font-size:32px; letter-spacing:-0.56px;
}
.tr-hero-sub {
  font-size:15px; max-width:100%;
  letter-spacing:0; line-height:1.55;
}
.tr-hero-tags { gap:8px; }
.tr-hero-tag { font-size:12px; padding:5px 10px; }

/* ── CTA Buttons ── */
.tr-cta-buttons {
  flex-direction:column; align-items:stretch;
  gap:12px; padding:20px 20px;
}
.btn-orange-pill,
.btn-orange-outline-pill {
  width:100%; padding:16px 0; font-size:16px;
  text-align:center; box-sizing:border-box;
  white-space:normal;
}

/* ── 助成金バナー ── */
.tr-subsidy-banner {
  padding:16px 20px;
}
.tr-subsidy-banner p {
  font-size:16px; line-height:1.4;
}

/* ── 助成金詳細 ── */
.tr-subsidy-detail {
  padding:28px 20px;
}
.tr-subsidy-inner {
  flex-direction:column; gap:20px; text-align:center;
}
.tr-subsidy-headline {
  font-size:20px;
}
.tr-subsidy-body {
  font-size:15px; max-width:100%; line-height:1.6;
  text-align:left;
}

/* ── Section Header ── */
.tr-section-header {
  padding:48px 20px 24px; gap:12px;
}
.tr-header-bar {
  width:140px; height:4px;
}
.tr-section-header h2 {
  font-size:26px;
}
.tr-header-sub {
  font-size:15px;
}

/* ── Course Cards ── */
.tr-course-cards {
  flex-direction:column; align-items:stretch;
  gap:20px; padding:20px 20px 40px;
  margin:0 20px; border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.tr-course-card {
  gap:8px;
}
.tr-course-label {
  font-size:18px;
}
.tr-course-card-inner {
  width:100%; max-width:100%;
  padding:20px; border-radius:14px;
}
.tr-course-card-inner h3 {
  font-size:18px; margin-bottom:6px;
}
.tr-course-card-inner h3 .green,
.tr-course-card-inner h3 .orange {
  font-size:20px;
}
.tr-course-card-inner p {
  font-size:14px;
}

/* ── Detail Section ── */
.tr-detail-section {
  padding:0 20px 48px;
}
.tr-detail-inner {
  gap:16px;
}
.tr-detail-heading {
  margin-top:28px; gap:12px;
}
.tr-heading-bar {
  width:4px; height:28px;
}
.tr-detail-heading h3 {
  font-size:20px;
}
.tr-detail-text {
  padding-left:16px;
}
.tr-big-text {
  font-size:22px;
}
.tr-note {
  font-size:14px; line-height:1.7;
}
.tr-note-inline {
  font-size:13px;
}
.tr-cta-inline {
  padding:8px 0 0;
}
.tr-cta-inline .btn-orange-pill {
  width:100%; padding:16px 0; font-size:16px;
  text-align:center; box-sizing:border-box;
}

/* ── Curriculum Accordion (SP) ── */
.tr-curriculum-cards {
  display:flex; flex-direction:column; gap:0;
  margin-top:8px;
  border-top:1px solid #e0e0e0;
}
.tr-cur-card {
  width:100%; text-align:left; border:none; cursor:pointer;
  background:#fff;
  border-bottom:1px solid #e0e0e0;
  overflow:hidden; font-family:inherit;
  padding:0;
}
.tr-cur-head {
  display:flex; align-items:center; gap:12px;
  padding:16px 4px;
}
.tr-cur-num {
  flex-shrink:0; font-size:14px; font-weight:700;
  color:#23b253; width:24px; text-align:right;
}
.tr-cur-theme {
  flex:1; font-size:15px; font-weight:600; color:#222;
  line-height:1.4;
}
.tr-cur-arrow {
  width:10px; height:10px; flex-shrink:0;
  border-right:2px solid #aaa; border-bottom:2px solid #aaa;
  transform:rotate(45deg); transition:transform 0.25s;
}
.tr-cur-card[aria-expanded="true"] .tr-cur-arrow {
  transform:rotate(-135deg);
}
.tr-cur-body {
  max-height:0; overflow:hidden;
  transition:max-height 0.3s ease;
  padding:0 4px 0 40px;
}
.tr-cur-card[aria-expanded="true"] .tr-cur-body {
  max-height:200px;
  padding:0 4px 14px 40px;
}
.tr-cur-meta {
  display:block; font-size:12px; font-weight:600;
  color:#23b253; margin-bottom:4px;
}
.tr-cur-body p {
  font-size:14px; color:#555; line-height:1.6;
}

/* ── Cases ── */
.tr-cases {
  padding:0 20px 36px;
}
.tr-cases .tr-section-header {
  padding:48px 0 16px;
}
.tr-cases-filter {
  padding:12px 16px;
}
.tr-filter-inner {
  padding:10px 16px; gap:12px;
}
.tr-filter-inner span:last-child {
  font-size:15px;
}

/* ── Company ── */
.tr-company {
  padding:36px 20px; gap:6px;
}
.tr-company .company-logo { width:100px; }
.tr-company .company-name { font-size:16px; }
.tr-company .company-detail { font-size:13px; }