/* Tiny Carousel */
#slider1 { 
	height: 1%; 
	margin: auto; 
	overflow:hidden; 
	position: relative; 
	padding: 0 25px 0 25px;
	width:93%;
	box-shadow: 1px 0px 5px  rgba(0,0,0,0.2) inset;
	background-color:#e5f9fe; 
	border-radius:8px;
	clear:both;
}

@media screen and (max-width: 640px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
#slider1 { 
	height: 1%; 
	margin: 20px auto 0 auto; 
	overflow:hidden; 
	position: relative; 
	padding: 1px 25px 0 25px;
	width:95%;
	box-shadow: 1px 0px 10px  rgba(0,0,0,0.4) inset;
	background-color:#e5f9fe; 
	border-radius:8px;
}
}

#slider1 .viewport { 
	height: 100px; 
	overflow: hidden; 
	position: relative; 
	margin-bottom:-8px;
}

#slider1 .buttons {
    display: block;
    position: absolute;
    top: 3%;
    left: 0;
    width: 22px;
    height: 45px;
	clear:both;
}

@media screen and (max-width: 640px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
#slider1 .buttons {
	display: block;
	position: absolute;
	top: 28%;
	left: 0;
	width: 22px;
	height: 45px;
	clear:both;
}
}

#slider1 .next {
    right: 0;
    left: auto;
    top: 3%;
}

@media screen and (max-width: 640px) {
   /* 表示領域が800px以上の場合に適用するスタイル */
#slider1 .next {
    right: 0;
    left: auto;
    top: 28%;
	z-index:999999;
}
}

#slider1 .buttons:hover{
    color: #C01313;
}

#slider1 .disable { 
	visibility: hidden; 
}

#slider1 .overview { 
	list-style: none; 
	position: absolute; 
	padding: 0; 
	margin: 0; 
	height: 86px; 
	width: 100px; 
	left: 0;
	top: 0; 
}

#slider1 .overview li{
	float: left; 
	margin: 12px 10px 0px 0; 
	padding: 1px; 
	height: 86px; 
	border: 1px solid #CCCCCC; 
	width: 100px;
}