/* 本サイトの文章・見出し・箇条書きに合わせた、装飾を抑えた外観。 */
#math-exercises-app {
  color: #000;
  background: #fff;
  font: 16px/1.6 serif;
  overflow-wrap: break-word;
}
#math-exercises-app *,
#math-exercises-app *::before,
#math-exercises-app *::after { box-sizing: border-box; }
#math-exercises-app .mx-shell { max-width: 920px; margin: 0; padding: 0; }
#math-exercises-app a { color: #00e; text-decoration: underline; }
#math-exercises-app a:visited { color: #551a8b; }
#math-exercises-app h1 { font-size: 2em; line-height: 1.3; margin: .67em 0; }
#math-exercises-app h2 { font-size: 1.5em; line-height: 1.4; margin: .83em 0; }
#math-exercises-app h3 { font-size: 1.17em; line-height: 1.4; margin: 1em 0; }
#math-exercises-app h4 { font-size: 1em; line-height: 1.4; margin: 1em 0 .3em; }
#math-exercises-app section { margin: 1.5em 0; }
#math-exercises-app .mx-header { margin: 1em 0; }
#math-exercises-app .mx-topic-list { margin: 1em 0; padding-left: 40px; }
#math-exercises-app .mx-topic-list li { margin: .2em 0; }
#math-exercises-app .mx-muted,
#math-exercises-app .mx-hint { color: #444; font-size: .93em; }
#math-exercises-app .mx-small { font-size: .9em; }

/* 入力欄は標準フォームに近い形にする。 */
#math-exercises-app .mx-form-grid { display: flex; flex-wrap: wrap; gap: 8px 20px; }
#math-exercises-app .mx-field { display: flex; flex-direction: column; gap: 3px; margin: 0 0 10px; }
#math-exercises-app .mx-form-grid .mx-field:nth-child(1) { width: 130px; }
#math-exercises-app .mx-form-grid .mx-field:nth-child(2) { width: 135px; }
#math-exercises-app .mx-form-grid .mx-field:nth-child(3) { width: 210px; }
#math-exercises-app input:not([type=checkbox]),
#math-exercises-app select,
#math-exercises-app textarea {
  min-width: 0;
  max-width: 100%;
  border: 1px solid #888;
  border-radius: 0;
  padding: 4px 5px;
  background: #fff;
  color: #000;
  font: inherit;
}
#math-exercises-app .mx-field input,
#math-exercises-app .mx-field select { width: 100%; }
#math-exercises-app textarea { resize: vertical; }
#math-exercises-app .mx-skill-list { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 8px; }
#math-exercises-app .mx-checkbox { display: flex; align-items: baseline; gap: 7px; cursor: pointer; }
#math-exercises-app .mx-checkbox input { margin: 0; accent-color: auto; }
#math-exercises-app .mx-button,
#math-exercises-app .mx-link-button {
  border: 1px solid #888;
  border-radius: 2px;
  background: #f0f0f0;
  color: #000;
  padding: 4px 10px;
  font: inherit;
  cursor: pointer;
}
#math-exercises-app .mx-button:hover,
#math-exercises-app .mx-link-button:hover { background: #e5e5e5; }
#math-exercises-app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid #00e;
  outline-offset: 2px;
}
#math-exercises-app .mx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
#math-exercises-app .mx-status { min-height: 1.4em; }

/* 問題、模範解答、解説は見出しと余白だけで区別する。 */
#math-exercises-app .mx-problem { margin: 1.4em 0; border-top: 1px solid #bbb; padding: .6em 0 0; }
#math-exercises-app .mx-statement { line-height: 1.95; }
#math-exercises-app .mx-answer-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
#math-exercises-app .mx-answer-form > input,
#math-exercises-app .mx-answer-form > select { width: 320px; }
#math-exercises-app .mx-answer-form > textarea { width: 500px; }
#math-exercises-app .mx-answer-form > .mx-hint { width: 100%; margin: 0; }
#math-exercises-app .mx-solution { margin: 1em 0; }
#math-exercises-app .mx-solution summary { cursor: pointer; }
#math-exercises-app .mx-solution-content { padding-left: 1.2em; }
#math-exercises-app .mx-model-answer { background: transparent; border: 0; padding: 0; }
#math-exercises-app .mx-solution-heading { font-weight: bold; color: inherit; }
#math-exercises-app .mx-solution-text,
#math-exercises-app .mx-reason { line-height: 1.9; white-space: pre-line; }
#math-exercises-app .mx-explanation { margin-top: 1em; }
#math-exercises-app .mx-feedback { min-height: 1em; }
#math-exercises-app #mx-unit-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 1px solid #bbb; padding: 1em 0; margin-top: 2.5em; }
#math-exercises-app .mx-export-options { display: flex; flex-direction: column; gap: 4px; margin: .5em 0 1em; }
#math-exercises-app mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
#math-exercises-app #mx-print-root { display: none; }
@media (max-width: 550px) {
  #math-exercises-app .mx-form-grid { display: block; }
  #math-exercises-app .mx-form-grid .mx-field { width: 100%; max-width: 360px; }
  #math-exercises-app .mx-answer-form > input,
  #math-exercises-app .mx-answer-form > select,
  #math-exercises-app .mx-answer-form > textarea { width: 100%; }
}

/* JavaScriptが無効な場合にのみ表示する固定例題の装飾。 */
#math-exercises-app .mx-example { border-top: 1px solid #bbb; margin: 1.2em 0; padding-top: .4em; }
#math-exercises-app .mx-example p { margin: .55em 0; }

/* 印刷表示は画面の簡素化から独立させる。 */
@page { size: A4 portrait; margin: 15mm; }
@media print {
  body { margin: 0; }
  #math-exercises-app .mx-screen-only { display: none !important; }
  #math-exercises-app #mx-print-root { display: block !important; color: black; font: 11pt/1.5 serif; }
  #math-exercises-app #mx-print-root h1 { text-align: center; font-size: 17pt; }
  #math-exercises-app #mx-print-root h2 { font-size: 14pt; border-bottom: 1px solid #999; }
  #math-exercises-app #mx-print-root h3 { font-size: 11pt; }
  #math-exercises-app .mx-print-solutions { break-before: page; }
  #math-exercises-app .mx-print-problem { break-inside: avoid; margin: 11pt 0; }
  #math-exercises-app .mx-blank { height: 15mm; }
  #math-exercises-app .mx-print-wide { padding: 7mm; }
  #math-exercises-app .mx-print-solutions p { white-space: pre-line; }
}