@charset "utf-8";
div, li {
  touch-action: manipulation; /* タップ動作を優先 */
}

/* iOS Safari で :active を抑制 */
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; /* 必要なら */
}

header {
    width: 100%;
    z-index: 999;
    top: 0;
    left: 0;
    /* 追加 */
}

.main-wrap {
    width: 100%;
    overflow: hidden;
}

.main {
    margin: 0 auto;
}

.icn-bottom.cart {
    bottom: 80px;
}

/* 2行でクランプする。
   display:-webkit-box + -webkit-line-clamp は Safari 18 以前だと旧レイアウトエンジン
   (RenderDeprecatedFlexibleBox) を通るため、商品カードが数百枚並ぶTOPでは
   レイアウトコストが爆発する。ここでは line-height 基準の max-height で
   2行分の高さに切り詰める方式に置き換えている。
   line-height はreset.cssの 1.5em を継承するので 2行 = 3em。
   高さは各ブレークポイントの height 指定で予約し、max-height で必ず2行に収める。 */
.cont-ttl {
    font-size: 1.2rem;
    overflow: hidden;
    /* em 換算の丸め(1/64px)で 3em が2行分をわずかに下回り、2行目が丸ごと
       クランプされる(line-clamp 対応ブラウザでは1行目末尾が「…」になる)ため 1px 余裕を持たせる */
    max-height: calc(3em + 1px);
    /* text-overflow: ellipsis は付けない。カード幅が小数(例:153.219px)で
       商品名の実測幅(例:153.6px)との差が1px未満でも「オーバーフローあり」と
       判定され、末尾1文字が折り返されず「…」に置き換わる。
       2行を超えた時の「…」は line-clamp 側が付ける */
    height: 58px;
}

/* 標準の line-clamp に対応したブラウザ(Safari 26+ / 近年のChrome)でだけ
   末尾の「…」を復活させる。これらは旧エンジンを通らないため速度問題は起きない。
   未対応ブラウザ(Safari 18 以前)ではこのブロックが無効になり、
   上の max-height による2行クランプのみが効く(「…」なし)。
   ※デザイン確認でNGなら、この @supports ブロックごと削除して良い */
@supports (line-clamp: 2) {
    .cont-ttl {
        line-clamp: 2;
    }
}

.lower_cont-wrap.tsumini .cont-ttl {
    height: 58px;
}

.webp-txt {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0.5rem 0rem;
    padding-right: 4px;
}

.pack_container .webp-txt img {
    width: 30px;
    height: auto;
}

.custom-nav {
    width: 100%;
    position: sticky;
    top: 50px;
    /* 初期状態では通常配置 */
    background-color: white;
    z-index: 800;
    padding: 10px 0px;
    /* transition: all 0.3s ease-in-out; */
    will-change: transform;
    transform: translateZ(0);
    /* ← Safari用の描画バグ対策 */
}

.custom-nav.sticky {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.custom-nav.fixed {
    position: fixed;
    top: 50px;
    /* `menu` の高さ - 10px で少し重ねる */
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 800;
    padding: 10px 26px;
    backface-visibility: hidden;
}

.selectbox-ttl {
    font-size: 1.2rem;
    text-align: center;
    font-weight: bold;
    color: #5F4C2D;
}

.cont-top-btn {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 37px;
    margin-bottom: -70px;
    z-index: 10;
    align-items: center;
    background: #fff;
    width: 100%;
}

.nav-container {
    position: sticky;
    top: 0;
    z-index: 100;
}

.select-ttl {
    font-size: 24px;
}



.num-pack {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    text-align: center;
    padding-bottom: 2rem;
}


.select-num select {
    appearance: none;
    width: 100px;
    height: 56px;
    padding: 10px 30px;
    border: 3px solid #C6BFBF;
    border-radius: 5px;
    background-color: #fff;
    color: #373737;
    font-size: 24px;
    cursor: pointer;
}

.select-box-wrap,
.treasure {
    padding-top: 80px;
    /* nav-containerが重ならないように調整 */
}

#custom-checkbox.visible {
    display: inline-block;
}


/* チェックボックスをデフォルトで非表示 */
.check input[type="checkbox"],
.lower_cont-wrap input[type="checkbox"] {
    display: none;
}

/* トグルON時にチェックボックスを表示 */

.toggle-button-1 input:checked~.container-pack .check input[type="checkbox"],
.toggle-button-1 input:checked~.container-pack .num-pack #purchaseButto {
    display: block;
}


.check label {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 50;
}

input[type="checkbox"] {
    /* -webkit-appearance: none; */
    /* デフォルトの見た目をなくす */
    /* appearance: none; */
    width: 37px;
    height: 37px;
    border: 3px solid #C6BFBF;
    border-radius: 1px;
    background-color: white;
    cursor: pointer;
    position: relative;
    margin-bottom: 1rem;
}

input[type="checkbox"]:checked {
    background-color: #312C1E;
    position: relative;
}

input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('../img/check.png');
    /* 画像のパスを確認 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}




#tabcontrol {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    max-width: 469px;
    width: 100%;
    align-items: center;
    white-space: nowrap;
}


.tab_item {
    width: 100%;
    display: flex;
    justify-content: center;
    transition: all 0.2s ease;
    align-items: center;
    text-align: center;
    gap: 8px;
    cursor: pointer;
}

.tab_item div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tab_item span {
    font-size: 14px;
}

.tab_item div img {
    height: 25px;
    width: auto;
    margin: 0;
    object-fit: contain
}


input[type="radio"] {
    display: none;
    /* ラジオボタンを非表示に */
}

/* 積み荷パックが選択されたとき */
input#pack:checked+.tab_item {
    color: #333;
    border-bottom: 6px solid;
    border-image: linear-gradient(to right, #520000, #E60012) 1;
}

/* 宝玉が選択されたとき */
input#treasure:checked+.tab_item {
    color: #333;
    border-bottom: 6px solid;
    border-image: linear-gradient(to right, #520000, #E60012) 1;
}

/* 宝玉タブが選択されていないときのデザイン */
input#treasure:not(:checked)+.tab_item {
    border-bottom: 6px solid #EEEEEE;
}

input#treasure:not(:checked)+.tab_item span {
    color: #999;
    /* 文字の色 */
}

/* 積み荷パックタブが選択されていないときのデザイン */
input#pack:not(:checked)+.tab_item {
    border-bottom: 6px solid #EEEEEE;
}

input#pack:not(:checked)+.tab_item span {
    color: #999;
    /* 文字の色 */
}






.toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toggle-button-1 {
    display: inline-block;
    position: relative;
    width: 73px;
    height: 35px;
    border-radius: 35px;
    background-color: #d9d9d9;
    cursor: pointer;
    transition: background-color .4s;
    box-sizing: content-box;
}

.toggle-button-1:has(:checked) {
    background-color: #940002;
}

.toggle-button-1::after {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background-color: #fff;
    content: '';
    transition: left .4s;
    top: 50%;
    left: 3.5px;
    transform: translateY(-50%);
}

.toggle-button-1:has(:checked)::after {
    left: 40px;
}

.toggle-button-1 input {
    display: none;
}



.select-box {
    display: flex;
    justify-content: center;
    gap: 2rem;
    position: sticky;
    align-items: center;
}


.selectbox-3 {
    display: inline-flex;
    align-items: center;
    position: relative;
}


.selectbox-3 select {
    appearance: none;
    min-width: 230px;
    height: 35px;
    padding: 2px 38px 2px 12px;
    border: 3px solid #C6BFBF;
    border-radius: 5px;
    background-color: #fff;
    color: #373737;
    font-size: 14px;
    cursor: pointer;
}

.dropdown-icon {
    position: absolute;
    right: 10px;
    /* ボタン内の右端にアイコンを配置 */
    top: 50%;
    transform: translateY(-50%);
    /* アイコンを縦中央に配置 */
    pointer-events: none;
    /* アイコンがクリックされないように */
}


/* #pack-best,#pack-special,#pack-lg,#pack-new-user,#pack-alliance {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 4% 4%;
    row-gap: 4%;
} */

