:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%}.title{font-size:64px;text-align:left;padding:10px 120px;margin-bottom:100px;animation:title_a 1s;animation-fill-mode:forwards}@keyframes title_a{0%{opacity:0;transform:translateY(-120px)}to{opacity:1;transform:translateY(0)}}.operation{display:flex;flex-direction:column;align-items:center}.card{border-radius:7px;padding:auto;width:300px;font-size:32px;background-color:#c7e4fd;color:#242424}.card:hover{background-color:#4169e1}.card-hover-text{width:800px;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease;color:#333;font-size:32px;text-align:center}.card:hover+.card-hover-text{visibility:visible;opacity:1}.content{display:flex;justify-content:center}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{background-size:cover;background-position:center;width:100%;height:100vh;color:#242424}.card-view-container{padding:40px;text-align:center;width:100%;box-sizing:border-box}.card-view-container h1{font-size:2.5rem;margin-bottom:1rem}.card-view-container p{font-size:1.1rem;color:#666;margin-bottom:3rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:25px;margin-bottom:3rem;width:100%;max-width:1200px;margin-left:auto;margin-right:auto}.info-card{border:3px solid #ff9800;background-color:#fff;padding:20px;border-radius:8px;min-height:150px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all .2s ease-in-out}.info-card:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000001a}.info-card h3{margin:0 0 10px;font-size:1.2rem;color:#333}.info-card p{margin:0;font-size:1rem;color:#555}.button-link{display:inline-block;padding:10px 20px;background-color:#007bff;color:#fff;text-decoration:none;border-radius:5px;transition:background-color .2s}.button-link:hover{background-color:#0056b3}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:30px 40px;border-radius:10px;width:90%;max-width:600px;box-shadow:0 5px 15px #0000004d;text-align:left}.modal-content h2{margin-top:0;font-size:1.8rem;color:#333}.modal-content p{font-size:1.1rem;color:#555;line-height:1.6}.close-button{display:block;margin-top:20px;margin-left:auto;padding:10px 25px;border:none;background-color:#6c757d;color:#fff;border-radius:5px;cursor:pointer;transition:background-color .2s}.close-button:hover{background-color:#5a6268}.select-stage-container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:100vh;width:100%;padding:20px;background-color:none;color:#333;position:relative}.stage-cards-wrapper{display:flex;flex-direction:row;gap:30px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:50px;margin-bottom:50px;width:100%;max-width:900px}.stage-card{background-color:#fff;border-radius:12px;box-shadow:0 8px 16px #ff8c00;padding:30px;text-align:center;width:100%;max-width:350px;transition:transform .2s ease,box-shadow .3s ease;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;min-height:200px}.stage-card:hover{transform:translateY(-5px);box-shadow:0 12px 24px #0003}.stage-card h2{font-size:2rem;color:#000;margin-bottom:15px}.stage-card p{font-size:1rem;color:#555;margin-bottom:20px;flex-grow:1}.start-stage-button{background-color:#fff;color:#fff;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:1rem;transition:background-color .3s ease,transform .2s ease}.start-stage-button:hover{background-color:#fff;transform:translateY(-1px)}.bottom-button-container{margin-top:auto;margin-bottom:20px}.button-primary{background-color:#ebe379;color:#fff;padding:15px 30px;border:none;border-radius:10px;cursor:pointer;font-size:1.3rem;font-weight:700;transition:background-color .3s ease,transform .2s ease,box-shadow .3s ease;text-decoration:none;display:inline-block;min-width:250px}.button-primary:hover{background-color:#e6db48;color:#555;transform:translateY(-4px)}@media (max-width: 768px){.title{font-size:2.5rem;margin-bottom:30px}.stage-cards-wrapper{flex-direction:column;gap:20px}.stage-card{max-width:90%;padding:25px}.button-primary{padding:12px 25px;font-size:1.1rem;min-width:200px}}@media (max-width: 480px){.title{font-size:2rem;margin-bottom:20px}.back-button{top:10px;left:10px;width:35px;height:35px;font-size:1rem}.stage-card{padding:20px}.stage-card h2{font-size:1.5rem}.stage-card p{font-size:.9rem}.button-primary{min-width:180px}}.card{border:1px solid #ddd;background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 2px 4px #0000000d}.card:hover{transform:translateY(-3px);box-shadow:0 4px 8px #0000001a}.code-box{background-color:#f7f7f7;padding:10px;border-radius:4px;border:1px solid #eee;text-align:center;margin-bottom:10px}.code-box code{font-family:Courier New,Courier,monospace;font-size:1rem;color:#d63384}.explain-text{margin:0;font-size:.9rem;color:#555;text-align:center}.action-buttons-container{display:flex;justify-content:flex-end;gap:10px;margin-bottom:1rem}.action-button{padding:.5rem 1rem;font-size:.9rem;font-weight:700;border:none;border-radius:5px;cursor:pointer;transition:all .2s ease}.undo-button{background-color:#6c757d;color:#fff}.undo-button:hover{background-color:#5a6268}.reset-button{background-color:#dc3545;color:#fff}.reset-button:hover{background-color:#c82333}.puzzle-container{width:100%;height:100%;border:2px dashed #ccc;box-sizing:border-box;position:relative;flex-grow:1}@for $i from 1 through 10{.card:nth-child(#{$i}) {top: calc(($i - 1) * 30px); left: calc(($i - 1) * 30px); z-index: (10 - $i);}}.item-top-center{top:10%;left:50%;transform:translate(-50%)}.item-top-right{top:10%;right:10%}.item-center-left{top:50%;left:10%;transform:translateY(-50%)}.item-center{top:50%;left:50%;transform:translate(-50%,-50%)}.item-center-right{top:50%;right:10%;transform:translateY(-50%)}.item-bottom-left{bottom:10%;left:10%}.item-bottom-center{bottom:10%;left:50%;transform:translate(-50%)}.obj{width:6rem;height:6rem;border:2px solid black;display:flex;justify-content:center;align-items:center;font-size:2rem;background-color:#fff;box-sizing:border-box;cursor:pointer;transition:all .2s ease;position:absolute}.obj.selected{border:3px solid #007bff;box-shadow:0 0 10px #007bff80;transform:scale(1.05)}.item-top-left{top:20px;left:20px}.item-bottom-right{bottom:20px;right:20px}.block-group{position:relative;border:1px dashed blue;padding:10px}.block-group .obj{position:static}body,html{height:100%;margin:0;padding:0}.main{height:100vh}.left_menue{position:fixed;width:72%;border:4px solid;height:100%;box-sizing:border-box;border-color:#ffa7a7}.right_menue{float:right;margin-left:0;width:28%;border:4px solid;height:100%;box-sizing:border-box;border-color:#ffb4b4;background-color:#ffecec;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cardSelecterh1{font-size:2.5rem;text-align:center;border:2px solid;border-radius:5px;color:#ff7171;background-color:#fff;font-family:MS Pゴシック;font-style:italic;z-index:70000000}.card-answer-ex{margin-top:36px;padding:12px;background-color:#fffbe6;border:2px dashed #ffd480;border-radius:8px;text-align:center}.card-answer-title{font-size:1.2rem;color:#d87c00;margin-bottom:8px;font-weight:700}.card-answer-diagram{font-size:1.1rem;color:#333;background:none;border:none;margin:0;white-space:pre;text-align:left;display:inline-block}.game_field{width:100%;height:100%;margin:0 auto;display:flex}.body_games{text-align:center;width:100%;height:80%;border:6px solid rgb(40,105,41);background-color:#d5ffd5;border-radius:15px}.game{width:67%}.game_body{width:88%;margin:0 auto}.menue_game{width:100%;height:20%;border:2px solid rgb(63,107,63);border-radius:4px;background-color:#f0fff0;overflow-y:scroll}.menue_game strong{color:#ff0;background-color:#000}.menue_game button{background-color:#d5fdd0;padding:4px;border:2px solid rgb(63,107,63);border-radius:4px}.menue_game button:hover{background-color:#b6ffac;padding:4px;border:2px solid rgb(63,107,63);border-radius:4px}.card_field{border:2px solid rgb(141,141,99);border-radius:4px;width:33%;height:100vh;overflow-y:scroll}.card_{padding:0 6px;border-radius:6px;font-size:16px;color:#000;border:2px solid rgb(141,141,99);background-color:beige;width:100%}.card_ code{color:#494936;background-color:#fffff1;font-size:17px}.card_ span{color:#a5dd57}.card_field_h1{border:2px solid rgb(141,141,99);background-color:#fffff1;color:#8d8d63;font-size:22px;text-align:center;font-weight:800}@keyframes slide-in{0%{transform:translate(120px)}to{transform:translate(-120px)}}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.back_button{position:absolute;bottom:20px;left:20px;background-color:#007bff;color:#fff;padding:10px 15px;border-radius:50%;text-decoration:none;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;box-shadow:0 2px 5px #0003;transition:background-color .3s ease,transform .2s ease;z-index:10}@keyframes rotation{0%{transform:rotate(0) scale(1);background-color:#0056b3}50%{transform:rotate(360deg) scale(1.1) translate(4px);background-color:#6bb2ff}to{transform:rotate(0) scale(1);background-color:#0056b3}}.back-button:hover{background-color:#0056b3;animation:1s linear infinite rotation}.main_field{height:100vh}.field1{border-radius:20px;border:4px solid rgb(255,200,200);background-color:#fff7f7;position:fixed;height:100%;width:76%}.field2{border-radius:15px;border:4px solid rgb(255,200,200);background-color:#fff7f7;float:right;height:100%;width:24%}.card1{border:4px solid rgb(255,204,204);border-radius:10px;font-size:28px;color:#faa;background-color:#fff7f7}.card1 strong{font-size:16px}.card2{border:2px solid rgb(101,106,45);border-radius:2px;font-size:18px;color:#8e944c;background-color:#fffaee}@keyframes card_sel{0%{transform:scale(1);border-color:#656a2d}50%{transform:scale(1.2);border-color:#f6ff97;border-radius:5px}to{transform:scale(1);border-color:#656a2d}}.card2:hover{animation:1s linear infinite card_sel}.card2 code{background-color:#fff5c9;font-size:16px;padding:2px}.goj1{border:1px solid;width:100px;height:100px;animation:10s linear infinite goj1_a;background-color:#00f;transform:translate(100) translateY(100)}@keyframes goj1_a{0%{background-color:#00f;transform:translate(100px) translateY(100px);border-radius:0%}20%{background-color:green;transform:translate(600px) translateY(100px) scaleX(.5) scaleY(2);border-radius:50%}40%{background-color:#ff0;transform:translate(800px) translateY(400px) scaleX(1.5) scaleY(.7);border-radius:20%}60%{background-color:red;transform:translate(300px) translateY(500px) rotate3d(0deg,180deg,180deg)}80%{background-color:purple;transform:translate(400px) translateY(100px) rotate(180deg)}to{background-color:#00f;transform:translate(100px) translateY(100px)}}.goj2{width:120px;height:120px;font-size:20px;border:1px solid;text-align:center;border-radius:50%;shape-outside:circle(50%);margin:0 auto;background-color:#ffffd1}.goj3{background:linear-gradient(to right,#ff0,pink,#add8e6,#90ee90);width:300px;height:60px;font-size:20px;border:1px solid;text-align:center}.m1{text-align:center;font-family:serif;margin-left:50px;padding:6px;box-shadow:10px 5px 5px #000;color:#fff;animation:fade-in 3s;animation-fill-mode:forwards;font-size:40px;border-radius:8px;width:600px}.m2{font-family:serif;margin-left:240px;margin-top:30px;margin-bottom:60px;padding:4px 20px;box-shadow:10px 5px 5px #000;color:#fff;animation:fade-in 2s;animation-fill-mode:forwards;font-size:25px;border-radius:5px;width:1100px}@keyframes fade-in{0%{opacity:0;transform:translate(-200px) translateY(-50px)}to{opacity:1;background-color:#000000a5;transform:translate(0) translateY(0)}}.btn_start{text-align:center;font-family:serif;margin-left:740px;font-size:32px;width:500px;background-color:#0000006a;color:#fff;box-shadow:10px 5px 5px #000;border-radius:25px;padding:6px 16px}.btn_start:hover{animation:btn_h .5s;animation-fill-mode:forwards}@keyframes btn_h{0%{transform:translate(0) translateY(0);box-shadow:10px 5px 5px #000}to{transform:translate(4px) translateY(4px);box-shadow:10px 5px 5px #0000}}.back-button{position:absolute;top:20px;left:20px;background-color:#007bff;color:#fff;padding:10px 15px;border-radius:50%;text-decoration:none;font-size:1.2rem;display:flex;align-items:center;justify-content:center;width:40px;height:40px;box-shadow:0 2px 5px #0003;transition:background-color .3s ease,transform .2s ease;z-index:10}.back-button:hover{background-color:#0056b3;transform:scale(1.1)}