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

.top{
    position:relative;
    min-height:100svh;
    overflow:hidden;
    opacity:0;
}

.top .inner{
    position:relative;
    z-index:2;
    width:min(1400px,100%);
    height:100svh;
    margin:0 auto;
    padding:0 40px;
}
/* ========================================
   Content
======================================== */

.top-content{
    position:absolute;
    top: 20%;
    left: 14%;
    transform:translateY(-50%);
    z-index:2;
    width:min(380px,30vw);
}

/* ========================================
   Title
======================================== */
.top-title{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.title-line{
    display:flex;
    gap:.02em;
    font-family:"Caveat",cursive;
    line-height:.9;
    letter-spacing:.02em;
    color:#ffffff;
    text-shadow:
        0 2px 10px rgba(0,0,0,.15);
}

.title-line:first-child{
    font-size:clamp(4rem,6vw,6rem);
}

.title-line:last-child{
    margin-top:-12px;
    font-size:clamp(4rem,6vw,6rem);
}
.top-title span span{
    display:inline-block;
    opacity:0;
    transform:translateY(40px) rotate(-8deg);
    will-change:
        transform,
        opacity;
        
}

/* ========================================
   Top Subtitle
======================================== */

.top-subtitle{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    left: 50px;
    top:10px;
    font-family: "Albert Sans", sans-serif;
    font-size: 0.625vw;
    color:#abc5ce;
}
.subtitle-text{
    display:inline-block;
    opacity:0;
    transform:translateX(-20px);
}
.top-subtitle::before{
    content:"";
    display:block;
    width:0;
    height:1px;
    background:#abc5ce;
    flex-shrink:0;
    transition:width .6s ease;
}

.top-subtitle.line::before{
    width:4vw;
}

/* ========================================
   Image
======================================== */

.top-img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:1;
    width:min(36vw, 520px);
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.top-img img{
    display:block;
    width:auto;
    height:100%;
    object-fit:cover;
    object-position:center top;
}
/* ========================================
   Menu
======================================== */

.top-menu{
    position:absolute;
    top:50%;
    right:5%;
    transform:translateY(-50%);
    z-index:3;
}

.menu-list{
    display:flex;
    gap:28px;
}

.menu-item{
    position:relative;
    opacity:0;
    writing-mode:vertical-rl;
    font-size:clamp(12px,.8vw,14px);
    font-weight:500;
    letter-spacing:.3em;
    transform:translateX(30px);
    transition:.3s;
}

.menu-item:hover{
    transform:translateY(-4px);
}

.menu-item::before{
    content:"";
    position:absolute;
    top:-40px;
    left:50%;
    width:1px;
    height:24px;
    background:#8FBFCC;
    transform:scaleY(0);
    transform-origin:bottom;
    transition:.3s;
}

.menu-item:hover::before{
    transform:scaleY(1);
}
/* ========================================
   Scroll
======================================== */

.scroll{
    position: absolute;
    right: 4%;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

}

.scroll-text{
    font-size:14px;
    letter-spacing:.15em;

}

.scroll-line{
    position:relative;
    width:1.3px;
    height:30px;
    background:#cfcfcf;
    overflow:hidden;
}

.scroll-line::after{
    content:"";
    position:absolute;
    left:0;
    top:-18px;
    width:5px;
    height:18px;
    background:#5eb3ca;
    animation:scrollMove 2s linear infinite;
}
@keyframes scrollMove{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(108px);
    }

}
/* ========================================
   Responsive
======================================== */

@media (max-width:959px){

    .top{
        min-height:100svh;
    }

    .top .inner{
        width:100%;
        height:100svh;
        padding:0;
    }

/* ========================================
   Content
======================================== */
.top-content{
        position: absolute;
        inset: 0;
        top: 16%;
        left: 5%;
        width: 100%;
        transform: none;
        z-index: 3;
    }

/* ========================================
   Title
======================================== */
    .top-title{
        width:min(78vw,320px);
    }
    
    .top-title img{
        width:100%;
    }
    .title-row{
        gap:6px;
    }

    .title-row img{
        height:clamp(48px,11vw,70px);
    }

/* ========================================
   Subtitle
======================================== */

    .top-subtitle{
        margin-top:14px;
        margin-left:8px;
        left:clamp(28px,8vw,40px);
        gap:12px;
        font-size:.75rem;
        line-height:1.8;
    }

    .top-subtitle.line::before{
        width:clamp(36px,10vw,48px);
    }

/* ========================================
   Image
======================================== */
.top-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    overflow:hidden;
    transform:none;
    left:auto;
    top:auto;
}

.top-img img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center bottom;
}

/* ========================================
   Menu
======================================== */

    .top-menu{
        display:none;
    }

/* ========================================
   Scroll
======================================== */

    .scroll{
        right:14px;
        bottom:18px;
    }

    .scroll-text{
        font-size:12px;
        color:#bbaeae;
    }

    .scroll-line{
        height:35px;
    }

}