@charset "utf-8";
/* CSS Document */
/* -------------------------------------------------------------------------

スライダー

---------------------------------------------------------------------------*/

/*　メインビジュアル
---------------------------------------------------------------------------*/
#mainVisualWrap {
	overflow: hidden;
	width: 980px;
	height: 240px;
	margin: 10px auto;
	background-color: #eee;
}
#mainVisual .comp{
	padding: 0;
	width: 980px;
	height: 240px;
	box-sizing: border-box;
}
#mainVisual .comp a{
	width: 100%;
	height: 100%;
}
#mainVisual .comp img {
	width: 100%;
	height: auto;
	max-width: 980px;
	margin: 0;
}
#mainVisual .comp{
    position: relative;
}
#mainVisual .caption {
    box-sizing: border-box;
    width: 100%;
	max-width: 980px;
	font-size: 88%;
    text-align: left;
    bottom: 0;
	left: 0;
    margin: 0;
    padding: 0 8px;
    color: #211100;
    background: rgba(255,255,255,0.4); 
    position: absolute;
}

@media screen and (max-width: 767px) {
	#mainVisualWrap {
		width: 100%;
		height: auto;
		margin: 0 auto;
		}
	#mainVisual .comp{
		padding: 0;
		width: 100%;
		height: auto;
		max-height: 160px;
		box-sizing: border-box;
		}
	#mainVisual .comp img {
		width: 100%;
		height: auto;
		max-width: 100%;
		margin: 0;
}
}


/*　スライドバナー
---------------------------------------------------------------------------*/
/*　バナー枠　*/
.slidebanWrap {
	overflow: hidden;
	margin: 0 auto 10px;
	width: 980px;
}

@media screen and (max-width: 767px) {
	.slidebanWrap {
		overflow: hidden;
		margin: 0 auto 10px;
		width: 100%;
		border: #D0D0D0 2px solid;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
}

h2.slideban_ttl {
	display:block;
	margin: 0;
	padding: 2px 0 0;
	height: 32px;
	overflow: auto;
	font-size: 100%;
	background-color: #835b3b;
	color: #fff;
	text-align: center;
	}
h2.slideban_ttl.c1 { color: #211100; background-color: #EDCCE1; }
h2.slideban_ttl.c2 { color: #211100; background-color: #D8D6F5; }
h2.slideban_ttl.c3 {color: #211100;  background-color: #BAD5B8; }

@media screen and (max-width: 767px) {
	h2.slideban_ttl {
		padding: 6px 0 0;
		height: 40px;
		font-size: 113%;
	}
}

#slideban1,
#slideban2,
#slideban3,
#slideban4,
#slideban5,
#slideban6 {
	padding: 0;
	box-sizing: border-box;
	width: 988px;
}
#slideban1 .comp,
#slideban2 .comp,
#slideban3 .comp,
#slideban4 .comp,
#slideban5 .comp,
#slideban6 .comp {
	padding: 0;
	box-sizing: border-box;
	text-align: center;
}
#slideban1 .comp img,
#slideban2 .comp img,
#slideban3 .comp img,
#slideban4 .comp img,
#slideban5 .comp img,
#slideban6 .comp img {
	width: 100%;
	height: auto;
	max-width: 240px;
	margin: 0;
}

@media screen and (max-width: 767px) {
	.slidebanWrap {	width: 100%; height: auto;}
	#slideban1,
	#slideban2,
	#slideban3,
	#slideban4,
	#slideban5,
	#slideban6	{
		padding: 0;
		width: 100%;
		}
	#slideban1 .comp img,
	#slideban2 .comp img,
	#slideban3 .comp img,
	#slideban4 .comp img,
	#slideban5 .comp img,
	#slideban6 .comp img {
		width: 100%;
		height: auto;
		max-width: 100%;
		margin: 0;
		}
}

#slideban1 .comp,
#slideban2 .comp,
#slideban3 .comp,
#slideban4 .comp,
#slideban5 .comp,
#slideban6 .comp {
    position: relative;
}
.bancaption {
    box-sizing: border-box;
}

.bancaption { 
    width: 100%;
	max-width: 240px;
	font-size: 88%;
    text-align: center;
    bottom: 0;
    margin: 0;
    padding:0;
    color: #211100;
    background: #F2DCCA; 
    position: absolute;
}
.bancaption span { 
	font-size: 75%;
	border: #000 1px solid;
	border-radius: 16px;
	margin-left: 8px;
	padding: 0 4px;
}


@media screen and (max-width: 767px) {
	.bancaption { width: 100%; max-width: 100%; font-size: 100%; padding:6px 0; }
}


/*　スライドショー用slickのカスタマイズ　*/
/* loading */
.slick-loading .slick-list{
	background: #FFF url("../img/ajax-loader.gif") center center no-repeat;
}
/* Dots */
.slick-dots{
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	width: 100%;
	list-style: none;
	text-align: center;
	height: 1.8em;
	overflow: hidden;
	margin-top: 10px;
}
.slick-dots li{
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0 5px;
}
.slick-dots li a{
	display: block;
	width: 0.7em;
	height: 0.7em;
	padding: 0;
	outline: none;
	text-indent: -9999em;
	line-height: 1;
	background-color: #000;
	opacity: 0.3;
	border-radius: 50%;
	border: 2px solid transparent!important;
}
.slick-dots li a:focus { border-color: #FFF!important;}
.slick-dots li a:hover,
.slick-dots li.slick-active a{ background-color: #FF8400; opacity: 1;}
.slick-dots li.stopBtn a {
	position: relative;
	width: 30px!important;
	height: 1.1em;
	border-radius: 0;
}
.slick-dots li.stopBtn a:before,
.slick-dots li.stopBtn a:after {
	position: absolute;
	content: "";
	display: block;
	width: 0;
	height: 0;
	top: 4px;
	left: 12px;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent #FFF;
}
.is-play .slick-dots li.stopBtn a:before,
.is-play .slick-dots li.stopBtn a:after {
	width: 2px;
	height: 8px;
	top: 4px;
	left: 12px;
	background: #FFF;
	border: none;
}
.is-play .slick-dots li.stopBtn a:after { left: 16px;}


.slick-prev-main,
.slick-next-main {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
	z-index: 100;
	display: block;
	width: 24px;
	height: 48px;
	background: none; 
}
.slick-prev-main { left: 0;}
.slick-next-main { right: 0;}


@media screen and (max-width: 767px) {
	.slick-prev-main,
	.slick-next-main {
		width: auto;
		height: auto;
		}
}


.slick-prev,
.slick-next{
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform : translateY(-50%);
	transform : translateY(-50%);
	z-index: 100;
	display: block;
	width: 24px;
	height: 48px;
	background: none; 
}
.slick-prev { left: 0;}
.slick-next { right: 8px;}

@media screen and (max-width: 767px) {
	.slick-next { right: 0;}
}


/*　タブ切替のパーツ　*/
.tab-wrap .tab-list {
	display: flex;
	justify-content: space-around;
}
.tab-wrap .tab-list a {
	display: inline-block;
	flex: 1;
	position: relative;
	cursor: pointer;
	box-sizing: border-box;
	text-align: center;
}
.tab-wrap .tab-list a span { display: none;}
.tab-wrap .tab-list a:hover { background-color: #EEE;}
.tab-wrap .tab-list a.current { background-color: #CCC;}
.tab-wrap .tab-contents { display: none;}
.tab-wrap .tab-contents.current { display: block;}