/* <system section="background" selected="bg12"> */
body {
  background-color: #000;
  background-image: url(https://cdn.blog.st-hatena.com/images/theme/backgrounds/theme12.png?version=d8acbc65e4160b0b505e920efd2601);
  background-repeat: repeat;
  background-attachment: scroll;
}
/* </system> */

/* === 全体配色（既に入れているなら重複OK） === */
body {
  background-color: #111;
  color: #eee;
  font-family: "Hiragino Mincho ProN", "游明朝", "MS Mincho", serif;
}
a {
  color: #8B0000;
}
h1,
h2,
h3 {
  color: #B22222;
}

/* === 本文（中央寄せ・読みやすさ） === */
.entry,
.entry-inner,
.entry-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.8;
}

/* === サイトタイトル（ブログタイトル） === */
#blog-title,
#blog-title-inner,
.site-header,
.header-inner,
header#title,
#title-area {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px;
  text-align: center;
  background: #111;
  color: #eee;
  border: none;
}
#blog-title a,
#title a,
.site-title a {
  color: #eee !important;
  text-decoration: none;
}
/* サブタイトル（説明文） */
#blog-title #title-description,
.site-description {
  color: #ccc;
  margin-top: 6px;
}

/* === グローバルナビ（メニュー） === */
#global-navi,
.global-navi,
nav.global-navigation,
.site-nav,
.header-nav {
  background: #111;
  border: none;
}
#global-navi ul,
.global-navi ul,
nav.global-navigation ul,
.site-nav ul,
.header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
#global-navi a,
.global-navi a,
nav.global-navigation a,
.site-nav a,
.header-nav a {
  color: #eee;
  text-decoration: none;
  padding: 10px 6px;
}
#global-navi a:hover,
.global-navi a:hover,
nav.global-navigation a:hover,
.site-nav a:hover,
.header-nav a:hover {
  color: #B22222;
}

/* === コンテンツラッパー === */
#content-inner,
#content,
#main {
  max-width: 1100px;
  margin: 0 auto;
}

/* === フッター === */
#footer,
.site-footer,
#footer-inner {
  background: #111;
  color: #bbb;
  text-align: center;
}

/* === ヘッダー画像（IMG方式）：1000×200で固定。位置は変えない === */
#blog-title img,
#blog-title-inner img,
.site-header img,
.header-inner img,
header#title img,
#title-area img,
.hatena-blog-title img,
.title-image img {
  width: 1000px !important;
  height: 200px !important;
  max-width: none !important; /* テーマの max-width:100% を無効化 */
  max-height: none !important;
  display: block !important;
  margin: 0 !important; /* 中央寄せしない（元の位置のまま） */
  object-fit: cover; /* 念のための破綻防止 */
}

/* === ヘッダー画像（背景方式のテーマ向け・無害指定） === */
#blog-title,
#blog-title-inner,
.site-header,
.header-inner,
header#title,
#title-area,
#blog-title .title-image,
.title-image {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 1000px 200px !important; /* 等倍ピッタリ */
}

/* 背景方式で高さが出ない場合に効く最小枠 */
#blog-title .title-image,
.title-image {
  width: 1000px !important;
  height: 200px !important;
  display: block !important;
  margin: 0 auto 0 0 !important; /* 左寄せ（必要なら調整） */
}

/* === レスポンシブ（任意）：端末幅が1000px未満なら縮小 === */
@media (max-width: 1000px) {
  #blog-title img,
  #blog-title-inner img,
  .site-header img,
  .header-inner img,
  header#title img,
  #title-area img,
  .hatena-blog-title img,
  .title-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  #blog-title .title-image,
  .title-image {
    width: 100% !important;
    height: auto !important;
  }
}

