@charset "utf-8";

/*
******************************************************************
* MJP style.css
******************************************************************
*/
/*chara settings*/
.common-lower-top-chara001-box {
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 50%;
	max-width: 837px;
	width: 100%;
	min-height: 610px;
	height: inherit;
	-webkit-transform: translateX(-73%);
        -ms-transform: translateX(-73%);
            transform: translateX(-73%);
}
.common-lower-top-chara-img {
	position: absolute;
	z-index: 0;
}
.chara001 {
	top: 50%;
	z-index: 0;
	max-width: 837px;
	margin-top: -280px;
	width: 100%;
}
.chara002 {
	z-index: 2;
	bottom: 0;
	left: 29.5%;
	max-width: 215px;
	width: 100%;
}
.chara003 {
	z-index: 3;
	bottom: 0;
	left: 36%;
	max-width: 272px;
	width: 100%;
}
.chara004 {
	z-index: 4;
	bottom: 0;
	left: 38.5%;
	max-width: 651px;
	width: 100%;
}
/*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;
}
/*logo animation settings ens*/

.common-lower-page-ttl {
	max-width: 532px;
}
.common-lower-main {
	padding-top: 50px;
    padding-bottom: 205px;
}
.common-lower-tab-box {
	width: 1000px;
	margin: 0 auto;
    text-align: center;
}
.common-lower-tab-list {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
	display: inline-flex;
}
.top-tab-box {
	margin-bottom: 35px;
    padding-bottom: 14px;
    background: url(../img/img_top-navbar.png) no-repeat center bottom;
    background-size: 1000px auto;
}
.bottom-tab-box {
	margin-top: 60px;
    padding-top: 14px;
    background: url(../img/img_bottom-navbar.png) no-repeat center top;
    background-size: 1000px auto;
}
.common-lower-tab-item:nth-child(2) {
	margin: 0 1px;
}
.common-lower-tab-item img {
	position: relative;
	z-index: 1;
}
.common-lower-tab-item a {
	display: block;
	position: relative;
}
.common-lower-tab-item a:after {
	display: block;
	opacity: 0;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
}
.common-lower-tab-item a.active:after, 
.common-lower-tab-item a:hover:after {
	opacity: 1;
}
.common-lower-tab-item a.active img,
.common-lower-tab-item a:hover img {
	opacity: 0;
}
.top-tab-box .common-lower-tab-list .common-lower-tab-item:nth-child(1) a:after {
    background: url(../img/img_top-nav001-on.png) no-repeat center top;
    background-size: 100% auto;
}
.top-tab-box .common-lower-tab-list .common-lower-tab-item:nth-child(2) a:after {
    background: url(../img/img_top-nav002-on.png) no-repeat center top;
    background-size: 100% auto;
}
.top-tab-box .common-lower-tab-list .common-lower-tab-item:nth-child(3) a:after {
    background: url(../img/img_top-nav003-on.png) no-repeat center top;
    background-size: 100% auto;
}
.bottom-tab-box .common-lower-tab-list .common-lower-tab-item:nth-child(1) a:after {
    background: url(../img/img_bottom-nav001-on.png) no-repeat center bottom;
    background-size: 100% auto;
}
.bottom-tab-box .common-lower-tab-list .common-lower-tab-item:nth-child(2) a:after {
    background: url(../img/img_bottom-nav002-on.png) no-repeat center bottom;
    background-size: 100% auto;
}
.bottom-tab-box .common-lower-tab-list .common-lower-tab-item:nth-child(3) a:after {
    background: url(../img/img_bottom-nav003-on.png) no-repeat center bottom;
    background-size: 100% auto;
}

/*content001*/
.content001 .common-lower-box.box002 {
	position: relative;
	margin-top: -28px;
	z-index: 2;
}
.content001 .common-lower-box.box003 {
	position: relative;
	z-index: 3;
    left: -96px;
    margin-top: -490px;
}
.content001 .common-lower-box.box-chara {
    position: relative;
    left: 253px;
    z-index: 1;
    margin-top: -717px;
}
.content001 .common-lower-box.box004 {
    position: relative;
    z-index: 4;
    margin-top: -58px;
}

/*content002*/
.content002 {
	display: none;
}
.content002 .common-lower-box.box001 {
	margin-bottom: 36px;
}
.content002 .common-lower-box.box001 img:nth-child(1) {
	margin-bottom: 40px;
}
.content002 .common-lower-box.box002 {
	margin-bottom: 33px;
}

/*content003*/
.content003 {
	display: none;
}
.content003 .common-lower-box.box001 {
	margin-bottom: 15px;
}
.content003 .common-lower-box.box001 img:nth-child(1) {
	margin-bottom: 40px;
}
.content003 .common-lower-box.box002 {
	position: relative;
	z-index: 2;
}
.content003 .common-lower-box.box-chara {
    position: relative;
    left: 176px;
    z-index: 1;
    margin-top: -758px;
}
.content003 .common-lower-box.box003 {
	position: relative;
	z-index: 2;
	margin-top: -60px;
}