@charset "UTF-8";body,div,pre,p,blockquote,form,ul,ol,li,fieldset,input,textarea,select,option,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,th,td,embed,object{margin:0;padding:0}body,div,pre,p,blockquote,form,ul,ol,li,fieldset,input,textarea,select,option,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,embed,object{vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,menu,nav,section,main{display:block;margin:0;padding:0}body,table,pre{color:#333;font:20px/1.5 游ゴシック体,Yu Gothic,YuGothic,san-serif}body{overflow:hidden;background-color:#000}#tsunvas.recording{width:1080px;height:1080px;position:fixed;top:0;bottom:0;left:0;right:0;margin:auto}#menubuttons{position:fixed;top:20px;right:20px;left:20px;margin:auto;display:flex;flex-flow:row-reverse wrap;justify-content:flex-start;align-items:center;gap:20px}#menubuttons button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid orange;text-align:center;border-radius:20px;width:80px;height:80px;background:#FFBB66;box-shadow:0 -10px 20px #ffc8004d;box-sizing:border-box;padding:10px;color:#f40;font-size:16px;font-weight:700;line-height:1.5;transition:.2s;outline:none;cursor:pointer}#menubuttons button:hover{transform:scale(1.05)}#menubuttons button#cancelButton{opacity:.2;color:#800;border-color:#800;background:#d88;cursor:auto;pointer-events:none}#menubuttons button#cancelButton:before{content:"×";font-size:40px}#menubuttons button#cancelButton.on{opacity:1;cursor:pointer;pointer-events:auto}#menubuttons button#startButton{background-image:url(/assets/speaker-3c288608.svg);background-repeat:no-repeat;background-position:center;background-size:contain;background-color:#c83;color:#c10}#menubuttons button#startButton:before{content:"Sound"}#menubuttons button#startButton.on{background-color:#fb6;color:#f40}#menubuttons button#teachButton:before{content:"Teach"}#menubuttons button#wordlistButton:before{content:"Word List"}#menubuttons button#menuButton:before{content:"Menu"}#menubuttons button#logButton:before{content:"Log"}#menubuttons button#feedButton:before{content:"Feed"}#menubuttons button#placeButton:before{content:"Place"}#teachWordsView{display:none;position:fixed;left:20px;right:20px;bottom:600px;text-align:center;background:rgba(255,255,255,.5);padding:20px;border-radius:20px}#teachWordsView.on{display:block}#teachWordsView span{font-size:50px;vertical-align:middle;margin-right:20px}#teachWordsView button{border-width:3px;border-style:solid;border-radius:10px;width:50px;height:50px;vertical-align:middle;font-size:30px;font-weight:700}#teachWordsView #teachWordsOK{color:#080;border-color:#080;background:#8d8}#teachWordsView #teachWordsOK:before{content:"〇"}#teachWordsView #teachWordsNG{color:#800;border-color:#800;background:#d88}#teachWordsView #teachWordsNG:before{content:"×"}#teachboard{display:none;flex-flow:row nowrap;align-items:flex-start;gap:20px;position:fixed;bottom:20px;left:20px;right:20px;border:3px solid #f88;background:rgba(255,127,127,.3);border-radius:10px;padding:20px;height:366px;box-sizing:border-box;overflow:scroll hidden;scrollbar-width:thin;scrollbar-color:#f88 rgba(255,127,127,.3);body:has(#teachButton.on) & {display: flex;} &>div {&:first-child {display: block;} &>div {display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: 10px; &:last-child {margin-bottom: 0;}}} button {appearance: none; border: 2px solid #f88; background: #fbb; color: #b66; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 56px; height: 56px; border-radius: 30px; font-size: 22px; transition: .2s; &:hover {transform: scale(1.05);} .letters & {font-size: 20px;} &.sub {border-color: #f77; background: #faa; color: #b55;}}}#menuView{margin:auto;border:2px solid #f88;background:#fbb;border-radius:20px;padding:50px;box-sizing:border-box;font-size:24px;color:#b55;body.login & ul li {&.out {display: none;} &.in {display: list-item;}}}#menuView>div{position:absolute;top:0;right:10px;padding:10px;cursor:pointer;font-size:30px;color:#b55;text-align:center}#menuView a{color:#b55}#menuView ul li.in{display:none}#wordlistView{display:none;position:fixed;top:80px;bottom:20px;left:20px;right:20px;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;font-size:24px;color:#711;scrollbar-width:thin;scrollbar-color:#f88 rgba(255,127,127,.3);overflow:auto}#wordlistView.on{display:block}#wordlistView form{margin-bottom:15px;position:sticky;top:0}#wordlistView form input{padding:10px;border:none;border-radius:5px;background:#fff;width:50%}#wordlistView form select{padding:10px;border:none;border-radius:5px;background:#fff}#wordlistView ul{list-style-type:none;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;gap:10px}#wordlistView ul li{transition:transform .2s;border-radius:10px;padding:10px;background:rgba(255,255,255,.5);width:150px;box-sizing:border-box}#wordlistView ul li:hover{transform:scale(1.1)}#wordlistView ul li button{vertical-align:middle;border-radius:10px;padding:1px 5px;border:1px solid #bbb}#displayeditor{display:none;position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;width:90%;height:90px}#displayeditor.on{display:block}#displayeditor input[type=text]{height:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;font-size:30px;border:none;border-radius:20px;box-sizing:border-box;padding:10px;outline:none;vertical-align:middle;width:calc(100% - 120px)}#displayeditor button{border-width:3px;border-style:solid;border-radius:10px;width:50px;height:50px;vertical-align:middle;font-size:30px;font-weight:700}#displayeditor #displayeditorOK{color:#080;border-color:#080;background:#8d8}#displayeditor #displayeditorOK:before{content:"〇"}#displayeditor #displayeditorNG{color:#800;border-color:#800;background:#d88}#displayeditor #displayeditorNG:before{content:"×"}#wordclasseditor{display:none;position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;width:90%;height:90px}#wordclasseditor.on{display:block}#wordclasseditor select{height:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;font-size:30px;border:none;border-radius:20px;box-sizing:border-box;padding:10px;outline:none;vertical-align:middle;width:calc(100% - 120px)}#wordclasseditor button{border-width:3px;border-style:solid;border-radius:10px;width:50px;height:50px;vertical-align:middle;font-size:30px;font-weight:700}#wordclasseditor #wordclasseditorOK{color:#080;border-color:#080;background:#8d8}#wordclasseditor #wordclasseditorOK:before{content:"〇"}#wordclasseditor #wordclasseditorNG{color:#800;border-color:#800;background:#d88}#wordclasseditor #wordclasseditorNG:before{content:"×"}#intoneeditor{display:none;position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;width:90%;height:fit-content;text-align:center}#intoneeditor.on{display:block}#intoneeditor #intoneeditorInput{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;margin-bottom:20px}#intoneeditor #intoneeditorInput .syl{position:relative;font-size:30px;line-height:1;text-align:center;height:200px;padding:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDkuMS1jMDAyIDc5LmI3YzY0Y2NmOSwgMjAyNC8wNy8xNi0xMjozOTowNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI2LjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRBODlGOEE5QUNENzExRUY4ODEzQzc1RkNDNEEwMDVEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRBODlGOEFBQUNENzExRUY4ODEzQzc1RkNDNEEwMDVEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEE4OUY4QTdBQ0Q3MTFFRjg4MTNDNzVGQ0M0QTAwNUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEE4OUY4QThBQ0Q3MTFFRjg4MTNDNzVGQ0M0QTAwNUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5FPLZ+AAAALElEQVR42mJgYGD4z/D//38GJiCLNgTDqB2DxQ6w8RAWbe0YjYrBZQdAgAEAuu0qPqq5Z+EAAAAASUVORK5CYII=) repeat-x center}#intoneeditor #intoneeditorInput .syl:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:2px;height:220px;background-color:#000}#intoneeditor #intoneeditorInput .syl>span{border:none;background:#fff;border-radius:100px;box-sizing:border-box;padding:10px;white-space:nowrap;min-width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;cursor:ns-resize;position:relative;top:70px;z-index:2;touch-action:none}#intoneeditor #intoneeditorInput .syl>span>i{width:20px;height:20px;color:#f88;border-radius:20px;border:1px solid #f88;background:#fff;position:absolute;margin:auto;box-sizing:border-box;font-style:normal;font-size:12px;display:flex;justify-content:center;align-items:center;cursor:pointer}#intoneeditor #intoneeditorInput .syl>span>i:hover{background-color:#ddd}#intoneeditor #intoneeditorInput .syl>span>i.volumeup{top:-10px;right:-5px}#intoneeditor #intoneeditorInput .syl>span>i.volumeup:before{content:"+"}#intoneeditor #intoneeditorInput .syl>span>i.volumedown{top:-10px;left:-5px}#intoneeditor #intoneeditorInput .syl>span>i.volumedown:before{content:"-"}#intoneeditor #intoneeditorInput .syl>span>i.lengthup{bottom:-10px;right:-5px}#intoneeditor #intoneeditorInput .syl>span>i.lengthup:before{content:">"}#intoneeditor #intoneeditorInput .syl>span>i.lengthdown{bottom:-10px;left:-5px}#intoneeditor #intoneeditorInput .syl>span>i.lengthdown:before{content:"<"}#intoneeditor button{border-width:3px;border-style:solid;border-radius:10px;width:50px;height:50px;vertical-align:middle;font-size:30px;font-weight:700}#intoneeditor #intoneeditorOK{color:#080;border-color:#080;background:#8d8}#intoneeditor #intoneeditorOK:before{content:"〇"}#intoneeditor #intoneeditorNG{color:#800;border-color:#800;background:#d88}#intoneeditor #intoneeditorNG:before{content:"×"}#logView{display:none;position:fixed;top:80px;bottom:20px;left:20px;right:20px;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;font-size:24px;color:#711;scrollbar-width:thin;scrollbar-color:#f88 rgba(255,127,127,.3);overflow:auto}#logView.on{display:block}#logView ul{list-style-type:none;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;gap:10px}#logView ul li{transition:transform .2s;border-radius:10px;padding:10px;background:rgba(255,255,255,.5);width:49%;box-sizing:border-box}#logView ul li button{vertical-align:middle;border-radius:10px;padding:1px 5px;border:1px solid #bbb}#logeditor{display:none;position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;width:90%;height:fit-content;text-align:center}#logeditor.on{display:block}#logeditor #logeditorInput{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:10px;margin-bottom:20px}#logeditor #logeditorInput.off{display:none}#logeditor #logeditorSelector{display:none;flex-flow:row wrap;justify-content:center;align-items:center;gap:10px;margin-bottom:20px;max-height:400px;overflow-y:auto}#logeditor #logeditorSelector.on{display:flex}#logeditor .word{cursor:pointer;background:#fff;border:none;border-radius:10px;padding:10px;position:relative;font-size:30px;line-height:1;text-align:center}#logeditor .word:before{content:attr(data-view)}#logeditor .word[data-class=""]{cursor:default}#logeditor .word[data-class^=n-]{background-color:#ffc}#logeditor .word[data-class^=conj-]{background-color:#ccc}#logeditor .word[data-class^=a-]{background-color:#cff}#logeditor .word[data-class^=ad-]{background-color:#cfc}#logeditor .word[data-class^=adv-]{background-color:#fcf}#logeditor .word[data-class^=v-]{background-color:#fcc}#logeditor .word[data-class^=des-]{background-color:#ccf}#logeditor button{border-width:3px;border-style:solid;border-radius:10px;width:50px;height:50px;vertical-align:middle;font-size:30px;font-weight:700}#logeditor #logeditorOK{color:#080;border-color:#080;background:#8d8}#logeditor #logeditorOK:before{content:"〇"}#logeditor #logeditorNG{color:#800;border-color:#800;background:#d88}#logeditor #logeditorNG:before{content:"×"}#feedView{display:none;height:300px;position:fixed;bottom:20px;left:20px;right:20px;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;font-size:24px;color:#711;scrollbar-width:thin;scrollbar-color:#f88 rgba(255,127,127,.3);overflow:auto}#feedView.on{display:block}#feedView ul{list-style-type:none;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;gap:10px}#feedView ul li{transition:transform .2s;border-radius:10px;padding:10px;background:rgba(255,255,255,.5);width:24%;max-width:220px;box-sizing:border-box;text-align:center}#feedView ul li h3{font-size:16px}#feedView ul li figure img{width:80%;height:auto}#feedView ul li button{vertical-align:middle;border-radius:10px;padding:1px 5px;border:1px solid #bbb;cursor:pointer}#locateView{display:none;height:300px;position:fixed;bottom:20px;left:20px;right:20px;margin:auto;border:2px solid #f88;background:rgba(255,127,127,.8);border-radius:20px;padding:20px;box-sizing:border-box;font-size:24px;color:#711;scrollbar-width:thin;scrollbar-color:#f88 rgba(255,127,127,.3);overflow:auto}#locateView.on{display:block}#locateView ul{list-style-type:none;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;gap:10px}#locateView ul li{transition:transform .2s;border-radius:10px;padding:10px;background:rgba(255,255,255,.5);width:24%;max-width:220px;box-sizing:border-box;text-align:center}#locateView ul li h3{font-size:16px}#locateView ul li figure img{width:80%;height:auto}#locateView ul li button{vertical-align:middle;border-radius:10px;padding:1px 5px;border:1px solid #bbb;cursor:pointer}@media screen and (max-width: 768px){#menubuttons button{width:65px;height:65px;padding:5px}#menubuttons button#cancelButton:before{font-size:35px}#teachboard{padding:10px;height:326px}#teachboard>div>div{gap:5px;margin-bottom:5px}#logView ul li,#feedView ul li{width:48%}}