.pack_container img,
.pack_container img a {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.container-pack {
    max-width: 465px;
}

.contpack-list {
    display: grid;
    width: 100%;
    height: 100%;
    margin-bottom: 4rem;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 70px 44px;
}

.contpack-list li {
    width: 100%;
    border-radius: 7px;
    box-shadow: 9px 8px 4px 1px rgba(0, 0, 0, 0.45);
    background: #fff;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    border: 1px solid #ac7d24;
}

.contpack-list li a {
    /* padding: 1rem; */
    position: relative;
}

.container-pack {
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.container-pack:active {
    transform: translate(6px, 9px);
}

.contpack-list li:hover {
    box-shadow: 9px 8px 6px 1px rgba(0, 0, 0, 0.35);
}

.contpack-list li:active {
    box-shadow: unset;
}



#purchaseButton {
    cursor: pointer;
    display: none;
    margin: 0 auto;
}

.btn-bulkbuy button {
    color: #fff;
    background: #000;
    width: 100%;
    height: 48px;
    max-width: 600px;
    font-size: 1.0rem;
    font-weight: bold;
    border-radius: 3px;
}

.btn-bulkbuy ::before {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 16px;
    height: 38px;
    left: 4px;
    top: 5px;
}

.btn-bulkbuy ::after {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 16px;
    height: 38px;
    right: 4px;
    top: 5px;
    transform: scale(-1.0);
}

.btn-bulkbuy {
    overflow: visible;
    text-align: center;
}



.cont-banner {
    margin-top: 8rem;
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: #F2F0EC;
    background-image: url(../img/banner-tx.png);
    background-repeat: repeat;
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
    display: flex;
    justify-content: center;
    /* .banner-listを中央に配置 */
}


.pickup {
    position: absolute;
    top: -40px;
    left: -35px;
    z-index: 99;
}
.pickup img {
    width: 80%;
}

.pickup.pickup-web {
    top: -35px;
    left: -20px;
}

.pickup.pickup-web img {
    width: 125%;
}

.new {
    position: absolute;
    top: -35px;
    right: 0px;
    z-index: 3;
    max-width: 47px;
}

.new img {
    width: 100%;
}

.cont-pack {
    margin-top: 40px;
}

.pack-img-wrap {
    width: 100%;
    background-size: cover;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.pack_container_wrap {
    height: 100%;
    width: 100%;
    background: #F2F0EC;
    display: flex;
    align-items: center;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.pack_container {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}



.pack-img {
    /*background-color: #DDD5C3;*/
    border-radius: 3px;
    max-width: 250px;
    margin: 0 auto;
    position: relative;
}

.pack-img img {
    margin-top: 0;
}

.pack-line {
    position: absolute;
    bottom: 0;

    width: 100%;
}

.pack-line img {
    width: 130%;
    left: 50%;
    transform: translateX(-50%);
}

.item {
    display: flex;
    justify-content: center;
    column-gap: 4%;
    margin: 4px auto 0;
    align-items: end;
    max-width: initial;
    height: 100px;
    flex-wrap: nowrap;
    row-gap: 25%;
    position: absolute;
    width: 100%;
}

.item-main {
    top: 0px;
}

.item-sub {
    top: 100px;
}

.item div {
    text-align: center;
}

.item div img {
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

.item-num {
    /* background-color: #fff; */
    padding: 2px 8px;
    /* border-radius: 30px; */
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 2px;
    position: absolute;
    bottom: -5%;
    right: -8%;
    z-index: 2;
    color: white;
    text-shadow:
        0.5px 0.5px 0 #000,
        -0.5px 0.5px 0 #000,
        0.5px -0.5px 0 #000,
        -0.5px -0.5px 0 #000,
        0.5px 0 0 #000,
        -0.5px 0 0 #000,
        0 0.5px 0 #000,
        0 -0.5px 0 #000;
}

.txt-bold {
    font-weight: bold;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF,
        -1px 1px 0 #FFF, 1px -1px 0 #FFF,
        0px 1px 0 #FFF, 0-1px 0 #FFF,
        -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.reset-container {
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

}

.deadline,
.subscription {
    max-width: 12rem;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background-color: #F57A09;
    padding: 0 20px;
    border-radius: 30px;
    white-space: nowrap;
}

.reset {
    max-width: 12rem;
    text-align: center;
    color: #F57A09;
    font-weight: bold;
    white-space: nowrap;
}

.remainin {
    display: flex;
    margin: 8px 0;
}

.numttl {
    color: #666;
    border-left: 6px solid #333;
    padding: 0 12px;
}

.num-purchases {
    font-weight: bold;
    color: #666;
    margin-left: 1rem;
}

.banner-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 左揃え */
    justify-content: center;
    max-width: 1280px;
    padding: 0 5rem;
    margin: 0 auto;
    width: min(100%, 1280px);
    /* 画面が小さくなったら縮小 */
}

.banner-top,
.banner-bottom {
    display: flex;
    gap: 3rem;
    justify-content: flex-start;
    /* 左揃えを維持 */
    width: 100%;
    flex-wrap: nowrap;
}

.banner {
    flex: 1;
    max-width: 368px;
    height: auto;
    min-width: 0;
}

.banner-top {
    align-items: flex-end;
    margin-bottom: 3rem;
}

.content-activated {
    background: #193D0F;
    border: 2px solid #78F36F;
    border-radius: 3px;
    padding: 0.5rem 0;
}
@media (max-width: 475px) {
    .content-activated {
        margin-top: 17px
    }
}
@media (max-width: 768px) {
    .content-activated {
        margin-top: 17px
    }
}

.activated-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;

}

.activated-img {
    width: 21px;
    display: flex;
}

.activated-cont img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.activated-cont p {
    font-size: 1.2rem;
    font-weight: bold;
    color: #A3D936;
    text-shadow:
        -2px -2px 2px #262421,
        -2px 0px 2px #262421,
        -2px 2px 2px #262421,
        0px -2px 2px #262421,
        0px 2px 2px #262421,
        2px -2px 2px #262421,
        2px 0px 2px #262421,
        2px 2px 2px #262421,
        -3px 0px 2px #262421,
        3px 0px 2px #262421,
        0px -3px 2px #262421,
        0px 3px 2px #262421;
}

.duration {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

/* Safari(WebKit)は opacity < 1 や filter を持つ要素ごとにオフスクリーンの
   透明レイヤーを確保して合成するため、完売商品を「表示したまま」にすると
   カード枚数 × レイヤー数だけスクロール中の再ラスタライズが発生し、描画が重くなる。
   レイヤー数はDOM上のカード枚数に比例して増える(画面内の枚数ではない)ため、
   グレーアウトでは filter を一切使わない。
   - 画像・アイコン … grayscale(100%) brightness(0.6) 済みの _gray.png に差し替える
                      (差し替えは top.js の SetPackDisabled が行う)
   - 文字・罫線     … 変換後と同じ色をこのファイルで直接指定する
   canvas内部(.banner-mount)の完売スタンプ・グレーアウトはPackageBannerModule.jsが直接描画する。
   リセットまでの時間(.reset-container)と価格帯表示(.price-tag)はグレーアウト対象外 */
.container-pack.disabled {
    pointer-events: none;
}

/* (.cont-ttl #5F4C2D / .numttl・.num-purchases #666 / .numttl の罫線 #333 の変換結果) */
.container-pack.disabled .cont-ttl {
    color: #2f2f2f;
}

.container-pack.disabled .numttl,
.container-pack.disabled .num-purchases {
    color: #3d3d3d;
}

.container-pack.disabled .numttl {
    border-left-color: #1f1f1f;
}

/* カートボタン。背景 #000 は変換後も #000 なので据え置き、枠線と文字色(#fff)だけ指定する */
.container-pack.disabled .add-cart {
    border-color: #999;
}

.container-pack.disabled .add-cart button {
    color: #999;
}

.container-pack.disabled .add-cart button::before,
.container-pack.disabled .add-cart button::after {
    background-image: url(../img/img_login_gray.png);
}

/* 効果発動中の表示(.activated-cont p #A3D936 / 縁取り #262421 / .duration #fff の変換結果) */
.container-pack.disabled .activated-cont p {
    color: #747474;
    text-shadow:
        -2px -2px 2px #161616,
        -2px 0px 2px #161616,
        -2px 2px 2px #161616,
        0px -2px 2px #161616,
        0px 2px 2px #161616,
        2px -2px 2px #161616,
        2px 0px 2px #161616,
        2px 2px 2px #161616,
        -3px 0px 2px #161616,
        3px 0px 2px #161616,
        0px -3px 2px #161616,
        0px 3px 2px #161616;
}

.container-pack.disabled .duration {
    color: #999;
}

/* .corner は index.html で読み込む top.css 側で background-image を持たない
   (common_inside.css は未読み込み)ため、グレーアウトの指定自体が不要 */

.price-tag.cart {
    background: #fff;
    border: 0px;
    width: 100%;
    max-width: initial;
    height: initial;
    margin: 0 auto;
    text-align: right;
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
}

#first-purchase {
    position: relative;
    left: 0px;
    top: 0px;
    margin-left: 3%;
}
#first-purchase.hidden {
  visibility: hidden;
}



.add-cart {
    background: #000;
    border: 1px solid #fff;
    border-radius: 3px;
    width: 60%;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 35px;
    transform: translate(-50%, 0);
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.add-cart:hover {
    background: #4a4a4a;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}

.add-cart button {
    font-size: 1.0rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.add-cart button::before {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 16px;
    height: 36px;
    left: 4px;
    top: 50%;
    transform: translate(0px, -50%);
}

.add-cart button::after {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 16px;
    height: 36px;
    right: 4px;
    top: 50%;
    transform: scale(-1.0) translate(0px, 50%);
}

.lower_cont-wrap.tsumini {
    padding: 0.8rem 0.8rem 6rem 0.8rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 290px;
}

.container-pack[data-category~="activated"] .lower_cont-wrap.tsumini {
    padding: 0.8rem 0.8rem 2rem 0.8rem;
}

.ttlprice-wrap {
    /* min-height: 84px; */
}

.cart-button {
    position: relative;
}

.cart-container.foot {
    position: fixed;
    z-index: 1001;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 14px 5rem;
    box-shadow: 13px 3px 5px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.cart-container.foot.hide {
    transform: translateY(100%);
}

.cart-foot-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-batch {
    position: absolute;
    top: -17px;
    right: -14px;
    z-index: 1;
    background: #e60012;
    border-radius: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    font-weight: bold;
    aspect-ratio: 1/1;
}

.cart-batch.head {
    font-size: 0.75rem;
    color: #fff;
    width: 30px;
    height: 30px;
}

.cart-icn {
    width: 25px;
    height: 25px;
}

.cart-icn img {
    width: 100%;
    height: auto;
}

.cart-icn p.cart-batch.foot {
    font-size: 0.75rem;
    color: #fff;
    width: 27px;
    height: 27px;
    top: -15px;
    right: -15px;
}

.cart-button.head {
    width: 1.8rem;
    height: 1.8rem;
}

.cart-button.head img {
    width: 100%;
    height: auto;
}

.cart-button.head img {
    width: 100%;
    height: auto;
}

.cart-button.foot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 38%;
    height: 50px;
    background: #750000;
    border-radius: 3px;
}

.cart-button.foot p {
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
}

.cart-button.foot::before {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 16px;
    height: 36px;
    left: 4px;
}

.cart-button.foot::after {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 16px;
    height: 36px;
    right: 4px;
    transform: scale(-1.0);
}

.total-price {
    font-size: 1.2rem;
    font-weight: bold;
}

.point-price {
    margin-bottom: 1rem;
}

.select-box-wrap {
    display: flex;
    position: relative;
    justify-content: center;
    gap: 24px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.select-box-wrap.hidden {
    transform: translateY(-18%);
    opacity: 0;
    pointer-events: none;
    padding-top: 46px;
}

.selectbox-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#sort-select {
    border: none;
    padding: 2px 38px 2px 12px;
    font-size: 14px;
    cursor: pointer;
}

.selectbox-sort .dropdown-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.sp-point {
    display: none;
}

.container-cash li .transition-product-detail {
    padding-bottom: 50px;
}

.pack-item {
    position: relative;
}

.pack-item-main {
    transform: scale(1.5, 1.5) translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    /* Safariでitem-numがずれる不具合対策 CP-176025 */
}
.item-etc {
    position: relative;
    bottom: 20px;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    /* 高さを.item div img(max-height:70px)と揃えて固定する。
       「他」はテキスト要素のためline-height由来の高さがブラウザ・iOSバージョンごとに
       微妙に異なり、align-items:end のクロス軸計算に誤差が出る。
       高さを固定してその誤差自体を発生させないようにする。
       %指定(bottom:20%等)だと、狭い画面幅用の #main .item{height:initial} で
       算出の基準(親の高さ)が無くなり0扱いになってしまうため、pxで固定する CP-178056 */
}
.item-etc .txt-bold {
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    /* 文字の縦位置は上の.pack-item-etc(position:relative)を基準に絶対配置し、
       枠の下端に固定する。line-heightがクロス軸配置の計算に影響しなくなる CP-178056 */
}

.item div img.bun-icon {
    position: absolute;
    z-index: 1;
    -webkit-mask-image: url('../img/mask_bun.png');
    mask-image: url('../img/mask_bun.png');

    -webkit-mask-size: cover;
    mask-size: cover;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-mode: alpha;
    mask-mode: alpha;

    display: block;
    width: 41px;
    top: 15px;
    left: 51%;
    transform: translate(-50%, 0);
}

.item div img.btl-frame {
    position: absolute;
    z-index: 1;
}

img.btl-icon {
    max-width: 67px;
    background: url(../img/btl2_frame_character_bg.png);
}

.shukuken-frame {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.item div img.shukuken-icon {
    position: absolute;
    top: 36px;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    z-index: 1;

    -webkit-mask-image: url('../img/mask_shukuken.png');
    mask-image: url('../img/mask_shukuken.png');

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-mode: alpha;
    mask-mode: alpha;

    background: url(../img/icon_shukuken_base.png) center/cover no-repeat;
}

.shukuken .shukuken-icon.lg {
    background: url(../img/icon_shukuken_lg_bg.png) center no-repeat;
    background-size: 150%;
}

.shukuken .shukuken-icon.n {
    background: url(../img/icon_shukuken_n_bg.png) center no-repeat;
    background-size: 150%;
}

.shukuken .shukuken-icon.r {
    background: url(../img/icon_shukuken_r_bg.png) center no-repeat;
    background-size: 150%;
}

.shukuken .shukuken-icon.sr {
    background: url(../img/icon_shukuken_sr_bg.png) center no-repeat;
    background-size: 150%;

}

.shukuken .shukuken-icon.ur {
    background: url(../img/icon_shukuken_ur_bg.png) center no-repeat;
    background-size: 150%;
}

@media (max-width: 1024px) {
    .item div img.shukuken-icon {
        width: 40px;
        height: 40px;
        top: 26px;
    }

    .pack-img img {
        min-height: 80px;
    }
}

@media (max-width: 768px) {
    .item div img.shukuken-icon {
        width: 20px;
        height: 20px;
        top: 15px;
    }

    .pack-img img {
        min-height: 55px;
    }

    .contpack-list li {
        box-shadow: 3px 5px 4px 1px rgba(0, 0, 0, 0.45);
        border: 0.8px solid #ac7d24;
        border-radius: 4px;
    }

    .pack-img-wrap {
        width: 100%;
        background-size: cover;
        position: relative;
        overflow: hidden;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .pack_container_wrap {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
}

@media (max-width: 475px) {
    .item div img.shukuken-icon {
        width: 18px;
        height: 18px;
        top: 13px;
    }
}

.package-lineup-item {

}
.package-lineup-item .package-lineup-item-icon {

}
.package-lineup-item .package-lineup-item-frame {
    position: absolute;
}

.price-wrap {
    text-align: right;
}

.price-txt-wrap{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.price-txt-wrap p:first-child{
    font-size: 1.2rem;
}

.warning-txt {
    font-size: 1rem;
}

/* 実際の非表示は SidebarCategoryModule.css の .footer-button.disabled(display:none)が行う。
   ここでは旧filterによるグレーアウトを削除済み(表示されないため見た目に影響しない) */
.footer-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 画面幅が狭くなった時にバナーも縮小 */
@media (max-width: 1280px) {

    .banner-list {
        width: 100%;
        /* 画面幅に合わせる */
        padding: 0 2rem;
        /* 余白を調整 */
    }

    .banner {
        max-width: calc(100vw / 3.2 - 2rem);
        /* バナーを縮小 */
    }


}

@media (max-width: 1100px) {
    .contpack-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 980px) {
    .select-box-wrap {
        /* flex-direction: column; */
        gap: 8px;
        width: 100%;
        max-width: 607px;
        margin: 0 auto;
    }

    .select-box {
        /* justify-content: space-between; */
    }

    .selectbox-sort {
        justify-content: flex-end;
    }

    .selectbox-ttl {
        /* width: 290px; */
    }
}

@media (max-width: 850px) {
    .toggle {
        display: inline-block;
        text-align: center;
    }

}

@media (max-width: 768px) {
    .price-txt-wrap p:first-child{
    font-size: 1.5rem;
   }

    .cont-ttl {
        font-size: 2.0rem;
    }

    .lower_cont-wrap.tsumini .cont-ttl {
        height: 50px;
    }

    .item div {
        text-align: center;
        max-width: 40px;
    }

    .item-etc {
        bottom: 10px;
    }

    .cont-list li a {
        padding-bottom: 0px;
    }

    .webp-txt.tsumini {
        position: relative;
        margin: 6px 0 0 0;
        width: 100%;
        background: #f2f0ec;
        justify-content: center;
    }

    .webp-txt.hougyoku {
        position: absolute;
        justify-content: center;
        margin: 0;
        width: 100%;
        bottom: 6px;
    }

    .webp-txt span {
        font-size: 1.75rem;
    }

    .sp-point {
        display: flex;
    }

    .item div .item-num {
        font-size: 1.0rem;
        white-space: nowrap;
        padding: 2px 8px;
    }

    .icn-bottom.cart {
        bottom: 50px;
    }

    .content-txt {
        height: 100px;
    }

    /* 積み荷パックが選択されたとき */
    input#pack:checked+.tab_item {
        border-bottom: 3px solid;
    }

    /* 宝玉が選択されたとき */
    input#treasure:checked+.tab_item {
        border-bottom: 3px solid;
    }

    /* 積み荷パックタブが選択されていないときのデザイン */
    input#pack:not(:checked)+.tab_item {
        border-bottom: 3px solid #EEEEEE;
    }

    /* 宝玉タブが選択されていないときのデザイン */
    input#treasure:not(:checked)+.tab_item {
        border-bottom: 3px solid #EEEEEE;
    }

    .custom-nav {
        top: 24px;
    }

    .total-price {
        font-size: 2.0rem;
    }

    #sort-select {
        font-size: 12px;
    }

    .select-box-wrap {
        max-width: 447px;
    }

    .custom-nav.fixed {
        top: 23px;
    }

    .select-box-wrap.hidden {
        transform: initial;
    }

    .lower_cont-wrap.tsumini {
        min-height: initial;
        padding: 1.5rem 1.5rem 5rem 1.5rem;

    }

    .container-pack[data-category~="activated"] .lower_cont-wrap.tsumini {
        padding: 1.5rem 1.5rem 2rem 1.5rem;
    }

    .lower_cont-wrap {
        padding: 0.8rem 0.8rem 6rem 0.8rem;
    }

    .add-cart {
        height: 30px;
        width: 48%;
        left: initial;
        right: 9%;
        bottom: 8px;
        transform: translate(0, 0);
    }

    .num-pack {
        text-align: end;
        padding-bottom: 0rem;
    }

    #pack-best,
    #pack-special,
    #pack-lg,
    #pack-new-user,
    #pack-alliance {
        display: block;
    }

    .container-pack {
        width: 100%;
        margin-bottom: 38px;
    }

    /* minmax(0, 1fr)にする理由はtop_compress.cssの@media(max-width:1300px)
       .contpack-listのコメント参照(単なる auto/1fr は暗黙的に minmax(auto, 1fr) 扱いになり、
       積み荷バナーcanvasのintrinsic widthでトラックが押し広げられてしまう) */
    .contpack-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .contpack-list li a {
        position: relative;
        display: grid;
        grid-template-columns: 0.94fr 2fr;
    }

    .pickup {
        top: -16px;
        left: -8px;
    }

    .pickup img {
        width: 50%;
    }

    .pickup.pickup-web {
        top: 20px;
        left: 25px;
    }
    
    .pickup.pickup-web img {
        width: 50%;
    }

    .pack-line img {
        width: 120%;
    }

    .new img {
        width: 70%;
    }

    .new {
        top: -25px;
        right: -16px;
    }

    .deadline,
    .subscription,
    .reset {
        max-width: 18rem;
        font-size: 1.5rem;
    }

    .reset-container {
        height: 36px;
    }

    .item {
        display: flex;
        gap: 2px;
        /* アイテム間の余白 */
        justify-items: center;
        /* アイテムを中央揃え */
        height: initial;
        flex-wrap: nowrap;
        row-gap: 25%;
    }

    .item div img {
        width: 100%;
    }


    .selectbox-3 select {
        max-width: 100%;
        font-size: 1.5rem;
        min-width: 90px;
        height: 26px;
        border: 2px solid #C6BFBF;
    }

    .tab_item {
        height: 24px;
        gap: 4px;
    }

    #tabcontrol::before {
        padding: 3px;
        top: 3px;
        bottom: 3px;
    }

    .tab_item span {
        font-size: 1.2rem;
    }

    .toggle p {
        font-size: 1.5rem;
        text-wrap: nowrap;
        margin-bottom: 4px;
    }

    .cont-top-btn {
        gap: 20px;
        margin-bottom: -75px;
    }

    .pack-cont {
        margin-bottom: 2rem;
    }

    .btn-bulkbuy button {
        font-size: 2rem;
    }

    .banner-list {
        width: 100%;
        padding: 0 2rem;
    }

    .banner {
        max-width: 100%;
    }

    .banner-top {
        align-items: center;
    }

    .banner-top,
    .banner-bottom {
        gap: 2rem;
        flex-flow: column;
    }

    /* トグルON時にチェックボックスを表示 */
    .toggle-button-1 input:checked~.container-pack .lower_cont-wrap input[type="checkbox"] {
        display: block;
    }

    .SPcheck {
        text-align: right;
        z-index: 1;
        position: relative;
    }

    .selectbox-ttl {
        font-size: 14px;
    }

    .toggle-button-1::after {
        width: 22px;
        height: 22px;
    }

    .toggle-button-1 {
        width: 65px;
        height: 25px;
    }

    #tabcontrol {
        width: 80%;
    }

    .tab_item div img {
        height: 17px;
    }

    .select-ttl {
        font-size: 1.5rem;
    }

    .select-num select {
        font-size: 1.5rem;
        height: 5rem;
        padding: 5px 30px;
    }

    .add-cart button {
        font-size: 1.5rem;
    }

    .add-cart button::after {
        width: 10px;
        height: 25px;
    }

    .add-cart button::before {
        width: 10px;
        height: 25px;
    }

    .numttl {
        font-size: 1.5rem;
    }

    .num-purchases {
        font-size: 1.5rem;
    }

    .pack_container .webp-txt img {
        width: 20px;
        height: auto;
    }

    .webp-txt.webp-txt.hougyoku img {
        width: 20px;
        height: auto;
    }

    .price-tag.cart {
        font-size: 1.75rem;
    }

    .activated-img {
        width: 17px;
    }

    .cart-batch {
        top: -11px;
        right: -8px;
    }

    .cart-batch.head {
        width: 21px;
        height: 21px;
        font-size: 1rem;
    }

    .cart-button.head {
        width: 2.8rem;
        height: 2.8rem;
    }

    .cart-button.foot {
        width: 50%;
        height: 34px;
    }

    .cart-container.foot {
        padding: 16px 2rem;
        z-index: 998;
    }

    .cart-button.foot p {
        font-size: 1.5rem;
    }

    .cart-button.foot::after {
        width: 10px;
        height: 25px;
    }

    .cart-button.foot::before {
        width: 10px;
        height: 25px;
    }

    .cart-icn {
        width: 23px;
        height: 21px;
    }

    .cart-icn p.cart-batch.foot {
        width: 17px;
        height: 17px;
        top: -9px;
        right: -5px;
    }

    .dropdown-icon {
        width: 15px;
        height: 15px;
    }

    .txt-bold {
        font-size: 1.2rem;
    }

    .pack_container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .activated-cont p {
        font-size: 1.5rem;
    }

    .duration {
        font-size: 1.5rem;
    }

    .item div img.bun-icon {
        width: 100%;
        max-width: 24px;
        top: 8px;
    }

}

@media (max-width: 640px) {

    .pack-line img {
        width: 100%;
    }

    input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    .pack-list li {
        padding: 10px 10px 20px;
    }

    .contpack-list {
        margin-bottom: 6rem;
    }

}

@media (max-width: 500px) {
    .item div {
        font-size: 2rem;
    }

    .select-box {
        /* display: block; */
        justify-content: space-between;
        text-align: center;
    }

    .selectbox-ttl {
        margin: 0.5rem 0;
        width: 290px;
    }

    .select-box-wrap {
        max-width: 305px;
    }
}

@media (max-width: 475px) {
    .item div img.bun-icon {
        width: 60%;
        max-width: 26px;
        top: 7px;
    }

    .item div {
        max-width: 35px;
    }
}

.chara-rank {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -15px;
    margin: 0 auto;
}

.chara-rank img.rank-star {
    width: 0.8rem;
    z-index: 2;
    margin-right: -0.28rem;
}

.chara-rank img.rank-star:last-child {
    margin-right: 0;
}

@media (max-width: 1024px) {
    .chara-rank {
        bottom: -18px;
    }

    .chara-rank img.rank-star {
        width: 0.6rem;
        margin-right: -0.21rem;
    }
}

@media (max-width: 768px) {
    .chara-rank {
        bottom: -20px;
    }
}

.item div .icn_attribute {
    position: absolute;
    z-index: 3;
}

.item div .icn_attribute.red {
    background: url(../img/character/icon_attribute_red.png) center no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
}

.item div .icn_attribute.gray {
    background: url(../img/character/icon_attribute_gray.png) center no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
}

.item div .icn_attribute.green {
    background: url(../img/character/icon_attribute_green.png) center no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
}

.item div .icn_attribute.blue {
    background: url(../img/character/icon_attribute_blue.png) center no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    background-size: contain;
}

@media (max-width: 1024px) {

    .item div .icn_attribute.red,
    .item div .icn_attribute.gray,
    .item div .icn_attribute.green,
    .item div .icn_attribute.blue {
        width: 1rem;
        height: 1rem;
        left: 0.5rem;
    }
}

@media (max-width: 768px) {

    .item div .icn_attribute.red,
    .item div .icn_attribute.gray,
    .item div .icn_attribute.green,
    .item div .icn_attribute.blue {
        width: 1.2rem;
        height: 1.2rem;
    }
}

/*--------------------------------------
        スマホでの表示制限スタイル
--------------------------------------*/

/* 表示制限用（フィルタ用 .none とは別運用） */
.is-hidden-sp {
    display: none !important;
}

#paginationBar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -33px;
    margin-bottom: 36px;
}

