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

/* 全体レイアウト */
nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #00469b;
 z-index: 1;
}
.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}

/* トグル部分 */
.navbar_toggle{
 z-index:9999;
}
.navbar_toggle_icon {
 position: relative;
 display: block;
 height: 2px;
 width: 30px;
 background: #fff;
 -webkit-transition: ease .5s;
 transition: ease .5s;
}
.navbar_toggle_icon:nth-child(1) {
 top: 0;
}
.navbar_toggle_icon:nth-child(2) {
 margin: 8px 0;
}
.navbar_toggle_icon:nth-child(3) {
 top: 0;
}
/*OPEN時の動き*/
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
 top: 10px;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 opacity: 0;
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(3) {
 top: -10px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

/* ナビゲーション部分 */
.menu{
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: ease .5s;
	transition: ease .5s;
	z-index: 1000;
	background: #fff;
	opacity: 0.95;
}
.menu ul li a{
	padding: 1.2em;
	border-bottom: 1px solid #CCC;
	font-size: 1.1em;
	font-weight: bold;
	color: #000;
	display: block;
}
/*OPEN時の動き*/
.menu.open {
 -webkit-transform:translateX(0);
 transform:translateX(0);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}

/* レスポンシブ対応 */
@media screen and (min-width: 480px) {
nav{
 display: flex;
 flex-direction: row;
}
.navbar_toggle{
 display: none;
}
.menu{
 width: 100%;
 -webkit-transform: translateX(0);
 transform: translateX(0);
}
.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
.menu ul li{
 padding: 0 1em;
 border-bottom: none;
}
}