.astra-collection-items {
  background-color: rgb(0, 0, 0, .52);
  padding-top: 60px;
  position: relative;
  z-index: 1;

  @media screen and (max-width: 480px) {
    padding-top: 36px;
  }

  .section-container {
    display: flex;
    align-items: flex-start;

    @media screen and (max-width: 768px) {
      flex-wrap: wrap;
    }

    .left {
      width: 414px;

      @media screen and (max-width: 1240px) {
        width: 360px;
      }
    }

    .right {
      flex: 1;
      margin-bottom: 60px;

      @media screen and (max-width: 768px) {
        margin-bottom: 48px;
      }

      .right__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 48px;

        @media screen and (max-width: 1240px) {
          margin-bottom: 36px;
        }

        .collection-title {
          font-size: 92px;
          font-family: var(--astra-roboto), sans-serif;
          font-weight: var(--astra-font-weight-thin);
          color: #A8A8A8;

          /* タイトルはカテゴリ一覧へのリンク。見た目は文字のままにして、
             マウスを乗せたときだけシアンにする。 */
          a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
          }

          a:hover,
          a:focus-visible {
            color: #4EC3E1;
          }

          @media screen and (max-width: 1240px) {
            font-size: 48px;
            text-align: left;
          }

          @media screen and (max-width: 768px) {
            font-size: 32px;
            text-align: left;
          }
        }

        .more-button-wrapper {
          .more-button {
            width: 214px;
            height: 56px;
            border: 2px solid #4EC3E1;
            border-radius: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            color: #4EC3E1;
            text-decoration: none;
            background-color: transparent;
            font-family: var(--astra-source-code-pro), monospace;
            font-size: 24px;
            font-weight: var(--astra-font-weight-regular);
            cursor: pointer;

            @media screen and (max-width: 768px) {
              width: 75px;
              height: 36px;
              font-size: 14px;
              font-weight: var(--astra-font-weight-light);
            }
          }

          .more-button__arrow {
            width: 48px;
            display: block;

            @media screen and (max-width: 768px) {
              display: none;
            }

            svg {
              width: 100%;
              display: block;
            }
          }
        }
      }

      .right__items {
        list-style: none;
        display: grid;
        padding: 0;
        margin: 0 0 120px;
        gap: 24px;

        @media screen and (max-width: 768px) {
          gap: 12px;
          margin: 0 0 60px;
        }

        @media screen and (max-width: 480px) {
          gap: 4px;
          margin: 0 0 48px;
        }

        .right__items--item {
          width: 100%;
        }
      }
    }
  }
}

/*
 * スマホで横スクロールにする枠（`scroll_sp` を立てた枠だけ）。
 *
 * 2列に詰めると1枚あたりが小さく、商品の絵が読み取れない。1枚を大きく見せて
 * 横に送る形にする。次のカードを画面の端で切ることで、横に引けると伝える
 * （矢印やドットを足さずに済む）。
 *
 * 枠ごとの列数はセクション側がインラインの <style> で
 * `#astra-<id> .right__items { grid-template-columns: ... }` と書いている。
 * ID を含むぶん、ここのセレクタより強い。ただし display を flex にすれば
 * grid-template-columns は効かなくなるので、打ち消しは要らない。
 */
/*
 * 適用はスマホ幅まで（540px）。
 *
 * .section-container は 768px 以下で折り返す設定だが、実際に折り返るかは
 * 「.left（360px）と中身の最小幅が1行に収まるか」で決まる。実測では
 * 500px あたりまでが折り返し、600px では .right が 204px まで潰れて
 * カードが 96px になる。その領域で横スクロールを足すと、画面より広い
 * カードを狭い枠に押し込む形になって破綻する。
 *
 * 540px はすべての携帯の縦持ち幅（最大 430px 程度）を含み、かつ今まで
 * 折り返していた範囲に収まる。
 *
 * ## セレクタが長い理由
 *
 * このファイルの上半分は入れ子で書いてあり、展開すると
 * `.astra-collection-items .section-container .right .right__items` のように
 * クラス4つぶんの詳細度になる。`.astra-collection-items--scroll-sp .right__items`
 * のような短い書き方では負けて、**一部の指定だけが効く**という分かりにくい
 * 壊れ方をした（min-width と overflow-x は通り、display と margin は無視された）。
 * 同じ深さまで書いて、詳細度を並べたうえで後ろに置くこと。
 */
@media screen and (max-width: 540px) {
  /*
   * 横スクロールを枠の中に閉じ込めるための2行。
   *
   * min-width: 0 … flex 項目の min-width は既定が auto で、中身より
   *   小さくならない。中の並びを nowrap の flex にすると「カード全部を
   *   横に並べた幅」が下限になり、.right がその幅まで膨らんで
   *   **ページ全体が横スクロール**する。実測で 390px の画面に対し
   *   1003px まで広がっていた。
   *
   * flex-basis: 100% … min-width: 0 だけ入れると、今度は下限が消えて
   *   .left の隣に潰れて入ってしまう（430px で .right が 34px になった）。
   *   これまでは「中身が大きいから入りきらず折り返していた」だけで、
   *   折り返しは偶然の産物だった。ここで明示して固定する。
   */
  .astra-collection-items--scroll-sp .section-container .right {
    min-width: 0;
    /* 既存は flex: 1（＝ flex-basis: 0%）。一括指定なので一括で上書きする。 */
    flex: 1 1 100%;
  }

  .astra-collection-items--scroll-sp .section-container .right .right__items {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;

    /*
     * 画面の端まで広げてから、1枚目だけ本文と同じ位置に戻す
     * （.section-container の padding-inline と同じ 18px）。
     * こうすると最後のカードが画面の端で切れ、続きがあると分かる。
     */
    margin-inline: -18px;
    padding-inline: 18px;

    /* 指を離した位置でカードの左端が揃う。scroll-padding が無いと本文の
       左端ではなく画面の左端に吸い付いてしまう。 */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;

    /* 横に引ききったときにブラウザの「戻る」が誤発火しないようにする。 */
    overscroll-behavior-x: contain;
  }

  .astra-collection-items--scroll-sp .section-container .right .right__items .right__items--item {
    /*
     * 画面幅に対する比率で決める。固定 px だと、小さい端末で次のカードが
     * 見えなくなったり、大きい端末で余りすぎたりする。
     * 390px の端末でカード約320px・次が約40px 覗く。
     */
    flex: 0 0 min(82vw, 340px);
    width: auto;
    scroll-snap-align: start;
  }

  /*
   * カードの内側の余白を詰めて、画像そのものを大きくする。
   * 既定の余白（コンテナクエリで 30px 36px）のままだとカードを広げても
   * 画像が 236px 程度で頭打ちになり、「大きくした」感が出ない。
   */
  .astra-collection-items--scroll-sp .card-astra-product {
    padding: 20px 16px;
  }
}