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

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

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

/*忍者ポジション*/
.hanzoPos {
    position: absolute;
    bottom: 19vh;
    right: 0vw;
}

/*ボタンの色*/
.fillOrange > svg > use {
    fill: #ffead4;
}

.fillRed > svg > use {
    fill: #ffd1c6;
}

.fillDarkGreen > svg > use {
    fill: #c0eeeb;
}

.fillYellow > svg > use {
    fill: #f6f2af;
}

.fillBlue > svg > use {
    fill: #b7e6ff;
}

.fillPurple > svg > use {
    fill: #ead6f6;
}

.fillGreen > svg > use {
    fill: #e6fcc8;
}

.fillPink > svg > use {
    fill: #ffd8dc;
}

/*半蔵コマアニメ用css*/
.disappear {
    animation: Dispr 1s steps(10) forwards;
}

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