/* === サイドバー落ち対策：flexで横並びを強制（テーマ差吸収版） === */
#content-inner,
#content {
  display: flex !important;
  flex-wrap: nowrap !important; /* 折り返し禁止 */
  align-items: flex-start !important;
}
/* メインとサイドバーの順序・幅を明示（存在する要素だけ効くので無害） */
#main {
  order: 1 !important;
  flex: 1 1 auto !important; /* 余白はメインに配分 */
  min-width: 0 !important; /* 長文や大画像でのはみ出し防止 */
}
#box2,
#sidebar,
.sidebar {
  order: 2 !important;
  flex: 0 0 300px !important; /* サイドバー幅（必要なら数値を調整） */
  width: 300px !important;
  margin-left: 24px !important;
  box-sizing: border-box !important;
}
/* 画像や表で横幅を超えないようにする（落下の主因を封じる） */
.entry-content img,
.entry-content video,
.entry-content table {
  max-width: 100% !important;
  height: auto !important;
}
/* float系テーマの保険（clearfix） */
#content::after,
#content-inner::after {
  content: "" !important;
  display: block !important;
  clear: both !important;
}
/* 画面幅が狭い時は1カラム化（任意。不要なら削除OK） */
@media (max-width: 1024px) {
  #content-inner,
  #content {
    flex-wrap: wrap !important;
  }
  #box2,
  #sidebar,
  .sidebar {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
  }
}

/* ===== メニュー横並び ===== */
#menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
#menu a,
#menu .nav-button {
  color: #eee;
  text-decoration: none;
  padding: 10px 6px;
  line-height: 1.2;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}
#menu a:hover,
#menu .nav-button:hover {
  color: #B22222;
}
#menu .nav-button:focus-visible {
  outline: 2px solid #B22222;
  outline-offset: 2px;
}

/* ===== パネル表示切替 ===== */
#short-horror-panel {
  display: none;
  background: #111;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
#short-horror-panel.open {
  display: block;
}

/* ===== 7カテゴリの並び ===== */
#short-horror-panel .subcats {
  list-style: none;
  margin: 0;
  padding: 10px 8px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
#short-horror-panel .subcats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid #444;
  border-radius: 8px;
  color: #eee;
  text-decoration: none;
  background: #111;
}
#short-horror-panel .subcats a:hover {
  border-color: #B22222;
}
#short-horror-panel .subcats a .kws {
  display: block;
  font-weight: 700;
}
#short-horror-panel .subcats a .alias {
  display: block;
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}
/* モバイル調整 */
@media (max-width: 768px) {
  #short-horror-panel .subcats {
    justify-content: flex-start;
  }
}

/* =========================================================
   重大修正：公開側で「編集」UIを完全に非表示（再発防止）
   ========================================================= */
body:not(.owner-mode) #blog-title [class*="edit"],
body:not(.owner-mode) #title-area [class*="edit"],
body:not(.owner-mode) .header-inner [class*="edit"],
body:not(.owner-mode) #global-navi [class*="edit"],
body:not(.owner-mode) .entry .entry-edit,
body:not(.owner-mode) .hatena-module .hatena-module-edit,
body:not(.owner-mode) .sidebar [class*="edit"],
body:not(.owner-mode) #box2 [class*="edit"],
body:not(.owner-mode) .page-edit,
body:not(.owner-mode) [data-htn-edit],
body:not(.owner-mode) [aria-label="編集"],
body:not(.owner-mode) a[href*="/edit"],
body:not(.owner-mode) button[id*="edit"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}
body:not(.owner-mode) #blog-title:hover [class*="edit"],
body:not(.owner-mode) #title-area:hover [class*="edit"],
body:not(.owner-mode) .header-inner:hover [class*="edit"],
body:not(.owner-mode) #global-navi:hover [class*="edit"],
body:not(.owner-mode) .entry:hover .entry-edit,
body:not(.owner-mode) .hatena-module:hover .hatena-module-edit,
body:not(.owner-mode) .sidebar:hover [class*="edit"],
body:not(.owner-mode) #box2:hover [class*="edit"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
body.owner-mode #blog-title [class*="edit"],
body.owner-mode #title-area [class*="edit"],
body.owner-mode .header-inner [class*="edit"],
body.owner-mode #global-navi [class*="edit"],
body.owner-mode .entry .entry-edit,
body.owner-mode .hatena-module .hatena-module-edit,
body.owner-mode .sidebar [class*="edit"],
body.owner-mode #box2 [class*="edit"],
body.owner-mode .page-edit {
  display: inline-block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  position: static !important;
  height: auto !important;
  width: auto !important;
}

