﻿body {
	background: radial-gradient(
		circle at 50%,
		hsl(30, 60%, 88%),
		hsl(30, 60%, 88%) 65%,
		hsl(30, 60%, 80%) 65%,
		hsl(30, 60%, 80%) 85%,
		hsl(30, 60%, 72%) 85%
	);
	background-attachment: fixed;
	background-size: cover;
}

hr {
	background-image: url("../img/304_trip/page/line.png");
	background-size: contain;
	border: none;
	width: 999px;
	height: 18px;
}

img.banner {
	border: none;
}

#play-work {
	display: inline-block;
	padding: 0;
	border: 8px #805020 solid;
}

#info-work th, #info-member th, .wide-head,
#info-work td, #info-member td, .wide-body {
	background: none;
}

#info-work th, #info-member th, .wide-head {
	background-color: rgba(224, 176, 160, 0.667);
}

#info-work td, #info-member td, .wide-body {
	background-color: rgba(255, 224, 208, 0.667);
}

.wide-head.apoi {
	background-color: rgba(255, 208, 128, 0.667);
}

.wide-body.apoi {
	background-color: rgba(255, 232, 192, 0.667);
}

.wide-head.syouta {
	background-color: rgba(255, 153, 255, 0.667);
}

.wide-body.syouta {
	background-color: rgba(255, 204, 255, 0.667);
}

@keyframes titlebackAppear {
	0% {
		transform: scaleY(0);
		transform-origin: 50% 70%;
		animation-timing-function: steps(5);
	}
	25% {
		transform: scaleY(0.4);
		transform-origin: 50% 70%;
		animation-timing-function: steps(5);
	}
	50% {
		transform: scaleY(0.7);
		transform-origin: 50% 70%;
		animation-timing-function: steps(5);
	}
	75% {
		transform: scaleY(0.9);
		transform-origin: 50% 70%;
		animation-timing-function: steps(5);
	}
	100% {
		transform: scaleY(1);
	}
}

@keyframes titleBottomAppear {
	0% {
		opacity: 0;
		animation-timing-function: steps(4);
	}
	100% {
		opacity: 1;
	}
}

@keyframes titleLetterAppear {
	0% {
		transform: translateX(500px);
		animation-timing-function: steps(4);
	}
	20% {
		transform: translateX(320px);
		animation-timing-function: steps(4);
	}
	40% {
		transform: translateX(180px);
		animation-timing-function: steps(4);
	}
	60% {
		transform: translateX(80px);
		animation-timing-function: steps(4);
	}
	80% {
		transform: translateX(20px);
		animation-timing-function: steps(4);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes titleCupAppear {
	0% {
		transform: translateY(-220px) rotateZ(0);
		animation-timing-function: steps(10);
	}
	40% {
		transform: translateY(0) rotateZ(15deg);
		animation-timing-function: steps(3);
	}
	52% {
		transform: translateY(-20px) rotateZ(0);
		animation-timing-function: steps(3);
	}
	64% {
		transform: translateY(0) rotateZ(-10deg);
		animation-timing-function: steps(3);
	}
	76% {
		transform: translateY(-10px) rotateZ(0);
		animation-timing-function: steps(3);
	}
	88% {
		transform: translateY(0) rotateZ(5deg);
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateY(0) rotateZ(0);
	}
}

@keyframes titleYugeAppear {
	0% {
		transform: translateY(39px);
		opacity: 0;
		animation-timing-function: steps(2);
	}
	20% {
		transform: translateY(26px);
		opacity: 0.3;
		animation-timing-function: steps(2);
	}
	40% {
		transform: translateY(15.6px);
		opacity: 0.55;
		animation-timing-function: steps(2);
	}
	60% {
		transform: translateY(7.8px);
		opacity: 0.75;
		animation-timing-function: steps(2);
	}
	80% {
		transform: translateY(2.6px);
		opacity: 0.9;
		animation-timing-function: steps(2);
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes titleBackLineAppear {
	0% {
		opacity: 0;
		animation-timing-function: step-end;
	}
	10% {
		opacity: 0.3;
		animation-timing-function: step-end;
	}
	20% {
		opacity: 0;
		animation-timing-function: step-end;
	}
	30% {
		opacity: 0.55;
		animation-timing-function: step-end;
	}
	40% {
		opacity: 0;
		animation-timing-function: step-end;
	}
	50% {
		opacity: 0.75;
		animation-timing-function: step-end;
	}
	60% {
		opacity: 0;
		animation-timing-function: step-end;
	}
	70% {
		opacity: 0.9;
		animation-timing-function: step-end;
	}
	80% {
		opacity: 0;
		animation-timing-function: step-end;
	}
	90% {
		opacity: 1;
		animation-timing-function: step-end;
	}
	100% {
		opacity: 1;
	}
}

.editorStyle {
	animation-fill-mode: both;
}

@keyframes editorLeftIn {
	0% {
        clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	20% {
        clip-path: polygon(64% 0%, 64% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	40% {
        clip-path: polygon(36% 0%, 36% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	60% {
        clip-path: polygon(16% 0%, 16% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	80% {
        clip-path: polygon(4% 0%, 4% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
	}
}

@keyframes editorLeftOut {
	0% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	20% {
        clip-path: polygon(0% 0%, 0% 100%, 64% 100%, 64% 0%);
		animation-timing-function: steps(3);
	}
	40% {
        clip-path: polygon(0% 0%, 0% 100%, 36% 100%, 36% 0%);
		animation-timing-function: steps(3);
	}
	60% {
        clip-path: polygon(0% 0%, 0% 100%, 16% 100%, 16% 0%);
		animation-timing-function: steps(3);
	}
	80% {
        clip-path: polygon(0% 0%, 0% 100%, 4% 100%, 4% 0%);
		animation-timing-function: steps(3);
	}
	100% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
	}
}

@keyframes editorRightIn {
	0% {
        clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
		animation-timing-function: steps(3);
	}
	20% {
        clip-path: polygon(0% 0%, 0% 100%, 36% 100%, 36% 0%);
		animation-timing-function: steps(3);
	}
	40% {
        clip-path: polygon(0% 0%, 0% 100%, 64% 100%, 64% 0%);
		animation-timing-function: steps(3);
	}
	60% {
        clip-path: polygon(0% 0%, 0% 100%, 84% 100%, 84% 0%);
		animation-timing-function: steps(3);
	}
	80% {
        clip-path: polygon(0% 0%, 0% 100%, 96% 100%, 96% 0%);
		animation-timing-function: steps(3);
	}
	100% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
	}
}

@keyframes editorRightOut {
	0% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	20% {
        clip-path: polygon(36% 0%, 36% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	40% {
        clip-path: polygon(64% 0%, 64% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	60% {
        clip-path: polygon(84% 0%, 84% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	80% {
        clip-path: polygon(96% 0%, 96% 100%, 100% 100%, 100% 0%);
		animation-timing-function: steps(3);
	}
	100% {
        clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
	}
}
