@font-face {
	font-family: "たぬゴ角 細";
	src:
		local("たぬゴ角 細"),
		url("../font/314_orange/tanugo_kaku_light.woff");
}

@font-face {
	font-family: "851手描き雑フォント";
	src:
		local("851手描き雑フォント"),
		url("../font/314_orange/tegaki_zatsu.woff"),
		url("../font/314_orange/tegaki_zatsu.eot");
}

@font-face {
	font-family: "Noto Serif JP Regular";
	src:
		local("Noto Serif JP Regular"),
		url("../font/314_orange/noto_serif_jp_regular.woff"),
		url("../font/314_orange/noto_serif_jp_regular.eot");
}

@font-face {
	font-family: "01フロップデザイン";
	src:
		local("01フロップデザイン"),
		url("../font/314_orange/flop_design.woff");
}

@font-face {
	font-family: "Yomogi";
	src:
		local("Yomogi"),
		url("../font/314_orange/yomogi.woff"),
		url("../font/314_orange/yomogi.eot");
}

body {
	background-color: #ffc080;
	background-image:
		url("../img/314_orange/page/back_left.png"),
		url("../img/314_orange/page/back_right.png");
	background-position: 0% 0%, 100% 0%;
	background-size: contain, contain;
	background-repeat: no-repeat, no-repeat;
	background-attachment: fixed, fixed;
}

hr {
	background-image: url("../img/314_orange/page/line.png");
	background-size: contain;
	background-repeat: repeat-x;
	border: none;
	width: 950px;
	height: 20px;
}

img.banner {
	border: none;
}

#play-work {
	display: inline-block;
	padding: 0;
	border: 8px #ffffff 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(255, 215, 175, 0.667);
}

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

.skbLetterColor {
	color: #99ffff;
}

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

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

.syoutaLetterColor {
	color: #ff99ff;
}

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

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

@keyframes titleMoonIn {
	0% {
		transform: scale(2.5);
		animation-timing-function: steps(4);
	}
	25% {
		transform: scale(1.7);
		animation-timing-function: steps(4);
	}
	50% {
		transform: scale(1.25);
		animation-timing-function: steps(4);
	}
	75% {
		transform: scale(1.05);
		animation-timing-function: steps(4);
	}
	100% {
		transform: scaleY(1);
	}
}

@keyframes titleLineInA {
	0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
		animation-timing-function: steps(20);
	}
	100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

@keyframes titleLineInB {
	0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
		animation-timing-function: steps(20);
	}
	100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

