:root {
    --accent: #d94f5c;
    --pink-bg: #f6e8e6;
    --text-main: #000;
    --text-sub: #000;
    --border: #e6e2dd;

    /*
      全ての基準になる「1単位」。
      980px幅のときに 10px になるよう vw で計算し、
      min() で 10px を上限にしているので、
      980pxを超える画面幅でもここで頭打ちになり、
      1200px前後で見ていた縮尺のまま固定されます。
    */
    --u: min(1.0204vw, 10px);
  }

  * { box-sizing: border-box; }

  .topRanking {
    max-width: 980px;
    margin: 0 auto;
    padding: calc(var(--u) * 4.8) min(4vw, 39.2px); /* 上下48px相当 / 左右は980px時点の4%(=39.2px)で頭打ち */
  }

  .ranking {
    margin-top: 3%;
    font-family:'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;;
  }

  .ranking ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--u) * 2); /* 20px 相当 */
  }

  /* 1位だけ1カラム（フル幅） */
  .ranking li.rank01 {
    grid-column: 1 / -1;
  }

  /* ---------- 2位以降 ---------- */
  .ranking li:not(.rank01) {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 3); /* 30px 相当 */
    background: #fff;
    padding: calc(var(--u) * 1) 0 calc(var(--u) * 4); /* 20px 相当 */
  }
  .ranking li:nth-of-type(2),
  .ranking li:nth-of-type(3) {
    border-bottom: 3px solid #aeaeaeae;
  }

  .ranking .number {
    flex: 0 0 auto;
    width: calc(var(--u) * 3); /* 30px 相当 */
    margin: 0;
    line-height: 0;
  }

  .ranking .number img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---------- 1位（rank01） ---------- */
  .ranking li.rank01 {
    position: relative;
  }

  /* enb：liの左上にabsolute配置 */
  .ranking li.rank01 .enb {
    position: absolute;
    top: -8%;
    left: -3%;
    width: calc(var(--u) * 10); /* 100px 相当 */
    margin: 0;
    line-height: 0;
    z-index: 1;
  }

  .ranking li.rank01 .enb img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* サムネ＋テキストの横並び（2位以降と同じ構図）＋薄ピンク背景 */
  .ranking li.rank01 > div {
    display: flex;
    gap: calc(var(--u) * 5.4); /* 54px 相当 */
    background: var(--pink-bg);
    border-radius: calc(var(--u) * 1.5); /* 15px 相当 */
    padding: calc(var(--u) * 3.5) calc(var(--u) * 5); /* 35px / 50px 相当 */
  }

  /* ---------- サムネイル（共通） ---------- */
  .ranking figure {
    flex: 0 0 30%;
    margin: 0;
    line-height: 0;
  }

  .ranking li.rank01 figure {
    flex-basis: 26%;
  }

  .ranking figure img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--u) * 0.6); /* 6px 相当 */
    display: block;
  }

  /* ---------- テキスト＆リンク（共通） ---------- */
  .ranking li > div > div,
  .ranking li:not(.rank01) > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ranking li p {
    margin: 0;
    color: #000 !important;
  }

  .ranking li > div > div p:first-of-type,
  .ranking li:not(.rank01) > div p:first-of-type {
    font-size: max(calc(var(--u) * 2.4), 12px); /* 24px相当、最小14px */
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.4em;
  }

  .ranking li.rank01 > div > div p:first-of-type {
    font-size: max(calc(var(--u) * 2.6), 16px); /* 26px相当、最小16px */
  }

  .ranking li > div > div p:nth-of-type(2),
  .ranking li:not(.rank01) > div p:nth-of-type(2) {
    font-size: max(calc(var(--u) * 1.5), 12px); /* 15px相当、最小12px */
    color: var(--text-sub);
    line-height: 1.6;
    margin-bottom: 0.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ranking li > div > p > span {
    font-size: max(calc(var(--u) * 1.2), 8px); /* 12px相当、最小11px */
    display: block;
  }

  .ranking li a {
    font-family: 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif;
    display: inline-block;
    font-size: max(calc(var(--u) * 1.4), 12px); /* 14px相当、最小12px */
    font-weight: 700;
    color: #fff !important;
    border: 1px solid #c992af;
    border-radius: 999px;
    padding: 0.3em 1.3em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: center;
    background: #c992af;
    width: 90%;
  }
  /* rank01 */
  .ranking li.rank01 a {
    border-radius: calc(var(--u) * 1); /* 10px 相当 */
    width: 70%;
    font-size: max(calc(var(--u) * 2.4), 14px); /* 24px相当、最小14px */
    padding: calc(var(--u) * 0.67) 0; /* 約6.7px 相当 */
  }

  .ranking li a:hover {
    opacity: 0.6;
    transition: 0.6s;
  }

  /* =========================================================
     モバイル専用（750px以下）。PC(980px以上)側のスタイルは
     一切変更しないため、ここより上のルールには手を入れていません。
  ========================================================= */
  @media (max-width: 750px) {

    /* 2〜4位の説明文（explanation）を非表示に */
    .explanation {
      display: none !important;
    }
    .ranking li.rank01 {
        grid-column: 1 / -1;
        margin-bottom: calc(var(--u) * 3);
      }
      .ranking li.rank01 figure {
        flex-basis: 35%;
        padding-top: 3vw;
    }
    .ranking li.rank01 .enb {
        width: calc(var(--u) * 12);
    }
     /* タイトルの改行はスマホでは外し、文章として流す */
    .ranking li.rank01 br.sp-break {
      display: none;
    }
    /* 説明文の2行省略（…）を解除して全文表示 */
    .ranking li.rank01 > div > div p:nth-of-type(2) {
      display: block;
      -webkit-line-clamp: unset;
      -webkit-box-orient: unset;
      overflow: visible;
    }
    .ranking li.rank01 > div {
      padding-left: calc(var(--u) * 2); /* 8u→2uに縮小し、左の余白を詰める */
      padding-right: calc(var(--u) * 2);
    }

    /* ボタンを大きく・文字も大きく（2位〜4位）
       固定の最小pxを置かず、vwベースで画面幅に応じて連続的に
       縮小させることで、2カラム表示でも崩れないようにする。
       white-space: normal にして、万一収まらない場合も
       折り返しで吸収し、はみ出しによる崩れを防ぐ。 */
    .ranking li:not(.rank01) a {
      width: 100%;
      font-size: clamp(10px, 3.6vw, 10px);
      padding: clamp(0.35em, 1.6vw, 0.4em) 0;
      white-space: normal;
      letter-spacing: 0;
    }

    /* ボタンを大きく（1位） */
    .ranking li.rank01 a {
      width: 85%;
      font-size: clamp(13px, 4.6vw, 18px);
      padding: clamp(0.3em, 1.5vw, 0.6em) 0;
      white-space: normal;
    }

    /* 商品名とボタンの間に余白を作り、詰まって見えないように調整
       （explanationが消えた分、商品名側の余白を広げてから
        ボタンを少し下にずらすことで空白バランスを整える） */
    .ranking li:not(.rank01) > div p:first-of-type {
      margin-bottom: 0.5em;
    }
    .ranking li:not(.rank01):nth-child(2),.ranking li:not(.rank01):nth-child(3){
        border-bottom: 2px solid #aeaeaeae;
    }
    .ranking li:not(.rank01) > div a {
      margin-top: 0.2em;
    }

    .ranking li.rank01 > div > div p:first-of-type {
      margin-bottom: 0.4em;
    }

    .ranking li.rank01 > div > div a {
      margin-top: 0.3em;
    }
    
    .topBnr ul.bnr-slider{
        margin-top:min(40px, 5.3333333vw);
      }
  }