@charset "UTF-8";

/*!
 * NOSHI-15: のし・包装対応アイコン
 *
 * サイズはテンプレートに書かずここに集約する。アイコン画像は差し替え予定で
 * 表示サイズも未確定のため、この width の値だけ変えれば済むようにしておく。
 *
 * セレクタが冗長なのは、本体 style.css の
 *   .ec-productRole img                   { width: 100%; }
 *   .ec-shelfGrid .ec-shelfGrid__item img { width: auto; }
 * に詳細度で勝つため。.noshi-icon だけでは本体側の width が優先される。
 */

.noshi-icon {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* 商品詳細（商品名の下・タグと同じ領域） */
.ec-productRole .ec-productRole__tags .noshi-icon-tag {
    display: inline-block;
    list-style: none;
    margin-left: 4px;    /* NEW / おすすめ のタグと横並びになったときの間隔 */
    vertical-align: middle;
}

.ec-productRole .ec-productRole__tags .noshi-icon-tag:first-child {
    margin-left: 0;      /* タグが1つも無いときは左を詰める */
}

.ec-productRole img.noshi-icon--detail {
    width: 140px;
    height: auto;
}

/* 商品一覧・検索結果。カードが小さいため商品詳細より小さく表示する */
.ec-shelfGrid .ec-shelfGrid__item .noshi-icon-shelf {
    margin-bottom: 4px;
}

.ec-shelfGrid .ec-shelfGrid__item img.noshi-icon--list {
    width: 95px;
    height: auto;
    max-width: 100%;
}

/* SP は2カラムでカード幅が狭いため、さらに小さくする（本体のブレークポイントに合わせる） */
@media only screen and (max-width: 767px) {
    .ec-productRole img.noshi-icon--detail {
        width: 120px;
    }

    .ec-shelfGrid .ec-shelfGrid__item img.noshi-icon--list {
        width: 80px;
    }
}