/*NAVIGATION*/


/*----------------------------
** MAIN MENU
----------------------------*/
.__nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	/*position: absolute;
	top: 38%;*/
}
.__nav > * {
	display: flex;
	align-items: center;
}

.__nav > div {
	min-width: calc(100% / 6);
	font-family: "fot-tsukuardgothic-std",sans-serif;
	font-size: 1.06rem;
	font-weight: 600;
	letter-spacing: -0.01rem;
	padding: 0 10px;
	text-align: center;
	margin-bottom: 20px;
}
.__nav > div a {
	display: block;
	width: 100%;
	padding: 5px 10px;
	background: rgba(255,210,0,1.0);
	color: rgba(0,161,153,1.0);
	text-decoration: none;
	position: relative;
	border-radius: 6px;
}
.__nav > div a span {
	position: relative;
	z-index: 3;
}
.__nav > div a:hover,
.__nav > div a:hover span {
	color: rgba(0,161,153,1.0);
}
.__nav > div a::after {
	content: '';
	background: #fff;
	width: 0;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 6px;
	transition: 0.3s all;
}
.__nav > div a:hover::after {
	content: '';
	background: #fff;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 6px;
	transition: 0.3s all;
}
@media screen and (max-width:768px) {
	.__nav > div {
		align-items: center;
		font-size: 1.06rem;
		letter-spacing: -0.01rem;
		width: 75%;
		margin: 0 auto 15px;
	}
	.__nav > div a {
		display: block;
		width: 100%;
		padding: 10px;
		background: rgba(255,210,0,1.0);
		color: rgba(0,161,153,1.0);
		text-decoration: none;
		position: relative;
		border-radius: 6px;
	}
}

/*-----------------------------------------
** twitter
-----------------------------------------*/
.__twitter {
	position: absolute;
	width: 40px;
	top: 15px;
	right: 15px;
	z-index: 10;
	transition: 0.3s all;
	filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.0));
}
.__twitter:hover {
	filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.75));
}
.__sns {
	position: absolute;
	width: 40px;
	top: 15px;
	right: 15px;
	z-index: 10;
}
.__sns > div:first-child {
	margin-bottom: 10px;
}
.__sns > div {
	transition: 0.3s all;
	filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.0));
}
.__sns > div:hover {
	filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.75));
}
@media screen and (max-width:768px) {
	.__twitter,.__sns {
		position: fixed;
		width: 40px;
		top: 10px;
		right: 10px;
		z-index: 50;
	}
}



@media screen and (max-width:768px) {
	/*HUMBUGER MENU*/
	.menu-trigger {
		display: block;
		cursor: pointer;
		position: fixed;
		width: 30px;
		height: 27px;
		top: 15px;
		left: 15px;
		z-index: 900;
	}
	.menu-trigger,
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background-color: rgba(0,161,153,1.0);
		border-radius: 4px;
		border-bottom: 1px solid rgba(251,197,0,1.0);
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 12px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}
	.menu-trigger.active {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	.menu-trigger.active span {
		background-color: rgba(0,161,153,1.0);
	}
	.menu-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(12px) rotate(-45deg);
		transform: translateY(12px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		-webkit-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}
	.menu-trigger.active span:nth-of-type(3) {
		opacity: 0;
	}
	
	.for-PC {
		display: none;
	}
	
	.__nav {
		display: block;
		width: 100%;
		height: 100vh;
		position: fixed;
		left: -100%;
		top: 0;
		transform: none;
		z-index: 30;
		/*border-radius: 2px;*/
		text-align: center;
		/*margin: 0 auto 0;*/
		padding: 50px 30px 30px;
		background: #fff;
		overflow-y: auto;
		transition: 0.2s all;
		opacity: 1;
	}
	.__nav.__open {
		top: 0;
		left: 0;
	}
	.__nav ul {
		text-align: center;
	}
}