@charset "utf-8";
/*=================================================================
	BASE
=================================================================*/
body {
	overflow: hidden;
}

#siteHeader #globalNav > ul:hover #busBtn:hover .businessMenu {
	background: rgba(255,255,255,.9);
}

#loadOverlay {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: #fff;
}

#loading {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50px;
	margin: auto;
	padding-top: 120px;
	text-align: center;
	color: #666;
	background: url(../img/logo_lumielina_s.png) no-repeat center top;
}
#bar {
	font-size: 1px;
	width: 300px;
	height: 2px;
	margin: auto;
	margin-top: 10px;
	padding: 1px;
	border: 1px solid #ddd;
}
#bar span {
	display: block;
	width: 0;
	height: 2px;
	background: #0270ff;
}

#siteFooter {
	position: fixed;
	z-index: 1;
	bottom: 0;
	width: 100%;
	opacity: 0;
}

#stage1 {
	z-index: 2;
}

#siteFooter small.ex {
	color: #fff;
	border-top: 1px solid #fff;
}

/*=================================================================
	#container
=================================================================*/
#siteHeader {
	visibility: hidden;
}

#container {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	visibility: hidden;
	width: 100%;
}

/* .stageBase
--------------------------- */
.stageBase {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.stageBase .fieldWrap {
	text-align: center;
}

#stage1 .fieldWrap,
#stage2 .fieldWrap,
#stage3 .fieldWrap {
	padding-top: 125px;
}



#stage1 {
	background: url(../img/stage1/stage1.jpg) no-repeat center center;
}

#stage2 {
	background: url(../img/stage2/stage2.jpg) no-repeat center center;
}

#stage3 {
	background: url(../img/stage2/stage2.jpg) no-repeat center center;
}

#business {
	background: url(../img/business/bsnsbg.jpg) no-repeat center bottom;
}
#business1.slidePanel {
	background: url(../img/business/bsns1bg.jpg) no-repeat center center;
}
#business2.slidePanel {
	background: url(../img/business/bsns2bg.jpg) no-repeat center center;
}
#business3.slidePanel {
	background: url(../img/business/bsns3bg.jpg) no-repeat center center;
}
#business4.slidePanel {
	background: url(../img/business/bsns4bg.jpg) no-repeat center center;
}
#business5.slidePanel {
	background: url(../img/business/bsns5bg.jpg) no-repeat center center;
}

#stage1,
#stage2,
#stage3,
#business,
#business1.slidePanel,
#business2.slidePanel,
#business3.slidePanel,
#business4.slidePanel,
#business5.slidePanel {
	background-attachment: fixed !important;
	background-size: cover !important;
}

/* #pageNav
--------------------------- */
#pageNav {
	position: fixed;
	z-index: 11;
	top: 0;
	right: 25px;
	width: 15px;
	text-align: center;
}

#pageNav ul {
	display: block;
	width: 15px;
}

#pageNav ul li {
	display: block;
	overflow: hidden;
	width: 15px;
	height: 15px;
	padding-bottom: 5px;
}

#pageNav ul li a {
	display: block;
	width: 15px;
	height: 15px;
	background: transparent url(../img/nav.png) no-repeat center center;
}

#pageNav ul li.activeStage a {
	background: transparent url(../img/nav_acv.png) no-repeat center center;
}

/* #pageDown
--------------------------- */
#pageDown {
	position: fixed;
	z-index: 1000;
	right: 0;
	bottom: 5px;
	left: 0;
	overflow: hidden;
	width: 100px;
	height: 30px;
	margin: 0 auto;
	text-align: center;
}

#pageDown a {
	display: block;
	width: 40px;
	height: 30px;
	margin: 0 auto;
	background: transparent url(../img/next_arw.png) no-repeat center center;
}

