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}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.header{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;display:flex;font-family:Yusei Magic,sans-serif;height:5rem;justify-content:space-between;left:0;padding:0 4vw;position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:2}#headerTitle{color:#e6e6e6;flex-shrink:1;font-size:min(2.5rem,6vw);font-weight:700;margin:0;min-width:0;white-space:nowrap}#links{color:#e6e6e6;flex-direction:row;flex-shrink:0;font-size:min(1rem,2vw);gap:1.5vw}#links,.header>a{align-items:center;display:flex}@media (max-width:768px){#headerTitle{font-size:min(2rem,5vw)}#links{font-size:min(.75rem,2vw);gap:1vw}}@media (max-width:480px){.header{align-items:center;flex-direction:column;gap:.3rem;height:auto;padding:.5rem 4vw}.header,.header>a{justify-content:center}.header>a{width:100%}#headerTitle{font-size:10vw;margin:0 auto;text-align:center;width:100%}#links{flex-direction:row;flex-wrap:wrap;font-size:3vw;gap:.75rem;justify-content:center}}body{font-family:Yusei Magic,sans-serif}.headerContainer{left:0;opacity:0;position:fixed;top:0;transition:opacity 1s ease-in-out;width:100%}.headerContainer.visible{opacity:1}.mainTitleContainer{color:#fff;display:flex;flex-direction:column;font-size:min(4rem,10vw);justify-content:center;margin-top:min(15rem,25vw);opacity:1;transition:opacity 1s ease-in-out}.mainTitleContainer.notVisible{opacity:0}#mainTitle{font-size:min(5rem,12vw)}.dot{-webkit-text-fill-color:#0000;background:linear-gradient(270deg,#a50026,#bc002d);-webkit-background-clip:text;background-clip:text;font-family:Georgia,serif;font-size:1.4em;line-height:0}.scrollDownIcon{align-self:center;filter:invert(1);height:min(1.5rem,4vw);margin-top:min(5rem,10vw);transform:rotate(90deg);width:min(1.5rem,4vw)}.restContainer{margin-bottom:min(10rem,20vw);margin-top:min(20rem,35vw)}.infoBox{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;display:flex;flex-direction:column;font-family:Yusei Magic,sans-serif;font-size:min(1rem,2.5vw);justify-content:center;margin-bottom:.2rem;margin-top:0;opacity:0;padding:20px;transition:opacity .75s ease-in-out;width:min(calc(33rem + 10px),90vw)}.infoBox.visible{opacity:1}@media (max-width:768px){.mainTitleContainer{font-size:min(3rem,8vw);margin-top:min(10rem,20vw)}#mainTitle{font-size:min(4rem,10vw)}}@media (max-width:480px){.mainTitleContainer{font-size:8vw;margin-top:15vw}#mainTitle{font-size:10vw}.infoBox{font-size:3.5vw;padding:12px}}.headerHiragana{align-items:center;background:#000;display:flex;font-family:Yusei Magic,sans-serif;font-weight:700;gap:2rem;height:2rem;justify-content:center;left:0;position:-webkit-sticky;position:sticky;top:5rem;width:100%;z-index:1}a{color:#e6e6e6;text-decoration:none}body{background-attachment:fixed;background-blend-mode:screen;background-color:#000;background-image:linear-gradient(135deg,#ffffff1a,#0000),linear-gradient(315deg,#fff0,#0003);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;color:#fff;margin:0;min-height:100vh}.gojuonContainer{align-items:start;box-sizing:border-box;display:grid;grid-template-columns:1fr auto 1fr;margin-bottom:5rem;scroll-margin-top:7rem;width:100%}.gojuonDisplay{--cell:min(5.5rem,14vw);--gap:2px;align-items:stretch;display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif;grid-column:2;width:calc(var(--cell)*6 + var(--gap)*5)}.romajiButton{align-items:center;box-sizing:border-box;display:flex;gap:.75rem;margin-bottom:-1rem;width:100%}.romajiButton h3{flex:1 1;font-size:min(1rem,2.5vw);margin:0;white-space:normal}.infoButtonDakuten,.infoButtonGojuon,.infoButtonYoon{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;font-family:Yusei Magic,sans-serif;height:2rem;justify-content:space-between;padding-left:1rem;position:relative;width:100%;z-index:1}.infoButtonDakuten.active,.infoButtonGojuon.active,.infoButtonYoon.active{border:none}.buttonIconDakuten,.buttonIconGojuon,.buttonIconYoon{filter:invert(1);flex-shrink:0;height:1.5rem;margin-right:.5rem;transform:rotate(90deg);width:1.5rem}.infoButtonDakuten.active .buttonIconDakuten,.infoButtonGojuon.active .buttonIconGojuon,.infoButtonYoon.active .buttonIconYoon{transform:rotate(270deg)}.infoBoxDakuten,.infoBoxGojuon,.infoBoxYoon{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);box-sizing:border-box;display:flex;flex-direction:column;font-family:Yusei Magic,sans-serif;font-size:.8rem;justify-content:center;max-height:0;overflow:hidden;padding-left:1rem;padding-right:1rem;transition:max-height .5s ease;width:100%}.infoBoxDakuten h2,.infoBoxGojuon h2,.infoBoxYoon h2{opacity:0;transition:opacity .1s ease 0s}.infoBoxDakuten.open,.infoBoxGojuon.open,.infoBoxYoon.open{max-height:25rem}.infoBoxDakuten.open h2,.infoBoxGojuon.open h2,.infoBoxYoon.open h2{opacity:1;transition:opacity .2s ease .3s}.hiraganaDisplay{grid-row-gap:var(--gap);grid-column-gap:var(--gap);column-gap:var(--gap);display:grid;grid-template-columns:repeat(6,var(--cell));margin-bottom:.1rem;margin-top:2rem;row-gap:var(--gap)}.emptySlotHiragana,.firstHiragana,.singleHiragana,.singleKeyRomaji{box-sizing:border-box;font-size:min(1.5rem,6vw);height:var(--cell);width:var(--cell)}.singleHiragana{align-items:center;background:linear-gradient(270deg,#a50026,#bc002d);color:#e6e6e6;display:flex;justify-content:center;margin:0}.firstHiragana,.singleKeyRomaji{align-items:center;background-color:#000;color:#e6e6e6;display:flex;justify-content:center;margin:0;position:relative}.emptySlotHiragana{background-color:#86001f;margin:0;position:relative}.romajiKeyDisplay{background:#000;border-radius:50%;bottom:2px;color:#e6e6e6;font-size:min(.9rem,2.5vw);height:min(1.7rem,4.5vw);position:absolute;right:2px;width:min(1.7rem,4.5vw)}.infoTitle,.romajiKeyDisplay{align-items:center;display:flex;justify-content:center}.infoTitle{font-family:Yusei Magic,sans-serif;font-size:min(2rem,5vw);margin-bottom:2rem;text-align:center}.specialFont{font-family:Arial}.switch{display:inline-block;height:1rem;position:relative;width:2rem}.switch input{height:0;opacity:0;width:0}.slider{background-color:#ccc;border-radius:1rem;bottom:0;cursor:pointer;left:0;right:0;top:0}.slider,.slider:before{position:absolute;transition:.4s}.slider:before{background-color:#fff;border-radius:50%;bottom:.125rem;content:"";height:.75rem;left:.125rem;width:.75rem}input:checked+.slider{background-color:#bc002d}input:checked+.slider:before{transform:translateX(1rem)}@media (max-width:768px){.gojuonDisplay{--cell:min(5.5rem,13vw);--gap:0px}.hiraganaDisplay{gap:0}}@media (max-width:480px){.gojuonContainer{grid-template-columns:0 auto 0}.gojuonDisplay{--cell:min(5.5rem,15vw);--gap:0px}.hiraganaDisplay{gap:0;margin-bottom:.3rem}.infoTitle{font-size:6vw}.romajiButton h3{font-size:.85rem}.gojuonContainer{margin-bottom:3rem}}.converterBox{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%}#inputDisplay textarea{background:linear-gradient(270deg,#a50026,#bc002d);border:none;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;height:40vw;margin:.1rem;max-height:20rem;max-width:20rem;min-height:10rem;min-width:10rem;overflow-wrap:break-word;overflow-y:auto;padding:20px;resize:none;vertical-align:top;white-space:normal;width:40vw;word-break:break-word}#inputDisplay textarea,.inputDisplay::placeholder{color:#e6e6e6;font-size:1.5vw}.contContainer{margin-top:5rem;padding:0 1rem}.contContainer,.converterDisplay{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;width:100%}.converterDisplay{background:linear-gradient(270deg,#a50026,#bc002d);font-family:Yusei Magic,sans-serif;font-size:1.5vw;height:auto;margin-bottom:.2rem;margin-top:0;max-width:40.2rem;min-height:6rem;padding:20px}@media (max-width:768px){.converterBox{flex-direction:column}#inputDisplay textarea{font-size:3.5vw;height:50vw;max-height:none;max-width:100%;width:80vw}.inputDisplay::placeholder{font-size:3.5vw}.converterDisplay{font-size:3.5vw;max-width:100%;width:80vw}}@media (max-width:480px){#inputDisplay textarea{font-size:4.5vw;height:60vw;padding:12px;width:90vw}.inputDisplay::placeholder{font-size:4.5vw}.converterDisplay{font-size:4.5vw;padding:12px;width:90vw}.contContainer{margin-top:2rem}}
/*# sourceMappingURL=main.1c2617b4.css.map*/