@charset "utf-8";

/*=====================================================
COMMON-LAYOUT
======================================================*/
div#header_wrap{
	position: absolute;
	top:0;
}

.main {
	position: relative;
	width:100%;
	line-height:0;
	margin: 0 auto;
	z-index: 9;
}

.btn {
	font-size: 0;
	margin: 0;
	letter-spacing: -10px;
}

.btn li {
	width: 50%;
	display: inline-block;
	letter-spacing: normal;
	
}

.i_btn {
	font-size: 0;
	margin: 0 -1.4%;
	letter-spacing: -10px;
	text-align: center;
}

.i_btn li {
	width: 40%;
    display: inline-block;
    padding: 20px 1.4%;
    box-sizing: border-box;
    letter-spacing: normal;
}




#container h2 {
	margin-bottom: 40px;
	text-align: center;
}

#container h4 {
	margin-bottom: 70px;
	text-align: center;
	font-size: 18px;
	line-height: 2;
}


#container h3.cttl {
	padding-bottom: 15px;
	background: url(../images/about/cttl_bg.jpg) bottom left no-repeat;
	/*margin-bottom: -7px;*/
}


.img {
	position: relative;
}
.img02 {
	position: absolute;
	bottom:5.3%;
	left:32.813%;
	width: 67.1875%;
}
.img03 {
	position: absolute;
	bottom:0;
	left:0;
	width: 32.813%;
	z-index: 9;
}
.img04 {
	position: relative;
	width: 62.5%;
	z-index: -10;
	margin-top:-9%;
	margin-bottom:40px;
}


.txt {
	width: 60%;
	background: #efefef;
	padding: 4% 4% 4% 10%;
	font-size: 18px;
	line-height: 1.7;
	margin: -4% 0 60px auto;
}



.fade2 {
	position:relative;
}
/*.fade2 img {
	transition:all 0.5s linear;
}*/

.fade2 img.off{
	position:relative;
	z-index:1;
}

/*.fade2 a:hover img.off{
	opacity:0;
}

.fade2 a:hover img.on{
	opacity:1;
}*/

.fade2 img.on{
	position:absolute;
	top:0;
	left:0;
	z-index:2;
	opacity:0;
	transition:all 0.5s linear;
}
.fade2 img.on.act{
	opacity:1;
}




.main .scroll {
	position:absolute;
	width:5%;
	bottom:6%;
	left:47.5%;
	z-index:99;
}
.main .scroll a {
	display:block;
	width:100%;
	position:relative;
	text-align:center;
	animation: scr 1s both infinite alternate;
	-webkit-animation: scr 1s both infinite alternate;
}

@-webkit-keyframes scr {
  0% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
	 opacity: 0.6;
  }
  100% {
    /*-webkit-transform: translate3d(0, 4px, 0);
    transform: translate3d(0, 4px, 0);*/
	 opacity: 1;
  }
}
@keyframes scr {
  0% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
	 opacity: 0.6;
  }
  100% {
   -webkit-transform: translate3d(0, 4px, 0);
    transform: translate3d(0, 4px, 0);
	 opacity: 1;
  }
}


.slid_area {
	background: url(../images/about/time_bg.jpg);
	background-size: cover;
	position: relative;
	padding: 0 5%;
	overflow: hidden;
	margin-bottom: 50px;
}

.slider li {
	margin: 0;
}

.btn-prev, .btn-next {
    position: absolute;
    cursor: pointer;
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
	top:0;
    bottom: 0;
    z-index: 10;
	height: 100%;
	width: 5%;
	background: rgba(191,191,191,0.3);
	text-align: center;
	padding-top: 12%;
	box-sizing: border-box;
}
.btn-next {
    right: -5.5%;
}
.btn-prev {
    left: -5.5%;
}

.slick-dots {
	display: none!important;
}
.slick-dotted.slick-slider {
	margin-bottom: 0;
}