span#pagingStatus {
    font-size: 1.3rem;
    display: none;
}

.load-more {
    color: #fff;
    background: #750000;
    font-size: 1.5rem;
    padding: 3px 32px;
    border-radius: 2px;
}

.load-more:disabled {
    opacity: 0.2;
    pointer-events: none;
    filter: grayscale(100%);
}

.load-more::before {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 7px;
    height: 18px;
    left: 4px;
}

.load-more::after {
    content: "";
    position: absolute;
    background: url(../img/img_login.png);
    background-size: cover;
    width: 7px;
    height: 18px;
    right: 4px;
    transform: scale(-1.0);
}

/* PC/タブレットではボタン類を隠す（JSでも隠しますが保険） */
@media (min-width: 476px) {

    #loadMore,
    #pagingStatus {
        display: none !important;
    }
}

/* スマホ版横向き */
@media screen and (max-width: 1024px) and (orientation: landscape) {

    .cart-button.foot {
        height: 30px;
    }

    .cart-button.foot::before {
        height: 30px;
        width: 13px;
    }

    .cart-button.foot::after {
        height: 30px;
        width: 13px;
    }

    .cart-button.foot p {
        font-size: 12px;
    }

    .total-price {
        font-size: 12px;
    }

    .cart-icn {
        height: 20px;
        width: 20px;
    }

    .selectbox-3 select {
        height: 30px;
        font-size: 12px;
    }

    input#pack:checked+.tab_item {
        border-bottom: 3px solid;
    }

    input#pack:not(:checked)+.tab_item {
        border-bottom: 3px solid #EEEEEE;
    }

    input#treasure:not(:checked)+.tab_item {
        border-bottom: 3px solid #EEEEEE;
    }

    input#treasure:checked+.tab_item {
        border-bottom: 3px solid;
    }

    .cart-button.head {
        width: 1.5rem;
        height: 1.5rem;
    }

    .tab_item div img {
        height: 20px;
    }

    .cart-batch.head {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }

    /* .point-ttl img {
        width: 16px;
    } */

    .menubtn {
        height: 40px;
        width: 30px;
    }

    /* .menu {
        background: url(../img/menu_pattern.png) left top -6px repeat-x;
    } */

    .icn-bottom.cart {
        bottom: 50px;
    }

    .faq-bottom.cart {
        bottom: 54px;
    }

    .txt-webpoint p:nth-child(1) {
        font-size: 12px;
    }

    .txt-webpoint p:nth-child(2) {
        font-size: 13px;
    }

    .struc-tag li {
        padding: 4px 4px;
    }

    .top-logo img {
        padding-bottom: 0px;
    }

    .custom-nav {
        top: 20px;
        z-index: 101;
    }

    .cont-top-btn {
        gap: 20px;
        margin-bottom: -75px;
    }

    .tab_item span {
        font-size: 12px;
    }

    .toggle p {
        font-size: 1.5rem;
        text-wrap: nowrap;
        margin-bottom: 4px;
    }

    .cart-batch.head {
        width: 16px;
        height: 16px;
    }

    .dropdown-icon {
        width: 15px;
        height: 15px;
    }

    .cart-icn p.cart-batch.foot {
        font-size: 6px;
        width: 17px;
        height: 17px;
        top: -9px;
        right: -5px;
    }

    .cart-button.foot {
        width: 64%;
        height: 34px;
    }

    .cart-button.foot::after {
        width: 10px;
        height: 25px;
    }

    .cart-button.foot::before {
        width: 10px;
        height: 25px;
    }

    .warning-txt {
        font-size: 10px;
    }

    .price-txt-wrap p:first-child{
    font-size: 12px;
   }

}


