hinatazaka46-lookandfeel

Change the look & feel of the Hinatazaka46 website.
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/532855/1608359/hinatazaka46-lookandfeel.js
提问、发表评价或者举报此脚本。
换行
// ==UserScript==
// @name        hinatazaka46-lookandfeel
// @namespace   https://greasyfork.org/ja/users/1328592-naoqv
// @description:en  Change the look & feel of the Hinatazaka46 website.
// @description:ja  日向坂46 ルックアンドフィール
// @version     0.37
// @require     https://cdn.jsdelivr.net/npm/[email protected]/libs/lz-string.min.js
// @icon        https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
// @compatible  chrome
// @compatible  firefox
// @grant       none
// @license     MIT
// ==/UserScript==
"use strict";

const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";

const isMobile = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  const mobileRegex = /Android|iPhone|iPad|iPod|BlackBerry|Windows Phone|Opera Mini|IEMobile/i;

  return mobileRegex.test(userAgent) || window.matchMedia("only screen and (max-width: 768px)").matches;
}

/*
 * inlineスタイルを適用
 * @param {string} styleText - スタイル定義
 */
document.appendStyle = (styleText) => {
  const styleElem = document.createElement("style");
  styleElem.setAttribute("rel", "stylesheet");
  styleElem.textContent = styleText;
  document.head.appendChild(styleElem);
};

/*
 * スクロールダウン時にメニューバー細める
 */
const slimDownMenuBar = () => {
  const styleElem = document.createElement("style");
  styleElem.setAttribute("rel", "stylesheet");
  const styleText = `.l-header {
    height: 55px;
  }
  .p-header-wrap.is-fixed .p-header {
    height: 30px;
  }
  .c-header__logo {
    top: 5px;
    width: 155px;
  }
  .p-header.p-header__in {
    height: 60px;
    position: relative;
  }
  nav.p-menu.p-menu--pc {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }`;
  styleElem.textContent = styleText;
  document.head.appendChild(styleElem);
};

const COLOR_MODE = {DEFAULT_COLOR: "0", DARK_COLOR: "1"};

/**
 * カラーモードを取得
 * @returns {string} カラーモード
 */
const getColorMode = () => {
  let currentMode = CookieUtils.getCookie('color_mode');

  if (currentMode !== "0" && currentMode !== "1") {
    currentMode = COLOR_MODE.DEFAULT_COLOR;
  }
  return currentMode;
}

/**
 * カラーモードを設定
 * @param {string} mode - カラーモード
 */
const setColorMode = (mode) => {
  if (mode !== COLOR_MODE.DEFAULT_COLOR && mode !== COLOR_MODE.DARK_COLOR) {
    throw new Error("Illegal parameter error. [HinatazakaSigthtStyleUtils#setColorMode]");
  }
  CookieUtils.setCookie('color_mode', mode);
};

/**
 * カラーモードを切り替える
 * @returns {string} 切り替え後のカラーモード
 */
const toggleColorMode = () => {

  const mode = ((parseInt(getColorMode()) + 1) % 2).toString();
  setColorMode(mode);

  return mode;
};

const GREEN_BUTTON = "linear-gradient(to right, #50a0f0 0%, #32edae 100%)";

const DEFAULT_BLUE = '#8cc8d1';

const DEFAULT_FONT_CL = "#8babab";
const DEFAULT_TITLE_FONT_CL ="#abbaba";

const DARK_FONT_CL   = "#eeeeee";
const DARK_BG_CL     = "#202040";
const DARK_MENU_CL   = "#404070";
const DARK_SVG_CL    = "#eeeeee";
const DARK_IMG_BG_CL = "#eeeeee";

const HOVER_BG_UPPER_CL = "#5bbee4";
const HOVER_BG_LOWER_CL = "#ebf4f7";
const HOVER_BORDER_CL   = "#5bbee4";

const DARK_HOVER_BG_UPPER_CL = "#20cccc";
const DARK_HOVER_BG_LOWER_CL = "#202050";
const DARK_PAST_BG_CL = "#303040";

const DARK_TODAY_UPPER_CL  = "#30aaaa";
const DARK_TODAY_LOWER_CL  = "#303050";
const DARK_HOVER_BORDER_CL = "#79fcfc";

const DARK_STRONG_FONT_CL = 'crimson';
const DARK_STRONG_BG_CL   = 'aquamarine';
const DARK_FC_TEXT_CL     = 'rgb(99, 103, 103)';

const KEY_BACKGROUND = "backGround";
const KEY_MENUBAR    = "manuBar";
const KEY_BREADCRUMB = "breadcrumb";
const KEY_LIST       = "list";
const KEY_ARTICLE    = "article";
const KEY_PASTDAY    = "pastday";
const KEY_TODAY      = "today";
const KEY_MEMBER_PROP = "memberProp";
const KEY_SVG_PATH   = "svgPath";
const KEY_BLOG       = "blog";
const KEY_STRONG     = "strong";
const KEY_DISCO      = "disco";
const KEY_AFTER      = "after";
const KEY_BIOGRAPHY  = "biography";
const KEY_FC_LOGO    = "fc_logo";
const KEY_FC_TEXT    = "fc_text";

const KEYS = [KEY_BACKGROUND, KEY_MENUBAR, KEY_BREADCRUMB, KEY_LIST, KEY_ARTICLE,
              KEY_PASTDAY, KEY_TODAY, KEY_MEMBER_PROP, KEY_SVG_PATH, KEY_BLOG, KEY_STRONG, KEY_DISCO, KEY_AFTER, KEY_BIOGRAPHY, KEY_FC_LOGO, KEY_FC_TEXT];

const SELECTOR_DIC = {};
SELECTOR_DIC[KEY_BACKGROUND]  = '.pages, .module-modal.js-member-filter .mordal-box, .l-container, .schedule__list-future';
SELECTOR_DIC[KEY_MENUBAR]     = '.l-header, .p-header-wrap, .p-header-wrap.is-fixed';
SELECTOR_DIC[KEY_BREADCRUMB]  = '.p-page-breadcrumb__list, .c-page-breadcrumb__item:last-child span';
SELECTOR_DIC[KEY_LIST]        = '.l-container, .p-news__list ';
SELECTOR_DIC[KEY_ARTICLE]     = '.c-blog-main__title, .c-blog-main__date, .c-article__title, .p-article__text, .p-article__text span, .c-blog-article__text div *, .c-blog-article__text p span, .tbcms_program-detail__inner p, .c-tv-backnumber-kiji-time, .c-tv-backnumber-kiji-text';
SELECTOR_DIC[KEY_PASTDAY]     = '.schedule__list-pastday';
SELECTOR_DIC[KEY_TODAY]       = '.schedule__list-today';
SELECTOR_DIC[KEY_MEMBER_PROP] = '.c-member__name, .c-member__name--info, .c-member__info-td__text, .c-blog-member__name, .c-blog-member__info-td__text, .c-mamber__category_title span, .c-section-title--member-name';
SELECTOR_DIC[KEY_SVG_PATH]    = '.c-member__info-td__text a svg path';
SELECTOR_DIC[KEY_BLOG]        = '.l-maincontents--blog, .p-blog-entry__group, .p-blog-entry__list, .s-blog__index, .p-blog-group, .p-blog-entry__list';
SELECTOR_DIC[KEY_STRONG]      = '.p-article__text strong span, .p-article__text span strong';
SELECTOR_DIC[KEY_DISCO]       = '.formation_image li i, .c-page-breadcrumb__item, .c-disco__title, .c-disco__date, .c-video-detail__title, .formation_image li i';
SELECTOR_DIC[KEY_AFTER]       = '.l-other-contents--blog';
SELECTOR_DIC[KEY_BIOGRAPHY]   = '.p-biography__text';
SELECTOR_DIC[KEY_FC_LOGO]     = '.fc-logo';
SELECTOR_DIC[KEY_FC_TEXT]     = '.fc-contents .text';

const CSS_DIC = {};
CSS_DIC[KEY_BACKGROUND]  = new Array('background-color');
CSS_DIC[KEY_MENUBAR]     = new Array('background-color');
CSS_DIC[KEY_BREADCRUMB]  = new Array('color');
CSS_DIC[KEY_LIST]        = new Array('color');
CSS_DIC[KEY_ARTICLE]     = new Array('color');
CSS_DIC[KEY_PASTDAY]     = new Array('background-color');
CSS_DIC[KEY_TODAY]       = new Array('background');
CSS_DIC[KEY_MEMBER_PROP] = new Array('color');
CSS_DIC[KEY_SVG_PATH]    = new Array('fill');
CSS_DIC[KEY_BLOG]        = new Array('color', 'background-color');
CSS_DIC[KEY_STRONG]      = new Array('color', 'background-color');
CSS_DIC[KEY_DISCO]       = new Array('color');
CSS_DIC[KEY_AFTER]       = new Array('color', '--bg-color');
CSS_DIC[KEY_BIOGRAPHY]   = new Array('color');
CSS_DIC[KEY_FC_LOGO]     = new Array('background-color');
CSS_DIC[KEY_FC_TEXT]     = new Array('color');

const DEFAULT_COLOR_CONFIG = {};

const DARK_COLOR_CONFIG = {};
DARK_COLOR_CONFIG[KEY_BACKGROUND]  = {"background-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_MENUBAR]     = {"background-color": DARK_MENU_CL};
DARK_COLOR_CONFIG[KEY_BREADCRUMB]  = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_LIST]        = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_ARTICLE]     = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_PASTDAY]     = {"background-color": DARK_PAST_BG_CL};
DARK_COLOR_CONFIG[KEY_TODAY]       = {"background": `linear-gradient(${DARK_TODAY_UPPER_CL}, 10%, ${DARK_TODAY_LOWER_CL})`};
DARK_COLOR_CONFIG[KEY_MEMBER_PROP] = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_SVG_PATH]    = {"fill": DARK_SVG_CL};
DARK_COLOR_CONFIG[KEY_BLOG]        = {"color": DARK_FONT_CL, "background-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_STRONG]      = {"color": DARK_STRONG_FONT_CL, "background-color": DARK_STRONG_BG_CL};
DARK_COLOR_CONFIG[KEY_DISCO]       = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_AFTER]       = {"color": DARK_FONT_CL, "--bg-color": DARK_BG_CL};
DARK_COLOR_CONFIG[KEY_BIOGRAPHY]   = {"color": DARK_FONT_CL};
DARK_COLOR_CONFIG[KEY_FC_LOGO]     = {"background-color": DARK_IMG_BG_CL};
DARK_COLOR_CONFIG[KEY_FC_TEXT]     = {"color": DARK_FC_TEXT_CL};

/*
 * cssプロパティの値を取得
 * @param {string} selector - cssセレクタ
 * @param {string} cssProperty - cssプロパティ名
 * @return {string} cssプロパティの値
 */
