/**
 * Footer Layout
 */
.l-footer {
    background: var(--color-white);
    color: var(--color-main);
    padding-top: clamp(40px, 5vw, 80px);
    border-top: 1px solid #eee;
}

.l-footer__inner {
    padding-bottom: clamp(30px, 4vw, 60px);
}

.l-footer__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
}

/* 会社情報 */
.l-footer__logo {
    width: 180px;
    margin-bottom: 25px;
}

.l-footer__address {
    font-style: normal;
    font-size: 14px;
    line-height: 2;
}

.l-footer__address p {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
}

.u-separator {
    margin: 0 15px;
    color: var(--color-main);
}

/* メインメニュー */
.l-footer__menu {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.l-footer__menu li a {
    font-size: 14px;
    transition: opacity 0.3s;
    font-weight: 400;
}

.l-footer__menu li a:hover {
    opacity: 0.7;
}

/**
 * Footer Bottom (Dark Area)
 */
.l-footer__bottom {
    background: var(--color-main);
    color: var(--color-white);
    padding: 20px 0;
}

.l-footer__sub-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 15px;
    font-size: 12px;
}

.l-footer__sub-menu li:not(:last-child):after {
    content: "／";
    margin-left: 20px;
}

.l-footer__copyright {
    text-align: center;
    font-size: 12px;
}

@media screen and (min-width: 769px) {

}
/**
 * Desktop Styles (769px〜)
 */
@media screen and (min-width: 1062px) {
    .l-footer__top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .l-footer__info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .l-footer__logo {
        margin-bottom: 0;
        width: 135px;
    }

    .l-footer__menu {
        flex-direction: row;
        gap: clamp(15px, 2vw, 30px);
    }

    .l-footer__bottom-inner {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }

    .l-footer__sub-menu {
        margin-bottom: 0;
    }

    .l-footer__copyright {
        text-align: left;
    }
}

/**
 * SP Styles (〜768px)
 */
@media screen and (max-width: 768px) {
    .l-footer__logo {
        margin: 0 0 30px 0;
    }
    
    .l-footer__address {
        text-align: left;
        max-width: fit-content;
        margin: 0 auto;
    }

    .l-footer__menu {
        text-align: left;
        padding-left: 20px;
    }

    .l-footer__sub-menu li:after {
        display: none; /* スマホでは区切り線を調整 */
    }
}


@media screen and (max-width: 468px) {
    .u-separator {
        display: none;
    }
    .l-footer__address p {
        flex-direction: column;
        font-size: 16px;
    }
    .l-footer__address p span:first-child {
        display: none;
    }
    .l-footer__menu {
        padding-left: 0;
        flex-direction: column;
        gap: 15px 30px;
    }
    .l-footer__menu li {
        padding: 15px 15px 0 15px;
        border-top: 1px solid;
    }
    .l-footer__menu li:last-child {
        padding-bottom: 15px;
        border-bottom: 1px solid;
    }
    .l-footer__menu li a {
        font-size: 16px;
    }
    .l-footer__address {
        max-width: 100%;
    }
    .l-footer__top {
        flex-direction: column;
        gap: 20px;
    }

}