@charset "utf-8";

/* 宝玉画像・pt表記はPackageBannerModuleのcanvas(.banner-mount)でカード幅いっぱいに描画する。
   以前は img を固定幅(260px)＋ブレークポイントごとの max-height/transform で
   合わせていたため、カード幅が連続的に変わる 1101px 以上で画像の倍率・位置がずれていた */
.hougyoku_container_wrap {
    padding: 0;
}

.hougyoku_container_wrap.silver {
    overflow: hidden;
}

@media (max-width: 1100px) {
    /* 画像がカード幅いっぱいになる分カードが縦に伸びるうえ、
       価格とボタンの間に 68px も空いて間延びして見える。
       下余白はボタン(高さ30px)がカード下端に収まる分だけ残す。
       rem は幅768px以下でルートが 8px になり実寸が半分になるため px で指定 */
    .container-cash .lower_cont-wrap {
        padding-bottom: 12px;
    }

    /* 商品名＋サブテキスト(「＋プレミアム宝玉ボーナス」)＋爵位ポイントで
       最大3行。2行分にすると、サブテキストが無い商品だけカードが縮んで
       価格・ボタンの位置が他と揃わないため、3行分を下限にする。
       元の 70px 固定よりは詰めつつ、行のズレは出さない */
    .container-cash .content-txt {
        height: auto;
        min-height: 66px;
    }

    /* 白い枠(li)は内容分の高さなので、サブテキストの有無で枠の高さが
       カードごとに変わって見える。グリッドの行の高さに合わせて揃える */
    .cont-list li {
        height: 100%;
    }
}

@media (max-width: 768px) {
    /* 宝玉カードは2列表示のため「カートに入れる」を中央寄せに戻す
       (積み荷カード向けの right 寄せ指定を打ち消す) */
    .container-cash .add-cart {
        width: 80%;
        left: 50%;
        right: initial;
        transform: translate(-50%, 0);
    }
}

/* 768px 超(ズームでの小数幅を含む)は .cont-ttl が 3em(約46px)ないし基準の 58px と大きく、
   サブテキスト(「＋プレミアム宝玉ボーナス」)が付くと中身が約86pxになる。
   上の ≤1100px の min-height:66px では足りず、サブテキストの有無で
   価格・ボタンの位置がカードごとにずれるため、この幅帯だけ引き上げる
   ※ CP-181123: 以前は (min-width: 768.01px) だったが、Chromium系ブラウザで
   端数px丸めにより768pxちょうどでもこの条件が真になることがあり、
   top.css側の @media(max-width:768px)(html font-size:8px)と同時に
   適用されて --card-font の clamp が上限8pxに張り付き文字が異常に縮む
   不具合があった。整数の769pxにして丸め誤差の余地をなくした
   (.container-cash 配下だけの変更なので他コンポーネントへの影響はない) */
@media (min-width: 769px) and (max-width: 1100px) {
    .container-cash .content-txt {
        min-height: 90px;
    }

    /* ボタンは基本値(高さ50px + bottom 35px = 85px)を占めるが、ボタン用の
       予約領域は .container-cash li .transition-product-detail の
       padding-bottom(50px)しかなく、35px はみ出して価格に重なる。
       予約内に収まる位置まで下げる(50px - 高さ50px = 0 では枠に接するので
       6px 残し、価格との間隔を確保する) */
    .container-cash .add-cart {
        bottom: 6px;
    }
}

/* 768px 超〜1024px では積み荷カード(.container-packaging)だけが --card-font で縮小され、
   宝玉カードは基準サイズのまま残って文字が大きく見えるため、同じスケールに揃える。
   1025px 以上は両カテゴリとも基準サイズで一致しているので対象外 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container-cash {
        --card-font: clamp(0.7rem, 1.5vw, 1rem);
    }

    .container-cash .cont-ttl {
        font-size: var(--card-font, 1rem);
        /* line-height: 1.5em × 2行分（文字サイズに追従） */
        height: 3em;
    }

    .container-cash .subtxt p {
        font-size: calc(var(--card-font, 1rem) * 0.8);
    }

    .container-cash .price-tag.cart {
        font-size: var(--card-font, 1rem);
    }

    .container-cash .add-cart button {
        font-size: var(--card-font, 1rem);
    }

    .container-cash .icn_point img {
        width: calc(var(--card-font, 1rem) * 1.5);
    }
}

/* 4列表示(top.css)は auto 指定のため商品名の長さで列幅が変わり、
   宝玉画像(カード幅に比例)の高さが列ごとに不揃いになるので均等幅にする */
@media (min-width: 1652px) {
    .cont-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}