/* ── 年表テーブル（2つ共通）最小パッチ ── */
.cv-timeline,
.cv-chronology {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cv-timeline table,
.cv-chronology table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  table-layout: fixed !important;
}
.cv-timeline th,
.cv-timeline td,
.cv-chronology th,
.cv-chronology td {
  padding: 8px 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cv-timeline th:first-child,
.cv-timeline td:first-child,
.cv-chronology th:first-child,
.cv-chronology td:first-child {
  white-space: nowrap !important;
  width: 6em;
}
.cv-chronology td:nth-child(3),
.cv-chronology td:nth-child(4) {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   === 記事タイトル・日付・カテゴリーを赤に統一 ===
   ========================================================= */
/* 記事タイトル */
.entry-title a {
  color: #CC3333;
  text-decoration: none;
}
.entry-title a:hover {
  color: #FF4444;
}
/* 日付 */
.date,
.entry-date,
.date a {
  color: #CC3333;
  text-decoration: none;
}
.date a:hover,
.entry-date a:hover {
  color: #FF4444;
}
/* カテゴリー */
.categories a,
.entry-categories a {
  color: #CC3333;
  text-decoration: none;
}
.categories a:hover,
.entry-categories a:hover {
  color: #FF4444;
}

/* =========================================================
   === サイドバーのテキスト・リンクを赤に統一 ===
   ========================================================= */
.sidebar .hatena-module-title {
  color: #CC3333;
}
.sidebar a {
  color: #CC3333;
  text-decoration: none;
}
.sidebar a:hover {
  color: #FF4444;
}

/* =========================================================
   === フッターのテキスト・リンクを赤に統一 ===
   ========================================================= */
#footer,
.site-footer,
#footer-inner {
  color: #CC3333; /* フッター内の通常テキスト */
}
#footer a,
.site-footer a,
#footer-inner a {
  color: #CC3333; /* フッター内リンク */
  text-decoration: none;
}
#footer a:hover,
.site-footer a:hover,
#footer-inner a:hover {
  color: #FF4444;
}

/* =========================================================
   === サイドバー赤統一（強制版・上書き） ===
   ========================================================= */
/* サイドバー内の通常テキスト色も赤に */
#box2,
#sidebar,
.sidebar,
#box2 .hatena-module,
#sidebar .hatena-module,
.sidebar .hatena-module,
#box2 .hatena-module-body,
#sidebar .hatena-module-body,
.sidebar .hatena-module-body {
  color: #CC3333 !important;
}
/* モジュール見出し（タイトル） */
#box2 .hatena-module-title,
#sidebar .hatena-module-title,
.sidebar .hatena-module-title,
#box2 .hatena-module-title a,
#sidebar .hatena-module-title a,
.sidebar .hatena-module-title a {
  color: #CC3333 !important;
  text-decoration: none;
}

/* =========================================================
   メイン記事だけ赤にする／サイドバーは白のまま（最終パッチ）
   ※このブロックを CSS の一番最後に追記
   ========================================================= */
/* 1) メインカラム（#main 内）の記事タイトル・日付・カテゴリーを赤に限定 */
#main .entry .entry-title a,
#content #main .entry .entry-title a {
  color: #CC3333 !important;
  text-decoration: none;
}
#main .entry .entry-title a:hover,
#content #main .entry .entry-title a:hover {
  color: #FF4444 !important;
}
/* 投稿日付（テーマ差対応で広めに） */
#main .entry .date,
#main .entry .date a,
#main .entry [class*="date"],
#main .entry time,
#content #main .entry .date,
#content #main .entry .date a,
#content #main .entry [class*="date"],
#content #main .entry time {
  color: #CC3333 !important;
  text-decoration: none;
}
#main .entry .date a:hover,
#content #main .entry .date a:hover {
  color: #FF4444 !important;
}
/* カテゴリー（テーマ差対応で .categories/.entry-categories 両方） */
#main .entry .categories a,
#main .entry .entry-categories a,
#content #main .entry .categories a,
#content #main .entry .entry-categories a {
  color: #CC3333 !important;
  text-decoration: none;
}
#main .entry .categories a:hover,
#main .entry .entry-categories a:hover,
#content #main .entry .categories a:hover,
#content #main .entry .entry-categories a:hover {
  color: #FF4444 !important;
}

