/* ==============================================================================
                            商品カード（単体）コンポーネント
============================================================================== */

.pv-c-card{
    /* カード自身の幅基準(cqw)でサイズ調整するためのコンテナ */
    container-type: inline-size;
}

.pv-c-card__link{
    display: block;
    color: inherit;
    text-decoration: none;
}

.pv-c-card__img-wrap{
    position: relative;
    width: 100%;
}

.pv-c-card__img{
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    vertical-align: bottom;
}

/* -----off率表示----- */
.pv-c-card__off{
    --off-font-size: clamp(2rem, 11cqw, 5.2rem);
    position: absolute;
    bottom: 3cqw;
    right: 3cqw;
    background: #985656;
    color: #fff;
    font-family: "Libre Caslon Display", serif;
    font-size: var(--off-font-size);
    text-align: center;
    display: block;
    border-radius: 50%;
    /* 文字数(桁数)に左右されず常に正円になるよう固定サイズにする */
    width: calc(var(--off-font-size) * 2.5);
    aspect-ratio: 1 / 1;
    padding: 0.15em;
    margin: 0;
    z-index: 2;
    box-sizing: border-box;
    overflow: hidden; /* 想定より長いoff値が来ても円からはみ出させない */
}

.pv-c-card__off[hidden]{
    display: none;
}

.pv-c-card__off-number{
    position: relative;
    top: -0.2em; /* フォント自体のアセント/ディセント分の余白を打ち消して上に詰める */
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.05em;
}

.pv-c-card__off-percent{
    position: relative;
    top: -0.3em; /* off-numberと同じ量だけ動かして高さを揃える */
    font-size: 0.65em;
    line-height: 1;
}

.pv-c-card__off-text{
    display: block;
    font-size: 0.6em;
    margin-top: -0.75em;
    letter-spacing: 0.05em;
    line-height: 1;
}
/* -----off率表示----- */

.pv-c-card__body{
    --text-size: clamp(1.3rem, 1.0936rem + 0.5291vw, 1.5rem);
    padding-block: 0.2em 1.25em;
    padding-left: 0.2em;
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}

.pv-c-card__body p{
    margin: 0;
}

.pv-c-card__name{
    /* --text-scaleは親要素側で上書きするための変数。ここではデフォルト値を書かず、未指定時は1にする */
    font-size: calc(var(--text-size) * var(--text-scale, 1));
}

.pv-c-card__price{
    font-size: calc(var(--text-size) * var(--text-scale, 1));
}

.pv-c-card__price--strike{
    font-size: calc(var(--text-size) * var(--text-scale, 1) * 0.85);
    text-decoration: line-through;
}

.pv-c-card__price--sale{
    font-size: calc(var(--text-size) * var(--text-scale, 1) * 1.1);
    color: rgb(192, 31, 31);
}

.pv-c-card__price-tax{
    font-size: 0.8em;
}

/* セール時は取り消し線側に"(税込み)"を出さない */
.pv-c-card__price--strike .pv-c-card__price-tax{
    display: none;
}

/* ==============================================================================
                        ここまで商品カード（単体）コンポーネント
============================================================================== */