/* ===== ランキングセクション ===== */
  .c-ranking {
    background-color: #FFF8F7;
    padding: 50px 20px 112px 20px; /* SP */
  }

  .c-ranking__inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 見出し */
  .c-ranking__head {
    text-align: center;
    margin-bottom: 40px; /* SP */
  }

  .c-ranking__head__en {
    margin: 0 0 4px; /* jp との間隔 4px */
    font-family: "Montserrat", sans-serif!important;
    font-weight: 500;
    font-size: 12px; /* SP */
    line-height: 14px;
    letter-spacing: 0.1em; /* SP 10% */
    text-align: center;
    color: #E390A4;
  }

  .c-ranking__head__jp {
    margin: 0;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-size: 20px; /* SP */
    line-height: 24px;
    letter-spacing: 0.05em; /* 5% */
    text-align: center;
    color: #864D55;
  }

  /* リスト（グリッド）
     SP: 6分割。1〜2位は span3（2列）、3〜8位は span2（3列）
     => 1行目[1,2] / 2行目[3,4,5] / 3行目[6,7,8] */
  .c-ranking__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 26px 10px; /* SP: 行gap=26px（3〜5位↔6〜8位）/ 列gap=10px（3〜8位の要素間） */
  }

  .c-ranking__item {
    grid-column: span 2; /* 3列 */
    margin: 0;
  }

  .c-ranking__item:nth-child(-n+2) {
    grid-column: span 3; /* 上位2件は2列 */
  }

  /* SP: 1・2位行 → 3位以降行 の間隔を 36px に（行gap26 + margin-top10） */
  .c-ranking__item:nth-child(n+3):nth-child(-n+5) {
    margin-top: 10px;
  }

  .c-ranking__link {
    display: block;
    max-width: 160px; /* SP: サムネ最大幅 */
    margin-inline: auto;
    text-decoration: none;
    color: inherit;
  }

  /* サムネイル（最大 160×200 / aspect 4:5） */
  .c-ranking__thumb {
    position: relative;
    width: 100%;
    max-height: 200px;
    aspect-ratio: 4 / 5;
  }

  .c-ranking__thumb__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* SP 3位以降：左下以外 10px 角丸（TL TR BR BL） */
    border-radius: 10px 10px 10px 0;
  }

  /* SP 1・2位：左下以外 20px 角丸 */
  .c-ranking__item:nth-child(-n+2) .c-ranking__thumb__img {
    border-radius: 20px 20px 20px 0;
  }

  /* 順位バッジ */
  .c-ranking__rank {
    position: absolute;
    top: 5px;
    left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #291312;
  }

  /* 上位3件は塗りつぶしの大きめバッジ */
  .c-ranking__item--hero .c-ranking__rank {
    width: 32px;
    height: 32px;
    background-color: #9C6B72;
    font-size: 18px;
    color: #fff;
    font-weight: 500;
  }

  /* 4位以降のランク数字（PC/SP共通の見た目。サイズはSP12px→PCで24pxに上書き） */
  .c-ranking__item:nth-child(n+4) .c-ranking__rank {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 500;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: #864D55;
  }

  /* SP専用: 1〜2位・3位のランク数字（PCはヒーロー用指定が適用される） */
  @media screen and (max-width: 719px) {
    /* 1〜2位のランク数字 18px・白。位置は左から10px・上から10px */
    .c-ranking__item:nth-child(-n+2) .c-ranking__rank {
      top: 10px;
      left: 10px;
      font-family: "Montserrat", sans-serif !important;
      font-weight: 500;
      font-size: 18px;
      line-height: 18px;
      letter-spacing: 0;
      text-align: center;
      vertical-align: middle;
      color: #FFFFFF;
    }
    /* 3位のランク数字 12px・白 */
    .c-ranking__item:nth-child(3) .c-ranking__rank {
      font-family: "Montserrat", sans-serif !important;
      font-weight: 500;
      font-size: 12px;
      line-height: 12px;
      letter-spacing: 0;
      text-align: center;
      vertical-align: middle;
      color: #FFFFFF;
    }

    /* 3位以降の商品名 12px */
    .c-ranking__item:nth-child(n+3) .c-ranking__name {
      font-size: 12px;
    }
  }

  /* 2位・3位：三日月の装飾を除去し、ベース色の普通の丸にする */
  .c-ranking__item:nth-child(2) .c-ranking__rank {
    background-color: #B87B7C; /* 2位のベース色 */
  }
  .c-ranking__item:nth-child(3) .c-ranking__rank {
    background-color: #D5ADAD; /* 3位のベース色 */
  }

  /* カテゴリタグ */
  .c-ranking__tag {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 8px;
    border: 1px solid #864D55;
    border-radius: 999px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 9px;
    line-height: 9px;
    letter-spacing: 0.05em;
    vertical-align: middle;
    color: #864D55;
  }

  /* 商品名（__en で分けず .c-ranking__name に一括指定） */
  .c-ranking__name {
    margin: 6px 0 0;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0;
    vertical-align: middle;
    color: #291312;
  }

  /* __en は分けないので親(.c-ranking__name)の指定をそのまま継承させる */
  .c-ranking__name__en {
    font: inherit;
    letter-spacing: inherit;
  }

  /* ===== PC ===== */
  @media screen and (min-width: 720px) {
    .c-ranking {
      box-sizing: border-box;
      padding: 80px 0 166px 0;
      max-width: 1088px;
      margin: auto;
    }

    .c-ranking__head {
      margin-bottom: 64px;
    }

    .c-ranking__head__en {
      font-size: 14px; /* PC */
      letter-spacing: 0.2em; /* PC 20% */
      margin-bottom: 4px;
    }

    .c-ranking__head__jp {
      font-size: 24px; /* PC */
      line-height: 24px;
    }

    /* PC: 15分割。1〜3位は span5（3列）、4〜8位は span3（5列）
       => 1行目[1,2,3] / 2行目[4,5,6,7,8] */
    .c-ranking__list {
      grid-template-columns: repeat(15, minmax(0, 1fr));
      gap: 82px 22px; /* 行gap=82px（1〜3位↔4位以降）/ 列gap=22px（要素間） */
      /* 1〜3位を 320px×3 ＋ 列gap22×2 = 1004px に収め、両段の幅を揃える */
      max-width: 1004px;
      margin-inline: auto;
    }

    .c-ranking__item {
      grid-column: span 3; /* 5列 */
    }

    .c-ranking__item:nth-child(-n+3) {
      grid-column: span 5; /* 上位3件は3列 */
    }

    /* SP専用の行間調整をPCでは解除 */
    .c-ranking__item:nth-child(n+3):nth-child(-n+5) {
      margin-top: 0;
    }

    /* 1〜3位はセル幅（=320px）いっぱいに。余白は列gap(22px)のみ */
    .c-ranking__item--hero {
      margin-inline: 0;
    }

    .c-ranking__link {
      max-width: 320px; /* PC: サムネ最大幅 */
    }

    .c-ranking__thumb {
      max-height: 400px;
    }

    /* PC 1〜3位：左下以外 40px 角丸 */
    .c-ranking__item:nth-child(-n+3) .c-ranking__thumb__img {
      border-radius: 40px 40px 40px 0;
    }

    /* PC 4〜8位：左下以外 20px 角丸 */
    .c-ranking__item:nth-child(n+4) .c-ranking__thumb__img {
      border-radius: 20px 20px 20px 0;
    }

    .c-ranking__rank {
      width: 32px;
      height: 32px;
      top: 12px;
      left: 10px;
      font-size: 15px;
    }

    .c-ranking__item--hero .c-ranking__rank {
      width: 50px;
      height: 50px;
      font-size: 30px;
    }

    /* 4位以降のランク数字（PC: 24px）。位置は左から10px・上から10px */
    .c-ranking__item:nth-child(n+4) .c-ranking__rank {
      top: 10px;
      left: 10px;
      font-size: 20px;
      line-height: 24px;
      width: 40px;
      height: 40px;
    }

    .c-ranking__tag {
      margin-top: 16px;
      padding: 6px 20px;
      font-weight: 500;
      font-size: 16px;
      line-height: 16px;
      letter-spacing: 0;
    }

    .c-ranking__name {
      margin-top: 6px;
      font-weight: 400;
      font-size: 20px;
      line-height: 36px;
      letter-spacing: 0;
    }

    /* 4位以降（PC）: 商品名18px・タグpadding 6px 16px */
    .c-ranking__item:nth-child(n+4) .c-ranking__name {
      font-size: 18px;
    }

    .c-ranking__item:nth-child(n+4) .c-ranking__tag {
      padding: 6px 16px;
    }
  }