@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%;
}

/* バナーグリッド */

@keyframes fadeInUpEvent {
    from {
        opacity: 0;
        transform: translateY(5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

    opacity: 0;
    transform: translateY(5rem);
    animation-fill-mode: forwards;
}

.banner-grid h4,
.banner-grid h4 strong {
    margin: 0 0 0.5rem 0;

    color: #fff;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.3;
    font-weight: 600;

    filter: drop-shadow(2px, 2px, 1px, rgb(0 0 0 / 0.8));
}

.banner-grid h4 span {
    font-size: clamp(1.1rem, 1.6vw, 1.7rem);
    line-height: 1.3;
}

.banner-grid strong.frame {
    margin: 0 0.3rem 0 0;
    padding: 0.1rem 0.2rem 0.1rem 0.2rem;

    display: inline-block;
    border: 1px solid #fff !important;
    border-radius: 3px;
    font-weight: 600;

    filter: drop-shadow(2px, 2px, 1px, rgb(0 0 0 / 0.8));
}

.banner-grid p,
.banner-grid p strong {
    color: #fff;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    line-height: 1.3;
    font-weight: 400;
}

.banner-grid p strong {
    font-weight: 600;
}



.banner-grid>div:first-child>a {
    background-color: rgba(0, 61, 85, 0.8);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 0s;
    cursor: pointer;
}

.banner-grid>div:first-child>a h4 {
    filter: drop-shadow(1px 1px 1px rgb(0 80 114 / 1.0));
}

.banner-grid>div:nth-child(2)>a {
    background-color: rgba(99, 0, 82, 0.8);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 0.5s;
    cursor: pointer;
}

.banner-grid>div:nth-child(2)>a h4 {
    filter: drop-shadow(1px 1px 1px rgb(125 75 117 / 1.0));
}

.banner-grid>div:nth-child(3)>a {
    background-color: rgba(47, 81, 0, 0.8);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 1.0s;
    cursor: pointer;
}

.banner-grid>div:nth-child(3)>a h4 {
    filter: drop-shadow(1px 1px 1px rgb(64 102 12 / 1.0));
}

.banner-grid>div:last-child>a {
    background-color: rgba(5, 54, 145, 0.9);
    animation: fadeInUpEvent 1s ease-out forwards;
    animation-delay: 1.5s;
    cursor: pointer;
}

.banner-grid>div:last-child>a h4 {
    filter: drop-shadow(1px 1px 1px rgb(128 98 0 / 1.0));
}

@media (max-width: 767.98px) {

    /* sm 以下の画面サイズの場合のスタイル */
    .banner-grid {
        margin: 0;
        padding: 1rem !important;
        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 {
        margin: 0;
        padding: 1rem !important;
        grid-template-columns: 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 以上の画面サイズの場合のスタイル */
}



/**/


/* 説明会用バナー */
.banner-grid div.briefing-session {
    margin: 0;
    padding: 1rem;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    direction: rtl;
    grid-auto-flow: dense;

    column-gap: 1rem;
    row-gap: 0rem;

    color: #1fae02;
    border-radius: 1rem;
    background: repeating-linear-gradient(-45deg, #e8fcf4, #e8fcf4 5px, #f9fefc 0, #f9fefc 10px);
    border: 4px solid rgb(2 255 154 / 0.3);

    filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.3));

}

.banner-grid div.briefing-session a {
    margin: 0;
    padding: 0.2rem 0 0.2rem 0;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1rem !important;
    line-height: 1;
    color: rgb(0 172 146 / 0.9);
    border: 1px solid rgb(0 172 146 / 0.9);
    background-color: #fff;
    border-radius: 0;
}

.banner-grid div.briefing-session a:hover {
    background-color: rgb(0 172 146 / 0.5) !important;
}


.banner-grid div.briefing-session a h3 {
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.4rem;
    color: rgb(0 172 146 / 1.0);
}

.banner-grid div.briefing-session a:nth-child(2) {
    border-bottom: 0;
}

.banner-grid div.briefing-session a:last-child {
    border-top: 0;
}

.banner-grid div.briefing-session a:hover {
    background-color: rgb(255 255 255 / 0.5);
}

.banner-grid div.briefing-session h2 {
    font-size: clamp(1.6rem, 1.8vw, 2.8rem);
    line-height: 1.2;
    font-weight: 400;
    text-align: center;
    color: rgb(0 172 6 / 1.0);
}

.event-detail,
.event-button-area {
    display: grid;
}


/* Small devices (phones) */
@media (max-width: 767.98px) {

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

    .event-parts-grid h4 {
        font-size: calc(100vw / 25);
        line-height: 1.4rem;
        margin: 0;
    }

    .banner-grid p {
        font-size: 0.7rem;
        line-height: 0.9rem;
    }

    .event-detail,
    .event-button-area {
        display: none;
    }



    .banner-grid div.briefing-session h2 {
        font-size: 4rem !important;
        line-height: 4.4rem !important;
    }

    .banner-grid div.briefing-session h3,
    .banner-grid div.briefing-session h4 {
        font-size: 0.9rem !important;
        line-height: 1.3rem !important;
    }

    .banner-grid div.briefing-session h2 {
        font-size: 1.6rem !important;
        line-height: 2.0rem !important;
    }

    .banner-grid div.briefing-session h5 {
        padding: 2px !important;
        font-size: 0.8rem !important;
        line-height: 1.0rem !important;
    }
}

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* md の画面サイズの場合のスタイル */
    .banner-grid {
        margin: 0;
        padding: 0;
        grid-template-columns: 1fr 1fr;
    }

    .event-parts-grid h4 {
        font-size: calc(50vw / 25);
        line-height: 1.6rem;
        margin: 0;
    }

    .banner-grid p {
        font-size: 1.0rem;
        line-height: 1.2rem;
    }

    .event-detail,
    .event-button-area {
        display: none;
    }

    .banner-grid div.briefing-session h3,
    .banner-grid div.briefing-session h4 {
        font-size: 0.9rem !important;
        line-height: 1.3rem !important;
    }

    .banner-grid div.briefing-session h2 {
        font-size: 1.6rem !important;
        line-height: 2.0rem !important;
    }

    .banner-grid div.briefing-session h5 {
        padding: 2px !important;
        font-size: 0.8rem !important;
        line-height: 1.0rem !important;
    }
}

/* Large devices (desktops) */
@media (min-width: 992px) {

    /* lg 以上の画面サイズの場合のスタイル */
}


/*--------------------------------------------------------------
  各所バナー用
--------------------------------------------------------------*/

.basecolor {
    margin: 0;
    padding: 1rem;
    width: 100%;
    background-color: rgb(var(--main-color) / 1.0);
    color: #fff;
    overflow: hidden;
    text-align: center;
}

.basecolor h3 {
    color: #fff;
}