.home-background-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background-item-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.background-item-hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.home-background-item .vector {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.home-background-item .vector img {
    max-height: 200px;
}

.home-background-item .vector #star-vector:not(.shake-animation) {
    transition: all 1s;
    transition-timing-function: ease-in-out;
}

.home-background-item .vector .shake-animation {
    animation-name: compass;
    /* animation-duration: 300ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; */
    animation: compass 6.5s ease-in-out 0s infinite alternate none;
	-webkit-animation: compass 6.5s ease-in-out 0s infinite alternate none;
}

.home-background-item .sapporo-list-items {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.home-background-item .sapporo-list-items .sapporo-item {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    position: relative;
}

.home-background-item .sapporo-list-items .sapporo-item .override {
    max-width: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.home-background-item .sapporo-list-items .sapporo-item .override img {
    max-height: 170px;
}

@media only screen and (max-width: 768px) {
    .home-background-item .sapporo-list-items .sapporo-item .override img {
        max-height: 80px;
    }
}

.home-background-item .sapporo-list-items .sapporo-item .override .sapporo-item-normal {
    z-index: 2;
}

.home-background-item .sapporo-list-items .sapporo-item .override .sapporo-item-hover {
    position: absolute;
    z-index: 1;
}

.home-background-item .sapporo-list-items .sapporo-item .override:hover .sapporo-item-normal {
    z-index: 0;
}

@keyframes shake {
    2% {
        transform: rotate(0.5deg)
    }

    4% {
        transform: rotate(-0.5deg)
    }

    6% {
        transform: rotate(1.5deg)
    }

    8% {
        transform: rotate(-0.5deg)
    }

    10% {
        transform: rotate(1.5deg)
    }

    12% {
        transform: rotate(-0.5deg)
    }

    14% {
        transform: rotate(0.5deg)
    }

    16% {
        transform: rotate(0.5deg)
    }

    18% {
        transform: rotate(0.5deg)
    }

    20% {
        transform: rotate(-0.5deg)
    }

    22% {
        transform: rotate(0.5deg)
    }

    24% {
        transform: rotate(1.5deg)
    }

    26% {
        transform: rotate(0.5deg)
    }

    28% {
        transform: rotate(-0.5deg)
    }

    30% {
        transform: rotate(0.5deg)
    }

    32% {
        transform: rotate(0.5deg)
    }

    34% {
        transform: rotate(-0.5deg)
    }

    36% {
        transform: rotate(-0.5deg)
    }

    38% {
        transform: rotate(-0.5deg)
    }

    40% {
        transform: rotate(0.5deg)
    }

    42% {
        transform: rotate(0.5deg)
    }

    44% {
        transform: rotate(-0.5deg)
    }

    46% {
        transform: rotate(-0.5deg)
    }

    48% {
        transform: rotate(1.5deg)
    }

    50% {
        transform: rotate(0.5deg)
    }

    52% {
        transform: rotate(1.5deg)
    }

    54% {
        transform: rotate(0.5deg)
    }

    56% {
        transform: rotate(1.5deg)
    }

    58% {
        transform: rotate(0.5deg)
    }

    60% {
        transform: rotate(1.5deg)
    }

    62% {
        transform: rotate(-0.5deg)
    }

    64% {
        transform: rotate(-0.5deg)
    }

    66% {
        transform: rotate(-0.5deg)
    }

    68% {
        transform: rotate(1.5deg)
    }

    70% {
        transform: rotate(0.5deg)
    }

    72% {
        transform: rotate(-0.5deg)
    }

    74% {
        transform: rotate(1.5deg)
    }

    76% {
        transform: rotate(0.5deg)
    }

    78% {
        transform: rotate(1.5deg)
    }

    80% {
        transform: rotate(1.5deg)
    }

    82% {
        transform: rotate(0.5deg)
    }

    84% {
        transform: rotate(1.5deg)
    }

    86% {
        transform: rotate(1.5deg)
    }

    88% {
        transform: rotate(0.5deg)
    }

    90% {
        transform: rotate(-0.5deg)
    }

    92% {
        transform: rotate(1.5deg)
    }

    94% {
        transform: rotate(1.5deg)
    }

    96% {
        transform: rotate(-0.5deg)
    }

    98% {
        transform: rotate(0.5deg)
    }

    0%,
    100% {
        transform: rotate(0)
    }
}

@keyframes compass {
	63% { -webkit-transform: rotate( -3deg); -moz-transform: rotate( -3deg); -ms-transform: rotate( -3deg); -o-transform: rotate( -3deg); transform: rotate( -3deg);} 
	28% { -webkit-transform: rotate( 4deg); -moz-transform: rotate( 4deg); -ms-transform: rotate( 4deg); -o-transform: rotate( 4deg); transform: rotate( 4deg);} 
	88% { -webkit-transform: rotate( 3deg); -moz-transform: rotate( 3deg); -ms-transform: rotate( 3deg); -o-transform: rotate( 3deg); transform: rotate( 3deg);} 
	14% { -webkit-transform: rotate( -6deg); -moz-transform: rotate( -6deg); -ms-transform: rotate( -6deg); -o-transform: rotate( -6deg); transform: rotate( -6deg);} 
	75% { -webkit-transform: rotate( 6deg); -moz-transform: rotate( 6deg); -ms-transform: rotate( 6deg); -o-transform: rotate( 6deg); transform: rotate( 6deg);} 
	100% { -webkit-transform: rotate( 6deg); -moz-transform: rotate( 6deg); -ms-transform: rotate( 6deg); -o-transform: rotate( 6deg); transform: rotate( 6deg);} 
	57% { -webkit-transform: rotate( 2deg); -moz-transform: rotate( 2deg); -ms-transform: rotate( 2deg); -o-transform: rotate( 2deg); transform: rotate( 2deg);} 
	50% { -webkit-transform: rotate( -6deg); -moz-transform: rotate( -6deg); -ms-transform: rotate( -6deg); -o-transform: rotate( -6deg); transform: rotate( -6deg);} 
	43% { -webkit-transform: rotate( 6deg); -moz-transform: rotate( 6deg); -ms-transform: rotate( 6deg); -o-transform: rotate( 6deg); transform: rotate( 6deg);} 
	35% { -webkit-transform: rotate( -4deg); -moz-transform: rotate( -4deg); -ms-transform: rotate( -4deg); -o-transform: rotate( -4deg); transform: rotate( -4deg);} 
	0% { -webkit-transform: rotate( 0deg); -moz-transform: rotate( 0deg); -ms-transform: rotate( 0deg); -o-transform: rotate( 0deg); transform: rotate( 0deg);} 
}

@-webkit-keyframes compass {
	63% { -webkit-transform: rotate( -3deg); -moz-transform: rotate( -3deg); -ms-transform: rotate( -3deg); -o-transform: rotate( -3deg); transform: rotate( -3deg);} 
	28% { -webkit-transform: rotate( 4deg); -moz-transform: rotate( 4deg); -ms-transform: rotate( 4deg); -o-transform: rotate( 4deg); transform: rotate( 4deg);} 
	88% { -webkit-transform: rotate( 3deg); -moz-transform: rotate( 3deg); -ms-transform: rotate( 3deg); -o-transform: rotate( 3deg); transform: rotate( 3deg);} 
	14% { -webkit-transform: rotate( -8deg); -moz-transform: rotate( -8deg); -ms-transform: rotate( -8deg); -o-transform: rotate( -8deg); transform: rotate( -8deg);} 
	75% { -webkit-transform: rotate( 6deg); -moz-transform: rotate( 6deg); -ms-transform: rotate( 6deg); -o-transform: rotate( 6deg); transform: rotate( 6deg);} 
	100% { -webkit-transform: rotate( 12deg); -moz-transform: rotate( 12deg); -ms-transform: rotate( 12deg); -o-transform: rotate( 12deg); transform: rotate( 12deg);} 
	57% { -webkit-transform: rotate( 12deg); -moz-transform: rotate( 12deg); -ms-transform: rotate( 12deg); -o-transform: rotate( 12deg); transform: rotate( 12deg);} 
	50% { -webkit-transform: rotate( -60deg); -moz-transform: rotate( -60deg); -ms-transform: rotate( -60deg); -o-transform: rotate( -60deg); transform: rotate( -60deg);} 
	43% { -webkit-transform: rotate( 30deg); -moz-transform: rotate( 30deg); -ms-transform: rotate( 30deg); -o-transform: rotate( 30deg); transform: rotate( 30deg);} 
	35% { -webkit-transform: rotate( -15deg); -moz-transform: rotate( -15deg); -ms-transform: rotate( -15deg); -o-transform: rotate( -15deg); transform: rotate( -15deg);} 
	0% { -webkit-transform: rotate( 0deg); -moz-transform: rotate( 0deg); -ms-transform: rotate( 0deg); -o-transform: rotate( 0deg); transform: rotate( 0deg);} 
}