.menu-link {
	border-bottom: solid 1px transparent;
	transition: all .15s ease-in-out;
}

.menu-link:hover {
	border-color: #31C447 !important;
	color: #00A050 !important;
}

/* バーガーメニュー関連 */
body {
	padding-right: 0 !important;
}

.logo-img {
	width: 100%;
	height: auto;
	max-width: 225px;
}

.footer-logo-img {
	width: 100%;
	height: auto;
	max-width: 275px;
}

/* 開閉ボタン */
#toggleBtn {
	position: relative;
	cursor: pointer;
	width: 35px;
	height: 35px;
	z-index: 9998;
}

#toggleBtn span {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 10%;
	width:80%;
	height: 1px;
	border-radius: 2px;
	background: #000000;
}

#toggleBtn span:nth-of-type(1) {
	top: 8px;
}

#toggleBtn span:nth-of-type(2) {
	top: 18px;
}

#toggleBtn span:nth-of-type(3) {
	top: 28px;
}

/* メニュー展開時 閉ボタン */
/* バーガーメニューを参照し、展開中のみ適用 */

#nav-area:has(+ .offcanvas.show:not(.hiding)) #toggleBtn span:nth-of-type(1),
#nav-area:has(+ .offcanvas.showing) #toggleBtn span:nth-of-type(1) {
	top: 9px;
	transform: translateY(6px) rotate(-135deg);
}

#nav-area:has(+ .offcanvas.show:not(.hiding)) #toggleBtn span:nth-of-type(2),
#nav-area:has(+ .offcanvas.showing) #toggleBtn span:nth-of-type(2) {
	opacity: 0;
}

#nav-area:has(+ .offcanvas.show:not(.hiding)) #toggleBtn span:nth-of-type(3),
#nav-area:has(+ .offcanvas.showing) #toggleBtn span:nth-of-type(3) {
	top: 21px;
	transform: translateY(-6px) rotate(135deg);
}

.offcanvas.offcanvas-end {
	width: 340px !important;
}

@media (min-width: 768px) {
	.logo-img,
	.footer-logo-img {
		width: 100%;
		height: auto;
		max-width: 300px;
	}
	
	.offcanvas.offcanvas-end {
		width: 420px !important;
	}
}