@charset "utf-8";

@keyframes fedein1 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes popup {
	0% { transform: translateY(-20px); opacity: 0; }
	60% { transform: translateY(3px); opacity: 1; }
	99% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); opacity: 1; }
}
@keyframes ups {
	0% { transform: translateY(20px); opacity: 0; }
	99% { transform: translateY(0px); opacity: 1; }
	100% { transform: translateY(0px); 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.98, 0.9) translate(0, 5px); }
	76% { transform: scale(1.02, 1.0) translate(0, 16px); }
	82% { transform: scale(0.98, 1.05) translate(0, -8px); }
	89% { transform: scale(1.0, 0.9) translate(0, 5px); }
	66%,100% { transform: scale(1.0, 1.0) translate(0, 0); }
}
@keyframes imgopacity {
	0% { opacity: 0; }
	90% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes imgeffect_left {
	0% { left: 0%; right: 100%; }
	50% { left: 0%; right: 0%; }
	100% { left: 100%; right: 0%; }
}
@keyframes imgeffect_right {
	0% { left: 100%; right: 0%; }
	50% { left: 0%; right: 0%; }
	100% { left: 0%; right: 100%; }
}
@keyframes imgeffect_down {
	0% { top: 0%; bottom: 100%; }
	50% { top: 0%; bottom: 0%; }
	100% { top: 100%; bottom: 0%; }
}
@keyframes imgeffect_up {
	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(20px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes rotate-in {
	0% { transform: rotateY(-180deg); opacity: 0; }
	100% { transform: rotateY(0); opacity: 1; }
}
@keyframes hole-out {
	0% { transform: translateY(100%); opacity: 0; }
	100% { transform: rotateY(0); opacity: 1; }
}
@keyframes scroll {
  0% { transform: scale(1, 0); transform-origin: 0 0; }
  50% { transform: scale(1, 1); transform-origin: 0 0; }
  51% { transform: scale(1, 1); transform-origin: 0 100%; }
  100% { transform: scale(1, 0); transform-origin: 0 100%; }
}
@keyframes page-top {
  0% { transform: scale(1, 0); transform-origin: 0 100%; }
  50% { transform: scale(1, 1); transform-origin: 0 100%; }
  51% { transform: scale(1, 1); transform-origin: 0 0; }
  100% { transform: scale(1, 0); transform-origin: 0 0; }
}


@media screen {
	.popup {
		opacity: 0;
		transform: translateY(-20px)
	}
	.once.popup {
		animation: popup 1.4s forwards;
	}
	.ups {
		opacity: 0;
		transform: translateY(-20px);
	}
	.once.ups {
		animation: ups 0.6s 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(-20px);
	}
	.once.popups>* {
		animation: popup 1.4s forwards;
	}
	.feder,
	.feder_row {
		opacity: 0;
	}
	.once.feder {
		animation: fedein1 1.2s forwards;
	}
	.once.feder_row {
		animation: fedein1 1.6s ease-out forwards;
	}
	.feders>* {
		opacity: 0;
	}
	.once.feders>* {
		animation: fedein1 1.2s forwards;
	}
	.bounce {
		transform: scaleX(0.6) scaleY(0.6) translateY(70%);
		opacity: 0;
	}
	.bounce.once {
		animation: bounce 0.5s forwards;
	}
	.bound-loop {
		animation: bound-loop 3s ease-in-out infinite;
	}
	.once.delay_set>*:nth-child(2),
	.once.delay_1,
	.once.delay_1>* {
		animation-delay: 0.2s;
	}
	.once.delay_set>*:nth-child(3),
	.once.delay_2,
	.once.delay_2>* {
		animation-delay: 0.4s;
	}
	.once.delay_set>*:nth-child(4),
	.once.delay_3,
	.once.delay_3>* {
		animation-delay: 0.6s;
	}
	.once.delay_set>*:nth-child(5),
	.once.delay_4,
	.once.delay_4>* {
		animation-delay: 0.8s;
	}
	.once.delay_set>*:nth-child(6),
	.once.delay_5,
	.once.delay_5>* {
		animation-delay: 1.0s;
	}
	.once.delay_set>*:nth-child(7),
	.once.delay_6,
	.once.delay_6>* {
		animation-delay: 1.2s;
	}
	.once.delay_set>*:nth-child(8),
	.once.delay_7,
	.once.delay_7>* {
		animation-delay: 1.4s;
	}
	.once.delay_set>*:nth-child(9),
	.once.delay_8,
	.once.delay_8>* {
		animation-delay: 1.6s;
	}
	.once.delay_set>*:nth-child(10),
	.once.delay_9,
	.once.delay_9>*{
		animation-delay: 1.8s;
	}
	.once.delay_set>*:nth-child(11),
	.once.delay_10,
	.once.delay_10>* {
		animation-delay: 2.0s;
	}
	.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(--yellow);
		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-left,
	.slide-right,
	.slide-down,
	.slide-up,
	.works-item.slide{
		position: relative;
		z-index: 10;
	}
	.slide-left>*,
	.slide-right>*,
	.slide-down>*,
	.slide-up>*,
	.works-item.slide>* {
		opacity: 0;
	}
	.slide-left.once>*,
	.slide-right.once>*,
	.slide-down.once>*,
	.slide-up.once>*,
	.once .slide-left>*,
	.once .slide-right>*,
	.once .slide-down>*,
	.once .slide-up>*,
	.once .works-item.slide>* {
		animation-duration: 0s;
		animation-delay: 0.6s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	.slide-left::before,
	.slide-right::before,
	.slide-down::before,
	.slide-up::before,
	.works-item.slide::before,
	.works-list.column-2_reverse .works-item.slide:nth-child(3)::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0%;
		right: 100%;
		z-index: 100;
		height: 100%;
		background-color: var(--yellow);
	}
	.slide-right::before,
	.works-list .works-item.slide::before {
		top: 0;
		right: 0%;
		left: 100%;
		z-index: 100;
		height: 100%;
	}
	.slide-down::before,
	.works-list.column-2 .works-item.slide:nth-child(2)::before,
	.works-list.column-3 .works-item.slide:nth-child(2)::before,
	.works-list.column-2_reverse .works-item.slide:nth-child(3)::before,
	.works-list.column-2_reverse .works-item.slide:nth-child(5)::before {
		top: 0;
		bottom: 100%;
		left: 0;
		right: 0;
		height: auto;
		width: 100%;
	}
	.slide-up::before,
	.works-list.column-2 .works-item.slide:nth-child(5)::before,
	.works-list.column-3 .works-item.slide::before,
	.works-list.column-2_reverse .works-item.slide:nth-child(2)::before {
		top: 100%;
		bottom: 0;
		left: 0;
		right: 0;
		height: auto;
		width: 100%;
	}
	.slide-left.once::before,
	.slide-right.once::before,
	.slide-down.once::before,
	.slide-up.once::before,
	.once .slide-left::before,
	.once .slide-right::before,
	.once .slide-down::before,
	.once .slide-up::before,
	.once .works-item.slide::before {
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}
	.slide-left.once>*,
	.slide-right.once>*,
	.slide-down.once>*,
	.slide-up.once>*,
	.once .slide-left>*,
	.once .slide-right>*,
	.once .slide-down>*,
	.once .slide-up>*,
	.once .works-item.slide>* {
		animation-name: imgopacity;
	}
	.slide-left.once:before,
	.once .slide-left:before,
	.works-list.column-2.once .works-item.slide:nth-child(4)::before,
	.works-list.column-2_reverse.once .works-item.slide:nth-child(4)::before {
		animation-name: imgeffect_left;
	}
	.slide-right.once:before,
	.once .slide-right:before,
	.works-list.once .works-item.slide::before {
		animation-name: imgeffect_right;
	}
	.slide-down.once:before,
	.once .slide-down:before,
	.works-list.column-2.once .works-item.slide:nth-child(2)::before,
	.works-list.column-3.once .works-item.slide:nth-child(2)::before,
	.works-list.column-2_reverse.once .works-item.slide:nth-child(3)::before,
	.works-list.column-2_reverse.once .works-item.slide:nth-child(5)::before {
		animation-name: imgeffect_down;
	}
	.slide-up.once:before,
	.once .slide-up:before,
	.works-list.column-2.once .works-item.slide:nth-child(5)::before,
	.works-list.column-3.once .works-item.slide::before,
	.works-list.column-2_reverse.once .works-item.slide:nth-child(2)::before {
		animation-name: imgeffect_up;
	}
	.slide-animation {
		animation: fadezoom 18s 0s forwards;
	}
	.text-ups {
		display: flex;
		justify-content: center;
		align-items: baseline;
	}
	.text-ups>* {
		display: inline-block;
		transform: translateY(20px);
		opacity: 0;
	}
	.once.text-ups>* {
		animation: text-ups 0.8s forwards;
	}
	.once.text-ups>*:nth-child(1) {
		animation-delay: 0s;
	}
	.once.text-ups>*:nth-child(2) {
		animation-delay: 0.1s;
	}
	.once.text-ups>*:nth-child(3) {
		animation-delay: 0.2s;
	}
	.once.text-ups>*:nth-child(4) {
		animation-delay: 0.3s;
	}
	.once.text-ups>*:nth-child(5) {
		animation-delay: 0.4s;
	}
	.once.text-ups>*:nth-child(6) {
		animation-delay: 0.5s;
	}
	.once.text-ups>*:nth-child(7) {
		animation-delay: 0.6s;
	}
	.once.text-ups>*:nth-child(8) {
		animation-delay: 0.7s;
	}
	.once.text-ups>*:nth-child(9) {
		animation-delay: 0.8s;
	}
	.once.text-ups>*:nth-child(10) {
		animation-delay: 0.9s;
	}
	.once.text-ups>*:nth-child(11) {
		animation-delay: 1.0s;
	}
	.once.text-ups>*:nth-child(12) {
		animation-delay: 1.1s;
	}
	.once.text-ups>*:nth-child(13) {
		animation-delay: 1.2s;
	}
	.rotate-in {
		transform: rotateY(-180deg);
		opacity: 0;
	}
	.rotate-in.once {
		animation: rotate-in 0.8s 0.50s forwards;
	}
	.clip {
		display: inline-block;
		background: var(--pink);
		background: linear-gradient(90deg, var(--pink) 50%, var(--black) 50%, var(--black) 100%);
		background-size: 200%;
		background-repeat:no-repeat;
		background-clip: text;
		width: fit-content;
		background-position: 100%;
		color:transparent;
		transition: background 0.2s;
		transition-delay: 1.4s;
	}
	.clip.once{
		background-position: 0;
	}
	*:has(>.hole-out){
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	*:has(>.hole-out)::-webkit-scrollbar{
		display: none;
	}
	.hole-out{
		transform: translateY(100%);
		opacity: 0;
	}
	.hole-out.once, *:has(.hole-out).once .hole-out{
		animation: hole-out 0.4s  forwards;
	}
}