/*ヘッダー表示切替*/
header .now-pianos:not(.short) {
    display: none !important;
}
header .now-pianos.short {
    display: block !important;
}

#modal {
    max-width: 650px;
}

.main-container {
    padding-top: 20px;
}

.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 > #ascDesc {
        border-radius: 4px 0 0 4px;
        padding: 8px 12px 8px 16px;
    }

    .sort-select-wrap > #sortSelect {
        border-radius: 0 4px 4px 0;
        padding: 8px 16px 8px 12px;
        border-left: none;
    }

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

    .sort-select-wrap .asc-desc.asc {
        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='currentColor'%3E%3Cpath d='M19 3L23 8H20V20H18V8H15L19 3ZM14 18V20H3V18H14ZM14 11V13H3V11H14ZM12 4V6H3V4H12Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .sort-select-wrap .asc-desc.desc {
        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='currentColor'%3E%3Cpath d='M20 4V16H23L19 21L15 16H18V4H20ZM12 18V20H3V18H12ZM14 11V13H3V11H14ZM14 4V6H3V4H14Z'%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;
        text-wrap: nowrap;
    }

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

.screen-operations {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 16px;
    margin: 16px 20px 0 20px;
}

    .screen-operations button:has(.download) {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.bg_img.download {
    width: 14px;
    height: 14px;
    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='M13 10H18L12 16L6 10H11V3H13V10ZM4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19Z'%3E%3C/path%3E%3C/svg%3E");
}

.display-switching {
    display: flex;
    justify-content: end;
}

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

        .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 label.btn span.datalist {
        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 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z'%3E%3C/path%3E%3C/svg%3E");
    }

    .display-switching input:checked + label.btn span.datalist {
        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='M8 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z'%3E%3C/path%3E%3C/svg%3E");
    }



/*一覧の表示*/
.product-datalist {
    overflow-x: auto;
    cursor: grab;
}

    .product-datalist:active {
        cursor: grabbing;
    }

    .product-datalist table tr .sticky-col {
        position: sticky;
        left: 0;
        background: #fff;
        z-index: 1; /* 交差するセルより前に出す */
    }

    .product-datalist table.table-hover tbody tr:hover .sticky-col {
        background-color: var(--color-border);
    }

    .product-datalist .product-tag::before {
        position: inherit;
        font-size: 11px;
        padding: 3px 6px;
    }

    .product-datalist .favorite-btn,
    .product-datalist .addcart-btn {
        position: inherit;
    }

.screen-operations:has(#big:checked) + .content-card .product-list,
.screen-operations:has(#tile:checked) + .content-card .product-list {
    display: flex;
}

.screen-operations:has(#big:checked) + .content-card .product-datalist,
.screen-operations:has(#tile:checked) + .content-card .product-datalist {
    display: none;
}

.screen-operations:has(#datalist:checked) + .content-card .product-list {
    display: none;
}

.screen-operations:has(#datalist:checked) + .content-card .product-datalist {
    display: flex;
}

.screen-operations:has(#big:checked) + .content-card .product-list .content-item {
    width: calc(33.4% - 15px);
}

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

.product-datalist table tbody .go-detail {
    cursor: pointer;
    text-decoration: underline;
}

.product-datalist table .piano-img-wrap {
    position: relative;
    width: fit-content;
}

    .product-datalist table .piano-img-wrap:not(:has(img.piano-placeholder)) {
        cursor: pointer;
    }

    .product-datalist table .piano-img-wrap .product-tag {
        position: absolute;
        top: 0;
        width: 100%;
        line-height: 12px;
        pointer-events: none;
    }

        .product-datalist table .piano-img-wrap .product-tag::before {
            padding: 0;
            width: 100%;
            text-align: center;
            font-size: 8px;
        }

.product-datalist table img {
    width: 36px;
    height: 36px;
    vertical-align: middle;
}

    .product-datalist table img.piano-placeholder {
        border-radius: 0;
    }

        .product-datalist table img.piano-placeholder::after {
            content: "No Image";
            font-size: 7px;
            line-height: 10px;
            text-align: center;
            border-radius: 0;
        }

.product-datalist td:has(.down-price-info) {
    line-height: 16px;
}

.product-datalist .down-price-info {
    display: inline-block;
}

.product-datalist .down-price-info * {
    font-size: 11px;
}

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

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

.price-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: start;
}

    .price-wrap .sale-price {
        margin-right: 8px;
    }

.screen-operations:has(#tile:checked) + .content-card .product-list .content-item .price-wrap {
    flex-direction: column;
    align-items: start;
}

    .screen-operations:has(#tile:checked) + .content-card .product-list .content-item .price-wrap .sale-price {
        margin-right: 0;
    }

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

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


/*画像拡大用オーバーレイ*/
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

    .overlay.active {
        display: flex !important;
        justify-content: center;
    }

    .overlay img {
        max-width: 70%;
        max-height: 80%;
        object-fit: contain;
    }

@media (max-width: 600px) {
    .overlay img {
        max-width: 100%;
        max-height: 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-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) {
    .screen-operations:has(#big:checked) + .content-card .product-list .content-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .search-criterias {
        gap: 12px;
        padding: 0 10px;
    }

    .screen-operations {
        gap: 12px;
        margin: 16px 10px 0 10px;
    }


    .display-switching {
    }


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

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

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

    .product-datalist .down-price-info * {
        font-size: 10px;
    }

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

    .price-wrap {
        flex-direction: column;
        align-items: start;
    }

        .price-wrap .sale-price {
            margin-right: 0;
        }

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


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

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

    .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;
}


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

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

    .search-model::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-model input {
        /*padding-left: 40px;*/ /* 画像分スペースを確保 */
    }

    .search-model:has(input:focus)::before,
    .search-model: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);
}

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

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