body {
    background: #000;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 55px 70px;
    padding: 2.1484vw 2.7344vw;
    box-sizing: border-box;
    z-index: 500;
}
header h1 a {
    display: block;
    width: 211px;
    width: 8.2422vw;
}
header h1 a img {
    width: 100%;
}

.sound_btn {
    width: 170px;
    height: 50px;
    width: 6.6406vw;
    height: 1.9531vw;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: -28px;
    margin-top: -1.0938vw;
}
.sound_txt {
    display: block;
    width: 117px;
    height: 33px;
    width: 4.5703vw;
    height: 1.2891vw;
    background: url(../images/sound.png) no-repeat center;
    background-size: contain;
}
.line {
    width: 5px;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    margin-left: 4px;

}
.line_01 {
    height: 15px;
}
.line_02 {
    height: 22px;
}
.line_03 {
    height: 15px;
}
.line_04 {
    height: 22px;
}
.sound_btn.play .line_01 {
    animation: line01 1s ease-in infinite;
}
.sound_btn.play .line_02 {
    animation: line02 1.4s ease-in infinite;
}
.sound_btn.play .line_03 {
    animation: line03 1.2s ease-in infinite;
}
.sound_btn.play .line_04 {
    animation: line04 1.2s ease-in infinite;
}
@keyframes line01 {
    0%, 100% {
        height: 15px;
    }

    50% {
        height: 23px;
    }
}
@keyframes line02 {
    0%, 100% {
        height: 18px;
    }
    50% {
        height: 35px;
    }
}
@keyframes line03 {
    0%, 100% {
        height: 13px;
    }

    50% {
        height: 24px;
    }
}

@keyframes line04 {
    0%, 100% {
        height: 22px;
    }

    50% {
        height: 16px;
    }
}



.wrap {
    position: relative;
    overflow: hidden;
    height: 100vh;
    background: url(../images/bg_01.jpg) no-repeat center top;
    background-size: cover;
}
main {
    width: 100%;
    height: 100vh;
}
.cha {
    width: 2560px;
    height: 1305px;
/*    width: 92.5391vw;
    height: 56.2500vw;*/
    background: url(../images/cha_01.png?ver=1) no-repeat center bottom;
    background-size: contain;
    position: absolute;
    bottom: 0;
    right: 0;
}
.logo {
    width: 862px;
    height: 619px;
    background: url(../images/logo.png) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 185px;
    left: 50%;
    transform: translateX(-50%);
}
.sp_wrap {
    width: 1050px;
    height: 560px;
    position: absolute;
    top: 125px;
    left: 255px;
}
.sp_01 {
    width: 42px;
    height: 43px;
    background: url(../images/sp_01.png) no-repeat center;
    background-size: contain;
    top: 50px;
    left: 555px;
    position: absolute;
    animation: spin 3.8s ease-in-out infinite;
}
.sp_02 {
    width: 22px;
    height: 22px;
    background: url(../images/sp_02.png) no-repeat center;
    background-size: contain;
    top: 35px;
    left: 520px;
    position: absolute;
    animation: spin 2.9s ease-in-out infinite;
}
.sp_03 {
    width: 50px;
    height: 51px;
    background: url(../images/sp_03.png) no-repeat center;
    background-size: contain;
    position: absolute;
    left: 100px;
    bottom: 50px;
    animation: spin 3.2s ease-in-out infinite;
}
.sp_04 {
    width: 61px;
    height: 63px;
    background: url(../images/sp_04.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
    animation: spin 4.6s ease-in-out infinite;
}
@keyframes spin {
    0%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0.3;
    }
    40% {
        transform: scale(1) rotate(270deg);
        opacity: 1;
    }
}
.footer {
    width: 100%;
    position: absolute;
    bottom: 40px;
    left: 0;
    text-align: center;
}
.footer p {
    font-size: 16px;
    color: #fff;
    opacity: .7;
}


