.header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    transition: .3s ease-in-out;
    background-color: #fff;
    opacity: 0;
}

@media screen and (max-width: 1000px) {
    .header {
        position: fixed;
    }
}

.header.is-active {
    opacity: 1;
}

.header__inr {
    width: 100%;
    padding-left: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between
}

.header__logo {
    max-width: 150px;
    width: 100%
}

.header__logo a {
    width: 100%
}

.header.fixed {
    position: fixed;
    transition: .3s ease-in-out;
    width: 100%;
    left: 0;
    z-index: 10;
    top: 0
}

.navi__area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 48px
}

.header__navi .last a {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--navy)
}

.header__navi .last img {
    width: 21px
}

@media screen and (max-width: 1000px) {
    .header {
        background-color: rgba(0, 0, 0, 0);
    }

    .header__inr {
        padding: 8.1081081081vw 9.7297297297vw;
        padding-top: 30px;
        padding-bottom: 0;
        padding-right: 0;
        display: block;
        /* background-color: rgba(0,0,0,0.1); */
    }

    .header__logo {
        max-width: 43.2432432432vw
    }

    .header__navi {
        font-size: max(10px, 4.8vw);
        width: 80%;
        position: fixed;
        top: 0;
        right: 0;
        padding-top: 16.2162162162vw;
        height: 80%;
        background-color: rgba(255, 255, 255, .95);
        transform: translateX(100%);
        padding-right: 20px;
        padding-left: 20px;
        transition: .5s ease-in-out;
    }

    .header__navi.active {
        -webkit-transform: translate(0);
        transform: translate(0);
        z-index: 10
    }

    .header__navi a {
        width: 100%
    }

    .navi__list + .navi__list {
        margin-top: 1em;
    }

    .navi__area {
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }
}

.footer {
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: 0;
    padding-top: 90px;
    padding-bottom: 100px;
    display: flex;
    justify-content: space-between
}

.footer__inr {
    max-width: 1120px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.footer__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between
}

.footer__address {
    color: #232323
}

.footer__logo {
    max-width: 220px
}

.footer__logo a {
    display: inline-block;
    width: 100%;
    height: 100%
}

.footer__navi ul {
    display: flex;
    align-items: center;
    gap: 0 35px
}

.footer__navi ul {
    margin-bottom: 22px
}

.footer .tel {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0 4px;
    font-size: 2rem
}

.footer .tel img {
    vertical-align: initial
}

.footer .tel span {
    width: 14px;
    display: inline-block
}

.footer .copy {
    font-size: 1.2rem;
    margin: 20px auto 16px;
    text-align: center
}

.footer .sns {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0 6px
}

.footer .sns li {
    width: 30px
}

@media screen and (max-width: 1000px) {
    .footer {
        padding-top: 21.6216216216vw;
        padding-bottom: 10.8108108108vw;
        flex-direction: column;
        width: 89.1891891892vw;
        margin-left: auto;
        margin-right: auto
    }

    .footer__inr {
        padding-left: 0;
        padding-right: 0;
        width: 81.0810810811vw
    }

    .footer__top {
        flex-direction: column
    }

    .footer__bottom {
        margin-top: 13.5135135135vw;
        display: flex;
        flex-direction: column
    }

    .footer__address {
        margin-top: 13.5135135135vw;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .footer__logo {
        max-width: 59.4594594595vw;
        margin-left: auto;
        margin-right: auto
    }

    .footer__navi {
        margin-top: 12.972972973vw
    }

    .footer__navi ul {
        justify-content: space-between
    }

    .footer__navi ul:nth-of-type(1) li:nth-child(1) {
        width: 100%
    }

    .footer__navi ul {
        flex-wrap: wrap;
        gap: 2.7027027027vw 7vw
    }

    .footer__navi ul {
        margin-bottom: 2.7027027027vw
    }

    .footer .tel {
        gap: 0 4px;
        font-size: max(10px, 5.405vw)
    }

    .footer .tel span {
        width: 3.7837837838vw
    }

    .footer .copy {
        margin: 20px auto 16px;
        order: 3;
        font-size: max(10px, 3.243vw)
    }

    .footer .sns {
        order: 2;
        position: initial;
        bottom: initial;
        right: initial;
        gap: 0 2.1621621622vw;
        justify-content: center
    }

    .footer .sns li {
        width: 12.4324324324vw
    }
}

@media screen and (min-width: 550px)and (max-width: 1000px) {
    .header-hamburger {
        top: 24px;
    }
}

@media screen and (max-width: 1000px) {
    .header-hamburger {
        position: fixed;
        z-index: 20;
        top: 22px;
        right: 19px;
        display: block;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }

    .header__navi .last a {
        width: 100%;
    }

    .header-hamburger_button {
        height: 100%;
        width: 100%;
        display: block;
        border: 0;
        background-color: rgba(0, 0, 0, 0)
    }

    .header-hamburger__line {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 1.5px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0)
    }

    .header-hamburger__line::before {
        margin: auto;
        right: 0;
        top: -6px
    }

    .header-hamburger__line::after {
        bottom: -6px;
        margin: auto;
        right: 0
    }

    .header-hamburger__line::before,
    .header-hamburger__line::after {
        background-color: #fff;
        content: "";
        display: block;
        height: 1.5px;
        position: absolute;
        width: 100%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        transition: .3s
    }

    .header-hamburger__line.active::before {
        background-color: #002448;
    }

    .header-hamburger__line.active::after {
        background-color: #002448;
    }
}

/*# sourceMappingURL=common_header_footer.css.map */