/* ============================================
   EACUS - AI/DX Page Specific Styles
   Used by: ai-dx.html
   ============================================ */

/* --- 制度改変 比較ボックス --- */
.change-compare {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.change-before,
.change-after {
  padding: 28px 36px;
  border: 1px solid var(--color-gray-200);
}
.change-before { background: var(--color-white); }
.change-after { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); margin-top: 0; }
.change-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 14px;
  color: var(--color-gray-500);
}
.change-after .change-label { color: var(--color-gray-300); }
.change-before ul,
.change-after ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.change-before ul li,
.change-after ul li { font-size: 15px; line-height: 1.8; padding-left: 1.2em; position: relative; }
.change-before ul li::before { content: '・'; position: absolute; left: 0; }
.change-after ul li::before { content: '・'; position: absolute; left: 0; }
.change-arrow {
  text-align: center;
  font-size: 24px;
  padding: 12px 0;
  color: var(--color-gray-500);
  line-height: 1;
}

/* --- 研修目的 --- */
.purpose-problems {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-gray-200);
}
.purpose-problem-item {
  padding: 22px 32px;
  border-bottom: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
}
.purpose-problem-item:last-child { border-bottom: none; }
.purpose-problem-text { font-size: 15px; line-height: 2; color: var(--color-gray-700); margin: 0; }

.purpose-goal {
  margin-top: 48px;
  padding: 40px 48px;
  border-left: 4px solid var(--color-black);
  background: var(--color-white);
}
.purpose-goal-heading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.6;
}
.purpose-goal-body { font-size: 15px; line-height: 2; color: var(--color-gray-700); margin: 0; }

/* --- コース概要カード --- */
.course-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border: 1px solid var(--color-gray-200);
}
.course-card {
  padding: 36px 32px;
  border-right: 1px solid var(--color-gray-200);
}
.course-card:last-child { border-right: none; }
.course-card-num {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  display: block;
  margin-bottom: 14px;
}
.course-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  line-height: 1.55;
}
.course-card-body { font-size: 14px; line-height: 1.9; color: var(--color-gray-700); margin: 0; }

/* --- 受講プラン --- */
.training-spec {
  margin-top: 40px;
  padding: 36px 48px;
  background: var(--color-black);
  color: var(--color-white);
  text-align: center;
}
.training-spec-sub {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-gray-300);
  display: block;
  margin-bottom: 10px;
}
.training-spec-number {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.training-spec-total { font-size: 15px; color: var(--color-gray-300); }
.training-spec-total strong { color: var(--color-white); font-size: 20px; }

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}
.plan-card {
  border: 1px solid var(--color-gray-200);
  padding: 32px 32px 28px;
}
.plan-card-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-200);
}
.plan-days { display: flex; flex-direction: column; gap: 16px; }
.plan-day {}
.plan-day-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-700);
  display: block;
  margin-bottom: 8px;
}
.plan-units { display: flex; gap: 8px; flex-wrap: wrap; }
.plan-unit {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}
.plan-note {
  font-size: 14px;
  color: var(--color-gray-500);
  margin-top: 20px;
  line-height: 1.8;
}

/* --- カリキュラム --- */
.curriculum-courses { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; }

.curriculum-course { background: var(--color-white); border: 1px solid var(--color-gray-200); }
.curriculum-course summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--color-gray-200);
  user-select: none;
}
.curriculum-course summary::-webkit-details-marker { display: none; }
.curriculum-course-badge {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--color-white);
  background: var(--color-black);
  padding: 3px 12px;
  flex-shrink: 0;
}
.curriculum-course-title { font-size: 15px; font-weight: 700; flex: 1; line-height: 1.4; }
.curriculum-course-time {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.curriculum-course-toggle {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-gray-300);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.25s;
}
details[open] .curriculum-course-toggle { transform: rotate(90deg); }

.curriculum-course-desc {
  font-size: 14px;
  color: var(--color-gray-700);
  line-height: 1.8;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-gray-200);
  margin: 0;
  background: var(--color-gray-100);
}

/* ユニット一覧 */
.unit-list { display: flex; flex-direction: column; }
.unit-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-gray-100);
}
.unit-item--final { background: var(--color-gray-100); }
.unit-item--intro { border-left: 3px solid var(--color-gray-300); }
.unit-badge {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--color-gray-500);
  border: 1px solid var(--color-gray-300);
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.unit-badge--final {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.unit-badge--intro {
  background: var(--color-gray-300);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}
.unit-content { flex: 1; }
.unit-title { font-size: 15px; font-weight: 700; line-height: 1.6; margin: 0 0 6px; }
.unit-desc { font-size: 14px; color: var(--color-gray-700); line-height: 1.8; margin: 0; }

.curriculum-course-apply {
  padding: 24px;
  border-top: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.curriculum-course-apply-text { font-size: 14px; color: var(--color-gray-700); line-height: 1.8; margin: 0; }
.curriculum-course-apply-btn {
  display: inline-block;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.15em;
  padding: 14px 32px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.25s;
}
.curriculum-course-apply-btn:hover { opacity: 0.75; }

/* --- モバイル --- */
@media (max-width: 768px) {
  .change-before,
  .change-after { padding: 22px 20px; }
  .change-before ul li,
  .change-after ul li { font-size: 14px; }

  .purpose-problem-item { padding: 18px 20px; }
  .purpose-goal { padding: 28px 20px; }
  .purpose-goal-heading { font-size: 17px; }

  .course-cards { grid-template-columns: 1fr; }
  .course-card { border-right: none; border-bottom: 1px solid var(--color-gray-200); }
  .course-card:last-child { border-bottom: none; }

  .training-spec { padding: 28px 20px; }
  .training-spec-number { font-size: 22px; }

  .plan-grid { grid-template-columns: 1fr; gap: 16px; }
  .plan-card { padding: 24px 20px 20px; }

  .curriculum-course summary { flex-wrap: wrap; gap: 10px; padding: 16px; }
  .curriculum-course-time { display: none; }
  .curriculum-course-badge { font-size: 9px; padding: 3px 10px; }
  .curriculum-course-title { font-size: 14px; flex: 1; min-width: 0; }
  .curriculum-course-desc { padding: 14px 16px; font-size: 13px; }

  .unit-item { padding: 14px 16px; gap: 12px; }
  .unit-title { font-size: 14px; }
  .unit-desc { font-size: 13px; }

  .curriculum-course-apply { flex-direction: column; align-items: flex-start; }
  .curriculum-course-apply-btn { width: 100%; text-align: center; }
}