const getSelectorStyle = (selector, cssProperty) => 
  (((element, cssProperty) => (element != null) ? getComputedStyle(element).getPropertyValue(cssProperty) : 'rgb(0, 0, 0)')(document.querySelector(selector), cssProperty));


const getBeforeFirstComma = (str) => {
    const index = str.indexOf(",");
    return index !== -1 ? str.slice(0, index) : str;
};


const COLOR_CONFIGS = [];

const analyzeDefaultColor = () => {
 
  Array.prototype.forEach.call(KEYS, (k) => {
    DEFAULT_COLOR_CONFIG[k] = {};
    Array.prototype.forEach.call(CSS_DIC[k], (c) => {
      DEFAULT_COLOR_CONFIG[k][c] = getSelectorStyle(getBeforeFirstComma(SELECTOR_DIC[k]), c);
    });
  });
 
  COLOR_CONFIGS.push(DEFAULT_COLOR_CONFIG, DARK_COLOR_CONFIG);
};


const setMenuFontColor = (selector, originColor = DEFAULT_BLUE) => {

  Array.prototype.forEach.call(document.querySelectorAll(selector), (x) => {
 
    x.style.color = originColor;

    x.addEventListener('mouseover', () => {

      if (getColorMode() === COLOR_MODE.DARK_COLOR) {
        x.style.color = '#e0ffff';
      } else {
        x.style.color = '#5d5d5d';
      }
    });

    x.addEventListener('mouseout', () => {
      x.style.color = originColor;
    });
  });
};

/*
 * hover時フォント設定
 * @param {string} itemSelector - hover対象セレクタ
 * @param {string} titleSelector - タイトルセレクタ
 * @param {string} datetimeSelector - 日時セレクタ
 */
const setHoveredFontColor = (itemSelector, titleSelector, datetimeSelector) => {
  Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
    x.addEventListener('mouseover', () => {

      if (getColorMode() === COLOR_MODE.DARK_COLOR) {

        x.querySelector(titleSelector).style.color = `${DARK_FONT_CL}`;
        const datetime = x.querySelector(datetimeSelector);
        if (datetime) { datetime.style.color = `${DARK_FONT_CL}`;}
      } else {

        x.querySelector(titleSelector).style.color = `${DEFAULT_FONT_CL}`;
        const datetime = x.querySelector(datetimeSelector);
        if (datetime) { datetime.style.color = `${DEFAULT_FONT_CL}`;}
      }
    });
  });

  Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
    x.addEventListener('mouseout', () => {

      x.querySelector(titleSelector).style.color = `${DEFAULT_TITLE_FONT_CL}`;
      const datetime = x.querySelector(datetimeSelector);
      if (datetime) { datetime.style.color = `${DEFAULT_FONT_CL}`;}
    });
  });
};

const setHoveredFontAndBgColor = (itemSelector, textSelector) => {
  Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
    x.addEventListener('mouseover', () => {

      if (getColorMode() === COLOR_MODE.DARK_COLOR) {
        x.style.background = `linear-gradient(${DARK_HOVER_BG_UPPER_CL}, 20%, ${DARK_HOVER_BG_LOWER_CL})`;
        x.style.outline = `1px solid ${DARK_HOVER_BORDER_CL}`

        x.style.color = `${DARK_FONT_CL}`;
        x.children[0].style.color = `${DARK_FONT_CL}`;
        const text = x.querySelector(textSelector);
        if (text) { text.style.color = `${DARK_FONT_CL}`;}
      } else {
        x.style.background = `linear-gradient(${HOVER_BG_UPPER_CL}, 20%, ${HOVER_BG_LOWER_CL})`;
        x.style.outline = `1px solid ${HOVER_BORDER_CL}`

        x.style.color = `${DEFAULT_FONT_CL}`;
        x.children[0].style.color = `${DEFAULT_FONT_CL}`;
        const text = x.querySelector(textSelector);
        if (text) { text.style.color =`${DEFAULT_FONT_CL}`;}
      }
    });
  });

  Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
    x.addEventListener('mouseout', () => {
      x.style.background = `transparent`;
      x.style.outline = `1px solid transparent`
      x.style.color = `${DEFAULT_FONT_CL}`;
      x.children[0].style.color = `${DEFAULT_FONT_CL}`;
      const text = x.querySelector(textSelector);
      if (text) { text.style.color = `${DEFAULT_FONT_CL}`;}
    });
  });
};

/*
 * ページに対応した色設定を行う
 * @param {string} pageType - ページ種類
 * @param {string} colorMode - カラーモード
 */
const setColor = (pageType, colorMode) => {

  const configIndex = parseInt(colorMode);

  Array.prototype.forEach.call(KEYS, (k) => {
    Array.prototype.forEach.call(document.querySelectorAll(SELECTOR_DIC[k]), (e) => {
      Array.prototype.forEach.call(CSS_DIC[k], (c) => {
        e.style.setProperty(c, COLOR_CONFIGS[configIndex][k][c]);
      });
    });
  });

  // パンくずリスト
  Array.prototype.forEach.call(document.querySelectorAll('.p-page-breadcrumb__list .c-page-breadcrumb__item:not(:last-child)'), (x) => {
    x.addEventListener('mouseover', () => {

      if (getColorMode() === COLOR_MODE.DARK_COLOR) {
        x.children[0].style.color = "lightcyan";
      } else {
        x.children[0].style.color = '#5d5d5d';
      }
    });

    x.addEventListener('mouseout', () => {

      if (getColorMode() === COLOR_MODE.DARK_COLOR) {
        x.children[0].style.color = "lightcyan"; 
      } else {
        x.children[0].style.color = '#a9a9a9';
      }
    });
  });

  switch (pageType) {
    case "news":
    case "media":
      setMenuFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
      setHoveredFontAndBgColor('.p-news__item, .p-other__item, .p-schedule__item', 'time');
      break;
    case "artist":
      setHoveredFontAndBgColor('.p-news__item', '.c-news__date');
      break;
    case "diary/member":
      shortenYearWithDay('.c-blog-main__date, .c-blog-top__date');
      setHoveredFontColor('.p-blog-top__item', '.c-blog-top__title', '.c-blog-top__date');
      break;
    case "diary/detail":
    case "diary/member/list":
      setMenuFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
      setHoveredFontAndBgColor('.p-blog-entry__item', '.c-blog-entry__title');
      setHoveredFontAndBgColor('.d-article', '.s-article-title');
      setHoveredFontAndBgColor('.c-pager__item__text', 'time');
      break;

    // 動画
    case "video":
    case "contents":

      // 動画タイトル
      Array.prototype.forEach.call(document.querySelectorAll('.p-video__item.p-video__item--medium'), (x) => {

        x.addEventListener('mouseover', () => {

          if (getColorMode() === COLOR_MODE.DARK_COLOR) {

            x.children[1].children[0].style.color = "lightcyan";
          } else {
            x.children[1].children[0].style.color = '#5d5d5d';
          }
        });

        x.addEventListener('mouseout', () => {

          x.children[1].children[0].style.color = '#a9a9a9';
        });
      });
      break;
    case "event":
      Array.prototype.forEach.call(document.querySelectorAll('.p-shakehands__item'), (x) => {
        x.addEventListener('mouseover', () => {

          if (getColorMode() === COLOR_MODE.DARK_COLOR) {
            x.children[1].children[1].style.color = "lightcyan";
            x.children[1].children[2].style.color = "lightcyan";
          } else {
            x.children[1].children[1].style.color = '#5d5d5d';
            x.children[1].children[2].style.color = '#5d5d5d';
          }
        });

        x.addEventListener('mouseout', () => {

          x.children[1].children[1].style.color = DEFAULT_FONT_CL;
          x.children[1].children[2].style.color = DEFAULT_FONT_CL;
        });
      });

      Array.prototype.forEach.call(document.querySelectorAll('.p-other__item'), (x) => {
         x.addEventListener('mouseover', () => {

          if (getColorMode() === COLOR_MODE.DARK_COLOR) {
            x.children[0].style.color = "lightcyan";
          } else {
            x.children[0].style.color = '#5d5d5d';
          }
        });

        x.addEventListener('mouseout', () => {

          x.children[0].style.color = DEFAULT_FONT_CL;
        });
      });
      Array.prototype.forEach.call(document.querySelectorAll('.c-pager__item--count a'), (x) => {
         x.addEventListener('mouseover', () => {

          if (getColorMode() === COLOR_MODE.DARK_COLOR) {
            x.style.color = "lightcyan";
          } else {
            x.style.color = '#5d5d5d';
          }
        });

        x.addEventListener('mouseout', () => {

          x.style.color = DEFAULT_FONT_CL;
        });
      });
      break;
    default:
      ;
  }
};


const leftPosition = (colorMode) => (colorMode === COLOR_MODE.DEFAULT_COLOR) ? "-3px" : "36px";

/**
 * カラーモードトグルのスイッチボタンを生成
 * @param {COLOR_MODE} colorMode
 */
const createSwitchButton = (colorMode) => {

  const switchButton = document.createElement('div');
  switchButton.classList.add("switch_button");
  const left = leftPosition(colorMode);

  switchButton.style.cssText
    = `left: ${left};
      margin-top: -5px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      position: absolute;
      background-color: white;
      box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
      transition: left .3s ease-in-out;`;

  return switchButton;
};

/*
 * カラーモードのトグルスイッチを初期化
 * @param {string} colorMode - "0": ライトモード、 "1": ダークモード
 */
const initializeColorToggle = (colorMode) => {

  const menuList = document.querySelector('.p-menu__list');

  if (menuList && !document.querySelector('.color_toggle')) {
    const colorToggle = document.createElement('div');
    colorToggle.classList.add("color_toggle");
    menuList.appendChild(colorToggle);

    colorToggle.style.cssText
      = `margin-top: 2px;
        margin-left: 16px;
        width: 60px;
        height: 18px;
        border: solid 2px gray;
        border-radius: calc(infinity * 1px);
        background: linear-gradient(to right, #fff 0%, #fefefe 30%, #606080 70%, #404060 80%, #202040 100%);
        position: relative;
        cursor: pointer;
        transition: background-color .2s ease-in-out;`;

    const switchButton = createSwitchButton(colorMode);

    colorToggle.appendChild(switchButton);

    colorToggle.addEventListener("click", () => {
      const colorMode = toggleColorMode();
      switchButton.style.left = leftPosition(colorMode);
      setColor(getPageType(), colorMode);
    });

    return true;
  } else {

    return false;
  }
};


