☰

hinatazaka46-lookandfeel

日向坂46 ルックアンドフィール

此脚本不应直接安装，它是供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.greasyforks.org/scripts/532855/1594533/hinatazaka46-lookandfeel.js 

// ==UserScript==
// @name        hinatazaka46-lookandfeel
// @namespace   https://greasyforks.org/ja/users/1328592-naoqv
// @description  日向坂46 ルックアンドフィール
// @version     0.28
// @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==

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

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, doBackgroundGradient = true) => {
  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":
      shortenYear('.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 = '#8babab';
          x.children[1].children[2].style.color = '#8babab';
        });
      });

      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 = '#8babab';
        });
      });
      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 = '#8babab';
        });
      });
      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 = `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=`;
const HINATAZAKA46 = JSON.parse(LZString.decompressFromBase64(COMPRESSED));

const CURRENT_MEMBERS = [];

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);
  //console.log(new XMLSerializer().serializeToString(fragment));
  return fragment;
};

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

const createMember = (number, memberName, memberKana, imgUrl, linkUrl) => {

  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);
  
  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);

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

const doProcessMember = () => {

  const generations = {};
  
  Array.prototype.forEach.call(Object.keys(HINATAZAKA46.DATA), (n) => {
    const member = HINATAZAKA46.DATA[n];
    
    if (member.end) {
      if (! generations[member.gen]) {
        generations[member.gen] = createGeneration(member.gen);
      }
      genTree = generations[member.gen];
      const list = genTree.querySelector('.p-member__list');

      list.appendChild(createMember(n, member.nm, member.kn, member.img, member.lnk));
    }
  });
  
  const memberList = document.querySelector('.sorted.sort-default.current');
  
  Array.prototype.forEach.call(Object.values(generations), (g) => {
    memberList.appendChild(g);
  });

  document.appendStyle(`
    .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);
    }
    .p-member__item {
      display: block;
    }
    .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;
    }`
  );

  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-section {
        z-index: 100;
      }
      .p-button--center {
        padding-top: 0;
      }
      .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);
      }`);

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

  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;
      }
      .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;
      }`;

  document.appendStyle(styleText);

  setReleaseYear4Formation();
};


// Blog

/** yyyy → 'yy */
const shortenYear = (x) => {
  Array.prototype.forEach.call(document.querySelectorAll(x), (y) => {
    const text = y.innerText;
    y.innerText = "'" + text.replace(/\d{2}(\d{2}\.)/, '$1');
  });
};


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

/*
 * パタメータのrgb要素から補色を生成して返す
 * ただしパラメータの色が白に近い場合は#202040(青)、黒に近い場合は#eeeeeeを返す
 * @param {number} r - red
 * @param {number} g - green
 * @param {number} b - blue
 * @param {number} threshold - 閾値
 */
const getComplementaryColor = (r, g, b, threshold = 30) => {

  const isNearlyWhite = r >= 255 - threshold && g >= 255 - threshold && b >= 255 - threshold;

  if (isNearlyWhite) {
    return '#202040';
  }

  const isNearlyBlack = r <= threshold && g <= threshold && b <= threshold;

  if (isNearlyBlack) {
    return '#eeeeee';
  }

  // 通常の補色
  const compR = 255 - r;
  const compG = 255 - g;
  const compB = 255 - b;

  return `rgb(${compR}, ${compG}, ${compB})`;
};

const updateFontColorOnImage = (selector, imageUrl) => {
  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);

    Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
      e.style.color = getComplementaryColor(r, g, b);
    });
  };

  img.onerror = () => {
    console.error("画像の読み込みに失敗しました");
  };
};

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

  const imageUrl = getBackgroundImageUrl(blogContainer);

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


/*
 * 五期生リレーブログの写真を設定
 */
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-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: 58px;
      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;
    }
    .c-button-grad.c-button-grad--big {
      min-width: 280px;
    }`);

  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);

  shortenYear('.c-blog-article__date');

  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;
    const icon = HINATAZAKA46.DATA[HINATAZAKA46.MEMBER[memberName]].icon;

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

  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');

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

  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;
    }`);

    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: 10px;
    }
    .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-face__list {
      width: 122px;
      height: 162px;
    }
    .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);

  shortenYear('.c-blog-article__date time');
  shortenYear('.c-blog-entry__name');
  shortenYear('.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);
};
长期地址
遇到问题？请前往 GitHub 提 Issues。