@charset "utf-8";

/* =========================================================
   シャレもん本店
   商品詳細ページ custom.css
   ShopServe / E-ホワイト
   ========================================================= */


/* =========================================================
   01. 基本設定
   ========================================================= */

:root {
    --product-text: #222;
    --product-subtext: #666;

    --product-border: #aaa;

    --product-red: #e60012;
    --product-red-hover: #cc0010;
    --product-red-dark: #aa000d;

    --product-radius: 6px;
}


/* 商品詳細内だけbox-sizingを統一 */

#itemDetail-wrap *,
#itemDetail-wrap *::before,
#itemDetail-wrap *::after {
    box-sizing: border-box;
}


/* =========================================================
   02. 商品詳細ページの横幅
   ========================================================= */

@media screen and (min-width: 1000px) {

    /*
       E-ホワイト標準
       contents     960px
       sub-column   210px
       main-column  720px

       ↓

       商品ページのみ
       contents     1240px
       main-column  1000px
    */

    body:has(#itemDetail-wrap) #contents {
        width: 1240px !important;
        max-width: 1240px !important;

        overflow: visible !important;
    }


    body:has(#itemDetail-wrap) #main-column {
        width: 1000px !important;
        max-width: 1000px !important;

        overflow: visible !important;
    }


    #itemDetail-wrap {
        width: 100% !important;
        max-width: none !important;

        overflow: visible !important;
    }


    #itemDetail-cont {
        width: 1000px !important;
        max-width: 1000px !important;

        overflow: visible !important;
    }


    /* -----------------------------------------
       左：商品画像
       ----------------------------------------- */

    #itemDetail-cont .itemThumb-wrap {
        float: left !important;

        width: 350px !important;
        max-width: 350px !important;

        margin: 0 30px 0 0 !important;
        padding: 0 !important;
    }


    #itemDetail-cont .itemThumb-main {
        width: 350px !important;
        max-width: 350px !important;
    }


    #itemDetail-cont .itemThumb-main img {
        display: block !important;

        max-width: 100% !important;
        height: auto !important;
    }


    #itemDetail-cont .itemThumb {
        width: 350px !important;
        max-width: 350px !important;
    }


    /* -----------------------------------------
       右：商品情報・購入フォーム
       ----------------------------------------- */

    #itemDetail-cont .itemOutline {
        float: left !important;

        width: 620px !important;
        max-width: 620px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    #itemDetail-cont::after {
        content: "";
        display: block;
        clear: both;
    }

}


/* =========================================================
   03. 商品タイトル
   ========================================================= */

#itemDetail-cont .itemOutline h1,
article#Detail #main-column .itemOutline h1 {

    margin: 0 0 14px !important;
    padding: 0 !important;

    background: none !important;

    font-size: 20px !important;
    line-height: 1.6 !important;

    font-weight: 700 !important;

    color: var(--product-text) !important;
}


/* =========================================================
   04. 価格
   ========================================================= */

#itemDetail-wrap table.price {
    margin: 0 0 18px !important;

    line-height: 1.5 !important;
}


/* 「価格：」 */

#itemDetail-wrap table.price th {
    font-size: 18px !important;
    line-height: 1.5 !important;
}


/* 金額 */

#itemDetail-wrap table.price tr.price span.selling_price,
#itemDetail-wrap table.price tr.price span.taxin,
#itemDetail-wrap table.price tr.sp_price span.special_price,
#itemDetail-wrap table.price tr.sp_price span.selling_price,
#itemDetail-wrap table.price tr.sp_price span.taxin {

    color: var(--product-red) !important;

    font-size: 24px !important;
    line-height: 1.4 !important;

    font-weight: 700 !important;
}


/* =========================================================
   05. ポイント還元
   価格より控えめに表示
   ========================================================= */

#itemDetail-wrap .publish_point,
#itemDetail-wrap span.publish_point,
#itemDetail-wrap table.price .publish_point {

    color: #666 !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    font-weight: 400 !important;
}


/* publish_pointが入っている行全体 */

#itemDetail-wrap table.price tr:has(.publish_point) th,
#itemDetail-wrap table.price tr:has(.publish_point) td {

    color: #666 !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    font-weight: 400 !important;
}


/* 別形式のポイント表示にも対応 */

