#modal{
    max-width: 650px;
}

.main-container {
    margin-top: 80px;
}

.search-criterias {
    font-size: 12px;
    line-height: 18px;
    display: flex;
    justify-content: end;
    gap: 16px;
    padding: 0 20px;
}

.sort-select-wrap,
.search-criteria-wrap {
    position: relative;
    display: flex;
    justify-content: end;
    cursor: pointer;
}

    .sort-select-wrap > div,
    .search-criteria-wrap > div {
        display: flex;
        gap: 4px;
        border: 1px solid var(--color-light);
        border-radius: 4px;
        padding: 8px 20px 8px 16px;
    }

    .sort-select-wrap .bg_img,
    .search-criteria-wrap .bg_img {
        width: 18px;
        height: 18px;
    }

    .sort-select-wrap div.sort {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M19 3L23 8H20V20H18V8H15L19 3ZM14 18V20H3V18H14ZM14 11V13H3V11H14ZM12 4V6H3V4H12Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .search-criteria-wrap div.conditions {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M8.5 7C8.5 5.89543 7.60457 5 6.5 5C5.39543 5 4.5 5.89543 4.5 7C4.5 8.10457 5.39543 9 6.5 9C7.60457 9 8.5 8.10457 8.5 7ZM10.5 7C10.5 9.20914 8.70914 11 6.5 11C4.29086 11 2.5 9.20914 2.5 7C2.5 4.79086 4.29086 3 6.5 3C8.70914 3 10.5 4.79086 10.5 7ZM21 4H13V6H21V4ZM21 11H13V13H21V11ZM21 18H13V20H21V18ZM6.5 19C5.39543 19 4.5 18.1046 4.5 17C4.5 15.8954 5.39543 15 6.5 15C7.60457 15 8.5 15.8954 8.5 17C8.5 18.1046 7.60457 19 6.5 19ZM6.5 21C8.70914 21 10.5 19.2091 10.5 17C10.5 14.7909 8.70914 13 6.5 13C4.29086 13 2.5 14.7909 2.5 17C2.5 19.2091 4.29086 21 6.5 21ZM6.5 8C7.05228 8 7.5 7.55228 7.5 7C7.5 6.44772 7.05228 6 6.5 6C5.94772 6 5.5 6.44772 5.5 7C5.5 7.55228 5.94772 8 6.5 8Z'%3E%3C/path%3E%3C/svg%3E");
    }

.sort-select-list {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    padding: 4px 0 !important;
    text-align: start;
    flex-direction: column;
    z-index: 100;
}

    .sort-select-list a {
        display: block;
        padding: 4px 16px;
    }

        .sort-select-list a.select-sort {
            background-color: var(--color-gg-base);
            color: #fff;
        }

.display-switching {
    display: flex;
    justify-content: end;
    margin: 16px 20px 0 20px;
}

    .display-switching label.btn {
        padding: 12px 12px 4px;
    }

        .display-switching label.btn span {
            width: 18px;
            height: 18px;
        }

            .display-switching label.btn span.big {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M4 2C3.44772 2 3 2.44772 3 3V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V3C21 2.44772 20.5523 2 20 2H4ZM5 13V4H19V13H5ZM4 17C3.44772 17 3 17.4477 3 18V22H5V19H19V22H21V18C21 17.4477 20.5523 17 20 17H4Z'%3E%3C/path%3E%3C/svg%3E");
            }

            .display-switching input:checked + label.btn span.big {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23fff'%3E%3Cpath d='M4 2C3.44772 2 3 2.44772 3 3V14C3 14.5523 3.44772 15 4 15H20C20.5523 15 21 14.5523 21 14V3C21 2.44772 20.5523 2 20 2H4ZM5 13V4H19V13H5ZM4 17C3.44772 17 3 17.4477 3 18V22H5V19H19V22H21V18C21 17.4477 20.5523 17 20 17H4Z'%3E%3C/path%3E%3C/svg%3E");
            }

            .display-switching label.btn span.tile {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='currentColor'%3E%3Cpath d='M3 3C2.44772 3 2 3.44772 2 4V10C2 10.5523 2.44772 11 3 11H10C10.5523 11 11 10.5523 11 10V4C11 3.44772 10.5523 3 10 3H3ZM4 9V5H9V9H4ZM3 13C2.44772 13 2 13.4477 2 14V20C2 20.5523 2.44772 21 3 21H10C10.5523 21 11 20.5523 11 20V14C11 13.4477 10.5523 13 10 13H3ZM4 19V15H9V19H4ZM13 4C13 3.44772 13.4477 3 14 3H21C21.5523 3 22 3.44772 22 4V10C22 10.5523 21.5523 11 21 11H14C13.4477 11 13 10.5523 13 10V4ZM15 5V9H20V5H15ZM14 13C13.4477 13 13 13.4477 13 14V20C13 20.5523 13.4477 21 14 21H21C21.5523 21 22 20.5523 22 20V14C22 13.4477 21.5523 13 21 13H14ZM15 19V15H20V19H15Z'%3E%3C/path%3E%3C/svg%3E");
            }

    .display-switching input:checked + label.btn span.tile {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23fff'%3E%3Cpath d='M3 3C2.44772 3 2 3.44772 2 4V10C2 10.5523 2.44772 11 3 11H10C10.5523 11 11 10.5523 11 10V4C11 3.44772 10.5523 3 10 3H3ZM4 9V5H9V9H4ZM3 13C2.44772 13 2 13.4477 2 14V20C2 20.5523 2.44772 21 3 21H10C10.5523 21 11 20.5523 11 20V14C11 13.4477 10.5523 13 10 13H3ZM4 19V15H9V19H4ZM13 4C13 3.44772 13.4477 3 14 3H21C21.5523 3 22 3.44772 22 4V10C22 10.5523 21.5523 11 21 11H14C13.4477 11 13 10.5523 13 10V4ZM15 5V9H20V5H15ZM14 13C13.4477 13 13 13.4477 13 14V20C13 20.5523 13.4477 21 14 21H21C21.5523 21 22 20.5523 22 20V14C22 13.4477 21.5523 13 21 13H14ZM15 19V15H20V19H15Z'%3E%3C/path%3E%3C/svg%3E");
    }


    /*一覧の表示*/
    .display-switching:has(#big:checked) + .content-card .product-list .content-item {
        width: calc(33.4% - 15px);
    }

        .display-switching:has(#big:checked) + .content-card .product-list .content-item .piano-placeholder::after {
            font-size: 18px;
        }


.piano-condition {
    margin-bottom: 12px;
    margin-top: 20px !important;
    color: #808080;
}

.fob-jpy, .approx {
    font-size: 13px !important;
}

.price-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.display-switching:has(#tile:checked) + .content-card .product-list .content-item .price-wrap {
    flex-direction: column-reverse;
    gap: 0px;
    align-items: start;
}

.display-switching:has(#tile:checked) + .content-card .product-list .content-item .sale-base-price {
    line-height: 12px;
}

.content-item .soldout-tag,
.incart-tag {
    width: 100%;
}


.list-footer {
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    margin-bottom: 40px;
    color: #666;
}

    .list-footer p {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 100px;
    }

.paging {
    font-size: 12px;
    line-height: 18px;
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 8px;
}

.paging ul {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 8px;
    padding-inline-start: 0;
}

    .paging li {
        list-style: none;
    }

    .paging .page-item:not(.active) a {
        text-decoration: none;
    }

    .paging .page-item.active a {
        color: #333;
        /*text-decoration-thickness: 2px;*/
        text-underline-offset: 6px;
    }

#pagination .bg_img {
    width: 18px;
    height: 18px;
}

