@charset "UTF-8";

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Zen Maru Gothic", 'Noto Sans JP', sans-serif;
	padding-top: 100vh;
}

header {
	position: fixed;
	left: 0;
	top: 0;
}

header h2 {
	text-shadow: 4px 4px 4px #fcf9dd;
}

.nav-link {
	position: relative;
	transition: color 0.3s;
}

@media (min-width: 1024px) {
	.nav-link::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -4px;
		width: 100%;
		height: 2px;
		background-color: #f97316;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.3s ease-in-out;
	}

	.nav-link:hover::after {
		transform: scaleX(1);
	}

	.nav-link:hover {
		color: #ea580c;
	}
}

@media (max-width: 1023px) {
	.nav-link:active {
		color: #ea580c;
	}
}

.bg-grid-warm {
	background-image:
		radial-gradient(circle at top left, rgba(249, 115, 22, 0.15), transparent 28%),
		radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.14), transparent 30%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.12)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");
}

.bg-grid-dark {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #111827 0%, #1f2937 45%, #0f172a 100%);
}

.fv-vertical-title {
	writing-mode: vertical-rl;
	text-orientation: upright;
	margin: 0;
}

.font-mincho {
	font-family: 'Noto Serif JP', serif;
}

.hero-media-layer,
.hero-copy-layer {
	transition: opacity 1.2s ease;
}

main {
	position: relative;
	background-image: linear-gradient(to bottom,
			rgb(255 251 235 / 0) 0%,
			rgb(255 251 235 / 1) 3%,
			rgb(255 251 235 / 1) 99.8%,
			rgb(255 251 235 / 0) 100%);
}

footer {
	position: relative;
}



/* 下から10% */
.floating-images {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9.7%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;

	@media (768px <=width) {
		bottom: 7.7%;
	}
}

.item {
	width: 96px;
	animation: float 4s ease-in-out infinite;

	@media (768px <=width) {
		width: 120px;
		margin-inline: 24px;
	}
}

.item img {
	width: 100%;
	display: block;
}

.item:nth-child(1) {
	animation: float1 4.0s ease-in-out infinite;
}

.item:nth-child(2) {
	animation: float2 4.8s ease-in-out infinite;
}

.item:nth-child(3) {
	animation: float1 3.6s ease-in-out infinite;
}

.item:nth-child(4) {
	animation: float2 5.1s ease-in-out infinite;
}

.item:nth-child(5) {
	animation: float1 4.4s ease-in-out infinite;
}

.item:nth-child(6) {
	animation: float2 3.9s ease-in-out infinite;
}

@keyframes float1 {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes float2 {

	0%,
	100% {
		transform: translateY(-4px);
	}

	50% {
		transform: translateY(6px);
	}
}

@keyframes float {

	0% {
		transform: translateY(0%);
	}

	50% {
		transform: translateY(-1%);
	}

	100% {
		transform: translateY(0%);
	}

}



.scene {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff8ef;
}

.layer {
	position: absolute;
	inset: 0;
	background-repeat: repeat-none;
	background-size: auto 100%;
	background-position: center bottom;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.sky {
	background-image: url("../img/ca0.png");
	animation-name: moveSky;
	animation-duration: 60s;
}

.ground {
	background-image: url("../img/ca1.png");
	/* animation-name: moveGround;
  animation-duration: 10s; */
}

.hana {
	background-image: url("../img/ca2.png");
	animation-name: moveGround;
	animation-duration: 40s;
}

@keyframes moveSky {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: -1920px;
	}
}

@keyframes moveGround {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: -1920px;
	}
}

.myvideo {
	position: relative;

	& video {
		position: relative;
		z-index: 40;
	}

	&::after {
		content: "";
		position: absolute;
		right: -4px;
		top: 20%;
		width: 12%;
		height: 50%;
		background: url(../img/chara/purple/peek_right_smile.png) no-repeat right bottom/contain;
		z-index: 50;
	}

	&::before {
		content: "";
		position: absolute;
		left: -4px;
		top: 20%;
		width: 12%;
		height: 50%;
		background: url(../img/chara/green/peek_left_smile.png) no-repeat left bottom/contain;
		z-index: 50;
	}

	@media (768px <=width) {
		&::after {
			right: -4px;
			top: 0;
			width: 25%;
			height: 77%;
			background-size: 60px;
		}

		&::before {
			left: -4px;
			top: 0;
			width: 25%;
			height: 77%;
			background-size: 60px;
		}
	}
}

/**/
.js-pop {
	opacity: 0;
}

.js-pop.is-visible {
	animation: 0.5s popoyo 0.7s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes popoyo {
	0% {
		opacity: 0;
		transform: scale(0.2);
	}

	60% {
		opacity: 1;
		transform: scale(1.15);
	}

	80% {
		transform: scale(0.95);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/**/
.fukidashi {
	@media (width < 768px) {
		position: absolute;
		left: 0;
		top: 0;
	}

	& li {
		opacity: 0;
		transform: scale(.8);
		transition:
			opacity .3s ease,
			transform .35s cubic-bezier(.2, 1.4, .4, 1);
		pointer-events: none;
		position: absolute;

		@media (width < 768px) {
			top: 45%;
			text-align: center;
			width: 100%;
		}

		@media (768px <=width) {
			&:nth-child(1) {
				left: calc(50% + 200px);
				top: calc(50% - 150px);
			}

			&:nth-child(2) {
				left: calc(50% + 300px);
				top: calc(50% - 20px);
			}

			&:nth-child(3) {
				left: calc(50% + 200px);
				top: calc(50% + 120px);
			}

			&:nth-child(4) {
				left: calc(50% - 320px);
				top: calc(50% + 120px);
			}

			&:nth-child(5) {
				left: calc(50% - 420px);
				top: calc(50% - 20px);
			}

			&:nth-child(6) {
				left: calc(50% - 300px);
				top: calc(50% - 150px);
			}
		}
	}

	& li.is-show {
		opacity: 1;
		transform: scale(1);
	}
}