/* ====================================================== 台湾華語スタディ StayTW Study — 学習ツール （版面は StayJP Study と同じ「和紙＋朱印」系デザイン） ====================================================== */ :root { --bg: #FAF8F3; --bg2: #FFFFFF; --bg3: #F2EEE5; --hd: #FAF8F3; --tx: #1C1C1E; --tx2: #6A6A6A; --tx-s: #A9A9A9; --tx3: #A9A9A9; --ac: #B8362A; --ac-soft: rgba(184,54,42,.08); --ac2: #2F5D7A; --ok: #2F7A5D; --bd: #E5DECF; --line: #DDD5C0; --sh: 0 1px 3px rgba(0,0,0,.03); --sh2: 0 2px 8px rgba(0,0,0,.04); --r: 10px; --hh: 56px; --ease: cubic-bezier(.25,.1,.25,1); --serif: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", "游明朝", "Songti TC", serif; /* 注音専用：黒体系は声調記号(ˊˇˋ˙)が明朝より太く鮮明。ゴシックで小サイズでも潰れにくい */ --zhuyin: "PingFang TC", "Heiti TC", "Microsoft JhengHei", "Noto Sans TC", "Hiragino Sans", sans-serif; } [data-theme="dark"] { --bg: #121113; --bg2: #1B1A1C; --bg3: #1F1E20; --hd: #121113; --tx: #EDE8DE; --tx2: #8F8A7E; --tx-s: #5D5A53; --tx3: #5D5A53; --ac: #E4715F; --ac-soft: rgba(228,113,95,.1); --ac2: #7FA5C2; --ok: #4C9B7A; --bd: #2C2A27; --line: #2C2A27; --sh: none; --sh2: none; } *{margin:0;padding:0;box-sizing:border-box;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)} html,body{overflow-x:hidden} body{ font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","PingFang TC",system-ui,sans-serif; background:var(--bg);color:var(--tx);line-height:1.7;font-size:16px;letter-spacing:.01em;-webkit-font-smoothing:antialiased; } a{color:var(--ac2);text-decoration:none} button{font-family:inherit} /* == Header == */ .hd{position:fixed;top:0;left:0;right:0;background:color-mix(in srgb,var(--bg) 88%,transparent);z-index:100;border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);padding-top:env(safe-area-inset-top)} .hd-inner{max-width:1000px;margin:0 auto;display:flex;align-items:center;padding:0 24px;height:var(--hh);gap:10px} .hd h1{color:var(--tx);font-size:15px;font-weight:700;white-space:nowrap;letter-spacing:.02em;font-family:var(--serif);display:flex;align-items:center;gap:8px;min-width:0} .hd h1 a{color:inherit;display:flex;align-items:center;gap:8px;min-width:0} .hd h1 img{width:26px;height:30px;flex-shrink:0} /* 長い英語ブランド名は詰まったら省略（…）。StayTW と右側のボタン群は絶対に切らない */ .hd h1 a [data-i18n="brand"]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hd h1 a > span:not([data-i18n]){flex-shrink:0} /* 狭い画面で「Taiwan Mandar⋯」と切れ残るくらいなら、長い名前ごと出さない方が読める */ @media(max-width:430px){ .hd h1 a [data-i18n="brand"]{display:none} } .hd-links{display:flex;gap:12px;margin-left:auto;align-items:center;flex-shrink:0} .hd-links a{color:var(--tx2);font-size:13px;font-weight:500;white-space:nowrap} @media(hover:hover){.hd-links a:hover{color:var(--tx)}} .lang-btn{background:var(--bg3);border:1px solid var(--bd);cursor:pointer;color:var(--tx2);padding:2px 10px;font-size:12px;font-weight:600;border-radius:8px;white-space:nowrap} @media(hover:hover){.lang-btn:hover{color:var(--ac);border-color:var(--ac)}} .theme-btn{background:none;border:none;cursor:pointer;color:var(--tx3);padding:6px;border-radius:10px;display:flex;align-items:center} @media(hover:hover){.theme-btn:hover{color:var(--tx);background:var(--bg3)}} .theme-btn svg{width:18px;height:18px} /* == Layout == */ .wrap{max-width:1000px;margin:0 auto;padding:calc(var(--hh) + env(safe-area-inset-top) + 28px) 24px 80px} /* == Level tabs & voice == */ .levels{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center} .levels .lv-label{font-size:12px;letter-spacing:.18em;color:var(--ac);font-weight:700;margin-right:4px} .lv-btn{border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);border-radius:14px;padding:5px 14px;font-size:13px;font-weight:700;cursor:pointer;text-align:center;line-height:1.25} .lv-btn small{display:block;font-size:10px;font-weight:500;color:var(--tx3);letter-spacing:.06em} .lv-btn.on{background:var(--ac);border-color:var(--ac);color:#fff} .lv-btn.on small{color:rgba(255,255,255,.75)} .voice-sel{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx3)} .voice-sel select{border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);border-radius:8px;padding:4px 8px;font-size:12px;max-width:200px;font-family:inherit} /* == Tool tabs == */ /* タブは 19 個あり PC でも横に溢れる。macOS はスクロールバーを出さないので、 端をぼかして「まだ続きがある」と分かるようにする(見えない機能は無いのと同じ) */ .tools-wrap{position:relative} .tools-wrap::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:42px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--bg));opacity:0;transition:opacity .2s} .tools-wrap.more-r::after{opacity:1} .tools-wrap::before{content:"";position:absolute;left:0;top:0;bottom:1px;width:42px;pointer-events:none;z-index:1; background:linear-gradient(270deg,transparent,var(--bg));opacity:0;transition:opacity .2s} .tools-wrap.more-l::before{opacity:1} .tools{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto;scrollbar-width:none} .tools::-webkit-scrollbar{display:none} .tool-btn{background:none;border:none;border-bottom:2px solid transparent;color:var(--tx2);padding:12px 16px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;position:relative} .tool-btn.on{color:var(--ac);border-bottom-color:var(--ac)} .tool-btn .badge{background:var(--ac);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:0 6px;margin-left:5px;display:inline-block;min-width:18px;text-align:center} .tool-btn .ti{margin-right:5px;display:inline-flex;align-items:center} .tool-btn .ti svg{width:18px;height:18px;display:block} .panel{display:none} .panel.on{display:block} /* == はじめての流れ（初回のみ表示） == */ .ob-strip{display:flex;align-items:center;gap:12px;background:var(--ac-soft);border:1px solid color-mix(in srgb,var(--ac) 30%,var(--bd));border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:13.5px;color:var(--tx);line-height:1.7} .ob-strip button{margin-left:auto;background:none;border:none;color:var(--tx3);cursor:pointer;font-size:12px;white-space:nowrap;padding:4px} @media(hover:hover){.ob-strip button:hover{color:var(--ac)}} /* == トースト（評価したときのフィードバック） == */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--tx);color:var(--bg);font-size:13.5px;font-weight:600;padding:10px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:300;box-shadow:0 6px 24px rgba(0,0,0,.25)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* == キーボードヒント（デスクトップのみ） == */ .kbd-hint{text-align:center;font-size:11.5px;color:var(--tx-s);margin-top:14px} @media(hover:none),(max-width:700px){.kbd-hint{display:none}} /* == Flashcard == */ .fc-hint{text-align:center;font-size:13px;color:var(--tx3);margin-bottom:14px} .fc{max-width:500px;margin:0 auto;perspective:1200px;cursor:pointer} .fc-inner{position:relative;display:grid;width:100%;min-height:360px;transform-style:preserve-3d;transition:transform .5s var(--ease)} .fc.flip .fc-inner{transform:rotateY(180deg)} .fc-face{grid-area:1/1;position:relative;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bg2);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center} .fc-back{transform:rotateY(180deg)} #fcMeanFront{margin-top:10px;cursor:pointer} #fcMeanFront .fc-reveal{display:none} #fcMeanFront.hide .fc-mf{display:none} #fcMeanFront.hide .fc-reveal{display:block} .fc-mf{font-size:15px;color:var(--tx2);line-height:1.5;max-width:22em;margin:0 auto} .fc-word{font-family:var(--serif);font-size:clamp(44px,9vw,64px);font-weight:700;line-height:1.2} .fc-zy{font-family:var(--zhuyin);font-size:20px;font-weight:600;color:var(--ac);margin-top:10px;letter-spacing:.1em} .fc-py{font-size:17px;color:var(--tx2);margin-top:2px} #fcReading{cursor:default;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center} .fc-reveal{display:none} #fcReading.hide{cursor:pointer} #fcReading.hide .fc-zy,#fcReading.hide .fc-py{display:none} #fcReading.hide .fc-reveal{display:block;font-size:13px;color:var(--tx3);letter-spacing:normal} .js-hidepron.on{background:var(--ac);color:#fff;border-color:var(--ac)} .fc-pos{display:inline-block;font-size:11px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:6px;padding:0 7px;margin-top:14px;letter-spacing:.05em} .fc-mean{font-size:23px;font-weight:700;margin-bottom:12px} .fc-ex{font-size:15px;color:var(--tx);line-height:1.5;border-top:1px solid var(--line);margin-top:2px;cursor:pointer;border-radius:0 0 8px 8px;padding:14px 10px 6px} @media(hover:hover){.fc-ex:hover{background:var(--ac-soft)}} .fc-ex .ex-z{display:block;margin-bottom:7px} .fc-ex .ex-r{display:block} .exr-zy{display:block;font-family:var(--zhuyin);font-weight:600;color:var(--ac);letter-spacing:.05em;font-size:15.5px;line-height:1.55} .exr-py{display:block;color:var(--tx3);font-size:12.5px;line-height:1.4;margin-top:1px} .fc-ex .tr{font-size:13.5px;color:var(--tx2);display:block;margin-top:7px} .fc-grade{display:flex;gap:8px;margin-top:14px;width:100%} .fc-grade button{flex:1;border:1px solid var(--bd);background:var(--bg3);border-radius:12px;padding:9px 4px;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--tx);line-height:1.3} .fc-grade button small{display:block;font-weight:500;font-size:10.5px;color:var(--tx3)} .fc-grade .g-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--bd))} .fc-grade .g-mid{color:#B07A1F} .fc-grade .g-ng{color:var(--ac);border-color:color-mix(in srgb,var(--ac) 45%,var(--bd))} @media(hover:hover){.fc-grade button:hover{border-color:currentColor}} .fc-ctrl{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap} .btn{border:1px solid var(--bd);background:var(--bg2);color:var(--tx);border-radius:999px;padding:9px 20px;font-size:14px;font-weight:600;cursor:pointer} @media(hover:hover){.btn:hover{border-color:var(--ac);color:var(--ac)}} .btn.primary{background:var(--tx);color:var(--bg);border-color:var(--tx)} @media(hover:hover){.btn.primary:hover{background:var(--ac);border-color:var(--ac);color:#fff}} .fc-prog{text-align:center;font-size:13px;color:var(--tx3);margin-top:12px} .tts-btn{background:var(--ac-soft);border:none;color:var(--ac);border-radius:999px;width:38px;height:38px;font-size:17px;cursor:pointer;flex-shrink:0} @media(hover:hover){.tts-btn:hover{background:var(--ac);color:#fff}} /* == Word list == */ .search{width:100%;max-width:380px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:8px} .search:focus{outline:none;border-color:var(--ac)} .pos-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px} .pos-btn{border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);border-radius:999px;padding:3px 13px;font-size:12.5px;font-weight:600;cursor:pointer} .pos-btn.on{background:var(--ac);border-color:var(--ac);color:#fff} .vlist{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:720px){.vlist{grid-template-columns:1fr}} .vcard{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--sh);cursor:pointer} @media(hover:hover){.vcard:hover{border-color:var(--ac)}} .vcard-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .vcard-w{font-family:var(--serif);font-size:26px;font-weight:700} .vcard-zy{font-family:var(--zhuyin);font-size:15px;font-weight:600;color:var(--ac);letter-spacing:.06em} .vcard-py{font-size:14px;color:var(--tx2)} .vcard-pos{font-size:10.5px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:5px;padding:0 5px;margin-left:auto} .vcard-m{font-size:15px;font-weight:600;margin-top:4px} .vcard-ex{font-size:13.5px;color:var(--tx2);margin-top:8px;border-top:1px dashed var(--line);padding-top:8px;line-height:1.8;border-radius:6px} @media(hover:hover){.vcard-ex:hover{background:var(--ac-soft)}} .vcard-ex b{color:var(--tx);font-weight:600} /* == Grammar == */ .gcard{background:var(--bg2);border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden} .gcard summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;align-items:center;gap:12px} .gcard summary::-webkit-details-marker{display:none} .gcard summary::after{content:'+';color:var(--ac);font-size:20px;margin-left:auto} .gcard[open] summary::after{content:'−'} .g-cat{font-size:10.5px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:5px;padding:0 6px;white-space:nowrap} .g-title{font-family:var(--serif);font-size:17px;font-weight:700} .g-body{padding:0 20px 18px} .g-pattern{display:inline-block;background:var(--ac-soft);color:var(--ac);font-weight:700;font-size:13.5px;border-radius:8px;padding:4px 12px;margin-bottom:10px} .g-ex{font-size:14px;color:var(--tx2);line-height:1.9;margin-bottom:12px} .g-eg{border-top:1px dashed var(--line);padding-top:10px;font-size:15px;line-height:1.9} .g-eg .zh{color:var(--tx);font-weight:500;cursor:pointer;border-radius:6px;padding:1px 4px} @media(hover:hover){.g-eg .zh:hover{background:var(--ac-soft)}} .g-eg .zh em{font-style:normal;color:var(--ac);font-weight:700} .g-eg .py{font-size:12.5px;color:var(--tx3);display:block} .g-eg .tr{font-size:13.5px;color:var(--tx2);display:block;margin-bottom:8px} /* == Phrases == */ .ph-cat{font-family:var(--serif);font-size:20px;font-weight:700;margin:30px 0 14px;display:flex;align-items:center;gap:10px} .ph-cat:first-child{margin-top:0} .ph-item{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start;cursor:pointer} @media(hover:hover){.ph-item:hover{border-color:var(--ac)}} .ph-main{flex:1;min-width:0} .ph-z{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.5} .ph-py{font-size:13px;color:var(--tx3)} .ph-m{font-size:14.5px;color:var(--tx2);margin-top:3px} .ph-note{font-size:12.5px;color:var(--ac);background:var(--ac-soft);border-radius:8px;padding:6px 10px;margin-top:8px;line-height:1.7} /* == Quiz == */ .qz{max-width:520px;margin:0 auto;text-align:center} .qz-word{font-family:var(--serif);font-size:clamp(40px,8vw,56px);font-weight:700;margin:8px 0 2px;cursor:pointer} .qz-py{color:var(--tx2);font-size:15px;margin-bottom:22px} .qz-opts{display:grid;gap:10px} .qz-opt{border:1px solid var(--bd);background:var(--bg2);color:var(--tx);border-radius:12px;padding:13px 16px;font-size:15.5px;font-weight:600;cursor:pointer;text-align:left} @media(hover:hover){.qz-opt:hover{border-color:var(--ac)}} .qz-opt.ok{background:var(--ok);border-color:var(--ok);color:#fff} .qz-opt.ng{background:var(--ac);border-color:var(--ac);color:#fff;opacity:.85} .qz-opt:disabled{cursor:default} .qz-score{font-size:14px;color:var(--tx2);margin:16px 0} .qz-fb{margin-top:18px;padding:14px 16px;border-radius:12px;border:1px solid var(--bd);background:var(--bg2);text-align:center} .qz-fb.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--bg2))} .qz-fb.ng{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 8%,var(--bg2))} .wb-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:400;display:flex;align-items:flex-end;justify-content:center} .wb-panel{background:var(--bg);width:100%;max-width:560px;max-height:82vh;border-radius:18px 18px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));overflow-y:auto} @media(min-width:560px){.wb-modal{align-items:center}.wb-panel{border-radius:18px}} .wb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:17px} .wb-x{background:none;border:none;font-size:18px;color:var(--tx3);cursor:pointer} .wb-item{position:relative;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:12px 40px 12px 14px;margin-bottom:10px} .wb-q{font-size:15px;color:var(--tx)} .wb-a{font-family:var(--serif);font-size:19px;color:var(--ac);cursor:pointer} .wb-d{font-size:13px;color:var(--tx2);margin-top:4px} .wb-del{position:absolute;right:8px;top:10px;background:none;border:none;color:var(--tx3);cursor:pointer;font-size:14px} .wb-link{background:none;border:1px solid var(--bd);color:var(--tx2);border-radius:999px;padding:8px 16px;font-size:13px;cursor:pointer;margin-top:12px} .qz-big{font-family:var(--serif);font-size:44px;font-weight:700;color:var(--ac)} /* == 注音 ㄅㄆㄇ == */ .zy-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap} .zy-tab{border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit} .zy-tab.on{background:var(--ac);border-color:var(--ac);color:#fff} .zy-group{margin-bottom:22px} .zy-group h4{font-size:12px;letter-spacing:.1em;color:var(--ac);font-weight:700;margin-bottom:10px} .zy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px} .zy-cell{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 4px;text-align:center;cursor:pointer;transition:transform .1s var(--ease),border-color .1s;-webkit-tap-highlight-color:transparent} .zy-cell:active{transform:scale(.93)} .zy-cell.play{border-color:var(--ac);background:var(--ac-soft)} .zy-cell .zy-z{font-family:var(--zhuyin);font-size:30px;font-weight:700;line-height:1.15;letter-spacing:.03em} .zy-cell .zy-py{font-size:12.5px;color:var(--tx2);margin-top:3px} .zy-hint{text-align:center;font-size:13px;color:var(--tx3);margin-bottom:16px} .zy-test{max-width:460px;margin:0 auto;text-align:center} .zy-prompt{font-family:var(--zhuyin);font-size:76px;font-weight:700;line-height:1.05;margin:8px 0;letter-spacing:.03em} .zy-play-btn{background:var(--bg3);color:var(--tx);border:1px solid var(--bd);border-radius:999px;padding:11px 24px;font-size:15px;font-weight:700;cursor:pointer;margin:6px 0 18px;font-family:inherit} .zy-input{width:100%;max-width:260px;border:2px solid var(--bd);background:var(--bg2);color:var(--tx);border-radius:12px;padding:12px 16px;font-size:20px;text-align:center;font-weight:700;font-family:inherit} .zy-input:focus{outline:none;border-color:var(--ac)} .zy-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px} .zy-opt{border:1px solid var(--bd);background:var(--bg2);color:var(--tx);border-radius:12px;padding:16px;font-family:var(--zhuyin);font-size:34px;font-weight:700;cursor:pointer;letter-spacing:.03em} .zy-opt.ok{background:var(--ok);border-color:var(--ok);color:#fff} .zy-opt.ng{background:var(--ac);border-color:var(--ac);color:#fff;opacity:.85} .zy-fb{font-size:15px;font-weight:700;margin:14px 0 4px;min-height:22px} .zy-fb.ok{color:var(--ok)}.zy-fb.ng{color:var(--ac)} .zy-prog{font-size:13px;color:var(--tx3);margin-top:14px} @media(hover:hover){.zy-cell:hover{border-color:var(--ac)}.zy-opt:hover{border-color:var(--ac)}.zy-tab:hover{color:var(--ac)}} /* 注音 書き方（なぞり書き） */ .zw{max-width:420px;margin:0 auto;text-align:center} .zw-info{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0 14px} .zw-py{font-family:var(--serif);font-size:22px;color:var(--ac)} .zw-pad{position:relative;width:min(320px,80vw);aspect-ratio:1;margin:0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:16px;overflow:hidden} .zw-pad::before,.zw-pad::after{content:"";position:absolute;background:var(--line)} .zw-pad::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)} .zw-pad::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)} .zw-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:min(230px,58vw);line-height:1;color:var(--tx);opacity:.13;pointer-events:none;user-select:none} .zw-guide.hide{display:none} .zw-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair} /* 筆順番号。韓国のユーザー要望「2画以上は 1,2 と小さく順番を出してほしい」。 位置は教育部『國語注音符號手冊』の分画画像から機械的に求めた各画の重心(zhuyin.js の sp)。 ガイド文字を消すと番号も消える(なぞり終わったあとの答え合わせを邪魔しない)。 */ .zw-anim{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain;opacity:0;transition:opacity .12s;pointer-events:none;z-index:2} .zw-anim.on{opacity:.85} .zw-order{position:absolute;inset:0;pointer-events:none;transition:opacity .15s} .zw-order i{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%; background:var(--ac);color:#fff;font-style:normal;font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center;opacity:.9;font-family:var(--sans)} .zw-strokes{text-align:center;font-size:12.5px;color:var(--tx3);margin-top:10px} .ess{max-width:680px;margin:0 auto} .ess-lead{font-size:13.5px;color:var(--tx2);line-height:1.65;margin:0 0 13px} .ess-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:13px;-webkit-overflow-scrolling:touch} .ess-tab{flex:0 0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;color:var(--tx2);cursor:pointer} .ess-tab.on{background:var(--ac);border-color:var(--ac);color:#fff} .ess-note{background:var(--ac-soft,#fdf2f0);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.7;color:var(--tx);margin-bottom:14px} .ess-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .ess-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 10px 12px;cursor:pointer;font:inherit;text-align:center;color:var(--tx)} .ess-card:active{transform:scale(.97)} .ess-w{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.25} .ess-zy{font-family:var(--zhuyin);font-size:14px;font-weight:600;color:var(--ac);margin-top:5px;letter-spacing:.04em} .ess-py{font-size:12px;color:var(--tx3);margin-top:2px} .ess-m{font-size:12.5px;color:var(--tx2);margin-top:7px;line-height:1.45} .ess-actions{display:flex;gap:9px;justify-content:center;margin-top:18px} .ess-quiz{text-align:center;padding:10px 0} .ess-q-prog{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums} .ess-q-hint{font-size:12.5px;color:var(--tx3);margin:10px 0 4px} .ess-q-mean{font-size:21px;font-weight:700;margin:14px 0 20px;line-height:1.5} .ess-q-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-width:420px;margin:0 auto} .ess-opt{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px 8px;font-family:var(--serif);font-size:21px;font-weight:700;color:var(--tx);cursor:pointer} .ess-opt.ok{border-color:#2e7d5b;color:#2e7d5b} .ess-opt.ng{border-color:var(--ac);color:var(--ac)} .ess-q-fb{min-height:26px;margin-top:13px;font-size:14px;color:var(--tx2)} .ess-q-fb span{color:var(--tx3);font-size:12.5px} .ess-done{font-family:var(--serif);font-size:44px;color:var(--ac);margin:26px 0 6px} .pf-ref{border:1px solid var(--line);border-radius:14px;padding:15px 16px;margin-top:14px;background:var(--bg2)} .pf-ref-h{font-size:13px;font-weight:700;margin-bottom:5px} .pf-ref-d{font-size:12.5px;color:var(--tx2);line-height:1.65;margin:0 0 11px} .pf-ref-code{display:flex;gap:8px;align-items:center} .pf-ref-code span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px} .pf-ref-code .btn{flex:0 0 auto;padding:9px 14px;font-size:13px} .pf-ref-stat{font-size:11.5px;color:var(--tx3);margin-top:9px} .zw-ctrls{display:flex;gap:8px;justify-content:center;margin-top:16px} .zw-nav{display:flex;align-items:center;justify-content:space-between;margin-top:18px;max-width:320px;margin-left:auto;margin-right:auto} .zw-nav button{background:none;border:none;color:var(--tx2);font-size:14px;cursor:pointer;font-family:inherit;padding:8px} .zw-prog{font-size:13px;color:var(--tx3)} /* 注音 vs 拼音 説明 */ .zy-py-info{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin-bottom:16px} .zy-py-info summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--tx);padding:12px 0;list-style:none} .zy-py-info summary::-webkit-details-marker{display:none} .zy-py-info summary::before{content:"＋";color:var(--ac);font-weight:700;margin-right:8px} .zy-py-info[open] summary::before{content:"－"} .zy-py-body{font-size:13.5px;line-height:1.9;color:var(--tx2);padding:2px 0 14px} .zy-py-body b{color:var(--tx);font-weight:700} .zy-credit{font-size:11.5px;color:var(--tx3);text-align:center;margin-top:26px;line-height:1.7} .zy-credit a{color:var(--tx3);text-decoration:underline} /* == スピーキング == */ .spk{max-width:560px;margin:0 auto;text-align:center} .spk-src{display:flex;gap:8px;justify-content:center;margin-bottom:18px} .spk-card{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:30px 26px;box-shadow:var(--sh2)} .spk-z{font-family:var(--serif);font-size:clamp(24px,5vw,32px);font-weight:700;line-height:1.6;cursor:pointer} @media(hover:hover){.spk-z:hover{color:var(--ac)}} .spk-py{color:var(--tx3);font-size:14px;margin-top:6px} .spk-tr{color:var(--tx2);font-size:14.5px;margin-top:4px} .spk-mic{width:88px;height:88px;border-radius:50%;border:none;background:var(--ac);color:#fff;font-size:36px;cursor:pointer;margin:22px auto 6px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(184,54,42,.3);transition:transform .15s var(--ease)} @media(hover:hover){.spk-mic:hover{transform:scale(1.06)}} .spk-mic.rec{animation:pulse 1.2s infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(184,54,42,.45)}50%{box-shadow:0 0 0 18px rgba(184,54,42,0)}} .spk-status{font-size:13px;color:var(--tx3);min-height:20px} .spk-result{margin-top:18px;border-top:1px dashed var(--line);padding-top:16px;text-align:left} .spk-heard{font-family:var(--serif);font-size:20px;line-height:1.7} .spk-heard .hit{color:var(--ok,#2F7A5D)} .spk-heard .miss{color:var(--ac);text-decoration:line-through} .spk-scorebar{display:flex;align-items:center;gap:12px;margin-top:10px} .spk-score-num{font-family:var(--serif);font-size:34px;font-weight:700} .spk-meter{flex:1;height:8px;background:var(--bg3);border-radius:99px;overflow:hidden} .spk-meter i{display:block;height:100%;background:var(--ok,#2F7A5D);border-radius:99px;transition:width .5s var(--ease)} .spk-verdict{font-size:13.5px;color:var(--tx2);margin-top:6px} /* == ライティング == */ .wr{max-width:680px;margin:0 auto} .wr-topic{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px;cursor:pointer;display:flex;align-items:center;gap:14px} @media(hover:hover){.wr-topic:hover{border-color:var(--ac)}} .wr-topic .lv{font-size:11px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:6px;padding:1px 8px;white-space:nowrap} .wr-topic h4{font-size:16px;font-weight:700} .wr-topic .done{margin-left:auto;font-size:12px;color:var(--ok)} .wr-task{background:var(--ac-soft);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.8;margin:12px 0} .wr-hints{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px} .wr-hint{background:var(--bg2);border:1px solid var(--bd);border-radius:999px;padding:4px 13px;font-size:13.5px;cursor:pointer} @media(hover:hover){.wr-hint:hover{border-color:var(--ac);color:var(--ac)}} .wr-hint small{color:var(--tx3);margin-left:5px} .wr-ta{width:100%;min-height:180px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);border-radius:14px;padding:14px 16px;font-size:16.5px;line-height:1.9;font-family:inherit;resize:vertical} .wr-ta:focus{outline:none;border-color:var(--ac)} .wr-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--tx3);margin:8px 2px 18px} .wr-model{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-top:14px} .wr-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .wr-note{font-size:13px;color:var(--tx2);padding:10px 2px} .wr-score-card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-top:14px} .wr-score-top{display:flex;gap:16px;align-items:center} .wr-score-num{font-family:var(--serif);font-size:40px;font-weight:700;color:var(--ac);line-height:1;flex-shrink:0} .wr-score-num small{font-size:15px;color:var(--tx3);font-weight:400} .wr-good{font-size:13.5px;color:var(--ok);line-height:1.6} .wr-improve{font-size:13.5px;color:var(--tx2);line-height:1.6;margin-top:2px} .wr-corr{margin-top:14px;border-top:1px solid var(--line);padding-top:12px} .wr-corr>b{font-size:12px;color:var(--tx3);letter-spacing:.06em;display:block;margin-bottom:8px} .wr-corr-item{font-size:14.5px;line-height:1.7;margin-bottom:8px} .wr-x{color:var(--ac);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ac) 55%,transparent)} .wr-arrow{color:var(--tx3)} .wr-o{color:var(--ok);font-weight:700;cursor:pointer} .wr-corr-item small{display:block;color:var(--tx3);font-size:12px;margin-top:1px} .wr-tip{font-size:13px;color:var(--tx2);margin-top:12px;line-height:1.6} .wr-tip b{color:var(--ac)} .wr-enc{font-size:13.5px;color:var(--tx);margin-top:8px;line-height:1.6} .wr-hist{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px;cursor:pointer} @media(hover:hover){.wr-hist:hover{border-color:var(--ac)}} .wr-hist-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .wr-hist-top b{font-size:14.5px} .wr-hist-score{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ac)} .wr-hist-draft{font-size:13px;color:var(--tx2);margin-top:4px;line-height:1.5} .wr-hist-date{font-size:11px;color:var(--tx3);margin-top:4px} .wr-model .zh{font-family:var(--serif);font-size:16.5px;line-height:2;cursor:pointer;border-radius:8px} @media(hover:hover){.wr-model .zh:hover{background:var(--ac-soft)}} .wr-model .tr{font-size:13.5px;color:var(--tx2);line-height:1.9;border-top:1px dashed var(--line);margin-top:12px;padding-top:12px} /* == SRS == */ .srs-home{max-width:640px} .srs-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin:18px 0} .srs-stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center} /* マイページ */ .pf-acc{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .pf-avatar{width:46px;height:46px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;flex:none} .pf-logout{background:none;border:1px solid var(--bd);color:var(--tx2);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;flex:none} .pf-upgrade{display:block;width:100%;box-sizing:border-box;background:linear-gradient(135deg,var(--ac),#8f2820);color:#fff;border:none;border-radius:14px;padding:15px;font-size:15.5px;font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:14px;box-shadow:0 6px 20px rgba(184,54,42,.28);letter-spacing:.02em} .pf-upgrade:active{transform:translateY(1px)} .pf-del{background:none;border:none;color:var(--tx3);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;text-decoration:underline;padding:6px;letter-spacing:.02em} .pf-del:active{color:#c0392b} @media(hover:hover){.pf-del:hover{color:#c0392b}} .dax-btn{width:100%;padding:12px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;border:none} .dax-del{background:#c0392b;color:#fff} .dax-cancel{background:var(--bg3);color:var(--tx);border:1px solid var(--bd)} .pf-sync{font-size:12px;color:#2F7A5D;margin:8px 0 0;text-align:center} [data-theme="dark"] .pf-sync{color:#4C9B7A} .pf-h{font-size:13px;letter-spacing:.05em;color:var(--tx2);font-weight:700;margin:24px 0 12px} .pf-levels{display:flex;flex-direction:column;gap:10px} .pf-lv{display:flex;align-items:center;gap:12px} .pf-lvn{font-size:13px;font-weight:700;width:64px;flex:none} .pf-bar{flex:1;height:8px;background:var(--bg3);border-radius:999px;overflow:hidden} .pf-bar i{display:block;height:100%;background:var(--ac);border-radius:999px;transition:width .5s var(--ease)} .pf-lvc{font-size:12px;color:var(--tx3);width:58px;text-align:right;flex:none} .pf-streak{display:flex;align-items:center;gap:16px;margin-top:12px;background:linear-gradient(135deg,var(--ac),color-mix(in srgb,var(--ac) 66%,#000));color:#fff;border-radius:14px;padding:16px 22px} .pf-streak-n{font-family:var(--serif);font-size:42px;font-weight:700;line-height:1;flex:none} .pf-streak-n small{font-size:15px;font-weight:600;margin-left:3px} .pf-streak-lbl b{display:block;font-size:15px} .pf-streak-lbl span{font-size:12.5px;opacity:.85} .pf-hm{margin-top:16px;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:14px 14px 12px;overflow-x:auto} .pf-hm-h{font-size:13px;font-weight:700;color:var(--tx2);margin-bottom:10px} .hm-grid{display:inline-flex;flex-direction:column;gap:3px;min-width:min-content} .hm-row{display:flex;gap:3px} .hm-months{margin-bottom:1px} .hm-m{width:11px;font-size:9px;color:var(--tx3);flex:none;white-space:nowrap;overflow:visible} .hm-c{width:11px;height:11px;border-radius:2px;flex:none;background:var(--bg3)} .hm-c[data-l="0"]{background:color-mix(in srgb,var(--tx3) 16%,var(--bg2))} .hm-c[data-l="1"]{background:color-mix(in srgb,var(--ac) 35%,var(--bg2))} .hm-c[data-l="2"]{background:color-mix(in srgb,var(--ac) 65%,var(--bg2))} .hm-c[data-l="3"]{background:var(--ac)} .hm-c[data-l="x"]{background:transparent} .hm-legend{display:flex;align-items:center;gap:3px;justify-content:flex-end;margin-top:9px;font-size:11px;color:var(--tx3)} .hm-legend .hm-c{width:10px;height:10px} .srs-stat b{font-family:var(--serif);font-size:26px;display:block;line-height:1.2} .srs-stat span{font-size:11.5px;color:var(--tx3)} .srs-stat.hot b{color:var(--ac)} /* 毎日の目標 */ .pf-daily{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-top:12px} .pf-daily.done{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--bg2))} .pf-daily-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px} .pf-daily-top b{font-size:14.5px} .pf-daily-top span{font-family:var(--serif);font-size:16px;color:var(--ac)} .pf-daily.done .pf-daily-top span{color:var(--ok)} .pf-daily-bar{height:8px;background:var(--bg3);border-radius:6px;overflow:hidden} .pf-daily-bar i{display:block;height:100%;background:var(--ac);border-radius:6px;transition:width .4s var(--ease)} .pf-daily.done .pf-daily-bar i{background:var(--ok)} .pf-daily-set{margin-top:11px;font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:6px} .pf-goal{border:1px solid var(--bd);background:var(--bg);color:var(--tx2);border-radius:7px;padding:2px 10px;font-size:12.5px;cursor:pointer;font-family:inherit} .pf-goal.on{background:var(--ac);color:#fff;border-color:var(--ac)} /* 読解（分級閲読） */ .rd-lead{color:var(--tx2);font-size:14px;line-height:1.9;margin-bottom:16px} .rd-empty{color:var(--tx3);text-align:center;padding:40px 0} .rd-card{display:block;width:100%;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px;cursor:pointer;font-family:inherit;transition:border-color .15s var(--ease)} .rd-card-t{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--tx);margin-bottom:3px} .rd-card-meta{font-size:12.5px;color:var(--tx3)} .rd-ok{color:var(--ok);font-weight:600} @media(hover:hover){.rd-card:hover{border-color:var(--ac)}} .rd-back{background:none;border:none;color:var(--tx2);font-size:13.5px;cursor:pointer;font-family:inherit;padding:0;margin-bottom:10px} .rd-title{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:14px} .rd-toggles{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap} .rd-tg{border:1px solid var(--bd);background:var(--bg);color:var(--tx2);border-radius:999px;padding:5px 14px;font-size:13px;cursor:pointer;font-family:inherit} .rd-tg.on{background:var(--ac);color:#fff;border-color:var(--ac)} .rd-line{position:relative;padding:14px 46px 14px 6px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .2s;-webkit-tap-highlight-color:transparent} .rd-line.playing{background:var(--ac-soft)} .rd-z{font-family:var(--serif);line-height:2;color:var(--tx);text-align:justify} .rd-spk{width:17px;height:17px;color:var(--tx3);flex:none} .rd-py{font-size:13px;color:var(--tx3);margin-top:3px} .rd-tr{font-size:14px;color:var(--tx2);margin-top:5px;line-height:1.7} .rd-h4{font-size:14px;font-weight:700;color:var(--tx2);margin:26px 0 12px;letter-spacing:.02em} .rd-voc{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:9px 2px;border-bottom:1px dashed var(--line);cursor:pointer} .rd-voc-w{font-family:var(--serif);font-size:17px;font-weight:700;grid-row:span 2} .rd-voc-p{font-size:12px;color:var(--tx3)} .rd-voc-m{font-size:13.5px;color:var(--tx2)} .rd-q{font-size:15.5px;font-weight:600;margin-bottom:12px;line-height:1.7} .rd-opts{display:flex;flex-direction:column;gap:9px} .rd-opt{text-align:left;background:var(--bg2);border:1px solid var(--bd);border-radius:11px;padding:12px 15px;font-size:14.5px;cursor:pointer;font-family:inherit;color:var(--tx);transition:border-color .12s} .rd-opt.ok{background:color-mix(in srgb,var(--ok) 14%,var(--bg2));border-color:var(--ok);color:var(--tx)} .rd-opt.ng{background:color-mix(in srgb,var(--ac) 12%,var(--bg2));border-color:var(--ac)} @media(hover:hover){.rd-opt:not(:disabled):hover{border-color:var(--ac)}} .rd-why{margin-top:14px;font-size:13.5px;line-height:1.85;color:var(--tx2);display:none} .rd-why.ok,.rd-why.ng{display:block;background:var(--bg3);border-radius:10px;padding:12px 14px} /* 記事（コラム） */ .ar-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px} .ar-fc{border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap} .ar-fc.on{background:var(--ac);border-color:var(--ac);color:#fff} @media(hover:hover){.ar-fc:hover{border-color:var(--ac)}} .ar-card{display:block;width:100%;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:13px;cursor:pointer;font-family:inherit;transition:border-color .15s var(--ease),transform .1s var(--ease)} .ar-card:active{transform:scale(.99)} .ar-card-prev{font-family:var(--serif);font-size:14px;color:var(--tx3);margin-top:8px;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(hover:hover){.ar-card:hover{border-color:var(--ac)}} .ar-card-cat{font-size:11.5px;color:var(--ac);font-weight:700;letter-spacing:.04em;margin-bottom:5px} .ar-card-zh{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--tx);line-height:1.35} .ar-card-t{font-size:13px;color:var(--tx3);margin-top:3px} .ar-card.locked{opacity:.72} .ar-lock{font-size:10.5px;font-weight:700;color:var(--tx2);background:var(--bg3);border:1px solid var(--bd);border-radius:5px;padding:1px 7px;margin-left:4px;letter-spacing:.02em} .ar-freetag{font-size:10.5px;font-weight:700;color:#fff;background:var(--ok);border-radius:5px;padding:1px 8px;margin-left:4px} .ar-cat{font-size:12px;color:var(--ac);font-weight:700;letter-spacing:.05em;margin-bottom:6px} .ar-zhtitle{font-family:var(--serif);font-size:27px;font-weight:700;line-height:1.3} .ar-title{font-size:14px;color:var(--tx3);margin-top:5px} .ar-intro{font-size:14px;color:var(--tx2);line-height:1.9;margin:14px 0 4px;padding-left:12px;border-left:2px solid var(--bd)} .ar-para{padding:14px 4px;border-bottom:1px solid var(--line);cursor:pointer;-webkit-tap-highlight-color:transparent} .ar-z{font-family:var(--serif);font-size:19px;line-height:2;color:var(--tx);text-align:left} .ar-z .rd-spk{width:16px;height:16px;color:var(--tx3);margin-left:6px;vertical-align:middle} .ar-py{font-size:12.5px;color:var(--tx3);margin-top:6px;line-height:1.8} .ar-tr{font-size:14px;color:var(--tx2);margin-top:8px;line-height:1.9} .ar-note{margin-top:24px;background:var(--ac-soft);border-radius:14px;padding:16px 18px;font-size:13.5px;color:var(--tx2);line-height:1.95} .ar-note-h{font-size:12px;font-weight:700;color:var(--ac);letter-spacing:.06em;margin-bottom:6px} .rd-report{text-align:center;margin-top:22px} .rd-report a{font-size:12.5px;color:var(--tx3);text-decoration:none;border:1px solid var(--bd);border-radius:999px;padding:7px 16px} @media(hover:hover){.rd-report a:hover{color:var(--ac);border-color:var(--ac)}} /* 記事リーダー（Readle風・大きめUI／タップ辞書） */ .ar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} /* 長文をスクロールした時だけ出る「浮かぶ戻る」ボタン（読解・記事。上部の戻るが流れて見えなくなっても戻れる） */ .stw-backfab{position:fixed;left:14px;top:calc(var(--hh) + env(safe-area-inset-top) + 12px);z-index:140;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 6px 20px rgba(0,0,0,.16);opacity:0;transform:translateY(-6px) scale(.9);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)} .stw-backfab.show{opacity:1;transform:none;pointer-events:auto} .stw-backfab .ic{width:22px;height:22px} .ar-back{width:42px;height:42px;border-radius:50%;border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .ar-back .ic{width:22px;height:22px} .ar-fontctl{display:flex;gap:8px} .ar-fontctl button{width:44px;height:42px;border-radius:12px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center} .ar-fontctl button small{font-size:12px} .ar-tips{font-size:12.5px;color:var(--tx3);background:var(--ac-soft);border-radius:9px;padding:8px 12px;margin:14px 0 6px} .ar-body{line-height:2.15;color:var(--tx);margin-top:6px} .ar-para{position:relative;padding:14px 46px 14px 6px;border-bottom:1px solid var(--line);border-radius:10px;transition:background .2s} .ar-para.playing{background:var(--ac-soft)} .ar-z{font-family:var(--serif);text-align:left} .ar-w{cursor:pointer;border-bottom:1.5px dotted var(--tx3);padding-bottom:1px;-webkit-tap-highlight-color:transparent} .ar-w:active{background:var(--ac-soft)} @media(hover:hover){.ar-w:hover{background:var(--ac-soft);border-color:var(--ac)}} /* 逐字ルビ：1 文字ごとに読み（拼音/注音）を真上に。文字・読み・ハイライトが縦にそろう */ .rc{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;vertical-align:bottom;border-radius:5px;padding:0 1px;transition:background .1s,color .1s;-webkit-tap-highlight-color:transparent} .rc .rcr{font-size:.6em;line-height:1.2;color:var(--tx2);font-weight:600;letter-spacing:.02em;white-space:nowrap;margin-bottom:.08em} .rc .rcr.rcr2{display:flex;flex-direction:column;align-items:center;line-height:1.12;margin-bottom:.08em} .rc .rcr-z{white-space:nowrap;font-family:var(--zhuyin);letter-spacing:.04em} /* 注音の声調(ˊ ˇ ˋ ˙)は Unicode 上「修飾文字」で、どのフォントでも本体の半分ほどの大きさ しか無い。韓国のユーザーから「声調が見分けづらい」と報告があったため、この 4 文字だけを twZy() で包んで拡大・太字にする。@font-face の unicode-range + size-adjust も試したが、 local() フォントには size-adjust が効かず(実測で幅が変わらない)不採用。 */ .zyt{font-size:1.45em;font-weight:700;letter-spacing:0;margin-left:-.06em;line-height:1} :root{--zt1:#1F6FB2;--zt2:#2E7D5B;--zt3:#C07000;--zt4:#B8362A;--zt5:#8A8A8F} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--zt1:#7FB8E8;--zt2:#79C9A0;--zt3:#E8A857;--zt4:#E8877C;--zt5:#9A9AA0}} :root[data-theme="dark"]{--zt1:#7FB8E8;--zt2:#79C9A0;--zt3:#E8A857;--zt4:#E8877C;--zt5:#9A9AA0} html[data-tone="on"] .zy-t1{color:var(--zt1)} html[data-tone="on"] .zy-t2{color:var(--zt2)} html[data-tone="on"] .zy-t3{color:var(--zt3)} html[data-tone="on"] .zy-t4{color:var(--zt4)} html[data-tone="on"] .zy-t5{color:var(--zt5)} /* 親要素の letter-spacing で符号が離れて見えるぶんを詰める */ .rc .rcr-p{white-space:nowrap;opacity:.72;font-size:.86em} .rd-story.rmboth,.ar-body.rmboth{line-height:2.75} .rc .rct{line-height:1.18;display:block} .rc.rc-h{margin:0 .5px} .rc.tapc.rc-h{cursor:pointer} .rc.said .rct{color:var(--tx2)} .rc.said .rcr{color:var(--tx3);opacity:.6} .rc.on{background:var(--ac)} .rc.on .rct{color:#fff} .rc.on .rcr{color:#fff;opacity:1} .ar-pctl{position:absolute;right:6px;top:12px;display:flex;flex-direction:column;gap:6px;align-items:center} .ar-para-play{width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);background:var(--bg2);color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .ar-para-play .ic{width:18px;height:18px} .ar-pt{width:36px;height:30px;border-radius:9px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx3);cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0} .ar-pt.on{color:var(--ac);border-color:var(--ac)} .aq-wrap{max-width:520px;margin:0 auto;text-align:center;padding:8px 0 30px} .aq-word{font-family:var(--serif);font-size:40px;font-weight:700;margin:18px 0 6px;cursor:pointer;color:var(--tx)} .aq-wrap .qz-opts{margin-top:18px;text-align:left} .poly-home{max-width:480px;margin:0 auto;text-align:center;padding:30px 18px} .poly-hero{width:84px;height:84px;border-radius:24px;background:var(--ac-soft);color:var(--ac);font-family:var(--serif);font-size:46px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px} .poly-h{font-size:22px;margin:0 0 8px;color:var(--tx)} .poly-sub{font-size:14px;color:var(--tx2);line-height:1.7;margin:0 0 22px} .poly-word{font-family:var(--serif);font-size:38px;font-weight:700;margin:16px 0 4px;text-align:center;color:var(--tx)} .poly-hi{color:var(--ac);border-bottom:3px solid var(--ac);padding:0 2px} .poly-r{border:1px solid var(--bd);border-radius:12px;padding:11px 13px;margin-bottom:9px;background:var(--bg2)} .poly-r.cur{border-color:var(--ac);background:var(--ac-soft)} .poly-r-h{font-size:15px;color:var(--tx)} .poly-r-h b{font-family:var(--serif);font-size:19px;color:var(--ac)} .poly-r-ex{margin-top:7px;display:flex;gap:7px;flex-wrap:wrap} .poly-ex{background:none;border:1px solid var(--bd);border-radius:999px;padding:5px 11px;font-size:14px;font-family:var(--serif);color:var(--tx);cursor:pointer} .poly-ex:active{background:var(--ac-soft)} .poly-home-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px} .poly-list{max-width:520px;margin:0 auto} .poly-list-top{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:520px;margin:0 auto 14px;flex-wrap:wrap} .poly-seg{display:inline-flex;border:1px solid var(--bd);border-radius:999px;overflow:hidden} .poly-seg button{background:none;border:none;padding:7px 15px;font-size:13px;color:var(--tx2);cursor:pointer} .poly-seg button.on{background:var(--ac);color:#fff} .poly-card{border:1px solid var(--bd);border-radius:14px;padding:13px 15px;margin-bottom:11px;background:var(--bg2)} .poly-card-h{display:flex;align-items:center;gap:6px;font-family:var(--serif);margin-bottom:9px} .ar-py{font-size:.72em;color:var(--tx3);margin-top:8px;line-height:1.7} .ar-tr{font-size:.8em;color:var(--tx2);margin-top:10px;line-height:1.85;padding-left:11px;border-left:2px solid var(--bd)} /* 置底ツールバー */ .ar-bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(160%);opacity:0;pointer-events:none;z-index:150;display:flex;gap:8px;background:color-mix(in srgb,var(--bg2) 94%,transparent);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--line);border-radius:999px;padding:7px 9px;box-shadow:0 8px 30px rgba(0,0,0,.18);transition:transform .28s var(--ease),opacity .2s var(--ease)} .ar-bar.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto} body.more-open .ar-bar{display:none} .ar-bt{min-width:52px;height:42px;border-radius:999px;border:none;background:transparent;color:var(--tx2);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;padding:0 14px} .ar-bt.on{background:var(--ac);color:#fff} .ar-bt.play{background:var(--tx);color:var(--bg);font-size:17px;min-width:52px} @media(min-width:721px){.ar-bar{bottom:24px}} @media(max-width:720px){.ar-bar{bottom:calc(70px + env(safe-area-inset-bottom))}} /* タップ辞書シート */ .wsheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:210;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)} .wsheet-bg.show{opacity:1;pointer-events:auto} .wsheet{position:fixed;left:0;right:0;bottom:0;z-index:220;background:var(--bg);border-radius:22px 22px 0 0;padding:22px 22px calc(26px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s var(--ease);box-shadow:0 -8px 30px rgba(0,0,0,.2);max-width:520px;margin:0 auto} .wsheet.show{transform:translateY(0)} .ws-top{display:flex;align-items:center;gap:14px} .ws-w{font-family:var(--serif);font-size:38px;font-weight:700;line-height:1} .ws-play{width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);background:var(--bg2);color:var(--ac);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .ws-p{font-size:16px;color:var(--ac);margin:12px 0 4px} .ws-m{font-size:16px;color:var(--tx);line-height:1.8} .ws-def{margin-top:7px;font-size:14px;color:var(--tx2);line-height:1.75} .ws-def::before{content:"漢 ";font-size:10.5px;color:var(--tx3);vertical-align:1px;letter-spacing:.5px} .ws-ex{margin-top:14px;padding-top:13px;border-top:1px dashed var(--line);font-family:var(--serif);font-size:16px;line-height:1.95;color:var(--tx);cursor:pointer} .ws-ex .py{display:block;font-family:inherit;font-size:12.5px;color:var(--ac);margin-top:3px;letter-spacing:.01em} .ws-ex .tr{display:block;font-family:inherit;font-size:13px;color:var(--tx2);margin-top:4px;line-height:1.7} .ws-srs{margin-top:18px;width:100%;padding:13px;border-radius:12px;border:1px solid var(--ac);background:var(--ac-soft);color:var(--ac);font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.02em} .ws-srs:active{transform:translateY(1px)} .ws-srs.added{border-color:var(--bd);background:var(--bg3);color:var(--tx3);cursor:default} /* 学習パス */ .pa-lv{font-family:var(--serif);font-size:22px;font-weight:700} .pa-lead{color:var(--tx2);font-size:13.5px;line-height:1.8;margin-top:3px} .pa-mini{display:flex;gap:10px;margin:16px 0 20px} .pa-mini-i{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;text-align:center} .pa-mini-i b{font-family:var(--serif);font-size:22px;display:block;line-height:1.1} .pa-mini-i span{font-size:11.5px;color:var(--tx3)} .pa-mini-i.ok b{color:var(--ok)} .pa-upgrade{display:flex;align-items:center;gap:13px;width:100%;box-sizing:border-box;margin:16px 0 4px;padding:15px 16px;border:none;border-radius:15px;background:linear-gradient(135deg,var(--ac),#8f2820);color:#fff;cursor:pointer;font-family:inherit;text-align:left;box-shadow:0 6px 20px rgba(184,54,42,.28)} .pa-upgrade:active{transform:translateY(1px)} .pa-up-ic{font-size:22px;line-height:1;flex-shrink:0} .pa-up-tx{flex:1;min-width:0} .pa-up-tx b{display:block;font-size:15.5px;font-weight:700;letter-spacing:.02em} .pa-up-tx span{display:block;font-size:12.5px;opacity:.9;margin-top:2px} .pa-up-ch{width:20px;height:20px;flex-shrink:0;fill:none;stroke:#fff;stroke-width:2.2;opacity:.85} .pa-upgrade.pa-prem{background:linear-gradient(135deg,#2e7d5b,#1f5e43);box-shadow:0 6px 20px rgba(46,125,91,.25)} /* ── YouTube 跟讀 ── 影片用官方 IFrame 嵌入,句子不自動標注音(破音字猜錯會違反「讀音一律對照教育部」), 要讀音就點詞查字典。依 YouTube 條款這功能不上付費牆。 */ .yts{max-width:640px;margin:0 auto} .yts-lead{font-size:13.5px;color:var(--tx2);line-height:1.65;margin:0 0 14px} .yts-cats{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:13px;-webkit-overflow-scrolling:touch} .yts-cat{flex:0 0 auto;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;color:var(--tx2);cursor:pointer} .yts-cat.on{background:var(--ac);border-color:var(--ac);color:#fff} .yts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px} .yts-card{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding:0;cursor:pointer;font:inherit;text-align:left;color:var(--tx)} .yts-card:active{transform:scale(.985)} .yts-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--line)} .yts-ct{padding:9px 11px 11px} .yts-ct b{display:block;font-size:13.5px;font-weight:700;line-height:1.4} .yts-ct span{display:block;font-size:11.5px;color:var(--tx3);margin-top:3px} .yts-ct em{display:inline-block;font-style:normal;font-size:11px;color:var(--ac);margin-top:5px} .yts-own{margin-top:18px;border-top:1px solid var(--line);padding-top:12px} .yts-own summary{font-size:13px;color:var(--tx2);cursor:pointer} .yts-ownin{display:flex;gap:8px;margin-top:10px} .yts-in{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--tx);font:inherit;font-size:15px} .yts-sub{font-size:12px;color:var(--tx3);line-height:1.6;margin:9px 0 0} .yts-head{display:flex;align-items:center;gap:10px;margin-bottom:11px} .yts-back{background:none;border:0;font:inherit;font-size:13px;color:var(--ac);cursor:pointer;padding:4px 0;flex:0 0 auto} .yts-title{font-size:13px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .yts-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000} .yts-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .yts-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:13px 0 4px} .yts-mode{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 4px;font:inherit;font-size:13px;color:var(--tx2);cursor:pointer} .yts-mode.on{background:var(--ac);border-color:var(--ac);color:#fff;font-weight:700} .yts-prog{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin:14px 0 7px} .yts-prog i{display:block;height:100%;background:var(--ac)} .yts-count{font-size:11.5px;color:var(--tx3);text-align:center;margin-bottom:9px;font-variant-numeric:tabular-nums} .yts-ctrl{display:flex;gap:7px;align-items:stretch;margin-bottom:14px} .yts-c{flex:0 0 auto;min-width:44px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 8px;font:inherit;font-size:14px;color:var(--tx);cursor:pointer} .yts-c.wide{flex:1} .yts-i{width:17px;height:17px;vertical-align:-3px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .yts-c:not(.wide) .yts-i{margin-right:0} .yts-c.on{background:var(--ac);border-color:var(--ac);color:#fff} .yts-c:active{transform:translateY(1px)} .yts-sent{font-size:21px;line-height:2.1;text-align:center;padding:16px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;min-height:64px} .yts-sent.yts-blur{filter:blur(7px);user-select:none} .yts-dictwrap{display:flex;gap:8px;margin-bottom:11px} .yts-chk{flex:0 0 auto;padding:10px 16px} .yts-mic-wrap{text-align:center;margin-top:15px} .yts-how{font-size:12.5px;color:var(--tx2);text-align:center;margin-top:14px;line-height:1.6} .yts-mic{width:100%;max-width:340px;min-height:52px;border-radius:14px;background:var(--ac);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;color:#fff;font:inherit;font-size:15px;font-weight:700;padding:12px 18px} .yts-mic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;flex:0 0 auto} .yts-mic.rec{animation:ytsPulse 1.1s infinite} @keyframes ytsPulse{0%,100%{box-shadow:0 0 0 0 rgba(184,54,42,.45)}50%{box-shadow:0 0 0 13px rgba(184,54,42,0)}} .yts-status{font-size:12.5px;color:var(--ac);margin-top:9px;min-height:18px} .yts-status:empty{min-height:0;margin-top:0} .yts-res{margin-top:15px;padding:16px;border:1px solid var(--line);border-radius:14px;text-align:center;background:var(--bg2)} .yts-res.ok{border-color:#2e7d5b} .yts-score{font-family:var(--serif);font-size:38px;line-height:1;color:var(--ac)} .yts-res.ok .yts-score{color:#2e7d5b} .yts-score span{font-size:16px;margin-left:2px} .yts-marked{font-size:19px;line-height:1.9;margin:11px 0 6px} .yts-miss{text-decoration:underline;text-decoration-color:var(--ac);text-decoration-thickness:2px;text-underline-offset:4px} .yts-said{font-size:12.5px;color:var(--tx3);margin-bottom:13px;word-break:break-all} .yts-load,.yts-empty{text-align:center;padding:38px 16px;color:var(--tx3);font-size:14px;line-height:1.7} .yts-empty .btn{margin-top:13px} /* ホームの Premium カード：使い切ってから見せるのではなく、最初から「何が開くか」を見せる。 付費牆の表示回数が全期間で 53 回しかなかった＝誰も出会っていなかったので、常設にした。 */ .hb-prem{border:1px solid var(--line);border-radius:18px;padding:16px 17px 14px;background:var(--bg2)} .hb-prem-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ac);letter-spacing:.07em;margin-bottom:10px} .hb-prem-t{font-family:var(--serif);font-size:16.5px;font-weight:700;margin-bottom:11px;line-height:1.4} .hb-prem-l{display:flex;flex-direction:column;gap:1px;margin-bottom:13px} .hb-prem-l button{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;background:none;border:0;border-top:1px solid var(--line);padding:11px 2px;cursor:pointer;font:inherit;font-size:13.5px;color:var(--tx);text-align:left;line-height:1.4} .hb-prem-l button:first-child{border-top:0} .hb-prem-l button:active{opacity:.6} .hb-prem-l .lk{flex-shrink:0;width:17px;height:17px;fill:none;stroke:var(--tx3);stroke-width:1.9} .hb-prem-l em{font-style:normal;color:var(--tx3);font-size:12px;margin-left:auto;padding-left:8px;white-space:nowrap} .hb-prem .btn{width:100%;padding:12px} .pa-found-h{font-size:11.5px;font-weight:700;color:var(--tx3);letter-spacing:.04em;margin:6px 0 9px} .pa-found{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 10%,var(--bg2)),var(--bg2));border:1px solid var(--ac);border-radius:16px;padding:15px 16px;cursor:pointer;font-family:inherit;margin-bottom:20px;transition:transform .1s var(--ease)} .pa-found:active{transform:scale(.99)} .pa-found-ic{flex:none;width:46px;height:46px;border-radius:13px;background:var(--ac);color:#fff;font-family:var(--serif);font-weight:700;font-size:26px;display:flex;align-items:center;justify-content:center} .pa-found-tx{flex:1;min-width:0} .pa-found-t{font-size:15.5px;font-weight:700;color:var(--tx)} .pa-found-d{font-size:12px;color:var(--tx3);margin-top:2px;line-height:1.5} .pa-found-ch{width:20px;height:20px;flex:none;color:var(--ac);fill:none;stroke:currentColor;stroke-width:2} .pa-level-sub{font-size:12px;color:var(--tx3);margin:-2px 0 10px;line-height:1.5} .pa-steps{display:flex;flex-direction:column;gap:0;position:relative} .pa-step{display:flex;align-items:flex-start;gap:14px;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;padding:14px 4px;border-bottom:1px solid var(--line);position:relative;width:100%} .pa-num{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:15px;background:var(--bg3);color:var(--tx3);border:1.5px solid var(--bd)} .pa-step.doing .pa-num{border-color:var(--ac);color:var(--ac)} .pa-step.done .pa-num{background:var(--ok);color:#fff;border-color:var(--ok)} .pa-main{flex:1;min-width:0} .pa-t{font-size:15.5px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:8px} .pa-next-tag{font-size:10.5px;font-weight:700;color:#fff;background:var(--ac);border-radius:5px;padding:1px 7px;letter-spacing:.03em} .pa-d{font-size:12.5px;color:var(--tx3);margin:2px 0 8px;line-height:1.6} .pa-bar{height:6px;background:var(--bg3);border-radius:5px;overflow:hidden;max-width:280px} .pa-bar i{display:block;height:100%;background:var(--ac);border-radius:5px;transition:width .5s var(--ease)} .pa-step.done .pa-bar i{background:var(--ok)} .pa-frac{flex:none;font-size:12px;color:var(--tx3);align-self:center;font-variant-numeric:tabular-nums} .pa-step.next{background:var(--ac-soft);border-radius:12px;border-bottom-color:transparent} .pa-step.locked{opacity:.5} .pa-lock{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .pa-stars{margin-left:7px;font-size:11.5px;color:var(--ac);letter-spacing:.06em;vertical-align:1px} .pa-step.todo .pa-stars{color:var(--tx3)} .pa-count{float:right;font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums} .pa-cleared{margin-top:12px;text-align:center;font-size:13px;font-weight:700;color:var(--ok,#2e7d5b);background:var(--bg2);border:1px solid var(--ok,#2e7d5b);border-radius:12px;padding:11px} @media(hover:hover){.pa-step:hover .pa-t{color:var(--ac)}} /* ===== 学習ハブ（面板トップ）===== */ .hb{display:flex;flex-direction:column;gap:18px} .hb-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 9%,var(--bg2)),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:16px 18px} .hb-hero img{width:54px;height:62px;flex:none} .hb-hi{flex:1;min-width:0} .hb-greet{font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .hb-fire{font-size:11.5px;font-weight:700;color:var(--ac);background:var(--ac-soft);border-radius:999px;padding:3px 9px;letter-spacing:.02em} .hb-fire.zero{color:var(--tx3);background:var(--bg2);border:1px solid var(--line)} .hb-fire.risk{color:#8a5a00;background:#fdf1d8;border:1px solid #f0d49a} html[data-theme="dark"] .hb-fire.risk{color:#f0c674;background:#3a2f18;border-color:#5c4a22} .hb-motto{font-size:12.5px;color:var(--tx2);margin-top:4px;line-height:1.55} .hb-goal{margin-top:9px} .hb-goal-btn{background:none;border:0;padding:0;font:inherit;font-size:11.5px;color:var(--tx3);cursor:pointer;display:inline-flex;align-items:center;gap:5px} .hb-goal-pen{font-size:10.5px;color:var(--ac);border:1px solid var(--ac);border-radius:999px;padding:0 6px;line-height:1.5} .hb-goal-set{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;color:var(--tx3);flex-wrap:wrap} .hb-goal-set[hidden]{display:none} /* hidden 属性は display 指定に負ける。明示しないと開きっぱなし */ .hb-goal-n{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:3px 11px;font:inherit;font-size:12px;font-weight:700;color:var(--tx2);cursor:pointer} .hb-goal-n.on{background:var(--ac);border-color:var(--ac);color:#fff} .hb-goal-top{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx3);margin-bottom:4px;font-variant-numeric:tabular-nums} .hb-goal-bar{height:7px;border-radius:999px;background:var(--bg3);overflow:hidden} .hb-goal-bar i{display:block;height:100%;border-radius:999px;background:var(--ac);transition:width .6s var(--ease)} .hb-goal.ok .hb-goal-bar i{background:var(--ok)} .hb-plan{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:17px 18px} .hb-plan-h{font-size:11.5px;font-weight:700;color:var(--tx3);letter-spacing:.06em;margin-bottom:7px} .hb-plan-n{display:grid;grid-template-columns:repeat(3,1fr);margin:11px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .hb-plan-n div{padding:13px 6px;text-align:center;border-left:1px solid var(--line);min-width:0} .hb-plan-n div:first-child{border-left:0} .hb-plan-n b{display:block;font-family:var(--serif);font-size:26px;color:var(--tx);line-height:1.05;font-variant-numeric:tabular-nums} .hb-plan-n span{display:block;font-size:11.5px;color:var(--tx3);margin-top:6px;line-height:1.35} .hb-plan-n .due b{color:var(--ac)} .hb-go{padding:13px} .hb-go{display:block;width:100%;border:0;border-radius:13px;background:var(--ac);color:#fff;padding:14px;font-size:15.5px;font-weight:700;cursor:pointer;font-family:inherit} .hb-go:active{transform:translateY(1px)} .hb-go.rest{background:var(--bg3);color:var(--tx2);border:1px solid var(--line)} .hb-resume{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:12px 15px;cursor:pointer;font-family:inherit;color:var(--tx)} .hb-resume .p{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ac-soft);color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:12px} .hb-resume b{font-size:14px;font-weight:700} .hb-resume span{font-size:12px;color:var(--tx3);display:block;margin-top:1px} .hb-wod{display:flex;align-items:center;gap:13px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:15px 17px} .hb-wod-m{flex:1;min-width:0} .hb-wod-l{font-size:11px;font-weight:700;color:var(--tx3);letter-spacing:.06em} .hb-wod-w{font-family:var(--serif);font-size:27px;font-weight:700;margin-top:3px;line-height:1.2} .hb-wod-r{font-family:var(--zhuyin);font-size:13px;color:var(--ac2);margin-top:3px} .hb-wod-s{font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.5} .hb-wod-b{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ac);cursor:pointer;font-size:17px;font-family:inherit} .hb-sec{font-size:11.5px;font-weight:700;color:var(--tx3);letter-spacing:.06em;margin-bottom:-8px} .hb-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .hb-quick button,.hb-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 6px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:var(--tx);text-decoration:none;text-align:center;line-height:1.3} .hb-quick .qi{font-size:20px;line-height:1} .hb-quick button:active,.hb-quick a:active{transform:scale(.97)} .hb-quick .hot{border-color:var(--ac);background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 10%,var(--bg2)),var(--bg2))} @media(max-width:360px){.hb-quick{grid-template-columns:repeat(2,1fr)}} /* 復習モーダル */ .quiz-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:none;align-items:center;justify-content:center;padding:16px} .quiz-bg.show{display:flex} .quiz-box{background:var(--bg);border:1px solid var(--line);border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;padding:18px 20px} .persona-opts{display:flex;flex-direction:column;gap:10px;text-align:left} .persona-opt{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .15s var(--ease),background .15s var(--ease);font-family:inherit} .persona-opt b{font-size:15.5px;color:var(--tx);font-weight:700} .persona-opt span{font-size:12.5px;color:var(--tx2);line-height:1.6} .persona-opt:active{background:var(--ac-soft)} @media(hover:hover){.persona-opt:hover{border-color:var(--ac);background:var(--ac-soft)}} .persona-skip{margin-top:14px;background:none;border:none;color:var(--tx3);font-size:13px;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px} .qhd{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx3);margin-bottom:12px} .qclose{margin-left:auto;background:none;border:1px solid var(--bd);color:var(--tx2);border-radius:8px;padding:2px 10px;cursor:pointer} .srs-card{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:28px 22px;text-align:center;cursor:pointer;min-height:280px;display:flex;flex-direction:column;justify-content:center} .srs-card .qmain{font-family:var(--serif);font-size:48px;font-weight:700;line-height:1.2} .srs-card .qsub{color:var(--tx2);font-size:15px;margin-top:8px} .srs-hint{font-size:12px;color:var(--tx3);margin-top:22px} .srs-meaning{font-size:21px;font-weight:700;margin:12px 0} .srs-ex{font-size:14px;line-height:1.8;border-top:1px dashed var(--line);padding-top:10px;border-radius:8px} @media(hover:hover){.srs-ex:hover{background:var(--ac-soft)}} .srs-ex .py{display:block;font-size:12px;color:var(--tx3)} .srs-ex .tr{display:block;font-size:12.5px;color:var(--tx2)} .srs-btns{display:flex;gap:8px;margin-top:18px} .srs-btn{flex:1;border:none;border-radius:12px;padding:11px 4px;font-size:14px;font-weight:700;cursor:pointer;color:#fff} .srs-ng{background:var(--ac)} .srs-mid{background:#B07A1F} .srs-ok{background:var(--ok)} /* == 模試 == */ .ex-home{max-width:640px} .ex-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .ex-sec{font-size:12px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:6px;padding:1px 8px} .ex-passage{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:16px;line-height:2;margin-bottom:16px;cursor:pointer;font-family:var(--serif)} @media(hover:hover){.ex-passage:hover{border-color:var(--ac)}} .ex-stem{font-size:18px;font-weight:600;margin-bottom:16px;line-height:1.8;cursor:pointer} .ex-stem.big{font-family:var(--serif);font-size:40px;text-align:center;font-weight:700} .ex-stem.mean{font-size:22px;text-align:center;font-weight:700;color:var(--tx)} .ex-prompt{font-size:13px;color:var(--tx3);text-align:center;margin-bottom:8px} .qz-opts.zy .qz-opt{font-family:var(--serif);font-size:20px;letter-spacing:.05em} .ex-listen{text-align:center;padding:26px 0 20px} .ex-play{width:84px;height:84px;border-radius:50%;border:none;background:var(--ac);color:#fff;font-size:34px;cursor:pointer;box-shadow:0 6px 20px rgba(184,54,42,.3);transition:transform .15s var(--ease)} @media(hover:hover){.ex-play:hover{transform:scale(1.06)}} .ex-hist{border-top:1px solid var(--line);margin-top:26px;padding-top:14px} .ex-hist-item{display:flex;gap:14px;font-size:13.5px;padding:7px 0;border-bottom:1px dashed var(--line);color:var(--tx2)} .ex-hist-item b{color:var(--tx)} .coming{padding:60px 20px;text-align:center;color:var(--tx3);font-size:15px;border:1px dashed var(--line);border-radius:14px} /* == 付費牆 == */ .pw-quota{display:inline-block;font-size:12.5px;color:var(--tx2);background:var(--bg3);border:1px solid var(--bd);border-radius:999px;padding:3px 12px;margin:8px 0} .pw-benefits{list-style:none;margin:14px 0;padding:0} .pw-benefits li{font-size:13.5px;color:var(--tx);padding:5px 0;line-height:1.6} .pw-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 16px} .pw-plan{position:relative;border:1px solid var(--bd);background:var(--bg2);border-radius:12px;padding:14px 6px 10px;text-align:center} .pw-plan.hot{border:2px solid var(--ac)} .pw-plan b{display:block;font-family:var(--serif);font-size:17px} .pw-plan span{font-size:10.5px;color:var(--tx3);display:block;line-height:1.4} .wn-card{border:1px solid var(--ac);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 7%,var(--bg2)),var(--bg2));padding:14px 15px} .wn-head{display:flex;align-items:center;gap:9px} .wn-tag{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--ac);border-radius:999px;padding:2px 8px} .wn-t{font-size:14.5px;font-weight:700;color:var(--tx)} .wn-x{margin-left:auto;background:none;border:0;color:var(--tx3);font-size:15px;cursor:pointer;padding:2px 4px;line-height:1} .wn-l{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .wn-l li{font-size:13px;color:var(--tx2);line-height:1.5;padding-left:15px;position:relative} .wn-l li::before{content:"";position:absolute;left:3px;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--ac)} .wn-go{margin-top:12px;background:none;border:0;padding:0;color:var(--ac);font:inherit;font-size:13px;font-weight:700;cursor:pointer} .mv-lead{font-size:13px;color:var(--tx2);line-height:1.6;margin:0 0 14px} .mv-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .mv-add .search{flex:1;min-width:150px} .mv-msg:empty{display:none} .mv-msg{margin-top:10px;font-size:13px} .mv-warn{color:var(--ac)} .mv-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 0 8px;font-size:12px;color:var(--tx3);font-weight:700;letter-spacing:.04em} .mv-lim{font-weight:700;color:var(--tx3)} .mv-lim.full{color:var(--ac)} .mv-empty{font-size:13px;color:var(--tx3);padding:18px 0} .mv-items{display:flex;flex-direction:column;gap:0} .mv-it{border-top:1px solid var(--line);padding:13px 2px} .mv-it:first-child{border-top:0} .mv-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .mv-w{font-family:var(--serif);font-size:21px;font-weight:700;cursor:pointer} .mv-zy{font-size:12.5px;color:var(--tx2)} .mv-py{font-size:12.5px;color:var(--tx3)} .mv-b{font-size:9.5px;font-weight:700;border-radius:999px;padding:1px 7px;letter-spacing:.03em} .mv-b-c{color:#4A7C8C;background:rgba(74,124,140,.12)} .mv-b-a{color:#8a5a00;background:#fdf1d8} .mv-del{margin-left:auto;background:none;border:0;color:var(--tx3);font-size:15px;cursor:pointer;padding:2px 4px;line-height:1} .mv-m{font-size:13.5px;color:var(--tx);margin-top:5px;line-height:1.5} .mv-ex{font-size:12.5px;color:var(--tx2);margin-top:5px;line-height:1.55;cursor:pointer} .mv-ex span{display:block;color:var(--tx3);font-size:12px} /* 每日打卡＋今日運勢。廟裡抽籤的樣子:搖籤筒 → 竹籤掉出來 → 攤開籤詩。 全部用 CSS 畫,不加圖檔。宜/忌 的注音是逐句對過萌典的固定值(見 fortune.js)。 */ .fo-card{display:block;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:16px;background:var(--bg2);padding:14px 15px;text-align:left;font-family:inherit} /* ── 未打卡:籤筒 ── */ .fo-draw{display:flex;align-items:center;gap:16px;cursor:pointer; background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 6%,var(--bg2)),var(--bg2));border-color:var(--ac)} .fo-draw:active{transform:scale(.995)} .fo-shake{position:relative;flex:0 0 58px;width:58px;height:66px} /* 竹籤:筒から少し頭が出ている */ .fo-sticks{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;gap:3px;z-index:1} .fo-sticks i{display:block;width:3px;height:17px;border-radius:2px 2px 0 0;background:linear-gradient(#e8d9b4,#cdb98c)} .fo-sticks i:nth-child(2){height:22px}.fo-sticks i:nth-child(4){height:20px}.fo-sticks i:nth-child(5){height:14px} /* 筒本体:竹の節を縦線で表現 */ .fo-tube{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:40px;height:50px;border-radius:5px 5px 8px 8px;z-index:2; background:repeating-linear-gradient(90deg,#8e5a3b 0 6px,#a06a47 6px 12px);box-shadow:inset 0 -6px 10px rgba(0,0,0,.22),0 2px 4px rgba(0,0,0,.18)} .fo-tube-band{position:absolute;left:0;right:0;top:15px;height:19px;background:var(--ac);color:#fff; font-family:var(--serif);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.06em} /* 飛び出す 1 本 */ .fo-out{position:absolute;left:50%;top:6px;width:4px;height:26px;border-radius:2px 2px 0 0; background:linear-gradient(#efe2c4,#d4bf93);opacity:0;transform:translateX(-50%)} .fo-draw.on .fo-shake,.fo-shake.go{animation:foShake .12s linear 0s 9} .fo-shake.go .fo-out{animation:foOut .55s cubic-bezier(.3,1.5,.6,1) 1.08s forwards} @keyframes foShake{ 0%{transform:rotate(0) translateY(0)}25%{transform:rotate(-7deg) translateY(-2px)} 50%{transform:rotate(0) translateY(0)}75%{transform:rotate(7deg) translateY(-2px)}100%{transform:rotate(0)} } @keyframes foOut{0%{opacity:0;transform:translate(-50%,4px)}35%{opacity:1}100%{opacity:1;transform:translate(-50%,-26px) rotate(9deg)}} .fo-tx{flex:1;min-width:0} .fo-t{font-size:14.5px;font-weight:700;color:var(--tx);line-height:1.35} .fo-d{font-size:12px;color:var(--tx3);margin-top:3px;line-height:1.45} /* ── 打卡済み:籤詩 ── */ .fo-slip{position:relative;background: linear-gradient(#fffdf6,#fbf5e6); border:1px solid #e0cfa8;box-shadow:0 1px 0 #fff inset,0 2px 8px rgba(120,90,40,.08)} .fo-slip::before{content:"";position:absolute;inset:5px;border:1px solid rgba(184,54,42,.22);border-radius:11px;pointer-events:none} html[data-theme="dark"] .fo-slip{background:linear-gradient(#241f18,#1e1a15);border-color:#4a3f2c} .fo-slip.in{animation:foIn .5s cubic-bezier(.2,.9,.3,1)} @keyframes foIn{0%{opacity:0;transform:translateY(10px) rotate(-1.5deg)}100%{opacity:1;transform:none}} .fo-slip-top{display:flex;align-items:center;gap:12px;padding:4px 2px 12px;border-bottom:1px dashed rgba(184,54,42,.28);margin-bottom:12px} .fo-no{display:flex;flex-direction:column;align-items:center;line-height:1.05;color:var(--ac);font-family:var(--serif);flex:0 0 auto} .fo-no span{font-size:9.5px;opacity:.8} .fo-no b{font-size:19px;font-weight:700;margin:1px 0} .fo-rank-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .fo-rank{font-family:var(--serif);font-size:27px;font-weight:700;letter-spacing:.1em;line-height:1.1} .fo-daji{color:var(--ac)}.fo-zhong{color:#B07A2A}.fo-xiao{color:#6E8C4A}.fo-ji{color:#4A7C8C}.fo-mo{color:var(--tx2)} .fo-count{font-size:11.5px;color:var(--tx3)} /* 朱印っぽい四角。廟の紙にある赤い判子 */ .fo-seal{flex:0 0 auto;width:38px;height:38px;border:2px solid var(--ac);border-radius:5px;color:var(--ac); font-family:var(--serif);font-size:13px;font-weight:700;line-height:1.05;display:flex;align-items:center;justify-content:center; text-align:center;transform:rotate(-7deg);opacity:.85;letter-spacing:-.02em;padding:2px} .fo-rows{display:flex;flex-direction:column;gap:8px} .fo-row{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45} .fo-rt{min-width:0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .fo-zy{font-size:11.5px;color:var(--tx2);white-space:nowrap} .fo-row b{font-family:var(--serif);font-weight:700;color:var(--tx);white-space:nowrap} .fo-tag{flex:0 0 24px;width:24px;height:24px;border-radius:50%;font-family:var(--serif);font-size:13px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;color:#fff} .fo-tag.yi{background:#6E8C4A}.fo-tag.ji{background:#9A5B5B} .fo-m{font-size:12px;color:var(--tx3);min-width:0} .fo-word{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%;box-sizing:border-box;margin-top:12px;padding:11px 12px 2px; border:0;border-top:1px dashed rgba(184,54,42,.28);background:none;cursor:pointer;font-family:inherit;text-align:left} .fo-wl{font-size:11px;color:var(--tx3);width:100%;line-height:1} .fo-word b{font-family:var(--serif);font-size:23px;font-weight:700;color:var(--tx)} .fo-wz{font-size:12.5px;color:var(--tx2)} .fo-wm{font-size:12.5px;color:var(--tx3)} .fo-wp{width:17px;height:17px;fill:none;stroke:var(--ac);stroke-width:1.8;margin-left:auto} @media(prefers-reduced-motion:reduce){.fo-shake.go,.fo-shake.go .fo-out,.fo-slip.in{animation:none}} .spk-cmp{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap} .spk-cmp-b{flex:1;min-width:130px;padding:9px 10px;font-size:13px} .pw-per{display:block;font-style:normal;font-size:10.5px;color:var(--ac);font-weight:700;margin-top:3px;line-height:1.3} .pw-trial{text-align:center;font-size:13px;font-weight:700;color:var(--ac);background:var(--ac-soft);border-radius:10px;padding:9px 10px;margin:0 0 12px;line-height:1.45} .pw-invested{text-align:center;font-size:12.5px;color:var(--tx2);background:var(--bg3);border-radius:10px;padding:9px 12px;margin:12px 0 0;line-height:1.5} .pw-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--ac);color:#fff!important;font-size:9.5px!important;font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap} /* == Footer == */ .ft{padding:40px 24px;color:var(--tx3);font-size:12px;border-top:1px solid var(--line);text-align:center;line-height:1.9} /* == モバイル下部ナビ == */ .bnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))} .bn-item{flex:1;background:none;border:none;color:var(--tx3);font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;cursor:pointer;position:relative;font-family:inherit;-webkit-tap-highlight-color:transparent} .bn-item .bi{font-size:21px;line-height:1.2;display:inline-flex} .bn-item .bi svg{width:22px;height:22px;display:block} .bn-item.on{color:var(--ac)} .bn-item .badge{position:absolute;top:-1px;left:calc(50% + 7px);background:var(--ac);color:#fff;font-size:9.5px;font-weight:700;border-radius:999px;padding:0 5px;min-width:16px;text-align:center} .sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:180;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)} .sheet{position:fixed;left:0;right:0;bottom:0;z-index:190;background:var(--bg);border-radius:20px 20px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s var(--ease);box-shadow:0 -8px 30px rgba(0,0,0,.18)} .more-open .sheet-bg{opacity:1;pointer-events:auto} .more-open .sheet{transform:none} .sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .sheet-item{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 6px;text-align:center;font-size:12px;font-weight:600;color:var(--tx);cursor:pointer;font-family:inherit;text-decoration:none;display:block;-webkit-tap-highlight-color:transparent} .sheet-item .bi{display:block;font-size:22px;margin-bottom:5px} .sheet-premium{grid-column:1/-1;background:linear-gradient(135deg,var(--ac),#8f2820);border:none;color:#fff;box-shadow:0 5px 16px rgba(184,54,42,.3);font-size:14.5px;font-weight:700;letter-spacing:.02em} .sheet-premium .bi{color:#fff} .bn-item .bi svg,.sheet-item .bi svg{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto} .bn-item .bi{height:24px;display:flex;align-items:center;justify-content:center;font-size:20px} .bn-item .bi svg{width:23px;height:23px} .sheet-item .bi svg{width:24px;height:24px} /* ===== 設定シート（他モーダルより前面：quiz-bg200/word220/toast300 の上）===== */ .set-bg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:360;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)} .set-open .set-bg{opacity:1;pointer-events:auto} #setSheet{z-index:370;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(105%)} .set-open #setSheet{transform:none} .set-head{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 14px} .set-head h3{font-family:var(--serif);font-size:19px;font-weight:700;margin:0} .set-close{background:var(--bg3);border:1px solid var(--bd);border-radius:999px;width:32px;height:32px;color:var(--tx2);cursor:pointer;font-size:17px;line-height:1;font-family:inherit;display:flex;align-items:center;justify-content:center} .set-sec{margin-bottom:20px} .set-sec>label{display:block;font-size:11.5px;letter-spacing:.08em;color:var(--tx2);font-weight:700;text-transform:uppercase;margin-bottom:9px} .set-seg{display:flex;gap:8px} .set-note{font-size:11.5px;color:var(--tx3);line-height:1.6;margin:8px 0 0} #setFs button{padding-left:2px;padding-right:2px;font-size:12.5px} /* 字級是 4 段,窄螢幕才擠不下 */ .set-seg button{flex:1;background:var(--bg2);border:1px solid var(--bd);border-radius:11px;padding:11px 6px;font-size:13.5px;font-weight:600;color:var(--tx);cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s;-webkit-tap-highlight-color:transparent} .set-seg button.on{border-color:var(--ac);background:var(--ac-soft);color:var(--ac)} .set-seg button .fss{font-weight:700} .set-acc{display:flex;gap:12px;flex-wrap:wrap} .set-acc button{width:38px;height:38px;border-radius:999px;border:2px solid var(--bd);cursor:pointer;position:relative;padding:0;-webkit-tap-highlight-color:transparent} .set-acc button.on{border-color:var(--tx)} .set-acc button.on::after{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.15)} .set-acc button[data-set-accent="default"]{background:var(--bg3);color:var(--tx2);font-size:11px;font-weight:700;width:auto;padding:0 14px;border-radius:999px} .set-acc button[data-set-accent="default"].on::after{display:none} .set-langs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .set-langs button{background:var(--bg2);border:1px solid var(--bd);border-radius:11px;padding:11px 12px;font-size:13.5px;font-weight:600;color:var(--tx);cursor:pointer;font-family:inherit;text-align:left;-webkit-tap-highlight-color:transparent} .set-langs button.on{border-color:var(--ac);background:var(--ac-soft);color:var(--ac)} .set-fb{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:13px 14px;font-size:14px;font-weight:600;color:var(--tx);text-decoration:none} .set-fb .ic{color:var(--ac)} @media(hover:hover){.set-seg button:hover,.set-langs button:hover{border-color:var(--ac)}.set-close:hover{color:var(--ac)}} /* インライン線アイコン（発音ボタン等、絵文字の代わり） */ .ic{width:1.05em;height:1.05em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;display:inline-block;flex:none} @media(max-width:700px){ .tools{display:none} .bnav{display:flex} /* モバイルは backdrop-blur を切る＝タブ切替のカクつき解消（GPU 合成が重い） */ .hd,.bnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)} .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))} .toast{bottom:calc(78px + env(safe-area-inset-bottom))} /* モバイル：レベルは横スクロールせず 5 段すべて一目で見える等幅に */ .levels{flex-wrap:nowrap;gap:5px} .levels .lv-label{display:none} .lv-btn{flex:1;min-width:0;padding:6px 2px;font-size:12.5px;border-radius:11px} .lv-btn small{font-size:9px;letter-spacing:0} .voice-sel{display:none} .search{font-size:16px} /* 16px 未満だと iOS がフォーカス時にズームする */ .pos-btn{padding:7px 15px;font-size:13px} .fc-grade button{padding:12px 4px} } @media(max-width:600px){ .hd-inner{padding:0 12px;gap:8px} .hd h1{font-size:13px} .hd h1 img{width:22px;height:25px} .hd-links{gap:8px} .hd-links a.hide-sp{display:none} .wrap{padding-top:calc(var(--hh) + env(safe-area-inset-top) + 18px);padding-left:16px;padding-right:16px} }