.jquery-slider {
    overflow: hidden;
    position: relative;
}
.jquery-slider-element {
    overflow: hidden;
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.jquery-slider-control {
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    margin: 40px 0 0 0;
    background: #fff;
    opacity: 0.33;
    cursor: pointer;
    border-radius: 12px;
    box-shadow: #666 0 0 2px;
    text-shadow: #fff 0 0 1px;
}
.jquery-slider-control:hover {
    opacity: 1;
}
.jquery-slider-control-prev {
    left: 8px;
    top: 100px;
}
.jquery-slider-control-next {
    right: 8px;
    top: 100px;
}
.jquery-slider-pages {
    overflow: visible;
    position: absolute;
    left: 5px;
    bottom: 10px;
    height: 20px;
    right: 450px;
}
.jquery-slider-page {
    overflow: hidden;
    position: relative;
    display: block;
    float: right;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0 0 10px 40px;
    background: #999;
	cursor: pointer;
    opacity: 0.33;
    margin: 3px;
    border-radius: 6px;
    box-shadow: #333 0 0 2px;
}
.jquery-slider-page:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
}
.jquery-slider-page-current {
    opacity: 1;
}


/* test */

.customkeyvisual {
	width:640px;
	height:240px;
	position: relative;
	margin:0 auto 30px auto;
	text-align:left;
	background:url("../img/key/visual04.jpg") no-repeat 0px 0px;
}

/* スライダー全体 */
.customkeyvisual .jquery-slider { overflow: hidden; position: absolute;}
.customkeyvisual .jquery-slider-element {display: none; position: absolute;}

/* 左右の［<<］と［>>］のボタン*/
.customkeyvisual .jquery-slider-control {
    position: absolute;
    text-align: center;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: #fff;
	opacity:0.50;
	-moz-opacity:0.50;
	filter: alpha(opacity=50);
    cursor: pointer;
	
	/* 角丸 */  
	border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
	behavior: url("/js/PIE.htc");
}
.customkeyvisual .jquery-slider-control:hover {opacity:1;-moz-opacity:1;filter: alpha(opacity=100);}
.customkeyvisual .jquery-slider-control-prev {left: 10px;top: 10px;}
.customkeyvisual .jquery-slider-control-next {right:10px;top: 10px;}

/* 右下の丸いボタン*/
.customkeyvisual .jquery-slider-pages {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.customkeyvisual .jquery-slider-page {
    position: relative;
    float: right;
    width: 12px;
    height: 12px;
    background: #888888;
	cursor: pointer;
	margin: 3px;
	opacity:0.50;
	-moz-opacity:0.50;
	filter: alpha(opacity=50);

	/* 角丸 */  
	border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	behavior: url("/js/PIE.htc");
}
.customkeyvisual .jquery-slider-page:hover {background: #ffffff;}
.customkeyvisual .jquery-slider-page-current {background: #555555; opacity:1;-moz-opacity:1;filter: alpha(opacity=100);}

/* テキストエリア*/
.customkeyvisual hgroup{
	position:absolute;
	top:180px;
	left:0px;
	width:780px;
	padding:15px 20px;
	text-align:left;
	line-height:20px;
	color:#ffffff;
	background:#000000;
	
	/* 背景透過 */
	opacity:0.80;
	-moz-opacity:0.80;
	filter: alpha(opacity=80);
}

/* テキストエリア内のロゴ*/
.customkeyvisual hgroup h1{position:relative; height:36px;}

/* テキストエリア内のテキスト*/
.customkeyvisual hgroup h2{position:relative;}
	
#slider {
	width:980px;
	height:300px;
}

@media screen and (max-width: 1024px) {
#slider {
	width:100%;
	margin:0;
}
.jquery-slider-control-prev {
    left: 8px;
    top: 100px;
}
.jquery-slider-control-next {
    right: 8px;
    top: 100px;
}

}


@media screen and (max-width: 768px) {
#slider {
	width:100%;
	margin:0;
	height:230px;
}
.jquery-slider-control-prev {
    left: 8px;
    top:60px;
}
.jquery-slider-control-next {
    right: 8px;
    top:60px;
}

}

@media screen and (max-width: 480px) {
#slider {
	width:100%;
	margin:0;
	height:100px;
}
.jquery-slider-control-prev {
    left: 5px;
    top: 5px;
}
.jquery-slider-control-next {
    right: 5px;
    top: 5px;
}

}