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

/*情報エリア*/
.product-tag::before {
    font-size: 11px;
    min-width: 10px;
    padding: 3px 8px;
    margin: 4px 0;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
}

.product-brand {
    font-size: 22px;
    margin: 8px 0;
}

.product-model {
    font-size: 16px;
}

.sp-only.product-info {
    line-height: 32px;
}

.sp-only .product-model {
    margin-bottom: 20px;
}

.product-title {
    font-size: 12px;
    /*color: #666;*/
}

.product-info-other-area {
    position: relative;
}

.product-number {
    font-size: 10px;
}

.piano-condition {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    line-height: 4px;
    margin: 20px 0;
}

.product-price {
    font-size: 18px;
    text-align: right;
    margin-top: 20px;
}

.product-price.approx {
    margin-top: 0;
    line-height: 20px;
    margin-bottom: 40px;
}

.product-price.approx.sale-price {
    margin-top: 8px;
}

.down-price-info {
    justify-content: end;
    margin-bottom: 4px;
}

.product-favorite {
    position: absolute;
    top: -2px;
    right: 0;
}

.product-add-cart {
    margin-top: 32px;
}

.add-cart-btn {
    font-size: 16px;
    width: 100%;
    padding: 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: var(--color-secondary);
    color: #fff;
}

    .add-cart-btn span.bg-img {
        display: inline-block;
        width: 24px;
        height: 24px;
        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='%23fff'%3E%3Cpath d='M4.00488 16V4H2.00488V2H5.00488C5.55717 2 6.00488 2.44772 6.00488 3V15H18.4433L20.4433 7H8.00488V5H21.7241C22.2764 5 22.7241 5.44772 22.7241 6C22.7241 6.08176 22.7141 6.16322 22.6942 6.24254L20.1942 16.2425C20.083 16.6877 19.683 17 19.2241 17H5.00488C4.4526 17 4.00488 16.5523 4.00488 16ZM6.00488 23C4.90031 23 4.00488 22.1046 4.00488 21C4.00488 19.8954 4.90031 19 6.00488 19C7.10945 19 8.00488 19.8954 8.00488 21C8.00488 22.1046 7.10945 23 6.00488 23ZM18.0049 23C16.9003 23 16.0049 22.1046 16.0049 21C16.0049 19.8954 16.9003 19 18.0049 19C19.1095 19 20.0049 19.8954 20.0049 21C20.0049 22.1046 19.1095 23 18.0049 23Z'%3E%3C/path%3E%3C/svg%3E");
    }

.soldout-label {
    background-color: var(--color-border);
    color: var(--color-secondary);
    font-size: 20px;
    padding: 8px 0;
    width: 100%;
    text-align: center;
}



/*画像エリア*/
.product-img-list {
    /*display: flex;
    flex-wrap: wrap;*/
    margin-bottom: 40px;
    align-items: center;
}

.product-img-list > * {
    /*width: 50%;*/
}

/*詳細情報エリア*/
.product-info-detail > div {
    margin: 0 100px 60px;
}

.product-info-detail .accordion-item:last-child {
    border-bottom: 1px solid #ddd;
}

.product-info-detail .accordion-header {
    font-size: 16px;
    padding: 24px 12px;
}

.product-info-detail .accordion-content {
    line-height: 24px;
}

.accordion-item.open .accordion-content {
    max-height: unset;
}

.notes {
    padding: 16px 0 0;
}


/*履歴*/
.slide-content-card {
    padding: 40px 0px 60px;
}



@media (max-width: 1200px) {
    .main-container {
        padding: 0 60px;
    }
}


@media (max-width: 1000px) {
    .product-info-detail > div {
        margin: 0 20px 40px;
    }

    .main-container {
        padding: 0 60px;
    }
}


@media (max-width: 800px) {
    .main-container {
        padding: 0 40px;
    }

    .product-img-list > * {
        width: 100%;
    }

    .product-info-detail > div {
        margin: 0 0px 40px;
    }
}

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

        .main-container > *:not(.lr-layout),
        .lr-layout .product-info {
            padding: 0 20px;
        }

    /*.product-add-cart {
        position: sticky;
        bottom: 0;
        left: 0;
    }*/
    .product-gallery {
        margin-top: 20px;
    }

    .product-img-list {
        margin-bottom: 13px;
    }

    .history-card {
        margin: 80px 0 0 0;
    }
}




.product-gallery {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.thumb-wrapper {
}

/* サムネイルは左側、縦方向に幅固定 */
.thumb-slider {
    width: 52px;
    height: 448px; /* お好みで高さを調整 */
    flex-shrink: 0; /* ← 親がflexのとき、縮ませない */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /* サムネイル画像 */
    .thumb-slider .swiper-slide {
        width: 100%; /* 親の幅に合わせる */
        text-align: center; /* 画像が小さい場合でも中央揃えに */
        cursor: pointer;
        opacity: 0.5;
    }

    .thumb-slider img {
        width: 100%;
        height: inherit;
        object-fit: cover;
        display: block;
    }

    .thumb-slider .swiper-slide-thumb-active {
        opacity: 1;
        /*border: 1px solid var(--color-secondary);*/
    }

.thumb-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px 0;
    align-items: center;
}

.thumb-nav-buttons > div::after {
    content: none;
}

.swiper-button-prev,
.swiper-button-next,
.modal-swiper-button-prev,
.modal-swiper-button-next {
    position: unset;
    display: inline-block !important;
    background-size: cover;
    /*background-size: contain;*/
    background-position: center;
    background-repeat: no-repeat !important;
    color: white;
    text-decoration: none;
    text-align: center;
    width: 30px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    margin: 4px 0;
}

.swiper-button-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='%23999'%3E%3Cpath d='M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z'%3E%3C/path%3E%3C/svg%3E");
}

