@charset "UTF-8";

.notification .contents{ margin-top: 0; padding-bottom: 5rem;}

.notification .intro-image{ display: flex; justify-content: space-between; gap: 2rem;}
.notification .intro-image figure{ width: 48%; position: relative;}

.notification .content-tit{ text-align: center; color: var(--Color-Dark);}

.notification .contents:nth-of-type(2){ margin-bottom: 0;}
.notification .schedule{ max-width: 836px; margin: 0 auto;}
.notification .schedule-item{ margin-bottom: 4rem; padding-left: 2rem; background-color: #f2f2f2; border: 2px solid var(--Color-Brand); border-radius: 10px; font-size: var(--Body-L-M); position: relative;}
.notification .schedule-item:not(:last-of-type)::after { content: ''; display: block; border-top: 25px solid #00845c; border-right: 21px solid transparent; border-bottom: 0; border-left: 21px solid transparent; position: absolute; left: 50%; transform: translateX(-50%);}
.notification .schedule-item-em{ max-width: 250px; width: 100%; padding: 1rem 1.5rem; background-color: var(--Color-Brand); border-radius: 30px; color: var(--Color-White); font-size: var(--Body-M); font-weight: bold; position: absolute; top: -2rem; left: -2rem; text-align: center; z-index: 1;}
.notification .schedule-item-image{ width: 11%; position: absolute; top: -0.5rem; right: -2rem; z-index: 1;}
.notification .schedule-item-image:nth-of-type(2){ top: unset; bottom: -0.5rem;}
.notification .schedule-item .txt{  max-width: 585px; margin: 0 2rem 0 auto; padding: 1.5rem 2rem; color: var(--Color-Brand); font-size: var(--Body-L-M); font-weight: bold;}
.notification .schedule-item .txt .sub-txt{ display: inline-block;}
.notification .schedule-item .txt:nth-of-type(2){ border-top: 1px solid var(--Border); }
.notification .schedule-item .txt .sub-txt{ color: var(--Color-Dark); font-size: var(--Body-M);}
.notification .schedule-item:last-of-type{ margin-bottom: 2rem; border: 2px solid var(--Border-Orange);}
.notification .schedule-item:last-of-type .schedule-item-em{ background-color: var(--Border-Orange);}
.notification .schedule-item:last-of-type .txt{ color: var(--Color-Dark);}
.notification .schedule + .bottom-cap .inner-wrap { max-width: 836px; padding-left: 0;}
.notification .schedule + .bottom-cap .inner-wrap p { margin-bottom: 0;}

.notification .intro.black{ padding-top: 0; color: var(--Color-Dark);}
.notification .intro.black .intro-txt{ color: var(--Color-Dark);}

.notification .contents-image{ padding: 2rem; display: flex; justify-content: center; align-items: start; gap: 2rem; background-color: var(--Color-Brand);}
.notification .contents-image img{ width: 45%; object-fit: contain;}



@media (max-width: 768px) {

    .notification .contents:nth-of-type(2) { padding-bottom: var(--Space-L);}
    .notification .content-tit { margin-bottom: calc(var(--Space-L) * 2);}
    .notification .bg-white { padding: 2rem 1.5rem;}
    .notification .schedule-item { padding-left: 0;}
    .notification .schedule-item-em { max-width: 260px; padding: 0.5rem 1rem; top: -1.5rem; left: -1rem;}
    .notification .schedule-item-image { width: 20%; top: -2rem; right: -1rem;}
    .notification .schedule-item .txt { width: 90%; margin: 0 auto; padding: 2rem 0;}
    .notification .contents-image { flex-direction: column;}
    .notification .contents-image img { width: 100%;}

    .notification > .contents { padding-bottom: 0;}
}