/* ── rectangle_area_side_inverse3_4（面積から長方形の未知辺をぎゃく算しよう、単元仕様書 v1.3）── */
/* 画面：問題文の下に長方形の図、図の注意の文、図の下の文、回答案内、回答欄（単位cmは欄の外）とテンキー（§5-3・§7 画面表示）。 */
.ras-main{display:flex;flex-direction:column;align-items:center;margin:4px 0 6px;max-width:100%}
.ras-figure{margin:0;width:100%;max-width:400px;box-sizing:border-box;display:flex;justify-content:center}
.ras-fig{display:block;width:100%;height:auto;max-width:400px}
.ras-fig-text{fill:#111827;font-weight:700;font-variant-numeric:tabular-nums}
.ras-fig-target{fill:#b45309}
.ras-fig-total{fill:#1e3a8a}
.ras-fig-note{margin:4px 0 2px;font-size:.92rem;color:#475569;text-align:center;max-width:34em}
.ras-alt{margin:2px 0 4px;font-size:.95rem;color:#1f2937;text-align:center;max-width:34em;line-height:1.5}
.ras-guide{margin:6px 0 4px;font-weight:700;text-align:center}
.ras-fields{display:flex;justify-content:center;align-items:center;gap:8px;margin:4px auto 2px}
.ras-input{width:6.5em;max-width:60vw;min-height:44px;font-size:1.4rem;padding:4px 8px;border:3px solid #1d4ed8;background:#eff6ff;border-radius:10px;text-align:center;font-family:inherit;box-sizing:border-box}
.ras-input:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
.ras-input:disabled{background:#f8fafc;color:#111827;opacity:1;border-color:#94a3b8}
.ras-input.ras-input-ok{border:3px solid #15803d;background:#dcfce7}
.ras-input.ras-input-ng{border:3px dashed #b91c1c;background:#fff1f2}
.ras-unit{font-size:1.3rem;font-weight:700;color:#111827}
.ras-msg{margin:2px auto 0;color:#b91c1c;font-weight:700;font-size:.95rem;text-align:center;max-width:32em}
.ras-msg:empty{display:none}
.feedback.has-text.ras-feedback{height:auto;min-height:40px;padding:4px 0;text-align:center;line-height:1.45}
.ras-answer-line{margin:4px 0 2px;font-weight:700}
.ras-expl-text{margin:2px 0 6px}
#page-quiz.active:has(.ras-main) #hint-area .kp-card{display:flex;align-items:flex-start;gap:8px}
#page-quiz.active:has(.ras-main) #hint-area .kp-head{margin-bottom:0;flex:none}
#page-quiz.active:has(.ras-main) #hint-area .kp-title:empty{display:none}
#page-quiz.active:has(.ras-main) #hint-area .kp-body{flex:1;min-width:0;padding-left:0}

/* 印刷：A4横・5列×2段・1ページ（§7。用紙の余白10mm、本文277×190mm、列51.6mm・列の間4mm、セル49mm・段の間4mm）。 */
.ras-pr-page{width:277mm;height:190mm;box-sizing:border-box;display:flex;flex-direction:column;padding:0;margin:0 auto 8mm;overflow:hidden;background:#fff;color:#000;font-family:'Atkinson Hyperlegible','BIZ UDPGothic','Yu Gothic','Meiryo',sans-serif}
.ras-pr-head{display:flex;flex-direction:column;flex:none;box-sizing:border-box;width:274mm}
.ras-pr-title{box-sizing:border-box;margin:0;height:9mm;font-size:14.3pt;font-weight:700;line-height:7.8mm;text-align:center;white-space:nowrap;padding:0;border:1.5pt solid #666;background:#ffffcc;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.ras-pr-fields{display:flex;gap:9mm;align-items:flex-end;height:7mm;margin-top:1mm;font-size:12.5pt;line-height:7mm;white-space:nowrap}
.ras-pr-group{display:inline-flex;align-items:flex-end;gap:4mm;flex:none}
.ras-pr-field{display:inline-flex;align-items:flex-end;gap:1.5mm;flex:none}
.ras-pr-field-line{display:inline-block;box-sizing:border-box;width:13mm;height:5.5mm;border-bottom:1pt solid #555}
.ras-field-name{flex:1;min-width:0}
.ras-field-name .ras-pr-field-line{flex:1;width:auto;min-width:40mm}
.ras-pr-solid{box-sizing:content-box;display:block;height:0;padding:0;border:0;border-top:1.5pt solid #333;margin:0.6mm 0 0.4mm}
.ras-pr-instruction{margin:0 0 1mm;height:16.5mm;font-size:12.6pt;line-height:5.5mm;overflow:hidden}
.ras-pr-problems{display:flex;flex-direction:column;gap:4mm;flex:none;height:102mm;margin-top:1mm}
.ras-pr-row{display:grid;grid-template-columns:repeat(5,51.6mm);column-gap:4mm;height:49mm}
.ras-pr-cell{box-sizing:border-box;height:49mm;overflow:hidden;display:flex;flex-direction:column}
.ras-pr-qline{display:flex;align-items:center;gap:2mm;height:9mm;font-size:12.6pt;font-weight:700;white-space:nowrap;line-height:9mm}
.ras-pr-q{font-weight:700;white-space:pre}
.ras-pr-fig{margin-top:1mm;width:48.6mm;height:34mm}
.ras-pr-fig .ras-fig-print{display:block;width:48.6mm;height:34mm}
.ras-pr-answers{flex:none;box-sizing:border-box;margin-top:1mm}
.ras-pr-dashed{box-sizing:content-box;display:block;height:0;margin:0 0 1mm;padding:0;border:0;border-top:2pt dashed #aaa}
.ras-pr-answers-title{font-weight:700;font-size:12.6pt;height:6mm;line-height:6mm}
.ras-pr-answer-row{display:grid;grid-template-columns:repeat(5,51.6mm);column-gap:4mm;height:19mm}
.ras-pr-answer{box-sizing:border-box;width:48.6mm;font-size:10.2pt;line-height:4.5mm;max-height:13.5mm;overflow:hidden}
.ras-app-pdf-page .ras-pr-page{box-shadow:none;margin:0}

#pr-sheet[data-unit="rectangle_area_side_inverse3_4"]{width:277mm;max-width:none;padding:0;margin:calc(12px + 10mm) auto;background:transparent;box-shadow:none}
#pr-sheet[data-unit="rectangle_area_side_inverse3_4"]>:not(#pr-problems){display:none!important}
#pr-sheet[data-unit="rectangle_area_side_inverse3_4"]>#pr-problems{display:block}
/* 画面のプレビューでは、用紙の余白10mmを白い縁で見せる（印刷の寸法は変えない）。 */
#pr-sheet[data-unit="rectangle_area_side_inverse3_4"] .ras-pr-page{box-shadow:0 0 0 10mm #fff,0 0 4px 10mm rgba(0,0,0,.12);margin-bottom:calc(8mm + 10mm)}
@media print{
  #page-print #pr-sheet[data-unit="rectangle_area_side_inverse3_4"]{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;transform:none!important;box-shadow:none!important}
  #page-print #pr-sheet[data-unit="rectangle_area_side_inverse3_4"]>:not(#pr-problems){display:none!important}
  #page-print #pr-sheet[data-unit="rectangle_area_side_inverse3_4"]>#pr-problems{display:block!important}
  #page-print #pr-sheet[data-unit="rectangle_area_side_inverse3_4"] .ras-pr-page{display:flex!important;margin:0!important;box-shadow:none!important;break-after:auto;page-break-after:auto}
}