header,
main {
    max-width: 800px;
    margin: auto;
}

header {
    position: relative;
}

.header-links {
    position: absolute;
    display: flex;
}


@media screen and (max-width: 767px) {
    .header-links {
        top: 0;
        font-size: 2vw;
        width: 100%;
        height: 9.5vw;
        background-color: transparent;
    }

    .header-link {
        width: 25%;
        height: 100%;
        background-color: #ff0074;
        border-right: 5px solid #FEDD03;
    }

    .header-links a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF;
        font-weight: bold;
    }
}

@media screen and (min-width: 768px) {
    .header-links {
        top: min(16px, 2vw);
        right: min(16px, 2vw);
        font-size: min(16px, 2vw);
        gap: 12px;
    }
}

footer {
    position: relative;
}

.footer-inner-links-wrap {
    position: absolute;
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
}

.footer-inner-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
}

@media screen and (max-width: 767px) {
    .footer-inner-links-wrap {
        top: 25%;
        justify-content: flex-start;  /* ← 左寄せに変更 */
        padding-left: 16vw;           /* ← 左からの余白で右寄せ風に見せる */
    }

    .footer-inner-links {
        font-size: 4vw;
        gap: 3vw 3vw;
    }
}

@media screen and (min-width: 768px) {
    .footer-inner-links-wrap {
        top: 18%;
    }

    .footer-inner-links {
        font-size: 1.5vw;
        gap: 2vw 1.5vw;
    }
}

.footer-inner-links li:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.footer-inner-links li:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
}

.footer-inner-links li:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}

.footer-inner-links li:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
}

.footer-inner-links li:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
}

.footer-inner-links li:nth-child(4) {
    grid-column: 1;
    grid-row: 4;
}


.tel-block {
    position: absolute;
    display: flex;
    flex-direction: column;
}

.tel-wrap a {
    display: flex;
    align-items: flex-end;
    color: #FF0074;
    font-weight: bold;
}

.tel-prev {
    font-size: 0.7em;
}

@media screen and (max-width: 767px) {
    .tel-title {
        font-size: 3.35vw;
        line-height: 1.3;
        margin-bottom: 1vw;
    }

    .tel-block {
        top: 53%;
        gap: 2vw;
        width: 100%;
        align-items: center;
    }

    .tel-wrap {
        font-size: 7vw;
    }

    .tel-description {
        font-size: 3.175vw;
        line-height: 1.3;
    }
}

@media screen and (min-width: 768px) {
        .tel-title {
        font-size: 1.35vw;
        line-height: 1.3;
        margin-bottom: 1vw;
    }

    .tel-block {
        top: 15%;
        right: 4%;
        gap: 1.5vw;
    }

    .tel-wrap {
        font-size: 3vw;
    }

    .tel-description {
        font-size: 1.35vw;
        line-height: 1.3;
    }
}

.footer-legal-links {
    position: absolute;
    display: flex;
}

@media screen and (max-width: 767px) {
    .footer-legal-links {
        top: 91%;
        font-size: 2.5vw;
        gap: 3vw;
        width: 100%;
        justify-content: center;
    }
}

@media screen and (min-width: 768px) {
    .footer-legal-links {
        flex-direction: column;
        top: 50%;
        left: 4.5%;
        font-size: 1.5vw;
        gap: 1.5vw;
    }
}

.copyright {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #FFF;
}

@media screen and (max-width: 767px) {
    .copyright {
        bottom: 2vw;
        font-size: 2vw;
    }
}

@media screen and (min-width: 768px) {
    .copyright {
        bottom: 1.25vw;
        font-size: min(10px, 2vw);
    }
}