/*
#view {
	position:relative;
	width:100%;
	height:280px;
	margin:1px 0 2px;
	overflow:hidden;
}

#view #night{
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}


.pos_cap p{
	width: 100%;
	text-align: center;
}
.pos_cap img{
	position:absolute;
	top:3%;
	right: 50%;
	margin-right: -247px;

}

#view #night{
	position:absolute;
	top:0px;
	left:0px;
}

#view #night img {    
	max-width:1705px !important;
	height: auto;
}


#view #LhBtn{
	position:absolute;
	top:0px;
	left:0px;
}
#view #RhBtn{
	position:absolute;
	top:0px;
	left:0px;
}
#view #arrowLeft {
	position:absolute;
	top:90px;
	left: 2%!important;
	margin-top:-20px;
	cursor:pointer;
	text-align: left;
}
#view #arrowRight {
	position:absolute;
	top:90px;
	right:2%;
	margin-top:-20px;
	cursor:pointer;
	text-align: right;
}
*/
/*#view_s {
	position:relative;
	height:280px;
	width:100%;
	margin:1px 0 2px;
	overflow:hidden;
}
#view_s #night_s {
	position:absolute;
	top:0px;
	left:-220px;
	display:none;
}
#view_s #night_s img{
	height:auto;
}
#view_s #mark {
	position:absolute;
	width:50px;
}
#view_s #mark img{
	width:50px;
	height:auto;
}*/



/*div.view_wrap {
	max-width:1280px;
	height:280px;
	position:relative;
	margin:0 auto;
	overflow:hidden;
}
div.view_area {
	height:100%;
	width:100%;
	overflow: hidden;
}
div.view_area img {
	position:absolute;
	top:0px;
	max-width:auto;
	max-width:none;
}
.left_btn {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	cursor: pointer;
}
.left_btn:hover img {
	opacity:0.8; filter:alpha(opacity=80); -moz-opacity:0.8;
}
.right_btn {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 99;
	cursor: pointer;
}
.right_btn:hover img {
	opacity:0.8; filter:alpha(opacity=80); -moz-opacity:0.8;
}*/








@media screen and (max-width: 1000px){
	
}

@media screen and (max-width: 900px){

	.data {
		margin: 0 -10px;
	}

	.data li {
		margin-bottom: 20px;
		padding: 0 10px;
	}
	.data .d1 .vpc{
		margin-top: 20px;
	}
}

@media screen and (max-width: 767px){
	
	#container h2 {
		margin-bottom: 30px;
	}

	#container h4 {
		margin-bottom: 40px;
		font-size: 16px;
		line-height: 1.7;
	}
	
/*	.img02 {
		position: absolute;
		bottom:0;
		left:60%;
		width: 40%;
	}
	.img03 {
		position: absolute;
		bottom:-10.5%;
		left:0;
		width: 60%;
	}
*/

	.txt {
		width: 100%;
		background: #efefef;
		padding: 13% 4% 4% 4%;
		font-size: 15px;
		line-height: 2;
		margin: 0 auto 40px;
		box-sizing: border-box;
	}

	.i_btn {
		font-size: 0;
		margin: 0 auto;
	}

	.i_btn li {
		width: 100%;
		padding: 5px 0;
		text-align: center;
	}
	
	
	.slid_area {
		padding: 0 10%;
	}

	.btn-prev, .btn-next {
		 font-size: 20px;
		width: 10%;
		padding-top: 30%;
	}
	.btn-next {
		 right: -12.5%;
	}
	.btn-prev {
		 left: -12.5%;
	}

.main .scroll {
	width:12%;
	bottom:5%;
	left:44%;
	}

	.img01 {
		position: relative;
		width:100%;
		text-align:center;
		float:none;
	}


	.img02 {
		position: relative;
		width:100%;
		text-align:center;
		margin:-28% 0 0 0;
		float:none;
		left:0;
		bottom:0;
	}

	.img03 {
		position: relative;
		width:100%;
		text-align:center;
		margin:0;
		float:none;
	}
	.img04 {
		width:100%;
	}
}


@media screen and (max-width: 600px){
	/*#view {
		display:none;
	}
	#view_s {
		display:block;
	}
	#view2 {
		display:none;
	}
	#view_s2 {
		display:block;
	}
	
	#view #arrowLeft {
		left:8%!important;	
	}*/
}	

@media screen and (max-width: 350px){
	
}



@media print {
	.slid_area .slick-list .slick-track .slick-slide {
		width: 8%!important;
		max-width: 8%!important;
		float: left;
	}
}