/* 音楽コラム用の要素(c1-)。色は白・グレー・青と、正誤の緑・赤だけ */
.c1-callout{ padding:2px 0 2px 14px; border-left:2px solid var(--line2); }
.c1-callout p{ margin:4px 0 0; font-size:14.5px; line-height:1.85; }
.c1-callout-h{ font-size:12.5px; color:var(--sub); }
.c1-tip{ border-left-color:var(--accent); }
.c1-tip .c1-callout-h{ color:var(--accent); }
.c1-warn{ border-left-color:var(--ng); }
.c1-warn .c1-callout-h{ color:var(--ng); }
.c1-fact{ border-left-color:var(--text); }

.c1-quote{ margin:0; padding:6px 0 6px 18px; border-left:2px solid var(--line2); }
.c1-quote p{ margin:0; font-size:17px; line-height:1.8; }
.c1-quote footer{ margin-top:8px; font-size:12.5px; color:var(--sub); }

.c1-stat{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.c1-stat > div{ padding:14px 12px; text-align:center; border-left:1px solid var(--line); }
.c1-stat > div:first-child{ border-left:0; }
.c1-stat b{ display:block; font-size:26px; line-height:1.3; font-weight:600; color:var(--accent); }
.c1-stat span{ font-size:12.5px; color:var(--sub); }

.c1-compare{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; }
.c1-side{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.c1-side.playing{ background:var(--accent-bg); box-shadow:inset 0 0 0 2px var(--accent); }
.c1-side-h{ font-size:15px; }
.c1-side p{ margin:0 0 4px; font-size:13.5px; line-height:1.75; color:var(--sub); }
.c1-vs{ align-self:center; font-style:normal; font-size:12px; color:var(--faint); }

.c1-phrase{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.c1-phrase .piano-roll{ width:100%; }
.c1-phrase .pr-note.playing{ fill:var(--accent-2); stroke:var(--accent); stroke-width:1.5; vector-effect:non-scaling-stroke; }

.c1-quiz{ padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.c1-quiz-q{ display:block; font-size:15px; line-height:1.6; margin-bottom:10px; }
.c1-quiz-choices{ display:flex; flex-direction:column; gap:6px; }
.c1-choice{ text-align:left; padding:9px 12px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text); font-size:14px; }
.c1-choice:hover:not(:disabled){ background:var(--hover); }
.c1-choice.ok{ border-color:var(--ok); background:var(--ok-bg); }
.c1-choice.ng{ border-color:var(--ng); background:var(--ng-bg); }
.c1-choice:disabled{ cursor:default; color:var(--text); }
.c1-quiz-ex{ margin:10px 0 0; font-size:13.5px; line-height:1.8; color:var(--sub); }

.c1-timeline{ list-style:none; margin:0; padding:0; }
.c1-timeline li{ display:grid; grid-template-columns:92px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.c1-timeline li:last-child{ border-bottom:0; }
.c1-when{ font-size:13px; color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
.c1-tl-body{ display:flex; flex-direction:column; gap:2px; font-size:14px; line-height:1.7; }
.c1-tl-body span{ font-size:13px; color:var(--sub); }

.c1-profile{ padding:14px 18px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.c1-prof-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; }
.c1-prof-head b{ font-size:17px; }
.c1-prof-head span{ font-size:12.5px; color:var(--sub); }
.c1-profile p{ margin:8px 0 0; font-size:14px; line-height:1.8; }
.c1-profile ul{ margin:8px 0 0; padding-left:1.3em; font-size:13.5px; line-height:1.85; color:var(--sub); }

.c1-details{ border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.c1-details summary{ padding:11px 16px; font-size:14px; font-weight:600; cursor:pointer; }
.c1-details p{ margin:0; padding:0 16px 14px; font-size:14px; line-height:1.9; color:var(--sub); }

.c1-check{ list-style:none; margin:0; padding:0; }
.c1-check li{ padding:7px 0; border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.7; }
.c1-check li:last-child{ border-bottom:0; }
.c1-check label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.c1-check input{ margin-top:6px; accent-color:var(--accent); }
.c1-check input:checked + span{ color:var(--faint); text-decoration:line-through; }

.c1-terms{ margin:0; }
.c1-terms > div{ display:grid; grid-template-columns:130px 1fr; gap:4px 14px; padding:9px 0; border-bottom:1px solid var(--line); }
.c1-terms > div:last-child{ border-bottom:0; }
.c1-terms dt{ font-size:14px; font-weight:600; }
.c1-terms dd{ margin:0; font-size:13.5px; line-height:1.75; color:var(--sub); }

.c1-steps{ list-style:none; margin:0; padding:0; counter-reset:c1s; }
.c1-steps li{ counter-increment:c1s; position:relative; padding:8px 0 8px 38px; font-size:14.5px; line-height:1.75; }
.c1-steps li::before{ content:counter(c1s); position:absolute; left:0; top:9px; width:24px; height:24px; line-height:24px; text-align:center; border:1px solid var(--line2); border-radius:50%; font-size:12px; color:var(--sub); }
.c1-steps b{ display:block; }
.c1-steps span{ font-size:13.5px; color:var(--sub); }

@media (max-width:640px){
  .c1-compare{ grid-template-columns:1fr; }
  .c1-vs{ justify-self:center; }
  .c1-timeline li{ grid-template-columns:70px 1fr; gap:8px; }
  .c1-terms > div{ grid-template-columns:1fr; }
  .c1-quote p{ font-size:17px; }
}

/* 本文の b に付く蛍光ペン風の下線を、要素の中の見出しでは消す */
.lesson-body [class*="c1-"] b{ background:none; }