/* ── decimal_ratio_chain2_5（小数倍の基準をつないで求めよう、単元仕様書 v1.2）── */
/* 画面：問題文の下に、量と倍率の矢印をつないだ図、答えの欄（名前・欄・単位）、回答案内、テンキー、「こたえる！」（§5-3・§7 画面表示）。 */
.drch-main{margin:6px auto 4px;max-width:100%}
.drch-diagram{display:flex;justify-content:center;align-items:stretch;gap:0;margin:4px auto;max-width:100%}
.drch-node,.drch-arrow{display:flex;flex-direction:column;align-items:center;flex:none}
.drch-top{display:block;min-height:1.5em;line-height:1.5em;font-weight:700;font-size:1rem;white-space:nowrap;text-align:center}
.drch-body{display:flex;align-items:center;justify-content:center;flex:none}
.drch-box{box-sizing:border-box;min-width:4.4em;height:2.6em;padding:0 .4em;border:2.5px solid #1e3a8a;background:#eff6ff;border-radius:6px;font-size:1.05rem}
.drch-node-answer .drch-box{border-style:dashed;border-color:#b45309;background:#fffbeb}
.drch-val{font-weight:700;white-space:nowrap}
.drch-blank{display:inline-block;width:1.5em;height:1em}
.drch-circle{box-sizing:border-box;width:2.6em;height:2.6em;border:2.5px solid #1e3a8a;border-radius:50%;background:#fff;font-size:1.05rem}
.drch-circle .drch-name{font-weight:700}
.drch-arrow{min-width:4.6em;padding:0 .2em}
.drch-arrow-long{min-width:8.5em}
.drch-arrow-label{color:#1e3a8a}
.drch-arrow-body{width:100%;height:2.6em}
.drch-arrow-line{position:relative;display:block;width:100%;height:0;border-top:2.5px solid #1e3a8a}
.drch-arrow-line::after{content:'';position:absolute;right:-2px;top:-7.5px;border-left:11px solid #1e3a8a;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
/* 360 CSS px 前後の幅では、量と矢印を上から下へならべ直す（§7 画面表示。量の名前・数・倍率・矢印の向きを欠かさない）。 */
@media (max-width:480px){
  .drch-diagram{flex-direction:column;align-items:center}
  .drch-node,.drch-arrow{flex-direction:row;gap:.5em}
  .drch-node .drch-top{min-width:3.6em;text-align:right}
  .drch-node-mid .drch-top{display:none}
  .drch-arrow{min-width:0;padding:0;flex-direction:row-reverse;justify-content:center}
  .drch-arrow-long{min-width:0}
  .drch-arrow-label{min-width:3.6em;text-align:left}
  .drch-arrow-body{width:2.6em;height:2.2em}
  .drch-arrow-line{width:0;height:100%;border-top:0;border-left:2.5px solid #1e3a8a}
  .drch-arrow-line::after{right:auto;top:auto;bottom:-2px;left:-7.5px;border-left:6.5px solid transparent;border-right:6.5px solid transparent;border-top:11px solid #1e3a8a;border-bottom:0}
  .drch-node .drch-body{margin-right:3.6em}
  .drch-node-mid .drch-body{margin-right:0}
}
.drch-fields{display:flex;justify-content:center;align-items:center;gap:8px;margin:6px auto 2px;font-size:1.3rem;font-weight:700}
.drch-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}
.drch-input-C{width:3em}
.drch-input:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
.drch-input:disabled{background:#f8fafc;color:#111827;opacity:1;border-color:#94a3b8}
.drch-input.drch-input-ok{border:3px solid #15803d;background:#dcfce7}
.drch-input.drch-input-ng{border:3px dashed #b91c1c;background:#fff1f2}
.drch-guide{margin:6px auto 4px;font-weight:700;text-align:center;max-width:32em}
.drch-msg{margin:2px auto 0;color:#b91c1c;font-weight:700;font-size:.95rem;text-align:center;max-width:32em}
.drch-msg:empty{display:none}
.feedback.has-text.drch-feedback{height:auto;min-height:40px;padding:4px 0;text-align:center;line-height:1.45}
.drch-correct{margin:2px 0 6px;font-weight:700}
.drch-expl-text{margin:4px 0 6px;overflow-wrap:anywhere}
.drch-lesson-ex{display:block;margin-top:6px}
.drch-lesson-q{display:block;font-weight:700;overflow-wrap:anywhere}
.drch-lesson-a{display:block;overflow-wrap:anywhere}
#page-quiz.active:has(.drch-main) #hint-area .kp-card{display:flex;align-items:flex-start;gap:8px}
#page-quiz.active:has(.drch-main) #hint-area .kp-head{margin-bottom:0;flex:none}
#page-quiz.active:has(.drch-main) #hint-area .kp-title:empty{display:none}
#page-quiz.active:has(.drch-main) #hint-area .kp-body{flex:1;min-width:0;padding-left:0;overflow-wrap:anywhere}

/* 印刷：A4横・2列×5段・1ページ（§7。用紙の余白10mm、本文277×190mm、各列134mm・列の間4mm、各問の領域26mm：
   番号の行5mm、量の名前と矢印の文字の行5mm、量の四角と矢印の行9mm、余り7mm。答えは1行に10件）。 */
.drch-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}
.drch-pr-head{display:flex;flex-direction:column;flex:none;box-sizing:border-box;width:277mm}
.drch-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}
.drch-pr-head hr.pp-fields-solid{margin:1mm 0!important}
.drch-pr-inst{flex:none;box-sizing:border-box;margin:0;height:15mm;font-size:12.6pt;line-height:5mm;overflow:hidden}
.drch-pr-problems{display:grid;grid-template-columns:134mm 134mm;column-gap:4mm;flex:none;margin-top:1mm}
.drch-pr-col{display:grid;grid-template-rows:repeat(5,26mm)}
.drch-pr-cell{box-sizing:border-box;height:26mm;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start}
.drch-pr-num{margin:0;height:5mm;font-size:12.6pt;line-height:5mm;font-weight:700;white-space:nowrap}
.drch-pr-cell .drch-diagram{justify-content:flex-start;margin:0}
.drch-pr-cell .drch-top{min-height:5mm;height:5mm;line-height:5mm;font-size:12.6pt}
.drch-pr-cell .drch-body{height:9mm}
.drch-pr-cell .drch-box{width:26mm;min-width:0;height:9mm;padding:0 1.5mm;border:0.35mm solid #000;border-radius:0;background:#fff;font-size:12.6pt}
.drch-pr-cell .drch-node-answer .drch-box{border:0.35mm solid #000;background:#fff}
.drch-pr-cell .drch-circle{width:10mm;height:9mm;border:0.35mm solid #000;font-size:12.6pt}
.drch-pr-cell .drch-arrow{width:24mm;min-width:0;padding:0}
.drch-pr-cell .drch-arrow-long{width:48mm}
.drch-pr-cell .drch-arrow-label{color:#000}
.drch-pr-cell .drch-arrow-body{width:100%;height:9mm;padding:0 1.5mm;box-sizing:border-box}
.drch-pr-cell .drch-arrow-line{border-top:0.35mm solid #000}
.drch-pr-cell .drch-arrow-line::after{right:-0.5mm;top:-1.35mm;border-left:2.6mm solid #000;border-top:1.2mm solid transparent;border-bottom:1.2mm solid transparent}
.drch-pr-ansbox{margin-left:2mm}
.drch-pr-ansbox-body{gap:1mm;font-size:12.6pt}
.drch-pr-box{display:inline-block;box-sizing:border-box;width:9mm;height:9mm;border:0.35mm solid #000}
.drch-pr-answers{flex:none;box-sizing:border-box;margin-top:1mm}
.drch-pr-dashed{box-sizing:content-box;display:block;height:0;margin:0 0 0.5mm;padding:0;border:0;border-top:2pt dashed #aaa}
.drch-pr-answers-title{font-weight:700;font-size:12.6pt;height:6mm;line-height:6mm}
.drch-pr-ans-row{display:grid;grid-template-columns:repeat(10,26.3mm);column-gap:1mm}
.drch-pr-ans{margin:0;font-size:10.2pt;line-height:5mm;height:5mm;white-space:nowrap;overflow:hidden}
.drch-app-pdf-page .drch-pr-page{box-shadow:none;margin:0}

#pr-sheet[data-unit="decimal_ratio_chain2_5"]{width:277mm;max-width:none;padding:0;margin:calc(12px + 10mm) auto;background:transparent;box-shadow:none}
#pr-sheet[data-unit="decimal_ratio_chain2_5"]>:not(#pr-problems){display:none!important}
#pr-sheet[data-unit="decimal_ratio_chain2_5"]>#pr-problems{display:block}
/* 画面のプレビューでは、用紙の余白10mmを白い縁で見せる（印刷の寸法は変えない）。 */
#pr-sheet[data-unit="decimal_ratio_chain2_5"] .drch-pr-page{box-shadow:0 0 0 10mm #fff,0 0 4px 10mm rgba(0,0,0,.12);margin-bottom:calc(8mm + 10mm)}
/* 印刷の紙面の図は、画面の幅によらず横にならべる（狭い画面のならべ直しを紙面に持ちこまない）。 */
@media (max-width:480px){
  .drch-pr-cell .drch-diagram{flex-direction:row;align-items:stretch}
  .drch-pr-cell .drch-node,.drch-pr-cell .drch-arrow{flex-direction:column;gap:0}
  .drch-pr-cell .drch-node .drch-top{min-width:0;text-align:center}
  .drch-pr-cell .drch-node-mid .drch-top{display:block}
  .drch-pr-cell .drch-arrow-label{min-width:0;text-align:center}
  .drch-pr-cell .drch-node .drch-body{margin-right:0}
  .drch-pr-cell .drch-arrow-line{width:100%;height:0;border-left:0;border-top:0.35mm solid #000}
  .drch-pr-cell .drch-arrow-line::after{left:auto;bottom:auto;right:-0.5mm;top:-1.35mm;border-left:2.6mm solid #000;border-right:0;border-top:1.2mm solid transparent;border-bottom:1.2mm solid transparent}
}
@media print{
  #page-print #pr-sheet[data-unit="decimal_ratio_chain2_5"]{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="decimal_ratio_chain2_5"]>:not(#pr-problems){display:none!important}
  #page-print #pr-sheet[data-unit="decimal_ratio_chain2_5"]>#pr-problems{display:block!important}
  #page-print #pr-sheet[data-unit="decimal_ratio_chain2_5"] .drch-pr-page{display:flex!important;margin:0!important;box-shadow:none!important;break-after:auto;page-break-after:auto}
}