/*=============================================*/
/*Reset CSS*/
/*=============================================*/
article, aside, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {
	display: block;
}

blockquote, body, dd, div, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

li {
	list-style: none;
}

a,
a:link {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
	height: auto;
	vertical-align: bottom;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

button,
input,
select,
textarea {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select::-ms-expand {
	display: none;
}

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check {
	display: none;
}

i {
	font-style: normal;
}

textarea {
	resize: none;
	font-family: sans-serif;
}

* {
	box-sizing: border-box;
}

/********************************************/
/*  Sp-menu*/
/********************************************/
.sp_menu_trigger,
.sp_nav {
	display: none;
}

/*=============================================*/
/*media query    Tablet ipad 5.7inch */
/*=============================================*/
/********************************************/
/* body fixed*/
/********************************************/
body {
	width: 100%;
}

body.fixed {
	position: fixed;
	width: 100%;
}

/********************************************/
/*  Sp-menu btn*/
/********************************************/
.sp_menu_trigger,
.sp_menu_trigger span {
	display: inline-block;
	transition: all 0.4s;
	box-sizing: border-box;
	cursor: pointer;
}

.sp_menu_trigger {
	position: fixed;
	top: 23px;
	right: 25px;
	width: 50px;
	height: 50px;
	z-index: 9999;
	transition: all 0.5s;
}
.sp_menu_trigger span {
	position: absolute;
	background: #fff;
	width: 27px;
	height: 4px;
	left: 0;
	right: 0;
	margin: auto;
}
.sp_menu_trigger span:nth-of-type(1) {
	top: 9px;
}
.sp_menu_trigger span:nth-of-type(2) {
	top: -9px;
	bottom: 0;
}
.sp_menu_trigger span:nth-of-type(3) {
	bottom: 17px;
}

.sp_menu_trigger.nogap {
	top: 0;
	right: 0;
}

.sp_menu_trigger.active span:nth-of-type(1) {
	transform: translateY(10px) rotate(-315deg);
}
.sp_menu_trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.sp_menu_trigger.active span:nth-of-type(3) {
	transform: translateY(-10px) rotate(315deg);
}

.sp_menu_trigger.active {
	right: calc(40% - 50px);
}

/********************************************/
/*  Sp-menu list*/
/********************************************/
header .main_nav {
	position: fixed;
	top: 0;
	right: -100%;
	background-color: rgba(22, 28, 90, 0.6);
	width: calc(40% - 50px);
	height: 100vh;
	-webkit-overflow-scrolling: touch;
	z-index: 9998;
	overflow-y: scroll;
	padding: 40px 20px 60px;
	box-sizing: border-box;
	text-align: left;
	transition: all 0.5s;
}

header .main_nav.open {
	right: 0;
}

header .nav_list > li {
	display: block;
	border-bottom: solid 1px #ccc;
	text-align: left;
}
header .nav_list > li a {
	display: block;
	width: 100%;
	padding: 1em 0;
	color: #fff;
	transition: all 0.5s;
}
header .nav_list > li a:hover {
	background: rgba(204, 204, 204, 0.3);
}
header .nav_list > li.close {
	margin-top: 30px;
	background-color: #666;
	border-bottom: none;
	padding: 1em;
	text-align: center;
	cursor: pointer;
}
header .nav_list > li.close::before {
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	margin-right: 0.5em;
}

.nav_list {
	width: 100%;
	overflow: hidden;
}

/*=============================================*/
/*media query    SmartPhone */
/*=============================================*/
@media screen and (max-width: 767px) {
	.sp_menu_trigger.active {
		right: calc(60% - 50px);
	}
	header .main_nav {
		width: calc(60% - 50px);
	}
}
/*=============================================*/
/*media query    520px */
/*=============================================*/
@media screen and (max-width: 520px) {
	.sp_menu_trigger {
		right: 20px;
	}
	.sp_menu_trigger.active {
		right: calc(100% - 50px);
	}
	header .main_nav {
		width: calc(100% - 50px);
	}
}/*# sourceMappingURL=navigation.css.map */