@charset "UTF-8";

/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
	position: relative;
	margin: 0 auto;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	display: block;
}

/** THEME
===================================*/

/*.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border:  5px solid #fff;
	left: -5px;
	background: #fff;*/
	
	/*fix other elements on the page moving (on Chrome)*/
/*	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    	-ms-transform: translatez(0);
    	-o-transform: translatez(0);
    	transform: translatez(0);
}*/

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: -30px;
	width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
	min-height: 50px;
	background: url(../images/bx_loader.gif) center center no-repeat #fff;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
	text-align: center;
	font-size: .85em;
	font-family: Arial;
	font-weight: bold;
	color: #666;
	padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background: #666;
	text-indent: -9999px;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #000;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
	left: 10px;
	background: url(../images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
	right: 10px;
	background: url(../images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
	background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
	background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -16px;
	outline: 0;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
	display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
	text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
	display: block;
	text-indent: -9999px;
	width: 10px;
	height: 11px;
	outline: 0;
	background: url(../images/controls.png) -86px -11px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
	background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
	display: block;
	text-indent: -9999px;
	width: 9px;
	height: 11px;
	outline: 0;
	background: url(../images/controls.png) -86px -44px no-repeat;
	margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
	background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
	text-align: left;
	width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
	right: 0;
	width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #666\9;
	background: rgba(80, 80, 80, 0.75);
	width: 100%;
}

.bx-wrapper .bx-caption span {
	color: #fff;
	font-family: Arial;
	display: block;
	font-size: .85em;
	padding: 10px;
}


/*カスタマイズ用追記CSS Start*/
 div.slider{
	width:100%;
	display:block;
	margin:40px auto;
 	min-width:870px;
}
 
/*-------------------------
Main Slider
--------------------------*/
div.mainSlider{
	float:right;
	width:68%;
}
div.mainSlider ul.bxslider01{
	margin:0;
	padding:0;
	min-width:600px;
}
div.mainSlider ul.bxslider01 li {
	display:block;
	width:100%;/*メインスライダーの横幅*/
   /*  height:400px; *//*メインスライダーの縦幅*/
}
div.mainSlider ul.bxslider01 li img{
	width:90%;
	margin:10px auto;
}
div.mainSlider ul.bxslider01 li{
	position:relative;
}

/* item data */
div.mainSlider ul.bxslider01 li div.data{
	display:none;
}


 /*-------------------------
Vertical Thumbnail Pager
--------------------------*/
div.verticalThumbnails {
	display: block;
	float: left;
	margin: 0 auto;
	position: relative;
	width: 10%;
	min-width:100px;
	height: 100%;
	/* background-color:blue; */
}
div.asVertical p#PrevIcon a{
	background: url("../images/icon-arrow-prev01.jpg") no-repeat scroll left center rgba(0, 0, 0, 0);
	color: #fff;
	display: block;
	position: absolute;
	text-indent: -9999px;
	height: 13px;
	width: 19px;
	left: 47%;
	top: -20px;
}
div.asVertical p#NextIcon a{
	background: url("../images/icon-arrow-next01.jpg") no-repeat scroll left center rgba(0, 0, 0, 0);
	color: #fff;
	display: block;
	position: absolute;
	text-indent: -9999px;
	bottom:-20px;
	left: 47%;
	height: 13px;
	width: 19px;
	z-index: 1000000000;
}


div.verticalThumbnails ul.bxslider02{
	margin:0;
	padding:0;
}
div.verticalThumbnails ul.bxslider02 li a {
    display:block;
    /* width:80px; *//*サムネイルの横幅*/
    margin:0 auto;
}
 
div.verticalThumbnails ul.bxslider02 li a img{
    width:100%;/*サムネイルの横幅*/
    /* height:100%; *//*サムネイルの縦幅*/
}

 /*-------------------------
Detail Thumbnail Pager
--------------------------*/
div.detailThumbnails {
	display: block;
	margin: 0 auto;
	height:120px;
	position:relative;
	min-width: 870px;	
}
div.detailThumbnails ul{
	float:right;
	width:70%;
	margin:0;
	padding:0;
	min-width:600px;
	text-align:center;
}
div.detailThumbnails ul li{
	display:inline;
	margin-right:5px;
	margin-bottom:5px;
}