const doProcessList = (func) => {

  const isDetail = ((location.href).match(new RegExp('\/detail\/')) != null);

  if (isDetail) {
    return;
  }

  const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";

  const pageType = (location.href).match(new RegExp('\/(media|news)\/'))[1];

  if (! pageType) {
    throw new Error(PAGE_TYPE_ERROR_MSG);
  }

  const SELECTORS = ((x) => {
      switch (x) {
        case "news":
          return {"pArrow": ".p-news__pager-arrow",
              "cArrowLeft": ".c-news_pager-arrow--left",
                "cArrowRight" : ".c-news_pager-arrow--right",
                "cPageMonth": ".c-news__page_month",
                "cPageYear": ".c-news__page_year",
                "lMainContentsUl": ".l-maincontents--news ul",
                "pDate": ".p-news__page_date",
                "lSubContents": ".l-sub-contents--news"};
        case "media":
          return {"pArrow": ".p-schedule__pager-arrow",
              "cArrowLeft": ".c-schedule_pager-arrow--left",
                "cArrowRight" : ".c-schedule_pager-arrow--right",
                "cPageMonth": ".c-schedule__page_month",
                "cPageYear": ".c-schedule__page_year",
                "lMainContentsUl": ".l-maincontents--schedule ul",
                "pDate": ".p-schedule__page_date",
                "lSubContents": ".l-sub-contents--schedule"};
        default:
            throw new Error(PAGE_TYPE_ERROR_MSG);
      }
  })(pageType);

  const pageYear = ((y) => {return (y === null || y === undefined) ? null : y.innerText;})(document.querySelector(SELECTORS.cPageYear));

  const now = new Date();

  // "年"の表示がない場合
  if (pageYear !== "年") {

    const daysOfWeek = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'Sa'];
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    // 月初
    const first = new Date(year, month - 1, 1);
    // 月末
    const end = new Date(year, month, 0);
    // 月末の日
    const endDate = end.getDate();
    // 前月末
    const endPrevMonth = new Date(year, month - 1, 0);
    // 前月末の日
    const endDatePrevMonth = endPrevMonth.getDate();
    // 月初の曜日
    const firstDayOfWeek = first.getDay();

    let numOfDay = 1;
    let calendarHtml = '';

    const pageMonth = ((m) => {return m !== null ? m.innerText : "";})(document.querySelector(SELECTORS.cPageMonth));

    const leftArrowHref = document.querySelector(SELECTORS.cArrowLeft).children[0].href;
    const rightArrowHref = document.querySelector(SELECTORS.cArrowRight).children[0].href;

    calendarHtml += '<table class="cale_table" style="width: 210px; margin: -130px 0 20px -50px;">';
    calendarHtml += `<tr><td></td><td class="cale_prev"><a id="cale_prev" href="${leftArrowHref}">＜</a></td>
          <td class="cale_month" colspan="3">${pageYear}&#160;${pageMonth}</td><td class="cale_next"><a href="${rightArrowHref}">＞</a></td><td></td></tr>`;

    calendarHtml += '<tr>';

    for (let i = 0; i < daysOfWeek.length; i++) {
      calendarHtml += '<td class="cale_wek' + i + '">' + daysOfWeek[i] + '</td>';
    }

    calendarHtml += '</tr>';

    for (let w = 0; w < 6; w++) {
      calendarHtml += '<tr>'

      for (let d = 0; d < 7; d++) {
        if (w == 0 && d < firstDayOfWeek) {
          // 前月
          let num = endDatePrevMonth - firstDayOfWeek + d + 1;
          calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
        } else if (numOfDay > endDate) {
          // 次月
          let num = numOfDay - endDate;
          calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
          numOfDay++;
          w = 99; // カレンダーの最下端が次月の日付のみになるのを防止
        } else {
          calendarHtml += '<td class="cale_day' + d + '">' + numOfDay + '</td>';
          numOfDay++;
        }
      }
      calendarHtml += '</tr>'
    }

    calendarHtml += '</table>';

    document.querySelector(SELECTORS.lSubContents).insertAdjacentHTML('afterbegin', calendarHtml);
  }

  // 選択カテゴリ（ALL / 握手会・・・）
  const categorySelectorSuffix
  = ((c) => {
    let value = "";
    if (c.length == 0) {
      value = "all";
    } else {
      const tempValue = c[0].value;

      switch (tempValue) {
        case "birthday":
          value = "birth";
          break;

        case "fanclub":
          value = "fanclubonly";
          break;

        default:
          value = tempValue;
      }
    }

    return value;
  })(document.getElementsByName("cd"));

  const categoryElem = document.querySelector('.c-button-category.category_' + categorySelectorSuffix);
  const categoryStyles = window.getComputedStyle(categoryElem);
  const categoryParent = categoryElem.parentElement;
  categoryParent.style.marginLeft = "-5px";
  categoryParent.style.paddingLeft = "4.5px";
  categoryParent.style.marginRight = "40px";
  categoryElem.style.color = `rgb(from ${categoryStyles.color} calc(r - 64) calc(g - 64) calc(b - 64))`;
  categoryParent.style.backgroundColor = `rgb(from ${categoryStyles.color} calc(r + 64) calc(g + 64) calc(b + 64))`;
  categoryParent.style.border = `solid 0.5px ${categoryElem.style.color}`;

  // 詳細ページの場合 処理を終了
  if (isDetail) {
    return;
  }

  /*
   * フルブラウザ上ではNEWS/スケジュールが多い月は見づらいため
   * 自動スクロール、表示色を追加設定
   */

  const PAGER_MARGIN_TOP = 20;
  const PASTDAY_BG_CL = "#ededf0";
  const TODAY_DATE_CL = "orange";
  const TODAY_BG_CL = "#fafeff";
  const TODAY_BORDER_CL_UPPER = "#d7eeff";
  const TODAY_BORDER_CL_LOWER = "#5bbee4";

  let styleText = `
      .is-disabled {
        color: silver;
      }
      .p-page-head {
        padding-top: 20px;
      }
      .c-pager__item a svg {
          fill: #7ab6db;
      }
      .schedule__list-pastday {
        background-color: ${PASTDAY_BG_CL};
      }
      .schedule__list-today {
        background-color: ${TODAY_BG_CL};
        border: 2px solid;
        border-image: linear-gradient(to right bottom, ${TODAY_BORDER_CL_UPPER}, ${TODAY_BORDER_CL_LOWER}) 1;
      }
      .schedule__date-today {
        color: ${TODAY_DATE_CL};
      }
      .p-news__item, .p-schedule__item {
        outline-offset: 1px;
      }
      .module-modal.js-member-filter .mordal-box .member-box ul li p.check input[type=checkbox]:checked+label:before {
        background-color:#6bcaea;
        border:1px solid #6bcaea;
      }`;

  document.appendStyle(styleText);

  // リスト上方 "xxxx年 yy月" 行
  const pDate = document.querySelector(SELECTORS.pDate);

  // "xxxx年" ではなく "年"のみの場合
  if (pageYear === "年") {
    const cPageYear = document.querySelector(SELECTORS.cPageYear);

    cPageYear.innerText = String(now.getFullYear()) + "年";
    cPageYear.style.fontSize = "4.8rem";
    document.querySelector(SELECTORS.cPageMonth).remove();
    document.querySelector(SELECTORS.pArrow).remove();
  }

  pDate.style.marginBottom = "5px";

  // ニュース/スケジュール リスト
  const lMainContentsUl = document.querySelector(SELECTORS.lMainContentsUl);

  const lMainContentsUlTop = lMainContentsUl.getBoundingClientRect().top;

  const pDateHeight = pDate.offsetHeight;

  // リスト下方 前月/次月ページャ
  const pPager = document.querySelector(".p-pager");

  // "xxxx年" ではなく "年"のみの場合
  if (pageYear === "年") {
    pPager.innerText = "";

    pPager.style.marginTop = "0px";
  } else {

    pPager.style.marginTop = `${PAGER_MARGIN_TOP}px`;
  }

  const pPagerHeight = PAGER_MARGIN_TOP + pPager.offsetHeight;
  const lMainContentsUlHeight = document.documentElement.clientHeight - pDateHeight - pPagerHeight;

  // スクロール表示
  lMainContentsUl.setAttribute("style", `height:${lMainContentsUlHeight}px; overflow: scroll; border: solid 1px #32a1ce;`);

  const scrollTop = lMainContentsUlTop - pDateHeight;

  // スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
  scrollTo(0, 0);

  // リスト位置までページ内で縦スクロール
  scrollTo({
    top: scrollTop,
    behavior: "smooth"
  });

  const nowYearMonth = String(now.getFullYear()) + String(now.getMonth() + 1).padStart( 2, '0');
  const dispYear = document.querySelector(SELECTORS.cPageYear);
  const dispMonth = document.querySelector(SELECTORS.cPageMonth);

  // 表示対象の年月（ex.202404）を取得。設定がなければ当月
  const dispYearMonth
  = ((y, m) => {return (y == null || m == null) ? nowYearMonth : y.innerText.replace('年', '') + m.innerText.replace('月', '')})(dispYear, dispMonth);

  // NEWS/スケジュールが当月以前の月の場合
  if (dispYearMonth < nowYearMonth) {

    lMainContentsUl.classList.add('schedule__list-pastday');
  }

  const createAnchor = (y, d) => `<a href="javascript:document.querySelector('${SELECTORS.lMainContentsUl}').scroll({top:${y}, behavior: 'smooth'});">${d}</a>`;

  if (pageType === "news") {
    doProcessNews(lMainContentsUlTop, createAnchor);
  } else {
    doProcessMedia(lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor);
  }
};

