@charset "utf-8";

/* ==================================================================
	mainvisual用のCSS
=================================================================== */

/* =================================
   ■ メインビジュアル
================================== */

.accentBox{
	z-index:1;
	position:relative;
	width:100%;
	text-align:center;
	margin:0 auto 40px auto;
}

.accentBox .bx-wrapper {
    position: relative;
    margin: 0 auto 0px;
    padding: 0;
}

.accentBox .bx-wrapper ul li {
	position:relative;
    display: block;
	background:#fafafa 50% 50% no-repeat;
}

.accentBox .bx-wrapper ul li a{
	display:block;
	width:100%;
	height:100%;
	text-decoration: none;
}

.bx-wrapper .bx-controls-direction a{
	filter:alpha(opacity=80);  
    -ms-filter: "alpha(opacity=80)";
	-moz-opacity:0.8; 
	-khtml-opacity: 0.8;
    opacity: 0.8; 
}

.accentBox .bx-wrapper .bx-pager {
	left:0;
	right:0;
	bottom:-20px;
	text-align:center;
}

.accentBox .bx-wrapper .bx-pager .bx-pager-item{
	text-align:center;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #ccc;
    margin: 0 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #004499;
}

.bx-wrapper .bx-next {
    right: 10px;
}

.bx-wrapper .bx-prev {
    left: 10px;
}



@media only screen and
(max-width : 767px) {

/* --------------------------------
   □ visual
-------------------------------- */

.accentBox{
	width:104%;
	margin:0 -2% 40px -2%;
}

.bx-wrapper .bx-controls-direction a {
	top:50%;
    width: 20px;
    height: 40px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    margin: 0 5px;
}

.bx-wrapper .bx-next {
	background-size:auto 100%;
}

.bx-wrapper .bx-prev {
	background-size:auto 100%;
}

}