// サブメニューの展開
.c-submenuToggleBtn {
	position: absolute;
	top: 50%;
	right: 8px;
	z-index: 1;
	width: 2rem;
	height: 2rem;
	color: inherit;
	line-height: 2;
	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 {
		width: 24px;
		height: 24px;
		line-height: 24px;
		transition: background-color .25s;
	}

	&::before {
		display: block;
		font-size: 12px;
		line-height: 1;
		transform: rotate(0deg);
		transition: transform .25s;

		@extend %arkheIcon;
		@extend .arkhe-icon-chevron-down::before;
	}

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

		@extend %absLayer;

	}

	@include pc {

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


	&.is-opened {

		&::before {
			transform: rotate(-180deg);
		}
	}
}