html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #d3edfb;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    inset: 0px;
    position: fixed;
    width: 100%;
    height: 100%;
}

.areaBtnContainer{
    display:flex;
}

.areaBtnContainer > img:last-child{
    margin-left:1px;
}

.keepTop {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.audioBtnShadow {
    cursor: pointer;
    filter: drop-shadow(2px 2px 0px #000);
    transition: 0.2s all;
    transform: translateZ(0); /*iosだと影が欠ける対策*/
}

    .audioBtnShadow:hover {
        filter: drop-shadow(0px 0px 0px #000);
        transform: translate(2px,2px);
    }

.audioPlayingAdd {
    transform: translate(2px,2px);
}

#plateMain {
    position: absolute;
    bottom: 1vh;
    left: 13vw;
    width: 54%;
    aspect-ratio: 4.625;
    border: medium solid #000;
    background-color: #fff;
    display: flex;
    box-shadow: 1px 1px 10px 0px #000;
}

    #plateMain > div:nth-child(1) {
        width: 75%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

        #plateMain > div:nth-child(1) > div:nth-child(1) {
            font-size: max(4.6vw,10px);
            text-align: center;
            font-family: 'Yu Gothic',sans-serif;
            font-weight: bold;
        }

        #plateMain > div:nth-child(1) > div:nth-child(2) {
            display: flex;
            font-size: max(2.3vw,10px);
            justify-content: center;
            align-items: center;
        }

            #plateMain > div:nth-child(1) > div:nth-child(2) > img {
                width: 8%;
                margin-right: 2%;
                margin-left: 2%;
            }

    #plateMain > div:nth-child(2) {
        width: 25%;
        display: flex;
    }

        #plateMain > div:nth-child(2) > svg {
            width: 95%;
        }

/*忍者タイトルポジション*/
.titleChiyo {
    position: absolute;
    top: 2vh;
    left: 40vw;
}

/*忍者ポジション*/
.areaChiyo {
    position: absolute;
    bottom: 2vh;
    left: 14vw;
}

/*エリアボタンコンテナ*/
.btnContainer {
    width: 28vw;
    height: 100%;
    margin: 0 0 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
}

    .btnContainer > svg {
        width: 76%;
        margin-top: 3%;
        margin-bottom: 0px;
    }

    .btnContainer > .asTitle {
        width: 76%;
        margin-top: 10%;
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

        .btnContainer > .asTitle > img {
            width: 56%;
        }

    .btnContainer::-webkit-scrollbar {
        width: 18px;
    }

    .btnContainer::-webkit-scrollbar-track {
        border-radius: 9px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .btnContainer::-webkit-scrollbar-thumb {
        border: 4px solid transparent;
        border-radius: 100px;
        background-clip: content-box;
    }

/*千代アニメ*/
.disappear {
    animation: Dispr 1s steps(10) forwards;
}

@keyframes Dispr {
    to {
        transform: translate(-2100px,0);
    }
}

/*スクロールカラーブルー*/
.scrollBlue {
    background-color: #c6f6fd;
}

    .scrollBlue > svg > g > g {
        fill: #8ef0ff;
    }

    .scrollBlue > .selected > g > g,
    .scrollBlue > svg:hover > g > g,
    .fillSelectBlue {
        fill: #0a0dcf;
    }

    .scrollBlue > .selected > g > path,
    .scrollBlue > svg:hover > g > path {
        fill: #fff;
    }

    .scrollBlue::-webkit-scrollbar-track {
        background-color: #9fdae3;
    }

    .scrollBlue::-webkit-scrollbar-thumb {
        background-color: #b9f6ff;
    }

/*スクロールカラーイエロー*/
.scrollYellow {
    background-color: #fff3b9;
}

    .scrollYellow > svg > g > g {
        fill: #ffe669;
    }

    .scrollYellow > .selected > g > g,
    .scrollYellow > svg:hover > g > g,
    .fillSelectYellow {
        fill: #ffa20d;
    }

    .scrollYellow > .selected > g > path,
    .scrollYellow > svg:hover > g > path {
        fill: #fff;
    }

    .scrollYellow::-webkit-scrollbar-track {
        background-color: #eadb91;
    }

    .scrollYellow::-webkit-scrollbar-thumb {
        background-color: #fff3b9;
    }

/*スクロールカラーレッド*/
.scrollRed {
    background-color: #ffe1e0;
}

    .scrollRed > svg > g > g {
        fill: #ff9f9d;
    }

    .scrollRed > .selected > g > g,
    .scrollRed > svg:hover > g > g,
    .fillSelectRed {
        fill: #dd2d2d;
    }

    .scrollRed > .selected > g > path,
    .scrollRed > svg:hover > g > path {
        fill: #fff;
    }

    .scrollRed::-webkit-scrollbar-track {
        background-color: #f0b1b0;
    }

    .scrollRed::-webkit-scrollbar-thumb {
        background-color: #ffe1e0;
    }

/*スクロールカラーパープル*/
.scrollPurple {
    background-color: #dcd2ff;
}

    .scrollPurple > svg > g > g {
        fill: #c1afff;
    }

    .scrollPurple > .selected > g > g,
    .scrollPurple > svg:hover > g > g,
    .fillSelectPurple {
        fill: #8563f7;
    }

    .scrollPurple > .selected > g > path,
    .scrollPurple > svg:hover > g > path {
        fill: #fff;
    }

    .scrollPurple::-webkit-scrollbar-track {
        background-color: #bdb2e5;
    }

    .scrollPurple::-webkit-scrollbar-thumb {
        background-color: #dcd2ff;
    }

/*スクロールカラーグリーン*/
.scrollGreen {
    background-color: #b5efc7;
}

    .scrollGreen > svg > g > g {
        fill: #7aebb3;
    }

    .scrollGreen > .selected > g > g,
    .scrollGreen > svg:hover > g > g,
    .fillSelectGreen {
        fill: #0cc70d;
    }

    .scrollGreen > .selected > g > path,
    .scrollGreen > svg:hover > g > path {
        fill: #fff;
    }

    .scrollGreen::-webkit-scrollbar-track {
        background-color: #8dc49e;
    }

    .scrollGreen::-webkit-scrollbar-thumb {
        background-color: #b5efc7;
    }

/*スクロールカラーピンク*/
.scrollPink {
    background-color: #ffcdfa;
}

    .scrollPink > svg > g > g {
        fill: #f8a7e6;
    }

    .scrollPink > .selected > g > g,
    .scrollPink > svg:hover > g > g,
    .fillSelectPink {
        fill: #f92ccc;
    }

    .scrollPink > .selected > g > path,
    .scrollPink > svg:hover > g > path {
        fill: #fff;
    }

    .scrollPink::-webkit-scrollbar-track {
        background-color: #eab1e4;
    }

    .scrollPink::-webkit-scrollbar-thumb {
        background-color: #ffcdfa;
    }