@charset "utf-8";

:root {
	--Sidebar_Ul_gap: var(--Size_06);
}

/* モバイル　ALL */
@media screen and (max-width: 425px) {
	:root {

		--Sidebar_Ul_Li_width: calc( calc( 100% - calc( var(--Sidebar_Ul_gap) * 2 ) ) / 3 );

	}
}

/* タブレット */
@media screen and (min-width:426px) and (max-width: 768px) {
	:root {

		--Sidebar_Ul_Li_width: calc( calc( 100% - calc( var(--Sidebar_Ul_gap) * 3 ) ) / 4 );

	}
}

/* ノートパソコン */
@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		--Sidebar_Ul_Li_width: calc( calc( 100% - calc( var(--Sidebar_Ul_gap) * 8 ) ) / 9 );

	}
}

/* ノートパソコン L */
@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		--Sidebar_Ul_Li_width: calc( calc( 100% - calc( var(--Sidebar_Ul_gap) * 8 ) ) / 9 );

	}
}

/* 2K以上 */
@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {

		--Sidebar_Ul_Li_width: calc( calc( 100% - calc( var(--Sidebar_Ul_gap) * 8 ) ) / 9 );

	}
}

/* 4K以上 */
@media screen and (min-width:2561px) {
	:root {

		--Sidebar_Ul_Li_width: calc( calc( 100% - calc( var(--Sidebar_Ul_gap) * 8 ) ) / 9 );

	}
}








/* ーーーーーーーーーー
  サイドカラム
ーーーーーーーーーー */

section#sidebar {
	display: flex;
	padding: var(--Header_padding);
	background: var(--Color_3D100);
}

section#sidebar video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

section#sidebar span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--Color_1D080);
}

section#sidebar ul {
	flex: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--Sidebar_Ul_gap);
	margin: 0;
	padding: 0;
}

section#sidebar ul li {
	width: var(--Sidebar_Ul_Li_width);
}

section#sidebar ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--Size_03);
	width: 100%;
	background: var(--Color_1D100);
	border-radius: var(--Border-radius_S);
	aspect-ratio: 88 / 31;
	overflow: hidden;
}

section#sidebar ul li a i {
	font-size: var(--Size_14);

}

section#sidebar ul li a.cave img {
	width:var(--Size_22);
	aspect-ratio: 217 / 150;
}

section#sidebar ul li a.rok img:nth-of-type(1) {
	width:var(--Size_14);
	aspect-ratio: 1 / 1;
}

section#sidebar ul li a.rok img:nth-of-type(2) {
	width:var(--Size_28);
	aspect-ratio: 75 / 31;
}

section#sidebar ul li a.link {
	padding: 0;
}

section#sidebar ul li a.link img {
}

section#sidebar ul li a.link.tg {
	background: #ffffff;
}

#cave section#sidebar ul li a:hover {
	background: var(--Color_CV100);
}

#cavex section#sidebar ul li a:hover {
	background: var(--Color_CX100);
}