/* #stage1
--------------------------- */
#stage1 .mainImage {
	overflow: hidden;
	width: 100%;
	height: 350px;
	margin: 0 auto 30px;
	padding-top: 0;
	background-size: cover;
}
#stage1 .mainImage h1 {
	position: relative;
	width: 100%;
	height: 350px;
	background: url(../img/stage1/img_top_slider.jpg) no-repeat center center #000c15;
	background-size: cover;
}
#stage1 .mainImage h1 #keyCatch {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 797px;
	height: 146px;
	margin: auto;
	/*	transform: rotateX(90deg);*/
}
#stage1 .mainImage h1 #keyCatch #keyCatch1 {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 797px;
	height: 86px;
	margin: auto;
}
#stage1 .mainImage h1 #keyCatch #keyCatch2 {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	width: 797px;
	height: 60px;
	margin: auto;
}
#stage1 .mainImage h1 #keyCatch #keyCatch1 img,
#stage1 .mainImage h1 #keyCatch #keyCatch2 img {
	position: absolute;
	left: 0;
	width: 797px;
	height: 0;
}
#stage1 .mainImage h1 #keyCatch #keyCatch1 img {
	bottom: -86px;
}
#stage1 .mainImage h1 #keyCatch #keyCatch2 img {
	top: -60px;
}

#stage1 .mainImage h1 #keyOverlay {
	position: absolute;
	z-index: 9;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 350px;
	opacity: .8;
	background: #000c15;
}
#stage1 .mainImage h2 {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 3.5em;
	font-weight: 100;
	line-height: 1.2;
	width: 980px;
	margin: 0 auto;
	letter-spacing: .05em;
	color: #fff;
}
#stage1 .contWrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
#stage1 .contWrap .message {
	position: relative;
	width: 90%;
	height: 360px;
	margin: auto;
	text-align: center;
}

#stage1 .contWrap .message h3 {
	font-size: 1.8em;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	width: 90%;
	height: 30px;
	margin: auto;
	padding: 10px 0;
	white-space: nowrap;
	border-bottom: 1px #000 solid;
}

#stage1 .contWrap .message p {
	font-size: 1em;
	line-height: 2em;
	position: relative;
	overflow: hidden;
	width: 86%;
	max-height: 260px;
	margin: 0 auto;
	padding: 10px 2%;
}
#stage1 .contWrap .message > div {
	position: absolute;
	top: 50px;
	right: 0;
	left: 0;
	width: 90%;
	margin: auto;
	background: rgba(255,255,255,.5);
}


@media only screen and (max-height: 899px) {
	#stage1 .mainImage {
		height: 30%;
		min-height: 250px;
	}
	#stage1 .mainImage h1 {
		height: 100%;
	}
	#stage1 .mainImage h1 span {
		height: 100%;
	}
	#stage1 .mainImage h2 {
		font-family: 'Noto Sans Japanese', sans-serif;
		font-size: 3.5em;
		font-weight: 100;
		line-height: 1.2;
		letter-spacing: .05em;
		color: #fff;
		text-shadow: 2px 2px 2px black;
	}
	#stage1 .contWrap {
		overflow: hidden;
		width: 100%;
		max-width: 980px;
		margin: 0 auto;
	}
}
@media only screen and (max-height: 799px) {
	#stage1 .mainImage {
		height: 25%;
		min-height: 200px;
		margin-bottom: 20px;
	}
	#stage1 .contWrap .message p {
		font-size: .9em;
		line-height: 2em;
		max-height: 250px;
		padding: 5px 2%;
	}
}


#stage1 .contWrap .message div a {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-weight: bold;
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 5px 0;
	color: #fff;
	background: rgba(50,50,50,.3);
}

#stage1 .contWrap .message div a:hover {
	color: #0270ff;
	background: rgba(50,50,50,.2);
}

/* #stage2
--------------------------- */

#stage2 h1#catch2 {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 80px;
	margin: auto;
	text-align: center;
}

#stage2 h1#catch2 img {
	width: auto;
	height: 60px;
}

@-moz-keyframes zoomIn {
	from {
		-moz-transform: scale(.3);
		opacity: 0;
	}
	50% {
		-moz-transform: scale(1.5);
		opacity: .8;
	}
	90% {
		opacity: 1;
	}
	100% {
		-moz-transform: scale(1);
		opacity: 0;
	}
}