#pagination .pagination-first {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%23666'%3E%3Cpath d='M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z'%3E%3C/path%3E%3C/svg%3E");
}

#pagination .pagination-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%23666'%3E%3Cpath d='M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
}

#pagination .pagination-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%23666'%3E%3Cpath d='M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z'%3E%3C/path%3E%3C/svg%3E");
}

#pagination .pagination-last {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%23666'%3E%3Cpath d='M19.1642 12L12.9571 5.79291L11.5429 7.20712L16.3358 12L11.5429 16.7929L12.9571 18.2071L19.1642 12ZM13.5143 12L7.30722 5.79291L5.89301 7.20712L10.6859 12L5.89301 16.7929L7.30722 18.2071L13.5143 12Z'%3E%3C/path%3E%3C/svg%3E");
}


@media (max-width: 900px) {
    .display-switching:has(#big:checked) + .content-card .product-list .content-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .main-container {
        margin-top: 110px;
    }

    .search-criterias {
        font-size: 10px;
        line-height: 16px;
        gap: 12px;
        padding: 0 10px;
    }

    .display-switching {
        margin: 16px 10px 0 10px;
    }


        /*一覧の表示*/
        .display-switching:has(#big:checked) + .content-card .product-list .content-item {
            width: 100% !important;
        }
        .display-switching:has(#big:checked) + .content-card .product-list .content-item a {
            display: flex;
            flex-direction: row;
        }
        .display-switching:has(#big:checked) + .content-card .product-list .content-item img {
            width: 55%;
        }
            .display-switching:has(#big:checked) + .content-card .product-list .content-item img + div {
                margin: 28px 0 0 8px;
            }
        .display-switching:has(#big:checked) + .content-card .product-list .content-item .favorite-btn {
            top: 0;
        }

            .display-switching:has(#big:checked) + .content-card .product-list .content-item .piano-placeholder::after {
                font-size: 14px;
            }
            .display-switching:has(#tile:checked) + .content-card .product-list .content-item .piano-placeholder::after {
                font-size: 11px;
            }

        .display-switching:has(#big:checked) + .content-card .product-list .content-item img.piano-placeholder + div {
            width: 42% !important;
        }

    .fob-jpy, .approx {
        font-size: 12px !important;
    }

    .price-wrap {
        flex-direction: column-reverse;
        gap: 0px;
        align-items: start;
    }

    .sale-base-price {
        line-height: 12px;
    }


    .list-footer {
        font-size: 9px;
        line-height: 16px;
    }

        .list-footer p {
            font-size: 14px;
            line-height: 20px;
        }

    .sort-select-wrap .bg_img,
    .search-criteria-wrap .bg_img {
        width: 16px;
        height: 16px;
    }

    .paging {
        font-size: 11px;
    }

    .paging ul {
        gap: 14px;
    }

    #pagination .bg_img {
        width: 16px;
        height: 16px;
    }
}


