@charset "utf-8";

/*
******************************************************************
* MJP style.css
******************************************************************
*/

.feature-ttl {
	max-width: 340px;
}
/*chara settings*/
.common-lower-top-chara001-box,
.common-lower-top-chara002-box,
.common-lower-top-chara003-box {
	position: absolute;
	z-index: 0;
	bottom: 10%;
	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: -231px;
	left: 0;
	max-width: 616px;
	width: 100%;
}
.chara002 {
	z-index: 2;
	bottom: -489px;
	left: -11%;
	max-width: 1067px;
	width: 100%;
}
.chara003 {
	z-index: 3;
	bottom: -440px;
	left: 29%;
	max-width: 1056px;
	width: 100%;
}
.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);
}
.action-end .chara002 {
	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);
}
.action-end .chara003 {
	animation-name: loop-float;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: .7s;
	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);
    }
}
/*.chara004 {
	z-index: 4;
	bottom: 0;
	left: 49%;
	max-width: 706px;
	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: translateX(-100%);
	/*transform-origin: bottom right;*/
	transition-duration: .3s;
	transition-delay: 1.3s;
	transition-timing-function: cubic-bezier(.1,.28,.31,.99);
}
.chara002 {
	opacity: 0;
	transform: translateX(-100%);
	transition-duration: .3s;
	transition-delay: 1.6s;
	transition-timing-function: cubic-bezier(.1,.28,.31,.99);
}
.chara003 {
	opacity: 0;
	transform: translateX(-100%);
	transition-duration: .3s;
	transition-delay: 1.9s;
	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;
	transform: scale(1);
}*/
.action .chara001,
.action .chara002,
.action .chara003 {
	opacity: 1;
	transform: translateX(0);
}

/**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;
}
/*logo animation settings ens*/


.common-lower-main {
	padding-bottom: 170px;
}
.common-lower-box.box002 {
	position: relative;
	max-width: 995px;
}
.float-descript001 {
	position: absolute;
	bottom: -230px;
	left: 0;
	display: block;
	max-width: 548px;
}