// サブメニューの展開
.c-submenuToggleBtn {
	--btn-size: 2rem;
	position: absolute;
	top: 50%;
	right: 8px;
	z-index: 1;
	width: var(--btn-size);
	height: var(--btn-size);
	padding: 0;
	color: inherit;
	text-align: center;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	transform: translateY(-50%);
	cursor: pointer;

	&:focus {
		outline-width: 2px;
		outline-style: solid;
	}

	@include tab {
		--btn-size: 24px;
		transition: background-color .25s;
	}

	.c-submenuToggleBtn__svg {
		display: block;
		width: calc(var(--btn-size) / 2);
		height: calc(var(--btn-size) / 2);
		transform: rotate(0deg);
		transition: transform .25s;
	}

	&::after {
		box-shadow: inset 0 0 0 1px currentcolor;
		opacity: .15;
		transition: background-color .25s;
		content: "";

		@extend %absLayer;

	}

	@include pc {

		&:hover::after {
			background-color: currentcolor;
		}
	}


	&.is-opened {

		.c-submenuToggleBtn__svg {
			transform: rotate(-180deg);
		}
	}
}