/* P8-B「実数」Ver.0.1.0 専用スタイル。P8-A・P1〜P7とは独立したファイル。 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f5f3ee;color:#20302c;font-family:"Yu Gothic UI","Hiragino Sans",Meiryo,sans-serif;overflow-x:hidden}
header{position:sticky;top:0;z-index:20;height:64px;padding:0 clamp(16px,5vw,60px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ded8ca;background:#fffdf8f2;backdrop-filter:blur(8px)}
header b{color:#2f5f53;font-size:14px}
main{width:min(1080px,calc(100% - 32px));margin:28px auto 72px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px}
aside{position:sticky;top:90px;padding:10px 0}
label{display:block;margin:0 0 10px;color:#2f5f53;font-size:12px;font-weight:900;letter-spacing:.1em}
#lesson-number{font-size:13px}
#lesson-title{margin:0 0 16px;font-family:"Yu Mincho",serif;font-size:20px}
.bar{height:7px;background:#e2ded4;border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;background:#ef6c4d;transition:.3s}
#percent{display:block;margin-top:6px;text-align:right;color:#55625d;font-size:12px}
#steps{list-style:none;padding:0;display:grid;gap:10px;margin-top:18px}
#steps li{display:flex;align-items:center;gap:8px;color:#55625d;font-size:12px;font-weight:700}
#steps li i{display:grid;place-items:center;width:22px;height:22px;border:1px solid #d6d1c5;border-radius:50%;font-style:normal;font-size:10px}
#steps li.on{color:#20302c}
#steps li.on i{background:#f8d96f;border-color:#f8d96f}
#steps li.done{color:#2f5f53}
#steps li.done i{border-color:#2f5f53}
article{min-height:600px;padding:clamp(22px,5vw,48px);background:#fffdf8;border:1px solid #e1dbce;border-radius:24px;box-shadow:0 18px 50px #3d342314}
h1{margin:0;font-family:"Yu Mincho",serif;font-size:clamp(24px,4.5vw,36px);line-height:1.35}
h1 em{color:#e65d3e;font-style:normal}
.lead{margin:16px 0 26px;color:#55625d;line-height:1.9}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.choices button{min-height:48px;padding:14px;border:2px solid #e0dbd0;border-radius:14px;background:#fff;text-align:left;color:#20302c;font-size:15px;cursor:pointer;overflow-wrap:anywhere}
.choices button:hover{border-color:#2f5f53;background:#edf5f0}
.answer{display:flex;align-items:center;justify-content:center;gap:16px;margin:18px 0}
.answer input.mini{width:100px;height:60px;border:3px solid #5c8e82;border-radius:14px;text-align:center;font-size:24px;font-weight:900;outline:none}
.note{margin:6px 0 0;color:#55625d;font-size:12px;text-align:center}
.feedback{margin-top:14px;padding:12px;border-radius:12px;background:#fff0dd;color:#8a4323;text-align:center;font-weight:700;min-height:1.4em}
.success-feedback{background:#edf5f0;color:#2f5f53}
.primary{width:100%;height:52px;margin-top:20px;border:0;border-radius:14px;background:#c24a2e;color:#fff;font-size:16px;font-weight:900;box-shadow:0 6px 0 #8f321d;cursor:pointer}
.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #8f321d}
.link{display:block;margin:16px auto 0;border:0;background:none;color:#2f5f53;text-decoration:underline;cursor:pointer;font-size:14px}
.formula-card{margin:20px 0;padding:20px;border:1px solid #d3e1d8;border-radius:16px;background:#f1f6f1;text-align:center}
.steps-card{margin:20px 0;padding:18px;border-radius:14px;background:#f8faf6;text-align:left}
.steps-card p{margin:8px 0;padding:8px 12px;border-radius:10px;background:#fff;font-size:15px}
.fill-steps{margin:16px 0;display:grid;gap:10px}
.fill-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fill-row input.mini{width:90px;height:50px;border:3px solid #5c8e82;border-radius:12px;text-align:center;font-size:20px;font-weight:900}
.tasuki-steps{margin:8px 0 18px;padding:0;list-style:none}
.tasuki-steps li{display:inline-flex;align-items:center;gap:5px;margin:0 8px 6px 0;color:#4a5550;font-size:12px;font-weight:800}
.tasuki-steps li i{display:grid;place-items:center;width:20px;height:20px;border:1px solid #d6d1c5;border-radius:50%;font-style:normal;font-size:10px}
.tasuki-steps li.on{color:#20302c}
.tasuki-steps li.on i{background:#f8d96f;border-color:#f8d96f}
.tasuki-steps li.done{color:#2f5f53}
.tasuki-steps li.done i{border-color:#2f5f53}
.clear{text-align:center}
.medal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:#f4cf59;font-size:34px}
.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.lesson-grid button{display:grid;grid-template-columns:40px 1fr 20px;align-items:center;gap:8px;padding:14px;border:1px solid #d8ded8;border-radius:14px;background:#f8faf6;color:#20302c;text-align:left;cursor:pointer}
.lesson-grid button:hover{border-color:#2f5f53;background:#edf5f0}
.lesson-grid button.completed{border-color:#79a99d;background:#edf5f0}
.lesson-grid i{color:#c24a2e;font-style:normal;font-size:12px;font-weight:900}
.lesson-grid span{display:grid;gap:3px}
.lesson-grid small{color:#55625d}
.foundation-head{margin-top:30px;padding-top:22px;border-top:1px solid #ded8ca}
.foundation-head h2{margin:0;font-family:serif;font-size:21px}
.foundation-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.foundation-grid button{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;padding:14px;border:1px solid #e5d8b8;border-radius:14px;background:#fff8e6;color:#20302c;text-align:left;cursor:pointer}
.foundation-grid i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f8d96f;font-style:normal;font-weight:900}
.foundation-grid small{color:#6a5a33}
.recommend{display:grid;gap:6px;margin:20px 0;padding:20px;border:2px solid #79a99d;border-radius:16px;background:#edf5f0;text-align:center}
.recommend i{color:#2f5f53;font-style:normal;font-size:11px;font-weight:900}
.diagnostic-button,.challenge-button,.practice-button,.goal-button{width:100%;margin-top:12px;padding:14px;border-radius:14px;font-weight:900;cursor:pointer}
.diagnostic-button{border:2px solid #2f5f53;background:#fff;color:#2f5f53}
.challenge-button{border:0;background:#263f3a;color:#fff}
.practice-button{border:2px solid #c24a2e;background:#fff;color:#a8401f}
.goal-button{border:2px solid #7a5ea0;background:#fff;color:#5d4480}
.start-actions{margin-bottom:24px}
.session-progress{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:4px 0 16px;padding:14px 16px;border-radius:14px;background:#263f3a;color:#fff}
.session-progress strong{color:#f8d96f;font-size:22px}
.session-progress small{color:#b8d7ce}
.session-bar{grid-column:1/2;height:7px;border-radius:9px;background:#ffffff2b;overflow:hidden}
.session-bar i{display:block;height:100%;border-radius:9px;background:#f8d96f}
.session-progress button{grid-column:2;grid-row:1/3;border:0;background:none;color:#c8d9d4;font-size:11px;text-decoration:underline;cursor:pointer}
.result-list{display:grid;gap:8px;margin:20px 0}
.result-list>div{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#edf5f0}
.result-list>div.incorrect{background:#fff0dd}
.result-list>div>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2f5f53;color:#fff}
.result-list .incorrect>b{background:#c24a2e}
.figure{display:block;width:100%;max-width:280px;margin:12px auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button:focus-visible,input:focus-visible{outline:4px solid #79a99d;outline-offset:2px}
@media(max-width:760px){
  main{grid-template-columns:1fr;width:min(100% - 20px,600px);margin:16px auto 36px}
  aside{position:static;padding:4px 0 10px}
  article{min-height:520px;padding:20px 16px;border-radius:20px}
  h1{font-size:26px}
  .choices{grid-template-columns:1fr}
  .lesson-grid,.foundation-grid{grid-template-columns:1fr}
}
@media(max-width:390px){
  .answer input.mini,.fill-row input.mini{width:72px;height:50px;font-size:18px}
}
/* #22（共役有理化5段階）はスマホ幅では1段階ずつ縦に表示し、横スクロールしない */
@media(max-width:600px){
  .tasuki-steps{display:flex;flex-direction:column;gap:4px}
  .tasuki-steps li{margin:0}
}