body {
	background-image: url("../img/303_retroro/page/back.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 50% 50%;
}

a, a:link, a:visited {
	color: #ff9933;
}

a:hover, a:active {
	color: #ffffff;
}

hr {
	background-repeat: repeat-x;
	border: none;
	width: 1080px;
	height: 67px;
}

hr:nth-of-type(2n) {
	background-image: url("../img/303_retroro/page/line1.png");
}

hr:nth-of-type(2n+1) {
	background-image: url("../img/303_retroro/page/line2.png");
}

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

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

.wide-body.suzume {
	background-color: rgba(64, 128, 128, 0.667);
}

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

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

@keyframes titleBackMove {
	0% {
		transform: translateY(0);
		animation-timing-function: linear;
	}
	100% {
        transform: translateY(-400px);
	}
}

@keyframes titleLetterIn {
	0% {
		transform: scale(2);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes titleLetterOut {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0.5);
		opacity: 0;
	}
}

@keyframes editorShieldIn {
	0% {
		transform: translateY(-10px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes editorShieldOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-10px);
		opacity: 0;
	}
}

.editorLeftSwordStyle {
	transform-origin: 43px 0;
}

@keyframes editorLeftSwordIn {
	0% {
		transform: rotateZ(360deg) scale(0);
	}
	100% {
		transform: rotateZ(0) scale(1);
	}
}

@keyframes editorLeftSwordOut {
	0% {
		transform: rotateZ(0) scale(1);
	}
	100% {
		transform: rotateZ(360deg) scale(0);
	}
}

.editorRightSwordStyle {
	transform-origin: 30px 0;
}

@keyframes editorRightSwordIn {
	0% {
		transform: rotateZ(-360deg) scale(0);
	}
	100% {
		transform: rotateZ(0) scale(1);
	}
}

@keyframes editorRightSwordOut {
	0% {
		transform: rotateZ(0) scale(1);
	}
	100% {
		transform: rotateZ(-360deg) scale(0);
	}
}

@keyframes editorSIn {
	0% {
		transform: rotateX(-270deg);
		opacity: 0;
	}
	100% {
		transform: rotateX(0);
		opacity: 1;
	}
}

@keyframes editorSOut {
	0% {
		transform: rotateX(0);
		opacity: 1;
	}
	100% {
		transform: rotateX(270deg);
		opacity: 0;
	}
}

.editorStarOnZStyle {
	transform-origin: calc(813px - 763px) calc(413px - 347px);
}

.editorStarOnMStyle {
	transform-origin: calc(813px - 735px) calc(413px - 364px);
}

.editorStarOnYStyle {
	transform-origin: calc(813px - 838px) calc(413px - 347px);
}

.editorStarOnTStyle {
	transform-origin: calc(813px - 860px) calc(413px - 364px);
}

@keyframes editorStarIn {
	0% {
		transform: scale(0);
		opacity: 0;
		animation-timing-function: cubic-bezier(0, 0.6667, 0.3333, 1);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes editorStarOut {
	0% {
		transform: scale(1);
		opacity: 1;
		animation-timing-function: cubic-bezier(0.6667, 0, 1, 0.3333);
	}
	100% {
		transform: scale(0);
		opacity: 0;
	}
}

@keyframes editorCollaboLeftStarIn {
	0% {
		transform: rotateZ(-180deg) scale(0);
		animation-timing-function: cubic-bezier(0, 0.6667, 0.3333, 1);
	}
	100% {
		transform: rotateZ(0) scale(1);
	}
}

@keyframes editorCollaboLeftStarOut {
	0% {
		transform: rotateZ(0) scale(1);
		animation-timing-function: cubic-bezier(0.6667, 0, 1, 0.3333);
	}
	100% {
		transform: rotateZ(-180deg) scale(0);
	}
}

@keyframes editorCollaboRightStarIn {
	0% {
		transform: rotateZ(180deg) scale(0);
		animation-timing-function: cubic-bezier(0, 0.6667, 0.3333, 1);
	}
	100% {
		transform: rotateZ(0) scale(1);
	}
}

@keyframes editorCollaboRightStarOut {
	0% {
		transform: rotateZ(0) scale(1);
		animation-timing-function: cubic-bezier(0.6667, 0, 1, 0.3333);
	}
	100% {
		transform: rotateZ(180deg) scale(0);
	}
}

@keyframes editorTopLetterIn {
	0% {
		transform: scale(0);
		animation-timing-function: ease-out;
	}
	25% {
		transform: scale(1.5);
		animation-timing-function: ease-in-out;
	}
	100% {
		transform: scale(1);
	}
}

@keyframes editorTopLetterOut {
	0% {
		transform: scale(1);
		animation-timing-function: ease-in-out;
	}
	75% {
		transform: scale(1.5);
		animation-timing-function: ease-in;
	}
	100% {
		transform: scale(0);
	}
}

.editorBottomLetterStyle {
	animation-timing-function: step-end;
}

@keyframes editorBottomLetterIn {
	0% {
		opacity: 0.2;
	}
	12.5% {
		opacity: 0;
	}
	25% {
		opacity: 0.4;
	}
	37.5% {
		opacity: 0;
	}
	50% {
		opacity: 0.6;
	}
	62.5% {
		opacity: 0;
	}
	75% {
		opacity: 0.8;
	}
	87.5% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes editorBottomLetterOut {
	0% {
		opacity: 0;
	}
	12.5% {
		opacity: 0.8;
	}
	25% {
		opacity: 0;
	}
	37.5% {
		opacity: 0.6;
	}
	50% {
		opacity: 0;
	}
	62.5% {
		opacity: 0.4;
	}
	75% {
		opacity: 0;
	}
	87.5% {
		opacity: 0.2;
	}
	100% {
		opacity: 0;
	}
}