const COMPRESSED = `ᯡࡌ䅤恢ࡅࠥ敁㬬䍴ᢲ8㤠㑂ի䨬㹰h༽栲石¬籤ޏ㐽ఊぐீḀ昡ᨌသ㐮ொ⠷吸྽哠೯⠱濈ः啈ը听瞴怢柈t吢㴭ᐤ繴̣檀և吥៮氣⮴v檀·吠垴Ԡ㈠厺䨥৪ǧ結ϐ᳝ᄔŗᵐ<穠۶〦䄊␦戺E᪸nҀڼ橨ӗ樢᪣㑸穠⏙倱⺌ᐥ柪椈Ҡ䗤內倭ᴋ∀ሣ᪍,坲⁏䵓䢢Ǆ䠲Ȁ㪠↕⥛᪫卦偄ï㕻L┌夑䂰১ᐧ拚䤠炆䀹抍໠䠨翔畩n٠ѣဪძ☐ሡ緭ⶠ彭㴗ⱀ䠧⻵㓦⇔撢⁁໰Ҩ␥Aៗரᄠ⡙ᅸ琡ⰹ[͗๱Ġ䷌怺▊∠唆䁉峰ԓސരဧ㣓┠䢀怲᰽挔‹ದ樠梒渤戤ƿ溠ᚦ咨ǘ崠掍㜱ㄡບ‾্挌⁞倯璭ᄥ瘸䗲燎၀ਧ㐠墌池ຳⷡ㱠䁑嫰k娠Ὺ盕䝍籠䁇毰Ԭ⪱8Ặ᷒痤灨ࠦ㨊ᵲࡱᅃ仠Ⴧ⩤ǽ㚠љ䉠⚉8滉ࠡ枺¶欩઺稠ഊ剀ী搣簹8䌤䓩䤠桙⤰ұءᫎ⟘䟫素⼘椬䡨᷂怼䧊梙䆧ⅷ⸠玩壌刧ࣕ䁘䧮⊃ⴲ⧐օء宎剀హ吣ਲ਼᳊䔈ന剀ú㇌䁊቞曳撠⾟啠┇ⵠᣢᠠ὘祽પ伫ហ̜倩䳭⢹䀫㝐␢܅࿫澳㯛=׊䩊4峀ߧᣌ䀪烨ಠࠁ䅀灼䀢簨"အȠեՀ;⨠[/㓠炝עM匧℔&嬁䰾䀠猠ઋ⋚㴠ŌQ弩ㅀဥ炎Rༀޣ翰(怠䵴྅悹ࢰ|瑡Ă-嬮愔ᝀÚȹ䑩噑؁䉌ケ牋傰਺䀰ᩓȠᄦ†傄¦ٲࠡ簹4䆡䝑娽䖑ṐĐ㜠㯞瑭槽僢恝ᑯ䥽Ԯ䄔ᥭ⥺埢楀ݫɸᱤ㬌㒯兩с堠ằ䙑0懦ሻ΃䐻ࢱ㡣ࢀ䈠ڇ⫤嘨⬸䜲ኈ㵸揜⌵⒴渵⍐ᬻ䈠㏌䱋瑠ʔᗄ‣冑剗ᗑ穀˘㢠Ɔ抆椸⬨纲(眬㍐̪₸ܭ⊘怦ႄĊطᩢu͙憥湯੥Თೠ㺀7渥र掘䒩槩䰠Ϩ抵ᢡㄎ䕩汤岵斑͡㡤ㆵ㋎䉄䒰䮴汌ࢳ㲄㎮૚嗠桦ᗢ䊮ᙇ檮ᅴ䈾䝶ૢ彡窡嗳ᜁ凗焁塴⛁塵朜ṥ皣儉໎䁂䐫妢ְ̀㈠㔦Ⳛ℠⁣ᕑ㶾₧㵜㞬¬᷿勹㢙⸶ぬᣄ⇈㓩员㮥ʺ࠭槗妶ず孶狢厀㢵נ䒵Ʌ〮ድ〰䁵⫤䀿䒙⎀呑ᄼ䂁㢄㝑㈢搥ೂⲾᵎÈĨㅙ到Ƥ᥎瓞嚬曝獐‫歇毽寥׆堺璀泻䘔ె孡㤺愘檳ㅮ毂惱睎礟㯤簖緼⒦ڤᣍㅁ偅ⱪ㔼Ⓖᣆ䖼恴㲌ㄠᏺ㘵渙㚏ƈ⸀͈慇ⴷ‸甆⸠ଦ◺⇎怭炁៽௨絽ឬüḊ穸䉎׈෤ŭ䐢拄ᮔ὆估ގ䙤䛵⪭㘦䃐ᝉ䓗䄔㌔ㄻƾˏ⪥⍡帼ℸ仈㶭䆐፳व;绉䀼曤歿՗噫烑秧⨗洤甴㉉䂆੠嘪ⳚἋⳝ窰Ⳕ䍅樠㊣ᘙ廙㦔ྴ=㼏稸ඦ硠ࢪ怾ۊ⪉䤦̅ՠ޶Ȓ⾓⌰Ѩ焦ዙ‣௮呢ࢸ㢽⦀ᵳ┼㙾ᔸ択沬尽扄䂣垷⅐紨z㌵䤡ㆺ%〠ݗ㄂☱᫙⩴㘩͸ⴙ㨢冐坢㡷Ԑ縲ė⾔䫰Ȅಊ恠䱵痿䞪?ΐ³㭪ᐽ⊨ʻ吧䶻砰ᡵ械ۊ̺ᓦᫀ畦䅌㔤瀳䜛ⅱ⢏ϊ刃⨾拀畱ᄝ䡙〨䨒ᾩJᙺ剆拼淬味㘆䕇墈ⅇᙨҀ䇞İ⧄ƹ噺≊㐊>得糐⚡ᅃ⚈砭੸㛲ᮋ搦ᒂ緻ä今犧⧵㶬ㄷ伖ㅁ扳昍ӵ㴲ῆఠ㣸ྩu䨺凎ᩳ⭕獷ᕖ⊊ᢶ昵໫ㄠ߷愦唂㙈⩊⼼䤩᳂ᙀ቙撠‧桓◀Έᦼ娊䩧䪷ࠢ歬؂䀦懺㳣ୱᎎ祰檈⽚Ϟ⏘䊨⩛ম፜儲1扁࿂᫖屩䮢ቁ⦀шĉ点⸨橜ཪ挩桒␣䈺ↄ⹨狠Ȩ㋿⤤A͖㬷὏ᓒ焞ဣ犠ӏ媙␺稊ᴵ䷼ʱ᥄㪔䦗੔欠ⱨㄋ䬞潒᧝抌у纮ݵ⌴⼨ⱊㅂ檸泭呋兑Ⲋ⛔欿ᯕ澕咂広᪄单ᓎ嗉㚴๨宔ቃ嫢䅈岼㢠̀曚䀠ࢄh䌪壼濈歡ⶱ䃸ê縑⽪Ȧ祱唭䥍協䅶繲ᰜ䦬㄰䃑呾၊֘㇬䉩䢺య妔䂔ㆈ珊䙈䡺䆪⍺媑⻖䢱ᓭ۷儲⣺剌婳ⷺ৩ಳ䫀Ƚ⋒瓔{̈́畼慭㼢∵㤸æ緿瘾岌㚭浊‴⤈υ䄍Ų᷉㒖䔀塘đٖ⥘干ᢕ绛ⴠާ㖧㣯䢠㉗᪊䦎䄿䫄则㵆慝幐䧰ㆦ˩噯ࡨ緶䭲Ƥ㝋ᶒ䞒崲匠ᕗ㖦Ⅱ叴⧅䂆畒ອ溱ᵩ࠴仳੠猷ᎏ啑椒㈠ᚣ߶᤟ᚔ媻煠ӫ浜恗垕ड͝ܔ໲⚄h沂㡩䢠⫠沍䖅䀭やW͇坫◡⧗ᦃ慸<ḏἰդű⾦ડᑢ毄稪啄㢳⛹䬎ᬨ櫞懋դ䳲䢸吨⌧↣ಢࡄ喸⪻毭㡭䑤妈墕垔㩬䗣䅘஫䦠ྀ抒䀧ႆ嵉嵫ᝓ拈ホ㱰ƨ㯺㒌每未纣೰䲗✇ጣ泠㬶䵸ل尰唱䫉ત㡢䴧㔼㑨ᔨ⩂⡢൥㉋␣梏ᩤ䓶ノႩ梶媛潤孃㑖宛烏ᦥ珢❛䕀䞫䥮⠠☬䀠ゅဩத杔揊ㆷ῰Ő㭯Ὀ禟㙗㯁ᴵ墥扛孄瞘墭磌媹姮䚼䘰嵪࿙怤嶳Һ甥⦃佊⟫籕哑剷竃吰⇰櫎⬆䟼售᎑⒰⪓ቄᱧ哣䧤綷澶歑&ズ䶻䈼☲兗ᓆ峽囀␠⤤ȸ㷙ℨƗ㞑þྏ澞激ଢᷭ䏻盎簈җႭ砞爰8⢯擩ᴡв犍ೢ․硑⹫秅竸ڿᐠȝ叭啀㋇幞ǒ塇烳叩䂧䫷↩ᘭ攵՝ᬾ႕⿃犨ᰡ䭗屨∣ᝰ僇╹䶿℠༈⪃⮥ᾑ䓡癝箄ⵢ㴸≸ᵬ䑛Ы竖ሽ朠ᫌ䡅㱰Ǚ㭻簜ℨᶜ擸磠ⶊ༦ᇱ屖┆䒸䮩仚Ⲇ榎十◥民眥樒䀡ߺ戎缭䰪㼶䥲ᡍ䞇≋禱前䒪ₒ⌄䗵朦疇Ꮌအ䈬砗㧏ठţ塟ƪ烣⋴灴ᐪ⿴☩暲ነ椽倬䖅⺐Ჴ䁓㐠㑣ᔁ⠼✰Ƞ࿌䖡紱悞䱺ⓨ⾵䴮❈㹣媻ᅙϨ噶奕椠઀恳ᭉᲶⳏ抄ᨹ碰ᶣ禽䜣纂榞ᬵ垣ↅ㼨媀q䊪敹ㅍ䨙礏ᄗᨠᘌ䫁煓淈ᨐ橈⏗៙ᦱ䒬ե璷‫Ⲣ䌣თ䃃䍠چ䜻⢩䌚⛁ї䆫⺚ᅀᛄ䃏湖䰠䨴傅லळ䖲沁̨ኳ⿅烰ᠠ㶽檧䪧Ơః〧ర䆆〡ነ唽⣙ᛚ⪀᳴䄇ٳ㙦Ꭹ䆵ᐠ᯾愜ᕩ✳簁䙔䒏❋窺໴窨㑖䍸ᖵ坮ᅬ爠᥁䠠ദ⤢串∶઀侲:濛繙猍䐡岀㬢Ǘႂ䐻Ʉ牺۰皬畠Ɉ᥎䤄妀亪洩櫱秶柀ȑ笧琐擊⊸儿ᖎᦛӷⅧ࢔ച〭栾䉐䲺〸瀳叚ᦤ৵昪ࡽ▦ק㇢畱ᩳ呏刔۰禚ᇶᰤϕ⿀̸ᣌ咤䮰ᓵᠸ现婻慀᪵ᐠཾ欭▥捂砥䨤У愌⚭䴲碹ஐ慦ᙑⳈw̼揎䞼榀枫⏉᷌䀧䄌࿬拚㓠 㔚ᔈȬᱹ䳯⓮ⓣ♆ヹ涼䝆橪抾ᕲ䀥ᜍ幟ɘࠠ޿⊹ᴩ技䍂殸˦ᙎ▓䶔㩓傌ኘ䥉俄Cᾋڞဟḻ⧴样獴缧㬿ⅽÌᖀ奼ॽٯ᪙Ằ榪਒†Зᬳ䵀最㣝ᯇ摇؜✳焵栦怤ࢳ熲7კອ⦡ცⓔ⣤ᮈ伆扅⺩檗熼嗪ᄹỢ❛ㅛல⫫䈯ᓒᄑ䛩劀ȕ㮻೏ᅤ◧燽䨍㢣ْ᜝䕚ᄂ惭䫙悚㶅䝍Ơܡ滖㯠㴹ਬ◔堂䅨䞖ޒ㌡接᱙挄僄Ꮗę竟Გ啈z廻拏Ꮡࣶ⪜珣ᏺ䷢✲煷ܹ⭀ࣔ姌䩠㣖夣඗ᛱ䀠㨎㍇ᔍ䷬榪໼禀ࠤ䜀म櫻䁰㼂奾瓢ᑎⰇ峧撠ġ浂㱨ር潺珈Ⰲ僠⑐旺㒌垤乃抰഑∱ⴋ僚䜽噠猽曙专Ὠ缁环Ꮉᙯ倫ਖ਼ᶥ珴㊽焿૪๲䆙惝ẜ喬!㾚㦳愀彤憳֜ఢ䏆〵磄Ĝ⹨ㇶ䆷Ꭻᒩ勴▒ᐠឞ欢ыᴊ㪪ଳֶ拈撠ࠑ␯籶⪃伉睨糒ᕐ㞩.⇸ᾴ秓ᇁ㹒㨡㉏᧩扆幷⁠两桅擋磍ᓡ䁆圮А攈᷵ㆂ⠠̀i#䐠ņ䉄ʠᝁ䠯婨嬭઩寢ቅፍᆨㅤ੻此㈕ⱆ縶嗺剄Ⓥቦᅉᒠ嵳櫞囈Ẅ䃀䈢Đᒋᆈ房業२扪⁩倵ᚩ੯欟㎤ⱁ࡭汦囕㌠筱牣唱ᇤ์嫤燍㌡ᅄ⨩卭㬊ݺŀ儛ᆘᱨ笃͝⯀䩤婕勩ឋӃ㬏啄ᣴ⿈竛ģ␡寥᫅ᐁ࢝獵栦偕ᜠ杻灤㟣僉㡤戬㜻䆸Ⅸ竐䉃ゴ棉⚇そ✺Ь䡤㔯䎉፲⛌㖃㢋䥈䚽䢡僉␩ु倭ᜋ᣶֔榓⺡ࣸᜊࢫ㒻罶橎㛍⼩ᆎᬁ匭ඩ屠ᛁ㟓䀊拵曩ū␭ᅄ剾囫ㄜ㠨㽎㗈ᄺ&烶䧗撶⶙偊᝖Ǚⶸֺ槗⇟岐₊Დ悾Ѡ  `;
const HINATAZAKA46 = JSON.parse(LZString.decompressFromUTF16(COMPRESSED));

