@charset "UTF-8";

/* ポップアップ内の関連商品エリア */
.copied-recommend-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* 複製された recommend 全体 */
.copied-recommend-wrapper .recommend {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 0 4px;
    border-top: 1px solid #ddd;
}

/* 見出し */
.copied-recommend-wrapper .recommend h2 {
    margin: 0 0 16px;
    font-size: 15px;
    text-align: center;
}

/* 横スクロールさせる本体 */
.copied-recommend-wrapper .recommend .column-set {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4px 14px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

/* float指定を解除して、横並び固定にする */
.copied-recommend-wrapper .recommend .column5 {
    float: none !important;
    clear: none !important;
    flex: 0 0 140px;
    width: 140px !important;
    margin: 0 !important;
    padding: 0 0 8px;
    box-sizing: border-box;
}

/* 画像 */
.copied-recommend-wrapper .recommend .itemThumb-wrap {
    margin: 0 0 8px;
}

.copied-recommend-wrapper .recommend .itemThumb {
    margin: 0;
    text-align: center;
}

.copied-recommend-wrapper .recommend .itemThumb img {
    width: 100%;
    height: auto;
}

/* 商品名 */
.copied-recommend-wrapper .recommend h3 {
    margin: 8px 0 6px;
    font-size: 13px;
    line-height: 1.4;
}

/* 価格 */
.copied-recommend-wrapper .recommend .price {
    margin: 0;
    font-size: 13px;
    text-align: left;
}

/* 関連商品の数量欄などはポップアップ内では不要なら非表示 */
.copied-recommend-wrapper .recommend .quantityArea {
    display: none;
}

/* ポップアップ外枠は横スクロールさせない */
div[aria-describedby="sps-cartaddModal"],
#sps-cartaddModal,
.sps-cartaddModal {
    max-width: 720px;
    box-sizing: border-box;
    overflow-x: hidden !important;
}

/* 関連商品ブロックの外側もはみ出しを止める */
.copied-recommend-wrapper,
.copied-recommend-wrapper .recommend,
.copied-recommend-wrapper .recommend form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* 横スクロールはここだけ */
.copied-recommend-wrapper .recommend .column-set {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    overflow-x: auto !important;
    overflow-y: hidden;
    padding: 0 0 14px;

    -webkit-overflow-scrolling: touch;
}

/* 商品カードは縮めず横に並べる */
.copied-recommend-wrapper .recommend .column5 {
    float: none !important;
    clear: none !important;
    flex: 0 0 140px;
    width: 140px !important;
    min-width: 140px;
    max-width: 140px;
    margin: 0 !important;
    box-sizing: border-box;
}

/* カート投入ポップアップ全体を画面中央に固定 */
div[aria-describedby="sps-cartaddModal"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;

    width: 720px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 32px) !important;

    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* モーダル中身は親幅からはみ出させない */
#sps-cartaddModal,
.sps-cartaddModal {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
}

/* 背景オーバーレイも画面固定 */
.ui-widget-overlay {
    position: fixed !important;
    inset: 0 !important;
}


@media screen and (max-width: 580px) {
    /* .copied-recommend-wrapper .recommend {
        margin: 15px 0 0;
    } */
    .copied-recommend-wrapper .recommend .column5 h3 a {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
}

@media screen and (max-width: 390px) {
    .copied-recommend-wrapper .recommend {
        padding: 15px 0 4px;
    }
    .copied-recommend-wrapper .recommend .column5 {
        flex: 0 0 90px;
        width: 90px !important;
        min-width: 90px;
        max-width: 90px;
    }
    .copied-recommend-wrapper .recommend h2 {
        margin: 0 0 5px;
    }
    .copied-recommend-wrapper .recommend .column-set {
        padding: 0 0 5px;
    }
}