.itemOutline [class*="point"]:not(.badge),
#pi_cart [class*="point"]:not(.badge) {

    color: #666 !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    font-weight: 400 !important;
}


/* =========================================================
   06. 購入フォーム全体
   ========================================================= */

#pi_cart {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--product-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;
}


/* =========================================================
   07. 購入項目
   PCでも上下配置
   ========================================================= */

@media screen and (min-width: 768px) {

    /*
       ShopServeでは商品により
       table.spec
       table.remark
       の両方があるため両対応
    */


    /* -----------------------------------------
       テーブルを縦型フォームに変更
       ----------------------------------------- */

    #pi_cart table.spec,
    #pi_cart table.spec tbody,
    #pi_cart table.spec tr,
    #pi_cart table.spec th,
    #pi_cart table.spec td,

    #pi_cart table.remark,
    #pi_cart table.remark tbody,
    #pi_cart table.remark tr,
    #pi_cart table.remark th,
    #pi_cart table.remark td {

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }


    /* テーブル全体 */

    #pi_cart table.spec,
    #pi_cart table.remark {

        margin: 22px 0 20px !important;

        line-height: 1.5 !important;

        border-collapse: separate !important;
        border-spacing: 0 !important;
    }


    /* 1項目 */

    #pi_cart table.spec tr,
    #pi_cart table.remark tr {

        margin: 0 0 18px !important;
        padding: 0 !important;

        border: 0 !important;
    }


    /* =====================================================
       項目名
       生地
       カラー
       名入れ
       番号など
       ===================================================== */

    #pi_cart table.spec tr > th:first-child,
    #pi_cart table.spec tr > td:first-child:not(:only-child),

    #pi_cart table.remark tr > th:first-child,
    #pi_cart table.remark tr > td:first-child:not(:only-child) {

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 0 7px !important;

        color: #333 !important;

        font-size: 16px !important;
        line-height: 1.5 !important;

        font-weight: 600 !important;

        white-space: normal !important;

        vertical-align: top !important;
    }


    /* =====================================================
       入力欄側
       ===================================================== */

    #pi_cart table.spec td,
    #pi_cart table.remark td {

        margin: 0 !important;
        padding: 0 !important;

        color: #333 !important;

        font-size: 16px !important;
        line-height: 1.6 !important;
    }


    /* =====================================================
       プルダウン
       ===================================================== */

    #pi_cart table.spec select,
    #pi_cart table.remark select,
    #pi_cart select.select_button {

        display: block !important;

        width: 100% !important;
        max-width: 480px !important;

        height: 50px !important;
        min-height: 50px !important;

        margin: 0 !important;

        padding: 8px 42px 8px 14px !important;

        color: #222 !important;
        background-color: #fff !important;

        font-family: inherit !important;

        font-size: 17px !important;
        line-height: 1.3 !important;

        font-weight: 400 !important;

        border: 1px solid var(--product-border) !important;
        border-radius: var(--product-radius) !important;

        cursor: pointer !important;

        transition:
            border-color .15s ease,
            box-shadow .15s ease;
    }


    #pi_cart select:hover {
        border-color: #666 !important;
    }


    #pi_cart select:focus {

        border-color: #555 !important;

        outline: none !important;

        box-shadow:
            0 0 0 3px rgba(0, 0, 0, .08) !important;
    }


    /* =====================================================
       名入れ文字・番号入力
       ===================================================== */

    #pi_cart table.spec input[type="text"],
    #pi_cart table.remark input[type="text"],
    #pi_cart table.spec input[type="number"],
    #pi_cart table.remark input[type="number"] {

        display: block !important;

        width: 100% !important;
        max-width: 480px !important;

        height: 50px !important;
        min-height: 50px !important;

        margin: 0 !important;

        padding: 8px 12px !important;

        color: #222 !important;
        background: #fff !important;

        font-family: inherit !important;

        font-size: 17px !important;

        border: 1px solid var(--product-border) !important;
        border-radius: var(--product-radius) !important;
    }


    #pi_cart input[type="text"]:focus,
    #pi_cart input[type="number"]:focus {

        border-color: #555 !important;

        outline: none !important;

        box-shadow:
            0 0 0 3px rgba(0, 0, 0, .08) !important;
    }


    /* =====================================================
       ギフトラッピング等の説明文
       ===================================================== */

    #pi_cart table.spec td p,
    #pi_cart table.remark td p {

        margin: 5px 0 0 !important;

        color: #555 !important;

        font-size: 14px !important;
        line-height: 1.8 !important;
    }

}


