@charset "utf-8";

.cta {
    background: url(/system_panel/uploads/images/20260312210152652796.jpg) no-repeat center/cover;
}

.cta .inner {
    width: 90%;
    margin: 0 auto;
    padding: 44px 0 58px;
}

.cta .inner .ttl-ja {
    font-family: var(--ja);
    font-weight: 700;
    font-size: clamp(2rem, 1.575rem + 1.81vw, 3.75rem);
    text-align: center;
    color: #072651;
    margin-bottom: 38px;
}

.cta .inner .sec-body {
    position: relative;
    z-index: 5;
    padding: 64px 0 50px;
}

.cta .inner .sec-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(9px) brightness(1.12);
    -webkit-backdrop-filter: blur(9px) brightness(1.12);
    background: rgba(255, 255, 255, 0.27);
    z-index: -1;
}

.cta .inner .sec-body .item {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
}

.cta .inner .sec-body .item.top {
    padding-bottom: 38px;
    border-bottom: 0.5px solid #072651;
    margin-bottom: 38px;
}

.cta .inner .sec-body .item .desc {
    font-family: var(--ja);
    font-weight: 400;
    font-size: clamp(0.875rem, 0.723rem + 0.65vw, 1.5rem);
    text-align: center;
    color: #000;
    margin-bottom: 30px;
}

.cta .inner .sec-body .item .btnarea {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.cta .inner .sec-body .item .morebtn {
    max-width: 445px;
    width: 100%;
    margin: 0;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}



.cta .inner .sec-body .item .morebtn a {
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    height: 115px;
}

.cta .inner .sec-body .item .morebtn:hover {
    opacity: 1;
    transform: scale(.95);
}

.cta .inner .sec-body .item .morebtn.tel a {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.cta .inner .sec-body .item .morebtn.tel a .time {
    font-size: clamp(0.875rem, 0.784rem + 0.39vw, 1.25rem);
    font-weight: 400;
}

.cta .inner .sec-body .item .morebtn.tel .num {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.cta .btnarea .btn-shop {
    max-width: 453px;
    height: 115px;
    background: #e29c3d;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.cta .btnarea .btn-line {
    max-width: 445px;
    font-family: var(--ja);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    color: #fff;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transition: var(--default);
    background: #0a8645;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.cta .btnarea .btn-shop:hover,
.cta .btnarea .btn-line:hover {
    transform: scale(.95);
    opacity: 1;
}

.cta .btnarea .btn-shop a,
.cta .btnarea .btn-line a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ja);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    color: #fff;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.footer {
    background: linear-gradient(to left, #1675b1 0%, #156ea8 3.91%, #072651 100%);
}

.footer .inner {
    width: 80%;
    margin: 0 auto;
    padding: 96px 0 40px;
}

.footer .inner .top {
    display: flex;
    gap: 1%;
    justify-content: space-between;
    padding-bottom: 27px;
    border-bottom: 0.5px solid #fff;
    margin-bottom: 22px;
}

.footer .navi-logo {
    color: #FFF;
}

.footer .navi-logo .f-logo {
    max-width: 240px;
    width: 80%;
    display: block;
    margin-bottom: 25px;
    transition: var(--default);
}

.footer .navi-logo .f-logo:hover {
    opacity: 50%;
}

.footer .navi-logo .address {
    font-family: var(--ja);
    font-weight: 400;
    font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
    line-height: calc(27/16);
    color: #fff;
    margin-bottom: 13px;
}

.footer .navi-logo .telnum {
    display: flex;
    align-items: center;
    gap: 1em;
    font-family: var(--ja);
    font-weight: 400;
    font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
    color: #fff;
}

.footer .navi-logo a.telnum {
    transition: var(--default);
    margin-bottom: 12px;
}

.footer .navi-logo a.telnum:hover {
    opacity: 50%;
}

.footer .inner .f-navi {
    display: grid;
    grid-template-columns: repeat(3, 28%);
    justify-content: flex-end;
    gap: 2%;
    color: #FFF;
    flex: 1;
}

.footer .inner .f-navi .navi-left,
.footer .inner .f-navi .navi-center,
.footer .inner .f-navi .navi-right {
    font-family: var(--ja);
    font-weight: 400;
    font-size: clamp(0.875rem, 0.784rem + 0.39vw, 1.25rem);
    text-align: left;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer .inner .f-navi .navi a {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--default);
}

.footer .inner .f-navi .navi a:hover {
    opacity: 50%;
}

.footer .inner .f-navi .navi a::before {
    content: "";
    width: clamp(0.813rem, 0.752rem + 0.26vw, 1.063rem);
    height: clamp(0.813rem, 0.752rem + 0.26vw, 1.063rem);
    border-radius: 50px;
    border: 1px solid #fff;
    display: inline-block;
}

.footer .inner .f-navi .navi-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer .inner .f-navi .navi-left .child {
    font-family: var(--ja);
    font-weight: 400;
    font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
    text-align: left;
    color: #fff;
}

.footer .inner .f-navi .navi-left .list {
    display: flex;
    gap: 20px;
    flex-direction: column;
}


.footer .inner .f-navi .navi-left .child::before {
    content: none;
}

.footer .copy {
    text-align: center;
    font-family: var(--ja);
    font-weight: 400;
    font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
    color: #fff;
}

@media (max-width: 1200px) {
    .footer .inner .top {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .footer .inner .f-navi {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        gap: 10%;
    }

    .footer .navi-logo .address {
        text-align: center;
    }

    .footer .navi-logo a.telnum,
    .footer .navi-logo .telnum {
        justify-content: center;
    }

    .footer {
        background: linear-gradient(to top, #1675b1 0%, #156ea8 3.91%, #072651 100%);
    }

    .footer .inner {
        padding: 54px 0 30px;
        width: 93%;

    }
}

@media (max-width: 969px) {
    .footer .inner .f-navi {
        gap: 6%;
    }
}



@media (max-width: 767px) {
    .cta .inner .sec-body .item .btnarea {
        flex-direction: column;
        gap: 25px;

    }

    .cta .inner .sec-body .item .morebtn a,
    .cta .btnarea .btn-shop,
    .cta .btnarea .btn-line {
        height: 81px;
    }

    .cta .inner .sec-body .item .morebtn,
    .cta .btnarea .btn-shop,
    .cta .btnarea .btn-line {
        max-width: none;
    }

    .footer .inner {
        width: 80%;
    }

    .footer .inner .f-navi {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "left left"
            "center right";
        row-gap: 40px;
    }

    .footer .inner .f-navi .navi-left {
        grid-area: left;
        gap: 20px;
    }

    .footer .inner .f-navi .navi-center {
        grid-area: center;
        gap: 40px;
    }

    .footer .inner .f-navi .navi-right {
        grid-area: right;
        gap: 40px;
    }


}