@charset "utf-8";

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

.accentBox {
	z-index:1;
	position:relative;
    height: 100%;
	text-align:center;
	margin:0 auto;
	overflow: hidden;
    min-height: calc(100vh - 80px);
}

.accentBox .bx-wrapper {
    position: relative;
    padding: 0;
    height: 100%;
}

.accentBox .bx-wrapper li {
    width: 100vw;
    height: calc( 100vh - 80px);
}
    .accentBox .bx-viewport li::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        right: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    }
.accentBox .bx-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* catch
-------------------------------------------- */
.accentBox .catch {
    position: absolute;
    bottom: 74px;
    left: 40px;
    color: #fff;
    text-align: left;
}
.accentBox .catch h2 {
	font-size: 3.6rem;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 25px;
}
.accentBox .catch p {
    font-size: 1.7rem;
    letter-spacing: 0.04em;
    line-height: 2;
    margin-bottom: 0;
}


@media only screen and
(max-width : 767px) {
    .accentBox {
        width: auto;
        padding-top: 57px;
    }
    .accentBox .bx-wrapper li {
        height: calc( 100vh - 57px);
    }
    .accentBox .bx-viewport li::before {
        height: 100%;
        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%)
    }
    .accentBox .catch {
        left: 4%;
    }
    .accentBox .catch h2 {
        font-size: 2.5rem;
    }   
    .accentBox .catch p {
        font-size: 1.5rem;
    }

}