/*===============================================================================
***メニュー
================================================================================*/
/*===============================
* メニュー：SP
* =================================*/
@media not all and (min-width: 600px){
	.myMenu{
		--c-this: var(--c-light);
	}
	.myMenu a{
		width: 100%;
		height: 100%;
		line-height: var(--lh-lg);
		color: var(--c-this);
		font-size: .875rem;
	}

	/*===============================
	* メニュー：SP：main
	* =================================*/
	.myMenu.--main>ul{
		--count: 2;
		--gap: 0rem;
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap);
		border-top: 1px solid var(--c-this);
	}
	.myMenu.--main>ul>li{
		width: calc( ( 100% - var(--gap) * (var(--count) - 1) ) / var(--count) );
		border-bottom: 1px solid var(--c-this);
	}
	.myMenu.--main>ul>li:nth-of-type(odd){
		border-right: 1px solid var(--c-this);
	}
	.myMenu.--main>ul>li>a{
		display: block;
		padding: 1.5rem 1rem;
		text-align: center;
	}
	.myMenu.--main>ul>li>a:is(:hover, :focus){
		background: rgb(255 255 255 / 20%);
	}

	/*===============================
	* メニュー：SP：sub
	* =================================*/
	.myMenu.--sub>ul>li:not(:last-of-type){
		border-bottom: 1px solid var(--c-this);
	}
	.myMenu.--sub>ul>li>a{
		--arrow-size: .75em;
		--arrow-weight: 1px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: .5em;
		padding: 1.5rem;
	}
	.myMenu.--sub>ul>li>a:is(:hover, :focus){
		background: rgb(255 255 255 / 20%);
	}
	.myMenu.--sub>ul>li>a::after{
		transform: rotate(45deg);
		content: "";
		width: var(--arrow-size);
		height: var(--arrow-size);
		border-top: var(--arrow-weight) solid var(--c-this);
		border-right: var(--arrow-weight) solid var(--c-this);
		transition: var(--ani-t--normal) ease-out;
	}
	/* アニメーション */
	.myMenu.--sub>ul>li>a:is(:hover, :focus)::after{
		transform: rotate(45deg) translate(.25em, -.25em);
	}
}

/*===============================
* メニュー：PC
* =================================*/
@media (min-width: 600px){
	.myMenuArea{
		padding: var(--g-sec--md) 0;
	}

	.myMenu:not(:last-of-type){
		margin-bottom: 1.5rem;
	}

	.myMenu>ul{
		--gap: 1rem;
		display: flex;
		gap: .5rem var(--gap);
		justify-content: center;
		flex-wrap: wrap;
	}
	.myMenu>ul>li:not(:last-of-type){
		position: relative;
	}
	.myMenu>ul>li:not(:last-of-type)::before{
		position: absolute;
		top: 50%;
		right: calc( var(--gap) / -2 );
		transform: translate(50%, -50%);
		content: "";
		width: 1px;
		height: 0.5em;
		background: var(--c-gray--dark);
	}
	.myMenu>ul>li>a{
		padding: 0 .5em;
		line-height: var(--lh-lg);
	}
	.myMenu>ul>li>a:is(:hover, :focus) {
		color: var(--c-main);
	}
}