@charset "utf-8";

/* ===================================================================
    components.css
    コンポーネント単位で汎用的に使えるスタイルを定義する
=================================================================== */


/* ===================================================================
    product-card
    商品カード。商品一覧・関連商品などで共通して使うコンポーネント
    移植元: modules/module.css の .lineuplist ul.lineup 配下
    スマホファーストで記述し、PC固有は @media (min-width: 768px) で上書きする
=================================================================== */
.product-card {

    /* ---------------------------------------------------------------
        カード全体の枠
    --------------------------------------------------------------- */
    > a {
        position: relative;
        display: block;
        padding: 15px;
        background: #F5F5F5;
        color: #444;
    }

    > a:hover {
        text-decoration: none;
        background-color: #dadada;
    }

    /* ---------------------------------------------------------------
        画像エリア
    --------------------------------------------------------------- */
    dl {
        dt {
            margin-bottom: 10px;
            background-color: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 37.866666666vw;

            &.image img {
                max-width: 100%;
                max-height: 100%;
            }
        }

        /* ---------------------------------------------------------------
            テキストエリア
        --------------------------------------------------------------- */
        dd {
            p {
                margin: 0 0 5px 0;
                font-size: 13px;
            }

            p:last-child {
                margin-bottom: 0;
            }

            p.name {
                font-size: 15px;
                font-weight: 700;
            }

            p.price {
                color: #DF2C2C;
                margin-bottom: 0;

                em {
                    color: #DF2C2C;
                    font-weight: 700;
                    font-size: 16px;
                }
            }

            p.makerprice {
                margin-bottom: 4px;
            }

            p.number {
            }

            ul.spec {
                box-sizing: border-box;
                display: table;
                width: 100%;
                margin: 0 0 5px 0;
                text-align: left;

                li {
                    display: table-cell;
                    padding: 5px 0;
                    border: 1px solid #D4D4D4;
                    background-color: #FFF;
                    font-size: 12px;
                    margin: 0;
                    text-align: center;
                    letter-spacing: -1px;
                }

                li:first-child {
                    border-right-width: 0;
                }
            }

            p.text {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
                margin-top: 10px;
                font-size: 13px;
            }

            /* ---------------------------------------------------------------
                ボタンエリア（将来カード内にボタンを出すときに有効化する）
                ※ 現時点では関連商品・商品一覧どちらもカード内にボタンは出していない
            --------------------------------------------------------------- */
            /*
            &.buttons {
                position: absolute;
                bottom: 20px;
                left: 5%;
                width: 90%;
            }
            */
        }

        /* ---------------------------------------------------------------
            ボタン（将来カード内にボタンを出すときに有効化する）
        --------------------------------------------------------------- */
        /*
        .buttonStyle {
            margin-bottom: 0;
        }

        .buttonStyle + .buttonStyle {
            margin-top: 10px;
        }

        .buttonStyle.orange span,
        .buttonStyle.gray span {
            margin: 0 auto 0 auto;
            padding: 10px 20px 10px 5px;
            width: 100%;
            line-height: 1.2em;
        }
        */
    }
}


/* -------------------------------------------------------------------
    PC（768px 以上）で上書きする指定
------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

    .product-card {

        > a {
            padding: 15px;
        }

        dl {
            dt {
                height: 202px;
            }

            dd {
                p.price {
                    em {
                        font-size: 26px;
                    }
                }

                ul.spec {
                    li {
                        font-size: 12px;
                        letter-spacing: normal;
                    }
                }

                p.text {
                    -webkit-line-clamp: 4;
                }

                /* ---------------------------------------------------------------
                    ボタンエリア（将来カード内にボタンを出すときに有効化する）
                --------------------------------------------------------------- */
                /*
                &.buttons {
                    bottom: 30px;
                }
                */
            }

            /* ---------------------------------------------------------------
                ボタン（将来カード内にボタンを出すときに有効化する）
            --------------------------------------------------------------- */
            /*
            .buttonStyle.orange span,
            .buttonStyle.gray span {
                padding: 10px 5px 10px 0;
            }
            */
        }
    }
}

/* ===================================================================
    例外エリア
    ページ固有の事情で product-card の挙動を上書きする箇所
=================================================================== */

/* -------------------------------------------------------------------
    関連商品エリアの product-card
    3カラムでの間延びを避けるためカードサイズを固定し、中央寄せにする
------------------------------------------------------------------- */
.relation .product-card {
    max-width: 252px;
    margin: 0 auto;
}

/* -------------------------------------------------------------------
    スマホの画像拡大表示（PhotoSwipe）の操作を分かりやすくする
    ☓ボタンだけ表示し、2倍のサイズで見やすくする
------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    /* ☓ボタン以外のUIは非表示 */
    .pswp__button--share,
    .pswp__button--fs,
    .pswp__button--zoom,
    .pswp__counter,
    .pswp__button--arrow--left,
    .pswp__button--arrow--right,
    .pswp__caption {
        display: none !important;
    }

    /* ☓ボタンを2倍のサイズに、自前で描画する */
    /* 画面右上にぴったりくっつかないよう上と右に余白を取る */
    .pswp__button--close {
        width: 88px;
        height: 88px;
        margin: 10px 10px 0 0;
        background-image: none;
        opacity: 1;
        position: absolute;
        top: 30px;
        right: 25px;
    }

    .pswp__button--close::before,
    .pswp__button--close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80px;
        height: 8px;
        background-color: #FFF;
        border-radius: 4px;
    }

    .pswp__button--close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .pswp__button--close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}