/* ***************************************************************************

トップバナー（スライダー）専用CSS

*************************************************************************** */

/* clearfix ----------- */
.clearfix:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.clearfix{
	display: inline-block;
	min-height:1%;  /* for IE 7*/
} 
/* IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}
/*----------------------*/

#Sliderbg{
	background-image: url(../img/topslider/design/bg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	padding-top: 5px;
	border-bottom: 1px dashed #ffabb4;
	margin-bottom: 15px;
}

#topSlider {
	width: 900px;
	height: 390px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	margin-top: 10px;
}

/* ローダー */
#Loader{
	width: 900px;
	height: 390px;
	background-image: url(../img/topslider/design/loading.jpg);
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
}
#Loader p{
	background-color: #ffabb4;
	height: 7px;
	width: 0%;
	margin-top: 360px;
}


#topSlider ul, #topSlider li{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#topSlider #largeBanner {
	margin-bottom: 10px;
	background-repeat: no-repeat;
	height: 300px;
	width: 900px;
	background-color: #fff;
}

/* サムネ */
#topSlider #smallBanner {
	width: 820px;
	height: 80px;
	overflow: hidden;
	position: absolute;
}

#topSlider ul {
	position: absolute;
}

#topSlider li {
	height: 75px;
	background-color: #FFF;
	border-radius:5px;
	background-repeat: no-repeat;
	cursor:pointer;
	display: block;
	float: left;
	margin-bottom: 10px;
}
#topSlider li a {
	border-radius:5px;
	height: 75px;
	display: block;
	border: 1px solid #DBDBDB;
}

/* セレクトbox */
#topSlider #selectBox{
	height: 70px;
	border-radius:5px;
	border: 3px solid #ec6d79;
	position: absolute;
	top: 310px;
	z-index: 10;
	text-align: center;
	cursor:pointer;
}
#topSlider #selectBox img{
	position: absolute;
	z-index: 9;
	top: -9px;
}

/* NEXTボタン */
#topSlider #prev,#topSlider #next{
	color: #FFF;
	height: 75px;
	width: 35px;
	cursor:pointer;
	position: absolute;
	z-index: 50;
	background-image: url(../img/topslider/design/btm.png);
	background-repeat: no-repeat;
	background-position: 10px top;
}

#topSlider #prev{
	left:4px;
}
#topSlider #next{
	right:4px;
}

.refrect{
	-webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}




/*---------------------------------------------------------
スマホ用スワイプスライダー（snapslider）
---------------------------------------------------------*/
#snapSlider{margin: 10px;opacity:0;}
#snapSlider .viewport {
	width: 100%;
	overflow: hidden;
	margin: 10px auto 5px;
	-webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */
   border: 1px solid #ccc;
}
#snapSlider .flipsnap li {float: left;}
#snapSlider .flipsnap li img {vertical-align: bottom;}
#snapSlider .controls p {
	width: 13px;
	height: 13px;
	background-color: #ffffff;
	text-align: center;
	line-height: 1em;
	cursor: pointer;
	margin: 1px;
	border: 1px solid #ffa1c1;
	float: left;
}
#snapSlider .controls p.selected {
	background-color: #ff6381;
	border: 1px solid #ff3060;
	color: #ff98d3;
}