@charset "utf-8";
/* CSS Document */

/***** クリック前のボタン *****/
.toggle{position:fixed;display:block;right:1rem;top:1rem;width:4rem;height:4.5rem;cursor:pointer;z-index:1002;background:rgba(255,255,255,.8);box-sizing:border-box;-webkit-border-radius:.5rem;-moz-border-radius:.5rem;border-radius:.5rem;border:solid .1rem #3A13F9}

.toggle span{display:block;position:absolute;width:80%;border-bottom:solid .1rem #3A13F9;-webkit-transition:.35s ease-in-out;-moz-transition:.35s ease-in-out;transition:.35s ease-in-out;padding:.3rem 0;left:10%;font-family:'Yeseva One',cursive;color:#3A13F9}
.toggle span:nth-child(1){top:0}
.toggle span:nth-child(2){top:.5rem}
.toggle span:nth-child(3){top:1rem}
.toggle span:nth-child(4){border:none;top:2.5rem;left:14%;font-size:1rem}

.toggle.active span:nth-child(1){top:1rem;left:.2rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.toggle.active span:nth-child(2),.toggle.active span:nth-child(3){top:1rem;left:.6rem;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.toggle.active span:nth-child(4){top:2.5rem}

.global_nav{position:fixed;top:0;right:0;width:30%;height:100vh;transform:translatex(100%);z-index:1001;padding:1.5rem 0;background:rgba(58,19,249,.6);transition:all 0.8s;box-sizing:border-box}
.global_nav ul{margin:0;padding:0;list-style-type:none;box-sizing:border-box;width:70%}
.global_nav li{margin:0;padding:0;list-style:none;box-sizing:border-box}
.global_nav .nav_li{width:100%;font-size:1.1rem;text-align:left}
.global_nav .nav_li a{display:block;background:rgba(255,255,255,.8);color:#3A13F9;text-decoration:none;-webkit-transition:1s;-moz-transition:1s;transition:1s;padding:.5rem 0 .5rem 5%;font-family:'Kosugi',sans-serif;margin:1rem auto;-webkit-border-radius:0 .5rem .5rem 0;-moz-border-radius:0 .5rem .5rem 0;border-radius:0 .5rem .5rem 0}
.global_nav .nav_li a:hover{background:rgba(58,19,249,.8);color:#FFF;font-size:1.2rem;padding:.3rem 0 .3rem 5%;border:solid #FFF;border-width:.05rem .05rem .05rem 0}

.global_nav.active{transform:none}

/* Mobile -------*/
@media screen and (min-width:0) and (max-device-width:374px){
.toggle{position:fixed;display:block;right:.2rem;top:4rem;width:2.5rem;height:3rem;cursor:pointer;box-sizing:border-box}
.toggle span{display:block;position:absolute;width:80%;border-bottom:solid .08rem #3A13F9;-webkit-transition:.35s ease-in-out;-moz-transition:.35s ease-in-out;transition:.35s ease-in-out;padding:.3rem 0;left:10%;font-family:'Yeseva One',cursive;color:#3A13F9}
.toggle span:nth-child(1){top:0}
.toggle span:nth-child(2){top:.3rem}
.toggle span:nth-child(3){top:.6rem}
.toggle span:nth-child(4){border:none;top:1.5rem;left:10%;font-size:.7rem}
.toggle.active span:nth-child(1){top:.7rem;left:.1rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.toggle.active span:nth-child(2),.toggle.active span:nth-child(3){top:.7rem;left:.5rem;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.toggle.active span:nth-child(4){top:1.8rem}

.global_nav{position:fixed;top:0;right:0;width:70%;transform:translatex(100%);padding:1rem 0;transition:all 0.8s}
.global_nav ul{margin:0;padding:0 .5rem;list-style-type:none;width:75%}
.global_nav li{margin:0;padding:0;list-style:none;text-align:right}
.global_nav .nav_li{width:100%;font-size:.9rem}
.global_nav .nav_li a{display:block;text-decoration:none;-webkit-transition:.8s;-moz-transition:.8s;transition:.8s;padding:.2rem 0 .2rem .5rem;margin:.5rem 0}
.global_nav .nav_li a:hover{font-size:1rem;padding:.2rem 0 .2rem .5rem}
.global_nav.active{transform:none}
}

@media screen and (min-width:375px) and (max-device-width:420px){
.toggle{position:fixed;display:block;right:.2rem;top:4rem;width:2.5rem;height:3rem;cursor:pointer;box-sizing:border-box}
.toggle span{display:block;position:absolute;width:80%;border-bottom:solid .08rem #3A13F9;-webkit-transition:.35s ease-in-out;-moz-transition:.35s ease-in-out;transition:.35s ease-in-out;padding:.3rem 0;left:10%;font-family:'Yeseva One',cursive;color:#3A13F9}
.toggle span:nth-child(1){top:0}
.toggle span:nth-child(2){top:.3rem}
.toggle span:nth-child(3){top:.6rem}
.toggle span:nth-child(4){border:none;top:1.5rem;left:10%;font-size:.7rem}
.toggle.active span:nth-child(1){top:.7rem;left:.1rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.toggle.active span:nth-child(2),.toggle.active span:nth-child(3){top:.7rem;left:.5rem;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.toggle.active span:nth-child(4){top:1.8rem}

.global_nav{position:fixed;top:0;right:0;width:70%;transform:translatex(100%);padding:1rem 0;transition:all 0.8s}
.global_nav ul{margin:0;padding:0 .5rem;list-style-type:none;width:75%}
.global_nav li{margin:0;padding:0;list-style:none;text-align:right}
.global_nav .nav_li{width:100%;font-size:.9rem}
.global_nav .nav_li a{display:block;text-decoration:none;-webkit-transition:.8s;-moz-transition:.8s;transition:.8s;padding:.2rem 0 .2rem .5rem;margin:.5rem 0}
.global_nav .nav_li a:hover{font-size:1rem;padding:.2rem 0 .2rem .5rem}
.global_nav.active{transform:none}
}

@media screen and (min-width:421px) and (max-device-width:800px){
.toggle{position:fixed;display:block;right:.5rem;top:3rem;width:3rem;height:3.5rem;cursor:pointer;z-index:300;box-sizing:border-box}
.toggle span{display:block;position:absolute;width:80%;border-bottom:solid .1rem #3A13F9;-webkit-transition:.35s ease-in-out;-moz-transition:.35s ease-in-out;transition:.35s ease-in-out;padding:.3rem 0;left:10%;font-family:'Yeseva One',cursive;color:#3A13F9}
.toggle span:nth-child(1){top:0}
.toggle span:nth-child(2){top:.4rem}
.toggle span:nth-child(3){top:.9rem}
.toggle span:nth-child(4){border:none;top:2rem;left:15%;font-size:.8rem}
.toggle.active span:nth-child(1){top:.8rem;left:.1rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.toggle.active span:nth-child(2),.toggle.active span:nth-child(3){top:.8rem;left:.5rem;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.toggle.active span:nth-child(4){top:2rem}

.global_nav{position:fixed;top:0;rihgt:0;width:40%;transform:translatex(100%);z-index:200;padding:1rem 0;transition:all 0.8s}
.global_nav ul{margin:0;padding:0;list-style-type:none;width:70%}
.global_nav li{margin:0;padding:0;list-style:none;text-align:left}
.global_nav .nav_li{width:100%;font-size:.9rem}
.global_nav .nav_li a{display:block;text-decoration:none;-webkit-transition:.8s;-moz-transition:.8s;transition:.8s;padding:.2rem 0 .2rem 5%;margin:.5rem auto}
.global_nav .nav_li a:hover{font-size:1rem;padding:.2rem 0 .2rem 5%}
.global_nav.active{transform:none}
}