/* ▼▼▼ CSS（ここから）（※2） ▼▼▼ */
/* メニューの共通設定 */
nav.menu-wrapper #menu-btn-check {
	display: none;
	/* チェックボックスは非表示 */
}

/* PCメニューの設定 */
nav.menu-wrapper {
	max-width: 960px;
	/* メニュー最大幅 */
	margin: 0 auto;
}

nav.menu-wrapper .menu-content ul {
	display: flex;
	list-style: none;
}

nav.menu-wrapper .menu-content ul li {
	width: calc(100% / 5);
	padding: 5px 0;
	/* メニューの上下の隙間 */
	border-right: 1px #ccc solid;
	/* メニュー間の区切り線 */
}

nav.menu-wrapper .menu-content ul li:first-child {
	border-left: 1px #ccc solid;
	/* メニュー間の区切り線 */
}

nav.menu-wrapper .menu-content ul li a {
	display: block;
	text-align: center;
	text-decoration: none;
	font-size: 1rem;
	@media screen and (max-width: 768px) {
		font-size: 32px;
	}

	color: #333;
	/* メニューの文字色 */

	/* メニュー（1段目）を文字サイズ */
	font-weight: bold;
	/* メニュー（1段目）を太字 */
}




nav.menu-wrapper .menu-content ul li a span {
	font-size: 90%;
	/* メニュー（2段目）の文字サイズ */
	font-weight: normal;
	/* メニュー（2段目）を通常文字 */
}

nav.menu-wrapper .menu-content ul li a:hover {
	opacity: 0.6;
	/* オンマウス時の透明度 */
}

nav.menu-wrapper .menu-btn {
	position: fixed;
	/* ボタン領域を右上に作成 */
	top: 10px;
	/* ボタンの縦位置 */
	right: 10px;
	/* ボタンの横位置 */
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	z-index: 90;
	background-color: rgba(0, 0, 0, 0.3);
	cursor: pointer;
	border-radius: 10px;
}





nav.menu-wrapper .menu-btn span,
/* ボタンの3本線 */
nav.menu-wrapper .menu-btn span:before,
nav.menu-wrapper .menu-btn span:after {
	content: '';
	display: block;
	height: 6px;
	width: 35px;
	border-radius: 3px;
	background-color: #fff;
	/* 3本線の色 */
	position: absolute;
}

nav.menu-wrapper .menu-btn span:before {
	bottom: 10px;
	/* 上の線は上方向に10px移動 */
}

nav.menu-wrapper .menu-btn span:after {
	top: 10px;
	/* 下の線は下方向に10px移動 */
}

nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span {
	/* ボタンクリック時：真ん中の線は非表示 */
	background-color: rgba(255, 255, 255, 0);
}

nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span::before {
	/* ボタンクリック時：上の線を斜め（／） */
	bottom: 0;
	transform: rotate(45deg);
}

nav.menu-wrapper #menu-btn-check:checked ~ .menu-btn span::after {
	/* ボタンクリック時：下の線を斜め（＼） */
	top: 0;
	transform: rotate(-45deg);
}

nav.menu-wrapper #menu-btn-check:checked ~ .menu-content {
	/* ボタンクリック時：メニュー領域を表示 */
	left: calc(100% - 220px);
	/* メニュー領域の引き出し位置（0にすると左端まで） */
}

nav.menu-wrapper .menu-content {
	/* メニューのコンテンツ領域 */
	width: 100%;
	height: 100vh;
	/* autoにするとコンテンツ領域分までに */
	position: fixed;
	top: 0;
	left: 100%;
	overflow: auto;
	z-index: 80;
	padding: 0 10px;
	/* メニュー領域の左右の隙間 */
	background-color: rgba(0, 0, 0, 0.7);
	/* メニュー領域の背景色 */
	transition: all 0.5s;
	/* メニュー領域の引き出しスピード */
}

nav.menu-wrapper .menu-content ul {
	/* メニューの領域を作成 */
	display: block;
	width: 200px;
	/* メニュー領域の横幅を設定（100%にすると横幅いっぱい） */
	padding-top: 80px;
	/* ボタン領域分を下に下げる */
	list-style: none;
}

nav.menu-wrapper .menu-content ul li {
	/* メニューの項目領域 */
	width: 100%;
	border-right: none;
	border-top: solid 1px #fff;
	/* メニュー項目間の線色 */
}

nav.menu-wrapper .menu-content ul li:first-child {
	border-left: none;
}

nav.menu-wrapper .menu-content ul li a {
	/* メニューの項目領域（リンク実体） */
	display: block;
	font-size: 16px;

	@media screen and (max-width: 768px) {
		font-size: 32px;
	}


	text-decoration: none;
	color: #fff;
	/* メニュー項目の文字色 */
	font-weight: bold;
	padding: 10px 0px;
	text-align: center;
	/* メニュー項目の表示位置 */
}

nav.menu-wrapper .menu-content ul li a span {
	font-size: 90%;
	font-weight: normal;
	list-style: none;
}

nav.menu-wrapper .menu-content ul li a:hover {
	opacity: 0.6;
	list-style: none;
}