@charset "utf-8";

.fs-l-main {
    max-width: 960px;
}

.fs-c-price {
    font-weight: normal;
    color: #bb1900 !important;
}

#fs_ProductDetails,
#fs_ProductDetailsSubscribe {
    /* 全体 */
    .fs-l-productLayout {
        grid-template-columns: 35% 60%;
        grid-row-gap: 1.5em;
        grid-column-gap: 5%;
        align-items: stretch;
        margin-top: 3em;
    }

    /* 製品画像 */
    .fs-c-productMainImage {
        grid-row: 1 / 8;
        grid-column: 1 / 2;
    }

    /* 製品画像 */
    .fs-c-productMainImage__image {
        margin-top: 0;
    }

    /* サムネイル */
    .fs-c-productThumbnail {
        grid-row: 7 / 8;
        grid-column: 1 / 2;

        .fs-c-productThumbnail__image {
            margin: 0 6px 0 0;
        }
    }

    /* 製品名 */
    .fs-c-productNameHeading {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        padding-bottom: 0.2em;
        margin: 0 !important;
        font-size: 20px;
        font-weight: normal;
        color: #333 !important;
        border-bottom: 1px solid #d5d9d9;

        &::after {
            display: none;
        }
    }

    /* 商品番号 */
    .fs-c-productNumber {
        display: none;
    }

    /* 価格 */
    .fs-c-productPrices--productDetail {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
    }

    /* 価格 */
    .fs-c-productPrice {
        align-items: baseline;
    }

    .fs-c-productPrice--selling,
    .fs-c-productPrice--listed {
        /* 価格 */
        .fs-c-productPrice__main__label {
            width: 30px;
            margin-right: 1em;
            color: #999;
        }

        /* 価格 ￥マーク */
        .fs-c-price__currencyMark {
            font-size: 12px;
        }
    }

    /* 価格 定価 */
    .fs-c-productPrice--listed {
        margin-bottom: 0.5em;

        .fs-c-price {
            color: #333 !important;
        }
    }

    .fs-c-productPrice--selling {
        /* 価格 */
        .fs-c-productPrice__main__price {
            font-size: 22px;
        }

        /* 価格 税込 */
        .fs-c-productPrice__addon {
            margin-left: 4px;
            color: #bb1900;
        }
    }

    /* 価格 税込 */
    .fs-c-productPrice__addon:where(:not([class*="--listed"]))::before,
    .fs-c-productPrice__main__addon:where(:not([class*="--listed"]))::before {
        content: "";
    }

    /* 価格 税込 */
    .fs-c-productPrice__addon:where(:not([class*="--listed"]))::after,
    .fs-c-productPrice__main__addon:where(:not([class*="--listed"]))::after {
        content: "";
    }

    /* 送料 */
    .fs-c-productPostage {
        grid-row: 3 / 4;
        grid-column: 2 / 3;
    }

    /* 数量 */
    .fs-c-productQuantityAndWishlist {
        display: flex;
        grid-row: 4 / 5;
        grid-column: 2 / 3;
        align-items: center;

        &::before {
            content: "数量：";
        }

        .fs-c-productQuantityAndWishlist__quantity {
            align-self: center;
        }
    }

    /* カートに入れる ボタン */
    .fs-c-productActionButton {
        grid-row: 5 / 6;
        grid-column: 2 / 3;

        /* カートに入れる ボタン */
        .fs-c-button--addToCart--detail {
            width: 300px;
            height: 50px;
            font-weight: bold;
            color: #333;
            background: #ffd814;
            border: none;
            border-radius: 10px;
            box-shadow: 0 0 16px -6px rgb(0 0 0 / 50%);
        }
    }

    /* 販売期間 */
    .fs-c-productSalesPeriod {
        grid-row: 6 / 7;
        grid-column: 2 / 3;
        padding: 24px 0;
        font-weight: bold;
        border: 1px solid #d5d9d9;
        border-width: 1px 0;
    }

    /* 返品特約について */
    .fs-c-returnedSpecialContract {
        grid-row: 7 / 8;
        grid-column: 2 / 3;
    }
}

@media (max-width: 960px) {
    #fs_ProductDetails,
    #fs_ProductDetailsSubscribe {
        /* 製品画像 */
        .fs-c-productMainImage {
            grid-row: 1 / 2;
            grid-column: 1 / 3;

            .fs-c-productMainImage__image {
                width: 100%;
                max-width: 250px;
                margin: 0 auto;

                .fs-c-productMainImage__expandButton {
                    margin-top: -25px;
                }
            }
        }

        .fs-c-productThumbnail {
            grid-row: 2 / 3;
            grid-column: 1 / 3;
        }

        /* 製品名 */
        .fs-c-productNameHeading {
            grid-row: 3 / 4;
            grid-column: 1 / 3;
        }

        /* 価格 */
        .fs-c-productPrices--productDetail {
            grid-row: 4 / 5;
            grid-column: 1 / 3;
        }

        .fs-c-productPostage {
            grid-row: 5 / 6;
            grid-column: 1 / 3;
        }

        .fs-c-productQuantityAndWishlist {
            grid-row: 6 / 7;
            grid-column: 1 / 3;
        }

        .fs-c-productActionButton {
            display: flex;
            grid-row: 7 / 8;
            grid-column: 1 / 3;

            .fs-c-button--addToCart--detail {
                width: 100%;
            }
        }

        .fs-c-productSalesPeriod {
            grid-row: 8 / 9;
            grid-column: 1 / 3;
        }

        .fs-c-returnedSpecialContract {
            grid-row: 9 / 10;
            grid-column: 1 / 3;
        }
    }
}

@media (max-width: 767px) {
    /* カートに入れる ボタン */
    .fs-c-productActionButton {
        /* カートに入れる ボタン */
        .fs-c-button--addToCart--detail {
            .fs-c-button__label {
                font-size: 14px;
            }
        }
    }
}
