/* ========================================
   Opening
======================================== */

.opening{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

    background:#faf8f5;

    z-index:9999;

}
/* ========================================
   Panel
======================================== */

.opening-panel{

    position:absolute;

    left:0;

    width:100%;

    height:50%;

    background:#faf8f5;

    overflow:hidden;

    will-change:clip-path;

}

.opening-top{

    top:0;

    clip-path:inset(0 0 0 0);

}

.opening-bottom{

    bottom:0;

    clip-path:inset(0 0 0 0);

}
/* ========================================
   Content
======================================== */
.opening-content{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:42px;

    z-index:20;

    pointer-events:none;

}

/* ========================================
   Title
======================================== */

.opening-title{

    width:100%;

    display:flex;

    justify-content:center;

}

.opening-title-text{

    display:inline-block;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(3.2rem,6vw,5.5rem);

    font-weight:500;

    line-height:0.95;

    letter-spacing:0.12em;

    white-space:nowrap;

    color:var(--text-color);

    opacity:0;

    transform:translateX(-250px);

    will-change:transform,opacity;

}

/* 超ワイドモニター */

@media (min-width:1600px){

    .opening-title-text{

        font-size:10rem;

    }

}

/* タブレット */

@media (max-width:1024px){

    .opening-title-text{
        font-size:clamp(2rem,8vw,3rem);
        letter-spacing:.10em;

    }

}

/* スマホ */

@media (max-width:768px){

    .opening-title{

        text-align:center;

    }

    .opening-title-text{
        font-size:clamp(2rem,8vw,3rem);

        letter-spacing:.06em;

        line-height:1;

    }

}

/* ========================================
   Divider
======================================== */
.opening-divider{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.opening-line{

    position:relative;

    display:block;

    width:100vw;

    height:1px;
    background:#9FCFD8;

    transform:scaleX(0);

    transform-origin:left center;

    will-change:transform;
    overflow:hidden;

}

/* 光 */

.opening-line::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:180px;

    height:18px;

    transform:translate(-50%,-50%);

    background:rgba(168,217,230,.18);

    filter:blur(12px);

    pointer-events:none;

}

.opening-line::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );

    transform:translateX(-100%);
}
/* ========================================
   Subtitle
======================================== */
.opening-subtitle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin:0;

    font-family:"Zen Kaku Gothic New",sans-serif;

    font-size:.8rem;

    font-weight:500;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:#6f6f6f;

    opacity:0;

    transform:translateY(20px);

    will-change:transform,opacity;

}

/* Divider Dot */

.opening-dot{

    display:block;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#9FCFD8;

    flex-shrink:0;

}

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

@media (max-width:768px){

    .opening-subtitle{

        flex-direction:column;

        gap:12px;

        font-size:.72rem;

        letter-spacing:.22em;

        text-align:center;

    }

    .opening-dot{

        display:none;

    }

}


/* ========================================
   Hero Initial
======================================== */

/* Hero Image */

.main-visual-image{
    overflow:hidden;
}

.main-visual-image img{
    opacity:0;
    transform:scale(1.08);
    transform-origin:center;
    will-change:transform,opacity;
}

/* Hero Title */

.main-visual-title{
    opacity:0;
    transform:translateY(40px);
    will-change:transform,opacity;
}

/* Hero Subtitle */

.main-visual-subtitle{
    opacity:0;
    transform:translateY(24px);
    will-change:transform,opacity;
}

/* ========================================
   Header Initial
======================================== */

.site-header{
    opacity:0;
    transform:translateY(-20px);
    will-change:transform,opacity;
}

/* ========================================
   Mobile Header
======================================== */

@media (max-width:959px){

    .site-header{
        opacity:1;
        transform:none;
    }

}

/* ========================================
   Background Initial
======================================== */

.background-decoration{
    opacity:1;
}

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

.scroll-guide{
    opacity:0;
    transform:translateY(20px);
}

/* ========================================
   Performance
======================================== */

.opening,
.main-visual-image img,
.main-visual-title,
.main-visual-subtitle,
.site-header,
.background-decoration{
    backface-visibility:hidden;
    transform-style:preserve-3d;
}