/*===============================================
●style.css 画面の横幅が501px以上
===============================================*/
@media screen and (min-width: 501px) {

	/* スライドショー */
	#slider {
		overflow: hidden;
		position: relative;
		width: 100%;
		z-index: 10;
		padding: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 20px;
		margin-left: 0px;
	}

	#sliderInner {
		position: relative;
		left: 50%;
		width: 2100px;
		margin-left: -1050px;
		padding: 0px;
		margin-top: 0px;
	}

	#slider #sliderInner ul {
		height: 425px;
		margin: 0px;
		padding: 0px;
	}

	#sliderInner li {
		width: 700px;
		height: 425px;
	}

	#slideFilterL,
	#slideFilterR {
		position: absolute;
		top: 0;
		width: 697px;
		height: 425px;
		opacity: 0.7;
		xbackground: #c1a88b;
		background: #fff;
	}

	#slideFilterL {
		left: 0;
	}

	#slideFilterR {
		right: 0;
	}

	.bx-wrapper {
		margin: 0 auto;
		position: relative;
	}

	.bx-wrapper .bx-pager {
		margin: 0 auto;
		width: 700px;
		background: #fff;
	}

	/* コントローラー */
	.bx-wrapper .bx-prev {
		left: 655px;
		background: url('images/controls6.png') no-repeat 0 0px;
		opacity: 0.5;
		filter: alpha(opacity=5);
	}

	.bx-wrapper .bx-next {
		right: 655px;
		background: url('images/controls6.png') no-repeat -60px 0px;
		opacity: 0.5;
		filter: alpha(opacity=5);
	}

	.bx-wrapper .bx-prev:hover {
		background-position: 0 0;
		opacity: 1.0;
		filter: alpha(opacity=10);
	}

	.bx-wrapper .bx-next:hover {
		background-position: -60px 0;
		opacity: 1.0;
		filter: alpha(opacity=10);
	}

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

	/* ページャー */
	.bx-wrapper .bx-pager {
		padding-top: 20px;
		text-align: center;
		font-size: .85em;
		font-family: Arial;
		font-weight: bold;
		color: #c1a88b;
	}

	.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 {
		display: block;
		width: 10px;
		height: 10px;
		margin: 0 5px;
		outline: 0;
		text-indent: -9999px;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		;
		background: #ccc;
	}

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

}



/*===============================================
●sp.css  画面の横幅が500pxまで
===============================================*/
@media screen and (max-width:500px) {

	/* スライドショー */
	#slider {
		overflow: hidden;
		position: relative;
		width: 100%;
		z-index: 10;
		padding: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
	}

	#sliderInner {
		position: relative;
		left: 35%;
		width: 310%;
		margin-left: -140%;
		padding: 0px;
		margin-top: 0px;
	}

	#slider #sliderInner ul {
		margin: 0px;
		padding: 0px;
	}

	#sliderInner li {
		width: 100%;
	}

	#slideFilterL,
	#slideFilterR {
		display: none;
	}

	.bx-wrapper {
		margin: 0 auto;
		position: relative;
	}

	.bx-wrapper .bx-pager {
		margin: 0 auto;
		width: 90%;
		background: #fff;
	}

	/* コントローラー */
	.bx-wrapper .bx-prev {
		display: none;
		left: 32%;
		background: url('images/controls-sp.png') no-repeat 0 0px;
	}

	.bx-wrapper .bx-next {
		display: none;
		right: 32%;
		background: url('images/controls-sp.png') no-repeat -30px 0px;
	}

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

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

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

	/* ページャー */
	.bx-wrapper .bx-pager {
		margin-top: 5px;
		text-align: center;
		font-size: .85em;
		font-family: Arial;
		font-weight: bold;
		color: #c1a88b;
	}

	.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 {
		display: block;
		width: 7px;
		height: 7px;
		margin: 0 5px;
		outline: 0;
		text-indent: -9999px;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		;
		background: #ccc;
	}

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

}