.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` は名前が短く、商品カードの中にも同じ名前が出てくる
     * （`.card__badge.bottom.left` ＝ 写真の上の「セール」「送料無料」の札）。
     * 子孫セレクタのままだとその札にも width: 360px が当たり、175px の
     * カードから 360px の箱がはみ出して、**ページ全体が横に広がっていた**
     * （実測 390px の画面で document が 583px）。スマホでピンチすると
     * 縮小できてしまうのはこのため。
     *
     * `.right` も同じ罠がある（`.card__badge.right` という書き方が
     * component-card.css にある）ので、対で直下に限っておく。
     *
     * `>` は詳細度を変えないので、他の指定との強さ関係は今までどおり。
     */
    > .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;
        /* タイトルとボタンが触れないよう最低限の間をあけ、それでも入らない
           幅ではボタンを下の行に落とす（文字を折り返させないため）。 */
        column-gap: 24px;
        row-gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 48px;

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

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

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

          /*
           * 日本語の枠タイトルは「スターターキット」のように全角8文字あり、
           * 英語の「Starter Kit」よりずっと横に長い。右の「もっと見る」との
           * 間に入りきらず、途中で折り返してしまっていた。日本語のときだけ
           * 折り返しを止め、残り幅（画面幅から左段とボタンを引いたぶん）に
           * 8文字が収まる大きさまで文字を小さくする。英語表示には lang-ja が
           * 付かないので、英語の見た目は変わらない。
           */
          body.lang-ja & {
            white-space: nowrap;
            font-size: min(88px, calc(12.5vw - 96px));

            @media screen and (max-width: 1240px) {
              font-size: min(48px, max(32px, calc(12.5vw - 88px)));
            }

            /*
             * スマホ幅では枠じたいの折り返し方（.left と .right が並ぶか）が
             * 中身の最小幅で決まるため、折り返し禁止は掛けない。文字を
             * 入る大きさにするだけにして、今までの組み方を変えない。
             */
            @media screen and (max-width: 768px) {
              white-space: normal;
              font-size: min(30px, calc(12.5vw - 22px));
            }
          }

          /* タイトルはカテゴリ一覧へのリンク。見た目は文字のままにして、
             マウスを乗せたときだけシアンにする。 */
          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;

            /*
             * 日本語は「もっと見る」で、英語の「More」より横に長い。幅を固定した
             * ままだと文字が折り返し、高さの決まった枠から縦にはみ出す。日本語の
             * ときだけ、元の幅を下限にして中身にあわせて伸ばす（英語表示には
             * lang-ja が付かないので、英語の見た目は変わらない）。
             */
            body.lang-ja & {
              width: fit-content;
              min-width: 214px;
              padding-inline: 24px;
              white-space: nowrap;

              @media screen and (max-width: 768px) {
                min-width: 75px;
                padding-inline: 16px;
              }
            }

            @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;
  }
}