/* --- 画面高が足りない環境で商品一覧の可視領域を稼ぐ ---
   以前はこの一式を上の `max-width: 1024px and (orientation: landscape)` に
   同居させていたが、orientation は「幅 > 高さ」で判定されるため
   縦長(= 幅 < 高さ)になった瞬間に一式まるごと無効化されていた。
   結果、高さが足りない縦レイアウト(高さの狭い WebView、短くリサイズした
   ウィンドウ等)ではヘッダーもトップ画像も消えず、
   「特定の横幅のときだけ効く」状態になっていた。
   本来の条件は「縦の余白が足りないこと」なので、幅・orientation ではなく
   高さのみで判定する。横向きスマホ(高さ約390px)も引き続きこの条件に入る。
   閾値 500px: 横向きスマホは 320〜460px、iPad 横向きは 744px 以上なので
   「本当に縦が足りない」ものだけを拾える値。
   ここは top_released.css(= index.html のみ読み込み)なので
   トップページ限定の上書きになる。common.css 側は変更しない */
@media screen and (max-height: 500px) {

    /* ヘッダー 99px → 60px。769px以上では common.css の ≤768px 指定
       (73px / ロゴ100px / Webポイント35px)が効かず PC寸法のままなので、
       同等の値をここで指定する */
    .nav-container {
        height: 60px;
        padding: 4px 2rem;
    }

    /* ロゴは common.css の @media(max-width:900px) に
       `.nav-wrap.cart .top-logo img` / `.nav-wrap.cart .logotxt img` という
       より詳細度の高い指定(100px / 114px / padding-bottom 6px)があるため、
       同じ詳細度で指定しないと 60px の黒帯に収まらない */
    .nav-wrap.cart .top-logo img {
        width: 100px;
        padding-bottom: 0px;
    }

    .nav-wrap.cart .logotxt img {
        width: 96px;
    }

    .nav-wrap.cart {
        margin-top: 0px;
    }

    .txt-webpoint {
        max-width: 205px;
        height: 35px;
        gap: 0px;
        background-size: 100% 35px;
    }

    .help {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    /* 見出し「積み荷パック」「宝玉購入」等: 32px + 上下余白45px → 20px + 16px。
       top_compress.css の @media(max-width:768px) に同詳細度の
       `.sec-ttl { font-size: 2.0rem }` があり、同ファイルが後に読まれるため、
       縦長で幅の狭い端末では #main を足して詳細度を上げないと負ける */
    #main .sec-ttl {
        font-size: 20px;
        margin: 6px 0 10px 0;
    }

    .contpack-list {
        margin-bottom: 24px;
    }

    /* トップ画像スライダー(1440x657)は width:100% のため 844px幅で約385px になり、
       それだけで画面高(約390px)を使い切ってしまう。
       画像は縦ほぼ全域に告知文字が入っており object-fit: cover では文字が欠けるため、
       高さが足りないときに限り非表示にして商品一覧の可視領域を確保する */
    .top-img-wrap {
        display: none;
    }

    /* カルーセル(バナースライダー)も同様に省略。
       694x158 が width:100% で約170px を占め、商品一覧が入らないため */
    .swiper-banner {
        display: none;
    }

    /* トップ画像を包む .inner には top.css の @media(max-width:768px) で
       margin-top: 40px が付く。中身(.top-img-wrap)を消してもこの余白だけが
       残り、幅768px以下では商品一覧が 40px 押し下げられるため打ち消す */
    .inner {
        margin-top: 0;
    }

    /* トップ画像・カルーセルを省略した結果 .custom-nav が最初のフロー要素になり、
       position: fixed のヘッダー(黒帯 60px)の下に潜るため黒帯の高さ分下げる。
       sticky の top も同値にして、スクロール追従時も黒帯に重ならないようにする */
    .custom-nav {
        top: 60px;
        margin-top: 60px;
        z-index: 101;
    }

    /* padding は top_border.css の @media(max-width:768px) に
       同詳細度の `.custom-nav { padding: 10px 0px 14px }` があり、
       同ファイルが top_released.css より後に読まれるため負ける。
       縦長で幅の狭い端末はこの 768px 指定に入るので、id で詳細度を上げる */
    #customNav.custom-nav {
        padding: 2px 0px;
    }

    /* margin-bottom(-56px) と .select-box-wrap の padding-top(60px) は
       タブ行を収める予約領域を作る対で、差分の 4px がクリアランスになる。
       対を崩すと絞り込み行と重なるため、両方を同じ幅だけ詰めること。
       タブ行の実測は 38〜42px だが、端末のフォントによって数px膨らんでも
       絞り込み行に重ならないよう、予約は 60px と余裕を持たせる。
       gap/margin-bottom は幅ごとの既存指定(≤768px, 横向き≤1024px)に依存せず
       この条件単独でも成立するよう、ここでも明示する */
    #customNav .cont-top-btn {
        gap: 20px;
        margin-bottom: -52px;
        margin-top: 2px;
    }

    /* 上の予約領域の相方。top_category-side.css の @media(max-width:768px) に
       同詳細度の `.select-box-wrap, .treasure { padding-top: 86px }` があり、
       同ファイルが後に読まれるため、#customNav を足して詳細度を上げる */
    #customNav .select-box-wrap,
    #customNav .treasure {
        padding-top: 56px;
    }

    /* 黒帯のパターン画像は 399x96。769px以上は background-size 未指定で
       原寸表示となり 60px の帯では上部だけが見えるので、帯の高さに合わせる。
       あわせて background-color を敷く: パターン画像は下側約40%が透明なため、
       帯の背後をスクロールしていく .main-wrap の商品画像が透けて見えてしまう
       (帯は position:fixed、.custom-nav の白背景は y=60px 以降しか覆わない) */
    .menu-container-wrap {
        background-size: contain;
        background-color: #000;
    }

    /* ハンバーガーメニューのドロワー(z-index:10)が .custom-nav(z-index:101)の
       背面に回り込んで隠れるため、前面に出す */
    .menu-wrap {
        z-index: 900;
    }

    /* --- 以下: 商品カードを1行分だけでも画面内に収めるための圧縮 ---
       トップ画像とカルーセルを消しても、幅769px以上では top_compress.css の
       幅ベースの圧縮(≤1024px / ≤768px)が効かずカードが大きいままで、
       実測でカード下端が 567px(幅844) 〜 739px(幅1280) と画面高を超えていた。
       そこで高さが足りないときは幅に関わらず ≤768px 相当のコンパクト表示に
       切り替え、カード1行が見え切るようにする。
       top_compress.css / top_category.css は top_released.css より後に
       読まれるため、同詳細度では負ける。#main を足して詳細度を上げる */

    /* カード幅を狭めて列数を増やす。カード内の画像・文字はカード幅に追従するので
       これだけで高さも縮む。

       最小幅が 230px だと、画面を広げていく途中で列数が一度減る谷ができる。
       原因は一覧の幅ではなく .main の左右 padding が段階的に太ることで、
         ・769px: html の font-size が 8px→16px に変わり 1rem が 8→16px
         ・1101px: top_compress.css の ≤1100px(1rem) が切れて top.css の 5rem
       に飛ぶため、その直後だけ一覧が 3列/4列に必要な幅を数px下回る。
       実測: 750〜768px は3列 → 769〜785px で2列 → 786px から再び3列、
             1028〜1100px は4列 → 1101〜1115px で3列 → 1116px から再び4列。
       最小幅を 214px まで下げると padding が太った直後でも足りるので谷が
       消え、列数が単調に増える(2列: 476px、3列: 702px、4列: 952px、
       5列: 1278px)。この値は、下の @media で一覧幅を積み荷・サブスクで
       揃えたうえで、どの列数の切り替わりも従来のサブスク(2列: 476px、
       3列: 712px、4列: 964px、5列: 1328px)以下に収まるよう決めている。
       カードは 1fr で伸びるため、切り替わり付近以外は従来と同じ幅のまま */
    #main .contpack-list {
        grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
        gap: 20px 12px;
        margin-bottom: 24px;
    }

    /* サブスク商品は .container-pack ではなく .container-pack-subscription を持つ。
       両方が持つ .container-packaging を使い、積み荷パックとサブスクの
       どちらにも同じ寸法が効くようにする */
    #main .container-packaging {
        max-width: 260px;
        margin-bottom: 5px;
    }

    /* 一覧の開始位置。top_category.css の @media(max-width:768px) に
       同詳細度の `.cont-pack { margin-top: 20px }` がある。

       積み荷パックは宝玉・サブスクと違い見出し(.sec-ttl)を持たないため、
       一覧が絞り込み行の直下から始まる。「WebStore限定」等の帯(.pickup)は
       カード上端より上へ絶対配置されるうえ z-index:99 で
       .custom-nav(z-index:101, 白背景)より背面なので、最上段のカードだけ
       帯の上部が絞り込み行に隠れて見切れる(実測 5〜8px)。
       下の .pickup 位置統一(はみ出し 7px)にクリアランス 5px を足した分だけ
       開始位置を下げる */
    #main .cont-pack {
        margin-top: 12px;
    }

    /* 帯(おすすめ/超おすすめ/WebStore限定/新)の位置。カードを 230px 前後まで
       縮めているのに、幅1025px以上では top_compress.css の幅ベース指定が
       効かず PC寸法(.pickup top:-50px / .pickup-web top:-30px・画像125%)の
       ままで、帯だけがカード幅いっぱいに大きく、上へ 28px もはみ出して
       絞り込み行に潜り込む。カード内の他の値と同じく ≤1024px 相当へ揃え、
       はみ出しを 7px 以内に収める */
    #main .pickup {
        top: -13px;
        left: -6px;
    }

    #main .pickup img {
        width: 37%;
    }

    #main .pickup.pickup-web {
        top: -10px;
        left: -5px;
    }

    #main .pickup.pickup-web img {
        width: 55%;
    }

    #main .new {
        top: -4px;
        right: -20px;
    }

    #main .new img {
        width: 54%;
    }

    /* 注意: このブロックでは長さ・文字サイズに rem を使わない。
       幅768px以下では html の font-size が 8px、769px以上では 16px と
       ルートサイズが切り替わるため、同じ rem 値でも実寸が倍変わってしまう。
       この条件は「高さ」だけで判定していて幅をまたぐので、px で固定する。

       カード内の各値は ≤1024px 相当(カード幅250px前後を想定した寸法)を使う。
       ≤768px 相当(カード幅180px想定)にすると、パック中身のアイコンが
       重なったり pt表示が大きすぎたりしてバランスが崩れる */

    /* 文字サイズの基準。top_compress.css の ≤1024px にある
       clamp(0.7rem, 1.5vw, 1rem) と同じ挙動を px で定義する */
    #main .container-packaging {
        --card-font: clamp(11px, 1.5vw, 14px);
    }

    /* 商品画像まわり(≤1024px 相当) */
    #main .pack-img-wrap {
    }

    #main .pack_container img,
    #main .pack_container img a {
        width: 60%;
        overflow: visible;
    }

    #main .pack-img-wrap .gift-txt img {
        /* #################################################################### */
        /* ##### CP-179345 ギフトアイコンの調整デザイン反映済み。変更禁止 ##### */
        /* #################################################################### */
        width: 60px;
        /* #################################################################### */
        /* ##### CP-179345 ギフトアイコンの調整デザイン反映済み。変更禁止 ##### */
        /* #################################################################### */
    }

    #main .pack-img img {
        min-height: 80px;
    }

    /* min-width: 0 は下の `#main .item { flex-wrap: nowrap }` とセット。
       flex アイテムの既定(min-width:auto)では中身の最小幅より縮まないので、
       アイコンの数が多いカードで 1行に収まらずカード幅を超えてしまう */
    #main .pack-item {
        max-width: 70px;
        min-width: 0;
    }

    #main .pack-line img {
        width: 56%;
        display: block;
    }

    #main .pack_container_wrap {
    }

    /* pt表示(webp-txt)は画像領域の右下に絶対配置され、内容の幅だけ左へ伸びる。
       item-sub のアイコンが3つ並ぶと右端アイコンの数量表示がここに届いて
       重なるため、Pアイコンと文字を一段小さくして張り出しを抑える */
    #main .pack_container .webp-txt img {
        width: 15px;
        height: auto;
    }

    #main .webp-txt.tsumini span {
        font-size: 10px;
    }

    /* パック中身のアイコンは .pack-img-wrap 基準の絶対配置。
       アイコンはカード幅に比例して大きくなる(カード幅265pxで約30px)のに対し、
       item-main と item-sub の間隔は絶対値で固定されるため、既存のどの段の値
       (≤768px:10/40、≤1024px:20/68)でも item-main の数量表示が
       item-sub のアイコンに重なる。
       数量表示(.item-num)は position:absolute の bottom:-5% でアイコンの
       右下にぶら下がるため、アイコンの高さ(約32px)より下にも張り出す。
       その張り出しを含めて収まる 52px の間隔を確保する。

       flex-wrap: nowrap は中身アイコンの折り返し防止。.item は幅が
       カード幅いっぱい(width:100%)の折り返しありコンテナなので、
       アイコン(.pack-item, 最大70px)を並べた幅がカード幅を超えると次の段に
       送られる。.item は position:absolute で高さが確保されておらず、
       送られた段はカードの外へ出て下の商品名に重なっていた。
       実測ではカード幅が約226pxを下回ると発生し、画面幅で言うと704px以下や
       960〜1000px 前後が該当していた(カード幅は列数の切り替わり直後に
       最も狭くなるので、狭い画面だけの問題ではない)。
       1行に固定し、収まらないときは .pack-item の min-width: 0 で
       アイコン側が縮むようにする。
       サブスクのセクションでは同じ理由で
       `section.cont-subscription .item { flex-wrap: unset }` が既にあるが、
       定期商品は積み荷パックの一覧にも並ぶため、そちらには効いていない */
    #main .item {
        gap: 2px;
        height: initial;
        transform: scale(0.6);
        flex-wrap: nowrap;
    }

    /* item-sub は DOM 順で後にあるため、重なったときに item-main の数量表示が
       item-sub のアイコンの背面に隠れる。item-main を前面に出して数字を残す */
    #main .item.item-main {
        top: 12px;
        left: 0px;
        z-index: 3;
    }

    #main .item.item-sub {
        top: 64px;
        left: 0px;
    }

    #main .item div img {
        width: 77%;
    }

    #main .item div img.bun-icon {
        width: 46%;
        max-width: 32px;
        top: 12px;
    }

    /* 上の `#main .item div img` は ID を含む分、既存のクラス指定
       (.chara-rank img.rank-star / .item div img.shukuken-icon) より詳細度が
       高く、本来の固定サイズを 77% で上書きしてしまう。
       ≤1024px 相当の値に戻す(bun-icon と同じ理由の個別打ち消し)。
       ランクの星は .chara-rank(親幅 = .pack-item の 77% = 約54px)の中で
       77% = 約42px まで肥大し、3つ並ぶと折り返して縦に積まれていた。
       .item に transform: scale(0.6) が効くので、カード基準サイズ
       (0.8rem = 12.8px)をそのまま px で置けば見た目もカードと同率で縮む */
    #main .chara-rank img.rank-star {
        width: 13px;
        margin-right: -4px;
    }

    #main .chara-rank img.rank-star:last-child {
        margin-right: 0;
    }

    /* 祝剣アイコンは .pack-item 内の絶対配置。77% だとフレームより大きくなり
       枠からはみ出すため、≤1024px の 40px / top 26px に戻す */
    #main .item div img.shukuken-icon {
        width: 40px;
        height: 40px;
        top: 26px;
    }

    /* 追想アイコン(itemType:46)も同じ巻き込み。指定は top_border.css 側にある。
       レアリティ表記(「UR」等)はアイコン右下に絶対配置する 16px の小さな画像なのに
       77% まで肥大してアイコンを覆っていた。≤1024px の値に戻す */
    #main .item div img.rarity-icon {
        width: 16px;
        bottom: -2px;
        right: -6px;
    }

    /* 追想の絵柄。.frame-wrapper::after の枠(border-image 17.5px)は固定寸法なので、
       中身だけ 77% に縮むと枠と中身がずれる。本来の 100% に戻す
       (外寸は #main .pack-item の max-width: 70px で抑えている) */
    #main .item div img.scene-icon {
        width: 100%;
    }

    #main .item div .item-num {
        font-size: 11px;
        margin-top: 0px;
    }

    /* カード下部。min-height(290px / ≤1024pxで210px)を外し、
       下余白はカートボタン(高さ34px + bottom 8px = 42px)が
       テキストに重ならない分だけ残す */
    #main .lower_cont-wrap.tsumini {
        min-height: 0;
        padding: 11px 13px 46px 13px;
    }

    /* .cont-ttl は -webkit-line-clamp: 2 の2行表示。≤768px 相当の height:23px は
       1行分しかなく、商品名が2行になると1行目と2行目が重なって表示される。
       カードを縦に伸ばさずに2行入るよう、文字と行間を詰めて高さを2行分にする */
    #main .lower_cont-wrap.tsumini .cont-ttl {
        font-size: var(--card-font);
        line-height: 1.2;
        height: 2.4em;
    }

    /* .reset-container には「購入回数リセットまで」(.reset) と
       「あと◯日◯時間」(.deadline) が縦に並ぶ。
       - top_compress.css の @media(max-width:768px) にある height:24px は
         1行分しかなく、両方が出る商品で .reset が上にはみ出して商品名と重なる
       - かといって height:auto にすると、.reset が無い商品でカードが上に詰まり、
         「購入回数」以下の位置が他のカードとずれる
       そこで2行分を常に確保する。中身は justify-content: flex-end の下寄せなので、
       .reset の有無にかかわらず .deadline 以下の位置が揃う */
    #main .reset-container {
        height: calc(var(--card-font) * 3.2);
    }

    #main .deadline,
    #main .subscription,
    #main .reset {
        max-width: 288px;
        font-size: var(--card-font);
    }

    /* カードが狭いと「購入回数」「残り2回」が折り返してカードが縦に伸びるため、
       折り返さずに1行へ収める */
    #main .numttl,
    #main .num-purchases {
        font-size: var(--card-font);
        white-space: nowrap;
    }

    #main .lower_cont-wrap.tsumini .price-tag.cart {
        font-size: var(--card-font);
    }

    /* 価格帯の見出し(「¥ 15,000」)。top_border.css の
       `.divider .divider-text p { font-size: 2.0rem }` は幅769px以上では
       ルート16px のまま効くため、横向きスマホでは32pxになり大きすぎる。
       隣に並ぶ「一括でカートに入れる」(.btn-addCart)は 1.2rem =
       幅769px以上で19.2px、幅768px以下では1.0rem = 8px なので、
       見出しがボタン文字より少し大きい関係を保てるサイズに合わせる。
       この条件は高さのみで判定していて幅768px(= ルート8px/16pxの境目)を
       またぐため、rem ではなく vw で幅に追従させる:
        - 幅956px(横向きスマホ最大級) → 20px (ボタン19.2px)
        - 幅768px以下 → 下限14px (ボタン8px・カード内価格14px と同等) */
    #main .divider .divider-text p {
        font-size: clamp(14px, 2.1vw, 20px);
    }

    #main .corner {
        width: 14px;
        height: 15px;
    }

    /* カード幅が 244〜260px あるので、≤768px 相当の height:20px では
       文字サイズに対してボタンが低すぎて潰れて見える。≤1024px 相当にする */
    #main .container-packaging .add-cart {
        height: 36px;
        width: 81%;
        right: 9%;
        bottom: 8px;
    }

    /* サブスクは「サブスク」バーと「初回7日分 無料!」バッジが入る分だけ
       価格ブロックが高く、積み荷パックと同じ下余白では価格が
       「内容確認へ」ボタンに重なる。下余白を広げて価格ブロックを上に寄せる */
    #main .container-pack-subscription .lower_cont-wrap.tsumini {
        padding-bottom: 62px;
    }

    /* バッジの上マージン(top_compress.css の ≤1024px で --card-font の半分)も
       詰めて、価格の位置をさらに上げる */
    #main .container-pack-subscription .price-tag.cart #first-purchase {
        margin-top: 2px;
    }

    /* 「/月」「/年」は top_subscription.css で 1.2rem(=19.2px)と価格本体より
       大きく、この行だけ行高が膨らんで価格ブロックを押し下げる。
       カード内の他の文字と同じ基準に揃える */
    #main .container-pack-subscription .frequency {
        font-size: var(--card-font);
        margin-right: 4px;
    }

    /* 宝玉カードは 769〜1024px で .cont-ttl が 3em(約43px)になるため、
       サブテキスト(「＋プレミアム宝玉ボーナス」)が付くと中身が約79pxになり、
       top_hougyoku.css の min-height:66px を超えて価格・ボタンの位置が
       サブテキスト無しの商品とずれる。3行分が収まる高さにする */
    #main .container-cash .content-txt {
        min-height: 90px;
    }

    /* 宝玉カードは .container-packaging を持たないため上のボタン指定が効かず、
       769px以上では基本値(高さ50px + bottom 35px = 85px)のままになる。
       ボタン用の予約領域は .container-cash li .transition-product-detail の
       padding-bottom(50px)なので、85px はそれを超えて価格に重なっていた。
       積み荷パックと同じ寸法(36px + bottom 8px = 44px)にして予約内に収める */
    #main .container-cash .add-cart {
        height: 36px;
        bottom: 8px;
    }

    #main .container-packaging .add-cart button {
        font-size: var(--card-font);
    }

    #main .container-packaging .add-cart button::before,
    #main .container-packaging .add-cart button::after {
        width: 13px;
        height: 31px;
    }

    /* 白い枠(li)は内容分の高さなので、リセット表示の有無や商品名の行数で
       カードごとに枠の高さが変わって見える。グリッドの行の高さに合わせて
       揃える(.container-pack は grid item で stretch されている) */
    #main .contpack-list li {
        height: 100%;
    }

    .item-etc {
        bottom: 20px;
    }
}