@-webkit-keyframes zoomIn {
	from {
		-webkit-transform: scale(.3);
		opacity: 0;
	}
	50% {
		-webkit-transform: scale(1.5);
		opacity: .8;
	}
	90% {
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 0;
	}
}
@keyframes zoomIn {
	from {
		transform: scale(.3);
		opacity: 0;
	}
	50% {
		transform: scale(1.5);
		opacity: .8;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

.zoomIn {
	-webkit-animation: zoomIn 9.8s ease-in-out 0s forwards;
	-moz-animation: zoomIn 9.8s ease-in-out 0s forwards;
	animation: zoomIn 9.8s ease-in-out 0s forwards;

	-moz-animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

#stage2 #particlesJsNasa {
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
}

#stage2 a.chibanote {
	position: absolute;
	z-index: 100;
	right: 20px;
	bottom: 40px;
	display: block;
}

#stage2 p.copy {
	position: absolute;
	right: 20px;
	bottom: 100px;
}

#stage2 canvas {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 1000px;
	vertical-align: bottom;
}
#stage2 #equation img {
	width: 100%;
	height: auto;
}
#stage2 #equation {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	min-width: 900px;
	max-width: 1200px;
	height: 100%;
	min-height: 730px;
	margin: auto;
}

#stage2 #equation span {
	position: absolute;
}


.animSt img {
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}