@keyframes titleLineInC {
	0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	25% {
        clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	50% {
        clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	75% {
        clip-path: polygon(0% 0%, 95% 0%, 95% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

@keyframes titleLetterBackIn {
	0% {
		transform: translateX(-33px);
		opacity: 0;
		animation-timing-function: steps(3);
	}
	25% {
		transform: translateX(-15.4px);
		opacity: 0.4;
		animation-timing-function: steps(3);
	}
	50% {
		transform: translateX(-5.5px);
		opacity: 0.7;
		animation-timing-function: steps(3);
	}
	75% {
		transform: translateX(-1.1px);
		opacity: 0.9;
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes titleLetterFrontIn {
	0% {
		transform: translateY(330px);
		animation-timing-function: steps(5);
	}
	25% {
		transform: translateY(154px);
		animation-timing-function: steps(5);
	}
	50% {
		transform: translateY(55px);
		animation-timing-function: steps(5);
	}
	75% {
		transform: translateY(11px);
		animation-timing-function: steps(5);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes titleLetterFrontOut {
	0% {
		transform: translateY(330px);
		animation-timing-function: steps(4);
	}
	25% {
		transform: translateY(319px);
		animation-timing-function: steps(4);
	}
	50% {
		transform: translateY(275px);
		animation-timing-function: steps(4);
	}
	75% {
		transform: translateY(176px);
		animation-timing-function: steps(4);
	}
	100% {
		transform: translateY(0);
	}
}

.lyricsAStyle {
	font-family: "たぬゴ角 細";
}

.lyricsBStyle {
	font-family: "851手描き雑フォント";
}

.lyricsCStyle {
	font-family: "たぬゴ角 細";
}

.lyricsDStyle {
	font-family: "Noto Serif JP Regular";
}

@keyframes lyricsDIn {
	0% {
        letter-spacing: -9.8px;
		opacity: 0;
		animation-timing-function: step-end;
	}
	14.2857% {
        letter-spacing: -7.2px;
		opacity: 0.28;
		animation-timing-function: step-end;
	}
	28.5714% {
        letter-spacing: -5px;
		opacity: 0.5;
		animation-timing-function: step-end;
	}
	42.8571% {
        letter-spacing: -3.2px;
		opacity: 0.68;
		animation-timing-function: step-end;
	}
	57.1429% {
        letter-spacing: -1.8px;
		opacity: 0.82;
		animation-timing-function: step-end;
	}
	71.4286% {
        letter-spacing: -0.8px;
		opacity: 0.92;
		animation-timing-function: step-end;
	}
	85.7143% {
        letter-spacing: -0.2px;
		opacity: 0.98;
		animation-timing-function: step-end;
	}
    100% {
        letter-spacing: 0;
		opacity: 1;
    }
}

@keyframes lyricsDOut {
	0% {
		opacity: 0.75;
		animation-timing-function: step-end;
	}
	14.2857% {
        opacity: 1;
		animation-timing-function: step-end;
	}
	28.5714% {
		opacity: 0.5;
		animation-timing-function: step-end;
	}
	42.8571% {
        opacity: 1;
		animation-timing-function: step-end;
	}
	57.1429% {
		opacity: 0.25;
		animation-timing-function: step-end;
	}
	71.4286% {
        opacity: 1;
		animation-timing-function: step-end;
	}
	85.7143% {
		opacity: 0;
		animation-timing-function: step-end;
	}
    100% {
        opacity: 0;
    }
}

.lyricsEStyle {
	font-family: "01フロップデザイン";
    letter-spacing: 10px;
}

@keyframes lyricsEIn {
	0% {
		opacity: 0.2;
		animation-timing-function: step-end;
	}
	25% {
		opacity: 0.4;
		animation-timing-function: step-end;
	}
	50% {
		opacity: 0.6;
		animation-timing-function: step-end;
	}
	75% {
		opacity: 0.8;
		animation-timing-function: step-end;
	}
    100% {
		opacity: 1;
    }
}

@keyframes lyricsEOut {
	0% {
		opacity: 0.8;
		animation-timing-function: step-end;
	}
	25% {
		opacity: 0.6;
		animation-timing-function: step-end;
	}
	50% {
		opacity: 0.4;
		animation-timing-function: step-end;
	}
	75% {
		opacity: 0.2;
		animation-timing-function: step-end;
	}
    100% {
		opacity: 0;
    }
}

.lyricsFStyle {
	font-family: "Yomogi";
}

@keyframes lyricsFIn {
	0% {
		opacity: 0.2;
		animation-timing-function: step-end;
	}
	25% {
		opacity: 0.4;
		animation-timing-function: step-end;
	}
	50% {
		opacity: 0.6;
		animation-timing-function: step-end;
	}
	75% {
		opacity: 0.8;
		animation-timing-function: step-end;
	}
    100% {
		opacity: 1;
    }
}

@keyframes lyricsFOut {
	0% {
		opacity: 0.8;
		animation-timing-function: step-end;
	}
	25% {
		opacity: 0.6;
		animation-timing-function: step-end;
	}
	50% {
		opacity: 0.4;
		animation-timing-function: step-end;
	}
	75% {
		opacity: 0.2;
		animation-timing-function: step-end;
	}
    100% {
		opacity: 0;
    }
}

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

@keyframes editorLineIn {
	0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	25% {
        clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	50% {
        clip-path: polygon(0% 0%, 80% 0%, 80% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	75% {
        clip-path: polygon(0% 0%, 95% 0%, 95% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
}

@keyframes editorLineOut {
	0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		animation-timing-function: steps(3);
	}
	25% {
        clip-path: polygon(5% 0%, 100% 0%, 100% 100%, 5% 100%);
		animation-timing-function: steps(3);
	}
	50% {
        clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%);
		animation-timing-function: steps(3);
	}
	75% {
        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
		animation-timing-function: steps(3);
	}
	100% {
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
	}
}

@keyframes editorMoonIn {
	0% {
		transform: translateY(18px) scale(0);
		animation-timing-function: steps(5);
	}
	25% {
		transform: translateY(9px) scale(0.5);
		animation-timing-function: steps(5);
	}
	50% {
		transform: translateY(3px) scale(0.8);
		animation-timing-function: steps(5);
	}
	75% {
		transform: translateY(0.6px) scale(0.95);
		animation-timing-function: steps(5);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes editorMoonOut {
	0% {
		transform: translateY(0) scale(1);
		animation-timing-function: steps(5);
	}
	25% {
		transform: translateY(0.6px) scale(0.95);
		animation-timing-function: steps(5);
	}
	50% {
		transform: translateY(3px) scale(0.8);
		animation-timing-function: steps(5);
	}
	75% {
		transform: translateY(9px) scale(0.5);
		animation-timing-function: steps(5);
	}
	100% {
		transform: translateY(18px) scale(0);
	}
}

@keyframes editorIconInL {
	0% {
		transform: translateY(-15px) rotateZ(60deg);
		opacity: 0;
		animation-timing-function: steps(3);
	}
	25% {
		transform: translateY(-7.5px) rotateZ(30deg);
		opacity: 0.75;
		animation-timing-function: steps(3);
	}
	50% {
		transform: translateY(-2.5px) rotateZ(10deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	75% {
		transform: translateY(-0.5px) rotateZ(2deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateY(0) rotateZ(0);
		opacity: 1;
	}
}

@keyframes editorIconInR {
	0% {
		transform: translateY(-15px) rotateZ(-60deg);
		opacity: 0;
		animation-timing-function: steps(3);
	}
	25% {
		transform: translateY(-7.5px) rotateZ(-30deg);
		opacity: 0.75;
		animation-timing-function: steps(3);
	}
	50% {
		transform: translateY(-2.5px) rotateZ(-10deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	75% {
		transform: translateY(-0.5px) rotateZ(-2deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateY(0) rotateZ(0);
		opacity: 1;
	}
}

@keyframes editorIconOutL {
	0% {
		transform: translateY(0) rotateZ(0);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	25% {
		transform: translateY(-0.5px) rotateZ(-2deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	50% {
		transform: translateY(-2.5px) rotateZ(-10deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	75% {
		transform: translateY(-7.5px) rotateZ(-30deg);
		opacity: 0.75;
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateY(-15px) rotateZ(-60deg);
		opacity: 0;
	}
}

@keyframes editorIconOutR {
	0% {
		transform: translateY(0) rotateZ(0);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	25% {
		transform: translateY(-0.5px) rotateZ(2deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	50% {
		transform: translateY(-2.5px) rotateZ(10deg);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	75% {
		transform: translateY(-7.5px) rotateZ(30deg);
		opacity: 0.75;
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateY(-15px) rotateZ(60deg);
		opacity: 0;
	}
}

@keyframes editorLetterIn {
	0% {
		transform: translateX(-30px);
		opacity: 0;
		animation-timing-function: steps(3);
	}
	25% {
		transform: translateX(-15px);
		opacity: 0.4;
		animation-timing-function: steps(3);
	}
	50% {
		transform: translateX(-5px);
		opacity: 0.7;
		animation-timing-function: steps(3);
	}
	75% {
		transform: translateX(-1px);
		opacity: 0.9;
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes editorLetterOut {
	0% {
		transform: translateX(0);
		opacity: 1;
		animation-timing-function: steps(3);
	}
	25% {
		transform: translateX(1px);
		opacity: 0.9;
		animation-timing-function: steps(3);
	}
	50% {
		transform: translateX(5px);
		opacity: 0.7;
		animation-timing-function: steps(3);
	}
	75% {
		transform: translateX(15px);
		opacity: 0.4;
		animation-timing-function: steps(3);
	}
	100% {
		transform: translateX(30px);
		opacity: 0;
	}
}