:root{font-family:Meiryo,'Hiragino Kaku Gothic ProN',sans-serif;color:#162337;background:#f2f5f9;font-size:16px}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #147bca;outline-offset:4px}button:disabled{cursor:default;opacity:.38}button[hidden],[hidden]{display:none!important}header{background:#162337;color:white;padding:20px max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:14px;align-items:center;font-size:17px}.brand b{font-size:14px;letter-spacing:.13em}.mark{font-size:28px;color:#ffda37}.slash{color:#8390a2}.badge{font-size:13px;border:1px solid #687385;padding:4px 12px;border-radius:20px}main{max-width:1180px;margin:auto;padding:34px 24px}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.eyebrow{font-size:12px;letter-spacing:.17em;font-weight:bold;color:#53667e;margin:0 0 8px}h1{font-size:30px;margin:0;letter-spacing:.04em}.intro{margin:8px 0 24px;color:#59687c;font-size:16px}.subtle{background:white;border:1px solid #d1d9e4;border-radius:8px;padding:10px 15px;color:#23384f;font-size:14px}.settings{display:flex;align-items:center;gap:22px;padding:14px 0 22px;flex-wrap:wrap}.settings label{display:flex;align-items:center;gap:12px;font-size:14px;color:#506077}.settings select{background:white;padding:9px 30px 9px 12px;border:1px solid #ccd5e2;border-radius:7px;font-size:14px;color:#162337}.settingNote{font-size:13px;color:#5e6e80;margin-left:auto}.workspace{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:start}.visual{border:1px solid #d3dce9;border-radius:16px;background:#e7edf6;padding:23px}.questionBar{display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-variant-numeric:tabular-nums}#qnum{font-size:14px;letter-spacing:.06em}#clock{font-size:24px;min-width:100px;text-align:right}.cubeWrap{position:relative;min-height:310px}#cube{width:100%;height:auto;display:block;max-height:360px}#cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#e7edf6}#cover h2{font-size:20px;margin:5px 0}#cover p{font-size:14px;color:#56677d}.readyNumber{font-size:76px;font-weight:bold;line-height:1.15;color:#25456b;letter-spacing:-.05em}.primary{border:0;border-radius:9px;background:#ffda37;color:#162337;font-weight:bold;padding:15px 22px;min-height:52px}.primary:hover{background:#f3cb20}#start{margin-top:10px}.rotation{display:flex;justify-content:center;gap:12px}.rotation button{background:#f8faff;border:1px solid #c5d0df;border-radius:8px;padding:10px 16px;font-size:14px;color:#29425f}.small{font-size:13px;line-height:1.8;color:#5e6e80}.visual>.small{text-align:center}.session{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #cbd5e3;margin-top:22px;padding-top:19px;text-align:center;gap:8px}.session span{font-size:12px;display:block;color:#5c6a7e}.session strong{display:block;margin-top:8px;font-size:21px;font-variant-numeric:tabular-nums}.answerPanel{background:white;border:1px solid #dce3ec;border-radius:16px;padding:25px}.answerTitle{display:flex;justify-content:space-between;align-items:center;gap:8px}.answerTitle h2{font-size:20px;margin:0 0 20px}.answerTitle span{font-size:13px;color:#66768b;margin-bottom:20px}.groupLabel{margin:12px 0 7px;font-size:12px;color:#66768b}.answerGroup{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.answer{border:1px solid #d6deea;background:#f7f9fc;border-radius:8px;color:#213b5a;font-weight:bold;font-size:19px;min-height:48px}.answer:not(:disabled):hover{background:#e9f0fb;border-color:#7897bb}.answer.correct{background:#dcf7e8;border-color:#228257;color:#145a3a;opacity:1}.answer.wrong{background:#ffebec;border-color:#c04051;color:#943643;opacity:1}.skip{display:block;width:100%;background:none;border:1px dashed #bdc9d8;border-radius:8px;padding:12px;font-size:14px;color:#52657c;margin-top:20px}#feedback{margin-top:20px;border-radius:8px;padding:14px;background:#edf3fa;font-size:16px;line-height:1.7}#feedback.good{background:#e5f7ed;color:#185c3e}#review{border-top:1px solid #e0e7f0;margin-top:18px;padding-top:10px}#review p{font-size:14px;line-height:1.8}.reviewLabel{font-weight:bold}#strips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.strip{border:3px solid var(--c);border-radius:5px;padding:3px;background:#162337;display:flex;gap:3px}.strip i{display:block;flex:1;aspect-ratio:1;border-radius:2px}.stripName{font-size:12px;display:block;color:#66768b;text-align:center;margin-top:5px}a{color:#285f9c;font-size:14px;text-underline-offset:4px}#next{width:100%;margin-top:18px}#summary{margin-top:24px;padding:25px;background:#162337;color:white;border-radius:14px}#summary h2{margin-top:0}#summary p{line-height:1.8}#summary .primary{margin-top:10px}footer{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#617089;margin:25px 0;flex-wrap:wrap}footer a{font-size:12px}#records{padding:22px;background:white;border:1px solid #d3dce8;border-radius:12px;margin-bottom:24px}#records p{font-size:13px;color:#5c6a7e}.recordHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.recordHead h2{font-size:19px}.tableWrap{max-height:340px;overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:9px;border-bottom:1px solid #e3e8f0}th{position:sticky;top:0;background:#f1f5fa}.over{color:#a55111}@media(max-width:760px){header{padding:13px 18px}.brand{font-size:14px;gap:9px}.brand b{font-size:12px}main{padding:24px 16px}.heading{align-items:flex-start}h1{font-size:25px}.settings{gap:12px}.settingNote{margin-left:0;width:100%}.workspace{grid-template-columns:1fr;gap:16px}.visual{padding:16px}.cubeWrap{min-height:250px}#cube{height:265px}.answerPanel{padding:19px}.session{margin-top:15px;padding-top:13px}.answer{min-height:51px}.intro{font-size:14px}.readyNumber{font-size:57px}.questionBar{margin-bottom:5px}#cover h2{font-size:18px}.recordHead{align-items:flex-start}.recordHead h2{margin-top:0}.session strong{font-size:19px}}@media(prefers-reduced-motion:no-preference){.answer,.primary{transition:background .12s}}

header a.brand{color:inherit;text-decoration:none}
/* トップ画面のヘッダーに合わせる。練習部分のスタイルとは分離。 */
header.home-header{--ink:#18211d;--green:#2f8a68;--line:#dfe5e1;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:auto;min-height:76px;max-width:100%;padding:10px clamp(12px,3vw,48px);flex-wrap:wrap;gap:8px 18px;background:#fffffff2;color:var(--ink);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.home-header a{color:inherit;text-decoration:none}
.home-header>.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;flex:0 0 auto;white-space:nowrap}
.home-header .site-icon{width:38px;height:38px;object-fit:cover;border-radius:50%;border:2px solid #f3b51b;box-shadow:0 2px 9px #0002;flex:none}
.home-header>.home-page-links{display:flex;align-items:center;font-weight:700;flex:1 1 0%;min-width:0;gap:18px;padding:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-padding-inline:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.home-header .home-page-links>a{display:inline-flex;flex:0 0 auto;align-items:center;min-height:44px;white-space:nowrap;font-size:14px}
.home-header .home-page-links>a:first-child{margin-inline-start:auto}
.home-header .home-page-links>a[aria-current="page"]{color:var(--green);box-shadow:inset 0 -2px var(--green)}
.home-header .yt{background:var(--ink);color:#fff;padding:11px 17px;border-radius:99px}
.home-header>.lang-switch{display:flex;position:static;flex:0 0 auto;align-items:center;margin-left:auto;white-space:nowrap;border:1px solid var(--line);border-radius:99px;padding:3px;background:#f7f9f8;gap:0}
.home-header .lang-switch a{display:inline-flex;align-items:center;min-height:44px;padding:6px 8px;border-radius:99px;font-size:14px;font-weight:700}
.home-header .lang-switch a.current{background:var(--green);color:#fff}
.home-header a:focus-visible{outline:3px solid #e99c00;outline-offset:1px}
#qnum,#summary{scroll-margin-top:150px}
@media(max-width:1200px){.home-header>.home-page-links{order:3;flex-basis:100%;border-top:1px solid var(--line)}}
@media(max-width:760px){header.home-header{padding:8px 12px;gap:6px 10px}.home-header>.brand{gap:8px;font-size:18px}.home-header .site-icon{width:32px;height:32px}}
@media(max-width:380px){#qnum,#summary{scroll-margin-top:210px}}
/* 長い翻訳でもタイトルや設定が画面幅からはみ出さないようにする。 */
.heading>div{min-width:0}.heading>.subtle{flex-shrink:0}.heading h1{overflow-wrap:anywhere}
.settings label{max-width:100%}.settings select{min-width:0;max-width:100%}
#cover p{max-width:90%}
/* スマートフォンでは、キューブを見ながら親指で回答できる密度にする。 */
@media(max-width:760px),(max-height:500px) and (orientation:landscape){
 header.home-header{position:static}
 main{padding:18px 12px max(24px,env(safe-area-inset-bottom))}
 .heading{gap:10px;align-items:center}.heading h1{font-size:22px;line-height:1.5}.heading .eyebrow{font-size:12px;margin-bottom:4px}
 .heading>.subtle{min-height:44px;padding:8px 10px;font-size:14px;max-width:110px}
 .intro{margin:6px 0 12px;line-height:1.6}.settings{gap:10px;padding:6px 0 14px}
 .settings label{flex:1 1 130px;display:flex;align-items:flex-start;flex-direction:column;gap:4px;font-size:14px;min-width:0}
 .settings select{width:100%;font-size:16px;min-height:44px;padding:8px 24px 8px 10px}.settingNote{font-size:12px;line-height:1.6}
 .workspace{grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
 .visual{padding:10px 12px;border-radius:12px;min-width:0}
 .questionBar{margin:0;min-height:28px}#qnum{font-size:13px}#clock{font-size:20px}
 .cubeWrap{min-height:0}#cube{height:180px;max-height:none}
 #cover{position:relative;min-height:210px;margin-top:-180px}#cover[hidden]{display:none!important}
 #cover h2{font-size:18px;line-height:1.5}.readyNumber{font-size:46px}#cover p{margin:8px 0;font-size:14px}#start{margin-top:6px}
 .rotation{gap:8px}.rotation button{flex:1;min-height:44px;padding:8px;font-size:15px}
 .visual>.small{font-size:12px;margin:6px 0;line-height:1.5}
 .session{margin-top:8px;padding-top:8px;gap:6px}.session span{font-size:12px;line-height:1.4}.session strong{font-size:17px;margin-top:3px}
 .answerPanel{min-width:0;padding:12px;border-radius:12px}
 .answerTitle{gap:6px;align-items:center}.answerTitle h2{font-size:18px;margin:0 0 10px}.answerTitle span{font-size:12px;margin:0 0 10px}
 #answers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
 .answerGroup{display:contents}.groupLabel{display:none}
 .answer{min-width:0;min-height:46px;font-size:18px;padding:6px 2px}
 .skip{min-height:44px;margin-top:10px;padding:9px;font-size:14px}
 #feedback{margin-top:12px;padding:10px;font-size:15px}#review{margin-top:12px;padding-top:4px}#review p{font-size:14px}
 #strips{gap:6px}.strip{padding:2px;gap:2px}.stripName{font-size:12px}
 #next{margin-top:12px;min-height:48px}#summary{padding:18px;margin-top:14px}
 #records{padding:14px}#records .recordHead{flex-wrap:wrap}#records th,#records td{padding:8px 5px}
 footer{line-height:1.7;margin:18px 0}
 body.practicing .visual{position:sticky;top:0;z-index:3;box-shadow:0 4px 12px #16233712;scroll-margin-top:4px}
 body.practicing .visual>.small{display:none}
 body.practicing .session{display:none}
 body.practicing #feedback,body.practicing #review{scroll-margin-top:280px}
 #qnum,#summary{scroll-margin-top:10px}
}
@media(max-width:360px){
 .home-header>.brand{font-size:16px}.home-header .lang-switch a{font-size:13px;padding:6px}
 .heading{align-items:flex-start}.heading h1{font-size:20px}.heading>.subtle{max-width:92px}
 .answer{min-height:44px}
}
@media(max-height:660px) and (max-width:760px){body.practicing #cube{height:145px}body.practicing #feedback,body.practicing #review{scroll-margin-top:245px}}
@media(max-height:500px) and (orientation:landscape){
 .workspace{grid-template-columns:minmax(240px,.9fr) minmax(0,1.1fr)}
 body.practicing .visual{top:8px}#cube{height:160px}#cover{margin-top:-160px}
 body.practicing #feedback,body.practicing #review{scroll-margin-top:8px}
}

/* 横スワイプはキューブ操作、縦方向とピンチは標準のスクロール・拡大に使う。 */
#cube{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
body.practicing #cube{cursor:grab}body.practicing #cube:active{cursor:grabbing}

/* 回答から次問までの移動を短くする。説明は省略せず、ボタンと余白を整理。 */
.answerPanel{padding:16px}
.answerTitle h2,.answerTitle span{margin-bottom:10px}
#answers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.answerGroup{display:contents}.groupLabel{display:none}
.answer{min-width:0;min-height:44px;padding:6px 2px}
.skip{margin-top:10px;padding:9px;min-height:44px}
#feedback{margin-top:10px;padding:8px 10px;line-height:1.5}
#next{margin-top:10px;min-height:44px;padding:10px 16px}
#review{margin-top:12px;padding-top:8px}
#review p{margin:6px 0;line-height:1.5}
#review .reviewLabel{margin-top:0}
#strips{gap:8px;max-width:360px;margin-inline:auto}
.stripName{margin-top:3px}
#review .small{font-size:12px}
/* 対象のパームが分かる、押しやすい復習ボタン。 */
#reviewLink{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:10px;padding:10px 14px;border:1px solid #c5d0df;border-radius:8px;background:#e7edf6;color:#162337;font-size:1rem;font-weight:bold;line-height:1.5;text-align:center;text-decoration:none;overflow-wrap:anywhere;touch-action:manipulation}
#reviewLink:hover{background:#d8e3f1}
@media(min-width:761px) and (min-height:501px){
 main{padding-top:22px}.intro{margin-bottom:12px}.settings{padding-bottom:16px}
}