@charset "utf-8";

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


@keyframes fedein1 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes popup {
	0% {
		transform: translateY(calc(var(--moveUnit) * -1.25));
		opacity: 0;
	}
	60% {
		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 {
	.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;
	}
	.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.0s forwards;
	}
	.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 > *:nth-child(10n + 0),
	: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;
	}
	:root .delay_set > *:nth-child(-n + 10),
	:root [class*="delay_1"]:not(is:([class="delay_1"],[class$="delay_1"])){
		--delayDigit2:0;
	}
	:root .delay_set > *:nth-child(-n + 20),
	:root [class*="delay_2"]:not(is:([class="delay_2"],[class$="delay_2"])){
		--delayDigit2:10;
	}
	:root .delay_set > *:nth-child(-n + 30),
	:root [class*="delay_3"]:not(is:([class="delay_3"],[class$="delay_3"])){
		--delayDigit2:20;
	}

}