/* ============================================================
   certification.css — CERTIFICATION page scoped styles
   certification.html 専用。style.css の共通パーツに依存。
   ============================================================ */

/* PAGE HERO: 共通 .subpage-hero を style.css に集約済み */

/* CONTENT SECTIONS */
.program-section,
.program-section-alt {
  border-bottom: 1px solid var(--gray-100);
}
.program-section { background: var(--white); }
.program-section-alt { background: var(--off-white); }

/* ── PHOSPHOR ICONS (index.html との統一) ── */
.program-meta-chip .phi {
  font-size: 0.9rem;
  flex-shrink: 0;
}
/* ヒーロー内（白背景バージョン）は stroke 指定があるため color 上書き不要 */

/* META CHIPS */
.program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.program-meta-hero { margin-top: 24px; }
.program-meta-sm { margin-top: 10px; }
.program-meta-md { margin-top: 12px; }

.program-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-mid);
  background: var(--gray-50);
  border: var(--border-soft);
  white-space: nowrap;
}
.program-meta-chip svg,
.program-meta-chip .phi {
  width: 1.05em;
  height: 1.05em;
  stroke: currentColor;
  flex-shrink: 0;
}

/* INFO TABLE */
.program-info-table {
  width: 100%;
  border-collapse: collapse;
}
.program-info-table th,
.program-info-table td {
  padding: 14px 18px;
  font-size: 0.88rem;
  line-height: 1.65;
  text-align: left;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
  letter-spacing: 0;
}
.program-info-table th {
  width: 160px;
  font-weight: 500;
  color: var(--navy);
  background: var(--gray-50);
  white-space: nowrap;
}
.program-info-table td { color: var(--text-mid); }
.program-info-table tr:last-child th,
.program-info-table tr:last-child td { border-bottom: none; }

/* FLOW STEPS */
.program-flow-steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-100);
}
.program-flow-step {
  background: var(--white);
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.program-flow-step-num {
  font-size: 0.63rem;
  font-weight: 700; /* 超小型uppercaseバッジの視認性確保のため例外 */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  padding: 3px 9px;
  border-radius: var(--r-btn);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.program-flow-step-body h4 {
  font-size: 0.92rem;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.program-flow-step-body p {
  font-size: 0.84rem;
  color: var(--text-mid);
  line-height: 1.65;
  letter-spacing: 0;
}

/* SCHEDULE TABLE */
.program-table-scroll { overflow-x: auto; }

.program-schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
  font-size: 0.84rem;
}
.program-schedule-table th {
  background: var(--gray-50);
  font-weight: 500;
  color: var(--navy);
  padding: 10px 14px;
  border: var(--border-soft);
  text-align: center;
  letter-spacing: 0;
}
.program-schedule-table td {
  padding: 10px 14px;
  border: var(--border-soft);
  color: var(--text-mid);
  text-align: center;
  letter-spacing: 0;
}
.program-schedule-table td.program-schedule-label {
  text-align: left;
  font-weight: 500;
  color: var(--navy);
  background: var(--gray-50);
  white-space: nowrap;
}

/* FEE TABLE */
.program-fee-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}
.program-fee-table th {
  background: var(--gray-50);
  font-weight: 500;
  color: var(--navy);
  font-size: 0.8rem;
  padding: 11px 16px;
  border: var(--border-soft);
  text-align: left;
  letter-spacing: 0;
}
.program-fee-table td {
  padding: 13px 16px;
  border: var(--border-soft);
  font-size: 0.86rem;
  color: var(--text-mid);
  vertical-align: top;
  letter-spacing: 0;
}
.program-fee-table td.fee-amount {
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy);
  white-space: nowrap;
}
.program-fee-table tr:nth-child(even) td { background: var(--gray-50); }

/* NOTE BOX */
.program-note-box {
  background: var(--off-white);
  border: var(--border-soft);
  padding: 18px 22px;
}
.program-note-box p {
  font-size: 0.84rem;
  color: var(--text-mid);
  line-height: 1.72;
  letter-spacing: 0;
}
.program-note-box p + p { margin-top: 6px; }
.program-support-box + .program-note-box,
.program-table-scroll + .program-note-box { margin-top: 16px; }

