@charset "utf-8";

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


@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.8, 1.4) translate(0%, -100%);
		opacity: 0;
	}
	10% {
		transform: scale(0.8, 1.4) translate(0%, -15%);
		opacity: 0;
	}
	20% {
		transform: scale(1.4, 0.6) translate(0%, 30%);
		opacity: 1;
	}
	30% {
		transform: scale(0.9, 1.1) translate(0%, -10%);
		opacity: 1;
	}
	40% {
		transform: scale(0.95, 1.2) translate(0%, -30%);
		opacity: 1;
	}
	50% {
		transform: scale(0.95, 1.2) translate(0%, -10%);
		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.995, 0.995);
	}
	76% {
		transform: scale(1.005, 1.0);
	}
	82% {
		transform: scale(0.995, 1.005);
	}
	89% {
		transform: scale(1.0, 0.995);
	}
	66%,
	100% {
		transform: scale(1.0, 1.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;
	}
}

@media screen {
	.action.clip,
	.action.clip_svg .clip_target {
		background: rgb(0,0,0);
		background: linear-gradient(120deg, #000000 0%,#ff7fac 0%, #ff7fac 10%, #ff5043 20%, #ff5043 30%, #ff4638 40%, #ff4638 50%, #000000 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(--keycolor);
		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(--keycolor);
	}
	.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;
	}
}