#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#303030}body{margin:0}nav{padding:25px;background:#415a77;display:flex;justify-content:space-between}nav a{font-weight:700;color:#2c3e50;text-decoration:none;margin-right:10px;font-size:1.2rem}nav a.router-link-exact-active{color:#303030;font-size:1.3rem}.nav-title{margin:0 0 0 20px;font-size:2rem;letter-spacing:.1rem;color:#303030}.nav-container{display:flex;align-items:center}.disabled{opacity:.5;pointer-events:none}.login-button{margin:0 15px;width:150px;height:40px;font-size:1rem;border-radius:5px}html[data-v-f2a8f1da]{box-sizing:border-box}[data-v-f2a8f1da],[data-v-f2a8f1da]:after,[data-v-f2a8f1da]:before{box-sizing:inherit}.background[data-v-f2a8f1da]{background-color:#fcf5ed}@-webkit-keyframes titleAnimation-f2a8f1da{0%{letter-spacing:.3em;opacity:0}}@keyframes titleAnimation-f2a8f1da{0%{letter-spacing:.3em;opacity:0}}.title[data-v-f2a8f1da]{font-size:5rem;display:inline-block;margin:100px auto 120px auto;letter-spacing:.15em;-webkit-text-decoration:underline 4px;text-decoration:underline 4px;-webkit-animation:titleAnimation-f2a8f1da 1.5s;animation:titleAnimation-f2a8f1da 1.5s}@-webkit-keyframes mainAnimation-f2a8f1da{0%{transform:translateY(20px);opacity:0}50%{transform:translateY(20px);opacity:0}}@keyframes mainAnimation-f2a8f1da{0%{transform:translateY(20px);opacity:0}50%{transform:translateY(20px);opacity:0}}main[data-v-f2a8f1da]{max-width:950px;height:1850px;width:100%;margin:0 auto;transform:0;opacity:1;-webkit-animation:mainAnimation-f2a8f1da 2s;animation:mainAnimation-f2a8f1da 2s}.contents[data-v-f2a8f1da]{position:relative;opacity:.8;transition:all .3s}.contents[data-v-f2a8f1da]:hover{opacity:1;transform:scale(1.02);transition:all .6s}.contents[data-v-f2a8f1da]:not(:last-of-type){margin-bottom:200px}.contents:nth-of-type(odd) .contents__img[data-v-f2a8f1da]{transform:translate(-180px)}.contents:nth-of-type(2n) .contents__img[data-v-f2a8f1da]{transform:translate(180px)}.contents:nth-of-type(odd) .contents__text[data-v-f2a8f1da]{right:0}.contents:nth-of-type(2n) .contents__text[data-v-f2a8f1da]{align-items:flex-start}.contents__img[data-v-f2a8f1da]{width:600px;border-radius:10px}.contents__text[data-v-f2a8f1da]{display:flex;flex-direction:column;align-items:flex-end;position:absolute;top:40px}.contents__mainTx[data-v-f2a8f1da]{font-size:3rem;padding:10px 0;margin:0 auto;width:400px;border-radius:5px}.contents__subTx[data-v-f2a8f1da]{font-size:1.5rem;background-color:hsla(0,0%,100%,.8);padding:10px 20px;width:300px;border-radius:5px}footer[data-v-f2a8f1da]{height:120px;display:flex;justify-content:center;align-items:center;background-color:#415a77}footer p[data-v-f2a8f1da]{font-size:1.3rem}.topBox[data-v-a80b4bce]{widows:400px;margin:0 auto;text-align:center}.title[data-v-a80b4bce]{position:relative;font-size:50px}.expla[data-v-a80b4bce]{background-color:#f0f8ff}.escapeImg[data-v-a80b4bce],.firstImg[data-v-a80b4bce],.notescapeImg[data-v-a80b4bce]{width:200px}.keyboadImg[data-v-a80b4bce]{width:1000px;margin-top:20px;margin-bottom:20px}.seikaiImg[data-v-a80b4bce],.zannenImg[data-v-a80b4bce]{width:200px}.mb-20[data-v-a80b4bce]{margin-bottom:20px}.marker[data-v-a80b4bce]{width:100%;height:35%;background-color:#4e598c;position:absolute;bottom:5%;z-index:-1}.startButton[data-v-a80b4bce]{background-color:teal;color:#fff;padding:4px 60px;border:none;outline:none;border-radius:20px;cursor:pointer;height:50px}.startButton[data-v-a80b4bce]:hover{opacity:.7}.question[data-v-a80b4bce]{font-size:40px}.badge[data-v-a80b4bce]{font-size:20px;margin-bottom:10px}.btnChoice[data-v-a80b4bce]{text-decoration:none;font-weight:700;font-size:20px;color:#799dec;text-shadow:0 4px 2px rgba(0,0,0,.32),0 1px 0 #6182ca,0 2px 0 #4f6aa7,0 3px 0 #5470ad}.btnChoice[data-v-a80b4bce]:active{top:4px;text-shadow:none}.retrybtn[data-v-a80b4bce]{background-color:teal;color:#fff;padding:4px 60px;border:none;outline:none;border-radius:20px;cursor:pointer;height:50px;margin-top:20px;margin-bottom:20px}.lose[data-v-a80b4bce],.question-count[data-v-a80b4bce],.win[data-v-a80b4bce]{font-size:40px}.list[data-v-a80b4bce]{display:initial}.codeArea[data-v-2c42f8fe]{width:50%}.onePage[data-v-2c42f8fe]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-2c42f8fe]{width:100%;height:100%;display:flex;justify-content:row}.leftHand[data-v-2c42f8fe]{display:flex;flex-direction:column;width:60%;height:50vw}.build1[data-v-2c42f8fe],.build2[data-v-2c42f8fe]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.rightHand[data-v-2c42f8fe]{width:45%}#overlay[data-v-2c42f8fe]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-2c42f8fe]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-2c42f8fe]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-2c42f8fe]{display:flex;justify-content:space-evenly}.d_button[data-v-2c42f8fe]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-2c42f8fe]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}.codeArea[data-v-7acf6015]{width:50%}.onePage[data-v-7acf6015]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-7acf6015]{width:100%;height:100%;display:flex;justify-content:row}.leftHand[data-v-7acf6015]{display:flex;flex-direction:column;width:60%;height:50vw}.build1[data-v-7acf6015],.build2[data-v-7acf6015]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.rightHand[data-v-7acf6015]{width:45%}#overlay[data-v-7acf6015]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-7acf6015]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-7acf6015]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-7acf6015]{display:flex;justify-content:space-evenly}.d_button[data-v-7acf6015]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-7acf6015]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}.codeArea[data-v-47a95b82]{width:50%}.onePage[data-v-47a95b82]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-47a95b82]{width:100%;height:100%;display:flex;justify-content:row}.leftHand[data-v-47a95b82]{display:flex;flex-direction:column;width:60%;height:50vw}.build1[data-v-47a95b82],.build2[data-v-47a95b82]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.rightHand[data-v-47a95b82]{width:45%}#overlay[data-v-47a95b82]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-47a95b82]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-47a95b82]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-47a95b82]{display:flex;justify-content:space-evenly}.d_button[data-v-47a95b82]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-47a95b82]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}.codeArea[data-v-63339266]{width:50%}.onePage[data-v-63339266]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-63339266]{width:100%;height:100%;display:flex;justify-content:row}.leftHand[data-v-63339266]{display:flex;flex-direction:column;width:60%;height:50vw}.build[data-v-63339266]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.rightHand[data-v-63339266]{width:45%}#overlay[data-v-63339266]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-63339266]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-63339266]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-63339266]{display:flex;justify-content:space-evenly}.d_button[data-v-63339266]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-63339266]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}.codeArea[data-v-4a42b2c7]{width:50%}.onePage[data-v-4a42b2c7]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-4a42b2c7]{width:100%;height:100%;display:flex;justify-content:row}.leftHand[data-v-4a42b2c7]{display:flex;flex-direction:column;width:60%;height:50vw}.build[data-v-4a42b2c7]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.build_target[data-v-4a42b2c7]{-o-object-fit:contain;object-fit:contain;width:150px;height:150px}.rightHand[data-v-4a42b2c7]{width:45%}#overlay[data-v-4a42b2c7]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-4a42b2c7]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-4a42b2c7]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-4a42b2c7]{display:flex;justify-content:space-evenly}.d_button[data-v-4a42b2c7]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-4a42b2c7]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}.codeArea[data-v-e5873ad2]{width:50%}.onePage[data-v-e5873ad2]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-e5873ad2]{width:100%;height:100%;display:flex;justify-content:row;background-color:#deb887}.leftHand[data-v-e5873ad2]{display:flex;flex-direction:column;width:60%;height:50vw}.build[data-v-e5873ad2]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.build_target[data-v-e5873ad2]{-o-object-fit:contain;object-fit:contain;width:150px;height:150px}.rightHand[data-v-e5873ad2]{width:45%}#overlay[data-v-e5873ad2]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-e5873ad2]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-e5873ad2]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-e5873ad2]{display:flex;justify-content:space-evenly}.d_button[data-v-e5873ad2]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-e5873ad2]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}.codeArea[data-v-04319faf]{width:50%}.onePage[data-v-04319faf]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-04319faf]{width:100%;height:100%;display:flex;justify-content:row;background-color:#deb887}.leftHand[data-v-04319faf]{display:flex;flex-direction:column;width:60%;height:50vw}.build[data-v-04319faf]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.factoryField[data-v-04319faf]{background-color:gray}.build_target[data-v-04319faf]{-o-object-fit:contain;object-fit:contain;width:150px;height:150px}.rightHand[data-v-04319faf]{width:45%}#overlay[data-v-04319faf]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-04319faf]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-04319faf]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-04319faf]{display:flex;justify-content:space-evenly}.d_button[data-v-04319faf]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-04319faf]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}.codeArea[data-v-3a47ed82]{width:50%}.onePage[data-v-3a47ed82]{display:flex;justify-content:space-around;width:100%;height:50%}.screen[data-v-3a47ed82]{width:100%;height:100%;display:flex;justify-content:row;background-color:#deb887}.leftHand[data-v-3a47ed82]{display:flex;flex-direction:column;width:60%;height:50vw}.build[data-v-3a47ed82]{-o-object-fit:contain;object-fit:contain;width:100px;height:100px}.buildingField-L[data-v-3a47ed82]{background-color:gray;display:flex;flex-direction:column}.build_target[data-v-3a47ed82]{-o-object-fit:contain;object-fit:contain;width:150px;height:150px}.roadSet[data-v-3a47ed82]{display:flex;justify-content:center}.rightHand[data-v-3a47ed82]{width:45%}#overlay[data-v-3a47ed82]{z-index:1;position:fixed;top:0;left:0;width:55%;height:100%;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}#content[data-v-3a47ed82]{z-index:2;width:50%;padding:1em;background:#fff}.sample-img[data-v-3a47ed82]{-o-object-fit:contain;object-fit:contain;width:80%;height:80%}.runningButton[data-v-3a47ed82]{display:flex;justify-content:space-evenly}.d_button[data-v-3a47ed82]{display:inline-block;text-decoration:none;padding:.5rem;background:#f7f7f7;border-left:6px solid #58ad5a;color:#58ad5a;font-weight:700;box-shadow:5px 5px 5px rgba(0,0,0,.22);width:25%}.d_button[data-v-3a47ed82]:active{box-shadow:5px 5px 5px rgba(0,0,0,.11);transform:translateY(2px)}html[data-v-6c62322a]{box-sizing:border-box}[data-v-6c62322a],[data-v-6c62322a]:after,[data-v-6c62322a]:before{box-sizing:inherit}.background[data-v-6c62322a]{background-color:#e9f5db;min-height:1880px}.title__container[data-v-6c62322a]{background:linear-gradient(#d4e2c1,#e7f3da);text-align:left;padding-top:50px}.title__logo[data-v-6c62322a]{font-size:4rem;font-weight:bolder;margin:0 30px 0 50px;display:inline-block;position:relative}.title__logo[data-v-6c62322a]:after{content:"";position:absolute;left:0;bottom:0;width:120%;height:7px;background:repeating-linear-gradient(-45deg,green,#6ad1c8 2px,#e9f5db 0,#e9f5db 4px)}.title__img[data-v-6c62322a]{display:inline-block;width:50px;vertical-align:top}.title__text[data-v-6c62322a]{font-size:1.7rem;text-align:left;margin-left:100px;margin-bottom:70px}.content__wrapper[data-v-6c62322a]{display:flex;justify-content:center;flex-wrap:wrap;background-color:#f7faf4;border:1px solid #303030;border-radius:5px;padding:35px 0;margin:50px 40px;position:relative}.content__title[data-v-6c62322a]{font-size:2rem;position:absolute;top:-1.3rem;left:3%;background:linear-gradient(#e9f5db,#f7faf4);padding:0 1rem 0 1rem}.content__container[data-v-6c62322a]{border:1px solid #303030;background-color:#fff;margin:30px 30px;border-radius:5px;opacity:.9;transition:all .3s;position:relative}.content__container[data-v-6c62322a]:hover{opacity:1;transform:scale(1.05)}.content__container [data-v-6c62322a]{color:#303030;text-decoration:none}.content__img[data-v-6c62322a]{border:1px solid #303030;border-radius:5px;margin:5px 5px 0 5px;width:250px}.content__text[data-v-6c62322a]{font-weight:700;font-size:1.5rem;margin:0;padding:20px 0 60px 0}.content__record[data-v-6c62322a]{text-decoration:underline;position:absolute;bottom:4%;transform:translate(-50%);border:none;background-color:#faffff;font-size:1rem;color:#696969}.content__record[data-v-6c62322a]:hover{color:#303030}html[data-v-405a64c6]{box-sizing:border-box}[data-v-405a64c6],[data-v-405a64c6]:after,[data-v-405a64c6]:before{box-sizing:inherit}.title[data-v-405a64c6]{text-align:left;padding:10px 3rem;margin:0;background:linear-gradient(90deg,#e9f5db,#fff)}.edit-area[data-v-405a64c6]{height:90vh;width:75vh;font-size:1rem;outline:auto}.label__canvas[data-v-405a64c6]{position:absolute;top:21vh;left:80vh;width:120px;font-size:1.2rem}.label__sample[data-v-405a64c6]{position:absolute;top:21vh;left:135vh;width:80px;font-size:1.2rem}.back[data-v-405a64c6]{left:80vh}.back[data-v-405a64c6],.sample__back[data-v-405a64c6]{position:absolute;top:25vh;height:300px;width:300px;outline:auto;padding:10px}.sample__back[data-v-405a64c6]{left:135vh}.sample__opacity[data-v-405a64c6]{top:25vh;left:80vh}.opacity-bar[data-v-405a64c6]{position:absolute;top:69vh;left:88.5vh;transform:scale(1.7,1.5);font-size:14px}.how-to__wrapper[data-v-405a64c6]{background-color:#e6e3e3;width:450px;height:230px;position:absolute;top:80vh;left:75vh;overflow-y:scroll}.how-to__title[data-v-405a64c6]{font-size:1.5rem}.how-to__text li[data-v-405a64c6]{text-align:justify;margin-bottom:15px;padding-right:30px}.how-to__hint[data-v-405a64c6]{font-size:14px;padding:15px 30px 0 60px;text-align:justify;text-indent:-35px}.color-palette[data-v-405a64c6]{background-color:#e6e3e3;width:300px;padding:10px 10px;position:absolute;top:70vh;left:135vh;display:flex;align-items:center;flex-wrap:wrap}.color-list[data-v-405a64c6]{display:flex;margin:10px 10px 10px 10px}.color-checker[data-v-405a64c6]{height:20px;width:20px;outline:auto;border-radius:10px}.color-code[data-v-405a64c6]{line-height:20px;font-size:1.3rem;padding:0 10px}.finish-button[data-v-405a64c6]{position:absolute;top:97vh;left:138vh;height:70px;width:280px;font-size:1.5rem}.background[data-v-33c8a802]{background:linear-gradient(#eff7e8,#fff)}.title__container[data-v-33c8a802]{background-color:#e4f3d2}.title__logo[data-v-33c8a802]{padding-top:20px;font-size:2rem;text-align:center}.title__text[data-v-33c8a802]{font-size:1.3rem;text-align:center}.content__container[data-v-33c8a802]{margin:50px auto;height:420px;width:1250px;border:1px solid #303030;border-radius:10px;background:linear-gradient(#f7faf4,#fff);position:relative}.content__title[data-v-33c8a802]{position:absolute;top:-4%;left:5%;font-size:1.3rem;background:linear-gradient(#eff7e8,#f7faf4);padding:0 10px}.edit-area[data-v-33c8a802]{position:absolute;top:7vh;left:15vh;height:320px;width:75vh;font-size:1rem;outline:auto}.back[data-v-33c8a802]{position:absolute;top:7vh;left:105vh;height:300px;width:300px;outline:auto;padding:10px}.finish-button[data-v-33c8a802]{height:70px;width:350px;font-size:1.5rem;position:absolute;top:89vh;left:125vh}.background[data-v-66dde4ae]{background:linear-gradient(#eff7e8,#fff)}.title__container[data-v-66dde4ae]{background-color:#e4f3d2}.title__logo[data-v-66dde4ae]{padding:20px 0;font-size:1.7rem;text-align:center}.content__container[data-v-66dde4ae]{margin:50px auto;height:420px;width:1250px;border:1px solid #303030;border-radius:10px;background:linear-gradient(#f7faf4,#fff);position:relative}.content__title[data-v-66dde4ae]{position:absolute;top:-4%;left:5%;font-size:1.3rem;background:linear-gradient(#eff7e8,#f7faf4);padding:0 10px}.edit-area[data-v-66dde4ae]{position:absolute;top:7vh;left:15vh;height:320px;width:75vh;font-size:1rem;outline:auto}.back[data-v-66dde4ae]{position:absolute;top:7vh;left:105vh;height:300px;width:300px;outline:auto;padding:10px}.finish-button[data-v-66dde4ae]{height:70px;width:350px;font-size:1.5rem;position:absolute;top:88vh;left:125vh}