@charset "UTF-8";

:root,
::before,
::after {
	--tcd-loading-bg-color: #fff;
	--tcd-loading-icon-color: #000;
	--tcd-loading-headline-color: #000;
	--tcd-loading-headline-font-size: 36px;
}

@media (max-width: 991px) {
	:root,
	::before,
	::after {
		--tcd-loading-headline-font-size: 20px;
	}
}

/* 基本 */
.p-loading-screen {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	background-color: var(--tcd-loading-bg-color);
}

.p-loading-screen-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.close-loading-screen .p-loading-screen {
	pointer-events: none;
}

/* サークル */
.p-loading-screen-circle {
	width: 60px;
}

@media screen and (max-width: 767px) {
	.p-loading-screen_circle {
		width: 40px;
	}
}

.p-loading-screen-circle-icon {
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	animation: circular_loader_rotate 2s linear infinite;
}

.p-loading-screen-circle-path {
	stroke: var(--tcd-loading-icon-color);
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	stroke-linecap: round;
	animation: circular_loader_dash 1.5s ease-in-out infinite;
}

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

@keyframes circular_loader_dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124;
	}
}

/* スクエア */
.p-loading-screen-square {
	width: 60px;
	height: 60px;
}

@media screen and (max-width: 767px) {
	.p-loading-screen-square {
		width: 40px;
		height: 40px;
	}
}

