:root{--color-bg-primary:#0f171a;--color-bg-secondary:#162124;--color-bg-tertiary:#1e2b2e;--color-text-primary:#e0e6e6;--color-text-secondary:#9db0b0;--color-text-muted:#6b7d7d;--color-accent-primary:#5e8c8a;--color-accent-secondary:#87adaa;--color-accent-tertiary:#a5c1be;--gradient-primary:linear-gradient(135deg,#5e8c8a,#87adaa 50%,#a5c1be);--color-error:#c75050;--transition-fast:0.15s ease;--transition-normal:0.3s ease}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f171a;background-color:var(--color-bg-primary);color:#e0e6e6;color:var(--color-text-primary);font-family:Noto Sans JP,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:var(--color-bg-secondary);border-bottom:1px solid #ffffff0d;color:var(--color-text-primary);cursor:pointer;height:60px;left:0;padding:0 20px;position:fixed;top:0;width:100%;z-index:1000}.header,.logo{align-items:center;display:flex}.logo img{height:40px;margin-right:10px}.title{-webkit-text-fill-color:#0000;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:700}.footer{align-items:center;background-color:var(--color-bg-secondary);border-top:1px solid #ffffff0d;bottom:0;color:var(--color-text-muted);display:flex;font-size:14px;height:50px;justify-content:center;position:fixed;text-align:center;width:100%}.footer a{color:var(--color-accent-primary);text-decoration:none;transition:color var(--transition-fast)}.footer a:hover{color:var(--color-accent-secondary)}.home-page{align-items:center;background-color:var(--color-bg-primary);color:var(--color-text-primary);display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:80px 20px 70px;text-align:center}.kana-options{display:flex;gap:40px;justify-content:space-around;max-width:500px;width:100%}.kana-section{align-items:center;display:flex;flex-direction:column}.kana-section h2{color:var(--color-text-primary);font-size:1.5rem;margin-bottom:16px}.all-kana-section{margin:30px 0 20px}.all-kana-section h2{color:var(--color-text-primary);font-size:1.5rem;margin-bottom:16px}.option{align-items:center;background-color:var(--color-bg-tertiary);border:1px solid #5e8c8a33;border-radius:8px;color:var(--color-text-secondary);display:flex;font-size:16px;font-weight:500;justify-content:center;margin:8px;padding:12px 24px;text-decoration:none;transition:all var(--transition-normal);width:140px}.option:hover{background:var(--gradient-primary);box-shadow:0 4px 20px #5e8c8a4d;color:var(--color-bg-primary);transform:translateY(-2px)}@media (max-width:480px){.kana-options{flex-direction:column;gap:30px}.option{width:160px}}#kana-training-body{align-items:center;background-color:var(--color-bg-primary);color:var(--color-text-secondary);display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh;padding:80px 20px 70px}#kana-training-body h1{font-size:1.5rem;margin-bottom:8px}#kana,#kana-training-body h1{color:var(--color-text-primary)}#kana{font-family:Noto Sans JP,sans-serif;font-size:100px;font-weight:700;margin:20px 0}.btn{background-color:var(--color-bg-tertiary);border:1px solid #5e8c8a33;border-radius:8px;color:var(--color-text-secondary);cursor:pointer;font-size:16px;font-weight:500;min-width:120px;padding:12px 24px;transition:all var(--transition-normal)}.btn:hover{background:var(--gradient-primary);box-shadow:0 4px 20px #5e8c8a4d;color:var(--color-bg-primary);transform:translateY(-2px)}#answer{background-color:var(--color-bg-tertiary);border:1px solid #5e8c8a4d;border-radius:8px;color:var(--color-text-primary);font-size:18px;margin:20px;padding:12px 16px;text-align:center;transition:all var(--transition-fast);width:200px}#answer::placeholder{color:var(--color-text-muted)}#answer:focus{border-color:var(--color-accent-primary);box-shadow:0 0 0 3px #5e8c8a33;outline:none}.submit-btn{display:none}.submit-btn-container{display:flex;justify-content:center;width:100%}@media (max-width:768px){.submit-btn{display:inline-block}#error-msg{font-size:16px;padding:0 20px}#kana{font-size:80px}}#error-msg{background-color:#c750501a;border-radius:8px;color:var(--color-error);display:block;font-size:20px;font-style:normal;margin:16px 0;padding:12px 24px;text-align:center}
/*# sourceMappingURL=main.31e16179.css.map*/