@charset "utf-8";
:root {
	--delayUnit: 0.3s;
	/* ディレイ差の単位 */
	--moveUnit: 1rem;
	/* アニメーション移動単位 */
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes fedein1 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes popup {
	0% {
		transform: translateY(calc(var(--moveUnit) * 1.25));
		opacity: 0;
	}
	70% {
		transform: translateY(calc(var(--moveUnit) * -0.25));
		opacity: 1;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes ups {
	0% {
		transform: translateY(calc(var(--moveUnit) * 1.25));
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes downs {
	0% {
		transform: scale(0.9, 1.1) translate(0%, -10%);
		opacity: 0;
	}
	10% {
		transform: scale(0.9, 1.1) translate(0%, -5%);
		opacity: 0;
	}
	20% {
		transform: scale(1.1, 0.8) translate(0%, 15%);
		opacity: 1;
	}
	30% {
		transform: scale(0.9, 1.1) translate(0%, -5%);
		opacity: 1;
	}
	40% {
		transform: scale(0.95, 1.2) translate(0%, -10%);
		opacity: 1;
	}
	50% {
		transform: scale(0.95, 1.2) translate(0%, -5%);
		opacity: 1;
	}
	60% {
		transform: scale(1.1, 0.9) translate(0%, 5%);
		opacity: 1;
	}
	70% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
		opacity: 1;
	}
	100% {
		transform: scale(1.0, 1.0) translate(0%, 0%);
		opacity: 1;
	}
}
@keyframes bounce {
	0% {
		transform: scaleX(0.6) scaleY(0.6) translateY(70%);
		opacity: 0;
	}
	50% {
		transform: scaleX(1) scaleY(1) translateY(-40%);
		opacity: 1;
	}
	60% {
		transform: scaleX(1.05) scaleY(0.95) translateY(-45.0%);
		opacity: 1;
	}
	70% {
		transform: scaleX(0.95) scaleY(1.05) translateY(-20%) rotate(-5deg);
		opacity: 1;
	}
	92% {
		transform: scaleX(1) scaleY(0.9) translateY(-10%) rotate(5deg);
		opacity: 1;
	}
	100% {
		transform: scaleX(1) scaleY(1) translateY(-12.5%);
		opacity: 1;
	}
}
@keyframes bound-loop {
	71% {
		transform: scale(0.98, 0.9) translate(0, 5px);
	}
	76% {
		transform: scale(1.02, 1.0) translate(0, 8px);
	}
	82% {
		transform: scale(0.98, 1.03) translate(0, -2px);
	}
	89% {
		transform: scale(1.0, 0.9) translate(0, 5px);
	}
	66%,
	100% {
		transform: scale(1.0, 1.0) translate(0, 0);
	}
}
@keyframes imgeffect {
	0% {
		left: 0%;
		right: 100%;
	}
	50% {
		left: 0%;
		right: 0%;
	}
	100% {
		left: 100%;
		right: 0%;
	}
}
@keyframes imgopacity {
	0% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes imgeffect02 {
	0% {
		top: 0%;
		bottom: 100%;
	}
	50% {
		top: 0%;
		bottom: 0%;
	}
	100% {
		top: 100%;
		bottom: 0%;
	}
}
@keyframes imgeffect03 {
	0% {
		top: 100%;
		bottom: 0%;
	}
	50% {
		top: 0%;
		bottom: 0%;
	}
	100% {
		top: 0%;
		bottom: 100%;
	}
}
@keyframes opening-animation_bg {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}
@keyframes opening-animation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadezoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.2);
	}
}
@keyframes text-ups {
	0% {
		transform: translateY(calc(var(--moveUnit) * 1.25));
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes up-in {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes blur {
	0% {
		filter: blur(calc(var(--moveUnit) * 1));
		opacity: 0;
	}
	50% {
		filter: blur(calc(var(--moveUnit) * 0.5));
		opacity: 1;
	}
	100% {
		filter: blur(0px);
		opacity: 1;
	}
}
@keyframes h-written {
	0% {
		stroke-dashoffset: 3500px;
		stroke: var(--whitecolor);
	}
	100% {
		stroke-dashoffset: 0px;
		stroke: var(--whitecolor);
	}
}
@media screen {
	:is(#mask-line01, #mask-line02, #mask-line03) {
		stroke-dasharray: 3500px;
	}
	.once :is(#mask-line01, #mask-line02, #mask-line03) {
		animation-name: h-written;
		animation-duration: 3s;
		animation-delay: .4s;
		animation-fill-mode: forwards;
	}
	.action.clip,
	.action.clip_svg .clip_target {
		background: rgb(0, 0, 0);
		background: linear-gradient(120deg, #334433 0%, #66cc66 0%, #66cc66 10%, #99ff33 20%, #99ff33 30%, #3399ee 40%, #3399ee 50%, #334433 66%);
		background-size: 100%;
		background-repeat: no-repeat;
		background-clip: text;
		width: fit-content;
		background-position: 0%;
		color: transparent;
		transition: background 2.4s;
	}
	.action.clip.once,
	.action.clip_svg.once .clip_target {
		background-size: 600%;
		background-position: 100%;
	}
	.action.clip_svg .clip_target {
		display: block;
		width: 508px;
		height: 146px;
		-webkit-clip-path: url(#svgPath);
		clip-path: url(#svgPath);
		background-clip: unset;
	}
	.popup {
		opacity: 0;
		transform: translateY(calc(var(--moveUnit) * 1.25))
	}
	.once.popup {
		animation: popup 1.0s forwards;
	}
	.ups {
		opacity: 0;
		transform: translateY(calc(var(--moveUnit) * 1.25));
	}
	.once.ups {
		animation: ups 1.2s forwards;
	}
	.text-ups>* {
		--delayUnit: 0.1s;
		transform: translateY(calc(var(--moveUnit) * 1.25));
		opacity: 0;
	}
	.once.text-ups>* {
		animation: text-ups 0.8s forwards;
		display: inline-block;
	}
	.downs>* {
		opacity: 0;
		transform: scale(0.8, 1.4) translate(0%, -100%);
		transform-origin: bottom center;
	}
	.once.downs>* {
		animation: downs 0.6s forwards;
	}
	.once.popups {
		animation: none;
		opacity: 1;
		transform: translateY(0);
	}
	.popups>* {
		opacity: 0;
		transform: translateY(calc(var(--moveUnit) * 1.25));
	}
	.once.popups>* {
		animation: popup 1.5s forwards ease-in-out;
	}
	.feder,
	.feder_row {
		opacity: 0;
	}
	.once.feder {
		animation: fedein1 0.8s forwards;
	}
	.once.feder_row {
		animation: fedein1 2.0s ease-out forwards;
	}
	.feders>* {
		opacity: 0;
	}
	.once.feders>* {
		animation: fedein1 1.4s forwards;
	}
	.bounce {
		transform: scaleX(0.6) scaleY(0.6) translateY(70%);
		opacity: 0;
	}
	.bounce.once {
		animation: bounce 0.5s 0.50s forwards;
	}
	.bound-loop {
		transform-origin: bottom center;
		animation: bound-loop 3s ease-in-out infinite;
	}
	.vertical_open,
	.holizon_open,
	.bg_flash,
	.bg_blackout {
		position: relative;
		overflow: hidden;
	}
	.vertical_open::before,
	.vertical_open::after,
	.holizon_open::before,
	.holizon_open::after,
	.bg_blackout::before {
		content: "";
		width: 100%;
		height: 100%;
		z-index: 20;
		background: var(--key);
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		transition: height .2s;
	}
	.vertical_open::after {
		top: auto;
		bottom: 0;
	}
	.vertical_open.once::before,
	.vertical_open.once::after {
		height: 0;
	}
	.holizon_open::before,
	.holizon_open::after {
		bottom: 0;
		right: 0;
		left: auto;
		transition: width .4s 1s ease-out;
	}
	.holizon_open::after {
		left: 0;
		right: auto;
	}
	.holizon_open.once::before,
	.holizon_open.once::after {
		width: 0;
	}
	.slide-in,
	.slide-down,
	.slide-up {
		position: relative;
	}
	.slide-in>*,
	.slide-down>*,
	.slide-up>* {
		opacity: 0;
	}
	.slide-in.once>*,
	.slide-down.once>*,
	.slide-up.once>* {
		animation-duration: 0s;
		animation-delay: 1.0s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	.slide-in::before,
	.slide-down::before,
	.slide-up::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0%;
		right: 100%;
		z-index: 100;
		height: 100%;
		background-color: var(--key);
	}
	.slide-down::before {
		top: 0;
		bottom: 100%;
		left: 0;
		right: 0;
		height: auto;
		width: 100%;
	}
	.slide-up::before {
		top: 100%;
		bottom: 0;
		left: 0;
		right: 0;
		height: auto;
		width: 100%;
	}
	.slide-in.once::before,
	.slide-down.once::before,
	.slide-up.once::before {
		animation-duration: 1.0s;
		animation-delay: 0.4s;
		animation-timing-function: cubic-bezier(0.78, 0.07, 0, 1);
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	.slide-in.once>*,
	.slide-down.once>*,
	.slide-up.once>* {
		animation-name: imgopacity;
	}
	.slide-in.once::before {
		animation-name: imgeffect;
	}
	.slide-down.once::before {
		animation-name: imgeffect02;
	}
	.slide-up.once::before {
		animation-name: imgeffect03;
	}
	.slide-animation {
		animation: fadezoom 18s 0s forwards;
	}
	.up-in {
		display: block;
		overflow: hidden;
	}
	.up-in>* {
		display: block;
		transform: translateY(100%);
	}
	.once.up-in>* {
		animation: up-in 1.2s forwards;
	}
	.blur {
		filter: blur(calc(var(--moveUnit) * 1));
		opacity: 0;
	}
	.once.blur {
		animation: blur 1.6s forwards;
	}
	:root .delay_set>*,
	:root :is([class*="delay_"], [class*="Delay_"]) {
		--delayDigit1: 0;
		--delayDigit2: 0;
		animation-delay: calc(var(--delayUnit) * (var(--delayDigit1) + var(--delayDigit2)));
	}
	:root .delay_set>*:nth-child(10n + 1),
	:root :is([class*="delay_1 "], [class$="delay_1"]) {
		--delayDigit1: 1;
	}
	:root .delay_set>*:nth-child(10n + 2),
	:root :is([class*="delay_2 "], [class$="delay_2"]) {
		--delayDigit1: 2;
	}
	:root .delay_set>*:nth-child(10n + 3),
	:root :is([class*="delay_3 "], [class$="delay_3"]) {
		--delayDigit1: 3;
	}
	:root .delay_set>*:nth-child(10n + 4),
	:root :is([class*="delay_4 "], [class$="Delay_4"]) {
		--delayDigit1: 4;
	}
	:root .delay_set>*:nth-child(10n + 5),
	:root :is([class*="delay_5 "], [class$="Delay_5"]) {
		--delayDigit1: 5;
	}
	:root .delay_set>*:nth-child(10n + 6),
	:root :is([class*="delay_6 "], [class$="Delay_6"]) {
		--delayDigit1: 6;
	}
	:root .delay_set>*:nth-child(10n + 7),
	:root :is([class*="delay_7 "], [class$="Delay_7"]) {
		--delayDigit1: 7;
	}
	:root .delay_set>*:nth-child(10n + 8),
	:root :is([class*="delay_8 "], [class$="Delay_8"]) {
		--delayDigit1: 8;
	}
	:root .delay_set>*:nth-child(10n + 9),
	:root :is([class*="delay_9 "], [class$="Delay_9"]) {
		--delayDigit1: 9;
	}
	/* 10番目から19番目の要素 */
	:root .delay_set>*:nth-child(n + 10):nth-child(-n + 19) {
		/* このセレクタは元のコードから変更なし */
		--delayDigit2: 10;
	}
	/* 20番目から29番目の要素 */
	:root .delay_set>*:nth-child(n + 20):nth-child(-n + 29) {
		/* このセレクタは元のコードから変更なし */
		--delayDigit2: 20;
	}
	/* 30番目から39番目の要素 (もし存在する場合) */
	:root .delay_set>*:nth-child(n + 30):nth-child(-n + 39) {
		/* このセレクタは元のコードから変更なし */
		--delayDigit2: 30;
	}
}