@charset "UTF-8";.content,body{bottom:0;right:0;top:0;left:0}#nowLoading,.content,.grayFilter,body,html{height:100%;width:100%}#nowLoading,#thumbnailBack,.content,.grayFilter,.headerBack,.homeButtonWrap,.quizModeButton,.sideContent,header,img#thumbnailImg{position:absolute}#confirmDialog,#nowLoading,body{background-color:#fff}.writeCount,.writeCount4word{font-family:Arial;font-weight:700}html{touch-action:none;-ms-touch-action:none}#nowLoading{top:0;left:0;z-index:9999}body,html{margin:0;padding:0;font-size:1.1vh;box-sizing:border-box}body{font-family:'Noto Sans JP',sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Yu Gothic",YuGothic,Arial,"メイリオ",Meiryo;line-height:1.5;position:fixed;overflow:hidden}.content{visibility:hidden}header{top:0;left:0;width:100%;height:20px;background-color:#e74154;z-index:210}button.setNo4englishWord.active:last-child,button.setNo4japaneseWord.active:last-child,button.setNo4romajiWord.active:last-child,button.thumbnail:active,header.wordHeader{box-shadow:none}.sideContent.yellow,.wordMainArea.yellow,header.yellow{background-color:#f8c22e}.sideContent.green,.wordMainArea.green,header.green{background-color:#03af7a}.sideContent.blue,.wordMainArea.blue,header.blue{background-color:#2859b7}.sideContent.purple,.wordMainArea.purple,header.purple{background-color:#a260bf}.grayFilter{top:0;left:0;background:url("../img/common/title.png") center center/auto 60% no-repeat rgba(0,0,0,.2)}.headerBack{top:0;left:0;width:100%;height:20px;box-shadow:0 8px 10px -1px rgba(0,0,0,.31);z-index:0}.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%}.homeButtonWrap4englishWord{position:absolute;top:-2px;left:0;width:8vh;height:8vh}#setNos,.quizModeButton{left:50%;transform:translate3d(-50%,0,0)}.homeButton{width:100%;padding-top:100%;background:url("../img/common/homeIcon.png") center center/100% auto no-repeat}.quizModeButton{bottom:41vh;bottom:calc(var(--vh,1vh) * 41);width:22vh;width:calc(var(--vh,1vh) * 22);height:8vh;height:calc(var(--vh,1vh) * 8);background:url("../img/common/quizModeButton.png") center center/100% auto no-repeat;box-sizing:border-box}.thumbnailWrap,button.thumbnail{position:relative;display:block;box-sizing:border-box}.quizModeButton.off{background-image:url("../img/common/quizModeButton_off.png")}img.example{width:45%;height:auto;margin-top:48%}.thumbnailWrap{margin:0 auto;width:56%}button.thumbnail{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)}#thumbnailBack{top:10%;left:10%;width:80%;height:80%;border-radius:.5vh;box-sizing:border-box}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,button.setNo,input[type=button].pageButton{display:block;position:relative}.pageButtonWrap{width:38%}input[type=button].pageButton{width:100%;padding-top:82%;box-sizing:border-box}#setNos,button.setNo .setNoBorder,button.setNo .setNoImage{position:absolute;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{bottom:4%;border-radius:.5vh}button.setNo{width:100%;height:20%;border-bottom:0;box-sizing:border-box}button.setNo .setNoBorder{top:0;left:0;width:100%;height:100%;border-top:1px solid #000;border-left:1px solid #000;border-right:1px solid #000}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{top:0;left:0;width:100%;height:100%;background-position:center;background-size:100% auto;background-repeat:no-repeat;background-color:transparent;opacity:.5}button.settingButton,button.settingButton4englishWord,button.settingButton4japaneseWord,button.settingButton4romajiWord{display:block;position:relative;width:9vh;height:9vh;margin:0 auto;box-sizing:border-box}button#tomeHane.settingButton{background:url("../img/common/tomehaneButton.png") center center/100% auto no-repeat}button#tomeHane.settingButton.off{background:url("../img/common/tomehaneButton_off.png") center center/100% auto no-repeat}button#strokeOrder.settingButton{background:url("../img/common/strokeOrderButton.png") center center/100% auto no-repeat}button#strokeOrder.settingButton.katachi{background:url("../img/common/strokeButton.png") center center/100% auto no-repeat}button#strokeOrder.settingButton.off{background:url("../img/common/strokeOrderButton_off.png") center center/100% auto no-repeat}button#strokeOrder.settingButton.katachi.off{background:url("../img/common/strokeButton_off.png") center center/100% auto no-repeat}button#character.settingButton{background:url("../img/common/characterButton.png") center center/100% auto no-repeat}button#character.settingButton.katachi{background:url("../img/common/shapeButton.png") center center/100% auto no-repeat}button#character.settingButton.alphabet,button#level1.settingButton.romaji,button#level2.settingButton.romaji,button#level3.settingButton.romaji,button#level4.settingButton.romaji{background:url("../img/common/romajiCharacterButton.png") center center/100% auto no-repeat}button#character.settingButton.off{background:url("../img/common/characterButton_off.png") center center/100% auto no-repeat}button#character.settingButton.katachi.off{background:url("../img/common/shapeButton_off.png") center center/100% auto no-repeat}button#character.settingButton.alphabet.off,button#level1.settingButton.romaji.off{background:url("../img/common/romajiCharacterButton_off.png") center center/100% auto no-repeat}button#grid.settingButton{background:url("../img/common/gridButton.png") center center/100% auto no-repeat}button#grid.settingButton.off{background:url("../img/common/gridButton_off.png") center center/100% auto no-repeat}button#romajiGrid.settingButton{background:url("../img/common/romajiGridButton.png") center center/100% auto no-repeat}button#romajiGrid.settingButton.off{background:url("../img/common/romajiGridButton_off.png") center center/100% auto no-repeat}button#romajiBaseLine.settingButton{background:url("../img/common/romajiBaseLineButton.png") center center/100% auto no-repeat}button#romajiBaseLine.settingButton.off{background:url("../img/common/romajiBaseLineButton_off.png") center center/100% auto no-repeat}button#frame.settingButton{background:url("../img/common/frameButton.png") center center/100% auto no-repeat}button#frame.settingButton.off{background:url("../img/common/frameButton_off.png") center center/100% auto no-repeat}.writeCount{position:relative;margin:3.5vh auto 0;font-size:7rem;color:#fff}.countUnit{position:absolute;top:calc(2.5vh + 7rem);right:10%;width:40%;height:auto}.ok{position:relative;margin:8vh auto 0;width:20vh;height:calc(20vh / 305 * 255);background:url("../img/common/ok.png") center center/100% auto no-repeat}#mainArea,#selectCharacterList,.eraser,.logo,.mainBackground{position:absolute}.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}.eraser{left:calc((100% - 20vh)/ 2);bottom:19vh;width:20vh;height:calc(20vh / 292 * 142);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:2.5vh;width:70%;height:auto}#appCanvas,#dialogBackground,#selectCharacterList,.mainBackground,.wordCanvas,img.selectCharacter{width:100%;height:100%}#mainArea{top:20px;left:25vh;width:calc(100% - 25vh * 2);height:calc(100% - 20px)}#appCanvas,.wordCanvas{position:absolute;top:0;left:0;z-index:100}.mainBackground{top:0;left:50%;max-width:100vh;background-position:center;background-size:98% auto;background-repeat:no-repeat;opacity:.4;transform:translate3d(-50%,0,0)}#tomeHaneImg.mainBackground{z-index:7}#strokeOrderImg.mainBackground{z-index:6}#characterImg.mainBackground{z-index:5}#gridImg.mainBackground{opacity:.6;background-image:url("../img/common/grid.png");z-index:4}#romajiGridImg.mainBackground{opacity:.6;background-image:url("../img/common/line4.png");z-index:3}#romajiBaseLineImg.mainBackground{opacity:.6;background-image:url("../img/common/base.png");z-index:2}#frameImg.mainBackground{opacity:.6;background-image:url("../img/common/frame.png");z-index:1}#selectCharacterList{top:0;left:0;z-index:400}.selectCharacterListHeader{position:relative;margin:0 auto;padding:15px 20px;width:100%;height:11vh;text-align:left;box-sizing:border-box}#selectCharacterBack{position:relative;top:50%;transform:translate3d(0,-50%,0);width:auto;height:80%;cursor:pointer}#selectCharacterTitle{position:relative;top:50%;left:20px;transform:translate3d(0,-50%,0);width:auto;height:70%;vertical-align:top}.selectCharacterListContent{display:none;position:relative;margin:0 auto 40px;padding: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 - 80px)/ 10);height:calc((100vw - 80px)/ 10);margin:10px 0;border:1px solid #adadad;cursor:pointer;box-sizing:border-box}.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)}#settingDialog{position:absolute;top:50%;left:50%;width:68vh;height:64vh;background-color:#fffcdd;border:3px solid #c6161e;border-radius:2vh;transform:translate3d(-50%,-50%,0);z-index:300}#languageSettingDialog,#variousSettingDialog{border:3px solid #b2b2b2;transform:translate3d(-50%,-50%,0);box-sizing:border-box;z-index:500;max-width:100%}.languageSettingButton{position:absolute;top:1.8vh;left:1.8vh;width:6vh;height:6vh;background:url("../img/common/languageSettingIcon.png") center center/100% auto no-repeat}img.selectBoxTitle{position:absolute;width:auto;height:4vh;top:4vh;left:50%;transform:translate3d(-50%,0,0)}#variousSetting{position:absolute;width:5vh;height:5vh;top:3.5vh;right:3vh;background:url("../img/common/settingIcon.png") center center/auto 100% no-repeat;z-index:10}.otherSettingDialogButtons{position:relative;width:95%;height:18vh;margin:10vh auto 0;display:-ms-flexbox;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-content:space-between}.RomajiAlphabetSettingDialogButtons{position:relative;width:64.5vh;height:32vh;margin:2vh 2vh 0;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:20vh;height:calc(20vh / 310 * 290)}button.settingDialogButton.RomajiAlphabet{position:relative;width:32vh;height:calc(32vh / 419 * 204)}#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}#japaneseWord{background:url("../img/common/japaneseButton.png") center center/100% auto no-repeat}#japaneseWord.active,#japaneseWord:active{background:url("../img/common/japaneseButton_on.png") center center/96% auto no-repeat}#japaneseWord:disabled{background:url("../img/common/japaneseButton_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}#alphabet{background:url("../img/common/alphabetButton.png") center center/100% auto no-repeat}#alphabet.active,#alphabet:active{background:url("../img/common/alphabetButton_on.png") center center/96% auto no-repeat}#alphabet:disabled{background:url("../img/common/alphabetButton_disabled.png") center center/100% auto no-repeat}#englishWord{background:url("../img/common/englishWordButton.png") center center/100% auto no-repeat}#englishWord.active,#englishWord:active{background:url("../img/common/englishWordButton_on.png") center center/96% auto no-repeat}#englishWord:disabled{background:url("../img/common/englishWordButton_disabled.png") center center/100% auto no-repeat}#romajiWord{background:url("../img/common/romajiWordButton.png") center center/100% auto no-repeat}#romajiWord.active,#romajiWord:active{background:url("../img/common/romajiWordButton_on.png") center center/96% auto no-repeat}#romajiWord:disabled{background:url("../img/common/romajiWordButton_disabled.png") center center/100% auto no-repeat}#dialogBackground{position:absolute;top:0;left:0;background-color:rgba(0,0,0,.75);z-index:250}#languageSettingDialog{display:none;position:absolute;top:55%;left:60%;width:100vh;height:70vh;background-color:#fff}.languageSettingDescription{position:absolute;top:7vh;left:6%;width:auto;height:8vh}.languageSettingSubDescription{position:absolute;top:18vh;left:6%;width:calc(100% - 7vh);height:8vh;background-position:center left;background-size:auto 100%;background-repeat:no-repeat}.changeLanguageBox{position:absolute;bottom:0;height:40vh;box-sizing:border-box}.changeLanguageBox.left{left:6%;width:10vh}.changeLanguageBox.right{right:6%;width:48vh}.languageSettingThumbnail{position:absolute;top:0;left:0;width:35vh;height:35vh;background-size:auto 100%;background-repeat:no-repeat;border:1px solid #000}.languageLabel{position:relative;display:block;margin-top:10px;height:4vh}.languageLabel:first-child{margin-top:0}.languageLabel input[type=radio]{position:absolute;top:55%;left:0;width:2vh;height:2vh;margin:0;transform:translate3d(0,-50%,0)}.languageLabel img.labelText{position:absolute;top:0;left:3vh;width:auto;height:100%}#confirmDialog{display:none;position:absolute;top:50%;left:50%;width:64vh;height:24vh;padding:20px 30px;border:none;border-radius:2vh;transform:translate3d(-50%,-50%,0);font-size:2rem;z-index:300}.dialogButtonArea{position:absolute;left:0;bottom:20px;width:100%;height:4vh;padding:0 30px;text-align:right;box-sizing:border-box}.dialogButton{position:relative;color:#007aff;cursor:pointer}#confirmOK{margin-left:40px;font-weight:700}#variousSettingDialog{position:absolute;top:50%;left:50%;width:135vh;height:90vh;background-color:#ebebeb;border-radius:2vh;visibility:hidden}#variousSettingClose{position:absolute;top:3vh;right:4vh;width:7vh;height:7vh;background:url("../img/common/closeButton.png") center center/100% auto no-repeat}.variousSettingTitle{position:absolute;top:5vh;left:4vh;width:auto;height:5vh}#variousSettingDialogBackground{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:400}.variousSettingButton,.whiteCharBack{background-color:#fff}.variousSettingButton{top:5vh;left:13%;width:27vh;height:8vh;border:3px solid #b2b2b2;font-size:3vh;font-weight:700}.variousSettingButton.off{background-color:#ebebeb;border:3px solid #b2b2b2;color:#b2b2b2}.variousSettingButton span[data-ruby]{position:relative;font-size:3vh}.variousSettingButton span[data-ruby]::before{content:attr(data-ruby);position:absolute;top:-1.5em;left:0;right:0;margin:auto;font-size:.35em;letter-spacing:.2em;text-align:center}#charBackSetting{position:absolute;padding-top:10px;top:20.3%;transform:translate3d(-50%,-50%,0);box-sizing:border-box;z-index:501;visibility:hidden}#languageSetting{position:absolute;top:29%;transform:translate3d(-50%,-50%,0);box-sizing:border-box;z-index:502;visibility:hidden}#charBackSettingDialog{position:absolute;top:55%;left:60%;width:100vh;max-width:100%;height:70vh;background-color:#fff;border:3px solid #b2b2b2;transform:translate3d(-50%,-50%,0);box-sizing:border-box;z-index:500;visibility:hidden}.charBackSettingDescription{display:inline-block;position:absolute;top:7vh;left:6%;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.2em;left:0;right:0;margin:auto;font-size:.35em;letter-spacing:.2em;text-align:center}#charBackSettingThumbnail{position:absolute;top:15vh;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:50%;left:50%;width:100%;transform:translate(-50%,-50%);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)}@media (max-aspect-ratio:10/11){.charBackSettingDescription,label.selectCharBackColorLabel{font-size:4vw}#charBackSettingThumbnail{width:42%}#selectCharBackBox{width:100%}.selectCharBackColorSquare{width:4vw;height:4vw}}.blackCharBack{background-color:#000}.yellowCharBack{background-color:#faf0da}.blueCharBack{background-color:#e4f9f5}.grayCharBack{background-color:#efefef}.blackCharBack #charBackSettingThumbnailImages img,.blackCharBack .japaneseWordCharacter,.blackCharBack .mainBackground,.blackCharBack .wordCharacter{opacity:.7}.blackCharBack button.setNo .setNoImage{opacity:1}#setNos.blackCharBack button.setNo .setNoBorder,#setNos.blackCharBack button.setNo.active .setNoBorder{border-color:#fff}button.setNo4englishWord,button.setNo4japaneseWord,button.setNo4romajiWord{display:block;width:100%;background-position:center;background-size:40% auto;background-repeat:no-repeat;background-color:transparent;border-bottom:1px solid #000;box-shadow:-8px 0 3px -3px rgba(0,0,0,.18) inset}.blackCharBack #groupLabels .labelText{color:#fff}.wordMainArea{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-color:#e74154}.answerArea,.displaySettingsArea,.questionArea{position:relative;box-sizing:border-box}.questionArea{width:100%;height:64%;padding-top:20px;padding-bottom:15px;display:-ms-flexbox;display:flex;flex-direction:row;justify-content:space-between}.answerArea{width:100%;height:36%}.displaySettingsArea{left:0;width:15%;min-width:calc(20vh + 30px);flex-grow:0;height:100%}#displaySettings4englishWord,#displaySettings4japaneseWord,#displaySettings4romajiWord{position:absolute;left:50%;bottom:0;width:20vh;width:calc(var(--vh,1vh) * 20);height:40vh;height:calc(var(--vh,1vh) * 40);border:1px solid #000;border-radius:.5vh;background-color:rgba(0,0,0,.3);transform:translate3d(-50%,0,0);box-sizing:border-box}.displaySetting4englishWord,.displaySetting4japaneseWord,.displaySetting4romajiWord{position:absolute;top:0;height:100%;border-radius:0 .5vh .5vh 0;box-sizing:border-box}#setNos4englishWord.displaySetting4englishWord,#setNos4japaneseWord.displaySetting4japaneseWord,#setNos4romajiWord.displaySetting4romajiWord{left:0;width:calc(45% + 1px);z-index:0}#setContent4englishWord.displaySetting4englishWord,#setContent4japaneseWord.displaySetting4japaneseWord,#setContent4romajiWord.displaySetting4romajiWord{right:0;width:55%;padding-top:1vh;background-color:#fff;display:-ms-flexbox;display:flex;flex-direction:column;justify-content:space-around;z-index:1}button.setNo4englishWord,button.setNo4romajiWord{position:relative;height:calc(100% / 3);box-sizing:border-box}button.setNo4englishWord:first-child,button.setNo4japaneseWord:first-child,button.setNo4romajiWord:first-child{border-radius:.5vh 0 0}button.setNo4englishWord:last-child,button.setNo4japaneseWord:last-child,button.setNo4romajiWord:last-child{border-bottom:none;border-radius:0 0 0 .5vh}button#set4englishWord1.setNo4englishWord,button#set4japaneseWord1.setNo4japaneseWord,button#set4romajiWord1.setNo4romajiWord{background-image:url("../img/common/settingButton1.png")}button#set4englishWord2.setNo4englishWord,button#set4japaneseWord2.setNo4japaneseWord,button#set4romajiWord2.setNo4romajiWord{background-image:url("../img/common/settingButton2.png")}button#set4englishWord3.setNo4englishWord,button#set4japaneseWord3.setNo4japaneseWord,button#set4romajiWord3.setNo4romajiWord{background-image:url("../img/common/settingButton3.png")}button.setNo4englishWord.active,button.setNo4japaneseWord.active,button.setNo4romajiWord.active{border-bottom:none;box-shadow:0 8px 3px -3px rgba(0,0,0,.18);background-color:#fff}button#set4englishWord1.setNo4englishWord.active,button#set4japaneseWord1.setNo4japaneseWord.active,button#set4romajiWord1.setNo4romajiWord.active{background-image:url("../img/common/settingButton1_on.png")}button#set4englishWord2.setNo4englishWord.active,button#set4japaneseWord2.setNo4japaneseWord.active,button#set4romajiWord2.setNo4romajiWord.active{background-image:url("../img/common/settingButton2_on.png")}button#set4englishWord3.setNo4englishWord.active,button#set4japaneseWord3.setNo4japaneseWord.active,button#set4romajiWord3.setNo4romajiWord.active{background-image:url("../img/common/settingButton3_on.png")}button#englishWord_allCharacter.settingButton4englishWord,button#romajiWord_allCharacter.settingButton4romajiWord{background:url("../img/common/englishWord/allCharacterButton.png") center center/100% auto no-repeat}button#englishWord_allCharacter.settingButton4englishWord.off,button#romajiWord_allCharacter.settingButton4romajiWord.off{background:url("../img/common/englishWord/allCharacterButton_off.png") center center/100% auto no-repeat}button#englishWord_1character.settingButton4englishWord,button#romajiWord_1character.settingButton4romajiWord{background:url("../img/common/englishWord/1characterButton.png") center center/100% auto no-repeat}button#englishWord_1character.settingButton4englishWord.off,button#romajiWord_1character.settingButton4romajiWord.off{background:url("../img/common/englishWord/1characterButton_off.png") center center/100% auto no-repeat}button#englishWord_grid.settingButton4englishWord,button#romajiWord_grid.settingButton4romajiWord{background:url("../img/common/englishWord/gridButton.png") center center/100% auto no-repeat}button#englishWord_grid.settingButton4englishWord.off,button#romajiWord_grid.settingButton4romajiWord.off{background:url("../img/common/englishWord/gridButton_off.png") center center/100% auto no-repeat}button.setNo4japaneseWord{position:relative;height:calc(100% / 4);box-sizing:border-box}button#set4japaneseWord4.setNo4japaneseWord{background-image:url("../img/common/settingButton4.png")}button#set4japaneseWord4.setNo4japaneseWord.active{background-image:url("../img/common/settingButton4_on.png")}button#japaneseWord_allCharacter.settingButton4japaneseWord{background:url("../img/common/japaneseWord/allCharacterButton.png") center center/100% auto no-repeat}button#japaneseWord_allCharacter.settingButton4japaneseWord.off{background:url("../img/common/japaneseWord/allCharacterButton_off.png") center center/100% auto no-repeat}button#japaneseWord_1character.settingButton4japaneseWord{background:url("../img/common/japaneseWord/1characterButton.png") center center/100% auto no-repeat}button#japaneseWord_1character.settingButton4japaneseWord.off{background:url("../img/common/japaneseWord/1characterButton_off.png") center center/100% auto no-repeat}button#japaneseWord_grid.settingButton4japaneseWord{background:url("../img/common/japaneseWord/gridButton.png") center center/100% auto no-repeat}button#japaneseWord_grid.settingButton4japaneseWord.off{background:url("../img/common/japaneseWord/gridButton_off.png") center center/100% auto no-repeat}button#japaneseWord_frame.settingButton4japaneseWord{background:url("../img/common/japaneseWord/frameButton.png") center center/100% auto no-repeat}button#japaneseWord_frame.settingButton4japaneseWord.off{background:url("../img/common/japaneseWord/frameButton_off.png") center center/100% auto no-repeat}.questionContentArea{position:relative;height:100%;flex-grow:1;box-sizing:border-box}.questionImgArea{position:absolute;top:0;left:50%;max-width:100%;width:36vh;width:calc(var(--vh,1vh) * 36);height:36vh;height:calc(var(--vh,1vh) * 36);background-color:#fff;transform:translate3d(-50%,0,0);box-sizing:border-box;z-index:100}.questionImg,.questionImgTitle{left:0;width:100%;height:100%;background-position:center;background-size:100% auto;background-repeat:no-repeat;position:absolute;top:0}button.soundButton{position:absolute;top:1vh;right:-1vh;width:12vh;height:calc(12vh / 198 * 190);background:url("../img/common/sound.png") center center/100% auto no-repeat;transform:translate3d(100%,0,0);box-sizing:border-box}button.soundButton:active{background:url("../img/common/sound_on.png") center center/100% auto no-repeat}button.soundButton.letter{position:relative;margin:8vh auto 0;transform:none}button.pagingButton{position:absolute;top:50%;width:14vh;height:calc(14vh / 219 * 150);box-sizing:border-box}button.pagingButton.prev{left:-.8vh;background:url("../img/common/prevWord.png") center center/100% auto no-repeat;transform:translate3d(-100%,-50%,0)}button.pagingButton.prev:active{background:url("../img/common/prevWord_on.png") center center/100% auto no-repeat}button.pagingButton.prev:disabled{background:url("../img/common/prevWord_disabled.png") center center/100% auto no-repeat}button.pagingButton.next{right:-1vh;background:url("../img/common/nextWord.png") center center/100% auto no-repeat;transform:translate3d(100%,-50%,0)}button.pagingButton.next:active{background:url("../img/common/nextWord_on.png") center center/100% auto no-repeat}.questionImg{z-index:0}.questionImgTitle{z-index:10}.exampleTextArea.off .englishWordGridLine,.exampleTextArea.off .exampleText,.questionImgArea.off .questionImgTitle{display:none}.questionImgTitleButton{position:absolute;left:1px;bottom:0;width:25vh;height:6.5vh;border:1px solid #fff;border-top-left-radius:10px;border-bottom-left-radius:10px;background:url("../img/common/problemText.png") center center/auto 38% no-repeat #fe7f00;transform:translate3d(-100%,0,0);box-sizing:border-box}.exampleTextArea,.exampleTextButton{border:1px solid #fff;position:absolute;box-sizing:border-box}.questionImgArea.off .questionImgTitleButton{background:url("../img/common/problemText_off.png") center center/auto 38% no-repeat #d0d0d0}.exampleTextArea{left:0;bottom:0;width:100%;height:35%;z-index:100}.exampleTextArea.off{background-color:#d0d0d0}.exampleTextArea .englishWordGridLine{z-index:1}.exampleText{position:absolute;top:1%;left:0;width:100%;height:100%;background-position:center;background-size:auto 100%;background-repeat:no-repeat;background-color:transparent;z-index:10}.exampleTextButton{top:1px;right:-1px;width:25vh;height:6.5vh;border-top-right-radius:10px;border-top-left-radius:10px;background:url("../img/common/exampleText.png") center center/55% auto no-repeat #fe7f00;transform:translate3d(0,-100%,0)}.exampleGridArea,.ok4word{transform:translate3d(-50%,-50%,0)}.exampleTextArea.off .exampleTextButton{border-bottom:1px solid #d0d0d0;background:url("../img/common/exampleText_off.png") center center/55% auto no-repeat #d0d0d0}.exampleGridArea{position:absolute;top:50%;left:50%;width:100%;height:90%}@media screen and (max-width:130vh){.exampleTextButton,.questionImgTitleButton,button.pagingButton,button.soundButton{display:none}}.wordButtonArea{position:relative;width:15%;min-width:calc(20vh + 20px);flex-grow:0;height:100%;box-sizing:border-box}.writeCount4word{position:relative;margin:0 auto;font-size:7rem;color:#fff;text-align:center}.countUnit4word{position:absolute;top:calc(.8vh + 7rem);left:calc(50% + 2vh);width:8vh;height:auto}.ok4word{position:absolute;top:43%;left:50%;width:20vh;width:calc(var(--vh,1vh) * 20);height:calc(20vh / 305 * 255);height:calc(var(--vh,1vh) * 20 / 305 * 255);background:url("../img/common/ok.png") center center/100% auto no-repeat}.eraser4word,.logo4word{transform:translate3d(-50%,0,0)}.ok4word:active{background-image:url("../img/common/ok_on.png")}.ok4word:disabled{background-image:url("../img/common/ok_disabled.png")}.eraser4word{position:absolute;left:53%;bottom:9vh;width:20vh;width:calc(var(--vh,1vh) * 20);height:calc(20vh / 292 * 142);height:calc(var(--vh,1vh) * 20 / 292 * 142);background:url("../img/common/eraser.png") center center/100% auto no-repeat}.logo4word,.wordCharacter{position:absolute;left:50%}.japaneseWordCharacter,.japaneseWordGrid,.wordCharacter{background-position:center;background-size:auto 90%;background-repeat:no-repeat}.eraser4word:active{background-image:url("../img/common/eraser_on.png")}.logo4word{bottom:.5vh;width:12vh;height:auto}.wordCharacter{top:50%;width:calc(100% - 10px);height:calc(100% - 10px);transform:translate3d(-50%,-50%,0);opacity:.4}.wordFrame,.wordGrid{top:50%;left:50%;width:calc(100% - 30px);transform:translate3d(-50%,-50%,0);position:absolute}#englishWord_allCharacterImg.wordCharacter,#japaneseWord_allCharacterImg.japaneseWordCharacter,#japaneseWord_allCharacterImg.wordCharacter,#romajiWord_allCharacterImg.wordCharacter{z-index:4}#englishWord_1characterImg.wordCharacter,#japaneseWord_1characterImg.japaneseWordCharacter,#japaneseWord_1characterImg.wordCharacter,#romajiWord_1characterImg.wordCharacter{z-index:3}.wordFrame{height:calc(100% - 30px);border:1px solid #ffc356;z-index:2}.wordGrid{height:calc(90% - 30px);z-index:1}.englishWordGridLine{position:absolute;left:0;width:100%;height:1px;box-sizing:border-box;opacity:.6}.japaneseWordCharacter,.japaneseWordFrame,.japaneseWordGrid{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate3d(-50%,-50%,0)}.englishWordGridLine::before{content:"";background-image:linear-gradient(to right,#888,#888 8px,transparent 8px,transparent 16px);background-size:16px 1px;background-repeat:repeat-x;position:absolute;top:0;bottom:0;left:0;right:0}.englishWordGridLine.line1{top:10.6%}.englishWordGridLine.line2{top:34.7%}.englishWordGridLine.line3{top:70.4%}.englishWordGridLine.line3::before{height:2px;background-image:none;background-size:auto;background-repeat:no-repeat;background-color:#09f}.englishWordGridLine.line4{top:93.8%}.japaneseWordCharacter{opacity:.5}.japaneseWordGrid{z-index:2}.japaneseWordFrame{background:url("../img/common/japaneseWord/frame.png") center center/auto 90% no-repeat;z-index:1}