/* ロゴは常に横一列(common.css)。上の @media(max-height:500px) が指定する
   100px + 96px = 196px は、幅が 480px を下回るとWebポイント(最小141px)・
   カート・ハンバーガーを押し出し、ハンバーガーが画面外に切れる。
   横一列のまま収めるため、幅の狭い範囲だけ vw で縮める(16vw + 15vw)。
   480px 直下で 196px → 148px の段差が出るが、そのままではメニューが
   押し出されて操作できないため、ここはロゴの大きさより操作性を優先する。
   上のブロックより後に置くこと。同詳細度なので前に置くと 100px に負ける */
@media screen and (max-height: 500px) and (max-width: 480px) {
    .nav-wrap.cart .top-logo img {
        width: 16vw;
    }

    .nav-wrap.cart .logotxt img {
        width: 15vw;
    }
}

/* 積み荷パックとサブスクで列数が食い違うのを解消する。

   積み荷とサブスクは同じ .contpack-list で列数の条件も同じだが、
   top_category-side.css の @media(max-width:1100px) に
   `.cont-pack { margin-left: 2.5rem }` があり、積み荷の一覧だけが
   左端のカテゴリータブ(.drawer-toggle, 幅 3rem)を避けるぶん狭い。
   その差(≤768px で 20px、769〜1100px で 40px)のせいで列が増える幅が
   積み荷だけ後ろにずれ、実測で 476〜495px / 712〜731px / 964〜1003px の
   各区間はサブスクより1列少なくなっていた(例: 幅712〜731px は
   サブスク3列に対し積み荷2列)。

   タブ避けの余白を .cont-pack から #main の padding-left へ移すと、
   一覧の幅が積み荷・サブスクで同じになり列数も常に一致する。
   padding-left はタブ幅に追従させるため、あえて 3rem を基準にする
   (このブロックは幅768pxをまたぐが、避けるべきタブ自体が rem 指定で
   伸縮するので、px 固定にするとどちらかの幅で過不足が出る)。
   +4px は現状のタブとカードの間隔と同じクリアランス。
   幅1101px以上は .main の padding が 5rem(80px) でタブを吸収できており、
   `.cont-pack` の margin-left も付かないので対象外 */