/*検索条件*/
.search-modal-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
    /*gap: 20px;*/
    height: 100%;
}

    .search-modal-content > div:last-child {
        border-bottom: 1px solid #ddd;
    }

.sub-title {
    margin-bottom: 4px;
}

#search {
    font-size: 16px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: var(--color-gg-base);
    color: #fff
}

.accordion-content.brand .btn-group > div {
    width: calc(50% - 4px);
}

.brand-list {
    margin-top: 20px;
}

.search-brand {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding: 4px 0;
    justify-content: center;
    position: relative;
}

    .search-brand::before {
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
        opacity: 0.5;
    }

    .search-brand input {
        /*padding-left: 40px;*/ /* 画像分スペースを確保 */
    }

    .search-brand:has(input:focus)::before,
    .search-brand:has(input:not(:placeholder-shown))::before {
        display: none; /* 入力中または入力済みなら画像非表示 */
    }

.accordion-content.type .btn-group > div {
    width: calc(50% - 4px);
}

.accordion-content.color {
    display: flex;
    gap: 20px;
    font-size: 12px;
}

.accordion-content.color > div {
    text-align: center;
    width: 60px;
}

    .accordion-content.color a {
        cursor: pointer;
    }

    .accordion-content.color img {
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        transition: all 0.2s;
        box-sizing: border-box;
    }

    .accordion-content.color span {
        border: 2px solid #fff;
        border-radius: 50%;
        display: inline-flex;
        position: relative;
        margin-bottom: 4px;
        overflow: hidden;
        padding: 3px;
        background-color: white;
    }

        .accordion-content.color span:has(img.selected) {
            border: 2px solid var(--color-secondary); 
        }

.accordion-content.price .btn-group > div {
    width: calc(50% - 4px);
}

@media (max-width: 600px) {
    .accordion-content.brand .btn-group > div,
    .accordion-content.type .btn-group > div,
    .accordion-content.price .btn-group > div {
        width: 100%;
    }
}