@charset "UTF-8";
/* コース受講ページ専用。色は style.css の :root 変数だけを使う。 */

#mbco-app{
  max-width:1180px;
  margin-inline:auto;
  padding:40px 24px 64px;
  color:var(--text);
}

.cp-top{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:16px;
  padding:18px 0 24px;
  border-bottom:1px solid var(--border);
}
.cp-top h1{font-size:24px;line-height:1.45;color:var(--navy)}
.cp-top p{font-weight:700;color:var(--text-muted)}
.cp-top a{font-size:14px;font-weight:700;color:var(--blue-ink)}

.cp-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:32px;
  align-items:start;
  margin-top:28px;
}

.cp-side{
  position:sticky;
  top:104px;
  order:0;
}
.cp-side__acc{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--sky-050);
  box-shadow:var(--sh-card);
  overflow:hidden;
}
.cp-side__acc summary{
  min-height:44px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:800;
  color:var(--navy);
}
.cp-side__list{
  display:grid;
  gap:6px;
  padding:0 12px 14px;
}
.cp-side__chapter{
  margin-top:10px;
  padding:8px 4px 2px;
  font-size:12px;
  font-weight:800;
  color:var(--text-muted);
}
.cp-side__lesson{
  display:block;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:14px;
  font-weight:700;
  color:var(--text);
}
.cp-side__lesson:hover,
.cp-side__lesson.is-current{
  background:var(--sky-200);
  color:var(--blue-ink);
}

.cp-main{
  min-width:0;
  order:1;
}
#cp-lesson-progress{
  display:grid;
  gap:8px;
  margin-bottom:22px;
  font-size:13px;
  font-weight:700;
  color:var(--text-muted);
}

#cp-screen{
  display:grid;
  gap:22px;
  min-height:360px;
  padding:32px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-xl);
  background:var(--sky-050);
  box-shadow:var(--sh-card);
}
#cp-screen h2{font-size:28px;line-height:1.45;color:var(--navy)}
#cp-screen h3{font-size:17px;line-height:1.55;color:var(--navy)}
#cp-screen p{line-height:1.9}
#cp-screen blockquote{
  margin:0;
  padding:18px 20px;
  border-left:4px solid var(--yellow);
  background:var(--sky-100);
  border-radius:var(--radius-md);
  color:var(--navy-soft);
}

.cp-kicker{
  justify-self:start;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--sky-200);
  color:var(--blue-ink);
  font-size:12px;
  font-weight:800;
}
.cp-cta{font-weight:800;color:var(--navy)}
.cp-video{
  width:100%;
  border-radius:var(--radius-lg);
  background:var(--navy);
}
.cp-transcript,
.cp-accordion details{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}
.cp-transcript summary,
.cp-accordion summary{
  min-height:44px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
  color:var(--navy);
}
.cp-transcript p,
.cp-accordion p{padding:0 14px 14px}

.cp-compare{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-050);
}
.cp-compare th,
.cp-compare td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.cp-compare th{background:var(--sky-200);color:var(--navy)}
.cp-compare tr:last-child td{border-bottom:0}

.cp-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.cp-card{
  padding:18px;
  border:1px solid var(--card-border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}
.cp-accordion{display:grid;gap:10px}
.cp-steps{
  display:grid;
  gap:10px;
  padding:0;
  list-style:none;
}
.cp-steps .step{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:12px;
  align-items:start;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}
.cp-steps .step__no{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-pill);
  background:var(--blue-dark);
  color:var(--sky-050);
  font-weight:800;
}
.cp-before-after{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.cp-before-after__col{
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}

.cp-situation,
.cp-brief{
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
  font-weight:700;
}
.cp-choices{
  display:grid;
  gap:10px;
}
.cp-choice,
.cp-reorder__item,
.cp-classify button{
  min-height:44px;
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-050);
  color:var(--text);
  font:inherit;
  font-weight:700;
  text-align:left;
  cursor:pointer;
}
.cp-choice:hover,
.cp-reorder__item:hover,
.cp-classify button:hover{background:var(--sky-100)}
.cp-choice.is-on,
.cp-reorder__item.is-on,
.cp-classify__item.is-on{
  border-color:var(--blue-dark);
  background:var(--sky-200);
  color:var(--blue-ink);
}
.cp-choice-note{
  margin-top:-4px;
  font-size:13px;
  color:var(--text-muted);
}
.cp-hint{
  margin:0;
  color:var(--text-muted);
  font-size:13px;
}
.cp-feedback{
  min-height:24px;
  color:var(--navy-soft);
  font-weight:700;
}
.cp-feedback.is-correct{color:var(--green)}
.cp-feedback.is-wrong{color:var(--orange)}