@media screen and (max-height: 500px) and (max-width: 1100px) {
    #main {
        padding-left: calc(3rem + 4px);
        padding-right: 8px;
    }

    #main .cont-pack {
        margin-left: 0;
    }
}

/* 絞り込みのカテゴリー画像がセレクトボックスからはみ出すのを抑える。

   カテゴリー画像(.select-display)はセレクトボックスに重ねる絶対配置で、
   高さは top_category-side.css で 35px(324x120 の画像は 42px + margin-top -8px)
   の固定値。一方セレクトボックス自体は幅768px以下だと
   top_compress.css の @media(max-width:768px) で height: 22px まで縮むため、
   画像だけが上下に約6.5px(324x120 は上に18px)はみ出す。

   通常の画面高では .custom-nav の padding-bottom(top_border.css の
   @media(max-width:768px) で 14px)がはみ出し分を覆うので見えないが、
   高さ500px以下では上のブロックで padding を 2px まで詰めているため、
   はみ出した画像が黒帯下の白背景を越えて商品一覧に重なってしまう。
   画像をセレクトボックスの高さに合わせて縮めて解消する。

   幅769px以上はセレクトボックスが 35px のままで画像と一致するため対象外。
   値は既存比率をそのまま縮小(35→22 の 0.63倍、42→26、-8→-5)。
   top_category-side.css は top_released.css より後に読まれるので、
   #customNav を足して詳細度で上回る */
