@charset "UTF-8";

body { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; }

nav.sp_menu { display: none; position: fixed; width: 100%; height: 100vh; color:#0068b7; background-color: #fff; z-index: 999; top: 0; right: 0; margin: 0; padding: 0 0 0 0; }
nav.sp_menu .sp_gnav { height: 100vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items:center; }
nav.sp_menu .sp_gnav h1 { margin:0 auto 2em auto; font-size: 3em; margin:0 0 1em 0; }
nav.sp_menu .sp_gnav ul li { font-size: 2em; margin:1.65rem 0; }
nav.sp_menu .sp_gnav ul li a { color:#0068b7; background-color: #fff; padding:0.7rem; border:solid 0.25rem #0068b7; }
nav.sp_menu .sp_gnav ul li a:hover { color:#fff; background-color: #0068b7; }
nav.sp_menu .sp_gnav ul li:nth-child(7) a { color: #fff; background-color: #0068b7; }
nav.sp_menu .sp_gnav ul li:nth-child(7) a:hover { color: #0068b7; background-color: #fff; }

.menu_overlay { position: fixed; width: 100%; height: 100vh; top: 0; right: 0; opacity: 0.95; z-index: -1;
  background: rgba(29,149,212,1);
  background: linear-gradient(rgba(29,149,212,1) 0%,rgba(42,162,57,1) 100% ); }
.menu_btn { background-color: #fff; width: 5em; height: 5em; position: fixed; overflow: visible; line-height: 1em; font-size: 1em; cursor: pointer; top: 0; right: 0; z-index: 999; border-left:solid 0.25rem #0068b7; border-bottom:solid 0.25rem #0068b7; }
.menu_btn .line { position: fixed; background-color: #0068b7; overflow: hidden; z-index: 999; width: 2.5em; height: 0.25rem; right: 1em; }
.menu_btn .line:nth-child(1) { top: 1.5em; z-index: 2; }
.menu_btn .line:nth-child(2) { top: 2.25em; z-index: 2; }
.menu_btn .line:nth-child(3) { top: 3em; z-index: 2; }

.btn_wrapper { z-index: 99999; position: fixed; }
.btn_wrapper.clicked .menu_btn .line:nth-child(1) { -webkit-transform: translateY(0.75em) rotate(45deg); transform: translateY(0.75em) rotate(45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(2) { opacity: 0; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(3) { -webkit-transform: translateY(-0.75em) rotate(-45deg); transform: translateY(-0.75em) rotate(-45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }

/* sp */
@media screen and (max-width: 1024px) and (orientation: landscape) {
nav.sp_menu .sp_gnav ul { width: 92%; }
nav.sp_menu .sp_gnav ul li { font-size: 1.5em; line-height: 1.5em; margin:-0.25rem auto; }
nav.sp_menu .sp_gnav ul li a { display: inline-block; border:solid 0.25rem #0068b7; padding: 0.5rem}
nav.sp_menu .sp_gnav ul li a:hover { color:#fff; background-color: #0068b7; }
}

@media screen and (max-width: 600px) {
nav.sp_menu .sp_gnav ul { width: 92%; }
nav.sp_menu .sp_gnav ul li { font-size: 2.3em; line-height: 1.5em; margin:-0.125rem auto; }
nav.sp_menu .sp_gnav ul li a { display: inline-block; border:solid 0.15rem #0068b7; padding: 0.5rem}
nav.sp_menu .sp_gnav ul li a:hover { color:#fff; background-color: #0068b7; }
.menu_btn { border-left:solid 0.15rem #0068b7; border-bottom:solid 0.15rem #0068b7; }
.menu_btn .line { height: 0.15rem; right: 1em; }
}