body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}header{font-size:18px;position:fixed;right:15px;top:10px}body{background-color:#f5f5f5;display:flex;font-family:Arial,sans-serif;height:100vh;justify-content:center;margin:0;padding:0}.App{margin-top:50px;text-align:center}h1{color:#333;font-weight:700}.squares,.title{margin-bottom:20px}.squares{display:flex;justify-content:center}.square{height:3rem;margin:0 .2rem;perspective:1000px;width:3rem}.square-inner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .8s;width:100%}.square.correct .square-inner,.square.incorrect .square-inner{transform:rotateY(180deg)}.square.correct .square-inner{transition-delay:0s}.square.correct:nth-child(2) .square-inner{transition-delay:.3s}.square.correct:nth-child(3) .square-inner{transition-delay:.6s}.square.correct:nth-child(4) .square-inner{transition-delay:.9s}.square.correct:nth-child(5) .square-inner{transition-delay:1.2s}.square.incorrect .square-inner{transition-delay:0s}.square.incorrect:nth-child(2) .square-inner{transition-delay:.3s}.square.incorrect:nth-child(3) .square-inner{transition-delay:.6s}.square.incorrect:nth-child(4) .square-inner{transition-delay:.9s}.square.incorrect:nth-child(5) .square-inner{transition-delay:1.2s}.square-back,.square-front{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:2px solid #787c7f;display:flex;font-size:1.5rem;height:100%;justify-content:center;position:absolute;width:100%}.square-back{transform:rotateY(180deg)}.correct .square-back{background-color:#6ca965;border:0;color:#fff}.incorrect .square-back{background-color:#787c7f;border:0;color:#fff}p{font-size:1.2rem;margin-top:20px}.kana-buttons{grid-gap:.2rem;display:grid;gap:.2rem;grid-template-columns:repeat(5,1fr) repeat(5,1fr);justify-items:center;margin-top:20px}.kana-buttons button{background-color:initial;border:1px solid #787c7f;border-radius:5px;color:#000;font-size:14px;margin:2px;padding:12px 7px}.submit-button{background-color:#333;border:none;border-radius:5px;color:#fff;font-size:16px;font-weight:700;padding:8px 25px}.clear-button,.submit-button{display:inline-block;margin:0 10px;text-decoration:none;transition:background-color .3s ease}.clear-button{background-color:#fff;border:1px solid #787c7f;border-radius:5px;color:#000;font-size:14px;padding:5px 10px}.history{margin-bottom:20px;margin-top:20px}.history h2{font-size:1.5rem}.history-entry{display:flex;justify-content:center;margin:5px 0}.clear-message{font-size:30px;margin-top:10px}.rule-input{display:none}.rule-text{font-size:16px;margin-bottom:20px}#overlay{position:absolute;visibility:visible;z-index:70}#bg_gray,#overlay{height:100%;left:0;top:0;width:100%}#bg_gray{background:#00000080;position:fixed;z-index:80}#window{background:#fff;border-radius:10px;box-shadow:0 0 20px -6px #0009;left:50%;min-height:200px;opacity:1;padding:20px;position:fixed;top:50%;transform:translate(-50%,-50%);width:70%;z-index:90}#btn_cloth{align-items:center;background-color:initial;border-radius:5px;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:20px;top:20px;width:40px;z-index:100}#btn_cloth:hover{opacity:.7}#btn_cloth span,#btn_cloth span:before{background:#333;border-radius:3px;display:block;height:3px;width:25px}#btn_cloth span{transform:rotate(45deg)}#btn_cloth span:before{bottom:0;content:"";position:absolute;transform:rotate(-90deg)}#popup:checked~#overlay{visibility:hidden}#popup:checked~#overlay #window{animation:fadein .5s forwards;animation-timing-function:ease-in-out}@keyframes fadein{0%{opacity:1}to{opacity:0}}#txt_label{cursor:pointer;font-size:12pt;text-decoration:underline}#txt_label:hover{opacity:.7}.overlay-clear{height:100%;left:0;position:absolute;top:0;width:100%;z-index:70}.sns-button{margin-top:20px}.sns-button a{background-color:#000;border-radius:5px;color:#fff;display:inline-block;font-size:16px;font-weight:700;padding:10px 20px;text-decoration:none;transition:background-color .3s ease}.credit{color:#777;font-size:14px;margin-bottom:20px;margin-top:20px}
/*# sourceMappingURL=main.2cc31060.css.map*/