@media screen and (max-height: 500px) and (max-width: 768px) {
    #customNav .select-display img {
        height: 22px;
    }

    #customNav .select-display.is-height-120 img {
        height: 26px;
        margin-top: -5px;
    }

    /* 追想アイコン(itemType:46)だけが他のアイテムより小さく表示される問題。

       追想は .pack-item の中にもう一段 div(.frame-wrapper)を挟む唯一の
       アイテム種別。このファイルの @media(max-width:768px) にある
       `.item div { max-width: 40px }`(1446行目付近)は .item 配下の div を
       すべて対象にするため、.pack-item だけでなく .frame-wrapper にも効く。
       上の @media(max-height:500px) は `#main .pack-item { max-width: 70px }` で
       .pack-item 側の 40px は解除しているが、.frame-wrapper 側は 40px のまま
       残るため、枠が 40px で頭打ちになり、幅が内容に追従する .pack-item ごと
       40px まで縮んでいた(実測: 幅767px×高さ499px で .pack-item-main が
       40px。他アイテムの .pack-item は 70px)。

       あわせて枠の寸法も ≤1024px 相当へ戻す。top_border.css の
       @media(max-width:768px) は `.frame-wrapper { max-height: 19px }`
       (≤475px では 18px)と枠線 9px を指定しており、
       中身(.scene-icon)だけ ≤1024px 相当に戻しても枠がついてこない。
       top_border.css は top_released.css より後に読まれるため、
       #main を足して詳細度で上回る */
    #main .item .frame-wrapper {
        max-width: none;
        max-height: none;
    }

    /* border ショートハンドは使わないこと。border-image-source まで none に
       リセットしてしまい、レアリティ別の枠画像を当てている
       `.frame-wrapper.ur::after` 等より詳細度が高いぶん打ち消して、
       金枠が丸ごと消える。幅だけを上書きする */
    #main .frame-wrapper::after {
        inset: -2px;
        border-width: 17.5px;
    }
}



