@charset "utf-8";

/*
******************************************************************
* MJP style.css
******************************************************************
*/
/*chara settings*/
.common-lower-top-chara001-box {
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 50%;
	max-width: 1118px;
	width: 100%;
	height: inherit;
	-webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
.common-lower-top-chara-img {
	position: absolute;
	z-index: 0;
}
.chara001 {
	z-index: 0;
	bottom: -155px;
	left: -14%;
	max-width: 858px;
	width: 100%;
}
.chara002 {
	z-index: 2;
	bottom: 0;
	left: 28%;
	max-width: 246px;
	width: 100%;
}
.chara003 {
	z-index: 3;
	bottom: 0;
	left: 35%;
	max-width: 373px;
	width: 100%;
}
.chara004 {
	z-index: 4;
	bottom: 0;
	left: 51%;
	max-width: 519px;
	width: 70%;
}
/*chara end*/

/**main animation settings**/

/*bg animation settings*/
.common-lower-bg {
	opacity: 0;
}
.action .common-lower-bg {
	opacity: 1;
	transition-duration: 1s;
	transition-delay: 1s;
}
.action-end .common-lower-bg {
	opacity: 1;
	transition-duration: 0s;
	transition-delay: 0s;
}
/*chara animation settings*/
.chara001 {
	opacity: 0;
	transform: scale(0.5);
	transform-origin: bottom right;
	transition-duration: .5s;
	transition-delay: 1.3s;
	transition-timing-function: cubic-bezier(.1,.28,.31,.99);
}
.chara002 {
	opacity: 0;
	transform: translateX(-100%);
	transition-duration: .3s;
	transition-delay: 2.0s;
	transition-timing-function: cubic-bezier(.1,.28,.31,.99);
}
.chara003 {
	opacity: 0;
	transform: translateX(-100%);
	transition-duration: .3s;
	transition-delay: 2.3s;
	transition-timing-function: cubic-bezier(.1,.28,.31,.99);
}
.chara004 {
	opacity: 0;
	transform: translateX(-100%);
	transition-duration: .3s;
	transition-delay: 2.6s;
	transition-timing-function: cubic-bezier(.1,.28,.31,.99);
}
.action .chara001 {
	opacity: 1;
	-webkit-transform: translateY(0) scale(1);
		-ms-transform: translateY(0) scale(1);
			transform: translateY(0) scale(1);
}
.action .chara002,
.action .chara003,
.action .chara004 {
	opacity: 1;
	transform: translateX(0);
}
.action-end .chara001 {
	animation-name: loop-float;
	animation-duration: 3s;
	animation-timing-function: linear;
	/*animation-delay: .5s;*/
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-fill-mode:both;
	/*animation-play-state: ;*/
	-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
			transform: translateY(0);

}
/*loop animation*/
@keyframes loop-float {
    0% {
    	-webkit-transform: translateY(10px);
				-ms-transform: translateY(10px);
					transform: translateY(10px);
    }
    100% {
			-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
					transform: translateY(0);
    }
}
/*loop animation end*/
/**animation settings end**/

/*logo menu animation settings*/
.common-lower-page-logo,
.common-lower-page-menu,
.common-lower-page-ttl {
	opacity: 0;
	transition: .5s;
}
.action-end .common-lower-page-logo,
.action-end .common-lower-page-menu,
.action-end .common-lower-page-ttl {
	opacity: 1;
}
.common-lower-page-ttl{
	max-width: 744px;
}
/*logo animation settings ens*/



.common-lower-box.box001{
	margin-bottom: 50px;
}

.common-lower-box.box003 {
	position: relative;
	max-width: 995px;
	margin-top: -31px;
	margin-bottom: 50px;
	z-index: 2;
}
.common-lower-box.box005{
	position: relative;
	z-index: 2;
}
.common-lower-box.box006{
	position: relative;
	left: -220px;
	z-index: 1;
	margin-top: -728px;
}
.float-descript001 {
	position: absolute;
	bottom: -68px;
	left: 0;
	display: block;
	max-width: 930px;
}