@charset "utf-8";

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

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

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

.accentBox h2.title{
    text-align: left !important;
}

.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 {
    display: table;
    left:50%;
    transform: translate(-50% ,0);
    padding: 0;
    bottom:8px;
    text-align:center;
    width: auto!important;
}

.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;
}

.accentBox .textarea{
    position: absolute;
    width: 750px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 170px;
    padding-left: 20px;
    border-left: 10px solid #3A345A;

}

.accentBox .textarea h2.title{
    font-size: 285%;
    color: #3A345A;
    text-align: left;
}

.accentBox .textarea h2.title span{
    font-size: 60%;
    color: #A2A1A0;
    display: block;
    margin: 20px 0;
}

.accentBox .textarea p.text{
    font-size: 142%;
    color: #3A345A;
    font-weight: 700;
}





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

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

.accentBox{
    width:104%;
    margin:0 -2% 0 -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%;
}



.accentBox .textarea{
    width: auto;
}
.accentBox .textarea h2.title {
    font-size: 150%;
    padding-bottom: 0;
}
.accentBox .textarea p.text{
    font-size: 100%;
}

.accentBox .bx-wrapper ul li{
    height: 338px;
}
.accentBox .bx-wrapper ul li img{
    height: 100%;
    object-fit: cover;
}
.accentBox .bx-wrapper ul li a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
}