.wrap .opening{
	position:fixed;
	z-index:31;
	width:100%;
	height:100%;
	left:0px;
	top:0px;
}
.wrap .opening p{
	position:absolute;
	width:33.33333333333%;
	background:#eee;
	height:100%;
	left:0px;
}
.wrap .opening p:nth-child(2){
	left:33.33333333333%;
}
.wrap .opening p:nth-child(3){
	left:66.66666666666%;
}
.wrap .section{
	position:fixed;
	width: 100%;
	height: 100%;
	background: #fff;
	left: 0px;
	top:100%;
	overflow: hidden;
	z-index:30;
	transition-duration:800ms;
	-webkit-transition-duration:800ms;
	-moz-transition-duration:800ms;
	-ms-transition-duration:800ms;
	-o-transition-duration:800ms;
	opacity:0;
}
.wrap .section.active{
	top:0px;
	opacity:1;
}
.wrap .section.closed{
	top:-100%;
}
.wrap .transion{
	position:fixed;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:100;
	background:rgba(255,0,0,0);
	transition-duration:600ms;
	-webkit-transition-duration:600ms;
}
.wrap .transion svg{
	position:fixed;
	left:50%;
	top:50%;
	width:100%;
	height:100%;
	z-index:100;
	display:block;
}
.wrap .transion.active{
	background:rgba(255,0,0,0.7);
}
.wrap .section .text{
	position: absolute;
	z-index:1;
	top:50%;
	margin-top: -144px;
	left:5%;
	width: 90%;
}
.wrap .section.sec00 .text {
	margin-top: -80px;
}
.wrap .section .text h2{
	font-size: 45px;
	font-weight: bold;
	display: inline-block;
	position: relative;
	line-height: 1.4em;
	color: #df0011;
	text-shadow: 0px 0px 2px #fff;
}
.wrap .section .text h2 span{
	position: absolute;
	line-height: 1em;
	right: -40px;
	top: 5%;
	display: block;
	font-size: 20px;
}

.wrap .section .text p {
	font-size: 16px;
}
.wrap .section .video_area{
	position:absolute;
	left:0;
	top:0px;
	min-width: 100%;
	width: auto;
	height:50%;
	z-index: 1;
}

