index.js

customScript

(() => {
  const showAllButton = document.getElementById("ShowAllButton");
  // ランキング20位（グラデーションCSS切り替え対象）
  const lastMiddleRanking = document.querySelector(
    "#section-rank-13th-to-20th .PointList_point_item__dB9Zp:last-child"
  );

  // ランキング21位以下
  const bottomRankingSection1 = document.getElementById(
    "section-rank-21st-to-29th"
  );
  const bottomRankingSection2 = document.getElementById("section-rank-30th");
  bottomRankingSection1.style.display = "none";
  bottomRankingSection2.style.display = "none";

  showAllButton.addEventListener("click", () => {
    lastMiddleRanking.classList.add("normal");
    bottomRankingSection1.style.display = "block";
    bottomRankingSection2.style.display = "block";
    showAllButton.style.display = "none";
  });
})();

showAllButton用

(() => {
  //ドキュメントスタイルの取得
  let sheets = document.styleSheets;
  let sheet = sheets[sheets.length - 1];

  const arrayIdRanking1to3 = [
    "section-rank-1st",
    "section-rank-2nd",
    "section-rank-3rd",
  ];
  arrayIdRanking1to3.forEach(function (id) {
    const section = document.getElementById(id);
    const unit = section.querySelector(".PointList_unit__bpgoj");
    if (unit) {
      //スタイルルールの追加
      sheet.insertRule(
        `#${id} > div > div > div > div > div > div > picture::before { display: block }`,
        sheet.cssRules.length
      );
      sheet.insertRule(
        `#${id} > div > div > div > div > div > div > picture::after { display: block }`,
        sheet.cssRules.length
      );
    }
  });

  const arrayIdRanking4to30 = [
    "section-rank-4th-to-12th",
    "section-rank-13th-to-20th",
    "section-rank-21st-to-29th",
    "section-rank-30th",
  ];
  arrayIdRanking4to30.forEach(function (id) {
    const section = document.getElementById(id);
    const items = section.querySelectorAll(".PointList_point_item__dB9Zp");
    items.forEach(function (item, index) {
      const unit = item.querySelector(".PointList_unit__bpgoj");
      const nthOfType = index + 1;
      if (unit) {
        //スタイルルールの追加
        sheet.insertRule(
          `#${id} > div > div > div > div > div:nth-of-type(${nthOfType})::before { display: block }`,
          sheet.cssRules.length
        );
        sheet.insertRule(
          `#${id} > div > div > div > div > div:nth-of-type(${nthOfType}) { padding: 76px 38px 52px }`,
          sheet.cssRules.length
        );
        sheet.insertRule(
          `@media screen and (max-width: 767px) { #${id} > div > div > div > div > div:nth-of-type(${nthOfType}) { padding: 35px 17px 24px } }`,
          sheet.cssRules.length
        );
        // padding変更用クラスの追加
        console.log(item);
        item.classList.add("js-special-award");
      }
    });
  });
})();

distributionSpecialAward

(() => {
  const section = document.getElementById("section-intro");
  const a = section.querySelector(".Image_link__7G2wV");
  const createElement = `<a href="${a.href}" target="_blank" rel="noopener noreferrer" class="section-intro__link"></a>`;
  section.insertAdjacentHTML("beforeend", createElement);
  console.log("test")
})();

1月期の特別賞選出はございません