:root{--ink:#214d48;--muted:#536963;--paper:#f7f5ec;--line:#d4dfd3;--green:#e5eddf;--accent:#24685a;--white:#fffef9;--pink:#edc9cc;--gold:#f0ddae;--blue:#cbdfea;--mint:#cce4d8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 "Yu Gothic",Meiryo,sans-serif}button,input{font:inherit}button{cursor:pointer;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:10px 22px;background:var(--white);color:var(--ink);font-weight:700}button:hover{border-color:var(--accent);background:#edf3e8}button:focus-visible,input:focus-visible{outline:3px solid #b37b22;outline-offset:4px}.primary{background:var(--accent);border-color:var(--accent);color:white}.primary:hover{background:#185547;color:white}[hidden]{display:none!important}header{position:sticky;top:0;z-index:5;background:rgba(247,245,236,.98);border-bottom:1px solid var(--line)}.bar{max-width:1180px;min-height:76px;padding:12px 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;white-space:nowrap}.brand-mark{width:32px;height:32px;display:grid;place-items:center;border-radius:50% 50% 35% 50%;background:var(--accent);color:white;font-size:22px}.header-actions{display:flex;gap:12px}.header-note{font-size:16px;color:var(--muted)}main{max-width:1180px;margin:auto;padding:26px 24px 24px}h1,h2,p{margin:0}h1{font-size:34px;line-height:1.5;font-weight:700;letter-spacing:.025em}.eyebrow{font-size:16px;font-weight:700;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}.lead{color:var(--muted);margin-top:10px}.home-intro{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:25px}.home-badge{border-left:1px solid var(--line);padding:4px 0 4px 24px;min-width:210px}.home-badge strong{display:block;font-size:22px}.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.course{display:flex;gap:20px;align-items:center;text-align:left;padding:23px 24px;min-height:154px;position:relative;border-radius:18px;box-shadow:0 3px 0 #dfe5d9}.course-icon{width:65px;height:65px;flex-shrink:0;background:var(--green);border-radius:18px;display:grid;place-items:center}.course-icon svg{width:42px;height:42px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.course h2{font-size:23px;font-weight:700}.course p{font-size:17px;font-weight:400;color:var(--muted);margin:5px 0 8px}.course small{font-size:16px;font-weight:400}.arrow{margin-left:auto;font-size:27px;align-self:center}.home-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:24px;font-size:16px;color:var(--muted)}.practice{padding-top:16px}.practice-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px}.course-name{font-size:19px;font-weight:700}.progress-wrap{display:flex;align-items:center;gap:16px;min-width:240px;font-size:17px}.progress{width:140px;height:8px;border-radius:10px;background:#dce5d6;overflow:hidden}.progress span{display:block;height:100%;background:var(--accent);transition:width .25s}.exercise{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:20px}.question{border:1px solid var(--line);background:var(--white);border-radius:18px;padding:15px 26px;min-height:217px}.question-label{font-size:16px;color:var(--muted)}.word{font-size:35px;line-height:1.4;margin:1px 0;font-weight:700}.reading{font-size:18px;min-height:28px;color:var(--muted)}.romaji{font:700 32px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.065em;overflow-wrap:anywhere;min-height:46px;margin:4px 0 5px;color:#596f67}.done-letter{color:#2b7360}.next-letter{background:#f5dfa7;color:#3d492e;border-radius:4px;border-bottom:3px solid #99752d}.typing-field{width:min(100%,410px);height:44px;border:1px solid #bacbbd;border-radius:9px;padding:7px 12px;font-size:17px;background:#fafbf6;color:var(--ink)}.typing-field::placeholder{color:#62766a;opacity:1}.next-card{border-radius:18px;background:var(--green);padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.next-caption{font-size:16px}.next-key{font:bold 53px/1.2 ui-monospace,Consolas,monospace;min-width:81px;height:78px;padding:6px 12px;background:var(--white);border:1px solid #afc2ad;border-bottom:5px solid #afc2ad;border-radius:12px;margin:8px 0}.finger-name{font-size:20px;font-weight:700}.next-note{font-size:15px;margin-top:3px;color:var(--muted)}.feedback-row{min-height:57px;display:flex;align-items:center;gap:20px;justify-content:space-between;padding:7px 4px}.feedback{font-size:18px;font-weight:700}.feedback.mistake{color:#95542e}.feedback.ime{color:#8a502b}.continue{min-height:44px;padding:6px 20px;white-space:nowrap}.guides{display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:20px}.keyboard-panel{background:#ebeee3;border:1px solid var(--line);border-radius:16px;padding:14px 14px 10px;min-width:0}.keyboard{display:flex;flex-direction:column;gap:6px;max-width:810px;margin:auto}.key-row{display:flex;gap:5px;justify-content:center}.key{flex:1;max-width:55px;height:42px;min-width:0;border-radius:7px;border:1px solid #b8c8bc;border-bottom:3px solid #b8c8bc;display:grid;place-items:center;font:700 20px/1 ui-monospace,Consolas,monospace;color:#2e5049;position:relative}.key[data-finger$="pinky"]{background:var(--pink)}.key[data-finger$="ring"]{background:var(--gold)}.key[data-finger$="middle"]{background:var(--blue)}.key[data-finger$="index"]{background:var(--mint)}.key.home:after{content:"";position:absolute;width:11px;height:2px;border-radius:2px;background:currentColor;bottom:4px}.key.active{background:var(--accent);color:white;border-color:#174b3f;outline:3px solid #b08835;outline-offset:1px;z-index:1}.keyboard-tip{text-align:center;font-size:16px;margin-top:9px;color:var(--muted)}.hands-panel{border:1px solid var(--line);border-radius:16px;background:var(--white);padding:10px 12px;text-align:center}.hands-title{font-size:16px;font-weight:700}.hands{display:flex;justify-content:center;gap:12px;margin-top:4px}.hand{width:102px}.hand svg{display:block;width:100%;height:108px;overflow:visible}.hand figcaption{font-size:16px}.hand{margin:0}.palm{fill:#ebeade;stroke:#a6b9ab;stroke-width:1.5}.digit{stroke:#91a99a;stroke-width:1.5;fill:#cce4d8}.digit[data-finger$="pinky"]{fill:var(--pink)}.digit[data-finger$="ring"]{fill:var(--gold)}.digit[data-finger$="middle"]{fill:var(--blue)}.digit.active{fill:var(--accent);stroke:#a47728;stroke-width:4}.hand-tip{font-size:14px;color:var(--muted);margin-top:5px}.practice-foot{font-size:15px;color:var(--muted);margin-top:9px;text-align:center}.result{max-width:750px;text-align:center;margin:30px auto}.result-emblem{font-size:42px;line-height:1;background:var(--green);width:85px;height:85px;display:grid;place-items:center;border-radius:50%;margin:0 auto 22px}.result h1{font-size:32px}.result-summary{display:flex;justify-content:center;gap:40px;margin:24px auto;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--white)}.result-number{font-size:36px;font-weight:700}.result-number small{font-size:18px;margin-left:5px}.result-actions{display:flex;justify-content:center;gap:16px;margin:24px 0}.save-note{font-size:16px;color:var(--muted);margin-top:12px}dialog{border:1px solid var(--line);border-radius:22px;padding:30px;max-width:500px;width:calc(100% - 32px);color:var(--ink);background:var(--paper);box-shadow:0 20px 80px #17382b33}dialog::backdrop{background:#193b346b}dialog h2{font-size:27px;margin-bottom:12px}dialog p{font-size:18px;color:var(--muted)}.dialog-actions{display:flex;flex-direction:column;gap:12px;margin-top:25px}.help-body{margin-top:16px}.help-body p+p{margin-top:12px}@media(min-width:900px) and (max-height:680px){main{padding-top:19px}.practice{padding-top:12px}.bar{min-height:70px;padding-top:10px;padding-bottom:10px}.practice-top{margin-bottom:10px}.question{min-height:207px;padding-top:11px;padding-bottom:11px}.feedback-row{min-height:53px}.key{height:39px}.keyboard-panel{padding-top:11px;padding-bottom:9px}.practice-foot{margin-top:7px}.home-intro{margin-bottom:19px}.course{min-height:145px;padding-top:19px;padding-bottom:19px}.home-footer{margin-top:20px}}@media(max-width:899px){.bar{padding:12px 18px}.header-note{display:none}main{padding:22px 18px}.exercise,.guides{grid-template-columns:minmax(0,1fr) 210px;gap:18px}.next-card,.hands-panel{padding-left:8px;padding-right:8px}.key-row{gap:3px}.key{font-size:18px;height:38px}.keyboard-panel{padding:12px 8px}.hand{width:85px}.hand svg{height:96px}.course{padding:20px 18px;gap:14px}.course-icon{width:50px;height:55px}.course h2{font-size:21px}.home-badge{display:none}}@media(max-width:680px){body{font-size:17px}.bar{gap:10px;flex-wrap:wrap;min-height:70px}.brand{font-size:19px}.header-actions{gap:8px}.header-actions button{padding:9px 12px;font-size:16px}.courses{grid-template-columns:1fr;gap:18px}h1{font-size:28px}.course{min-height:132px}.home-intro{margin-bottom:22px}.home-footer{display:block}.home-footer p+p{margin-top:10px}.practice-top{align-items:flex-start;flex-wrap:wrap;gap:8px}.progress-wrap{min-width:0;width:100%;justify-content:space-between}.progress{flex:1;max-width:180px}.exercise{grid-template-columns:1fr}.question{padding:16px 18px;min-height:210px}.word{font-size:31px}.romaji{font-size:28px}.next-card{flex-direction:row;gap:16px;padding:12px;justify-content:flex-start;text-align:left}.next-key{font-size:34px;height:55px;min-width:58px;margin:0;order:-1}.next-caption{display:none}.next-note{display:none}.feedback-row{align-items:flex-start;flex-direction:column;gap:10px;padding:14px 0}.guides{grid-template-columns:1fr}.keyboard-panel{overflow-x:auto;padding:12px}.keyboard{min-width:520px}.keyboard-tip{min-width:480px}.hands-panel{padding:12px}.hands{gap:30px}.hand{width:108px}.hand svg{height:112px}.hand-tip{font-size:15px}.practice-foot{text-align:left}.result{margin:20px auto}.result h1{font-size:27px}.result-summary{gap:22px;padding:18px 12px}.result-actions{flex-direction:column}.result-number{font-size:31px}.course-icon{width:54px}.keyboard-scroll-note{display:block!important;font-size:15px;margin-bottom:8px;color:var(--muted)}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* 左手（T・G・Bまで）と右手の担当を区切る */
.key-row .key:nth-child(6){margin-left:12px}
.key-row .key:nth-child(6)::before{content:"";position:absolute;left:-10px;top:-4px;bottom:-7px;border-left:3px solid #789388;pointer-events:none}

/* 続けるための記録と文字の読みやすさ */
body{font-weight:600}.course p,.course small{font-weight:600;font-size:18px}.header-note,.eyebrow,.home-footer,.question-label,.next-caption,.next-note,.keyboard-tip,.hands-title,.hand figcaption,.practice-foot,.save-note,.typing-field,.progress-wrap{font-size:18px}.hand-tip{font-size:16px}.header-actions{gap:10px}.header-actions button{padding:10px 16px}.header-note{white-space:nowrap}.course{min-height:151px}.course p{margin:4px 0}.question{min-height:222px}.question-label{line-height:1.45}.romaji{letter-spacing:.03em}.next-note{font-size:16px}.practice-foot{margin-top:7px}.records-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.records-top h1{font-size:30px}.level-panel{background:var(--green);border:1px solid var(--line);border-radius:18px;padding:20px 24px;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.level-heading{font-size:25px;font-weight:800}.level-track{height:12px;background:#cfddc9;border-radius:10px;margin:11px 0;overflow:hidden}.level-track span{display:block;height:100%;background:var(--accent)}.level-caption{font-size:17px;color:var(--muted)}.record-totals{align-self:center;line-height:1.85}.record-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.record-panel{background:var(--white);border:1px solid var(--line);padding:22px;border-radius:18px;min-width:0}.record-panel h2{font-size:23px;margin-bottom:12px}.record-panel p{font-size:17px}.month-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0}.month-nav button{padding:7px 14px}.month-title{font-size:21px}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.weekday{text-align:center;font-size:17px;padding:4px}.weekday:first-child{color:#9b5448}.weekday:nth-child(7){color:#376b8a}.calendar-day{padding:5px 0;min-height:50px;border-radius:9px;font-size:18px;position:relative}.calendar-day.practiced{background:#e4eddf;border-color:#76a589}.calendar-day.practiced:after{content:'★';display:block;color:var(--accent);font-size:11px;line-height:1;margin:1px auto 0}.calendar-day[aria-pressed="true"]{background:var(--accent);color:white;border-color:var(--accent)}.calendar-day[aria-pressed="true"]:after{color:white}.calendar-day.today{outline:2px solid #b18b46;outline-offset:1px}.calendar-caption{margin:14px 0;color:var(--muted);font-size:16px!important}.best-list{display:grid;gap:12px;margin-top:16px}.best-item{border-top:1px solid var(--line);padding-top:12px}.best-item strong{display:block;margin-bottom:5px;font-size:19px}.best-values{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--accent)}.best-date{font-size:15px;color:var(--muted)}.history-panel{margin-top:24px}.history-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}.history-head h2{margin:0}.history-list{display:grid;gap:12px}.history-item{border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px;background:#fafbf5}.history-title{font-size:19px}.history-time{font-size:16px;color:var(--muted);margin-top:4px}.history-stats{font-size:17px;line-height:1.8}.history-state{display:inline-block;background:var(--green);border-radius:6px;padding:1px 7px;font-size:16px;margin-left:6px}.records-note{font-size:17px;color:var(--muted);margin-top:20px;line-height:1.7}.storage-notice{background:#fff0d7;border:1px solid #c69b4c;border-radius:12px;padding:12px 16px;margin:0 0 18px;color:#714c1f;font-size:17px}.records-filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.records-filters select{font:inherit;font-size:18px;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--white)}.count-options{display:flex;gap:12px;margin:20px 0;padding:0;border:0}.count-options legend{font-size:18px;margin-bottom:12px}.count-choice{flex:1;position:relative}.count-choice input{position:absolute;opacity:0}.count-choice span{display:block;text-align:center;padding:16px 8px;border:2px solid var(--line);border-radius:12px;cursor:pointer;font-size:22px}.count-choice input:checked+span{border-color:var(--accent);background:var(--green);box-shadow:inset 0 0 0 1px var(--accent)}.count-choice input:focus-visible+span{outline:3px solid #b37b22;outline-offset:3px}.setup-note{font-size:17px}.result-metrics{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin:18px 0}.result-metrics strong{font-size:24px}.result-level{border-radius:12px;background:var(--green);padding:14px;margin-top:18px}.result{max-width:820px}.result-emblem{margin-bottom:15px}.result-summary{margin:20px auto;padding:18px}.records-empty{color:var(--muted);padding:12px 0}.history-more{margin-top:16px}.record-return{display:none}.record-return.visible{display:inline-block}
@media(min-width:900px) and (max-height:680px){.question{min-height:213px;padding-top:10px;padding-bottom:10px}.question-label{font-size:18px}.feedback-row{min-height:55px}.keyboard-panel{padding-top:10px}.keyboard-tip{margin-top:7px}.practice-foot{font-size:17px}.hand-tip{font-size:16px}.home-intro{margin-bottom:18px}.course{min-height:147px;padding-top:17px;padding-bottom:17px}.home-footer{margin-top:16px}}
@media(max-width:1120px){.header-note{display:none}}@media(max-width:899px){.header-actions button{font-size:17px;padding:9px 12px}.record-columns{grid-template-columns:1fr}.level-panel{grid-template-columns:1fr;gap:15px}.hands-title{font-size:17px}.keyboard-tip{font-size:17px}}
@media(max-width:680px){.bar{gap:10px}.header-actions{width:100%;flex-wrap:wrap;gap:8px}.header-actions button{flex:1;white-space:nowrap;font-size:16px;padding:9px}.header-actions .record-return{flex-basis:100%}.course p,.course small{font-size:18px}.header-note{display:none}.question{min-height:219px}.home-intro h1{font-size:27px}.records-top h1{font-size:27px}.level-panel{padding:18px}.record-panel{padding:16px}.record-columns{gap:18px}.calendar{gap:4px}.calendar-day{min-height:44px;font-size:17px}.history-item{grid-template-columns:1fr;gap:8px}.history-stats{display:flex;gap:18px;flex-wrap:wrap}.result-metrics{gap:18px}.result-summary{gap:20px}.practice-foot{font-size:17px}.next-note{display:none}.month-title{font-size:19px}.month-nav button{padding:8px 11px}.keyboard-tip{font-size:18px}.course-icon{width:49px}.course{padding:18px 15px}}


@media(min-width:900px) and (max-height:700px){.bar{min-height:62px;padding-top:7px;padding-bottom:7px}main{padding-top:8px;padding-bottom:12px}.practice{padding-top:0}.practice-top{margin-bottom:8px;line-height:1.3}.course-name{line-height:1.3}.question{padding:7px 22px;min-height:213px}.question-label{line-height:1.3}.word{font-size:34px;line-height:1.2}.reading{line-height:1.4}.romaji{line-height:1.2;min-height:0;margin:4px 0 5px}.feedback-row{padding:4px;min-height:52px}.keyboard-panel{padding:9px 12px}.key{height:39px}.keyboard-tip{line-height:1.3;margin-top:7px}.hands-panel{padding:8px 10px}.hands-title,.hand figcaption,.hand-tip{line-height:1.2}.hands{margin-top:3px}.hand svg{height:108px}.hand-tip{margin-top:3px}.practice-foot{margin-top:5px;line-height:1.3}}
/* 結果画面は練習画面と分け、読み返すための余白を確保する */
.result{line-height:1.85;letter-spacing:.035em}
.result .eyebrow{margin-bottom:14px}
.result h1{line-height:1.6;margin:0 0 14px}
.result .lead{margin-top:0;line-height:1.9}
.result .result-summary{margin:28px auto;padding:26px 28px;gap:clamp(24px,6vw,72px)}
.result-summary .result-number{line-height:1.4}
.result-summary .result-number small{margin-left:8px}
.result-summary p{margin-top:10px;line-height:1.7}
.result .result-metrics{margin:28px 0;gap:20px 48px}
.result-metrics p{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap;line-height:1.8}
.result .result-level{padding:18px 22px;margin:28px 0;line-height:1.9}
.result-level+p{line-height:2;margin:0}
.result .result-actions{gap:20px;margin:32px 0 24px;flex-wrap:wrap}
.result .result-actions button{line-height:1.7;padding:12px 22px}
.result .save-note{line-height:1.9;margin-top:24px}
@media(max-width:680px){.result .result-summary{padding:22px 14px}.result .result-metrics{gap:18px 26px}.result .result-level{padding:18px 16px}.result .result-actions{gap:16px}}
/* 履歴はコース名と数値を主役にし、日時・項目名・補足を穏やかにする */
#records .history-item{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.1fr);gap:20px 26px;padding:20px 22px;align-items:start}
#records .history-title{font-size:19px;font-weight:700;line-height:1.7}
#records .history-time{font-size:16px;font-weight:500;line-height:1.8;margin-top:9px;color:#536963}
#records .history-state{font-size:14px;font-weight:500;vertical-align:middle;padding:2px 8px;margin-left:8px}
#records .history-stats{display:grid;gap:10px}
#records .history-stats p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;line-height:1.7;margin:0}
#records .history-label{font-size:16px;font-weight:500;color:#536963}
#records .history-value{font-size:20px;font-weight:700;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
#records .records-note{font-weight:500;font-size:17px;line-height:1.95;letter-spacing:.025em;margin-top:24px}
#records .history-head button{font-size:17px;font-weight:600}
@media(max-width:899px){#records .history-item{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}#records .history-item>div:first-child{grid-column:1/-1}}
@media(max-width:480px){#records .history-item{padding:18px 16px;gap:18px 14px}#records .history-stats p{display:block}#records .history-label,#records .history-value{display:block}#records .history-label{font-size:16px}#records .history-value{font-size:18px}}
@media(max-width:360px){#records .history-item{grid-template-columns:1fr}#records .history-stats p{display:flex;justify-content:space-between;gap:4px 10px}}

/* 日本語入力は、IME確定のEnterと次問へ進むEnterを分ける */
.mode-switch{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px}.mode-switch button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:white}.mode-switch p{font-size:17px;line-height:1.5;font-weight:600;color:var(--muted)}.mode-switch button{min-width:170px}.japanese-symbol{font-size:32px;font-weight:700}.japanese-label{display:block;font-size:18px;margin-top:15px;margin-bottom:6px}.japanese-input{width:100%;border:2px solid #a8bdad;border-radius:10px;background:#fffef9;font:600 28px/1.4 "Yu Gothic",Meiryo,sans-serif;color:var(--ink);padding:11px 14px;min-height:60px}.japanese-input[readonly]{background:var(--green);border-color:var(--accent)}.japanese-input-note{font-size:17px;color:var(--muted);line-height:1.5;margin-top:9px}.japanese-help{background:var(--green);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column;gap:16px;justify-content:center}.japanese-mode-label{font-size:19px;font-weight:800}.japanese-help h2{font-size:25px;line-height:1.4}.japanese-help p{font-size:18px}.japanese-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;padding:0;margin:8px 0 0}.japanese-steps li{display:flex;align-items:center;gap:12px;padding:17px 18px;background:var(--white);border:1px solid var(--line);border-radius:14px;font-size:18px}.japanese-steps span{flex-shrink:0;display:grid;place-items:center;border-radius:50%;width:33px;height:33px;background:var(--green);font-size:18px}.practice.japanese-practice .question{padding:20px 26px;min-height:285px}.practice.japanese-practice .word{font-size:38px;line-height:1.35;margin:5px 0}.practice.japanese-practice .feedback-row{padding:12px 4px;min-height:70px}.practice.japanese-practice .feedback{flex:1}.practice.japanese-practice .reading{font-size:21px}.setup-mode-note{font-size:18px!important;font-weight:700;color:var(--accent);margin:0 0 14px!important}.japanese-record-summary{background:var(--green);border:1px solid var(--line);border-radius:18px;padding:20px 24px;margin-bottom:24px}.japanese-record-summary h2{font-size:25px}.japanese-record-summary p{margin-top:10px;font-size:18px}.record-mode-switch{margin-top:-4px}.record-mode-switch button{min-width:180px}button:disabled{cursor:default;opacity:.55}
@media(min-width:900px) and (max-height:700px){.practice.japanese-practice .question{padding:14px 24px;min-height:270px}.practice.japanese-practice .word{font-size:36px}.japanese-help{padding:18px 20px;gap:12px}.japanese-steps li{padding:14px 16px}}
@media(max-width:680px){.mode-switch{gap:10px;margin-bottom:18px}.mode-switch button{min-width:0;flex:1;padding:10px 12px}.mode-switch p{flex-basis:100%;font-size:17px}.japanese-help{padding:16px 18px;gap:8px}.japanese-help p:last-child{display:none}.japanese-steps{grid-template-columns:1fr;gap:14px}.practice.japanese-practice .question{padding:16px 18px;min-height:290px}.practice.japanese-practice .word{font-size:32px}.japanese-input{font-size:26px}.practice.japanese-practice .feedback-row{gap:12px}.japanese-record-summary{padding:18px}.japanese-record-summary h2{font-size:23px}.record-mode-switch button{min-width:0}}
/* 日本語入力でも、ホームポジションと指の担当を見ながら練習する */
.practice.japanese-practice #japanese-steps{display:none}
.practice.japanese-practice .question{min-height:245px;padding:14px 24px}
.practice.japanese-practice .japanese-label{margin-top:8px}
.practice.japanese-practice .japanese-input{min-height:52px;padding:8px 12px}
.practice.japanese-practice .japanese-input-note{margin-top:10px}
.practice.japanese-practice .feedback-row{min-height:58px;padding:7px 4px}
@media(min-width:900px) and (max-height:700px){
.practice.japanese-practice .question{min-height:236px;padding:9px 22px}
.practice.japanese-practice .word{font-size:34px;line-height:1.2}
.practice.japanese-practice .japanese-label{margin-top:4px;margin-bottom:3px}
.practice.japanese-practice .japanese-input{min-height:48px;padding:5px 12px}
.practice.japanese-practice .japanese-input-note{font-size:17px;line-height:1.35;margin-top:10px}
.practice.japanese-practice .feedback-row{min-height:52px;padding:4px}
.practice.japanese-practice .japanese-help{padding:12px 18px;gap:8px}
}
/* コース選択は見出し・操作・各コースの間に余白を置く */
#home{padding-top:16px;padding-bottom:16px}
#home .home-intro{margin-bottom:36px;gap:36px}
#home .eyebrow{margin-bottom:16px}
#home .lead{margin-top:18px;line-height:1.85}
#home .home-badge{padding:10px 0 10px 28px}
#home .home-badge span{display:block;margin-top:12px}
#home .mode-switch{gap:20px;margin-bottom:32px}
#home .mode-switch p{margin-left:8px;line-height:1.85}
#home .courses{gap:28px}
#home .course{padding:28px;gap:24px;min-height:176px}
#home .course h2{line-height:1.5}
#home .course p{margin:12px 0;line-height:1.75}
#home .course small{display:block;line-height:1.7}
#home .home-footer{margin-top:32px;line-height:1.85}
@media(max-width:680px){
#home{padding-top:12px}
#home .home-intro{margin-bottom:28px}
#home .mode-switch{gap:14px;margin-bottom:28px}
#home .mode-switch p{margin:4px 0 0}
#home .courses{gap:24px}
#home .course{padding:24px 18px;gap:18px}
#home .home-footer{margin-top:28px}
}

/* hibiya toolsからも行き来できる入口 */
.tools-back{display:inline-flex;align-items:center;min-height:48px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;color:var(--accent);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}.tools-back:hover{border-color:var(--accent);background:#edf3e8}.tools-back:focus-visible{outline:3px solid #b37b22;outline-offset:4px}@media(max-width:680px){.tools-back{width:100%;justify-content:center;order:10}.header-actions{width:100%;flex-wrap:wrap}.header-actions button{flex:1}}
/* ロゴはホームへの入口。案内の閲覧中も戻る操作を同じ位置に置く。 */
button.brand{padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none;min-height:48px;flex-shrink:0;text-align:left}button.brand:hover{background:#e9f1bf}.header-note{display:none}.header-actions{gap:8px}.header-actions button{padding:10px 14px}.guide-page{padding:22px 0 30px;line-height:1.85}.guide-intro{margin-bottom:36px}.guide-intro h1{font-size:32px;line-height:1.5;margin:10px 0 18px}.guide-intro>p:last-child{font-size:20px;font-weight:500;line-height:1.85;color:var(--muted)}.guide-section{margin-bottom:32px;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:28px}.guide-section-heading{display:flex;align-items:center;gap:14px;margin-bottom:22px}.guide-section-number{color:var(--accent);font-size:18px;font-weight:700;letter-spacing:.04em}.guide-section h2{font-size:25px;line-height:1.5}.guide-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.guide-tip{background:#f0f3e9;border-radius:14px;padding:22px}.guide-tip h3{font-size:21px;line-height:1.6;margin:0 0 12px}.guide-tip p,.guide-section>p{font-size:18px;font-weight:500;line-height:1.9}.guide-page kbd{display:inline-grid;place-items:center;min-width:28px;padding:0 6px;background:var(--white);border:1px solid #b0c3b2;border-bottom:3px solid #b0c3b2;border-radius:5px;font:700 19px/1.5 ui-monospace,Consolas,monospace}.guide-practice-loop{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.guide-practice-loop strong{font-size:21px}.guide-practice-loop p{font-size:18px;font-weight:500;margin-top:10px;line-height:1.9}.guide-lead{margin-bottom:24px}.guide-lead strong{font-size:22px;font-weight:700}.guide-note{font-size:17px!important;font-weight:500!important;color:var(--muted);margin-top:18px;line-height:1.95!important}.guide-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.guide-small-section{margin-bottom:0}.guide-reference{font-size:17px;font-weight:500;color:var(--muted);margin-top:30px;overflow-wrap:anywhere}.guide-reference a{color:var(--accent);text-underline-offset:4px}.guide-reference a:focus-visible{outline:3px solid #b37b22;outline-offset:4px}.guide-actions{margin-top:26px}.guide-actions button{min-width:230px}
@media(max-width:850px){.bar{flex-wrap:wrap}.header-actions{margin-left:auto}.guide-tips,.guide-bottom-grid{grid-template-columns:1fr}.guide-section{padding:24px}.guide-page{padding-top:18px}}
@media(max-width:680px){button.brand{font-size:19px}.header-actions button{padding:9px 11px;font-size:16px}.guide-intro{margin-bottom:28px}.guide-intro h1{font-size:27px}.guide-intro>p:last-child{font-size:18px}.guide-section{padding:20px 16px;margin-bottom:24px}.guide-section h2{font-size:22px}.guide-section-heading{gap:10px;align-items:baseline;margin-bottom:18px}.guide-tip{padding:18px 16px}.guide-tip h3{font-size:20px}.guide-tips{gap:18px}.guide-target-table th,.guide-target-table td{padding:14px 12px;font-size:20px}.guide-target-table thead th{font-size:17px}.guide-bottom-grid{gap:0}.guide-practice-loop p,.guide-section>p{font-size:18px}.guide-actions button{width:100%;min-width:0}}

.guide-position-map{margin:0 0 28px;padding:24px;background:#f3f5ed;border:1px solid var(--line);border-radius:16px}.guide-map-heading h3{font-size:23px;margin:0 0 12px}.guide-map-heading p{font-size:18px;font-weight:600;line-height:1.8}.guide-map-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin:24px 0}.guide-map-half{margin:0;min-width:0}.guide-map-half figcaption{display:flex;align-items:baseline;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}.guide-map-half figcaption strong{font-size:23px}.guide-map-half figcaption span{font-size:18px}.guide-map-svg{display:block;width:100%;max-width:370px;height:auto;margin:auto;overflow:visible}.guide-map-svg text{fill:var(--ink);font:700 26px ui-monospace,Consolas,monospace}.guide-map-svg .guide-map-space{font-size:24px;font-family:"Yu Gothic",Meiryo,sans-serif}.guide-map-svg .guide-map-finger-letter{font-size:22px}.guide-map-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:18px;font-size:18px}.guide-map-legend span{display:flex;align-items:center;gap:7px;white-space:nowrap}.guide-map-legend i{display:inline-block;width:20px;height:20px;border:1px solid #91a99a;border-radius:5px}.guide-map-caption{padding-top:22px;border-top:1px solid var(--line);font-size:18px;line-height:1.9}.guide-target-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.guide-target-option{background:#f0f3e9;border-radius:14px;padding:22px}.guide-target-option h3{font-size:22px;margin:0 0 14px;line-height:1.6}.guide-target-option p{font-size:18px;line-height:1.9;font-weight:500}.guide-target-example{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:14px}.guide-target-example>strong{font-size:21px}.guide-target-example>p{font-size:19px;line-height:1.9;margin-top:12px}.guide-target-example p strong{font-size:22px}
@media(max-width:850px){.guide-map-pair,.guide-target-options{grid-template-columns:1fr}.guide-map-pair{gap:32px}.guide-map-half+.guide-map-half{padding-top:28px;border-top:1px solid var(--line)}}
@media(max-width:680px){.guide-position-map{padding:16px 10px}.guide-map-heading h3{font-size:21px}.guide-map-half figcaption{gap:6px}.guide-map-half figcaption span{width:100%;text-align:center}.guide-map-legend{gap:10px 14px}.guide-target-option,.guide-target-example{padding:20px 16px}.guide-map-caption{font-size:17px}}

textarea.japanese-input{display:block;resize:none;overflow:auto;box-sizing:border-box}.practice.sentence-practice .word{font-size:28px;line-height:1.5;margin:12px 0}.practice.sentence-practice .reading{font-size:22px;line-height:1.65;margin:12px 0;overflow-wrap:anywhere}.practice.sentence-practice .question{padding:22px 26px}.practice.sentence-practice .japanese-input{font-size:26px;line-height:1.5;min-height:142px;overflow-wrap:anywhere}.practice.sentence-practice .japanese-input-note{line-height:1.7}.graduation-mark{display:block;font-size:18px;font-weight:700;color:var(--accent);margin-top:12px}.course .graduation-mark{padding-top:10px;border-top:1px solid var(--line)}@media(max-width:680px){.practice.sentence-practice .question{padding:20px 18px}.practice.sentence-practice .word{font-size:27px}.practice.sentence-practice .japanese-input{font-size:25px;min-height:190px}}

textarea.japanese-input:focus-visible{outline:3px solid #b37b22;outline-offset:4px}
@media(min-width:900px) and (max-height:850px){.practice.sentence-practice .question{padding:10px 22px}.practice.sentence-practice .word{margin:5px 0}.practice.sentence-practice .reading{line-height:1.5;margin:5px 0}.practice.sentence-practice .japanese-label{margin-top:8px;margin-bottom:5px}.practice.sentence-practice .japanese-input{height:96px;min-height:96px;padding:6px 12px}.practice.sentence-practice .japanese-input-note{margin-top:8px;line-height:1.5}.practice.sentence-practice .feedback-row{min-height:52px;padding:6px 4px}}

.sentence-stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}.sentence-stage{display:flex;flex-direction:column;gap:4px;padding:12px 8px;border:1px solid #bdccbf;border-radius:10px;background:var(--white);text-align:center;color:var(--muted)}.sentence-stage>span{font-size:16px;font-weight:600;white-space:nowrap}.sentence-stage strong{font-size:23px;line-height:1.3;color:var(--ink)}.sentence-stage.achieved{background:#d7e9d9;border-color:#628d72}.sentence-stage.achieved>span{color:var(--ink)}.sentence-stage-summary,.sentence-stage-next{display:block;font-size:17px;line-height:1.8}.sentence-stage-summary{font-weight:500;color:var(--muted)}.sentence-stage-next{margin-top:10px;font-size:19px;font-weight:700}.sentence-summary{margin-top:22px;padding-top:20px;border-top:1px solid #b8cbb9}.sentence-summary h3{font-size:22px;margin:0}.sentence-summary .sentence-stage-grid{max-width:480px}.sentence-result-stages{padding:22px 26px;margin:24px auto;border:1px solid var(--line);border-radius:16px;background:var(--white);max-width:640px;text-align:left}.course .graduation-mark{max-width:430px}.course:has(#graduation-course-badge){align-items:flex-start;grid-column:1/-1}.course:has(#graduation-course-badge)>span:nth-child(2){flex:1}.course:has(#graduation-course-badge) .course-icon{margin-top:8px}.course:has(#graduation-course-badge) .arrow{align-self:flex-start;margin-top:8px}@media(max-width:680px){.course:has(#graduation-course-badge){gap:12px;flex-wrap:wrap}.course:has(#graduation-course-badge) .course-icon{display:none}.course:has(#graduation-course-badge) .arrow{display:none}.sentence-stage-grid{gap:8px}.sentence-stage{padding:11px 4px}.sentence-result-stages{padding:18px 14px}}

.sentence-count-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.sentence-count-card{display:block;min-width:0;padding:18px;background:var(--white);border:1px solid var(--line);border-radius:13px}.sentence-count-title{display:block;font-size:20px;line-height:1.6}.course .graduation-mark{max-width:none;padding-top:20px;margin-top:20px}.sentence-summary .sentence-stage-grid{max-width:none}.sentence-setup .count-choice span{font-size:20px;overflow-wrap:anywhere}.sentence-setup .count-options{gap:10px}.sentence-setup .setup-mode-note{white-space:pre-line}.sentence-count-card .sentence-stage-grid{gap:7px}.sentence-count-card .sentence-stage{padding:11px 3px}.sentence-count-card .sentence-stage-summary{font-size:16px}.sentence-count-card .sentence-stage-next{font-size:18px}@media(max-width:1000px){.sentence-count-grid{grid-template-columns:1fr;gap:18px}.sentence-count-card{padding:18px}.sentence-count-card .sentence-stage-grid{max-width:430px}}

@media(max-width:680px){.sentence-setup .count-options{flex-direction:column;gap:10px}.sentence-setup .count-choice{width:100%}.sentence-setup .count-choice span{padding:11px 8px;line-height:1.5;white-space:nowrap}}

.sentence-setup .count-options,.sentence-setup .count-choice{min-width:0;min-inline-size:0}.sentence-setup .count-choice span{width:100%;min-width:0}@media(max-width:360px){dialog.sentence-setup{padding:22px 18px}.sentence-setup .count-choice span{font-size:18px;padding:11px 6px}}

/* 明るさを保ち、操作だけを黒で引き締める共通カラーテーマ */
:root{--ink:#2b3550;--muted:#61697a;--paper:#fff;--line:#d9dce5;--green:#ececf6;--accent:#5866a6;--white:#fff;--pink:#f0dfe7;--gold:#eee4c8;--blue:#dfe8f3;--mint:#cce4d8;--coral:#b85f72;--sun:#c7a354;--sky:#e8edf5}
body{background:var(--paper)}
header{background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(43,53,80,.08);backdrop-filter:blur(10px)}
.brand-mark{background:#202124;box-shadow:0 3px 0 #d2d3d5}
.eyebrow{color:#a7566a}.home-badge{border-left-color:#c5c9dd}.home-badge strong{color:#5866a6}
button{border-color:#a6c400;background:#dfff38;box-shadow:0 3px 0 #bfd32d}.primary{background:#202124;border-color:#202124;color:#fff;box-shadow:0 3px 0 #b9bbbf}.primary:hover{background:#383a3f;color:#fff}button:hover{background:#cfee24;border-color:#8fab00}button:focus-visible,input:focus-visible{outline-color:#202124}
.mode-switch button[aria-pressed="true"]{background:#202124;border-color:#202124;color:#fff;box-shadow:0 3px 0 #b9bbbf}
.digit{fill:var(--mint)}.key.active{background:#24685a;border-color:#174b3f}.digit.active{fill:#24685a}
.course{border-color:#dfe1e8;box-shadow:0 5px 0 rgba(65,73,105,.10);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.course:hover{transform:translateY(-2px);box-shadow:0 8px 0 rgba(65,73,105,.12)}
.courses .course:nth-child(1){background:#faf1f4;border-color:#e6d2da}.courses .course:nth-child(1) .course-icon{background:#f1dde4}.courses .course:nth-child(1) .course-icon svg,.courses .course:nth-child(1) .arrow{stroke:#a7566a;color:#a7566a}
.courses .course:nth-child(2){background:#f2f0f8;border-color:#d9d4e8}.courses .course:nth-child(2) .course-icon{background:#e4e0f1}.courses .course:nth-child(2) .course-icon svg,.courses .course:nth-child(2) .arrow{stroke:#685c93;color:#685c93}
.courses .course:nth-child(3){background:#f8f5ed;border-color:#e6dec9}.courses .course:nth-child(3) .course-icon{background:#eee5cd}.courses .course:nth-child(3) .course-icon svg,.courses .course:nth-child(3) .arrow{stroke:#816b38;color:#816b38}
.courses .course:nth-child(4){background:#eef3f8;border-color:#d3dfe9}.courses .course:nth-child(4) .course-icon{background:#dce7f0}.courses .course:nth-child(4) .course-icon svg,.courses .course:nth-child(4) .arrow{stroke:#4f7089;color:#4f7089}
.question,.hands-panel,.result-summary{box-shadow:0 4px 0 rgba(65,73,105,.08)}.next-card{background:#f7fadf}.keyboard-panel{background:#f8faed}.result-emblem{background:#ebe3ce}.progress{background:#dddfea}.progress span{background:linear-gradient(90deg,#5866a6,#8490c2)}
.level-panel,.history-state{background:#e7f7ff}

#setup-dialog h2{padding-right:52px}
#setup-dialog .setup-close{position:absolute;top:12px;right:12px;width:48px;height:48px;min-height:48px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--ink);font-size:28px;line-height:1}
#setup-dialog .setup-close:hover{background:#f2f4f8}