@charset "UTF-8";
/* loader
---------------------------------------- */
.loader {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	background-color: rgb(var(--bg-color-primary));
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease, visibility 0.8s ease;

	.loader__logo {
		width: 280px;
		animation: pulse-slow 2s ease-in-out infinite;
		transition: opacity 0.8s ease, transform 0.8s ease;
	}

	&.is-loaded {
		opacity: 0;
		visibility: hidden;

		.loader__logo {
            opacity: 0;
            transform: scale(0.95);
			animation-play-state: paused;
        }
	}
}

@keyframes pulse-slow {
	0%, 100% {
		transform: scale(1);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.1);
		opacity: 1;
	}
}

/* consept
---------------------------------------- */
.concept {
	background-image: url(../../images/common/bg/bg-wave-bottom-primary.svg), linear-gradient(180deg, rgb(var(--bg-color-light) / 90%) 0%, rgb(var(--bg-color-light) / 90%) calc(100% - 600px), rgb(var(--bg-color-tertiary) / 40%) calc(100% - 320px), rgb(var(--bg-color-tertiary) / 60%) 100%);
	background-position: 0 bottom;
	background-repeat: no-repeat;
	background-size: contain;

	.concept__title {
		letter-spacing: -0.02em;
	}

	.concept__media {
		position: relative;
		max-height: calc(800px - var(--header-height));
		padding-block: 0;
		background: rgb(var(--bg-color-light));

		.concept__catch {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			z-index: 10;
			transform: translate(0,-50%);
			color: rgb(var(--color-secondary));
			font-weight: 700;
			font-size: var(--font-size-xl);
			text-align: center;
			opacity: 0;

			&.is-active {
				opacity: 1;
				animation: text-flash 19s forwards;
			}
		}

		.concept__video {
			filter: brightness(1.05) contrast(1.05);
			mix-blend-mode: multiply;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}
	}

	.concept__content {
		.concept__story-visual {
			margin-block: var(--space-40) 0;
		}
	}

	.concept__detail {
		padding-block: 0;
		background: url(../../images/common/bg/bg-line-wave.svg) repeat-y center 64px;
		background-size: 80% auto;

		.concept__inner {
			padding-block: 0 min(240px,calc(var(--layout-block-end) * 2));
			background: url(../../images/top/concept/tonjiru.webp) calc(100% - 20px) bottom no-repeat;
			background-size: min(50%,224px);

			.concept__detail-title {
				color: rgb(var(--color-dark));
			}

			.concept__item:first-of-type {
				padding-block: var(--space-48) var(--space-48);
				background: url(../../images/top/concept/daizu.webp) calc(-1 * min(13.3vw,104px)) bottom no-repeat;
				background-size: min(35.6vw,280px);
			}

			.concept__miso-visual {
				width: fit-content;
				margin-block: var(--space-24) 0;
				margin-inline: auto 0;
			}
		}
	}
}

@keyframes text-flash {
	0% { opacity: 0; }
	2% { opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	88% { opacity: 0; }
	100% { opacity: 0; }
}

@media (width >= 840px) {
	.concept {
		.concept__detail {
			.concept__inner {
				padding-block: 0 min(256px,calc(var(--layout-block-end) * 2));
				background: url(../../images/top/concept/tonjiru.webp) right 20px bottom no-repeat;
				background-size: 296px;
			}
		}
	}
}

@media (width >= 960px) {
	.concept {
		.concept__panel {
			grid-template-columns: 1.2fr 1fr;
			align-items: center;
		}

		.concept__item {
			grid-template-columns: 1fr 1.1fr;
			align-items: flex-start;
		}

		.concept__detail {
			.concept__inner {
				padding-block: 0 240px;
				background: url(../../images/top/concept/tonjiru.webp) right var(--layout-inline-gutter) bottom 160px no-repeat;
				background-size: 280px;
			}
		}
	}
}

@media (width >= 840px) {
	.concept {
		.concept__detail {
			.concept__inner {
				padding-block: 0 240px;
				background: url(../../images/top/concept/tonjiru.webp) right calc(var(--layout-inline-gutter) + 20px) bottom 160px no-repeat;
				background-size: 280px;
			}
		}
	}
}

@media (width >= 1361px) {
	.concept {
		.concept__detail {
			.concept__inner {
				.concept__item:first-of-type {
					background: url(../../images/top/concept/daizu.webp) 0 bottom no-repeat;
					background-size: 280px;
				}
			}
		}
	}
}

/* thought
---------------------------------------- */
.thought {
	.thought__inner {
		background: url(../../images/common/bg/bg-line-wave.svg) repeat-y center 64px;
		background-size: 80% auto;

		.thought__title {
			color: rgb(var(--color-dark));
		}
	}
}

@media (width >= 960px) {
	.thought {
		.thought__item {
			grid-template-columns: 1fr 1.1fr;
			align-items: flex-start;

			&:nth-of-type(2) {
				align-items: center;
			}
		}
	}
}