/* nav */
.s31nav {
    --_pos: clamp(20px, 3.1vw, 60px);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    z-index: 2000;
    top: var(--_pos);
    right: var(--_pos);
}

.s31nav a {
    display: block;
    width: clamp(50px, 7.4vw, 143px);
}

.s31nav img {
    width: 100%;
    height: auto;
}

/* HEADER */
.s31hdr {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 100%;
    container-type: inline-size;
    container-name: hdr;
    transition: opacity .1s linear;
    background:var(--_bg);
}

.noscroll .s31hdr {
    opacity: 0;
}

/* 諛곌꼍�щ엺媛�由쇱슜 */
.s31hdr::after{
    content:"";display:block;
    position:absolute;
    top:125%;left:0;
    width:100%;height:100vh;
    background:linear-gradient(to bottom, var(--_bg) 50%, transparent);
}

@container hdr (width < 600px){
    .s31hdr::after{
        height:50vh;
    }
}

/* bg */
.s31hdr-bg {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height:125%;
    top: 0;
    left: 0;
}

/* �쒓레湲� �섎떒 洹몃씪�곗씠�� 泥섎━�� */
.s31hdr-bg::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10vw;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent, var(--_bg));
}

/* �쒓레湲� */
.s31hdr-bg img {
    /* display:none; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loadingEnd .s31hdr-bg img {
    animation:
        showOpacity 3s 0s ease-in-out both,
        breathe 10s 0s ease-in-out both;
}


/* text */
.s31hdr-text {
    position: relative;
    text-align: center;
    line-height: 1;
    color: var(--_blue);
}

.s31hdr-text-titlesmall {
    position: relative;
    margin-top: 2.5em;
    margin-bottom: .4em;
    font-weight: 700;
    font-size: clamp(28px, 2.8vw, 54px);
}

.loadingEnd .s31hdr-text-titlesmall {
    animation: showOpTy 1s .5s linear both;
}

.s31hdr-text-titlebig {
    position: relative;
    margin-bottom: .7em;
    line-height: 1.15;
    font-weight: 700;
    font-size: clamp(50px, 4.2vw, 80px);
}

.loadingEnd .s31hdr-text-titlebig {
    animation: showOpTy 1s 1.5s linear both;
}

.s31hdr-text-content {
    position: relative;
    margin-bottom: 2em;
    line-height: 1.6;
    font-weight: 400;
    font-size: clamp(20px, 1.9vw, 36px);
    color: #131313;
}

.loadingEnd .s31hdr-text-content p:nth-child(1) {
    animation: showOpTy 2s 2s linear both;
}

.loadingEnd .s31hdr-text-content p:nth-child(2) {
    animation: showOpTy 2s 2.5s linear both;
}

@container hdr (width < 600px) {
    .s31hdr-text-titlesmall {
        font-size: clamp(25px, 3.2vw, 70px);
    }

    .s31hdr-text-titlebig {
        font-size: clamp(40px, 4.8vw, 100px);
    }

    .s31hdr-text-content {
        font-size: clamp(18px, 2vw, 42px);
    }
}

.s31hdr-text-content strong {
    font-weight: 800;
}

/* img */
.s31hdr-img-girl {
    position: relative;
    width: clamp(300px, 35.1vw, 673px);
}

.loadingEnd .s31hdr-img-girl {
    animation: showOpTy 1.5s 1s ease-in-out both;
}