@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++

	for jquery.grslider.js

++++++++++++++++++++++++++++++++++++++++ */

/* ----------------------------------------
	.grSliderWrap - スライダーエリア全体
---------------------------------------- */

.grSliderWrap {
	position: relative;
}

.grSliderContents {
	overflow: hidden;
	position: relative;
}


/* ----------------------------------------
	.grSlider - スライダー要素
---------------------------------------- */

.grSlider {
	position: relative;
}
.grSlider:after {
	content: '';
	display: block;
	clear: both;
}

.grSlider {
	box-sizing: content-box !important;
	white-space: nowrap !important;
}
.grSlider>* {
	display: inline-block;
	width: 100%;
	white-space: normal;
}

.grSlider .grSliderEl {
	float: left;
}

.grSliderR .grSliderEl {
	float: right;
}

.grSliderFade .grSliderEl {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.grSliderActive {
	z-index: 10;
}

.grSliderEmpty {
	opacity: 0 !important;
	visibility: hidden !important;
}


/* ----------------------------------------
	 .grSliderPrev, .grSliderNext - 前後ボタン
	 .grSliderNav - スライダーナビ
---------------------------------------- */

.grSliderPrev,
.grSliderNext {
	display: block;
	position: absolute;
	top: -30px;
	z-index: 100;
	width: 30px;
	height: 30px;
	text-indent: -20000px;
	background: 0 0 no-repeat;
}
.grSliderPrev:hover,
.grSliderNext:hover {
	opacity: .7;
}
.grSliderPrev {
	left: 0;
	background-image: url(../img/common/nextstage_btn_prev.png);
}
.grSliderNext {
	right: 0;
	background-image: url(../img/common/nextstage_btn_next.png);
}


/* ----------------------------------------
	 .grSliderNav - スライダーナビ
---------------------------------------- */

.grSliderNav {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
	width: 100%;
	height: 3px;
	padding: 11px 0 1px;
	background: #fff;
	text-align: center;
}
.grSliderNav>div, 
.grSliderNav ul {
	width: 100%;
	height: 100%;
}
.grSliderNav ul {
	width: 100%;
	height: 100%;
}
.grSliderNav li {
	display: inline-block;
	width: 60px;
	height: 100%;
	margin: 0 5px;
	vertical-align: top;
}
.grSliderNav a {
	display: block;
	width: 100%;
	height: 100%;
	background: #d2d2d2;
	text-indent: -20000px;
	cursor: pointer;
}
.grSliderNav a:hover {
	opacity: .7;
}

.grSliderNav .grSliderNavActive a {
	background: #1e1e1e;
	cursor: default;
}
.grSliderNav .grSliderNavActive a:hover {
	opacity: 1;
}