:root{--green-deep:#1b4332;--green-mid:#2d6a4f;--green-soft:#eef4ef;--cream:#f8f7f4;--gold:#b08d3f;--ink:#1c211e;--muted:#6b7671;--line:#dfe4e0;--white:#fff;--radius:12px}*{box-sizing:border-box}body,html{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-size:17px;line-height:1.8;-webkit-text-size-adjust:100%}a{color:inherit}.site{position:-webkit-sticky;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:var(--green-deep);color:#fff}.site .logo{font-weight:700;letter-spacing:.04em;text-decoration:none}.site .logo small{display:block;font-size:16px;opacity:.75;letter-spacing:.18em;font-weight:400}.site nav{display:flex;gap:14px;align-items:center;font-size:16px}.site nav a{text-decoration:none;opacity:.9}.site nav a:hover{opacity:1;text-decoration:underline}.wrap{max-width:900px;margin:0 auto;padding:24px 18px 64px}.wrap.narrow{max-width:760px}h1.page{font-size:26px;margin:4px 0 6px;letter-spacing:.02em}p.page-lead{margin:0 0 24px;color:var(--muted);font-size:17px}.stage{margin:0 0 26px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.stage-head{display:flex;align-items:baseline;gap:10px;padding:14px 18px;background:var(--green-soft);border-bottom:1px solid var(--line)}.stage-head .en{font-size:16px;letter-spacing:.16em;color:var(--green-mid);font-weight:700}.stage-head .ja{font-size:20px;font-weight:700;color:var(--green-deep)}.stage-head .count{margin-left:auto;font-size:16px;color:var(--muted)}.lesson-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line);text-decoration:none}.lesson-row:first-child{border-top:0}.lesson-row:hover{background:#fbfdfb}.lesson-row .no{flex:0 0 46px;font-size:16px;font-weight:700;color:var(--green-mid)}.lesson-row .title{flex:1 1;font-size:18px}.lesson-row .state{flex:0 0 auto;font-size:16px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}.lesson-row .state.done{background:var(--green-deep);border-color:var(--green-deep);color:#fff}.lesson-row .state.doing{border-color:var(--gold);color:var(--gold)}.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}.bar>span{display:block;height:100%;background:var(--green-mid)}.summary{display:flex;gap:18px;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:26px}.summary .metric{min-width:92px}.summary .metric b{display:block;font-size:29px;line-height:1.3;color:var(--green-deep)}.summary .metric span{font-size:16px;color:var(--muted)}.summary .grow{flex:1 1;min-width:200px;align-self:center}.lesson-head{margin-bottom:18px}.lesson-head .crumb{font-size:16px;letter-spacing:.14em;color:var(--green-mid);font-weight:700}.lesson-head h1{font-size:25px;margin:6px 0 10px}.lesson-head .lead{color:var(--muted);font-size:17px;white-space:pre-line;margin:0}.video{position:relative;width:100%;aspect-ratio:16/9;background:#0d1712;border-radius:var(--radius);overflow:hidden;margin:18px 0 6px}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9fb3a8;font-size:16px;text-align:center;padding:20px}.body{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}.body h2{font-size:19px;margin:26px 0 10px;padding-left:12px;border-left:3px solid var(--green-deep);line-height:1.6}.body h2:first-child{margin-top:0}.body p{margin:0 0 14px;font-size:18px}.body .b-strong{font-weight:700;margin:18px 0 12px;font-size:19px}.body .b-em{margin:14px 0;padding-left:12px;border-left:2px solid var(--gold);font-size:17px}.check-list{margin:12px 0 18px;padding:12px 14px;background:var(--green-soft);border-radius:10px}.check-list label{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:17px;cursor:pointer}.check-list input{margin-top:6px;width:16px;height:16px;accent-color:var(--green-mid)}.field{margin:14px 0 20px;padding:14px 16px;border:1px dashed var(--green-mid);border-radius:10px;background:#fdfcf7}.field .row{margin-bottom:10px}.field .row:last-child{margin-bottom:0}.field .label{font-size:16px;font-weight:700;color:var(--green-deep);margin-bottom:4px}.field .hint{font-size:16px;color:var(--muted)}.field input[type=text]{width:100%;font-size:19px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:inherit}.field input[type=text]:focus{outline:2px solid var(--green-mid);outline-offset:1px}.saved-note{position:fixed;right:16px;bottom:16px;background:var(--green-deep);color:#fff;font-size:16px;padding:8px 14px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}.saved-note.show{opacity:.92}.quiz{margin-top:22px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}.quiz h3{font-size:18px;margin:0 0 12px}.quiz .choice{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;cursor:pointer;font-size:17px}.quiz .choice:hover{background:#fbfdfb}.quiz .result{margin-top:10px;font-size:17px;padding:10px 12px;border-radius:8px}.quiz .result.ok{background:var(--green-soft);color:var(--green-deep)}.quiz .result.ng{background:#fdf1ee;color:#a2402c}.btn{display:inline-block;border:0;border-radius:8px;background:var(--green-deep);color:#fff;font-size:17px;font-family:inherit;padding:10px 18px;cursor:pointer;text-decoration:none}.btn:hover{background:var(--green-mid)}.btn.ghost{background:transparent;color:var(--green-deep);border:1px solid var(--green-deep)}.btn.small{font-size:16px;padding:6px 12px}.btn:disabled{opacity:.5;cursor:default}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}.notice{background:#fdf6e3;border:1px solid #e8d8a8;border-radius:10px;padding:12px 16px;font-size:16px;margin-bottom:20px}.error{color:#a2402c;font-size:16px;margin:8px 0 0}.foot-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}.auth-screen{min-height:78vh;display:flex;align-items:center;justify-content:center;padding:20px}.auth-card{width:100%;max-width:400px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px}.auth-card h1{font-size:23px;margin:0 0 4px}.auth-card .sub{font-size:16px;color:var(--muted);margin:0 0 22px}.auth-card label{display:block;font-size:16px;font-weight:700;margin:14px 0 5px}.auth-card input{width:100%;font-size:19px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-family:inherit}.auth-card .btn{width:100%;margin-top:20px;padding:12px}table.admin{width:100%;border-collapse:collapse;font-size:16px;background:var(--white)}table.admin td,table.admin th{border:1px solid var(--line);padding:7px 9px;text-align:left;vertical-align:middle}table.admin th{background:var(--green-soft);font-size:16px;white-space:nowrap}table.admin input[type=number],table.admin input[type=text]{width:100%;font-size:16px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-family:inherit}table.admin td.narrow{width:62px}.admin-actions{gap:10px;align-items:center;margin:14px 0 20px}.admin-actions,.tabs{display:flex;flex-wrap:wrap}.tabs{gap:6px;margin-bottom:18px}.tabs button{border:1px solid var(--line);background:var(--white);font-family:inherit;font-size:16px;padding:7px 14px;border-radius:999px;cursor:pointer}.tabs button.on{background:var(--green-deep);color:#fff;border-color:var(--green-deep)}@media (max-width:640px){.wrap{padding:18px 14px 56px}.body{padding:18px 16px}.lesson-row .no{flex-basis:40px}}.container{max-width:1200px;margin:0 auto;padding:0 20px}.page-content{padding-top:40px;padding-bottom:60px}.page-title{font-size:31px;margin:0 0 10px;color:#1b4332;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-weight:600}.page-subtitle{color:#888;margin:0 0 30px;font-size:17px}.category-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}.category-tab{padding:8px 20px;border:2px solid #e2e8f0;background:#fff;border-radius:24px;font-size:17px;font-weight:500;cursor:pointer;transition:all .2s;color:#666;font-family:inherit}.category-tab:hover{border-color:#1b4332;color:#1b4332}.category-tab.active{background:#1b4332;color:#fff;border-color:#1b4332}.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:24px;gap:24px}.course-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);transition:all .35s cubic-bezier(.25,.46,.45,.94);text-decoration:none;color:inherit;display:block}.course-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.12);border-color:rgba(201,168,76,.3)}.course-card-thumbnail{position:relative;width:100%;height:200px;background:#1b4332;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;overflow:hidden}.course-card-thumbnail:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c9a84c,transparent)}.course-card-thumbnail .en{font-size:16px;letter-spacing:.22em;opacity:.8}.course-card-thumbnail .ja{font-size:34px;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-weight:600;letter-spacing:.08em}.course-card-body{padding:20px}.course-card-badge-row{margin-bottom:8px}.course-card-badge{display:inline-block;padding:3px 12px;border-radius:12px;font-size:16px;font-weight:700;color:#fff;letter-spacing:.5px;background:#2d6a4f}.course-card-badge.done{background:#1b4332}.course-card-badge.doing{background:#c9a84c}.course-card-badge.new{background:#6b7280}.course-card-body h3{font-size:20px;margin:0 0 10px;color:#1b4332;line-height:1.5;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-weight:600}.course-card-body p{font-size:16px;color:#888;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.course-card-meta{display:flex;align-items:center;gap:12px;font-size:16px;color:#666}.course-card-progress{margin-top:12px}.course-card-progress .bar{height:5px}.rank-banner{gap:18px;flex-wrap:wrap;background:#fff;border:1px solid rgba(0,0,0,.04);box-shadow:0 2px 12px rgba(0,0,0,.06);border-radius:14px;padding:16px 22px;margin-bottom:26px}.rank-banner,.rank-banner-left{display:flex;align-items:center}.rank-banner-left{gap:12px}.rank-banner-emoji{font-size:29px}.rank-banner-name{display:block;font-size:16px;color:#666}.rank-banner-title{display:block;font-size:20px;color:#1b4332;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-weight:600}.rank-banner-right{flex:1 1;min-width:220px;display:flex;align-items:center;gap:12px}.rank-banner-bar{flex:1 1;height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden}.rank-banner-fill{display:block;height:100%;background:linear-gradient(90deg,#1b4332,#c9a84c)}.rank-banner-pct{font-size:17px;font-weight:700;color:#1b4332;min-width:42px;text-align:right}.step-list{background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.04);overflow:hidden}.step-item{display:flex;align-items:center;gap:14px;padding:16px 20px;border-top:1px solid #eef1ef;text-decoration:none;color:inherit}.step-item:first-child{border-top:0}.step-item:hover{background:#fbfdfb}.step-num{flex:0 0 38px;height:38px;border-radius:50%;background:#eef4ef;color:#1b4332;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}.step-item.done .step-num{background:#1b4332;color:#fff}.step-body{flex:1 1;min-width:0}.step-body h3{font-size:19px;margin:0 0 2px;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-weight:600;color:#1b4332}.step-body p{margin:0;font-size:16px;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step-state{flex:0 0 auto;font-size:16px;padding:3px 11px;border-radius:999px;border:1px solid #e2e8f0;color:#888}.step-state.done{background:#1b4332;border-color:#1b4332;color:#fff}.step-state.doing{border-color:#c9a84c;color:#c9a84c}.back-link{display:inline-block;font-size:16px;color:#2d6a4f;text-decoration:none;margin-bottom:14px}.back-link:hover{text-decoration:underline}@media (max-width:640px){.container{padding:0 16px}.page-content{padding-top:24px;padding-bottom:40px}.page-title{font-size:26px}.courses-grid{grid-template-columns:1fr}.category-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.category-tab{white-space:nowrap;flex-shrink:0}.course-card-thumbnail{height:150px}.course-card-thumbnail .ja{font-size:29px}}.badge-shelf{background:#fff;border:1px solid rgba(0,0,0,.04);box-shadow:0 2px 12px rgba(0,0,0,.06);border-radius:14px;padding:18px 22px;margin-bottom:26px}.badge-shelf-head{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}.badge-shelf-head h2{font-size:19px;margin:0;color:#1b4332;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-weight:600}.badge-shelf-head span{margin-left:auto;font-size:16px;color:#888}.badge-row{display:flex;gap:14px;flex-wrap:wrap}.badge{width:92px;padding:12px 6px 10px;border-radius:12px;border:1px dashed #dfe4e0;background:#f7f8f7;text-align:center;opacity:.55}.badge.earned{opacity:1;border:1px solid #c9a84c;background:linear-gradient(180deg,#fffdf5,#fdf6e3);box-shadow:0 2px 10px rgba(201,168,76,.18)}.badge-medal{display:block;font-size:31px;line-height:1.2;filter:grayscale(1)}.badge.earned .badge-medal{filter:none}.badge-name{font-weight:700;color:#1b4332;margin-top:4px}.badge-name,.badge-state{display:block;font-size:16px}.badge-state{color:#999;letter-spacing:.08em}.badge.earned .badge-state{color:#b08d3f}.medal-modal{position:fixed;inset:0;background:rgba(13,23,18,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}.medal-modal-content{background:#fff;border-radius:18px;padding:34px 30px 26px;text-align:center;max-width:340px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.28);border-top:4px solid #c9a84c}.medal-modal-content .big{font-size:67px;line-height:1}.medal-modal-content h3{font-size:23px;margin:14px 0 6px;color:#1b4332;font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,system-ui,sans-serif;font-weight:600}.medal-modal-content p{font-size:16px;color:#888;margin:0 0 20px}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:640px){.auth-card,.body,.card,.course-card-body,.lesson-head,.notice,.step-body,body{overflow-wrap:anywhere;word-break:normal}.site{padding:8px 12px;flex-wrap:wrap;gap:4px}.site .logo{font-size:18px}.site .logo small{font-size:11px;letter-spacing:.12em}.site nav{width:100%;gap:14px;font-size:16px;overflow-x:auto;white-space:nowrap;padding-bottom:2px;scrollbar-width:none}.site nav::-webkit-scrollbar{display:none}.container{padding:0 14px}.page-content{padding-top:16px;padding-bottom:36px}.wrap{padding:16px 14px 40px}.page-title{font-size:22px;margin-bottom:6px}.page-subtitle{font-size:16px;margin-bottom:16px}.rank-banner{padding:14px 16px;gap:10px;margin-bottom:18px}.rank-banner-right{width:100%;min-width:0}.rank-banner-title{font-size:18px}.badge-shelf{padding:14px 16px;margin-bottom:18px}.badge-shelf-head{margin-bottom:10px}.badge-row{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:8px;gap:8px}.badge{width:auto;padding:9px 2px 7px}.badge-medal{font-size:24px}.badge-name{margin-top:2px}.badge-name,.badge-state{font-size:16px}.courses-grid{grid-template-columns:1fr;gap:16px}.course-card-thumbnail{height:118px}.course-card-thumbnail .ja{font-size:26px}.course-card-thumbnail .en{font-size:16px;letter-spacing:.12em}.course-card-body{padding:14px 16px}.course-card-body h3{font-size:18px;margin-bottom:6px}.course-card-body p{font-size:16px;margin-bottom:10px}.step-item{padding:12px 14px;gap:10px}.step-num{flex-basis:32px;height:32px}.step-body h3,.step-num{font-size:16px}.step-body p{display:none}.step-state{font-size:16px;padding:2px 9px}.lesson-head h1{font-size:21px}.lesson-head .lead{font-size:16px}.body{padding:16px 14px}.body h2{font-size:18px;margin:20px 0 8px;padding-left:10px}.body p{margin-bottom:12px}.body .b-em,.body .b-strong,.body p{font-size:17px}.check-list{padding:10px 12px}.check-list label{font-size:17px}.field{padding:12px 14px}.foot-nav{flex-direction:column;gap:8px}.foot-nav .btn{white-space:normal;text-align:center}.table-scroll{border:1px solid var(--line);border-radius:8px}table.admin{min-width:620px;border:0}.admin-actions{gap:8px}.auth-screen{min-height:70vh;padding:14px}.auth-card{padding:24px 20px}.medal-modal-content{padding:28px 22px 22px}.medal-modal-content .big{font-size:54px}.site{padding:6px 12px 4px}.site .logo{font-size:17px;line-height:1.3}.site .logo small{display:none}.site nav{gap:16px;padding-bottom:0}.rank-banner{padding:11px 14px;margin-bottom:14px}.rank-banner-emoji{font-size:22px}.rank-banner-title{font-size:17px}.rank-banner-name{font-size:16px}.badge-shelf{padding:12px 14px;margin-bottom:14px}.badge-shelf-head h2{font-size:17px}.badge{padding:7px 2px 5px;border-radius:10px}.badge-medal{font-size:21px}.course-card-thumbnail{height:96px}.course-card-thumbnail .ja{font-size:23px}.course-card-body{padding:12px 14px}.course-card-body h3{font-size:17px;margin-bottom:4px}.course-card-body p{margin-bottom:8px}.course-card-meta{gap:10px}.course-card-progress{margin-top:8px}.courses-grid{gap:14px}.step-item{padding:10px 12px}.step-num{flex-basis:28px;height:28px}.lesson-head{margin-bottom:14px}.video{margin:14px 0 6px;border-radius:10px}.body{padding:14px 13px}}