HTMLElement.prototype.setPenlightColor = function(color_01, color_02, thickness, intensity) {

  this.style.borderLeftColor = "#" + color_01;
  this.style.borderTopColor = "#" + color_01;
  this.style.borderRightColor = "#" + color_02;
  this.style.borderBottomColor = "#" + color_02;

  this.style.boxShadow = `
    -${thickness} 0px ${thickness} -4px #${color_01},
    0px -${thickness} ${thickness} -4px #${color_01},
    ${thickness} 0px ${thickness} -4px #${color_02},
    0px ${thickness} ${thickness} -4px #${color_02},

    inset 0px 2px 4px white,
    inset 2px 0px 4px white,
    inset 0px -2px 4px white,
    inset -2px 0px 4px white,

    inset 0px 4px 4px #${color_01},
    inset 4px 0px 4px #${color_01},
    inset 0px -4px 4px #${color_02},
    inset -4px 0px 4px #${color_02},

    inset 0px ${thickness} 4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
    inset ${thickness} 0px 4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
    inset 0px -${thickness} 4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
    inset -${thickness} 0px 4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),

    -4px 0px 4px -4px white,
    0px -4px 4px -4px white,
    4px 0px 4px -4px white,
    0px 4px 4px -4px white,

    -4px 0px 4px -4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
    0px -4px 4px -4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
    4px 0px 4px -4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
    0px 4px 4px -4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity}))
    `;
};

const createGeneration = (gen) => {
  const fragment = document.createDocumentFragment();
  const sub = document.createElement('div');
  sub.classList.add('p-page-head-sub');
  const subtitle = document.createElement('h2');
  subtitle.classList.add('c-page-subtitle', 'en');

  switch(gen) {
    case "1":
      subtitle.append(document.createTextNode('一期生'));
      break;
    case "2":
      subtitle.append(document.createTextNode('二期生'));
      break;
    case "3":
      subtitle.append(document.createTextNode('三期生'));
      break;
    case "4":
      subtitle.append(document.createTextNode('四期生'));
      break;
    case "5":
      subtitle.append(document.createTextNode('五期生'));
      break;
  }

  sub.appendChild(subtitle);
  fragment.append(sub);

  const lcontents = document.createElement('div');
  lcontents.classList.add('l-contents');
  const lmaincontents = document.createElement('div');
  lmaincontents.classList.add('l-maincontents');
  const pmemberlist = document.createElement('div');
  pmemberlist.classList.add('p-member__list');

  lmaincontents.appendChild(pmemberlist);
  lcontents.appendChild(lmaincontents);
  fragment.append(lcontents);
 
  return fragment;
};

const IMG_PREFIX = "https://cdn.hinatazaka46.com/images/14/";
const IMG_SUFFIX = "/800_800_102400.jpg";//1000_1000_102400.jpg

const appendNmKn = (anchor, obj) => {
  const memberName = obj.memberName;
  const memberKana = obj.memberKana;  
  
  const name = document.createElement('div');
  name.classList.add('c-member__name');
  name.append(document.createTextNode(memberName));
  anchor.appendChild(name);

  const kana = document.createElement('div');
  kana.classList.add('c-member__kana');
  kana.append(document.createTextNode(memberKana));
  anchor.appendChild(kana);
};

const dateOptions = {
  year: 'numeric',
  month: 'short',
  day: 'numeric'
};

const appendBd = (anchor, obj) => {
  const memberName = obj.memberName;
  const birthday = obj.birthday;  
  
  const name = document.createElement('div');
  name.classList.add('c-member__name');
  name.append(document.createTextNode(memberName));
  anchor.appendChild(name);

  const birthElement = document.createElement('div');
  birthElement.classList.add('c-member__birth');

  birthElement.append(document.createTextNode(obj.birth.toLocaleDateString('ja-JP', dateOptions)));
  anchor.appendChild(birthElement);
};

const createMember = (number, imgUrl, linkUrl, appendElemFunc, arg) => {

  const li = document.createElement('li');
  li.classList.add('p-member__item');
  li.style.display = "block";
  li.dataset.member = number;

  const anchor = document.createElement('a');

  const thumb = document.createElement('div');
  thumb.classList.add('c-member__thumb');
  thumb.style.position = "relative";

  const img = document.createElement('img');
  img.setAttribute('src', IMG_PREFIX + imgUrl + IMG_SUFFIX);

  thumb.appendChild(img);

  if (linkUrl) {
    img.style.cursor = "pointer";

    const linkButton = document.createElement('a');
    linkButton.append(document.createTextNode('Open Link in New Tab'));
    linkButton.classList.add('open-link-button');
    linkButton.style.display = "none";
    linkButton.setAttribute('href', "https://" + linkUrl);
    linkButton.setAttribute('target', '_blank');

    img.addEventListener('click', () => {
      linkButton.style.display = (linkButton.style.display == "none") ? 'flex' : 'none';
    });

    linkButton.addEventListener('click', (event) => {
      event.stopPropagation();
    });

    thumb.appendChild(linkButton);
  }

  anchor.appendChild(thumb);

  appendElemFunc(anchor, arg);

  li.appendChild(anchor);
  return li;
};

/*
 * 複数グループが存在するソートカテゴリに卒業メンバーを追加して再構築
 * 
 *
 */
const constructGroup = (list, groups, sortTop, headers) => {

  let lastAdded;

  Array.prototype.forEach.call(list, (x) => {

    if (!groups[x]) return;

    const groupMembers = Array.prototype.sort.call(groups[x], (a, b) => (a.kn).localeCompare(b.kn, 'ja'));

    const unorderedList = document.createElement('ul');
    unorderedList.className = 'p-member__list';

    Array.prototype.forEach.call(groupMembers, (m) => {

      const current = sortTop.querySelector(`[data-member="${m.no}"]`);
      if (current) {
        unorderedList.appendChild(current);
      } else {
        const og = createMember(m.no, m.img, m.lnk, appendBd, {"memberName": m.nm, "birth": m.birth});
        unorderedList.appendChild(og);
      }
    });

    let header = Array.prototype.find.call(headers, (h) => h.children[0].innerText.trim() == x);

    if (header) {
 
      header.nextSibling.nextSibling.children[0].replaceChild(unorderedList, header.nextSibling.nextSibling.children[0].children[0]);
      lastAdded = header.nextSibling.nextSibling;
    } else {

      header = document.createElement('div');
      header.className = 'p-page-head-sub';
      const headSubHeader = document.createElement('h2');
      header.classList.add('c-page-subtitle', 'en');
      headSubHeader.append(document.createTextNode(x));
      header.appendChild(headSubHeader);

      sortTop.insertBefore(header, lastAdded.nextSibling);
      
      const lContents = document.createElement('div');
      lContents.className = 'l-contents';

      lContents.appendChild(unorderedList);
      
      const lMainContents = document.createElement('div');
      lMainContents.className = 'l-maincontents';
      
      lContents.appendChild(lMainContents);

      sortTop.insertBefore(lContents, header.nextSibling);
      lastAdded = lContents;
    }
  });  
};