.swiper-button-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='%23999'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E");
}

.swiper-pagination-wrap {
    position: relative;
}

.swiper-pagination {
    position: absolute;
    bottom: 48px;
    left: 46.5%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    width: auto;
    padding: 4px 8px;
    background-color: rgba(60, 60, 60, .3);
}


/* メイン画像 */
.main-slider {
    flex-grow: 1;
}

    .main-slider img {
        width: 93%;
        height: auto;
        margin: 0 0 0 4px;
    }

/*画像表示モーダル*/
body:has(.img-modal.active) {
    overflow: hidden;
}

.img-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    /*justify-content: center;
    align-items: center;*/
    text-align: center;
}

    .img-modal.active {
        display: inline-block;
    }

    .img-modal .modal-content {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .img-modal .swiper-wrapper {
        align-items: center;
    }

    .img-modal img {
        max-width: 90vw;
        max-height: 90vh;
        transition: transform 0.2s;
    }

    .img-modal .modal-swiper-button-prev::after,
    .img-modal .modal-swiper-button-next::after {
        font-size: 28px;
    }

    .img-modal .modal-swiper-button-prev,
    .img-modal .modal-swiper-button-next {
        position: absolute;
        background-color: rgba(90,90,90,.6);
        border-radius: 1px;
        width: 40px;
        height: 40px;
        padding: 4px;
        top: 50%;
        z-index: 10000;
    }
    .img-modal .modal-swiper-button-prev {
        left: 20px;
    }
    .img-modal .modal-swiper-button-next {
        right: 20px;
    }

    .img-modal .img-modal-header-wrap {
        display: flex;
        justify-content: center;
    }

    .img-modal .img-modal-header {
        display: flex;
        justify-content: center;
        gap: 8px;
        align-items: end;
    }

    .img-modal .img-modal-header > div:last-child {
        width: 44px;
    }

    .img-modal .modal-swiper-pagination {
        color: #fff !important;
        margin: 12px 0;
        font-size: 13px;
        z-index: 10000;
    }

#rotate-btn {
    padding: 8px 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.1);
    border: none;
    margin-bottom: 8px;
    z-index: 10000;
}

    #rotate-btn > span {
        width: 24px;
        height: 24px;
        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='%23fff'%3E%3Cpath d='M20 10.5858L21.8284 8.75736L23.2426 10.1716L19 14.4142L14.7574 10.1716L16.1716 8.75736L18 10.5858V8C18 6.34315 16.6569 5 15 5H11V3H15C17.7614 3 20 5.23858 20 8V10.5858ZM13 9C13.5523 9 14 9.44772 14 10V20C14 20.5523 13.5523 21 13 21H3C2.44772 21 2 20.5523 2 20V10C2 9.44772 2.44772 9 3 9H13ZM12 11H4V19H12V11Z'%3E%3C/path%3E%3C/svg%3E");
    }

.modal-swiper-button-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='%23999'%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");
}

.modal-swiper-button-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='%23999'%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");
}

@media (max-width: 600px) {
    .main-slider img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    .swiper-pagination-bullet {
        background: var(--color-secondary);
        opacity: 0.2;
    }

    .swiper-pagination-bullet-active {
        opacity: 1;
    }

    .custom-pagination-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
    }

    .pagination-prev,
    .pagination-next {
        cursor: pointer;
        padding: 5px 10px;
        font-size: 18px;
        background: none;
        border: none;
        color: #999;
    }

    .swiper-pagination {
        bottom: 20px;
        left: 50%;
        font-size: 12px;
    }

    /* サムネイル画像 */
    .sp-thumb-slider-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 40px;
    }

        .sp-thumb-slider-wrap .swiper-wrapper {
            align-items: center;
        }

        .sp-thumb-slider-wrap .swiper-slide {
            width: 100%; /* 親の幅に合わせる */
            text-align: center; /* 画像が小さい場合でも中央揃えに */
            cursor: pointer;
            opacity: 0.5;
        }

        .sp-thumb-slider-wrap img {
            width: 100%;
            height: auto;
            object-fit: cover;
            display: block; /* imgはinline要素なのでこれを入れると安全 */
        }

        .sp-thumb-slider-wrap .swiper-slide-thumb-active {
            opacity: 1;
            border: 1px solid var(--color-secondary);
        }

    .swiper-button-prev:after,
    .swiper-button-next:after,
    .modal-swiper-button-prev:after,
    .modal-swiper-button-next:after {
        content: none;
    }

    .swiper-button-prev,
    .modal-swiper-button-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='%23999'%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");
    }

    .swiper-button-next,
    .modal-swiper-button-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='%23999'%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");
    }


    .img-modal .img-modal-header {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: center;
    }

    .img-modal .modal-swiper-button-prev::after,
    .img-modal .modal-swiper-button-next::after {
        font-size: 20px;
    }

    .img-modal .modal-swiper-button-prev,
    .img-modal .modal-swiper-button-next {
        width: 32px;
        height: 32px;
        padding: 2px;
    }

    .img-modal .modal-swiper-button-prev {
        left: 0px;
    }

    .img-modal .modal-swiper-button-next {
        right: 0px;
    }
}




@media (min-width: 801px) {
    .sp-only.product-info {
        display: none;
    }
}

@media (max-width: 800px) {
    .sp-only.product-info {
        display: block;
    }

    .pc-only.sale-tag,
    .pc-only.product-brand,
    .pc-only.product-model {
        display: none;
    }
}