/*/////////// アニメーション ///////////*/
h1 {
    animation: fadeUp 2s ease 0s 1 normal;
    -webkit-animation: fadeUp 2s ease 0s 1 normal;
}

@keyframes fadeUp {
    0% { opacity: 0; }
    25% { opacity: 0; }
    100% { opacity: 1; margin: 0; }
}
@-webkit-keyframes fadev {
    0% { opacity: 0; }
    25% { opacity: 0; }
    100% { opacity: 1; margin: 0; }
}
.fadeIn {
    animation: fadeIn 5s ease 0s 1 normal;
    -webkit-animation: fadeIn 5s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 1 }
}
@-webkit-keyframes fadeIn {
    0% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 1 }
}

/*--------animation--------*/
.load {
	-webkit-animation: spin 30s linear infinite;
	-moz-animation: spin 30s linear infinite;
	-ms-animation: spin 30s linear infinite;
	-o-animation: spin 30s linear infinite;
	animation: spin 30s linear infinite;
}
@-webkit-keyframes spin {
 0% {
-webkit-transform: rotate(0deg);
}
 100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
 0% {
-moz-transform: rotate(0deg);
}
 100% {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes spin {
 0% {
-ms-transform: rotate(0deg);
}
 100% {
-ms-transform: rotate(360deg);
}
}
@-o-keyframes spin {
 0% {
-o-transform: rotate(0deg);
}
 100% {
-o-transform: rotate(360deg);
}
}
@keyframes spin {
 0% {
transform: rotate(0deg);
}
 100% {
transform: rotate(360deg);
}
}

#theme > div,
#series ul li,
#box01 > div div,
#box02 > div div,
#box03 > div div,
#box01 ul,
#box02 ul,
#box03 ul,
#box04 ul {
	transition: all 1.5s cubic-bezier(.215, .61, .355, 1), 2s;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#theme > div,
#series ul li:nth-child(1) {
	margin-top: 100px;
}
#series ul li:nth-child(2) {
	margin-top: 200px;
}
#series ul li:nth-child(3) {
	margin-top: 300px;
}
#series ul li:nth-child(4) {
	margin-top: 400px;
}
#theme > div.on,
#series ul li:nth-child(1).on,
#series ul li:nth-child(2).on,
#series ul li:nth-child(3).on,
#series ul li:nth-child(4).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	margin-top: 0;
}
#box01 > div div:nth-child(1) {
	width: 75%;
	top: 12%;
	right: -10%;
}
#box01 > div div:nth-child(1).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	right: 0%;
}
#box01 > div div:nth-child(2) {
	width: 32.5%;
	top: 26%;
	left: -7.5%;
}
#box01 > div div:nth-child(2).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 2.5%;
}
#box01 > div div:nth-child(3) {
	width: 37.5%;
	top: 49%;
	right: 7.5%;
}
#box01 > div div:nth-child(3).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	top: 44%;
}
#box02 > div div:nth-child(1) {
	width: 70%;
	top: 10%;
	left: -7.5%;
}
#box02 > div div:nth-child(1).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 2.5%;
}
#box02 > div div:nth-child(2) {
	width: 25%;
	top: 35%;
	left: 10%;
}
#box02 > div div:nth-child(2).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 10%;
}
#box02 > div div:nth-child(3) {
	width: 32.5%;
	top: 32.5%;
	right: 2.5%;
}
#box02 > div div:nth-child(3).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	top: 22.5%;
}
#box03 > div div:nth-child(1) {
	width: 72.5%;
	top: 25%;
	left: 0%;
}
#box03 > div div:nth-child(1).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	top: 15%;
}
#box03 > div div:nth-child(2) {
	width: 23%;
	top: 19%;
	right: -2.5%;
}
#box03 > div div:nth-child(2).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	right: 2.5%;
}
#box03 > div div:nth-child(3) {
	width: 48%;
	top: 46.5%;
	left: 30%;
}
#box03 > div div:nth-child(3).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 40%;
}
#box01 ul.on,
#box02 ul.on,
#box03 ul.on,
#box04 ul.on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

@media screen and (max-width : 640px){
#theme > div,
#series ul li:nth-child(1) {
	margin-top: 100px;
}
#series ul li:nth-child(2) {
	margin-top: 150px;
}
#series ul li:nth-child(3) {
	margin-top: 50px;
}
#series ul li:nth-child(4) {
	margin-top: 100px;
}

#box01 > div div:nth-child(1) {
	width: 90%;
	top: 12.5%;
	right: -10%;
}
#box01 > div div:nth-child(1).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	right: 0%;
}
#box01 > div div:nth-child(2) {
	width: 37.5%;
	top: 25%;
	left: -10%;
}
#box01 > div div:nth-child(2).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 0%;
}
#box01 > div div:nth-child(3) {
	width: 55%;
	top: 40%;
	right: 2.5%;
}
#box01 > div div:nth-child(3).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	top: 35%;
}
#box02 > div div:nth-child(1) {
	width: 87.5%;
	top: 11%;
	left: -5%;
}
#box02 > div div:nth-child(1).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 5%;
}
#box02 > div div:nth-child(2) {
	width: 40%;
	top: 27%;
	left: -10%;
}
#box02 > div div:nth-child(2).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 0%;
}
#box02 > div div:nth-child(3) {
	width: 45%;
	top: 31.5%;
	right: 2.5%;
}
#box02 > div div:nth-child(3).on {
	opacity: 1;
	-ms-filt6er: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	top: 26.5%;
}
#box03 > div div:nth-child(1) {
	width: 95%;
	top: 16%;
	left: -10%;
}
#box03 > div div:nth-child(1).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 0%;
}
#box03 > div div:nth-child(2) {
	width: 30%;
	top: 35%;
	right: 55%;
	z-index: 9;
}
#box03 > div div:nth-child(2).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	right: 65%;
}
#box03 > div div:nth-child(3) {
	width: 75%;
	top: 37.5%;
	left: 15%;
}
#box03 > div div:nth-child(3).on {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 25%;
}

}