.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: center;
	width: 120px;
	height: 120px;
}
.loader > span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
}
body.font-large .loader > span {
	font-size: calc(12px + 2px);
}
body.font-extra-large .loader > span {
	font-size: calc(12px + 6px);
}
.type5 {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	animation: spinner5_1 1.2s infinite linear forwards;
}
.type5 > span {
	display: none;
}

@keyframes spinner5_1 {
	0% {
		transform: translate(-50%, -50%) rotate(0) scale(0.5);
		box-shadow: 0;
		opacity: 0.2;
	}
	50% {
		transform: translate(-50%, -50%) rotate(180deg) scale(1);
		box-shadow: 21px 21px, -21px -21px, 21px -21px, -21px 21px;
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg) scale(0.5);
		box-shadow: 0;
		opacity: 0.2;
	}
}

@keyframes spinner_loading_text {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
		opacity: 1;
	}
	50% {
		transform: translate(-50%, -50%) rotate(180deg);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
		opacity: 1;
	}
}

.loader_container.is_active {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.loader_container {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100vw;
	height: 100vh;
	background-color: #ffffff; /* 背景カラー */
	color: #ffa516; /* ローディングアニメーションカラー */
	transition: all 1.2s ease;
	-webkit-transition: all 1.2s ease; /* 1.2秒でフェードアウト */
	visibility: visible;
}

.loader_container:not(.is_active) ~ * {
    display: none;
    opacity: 0;
}