/* ==============================================================================
                                グローバル変数
============================================================================== */
:root{
    --fs-base: clamp(1.4rem, 1.1936rem + 0.5291vw, 1.6rem); /* フォント標準サイズ */
    --fs-title: clamp(2rem, 0.56rem + 1.51vw, 2.4rem); /* 見出し標準サイズ */
    --fs-caption:clamp(1.2rem, 0.9936rem + 0.5291vw, 1.4rem); /* キャプション標準サイズ */
    --fs-price: clamp(1.2rem, 0.9936rem + 0.5291vw, 1.4rem); /* 商品価格標準サイズ */
    --fs-price-strike: calc(var(--fs-price) * 0.85); /* 打ち消し線あり商品価格標準サイズ */
    --fs-price-sale: calc(var(--fs-price) * 1.15);; /* セール価格標準サイズ */

    --space-title-after:clamp(2.4rem, 1.57456rem + 2.1164vw, 3.2rem); /* 見出し下の標準スペース */
    --space-title-caption:0.4rem; /* 見出しとキャプションの間のスペース */
    --space-section-after:clamp(9.6rem, 2.9968rem + 16.9312vw, 16rem); /* セクション下の標準スペース */
}

/* ==============================================================================
                                グローバル変数ここまで
============================================================================== */



/* ==============================================================================
                                    企画ページ
============================================================================== */

/* -----------------キャンペーンメインビジュアル---------------- */
.pv-p-campaign__mainvisual{
    width: min(100%, 1200px);
    margin-inline: auto;
    margin-bottom: calc(var(--space-section-after) / 1.5); /* セクション間の標準スペースの半分 */
}

.pv-p-campaign__mainvisual img{
    width: 100%;
    vertical-align: bottom;
}
/* -----------------/キャンペーンメインビジュアル---------------- */

/* -----------------キャンペーンクーポン--------------- */
.pv-p-campaign-coupon{
    width: min(95%, 900px);
    margin-inline: auto;
    margin-bottom: calc(var(--space-section-after) / 1.25);
}

.pv-p-campaign-coupon__title{
    font-size: var(--fs-title);
    text-align: center;
    margin-bottom: var(--space-title-caption);
}

.pv-p-campaign-coupon__caption{
    font-size: var(--fs-caption);
    text-align: center;
    margin-bottom: 1em;
    word-break: break-all;
    overflow-wrap: break-word;
}
/* -----------------キャンペーンクーポン--------------- */

/* -----------------キャンペーンメニュー---------------- */
.pv-p-campaign-nav{
    width: min(95%, 1000px);
    margin-inline: auto;
    font-size:var(--fs-base);
    margin-bottom: calc(var(--space-section-after) - 1em);/* キャプションテキストが持ってるmargin-bottom分を引いてる */
    text-align: center;
    font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}

.pv-p-campaign-nav__title{
    font-size: var(--fs-title);
    margin-bottom: var(--space-title-after);


}

.pv-l-campaign-nav__wrapper{
    --campaign-nav-gap:10px; /* ギャップの幅 */
    --campaign-nav-column-max-count:3; /* 最大列数 */
    --campaign-nav-column-min-width:130px; /* 列の最小幅 */
    /* 最大列数で表示させた場合に、画面幅に対して各列が均等にとるべき幅 */
    --_campaign-nav-column-width-calculated:calc((100% - var(--campaign-nav-gap) * (var(--campaign-nav-column-max-count) - 1)) / var(--campaign-nav-column-max-count));
    /* 列の最小幅を下回らない限り、計算した均等な幅になる。ただし画面幅が列の最小幅を下回った場合は画面幅になる */
    --_campaign-nav-column-width: min(100%, max(var(--campaign-nav-column-min-width), var(--_campaign-nav-column-width-calculated)));
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(var(--_campaign-nav-column-width),1fr));
    gap:var(--campaign-nav-gap);
}

.pv-p-campaign-nav__item-img{
    vertical-align: bottom;
}

.pv-p-campaign-nav__item-text{
    display: inline-block;
    margin-block: 0.25em 1em; /* 画像との隙間(1/4文字分)と、下の余白(1文字分) */
}

