@charset "UTF-8";







.menu_bk {
	width:60px;
	z-index:200;
	margin-left:1%;
	float:right;
	}
.menu {
	width:60px;
	height:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	transition:transform 250ms ease;
	cursor:pointer;
	z-index:200;
	position:relative;
	}
.menu span {
	position:relative;
	display:block;
	width:50%;
	height:2px;
	background-color:#000000;
	float:right;
	transform-origin:center center;
	transition:transform 250ms ease;
	z-index:9900;
	}
.menu span:nth-of-type(1) {
	transform:translateY(-5px);
	}
.menu span:nth-of-type(3) {
	transform:translateY(5px);
	}

#menu {
	display:none;
	}
#menu:checked ~ .menu {
	background-color:transparent;
	transform:rotate(360deg);
	transition:transform 250ms ease;
	}
#menu:checked ~ .menu span {
	background-color:#333333;
	transition:transform 250ms ease;
	}
#menu:checked ~ .menu span:nth-of-type(1) {
	transform:translateY(1px) rotate(45deg);
	}
#menu:checked ~ .menu span:nth-of-type(2) {
	display:none;
	}
#menu:checked ~ .menu span:nth-of-type(3) {
	transform:translateY(-1px) rotate(-45deg);
	}
/* チェック時の位置制御（重要） */
#menu:checked ~ .nav{
	left:0;
	right:0;
	transform:translateY(0);
	}
#menu:checked ~ main {
	transform:translateY(0px);
	transition:transform 500ms ease;
	}

.nav{
	position:fixed !important;
	inset:0 !important;
	width:100vw !important;
	height:600px !important;
	padding:100px 0 0 0 !important;
	background:#fff !important;
	transform:translateY(-150%);
	transition:transform .35s ease;
	z-index:100;
	}


.nav ul {
	position:relative;
	list-style-type:none;
	margin:0px 0;
	padding:0;
	}
.nav ul li {
	position:relative;
	display:block;
	}
.nav ul li a {
	width:90%;
	position:relative;
	display:block;
	padding:15px 5%;
	color:#333333;
	text-decoration:none;
	font-size:90%;
	text-align:left;
	font-weight:bold;
	}
.nav ul li a:before {
	position:absolute;
	content:"";
	top:0;
	left:0;
	width:0;
	height:100%;
	transition:width 250ms ease;
	z-index:-1;
	}
.nav ul li a:hover {
	color:#ffffff;
	width:90%;
	height:100%;
	padding:15px 5%;
	}
.nav ul li a:hover:before {
	width:90%;
	height:100%;
	padding:0px 5%;
	background-color:#333333;
	transition:width 250ms ease;
	}




.nav_bx {
	width:60%;
	margin:50px 20% 0 20%;
	float:left;
	text-align:center;
	}
.nav_bx_logo {
	width:30%;
	margin:0px 0% 5% 0%;
	float:left;
	margin-right:70%;
	}
.nav_bx_l {
	width:40%;
	float:left;
	}
.nav_bx_c {
	width:25%;
	float:left;
	}
.nav_bx_r {
	width:25%;
	float:right;
	}