const doProcessMember = () => {

    document.appendStyle(`
    .p-member-filter {
      margin-top: 1rem;
    }
    .p-page-head-sub {
      padding-top: 20px;
    }
    .l-contents {
      padding-bottom: 0px !important;
    }
    .p-member__item {
      display: block;
      margin-bottom: 50px !important;
    }
    .p-member__item a div img {
      border: 1px solid;
      border-radius: 8px;
      padding: 0.2rem;
      transition: transform 0.3s ease, z-index 0.3s ease;
      transform-origin: center center;
    }
    .p-member__item:hover a div img {
      transform:scale(1.1, 1.1);
    }
    .c-member__name {
      font-size: 2.2rem;
    }
    .c-member__kana {
      font-size: 1.5rem;
    }
    .open-link-button {
      color: #dddddd;
      background-color: #303030;
      justify-content: center;
	    align-items: center;
      font-size: 14px;
      width: 190px;
      height: 30px;
      border-radius: 15px 5px;
      cursor: pointer;
      position: absolute;
      bottom: 3px;
      right: 3px;
      z-index: 10000;
      transition: 0.3s;
    }
    .open-link-button:hover {
      color: lightyellow;
    }`
  );

  const membersList = Array.prototype.filter.call(HINATAZAKA46.DATA, (m) => {
    const isPersonal = m.no.length <= 2;
    if (isPersonal) {
      m.birth = excelSerialToDate(m.bd);
    }
    return isPersonal;
  });

  // デフォルト
  const ogMembersList = Array.prototype.filter.call(membersList, (m) => {
    return m.end != "";    
  });

  const generations = {};

  Array.prototype.forEach.call(ogMembersList, (m) => {

    if (! generations[m.gen]) {
      generations[m.gen] = createGeneration(m.gen);
    }
    const genTree = generations[m.gen];
    const list = genTree.querySelector('.p-member__list');

    const memberElement = createMember(m.no, m.img, m.lnk, appendNmKn, {"memberName": m.nm, "memberKana": m.kn});
    list.appendChild(memberElement);
  });

  const defaultMembersList = document.querySelector('.sorted.sort-default.current');

  Array.prototype.forEach.call(Object.values(generations), (g) => {
    defaultMembersList.appendChild(g);
  });

  // 名前順
  const newSortedByName = document.createElement('ul');
  newSortedByName.className = 'p-member__list';

  const sortedByName = document.querySelector('.sort-syllabary .p-member__list');

  const nameOrderMembersList = Array.prototype.sort.call(membersList.slice(), (a, b) => (a.kn).localeCompare(b.kn, 'ja'));
  
  Array.prototype.forEach.call(nameOrderMembersList, (m) => {
    const current = sortedByName.querySelector(`[data-member="${m.no}"]`);
    if (current) {
      newSortedByName.appendChild(current);
    } else {
      const og = createMember(m.no, m.img, m.lnk, appendNmKn, {"memberName": m.nm, "memberKana": m.kn});
      newSortedByName.appendChild(og);
    }
  });

  sortedByName.parentNode.replaceChild(newSortedByName, sortedByName); 

  // 誕生日
  const newSortedByBirth = document.createElement('ul');
  newSortedByBirth.className = 'p-member__list';
  
  const sortedByBirth = document.querySelector('.sort-birth .p-member__list');

  const birthOrderMembersList = Array.prototype.sort.call(membersList.slice(), (a, b) => {
    const aBrthDay = parseInt(a.bd);
    const bBrthDay = parseInt(b.bd);
 
    if (aBrthDay > bBrthDay) {
      return -1;
    } else if (aBrthDay == bBrthDay) {
      return a.kn > b.kn ? 1: -1;
    } else {
      return 1;
    }
  });

  Array.prototype.forEach.call(birthOrderMembersList, (m) => {

    const current = sortedByBirth.querySelector(`[data-member="${m.no}"]`);

    if (current) {
      newSortedByBirth.appendChild(current);
    } else {
      const og = createMember(m.no, m.img, m.lnk, appendBd, {"memberName": m.nm, "birth": m.birth});
      newSortedByBirth.appendChild(og);
    }
  });

  sortedByBirth.parentNode.replaceChild(newSortedByBirth, sortedByBirth); 

  // 星座
  const zodiacGroups = Object.groupBy(membersList, ({ birth }) => getZodiacSign(birth));

  const zodiacTop = document.querySelector('.sort-constellation');

  const zodiacHeaders = document.querySelectorAll('.sort-constellation .p-page-head-sub');

  const zodiacList = ZODIAC.list();

  constructGroup(zodiacList, zodiacGroups, zodiacTop, zodiacHeaders);

  // 血液型
  const bloodGroups = Object.groupBy(membersList, ({ bt }) => {
    switch (bt) {
      case "A":
      case "B":
      case "O":
      case "AB":
        return bt + "型";
      case "X":
      default:
        return "不明";
    }
  });

  const bloodTop = document.querySelector('.sort-blood');

  const bloodHeaders = document.querySelectorAll('.sort-blood .p-page-head-sub');

  const BLOOD_TYPES = ["A型", "B型", "O型", "AB型", "不明"];

  constructGroup(BLOOD_TYPES, bloodGroups, bloodTop, bloodHeaders);

  // Penlight
  Array.prototype.forEach.call(document.querySelectorAll('.p-member__item'), (m) => {

    const color_set = HINATAZAKA46.DATA[m.dataset.member].cl;
    const code_01 = HINATAZAKA46.LIGHT[color_set[0]].cd;
    const code_02 = HINATAZAKA46.LIGHT[color_set[1]].cd;

    const img = m.children[0].children[0].children[0];

    img.setPenlightColor(code_01, code_02, "4px", 64);

    m.addEventListener('mouseover', () => {img.setPenlightColor(code_01, code_02, "12px", 128);});
    m.addEventListener('mouseout', () =>{img.setPenlightColor(code_01, code_02, "4px", 64);});
  });
}

const doProcessMemberDetail = () => {

  document.appendStyle(`
      .p-member__box {
        padding-top: 40px;
      }
      .c-member__thumb img {
        border: 3px solid;
        border-radius: 8px;
        padding: 0.2rem;
        position: relative;
      }
      .c-mamber__category_title {
        margin-bottom: 0;
      }
      .p-button--center {
        padding-top: 0;
      }
      .c-member-greeting-popup-toggle-btn.active {
        background: ${GREEN_BUTTON};
      }
      .p-contents.p-contents--news {
        padding-bottom: 0px;
      }
      .c-btn-member-greeting-popup-close {
        --color: black;
      }
      .c-btn-member-greeting-popup-close:before {
        border: solid 1px;
        background-color: var(--color);
      }
      .c-btn-member-greeting-popup-close:after {
        border: solid 1px;
        background-color: var(--color);
      }
      .c-news__date {
        width: 11rem;
      }`);

  const close_button = document.querySelector('.c-btn-member-greeting-popup-close');
  close_button.style.setProperty("--color", DEFAULT_FONT_CL);
  shortenYearWithDay('.c-news__date');

  const img = document.querySelector('.c-member__thumb > img:nth-child(1)');

  if (img) {
    const ct = (location.href).match(/artist\/([0-9]{1,2})/)[1];
    const color_set = HINATAZAKA46.DATA[ct].cl;
    const color_01 = HINATAZAKA46.LIGHT[color_set[0]];
    const color_02 = HINATAZAKA46.LIGHT[color_set[1]];

    img.setPenlightColor(color_01.cd, color_02.cd, "8px", 64);
  }
};

const doProcessGreeting = () => {
  document.appendStyle(`
      .card, .member_thumb {
        cursor: pointer;
      }
      div.card {
        transition: transform 0.3s ease, z-index 0.3s ease;
        transform-origin: center center;
      }
      div.card:hover {
        transform: scale(1.05) translateZ(10px);
        z-index: 10; /* 前面に出す */
      }`
  );

  Array.prototype.forEach.call(document.querySelectorAll('[class^="card_"]'), (c) => {

    const cardNo = c.classList[0].match(/[0-9]{1,2}/)[0];

    const member = c.querySelector('.member_thumb');

    member.addEventListener('click', () => {
      location.href = "https://www.hinatazaka46.com/s/official/artist/" + cardNo + "?ima=0000";
    });

    c.addEventListener('mouseover', () => {
      const menberName = c.querySelector('.name');

      if (getColorMode() === COLOR_MODE.DARK_COLOR) {

        menberName.style.color = `${DARK_FONT_CL}`;
      } else {
        menberName.children[0].style.color = `${DEFAULT_FONT_CL}`;
      }
    });

    c.addEventListener('mouseout', () => {
      const menberName = c.querySelector('.name');
      menberName.style.color = `${DEFAULT_FONT_CL}`;
    });

    const card = c.querySelector('.card');
    const btn = c.querySelector('a.btn01');

    card.addEventListener('click', (e) => {
      btn.click();
    });
  });
};

const DELTA = 2;

const doProcessNews = (lMainContentsUlTop, createAnchor) => {
  const newsList = Array.prototype.map.call(document.getElementsByClassName("c-news__date"),
                   (x) => [parseInt(x.innerText.match(new RegExp(/\d{4}\.\d{2}\.(\d{2})/))[1]), x.getBoundingClientRect().top] );

  const dayMap = new Map();

  Array.prototype.forEach.call(newsList, (x) => {

    if (! dayMap.has(x[0]) || x[1] < dayMap.get(x[0])) {
      // Map(day, top)
      dayMap.set(x[0], x[1]);
    }
  });

  Map.prototype.forEach.call(dayMap, (top, day) => {

    Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {

      if (!td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {

        td.innerHTML = createAnchor((top - lMainContentsUlTop - DELTA), day);

        return true;
      }
    });
  });
};


// SCHEDULE
const doProcessMedia = (lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor) => {

  const today = now.getDate();

  lMainContentsUl.scroll(0, 0);

  let isScrolled = false;

  Array.prototype.forEach.call(document.getElementsByClassName("c-schedule__date--list"), (dayElem) => {

    // 日付(innerText)の文字列 '(日付)\n(曜日)' から日付を抽出
    let day = ((x) => {return parseInt(x.substr(0, x.indexOf(`\n`)));})(dayElem.innerText);

    Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {

      if ( !td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {

        td.innerHTML = createAnchor((dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA), day);

        return true;
      }
    });

    // 表示スケジュールが当月の場合
    if (dispYearMonth === nowYearMonth) {
      // 過去日
      if (day < today) {

        dayElem.parentElement.classList.add("schedule__list-pastday");

        // 「今日」（ページを表示した日付）
      } else if (day === today) {

        dayElem.classList.add("schedule__date-today");
        dayElem.parentElement.classList.add("schedule__list-today");
      }

      if (day >= today) {

        dayElem.parentElement.classList.add("schedule__list-future");

        if (!isScrolled) {
          // 「今日」以降（「今日」を含めて）で最早のスケジュール日要素にスクロール
          lMainContentsUl.scroll({

            top: dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA,
            behavior: "smooth"
          });

          isScrolled = true;
        }
      }
    }
  });
};

/*
 * "ディスコグラフィー"向けリリース年リストを画面に配置する
 */