/* =========================================================
   08. 数量
   ========================================================= */

#pi_cart .quantityArea {
    margin: 12px 0 18px !important;
}


#pi_cart .quantityArea,
#pi_cart .quantityArea span {

    color: #333 !important;

    font-size: 16px !important;
    line-height: 1.5 !important;
}


#pi_cart .quantityArea input[type="text"],
#pi_cart .quantityArea input[type="number"],

#pi_cart input[name*="CNT"],
#pi_cart input[name*="QUANTITY"],
#pi_cart input[name*="quantity"] {

    display: inline-block !important;

    width: 80px !important;
    max-width: 80px !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 5px 8px !important;

    color: #222 !important;
    background: #fff !important;

    font-size: 18px !important;

    text-align: center !important;

    border: 1px solid #aaa !important;
    border-radius: 5px !important;
}


/* =========================================================
   09. カートボタン
   元画像の機能を残してCSS表示
   ========================================================= */

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][alt*="カート"]),

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="cart"]) {

    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 620px !important;

    height: 58px !important;

    margin: 20px 0 14px !important;

    padding: 0 !important;
}


/* CSSで見せるボタン */

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][alt*="カート"])::before,

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="cart"])::before {

    content: "カートに入れる";

    position: absolute !important;

    inset: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 58px !important;

    color: #fff !important;
    background: var(--product-red) !important;

    font-family: inherit !important;

    font-size: 20px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: .05em !important;

    border: 0 !important;
    border-radius: 7px !important;

    box-shadow:
        0 3px 0 var(--product-red-dark) !important;

    pointer-events: none !important;
}


/* 本物の画像ボタン */

#itemDetail-wrap input[type="image"][alt*="カート"],
#itemDetail-wrap input[type="image"][src*="cart"] {

    position: relative !important;

    z-index: 5 !important;

    display: block !important;

    width: 100% !important;
    max-width: 620px !important;

    height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;
}


/* hover */

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][alt*="カート"]):hover::before,

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="cart"]):hover::before {

    background: var(--product-red-hover) !important;
}


/* click */

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][alt*="カート"]):active::before,

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="cart"]):active::before {

    transform: translateY(2px) !important;

    box-shadow:
        0 1px 0 var(--product-red-dark) !important;
}


/* =========================================================
   10. 在庫確認ボタン
   ========================================================= */

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][alt*="在庫"]),

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="zaiko"]),

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="stock"]) {

    position: relative !important;

    display: block !important;

    width: 250px !important;
    height: 46px !important;

    margin: 12px 0 !important;

    padding: 0 !important;
}


/* CSS表示 */

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][alt*="在庫"])::before,

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="zaiko"])::before,

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="stock"])::before {

    content: "在庫を確認する";

    position: absolute !important;

    inset: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    color: #333 !important;
    background: #fff !important;

    font-size: 16px !important;

    font-weight: 600 !important;

    border: 1px solid #999 !important;
    border-radius: 5px !important;

    pointer-events: none !important;
}


/* 本物の在庫画像 */

#itemDetail-wrap input[type="image"][alt*="在庫"],
#itemDetail-wrap input[type="image"][src*="zaiko"],
#itemDetail-wrap input[type="image"][src*="stock"] {

    position: relative !important;

    z-index: 5 !important;

    display: block !important;

    width: 250px !important;
    height: 46px !important;

    margin: 0 !important;

    opacity: 0 !important;

    cursor: pointer !important;
}


/* hover */

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][alt*="在庫"]):hover::before,

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="zaiko"]):hover::before,

#itemDetail-wrap
:where(div, p, td, span, center)
:has(> input[type="image"][src*="stock"]):hover::before {

    background: #f5f5f5 !important;

    border-color: #555 !important;
}


/* =========================================================
   11. スマートフォン
   ========================================================= */

