/* カスタマイズ用CSS */

/* ==========================================================================
   商品サムネイルの表示サイズを揃える（2026-08-20）

   仕入元の画像は縦横比も画素数もバラバラ（実測 165x400 / 387x600 / 182x400）。
   そのまま出すとカードごとに画像の大きさが変わり、一覧の並びが揃わない。
   正方形の枠に収めて、どのカードも同じ大きさに見えるようにする。

   🔴 切り抜き（object-fit: cover）は使わない。枠に合わせて切ると商品が枠外へ
      出てしまい、何を売っているのか分からなくなる。contain で全体を見せ、
      余白は白で埋める（[[never-cut-images-or-description]] と同じ考え方）。
   ========================================================================== */
.ec-newItemRole__listItem img,
.ec-shelfGrid__item img,
.ec-shelfGrid__item-image img,
.ec-sliderItemRole .item_nav img,
.ec-sliderItemRole .slideThumb img,
.ec-relatedRole__relatedItemImage img,
.ec-searchnavRole ~ .ec-shelfRole img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #fff;
}

/* 商品名の行数が違うと価格の位置がずれる。カードを縦のフレックスにして
   価格を下端へ寄せ、行数が違っても価格の高さが揃うようにする。
   🔴 商品名は省略しない（何行になっても全部出す）。 */
.ec-newItemRole__listItem > a,
.ec-shelfGrid__item > a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ec-newItemRole__listItemPrice,
.ec-shelfGrid__item .price02-default {
    margin-top: auto;
}

.ec-newItemRole__listItem,
.ec-shelfGrid__item {
    display: flex;
    flex-direction: column;
}