@import "./colors.css";

.padding-16 {
    padding: 0 1rem;
}

.footer {
    background-color: var(--color-light-pink);
}

.footer__text {
    color: var(--color-black);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: normal;
    @media screen and (max-width: 1023px) {
        font-size: 0.6875rem;
    }
}

.footer_warning {
    color: var(--color-black);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: normal;
    margin-top: 0.75rem;
    @media screen and (max-width: 1023px) {
        font-size: 0.6875rem;
    }
}

.footer_title {
    color: var(--color-black);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: normal;
    padding: 0.375rem 3.625rem;
    border-bottom: 2px solid var(--color-gentle-pink);
    position: relative;
    @media screen and (max-width: 1023px) {
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--color-soft-pink);
    }
}

.footer_title_condition:before {
    content: "";
    width: 11px;
    height: 2px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 23px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 100px;
    background-color: var(--color-gentle-pink);
    @media screen and (max-width: 1023px) {
        height: 1px;
        background-color: #757575;
    }
}

.footer_title_condition.is_active:after {
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

.footer_title_condition:after {
    content: "";
    width: 2px;
    height: 11px;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 27px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: -webkit-transform linear 0.2s;
    transition: -webkit-transform linear 0.2s;
    transition: transform linear 0.2s;
    transition: transform linear 0.2s, -webkit-transform linear 0.2s;
    border-radius: 100px;
    background-color: var(--color-gentle-pink);
    @media screen and (max-width: 1023px) {
        right: 28px;
        width: 1px;
        background-color: #757575;
    }
}
.footer_content {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 1rem 1rem 3.625rem;
    @media screen and (max-width: 1023px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0 1rem;
        border-bottom: 1px solid var(--color-soft-pink);
    }
}

.footer_item,
.footer_area {
    position: relative;
    color: #444;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    height: 30px;
    margin-bottom: 1.25rem;
    @media screen and (max-width: 1023px) {
        font-size: 0.6825rem;
        flex: none;
        max-width: none;
        border-bottom: 1px solid var(--color-soft-pink);
        margin-bottom: 0;
        padding: 0rem 0.25rem;
    }
}
.footer_content .footer_item:nth-last-child(1 of .footer_item),
.footer_content .footer_item:nth-last-child(2 of .footer_item),
.footer_area {
    border-bottom: none !important;
}

.footer_content .footer_area:nth-child(2n):before {
    content: "";
    display: inline-block;
    margin-right: 12px;
    vertical-align: middle;
}

.footer_item:after,
.footer_area:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    border-top: 2px solid var(--color-gentle-pink);
    border-right: 2px solid var(--color-gentle-pink);
    @media screen and (max-width: 1023px) {
        width: 5px;
        height: 5px;
        border-top: 1px solid #444;
        border-right: 1px solid #444;
        right: 0.625rem;
    }
}

.footer_item_last:after {
    display: none !important;
}

.footer__copyright {
    text-align: center;
    color: #757575;
    font-size: 0.75rem;
    font-weight: 400;
    @media screen and (max-width: 1023px) {
        font-size: 0.625rem;
    }
}
.footer .top_condition__itemTitle {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 15px 20px;
    border-bottom: 1px solid #b1b1b1;
}
.footer .top_condition__subList {
    margin-top: 0;
}
.footer .top_condition__anchor {
    box-shadow: none;
    background-color: transparent;
    border: none;
    border-radius: none;
}
.footer .top_condition__list {
    margin-top: 0;
}
.footer .top_condition__item:nth-child(n + 2) {
    margin-top: 0;
}
.footer .top_condition__subItem.-area:not(:first-child) {
    margin-top: 0;
}
.footer__logo__wrap {
    display: none;
}
.region_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1rem;
    @media screen and (max-width: 1023px) {
        padding: 0;
        flex-direction: column;
    }
}
.footer_nav {
    width: 100% !important;
    @media screen and (max-width: 1023px) {
        width: calc(90% - 256px);
    }
}

.footer__inner {
    @media screen and (min-width: 1024px) {
        max-width: 67rem;
    }
}
.footer_title_accordion {
    font-size: 0.875rem;
    color: var(--color-black);
    font-weight: 500;
    padding: 1rem 3.625rem 0.625rem 2.625rem;
    border-bottom: 1px solid var(--color-gentle-pink);
    position: relative;
    @media screen and (max-width: 1023px) {
        font-size: 0.75rem;
        padding: 0.625rem 1.5rem;
    }
}

.warning_age {
    margin-top: 1rem !important;
    @media screen and (max-width: 1023px) {
        margin-top: 0.875rem !important;
    }
}

.warning_content {
    margin-top: 0.25rem !important;
    margin-bottom: 1.5rem !important;
}
.footer__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

@media screen and (min-width: 1024px) {
    .footer_content .footer_item:not(:nth-child(4n + 1)):before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 16px;
        margin-left: -5px;
        vertical-align: middle;
    }
    .footer_item {
        flex: 0 0 25%;
        max-width: 25%;
    }
    .footer_area {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .top_area {
        margin-top: 1rem;
        padding-left: 2.625rem;
        max-width: 100%;
        margin-bottom: 0 !important;
    }
    .footer_area:nth-child(2n) {
        padding-left: 0.5rem;
    }
    .footer_item:after {
        right: 23%;
    }

    .footer_area::after {
        right: 15%;
    }
    .footer_area.top_area::after {
        right: 27px !important;
    }
    .top_condition__itemData .footer_content {
        padding-left: 2.625rem !important;
    }
    .footer_area:nth-child(2n)::after {
        right: 5% !important;
    }
    .footer_title.footer_title_condition::after,
    .footer_title.footer_title_condition::before {
        display: none;
    }

    .region_list
        > .top_condition__item:nth-child(even)
        > .footer_title_accordion {
        padding-left: 1.25rem;
    }
    .region_list
        > .top_condition__item:nth-child(even)
        > .top_condition__itemData
        > .footer_condition_header
        > .top_area {
        padding-left: 1.25rem;
    }
    .region_list
        > .top_condition__item:nth-child(even)
        > .top_condition__itemData
        > .footer_content {
        padding-left: 1.25rem !important;
    }
    .footer_item:nth-child(4n)::after {
        right: 12%;
    }
    .footer_item:hover,
    .footer_area:hover {
        color: var(--color-red);
    }

    .text_opportunity {
        margin-top: 1.875rem;
    }
    .opportunity_list {
        padding: 0 1rem;
    }
}

@media screen and (max-width: 1023px) {
    .footer_nav__list {
        margin-top: 12px;
    }
    .footer__topic {
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        color: #707070;
        padding: 10px 20px 0;
    }
    .footer__logo__wrap {
        display: flex;
    }
    .footer__logo__wrap figure {
        width: 50%;
    }
    .footer__logo__wrap figure img {
        width: 84%;
        display: block;
        margin: 16px auto 8px;
    }
    .footer__logo__wrap figure img:hover {
        opacity: 0.8;
    }
    .footer_nav__anchor {
        padding: 12px 20px;
        font-size: 10px;
    }

    .footer_content .footer_item:nth-child(2n):before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 16px;
        background: var(--color-soft-pink);
        margin-right: 10px;
        margin-left: -5px;
        vertical-align: middle;
    }
    .footer_condition_header {
        padding: 0 1rem;
    }
}

.footer_title_lever_2 {
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0.375rem 3.625rem;
    border-bottom: 2px solid var(--color-gentle-pink);
    @media screen and (max-width: 1023px) {
        padding: 0.625rem 1.5rem;
        font-size: 0.875rem;
        border-bottom: 1px solid var(--color-soft-pink);
    }
}