const setReleaseYear4Disco = () => {
  const releaseYearSelector = '.c-disco__year';

  let navText = `<header class="header" role="banner" style="z-index: 1000;">
                   <nav class="nav">
                     <div class="release">RELEASE<br/>YEAR</div>
                     <ul class="nav-list">`;

  Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {

    const year = x.innerText;
    const id_year = "y_" + year;
    x.parentNode.setAttribute("id", id_year);
    navText += `<li><a class="rel_year">${year}</a></li>`;
  });

  navText += `</ul>
      </nav>
    </header>`;

  const main = document.querySelector('.l-main');
  main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  main.insertAdjacentHTML('afterbegin', navText);

  setTimeout(() => {

    const header = document.querySelector('header');
    const nav = document.querySelector('.nav');
    const navHeight = nav.clientHeight;

    window.onscroll = () => {

      if (window.pageYOffset >= header.clientHeight) {
        nav.classList.add('fixed');
        main.setAttribute('style', 'padding-top:' + navHeight + 'px');
      } else {
        nav.classList.remove('fixed');
        main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
      }
    };

    const latestYear = document.querySelector(releaseYearSelector);

    const scrollTop = latestYear.parentNode.getBoundingClientRect().top;

    // スクロール位置リセット 〜「再読み込み」ボタン押下時の位置ズレ対応
    scrollTo(0, 0);

    // リスト位置までページ内で縦スクロール
    scrollTo({
      top: scrollTop,
      behavior: "smooth"
    });

    Array.prototype.forEach.call(document.querySelectorAll('.rel_year'), (x, i) => {
      const year = x.innerText;

      const yearElement = document.getElementById("y_" + year);
      const top = yearElement.getBoundingClientRect().top;
      x.setAttribute("href", `javascript:scrollTo({top:${top}, behavior:'smooth'});`);
    });

  }, 100);
};

/*
 * ディスコグラフィー
 */
const doProcessDiscography = () => {

  const styleText = `
      .fixed {
        width: 12rem;
        position: fixed;
        top: 60px;
        left: 40px;
        z-index: 1;
        font-size:larger;
      }
      .header {
        width: 100px;
      }
      .release {
        line-height: 20px;
      }
      .l-container {
        margin-top: -280px;
      }
      .c-disco__year {
        padding-top: 20px;
      }
      .c-disco__year {font-size: 4rem; width: 12rem;}
      .c-disco__category {font-size: 14px;}
      .p-page-head-sub--first {padding-top: 10px;}
      `;
  document.appendStyle(styleText);

  setReleaseYear4Disco();
};

/*
 * "フォーメーション"向けリリース年リストを画面に配置する
 */
const setReleaseYear4Formation = () => {

  const releaseYearSelector = '.c-page-subtitle';

  let navText = `<header class="header" role="banner" style="z-index: 1000;">
                   <nav class="nav">
                     <div class="release">RELEASE<br/>YEAR</div>
                     <ul class="nav-list">`;

  Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {

    const year = x.innerText;
    const id_year = "y_" + year;
    x.parentNode.setAttribute("id", id_year);
    navText += `<li><a href="#${id_year}">${year}</a></li>`;
  });

  navText += `</ul>
    </nav>
  </header>`;

  const main = document.querySelector('.l-main');
  main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  main.insertAdjacentHTML('afterbegin', navText);

  const header = document.querySelector('header');
  const nav = document.querySelector('.nav');
  const navHeight = nav.clientHeight;

  window.onscroll = () => {

    if (window.pageYOffset >= header.clientHeight) {
      nav.classList.add('fixed');
      main.setAttribute('style', 'padding-top:' + navHeight + 'px');
    } else {
      nav.classList.remove('fixed');
      main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
    }
  };

  const latestYear = document.querySelector(releaseYearSelector);
  const scrollTop = latestYear.parentNode.getBoundingClientRect().top;

  // スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
  scrollTo(0, 0);

  // リスト位置までページ内で縦スクロール
  scrollTo({
    top: scrollTop,
    behavior: "smooth"
  });
};

/*
 * フォーメーション
 */
const doProcessFormation = () => {

  const styleText = `
      .l-container {
        margin-top: -280px;
      }
      .formation_image :not(.small_f) li, small_f span {
        transition: transform 0.3s ease, z-index 0.3s ease;
        transform-origin: center center;
      }
      .formation_image :not(.small_f) li:hover, .small_f span:hover  {
        transform: scale(1.4, 1.4) translateZ(10px);
        z-index: 10;
      }       
      .formation_image li:hover i {
        font-size: 16px;
      }
      .formation_image li i {
        font-size: 14px;
      }
      .fixed {
        width: 12rem;
        position: fixed;
        top: 60px;
        left: 40px;
        z-index: 1;
        font-size:larger;
      }
      .release {
        line-height: 20px;
      }
      .p-page-head-sub--first {
        padding-top: 20px;
      }
      .p-page-head-sub {
        margin: 0px auto 0px auto;
      }
      .formation_list h4 {
        color: ${DEFAULT_BLUE};
        background-color: darkslateblue;
        font-size: 1.4em;
        font-weight: bold;
        padding: 0.3em 0.1em;
      }
      .formation_image li {
        margin: 0 15px;
      }
      .formation_image li span {
        width: 80px;
        height: 80px;
      }
      .formation_image li span:hover {
        box-shadow: 0px 0px 0px 3px ${DEFAULT_BLUE};
      }
      .formation_image li i {
        font-size: 1.2em;
        width: 130px;
        padding-left: 20px;
        shite-space: pre-line;
      }`;

  document.appendStyle(styleText);

  setReleaseYear4Formation();
};


// Blog

const getBackgroundImageUrl = (el) => {
  const bg = window.getComputedStyle(el).backgroundImage;
  const urlMatch = bg.match(/url\(["']?(.*?)["']?\)/);
  return urlMatch ? urlMatch[1] : null;
}

const parseColorToRGBArray = (colorStr) => {
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.fillStyle = '#000'; // 初期値

  // 無効な色文字列でも例外を出さないようにtry-catch
  try {
    ctx.fillStyle = colorStr;
  } catch (e) {
    return null;
  }

  // ブラウザが内部で解析したrgb(...)形式に変換されている
  const computed = ctx.fillStyle;
  // rgba形式を含めて正規化
  const match = computed.match(/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/i);

  if (!match) return null;

  return [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)];
};

/*
 * ヘッダータイトルのフォント色を返す
 * @param {number} r - red
 * @param {number} g - green
 * @param {number} b - blue
 * @param {number} threshold - 閾値
 */
const getHeaderFontColor = (r, g, b, threshold = 30) => {

  const defaultFontColor = parseColorToRGBArray(DEFAULT_BLUE);
  const default_R = defaultFontColor[0];
  const default_G = defaultFontColor[1];
  const default_B = defaultFontColor[2];

  const isNearlyDefault = r >= default_R - threshold && g >= default_G - threshold && b >= default_B - threshold;

  // ヘッダータイトルの背景画像の色がデフォルトのフォント色と近い場合
  if (isNearlyDefault) {
    const compR = 255 - default_R * 0.2;
    const compG = 255 - default_G * 0.2;
    const compB = 255 - default_B * 0.5;

    return `rgb(${compR}, ${compG}, ${compB})`;
  } else {
    return `rgb(${defaultFontColor[0]}, ${defaultFontColor[1]}, ${defaultFontColor[2]})`;
  }
};

const updateFontColorOnImage = (imageUrl, selector) => {
  const img = new Image();
  img.crossOrigin = "anonymous"; // CORS対策（必要）
  img.src = imageUrl;

  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;

    let r = 0, g = 0, b = 0, count = 0;
    for (let i = 0; i < data.length; i += 4) {
      r += data[i];
      g += data[i + 1];
      b += data[i + 2];
      count++;
    }

    r = Math.round(r / count);
    g = Math.round(g / count);
    b = Math.round(b / count);

    const baseColor = getHeaderFontColor(r, g, b);

    Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
      e.style.background = `linear-gradient(90deg, ${baseColor} 0%, white 20%, ${baseColor} 40%)`;
      e.style.cssText += `background-clip: text; -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;`
    });
  };

  img.onerror = () => {

    Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
      e.style.background = `linear-gradient(90deg, ${DEFAULT_BLUE} 0%, white 20%, ${DEFAULT_BLUE} 40%)`;
      e.style.cssText += `-webkit-background-clip: text;
      -webkit-text-fill-color: transparent;`
      e.style.color = "white";
    });
    console.error("画像の読み込みに失敗しました");
  };
};

const updateHeaderFontColor = (imgSelector, textSelector) => {
  const blogContainer = document.querySelector(imgSelector);

  const imageUrl = getBackgroundImageUrl(blogContainer);

  if (imageUrl) {
    updateFontColorOnImage(imageUrl, textSelector);
  }
}

/*
 * 五期生リレーブログの写真を設定
 */
const create5thRelayPhoto = () => {

  const relayPhoto = document.createElement('div');
  relayPhoto.classList.add("c-blog-member__icon");
  relayPhoto.style.backgroundImage = "url(https://cdn.hinatazaka46.com/images/14/fa2/dcd3c79b9d66efeed5a13af038129.jpg)";
  relayPhoto.style.backgroundSize = "cover";
  relayPhoto.style.backgroundPosition = "center";
  relayPhoto.style.backgroundRepeat = "no-repeat";
  relayPhoto.style.width = "220px";
  relayPhoto.style.height = "122px";
  relayPhoto.style.position = "relative";
  relayPhoto.style.zIndex = "2";

  return relayPhoto;
};

const scrollOnLoad = () => {
  // 半透明ヘッダーメニュー 高さ
  const headerHeight = document.querySelector(".p-header-wrap").offsetHeight;

  // スクロール位置リセット リロード時のズレ対応
  scrollTo(0, 0);

  // 文頭までスクロール
  scrollTo({
    top: document.querySelector(".p-blog-article__head").getBoundingClientRect().top - headerHeight,
    behavior: "smooth"
  });
}

/** ブログ */
const blogDetail = () => {

  const pBlogArticleHead = document.querySelector('.p-blog-article__head');

  document.appendStyle(`
    .p-blog-member__info .p-button:nth-child(4) {
      display: block;
    }
    .p-blog-member__info .p-button:nth-child(n + 5) {
      display: none;
    }   
    .p-blog-article {
      border-bottom: none;
    }
    .c-blog-article__title {
      --height: auto;
      height: var(--height);
      transition: height .3s ease-out;
    }
    .c-blog-article__title.open {
      height: var(--height);
      overflow: visible;
      white-space: wrap;
    }
    .c-blog-article__title.hidden {
      height: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis "… 🔽";
    }
    .c-blog-article__text {
      padding: 0 10px;
      overflow: scroll;
      border: none;
    }
    .p-pager {
      margin-top: 10px;
    }
    .p-button--center {
      padding-top: 0;
      margin-top: -20px;
    }`);

  const articleTitleDiv = document.querySelector('.c-blog-article__title');
  const height = articleTitleDiv.scrollHeight + 'px';

  articleTitleDiv.style.setProperty("--height", height);

  articleTitleDiv.style.marginBottom = "0px";
  articleTitleDiv.classList.add("hidden");

  setTimeout(() => {
    const articleHeight = document.documentElement.clientHeight - pBlogArticleHead.getBoundingClientRect().bottom + 20;

    document.querySelector('.c-blog-article__text').style.height = articleHeight + "px";

    if (articleTitleDiv.offsetWidth < articleTitleDiv.scrollWidth) {

      const articleTitle = articleTitleDiv.innerText;
      articleTitleDiv.innerText = articleTitle + "🔼";
      articleTitleDiv.style.cursor = "pointer";

      articleTitleDiv.addEventListener('click', function() {
        articleTitleDiv.classList.toggle("hidden");
        articleTitleDiv.classList.toggle("open");
      });
    }

    scrollOnLoad();
  }, 100);
};

