@charset "utf-8";

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

/* =================================
   ■ メインビジュアル
================================== */
.accentBox {
    z-index:1;
    position:relative;
    height: 100%;
    text-align:center;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
    
    @media (max-width: 768px){
        height: max(70vh, 625px);
    }
    
    &::before,
    &::after{
        position: absolute;
        left: 0;
        z-index: 1;
        content: '';
        width: 100%;
    }
    &::before {
        top: 0;
        height: 196px;
        background: linear-gradient(rgba(27, 27, 27, 1) 0, rgba(27, 27, 27, .7) 20%, rgba(27, 27, 27, 0) 80%);
    }
    &::after {
        bottom: 0;
        height: 96px;
        background: linear-gradient(rgba(27, 27, 27, 0) 0, rgba(27, 27, 27, .7) 80%, rgba(27, 27, 27, 1) 100%);
    }
    
    .bx-wrapper {
        position: relative;
        margin: 0 auto 0px;
        padding: 0;
        height: 100%;
        
        li {
            width: 100vw;
            height: 100vh;
            
            a {
                pointer-events: none
            }
            
        }
        img {
            object-fit: cover;
            width: 100%;
            height: 100% 
        }
        
    }
    
    .catch {
        width: 92%;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        color: #fff;
        
        @media (max-width: 768px){
            top: 46%;
        }

        h2 {
            text-align: left;
            font-size: 11.2rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-block: calc((1em - 1lh) / 2);
            transition: .5s;
            
            @media (max-width: 1080px){
                font-size: 7.2rem;
            }
            @media (max-width: 768px){
                font-size: 5.8rem;
            }
            > span{
                line-height: 1.1;
                display: block;

                transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1), opacity linear 0.7s;
                transition-property: clip-path;
                clip-path: inset(0 100% 0 0);
                transition-delay: 0.25s;
                font-feature-settings: "palt";

                &:nth-child(2) {
                    font-size: 9.2rem;
                    margin-left: 3.4em;
                    /* margin-block-end: -0.2lh; */
                    letter-spacing: 0.1em;
                    transition-delay: 0.65s;
                    
                    @media (max-width: 1080px){
                        transition-duration: .5s;
                        font-size: 6.2rem;
                    }
                    
                    @media (max-width: 768px){
                        margin-left: 0em;
                        font-size: 4.9rem;
                        transition-duration: 1s;
                    }
                }
                &:nth-child(3) {
                    margin-left: 5.4em;
                    transition-delay: 1.15s;
                    
                    @media (max-width: 768px){
                        margin-left: 0em;
                    }
                }
            }
        }

        .description{
            width: fit-content;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap:8px 0;

            font-size: 1.7rem;
            letter-spacing: 0.1em;
            line-height: 1.5;
            margin-bottom: 0;
            
            @media (max-width: 768px){
                font-size: 1.4rem;
                margin-top:5vw;
            }

            > span {
                display: block;
                background: rgb(27 27 27 / .95);
                padding: 12px 16px;
                @media (max-width: 768px){
                    padding: 8px;
                }

            }
        }

        &.confirmed h2 > span{
            clip-path: inset(0);
        }
    }
    
    p.review {
        display: inline-block;
        position: absolute;
        bottom: 40px;
        right: 40px;
        margin-bottom: 0;
        animation-name: anime_review;
        animation-duration: 2.0s;
        z-index: 2;
        @media (max-width: 768px){
            bottom: 40px;
            right: 4vw;
            width:32vw;
        }
        
        img{
            width: 100%;
            height: auto;
        }
    }

}

@keyframes anime_review{
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}