.p-loading-screen-square-icon {
	float: left;
	width: 33%;
	height: 33%;
	background-color: var(--tcd-loading-icon-color);
	animation: cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.p-loading-screen-square-icon-1 {
	animation-delay: 0.2s;
}

.p-loading-screen-square-icon-2 {
	animation-delay: 0.3s;
}

.p-loading-screen-square-icon-3 {
	animation-delay: 0.4s;
}

.p-loading-screen-square-icon-4 {
	animation-delay: 0.1s;
}

.p-loading-screen-square-icon-5 {
	animation-delay: 0.2s;
}

.p-loading-screen-square-icon-6 {
	animation-delay: 0.3s;
}

.p-loading-screen-square-icon-7 {
	animation-delay: 0s;
}

.p-loading-screen-square-icon-8 {
	animation-delay: 0.1s;
}

.p-loading-screen-square-icon-9 {
	animation-delay: 0.2s;
}

@keyframes cubeGridScaleDelay {
	0%,
	70%,
	100% {
		transform: scale3d(1, 1, 1);
	}

	35% {
		transform: scale3d(0, 0, 1);
	}
}

/* ドット */
.p-loading-screen-dot {
	position: relative;
	width: 60px;
	height: 60px;
}

@media screen and (max-width: 750px) {
	.p-loading-screen-dot {
		width: 40px;
		height: 40px;
	}
}

.p-loading-screen-dot-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.p-loading-screen-dot-icon span {
	display: block;
	width: 15%;
	height: 15%;
	margin: 0 auto;
	background-color: var(--tcd-loading-icon-color);
	border-radius: 100%;
	animation: circleBounceDelay 1.2s infinite ease-in-out both;
}

.p-loading-screen-dot-icon-2 {
	transform: rotate(30deg);
}

.p-loading-screen-dot-icon-3 {
	transform: rotate(60deg);
}

.p-loading-screen-dot-icon-4 {
	transform: rotate(90deg);
}

.p-loading-screen-dot-icon-5 {
	transform: rotate(120deg);
}

.p-loading-screen-dot-icon-6 {
	transform: rotate(150deg);
}

.p-loading-screen-dot-icon-7 {
	transform: rotate(180deg);
}

.p-loading-screen-dot-icon-8 {
	transform: rotate(210deg);
}

.p-loading-screen-dot-icon-9 {
	transform: rotate(240deg);
}

.p-loading-screen-dot-icon-10 {
	transform: rotate(270deg);
}

.p-loading-screen-dot-icon-11 {
	transform: rotate(300deg);
}

.p-loading-screen-dot-icon-12 {
	transform: rotate(330deg);
}

.p-loading-screen-dot-icon-2 span {
	animation-delay: -1.1s;
}

.p-loading-screen-dot-icon-3 span {
	animation-delay: -1s;
}

.p-loading-screen-dot-icon-4 span {
	animation-delay: -0.9s;
}

.p-loading-screen-dot-icon-5 span {
	animation-delay: -0.8s;
}

.p-loading-screen-dot-icon-6 span {
	animation-delay: -0.7s;
}

.p-loading-screen-dot-icon-7 span {
	animation-delay: -0.6s;
}

.p-loading-screen-dot-icon-8 span {
	animation-delay: -0.5s;
}

.p-loading-screen-dot-icon-9 span {
	animation-delay: -0.4s;
}

.p-loading-screen-dot-icon-10 span {
	animation-delay: -0.3s;
}

.p-loading-screen-dot-icon-11 span {
	animation-delay: -0.2s;
}

.p-loading-screen-dot-icon-12 span {
	animation-delay: -0.1s;
}

@keyframes circleBounceDelay {
	0%,
	80%,
	100% {
		transform: scale(0);
	}

	40% {
		transform: scale(1);
	}
}

/* ロゴ */
.p-loading-screen-logo-image-mobile,
.p-loading-screen-logo-image-pc {
	max-width: 100vw;
	height: auto;
}

.p-loading-screen-logo-image-mobile {
	display: none;
}

@media (max-width: 767px) {
	.p-loading-screen-logo-image-mobile {
		display: block;
	}

	.p-loading-screen-logo-image-mobile + .p-loading-screen-logo-image-pc {
		display: none;
	}
}

/* キャッチフレーズ */
.p-loading-screen-catch {
	padding: 0 40px;
	font-size: var(--tcd-loading-headline-font-size);
	font-weight: 600;
	line-height: 1.4;
	color: var(--tcd-loading-headline-color);
	text-align: center;
}

.p-loading-screen-catch-direction-type2 {
	text-align: left;
	writing-mode: vertical-rl;
}

/* ロゴとテキスト */
.p-loading-screen-logo-catch {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}

.p-loading-screen .p-loading-screen-logo-catch > * {
	opacity: 0;
	transition: opacity 1s ease-in 0.5s;
}

.p-loading-screen .p-loading-screen-logo-catch > :nth-child(2) {
	transition-delay: 1s;
}

.p-loading-screen.is-start .p-loading-screen-logo-catch > * {
	opacity: 1;
}

/* アニメーション シンプルアイコン */
.p-loading-screen-simple-icon {
	transition: opacity 0.3s ease 0s;
}

.close-loading-screen .p-loading-screen-simple-icon {
	opacity: 0;
}

/* type1 - フェードアウト */
.p-loading-screen[data-animation="type1"] {
	transition: opacity 1s ease 0s;
}

.p-loading-screen[data-animation="type1"][data-splash="1"] {
	transition: opacity 1s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.7s;
}

.close-loading-screen .p-loading-screen[data-animation="type1"] {
	opacity: 0;
}

/* type2 - フェードアウト + 背景アニメーション */
.p-loading-screen[data-animation="type2"] {
	transition: opacity 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s;
}

.close-loading-screen .p-loading-screen[data-animation="type2"] {
	opacity: 0;
}

.p-loading-screen[data-animation="type2"] ~ .l-header,
.p-loading-screen[data-animation="type2"] ~ .l-main,
.p-loading-screen[data-animation="type2"] ~ .l-footer,
.p-loading-screen[data-animation="type2"] ~ .c-header-message,
.p-loading-screen[data-animation="type2"] ~ #wpadminbar,
.p-loading-screen[data-animation="type2"] ~ .woocommerce-store-notice {
	transition: transform 0.9s cubic-bezier(0.17, 0.84, 0.44, 1) 0.5s;
	transform: translate3d(0, -40px, 0);
}

.close-loading-screen .p-loading-screen[data-animation="type2"] ~ .l-header,
.close-loading-screen .p-loading-screen[data-animation="type2"] ~ .l-main,
.close-loading-screen .p-loading-screen[data-animation="type2"] ~ .l-footer,
.close-loading-screen .p-loading-screen[data-animation="type2"] ~ .c-header-message,
.close-loading-screen .p-loading-screen[data-animation="type2"] ~ #wpadminbar,
.close-loading-screen .p-loading-screen[data-animation="type2"] ~ .woocommerce-store-notice {
	transform: translate3d(0, 0, 0);
}

/* type3 - スライドアウト 左から右 */
.p-loading-screen[data-animation="type3"] {
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.7s cubic-bezier(0.83, 0, 0.17, 1) 0.7s;
}

.close-loading-screen .p-loading-screen[data-animation="type3"] {
	clip-path: inset(0 0 0 100%);
}

/* type4 - スライドアウト 上から下 */
.p-loading-screen[data-animation="type4"] {
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.7s;
}

.close-loading-screen .p-loading-screen[data-animation="type4"] {
	clip-path: inset(0 0 100% 0);
}