@charset "utf-8";:root{--vw:1vw;--vh:1vh;--area-width:962px;--area-height:635px;--area-left:0px;--header-bottom:120px;--grade-nav-width:100px;--grade-nav-height:40px;--grade-nav-right:20px;--grade-nav-top:40px;--to-menu-width:160px;--to-menu-height:48px;--to-menu-left:10px;--to-menu-top:36px;--index-height:515px;--button-width:360px;--button-height:80px;--font-size:18px;}@media (min-aspect-ratio:962/635){:root{--area-height:calc(100 * var(--vh));--area-width:calc(151.496062992126 * var(--vh));--area-left:calc((50 * var(--vw)) - (75.59055118110235 * var(--vh)));--header-bottom:calc(18.89763779527559 * var(--vh));--grade-nav-width:calc(15.74803149606299 * var(--vh));--grade-nav-height:calc(6.299212598425197 * var(--vh));--grade-nav-right:calc(3.149606299212598 * var(--vh));--grade-nav-top:calc(6.299212598425197 * var(--vh));--to-menu-width:calc(25.19685039370079 * var(--vh));--to-menu-height:calc(7.559055118110236 * var(--vh));--to-menu-left:calc(1.574803149606299 * var(--vh));--to-menu-top:calc(5.669291338582677 * var(--vh));--index-height:calc(81.10236220472441 * var(--vh));--button-width:calc(56.69291338582677 * var(--vh));--button-height:calc(12.59842519685039 * var(--vh));}}@media (max-aspect-ratio:962/635){:root{--area-width:calc(100 * var(--vw));--area-height:calc(66.00831600831601 * var(--vw));--area-left:0px;--header-bottom:calc(12.47401247401247 * var(--vw));--grade-nav-width:calc(10.3950103950104 * var(--vw));--grade-nav-height:calc(4.158004158004158 * var(--vw));--grade-nav-right:calc(2.079002079002079 * var(--vw));--grade-nav-top:calc(4.158004158004158 * var(--vw));--to-menu-width:calc(16.63201663201663 * var(--vw));--to-menu-height:calc(4.98960498960499 * var(--vw));--to-menu-left:calc(1.03950103950104 * var(--vw));--to-menu-top:calc(3.742203742203742 * var(--vw));--index-height:calc(53.53430353430353 * var(--vw));--button-width:calc(37.42203742203742 * var(--vw));--button-height:calc(8.316008316008316 * var(--vw));}}html{font-family:YuGothic,"Yu Gothic","Yu Gothic UI","ヒラギノ角ゴシック","Hiragino Sans","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",sans-serif;font-size:var(--font-size);line-height:1;background-color:#FCECCA;color:#000;}html,body{margin:0;padding:0;}body{display:block;width:calc(100 * var(--vw));}h1{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:flex-end;align-content:center;position:absolute;left:0;top:0;right:0;height:var(--header-bottom);margin:0;padding:0;background-color:#F7B52B;color:#000;}h1 img{display:block;margin:0;margin-bottom:calc(var(--header-bottom) * (30 / 120));aspect-ratio:576 / 64.28;width:calc(var(--area-width) * (576 / 962));}#btnToMenu{display:block;width:var(--to-menu-width);height:var(--to-menu-height);margin:0;padding:0;position:absolute;top:var(--to-menu-top);left:var(--to-menu-left);visibility:hidden;}#btnToMenu[href]{visibility:visible;cursor:pointer;}#btnToMenu img{display:block;width:100%;height:auto;margin:0;}#grade{display:block;width:var(--grade-nav-width);height:var(--grade-nav-height);margin:0;padding:0;position:absolute;top:var(--grade-nav-top);left:calc((100 * var(--vw)) - var(--grade-nav-width) - var(--grade-nav-right));overflow:visible;background-color:transparent;}input[name="gradeItem"],#gradeCheck{position:absolute;right:-1px;bottom:-1px;display:none;}#grade label,#gradeSelect li{display:block;width:var(--grade-nav-width);height:var(--grade-nav-height);font-size:calc((18 / 40) * var(--grade-nav-height));margin:0;padding:0;text-align:center;line-height:var(--grade-nav-height);cursor:pointer;}#grade>label{display:none;font-weight:bold;border-radius:calc(var(--grade-nav-height) * 0.2);border:solid 1px #FCECCA;background-color:transparent;color:#FFF;}#gradeItem1:checked~#gradeSelect1,#gradeItem2:checked~#gradeSelect2,#gradeItem3:checked~#gradeSelect3,#gradeItem4:checked~#gradeSelect4,#gradeItem5:checked~#gradeSelect5,#gradeItem6:checked~#gradeSelect6{display:block;}#gradeSelect,#gradeSelect li{border-color:#F0E0BE;border-width:1px;}#gradeSelect{display:none;list-style:none;width:var(--grade-nav-width);height:fit-content;margin:0;margin-top:calc(var(--grade-nav-height) * 0.4);padding:0;border-radius:calc(var(--grade-nav-height) * 0.2);border-style:solid;background-color:#FFF;position:relative;filter:drop-shadow(0 calc(var(--button-height) * 0.1) calc(var(--button-height) * 0.1) #F0E0BE);}#gradeCheck:checked+#gradeSelect{display:block;}#gradeSelect::before{content:"";display:block;position:absolute;left:calc(50% - (var(--grade-nav-height) * 0.3));top:calc(var(--grade-nav-height) * -0.3);border-style:solid;border-color:transparent;border-width:calc(var(--grade-nav-height) * 0.3);border-bottom-color:#FFF;border-top-width:0;width:0;height:0;}#gradeSelect li{overflow:hidden;border-top-style:solid;}#gradeSelect li:first-of-type{border-top-style:none;border-top-left-radius:calc(var(--grade-nav-height) * 0.2);border-top-right-radius:calc(var(--grade-nav-height) * 0.2);}#gradeSelect li:last-of-type{border-bottom-left-radius:calc(var(--grade-nav-height) * 0.2);border-bottom-right-radius:calc(var(--grade-nav-height) * 0.2);}#gradeSelect label,#gradeSelect label:focus{background-color:#FFF;color:#231815;text-decoration:none;outline:none;}#gradeItem1:checked~#gradeSelect label[for="gradeItem1"],#gradeItem2:checked~#gradeSelect label[for="gradeItem2"],#gradeItem3:checked~#gradeSelect label[for="gradeItem3"],#gradeItem4:checked~#gradeSelect label[for="gradeItem4"],#gradeItem5:checked~#gradeSelect label[for="gradeItem5"],#gradeItem6:checked~#gradeSelect label[for="gradeItem6"]{font-weight:bold;}#gradeSelect label:hover{background-color:#C1D7DD;}.index{display:flex;flex-wrap:wrap;flex-direction:column;justify-content:flex-start;align-content:center;position:absolute;margin:0;padding:0;left:var(--area-left);top:var(--header-bottom);width:var(--area-width);height:var(--index-height);background-color:transparent;background-repeat:no-repeat;background-position:center bottom calc(var(--index-height) * 20 / 635);background-size:contain;background-image:url("../img/keyboard_index.svg");}.index a{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-content:center;width:var(--button-width);height:var(--button-height);margin:calc(var(--button-height) / 8);padding:0;border-radius:calc(var(--button-height) * 0.1);cursor:auto;color:#FFF;background-color:#7C7C7C;filter:drop-shadow(0 calc(var(--button-height) * 0.1) calc(var(--button-height) * 0.1) rgba(0,0,0,0.25));}.index a img{filter:brightness(0.78);}.index a:first-of-type{margin-top:calc(var(--button-height) * 5 / 8);}.index a[href]{cursor:pointer;color:#FFF;background-color:#0097E0;filter:drop-shadow(0 calc(var(--button-height) * 0.1) calc(var(--button-height) * 0.1) #F8D088);}.index a[href] img{filter:none;}.index a img{display:block;margin:0;padding:0;height:auto;}.index a img[alt="アルファベット"]{aspect-ratio:224 / 41.57;width:calc(var(--button-width) * 224 / 360);margin-top:calc(var(--button-height) * 14 / 80);}.index a img[alt="五十音"]{aspect-ratio:96 / 57.49;width:calc(var(--button-width) * 96 / 360);margin-top:calc(var(--button-height) * 12 / 80);}.index a img[alt="単語"]{aspect-ratio:64 / 59.57;width:calc(var(--button-width) * 64 / 360);margin-top:calc(var(--button-height) * 8 / 80);}.index a img[alt="短文"]{aspect-ratio:64 / 59.57;width:calc(var(--button-width) * 64 / 360);margin-top:calc(var(--button-height) * 10 / 80);}