@charset "UTF-8";

/*===============================================
	modal menu
===============================================*/

/*---------------------------------------
	MODAL MENU
----------------------------------------*/

.m_menu ul,
.m_menu ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media screen and (min-width:811px) {
	.m_menu {
		display: none;
	}
}

@media screen and (max-width:810px) {
	.m_menu {
		position: fixed;
		display: table;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: hidden;
		opacity: 0;
		z-index: 5000;
	}

	.m_menu ul {
		display: table-cell;
		vertical-align: middle;
	}

	.m_menu li {
		width: 300px;
		height: 50px;
		line-height: 50px;
		margin: 0 auto;
		text-align: center;
		font-family: var(--site-font-en) !important;
		font-size: 18px;
		list-style: none;
	}

	.m_menu li a {
		display: block;
		color: var(--site-white) !important;
		text-decoration: none;
		font-family: var(--site-font-en) !important;
		font-weight: 700;
	}

	.m_menu li a:hover {
		color: #999 !important;
	}

	.totop {
		height: 70px !important;
	}

	.totop img {
		width: 60px;
		height: auto;
	}

	/* Current page
	----------------------------------------*/

	.m_menu ul li.current a,
	.m_menu ul li a[aria-current="page"],
	.m_menu ol li.current a,
	.m_menu ol li a[aria-current="page"] {
		color: var(--site-white) !important;
		position: relative;
	}

	.m_menu ul li a[aria-current="page"]::after,
	.m_menu ol li a[aria-current="page"]::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 6px;
		width: 28px;
		height: 3px;
		background: var(--site-accent);
		transform: translateX(-50%);
	}

	/* 開閉用ボタンがクリックされた時のスタイル */
	.open .m_menu {
		-webkit-transition: all .5s;
		transition: all .5s;
		visibility: visible;
		opacity: 1;
	}

	/* Wavebox link
	----------------------------------------*/

	#wavebox_l {
		width: 100%;
		margin-top: 20px;
		text-align: center;
	}

	#wavebox_l img {
		width: 80px;
		max-width: 80px;
		height: auto;
	}

	#wavebox_l a {
		display: inline-block;
	}

	#wavebox_l a:hover {
		opacity: 0.8;
	}
}

/*---------------------------------------
	SWITCH BUTTON
----------------------------------------*/

@media screen and (min-width:811px) {
	.m_menu-btn {
		display: none;
	}
}

@media screen and (max-width:810px) {
	.m_menu-btn {
		position: fixed;
		top: 10px;
		right: 15px;
		width: 30px;
		height: 30px;
		line-height: 40px;
		font-size: 12px;
		text-align: center;
		cursor: pointer;
		z-index: 10;
		background-image: var(--site-menu-open-image);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.m_menu-btn span {
		color: var(--site-white);
	}

	.m_menu-btn span:after {
		content: attr(data-txt-menu);
	}

	/* 開閉用ボタンがクリックされた時のスタイル */
	.open .m_menu-btn span:after {
		content: attr(data-txt-close);
	}

	.open .m_menu-btn {
		background-image: var(--site-menu-close-image);
		z-index: 9999;
	}
}