@charset "UTF-8";

@media screen and (min-width: 769px) {
    .sp {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .pc {
        display: none !important;
    }

    main {
        gap: 12vw;
    }

    h2 {
        height: auto;
        padding: 0 5%;
    }

    .other h2 {
        order: 1;
        padding: 0 5% 0 0;
    }

    .head-logo {
        top: 5vw;
        left: 5vw;
        width: 15%;
    }

    .fv-container {
        padding: unset;
    }

    .fv-img {
        border-radius: 0 0 7vw 7vw;
    }

    .fv-ttl {
        bottom: 0;
    }

    .copy-container {
        padding: 0 5%;
    }

    .copy-container p {
        font-size: 1.4rem;
    }

    .furniture-container {
        gap: 5vw;
    }

    .furniture-container .illust {
        top: 1.4%;
        right: 1%;
        width: 36%;
    }

    .furniture-list {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 5%;
    }

    .other-container {
        padding: 12vw 0 12vw 5%;
        border-radius: unset;
    }

    .other-container .illust {
        top: calc(34% - 120px);
        left: -2%;
        right: unset;
        width: 30%;
    }

    .other-container .col.swiper {
        padding: 0 5% 0 0;
    }

    .other .swiper-nav {
        order: 3;
        padding-right: 5%;
        width: 100% !important;
    }

    .other-container .col.swiper {
        order: 2;
    }

    .notes-container {
        padding: 0 5%;
    }

    footer {
        margin-top: unset;
        padding: unset;
    }

    .low footer {
        margin-top: 12vw;
    }

    .foot-container {
        border-radius: 7vw 7vw 0 0;
    }

    .foot-logo {
        width: 20%;
    }

    .service-btn {
        top: unset;
        left: 2.5%;
        bottom: 50px;
        width: 25%;
    }

    .lowshop {
        padding: 0 5%;
    }

    .lowshop-container {
        gap: 5vw;
        padding: 10% 5%;
        border-radius: 7vw;
    }

    .product {
        flex-direction: column;
        gap: 5vw;
    }

    .lowshop .product-img {
        width: 100% !important;
    }

    .product-main {
        width: 100%;
    }

    .btn-main {
        width: 280px;
    }

    .low .other-container {
        padding: 0 0 0 5%;
    }

    .modal-item {
        gap: 5vw;
        width: 90%;
        padding: 0 5%;
        border-radius: 7vw;
    }

    .modal-item.open {
        padding: 10% 5%;
    }

    .modal-item h3 span,
    .lowshop-container h3 span {
        font-size: 1.2rem;
    }

    .modal-item h3,
    .lowshop-container h3 {
        font-size: 2.2rem;
    }

    .product-img {
        width: 100% !important;
    }

    .modal-close {
        top: 2.5% !important;
        left: unset;
        right: 2.5%;
        width: 40px;
        height: 40px;
    }

    .product {
        position: relative;
    }

    .product .swiper-nav {
        top: calc(40vw - 12px);
        width: 100%;
    }

    .modal-item .product .swiper-button-next,
    .product .swiper-button-next {
        right: -14px;
        left: auto;
    }
}

@media screen and (max-height: 750px) {
    .modal-close {
        top: 4%;
    }
}