div.detailThumbnails ul img{
	width:90px;
	cursor:pointer;
}
div.detailThumbnails ul li:hover{
	border-bottom:2px solid #ddd;
}


 /*-------------------------
Data Continer
--------------------------*/
div.data-container{
	display:block;
	width:20%;
	min-height:1px;
	float:left;
	font-family:"メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:8pt;
	min-width:170px;
}
div.data-container .data-desc{
	background-color:#efefef;
	padding:0.8em;
}
div.data-container .data-comment{
	padding:0.8em;
	line-height:1.8;
}
div.data-container div.content{
	margin:0.5em;
}

div.data-container .data-info{
	padding-top:1em;
	text-align:center;
}


/*-------------------------
Prev/Next
--------------------------*/
div.prev_item{
    display:block;
    position:absolute;
    top:50%;
    left:10px;
	background-image:url(../../images/prev.png);
	z-index:10000;
}
div.next_item{
    display:block;
    position:absolute;
    top:50%;
    right:10px;
	background-image:url(../../images/next.png);
	z-index:10000;
}
div.control a{
	display:block;
	width:27px;
    height:51px;
    background-position:0 0;
    background-repeat:no-repeat;
    text-indent:-10000px;
    z-index:99999999;
    
}


 /*-------------------------
ClearFix
--------------------------*/
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}


/* MEDIA QUERY*/
@media screen and (max-width: 640px) {
	html{
		height:100%;
	}
	body{
		margin:0;
		height:100%;
	}
	*{
		-webkit-text-size-adjust: 100%; 
		font-family:  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
	}
	div.slider{
		width:100%;
		min-width:inherit;
		margin:0;
		padding-top:10px;
	}
	div.slider div.control{
		background-repeat:no-repeat;
		top:20px;
	}
	div.slider div.control a{
		width:15px;
	}
	div.slider div.prev_item{
		left:5px;
		background-image:url(../../images/prev-sp.png);
	}
	div.slider div.next_item{
		right:5px;
		background-image:url(../../images/next-sp.png);
	}
	
	div.mainSlider{
		float:right;
		width:100%;
	}
	
	div.data-container{
		width:auto;
		margin:0 30px;
		margin-bottom: 20px;
		/* padding-top:10px; */
		float:none;
		line-height:1.2em;
	}
	div.data-container div.data-desc{
		padding:0;
		width:53%;
		float:left;
	}
	div.data-container div.data-desc div.content{
		font-family:  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
	}
	.data-comment{
		display:none;
	}
	div.data-container div.data-info{
		width:47%;
		float:left;
		text-align:center;
	}
	div.data-container div.data-info img{
		width:90%;
		max-width:150px;
	}
	div.data-container:after {
	  content: ".";  /* 新しい要素を作る */
	  display: block;  /* ブロックレベル要素に */
	  clear: both;
	  height: 0;
	  visibility: hidden;
	}
	div.data-container {
	  min-height: 1px;
	}
	* html div.data-container{
	  height: 1px;
	  /*\*//*/
	  height: auto;
	  overflow: hidden;
	  /**/
	}
	div.verticalThumbnails{
		float:none;
		width:100%;
		min-width:inherit;
	}
	div.verticalThumbnails .bx-wrapper{
	}
	
	div.asHorizontal p#PrevIcon{
		background: url("../images/icon-arrow-prev01-h.jpg") no-repeat scroll left center rgba(0, 0, 0, 0);
		color: #fff;
		display: block;
		position: absolute;
		text-indent: -9999px;
		height: 19px;
		width: 12px;
		left:0;
		top: 0;
		z-index: 1000000000;
	}
	div.asHorizontal p#NextIcon{
		background: url("../images/icon-arrow-next01-h.jpg") no-repeat scroll left center rgba(0, 0, 0, 0);
		color: #fff;
		display: block;
		position: absolute;
		text-indent: -9999px;
		right:0;
		top: 0;
		height: 19px;
		width: 12px;
		z-index: 1000000000;
	}
	div.asHorizontal p#PrevIcon a{
		display:block;
	}
	div.asHorizontal p#NextIcon a{
		display:block;
	}

	div.verticalThumbnails ul.bxslider02 li a{
		width:auto;
		height:auto;
	}
	
	div.detailThumbnails{
		width:100%;
		float:right;
		min-width:inherit;
	}
	div.detailThumbnails ul{
		float:none;
		min-width:inherit;
		width:auto;
	}
	div.detailThumbnails ul li{
		margin-right:0;
	}
}