@media screen and (max-width: 767px) {

    #itemDetail-cont .itemThumb-wrap,
    #itemDetail-cont .itemOutline {

        float: none !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 0 20px !important;
    }


    #pi_cart table.spec,
    #pi_cart table.spec tbody,
    #pi_cart table.spec tr,
    #pi_cart table.spec th,
    #pi_cart table.spec td,

    #pi_cart table.remark,
    #pi_cart table.remark tbody,
    #pi_cart table.remark tr,
    #pi_cart table.remark th,
    #pi_cart table.remark td {

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }


    #pi_cart table.spec tr,
    #pi_cart table.remark tr {

        margin-bottom: 16px !important;
    }


    #pi_cart table.spec th,
    #pi_cart table.spec tr > td:first-child:not(:only-child),

    #pi_cart table.remark th,
    #pi_cart table.remark tr > td:first-child:not(:only-child) {

        padding: 0 0 6px !important;

        font-size: 16px !important;

        font-weight: 600 !important;
    }


    #pi_cart select,
    #pi_cart select.select_button,
    #pi_cart input[type="text"] {

        width: 100% !important;
        max-width: none !important;

        min-height: 50px !important;

        font-size: 16px !important;
    }


    #itemDetail-wrap
    :where(div, p, td, span, center)
    :has(> input[type="image"][alt*="カート"]),

    #itemDetail-wrap
    :where(div, p, td, span, center)
    :has(> input[type="image"][src*="cart"]) {

        width: 100% !important;
        max-width: none !important;
    }


    #itemDetail-wrap input[type="image"][alt*="カート"],
    #itemDetail-wrap input[type="image"][src*="cart"] {

        width: 100% !important;
        max-width: none !important;
    }

}



/* =========================================================
   購入エリアをコンパクト化
   ========================================================= */

@media screen and (min-width: 1000px) {

    /* 右側の商品情報エリア */
    #itemDetail-cont .itemOutline {
        width: 520px !important;
        max-width: 520px !important;
    }

    /* 商品タイトル */
    #itemDetail-cont .itemOutline h1,
    article#Detail #main-column .itemOutline h1 {
        width: 100% !important;
        max-width: 520px !important;
    }

    /* 価格エリア */
    #itemDetail-wrap table.price {
        width: 100% !important;
        max-width: 520px !important;
    }

    /* 購入フォーム */
    #pi_cart {
        width: 100% !important;
        max-width: 520px !important;
    }

    /* select */
    #pi_cart table.spec select,
    #pi_cart table.remark select,
    #pi_cart select.select_button {
        width: 100% !important;
        max-width: 480px !important;
    }

    /* テキスト入力 */
    #pi_cart table.spec input[type="text"],
    #pi_cart table.remark input[type="text"] {
        width: 100% !important;
        max-width: 480px !important;
    }

    /* カートボタンの外枠 */
    #itemDetail-wrap
    :where(div, p, td, span, center)
    :has(> input[type="image"][alt*="カート"]),

    #itemDetail-wrap
    :where(div, p, td, span, center)
    :has(> input[type="image"][src*="cart"]) {

        width: 480px !important;
        max-width: 480px !important;
    }

    /* 実際のカート画像ボタン */
    #itemDetail-wrap input[type="image"][alt*="カート"],
    #itemDetail-wrap input[type="image"][src*="cart"] {

        width: 480px !important;
        max-width: 480px !important;
    }

    /* 在庫ボタンは今くらいでOK */
    #itemDetail-wrap
    :where(div, p, td, span, center)
    :has(> input[type="image"][alt*="在庫"]),
    #itemDetail-wrap
    :where(div, p, td, span, center)
    :has(> input[type="image"][src*="zaiko"]),
    #itemDetail-wrap
    :where(div, p, td, span, center)
    :has(> input[type="image"][src*="stock"]) {

        width: 250px !important;
        max-width: 250px !important;
    }

}


/* =========================================================
   バリエーション商品 微調整
   ・価格レンジを1行／右揃え
   ・販売期間を非表示
   ・価格と在庫ボタン化
   ・数量欄をコンパクト化
   ========================================================= */


/* =========================================================
   01. 価格
   金額に幅があっても1行表示＋右揃え
   ========================================================= */

#itemDetail-wrap table.price {
    width: 100% !important;
    max-width: 480px !important;

    table-layout: auto !important;

    margin-bottom: 18px !important;
}


/* 「価格：」 */

#itemDetail-wrap table.price th {
    width: 75px !important;
    min-width: 75px !important;

    white-space: nowrap !important;
}


