@charset "utf-8";

/* ==================================================================
    商品メイン画像アイコン表示用
    /libs/product_main_image_icon/style.css

    プレフィックス: pmi (product-main-image-icon)
=================================================================== */

/* --------------------------------
   □ 親要素（position: relative）
-------------------------------- */
.pmi-wrap {
    position: relative;
}

/* ブロック要素の場合（dt など） */
dt.pmi-wrap,
div.pmi-wrap {
    width: 100%;
}

/* インライン要素の場合（a, span など） */
a.pmi-wrap,
span.pmi-wrap {
    display: inline-block;
}

/* --------------------------------
   □ アイコン共通
-------------------------------- */
.pmi-icon {
    position: absolute;
    object-fit: contain;
    z-index: 10;
    pointer-events: none;
}

/* --------------------------------
   □ 位置（四隅ぴったり）
-------------------------------- */
.pmi-icon-top-left {
    top: 0;
    left: 0;
}

.pmi-icon-top-right {
    top: 0;
    right: 0;
}

.pmi-icon-bottom-left {
    bottom: 0;
    left: 0;
}

.pmi-icon-bottom-right {
    bottom: 0;
    right: 0;
}

/* --------------------------------
   □ サイズ（親要素に対する割合・上限）
-------------------------------- */

/* 大: 40% */
.pmi-size-1 {
    max-width: 40% !important;
    max-height: 40% !important;
}

/* 中: 25% */
.pmi-size-2 {
    max-width: 25% !important;
    max-height: 25% !important;
}

/* 小: 15% */
.pmi-size-3 {
    max-width: 15% !important;
    max-height: 15% !important;
}

/* デフォルト（未指定時）: 中と同じ */
.pmi-size-0 {
    max-width: 25% !important;
    max-height: 25% !important;
}