@charset "UTF-8";

/***** デフォルトはスマートフォン *****/
.header_outer {
	padding-top: 0.1rem;
	background: linear-gradient(120deg,
			#00325580,
			#00325580,
			#00325580,
			#389cf980);
	background-size: 300% 300%;
	animation: waterMove 8s ease infinite;
}

@keyframes header_outer {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.header_inner {
	display: flex;
	align-items: center;
}

.logo_img {
	z-index: 10;
	width: 15vw;
	margin-left: 1rem;
}
.main_menu {
	display: flex;
	list-style: none;
}

.menu_outer {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.main_menu{
	color: white;
	text-decoration: none;
}
.main_menu li{
	z-index: 10;
	display: none;
	color: white;
	margin: 0 1rem;
	font-size: 0.7rem;
	text-decoration: none;
}
.main_menu a{
	color: #fff;
	text-decoration: none;
}
.main_menu_head{
	text-decoration: none;
	color: #fff;
}
.menu_button {
	background: #ffffff00;
	border: none;
}

.menu_btn {
	z-index: 10;
	width: 30vw;
	justify-items: flex-end;
}

/* 背景＋メニュー全体 */
.menu-overlay {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;

	/* 濃いブルー＋透過 */
	background: rgba(10, 30, 80, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.2);

	/* ぼかし */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	/* 初期状態 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease;
	z-index: 1000;
}

/* メニュー本体 */
.menu-content {
	position: absolute;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	background: rgba(10, 30, 80, 0.9);
	padding: 60px 30px;

	/* 右からスライド */
	transform: translateX(100%);
	transition: transform 0.4s ease;
}

/* 表示状態 */
.menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

.menu-overlay.active .menu-content {
	transform: translateX(0);
}

/* メニュー中身 */
.menu-content ul {
	list-style: none;
	padding: 0;
}

.menu-content li {
	margin-bottom: 20px;
}

.menu-content a {
	color: #fff;
	font-size: 18px;
	text-decoration: none;
}

/**==================================================**/
/**=          画面サイズ768px以上の指定              **/
/**==================================================**/
@media screen and (min-width:768px) {
	.menu_btn {
		width: 250px;
	}
}

/**==================================================**/
/**=          画面サイズ960px以上の指定              **/
/**==================================================**/
@media screen and (min-width:960px) {
	.main_menu li {
		display: block;
	}
}