/* 金額側 */

#itemDetail-wrap table.price td {
    width: auto !important;

    text-align: right !important;

    white-space: nowrap !important;

    padding-left: 10px !important;
}


/* 金額を構成しているspanも改行禁止 */

#itemDetail-wrap table.price td span,
#itemDetail-wrap table.price .selling_price,
#itemDetail-wrap table.price .special_price,
#itemDetail-wrap table.price .taxin,
#itemDetail-wrap table.price .discount_rate {
    display: inline !important;

    white-space: nowrap !important;
}


/* =========================================================
   02. 販売期間を非表示
   E-ホワイトでは販売期間の行にdateが使われる
   ========================================================= */

#itemDetail-wrap table.spec tr.date {
    display: none !important;
}


/* =========================================================
   03. 「価格と在庫を一覧で確認する」をボタン化
   ========================================================= */


/* ボタンが入っているエリア */

#itemDetail-wrap .cartArea > div + div {
    display: block !important;

    margin: 12px 0 18px !important;
}


/* ShopServeの在庫価格確認コントロール */

#itemDetail-wrap .cartArea .dialogSStock,
#itemDetail-wrap .cartArea input.dialogSStock,
#itemDetail-wrap .cartArea button.dialogSStock,
#itemDetail-wrap .cartArea a.dialogSStock,

#itemDetail-wrap .cartArea > div + div > a,
#itemDetail-wrap .cartArea > div + div > button {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 230px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    box-sizing: border-box !important;

    background: #fff !important;

    color: #333 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    text-decoration: none !important;

    border: 1px solid #999 !important;
    border-radius: 6px !important;

    cursor: pointer !important;

    transition:
        background-color .15s ease,
        border-color .15s ease;
}


/* hover */

#itemDetail-wrap .cartArea .dialogSStock:hover,
#itemDetail-wrap .cartArea > div + div > a:hover,
#itemDetail-wrap .cartArea > div + div > button:hover {

    background: #f5f5f5 !important;

    border-color: #555 !important;

    text-decoration: none !important;
}


/* =========================================================
   04. 数量
   「数量」
   [  1  ] 枚
   ========================================================= */


/* 数量行 */

#itemDetail-wrap table.spec
tr:has(input[name^="CNT"]) {

    margin-bottom: 18px !important;
}


/* 数量の入力欄側を横並びに */

#itemDetail-wrap table.spec
tr:has(input[name^="CNT"]) > td {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    gap: 8px !important;

    padding: 0 !important;

    font-size: 16px !important;
    line-height: 1 !important;
}


/* 数量入力だけ小さく */

#itemDetail-wrap input[name^="CNT"] {

    display: inline-block !important;

    flex: 0 0 90px !important;

    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;

    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 5px 8px !important;

    text-align: center !important;

    font-size: 18px !important;

    border: 1px solid #aaa !important;
    border-radius: 6px !important;

    box-sizing: border-box !important;
}


/* 念のため quantityArea形式にも対応 */

#itemDetail-wrap .quantityArea {
    display: flex !important;

    align-items: center !important;

    gap: 8px !important;
}


#itemDetail-wrap .quantityArea input[name^="CNT"] {

    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;

    flex: 0 0 90px !important;
}


/* =========================================================
   商品ページのみ
   ヘッダー下の大型バナー3枚だけ非表示
   デザイン・お祝い・アイテム導線は残す
   ========================================================= */

@media screen and (min-width: 768px) {

    /* 店舗イメージバナー */
    body:has(article#Detail #itemDetail-wrap)
    header center:has(img[src*="shalemontennpo980px"]) {
        display: none !important;
    }

    /* 10周年バナー */
    body:has(article#Detail #itemDetail-wrap)
    header center:has(img[src*="shalemon10th980px"]) {
        display: none !important;
    }

    /* 送料無料バナー */
    body:has(article#Detail #itemDetail-wrap)
    header center:has(img[src*="souryoumuryou980px"]) {
        display: none !important;
    }

    /* 大型バナー直前の改行を消す */
    body:has(article#Detail #itemDetail-wrap)
    header #gnav + br {
        display: none !important;
    }

    /* バナーを消した後の余白を少し縮める */
    body:has(article#Detail #itemDetail-wrap)
    #contents {
        padding-top: 10px !important;
    }
}