☰

Greasy Fork is available in English.

hinatazaka46-lookandfeel

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

بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greatest.deepsurf.us/scripts/532855/1588275/hinatazaka46-lookandfeel.js 

  1. // ==UserScript==
  2. // @name        hinatazaka46-lookandfeel
  3. // @namespace   https://greatest.deepsurf.us/ja/users/1328592-naoqv
  4. // @description  日向坂46 ルックアンドフィール
  5. // @version     0.23
  6. // @require     https://cdn.jsdelivr.net/npm/lz-string@1.5.0/libs/lz-string.min.js
  7. // @icon        https://cdn.hinatazaka46.com/files/14/hinata/img/favicons/favicon-32x32.png
  8. // @compatible  chrome
  9. // @compatible  firefox
  10. // @grant       none
  11. // @license     MIT
  12. // ==/UserScript==
  13.  
  14. const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
  15.  
  16. const isMobile = () => {
  17.   const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  18.   const mobileRegex = /Android|iPhone|iPad|iPod|BlackBerry|Windows Phone|Opera Mini|IEMobile/i;
  19.  
  20.   return mobileRegex.test(userAgent) || window.matchMedia("only screen and (max-width: 768px)").matches;
  21. }
  22.  
  23. /*
  24.  * inlineスタイルを適用
  25.  * @param {string} styleText - スタイル定義
  26.  */
  27. document.appendStyle = (styleText) => {
  28.   const styleElem = document.createElement("style");
  29.   styleElem.setAttribute("rel", "stylesheet");
  30.   styleElem.textContent = styleText;
  31.   document.head.appendChild(styleElem);
  32. };
  33.  
  34. /*
  35.  * スクロールダウン時にメニューバー細める
  36.  */
  37. const slimDownMenuBar = () => {
  38.   const styleElem = document.createElement("style");
  39.   styleElem.setAttribute("rel", "stylesheet");
  40.   const styleText = `.l-header {
  41.     height: 55px;
  42.   }
  43.   .p-header-wrap.is-fixed .p-header {
  44.     height: 30px;
  45.   }
  46.   .c-header__logo {
  47.     top: 5px;
  48.     width: 155px;
  49.   }
  50.   .p-header.p-header__in {
  51.     height: 60px;
  52.     position: relative;
  53.   }
  54.   nav.p-menu.p-menu--pc {
  55.     position: absolute;
  56.     top: 50%;
  57.     transform: translateY(-50%); 
  58.   }`;
  59.   styleElem.textContent = styleText;
  60.   document.head.appendChild(styleElem);
  61. };
  62.  
  63. const COLOR_MODE = {DEFAULT_COLOR: "0", DARK_COLOR: "1"};
  64.  
  65. /**
  66.  * カラーモードを取得
  67.  * @returns {string} カラーモード
  68.  */
  69. const getColorMode = () => {
  70.   const currentMode = CookieUtils.getCookie('color_mode');
  71.   if (! currentMode) {
  72.     CookieUtils.setCookie('color_mode', COLOR_MODE.DEFALULT_COLOR);
  73.     return COLOR_MODE.DEFALULT_COLOR;
  74.   }
  75.   return currentMode;
  76. }
  77.  
  78. /**
  79.  * カラーモードを設定
  80.  * @param {string} mode - カラーモード
  81.  */
  82. const setColorMode = (mode) => {
  83.   if (mode !== COLOR_MODE.DEFAULT_COLOR && mode !== COLOR_MODE.DARK_COLOR) {
  84.     throw new Error("Illegal parameter error. [HinatazakaSigthtStyleUtils#setColorMode]");
  85.   }
  86.   CookieUtils.setCookie('color_mode', mode);
  87. };
  88.  
  89. /**
  90.  *　カラーモードを切り替える
  91.  * @returns {string} 切り替え後のカラーモード
  92.  */
  93. const toggleColorMode = () => {
  94.   const mode = ((parseInt(getColorMode()) + 1) % 2).toString();
  95.   setColorMode(mode);
  96.   return mode;
  97. };
  98.  
  99.  
  100. const DEFAULT_FONT_CL = "#8babab";
  101. const DEFAULT_TITLE_FONT_CL ="#abbaba";
  102.  
  103. const DARK_FONT_CL   = "#eeeeee";
  104. const DARK_BG_CL     = "#202040";
  105. const DARK_MENU_CL   = "#404070";
  106. const DARK_SVG_CL    = "#eeeeee";
  107. const DARK_IMG_BG_CL = "#eeeeee";
  108.  
  109. const HOVER_BG_UPPER_CL = "#5bbee4";
  110. const HOVER_BG_LOWER_CL = "#ebf4f7";
  111. const HOVER_BORDER_CL   = "#5BBEE4";
  112.  
  113. const DARK_HOVER_BG_UPPER_CL = "#20cccc";
  114. const DARK_HOVER_BG_LOWER_CL = "#202050";
  115. const DARK_PAST_BG_CL = "#303040";
  116.  
  117. const DARK_TODAY_UPPER_CL  = "#30aaaa";
  118. const DARK_TODAY_LOWER_CL  = "#303050";
  119. const DARK_HOVER_BORDER_CL = "#79fcfc";
  120.  
  121. const DARK_STRONG_FONT_CL = 'crimson';
  122. const DARK_STRONG_BG_CL   = 'aquamarine';
  123. const DARK_FC_TEXT_CL     = 'rgb(99, 103, 103)';
  124.  
  125. const KEY_BACKGROUND = "backGround";
  126. const KEY_MENUBAR    = "manuBar";
  127. const KEY_BREADCRUMB = "breadcrumb";
  128. const KEY_LIST       = "list";
  129. const KEY_ARTICLE    = "article";
  130. const KEY_PASTDAY    = "pastday";
  131. const KEY_TODAY      = "today";
  132. const KEY_MEMBER_PROP = "memberProp";
  133. const KEY_SVG_PATH   = "svgPath";
  134. const KEY_BLOG       = "blog";
  135. const KEY_STRONG     = "strong";
  136. const KEY_DISCO      = "disco";
  137. const KEY_AFTER      = "after";
  138. const KEY_BIOGRAPHY  = "biography";
  139. const KEY_FC_LOGO    = "fc_logo";
  140. const KEY_FC_TEXT    = "fc_text";
  141.  
  142. const KEYS = [KEY_BACKGROUND, KEY_MENUBAR, KEY_BREADCRUMB, KEY_LIST, KEY_ARTICLE,
  143.               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];
  144.  
  145. const SELECTOR_DIC = {};
  146. SELECTOR_DIC[KEY_BACKGROUND]  = '.pages, .module-modal.js-member-filter .mordal-box, .l-container, .schedule__list-future';
  147. SELECTOR_DIC[KEY_MENUBAR]     = '.l-header, .p-header-wrap, .p-header-wrap.is-fixed';
  148. SELECTOR_DIC[KEY_BREADCRUMB]  = '.p-page-breadcrumb__list .c-page-breadcrumb__item:last-child span';
  149. SELECTOR_DIC[KEY_LIST]        = '.l-container, .p-news__list ';
  150. 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';
  151. SELECTOR_DIC[KEY_PASTDAY]     = '.schedule__list-pastday';
  152. SELECTOR_DIC[KEY_TODAY]       = '.schedule__list-today';
  153. 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';
  154. SELECTOR_DIC[KEY_SVG_PATH]    = '.c-member__info-td__text a svg path';
  155. 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';
  156. SELECTOR_DIC[KEY_STRONG]      = '.p-article__text strong span, .p-article__text span strong';
  157. 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';
  158. SELECTOR_DIC[KEY_AFTER]       = '.l-other-contents--blog';
  159. SELECTOR_DIC[KEY_BIOGRAPHY]   = '.p-biography__text';
  160. SELECTOR_DIC[KEY_FC_LOGO]     = '.fc-logo';
  161. SELECTOR_DIC[KEY_FC_TEXT]     = '.fc-contents .text';
  162.  
  163. const CSS_DIC = {};
  164. CSS_DIC[KEY_BACKGROUND]  = new Array('background-color');
  165. CSS_DIC[KEY_MENUBAR]     = new Array('background-color');
  166. CSS_DIC[KEY_BREADCRUMB]  = new Array('color');
  167. CSS_DIC[KEY_LIST]        = new Array('color');
  168. CSS_DIC[KEY_ARTICLE]     = new Array('color');
  169. CSS_DIC[KEY_PASTDAY]     = new Array('background-color');
  170. CSS_DIC[KEY_TODAY]       = new Array('background');
  171. CSS_DIC[KEY_MEMBER_PROP] = new Array('color');
  172. CSS_DIC[KEY_SVG_PATH]    = new Array('fill');
  173. CSS_DIC[KEY_BLOG]        = new Array('color', 'background-color');
  174. CSS_DIC[KEY_STRONG]      = new Array('color', 'background-color');
  175. CSS_DIC[KEY_DISCO]       = new Array('color');
  176. CSS_DIC[KEY_AFTER]       = new Array('color', '--bg-color');
  177. CSS_DIC[KEY_BIOGRAPHY]   = new Array('color');
  178. CSS_DIC[KEY_FC_LOGO]     = new Array('background-color');
  179. CSS_DIC[KEY_FC_TEXT]     = new Array('color');
  180.  
  181. const DEFAULT_COLOR_CONFIG = {};
  182.  
  183. const DARK_COLOR_CONFIG = {};
  184. DARK_COLOR_CONFIG[KEY_BACKGROUND]  = {"background-color": DARK_BG_CL};
  185. DARK_COLOR_CONFIG[KEY_MENUBAR]     = {"background-color": DARK_MENU_CL};
  186. DARK_COLOR_CONFIG[KEY_BREADCRUMB]  = {"color": DARK_FONT_CL};
  187. DARK_COLOR_CONFIG[KEY_LIST]        = {"color": DARK_FONT_CL};
  188. DARK_COLOR_CONFIG[KEY_ARTICLE]     = {"color": DARK_FONT_CL};
  189. DARK_COLOR_CONFIG[KEY_PASTDAY]     = {"background-color": DARK_PAST_BG_CL};
  190. DARK_COLOR_CONFIG[KEY_TODAY]       = {"background": `linear-gradient(${DARK_TODAY_UPPER_CL}, 10%, ${DARK_TODAY_LOWER_CL})`};
  191. DARK_COLOR_CONFIG[KEY_MEMBER_PROP] = {"color": DARK_FONT_CL};
  192. DARK_COLOR_CONFIG[KEY_SVG_PATH]    = {"fill": DARK_SVG_CL};
  193. DARK_COLOR_CONFIG[KEY_BLOG]        = {"color": DARK_FONT_CL, "background-color": DARK_BG_CL};
  194. DARK_COLOR_CONFIG[KEY_STRONG]      = {"color": DARK_STRONG_FONT_CL, "background-color": DARK_STRONG_BG_CL};
  195. DARK_COLOR_CONFIG[KEY_DISCO]       = {"color": DARK_FONT_CL};
  196. DARK_COLOR_CONFIG[KEY_AFTER]       = {"color": DARK_FONT_CL, "--bg-color": DARK_BG_CL};
  197. DARK_COLOR_CONFIG[KEY_BIOGRAPHY]   = {"color": DARK_FONT_CL};
  198. DARK_COLOR_CONFIG[KEY_FC_LOGO]     = {"background-color": DARK_IMG_BG_CL};
  199. DARK_COLOR_CONFIG[KEY_FC_TEXT]     = {"color": DARK_FC_TEXT_CL};
  200.  
  201. const COLOR_CONFIGS = [DEFAULT_COLOR_CONFIG, DARK_COLOR_CONFIG];
  202.  
  203. /*
  204.  * cssプロパティの値を取得
  205.  * @param {string} selector - cssセレクタ
  206.  * @param {string} cssProperty - cssプロパティ名
  207.  * @return {string} cssプロパティの値
  208.  */
  209. const getSelectorStyle = (selector, cssProperty) => 
  210.   (((element, cssProperty) => (element != null) ? getComputedStyle(element).getPropertyValue(cssProperty) : 'rgb(0, 0, 0)')(document.querySelector(selector), cssProperty));
  211.  
  212.  
  213. const getBeforeFirstComma = (str) => {
  214.     const index = str.indexOf(",");
  215.     return index !== -1 ? str.slice(0, index) : str;
  216. };
  217.  
  218. const analyzeDefaultColor = () => {
  219.  
  220.   Array.prototype.forEach.call(KEYS, (k) => {
  221.     DEFAULT_COLOR_CONFIG[k] = {};
  222.     Array.prototype.forEach.call(CSS_DIC[k], (c) => {
  223.       DEFAULT_COLOR_CONFIG[k][c] = getSelectorStyle(getBeforeFirstComma(SELECTOR_DIC[k]), c);
  224.     });
  225.   });
  226. };
  227.  
  228.  
  229. const setMenuFontColor = (selector, originColor = '#8cc8d1') => {     
  230.  
  231.   Array.prototype.forEach.call(document.querySelectorAll(selector), (x) => {     
  232.  
  233.     x.addEventListener('mouseover', () => {
  234.  
  235.       if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  236.         x.style.color = '#e0ffff';
  237.       } else {
  238.         x.style.color = '#5d5d5d';
  239.       }
  240.     });
  241.  
  242.     x.addEventListener('mouseout', () => {
  243.       x.style.color = originColor;
  244.     });
  245.   });
  246. };
  247.  
  248. const setHoveredFontColor = (itemSelector, titleSelector, datetimeSelector) => {
  249.   Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
  250.     x.addEventListener('mouseover', () => {
  251.  
  252.       if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  253.  
  254.         x.querySelector(titleSelector).style.color = `${DARK_FONT_CL}`;
  255.         const datetime = x.querySelector(datetimeSelector);
  256.         if (datetime) { datetime.style.color =  `${DARK_FONT_CL}`;}
  257.       } else {
  258.  
  259.         x.querySelector(titleSelector).style.color = `${DEFAULT_FONT_CL}`;
  260.         const datetime = x.querySelector(datetimeSelector);
  261.         if (datetime) { datetime.style.color =  `${DEFAULT_FONT_CL}`;}
  262.       }
  263.     });
  264.   });
  265.  
  266.   Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
  267.     x.addEventListener('mouseout', () => {
  268.  
  269.       x.querySelector(titleSelector).style.color = `${DEFAULT_TITLE_FONT_CL}`;
  270.       const datetime = x.querySelector(datetimeSelector);
  271.       if (datetime) { datetime.style.color =  `${DEFAULT_FONT_CL}`;}
  272.     });
  273.   });
  274. };
  275.  
  276. const setHoveredFontAndBgColor = (itemSelector, textSelector, doBackgroundGradient = true) => {
  277.   Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
  278.     x.addEventListener('mouseover', () => {
  279.  
  280.       if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  281.         x.style.background = `linear-gradient(${DARK_HOVER_BG_UPPER_CL}, 20%, ${DARK_HOVER_BG_LOWER_CL})`;
  282.         x.style.outline = `1px solid ${DARK_HOVER_BORDER_CL}`
  283.  
  284.         x.style.color = `${DARK_FONT_CL}`;
  285.         x.children[0].style.color = `${DARK_FONT_CL}`;
  286.         const text = x.querySelector(textSelector);
  287.         if (text) { text.style.color =  `${DARK_FONT_CL}`;}
  288.       } else {
  289.         x.style.background = `linear-gradient(${HOVER_BG_UPPER_CL}, 20%, ${HOVER_BG_LOWER_CL})`;
  290.         x.style.outline = `1px solid ${HOVER_BORDER_CL}`
  291.  
  292.         x.style.color = `${DEFAULT_FONT_CL}`;
  293.         x.children[0].style.color = `${DEFAULT_FONT_CL}`;
  294.         const text = x.querySelector(textSelector);
  295.         if (text) { text.style.color =  `${DEFAULT_FONT_CL}`;}
  296.       }
  297.     });
  298.   });
  299.  
  300.   Array.prototype.forEach.call(document.querySelectorAll(itemSelector), (x) => {
  301.     x.addEventListener('mouseout', () => {
  302.       x.style.background = `transparent`;
  303.       x.style.outline = `1px solid transparent`
  304.       x.style.color = `${DEFAULT_FONT_CL}`;
  305.       x.children[0].style.color = `${DEFAULT_FONT_CL}`;
  306.       const text = x.querySelector(textSelector);
  307.       if (text) { text.style.color =  `${DEFAULT_FONT_CL}`;}
  308.     });
  309.   });
  310. };
  311.  
  312. /*
  313.  * ページに対応した色設定を行う
  314.  * @param {string} pageType - ページ種類
  315.  * @param {string} colorMode - カラーモード
  316.  */
  317. const setColor = (pageType, colorMode) => {
  318.  
  319.   const configIndex = parseInt(colorMode);
  320.  
  321.   Array.prototype.forEach.call(KEYS, (k) => {
  322.     Array.prototype.forEach.call(document.querySelectorAll(SELECTOR_DIC[k]), (e) => {
  323.       Array.prototype.forEach.call(CSS_DIC[k], (c) => {
  324.         e.style.setProperty(c, COLOR_CONFIGS[configIndex][k][c]);
  325.       });
  326.     });
  327.   });
  328.  
  329.   // パンくずリスト
  330.   Array.prototype.forEach.call(document.querySelectorAll('.p-page-breadcrumb__list .c-page-breadcrumb__item:not(:last-child)'), (x) => {
  331.     x.addEventListener('mouseover', () => {
  332.  
  333.       if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  334.         x.children[0].style.color = "lightcyan";
  335.       } else {
  336.         x.children[0].style.color = '#5d5d5d';
  337.       }
  338.     });
  339.  
  340.     x.addEventListener('mouseout', () => {
  341.  
  342.       if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  343.         x.children[0].style.color = "lightcyan"; 
  344.       } else {
  345.         x.children[0].style.color = '#a9a9a9';
  346.       }
  347.     });
  348.   });
  349.  
  350.   switch (pageType) {
  351.     case "news":
  352.     case "media":
  353.       setMenuFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
  354.       setHoveredFontAndBgColor('.p-news__item, .p-other__item, .p-schedule__item', 'time');
  355.       break;
  356.     case "artist":
  357.       setHoveredFontAndBgColor('.p-news__item', '.c-news__date');
  358.       break;
  359.     case "diary/member":
  360.       shortenYear('.c-blog-main__date, .c-blog-top__date');
  361.       setHoveredFontColor('.p-blog-top__item', '.c-blog-top__title', '.c-blog-top__date');
  362.       break;
  363.     case "diary/detail":
  364.     case "diary/member/list":
  365.       setMenuFontColor('.cale_prev a, .cale_month a, .cale_next a, .cale_table tbody tr td a');
  366.       setHoveredFontAndBgColor('.p-blog-entry__item', '.c-blog-entry__title');
  367.       setHoveredFontAndBgColor('.d-article', '.s-article-title');
  368.       setHoveredFontAndBgColor('.c-pager__item__text', 'time');
  369.       break;
  370.  
  371.       // 動画
  372.     case "video":
  373.     case "contents":
  374.  
  375.       // 動画タイトル
  376.       Array.prototype.forEach.call(document.querySelectorAll('.p-video__item.p-video__item--medium'), (x) => {
  377.  
  378.  
  379.         x.addEventListener('mouseover', () => {
  380.  
  381.           if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  382.  
  383.             x.children[1].children[0].style.color = "lightcyan";
  384.           } else {
  385.             x.children[1].children[0].style.color = '#5d5d5d';
  386.           }
  387.         });
  388.  
  389.         x.addEventListener('mouseout', () => {
  390.  
  391.           x.children[1].children[0].style.color = '#a9a9a9';
  392.         });
  393.       });
  394.       break;
  395.     case "event":
  396.       Array.prototype.forEach.call(document.querySelectorAll('.p-shakehands__item'), (x) => {
  397.         x.addEventListener('mouseover', () => {
  398.  
  399.           if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  400.             x.children[1].children[1].style.color = "lightcyan";
  401.             x.children[1].children[2].style.color = "lightcyan";
  402.           } else {
  403.             x.children[1].children[1].style.color = '#5d5d5d';
  404.             x.children[1].children[2].style.color = '#5d5d5d';
  405.           }
  406.         });
  407.  
  408.         x.addEventListener('mouseout', () => {
  409.  
  410.           x.children[1].children[1].style.color = '#8babab';
  411.           x.children[1].children[2].style.color = '#8babab';
  412.         });
  413.       });
  414.       
  415.       Array.prototype.forEach.call(document.querySelectorAll('.p-other__item'), (x) => {
  416.          x.addEventListener('mouseover', () => {
  417.  
  418.           if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  419.             x.children[0].style.color = "lightcyan";
  420.           } else {
  421.             x.children[0].style.color = '#5d5d5d';
  422.           }
  423.         });
  424.  
  425.         x.addEventListener('mouseout', () => {
  426.  
  427.           x.children[0].style.color = '#8babab';
  428.         });     
  429.       });
  430.       Array.prototype.forEach.call(document.querySelectorAll('.c-pager__item--count a'), (x) => {
  431.          x.addEventListener('mouseover', () => {
  432.  
  433.           if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  434.             x.style.color = "lightcyan";
  435.           } else {
  436.             x.style.color = '#5d5d5d';
  437.           }
  438.         });
  439.  
  440.         x.addEventListener('mouseout', () => {
  441.  
  442.           x.style.color = '#8babab';
  443.         });     
  444.       });
  445.       break;
  446.     default:
  447.       ;
  448.   }
  449. };
  450.  
  451.  
  452. const leftPosition = (colorMode) => (colorMode === COLOR_MODE.DEFAULT_COLOR) ? "-3px" : "36px";
  453.  
  454. /**
  455.  * カラーモードトグルのスイッチボタンを生成
  456.  * @param {COLOR_MODE} colorMode 
  457.  * @returns 
  458.  */
  459. const createSwitchButton = (colorMode) => {
  460.   
  461.   const switchButton = document.createElement('div');
  462.   switchButton.classList.add("switch_button");
  463.   const left = leftPosition(colorMode);
  464.  
  465.   switchButton.style.cssText
  466.     = `left: ${left};
  467.       margin-top: -5px;
  468.       width: 24px;
  469.       height: 24px;
  470.       border-radius: 50%;
  471.       position: absolute;    
  472.       background-color: white;
  473.       box-shadow: 1px 1px 7px #B7B7B7, -1px -1px 4px #CECECE inset;
  474.       transition: left .3s ease-in-out;`;
  475.  
  476.   return switchButton;
  477. };
  478.  
  479.  
  480. const initializeColorToggle = (colorMode) => {
  481.  
  482.   const menuList = document.querySelector('.p-menu__list');
  483.  
  484.   if (menuList && !document.querySelector('.color_toggle')) {
  485.     const colorToggle = document.createElement('div');
  486.     colorToggle.classList.add("color_toggle");
  487.     menuList.appendChild(colorToggle);
  488.  
  489.     colorToggle.style.cssText
  490.       = `margin-top: 2px;
  491.         margin-left: 16px;
  492.         width: 60px;
  493.         height: 18px;
  494.         border: solid 2px gray;
  495.         border-radius: calc(infinity * 1px);
  496.         background: linear-gradient(to right, #fff 0%, #fefefe 30%, #606080 70%, #404060 80%, #202040 100%);
  497.         position: relative;
  498.         cursor: pointer;
  499.         transition: background-color .2s ease-in-out;`;
  500.  
  501.     const switchButton = createSwitchButton(colorMode);
  502.     
  503.     colorToggle.appendChild(switchButton);
  504.    
  505.     colorToggle.addEventListener("click", () => {
  506.       const colorMode = toggleColorMode();
  507.       switchButton.style.left = leftPosition(colorMode);
  508.       setColor(getPageType(), colorMode);
  509.     });
  510.     
  511.     return true;
  512.   } else {
  513.  
  514.     return false;
  515.   }
  516. };
  517.  
  518.  
  519. const doProcessList = (func) => {
  520.   
  521.   const isDetail = ((location.href).match(new RegExp('\/detail\/')) != null);
  522.  
  523.   if (isDetail) {
  524.     return;
  525.   }
  526.  
  527.   const PAGE_TYPE_ERROR_MSG = "Processing of out-of-scope pages. Check the settings @match.";
  528.  
  529.   const pageType = (location.href).match(new RegExp('\/(media|news)\/'))[1];
  530.   
  531.   if (! pageType) {
  532.     throw new Error(PAGE_TYPE_ERROR_MSG);
  533.   }
  534.  
  535.   const SELECTORS = ((x) => {
  536.       switch (x) {
  537.         case "news":
  538.           return {"pArrow": ".p-news__pager-arrow",
  539.               "cArrowLeft": ".c-news_pager-arrow--left",
  540.                 "cArrowRight" : ".c-news_pager-arrow--right",
  541.                 "cPageMonth": ".c-news__page_month",
  542.                 "cPageYear": ".c-news__page_year",
  543.                 "lMainContentsUl": ".l-maincontents--news ul",
  544.                 "pDate": ".p-news__page_date",
  545.                 "lSubContents": ".l-sub-contents--news"};
  546.         case "media":
  547.           return {"pArrow": ".p-schedule__pager-arrow",
  548.               "cArrowLeft": ".c-schedule_pager-arrow--left",
  549.                 "cArrowRight" : ".c-schedule_pager-arrow--right",
  550.                 "cPageMonth": ".c-schedule__page_month",
  551.                 "cPageYear": ".c-schedule__page_year",
  552.                 "lMainContentsUl": ".l-maincontents--schedule ul",
  553.                 "pDate": ".p-schedule__page_date",
  554.                 "lSubContents": ".l-sub-contents--schedule"};
  555.         default:
  556.             throw new Error(PAGE_TYPE_ERROR_MSG);
  557.       }
  558.   })(pageType);
  559.  
  560.   const pageYear = ((y) => {return (y === null || y === undefined) ? null : y.innerText;})(document.querySelector(SELECTORS['cPageYear']));
  561.  
  562.   const now = new Date();
  563.  
  564.   // "年"の表示がない場合
  565.   if (pageYear !== "年") {
  566.  
  567.     const daysOfWeek = ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'Sa'];
  568.     const year = now.getFullYear();
  569.     const month = now.getMonth() + 1;
  570.     // 月初
  571.     const first = new Date(year, month - 1, 1);
  572.     // 月末
  573.     const end = new Date(year, month,  0);
  574.     // 月末の日
  575.     const endDate = end.getDate();
  576.     // 前月末
  577.     const endPrevMonth = new Date(year, month - 1, 0);
  578.     // 前月末の日
  579.     const endDatePrevMonth = endPrevMonth.getDate();
  580.     // 月初の曜日
  581.     const firstDayOfWeek = first.getDay();
  582.  
  583.     let numOfDay = 1;
  584.     let calendarHtml = '';
  585.  
  586.     const pageMonth = ((m) => {return m !== null ? m.innerText : "";})(document.querySelector(SELECTORS['cPageMonth']));
  587.  
  588.     const leftArrowHref = document.querySelector(SELECTORS['cArrowLeft']).children[0].href;
  589.     const rightArrowHref = document.querySelector(SELECTORS['cArrowRight']).children[0].href;
  590.  
  591.     calendarHtml += '<table class="cale_table" style="width: 210px; margin: -130px 0 20px -50px;">';
  592.     calendarHtml += `<tr><td></td><td class="cale_prev"><a id="cale_prev" href="${leftArrowHref}">＜</a></td>
  593.           <td class="cale_month" colspan="3">${pageYear}&#160;${pageMonth}</td><td class="cale_next"><a href="${rightArrowHref}">＞</a></td><td></td></tr>`;
  594.  
  595.     calendarHtml += '<tr>';
  596.  
  597.     for (let i = 0; i < daysOfWeek.length; i++) {
  598.       calendarHtml += '<td class="cale_wek' + i + '">' + daysOfWeek[i] + '</td>';
  599.     }
  600.  
  601.     calendarHtml += '</tr>';
  602.  
  603.     for (let w = 0; w < 6; w++) {
  604.       calendarHtml += '<tr>'
  605.  
  606.       for (let d = 0; d < 7; d++) {
  607.         if (w == 0 && d < firstDayOfWeek) {
  608.           // 前月
  609.           let num = endDatePrevMonth - firstDayOfWeek + d + 1;
  610.           calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
  611.         } else if (numOfDay > endDate) {
  612.           // 次月
  613.           let num = numOfDay - endDate;
  614.           calendarHtml += '<td class="cale_day' + d + ' is-disabled">' + num + '</td>';
  615.           numOfDay++;
  616.           w = 99; // カレンダーの最下端が次月の日付のみになるのを防止
  617.         } else {
  618.           calendarHtml += '<td class="cale_day' + d + '">' + numOfDay + '</td>';
  619.           numOfDay++;
  620.         }
  621.       }
  622.       calendarHtml += '</tr>'
  623.     }
  624.  
  625.     calendarHtml += '</table>';
  626.  
  627.     document.querySelector(SELECTORS["lSubContents"]).insertAdjacentHTML('afterbegin', calendarHtml);
  628.   }
  629.  
  630.   // 選択カテゴリ（ALL / 握手会・・・）
  631.   const categorySelectorSuffix
  632.   = ((c) => {
  633.     let value = ""; 
  634.     if (c.length == 0) {
  635.       value = "all";
  636.     } else {
  637.       const tempValue = c[0].value;
  638.  
  639.       switch (tempValue) {
  640.         case "birthday":
  641.           value = "birth";
  642.           break;
  643.  
  644.         case "fanclub":
  645.           value = "fanclubonly";
  646.           break;
  647.  
  648.         default:
  649.           value = tempValue;
  650.       }
  651.     }
  652.  
  653.     return value;
  654.   })(document.getElementsByName("cd"));
  655.  
  656.   const categoryElem = document.querySelector('.c-button-category.category_' + categorySelectorSuffix);
  657.   const categoryStyles = window.getComputedStyle(categoryElem);
  658.   const categoryParent = categoryElem.parentElement;
  659.   categoryParent.style.marginLeft = "-5px";
  660.   categoryParent.style.paddingLeft = "4.5px";
  661.   categoryParent.style.marginRight = "40px";
  662.   categoryElem.style.color = `rgb(from ${categoryStyles.color} calc(r - 64) calc(g - 64) calc(b - 64))`;
  663.   categoryParent.style.backgroundColor = `rgb(from ${categoryStyles.color} calc(r + 64) calc(g + 64) calc(b + 64))`;
  664.   categoryParent.style.border = `solid 0.5px ${categoryElem.style.color}`;
  665.  
  666.   // 詳細ページの場合 処理を終了　
  667.   if (isDetail) {
  668.     return;
  669.   }
  670.  
  671.   /*
  672.    * フルブラウザ上ではNEWS/スケジュールが多い月は見づらいため
  673.    * 自動スクロール、表示色を追加設定
  674.    */
  675.  
  676.   const PAGER_MARGIN_TOP = 20;
  677.   const PASTDAY_BG_CL = "#ededf0";
  678.   const TODAY_DATE_CL = "orange";
  679.   const TODAY_BG_CL = "#fafeff";
  680.   const TODAY_BORDER_CL_UPPER = "#d7eeff";
  681.   const TODAY_BORDER_CL_LOWER = "#5bbee5";
  682.  
  683.   let styleText = `
  684.       .is-disabled {
  685.         color: silver;
  686.       }
  687.       .p-page-head {
  688.         padding-top: 20px;
  689.       }
  690.       .c-pager__item a svg {
  691.           fill: #7ab6db;
  692.       }
  693.       .schedule__list-pastday {
  694.         background-color: ${PASTDAY_BG_CL};
  695.       }
  696.       .schedule__list-today {
  697.         background-color: ${TODAY_BG_CL};
  698.         border: 2px solid;
  699.         border-image: linear-gradient(to right bottom, ${TODAY_BORDER_CL_UPPER}, ${TODAY_BORDER_CL_LOWER}) 1;
  700.       }
  701.       .schedule__date-today {
  702.         color: ${TODAY_DATE_CL};
  703.       }
  704.       .p-news__item, .p-schedule__item {
  705.         outline-offset: 1px;
  706.       }
  707.       .module-modal.js-member-filter .mordal-box .member-box ul li p.check input[type=checkbox]:checked+label:before {
  708.         background-color:#6bcaea;
  709.         border:1px solid #6bcaea;
  710.       }`;
  711.  
  712.   document.appendStyle(styleText);
  713.  
  714.   // リスト上方 "xxxx年 yy月" 行
  715.   const pDate = document.querySelector(SELECTORS["pDate"]);
  716.  
  717.   // "xxxx年" ではなく "年"のみの場合
  718.   if (pageYear === "年") {
  719.     const cPageYear = document.querySelector(SELECTORS["cPageYear"]);
  720.     cPageYear.innerText = String(now.getFullYear()) + "年";
  721.     cPageYear.style.fontSize = "4.8rem";
  722.     document.querySelector(SELECTORS["cPageMonth"]).remove();
  723.     document.querySelector(SELECTORS["pArrow"]).remove();
  724.   }
  725.  
  726.   pDate.style.marginBottom = "5px";
  727.  
  728.   // ニュース/スケジュール リスト
  729.   const lMainContentsUl = document.querySelector(SELECTORS["lMainContentsUl"]);
  730.  
  731.   const lMainContentsUlTop = lMainContentsUl.getBoundingClientRect().top;
  732.  
  733.   const pDateHeight = pDate.offsetHeight;
  734.  
  735.   // リスト下方 前月/次月ページャ
  736.   const pPager = document.querySelector(".p-pager");
  737.  
  738.   // "xxxx年" ではなく "年"のみの場合
  739.   if (pageYear === "年") {
  740.     pPager.innerText = "";
  741.  
  742.     pPager.style.marginTop = "0px";
  743.   } else {
  744.  
  745.     pPager.style.marginTop = `${PAGER_MARGIN_TOP}px`;
  746.   }
  747.  
  748.   const pPagerHeight = PAGER_MARGIN_TOP + pPager.offsetHeight;
  749.   const lMainContentsUlHeight = document.documentElement.clientHeight - pDateHeight - pPagerHeight; 
  750.  
  751.   // スクロール表示
  752.   lMainContentsUl.setAttribute("style", `height:${lMainContentsUlHeight}px; overflow: scroll; border: solid 1px #32a1ce;`);
  753.  
  754.   const scrollTop = lMainContentsUlTop - pDateHeight;
  755.  
  756.   // スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
  757.   scrollTo(0, 0);
  758.  
  759.   // リスト位置までページ内で縦スクロール
  760.   scrollTo({
  761.     top: scrollTop,
  762.     behavior: "smooth"
  763.   });
  764.  
  765.   const nowYearMonth = String(now.getFullYear()) + String(now.getMonth() + 1).padStart( 2, '0');
  766.   const dispYear = document.querySelector(SELECTORS['cPageYear']);
  767.   const dispMonth = document.querySelector(SELECTORS['cPageMonth']);
  768.  
  769.   // 表示対象の年月（ex.202404）を取得。設定がなければ当月
  770.   const dispYearMonth
  771.   = ((y, m) => {return (y == null || m == null) ? nowYearMonth : y.innerText.replace('年', '') + m.innerText.replace('月', '')})(dispYear, dispMonth);
  772.  
  773.   // NEWS/スケジュールが当月以前の月の場合
  774.   if (dispYearMonth < nowYearMonth) {
  775.  
  776.     lMainContentsUl.classList.add('schedule__list-pastday');
  777.   }
  778.   
  779.   const createAnchor = (y, d) => `<a href="javascript:document.querySelector('${SELECTORS['lMainContentsUl']}').scroll({top:${y}, behavior: 'smooth'});">${d}</a>`;
  780.   
  781.   if (pageType === "news") {
  782.     doProcessNews(lMainContentsUlTop, createAnchor);
  783.   } else {
  784.     doProcessMedia(lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor);
  785.   }
  786. };
  787.  
  788.  
  789. const COMPRESSED = `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`;
  790.  
  791. const HINATAZAKA46 = JSON.parse(LZString.decompressFromBase64(COMPRESSED));
  792.  
  793. HTMLElement.prototype.setPenlightColor = function(color_01, color_02, thickness, intensity) {
  794.  
  795.   this.style.borderLeftColor = "#" + color_01;
  796.   this.style.borderTopColor = "#" + color_01;
  797.   this.style.borderRightColor = "#" + color_02;
  798.   this.style.borderBottomColor = "#" + color_02;
  799.  
  800.   this.style.boxShadow = `
  801.     -${thickness} 0px ${thickness} -4px #${color_01},
  802.     0px -${thickness} ${thickness} -4px #${color_01},
  803.     ${thickness} 0px ${thickness} -4px #${color_02},
  804.     0px ${thickness} ${thickness} -4px #${color_02},
  805.  
  806.     inset 0px 2px 4px white,
  807.     inset 2px 0px 4px white,
  808.     inset 0px -2px 4px white,
  809.     inset -2px 0px 4px white,
  810.     
  811.     inset 0px 4px 4px #${color_01},
  812.     inset 4px 0px 4px #${color_01},
  813.     inset 0px -4px 4px #${color_02},
  814.     inset -4px 0px 4px #${color_02},
  815.     
  816.     inset 0px ${thickness} 4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
  817.     inset ${thickness} 0px 4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
  818.     inset 0px -${thickness} 4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
  819.     inset -${thickness} 0px 4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
  820.  
  821.     -4px 0px 4px -4px white,
  822.     0px -4px 4px -4px white,
  823.     4px 0px 4px -4px white,
  824.     0px 4px 4px -4px white,
  825.     
  826.     -4px 0px 4px -4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
  827.     0px -4px 4px -4px rgb(from #${color_01} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
  828.     4px 0px 4px -4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity})),
  829.     0px 4px 4px -4px rgb(from #${color_02} calc(r + ${intensity}) calc(g + ${intensity}) calc(b + ${intensity}))
  830.     `;
  831. };
  832.  
  833.  
  834. const doProcessMember = () => {
  835.   document.appendStyle(`
  836.     .p-member__item a div img {
  837.       border: 1px solid;
  838.       border-radius: 8px;
  839.       padding: 0.2rem;
  840.       transition: transform 0.3s ease, z-index 0.3s ease;
  841.       transform-origin: center center;
  842.     }
  843.     .p-member__item:hover a div img {
  844.       transform:scale(1.1, 1.1);
  845.     }`
  846.   );
  847.   
  848.   Array.prototype.forEach.call(document.querySelectorAll('.p-member__item'), (m) => {
  849.  
  850.     const color_set = HINATAZAKA46.DATA[m.dataset.member]['color'];
  851.  
  852.     const code_01 = HINATAZAKA46.PENLIGHT[color_set[0]]["code"];
  853.     const code_02 = HINATAZAKA46.PENLIGHT[color_set[1]]["code"];
  854.  
  855.     const img = m.children[0].children[0].children[0];
  856.  
  857.     img.setPenlightColor(code_01, code_02, "4px", 64);
  858.  
  859.     m.addEventListener('mouseover', () => {img.setPenlightColor(code_01, code_02, "12px", 128);});
  860.     m.addEventListener('mouseout', () =>{img.setPenlightColor(code_01, code_02, "4px", 64);});
  861.   });
  862. }
  863.  
  864. const doProcessMemberDetail = () => {
  865.   
  866.   document.appendStyle(`
  867.       .p-member__box {
  868.         padding-top: 40px;
  869.       }
  870.       .c-member__thumb img {
  871.         border: 3px solid;
  872.         border-radius: 8px;
  873.         padding: 0.2rem;
  874.         position: relative;
  875.       }
  876.       .c-mamber__category_title {
  877.         margin-bottom: 0;
  878.       }
  879.       .p-section {
  880.         z-index: 100;
  881.       }
  882.       .p-button--center {
  883.         padding-top: 0;
  884.       }
  885.       .p-contents.p-contents--news {
  886.         padding-bottom: 0px;
  887.       }
  888.       .c-btn-member-greeting-popup-close {
  889.         --color: black;
  890.       }
  891.       .c-btn-member-greeting-popup-close:before {
  892.         border: solid 1px;
  893.         background-color: var(--color);
  894.       }
  895.       .c-btn-member-greeting-popup-close:after {
  896.         border: solid 1px;
  897.         background-color: var(--color);
  898.       }`);
  899.  
  900.   const close_button = document.querySelector('.c-btn-member-greeting-popup-close');
  901.   close_button.style.setProperty("--color", DEFAULT_FONT_CL);
  902.   
  903.   const img = document.querySelector('.c-member__thumb > img:nth-child(1)');
  904.  
  905.   if (img) { 
  906.     const ct = (location.href).match(/artist\/([0-9]{1,2})/)[1];
  907.     const color_set = HINATAZAKA46.DATA[ct]['color'];
  908.     const color_01 = HINATAZAKA46.PENLIGHT[color_set[0]];
  909.     const color_02 = HINATAZAKA46.PENLIGHT[color_set[1]];
  910.  
  911.     img.setPenlightColor(color_01['code'], color_02['code'], "8px", 64);
  912.   }
  913. };
  914.  
  915. const doProcessGreeting = () => {
  916.   document.appendStyle(`
  917.       .card, .member_thumb {
  918.         cursor: pointer;
  919.       }
  920.       div.card {
  921.         transition: transform 0.3s ease, z-index 0.3s ease;
  922.         transform-origin: center center;
  923.       }
  924.       div.card:hover {
  925.         transform: scale(1.05) translateZ(10px);
  926.         z-index: 10; /* 前面に出す */
  927.       }`
  928.   );
  929.   
  930.   Array.prototype.forEach.call(document.querySelectorAll('[class^="card_"]'), (c) => {
  931.         
  932.     const cardNo = c.classList[0].match(/[0-9]{1,2}/)[0];
  933.  
  934.     const member = c.querySelector('.member_thumb');
  935.     
  936.     member.addEventListener('click', () => {
  937.       location.href = "https://www.hinatazaka46.com/s/official/artist/" + cardNo + "?ima=0000";
  938.     });
  939.     
  940.     
  941.     c.addEventListener('mouseover', () => {
  942.       const menberName = c.querySelector('.name');
  943.  
  944.       if (getColorMode() === COLOR_MODE.DARK_COLOR) {
  945.  
  946.         menberName.style.color = `${DARK_FONT_CL}`;
  947.       } else {
  948.         menberName.children[0].style.color = `${DEFAULT_FONT_CL}`;
  949.       }
  950.     });
  951.  
  952.     c.addEventListener('mouseout', () => {
  953.       const menberName = c.querySelector('.name');
  954.       menberName.style.color = `${DEFAULT_FONT_CL}`;
  955.     });
  956.  
  957.     const card = c.querySelector('.card');
  958.     const btn = c.querySelector('a.btn01');
  959.     
  960.     card.addEventListener('click', (e) => {
  961.       btn.click();
  962.     });
  963.   });
  964. };
  965.  
  966. const DELTA = 2;
  967.  
  968. const doProcessNews = (lMainContentsUlTop, createAnchor) => {
  969.   const newsList = Array.prototype.map.call(document.getElementsByClassName("c-news__date"),
  970.                    (x) => [parseInt(x.innerText.match(new RegExp(/\d{4}\.\d{2}\.(\d{2})/))[1]), x.getBoundingClientRect().top] );
  971.  
  972.   const dayMap = new Map();
  973.  
  974.   Array.prototype.forEach.call(newsList, (x) => {
  975.  
  976.     if (! dayMap.has(x[0]) || x[1] < dayMap.get(x[0])) {
  977.       // Map(day, top)
  978.       dayMap.set(x[0], x[1]);
  979.     }
  980.   });
  981.  
  982.   Map.prototype.forEach.call(dayMap, (top, day) => {
  983.  
  984.     Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
  985.  
  986.       if (!td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
  987.  
  988.         td.innerHTML = createAnchor((top - lMainContentsUlTop - DELTA), day);
  989.  
  990.         return true;
  991.       }
  992.     });
  993.   });
  994. };
  995.  
  996.  
  997. // SCHEDULE
  998. const doProcessMedia = (lMainContentsUl, lMainContentsUlTop, dispYearMonth, now, nowYearMonth, createAnchor) => {
  999.  
  1000.   const today = now.getDate();
  1001.  
  1002.   lMainContentsUl.scroll(0, 0);
  1003.  
  1004.   let isScrolled = false;
  1005.  
  1006.   Array.prototype.forEach.call(document.getElementsByClassName("c-schedule__date--list"), (dayElem) => {
  1007.  
  1008.     // 日付(innerText)の文字列 '(日付)\n(曜日)' から日付を抽出
  1009.     let day = ((x) => {return parseInt(x.substr(0, x.indexOf(`\n`)));})(dayElem.innerText);
  1010.  
  1011.     Array.prototype.some.call(document.querySelectorAll("table.cale_table tbody tr td"), (td) => {
  1012.  
  1013.       if ( !td.classList.contains("is-disabled") && day === parseInt(td.innerText)) {
  1014.  
  1015.         td.innerHTML = createAnchor((dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA), day);
  1016.  
  1017.         return true;
  1018.       }
  1019.     });
  1020.  
  1021.     // 表示スケジュールが当月の場合
  1022.     if (dispYearMonth === nowYearMonth) {
  1023.       // 過去日
  1024.       if (day < today) {
  1025.  
  1026.         dayElem.parentElement.classList.add("schedule__list-pastday");
  1027.  
  1028.         // 「今日」（ページを表示した日付）
  1029.       } else if (day === today) {
  1030.  
  1031.         dayElem.classList.add("schedule__date-today");
  1032.         dayElem.parentElement.classList.add("schedule__list-today");
  1033.       }
  1034.  
  1035.       if (day >= today) {
  1036.  
  1037.         dayElem.parentElement.classList.add("schedule__list-future");
  1038.  
  1039.         if (!isScrolled) {
  1040.           // 「今日」以降（「今日」を含めて）で最早のスケジュール日要素にスクロール
  1041.           lMainContentsUl.scroll({
  1042.  
  1043.             top: dayElem.getBoundingClientRect().top - lMainContentsUlTop - DELTA,   
  1044.             behavior: "smooth"
  1045.           });
  1046.  
  1047.           isScrolled = true;
  1048.         }
  1049.       }
  1050.     }
  1051.   });
  1052. };
  1053.  
  1054. /*
  1055.  * "ディスコグラフィー"向けリリース年リストを画面に配置する
  1056.  */
  1057. const setReleaseYear4Disco = () => {
  1058.   const releaseYearSelector = '.c-disco__year';
  1059.  
  1060.   let navText = `<header class="header" role="banner" style="z-index: 1000;">
  1061.                    <nav class="nav">
  1062.                      <div class="release">RELEASE<br/>YEAR</div>
  1063.                      <ul class="nav-list">`;
  1064.  
  1065.   Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {
  1066.  
  1067.     const year = x.innerText;
  1068.     const id_year = "y_" + year;
  1069.     x.parentNode.setAttribute("id", id_year);
  1070.     navText += `<li><a class="rel_year">${year}</a></li>`;
  1071.   });
  1072.  
  1073.   navText += `</ul>
  1074.       </nav>
  1075.     </header>`;
  1076.  
  1077.   const main = document.querySelector('.l-main');
  1078.   main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  1079.   main.insertAdjacentHTML('afterbegin', navText);
  1080.     
  1081.   setTimeout(() => {
  1082.  
  1083.     const header = document.querySelector('header');
  1084.     const nav = document.querySelector('.nav');
  1085.     const navHeight = nav.clientHeight;
  1086.  
  1087.     window.onscroll = () => {
  1088.  
  1089.       if (window.pageYOffset >= header.clientHeight) {
  1090.         nav.classList.add('fixed');
  1091.         main.setAttribute('style', 'padding-top:' + navHeight + 'px');
  1092.       } else {
  1093.         nav.classList.remove('fixed');
  1094.         main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  1095.       }
  1096.     };
  1097.  
  1098.     const latestYear = document.querySelector(releaseYearSelector);
  1099.  
  1100.     const scrollTop = latestYear.parentNode.getBoundingClientRect().top;
  1101.  
  1102.     // スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
  1103.     scrollTo(0, 0);
  1104.  
  1105.     // リスト位置までページ内で縦スクロール
  1106.     scrollTo({
  1107.       top: scrollTop,
  1108.       behavior: "smooth"
  1109.     });
  1110.  
  1111.     Array.prototype.forEach.call(document.querySelectorAll('.rel_year'), (x, i) => {
  1112.       const year = x.innerText;
  1113.  
  1114.       const yearElement = document.getElementById("y_" + year);
  1115.       const top = yearElement.getBoundingClientRect().top;
  1116.       x.setAttribute("href", `javascript:scrollTo({top:${top}, behavior:'smooth'});`);
  1117.     });
  1118.  
  1119.   }, 100);
  1120. };
  1121.  
  1122. const doProcessDiscography = () => {
  1123.   
  1124.   styleText = `
  1125.       .fixed {
  1126.         width: 12rem;
  1127.         position: fixed;
  1128.         top: 60px;
  1129.         left: 40px;
  1130.         z-index: 1;
  1131.         font-size:larger;
  1132.       }
  1133.       .release {
  1134.         line-height: 20px;
  1135.       }
  1136.       .l-container {
  1137.         margin-top: -280px;
  1138.       }
  1139.       .c-disco__year {
  1140.         padding-top: 20px;
  1141.       }
  1142.       .c-disco__year {font-size: 4rem; width: 12rem;}
  1143.       .c-disco__category {font-size: 14px;}
  1144.       .p-page-head-sub--first {padding-top: 10px;}
  1145.       `;
  1146.   document.appendStyle(styleText);
  1147.  
  1148.   
  1149.   setReleaseYear4Disco();
  1150. };
  1151.  
  1152. /*
  1153.  * "フォーメーション"向けリリース年リストを画面に配置する
  1154.  */
  1155. const setReleaseYear4Formation = () => {
  1156.   
  1157.   const releaseYearSelector = '.c-page-subtitle';
  1158.  
  1159.   let navText = `<header class="header" role="banner" style="z-index: 1000;">
  1160.                    <nav class="nav">
  1161.                      <div class="release">RELEASE<br/>YEAR</div>
  1162.                      <ul class="nav-list">`;
  1163.   
  1164.   Array.prototype.forEach.call(document.querySelectorAll(releaseYearSelector), (x) => {
  1165.  
  1166.     const year = x.innerText;
  1167.     const id_year = "y_" + year;
  1168.     x.parentNode.setAttribute("id", id_year);
  1169.     navText += `<li><a href="#${id_year}">${year}</a></li>`;
  1170.   });
  1171.  
  1172.   navText += `</ul>
  1173.     </nav>
  1174.   </header>`;
  1175.   
  1176.   const main = document.querySelector('.l-main');
  1177.   main.setAttribute("style", 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  1178.   main.insertAdjacentHTML('afterbegin', navText);
  1179.   
  1180.   const header = document.querySelector('header');
  1181.   const nav = document.querySelector('.nav');
  1182.   const navHeight = nav.clientHeight;
  1183.  
  1184.   window.onscroll = () => {
  1185.  
  1186.     if (window.pageYOffset >= header.clientHeight) {
  1187.       nav.classList.add('fixed');
  1188.       main.setAttribute('style', 'padding-top:' + navHeight + 'px');
  1189.     } else {
  1190.       nav.classList.remove('fixed');
  1191.       main.setAttribute('style', 'padding-top:0; margin: 20px 0 0 40px; font-size: larger;');
  1192.     }
  1193.   };
  1194.   
  1195.   const latestYear = document.querySelector(releaseYearSelector);
  1196.   const scrollTop = latestYear.parentNode.getBoundingClientRect().top;
  1197.  
  1198.   // スクロール位置リセット　〜「再読み込み」ボタン押下時の位置ズレ対応
  1199.   scrollTo(0, 0);
  1200.  
  1201.   // リスト位置までページ内で縦スクロール
  1202.   scrollTo({
  1203.     top: scrollTop,
  1204.     behavior: "smooth"
  1205.   });
  1206. };
  1207.  
  1208.  
  1209. const doProcessFormation = () => {
  1210.  
  1211.   const styleText = `
  1212.       .l-container {
  1213.         margin-top: -280px;
  1214.       }
  1215.       .formation_image :not(.small_f) li, small_f span {
  1216.         transition: transform 0.3s ease, z-index 0.3s ease;
  1217.         transform-origin: center center;
  1218.       }
  1219.       .formation_image :not(.small_f) li:hover, .small_f span:hover  {
  1220.         transform: scale(1.4, 1.4) translateZ(10px);
  1221.         z-index: 10;
  1222.       }
  1223.       .formation_image li:hover i {
  1224.         font-size: 16px;
  1225.       }
  1226.       .formation_image li i {
  1227.         font-size: 14px;
  1228.       }
  1229.       .fixed {
  1230.         width: 12rem;
  1231.         position: fixed;
  1232.         top: 60px;
  1233.         left: 40px;
  1234.         z-index: 1;
  1235.         font-size:larger;
  1236.       }
  1237.       .release {
  1238.         line-height: 20px;
  1239.       }
  1240.       .p-page-head-sub--first {
  1241.         padding-top: 20px;
  1242.       }
  1243.       .p-page-head-sub {
  1244.         margin: 0px auto 0px auto;
  1245.       }`;
  1246.  
  1247.   document.appendStyle(styleText);
  1248.  
  1249.   setReleaseYear4Formation();
  1250. };
  1251.  
  1252.  
  1253. // Blog
  1254.  
  1255. /** yyyy → 'yy */
  1256. const shortenYear = (x) => {
  1257.   Array.prototype.forEach.call(document.querySelectorAll(x), (y) => {
  1258.     const text = y.innerText;
  1259.     y.innerText = "'" + text.replace(/\d{2}(\d{2}\.)/, '$1');
  1260.   });
  1261. };
  1262.  
  1263.  
  1264. const getBackgroundImageUrl = (el) => {
  1265.   const bg = window.getComputedStyle(el).backgroundImage;
  1266.   const urlMatch = bg.match(/url\(["']?(.*?)["']?\)/);
  1267.   return urlMatch ? urlMatch[1] : null;
  1268. }
  1269.  
  1270. /*
  1271.  * パタメータのrgb要素から補色を生成して返す
  1272.  * ただしパラメータの色が白に近い場合は#202040(青)、黒に近い場合は#eeeeeeを返す
  1273.  * @param {number} r - red
  1274.  * @param {number} g - green
  1275.  * @param {number} b - blue 
  1276.  * @param {number} threshold - 閾値
  1277.  */
  1278. const getComplementaryColor = (r, g, b, threshold = 30) => {
  1279.  
  1280.   const isNearlyWhite = r >= 255 - threshold && g >= 255 - threshold && b >= 255 - threshold;
  1281.  
  1282.   if (isNearlyWhite) {
  1283.     return '#202040';
  1284.   }
  1285.  
  1286.   const isNearlyBlack = r <= threshold && g <= threshold && b <= threshold;
  1287.  
  1288.   if (isNearlyBlack) {
  1289.     return '#eeeeee';
  1290.   }
  1291.  
  1292.   // 通常の補色
  1293.   const compR = 255 - r;
  1294.   const compG = 255 - g;
  1295.   const compB = 255 - b;
  1296.   
  1297.   return `rgb(${compR}, ${compG}, ${compB})`;
  1298. };
  1299.  
  1300. const updateFontColorOnImage = (selector, imageUrl) => {
  1301.   const img = new Image();
  1302.   img.crossOrigin = "anonymous"; // CORS対策（必要）
  1303.   img.src = imageUrl;
  1304.  
  1305.   img.onload = () => {
  1306.     const canvas = document.createElement('canvas');
  1307.     canvas.width = img.naturalWidth;
  1308.     canvas.height = img.naturalHeight;
  1309.     const ctx = canvas.getContext('2d');
  1310.     ctx.drawImage(img, 0, 0);
  1311.  
  1312.     const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  1313.  
  1314.     let r = 0, g = 0, b = 0, count = 0;
  1315.     for (let i = 0; i < data.length; i += 4) {
  1316.       r += data[i];
  1317.       g += data[i + 1];
  1318.       b += data[i + 2];
  1319.       count++;
  1320.     }
  1321.  
  1322.     r = Math.round(r / count);
  1323.     g = Math.round(g / count);
  1324.     b = Math.round(b / count);
  1325.  
  1326.     Array.prototype.forEach.call(document.querySelectorAll(selector), (e) => {
  1327.       e.style.color = getComplementaryColor(r, g, b);
  1328.     });
  1329.   };
  1330.  
  1331.   img.onerror = () => {
  1332.     console.error("画像の読み込みに失敗しました");
  1333.   };
  1334. };
  1335.  
  1336. const updateHeaderFontColor = (imgSelector, textSelector) => {
  1337.   const blogContainer = document.querySelector(imgSelector);
  1338.  
  1339.   const imageUrl = getBackgroundImageUrl(blogContainer);
  1340.  
  1341.   if (imageUrl) {
  1342.     updateFontColorOnImage(textSelector, imageUrl);
  1343.   }
  1344. }
  1345.  
  1346.  
  1347. const create5thRelayPhoto = () => {
  1348.  
  1349.   const relayPhoto = document.createElement('div');
  1350.   relayPhoto.classList.add("c-blog-member__icon");
  1351.   relayPhoto.style.backgroundImage = "url(https://cdn.hinatazaka46.com/images/14/fa2/dcd3c79b9d66efeed5a13af038129.jpg)";
  1352.   relayPhoto.style.backgroundSize = "cover";
  1353.   relayPhoto.style.backgroundPosition = "center";
  1354.   relayPhoto.style.backgroundRepeat = "no-repeat";
  1355.   relayPhoto.style.width = "220px";
  1356.   relayPhoto.style.height = "122px";
  1357.   relayPhoto.style.position = "relative";
  1358.   relayPhoto.style.zIndex = "2";
  1359.  
  1360.   return relayPhoto;
  1361. };
  1362.  
  1363. const scrollOnLoad = () => {
  1364.   // 半透明ヘッダーメニュー 高さ
  1365.   const headerHeight = document.querySelector(".p-header-wrap").offsetHeight;
  1366.  
  1367.   // スクロール位置リセット リロード時のズレ対応
  1368.   scrollTo(0, 0);
  1369.  
  1370.   // 文頭までスクロール
  1371.   scrollTo({
  1372.     top: document.querySelector(".p-blog-article__head").getBoundingClientRect().top - headerHeight,
  1373.     behavior: "smooth"
  1374.   });
  1375. }
  1376.  
  1377. /** ブログ */
  1378. const blogDetail = () => {
  1379.   const pBlogArticleHead = document.querySelector('.p-blog-article__head');
  1380.  
  1381.   const styleElem = document.createElement("style");
  1382.   styleElem.setAttribute("rel", "stylesheet");
  1383.   styleElem.textContent = `
  1384.     .p-blog-article {
  1385.       border-bottom: none;
  1386.     }
  1387.     .c-blog-article__title {
  1388.       --height: auto;
  1389.       height: var(--height);
  1390.       transition: height .3s ease-out;
  1391.     }
  1392.     .c-blog-article__title.open {
  1393.       height: var(--height);
  1394.       overflow: visible;
  1395.       white-space: wrap;
  1396.     }
  1397.     .c-blog-article__title.hidden {
  1398.       height: 58px;
  1399.       overflow: hidden;
  1400.       white-space: nowrap;
  1401.       text-overflow: ellipsis "… 🔽";
  1402.     }
  1403.     .c-blog-article__text {
  1404.       padding: 0 10px;
  1405.       overflow: scroll;
  1406.       border: none;
  1407.     }
  1408.     .p-pager {
  1409.       margin-top: 10px;
  1410.     }
  1411.     .p-button--center {
  1412.       padding-top: 0;
  1413.       margin-top: -20px;
  1414.     }
  1415.     .c-button-grad.c-button-grad--big {
  1416.       min-width: 280px;
  1417.     }`;
  1418.   
  1419.   document.head.appendChild(styleElem);
  1420.   
  1421.   const articleTitleDiv = document.querySelector('.c-blog-article__title');
  1422.   const height = articleTitleDiv.scrollHeight + 'px';
  1423.   
  1424.   articleTitleDiv.style.setProperty("--height", height);
  1425.     
  1426.   articleTitleDiv.style.marginBottom = "0px";
  1427.   articleTitleDiv.classList.add("hidden");
  1428.   
  1429.   setTimeout(() => {
  1430.     const articleHeight = document.documentElement.clientHeight - pBlogArticleHead.getBoundingClientRect().bottom;
  1431.  
  1432.     document.querySelector('.c-blog-article__text').style.height = articleHeight + "px";
  1433.  
  1434.     if (articleTitleDiv.offsetWidth < articleTitleDiv.scrollWidth) {
  1435.  
  1436.       const articleTitle = articleTitleDiv.innerText;
  1437.       articleTitleDiv.innerText = articleTitle + "🔼";
  1438.       articleTitleDiv.style.cursor = "pointer";
  1439.  
  1440.       articleTitleDiv.addEventListener('click', function() {
  1441.         articleTitleDiv.classList.toggle("hidden");
  1442.         articleTitleDiv.classList.toggle("open");
  1443.       });
  1444.     }
  1445.  
  1446.     scrollOnLoad();
  1447.   }, 100);
  1448. };
  1449.  
  1450. /** 記事一覧 */
  1451. const blogList = () => {
  1452.  
  1453.   const blogGroupHeight = document.documentElement.clientHeight;
  1454.  
  1455.   const styleText = `
  1456.   .c-blog-member__icon--all {
  1457.     height: 60px;
  1458.   }
  1459.   .p-button {
  1460.     padding-top: 0;
  1461.   }
  1462.   .d-article {
  1463.     line-height: 20px;
  1464.     margin-bottom: 8px;
  1465.   }
  1466.   .s-member-icon {
  1467.     font-size: larger
  1468.   }
  1469.   .s-article-title {
  1470.     font-size: smaller;
  1471.   }
  1472.   .s-datetime {
  1473.     font-size: smaller;
  1474.   }
  1475.   .p-blog-group {
  1476.     height: ${blogGroupHeight - 60}px;
  1477.     overflow: scroll;
  1478.   .l-maincontents--blog {
  1479.     border: none;
  1480.   }
  1481.   .c-blog-article__title {
  1482.     margin-bottom: 0px;
  1483.   }`;
  1484.  
  1485.   document.appendStyle(styleText);
  1486.   
  1487.   shortenYear('.c-blog-article__date');
  1488.  
  1489.   const titleList = document.createElement('div');
  1490.   titleList.setAttribute("class", "s-blog__index");
  1491.  
  1492.   const memberName = document.querySelector('.c-blog-member__name');
  1493.   
  1494.   if (memberName) {
  1495.     if (memberName.innerText == "ポカ") {
  1496.  
  1497.       const profileTable = document.querySelector('.p-blog-member__info-table');
  1498.       profileTable.after(titleList);
  1499.     } else {
  1500.   
  1501.       const profileButton = document.querySelector('.p-button');
  1502.       profileButton.after(titleList);
  1503.     }
  1504.   // リレーブログ
  1505.   } else {
  1506.     const info = document.querySelector('.p-blog-member__info');
  1507.     info.after(titleList);
  1508.   }
  1509.  
  1510.   const createAnchor = (idx, datetime, icon, articleTitle) => `<div class="d-article"><a href="#article${idx}">
  1511.     <span class="s-member-icon">${icon}</span>
  1512.     <span class="s-article-title">${articleTitle}</span><br/><span class="s-datetime">${datetime}</span>
  1513.   </a></div>`;
  1514.   
  1515.   const lMainContentsBlogTop = document.querySelector('.l-maincontents--blog').getBoundingClientRect().top;
  1516.   
  1517.   Array.prototype.forEach.call(document.querySelectorAll('.p-blog-article'), (x, i) => {
  1518.     
  1519.     x.setAttribute('id', "article" + i);
  1520.     const datetimeDiv = x.childNodes[1].childNodes[3].childNodes[1];
  1521.     const datetime = datetimeDiv.firstChild.textContent.trim();
  1522.     const articleTitleDiv = x.childNodes[1].childNodes[1];
  1523.     const articleTitle = articleTitleDiv.firstChild.textContent.trim();
  1524.     // メンバー混合リストの場合があるので名前を取得
  1525.     const memberName = x.childNodes[1].childNodes[3].childNodes[3].innerText;
  1526.     const icon = HINATAZAKA46.DATA[HINATAZAKA46.MEMBER[memberName]]['icon'];
  1527.     
  1528.     titleList.insertAdjacentHTML('beforeend', createAnchor(i, datetime, icon, articleTitle));
  1529.   });
  1530.  
  1531.   setTimeout(() => {
  1532.     document.querySelector('.p-blog-group').style.hight = "px";
  1533.     scrollOnLoad();
  1534.   }, 100);
  1535. };
  1536.  
  1537.  
  1538. const doProcessBlog = (blogPageType) => {
  1539.  
  1540.   const body = document.querySelector('body');
  1541.  
  1542.   // 内容が空のページ（卒業メンバーのブログなど）
  1543.   if (body.getElementsByTagName('*').length === 0) {
  1544.     body.innerHTML = 'This page is no longer available';
  1545.     return;
  1546.   }
  1547.  
  1548.   // ひなたフェス/握手会 は非メンバーブログ
  1549.   const isNotMemberBlog = (location.search).match(/(cd=hinafes_blog|cd=event)/g);
  1550.  
  1551.   if (isNotMemberBlog) {
  1552.     return;
  1553.   }
  1554.  
  1555.   if (isMobile()) {
  1556.     return;
  1557.   }
  1558.  
  1559.   updateHeaderFontColor('.p-blog-head-container', '.c-blog-page__title, .c-blog-page__subtitle, .c-blog-main__name, .c-blog__profilelink');
  1560.  
  1561.   const faceSelector = '.p-blog-face__list';
  1562.  
  1563.   // 画面下部の顔写真
  1564.   Array.prototype.forEach.call(document.querySelectorAll(faceSelector), (x) => {
  1565.     x.addEventListener('mouseover', () => {
  1566.  
  1567.       x.children[1].style.color = getColorMode() === COLOR_MODE.DARK_COLOR ? `${DARK_FONT_CL}` : `${DEFAULT_FONT_CL}`;
  1568.     });
  1569.   });
  1570.  
  1571.   Array.prototype.forEach.call(document.querySelectorAll(faceSelector), (x) => {
  1572.     x.addEventListener('mouseout', () => {
  1573.  
  1574.       x.children[1].style.color = `${DEFAULT_FONT_CL}`;
  1575.     });
  1576.   });
  1577.  
  1578.   if (blogPageType == "blog_top") {
  1579.  
  1580.     ((x) => { if (x) { x.style.cursor = "pointer"; } })(document.querySelector('.js-select.sort'));
  1581.  
  1582.     document.appendStyle(`
  1583.     .l-contents {
  1584.       padding-bottom: 20px;
  1585.     }
  1586.     .c-blog-face__item {
  1587.       transition: transform 0.3s ease, z-index 0.3s ease;
  1588.       transform-origin: center center;
  1589.     }   
  1590.     .c-blog-face__item:hover {
  1591.       transform: scale(1.2, 1.2) translateZ(10px);
  1592.     }`);
  1593.  
  1594.     return;  
  1595.   }
  1596.  
  1597.   const blogEntryItem = document.querySelector('.p-blog-entry__item');
  1598.   const blogEntryItemStyles = window.getComputedStyle(blogEntryItem, null);
  1599.   const blogEntryItemHeight = parseInt(blogEntryItemStyles["height"].replace('px', ''));
  1600.   const blogEntryItemMarginBottom = parseInt(blogEntryItemStyles["margin-bottom"].replace('px', ''));
  1601.   const blogEntryItemHeightWithMargin = blogEntryItemHeight + blogEntryItemMarginBottom;
  1602.  
  1603.   const styleText = `
  1604.     .l-other-contents--blog {
  1605.       margin-top: -160px;
  1606.       padding-top: 20px;
  1607.       --bg-color: #ffffff;
  1608.       background-color: var(--bg-color);
  1609.     }
  1610.     .c-button-grad {
  1611.       padding: 6px 40px 6px 32px;
  1612.     }
  1613.     .l-other-contents--blog::after, .c-button-grad.c-button-grad--big::after {
  1614.       background-color: var(--bg-color);
  1615.     }
  1616.     .p-blog-head {
  1617.       padding-top: 0;
  1618.     }
  1619.     .c-blog-page__title {
  1620.       margin-bottom: 0;
  1621.     }
  1622.     .c-blog-member__icon {
  1623.       margin-bottom: 10px;
  1624.     }
  1625.     .p-blog-member__head {
  1626.       margin-bottom: 5px;
  1627.     }
  1628.     .c-blog-member__info-td__name {
  1629.       padding-bottom: 5px;
  1630.     }
  1631.     .s-blog__index {
  1632.       position: relative;
  1633.       z-index: 50;
  1634.       margin: 0 0 0 -50px;
  1635.       height: 160px;
  1636.       width: 290px;
  1637.       overflow: scroll;
  1638.     }
  1639.     .cale_table {
  1640.       margin-top: 0px;
  1641.     }
  1642.     .p-blog-article__head {
  1643.       background-color: #f6ffff;
  1644.       border: 1px solid #a0d8ef ;
  1645.       border-radius: 10px;
  1646.     }
  1647.     .c-blog-article__title {
  1648.       font-size: 2.5rem;
  1649.       line-height: 58px;
  1650.       color: #636767;
  1651.       background-color: #e0ffff;
  1652.       border-radius: 10px;
  1653.     }
  1654.     .c-blog-article__title, .c-blog-article__date {
  1655.       text-indent: 5px;
  1656.     }
  1657.     .l-maincontents--blog {
  1658.       margin-top:-160px;
  1659.       padding: 20px;
  1660.     }
  1661.     .l-contents--blog-list {
  1662.       padding-bottom: 0;
  1663.     }
  1664.     .c-blog-entry_area__title {
  1665.       margin-bottom: 2px;
  1666.     }
  1667.     .p-blog-group {
  1668.       border: solid 1px #32a1ce;
  1669.     }
  1670.     .p-blog-article {
  1671.       padding-bottom: 0;
  1672.       margin-bottom: 0;
  1673.     }
  1674.     .p-blog-article__info {
  1675.       margin-bottom: 10px;
  1676.     }
  1677.     .c-pager__item__text time {
  1678.       font-size: 1.4rem;
  1679.     }
  1680.     .p-button--center {
  1681.       padding: 0;
  1682.     }
  1683.     .p-blog-face__title {
  1684.       margin-bottom: 10px;
  1685.     }
  1686.     .p-blog-face__group {
  1687.       padding-top: 20px;
  1688.     }
  1689.     .p-blog-face__list {
  1690.       width: 122px;
  1691.       height: 162px;
  1692.     }
  1693.     .c-blog-face__item {
  1694.       transition: transform 0.3s ease, z-index 0.3s ease;
  1695.       transform-origin: center center;
  1696.     }   
  1697.     .c-blog-face__item:hover {
  1698.       transform: scale(1.2, 1.2) translateZ(10px);
  1699.     }
  1700.     .p-blog-entry__group {
  1701.       padding-bottom: 0;
  1702.     }
  1703.     .p-blog-entry__list {
  1704.       height: ${blogEntryItemHeightWithMargin * 3}px;
  1705.       width: 230px;
  1706.       overflow: scroll;
  1707.       border: none;
  1708.       margin-bottom: 20px;
  1709.     }
  1710.     .c-blog-entry__name {
  1711.       font-size: 1.3rem;
  1712.     }`;
  1713.  
  1714.   document.appendStyle(styleText);
  1715.  
  1716.   shortenYear('.c-blog-article__date time');
  1717.   shortenYear('.c-blog-entry__name');
  1718.   shortenYear('.c-pager__item__text time');
  1719.  
  1720.   const memberIcon = document.querySelector('.c-blog-member__icon');
  1721.  
  1722.   if (! memberIcon) {
  1723.     const info = document.querySelector('.p-blog-member__info');
  1724.     const relayPhoto = create5thRelayPhoto();
  1725.     info.prepend(relayPhoto);
  1726.   }
  1727.  
  1728.   switch (blogPageType) {
  1729.     case "blog_detail":
  1730.       blogDetail();
  1731.       break;
  1732.     case "blog_list":
  1733.       blogList();
  1734.       break;
  1735.     default:
  1736.       throw new Error(PAGE_TYPE_ERROR_MSG);
  1737.   }
  1738. };
  1739.  
  1740. const doProcessEvent = () => {
  1741.   updateHeaderFontColor('.p-section--shakehands', '.c-shakehands-calender.pc, .c-shakehands-calender.pc a');
  1742. };
  1743.  
  1744. const doProcessFc = () => {
  1745.   const styleText = `
  1746.     .fc-logo {
  1747.       padding: 15px;
  1748.     }`;
  1749.   document.appendStyle(styleText);
  1750. };