@media (max-width: 768px) {
    header {
        padding: 27px 20px;
        padding: 7.5000vw 5.5556vw;
        align-items: start;
    }
    header h1 a {
        width: 29.3056vw;
    }
    header h1 a img {
        width: 105.5px;
        width: 29.3056vw;
    }
    .sound_btn {
        width: 112px;
        height: 21px;
        width: 29.8667vw;
        height: 5.6000vw;
        margin-top: 0;
    }
    .sound_txt {
        width: 80px;
        height: 21px;
        width: 21.3333vw;
        height: 5.6000vw;
        background: url(../images/mo/sound.png) no-repeat center;
        background-size: contain;
    }
    .sound_btn.play .line_01 {
        animation: line01 1s ease-in infinite;
    }

    .sound_btn.play .line_02 {
        animation: line02 1.4s ease-in infinite;
    }

    .sound_btn.play .line_03 {
        animation: line03 1.2s ease-in infinite;
    }

    .sound_btn.play .line_04 {
        animation: line04 1.2s ease-in infinite;
    }
    @keyframes line01 {
        0%, 100% {
            height: 8px;
            height: 2.1333vw;
        }

        50% {
            height: 16px;
            height: 4.2667vw;
        }
    }
    @keyframes line02 {
        0%, 100% {
            height: 12px;
            height: 3.2000vw;
        }
        50% {
            height: 28px;
            height: 7.4667vw;
        }
    }
    @keyframes line03 {
        0%, 100% {
            height: 21px;
            height: 5.6000vw;
        }

        50% {
            height: 15px;
            height: 4.0000vw;
        }
    }

    @keyframes line04 {
        0%, 100% {
            height: 10px;
            height: 2.6667vw;
        }

        50% {
            height: 24px;
            height: 6.4000vw;
        }
    }

    .wrap {
        height: auto;
        background: url(../images/mo/bg.jpg) no-repeat center center;
        background-size: cover;
    }
    main {
        height: calc(var(--vh, 1vh) * 100);
    }
    .cha {
        display: none;
    }
    .line {
        width: 3.5px;
        width: 0.9333vw;
        margin-left: 3px;
        margin-left: 0.8000vw;
    }
    .line_01,
    .line_03 {
        height: 10px;
        height: 2.6667vw;
    }
    .line_02,
    .line_04 {
        height: 16px;
        height: 4.2667vw;
    }
    .logo {
        width: 396px;
        height: 299px;
        width: 105.6000vw;
        height: 79.7333vw;
        background: url(../images/mo/logo.png) no-repeat center;
        background-size: contain;
        bottom: 90px;
        bottom: 24.0000vw;
        margin-left: 5px;
        margin-left: 1.3889vw;
    }
    .sp_wrap {
        width: 100%;
        height: 85px;
        height: 22.6667vw;
        top: 135px;
        top: 36.0000vw;
        left: 0;
    }
    .sp_01 {
        width: 8.5px;
        height: 8.5px;
        width: 2.2667vw;
        height: 2.2667vw;
        background: url(../images/mo/sp_01.png) no-repeat center;
        background-size: contain;
        bottom: 0;
        left: 15px;
        left: 4.0000vw;
    }
    .sp_02 {
        width: 15px;
        height: 15px;
        width: 4.0000vw;
        height: 4.0000vw;
        background: url(../images/mo/sp_03.png) no-repeat center;
        background-size: contain;
        top: 15px;
        left: 155px;
        top: 4.0000vw;
        left: 41.3333vw;
    }
    .sp_03 {
        width: 8.5px;
        height: 8px;
        width: 2.2667vw;
        height: 2.1333vw;
        background: url(../images/mo/sp_02.png) no-repeat center;
        background-size: contain;
        top: -24px;
        right: 170px;
        top: -6.4000vw;
        right: 45.3333vw;
        left: auto;
    }
    .sp_04 {
        width: 9px;
        height: 9.5px;
        width: 2.4000vw;
        height: 2.5333vw;
        background: url(../images/mo/sp_04.png) no-repeat center;
        background-size: contain;
        bottom: 0;
        right: 38px;
    }
    .footer p {
        font-size: 10px;
        font-size: 2.6667vw;
    }


    @media (orientation: landscape) {
        header {
            padding: 4.2188vw 3.1250vw;
        }
        header h1 a,
        header h1 a img {
            width: 16.4844vw;
            display: block;
        }
        header .sound_btn {
            width: 10.3906vw;
            height: 3.7500vw;
        }
        .wrap {
            background: url(../images/bg.jpg) no-repeat center;
            background-size: cover;
        }
        .cha {
            display: block;
            width: 100%;
            height: 100%;
            background: url(../images/mo/cha_01.png) no-repeat center top;
            background-size: contain;
        }
        .logo {
            width: 288px;
            height: 209px;
            background: url(../images/logo.png) no-repeat center;
            background-size: contain;
            bottom: 40px;
        }
        .footer {
            bottom: 10px;
            bottom: 2.6667vw;
        }
        footer p {
            font-size: 1.5625vw !important;
        }
        .sp_wrap {
            display: none;
        }
    }
}