/* ここからローディング */
#loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: url(noize.png) top center;
    background-color: #fff;
    z-index: 1000;
}
#loading.hidden{
    animation: loadingDelete 1s forwards;
}
#loading_attention{
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 52px;
    font-family: "Rokkitt", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
}
#loading_attention span{
    animation: loading_attention 1.5s ease-out infinite;
}
#loading_attention span:nth-of-type(2){
    animation-delay: calc(.1s * 2);
}
#loading_attention span:nth-of-type(3){
    animation-delay: calc(.1s * 3);
}
#loading_attention span:nth-of-type(4){
    animation-delay: calc(.1s * 4);
}
#loading_attention span:nth-of-type(5){
    animation-delay: calc(.1s * 5);
}
#loading_attention span:nth-of-type(6){
    animation-delay: calc(.1s * 6);
}
#loading_attention span:nth-of-type(7){
    animation-delay: calc(.1s * 7);
}

#loading .loading_logo{
    width: 264px;
    height: 116px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#loading .loading_logo img{
    width: 100%;
    height: auto;
}
@keyframes loading_attention{
    0%{
        transform: translateY(0px);
    }
    15%{
        transform: translateY(-10px);
    }
    40%{
        transform: translateY(0px);
    }
}
@keyframes loadingDelete{
    0%{
        opacity: 1;
        display: block;
    }
    99%{
        opacity: 0;
        display: block;
    }
    100%{
        display: none;
    }
}
/* ここからイントロ */
#intro_wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: scroll;
    visibility: hidden;
}
#intro{
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
}
#intro_skip{
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-family: "Rokkitt", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    display: flex;
    justify-content: right;
    align-items: center;
    z-index: 2;
    cursor: pointer;
}
#intro_skip img{
    margin-left: 5px;
    height: 12px;
    position: relative;
    top: -1px;
}
#intro_attention{
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 52px;
    font-family: "Rokkitt", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    transition: opacity 0.5s ease-out;
    visibility: hidden;
}
#intro_attention_image{
    position: absolute;
    right: 0;
    left: 0;
    top: calc(-11px - 18px - 10px);
    margin: auto;
}
#introScrollAttentionCircle{
    animation: introScrollAttentionAnimation ease-in-out 1s infinite;
}
@keyframes introScrollAttentionAnimation{
    0%{
        opacity: 0;
        cy:9;
    }
    20%{
        opacity: 1;
        cy:9;
    }
    80%{
        opacity: 1;
        cy:16;
    }
    90%{
        opacity: 0;
        cy:16;
    }
    100%{
        opacity: 0;
        cy:16;
    }
}
#intro_attention.hidden{
    opacity: 0;
}
#intro_attention span{
    animation: intro_attention 1.5s ease-out infinite;
}
#intro_attention span:nth-of-type(2){
    animation-delay: calc(.1s * 2);
}
#intro_attention span:nth-of-type(3){
    animation-delay: calc(.1s * 3);
}
#intro_attention span:nth-of-type(4){
    animation-delay: calc(.1s * 4);
}
#intro_attention span:nth-of-type(5){
    animation-delay: calc(.1s * 5);
}
#intro_attention span:nth-of-type(6){
    animation-delay: calc(.1s * 6);
}
@keyframes intro_attention{
    0%{
        transform: translateY(0px);
    }
    15%{
        transform: translateY(10px);
    }
    40%{
        transform: translateY(0px);
    }
}
#intro_scroll{
    position: relative;
    width: 100%;
    height: 10000px;
    z-index: 1;
}
#intro_first{
    width: 100%;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}
#intro_second{
    visibility: hidden;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
}
#intro_texture{
    width: 100%;
    height: 100%;
    background: url(noize.png) top center;
    position: absolute;
    top: 0;
    left: 0;
}
#intro_second picture, #intro_second img{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}
.intro_first_baseText{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(235 / 1920 * 100vw);
    left: calc(140 / 1920 * 100vw);
    opacity: 0;
    transition: opacity 1s;
}
.intro_first_baseText_show{
    opacity: 1;
}

#intro_first_text_1{
    width: calc(808 / 1920 * 100vw);
}
#intro_first_text_2{
    width: calc(819 / 1920 * 100vw);
}
#intro_first_text_3{
    width: calc(653 / 1920 * 100vw);
}
#intro_first_text_4{
    width: calc(1568 / 1920 * 100vw);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
#intro_first_text_5{
    width: calc(634 / 1920 * 100vw);
}
#intro_first_text_6{
    width: calc(521 / 1920 * 100vw);
}
#intro_first_text_7{
    width: calc(438 / 1920 * 100vw);
}

@media screen and (max-width: 768px) {
    .intro_first_baseText{
        top: calc(300 / 750 * 100vw);
        left: calc(75 / 750 * 100vw);
    }
    #intro_first_text_1{
        width: calc(523 / 750 * 100vw);
    }
    #intro_first_text_2{
        width: calc(532 / 750 * 100vw);
    }
    #intro_first_text_3{
        width: calc(378 / 750 * 100vw);
    }
    #intro_first_text_4{
        width: calc(642 / 750 * 100vw);
        top: calc(232 / 750 * 100vw);
        bottom: auto;
    }
    #intro_first_text_5{
        width: calc(481 / 750 * 100vw);
    }
    #intro_first_text_6{
        width: calc(521 / 750 * 100vw);
    }
    #intro_first_text_7{
        width: calc(438 / 750 * 100vw);
    }
    
    #loading .loading_logo{
        width: calc(191 / 375 * 100vw);
        height: calc(83 / 375 * 100vw);
    }
}