/* 2) サイドバーは白を維持（プロフィール/検索/注目記事/カテゴリー/リンク/人気ブログランキング/注意書き） */
#sidebar,
.sidebar,
#box2 {
  color: #eee !important;
}
#sidebar .hatena-module,
.sidebar .hatena-module,
#box2 .hatena-module {
  color: #eee !important;
}
#sidebar .hatena-module a,
.sidebar .hatena-module a,
#box2 .hatena-module a {
  color: #eee !important;
  text-decoration: none;
}
#sidebar .hatena-module a:hover,
.sidebar .hatena-module a:hover,
#box2 .hatena-module a:hover {
  color: #fff !important;
}
/* アフィリエイト注意書きを白で固定（クラスがあれば .affiliate-note を併用） */
.affiliate-note,
.entry-content .affiliate-note {
  color: #eee !important;
}

/* 3) 念のため：サイドバー側の “赤” を無効化（メインだけ赤を効かせる） */
#sidebar .entry-title a,
.sidebar .entry-title a,
#box2 .entry-title a,
#sidebar .date,
.sidebar .date,
#box2 .date,
#sidebar .date a,
.sidebar .date a,
#box2 .date a,
#sidebar .categories a,
.sidebar .categories a,
#box2 .categories a {
  color: #eee !important;
}

/* =========================================================
   アフィリエイト注意書きだけ白で固定（本文内でもリンク含め全白）
   ========================================================= */
/* クラスが付いている場合（推奨） */
#content #main .entry .entry-content .affiliate-note,
#content #main .entry .entry-content .affiliate-note a {
  color: #eee !important;
  text-decoration: none;
}
/* クラスが無い場合の保険：よくある広告リンクを含む段落を白に固定 */
#content #main .entry .entry-content p:has(> a[href*="amazon"]),
#content #main .entry .entry-content p:has(> a[href*="rakuten"]),
#content #main .entry .entry-content p:has(> a[href*="moshimo"]),
#content #main .entry .entry-content p:has(> a[href*="a8"]),
#content #main .entry .entry-content p:has(> a[rel*="sponsored"]),
#content #main .entry .entry-content p:has(> a[rel*="nofollow"]) {
  color: #eee !important;
}
#content #main .entry .entry-content p:has(> a[href*="amazon"]) a,
#content #main .entry .entry-content p:has(> a[href*="rakuten"]) a,
#content #main .entry .entry-content p:has(> a[href*="moshimo"]) a,
#content #main .entry .entry-content p:has(> a[href*="a8"]) a,
#content #main .entry .entry-content p:has(> a[rel*="sponsored"]) a,
#content #main .entry .entry-content p:has(> a[rel*="nofollow"]) a {
  color: #eee !important;
  text-decoration: none;
}
.affiliate-note,
.affiliate-note a {
  color: #eee !important;
  text-decoration: none;
}

/* =========================================================
   記事下ランキングリンクを赤に統一
   ========================================================= */
.entry-content div[style*="flex"] a,
.entry-content div[style*="flex"] a:visited {
  color: #CC3333 !important;
  text-decoration: none;
}
.entry-content div[style*="flex"] a:hover {
  color: #FF4444 !important;
}
/* バナーの下にある文字リンク (オカルト･ホラーランキング / 人気ブログランキング) */
.entry-content div[style*="flex"] div {
  color: #CC3333 !important;
}

/* =========================================================
   読者になるボタン iframe を赤枠で統一
   ========================================================= */
iframe[src*="subscribe/iframe"] {
  border: 1px solid #CC3333 !important;
  border-radius: 4px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #111; /* 背景を黒系にして馴染ませる */
}

/* =========================================================
   関連記事：リンク＆日付を新しい赤に統一（最後に追記）
   ========================================================= */
/* 関連記事ブロックの代表的なクラス名を網羅（テーマ差吸収） */
.entry-content .related-entries a,
.entry-content .entry-related a,
.entry-content .entry-see-also a,
.entry-content .related-article a,
.related-entries a,
.entry-related a,
.entry-see-also a,
.related-article a,
.hatena-module-related-entries a,
.hatena-related-entries a {
  color: #CC3333 !important;
  text-decoration: none;
}
.entry-content .related-entries a:hover,
.entry-content .entry-related a:hover,
.entry-content .entry-see-also a:hover,
.entry-content .related-article a:hover,
.related-entries a:hover,
.entry-related a:hover,
.entry-see-also a:hover,
.related-article a:hover,
.hatena-module-related-entries a:hover,
.hatena-related-entries a:hover {
  color: #FF4444 !important;
}
/* 関連記事内の“日付”も新しい赤に（time/.date をまとめて） */
.entry-content .related-entries time,
.entry-content .entry-related time,
.entry-content .entry-see-also time,
.entry-content .related-article time,
.related-entries time,
.entry-related time,
.entry-see-also time,
.related-article time,
.entry-content .related-entries .date,
.entry-content .entry-related .date,
.entry-content .entry-see-also .date,
.entry-content .related-article .date,
.related-entries .date,
.entry-related .date,
.entry-see-also .date,
.related-article .date {
  color: #CC3333 !important;
}

