@charset "utf-8";

/*=================================================================
	#container
=================================================================*/
#container {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}

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

#stage1 .fieldWrap,
#stage2 .fieldWrap,
#stage3 .fieldWrap {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding-top: 50px;
}


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

#stage2 {
	background: url(../img/stage2/stage2.jpg) no-repeat center center;
}
#business0 {
	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,
#business0,
#business1.slidePanel,
#business2.slidePanel,
#business3.slidePanel,
#business4.slidePanel,
#business5.slidePanel {
	background-size: cover !important;
}

/* #pageNav
--------------------------- */
#pageNav {
	position: fixed;
	z-index: 2;
	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 {
	overflow: hidden;
	width: 100%;
	height: 40px;
	margin: 20px 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 {
	position: relative;
	width: 100%;
	height: 150px;
	margin: 0 auto 50px;
	background: url(../img/stage1/img_top_slider.jpg) no-repeat center top;
	background-size: cover;
}
#stage1 .mainImage h1 {
	position: absolute;
	top: 50px;
	right: 0;
	left: 0;
	width: 100%;
	height: 50px;
	margin: auto;
}
#stage1 .mainImage h1 img {
	width: 96%;
	max-width: 500px;
	height: auto;
	vertical-align: middle;
}
#stage1 .contWrap {
	overflow: hidden;
	width: 100%;
	margin: 0 auto 30px;
}

#stage1 .contWrap .message {
	position: relative;
	width: 94%;
	margin: auto;
	text-align: center;
}

#stage1 .contWrap .message h3 {
	font-size: 1.8em;
	line-height: 1.2em;
	width: 94%;
	margin: 0 auto 10px;
	padding: 0 0 10px;
	border-bottom: 1px #000 solid;
}

#stage1 .contWrap .message p {
	font-size: 1em;
	line-height: 2em;
	overflow: hidden;
	width: 96%;
	margin: 0 auto;
	padding: 10px 2%;
}

#stage1 .contWrap .message div {
	width: 94%;
	margin: 0 auto;
	background: rgba(255,255,255,.5);
}

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


/* #stage2
--------------------------- */
#stage2 {
	position: relative;
}

#stage2 .equationes {
	width: 100%;
	text-align: center;
}

#stage2 .youtube {
	width: 96%;
	margin: 20px auto 10px;
	text-align: right;
}


#stage2 .equationes img {
	width: 100%;
	text-align: center;
	vertical-align: middle;
}


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

#stage2 h2.copy {
	position: relative;
	margin: 15px 0 20px auto;
	text-align: right;
}


/* #stage3
--------------------------- */
#stage3 {
	line-height: 2.5em;
	color: #fff;
}
#stage3 h1 {
	font-size: 2em;
	font-weight: 100;
	line-height: 1.6;
	width: 98%;
	margin: 0 auto 30px;
	color: #fff;
}

#text {
	display: block;
	width: 90%;
	margin: 0 auto 30px;
}



/* #business
--------------------------- */
#business .fieldWrap {
	position: relative;
	height: 100%;
	padding: 15px 0 40px;
	background-size: contain;
}
#business .bubble {
	position: relative;
	width: 90%;
	max-width: 700px;
	height: 90%;
	padding-top: 3%;
	margin: 3% auto;
	-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);
	text-align: center;
	border-radius: 10px;
	background-color: rgba(255,255,255,.5);
}

#business .bubble h2 {
	width: 96%;
	margin: 20px auto;
	text-align: center;
}

#business .bubble h2 img {
	width: 100%;
	max-width: 500px;
	height: auto;
	text-align: center;
}

#business .bubble h3 {
	font-size: 1.5em;
	font-weight: 100;
	line-height: 1.8;
	margin: 0 auto 15px;
	text-align: center;
	color: #fff;
	text-shadow: 0 3px 3px rgba(0, 0, 0, .6);
}

#business .bubble h3 span {
	font-size: 1em;
	display: block;
	margin: 0 auto 15px;
}

#business .bubble p {
	line-height: 1.8;
	width: 90%;
	margin: 0 auto 30px;
}

#business .bubble .moreLink {
	width: 100%;
	margin: 30px auto;
	text-align: center;
}

#business .bubble .moreLink img {
	width: 100%;
	max-width: 150px;
	height: auto;
	text-align: center;
}


/*=================================================================
	.slideNav
=================================================================*/

.slideNav {
	position: relative;
	width: 96%;
	max-width: 720px;
	margin: 0 auto;
	padding: 30px 0;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	text-align: center;
	background-size: contain;
}

.slideNav .slideNavPn {
	position: relative;
	width: 100%;
	height: 500px;
	margin: auto;
}


.slideNav a {
	position: absolute;
	display: inline-block;
	overflow: hidden;
	width: 28%;
	max-width: 150px;
	height: auto;
	margin: 1% 2%;
}

.slideNav span.slidePn1 {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 70%;
	min-width: 80px;
	max-width: 220px;
	height: 100px;
	margin: auto;
	padding: 1% 0 3%;
}

.slideNav a.slidePn2 {
	top: 15%;
	left: 5%;
}
.slideNav a.slidePn3 {
	top: 5%;
	right: 0;
	left: 0;
	margin: auto;
}
.slideNav a.slidePn4 {
	top: 15%;
	right: 5%;
}
.slideNav a.slidePn5 {
	bottom: 10%;
	left: 10%;
}
.slideNav a.slidePn6 {
	right: 10%;
	bottom: 10%;
}

.slideNav span.slidePn1 img,
.slideNav a img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 400px) {
	.slideNav .slideNavPn {
		height: 370px;
	}
	.slideNav span.slidePn1 {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 70%;
		min-width: 80px;
		max-width: 200px;
		height: 80px;
		margin: auto;
		padding: 1% 0 3%;
	}

}
/*=================================================================
	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;
}