/** Shopify CDN: Minification failed

Line 86:0 Unexpected "{"
Line 86:1 Expected identifier but found "%"
Line 100:14 Unexpected "{"
Line 100:23 Expected ":"
Line 133:14 Unexpected "{"
Line 133:23 Expected ":"
Line 188:0 Unexpected "{"
Line 188:1 Expected identifier but found "%"
Line 191:14 Unexpected "{"
Line 191:23 Expected ":"
... and 2 more hidden warnings

**/
.collection-list {
  margin-top: 0;
  margin-bottom: 0;
}

.collection-list-title {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .collection-list:not(.slider) {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .collection-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.collection-list__item:only-child {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .slider.collection-list--1-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider.collection-list--1-items,
  .slider.collection-list--2-items,
  .slider.collection-list--3-items,
  .slider.collection-list--4-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection-list__item a:hover {
    box-shadow: none;
  }
}

@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 100%;
  }
}

.collection-list-view-all {
  margin-top: 2rem;
}



/* ========================================================== */
/* 以下、リスト包括ボックスのスタイル（負マージン利用による拡張） */
/* ★ セレクタを .collection-list.list-background--boxed から 
      .collection-list-boxed-content.list-background--boxed に変更しました ★ */
/* ========================================================== */

{% if section.settings.list_background_style == 'boxed' %}

  /* 1. デスクトップの基本スタイル */
  .collection-list-boxed-content.list-background--boxed { /* ★ 修正 */
    background-color: #2B2B2B;
    border-radius: 12px !important;
    padding: 4rem 5rem; /* 内部コンテンツのパディング */
    position: relative; 
    z-index: 1; 
  }
  
  /* 2. デスクトップでページ幅いっぱいに広げる調整 (負マージン) */
  @media screen and (min-width: 750px) {
    /* .collection-list-wrapper (page-widthクラスを持つ) のパディング 5rem を相殺 */
    .section-{{ section.id }}-padding > .collection-list-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* リスト自体を左右いっぱいに広げる */
    .collection-list-wrapper .collection-list-boxed-content.list-background--boxed { /* ★ 修正 */
        margin-left: 5rem; 
        margin-right: 5rem;
        width: calc(100% - 10rem); 
    }
    
    
    /* タイトルとボタンの左右パディングをボックスと揃える (追加テキストはボックス内に移動したため削除) */
    .collection-list-wrapper .title-wrapper-with-link,
    .collection-list-wrapper .slider-buttons,
    .collection-list-wrapper .collection-list-view-all { 
        padding-left: 5rem;
        padding-right: 5rem;
    }
    
    /* 追加テキストの基本スタイル（デスクトップ） */
    /* 追加テキストはボックス内に移動し、ボックスのパディングが適用されるため、この調整は不要に */
    .collection-list__additional-text {
      margin-left: 0;
      margin-right: 0;
    }
  }
  
  /* 3. モバイル/タブレットの強制調整 */
  @media screen and (max-width: 989px) {

    /* ページ幅リセット (親コンテナのパディングを消す) */
    .section-{{ section.id }}-padding > .collection-list-wrapper.page-width {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* ボックスのモバイルパディング設定 */
    .collection-list-boxed-content.list-background--boxed { /* ★ 修正 */
        padding: 3rem 1.5rem; /* 上下3rem, 左右1.5rem */
    }
    
    /* モバイルでの負のマージンによる拡張 */
    .collection-list-wrapper .collection-list-boxed-content.list-background--boxed { /* ★ 修正 */
        margin-left: 1.5rem; 
        margin-right: 1.5rem;
        width: calc(100% - 3rem); 
    }

    /* スライダー（grid--peek）時のモバイルの左右ずれを修正 */
    /* UL要素の調整 */
    .collection-list-boxed-content.list-background--boxed .collection-list.slider { 
      padding-left: 0 !important; 
      padding-right: 0 !important;
      /* UL要素はボックスの内側にあるため、ボックスのパディング（3rem）のみが適用されます */
      /* UL自体は padding-top, padding-bottom を持たせないようにします。 */
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    /* スライダーの最初のアイテムの不要な左マージンをリセット */
    .collection-list-boxed-content.list-background--boxed .collection-list.slider .grid__item:first-of-type { /* ★ セレクタ修正 */
        margin-left: 0 !important;
    }
    
    /* タイトル、ボタン、ビューオールリンクのパディングをモバイルに合わせる (追加テキストは削除) */
    .collection-list-wrapper .title-wrapper-with-link,
    .collection-list-wrapper .slider-buttons,
    .collection-list-wrapper .collection-list-view-all {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* 追加テキストの不要なマージンをリセット */
    /* 追加テキストはボックス内に移動し、ボックスのパディングが適用されるため、この調整は不要に */
    .collection-list__additional-text {
        margin-left: 0;
        margin-right: 0;
    }
  }

  /* UL要素自体はパディングを持たず、ラッパーのパディング内に収める */
  .collection-list-boxed-content.list-background--boxed .collection-list {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }

{% else %}
  /* ボックス化されていない場合のモバイルパディングの再適用（競合回避のため）*/
  @media screen and (max-width: 749px) {
    .section-{{ section.id }}-padding > .collection-list-wrapper > .page-width {
      padding-left: 0;
      padding-right: 0;
    }
    .collection-list:not(.slider) {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
  
  /* 標準レイアウト時の追加テキストのパディングを確保 (Liquidのオリジナル構造で必要だったため維持) */
  @media screen and (max-width: 749px) {
    .collection-list-wrapper .collection-list__additional-text {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
  }
  @media screen and (min-width: 750px) {
    /* デスクトップでは page-width がパディングを持つため、要素自体はパディングを持たない */
    .collection-list-wrapper .collection-list__additional-text {
        padding-left: 0;
        padding-right: 0;
    }
  }
{% endif %}

/* ========================================================== */
/* 追加テキストの基本スタイル（他の調整を邪魔しないように） - 修正 */
/* ========================================================== */
.collection-list__additional-text {
    color: #ffffff; 
    /* font-size: 1.6rem; <-- 削除またはコメントアウト */
    /* font-weight: 500; <-- 削除またはコメントアウト */
    /* ボックス内上部に移動したためマージンを調整 */
    margin-top: 0; 
    margin-bottom: 2.5rem; /* リストアイテムとの間隔 */
}


/* コレクションリストのタイトルサイズ調整 */
.card-wrapper .card__heading {
    font-size: 1.8rem; /* ★調整したいサイズに値を変更してください */
    font-weight: 600; /* 必要に応じて太さを調整 */
    line-height: 1.3;
}

/* モバイルサイズ（任意） */
@media screen and (max-width: 749px) {
    .card-wrapper .card__heading {
        font-size: 1.4rem; /* モバイル時は少し小さくしたい場合 */
    }
}



/* ========================================================== */
/* ★★★ コレクション間の上下/左右余白調整 (モバイル) ★★★ */
/* ========================================================== */

@media screen and (max-width: 749px) {
  .collection-list:not(.slider) {
      column-gap: 0.8rem; /* モバイルの左右間隔 */
      row-gap: 0.8rem; /* モバイルの上下間隔 */
  }

  /* ---------------------------------------------------------------------- */
  /* 👇 修正箇所: モバイルで2列表示が設定されている場合のみ、幅を50%に制限 */
  /* Liquidで使われているクラス名 (grid--2-col-tablet-down) を使用します */
  /* ---------------------------------------------------------------------- */

  .collection-list:not(.slider).grid--2-col-tablet-down .collection-list__item { 
      /* column-gap の半分の値 (0.8remの半分) を 50% から引く */
      width: calc(50% - 0.4rem); 
  }
  
  /* ---------------------------------------------------------------------- */
  /* 1列表示の場合 (grid--1-col-tablet-down) は、幅を100%に強制設定 */
  /* ---------------------------------------------------------------------- */
  .collection-list:not(.slider).grid--1-col-tablet-down .collection-list__item {
      width: 100%;
  }

}