<style>
  /* ===== 目次デザイン（常時 #e63946） ===== */
  .toc,
  #toc_container,
  .toc-container,
  .table-of-contents {
    border: 2px solid #e63946 !important;
    border-radius: 10px !important;
    background: #fff !important;
    padding: 16px 20px !important;
  }
  /* 目次タイトル */
  .toc-title,
  #toc_container .toc_title,
  .toc-header,
  .table-of-contents h2 {
    color: #e63946 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }
  /* 目次内リンク（常時赤） */
  .toc a,
  #toc_container a,
  .table-of-contents a {
    color: #e63946 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
  }
  /* リストマークも赤 */
  .toc ul li::marker,
  #toc_container ul li::marker,
  .table-of-contents ul li::marker {
    color: #e63946 !important;
  }
  /* ダークモード対応 */
  @media (prefers-color-scheme: dark) {
    .toc,
    #toc_container,
    .toc-container,
    .table-of-contents {
      background: #151515 !important;
      border-color: #e63946 !important;
    }
    .toc-title,
    #toc_container .toc_title,
    .toc-header,
    .table-of-contents h2 {
      color: #e63946 !important;
    }
    .toc a,
    #toc_container a,
    .table-of-contents a {
      color: #e63946 !important;
    }
  }
  /* ------------------------------------- */
/* かんたんリンク カスタマイズ */
/* ------------------------------------- */
/* --------- 外枠 --------- */
div.easyLink-box {
border:double #CCC !important; /* ２重線 */
box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}
/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
color: #3296d2 !important; /* 文字色 */
}
/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #f6a306 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #cf4944 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #fff !important; /* 背景色 */
color: #51a7e8 !important; /* 文字色 */
}
/* --- 最後のボタン下の空白を削除 --- */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
margin-bottom: 0 !important;
}
/* --- PC以外の時の設定 --- */
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
   max-height: 180px !important; /* 商品画像の大きさを調整 */
}
}
/* ボタンサイズ、配置 */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a{
padding: 10px 10px !important;
margin: 3px !important;
width: 100% !important;
display: inline-block !important;
font-weight:bold !important;
font-size: 80% !important;
text-align:center !important;
}
/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
background: #FFB745 !important; /* 背景色 */
border: 2px solid #FFB745 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
background: #D35C53 !important; /* 背景色 */
border: 2px solid #D35C53 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
background: #65ADF3 !important; /* 背景色 */
border: 2px solid #65ADF3 !important; /* 外枠 */
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* MoshimoAffiliateEasyLink：テキストを黒に固定 */
#msmaflink-fNa1g,
#msmaflink-fNa1g * {
  color: #000 !important;
}
/* Moshimoカード用：外側に白い背景パネルを敷く */
#msmaflink-fNa1g {
  display: block;
  background: #fff !important;   /* 背景を白に */
  padding: 16px !important;       /* 余白で読みやすく */
  border-radius: 10px !important; /* 角丸 任意 */
  box-shadow: 0 4px 18px rgba(0,0,0,.18); /* うっすら影 任意 */
}
/* ────────────────────────────────
　もしもアフィリエイト EasyLink：視認性改善パッチ
──────────────────────────────── */
[id^="msmaflink-"],
[id^="msmaflink-"] * {
  color: #111 !important;          /* 完全な黒に固定 */
  font-size: 15px !important;      /* 標準より少し大きめに */
  line-height: 1.6 !important;     /* 行間をゆったり */
  font-weight: 500 !important;     /* 少し太めでくっきり */
  text-shadow: none !important;    /* グレー背景でもにじまない */
}

