@charset "utf-8";

@media screen and (max-width: 768px) and ( max-width:1160px) {
	:root {
		--Open_Svg_width: 48vw;
	}
}

@media screen and (min-width:1161px) {
	:root {
		--Open_Svg_width: calc( var(--Size_10) * 48 );
	}
}

#open {
	& > div {
		display: flex;
		padding: 0 var(--padding);
		background: url('../common/img/about/office.png');
		background-repeat: no-repeat;
		background-size: 50% 100%;
		aspect-ratio: 2.618 / 1;
		& > div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			& div {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				& #teppen_japan {
					width: var(--Open_Svg_width);
					aspect-ratio: 331.4 / 65.4;
					& svg {
						& .st0 {
							fill: var(--Color_R);
						}
					}
				}
				& em {
					font-size: var(--Size_18);
					font-weight: 600;
				}
			}
		}
		& > div:before {
			content: '';
			position: absolute;
			top: 0;
			right: 50%;
			width: var(--Size_48);
			height: 100%;
			background: linear-gradient( to right, var(--Color_FF000), var(--Color_FF100) );
		}
	}
}

section {
	.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;
		}
	}
	.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 ); }
}