/* SUPPORT BOX */
.program-support-box {
  background: var(--off-white);
  border: var(--border-soft);
  padding: 24px 28px;
}
.program-support-box h3 {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin-bottom: 14px;
}
.program-support-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  list-style: none;
}
.program-support-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-mid);
  letter-spacing: 0;
}
.program-support-list li::before {
  content: '✓';
  color: var(--blue);
  font-weight: 700; /* チェックマーク記号のため例外 */
  flex-shrink: 0;
}

/* SUB HEADING */
.program-sub-heading {
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}
.program-sub-heading + .program-note-text-sm { margin-top: 4px; }

/* NOTE TEXT */
.program-note-text {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 12px;
  letter-spacing: 0;
}
.program-note-text-sm {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 16px;
  letter-spacing: 0;
}

/* VENUE */
.program-venue-card {
  background: var(--white);
  padding: 20px 24px;
  margin-top: 20px;
  margin-bottom: 4px;
}
.program-venue-card h4 {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.program-venue-card p {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.65;
  letter-spacing: 0;
}
.program-venue-badge {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: 700; /* 超小型uppercaseバッジの視認性確保のため例外 */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--blue-pale);
  color: var(--blue);
  padding: 2px 8px;
  border-radius: var(--r-btn);
  margin-bottom: 8px;
}

/* CAUTION */
.program-caution {
  border-left: 3px solid var(--gray-200);
  padding: 12px 16px;
  margin-top: 20px;
  background: var(--white);
}
.program-section-alt .program-caution { background: var(--off-white); }
.program-caution p {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.72;
  letter-spacing: 0;
}
.program-caution p + p { margin-top: 6px; }
.program-table-scroll + .program-caution { margin-top: 16px; }

/* CERTIFICATION PAGE SPACING HELPERS */
.program-mt-sm { margin-top: 16px; }
.program-mt-md { margin-top: 20px; }
.program-mt-lg { margin-top: 24px; }
.program-mt-xl { margin-top: 28px; }
.program-mt-2xl { margin-top: 32px; }

/* CTA adjustment */
.cta-section { border-top: none; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .program-section,
  .program-section-alt {
    padding: 48px 20px;
  }

  .program-info-table th { width: 120px; }

  .program-flow-step {
    padding: 16px 18px;
    gap: 14px;
  }

  .program-note-box { padding: 14px 16px; }
  .program-caution { padding: 10px 14px; }
  .program-venue-card { padding: 16px 18px; }
  .program-sub-heading { margin-top: 24px; }

  .program-schedule-table { font-size: 0.76rem; }
  .program-schedule-table th,
  .program-schedule-table td { padding: 8px 10px; }

  .program-fee-table { font-size: 0.8rem; }
  .program-fee-table td,
  .program-fee-table th { padding: 10px 12px; }

  .program-table-scroll.program-mt-2xl { margin-top: 24px; }
}

/* Certificationページカラー定義 */
.subpage-hero.certification-hero,
body.page-certification {
  --page-main: #f97316;
  --page-main-pale: #ffedd5;
  --page-dot-color: rgba(249,115,22,0.10);
}

/* Certificationページは --blue をオレンジに上書き */
body.page-certification {
  --blue: #f97316;
  --blue-pale: #ffedd5;
}
/* ── HALUHANA SUPPORT カードグリッド ── */
.support-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-100);
  margin-top: 28px;
  border: var(--border-soft);
}

.support-card {
  background: var(--white);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-pale);
  border-radius: 10px;
  flex-shrink: 0;
}

.support-card-icon .phi {
  font-size: 1.5rem;
  color: var(--blue);
}

.support-card h4 {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}

.support-card p {
  font-size: 0.84rem;
  color: var(--text-mid);
  line-height: 1.65;
  letter-spacing: 0;
  margin: 0;
}

@media (max-width: 600px) {
  .support-cards-grid {
    grid-template-columns: 1fr;
  }
}