@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Open_Div_H2_font-size: 6vw;
		--Open_Div_Ul_margin: var(--Gap_L) 0 0;
		--Open_Div_Ul_Li_padding: var(--Gap_M);
		--H2-2_font-size: var(--Size_16);
		--H2-2_aspect-ratio: 2.618 / 1;
	}
}

@media screen and (min-width:769px) and ( max-width:1160px) {
	:root {
		--Open_Div_H2_font-size: var(--H2_font-size);
		--Open_Div_Ul_margin: var(--Margin_S) 0 0;
		--Open_Div_Ul_Li_padding: var(--Gap_L);
		--H2-2_font-size: var(--H2_font-size);
		--H2-2_aspect-ratio: 2.618 / 1;
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Open_Div_H2_font-size: var(--H2_font-size);
		--Open_Div_Ul_margin: var(--Margin_S) 0 0;
		--Open_Div_Ul_Li_padding: var(--Gap_L);
		--H2-2_font-size: var(--H2_font-size);
		--H2-2_aspect-ratio: 5.236 / 1;
	}
}

#open {
	& > div {
		& > div {
			display: flex;
			justify-content: center;
			gap: var(--Gap_M);
			aspect-ratio: auto;
			& div {
				display: flex;
				flex-direction: column;
				align-items: center;
				& h2 {
					margin: 0;
					text-align: left;
					font-size: var(--Open_Div_H2_font-size);
					font-weight: 600;
				}
				& ul {
					display: flex;
					gap: var(--Gap_L);
					margin: var(--Open_Div_Ul_margin);
					& li {
						display: flex;
						justify-content: center;
						align-items: center;
						padding: var(--Open_Div_Ul_Li_padding);
						text-align: center;
						font-size: var(--Size_10);
						color: var(--Color_FF);
						font-weight: 600;
						aspect-ratio: 1 / 1;
						z-index: 1;
					}
					& li:before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: url('../common/svg/circle.svg');
						background-repeat: no-repeat;
						aspect-ratio: 1 / 1;
						animation: 20s linear infinite rotation;
						z-index: -1;
					}
				}
			}
		}
	}
}

#detail {
	& > div {
		position: relative;
		display: flex;
		justify-content: flex-end;
		gap: var(--Gap_M);
		margin: 0 0 var(--Margin_S);
		aspect-ratio: var(--H2-2_aspect-ratio);
		& div {
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(50%);
			z-index: 3;
			& h2 {
				margin: 0;
				text-align: left;
				font-size: var(--H2-2_font-size);
				color: var(--Color_FF);
				font-weight: 600;
			}
		}
	}
	& > div:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 50%;
		height: 100%;
		background: url('../common/img/obsession/h22.jpg');
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 1;
	}
	& > div:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(0.25turn, var(--Color_1D000), var(--Color_1D100), var(--Color_1D100));
		z-index: 2;
	}
}

article {
	& .box {
		& figure:after {
			content: '';
			position: absolute;
			width: 50%;
			background: url('../common/svg/circle.svg');
			background-repeat: no-repeat;
			aspect-ratio: 1 / 1;
			animation: 20s linear infinite rotation;
		}
		& > div {
			& .link {
				display: flex;
				flex-wrap: wrap;
				gap: var(--Gap_L);
			}
		}
	}
}
section {
	& .img-right {
		& figure:after {
			top: var(--Gap_S);
			left: var(--Gap_S);
		}
	}
	& .img-left {
		& figure:after {
			top: var(--Gap_S);
			right: var(--Gap_S);
		}
	}
}

@keyframes rotation {
	0% { transform:rotate( 0 ); }
	100% { transform:rotate( 360deg ); }
}