@charset "utf-8";

/*--------------------------------------------------------------
  banner設定
--------------------------------------------------------------*/
.bottom-space {
    position:absolute;
    top:0;
    z-index:100;

    margin: 0;
    padding: 0;
    width: 100vw;
    height:100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.bottom-space>div:first-child {
    /* 余白いっぱいに引き伸ばす */
    flex-grow: 1;

    margin: 0;
    padding:0;

    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bottom-space>div:last-child {
    width: 100%;
}

/* バナーグリッド */

.banner-grid {
    margin: 0;
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
}

.banner-grid>div {
    margin: 0;
    padding: 0;
}

.banner-grid>div>a {
    display: block;
    margin: 0;
    padding: 1rem;
    text-decoration: none;
    transition: all 1s ease-out;
    background-color: rgb(255 255 255 / 0.5);
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 10px;
}


.banner-grid>div:first-child>a {
    background-color: rgb(255 255 255 / 0.9);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 0s;
    cursor: pointer;
}

.banner-grid>div:nth-child(2)>a {
    background-color: rgb(255 255 255 / 0.9);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 0.5s;
    cursor: pointer;
}

.banner-grid>div:nth-child(3)>a {
    background-color: rgb(255 255 255 / 0.9);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 1.0s;
    cursor: pointer;
}

.banner-grid>div:last-child>a {
    background-color: rgb(255 255 255 / 0.9);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 1.5s;
    cursor: pointer;
}


@media (max-width: 767.98px) {

    /* sm 以下の画面サイズの場合のスタイル */
    .banner-grid {
        grid-template-columns: 1fr;
        row-gap: 5px;
    }

    .banner-grid>div>a {
        padding: 0.5rem;
    }

    .banner-grid>div p {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    /* md の画面サイズの場合のスタイル */
    .banner-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 5px;
        row-gap: 5px;
    }

    .banner-grid>div>a {
        padding: 0.5rem;
    }

    .banner-grid>div p {
        display: none;
    }
}

@media (min-width: 992px) {
    /* lg 以上の画面サイズの場合のスタイル */
}