.cp-checks{display:grid;gap:18px}
.cp-check{
  display:grid;
  gap:12px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}

/* 状況説明と質問文が同じ見た目だとどれが問いか分からない。最後の段落＝質問文を太字にする。 */
.cp-check-prompt{display:grid;gap:6px}
.cp-check-prompt p{margin:0}
.cp-check-prompt p:last-child{font-weight:700}

.cp-classify{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.cp-classify__sp,
.cp-classify__source,
.cp-classify__bucket{
  display:grid;
  gap:10px;
  align-content:start;
  min-height:120px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}
.cp-classify__item{
  display:block;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-050);
  font-weight:700;
}
.cp-classify__item.is-wrong{
  border-color:var(--orange);
  color:var(--orange);
}

.cp-reorder{
  display:grid;
  gap:10px;
}
.cp-reorder__item{
  display:flex;
  align-items:center;
  gap:10px;
}
.cp-reorder__no{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:none;
  border-radius:var(--radius-pill);
  background:var(--blue-dark);
  color:var(--sky-050);
  font-size:13px;
  font-weight:800;
}

.cp-worksheet{
  display:grid;
  gap:16px;
}
.cp-field{
  display:grid;
  gap:8px;
  font-weight:800;
  color:var(--navy);
}
.cp-field textarea{
  min-height:112px;
  resize:vertical;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-050);
  color:var(--text);
  font:inherit;
}
.cp-error{color:var(--orange);font-weight:800}
.cp-model{
  padding:18px;
  border:1px solid var(--green);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}
.cp-final-status,
.cp-final-explain,
.cp-action-result{
  color:var(--navy-soft);
  font-weight:700;
}
.cp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.cp-action-focus{
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--sky-100);
}
.cp-dev{color:var(--purple);font-weight:800}

.cp-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
}
.cp-nav button{
  min-height:44px;
  min-width:112px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--blue-dark);
  color:var(--sky-050);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.cp-nav button:disabled{
  background:var(--sky-200);
  color:var(--text-muted);
  cursor:not-allowed;
}
#cp-back{background:var(--sky-200);color:var(--blue-ink)}
#cp-next{background:var(--blue-dark);color:var(--sky-050)}
#cp-back:disabled,
#cp-next:disabled{
  background:var(--sky-200);
  color:var(--text-muted);
  cursor:not-allowed;
}
.cp-nav__hint{
  flex:1;
  margin:0;
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.cp-note{
  margin-top:20px;
  color:var(--text-muted);
  font-size:13px;
}

@media (max-width:960px){
  #mbco-app{padding:24px 16px 48px}
  .cp-top{grid-template-columns:1fr;align-items:start}
  .cp-layout{grid-template-columns:1fr;gap:22px}
  .cp-main{order:0}
  .cp-side{position:static;order:1}
  .cp-side__acc{box-shadow:none}
  .cp-side__acc:not([open]) .cp-side__list{display:none}
  .cp-side__acc[open] .cp-side__list{display:grid}
  /* sticky nav と最終行が接しない程度の下余白に留める */
  #cp-screen{padding:22px 16px 36px;min-height:0;border-radius:var(--radius-lg)}
  #cp-screen h2{font-size:23px}
  .cp-cards,
  .cp-before-after,
  .cp-classify{grid-template-columns:1fr}
  .cp-nav{position:sticky;bottom:0;padding:12px 0;background:var(--sky-050)}
  .cp-nav button{flex:1}
}