.wrap .section .v_text{
	padding:10px;
	position:absolute;
	height:50%;
	width:100%;
	bottom:0px;
	left:0px;
	color:#fff;
}
.wrap .section .v_text h3{
	padding: 10px 10px 0;
	font-size:16px;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:800ms;
	-webkit-transition-duration:800ms;
	-moz-transition-duration:800ms;
	-ms-transition-duration:800ms;
	-o-transition-duration:800ms;
}
.wrap .section.active .v_text h3,
.wrap .section.closed .v_text h3{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section .v_text p{
	padding:10px;
	font-size: 12px;
	line-height:1.8em;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
	transition-duration:800ms;
	-webkit-transition-duration:800ms;
	-moz-transition-duration:800ms;
	-ms-transition-duration:800ms;
	-o-transition-duration:800ms;
	transition-delay:500ms;
	-webkit-transition-delay:500ms;
	-moz-transition-delay:500ms;
	-ms-transition-delay:500ms;
	-o-transition-delay:500ms;
}
.wrap .section.active .v_text p,
.wrap .section.closed .v_text p{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}

/* sec00 ------------------------- */
.wrap .section.sec00{
	z-index:30;
}
.wrap .section.sec00 h3{
	line-height:2em;
	text-align:center;
}

/* sec01 ------------------------- */

.wrap .section.sec01{
	z-index:29;
}
/* sec02 ------------------------- */

.wrap .section.sec02{
	z-index:28;
	background:#333;
}
/* sec03 ------------------------- */

.wrap .section.sec03{
	z-index:27;
}
/* sec04 ------------------------- */

.wrap .section.sec04{
	z-index:26;
	background:#333;
}

/* sec05 ------------------------- */

.wrap .section.sec05{
	z-index:25;
}

/* sec06 ------------------------- */

.wrap .section.sec06{
	z-index:24;
	background:#333;
}

/* sec07 ------------------------- */

.wrap .section.sec07{
	z-index:23;
}

/* sec08 ------------------------- */

.wrap .section.sec08{
	z-index:22;
	background:#333;
}
/* sec09 ------------------------- */

.wrap .section.sec09{
	z-index:21;
}

/* sec010 ------------------------- */

.wrap .section.sec010{
	z-index:20;
	background:#333;
}

/* section sec011 ---------------- */

.wrap .section.sec011{
	z-index:18;
	background:none;
	transition-delay:1500ms;
	-webkit-transition-delay:1500ms;
	-moz-transition-delay:1500ms;
	-ms-transition-delay:1500ms;
	-o-transition-delay:1500ms;
}
.wrap .section.sec010.closed+.section.sec011{
	z-index:201;
}
.wrap .section.sec011.active{
	transition-delay:0ms;
	-webkit-transition-delay:0ms;
	-moz-transition-delay:0ms;
	-ms-transition-delay:0ms;
	-o-transition-delay:0ms;
}
.wrap .section.sec011 .bg>div{
	background:#f8f8f8;
	border-right: solid 1px #ccc;
	position:absolute;
	width:33.33333333333333%;
	height:0%;
	left:0px;
	top:0px;
	transition-duration:800ms;
	-webkit-transition-duration:800ms;
}
.wrap .section.sec011.active .bg>div{
	height:100%;
}
.wrap .section.sec011 .bg>div a{
	position:absolute;
	left:0px;
	margin-top:-75px;
	height:150px;
	text-align:center;
	width:100%;
	top:50%;
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;

	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;

	transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-moz-transition-delay:600ms;
	-ms-transition-delay:600ms;
	-o-transition-delay:600ms;

}
.wrap .section.sec011.active .bg>div a{
	opacity:1;
	-webkit-opacity:1;
	-moz-opacity:1;
	-ms-opacity:1;
	-o-opacity:1;
}
.wrap .section.sec011 .bg>div a .title{
	font-size:10px;
	height:50px;
	line-height:50px;
}
.wrap .section.sec011 .bg>div:nth-child(1) a .title{
	line-height:25px;
}
.wrap .section.sec011 .bg>div a h3{
	font-size:16px;
	line-height:25px;
	height:50px;
	margin-bottom:30px;
}
.wrap .section.sec011 .bg>div a .sign{
	border-radius:50%;
	width: 40px;
	height: 40px;
	margin:30px auto;
	border: solid 1px #555;
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(/img/about-us/brand/sp/arrow_black.png);
}
.wrap .section.sec011 .bg>div:nth-child(1){
	left:0%;
	transition-delay:600ms;
}
.wrap .section.sec011 .bg>div:nth-child(2){
	left:33.333333333%;
	transition-delay:450ms;
}
.wrap .section.sec011 .bg>div:nth-child(3){
	left:66.666666666%;
	transition-delay:300ms;
}
.wrap .section.sec011 .text{
	position:absolute;
	left:50%;
	width:400px;
	text-align:center;
	margin-left:-200px;
	top:30%;
	opacity:0;
	-webkit-opacity:0;
	transition-duration:600ms;
	-wekit-transition-duration:600ms;

	transition-delay:400ms;
	-webkit-transition-delay:400ms;
}
.wrap .section.sec011 .text a{
	padding-right:50px;
	background-image:url(/img/about-us/brand/sp/icon_window.png);
	background-repeat:no-repeat;
	background-position:right center;
}
.wrap .section.sec011.active .text{
	opacity:1;
	-webkit-opacity:1;
}
.wrap .section.sec011 .text a{
	font-size:24px;
	border-bottom:solid 2px #333;
}
.wrap .section.sec011 .top{
	position:absolute;
	left:50%;
	margin-left:-40px;
	bottom:50px;
	opacity:0;
	-webkit-opacity:0;
	pointer-events:none;
	width:80px;
	text-align:center;

	transition-duration:600ms;
	-webkit-transition-duration:600ms;
	-moz-transition-duration:600ms;
	-ms-transition-duration:600ms;
	-o-transition-duration:600ms;

	transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-moz-transition-delay:800ms;
	-ms-transition-delay:800ms;
	-o-transition-delay:800ms;

}
.wrap .section.sec011.active .top{
	opacity:1;
	-webkit-opacity:1;
	pointer-events:auto;
}
.wrap .section.sec011.active .top a{
	display:inline-block;
	height:50px;
}
.wrap .section.sec011.active .top a:after{
	content:"";
	position:absolute;
	
	width:20px;
	height:20px;
	border-top:solid 1px #333;
	border-left:solid 1px #333;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	left: 50%;
	margin-left: -15px;
	top: 30px;
}


.next_btn{
	position:fixed;
	display:block;
	width:40px;
	height:40px;
	background-color:rgba(61,160,191,1);
	color:#fff;
	bottom:20px;
	text-align:center;
	line-height:40px;
	font-size:16px;
	z-index:1000;
	border-radius:50%;
	right:10px;
	margin-left:-20px;
	background-image:url(/img/about-us/brand/sp/arrow_write.png);
	background-size:60%;
	background-position:center;
	background-repeat:no-repeat;
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	opacity:0;
	-webkit-opacity:0;
	-moz-opacity:0;
	-ms-opacity:0;
	-o-opacity:0;
}
.next_btn.active:before{
	content:"";
	position:absolute;
	left:0px;
	top:0px;
	width:40px;
	height:40px;
	border-radius:50%;
	box-shadow:0px 0px 4px 3px #3ac;
	animation:next_btn_hover 600ms;
}
@keyframes next_btn_hover{

	0%{
		width:40px;
		height:40px;
		left:0px;
		top:0px;
		opacity:1;
	}
	100%{
		width:240px;
		height:240px;
		left:-100px;
		top:-100px;
		opacity:0;
	}
}

@media screen and (max-height:660px){
	.wrap .section .text{
		left:3%;
	}
	.wrap .section .text p{
		font-size: 15px;
	}
	.wrap .section .v_text{
		padding:5px;
	}
	.wrap .section .v_text h3{
		font-size:16px;
		padding:5px;
		padding-top: 0;
		line-height: 1.375;
	}
	.wrap .section .v_text p{
		padding:5px;
		font-size:12px;
		line-height: 1.5;
	}
}