@charset "utf-8";

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

.accentBox {
	z-index:1;
	position:relative;
    height: 100%;
	text-align:center;
	margin:0 auto;
	overflow: hidden;
    padding: 126px 40px 60px;
}
    .accentBox::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 73%;
        bottom: 0;
        right: 0;
        background: #F1EEEA;
    }
.accentBox .bx-wrapper {
    position: relative;
    padding: 0;
    height: 100%;
}

.accentBox .bx-wrapper li {
    width: 100vw;
    height: calc( 100vh - 132px);
}
    .accentBox .bx-viewport li::before {
        content: "";
        position: absolute;
        width: 45%;
        height: 100%;
        top: 0;
        right: 0;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(59,48,40,0.5) 100%);
    }
.accentBox .bx-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* catch
-------------------------------------------- */
.accentBox .catch {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    right: calc(40px + 70px);
    color: #fff;
    writing-mode: vertical-rl;
    text-align: left;
    height: 60vh;
}
.accentBox .catch h2 {
	font-size: 3.2rem;
    letter-spacing: 0.2em;
    line-height: 1.5;
    margin-left: 40px;
}
.accentBox .catch p {
    padding-top: 2.5em;
    font-size: 2.0rem;
    letter-spacing: 0.2em;
    line-height: 2;
    margin-bottom: 0;
}

/* icon
-------------------------------------------- */
p.icon {
    display: inline-block;
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 21.50%;
    height: auto;
    margin-bottom: 0;
}

/* scroll
-------------------------------------------- */
a.scroll {
    display: inline-block;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    padding: 0 0 70px;
    overflow: hidden;
    color: #fff; 
    font-size: 100%;
    line-height: 1;
    text-decoration: none;
    pointer-events: none;
}
    a.scroll span{
        display:inline-block;
        color: #fff;
        text-align: center;
		font-size: 1.8rem;
        letter-spacing: 0.1em;
    } 
    a.scroll::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 1px;
        height: 61px;
        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) {
    .accentBox {
        width: auto;
        padding: 76px 0 30px;
        height: 100vh;
    }
    .accentBox::before {
        content: none;
    }
    .accentBox .bx-wrapper li {
        height: calc( 100vh - 106px);
    }
        .accentBox .bx-viewport li::before {
            width: 100%;
        }
    .accentBox .catch {
        top: 100px;
        left: auto;
        right: 8%;
        transform: none;
        -webkit-transform: none;
    }
    .accentBox .catch h2 {
        font-size: 2.5rem;
        margin-left: 10px;
    }   
    .accentBox .catch p {
        font-size: 1.5rem;
    }
    p.icon {
        bottom: 4%;
        left: 4%;
        width: 50%;
        height: auto;
    }
    a.scroll {
        display: none;
    }
}