@charset "utf-8";

/* BOAT RACE YOUNG DERBY レーサーズカードコレクションキャンペーン特設サイト ボートレース　ルール説明CSS　rule.css */

/*
---------------------------------------------------- */

#rule {
    background: #00A0E9;
    background: linear-gradient(0deg, rgba(0, 160, 233, 1) 0%, rgba(16, 9, 100, 1) 100%);
    color: #fff;
}

body#rule::after {
    content: none;
}

#rule header img {
    width: 100%;
    cursor: pointer;
}

.rule_inner {
    width: 100%;
    padding: 0 20px;
    text-align: center;
    margin-top: 20px;
}

.rule_img img {
    width: 100%;
    max-width: 768px;
}

.rule_inner .bt_rule_back {
    margin-bottom: 100px;
}


/* Media Queries
----------------- */
@media screen and (min-width: 768px) {

    .rule_inner {
        width: 100%;
        max-width: 768px;
        padding: 0;
        margin: 20px auto 0;
    }

}

/* MQ */

@media screen and (max-width: 559px) {

    .rule_inner .bt_rule_back img {
        width: 100px;
    }

}

/* MQ */




* {
    box-sizing: border-box;
    scrollbar-color: transparent transparent;
    /* thumb and track color */
    scrollbar-width: 0px;
}

*::-webkit-scrollbar {
    width: 0;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
}

* {
    -ms-overflow-style: none;
}

ol,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.carousel {
    position: relative;
    padding-top: 91%;
    /*  padding-top: 75%;*/
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px;
}

/* Media Queries
----------------- */
@media screen and (min-width: 768px) {

    .carousel {
        padding-top: 682px;
    }

}

/* MQ */


.carousel__viewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    /*  overflow-x: scroll;*/
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overflow: hidden;
}

.carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    counter-increment: item;
}

.carousel__snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /*  height: 100%;*/
    scroll-snap-align: center;
}

@media (hover: hover) {
    .carousel__snapper {
        animation-name: tonext, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }

    .carousel__slide:last-child .carousel__snapper {
        animation-name: tostart, snap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel__snapper {
        animation-name: none;
    }
}

.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
    animation-name: none;
}

.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
    position: absolute;
    top: 0;
    margin-top: 50%;
    width: 40px;
    height: 78px;
    transform: translateY(-50%);
    border-radius: 50%;
    font-size: 0;
    outline: 0;
}

.carousel__prev img,
.carousel__next img {
    width: 100%;
}

.carousel::before,
.carousel__prev {
    left: 0;
}

.carousel::after,
.carousel__next {
    right: 0;
}


/* Media Queries
----------------- */
@media screen and (max-width: 559px) {

    .carousel::before,
    .carousel::after,
    .carousel__prev,
    .carousel__next {
        width: 20px;
        height: 39px;
    }

}

/* MQ */