/* 先生・保護者向けの読み物ページ用。style.css を読み込んだ上で追加する */

.doc main { gap: 34px; }

.doc section { display: flex; flex-direction: column; gap: 10px; }

.doc h2 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; margin: 0;
  padding-bottom: 7px; border-bottom: 2px solid var(--accent);
  letter-spacing: .04em;
}

.doc h3 {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; margin: 6px 0 -4px;
  color: var(--accent);
}

.doc p { margin: 0; }
.doc p + p { margin-top: 2px; }

.doc i { font-family: var(--font-num); font-style: italic; }

.doc code {
  font-family: var(--font-body); font-size: .95em;
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 6px; white-space: nowrap;
}

.doc ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }

.spec { margin: 0; display: flex; flex-direction: column; gap: 1px; background: var(--rule);
        border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.spec > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 0; background: var(--paper); }
.spec dt { padding: 9px 12px; background: var(--sheet); font-size: 14px; color: var(--ink-soft); }
.spec dd { padding: 9px 12px; margin: 0; font-size: 15px; }

.notice {
  background: var(--sheet); border-left: 3px solid var(--good);
  padding: 11px 14px; border-radius: 0 3px 3px 0;
}

.doc .fine { font-size: 13px; color: var(--ink-faint); }

@media (max-width: 460px) {
  .spec > div { grid-template-columns: 1fr; }
  .spec dt { padding-bottom: 2px; }
  .spec dd { padding-top: 2px; }
}

.notice2 {
  background: var(--sheet); border-left: 3px solid var(--wrong);
  padding: 11px 14px; border-radius: 0 3px 3px 0;
}
.doc b { font-weight: 700; }