.bx-wrapper{margin:0 auto;}


.bx-viewport{
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 307px;
}

.bxslider{
	width: 100%;
	position: relative;
	transition-duration: 0s;
	transform: translate3d(-1920px, 0px, 0px);
}

.bxslider li{
	float:left;
	list-style: none;
	position: relative;
	width:1000px;
}
.bxslider li img{
	box-shadow:2px 2px 3px rgba(0,0,0,0.2);
}



/******************/
/* 設定 */
#keyimg {
  min-width: 100%;
  max-width:100%;
  overflow: hidden; //横スクロールさせないようにする
}

#keyimg .bx-viewport {
  background: transparent !important;
  border: 0;
  /*overflow: visible !important; //両サイドが表示される*/
  height: 418px !important;
  //z-index: 1; //スマホやタブレットでスワイプできないときに指定
}



/* コントローラー */
.bx-controls {
    /* position: absolute; */
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0%;
    margin-left: 0px;
}


.bx-controls-direction {
max-width:100%;
min-width:500px;
top:0;
position:absolute;
}

.bx-controls-direction a {
position:absolute;
height:408px;
display:block;
z-index:9999;
transition: 0.5s;
top:228px;
}


a.bx-prev {left:-500px;}
a.bx-next {right:-1200px;}


/******************/
/* bx-pager *******/

.bx-pager {
text-align:center;
clear:both;
display:block;
/*position:relative;*/
top:645px;
}


.bx-pager-item {
	line-height:1;
	height:15px;
	width:15px;
	background:#000;
	overflow:hidden;
	display:inline-block;
	margin:10px 10px 0 2px;
}

.bx-pager-item a {background-color:#ccc; display:block;}
.bx-pager-item a {padding-top:50px; display:block;}
.bx-pager-item a.active {opacity:0.5;}
.bx-pager-item a:hover {opacity:0.3;}


/* 装飾 */
/*****/
#keyimg .bx-viewport {
	height: auto !important;
}


.result{
	padding:30px;
	margin: 30px;
	border: 1px solid #F1F1F1;
	font-size: 12px;
}
.result span{display: block; margin-top: 1em;}
.result p{
	margin-bottom:1em;
	font-weight:bold;
	font-size: 14px;
}
.result .slide{width: 300px !important; position: static !important; float:none !important;}

/*****/
@media screen and (max-width:1024px) {
		#keyimg {
		  min-width: 100%;
		  max-width:100%;
		  overflow: hidden; //横スクロールさせないようにする
		}
		
		a.bx-prev {left:0; text-align:right;}
		a.bx-next {right:0; text-align:left;}
	
		.bx-controls-direction {
			max-width:0;
			min-width:0;
		}

	

}

@media screen and (max-width:500px) {
	#keyimg {
	  min-width:100%;
	}
	
	a.bx-prev {left:0; text-align:right;}
	a.bx-next {right:0; text-align:left;}
	
	.bx-controls {
		width: 100%;
		left: 0;
		margin-left: 0;
	}
	
	
	.bx-controls-direction {
		max-width:0;
		min-width:0;
	}
	
	.bx-pager {
		top: 198px;
	}
	
	.bx-pager-item {
		height: 13px;
		width: 13px;
	}


	#keyimg .bx-viewport {
		height: 400px !important;
	}
}

@media screen and (max-width:500px) {
	#keyimg .bx-viewport {
		height: 370px !important;
	}
}
@media screen and (max-width:450px) {
	#keyimg .bx-viewport {
		height: 330px !important;
	}
}
@media screen and (max-width:415px) {
	#keyimg .bx-viewport {
		height: 310px !important;
	}
}
@media screen and (max-width:380px) {
	#keyimg .bx-viewport {
		height: 280px !important;
	}
}
@media screen and (max-width:360px) {
	#keyimg .bx-viewport {
		height: 270px !important;
	}
}
@media screen and (max-width:330px) {
	#keyimg .bx-viewport {
		height: 240px !important;
	}
}