/** 記事一覧 */
const blogList = () => {

  const blogGroupHeight = document.documentElement.clientHeight;

  const styleText = `
  .c-blog-member__icon--all {
    height: 60px;
  }
  .p-button {
    padding-top: 0;
  }
  .d-article {
    line-height: 20px;
    margin-bottom: 8px;
  }
  .s-member-icon {
    font-size: larger
  }
  .s-article-title {
    font-size: smaller;
  }
  .s-datetime {
    font-size: smaller;
  }
  .p-blog-group {
    height: ${blogGroupHeight - 60}px;
    overflow: scroll;
  .l-maincontents--blog {
    border: none;
  }
  .c-blog-article__title {
    margin-bottom: 0px;
  }`;

  document.appendStyle(styleText);

  const titleList = document.createElement('div');
  titleList.setAttribute("class", "s-blog__index");

  const memberName = document.querySelector('.c-blog-member__name');

  if (memberName) {
    if (memberName.innerText == "ポカ") {

      const profileTable = document.querySelector('.p-blog-member__info-table');
      profileTable.after(titleList);
    } else {

      const profileButton = document.querySelector('.p-button');
      profileButton.after(titleList);
    }
  // リレーブログ
  } else {
    const info = document.querySelector('.p-blog-member__info');
    info.after(titleList);
  }

  const createAnchor = (idx, datetime, icon, articleTitle) => `<div class="d-article"><a href="#article${idx}">
    <span class="s-member-icon">${icon}</span>
    <span class="s-article-title">${articleTitle}</span><br/><span class="s-datetime">${datetime}</span>
  </a></div>`;

  const lMainContentsBlogTop = document.querySelector('.l-maincontents--blog').getBoundingClientRect().top;

  Array.prototype.forEach.call(document.querySelectorAll('.p-blog-article'), (x, i) => {

    x.setAttribute('id', "article" + i);
    const datetimeDiv = x.childNodes[1].childNodes[3].childNodes[1];
    const datetime = datetimeDiv.firstChild.textContent.trim();
    const articleTitleDiv = x.childNodes[1].childNodes[1];
    const articleTitle = articleTitleDiv.firstChild.textContent.trim();
    // メンバー混合リストの場合があるので名前を取得
    const memberName = x.childNodes[1].childNodes[3].childNodes[3].innerText;
    
    let icon;

    switch(memberName) {
      case "ポカ":
        icon = HINATAZAKA46.DATA[0].icon;
        break;
      case "五期生リレー":
        icon = HINATAZAKA46.DATA[HINATAZAKA46.DATA.length - 1].icon;
        break;
      default:
        icon = HINATAZAKA46.DATA[parseInt(HINATAZAKA46.MEMBER[memberName])].icon;
    }

    titleList.insertAdjacentHTML('beforeend', createAnchor(i, datetime, icon, articleTitle));
  });

  shortenYearWithDay('.s-datetime');

  setTimeout(() => {
    document.querySelector('.p-blog-group').style.hight = "px";
    scrollOnLoad();
  }, 100);
};

const doProcessBlog = (blogPageType) => {

  const body = document.querySelector('body');

  // 内容が空のページ（卒業メンバーのブログなど）
  if (body.getElementsByTagName('*').length === 0) {
    body.innerHTML = 'This page is no longer available';
    return;
  }

  // ひなたフェス/握手会 は非メンバーブログ
  const isNotMemberBlog = (location.search).match(/(cd=hinafes_blog|cd=event)/g);

  if (isNotMemberBlog) {
    return;
  }

  if (isMobile()) {
    return;
  }

  updateHeaderFontColor('.p-blog-head-container', '.c-blog-page__title, .c-blog-page__subtitle, .c-blog-main__name, .c-blog__profilelink');

  // 画像直後のテキストが画像右隣への回り込むのを回避
  Array.prototype.forEach.call(document.querySelectorAll('.c-blog-article__text :not(div) > img'), (i) => {
    i.outerHTML = "<div>" + i.outerHTML + "</div>";
  });

  const faceSelector = '.p-blog-face__list';

  // 画面下部の顔写真
  Array.prototype.forEach.call(document.querySelectorAll(faceSelector), (x) => {
    x.addEventListener('mouseover', () => {

      x.children[1].style.color = getColorMode() === COLOR_MODE.DARK_COLOR ? `${DARK_FONT_CL}` : `${DEFAULT_FONT_CL}`;
    });
  });

  Array.prototype.forEach.call(document.querySelectorAll(faceSelector), (x) => {
    x.addEventListener('mouseout', () => {

      x.children[1].style.color = `${DEFAULT_FONT_CL}`;
    });
  });

  const styleText_common = `
    .c-blog-face__item {
      transition: transform 0.3s ease, z-index 0.3s ease;
      transform-origin: center center;
    }
    .p-blog-face__list:hover > * {
      transform: scale(1.2, 1.2) translateZ(10px);
    }
    .p-blog-face__list:hover >.c-blog-face__item {
      box-shadow: 0px 0px 0px 3px ${DEFAULT_BLUE};
    }
    .c-blog-main__category {
      background-color: #5ca8d1;
    }
    .c-button-grad, .c-button-grad.c-button-grad--big {
      background: ${GREEN_BUTTON};
    }
    .c-button-grad.c-button-grad--big {
      min-width: 280px;
    }
  `;

  if (blogPageType == "blog_top") {

    ((x) => { if (x) { x.style.cursor = "pointer"; } })(document.querySelector('.js-select.sort'));

    document.appendStyle(styleText_common + `
    .l-contents {
      padding-bottom: 20px;
    }
    .c-blog-top__name {
      font-weight: bold;
      font-size: 2rem;
    }
    .c-blog-top__title,.c-blog-top__date {
      font-size: 1.2rem;
    }`);

    return;
  }

  const blogEntryItem = document.querySelector('.p-blog-entry__item');
  const blogEntryItemStyles = window.getComputedStyle(blogEntryItem, null);
  const blogEntryItemHeight = parseInt(blogEntryItemStyles.height.replace('px', ''));
  const blogEntryItemMarginBottom = parseInt(blogEntryItemStyles["margin-bottom"].replace('px', ''));
  const blogEntryItemHeightWithMargin = blogEntryItemHeight + blogEntryItemMarginBottom;
  
  const screenWidth = screen.width;
  const CONTENTS_WIDTH = Math.floor(screen.width * 0.1 * 0.9) * 10;
  const MAIN_CONTENTS_WIDTH = Math.floor(CONTENTS_WIDTH * 0.6) + "px";
  const OTHER_BLOG_LIST_WIDTH = Math.floor(CONTENTS_WIDTH * 0.22) + "px";

  const styleText = styleText_common + `
    .l-contents {
      width: ${CONTENTS_WIDTH}px;
    }
    .l-other-contents--blog {
      width: ${OTHER_BLOG_LIST_WIDTH};
      margin-top: -160px;
      padding-top: 20px;
      --bg-color: #ffffff;
      background-color: var(--bg-color);
    }
    .c-button-grad {
      padding: 6px 40px 6px 32px;
    }
    .l-other-contents--blog::after, .c-button-grad.c-button-grad--big::after {
      background-color: var(--bg-color);
    }
    .p-blog-head {
      padding-top: 0;
    }
    .c-blog-page__title {
      margin-bottom: 0;
    }
    .c-blog-member__icon {
      margin-bottom: 10px;
    }
    .p-blog-member__head {
      margin-bottom: 5px;
    }
    .c-blog-member__info-td__name {
      padding-bottom: 5px;
    }
    .s-blog__index {
      position: relative;
      z-index: 50;
      margin: 0 0 0 -50px;
      height: 160px;
      width: 290px;
      overflow: scroll;
    }
    .cale_table {
      margin-top: 0px;
    }
    .p-blog-article__head {
      background-color: #f6ffff;
      border: 1px solid #a0d8ef ;
      border-radius: 10px;
    }
    .c-blog-article__title {
      font-size: 2.5rem;
      line-height: 58px;
      color: #636767;
      background-color: #e0ffff;
      border-radius: 10px;
    }
    .c-blog-article__title, .c-blog-article__date {
      text-indent: 5px;
    }
    .l-maincontents--blog {
      width: ${MAIN_CONTENTS_WIDTH};
      margin-top:-160px;
      padding: 20px;
    }
    .l-contents--blog-list {
      padding-bottom: 0;
    }
    .c-blog-entry_area__title {
      margin-bottom: 2px;
    }
    .p-blog-group {
      border: solid 1px #32a1ce;
    }
    .p-blog-article {
      padding-bottom: 0;
      margin-bottom: 0;
    }
    .p-blog-article__info {
      margin-bottom: 5px;
    }
    .c-pager__item__text time {
      font-size: 1.4rem;
    }
    .p-button--center {
      padding: 0;
    }
    .p-blog-face__title {
      margin-bottom: 10px;
    }
    .p-blog-face__group {
      padding-top: 20px;
    }
    .p-blog-entry__group {
      padding-bottom: 0;
      width: ${OTHER_BLOG_LIST_WIDTH};
    }
    .p-blog-entry__list {
      height: ${blogEntryItemHeightWithMargin * 3}px;
      width: ${OTHER_BLOG_LIST_WIDTH};
      overflow: scroll;
      border: none;
      margin-bottom: 20px;
    }
    .c-blog-entry__name {
      font-size: 1.3rem;
    }`;

  document.appendStyle(styleText);

  shortenYearWithDay('.c-blog-article__date time');
  shortenYearWithDay('.c-blog-entry__name');
  shortenYearWithDay('.c-pager__item__text time');

  setModalEvent('.c-blog-article__text img');

  const memberIcon = document.querySelector('.c-blog-member__icon');

  if (! memberIcon) {
    const info = document.querySelector('.p-blog-member__info');
    const relayPhoto = create5thRelayPhoto();
    info.prepend(relayPhoto);
  }

  switch (blogPageType) {
    case "blog_detail":
      blogDetail();
      break;
    case "blog_list":
      blogList();
      break;
    default:
      throw new Error(PAGE_TYPE_ERROR_MSG);
  }
};

const doProcessEvent = () => {
  updateHeaderFontColor('.p-section--shakehands', '.c-shakehands-calender.pc, .c-shakehands-calender.pc a');
};

const doProcessFc = () => {
  const styleText = `
    .fc-logo {
      padding: 15px;
    }`;
  document.appendStyle(styleText);
};