@charset "UTF-8";.thumbnailWrap,body,header,html{box-sizing:border-box}#nowLoading,#thumbnailBack,.grayFilter,.homeButtonWrap,.sideContent,header,img#thumbnailImg{position:absolute}#setNos,.mainBackground{transform:translate3d(-50%,0,0)}#selectCharacterBack,#selectCharacterTitle{width:auto;transform:translate3d(0,-50%,0)}#groupLabels,#selectCharacterBack,#selectCharacterTitle{transform:translate3d(0,-50%,0)}#groupLabels .groupLabel,#groupLabels .labelSquare,#groupLabels .labelText{display:inline-block;vertical-align:middle}#writeCount,.groupNoText{font-family:Arial;color:#fff}#charBackSetting,#resetKey{height:5vh;top:3.5vh;z-index:10}#confirmDialog,#nowLoading,body{background-color:#fff}#confirmCancel,#confirmOK{bottom:20px;color:#007aff;cursor:pointer}html{touch-action:none;-ms-touch-action:none}#nowLoading{top:0;left:0;width:100%;height:100%;z-index:9999}body,html{margin:0;padding:0;width:100%;height:100%;font-size:1.1vh}body{font-family:'Noto Sans JP',sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,Arial,"メイリオ",Meiryo;line-height:1.5;position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden}header{top:0;left:0;width:100%;height:20px;background-color:#e74154;z-index:210}.sideContent.yellow,header.yellow{background-color:#f8c22e}.sideContent.green,header.green{background-color:#03af7a}.sideContent.blue,header.blue{background-color:#2859b7}.sideContent.purple,header.purple{background-color:#d160ff}.grayFilter{top:0;left:0;width:100%;height:100%;background:url("../img/common/title.png") center center/auto 60% no-repeat rgba(0,0,0,.2)}.sideContent{top:0;width:25vh;height:100%;text-align:center;background-color:#e74154;z-index:200}#leftContent{left:0;box-shadow:8px 0 10px -1px rgba(0,0,0,.31)}#rightContent{right:0;box-shadow:-8px 0 10px -1px rgba(0,0,0,.31)}.homeButtonWrap{top:18px;left:0;width:32%}.homeButton{width:100%;padding-top:100%;background:url("../img/common/homeIcon.png") center center/100% auto no-repeat}.mainBackground,button.setNo .setNoImage{background-position:center;background-repeat:no-repeat;opacity:.5}img.example{width:45%;height:auto;margin-top:48%}.thumbnailWrap{position:relative;display:block;margin:0 auto;width:56%}button.thumbnail{position:relative;display:block;width:100%;padding-top:100%;border-radius:1vh;border:1px solid #fff;box-shadow:4px 4px 10px rgba(0,0,0,.31);background-color:rgba(0,0,0,.25);box-sizing:border-box}#setNos,#thumbnailBack{border-radius:.5vh;box-sizing:border-box}button.thumbnail:active{box-shadow:none}button.thumbnail:disabled{box-shadow:none;cursor:default;pointer-events:none}#thumbnailBack{top:10%;left:10%;width:80%;height:80%}img#thumbnailImg{top:.25vh;left:.25vh;width:calc(100% - .5vh);height:auto;box-sizing:border-box}.pageButtons{display:-ms-flexbox;display:flex;flex-direction:row;justify-content:center;width:100%;margin:2% auto;box-sizing:border-box}.pageButtonWrap{position:relative;display:block;width:38%}input[type=button].pageButton{position:relative;display:block;width:100%;padding-top:82%;box-sizing:border-box}#prev{margin-right:.1vh;background:url("../img/common/prev.png") center center/100% auto no-repeat}#prev:active{background:url("../img/common/prev_on.png") center center/100% auto no-repeat}#prev:disabled{background:url("../img/common/prev_disabled.png") center center/100% auto no-repeat}#next{margin-left:.1vh;background:url("../img/common/next.png") center center/100% auto no-repeat}#next:active{background:url("../img/common/next_on.png") center center/100% auto no-repeat}#setNos{position:absolute;left:50%;bottom:4%}button.setNo{display:block;position:relative;width:100%;height:20%;border-bottom:0;box-sizing:border-box}button.setNo .setNoBorder{position:absolute;top:0;left:0;width:100%;height:100%;border-top:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;box-sizing:border-box}button.setNo:last-child .setNoBorder{border-bottom:1px solid #000}button.setNo.active .setNoBorder{border-top:5px solid #000;border-left:5px solid #000;border-right:5px solid #000;border-bottom:4px solid #000}button.setNo:last-child.active .setNoBorder{border-bottom:5px solid #000}button.setNo .setNoImage{position:absolute;top:0;left:0;width:100%;height:100%;background-size:100% auto;background-color:transparent;box-sizing:border-box}#writeCount{position:relative;margin:14% auto 0;font-size:7rem;font-weight:700}.countUnit{position:absolute;top:calc(3% + 7rem);right:10%;width:40%;height:auto}.okButtonWrap{position:relative;margin:32% auto 0;width:80%}.eraserWrap,.logo{position:absolute}#ok{width:100%;padding-top:83.5%;background:url("../img/common/ok.png") center center/100% auto no-repeat}#ok:active{background:url("../img/common/ok_on.png") center center/100% auto no-repeat}#ok:disabled{background:url("../img/common/ok_disabled.png") center center/100% auto no-repeat}.eraserWrap{left:10%;bottom:16%;width:80%}#eraser{width:100%;padding-top:49%;background:url("../img/common/eraser.png") center center/100% auto no-repeat}#eraser:active{background:url("../img/common/eraser_on.png") center center/100% auto no-repeat}.logo{left:15%;bottom:3%;width:70%;height:auto}#appCanvas,#selectCharacterList,.mainBackground{position:absolute;height:100%;width:100%;top:0}main{position:absolute;top:20px;left:25vh;width:calc(100% - 25vh * 2);height:calc(100% - 20px)}#appCanvas{left:0;z-index:100}.mainBackground{left:50%;max-width:100vh;background-size:98% auto}#charBackSettingDialog,#confirmDialog,#settingDialog,.groupNoText{top:50%;transform:translate3d(-50%,-50%,0)}#romajiGridImg.mainBackground{opacity:.6;background-image:url("../img/common/line4.png")}#romajiBaseLineImg.mainBackground{opacity:.6;background-image:url("../img/common/base.png")}#gridImg.mainBackground{opacity:.6;background-image:url("../img/common/grid.png")}#frameImg.mainBackground{opacity:.6;background-image:url("../img/common/frame.png")}#selectCharacterList{left:0;z-index:400}.selectCharacterListHeader{position:relative;margin:0 auto;padding:0 20px;width:100%;height:11vh;text-align:left;box-sizing:border-box}#selectCharacterBack{position:relative;top:50%;height:60%;cursor:pointer}#selectCharacterTitle{position:relative;top:50%;left:2%;height:50%;vertical-align:top}#groupLabels{position:absolute;display:block;padding:1.3vh 3vw;top:50%;right:10vh;border:1px solid #adadad;border-radius:2vh;font-size:0}#groupLabels .groupLabel{position:relative;margin:0 2vw 0 0;font-size:0}#groupLabels .groupLabel:last-child{margin-right:0}#groupLabels .labelSquare{position:relative;width:3.5vh;height:3.5vh;background:red}#groupLabels .labelText{position:relative;margin-left:10px;font-size:2rem;font-weight:700}.selectCharacterListContent{display:none;position:relative;margin:0 auto 40px;padding:0 20px;width:100%;height:calc(90vh - 60px);overflow-y:scroll;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;align-content:flex-start}.selectCharacterWrapper{position:relative;width:calc((100vw - 60px)/ 10);height:calc((100vw - 60px)/ 10);margin:10px 0;border:1px solid #adadad;cursor:pointer;box-sizing:border-box}.selectCharacterWrapper.grouping{width:calc((100vw - 80px)/ 11);height:calc((100vw - 80px)/ 11)}.selectCharacterWrapper.selected{border:4px solid #c6161e}.selectCharacterWrapper .hoverFilter{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent}.selectCharacterWrapper:active .hoverFilter,.selectCharacterWrapper:hover .hoverFilter{background-color:rgba(0,0,0,.1)}img.selectCharacter{width:100%;height:auto}.listGroupWrapper{position:relative;width:100%;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;align-content:flex-start}.listGroupNo{position:relative;width:calc((100vw - 80px)/ 11);height:calc((100vw - 80px)/ 11);margin:10px 20px 10px 0;border-radius:1vw;border:none;box-sizing:border-box}.groupNoText{position:absolute;left:50%;font-size:5.3vw;letter-spacing:-.05em}.listGroupContent{position:relative;flex:1;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;align-content:flex-start}#settingDialog{position:absolute;left:50%;width:68vh;height:82vh;background-color:#fffcdd;border:3px solid #c6161e;border-radius:2vh;box-sizing:border-box;z-index:300}img.selectBoxTitle{position:absolute;width:42%;height:auto;top:4vh;left:20vh}#resetKey{position:absolute;width:calc(5vh / 100 * 98);right:10vh;background:url("../img/common/resetKeyButton.png") center center/auto 100% no-repeat}#charBackSetting{position:absolute;width:5vh;right:3vh;background:url("../img/common/settingIcon.png") center center/auto 100% no-repeat}.selectKanjiBack{position:relative;width:calc(26vh / 340 * 820);height:26vh;margin:3vh auto 0;padding:0 1vh 1vh 2vh;background:url("../img/common/selectKanjiBack.png") center center/auto 100% no-repeat;box-sizing:border-box;display:-ms-flexbox;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;z-index:0}button.grader{position:relative;width:calc(60vh / 6);height:calc(60vh / 6)}#grader1{background:url("../img/common/grader1Button.png") center center/100% auto no-repeat}#grader1.active,#grader1:active{background:url("../img/common/grader1Button_on.png") center center/90% auto no-repeat}#grader1:disabled{background:url("../img/common/grader1Button_disabled.png") center center/100% auto no-repeat}#grader2{background:url("../img/common/grader2Button.png") center center/100% auto no-repeat}#grader2.active,#grader2:active{background:url("../img/common/grader2Button_on.png") center center/90% auto no-repeat}#grader2:disabled{background:url("../img/common/grader2Button_disabled.png") center center/100% auto no-repeat}#grader3{background:url("../img/common/grader3Button.png") center center/100% auto no-repeat}#grader3.active,#grader3:active{background:url("../img/common/grader3Button_on.png") center center/90% auto no-repeat}#grader3:disabled{background:url("../img/common/grader3Button_disabled.png") center center/100% auto no-repeat}#grader4{background:url("../img/common/grader4Button.png") center center/100% auto no-repeat}#grader4.active,#grader4:active{background:url("../img/common/grader4Button_on.png") center center/90% auto no-repeat}#grader4:disabled{background:url("../img/common/grader4Button_disabled.png") center center/100% auto no-repeat}#grader5{background:url("../img/common/grader5Button.png") center center/100% auto no-repeat}#grader5.active,#grader5:active{background:url("../img/common/grader5Button_on.png") center center/90% auto no-repeat}#grader5:disabled{background:url("../img/common/grader5Button_disabled.png") center center/100% auto no-repeat}#grader6{background:url("../img/common/grader6Button.png") center center/100% auto no-repeat}#grader6.active,#grader6:active{background:url("../img/common/grader6Button_on.png") center center/90% auto no-repeat}#grader6:disabled{background:url("../img/common/grader6Button_disabled.png") center center/100% auto no-repeat}.otherSettingDialogButtons{position:relative;width:64.5vh;height:48vh;margin:2vh 1.5vh 0 2vh;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-content:space-between}button.settingDialogButton.other{position:relative;width:32vh;height:calc(32vh / 419 * 204)}#katachi{background:url("../img/common/katachiButton.png") center center/100% auto no-repeat}#katachi.active,#katachi:active{background:url("../img/common/katachiButton_on.png") center center/96% auto no-repeat}#katachi:disabled{background:url("../img/common/katachiButton_disabled.png") center center/100% auto no-repeat}#hiraganaSuji{background:url("../img/common/hiraganaSujiButton.png") center center/100% auto no-repeat}#hiraganaSuji.active,#hiraganaSuji:active{background:url("../img/common/hiraganaSujiButton_on.png") center center/96% auto no-repeat}#hiraganaSuji:disabled{background:url("../img/common/hiraganaSujiButton_disabled.png") center center/100% auto no-repeat}#katakana{background:url("../img/common/katakanaButton.png") center center/100% auto no-repeat}#katakana.active,#katakana:active{background:url("../img/common/katakanaButton_on.png") center center/96% auto no-repeat}#katakana:disabled{background:url("../img/common/katakanaButton_disabled.png") center center/100% auto no-repeat}#romaji{background:url("../img/common/romajiButton.png") center center/100% auto no-repeat}#romaji.active,#romaji:active{background:url("../img/common/romajiButton_on.png") center center/96% auto no-repeat}#romaji:disabled{background:url("../img/common/romajiButton_disabled.png") center center/100% auto no-repeat}#issyonikakikata{position:relative;width:64.5vh;height:calc(64.5vh / 844 * 204);background:url("../img/common/issyonikakikataButton.png") center center/100% auto no-repeat}#issyonikakikata:active{background:url("../img/common/issyonikakikataButton_on.png") center center/98% auto no-repeat}#issyonikakikata:disabled{background:url("../img/common/issyonikakikataButton_disabled.png") center center/100% auto no-repeat}#dialogBackground{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.75);z-index:200}#confirmDialog{display:none;position:absolute;left:50%;width:64vh;height:15vh;padding:20px 30px;border:none;border-radius:2vh;z-index:300}#confirmOK{position:absolute;right:30px;font-weight:700}#confirmCancel{position:absolute;right:calc(8rem + 30px)}#charBackSettingDialog{position:absolute;left:50%;width:100vh;max-width:100%;height:82vh;background-color:#ebebeb;border:3px solid #b2b2b2;border-radius:2vh;box-sizing:border-box;z-index:500;visibility:hidden}#charBackSettingClose{position:absolute;top:3vh;right:4vh;width:7vh;height:7vh;background:url("../img/common/closeButton.png") center center/100% auto no-repeat}.charBackSettingTitle{position:absolute;top:5vh;left:50%;width:auto;height:5vh;transform:translate3d(-50%,0,0)}.charBackSettingDescription{display:inline-block;position:absolute;top:15vh;left:10%;font-size:3.4vh;font-weight:700;color:#000}.charBackSettingDescription span[data-ruby]{position:relative;font-size:3.4vh}.charBackSettingDescription span[data-ruby]::before{content:attr(data-ruby);position:absolute;top:-1.5em;left:0;right:0;margin:auto;font-size:.25em;letter-spacing:.3em;text-align:center}#charBackSettingThumbnail{position:absolute;top:26vh;left:6%;width:48%;border:1px solid #000}#charBackSettingThumbnail>.inner{position:relative;width:0;height:0;padding-bottom:100%}#charBackSettingThumbnailImages{position:absolute;top:0;left:0;width:100%;height:100%}#charBackSettingThumbnailImages img{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.5}#selectCharBackBox{position:absolute;top:0;right:-8%;width:75%;height:100%;transform:translate3d(100%,0,0);display:flex;flex-direction:column;justify-content:space-around}label.selectCharBackColorLabel{position:relative;display:block;padding-left:20px;font-size:3.4vh;font-weight:700;color:#000}label.selectCharBackColorLabel input{position:absolute;top:50%;left:0;width:2vh;height:2vh;margin:0;transform:translate3d(0,-50%,0)}.selectCharBackColorSquare{display:inline-block;position:relative;top:50%;margin-right:5px;margin-left:5px;width:3.4vh;height:3.4vh;border:1px solid #b2b2b2;transform:translate3d(0,-50%,0)}#charBackSettingDialogBackground{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:400}@media (max-aspect-ratio:10/11){.charBackSettingDescription,label.selectCharBackColorLabel{font-size:4vw}#charBackSettingThumbnail{width:42%}#selectCharBackBox{width:100%}.selectCharBackColorSquare{width:4vw;height:4vw}}.blackCharBack #charBackSettingThumbnailImages img,.blackCharBack .mainBackground{opacity:.7}.blackCharBack button.setNo .setNoImage{opacity:1}#setNos.blackCharBack button.setNo .setNoBorder,#setNos.blackCharBack button.setNo.active .setNoBorder{border-color:#fff}.blackCharBack #groupLabels .labelText{color:#fff}