@charset "utf-8";
/* CSS Document */

.fadebox_wrap {
	position: relative;
	margin: 100px 0;
}
.fadebox_wrap01 {
	text-align: right;
}
.fadebox_wrap02 .fadebox02,
.fadebox_wrap02 .fadebox03,
.fadebox_wrap02 .fadebox04 {
	right: 0;
}

.fadebox01 {
	position: relative;
	display: inline-block;
	max-width: 65%;
}
.fadebox02 {
	position: absolute;
	bottom: 0;
	width: 400px;
	max-width: 40%;
}
.fadebox03,
.fadebox04 {
	position: absolute;
	bottom: 55%;
	width: 400px;
	max-width: 40%;
	text-align: center;
	font-size: 32px;
}
.fadebox04 {
	bottom: calc(55% - 30px);
	font-size: 24px;
}
/*
.fadebox_wrap02 .fadebox03 {
	bottom: 45%;
}
.fadebox_wrap02 .fadebox04 {
	bottom: calc(45% - 30px);
}
*/

.fadebox_wrap .fadebox01,
.fadebox_wrap .fadebox02,
.fadebox_wrap .fadebox03,
.fadebox_wrap .fadebox04 {
	opacity: 0;
}
.fadebox_wrap.fade_start .fadebox01,
.fadebox_wrap.fade_start .fadebox02 {
	animation-duration: 1.2s;
	animation-delay: 0s;
	animation-fill-mode: both;
}
.fadebox_wrap.fade_start .fadebox03 {
	animation-duration: 1.8s;
	animation-delay: 0s;
	animation-fill-mode: both;
}
.fadebox_wrap.fade_start .fadebox04 {
	animation-duration: 2s;
	animation-delay: 0s;
	animation-fill-mode: both;
}
.fadebox_wrap.fade_start .fadebox01{
	animation-name: fade_in_up;
}
.fadebox_wrap.fade_start .fadebox02 {
	animation-name: fade_in_down;
}
.fadebox_wrap.fade_start .fadebox03  {
	animation-name: fade_in_up02;
}
.fadebox_wrap.fade_start .fadebox04  {
	animation-name: fade_in_up03;
}

@keyframes fade_in_up {
    0% {
		opacity: 0;
		margin-top: 50px;
		margin-bottom: -50px;
    }
    100% {
		opacity: 1;
		margin-top: 0;
		margin-bottom: 0;
    }
}
@keyframes fade_in_down {
    0% {
		opacity: 0;
		bottom: 80px;
    }
    100% {
		opacity: 1;
		bottom: 0;
    }
}

@keyframes fade_in_up02 {
    0% {
		opacity: 0;
		margin-bottom: -150px;
		margin-top: 150px;
    }
    100% {
		opacity: 1;
		margin-bottom: 0;
		margin-top: 0;
    }
}
@keyframes fade_in_up03 {
    0% {
		opacity: 0;
		margin-bottom: -180px;
		margin-top: 180px;
    }
    100% {
		opacity: 1;
		margin-bottom: 0;
		margin-top: 0;
    }
}

@media only screen and (max-width: 767px){
	.fadebox03 {
		font-size: 5vw;
	}
	.fadebox04 {
		font-size: 3.8vw;
		bottom: calc(55% - 3.8vw);
	}
}