/* リンク文字 */
[id^="msmaflink-"] a {
  color: #000 !important;
  text-decoration: underline !important; /* 下線でリンクを明確化 */
}

/* リンク hover 時 */
[id^="msmaflink-"] a:hover {
  color: #cc0000 !important;       /* 濃赤で視覚的フィードバック */
}

/* 背景白を統一（アフィエリアが薄グレーでも白に） */
[id^="msmaflink-"] {
  background: #fff !important;
  border-radius: 6px !important;
  padding: 6px !important;
}

/* ボタンの文字だけは白で維持 */
[id^="msmaflink-"] [class*="btn"],
[id^="msmaflink-"] [class*="button"],
[id^="msmaflink-"] [class*="shoplink"] {
  color: #fff !important;
  font-weight: 600 !important;
}
/* もしも EasyLink：文字色が変わらない時の最終パッチ（共通） */
[id^="msmaflink-"],
[id^="msmaflink-"] *,
[id^="msmaflink-"] span[style*="color"],
[id^="msmaflink-"] font[style*="color"]{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important; /* Safariで薄く見える対策 */
  opacity:1 !important;                    /* 親の透過で薄くなるのを無効化 */
  filter:none !important;                  /* ぼかし/薄色化の解除 */
  mix-blend-mode:normal !important;        /* 合成で薄くなるのを無効化 */
  text-shadow:none !important;             /* にじみ防止 */
}

</style>
<style>
/* ARIAで表示/非表示を制御（!importantは使わない） */
#short-horror-panel[aria-hidden="true"],
#horror-works-panel[aria-hidden="true"] { display:none; }
#short-horror-panel[aria-hidden="false"],
#horror-works-panel[aria-hidden="false"] { display:block; }

/* （必要なら）内部ULの基本レイアウト。既存CSSがあるなら不要 */
#short-horror-panel .subcats,
#horror-works-panel .subcats {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px; margin:0; padding:10px 0; list-style:none;
}
</style>

<script>
(function($){
  // --- ユーティリティ（開閉をARIAとアニメで統一） ---
  var OPEN = 180, CLOSE = 120;
  function openPanel($btn, $panel){
    if ($panel.is(':visible')) return;
    $panel.stop(true,true).slideDown(OPEN, function(){
      $panel.attr('aria-hidden','false');
    });
    $btn.attr('aria-expanded','true');
  }
  function closePanel($btn, $panel){
    if (!$panel.is(':visible')) return;
    $panel.stop(true,true).slideUp(CLOSE, function(){
      $panel.attr('aria-hidden','true');
    });
    $btn.attr('aria-expanded','false');
  }

  // --- 初期化：ARIAに合わせて表示状態を整える ---
  function initPanel($panel){
    if ($panel.attr('aria-hidden') === 'false'){ $panel.show(); }
    else { $panel.hide(); }
  }
  $(function(){
    var $shBtn  = $('#short-horror-toggle');
    var $shPane = $('#short-horror-panel');
    var $hwBtn  = $('#horror-works-toggle');
    var $hwPane = $('#horror-works-panel');

    // 初期状態の同期
    initPanel($shPane);
    initPanel($hwPane);

    // --- 既存の競合ハンドラを一旦解除してからバインド（重複防止） ---
    $shBtn.off('.navToggle').on('click.navToggle', function(e){
      e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
      if ($shPane.is(':visible')) {
        closePanel($shBtn, $shPane);
      } else {
        closePanel($hwBtn, $hwPane);      // 相互排他
        openPanel($shBtn, $shPane);
      }
      return false; // 他ハンドラを完全遮断
    });

    $hwBtn.off('.navToggle').on('click.navToggle', function(e){
      e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();
      if ($hwPane.is(':visible')) {
        closePanel($hwBtn, $hwPane);
      } else {
        closePanel($shBtn, $shPane);      // 相互排他
        openPanel($hwBtn, $hwPane);
      }
      return false;
    });

    // --- 「他リンクで閉じる」をトグル以外に限定して再バインド ---
    $('#menu a').not('#short-horror-toggle, #horror-works-toggle')
      .off('.navClose')
      .on('click.navClose', function(){
        closePanel($shBtn, $shPane);
        closePanel($hwBtn, $hwPane);
      });
  });
})(jQuery);
</script>