/* -----------------/キャンペーンメニュー---------------- */
/* ==============================================================================
                                企画ページここまで
============================================================================== */



/* ==============================================================================
                                商品一覧コンポーネント
============================================================================== */
.pv-c-product-list p{
    margin:0;
}

.pv-c-product-list a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.pv-c-product-list img{
    vertical-align: bottom;
}

.pv-c-product-list{
    max-width: min(95%, 1200px);
    margin-inline: auto;
    padding-bottom: var(--space-section-after);
    vertical-align: bottom;
    container-type: inline-size;
    font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
}



.pv-l-product-list__header{
    margin-inline: auto;
    margin-bottom: var(--space-title-after);
    text-align: center;
}


.pv-c-product-list__title{
    font-size:var(--fs-title);
    margin-top: 0;
    margin-bottom: var(--space-title-caption);
}

.pv-c-product-list__title--sub{
    font-size:var(--fs-base);
}

.pv-l-product-list__grid{
    --wide-span: 2;
    --product-list-gap:5px;
    margin-inline:auto ;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:var(--product-list-gap);
    container-type: inline-size;
}

.pv-c-product-list__card--wide{
    grid-column: span var(--wide-span);
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap:var(--product-list-gap);
}

@container (600px <= width < 900px){
    .pv-l-product-list__grid{
        grid-template-columns: repeat(3,1fr);
        --wide-span: 3;
    }

    .pv-c-product-list__card--wide{
        grid-template-columns: repeat(2,1fr);
    }
}

@container (900px <= width){
    .pv-l-product-list__grid{
        grid-template-columns: repeat(4,1fr);
        --wide-span: 4;
    }

    .pv-c-product-list__card--wide{
        grid-template-columns: repeat(2,1fr);
    }
}

.pv-c-product-list__card-img{
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

.pv-c-product-list__card-text-wrapper{
    font-size: var(--fs-base);
    padding-block:0.2em 1.25em;
    padding-left: 0.2em;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.pv-c-product-list__card-name{
    font-size: var(--fs-caption);
}

.pv-c-product-list__card-price{
    font-size: var(--fs-price);
}

.pv-c-product-list__card-price--strike{
    font-size: var(--fs-price-strike);
    text-decoration: line-through;
}

.pv-c-product-list__card-price--sale{
    font-size: var(--fs-price-sale);
    color: rgb(192, 31, 31);
}

/* 金額の前に"¥"を追加 */
.pv-c-product-list__card-price::before,
.pv-c-product-list__card-price--strike::before,
.pv-c-product-list__card-price--sale::before{
    content: "¥";
}

/* 金額の後ろに"(税込み)"を追加 */
.pv-c-product-list__card-price::after,
.pv-c-product-list__card-price--sale::after{
    content: '(税込み)';
    font-size: 0.8em; /*テキストの0.8倍のサイズ*/
}

/* ==============================================================================
                            商品一覧コンポーネントここまで
============================================================================== */


/* ==============================================================================
                            ランキングプレビューコンポーネント
============================================================================== */
.pv-c-listing-preview__more{
  /* 375px=245px → 768px=約345px */
  width:min(100%,clamp(245px,calc(245px + (100vw - 375px) * 0.25),345px));
  margin: auto;
  margin-top: min(calc(2rem + 1vw),4rem); /* 幅375pxで約24px相当 最大40px*/
  margin-bottom: clamp(8rem, 2.615rem + 10.18vw, 14rem); /* 幅375pxで約80px → 768px=約120px*/
  text-align: center;
  /* 375px=14px → 768px=約16px ジェネレーターで計算 */
  font-size:clamp(1.4rem, 1.2096rem + 0.51vw, 1.6rem);
  word-break: keep-all;
  overflow-wrap:break-word;
}

.pv-c-listing-preview__more-link{
  display: block;
  border: 1px solid #333333;
  padding: 1em 2.5em;
  cursor: pointer;
  transition: 0.3s;
}

.pv-c-listing-preview__more-link:hover{
  color: white;
  background-color: #333333;
  text-decoration: none;
  border: 1px solid transparent;
}
/* ==============================================================================
                            ランキングプレビューコンポーネントここまで
============================================================================== */