/*animate*/
@-moz-keyframes downright {
	/*down right*/
	0% {
		-moz-transform: translate(-200px,-200px) scale(.3) rotate3d(20,15,10,-60deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-moz-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes downright {
	/*down right*/
	0% {
		-webkit-transform: translate(-200px,-200px) scale(.3) rotate3d(20,15,10,-60deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes downright {
	/*down right*/
	0% {
		transform: translate(-200px,-200px) scale(.3) rotate3d(20,15,10,-60deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}



@-moz-keyframes downleft {
	/*down left*/
	0% {
		-moz-transform: translate(200px,-200px) scale(.3) rotate3d(30,20,5,90deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-moz-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes downleft {
	/*down left*/
	0% {
		-webkit-transform: translate(200px,-200px) scale(.3) rotate3d(30,20,5,90deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes downleft {
	/*down left*/
	0% {
		transform: translate(200px,-200px) scale(.3) rotate3d(30,20,5,90deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}

@-moz-keyframes left {
	/* left*/
	0% {
		-moz-transform: translate(400px,0) scale(.4) rotate3d(20,0,4,45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-moz-transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes left {
	/* left*/
	0% {
		-webkit-transform: translate(400px,0) scale(.4) rotate3d(20,0,4,45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes left {
	/* left*/
	0% {
		transform: translate(400px,0) scale(.4) rotate3d(20,0,4,45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translate(0,0) scale(1.5);
		opacity: 0;
	}
}
@-moz-keyframes right {
	/* right*/
	0% {
		-moz-transform: translate(-200px,100px) scale(.5) rotate3d(20,0,4,-45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-moz-transform: translate(0,0) scale(1.2)  rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes right {
	/* right*/
	0% {
		-webkit-transform: translate(-200px,100px) scale(.5) rotate3d(20,0,4,-45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1.2)  rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes right {
	/* right*/
	0% {
		transform: translate(-200px,100px) scale(.5) rotate3d(20,0,4,-45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translate(0,0) scale(1.2)  rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}

@-moz-keyframes upright {
	/*up right*/
	0% {
		-moz-transform: translate(-200px,300px) scale(.2) rotate3d(10,50,10,-40deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	60% {
		opacity: .6;
	}
	100% {
		-moz-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes upright {
	/*up right*/
	0% {
		-webkit-transform: translate(-200px,300px) scale(.2) rotate3d(10,50,10,-40deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	60% {
		opacity: .6;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes upright {
	/*up right*/
	0% {
		transform: translate(-200px,300px) scale(.2) rotate3d(10,50,10,-40deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	60% {
		opacity: .6;
	}
	100% {
		transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-moz-keyframes upleft {
	/*up left*/
	0% {
		-moz-transform: translate(200px,200px) scale(.2)  rotate3d(20,0,4,-75deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-moz-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes upleft {
	/*up left*/
	0% {
		-webkit-transform: translate(200px,200px) scale(.2)  rotate3d(20,0,4,-75deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes upleft {
	/*up left*/
	0% {
		transform: translate(200px,200px) scale(.2)  rotate3d(20,0,4,-75deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translate(0,0) scale(1) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}

@-moz-keyframes up {
	/*up */
	0% {
		-moz-transform: translate(0,300px) scale(.4) rotate3d(-10,0,4,45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-moz-transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes up {
	/*up */
	0% {
		-webkit-transform: translate(0,300px) scale(.4) rotate3d(-10,0,4,45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes up {
	/*up */
	0% {
		transform: translate(0,300px) scale(.4) rotate3d(-10,0,4,45deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}

@-moz-keyframes down {
	/*down */
	0% {
		-moz-transform: translate(0,-300px) scale(.4) rotate3d(30,6,20,-30deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-moz-transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@-webkit-keyframes down {
	/*down */
	0% {
		-webkit-transform: translate(0,-300px) scale(.4) rotate3d(30,6,20,-30deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		-webkit-transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}
@keyframes down {
	/*down */
	0% {
		transform: translate(0,-300px) scale(.4) rotate3d(30,6,20,-30deg);
		opacity: 0;
	}
	30% {
		opacity: .8;
	}
	80% {
		opacity: .7;
	}
	100% {
		transform: translate(0,0) scale(1.5) rotate3d(0,0,0,0deg);
		opacity: 0;
	}
}

#stage2 #equation span img {
	opacity: 0;
}
#stage2 #equation span.animSt img {
	opacity: 1;
}

#stage2 #equation span#equation01 {
	top: 12%;
	left: -8%;
	transform: scale(.8);
}

#stage2 #equation span#equation01.animSt img {
	-webkit-animation: upleft 9.8s ease-in infinite;
	-moz-animation: upleft 9.8s ease-in infinite;
	animation: upleft 9.8s ease-in infinite;
}

#stage2 #equation span#equation02 {
	top: 15%;
	right: -5%;
	transform: scale(.8);
}

#stage2 #equation span#equation02.animSt img {
	-webkit-animation: upright 8.8s ease-in infinite;
	-moz-animation: upright 8.8s ease-in infinite;
	animation: upright 8.8s ease-in infinite;
}

#stage2 #equation span#equation03 {
	top: 45%;
	left: -8%;
	transform: scale(.6);
}
#stage2 #equation span#equation03.animSt img {
	-webkit-animation: left 7.8s ease-in infinite;
	-moz-animation: left 7.8s ease-in infinite;
	animation: left 7.8s ease-in infinite;
}

#stage2 #equation span#equation04 {
	bottom: 5%;
	left: -3%;
	transform: scale(.8);
}

#stage2 #equation span#equation04.animSt img {
	-webkit-animation: downleft 6.8s ease-in infinite;
	-moz-animation: downleft 6.8s ease-in infinite;
	animation: downleft 6.8s ease-in infinite;
}

#stage2 #equation span#equation05 {
	bottom: 0;
	left: 31%;
	transform: scale(.7);
}
#stage2 #equation span#equation05.animSt img {
	-webkit-animation: down 10.8s ease-in infinite;
	-moz-animation: down 10.8s ease-in infinite;
	animation: down 10.8s ease-in infinite;
}

#stage2 #equation span#equation07 {
	bottom: 22%;
	left: 4%;
	transform: scale(.6);
}
#stage2 #equation span#equation07.animSt img {
	-webkit-animation: downleft 12.8s ease-in infinite;
	-moz-animation: downleft 12.8s ease-in infinite;
	animation: downleft 12.8s ease-in infinite;
}

#stage2 #equation span#equation08 {
	right: 0;
	bottom: 30%;
	transform: scale(.6);
}

#stage2 #equation span#equation08.animSt img {
	-webkit-animation: downright 15.8s ease-in infinite;
	-moz-animation: downright 15.8s ease-in infinite;
	animation: downright 15.8s ease-in infinite;
}

#stage2 #equation span#equation09 {
	top: 20%;
	right: 30%;
	transform: scale(.6);
}
#stage2 #equation span#equation09.animSt img {
	-webkit-animation: up 10.8s ease-in infinite;
	-moz-animation: up 10.8s ease-in infinite;
	animation: up 10.8s ease-in infinite;
}

#stage2 #equation span#equation10 {
	top: 30%;
	left: 5%;
	transform: scale(.6);
}
#stage2 #equation span#equation10.animSt img {
	-webkit-animation: upleft 13.8s ease-in infinite;
	-moz-animation: upleft 13.8s ease-in infinite;
	animation: upleft 13.8s ease-in infinite;
}

#stage2 #equation span#equation11 {
	top: 35%;
	right: 5%;
	transform: scale(.6);
}
#stage2 #equation span#equation11.animSt img {
	-webkit-animation: right 12.8s ease-in infinite;
	-moz-animation: right 12.8s ease-in infinite;
	animation: right 12.8s ease-in infinite;
}

#stage2 #equation span#equation12 {
	right: 0;
	bottom: 12%;
	transform: scale(.6);
}
#stage2 #equation span#equation12.animSt img {
	-webkit-animation: downright 18.8s ease-in infinite;
	-moz-animation: downright 18.8s ease-in infinite;
	animation: downright 18.8s ease-in infinite;
}




/* #stage3
--------------------------- */
#stage3 {
	color: #fff;
}

#stage3 h1 {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 4em;
	font-weight: 100;
	line-height: 1.4em;
	margin: 150px auto 50px;
}

#text span {
	display: block;
	margin: 0 auto 1.5%;
}

@media only screen and (max-height: 860px) {
	#stage3 h1 {
		margin: 100px auto 30px;
	}
	#text span {
		display: block;
		margin: 0 auto 1%;
	}
}

@-webkit-keyframes flipInX {
	from {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}
@keyframes flipInX {
	from {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
		opacity: 0;
	}
	40% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
		-webkit-animation-timing-function: ease-in;
		animation-timing-function: ease-in;
	}
	60% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	}
	80% {
		-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
		transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
	}
	to {
		-webkit-transform: perspective(400px);
		transform: perspective(400px);
	}
}
.flipInX {
	-webkit-animation-name: flipInX;
	animation-name: flipInX;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;

	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* ---- particles.js container ---- */
#particlesJs {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url('');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

/* #business
--------------------------- */
#business {
	position: relative;
}
#business1,
#business2,
#business3,
#business4,
#business5 {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	padding-top: 50px;
}
#business .fieldWrap {
	width: 800px;
	height: 800px;
	margin: auto;
}
#business .bubble {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 700px;
	height: 700px;
	margin-top: -350px;
	margin-left: -350px;
	transform: scale(0);
	text-align: center;
	opacity: 1;
}
#business #business1 .bubble {
	background: url(../img/business/bsns1_buble.png) no-repeat center center;
	background-size: 700px 700px;
}
#business #business2 .bubble {
	background: url(../img/business/bsns2_buble.png) no-repeat center center;
	background-size: 700px 700px;
}
#business #business3 .bubble {
	background: url(../img/business/bsns3_buble.png) no-repeat center center;
	background-size: 700px 700px;
}
#business #business4 .bubble {
	background: url(../img/business/bsns4_buble.png) no-repeat center center;
	background-size: 700px 700px;
}
#business #business5 .bubble {
	background: url(../img/business/bsns5_buble.png) no-repeat center center;
	background-size: 700px 700px;
}

#business .bubble.bbAcv {
	-webkit-transition: all 1.2s cubic-bezier(0,-.17,0,1.26);
	-moz-transition: all 1.2s cubic-bezier(0,-.17,0,1.26);
	transition: all 1.2s cubic-bezier(0,-.17,0,1.26);
	transform: scale(1);
	opacity: 1;
}
#business .bubble.bbRemove {
	-webkit-transition: all 3s linear;
	-moz-transition: all 3s linear;
	transition: all 3s linear;
	transform: scale(15);
	opacity: 0;
}

#business .bubble h2 {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	margin: auto;
	text-align: center;
	opacity: 0;
}


#business .bubble h2 img {
	margin: 0 auto;
}

#business .bubble h3 {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 3em;
	line-height: 1.2em;
	padding: 170px 0 30px 0;
	text-align: center;
	opacity: 0;
	color: #fff;
	text-shadow: 0 3px 5px #000;
}
#business .bubble h3 span {
	font-size: .8em;
	display: block;
}
#business .bubble h3 small {
	font-size: .6em;
}

#business .bubble p {
	font-size: 1.2em;
	line-height: 2.3em;
	padding: 15px 0 0 0;
	text-align: center;
	opacity: 0;
	color: #fff;
	text-shadow: 0 0 5px #000;
}

@media only screen and (max-height: 860px) {
	#business .bubble h2 {
		position: absolute;
		top: 10px;
		right: 0;
		left: 0;
		width: 90%;
		margin: 0 auto;
		text-align: center;
	}
	#business .bubble h2 img {
		width: auto;
		max-height: 110px;
		margin: 0 auto;
	}
	#business .bubble h2 img.Agriculture {
		position: absolute;
		right: 50px;
		margin: 0 auto;
	}
	#business .bubble h3 {
		font-size: 2.5em;
		line-height: 1.2em;
		padding: 130px 0 0 0;
	}
	#business .bubble h3 span {
		font-size: .8em;
		display: block;
	}
	#business .bubble p {
		line-height: 1.8em;
		padding: 15px 0 0 0;
	}
	#business1,
	#business2,
	#business3,
	#business4,
	#business5 {
		padding-top: 20px;
	}
	#business .fieldWrap {
		background-size: 650px 650px;
	}
	#business .bubble {
		height: 600px;
		margin-top: -300px;
	}
	#business #business1 .bubble {
		background: url(../img/business/bsns1_buble.png) no-repeat center center;
		background-size: 600px 600px;
	}
	#business #business2 .bubble {
		background: url(../img/business/bsns2_buble.png) no-repeat center center;
		background-size: 600px 600px;
	}
	#business #business3 .bubble {
		background: url(../img/business/bsns3_buble.png) no-repeat center center;
		background-size: 600px 600px;
	}
	#business #business4 .bubble {
		background: url(../img/business/bsns4_buble.png) no-repeat center center;
		background-size: 600px 600px;
	}
	#business #business5 .bubble {
		background: url(../img/business/bsns5_buble.png) no-repeat center center;
		background-size: 600px 600px;
	}
}

/* .stageSlide
--------------------------- */
.stageSlide {
	position: relative;
	visibility: hidden;
	overflow: hidden;
}
.stageSlide .slideWrap {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.stageSlide .slideWrap:before,
.stageSlide .slideWrap:after {
	display: table;
	content: ' ';
}
.stageSlide .slideWrap:after {
	clear: both;
}
.stageSlide .slideWrap {
	*zoom: 1;
}

.stageSlide .slidePanel {
	float: left;
	overflow: hidden;
}
.activePanel {
	position: absolute;
	z-index: 1;
}

.stageSlide .slideNav {
	position: absolute;
	z-index: 98;
	bottom: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	margin-bottom: -400px;
	margin-left: -400px;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	text-align: center;
}
.stageSlide .slideNav a {
	position: absolute;
	display: block;
	width: 256px;
	height: 256px;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	background-size: 100%;
}
.stageSlide .slideNav a.pnActive {
	/*	background: #fff;*/
}
.stageSlide .slideNav a:hover {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	transform: scale(1.05);
}
.stageSlide .slideNav a.slidePn1:hover {
	cursor: default;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	transform: scale(.9);
}
.stageSlide .slideNav a img {
	width: 100%;
}
.stageSlide .slideNav .slidePn1 {
	top: 283px;
	left: 227px;
	width: 346px;
	height: 150px;
}
.stageSlide .slideNav .slidePn2 {
	top: 527px;
	left: 266px;
}
.stageSlide .slideNav .slidePn3 {
	top: 306px;
	left: -59px;
}
.stageSlide .slideNav .slidePn4 {
	top: -10px;
	left: 29px;
}
.stageSlide .slideNav .slidePn5 {
	top: -10px;
	left: 491px;
}
.stageSlide .slideNav .slidePn6 {
	top: 336px;
	left: 606px;
}

.stageSlide .slideNav.navShort .slidePn1 {
	background: url(../img/business/btn-bsns1_w.png) no-repeat center center;
	background-size: contain;
}

.stageSlide .slideNav.navShort .slidePn1 img {
	display: none;
}

@media only screen and (max-height: 860px) {
	.stageSlide .slideNav {
		bottom: 50%;
		left: 50%;
		width: 600px;
		height: 600px;
		margin-bottom: -300px;
		margin-left: -300px;
	}
	.stageSlide .slideNav a {
		width: 175px;
		height: 175px;
	}
	.stageSlide .slideNav a img {
		width: 100%;
	}
	.stageSlide .slideNav .slidePn1 {
		top: 207px;
		left: 188px;
		width: 213px;
		height: 90px;
	}
	.stageSlide .slideNav .slidePn2 {
		top: 400px;
		left: 210px;
	}
	.stageSlide .slideNav .slidePn3 {
		top: 227px;
		left: 0;
	}
	.stageSlide .slideNav .slidePn4 {
		top: 0;
		left: 32px;
	}
	.stageSlide .slideNav .slidePn5 {
		top: 0;
		left: 392px;
	}
	.stageSlide .slideNav .slidePn6 {
		top: 227px;
		left: 432px;
	}
}


.stageSlide .slideNav.navShort {
	bottom: 50px;
	left: 0;
	width: 300px;
	height: 300px;
	margin-bottom: 0;
	margin-left: 0;
}
.stageSlide .slideNav.navShort a {
	width: 80px;
	height: 80px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	opacity: .5;
	background-size: 100%;
}
.stageSlide .slideNav.navShort a:hover,
.stageSlide .slideNav.navShort a.pnActive {
	opacity: 1;
}
.stageSlide .slideNav.navShort a.slidePn1:hover {
	cursor: pointer;
}
.stageSlide .slideNav.navShort a.pnActive {
	z-index: 99;
	transform: scale(1.3);
}
.stageSlide .slideNav.navShort .slidePn1 {
	top: 145px;
	left: 0;
	width: 205px;
	height: 100px;
	opacity: 1;
}
.stageSlide .slideNav.navShort .slidePn2 {
	top: 0;
	left: 5px;
}
.stageSlide .slideNav.navShort .slidePn3 {
	top: 20px;
	left: 87px;
}
.stageSlide .slideNav.navShort .slidePn4 {
	top: 64px;
	left: 160px;
}
.stageSlide .slideNav.navShort .slidePn5 {
	top: 134px;
	left: 205px;
	/*	top: 132px;
	left: 205px;*/
	width: 86px;
}
.stageSlide .slideNav.navShort .slidePn6 {
	top: 215px;
	left: 240px;
}

/* =====================================
	CSS Animation Elements
===================================== */
.stageSlide .slideNav a.animSt img {
	-webkit-animation: blFloating 3s ease-in-out infinite;
	-moz-animation: blFloating 3s ease-in-out infinite;
	animation: blFloating 3s ease-in-out infinite;
}
.stageSlide .slideNav.navShort a.animSt img {
	margin-top: 0!important;
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}
@-moz-keyframes blFloating {
	40% {
		margin-top: 5px;
		transform: scale(.95);
	}
	80% {
		margin-top: -5px;
		transform: scale(1);
	}
}
@-webkit-keyframes blFloating {
	40% {
		margin-top: 5px;
		transform: scale(.95);
	}
	80% {
		margin-top: -5px;
		transform: scale(1);
	}
}
@keyframes blFloating {
	40% {
		margin-top: 5px;
		transform: scale(.95);
	}
	80% {
		margin-top: -5px;
		transform: scale(1);
	}
}


/*=================================================================
	control
=================================================================*/
.active {
	color: #0270ff !important;
}

.attention {
	color: #0270ff !important;
}

.bold {
	font-weight: bold;
}

.is_ab {
	position: absolute;
}

.is_none {
	display: none !important;
}

.is_disable {
	cursor: default;
	text-decoration: none;
	pointer-events: none;
	opacity: .4;

	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
}

.smallText {
	font-size: .9em;
}

.textLeft {
	text-align: left;
}

.textRight {
	text-align: right;
}

.textCenter {
	text-align: center;
}