@charset "utf-8";


#main-contents:after {
    width: 0;
    height: 0;
    top: 50vw;
    -webkit-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
    transition-delay: 3s;
	transition-duration: 3s;
}
.on #main-contents:after {
    width: 150vh;
    height: 150vh;
    top: -25vh;
}


.top-contents {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: calc(100vh - 155px);
    min-height: 600px;
    align-items: end;
}
.top-contents--main {
    width: 60%;
	height:100%;
	position:relative;
}
.top-contents--main .layer {
    position: absolute;
    bottom: 0;
}
.top-contents--main .line {
	width: 107px;
	height: 0;
	background-image: url(../img/home/line.png);
	background-repeat: no-repeat;
    position: absolute;
    top: 20px;
	left: 0;
	z-index:10;
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
	opacity: 0;
}
.on .top-contents--main .line {
	height: 466px;
	opacity: 1;
}
.top-contents--main .red {
    position: absolute;
    top: 145px;
    left: 55px;
    z-index: 10;
    width: 220px;
    height: 220px;
	background-image: none;
	transform: rotate(45deg);
}
.top-contents--main .red span {
	display:block;
	width: 0;
	height: 55px;
	background-image: url(../img/home/red3.png);
	background-repeat: no-repeat;
	position: absolute;
	z-index:10;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	transform: rotate(0deg);
}
.top-contents--main .red .red02 {
	background-position: 0 -55px;
	top:55px;
}
.top-contents--main .red .red03 {
	background-position: 0 -110px;
	top: 110px;
}
.top-contents--main .red .red04 {
	background-position: 0 -165px;
	top: 165px;
}
.on .top-contents--main .red span {
	width: 100%;
}
.on .top-contents--main .red .red01 {
	transition-delay: 1.2s;
}
.on .top-contents--main .red .red02 {
	transition-delay: 1.3s;
}
.on .top-contents--main .red .red03 {
	transition-delay: 1.4s;
}
.on .top-contents--main .red .red04 {
	transition-delay: 1.5s;
}
.top-contents--main .red:after {
	content: '';
	display:block;
	width: 100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	z-index:-1;
	background-image: url(../img/home/red3.png);
	background-size: contain;
	opacity: 0;
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.on .top-contents--main .red:after {
	opacity: 1;
	transition-delay: 2s;
}

.top-contents--main .text {
    position: absolute;
    bottom: 100px;
    left: 230px;
}

.top-contents--sub {
    width: 40%;
    text-align: right;
}
.top-contents--sub p {
    font-size: 38px;
    font-family: 'Marcellus', serif;
    letter-spacing: 2px;
}



.buruburu-hover:hover {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}


/* -----------------------------------

media query

------------------------------------- */

@media (max-width: 480px) {

	.top-contents {
		height: 400px;
		min-height: auto;
	}
	.top-contents--main {
		width: 50%;
	}
	.top-contents--main .red {
		top: 76px;
		left: 34px;
		width: 150px;
		height: 150px;
	}
	.top-contents--main .line {
		width: 67px;
	    background-size: 67px 290px;
	}
	.on .top-contents--main .line {
		height: 290px;
	}


	.top-contents--sub {
		width: 50%;
	}
	.top-contents--sub p {
		font-size: 19px;
	}


}