/* サブスクのみ以前の画像表示 */
section.cont-subscription .pack-img-wrap {
    
}
section.cont-subscription .pack_container_wrap {
}

section.cont-subscription .pack-img {
    max-width: 146px;
}

section.cont-subscription .pack-img img {
    min-height: 134px;
}

section.cont-subscription .item {
    flex-wrap: unset;
    row-gap: unset;
    position: static;
    width: auto;
}

section.cont-subscription .pack-item-etc {
    position: static;
    right: auto;
    bottom: auto;
}

@media (max-width: 768px) {
    section.cont-subscription .pack-img-wrap {
    }
    /* section.cont-subscription .pack_container img,
    section.cont-subscription .pack_container img a {
        width: 42%;
    } */
    section.cont-subscription .pack-img img {
        min-height: 55px;
    }
    section.cont-subscription .item {
        gap: 1px;
        transform: scale(1.2);
    }
    section.cont-subscription .item-num {
        text-align: right;
        right: 15%;
    }
}
@media (max-width: 1024px) {
    section.cont-subscription .item {
        gap: 2px;
        transform: scale(1.0);
    }
    section.cont-subscription .item-num {
        text-align: right;
        right: 0px;
    }
}


.gift-txt {
    position: absolute;
    right: 12px;
    top: 5%;
}

/* デフォルト(縮小なし)サイズ。top_compress.cssの「.pack_container img」(幅60%)が
   全imgに一律で効いてしまうため、gift-txtは同じ詳細度で明示的に上書きする。
   各ブレークポイントでの縮小はtop_compress.cssの「.pack-img-wrap .gift-txt img」で指定 */
.pack-img-wrap .gift-txt img {
    width: auto;
}