@charset "utf-8";

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

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

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

.accentBox .bx-wrapper {
    margin: 0 auto;
}

.accentBox .bx-wrapper li {
    height: 100vh;
}

.accentBox .bx-wrapper img {        
    object-fit: cover;
    width: 100%;
    height: 100%;
    border: 4px solid #2E3B92;
    box-sizing: border-box;
}

.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: 30px;
	text-align:center;
}

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

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #FFFFFF;
    text-indent: -9999px;
    display: block;
    width: 48px;
    height: 4px;
    margin: 0 5px;
    outline: 0;
    border-radius: 0;
}

    .bx-wrapper .bx-pager.bx-default-pager a:hover, 
    .bx-wrapper .bx-pager.bx-default-pager a.active {
        background: #2E3B92;
    }

.accentBox .catch {
    position: absolute;
    top: 50%;
    left: calc( 4% + 60px);
	letter-spacing: 0.03em;
	font-weight: 700;
	text-align: left;
    color: #fff;
    text-shadow: 0px 0px 10px #333;
}

.accentBox .catch h2 {
	font-size: 300%;
	line-height: 1.5;
    margin-bottom: 25px;
}

.accentBox .catch p {
	font-size: 100%;
    line-height: 2.2;
    margin-bottom: 0;
}

a.scroll {
    display: inline-block;
    position: absolute;
    bottom: 40px;
    right: 40px;
    padding: 0px 0px 115px;
    overflow: hidden;
    line-height: 1;
    letter-spacing: .2em;
    text-decoration: none;
    pointer-events: none;
    writing-mode: vertical-rl;
}

    a.scroll span{
        display:inline-block;
        color: #fff;
        text-align: center;
		font-size: 68.75%; 
    } 

    a.scroll::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 45%;
        width: 2px;
        height: 103px;
        background: #fff;
    }

    .scroll::after{
        animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
    }
	@keyframes sdl{
		0% {
		  transform: scale(1, 0);
		  transform-origin: 0 0;
		}
		50% {
		  transform: scale(1, 1);
		  transform-origin: 0 0;
		}
		50.1% {
		  transform: scale(1, 1);
		  transform-origin: 0 100%;
		}
		100% {
		  transform: scale(1, 0);
		  transform-origin: 0 100%;
		}
	  }    


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

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

    .accentBox{
        width: auto;
        margin: 0 -4% 40px -4%;
    }

    .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 .catch {
        width: 92%;
        top: 30%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    } 

    .accentBox .catch h2 {
        font-size: 212.5%;
    }

    .accentBox .catch p {
        font-size: 87.5%;
    }

    a.scroll {
        display: none;
    }

}