:root{--indigo:#1B3A6B;--indigo-mid:#2D5A9E;--indigo-soft:#EDF2FA;--sakura:#C85F7E;--sakura-light:#FDEEF4;--bg:#FAF9F7;--bg-alt:#F2F0EC;--surface:#FFFFFF;--surface-2:#F5F3F0;--text-1:#1A1917;--text-2:#4A4742;--text-3:#8A8480;--border:#E5E2DE;--border-2:#CCC8C3;--shadow-sm:0 2px 8px rgba(27,58,107,0.07);--shadow-md:0 8px 24px rgba(27,58,107,0.11);--shadow-lg:0 20px 56px rgba(27,58,107,0.17);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-jp:'BIZ UDPMincho','Hiragino Mincho ProN','Yu Mincho',serif;--space-sm:1rem;--space-md:2rem;--space-lg:4rem;--space-xl:6rem;--r-sm:8px;--r-md:16px;--r-lg:24px;--r-xl:32px;--r-full:999px;--ease:cubic-bezier(0.4,0,0.2,1);--t-fast:0.15s;--t-mid:0.28s}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}body{font-family:var(--font-sans);background-color:var(--bg);color:var(--text-1);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}img,svg{display:block;max-width:100%}a{color:inherit;text-decoration:none}ul{list-style:none}button{cursor:pointer;font-family:inherit}.container{width:min(1100px,100% - 3rem);margin-inline:auto}.navbar{position:sticky;top:0;z-index:100;background:rgba(250,249,247,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1100px;margin-inline:auto;padding-inline:1.5rem;height:68px;position:relative}.logo{display:flex;align-items:center;flex-shrink:0;transition:opacity var(--t-fast) var(--ease)}.logo:hover{opacity:0.75}.logo-img{height:52px;width:auto;display:block}.logo-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--indigo);color:#fff;border-radius:var(--r-sm);font-family:var(--font-jp);font-weight:700;font-size:1rem;line-height:1;flex-shrink:0}.logo-name{font-weight:600;font-size:1rem;color:var(--text-1);letter-spacing:-0.02em}.nav-links{display:flex;gap:0.2rem}.nav-links a{display:block;padding:0.45rem 1rem;font-size:0.9rem;font-weight:500;color:var(--text-2);border-radius:var(--r-full);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.nav-links a:hover{color:var(--indigo);background:var(--indigo-soft)}.nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text-1);border-radius:2px;transition:transform 0.25s var(--ease),opacity 0.25s var(--ease);transform-origin:center}.nav-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}.nav-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.lang-switcher{display:flex;align-items:center;background:var(--surface-2);padding:3px 8px 3px 6px;border-radius:var(--r-full);border:1px solid var(--border);position:relative}#lang-select{appearance:none;-webkit-appearance:none;background:transparent;border:none;font-family:var(--font-sans);font-size:0.78rem;font-weight:600;letter-spacing:0.02em;color:var(--indigo);cursor:pointer;padding:0.35rem 1.2rem 0.35rem 0.5rem;outline:none;min-width:0}.lang-switcher::after{content:'▾';font-size:0.6rem;color:var(--text-3);pointer-events:none;flex-shrink:0}.hero{display:flex;align-items:center;justify-content:space-between;gap:4rem;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);padding-block:var(--space-xl);max-width:1100px;margin-inline:auto;padding-inline:1.5rem}.hero-text{flex:1;max-width:560px;animation:slide-up 0.7s var(--ease) both}.hero-eyebrow{font-size:0.8rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--sakura);margin-bottom:1.4rem}.hero-heading{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;line-height:1.1;letter-spacing:-0.035em;color:var(--text-1);margin-bottom:1.25rem}.hero-heading em{font-style:normal;background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-mid) 55%,var(--sakura) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-sub{font-size:1.05rem;color:var(--text-2);line-height:1.75;margin-bottom:2.5rem;max-width:440px}.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem}.btn-primary{display:inline-flex;align-items:center;padding:0.85rem 2rem;background:var(--indigo);color:#fff;font-weight:600;font-size:0.95rem;border-radius:var(--r-full);box-shadow:0 4px 20px rgba(27,58,107,0.32);transition:transform var(--t-mid) var(--ease),background var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease)}.btn-primary:hover{transform:translateY(-2px);background:var(--indigo-mid);box-shadow:0 8px 32px rgba(27,58,107,0.42)}.btn-primary:active{transform:translateY(0)}.btn-ghost{display:inline-flex;align-items:center;padding:0.85rem 2rem;background:transparent;color:var(--text-2);font-weight:500;font-size:0.95rem;border-radius:var(--r-full);border:1.5px solid var(--border-2);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.btn-ghost:hover{color:var(--indigo);border-color:var(--indigo-soft);background:var(--indigo-soft)}.hero-visual{position:relative;flex-shrink:0;width:340px;height:340px;display:flex;align-items:center;justify-content:center;animation:slide-up 0.7s var(--ease) 0.15s both}.kana-main-wrap{position:relative;z-index:2;width:210px;height:210px;background:linear-gradient(145deg,var(--indigo) 0%,#264F90 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(27,58,107,0.38),0 0 0 18px rgba(27,58,107,0.06);animation:kana-pulse 4s ease-in-out infinite}.kana-main{font-family:var(--font-jp);font-size:92px;color:#fff;line-height:1;font-weight:300;user-select:none}.kana-orbit{position:absolute;inset:0;overflow:visible}.hero-visual{overflow:visible}.orbit-dot{position:absolute;width:62px;height:62px;background:var(--surface);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-jp);font-size:1.6rem;font-weight:400;color:var(--sakura);box-shadow:var(--shadow-md);animation:float-y 3.2s ease-in-out infinite;will-change:transform;user-select:none}.pos-top{top:0;left:calc(50% - 31px);animation-delay:0s}.pos-right{right:0;top:calc(50% - 31px);animation-delay:0.8s}.pos-bottom{bottom:0;left:calc(50% - 31px);animation-delay:1.6s}.pos-left{left:0;top:calc(50% - 31px);animation-delay:2.4s}@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}@keyframes kana-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes slide-up{from{transform:translateY(24px)}to{transform:translateY(0)}}@keyframes speaker-pulse{0%{transform:scale(1)}30%{transform:scale(1.35)}65%{transform:scale(0.95)}100%{transform:scale(1)}}.section{padding-block:var(--space-xl)}.section--alt{background-color:var(--bg-alt)}.section-head{text-align:center;margin-bottom:3.5rem}.section-head h2{font-size:clamp(1.9rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-0.03em;color:var(--text-1);margin-bottom:0.75rem}.script-panel-row{display:grid;grid-template-columns:1fr 1fr;width:100%;border-bottom:1px solid var(--border)}.script-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.55rem;padding:2.2rem 2rem;background:transparent;border:none;border-right:1px solid var(--border);cursor:pointer;position:relative;transition:background var(--t-fast) var(--ease)}.script-panel:last-child{border-right:none}.script-panel::after{content:'';position:absolute;bottom:0;left:15%;right:15%;height:2px;background:var(--indigo);border-radius:1px;transform:scaleX(0);transition:transform 0.25s var(--ease)}.script-panel.is-active::after{transform:scaleX(1)}.script-panel__en{font-family:var(--font-sans);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--text-3);transition:color var(--t-fast) var(--ease)}.script-panel__jp{font-family:var(--font-jp);font-size:clamp(1rem,1.4vw,1.3rem);font-weight:400;color:var(--text-3);transition:color var(--t-fast) var(--ease)}.script-panel.is-active .script-panel__en,.script-panel.is-active .script-panel__jp{color:var(--text-1)}.script-panel:not(.is-active):hover{background:rgba(0,0,0,0.025)}.script-panel:not(.is-active):hover .script-panel__en,.script-panel:not(.is-active):hover .script-panel__jp{color:var(--text-2)}@media (max-width:480px){.script-panel{padding:1.5rem 1rem}}.script-subtitle{text-align:center;font-size:0.9rem;color:var(--text-3);white-space:nowrap;margin:1.2rem auto 0}@media (max-width:600px){.script-subtitle{font-size:0.75rem;white-space:normal}.script-subtitle .subtitle-break{display:block}}#hiragana{padding-block:var(--space-md)}.head-kana{font-family:var(--font-jp);font-weight:300;color:var(--sakura)}.section-head p{font-size:1rem;color:var(--text-2);max-width:480px;margin-inline:auto}.kana-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.kana-card{background:var(--surface);border-radius:var(--r-md);cursor:pointer;border:1.5px solid var(--border);padding:1.5rem 1rem 1rem;display:flex;flex-direction:column;align-items:center;gap:0.4rem;position:relative;transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}.kana-empty{background:transparent;border:none;pointer-events:none}.kana-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:var(--shadow-lg);border-color:var(--indigo-soft)}.kana-card:hover .kc-svg path{stroke:var(--indigo)}.kc{font-family:var(--font-jp);font-size:2.5rem;line-height:1.2;color:var(--text-1);font-weight:400;display:flex;align-items:center;justify-content:center;gap:0.05em;transition:color var(--t-fast) var(--ease)}.kc-svg{display:block;width:1.1em;height:1.1em;flex-shrink:0;overflow:visible}.kc-svg--combo{width:0.85em;height:0.85em}.kc-svg path{transition:stroke var(--t-fast) var(--ease)}.kr{font-size:0.78rem;font-weight:600;color:var(--text-3);letter-spacing:0.06em;text-transform:lowercase}.sound-btn{position:absolute;bottom:0.55rem;right:0.55rem;width:28px;height:28px;background:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:5px;color:var(--border-2);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.sound-btn::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px}.sound-btn:hover{color:var(--indigo);background:var(--indigo-soft);transform:scale(1.15)}.sound-btn.playing{color:var(--sakura);animation:speaker-pulse 0.85s var(--ease)}.sound-btn svg{width:100%;height:100%}.tab-bar-wrap{position:sticky;top:68px;z-index:90;background:rgba(242,240,236,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding-block:0.8rem}.tab-bar{display:flex;gap:0.4rem;background:var(--surface);padding:0.35rem;border-radius:var(--r-xl);border:1.5px solid var(--border);box-shadow:var(--shadow-sm)}.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.1rem;padding:0.65rem 0.5rem;min-height:62px;background:none;border:none;border-radius:calc(var(--r-xl) - 4px);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.tab-btn:active{transform:scale(0.96)}.tab-btn.is-active{background:var(--indigo-soft);box-shadow:inset 0 0 0 1.5px rgba(27,58,107,0.18)}.tab-en{font-size:0.88rem;font-weight:700;color:var(--text-3);letter-spacing:-0.01em;line-height:1.2;transition:color var(--t-fast) var(--ease)}.tab-jp{font-family:var(--font-jp);font-size:0.72rem;font-weight:500;color:var(--text-3);line-height:1.3;transition:color var(--t-fast) var(--ease)}.tab-hint{font-size:0.58rem;color:var(--text-3);letter-spacing:0.02em;margin-top:0.08rem;opacity:0.6;transition:opacity var(--t-fast) var(--ease)}.tab-btn.is-active .tab-en{color:var(--indigo)}.tab-btn.is-active .tab-jp{color:var(--sakura)}.tab-btn.is-active .tab-hint{opacity:1;color:var(--text-2)}.tab-panels{padding-top:2rem}.tab-panel{display:none}.tab-panel.is-active{display:block;animation:panel-in 0.38s var(--ease) both}@keyframes panel-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.kana-grid--3col{grid-template-columns:repeat(3,1fr);max-width:560px;margin-inline:auto}.kana-grid--3col .kc{font-size:1.7rem}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}.feature-card{display:block;background:var(--surface);border-radius:var(--r-lg);padding:2rem 1.6rem;border:1.5px solid var(--border);transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--indigo-soft)}.feature-icon{font-size:2rem;margin-bottom:1.1rem;display:block;line-height:1}.feature-icon img{width:64px;height:64px;object-fit:contain;display:block}.feature-card h3{font-size:1rem;font-weight:600;color:var(--text-1);margin-bottom:0.5rem;letter-spacing:-0.01em}.feature-card p{font-size:0.88rem;color:var(--text-3);line-height:1.65}.footer{background:var(--text-1);padding-block:4rem 3rem;text-align:center}.footer .container{display:flex;flex-direction:column;align-items:center;gap:0.65rem}.footer-logo{font-family:var(--font-sans);font-size:2.2rem;font-weight:700;letter-spacing:-0.05em;color:#fff;margin-bottom:0.25rem}.footer-tag{font-size:0.9rem;color:rgba(255,255,255,0.45)}.footer-copy{font-size:0.78rem;color:rgba(255,255,255,0.25);margin-top:1.5rem}@media (max-width:1024px){.hero{gap:2.5rem;min-height:auto;padding-block:5rem}.hero-visual{width:280px;height:280px}.kana-main-wrap{width:175px;height:175px}.kana-main{font-size:78px}.orbit-dot{width:52px;height:52px;font-size:1.4rem}.feature-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.hero{flex-direction:column-reverse;text-align:center;padding-block:3rem 4rem;gap:2.5rem}.hero-text{max-width:100%}.hero-sub{max-width:100%}.hero-actions{justify-content:center}.hero-visual{width:240px;height:240px}.kana-main-wrap{width:152px;height:152px}.kana-main{font-size:66px}.orbit-dot{width:44px;height:44px;font-size:1.2rem}.nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:68px;left:0;right:0;background:rgba(250,249,247,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0.5rem 1rem 1rem;z-index:99;transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform 0.22s var(--ease),opacity 0.22s var(--ease)}.nav-links.is-open{transform:translateY(0);opacity:1;pointer-events:auto}.nav-links a{font-size:1rem;padding:0.75rem 0.5rem;border-bottom:1px solid var(--border)}.nav-links li:last-child a{border-bottom:none}.nav-hamburger{display:flex}.nav-inner{justify-content:flex-start;gap:0}.lang-switcher{margin-left:auto;margin-right:0.5rem}.kana-grid{grid-template-columns:repeat(5,1fr);gap:0.45rem}.kana-grid--3col{grid-template-columns:repeat(3,1fr);gap:0.65rem;max-width:100%}.kana-card{padding:0.75rem 0.3rem 0.65rem}.kc{font-size:1.55rem}.kr{font-size:0.65rem}.sound-btn{width:22px;height:22px;bottom:0.3rem;right:0.3rem}.kana-card .sound-btn{display:none}}@media (max-width:480px){.logo-name{display:none}.container{width:min(1100px,100% - 1.5rem)}.kana-grid{gap:0.3rem}.kana-grid--3col{grid-template-columns:repeat(3,1fr);gap:0.5rem;max-width:100%}.kana-card{padding:0.6rem 0.2rem 0.55rem}.kc{font-size:1.3rem}.kr{font-size:0.6rem}.sound-btn{width:18px;height:18px;bottom:0.25rem;right:0.25rem;padding:3px}.tab-hint{display:none}.tab-btn{min-height:54px;padding:0.55rem 0.4rem}.feature-grid{grid-template-columns:1fr}.btn-primary,.btn-ghost{width:100%;justify-content:center}.ws-custom-input{flex:1 1 100%;max-width:100%}.ws-custom-btn,.ws-custom-clear{flex-shrink:0}}.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(26,25,23,0.48);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:1.5rem;opacity:0;transition:opacity 0.26s ease}.modal-backdrop.is-open{opacity:1}.modal-card{position:relative;background:rgba(250,247,242,0.97);border-radius:var(--r-xl);padding:2.5rem 2rem 2rem;max-width:380px;width:100%;text-align:center;border:1px solid rgba(212,208,203,0.55);box-shadow:0 32px 80px rgba(27,58,107,0.16),0 2px 8px rgba(27,58,107,0.07);transform:translateY(28px) scale(0.95);transition:transform 0.38s cubic-bezier(0.34,1.56,0.64,1)}.modal-backdrop.is-open .modal-card{transform:translateY(0) scale(1)}.modal-close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;background:var(--surface-2);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:7px;color:var(--text-3);cursor:pointer;transition:background var(--t-fast) ease,color var(--t-fast) ease,transform var(--t-fast) ease}.modal-close:hover{background:var(--border);color:var(--text-1);transform:rotate(90deg)}.modal-kana{font-family:var(--font-jp);font-size:5rem;font-weight:300;color:var(--text-1);line-height:1;margin-bottom:0.35rem;letter-spacing:-0.02em;display:flex;align-items:center;justify-content:center;gap:0.08em}.modal-kana .kc-svg--single{width:1em;height:1em}.modal-kana .kc-svg--combo{width:0.68em;height:0.68em}.modal-roma{font-size:0.78rem;font-weight:700;color:var(--text-3);letter-spacing:0.2em;margin-bottom:1.5rem}.stroke-area{background:rgba(255,255,255,0.72);border-radius:var(--r-lg);border:1px solid rgba(229,226,222,0.8);padding:1.25rem 1rem 0.65rem;margin-bottom:1.5rem}#stroke-writer{display:flex;gap:0.5rem;justify-content:center;position:relative;align-items:center;min-height:160px}#stroke-writer svg{display:block}.stroke-char-container{position:relative;display:inline-block;line-height:0}.stroke-loading{display:flex;gap:8px;align-items:center;justify-content:center;min-height:160px}.loading-dot{width:8px;height:8px;background:var(--border-2);border-radius:50%;animation:loading-pulse 1.2s ease-in-out infinite}.loading-dot:nth-child(2){animation-delay:0.2s}.loading-dot:nth-child(3){animation-delay:0.4s}@keyframes loading-pulse{0%,80%,100%{transform:scale(1);opacity:0.35}40%{transform:scale(1.3);opacity:1}}.stroke-fallback{font-family:var(--font-jp);font-size:5.5rem;font-weight:300;color:var(--text-3);line-height:1;opacity:0.35;display:flex;align-items:center;justify-content:center;min-height:160px}.stroke-label{font-size:0.65rem;color:var(--text-3);letter-spacing:0.1em;text-transform:uppercase;margin-top:0.5rem;opacity:0.7}.practice-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;border-radius:var(--r-md)}.practice-status{text-align:center;font-size:0.8rem;font-weight:500;letter-spacing:0.05em;color:var(--text-3);min-height:1.3rem;margin-top:0.5rem;transition:color 0.2s}.practice-status.ok{color:#5B8A4E}.practice-status.done{color:var(--indigo);font-size:0.95rem}.practice-status.bad{color:var(--sakura)}@keyframes sparkle-burst{0%{transform:translate(0,0) scale(1.3);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}.sparkle{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:100;animation:sparkle-burst 0.72s ease-out forwards}.modal-btn--practice{color:var(--sakura);border-color:var(--sakura)}.modal-btn--practice:hover{background:var(--sakura-light)}.modal-btn--practice.is-active{background:var(--sakura);color:#fff;border-color:var(--sakura)}.modal-btn--again{color:var(--sakura);border-color:var(--sakura)}.modal-btn--again:hover{background:var(--sakura-light)}.modal-actions{display:flex;flex-direction:column;gap:0.6rem}.modal-actions__row{display:flex;gap:0.6rem}.modal-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:0.45rem;padding:0.8rem 1rem;border-radius:var(--r-full);font-size:0.88rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;border:none;transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);-webkit-tap-highlight-color:transparent}.modal-btn svg{width:15px;height:15px;flex-shrink:0}.modal-btn:active{transform:scale(0.95)}.modal-btn:disabled{opacity:0.35;cursor:not-allowed;pointer-events:none}.modal-btn--sound{background:var(--indigo);color:#fff;box-shadow:0 4px 16px rgba(27,58,107,0.3)}.modal-btn--sound:hover{background:var(--indigo-mid);box-shadow:0 6px 22px rgba(27,58,107,0.4)}.modal-btn--replay{background:var(--surface-2);color:var(--text-2);border:1.5px solid var(--border)}.modal-btn--replay:hover{background:var(--surface);border-color:rgba(27,58,107,0.2);color:var(--indigo)}@media (max-width:480px){.modal-card{padding:2rem 1.5rem 1.5rem;border-radius:var(--r-lg)}.modal-kana{font-size:4rem}}.about-page{min-height:100vh;padding-bottom:var(--space-xl)}.about-hero{padding:var(--space-xl) 0 var(--space-lg);text-align:center;border-bottom:1px solid var(--border);margin-bottom:var(--space-lg)}.about-eyebrow{font-size:0.8rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-3);margin-bottom:1.2rem}.about-title{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-0.03em;color:var(--text-1);line-height:1.1;margin-bottom:0.6rem}.about-title-jp{font-family:var(--font-jp);font-size:clamp(1.1rem,2.5vw,1.5rem);font-weight:400;color:var(--text-3);letter-spacing:0.08em}.about-message{max-width:640px;margin-inline:auto;padding-bottom:var(--space-lg)}.about-lead{font-size:1.15rem;font-weight:500;color:var(--text-1);margin-bottom:2rem}.about-message p{font-size:1rem;line-height:2;color:var(--text-2);margin-bottom:1.8rem}.about-sig{margin-top:2.5rem;margin-bottom:0}.about-sig-img{height:80px;width:auto;display:block;opacity:0.7;margin-left:auto}.about-divider{max-width:640px;margin:0 auto var(--space-lg);border:none;border-top:1px solid var(--border)}.about-contact{max-width:640px;margin-inline:auto}.about-contact-heading{font-size:0.78rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-3);margin-bottom:1.5rem}.about-contact-links{list-style:none;display:flex;flex-direction:column;gap:0.9rem}.about-link{font-size:0.95rem;color:var(--text-2);text-decoration:none;letter-spacing:0.02em;transition:color var(--t-fast) var(--ease)}.about-link:hover{color:var(--indigo)}.footer-legal{display:flex;align-items:center;gap:0.6rem;margin-top:0.4rem}.footer-legal a{font-size:0.75rem;color:rgba(255,255,255,0.35);transition:color var(--t-fast) var(--ease)}.footer-legal a:hover{color:rgba(255,255,255,0.7)}.footer-legal-sep{font-size:0.7rem;color:rgba(255,255,255,0.2)}.legal-page{min-height:100vh;padding-bottom:var(--space-xl)}.legal-hero{padding:var(--space-lg) 0 var(--space-md);border-bottom:1px solid var(--border);margin-bottom:var(--space-lg)}.legal-eyebrow{margin-bottom:1.2rem}.legal-back{font-size:0.82rem;font-weight:500;color:var(--text-3);text-decoration:none;transition:color var(--t-fast) var(--ease)}.legal-back:hover{color:var(--indigo)}.legal-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;letter-spacing:-0.03em;color:var(--text-1);line-height:1.1;margin-bottom:0.5rem}.legal-meta{font-size:0.82rem;color:var(--text-3)}.legal-body{max-width:680px;margin-inline:auto}.legal-body p{font-size:0.95rem;line-height:1.85;color:var(--text-2);margin-bottom:1.2rem}.legal-body h2{font-size:1rem;font-weight:600;color:var(--text-1);letter-spacing:-0.01em;margin-top:2.2rem;margin-bottom:0.65rem}.legal-body ul{list-style:disc;padding-left:1.4rem;margin-bottom:1.2rem}.legal-body ul li{font-size:0.95rem;line-height:1.85;color:var(--text-2);margin-bottom:0.3rem}.legal-body a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px;transition:opacity var(--t-fast) var(--ease)}.legal-body a:hover{opacity:0.75}.contact-wrap{max-width:560px;margin:2.5rem auto 4rem}.contact-form{display:flex;flex-direction:column;gap:1.2rem}.contact-field{display:flex;flex-direction:column;gap:0.4rem}.contact-label{font-size:0.8rem;font-weight:600;color:var(--text-2);letter-spacing:0.03em}.contact-req-star{color:var(--sakura)}.contact-input{font-family:var(--font-sans);font-size:0.9rem;color:var(--text-1);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:0.6rem 0.85rem;transition:border-color 0.18s var(--ease),box-shadow 0.18s var(--ease);outline:none;width:100%;box-sizing:border-box;-webkit-user-select:text;user-select:text}.contact-input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-soft)}.contact-textarea{resize:vertical;min-height:130px}.contact-req-note{font-size:0.75rem;color:var(--text-3);margin:0}.contact-error-msg{font-size:0.82rem;color:#e05;background:#fff0f3;border:1px solid #ffc0cb;border-radius:var(--r-sm);padding:0.55rem 0.85rem}.contact-send-btn{align-self:flex-start;font-family:var(--font-sans);font-size:0.88rem;font-weight:600;padding:0.6rem 1.6rem;border-radius:var(--r-full);border:none;background:var(--indigo);color:#fff;cursor:pointer;transition:opacity var(--t-fast) var(--ease)}.contact-send-btn:hover{opacity:0.82}.contact-success-msg{text-align:center;padding:3rem 1rem;font-size:1rem;color:var(--text-2)}.worksheet-page{min-height:100vh;background:var(--bg)}.ws-controls{padding:var(--space-md) 0;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}.ws-title{font-family:var(--font-jp);font-size:clamp(1.4rem,3vw,2rem);color:var(--indigo);font-weight:700;margin-top:0.5rem;line-height:1.2}.ws-sub{font-size:0.82rem;color:var(--text-3);margin-top:0.2rem;margin-bottom:1.1rem}.ws-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0.8rem 1.5rem}.ws-ctrl{display:flex;align-items:center;gap:0.55rem}.ws-ctrl-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);white-space:nowrap}.ws-toggles{display:flex;gap:0.25rem}.ws-toggle{font-family:var(--font-sans);font-size:0.78rem;font-weight:500;padding:0.28rem 0.7rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.ws-toggle.is-active{background:var(--indigo);color:#fff;border-color:var(--indigo)}.ws-toggle:not(.is-active):hover{border-color:var(--indigo);color:var(--indigo)}.ws-toolbar-actions{display:flex;align-items:center;gap:0.8rem;margin-left:auto}.ws-print-btn{display:flex;align-items:center;gap:0.4rem;font-family:var(--font-sans);font-size:0.8rem;font-weight:600;padding:0.42rem 1rem;border-radius:var(--r-full);border:none;background:var(--sakura);color:#fff;cursor:pointer;transition:opacity var(--t-fast) var(--ease)}.ws-print-btn:hover{opacity:0.82}.ws-loading{padding:4rem 1.5rem;text-align:center;color:var(--text-3);font-size:0.9rem;letter-spacing:0.03em}.ws-content{max-width:760px;margin:0 auto;padding:1.8rem 1.5rem 3rem}.ws-char-block{padding:1rem 0 0.9rem;border-bottom:1px solid var(--border);break-inside:avoid}.ws-page-break{break-before:page}.ws-char-header{display:flex;align-items:baseline;gap:0.7rem;margin-bottom:0.55rem}.ws-glyph{font-family:var(--font-jp);font-size:1.55rem;color:var(--indigo);line-height:1}.ws-roma{font-size:0.82rem;font-weight:700;color:var(--text-2);letter-spacing:0.07em}.ws-stroke-count{font-size:0.68rem;color:var(--text-3)}.ws-steps{display:flex;flex-wrap:wrap;gap:0.3rem 0.4rem;margin-bottom:0.65rem;align-items:flex-start}.ws-step{display:flex;flex-direction:column;align-items:center;gap:0.1rem}.ws-step-svg{display:block;border:1px solid var(--border);border-radius:4px;background:var(--surface);padding:2px}.ws-step-num{font-size:0.55rem;font-weight:600;color:var(--sakura);line-height:1}.ws-practice{display:flex;flex-wrap:wrap;gap:3px}.ws-box{position:relative;width:62px;height:62px;border:1px solid #D8D4CF;box-sizing:border-box;flex-shrink:0;overflow:hidden;background-color:#FDFCFB;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='62'%3E%3Cline x1='31' y1='0' x2='31' y2='62' stroke='%23E3DFD9' stroke-width='0.8' stroke-dasharray='3 2.5'/%3E%3Cline x1='0' y1='31' x2='62' y2='31' stroke='%23E3DFD9' stroke-width='0.8' stroke-dasharray='3 2.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%}.ws-box--trace{background-color:#FDFCFB}.ws-trace-char{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-jp);font-size:2.7rem;color:#1A1917;opacity:0.17;line-height:1;pointer-events:none}.ws-box--combo .ws-trace-char{font-size:1.25rem;letter-spacing:-0.05em}@media print{.no-print,.navbar,.footer,.hero,.section,.about-page,.legal-page,#kana-modal{display:none !important}#worksheet{display:block !important}@page{size:A4 portrait;margin:11mm 14mm 13mm}body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}.ws-content{max-width:100%;padding:0;margin:0}.ws-char-block{padding:3.2mm 0 3mm;border-bottom:0.5pt solid #DDD9D4}.ws-char-header{margin-bottom:1.8mm;gap:2mm}.ws-glyph{font-size:13pt}.ws-roma{font-size:7.5pt}.ws-stroke-count{font-size:6.5pt}.ws-steps{gap:1.2mm;margin-bottom:1.8mm}.ws-step-svg{width:11mm !important;height:11mm !important;padding:1px}.ws-step-num{font-size:5pt}.ws-practice{gap:1mm}.ws-toolbar,.ws-custom-accordion{display:none !important}.worksheet-page,.ws-content,.ws-char-block,.ws-box,.ws-box--trace,.ws-step-svg{background-color:#fff !important}.ws-box{width:16mm;height:16mm;border:0.5pt solid #CCCAC6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='50%25' y1='0' x2='50%25' y2='100%25' stroke='%23DEDAD5' stroke-width='0.5' stroke-dasharray='2 2'/%3E%3Cline x1='0' y1='50%25' x2='100%25' y2='50%25' stroke='%23DEDAD5' stroke-width='0.5' stroke-dasharray='2 2'/%3E%3C/svg%3E")}.ws-trace-char{font-size:10mm;opacity:0.18}.ws-box--combo .ws-trace-char{font-size:6mm}}.ws-custom-accordion{margin-top:0.75rem;padding:0.85rem 1rem 0.9rem;background:var(--surface);border:1px solid var(--border);border-radius:10px}.ws-custom-row{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:0.5rem 0.7rem}.ws-custom-input{flex:1 1 140px;max-width:320px;font-family:var(--font-jp);font-size:0.95rem;padding:0.36rem 0.85rem;border:1.5px solid var(--border-2);border-radius:var(--r-full);background:var(--surface);color:var(--text-1);outline:none;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);-webkit-user-select:text;user-select:text}.ws-custom-input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(27,58,107,0.08)}.ws-custom-input::placeholder{color:var(--text-3);font-family:var(--font-sans);font-size:0.8rem}.ws-custom-btn{font-family:var(--font-sans);font-size:0.8rem;font-weight:600;padding:0.38rem 0.95rem;border-radius:var(--r-full);border:1.5px solid var(--indigo);background:transparent;color:var(--indigo);cursor:pointer;white-space:nowrap;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}.ws-custom-btn:hover{background:var(--indigo);color:#fff}.ws-picker{margin-top:0.85rem;padding-top:0.8rem;border-top:1px solid var(--border)}.ws-picker-header{display:flex;align-items:center;gap:1rem;margin-bottom:0.65rem;flex-wrap:wrap}.ws-picker-hint{font-size:0.7rem;color:var(--text-3);font-style:italic}.ws-picker-section{display:flex;align-items:flex-start;gap:0.55rem;margin-bottom:0.45rem}.ws-picker-section-label{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);padding-top:0.45rem;min-width:38px;flex-shrink:0}.ws-picker-grid{display:flex;flex-wrap:wrap;gap:3px;max-width:calc(25 * 36px + 24 * 3px)}.ws-pick-btn{font-family:var(--font-jp);font-size:1rem;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-1);cursor:pointer;padding:0;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);line-height:1}.ws-pick-btn--wide{width:auto;padding:0 7px;font-size:0.88rem}.ws-pick-btn:hover{background:var(--indigo-soft);border-color:var(--indigo);color:var(--indigo)}.ws-pick-btn:active{background:var(--indigo);color:#fff;border-color:var(--indigo)}.ws-custom-clear{font-size:0.75rem;font-weight:600;color:var(--text-3);background:none;border:1px solid var(--border);border-radius:var(--r-full);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.ws-custom-clear:hover{color:var(--sakura);border-color:var(--sakura);background:var(--sakura-light)}.ws-custom-toggle-btn{display:inline-flex;align-items:center;gap:0.3rem;margin-left:auto;font-family:var(--font-sans);font-size:0.78rem;font-weight:600;color:var(--text-2);background:none;border:1.5px solid var(--border-2);border-radius:var(--r-full);padding:0.3rem 0.85rem;cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.ws-custom-toggle-btn:hover{color:var(--indigo);border-color:var(--indigo)}.ws-picker-toggle{display:inline-flex;align-items:center;gap:0.3rem;margin-top:0.7rem;font-family:var(--font-sans);font-size:0.76rem;font-weight:600;color:var(--text-3);background:none;border:1px solid var(--border);border-radius:var(--r-full);padding:0.28rem 0.75rem;cursor:pointer;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}.ws-picker-toggle:hover{color:var(--indigo);border-color:var(--indigo)}.ws-picker-arrow{font-size:0.6rem;line-height:1}.ws-picker{margin-top:0.6rem}.ws-custom-hint{font-size:0.7rem;color:var(--text-3);opacity:0.75;pointer-events:none;white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;margin:0}.ws-picker-row{display:flex;justify-content:flex-end;margin-top:0.6rem}.ws-picker-row .ws-picker-toggle{margin-top:0}.ws-custom-toggle-btn .ws-picker-arrow{font-size:0.8rem}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}