/* ============================================================
   エオルゼア攻略ガイド 全部入りCSS（貼替用）
   ----------------------------------------------------------
   このファイル1つを「はてなブログ→デザイン→カスタマイズ→デザインCSS」に
   全部上書き貼り付けすればOK。
   最終更新: 2026-05-24（D2/D3/D4 一括：monica風ベージュ＋紺色h2＋3カラム特集タイル）
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cinzel+Decorative:wght@400;700;900&family=Marcellus&family=Noto+Sans+JP:wght@400;500;600;700;900&family=Noto+Serif+JP:wght@400;500;700&display=swap');

:root {
  --bg-page:       #f5f2eb;
  --bg-card:       #ffffff;
  --bg-card-alt:   #fdfaf4;
  --text-main:     #2a2418;
  --text-body:     #3a3228;
  --text-muted:    #7a7068;
  --link:          #1a6ea0;
  --link-hover:    #c8900a;

  --gold:          #c8900a;
  --gold-light:    #f0b830;
  --gold-dark:     #8a6010;
  --gold-glow:     rgba(200, 144, 10, 0.35);
  --crystal:       #2a8ab8;
  --purple:        #7040b0;
  --border-gold:   rgba(200, 144, 10, 0.4);
  --border-strong: rgba(200, 144, 10, 0.7);
  --shadow-card:   0 2px 16px rgba(0, 0, 0, 0.1);
}

html {
  background-color: #0a1230;
}

body {
  background: linear-gradient(180deg, #fafafa 0%, #f5f2eb 100%) !important;
  background-attachment: scroll !important;
  color: var(--text-body) !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

#wrapper, #container, #content, #main,
#box1, #box2, #sidebar, .main-inner { background: transparent !important; }

a { color: var(--link) !important; text-decoration: none !important; transition: color 0.2s; }
a:hover { color: var(--link-hover) !important; }

/* ================================================================
   サイトヘッダー（ダーク星空＋画像対応）
   ================================================================ */
#blog-title, .site-header {
  background:
    radial-gradient(ellipse at 50% 140%, rgba(200,144,10,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 50%, rgba(80,50,180,0.15)  0%, transparent 52%),
    radial-gradient(ellipse at 85% 50%, rgba(40,130,200,0.1)  0%, transparent 50%),
    radial-gradient(circle, rgba(255,255,255,0.8) 0.5px, transparent 0.5px) 20px 25px / 140px 140px,
    radial-gradient(circle, rgba(255,255,255,0.55) 1px,  transparent 1px)   70px 90px / 300px 300px,
    linear-gradient(180deg, #030610 0%, #070d1e 65%, #0d1530 100%) !important;
  border-bottom: 2px solid rgba(200,144,10,0.6) !important;
  padding: 56px 24px 44px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

#blog-title::before, #blog-title::after,
.site-header::before, .site-header::after { z-index: 1; }

#blog-title::before, .site-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #7eb8d4 25%, #f0b830 50%, #7eb8d4 75%, transparent 100%);
  opacity: 0.65;
  box-shadow: 0 0 10px rgba(126,184,212,0.4);
}

#blog-title::after, .site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  box-shadow: 0 0 16px var(--gold-glow);
}

#blog-title a, .site-title a {
  color: #f5d878 !important;
  font-family: 'Noto Sans JP', serif !important;
  font-size: 2.3rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-decoration: none !important;
  text-shadow: 0 0 28px rgba(200,144,10,0.5), 0 2px 10px rgba(0,0,0,1) !important;
  transition: text-shadow 0.4s;
}

#blog-title a:hover, .site-title a:hover {
  text-shadow: 0 0 44px rgba(200,144,10,0.8), 0 2px 10px rgba(0,0,0,1) !important;
}

#blog-description, .site-description {
  color: rgba(200,190,160,0.8) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
  margin-top: 10px !important;
}

/* ヘッダー：Phase1 Eorzea Chronicle 風（紺背景＋金枠＋クリスタル装飾） */
#blog-title.with-bg-image, .site-header.with-bg-image,
#blog-title, .site-header {
  background:
    linear-gradient(180deg, rgba(13,21,64,0.88) 0%, rgba(7,13,40,0.78) 50%, rgba(13,21,64,0.92) 100%),
    radial-gradient(ellipse at 10% 50%, rgba(126,184,212,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 50%, rgba(126,184,212,0.18) 0%, transparent 45%),
    radial-gradient(circle, rgba(255,255,255,0.4) 0.5px, transparent 0.5px) 30px 35px / 160px 160px,
    radial-gradient(circle, rgba(255,235,180,0.35) 1px, transparent 1px) 80px 100px / 320px 320px,
    url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260519/20260519220013.jpg') center 35% / cover no-repeat,
    linear-gradient(180deg, #0a1230 0%, #060916 100%) !important;
  background-color: #0a1230 !important;
  min-height: 280px;
  border-top: 1px solid rgba(240,214,142,0.5) !important;
  border-bottom: 2px solid rgba(240,214,142,0.65) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.4),
    inset 0 -1px 0 rgba(255,235,180,0.4),
    0 4px 16px rgba(0,0,0,0.5) !important;
  padding: 36px 24px 30px !important;
  position: relative !important;
}

/* ヘッダー上部：細い金線＋クリスタル端飾り */
#blog-title::before, .site-header::before {
  content: '' !important;
  position: absolute !important;
  top: 12px !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(245,216,120,0.6) 20%, rgba(255,235,180,0.9) 50%, rgba(126,184,212,0.6) 80%, transparent 100%) !important;
  z-index: 2 !important;
  box-shadow: 0 0 8px rgba(240,214,142,0.3) !important;
}

#blog-title::after, .site-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 24px !important;
  right: 24px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(245,216,120,0.6) 20%, rgba(255,235,180,0.9) 50%, rgba(126,184,212,0.6) 80%, transparent 100%) !important;
  z-index: 2 !important;
  box-shadow: 0 0 12px rgba(240,214,142,0.4) !important;
}

/* スマホ：背景画像を contain で全体表示 */
@media (max-width: 768px) {
  #blog-title.with-bg-image, .site-header.with-bg-image,
  #blog-title, .site-header {
    background:
      linear-gradient(180deg, rgba(13,21,64,0.85) 0%, rgba(7,13,40,0.70) 50%, rgba(13,21,64,0.92) 100%),
      radial-gradient(circle, rgba(255,255,255,0.4) 0.5px, transparent 0.5px) 20px 25px / 140px 140px,
      url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260519/20260519220013.jpg') center top / contain no-repeat,
      #0a1230 !important;
    background-color: #0a1230 !important;
    min-height: 220px;
    padding: 20px 14px 24px !important;
  }
}

.site-header .site-sub-copy {
  display: block;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(240,184,48,0.85);
  margin-top: 12px;
  letter-spacing: 1px;
}
.site-header .site-sub-copy::before { content: '〜 '; }
.site-header .site-sub-copy::after  { content: ' 〜'; }

/* ================================================================
   ナビゲーション（はてな標準）
   ================================================================ */
.header-nav, .globalheader-container {
  background: rgba(3, 6, 16, 0.97) !important;
  border-bottom: 1px solid rgba(200,144,10,0.3) !important;
}
.header-nav a { color: rgba(200,190,160,0.75) !important; font-size: 0.85rem; padding: 10px 14px; transition: color 0.2s; }
.header-nav a:hover { color: #f0b830 !important; }

/* ================================================================
   カスタムグローバルナビ
   ================================================================ */
#eorzea-globalnav {
  background: linear-gradient(180deg, #070d1e 0%, #0a1228 100%);
  border-bottom: 2px solid rgba(200,144,10,0.55);
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  position: sticky;
  top: 0;
  z-index: 9999;
}

#eorzea-globalnav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px;
}

#eorzea-globalnav .nav-inner a {
  color: rgba(220,205,165,0.82) !important;
  font-size: 0.82rem !important;
  font-family: 'Noto Serif JP', serif !important;
  letter-spacing: 0.06em;
  padding: 10px 14px !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.2s, background 0.2s !important;
  white-space: nowrap;
  position: relative;
}

#eorzea-globalnav .nav-inner a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 14px; right: 14px;
  height: 2px;
  background: #c8900a;
  transform: scaleX(0);
  transition: transform 0.2s;
}

#eorzea-globalnav .nav-inner a:hover {
  color: #f0b830 !important;
  background: rgba(200,144,10,0.08) !important;
}
#eorzea-globalnav .nav-inner a:hover::after { transform: scaleX(1); }

#eorzea-globalnav .nav-inner a.nav-index {
  color: #f0b830 !important;
  border: 1px solid rgba(200,144,10,0.4) !important;
  border-radius: 3px !important;
  margin: 6px 6px !important;
  padding: 5px 14px !important;
}
#eorzea-globalnav .nav-inner a.nav-index:hover { background: rgba(200,144,10,0.15) !important; }

@media (max-width: 768px) {
  #eorzea-globalnav .nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #eorzea-globalnav .nav-inner::-webkit-scrollbar { display: none; }
  #eorzea-globalnav .nav-inner a { font-size: 0.78rem !important; padding: 9px 10px !important; }
}

/* ================================================================
   記事カード
   ================================================================ */
.entry {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  margin-bottom: 28px !important;
  padding: 30px 38px !important;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(200,144,10,0.06) !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
  position: relative !important;
}

.entry::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background:
    linear-gradient(to right,  var(--gold-dark) 8px, transparent 8px) top left    / 16px 1px no-repeat,
    linear-gradient(to bottom, var(--gold-dark) 8px, transparent 8px) top left    / 1px 16px no-repeat,
    linear-gradient(to left,   var(--gold-dark) 8px, transparent 8px) top right   / 16px 1px no-repeat,
    linear-gradient(to bottom, var(--gold-dark) 8px, transparent 8px) top right   / 1px 16px no-repeat,
    linear-gradient(to right,  var(--gold-dark) 8px, transparent 8px) bottom left / 16px 1px no-repeat,
    linear-gradient(to top,    var(--gold-dark) 8px, transparent 8px) bottom left / 1px 16px no-repeat,
    linear-gradient(to left,   var(--gold-dark) 8px, transparent 8px) bottom right/ 16px 1px no-repeat,
    linear-gradient(to top,    var(--gold-dark) 8px, transparent 8px) bottom right/ 1px 16px no-repeat;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.entry:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-card), 0 4px 20px rgba(200,144,10,0.12) !important;
}
.entry:hover::before { opacity: 1; }

.entry-header, .entry-header-menu, .entry-title-container {
  background: transparent !important;
  color: #1a1408 !important;
}

.entry-title, .entry-title a {
  color: #1a1408 !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  text-decoration: none !important;
}
.entry-title a:hover { color: var(--gold) !important; }

.entry-date, .date, time { color: var(--text-muted) !important; font-size: 0.78rem !important; }

/* ================================================================
   記事本文
   ================================================================ */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content dt,
.entry-content dd,
.entry-content span,
.entry-body,
.entry-body p {
  color: var(--text-body) !important;
  line-height: 1.95 !important;
}

.entry-content h2 {
  background: linear-gradient(90deg, rgba(200,144,10,0.08) 0%, transparent 60%) !important;
  border-left: 4px solid var(--gold) !important;
  border-bottom: 1px solid rgba(200,144,10,0.2) !important;
  color: #1a1408 !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  margin: 44px 0 18px !important;
  padding: 10px 16px !important;
  letter-spacing: 0.04em !important;
}

.entry-content h3 {
  color: var(--crystal) !important;
  border-bottom: 1px solid rgba(42,138,184,0.3) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  margin: 32px 0 14px !important;
  padding-bottom: 5px !important;
}

.entry-content h4 {
  color: var(--gold) !important;
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  margin: 24px 0 10px !important;
}

.entry-content a {
  color: var(--link) !important;
  border-bottom: 1px solid rgba(26,110,160,0.3) !important;
  text-decoration: none !important;
}
.entry-content a:hover {
  color: var(--link-hover) !important;
  border-bottom-color: var(--gold) !important;
}

.entry-content table { width: 100% !important; border-collapse: collapse !important; font-size: 0.9rem !important; margin: 24px 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }

.entry-content th {
  background: linear-gradient(90deg, rgba(200,144,10,0.15) 0%, rgba(200,144,10,0.06) 100%) !important;
  border: 1px solid rgba(200,144,10,0.4) !important;
  color: #1a1408 !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  text-align: left !important;
}

.entry-content td {
  border: 1px solid rgba(200,144,10,0.18) !important;
  color: var(--text-body) !important;
  padding: 9px 16px !important;
}

.entry-content tr:nth-child(even) td { background: #fdf9f2 !important; }
.entry-content tr:hover td { background: #fff8e8 !important; }

.entry-content blockquote {
  background: #f8f6f0 !important;
  border-left: 4px solid var(--crystal) !important;
  border-radius: 0 4px 4px 0 !important;
  color: var(--text-muted) !important;
  margin: 24px 0 !important;
  padding: 14px 22px !important;
}

.entry-content pre {
  background: #1e2433 !important;
  border: 1px solid rgba(200,144,10,0.2) !important;
  border-radius: 6px !important;
  color: #a8d8a8 !important;
  font-family: 'Consolas','Monaco',monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  overflow-x: auto !important;
  padding: 18px 22px !important;
}

.entry-content code {
  background: #f0ede6 !important;
  border: 1px solid rgba(200,144,10,0.2) !important;
  border-radius: 3px !important;
  color: #8a3a10 !important;
  font-size: 0.875em !important;
  padding: 2px 7px !important;
}

.entry-content ul li::marker { color: var(--gold) !important; }
.entry-content ol li::marker { color: var(--gold) !important; font-weight: 700 !important; }

.entry-content img {
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 0 1px rgba(200,144,10,0.12) !important;
  max-width: 100% !important;
}

.entry-content hr {
  border: none !important;
  border-top: 1px solid rgba(200,144,10,0.25) !important;
  margin: 36px 0 !important;
  position: relative !important;
}
.entry-content hr::after {
  content: '✦';
  color: var(--gold);
  left: 50%; position: absolute; top: -11px;
  transform: translateX(-50%);
  font-size: 0.78rem;
  background: var(--bg-card);
  padding: 0 12px;
}

/* ================================================================
   サイドバー
   ================================================================ */
.hatena-module, .widget, .module {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 4px !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  position: relative;
}

.hatena-module::before, .widget::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  var(--gold-dark) 6px, transparent 6px) top left    / 10px 1px no-repeat,
    linear-gradient(to bottom, var(--gold-dark) 6px, transparent 6px) top left    / 1px 10px no-repeat,
    linear-gradient(to left,   var(--gold-dark) 6px, transparent 6px) top right   / 10px 1px no-repeat,
    linear-gradient(to bottom, var(--gold-dark) 6px, transparent 6px) top right   / 1px 10px no-repeat,
    linear-gradient(to right,  var(--gold-dark) 6px, transparent 6px) bottom left / 10px 1px no-repeat,
    linear-gradient(to top,    var(--gold-dark) 6px, transparent 6px) bottom left / 1px 10px no-repeat,
    linear-gradient(to left,   var(--gold-dark) 6px, transparent 6px) bottom right/ 10px 1px no-repeat,
    linear-gradient(to top,    var(--gold-dark) 6px, transparent 6px) bottom right/ 1px 10px no-repeat;
  pointer-events: none; opacity: 0.55;
}

.hatena-module-title, .widget-title, .module-title {
  background: linear-gradient(90deg, rgba(200,144,10,0.12) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--border-gold) !important;
  color: var(--gold) !important;
  font-family: 'Noto Sans JP', serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  padding: 10px 16px !important;
  text-transform: uppercase !important;
}

.hatena-module-body, .widget-content, .module-body { padding: 14px 16px !important; }

.hatena-module a, .widget a, .module a {
  color: var(--text-muted) !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.hatena-module a:hover, .widget a:hover, .module a:hover { color: var(--gold) !important; }

/* ================================================================
   ページネーション
   ================================================================ */
.pager, .pagination { margin: 32px 0 !important; text-align: center !important; }

.pager a, .pagination a, .pager span {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: 3px !important;
  color: var(--gold) !important;
  display: inline-block !important;
  margin: 0 3px !important;
  padding: 7px 18px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

.pager a:hover, .pagination a:hover {
  background: rgba(200,144,10,0.08) !important;
  border-color: var(--border-strong) !important;
}

/* ================================================================
   フッター
   ================================================================ */
#footer, .site-footer, footer {
  background: #0a0e20 !important;
  border-top: 2px solid rgba(200,144,10,0.4) !important;
  color: rgba(200,190,160,0.6) !important;
  font-size: 0.8rem !important;
  padding: 28px 24px !important;
  text-align: center !important;
}

#footer a, .site-footer a { color: rgba(200,190,160,0.6) !important; text-decoration: none !important; }
#footer a:hover, .site-footer a:hover { color: #f0b830 !important; }

/* ================================================================
   細部
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: rgba(200,144,10,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
::selection { background: rgba(200,144,10,0.2); color: #1a1408; }

/* ================================================================
   モバイル対応
   ================================================================ */
@media (max-width: 768px) {
  #wrapper, .wrapper, .container { padding: 0 !important; }
  #content-inner, .content-inner { padding: 0 12px !important; }

  .entry-content {
    font-size: 0.95rem !important;
    line-height: 1.85 !important;
  }

  #blog-title, .blog-title-inner, .site-header { padding: 16px 12px !important; }
  #blog-title-inner a, .blog-title a { font-size: 1.4rem !important; }
  #blog-description, .blog-description { font-size: 0.8rem !important; }
  #globalheader-container, .globalheader { font-size: 0.85rem !important; }
  #box2, .sidebar { margin-top: 32px !important; }
  .entry { padding: 16px 12px !important; }
  #footer, footer { padding: 20px 12px !important; font-size: 0.78rem !important; }
}

/* ================================================================
   プレイヤー発信パーツ
   ================================================================ */
.author-card {
  background: linear-gradient(180deg, #fdfaf4 0%, #f5f2eb 100%);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 18px 16px 16px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.author-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  border-radius: 8px 8px 0 0;
}

.author-card .author-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  margin: 0 auto 10px;
  display: block;
  object-fit: cover;
}

.author-card .author-label {
  text-align: center;
  font-family: 'Noto Sans JP', serif;
  font-size: 11px;
  color: var(--gold-dark);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.author-card .author-label::before { content: '◆ '; }
.author-card .author-label::after  { content: ' ◆'; }

.author-card .author-stats { font-size: 13px; color: var(--text-body); line-height: 1.8; margin: 10px 0; }
.author-card .author-stats dt { display: inline; color: var(--text-muted); font-weight: 500; }
.author-card .author-stats dd { display: inline; margin-left: 4px; color: var(--text-main); font-weight: 600; }
.author-card .author-stats dd::after { content: ''; display: block; }

.author-card .author-message {
  font-size: 12px; color: var(--text-muted); font-style: italic; text-align: center;
  border-top: 1px dashed var(--border-gold);
  padding-top: 10px; margin-top: 12px;
}

.author-card .author-link { display: block; text-align: center; margin-top: 8px; font-size: 12px; color: var(--link) !important; }

.article-author-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card-alt);
  border-left: 4px solid var(--gold);
  padding: 10px 14px; margin: 16px 0 24px;
  font-size: 13px; color: var(--text-body);
  border-radius: 0 6px 6px 0;
}

.article-author-bar .author-mini-icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold); flex-shrink: 0; }
.article-author-bar .author-info { flex: 1; line-height: 1.5; }
.article-author-bar .author-info strong { color: var(--gold-dark); }
.article-author-bar .author-info .credentials { font-size: 11px; color: var(--text-muted); display: block; }
.article-author-bar .update-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.screenshot-block { margin: 24px 0; border: 1px solid var(--border-gold); border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.screenshot-block img { display: block; width: 100%; height: auto; }
.screenshot-caption { background: linear-gradient(180deg, #fdfaf4 0%, #f5f2eb 100%); padding: 10px 14px; font-size: 13px; color: var(--text-body); line-height: 1.6; border-top: 1px solid var(--border-gold); position: relative; }
.screenshot-caption::before { content: '📸'; margin-right: 6px; }
.screenshot-caption .caption-meta { display: inline-block; background: var(--gold-light); color: var(--gold-dark); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 6px; letter-spacing: 0.5px; }
.screenshot-caption .caption-text { color: var(--text-body); }

@media (max-width: 768px) {
  .author-card { padding: 14px 12px; }
  .author-card .author-icon { width: 64px; height: 64px; }
  .article-author-bar { flex-wrap: wrap; }
  .article-author-bar .update-date { width: 100%; text-align: right; }
}

/* ================================================================
   スマホ向け：日本語改行・テーブル折り返し
   ================================================================ */
@media (max-width: 768px) {
  .entry-content,
  .entry-content p,
  .entry-content li,
  .entry-content dd,
  .entry-content dt,
  .entry-content blockquote,
  .entry-content span,
  .entry-content strong {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    hanging-punctuation: allow-end !important;
  }

  .entry-content > div[style*="overflow-x"],
  .entry-content .table-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  .entry-content table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    overflow-x: visible !important;
    white-space: normal !important;
    border-collapse: collapse !important;
    margin: 12px 0 !important;
    font-size: 0.82rem !important;
  }

  .entry-content table th,
  .entry-content table td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    padding: 6px 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
    vertical-align: top !important;
    text-align: left !important;
  }

  .entry-content table th:first-child,
  .entry-content table td:first-child {
    width: 32% !important;
    min-width: 70px !important;
    background: rgba(26,47,78,0.03) !important;
    font-weight: 600 !important;
  }

  .entry-content img,
  .entry-content figure img,
  .screenshot-block img {
    max-width: 100% !important;
    height: auto !important;
  }

  .entry-content a,
  .entry-content code {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }

  .entry-content pre {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    white-space: pre !important;
    font-size: 0.78rem !important;
    padding: 12px !important;
  }

  .entry-content p {
    line-height: 1.85 !important;
    margin: 10px 0 !important;
  }

  /* `class="scroll-table"`で横スクロールに戻す */
  .entry-content table.scroll-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    table-layout: auto !important;
  }

  /* 改行根治 */
  .entry-title,
  .entry-title a {
    font-size: 1.08rem !important;
    line-height: 1.45 !important;
    letter-spacing: -0.01em !important;
  }
  .entry-content h2 {
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }
  .entry-content h3 {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    padding: 6px 10px !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
  }
  .entry-content span[style*="border-radius"][style*="background"],
  .entry-content span[style*="display:inline-block"][style*="background"] {
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .entry-content table,
  .entry-content table th,
  .entry-content table td {
    font-size: 0.76rem !important;
  }
  .entry-content table th:first-child,
  .entry-content table td:first-child {
    width: 36% !important;
  }
}

/* ================================================================
   公式風カテゴリラベル（クリスタル系）
   ================================================================ */
.entry-categories a,
.archive-entry-categories a,
.categories a {
  display: inline-block !important;
  font-family: 'Noto Sans JP', 'Noto Sans JP', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 3px 10px !important;
  margin: 2px 4px 2px 0 !important;
  border-radius: 2px !important;
  border: none !important;
  background: linear-gradient(180deg, #4ba0cc 0%, #2a7aa8 100%) !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  transition: opacity 0.2s !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 1px 2px rgba(0,0,0,0.1) !important;
}

.entry-categories a:hover,
.archive-entry-categories a:hover,
.categories a:hover {
  background: linear-gradient(180deg, #6cb8de 0%, #4a9ec8 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.entry-categories a[href*="ニュース"],
.archive-entry-categories a[href*="ニュース"]      { background: #1976d2 !important; }
.entry-categories a[href*="速報"],
.archive-entry-categories a[href*="速報"]         { background: #d62828 !important; }
.entry-categories a[href*="パッチ"],
.archive-entry-categories a[href*="パッチ"]        { background: #7040b0 !important; }
.entry-categories a[href*="ジョブ"],
.archive-entry-categories a[href*="ジョブ"]        { background: #c0392b !important; }
.entry-categories a[href*="初心者"],
.archive-entry-categories a[href*="初心者"]        { background: #2e8b40 !important; }
.entry-categories a[href*="ミラプリ"],
.archive-entry-categories a[href*="ミラプリ"]      { background: #d04080 !important; }
.entry-categories a[href*="装備"],
.archive-entry-categories a[href*="装備"]         { background: #c8900a !important; color: #1a1408 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important; }
.entry-categories a[href*="コンテンツ"],
.archive-entry-categories a[href*="コンテンツ"]    { background: #2a8ab8 !important; }
.entry-categories a[href*="ハウジング"],
.archive-entry-categories a[href*="ハウジング"]    { background: #6b8e23 !important; }
.entry-categories a[href*="ギル"],
.archive-entry-categories a[href*="ギル"]         { background: #b8860b !important; color: #1a1408 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important; }
.entry-categories a[href*="お知らせ"],
.archive-entry-categories a[href*="お知らせ"]      { background: #e67e22 !important; }
.entry-categories a[href*="拡張"],
.archive-entry-categories a[href*="拡張"]         { background: #5a2d8b !important; }
.entry-categories a[href*="デバイス"],
.archive-entry-categories a[href*="デバイス"]      { background: #455a64 !important; }
.entry-categories a[href*="零式"],
.archive-entry-categories a[href*="零式"]         { background: #8b0000 !important; }
.entry-categories a[href*="FF14"],
.archive-entry-categories a[href*="FF14"]        { background: linear-gradient(180deg, #4ba0cc 0%, #2a7aa8 100%) !important; color: #ffffff !important; }

/* ================================================================
   クリスタルカラー（追加変数）
   ================================================================ */
:root {
  --crystal-bg:    #e3f3fa;
  --crystal-mid:   #2a8ab8;
  --crystal-dark:  #1a4a6e;
  --crystal-light: #a8d8e8;
  --crystal-pale:  #f0f8fc;
}

/* ================================================================
   記事内目次（toc）— クリスタル
   ================================================================ */
.table-of-contents {
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
  border: 1px solid var(--crystal-light) !important;
  border-radius: 4px !important;
  padding: 50px 22px 14px !important;
  margin: 28px 0 !important;
  position: relative !important;
  font-family: 'Noto Serif JP', serif !important;
}
.table-of-contents::before {
  content: '◆ TABLE OF CONTENTS ◆' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  font-family: 'Noto Sans JP', serif !important;
  letter-spacing: 2px !important;
  color: var(--crystal-dark) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-bottom: 1px solid var(--crystal-light) !important;
  padding: 14px 22px 10px !important;
  margin: 0 !important;
  background: linear-gradient(180deg, var(--crystal-bg) 0%, var(--crystal-pale) 100%) !important;
  border-radius: 4px 4px 0 0 !important;
}
.table-of-contents ul { list-style: none !important; padding-left: 0 !important; margin: 0 !important; }
.table-of-contents li { margin: 4px 0 !important; line-height: 1.6 !important; padding-left: 18px !important; position: relative !important; color: var(--text-body) !important; }
.table-of-contents li::before { content: '▸'; position: absolute !important; left: 4px !important; color: var(--crystal-mid) !important; font-size: 0.85rem !important; }
.table-of-contents li li { padding-left: 16px !important; font-size: 0.92em !important; margin: 2px 0 !important; }
.table-of-contents li li::before { content: '・'; color: var(--crystal-dark) !important; }
.table-of-contents a { color: var(--link) !important; text-decoration: none !important; border-bottom: 1px dotted transparent !important; transition: all 0.2s !important; }
.table-of-contents a:hover { color: var(--crystal-mid) !important; border-bottom-color: var(--crystal-mid) !important; }

/* ================================================================
   公式関連リンク — クリスタル
   ================================================================ */
.official-links {
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
  border: 1px solid var(--crystal-light) !important;
  border-radius: 4px !important;
  padding: 18px 22px !important;
  margin: 32px 0 16px !important;
  position: relative !important;
}
.official-links::before {
  content: '◆ OFFICIAL LINKS ◆';
  display: block !important;
  font-family: 'Noto Sans JP', serif !important;
  letter-spacing: 2px !important;
  color: var(--crystal-dark) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-bottom: 1px solid var(--crystal-light) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}
.official-links ul {
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 8px !important;
}
.official-links li { margin: 0 !important; padding: 0 !important; }
.official-links a {
  display: block !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid var(--crystal-light) !important;
  border-radius: 3px !important;
  padding: 10px 14px 10px 32px !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: all 0.25s !important;
  position: relative !important;
}
.official-links a::before {
  content: '🔗';
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.9rem !important;
}
.official-links a:hover {
  background: rgba(42,138,184,0.10) !important;
  border-color: var(--crystal-mid) !important;
  color: var(--crystal-dark) !important;
  box-shadow: 0 0 10px rgba(42,138,184,0.25) !important;
}
.official-links .badge {
  display: inline-block !important;
  background: var(--crystal-mid) !important;
  color: #ffffff !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 2px !important;
  margin-right: 6px !important;
  letter-spacing: 0.5px !important;
  vertical-align: middle !important;
}
@media (max-width: 768px) {
  .official-links ul { grid-template-columns: 1fr !important; }
}

/* ================================================================
   関連記事カード — クリスタル
   ================================================================ */
.hatena-module-related-entries .hatena-module-title,
.entry-footer-section h3,
.related-entries h3,
.entry-footer-related h3 {
  font-family: 'Noto Sans JP', 'Noto Serif JP', serif !important;
  letter-spacing: 2px !important;
  color: var(--crystal-dark) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-top: 1px solid var(--crystal-light) !important;
  border-bottom: 1px solid var(--crystal-light) !important;
  padding: 10px 0 !important;
  margin: 32px 0 18px !important;
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
}

.hatena-module-related-entries .hatena-urllist,
.entry-footer-section .urllist,
.related-entries ul,
.entry-footer-related ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.hatena-module-related-entries .urllist-item,
.entry-footer-section .urllist-item,
.related-entries li {
  background: var(--bg-card) !important;
  border: 1px solid var(--crystal-light) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: all 0.25s !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important; padding: 0 !important;
  position: relative !important;
}

.hatena-module-related-entries .urllist-item:hover,
.entry-footer-section .urllist-item:hover,
.related-entries li:hover {
  border-color: var(--crystal-mid) !important;
  box-shadow: 0 4px 16px rgba(42,138,184,0.2) !important;
  transform: translateY(-2px) !important;
}

.hatena-module-related-entries .urllist-title-link,
.entry-footer-section .urllist-title-link,
.related-entries .urllist-title-link {
  display: block !important;
  padding: 12px 14px 4px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
}

.hatena-module-related-entries .urllist-title-link:hover,
.entry-footer-section .urllist-title-link:hover,
.related-entries .urllist-title-link:hover {
  color: var(--crystal-mid) !important;
}

/* ================================================================
   READ MOREボタン — クリスタル
   ================================================================ */
.read-more-link { text-align: center !important; margin: 22px 0 6px !important; width: 100% !important; }

.read-more-link a, .read-more a {
  display: inline-block !important;
  background: linear-gradient(180deg, #2a7aa8 0%, #1a5a88 100%) !important;
  color: #ffffff !important;
  border: 1px solid #4ba0cc !important;
  border-radius: 4px !important;
  padding: 11px 36px !important;
  font-family: 'Noto Sans JP', 'Noto Serif JP', serif !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: all 0.25s !important;
  position: relative !important;
}
.read-more-link a::after, .read-more a::after {
  content: ' ▸ READ MORE' !important;
  margin-left: 4px !important;
  color: #cfecf4 !important;
  font-size: 0.85em !important;
  letter-spacing: 1px !important;
  display: inline-block !important;
  transition: transform 0.25s !important;
}
.read-more-link a:hover, .read-more a:hover {
  background: linear-gradient(180deg, #3690c0 0%, #267aa0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(42,138,184,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.read-more-link a:hover::after, .read-more a:hover::after { transform: translateX(4px) !important; }

/* ================================================================
   こんな人にオススメ — クリスタル
   ================================================================ */
.for-you {
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
  border: 1px solid var(--crystal-light) !important;
  border-left: 5px solid var(--crystal-mid) !important;
  border-radius: 4px !important;
  padding: 16px 22px !important;
  margin: 24px 0 !important;
  position: relative !important;
}
.for-you::before {
  content: '👤 こんな人にオススメ';
  display: block !important;
  font-family: 'Noto Serif JP', serif !important;
  color: var(--crystal-dark) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}
.for-you ul { margin: 6px 0 12px !important; padding-left: 1.4em !important; }
.for-you ul li { margin: 4px 0 !important; color: var(--text-body) !important; font-size: 0.95rem !important; list-style: '✓ ' !important; }
.for-you .recommend {
  display: block !important;
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid var(--crystal-light) !important;
  border-radius: 3px !important;
  padding: 10px 14px !important;
  margin-top: 10px !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}
.for-you .recommend::before { content: '👉 '; color: var(--crystal-mid) !important; }
.for-you .recommend:hover {
  background: rgba(42,138,184,0.08) !important;
  border-color: var(--crystal-mid) !important;
  color: var(--crystal-dark) !important;
}

/* ================================================================
   こちらも読まれています — クリスタル
   ================================================================ */
.next-reads { margin: 36px 0 16px !important; }
.next-reads::before {
  content: '◆ こちらも読まれています ◆';
  display: block !important;
  font-family: 'Noto Sans JP', serif !important;
  letter-spacing: 2px !important;
  color: var(--crystal-dark) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-top: 1px solid var(--crystal-light) !important;
  border-bottom: 1px solid var(--crystal-light) !important;
  padding: 10px 0 !important;
  margin-bottom: 16px !important;
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
}
.next-reads ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
}
.next-reads li { margin: 0 !important; padding: 0 !important; }
.next-reads a {
  display: block !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--crystal-light) !important;
  border-radius: 4px !important;
  padding: 14px 16px 14px 38px !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  transition: all 0.25s !important;
  position: relative !important;
}
.next-reads a::before {
  content: '▸';
  position: absolute !important;
  left: 14px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--crystal-mid) !important;
  font-size: 1.2rem !important;
  font-weight: bold !important;
  transition: transform 0.25s !important;
}
.next-reads a:hover {
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
  border-color: var(--crystal-mid) !important;
  color: var(--crystal-dark) !important;
  box-shadow: 0 4px 12px rgba(42,138,184,0.2) !important;
  transform: translateY(-2px) !important;
}
.next-reads a:hover::before { transform: translateY(-50%) translateX(3px) !important; }

/* ================================================================
   シリーズナビ — クリスタル
   ================================================================ */
.series-nav {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 32px 0 18px !important;
  padding: 14px 0 !important;
  border-top: 1px solid var(--crystal-light) !important;
  border-bottom: 1px solid var(--crystal-light) !important;
}
.series-nav a {
  flex: 1 !important;
  display: block !important;
  padding: 10px 14px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--crystal-light) !important;
  border-radius: 3px !important;
  color: var(--text-main) !important;
  text-decoration: none !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  max-width: 48% !important;
}
.series-nav .prev { text-align: left !important; }
.series-nav .prev::before {
  content: '◂ 前の記事' !important;
  display: block !important;
  font-size: 0.7rem !important;
  color: var(--crystal-dark) !important;
  letter-spacing: 1px !important;
  margin-bottom: 2px !important;
  font-family: 'Noto Sans JP', serif !important;
}
.series-nav .next { text-align: right !important; margin-left: auto !important; }
.series-nav .next::before {
  content: '次の記事 ▸' !important;
  display: block !important;
  font-size: 0.7rem !important;
  color: var(--crystal-dark) !important;
  letter-spacing: 1px !important;
  margin-bottom: 2px !important;
  font-family: 'Noto Sans JP', serif !important;
}
.series-nav a:hover {
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
  border-color: var(--crystal-mid) !important;
  color: var(--crystal-dark) !important;
}
@media (max-width: 600px) {
  .series-nav { flex-direction: column !important; }
  .series-nav a { max-width: 100% !important; }
}

/* ================================================================
   2026-05-19 オーナーフィードバック反映（最終）
   - 記事カード内アイキャッチを非表示
   - ヘッダーのサイトタイトル文字を白＋強い影
   - グロナビをクリスタル化
   ================================================================ */

/* 記事カード内アイキャッチを非表示 */
.entry-thumb-link,
.archive-entry-image-link,
.entry .entry-thumb,
.archive-entry .entry-thumb,
.entry-thumb {
  display: none !important;
}

body.page-index .entry,
body.page-archive .archive-entry,
body.archive .archive-entry {
  display: block !important;
  grid-template-columns: none !important;
}

/* ヘッダーのサイトタイトル：拡張版SVGロゴで置換（剣＋盾＋クリスタル装飾入り） */
#blog-title h1,
.site-header h1,
.site-title h1,
#title {
  background-image: url('https://dualstreammedia-droid.github.io/eorzea-guide-theme/logo.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  width: 100% !important;
  max-width: 900px !important;
  height: 200px !important;
  margin: 0 auto !important;
  text-indent: -9999em !important;
  overflow: hidden !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8)) !important;
  position: relative;
  z-index: 3;
}

#blog-title h1 a,
.site-header h1 a,
.site-title h1 a,
#title a,
#blog-title a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  color: transparent !important;
  background: none !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

@media (max-width: 768px) {
  #blog-title h1,
  .site-header h1,
  .site-title h1,
  #title {
    max-width: 380px !important;
    height: 110px !important;
  }
}
@media (max-width: 380px) {
  #blog-title h1,
  .site-header h1,
  .site-title h1,
  #title {
    max-width: 320px !important;
    height: 90px !important;
  }
}

#blog-title .header-description,
.site-header .header-description,
#blog-title .site-sub-copy,
.site-header .site-sub-copy {
  color: rgba(255,238,200,0.95) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.6) !important;
  font-weight: 500 !important;
}

#blog-title a:hover,
.site-header a:hover {
  color: #ffe9b5 !important;
}

/* グロナビ：藍色→クリスタル */
#eorzea-globalnav,
#eorzea-globalnav .nav-inner {
  background: linear-gradient(180deg, #2a7aa8 0%, #1a5a88 100%) !important;
}

/* ============= 2026-05-22 シンプル白基調・最終仕上げ ============= */

/* グローバルヘッダー（はてな上部）を白に */
#globalheader-container,
.globalheader,
header.globalHeader,
#globalheader {
  background: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* メインコンテンツコンテナを完全透明＋装飾削除 */
#main, .main-inner, #content-inner, #content {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 記事カードを完全シンプル白に */
.entry, .archive-entry {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  padding: 28px 32px !important;
}
.entry:hover, .archive-entry:hover {
  border-color: #c8900a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* 記事カード四隅角飾り削除 */
.entry::before, .archive-entry::before,
.entry::after, .archive-entry::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

#eorzea-globalnav .nav-inner a,
#eorzea-globalnav .nav-inner a.nav-index {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

#eorzea-globalnav .nav-inner a:hover,
#eorzea-globalnav .nav-inner a.nav-index:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

/* ================================================================
   Phase2: グロナビをタブ風（Eorzea Chronicle 準拠）
   - 上が角丸の選択タブ
   - 下は紺色背景に溶け込む
   - ホバーで上に浮く
   ================================================================ */

/* グロナビ全体：紺グラデ＋金枠（下に厚みのある金線） */
#eorzea-globalnav {
  background: linear-gradient(180deg, #0a1230 0%, #060916 100%) !important;
  border-top: 1px solid rgba(240,214,142,0.4) !important;
  border-bottom: 2px solid rgba(240,214,142,0.75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.3),
    0 2px 12px rgba(0,0,0,0.55) !important;
  padding: 6px 0 0 !important;
  min-height: 54px !important;
}

#eorzea-globalnav .nav-inner {
  padding: 0 8px !important;
  gap: 2px !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

/* 各タブ：上だけ角丸・下は枠なし */
#eorzea-globalnav .nav-inner a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(30,45,90,0.75) 0%, rgba(15,25,60,0.95) 100%) !important;
  border: 1px solid rgba(240,214,142,0.6) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 10px 16px 14px !important;
  color: #f0d68e !important;
  font-family: 'Noto Sans JP', 'Noto Sans JP', 'Noto Serif JP', serif !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.35),
    inset 1px 0 0 rgba(240,214,142,0.2),
    inset -1px 0 0 rgba(240,214,142,0.2),
    0 -3px 8px rgba(0,0,0,0.3) !important;
  transition: all 0.25s !important;
  position: relative !important;
  white-space: nowrap !important;
  min-height: 44px !important;
}

/* 絵文字を大きく表示（::first-letter で先頭の絵文字を大きく） */
#eorzea-globalnav .nav-inner a::first-letter {
  font-size: 1.25em !important;
  margin-right: 4px !important;
}

/* ::after の下線エフェクトは無効化（ボタン化のため） */
#eorzea-globalnav .nav-inner a::after {
  display: none !important;
}

/* 内側光のオーバーレイ */
#eorzea-globalnav .nav-inner a::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 11px 11px 0 0 !important;
  background: linear-gradient(180deg, rgba(255,235,180,0.10) 0%, transparent 60%, rgba(126,184,212,0.10) 100%) !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
  transition: opacity 0.25s !important;
}

/* ホバー：上に浮く・光る */
#eorzea-globalnav .nav-inner a:hover {
  background: linear-gradient(180deg, rgba(50,75,140,0.95) 0%, rgba(25,40,90,1) 100%) !important;
  border-color: rgba(255,235,180,1) !important;
  color: #ffeac8 !important;
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.55),
    inset 1px 0 0 rgba(240,214,142,0.4),
    inset -1px 0 0 rgba(240,214,142,0.4),
    0 -2px 16px rgba(240,214,142,0.5),
    0 0 24px rgba(240,214,142,0.3) !important;
}
#eorzea-globalnav .nav-inner a:hover::before { opacity: 1 !important; }

/* 「全記事一覧」は金グラデで強調 */
#eorzea-globalnav .nav-inner a.nav-index {
  background: linear-gradient(180deg, rgba(245,216,120,0.32) 0%, rgba(216,160,64,0.42) 100%) !important;
  border: 1px solid rgba(255,235,180,0.95) !important;
  color: #fff5d1 !important;
  font-weight: 700 !important;
  margin: 0 4px !important;
  padding: 10px 20px 14px !important;
}
#eorzea-globalnav .nav-inner a.nav-index:hover {
  background: linear-gradient(180deg, rgba(245,216,120,0.48) 0%, rgba(216,160,64,0.58) 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.65),
    0 -2px 20px rgba(240,214,142,0.7),
    0 0 28px rgba(240,214,142,0.4) !important;
}

/* タブ間の小クリスタル装飾セパレータ（隣接タブ間） */
#eorzea-globalnav .nav-inner a + a::after {
  content: '✦' !important;
  position: absolute !important;
  left: -10px !important;
  bottom: 14px !important;
  color: rgba(240,214,142,0.6) !important;
  font-size: 0.6rem !important;
  pointer-events: none !important;
  display: block !important;
}

/* ================================================================
   2026-05-19 FF14フォントテイスト強化
   - 本文・見出しを Shippori Mincho（重厚な明朝）へ
   - 英字見出し・タイトルを Cinzel + Cormorant Garamond
   - AI感のある「整いすぎた標準セリフ」から脱却
   ================================================================ */

/* 本文：Noto Sans JP（読みやすさ最優先・モダンゴシック） */
body {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif !important;
}

.entry-content,
.entry-content p,
.entry-content li,
.entry-content dt,
.entry-content dd,
.entry-content span,
.entry-body,
.entry-body p {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif !important;
  font-weight: 400 !important;
}

/* 記事タイトル：Noto Sans JP 700（太字・大きく） */
.entry-title,
.entry-title a,
.archive-entry-title,
.archive-entry-title a {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

/* h2：Noto Sans JP 700 */
.entry-content h2 {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* h3：Noto Sans JP 600 */
.entry-content h3 {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* h4：Cinzel + Noto Sans JP */
.entry-content h4 {
  font-family: 'Noto Sans JP', 'Noto Sans JP', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* サイトタイトル：Cinzel + Cormorant Garamond（クラシックローマン） */
#blog-title a,
#blog-title h1,
#blog-title h1 a,
.site-header h1,
.site-header h1 a,
.site-title a {
  font-family: 'Noto Sans JP', 'Cormorant Garamond', 'Noto Sans JP', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}

/* テーマ装飾コピー類（◆ TABLE OF CONTENTS ◆等の見出し）：Cinzel Decorative */
.table-of-contents::before,
.official-links::before,
.next-reads::before {
  font-family: 'Noto Sans JP', 'Noto Sans JP', serif !important;
  font-weight: 700 !important;
}

/* グロナビ：日本語は Shippori、項目名感を出す */
#eorzea-globalnav .nav-inner a {
  font-family: 'Noto Sans JP', 'Noto Serif JP', serif !important;
}

/* サイドバーモジュールタイトル：Cinzel Decorative */
.hatena-module-title,
.widget-title,
.module-title {
  font-family: 'Noto Sans JP', 'Noto Sans JP', serif !important;
}

/* テーブルヘッダー・引用：Shippori Mincho で統一 */
.entry-content th,
.entry-content blockquote {
  font-family: 'Noto Sans JP', 'Noto Serif JP', serif !important;
}

/* READ MOREボタン：Cinzel Decorative で装飾感 */
.read-more-link a,
.read-more a {
  font-family: 'Noto Sans JP', 'Noto Sans JP', 'Noto Sans JP', serif !important;
  font-weight: 700 !important;
}

/* スマホ：グロナビを折り返し表示で全項目を画面内に収める（切れ問題対応） */
@media (max-width: 768px) {
  #eorzea-globalnav .nav-inner {
    padding: 2px 4px 0 !important;
    gap: 2px !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }
  #eorzea-globalnav .nav-inner a {
    font-size: 0.66rem !important;
    padding: 5px 8px 8px !important;
    letter-spacing: 0 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border-radius: 8px 8px 0 0 !important;
    min-height: 32px !important;
  }
  #eorzea-globalnav .nav-inner a.nav-index {
    font-size: 0.66rem !important;
    margin: 0 2px !important;
    padding: 5px 10px 8px !important;
  }
  #eorzea-globalnav .nav-inner a::first-letter {
    font-size: 1.1em !important;
  }
  /* スマホでは ✦ セパレータ非表示 */
  #eorzea-globalnav .nav-inner a + a::after {
    display: none !important;
  }
}
@media (max-width: 380px) {
  #eorzea-globalnav .nav-inner a {
    font-size: 0.64rem !important;
    padding: 5px 6px !important;
  }
  #eorzea-globalnav .nav-inner a.nav-index {
    font-size: 0.64rem !important;
    padding: 3px 8px !important;
  }
}

/* ================================================================
   2026-05-19 オーナーフィードバック反映（追加修正）
   - サブコピーが背景キャラと被って読めない → 半透明ボックス＋強影
   - スマホ関連記事の右側がはみ出る → 1カラム強制
   - スマホ本文の改行が多すぎる → line-break: loose に緩和
   ================================================================ */

/* ----- ヘッダーサブコピー（"FF14を楽しむためのガイドをお届けします"等） ----- */
#blog-description,
.site-description,
.site-header .site-sub-copy,
#blog-title .header-description,
.site-header .header-description {
  display: inline-block !important;
  background: rgba(20,12,8,0.55) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  padding: 5px 16px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(240,214,142,0.3) !important;
  color: #ffeac8 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.8) !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.08em !important;
  margin-top: 14px !important;
  font-weight: 500 !important;
}

@media (max-width: 768px) {
  #blog-description,
  .site-description,
  .site-header .site-sub-copy,
  #blog-title .header-description,
  .site-header .header-description {
    font-size: 0.78rem !important;
    padding: 4px 12px !important;
    margin-top: 10px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ----- スマホ関連記事：1カラム強制（右側はみ出し対策） ----- */
@media (max-width: 768px) {
  .hatena-module-related-entries .hatena-urllist,
  .entry-footer-section .urllist,
  .related-entries ul,
  .entry-footer-related ul {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .hatena-module-related-entries .urllist-item,
  .entry-footer-section .urllist-item,
  .related-entries li {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box !important;
  }
  /* こちらも読まれています も1カラム */
  .next-reads ul {
    grid-template-columns: 1fr !important;
  }
  /* 公式リンクも1カラム（既に対応済みだが念のため） */
  .official-links ul {
    grid-template-columns: 1fr !important;
  }
}

/* ----- スマホ本文の改行を緩める（"2027年1月..." のような長文の改行過剰対策） ----- */
@media (max-width: 768px) {
  .entry-content p,
  .entry-content li,
  .entry-content dd,
  .entry-content dt {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-break: loose !important;
    hanging-punctuation: none !important;
  }
}

/* ----- フォント表示安定化（読み込み中の文字化け防止） ----- */
@font-face { font-display: swap; }

/* ================================================================
   2026-05-19 クリスタル風全面リファクタ
   - 記事カード枠線・角飾り
   - 引用ボックス
   - 見出し（h2/h3/h4）
   - テーブル
   - サイドバー
   - 細部装飾
   ※ サイトタイトル金文字とヘッダー星空グラデは「FF14らしさ」として維持
   ================================================================ */

/* --- 記事カード：金枠＋金角飾り → クリスタル --- */
.entry {
  border-color: var(--crystal-light) !important;
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(42,138,184,0.06) !important;
}

.entry::before {
  background:
    linear-gradient(to right,  var(--crystal-dark) 8px, transparent 8px) top left    / 16px 1px no-repeat,
    linear-gradient(to bottom, var(--crystal-dark) 8px, transparent 8px) top left    / 1px 16px no-repeat,
    linear-gradient(to left,   var(--crystal-dark) 8px, transparent 8px) top right   / 16px 1px no-repeat,
    linear-gradient(to bottom, var(--crystal-dark) 8px, transparent 8px) top right   / 1px 16px no-repeat,
    linear-gradient(to right,  var(--crystal-dark) 8px, transparent 8px) bottom left / 16px 1px no-repeat,
    linear-gradient(to top,    var(--crystal-dark) 8px, transparent 8px) bottom left / 1px 16px no-repeat,
    linear-gradient(to left,   var(--crystal-dark) 8px, transparent 8px) bottom right/ 16px 1px no-repeat,
    linear-gradient(to top,    var(--crystal-dark) 8px, transparent 8px) bottom right/ 1px 16px no-repeat !important;
}

.entry:hover {
  border-color: var(--crystal-mid) !important;
  box-shadow: var(--shadow-card), 0 4px 20px rgba(42,138,184,0.18) !important;
}

.entry-title a:hover { color: var(--crystal-mid) !important; }

/* --- 見出し h2：金左ボーダー＋ベージュグラデ → クリスタル --- */
.entry-content h2 {
  background: linear-gradient(90deg, rgba(42,138,184,0.10) 0%, transparent 60%) !important;
  border-left: 4px solid var(--crystal-mid) !important;
  border-bottom: 1px solid rgba(42,138,184,0.25) !important;
  color: var(--crystal-dark) !important;
}

/* --- 見出し h3：クリスタル系で統一・濃度調整 --- */
.entry-content h3 {
  color: var(--crystal-mid) !important;
  border-bottom: 1px solid rgba(42,138,184,0.35) !important;
}

/* --- 見出し h4：金 → クリスタル深 --- */
.entry-content h4 {
  color: var(--crystal-dark) !important;
}

/* --- 引用ボックス：ベージュ → 淡クリスタル --- */
.entry-content blockquote {
  background: var(--crystal-pale) !important;
  border-left: 4px solid var(--crystal-mid) !important;
  color: var(--text-body) !important;
}

/* --- テーブル：金枠 → クリスタル --- */
.entry-content table {
  border: 1px solid rgba(42,138,184,0.3) !important;
}

.entry-content th {
  background: linear-gradient(90deg, rgba(42,138,184,0.18) 0%, rgba(42,138,184,0.06) 100%) !important;
  border: 1px solid rgba(42,138,184,0.4) !important;
  color: var(--crystal-dark) !important;
}

.entry-content td {
  border: 1px solid rgba(42,138,184,0.18) !important;
}

.entry-content tr:nth-child(even) td { background: rgba(227,243,250,0.4) !important; }
.entry-content tr:hover td { background: rgba(168,216,232,0.25) !important; }

/* --- インラインコード：金枠 → クリスタル枠 --- */
.entry-content code {
  background: var(--crystal-pale) !important;
  border: 1px solid var(--crystal-light) !important;
  color: var(--crystal-dark) !important;
}

/* --- 本文内リンク：金下線 → クリスタル下線 --- */
.entry-content a {
  border-bottom-color: rgba(42,138,184,0.3) !important;
}
.entry-content a:hover {
  color: var(--crystal-mid) !important;
  border-bottom-color: var(--crystal-mid) !important;
}

/* --- リストマーカー：金 → クリスタル --- */
.entry-content ul li::marker,
.entry-content ol li::marker { color: var(--crystal-mid) !important; }

/* --- hr の ✦ 装飾：金 → クリスタル --- */
.entry-content hr {
  border-top: 1px solid rgba(42,138,184,0.3) !important;
}
.entry-content hr::after {
  color: var(--crystal-mid) !important;
}

/* --- 記事内画像のシャドウ：金リング → クリスタル --- */
.entry-content img {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 0 1px rgba(42,138,184,0.18) !important;
}

/* --- サイドバーモジュール：金枠＋金角飾り → クリスタル --- */
.hatena-module, .widget, .module {
  border-color: var(--crystal-light) !important;
}

.hatena-module::before, .widget::before {
  background:
    linear-gradient(to right,  var(--crystal-dark) 6px, transparent 6px) top left    / 10px 1px no-repeat,
    linear-gradient(to bottom, var(--crystal-dark) 6px, transparent 6px) top left    / 1px 10px no-repeat,
    linear-gradient(to left,   var(--crystal-dark) 6px, transparent 6px) top right   / 10px 1px no-repeat,
    linear-gradient(to bottom, var(--crystal-dark) 6px, transparent 6px) top right   / 1px 10px no-repeat,
    linear-gradient(to right,  var(--crystal-dark) 6px, transparent 6px) bottom left / 10px 1px no-repeat,
    linear-gradient(to top,    var(--crystal-dark) 6px, transparent 6px) bottom left / 1px 10px no-repeat,
    linear-gradient(to left,   var(--crystal-dark) 6px, transparent 6px) bottom right/ 10px 1px no-repeat,
    linear-gradient(to top,    var(--crystal-dark) 6px, transparent 6px) bottom right/ 1px 10px no-repeat !important;
}

.hatena-module-title, .widget-title, .module-title {
  background: linear-gradient(90deg, rgba(42,138,184,0.15) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--crystal-light) !important;
  color: var(--crystal-dark) !important;
}

.hatena-module a:hover, .widget a:hover, .module a:hover {
  color: var(--crystal-mid) !important;
}

/* --- ページネーション：金 → クリスタル --- */
.pager a, .pagination a, .pager span {
  border-color: var(--crystal-light) !important;
  color: var(--crystal-mid) !important;
}

.pager a:hover, .pagination a:hover {
  background: rgba(42,138,184,0.08) !important;
  border-color: var(--crystal-mid) !important;
}

/* --- スクロールバー・選択色：金 → クリスタル --- */
::-webkit-scrollbar-thumb { background: rgba(42,138,184,0.4) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--crystal-mid) !important; }
::selection { background: rgba(42,138,184,0.2) !important; color: #1a1408 !important; }

/* --- 著者プロフィールカード（サイドバー）：金 → クリスタル --- */
.author-card {
  border-color: var(--crystal-light) !important;
}
.author-card::before {
  background: linear-gradient(90deg, var(--crystal-dark), var(--crystal-mid), var(--crystal-dark)) !important;
}
.author-card .author-icon {
  border-color: var(--crystal-mid) !important;
}
.author-card .author-label {
  color: var(--crystal-dark) !important;
}
.author-card .author-message {
  border-top-color: var(--crystal-light) !important;
}

/* --- 記事冒頭著者バー：金 → クリスタル --- */
.article-author-bar {
  background: var(--crystal-pale) !important;
  border-left-color: var(--crystal-mid) !important;
}
.article-author-bar .author-mini-icon {
  border-color: var(--crystal-mid) !important;
}
.article-author-bar .author-info strong {
  color: var(--crystal-dark) !important;
}

/* --- スクショキャプション：金 → クリスタル --- */
.screenshot-block {
  border-color: var(--crystal-light) !important;
}
.screenshot-caption {
  background: linear-gradient(180deg, var(--crystal-pale) 0%, var(--crystal-bg) 100%) !important;
  border-top-color: var(--crystal-light) !important;
}
.screenshot-caption .caption-meta {
  background: var(--crystal-mid) !important;
  color: #ffffff !important;
}

/* --- フッターリンクホバー：金 → クリスタル明色 --- */
#footer a:hover, .site-footer a:hover { color: var(--crystal-light) !important; }

/* --- ヘッダー下部の輝線：金 → クリスタル混合 --- */
#blog-title::after, .site-header::after {
  background: linear-gradient(90deg, transparent 0%, var(--crystal-mid) 50%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(42,138,184,0.5) !important;
}

/* ================================================================
   Phase6: Gemini素材で四隅装飾＋フッターロールアイコン＋クリスタル
   ================================================================ */

/* CSS変数：装飾画像URL（v2/v3 完全透明化版） */
:root {
  --img-corner-tl: url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260520/20260520123229.png');
  --img-corner-tr: url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260520/20260520123234.png');
  --img-corner-bl: url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260520/20260520123240.png');
  --img-corner-br: url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260520/20260520123246.png');
  --img-role-strip: url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260520/20260520123430.png');
  --img-crystal-big: url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260520/20260520123253.png');
  --img-crystal-small: url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260520/20260520123259.png');
}

/* ================================================================
   重要修正：.archive-entry（トップページの記事カード）にも全装飾を適用
   2026-05-19 HARで判明：トップは .entry ではなく .archive-entry を使う
   ================================================================ */

/* archive-entry：シンプル白基調 */
.archive-entry {
  background: #ffffff !important;
  border: 1px solid rgba(180, 130, 40, 0.35) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
  position: relative !important;
  margin-bottom: 24px !important;
  padding: 24px 28px !important;
  overflow: hidden !important;
}

/* 4コーナー装飾を archive-entry にも（拡大版） */
.archive-entry::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    var(--img-corner-tl) top left / 140px auto no-repeat,
    var(--img-corner-tr) top right / 140px auto no-repeat,
    var(--img-corner-bl) bottom left / 140px auto no-repeat,
    var(--img-corner-br) bottom right / 140px auto no-repeat !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 1 !important;
  border-radius: 4px !important;
}

.archive-entry:hover {
  border-color: rgba(180, 130, 40, 0.85) !important;
  box-shadow:
    inset 0 0 50px rgba(180, 130, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 24px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(240, 214, 142, 0.3) !important;
}
.archive-entry:hover::before { opacity: 1 !important; }

/* archive-entry 内の要素を z-index 上に */
.archive-entry > * { position: relative !important; z-index: 2 !important; }

/* archive-entry タイトル：羊皮紙にコントラスト */
.archive-entry-title,
.archive-entry-title a,
.archive-entry-header h1,
.archive-entry-header h1 a {
  color: #3a2a18 !important;
  font-family: 'Noto Sans JP', 'Noto Sans JP', 'Noto Serif JP', serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.45 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5) !important;
  background: none !important;
  -webkit-text-fill-color: #3a2a18 !important;
  filter: none !important;
}
.archive-entry-title a:hover,
.archive-entry-header h1 a:hover {
  color: #8a6010 !important;
  -webkit-text-fill-color: #8a6010 !important;
}

/* archive-entry のメタ情報・本文 */
.archive-entry .entry-description,
.archive-entry .archive-entry-body,
.archive-entry-body p {
  color: #2a1f10 !important;
}

/* archive-entry のカテゴリ・日付 */
.archive-entry .categories,
.archive-entry .entry-tags,
.archive-entry time {
  position: relative !important;
  z-index: 2 !important;
}

/* スマホでもコーナー対応 */
@media (max-width: 768px) {
  .archive-entry {
    padding: 18px 18px !important;
  }
  .archive-entry::before {
    background-size: 50px auto, 50px auto, 50px auto, 50px auto !important;
  }
  .archive-entry-title,
  .archive-entry-title a,
  .archive-entry-header h1,
  .archive-entry-header h1 a {
    font-size: 1.15rem !important;
  }
}

/* 装飾画像を全部外す：元の金線・◆に戻す */

/* 記事カードのコーナーを金線に戻す（Phase3の金角飾りに） */
.entry::before, .archive-entry::before {
  background:
    linear-gradient(to right,  #8a6010 8px, transparent 8px) top left    / 16px 1px no-repeat,
    linear-gradient(to bottom, #8a6010 8px, transparent 8px) top left    / 1px 16px no-repeat,
    linear-gradient(to left,   #8a6010 8px, transparent 8px) top right   / 16px 1px no-repeat,
    linear-gradient(to bottom, #8a6010 8px, transparent 8px) top right   / 1px 16px no-repeat,
    linear-gradient(to right,  #8a6010 8px, transparent 8px) bottom left / 16px 1px no-repeat,
    linear-gradient(to top,    #8a6010 8px, transparent 8px) bottom left / 1px 16px no-repeat,
    linear-gradient(to left,   #8a6010 8px, transparent 8px) bottom right/ 16px 1px no-repeat,
    linear-gradient(to top,    #8a6010 8px, transparent 8px) bottom right/ 1px 16px no-repeat !important;
  opacity: 0.75 !important;
  z-index: 1 !important;
}
.entry:hover::before, .archive-entry:hover::before { opacity: 1 !important; }

/* サイドバーモジュールも金線角飾りに戻す */
.hatena-module::before, .widget::before, .module::before {
  background:
    linear-gradient(to right,  #f5d878 6px, transparent 6px) top left    / 10px 1px no-repeat,
    linear-gradient(to bottom, #f5d878 6px, transparent 6px) top left    / 1px 10px no-repeat,
    linear-gradient(to left,   #7eb8d4 6px, transparent 6px) top right   / 10px 1px no-repeat,
    linear-gradient(to bottom, #7eb8d4 6px, transparent 6px) top right   / 1px 10px no-repeat,
    linear-gradient(to right,  #7eb8d4 6px, transparent 6px) bottom left / 10px 1px no-repeat,
    linear-gradient(to top,    #7eb8d4 6px, transparent 6px) bottom left / 1px 10px no-repeat,
    linear-gradient(to left,   #f5d878 6px, transparent 6px) bottom right/ 10px 1px no-repeat,
    linear-gradient(to top,    #f5d878 6px, transparent 6px) bottom right/ 1px 10px no-repeat !important;
  opacity: 0.9 !important;
}

/* サイドバータイトルの◆を文字に戻す */
.hatena-module-title::before,
.widget-title::before,
.module-title::before {
  content: '◆' !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  color: #7eb8d4 !important;
  font-size: 0.7rem !important;
  text-shadow: 0 0 6px rgba(126,184,212,0.6) !important;
  filter: none !important;
}

/* フッターのロールアイコンを表示しない */
#footer::before,
.site-footer::before,
footer::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

/* ================================================================
   会話バブル（kusuponアイコン＋吹き出し）— プレイヤー感を出す
   記事内で <div class="chat-bubble"> として使う
   ================================================================ */
.chat-bubble {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 20px 0 !important;
  padding: 0 !important;
}

.chat-bubble .chat-icon {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  border: 2px solid #c8900a !important;
  margin-top: 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
}

.chat-bubble .chat-body {
  position: relative !important;
  flex: 1 !important;
  background: #fdfaf4 !important;
  border: 1px solid rgba(180,130,40,0.4) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  color: #2a2418 !important;
  line-height: 1.75 !important;
  font-size: 0.95rem !important;
}

/* 吹き出しのしっぽ */
.chat-bubble .chat-body::before {
  content: '' !important;
  position: absolute !important;
  left: -10px !important;
  top: 18px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 8px 10px 8px 0 !important;
  border-color: transparent #fdfaf4 transparent transparent !important;
}
.chat-bubble .chat-body::after {
  content: '' !important;
  position: absolute !important;
  left: -11px !important;
  top: 17px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 9px 11px 9px 0 !important;
  border-color: transparent rgba(180,130,40,0.4) transparent transparent !important;
  z-index: -1 !important;
}

.chat-bubble .chat-name {
  font-weight: 700 !important;
  color: #8a6010 !important;
  font-size: 0.85rem !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.02em !important;
}

/* 読者代弁・初心者役（右寄せ・水色背景） */
.chat-bubble.guest {
  flex-direction: row-reverse !important;
}
.chat-bubble.guest .chat-body {
  background: #f0f8fc !important;
  border-color: rgba(42,138,184,0.45) !important;
  color: #1a3a4e !important;
}
.chat-bubble.guest .chat-body::before {
  left: auto !important;
  right: -10px !important;
  border-width: 8px 0 8px 10px !important;
  border-color: transparent transparent transparent #f0f8fc !important;
}
.chat-bubble.guest .chat-body::after {
  left: auto !important;
  right: -11px !important;
  border-width: 9px 0 9px 11px !important;
  border-color: transparent transparent transparent rgba(42,138,184,0.45) !important;
}
.chat-bubble.guest .chat-name {
  color: #2a6a98 !important;
  text-align: right !important;
}
.chat-bubble.guest .chat-icon {
  border-color: #2a6a98 !important;
}

@media (max-width: 768px) {
  .chat-bubble .chat-icon {
    width: 44px !important;
    height: 44px !important;
  }
  .chat-bubble .chat-body {
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
  }
}

/* ============= 2026-05-20 ヘッダー画像をぬいぐるみ部屋に上書き ============= */
#blog-title.with-bg-image, .site-header.with-bg-image,
#blog-title, .site-header {
  background-image:
    linear-gradient(180deg, rgba(13,21,64,0.55) 0%, rgba(7,13,40,0.35) 50%, rgba(13,21,64,0.70) 100%),
    url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260519/20260519220013.jpg'),
    linear-gradient(180deg, #2a1f15 0%, #1a1208 100%) !important;
  background-size: auto, cover, auto !important;
  background-position: center top, center 35%, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

@media (max-width: 768px) {
  #blog-title.with-bg-image, .site-header.with-bg-image,
  #blog-title, .site-header {
    background-size: auto, contain, auto !important;
    background-position: center top, center top, center !important;
  }
}

/* ================================================================
   Phase3: 記事カードを羊皮紙化＋金装飾（Eorzea Chronicle 準拠）
   - クリスタル化リファクタの記事カード部分を上書き
   ================================================================ */

/* 記事カード本体：シンプルな白基調 */
.entry {
  background: #ffffff !important;
  border: 1px solid rgba(180, 130, 40, 0.35) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
  position: relative !important;
}

/* 羊皮紙テクスチャは無効化 */
.entry::after {
  content: none !important;
  display: none !important;
}

/* 四隅角飾り：クリスタル→金色に戻す */
.entry::before {
  background:
    linear-gradient(to right,  #8a6010 8px, transparent 8px) top left    / 16px 1px no-repeat,
    linear-gradient(to bottom, #8a6010 8px, transparent 8px) top left    / 1px 16px no-repeat,
    linear-gradient(to left,   #8a6010 8px, transparent 8px) top right   / 16px 1px no-repeat,
    linear-gradient(to bottom, #8a6010 8px, transparent 8px) top right   / 1px 16px no-repeat,
    linear-gradient(to right,  #8a6010 8px, transparent 8px) bottom left / 16px 1px no-repeat,
    linear-gradient(to top,    #8a6010 8px, transparent 8px) bottom left / 1px 16px no-repeat,
    linear-gradient(to left,   #8a6010 8px, transparent 8px) bottom right/ 16px 1px no-repeat,
    linear-gradient(to top,    #8a6010 8px, transparent 8px) bottom right/ 1px 16px no-repeat !important;
  opacity: 0.75 !important;
  z-index: 1 !important;
}

.entry:hover {
  border-color: rgba(180, 130, 40, 0.85) !important;
  box-shadow:
    inset 0 0 50px rgba(180, 130, 40, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 24px rgba(0, 0, 0, 0.22),
    0 0 24px rgba(240, 214, 142, 0.3) !important;
}
.entry:hover::before { opacity: 1 !important; }

/* 記事内コンテンツが背景テクスチャの上に来るようz-index */
.entry > * { position: relative !important; z-index: 2 !important; }

/* 記事タイトル：Noto Sans JP 700（読みやすさ最優先） */
.entry-title,
.entry-title a,
.archive-entry-title,
.archive-entry-title a {
  color: #2a2418 !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: #2a2418 !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  filter: none !important;
}
.entry-title a:hover {
  color: #8a6010 !important;
  -webkit-text-fill-color: #8a6010 !important;
}

/* 記事内 h2：Noto Sans JP 700（読みやすさ） */
.entry-content h2 {
  color: #2a2418 !important;
  background: linear-gradient(90deg, rgba(180,130,40,0.10) 0%, transparent 60%) !important;
  border-left: 4px solid #8a6010 !important;
  border-bottom: 1px solid rgba(180,130,40,0.25) !important;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  font-size: 1.28rem !important;
}

/* 記事内 h3：褐色・落ち着いた金 */
.entry-content h3 {
  color: #6a4a20 !important;
  border-bottom: 1px solid rgba(140,100,40,0.30) !important;
}

.entry-content h4 { color: #8a6010 !important; }

/* 記事内本文：標準的な濃グレー（白背景にコントラスト） */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content dt,
.entry-content dd,
.entry-content span {
  color: #2a2418 !important;
}

/* 引用：シンプル */
.entry-content blockquote {
  background: #f8f6f0 !important;
  border-left: 4px solid #c8900a !important;
  color: #3a3228 !important;
}

/* テーブル：シンプル */
.entry-content table {
  border: 1px solid rgba(180,130,40,0.3) !important;
}
.entry-content th {
  background: #f5e8c8 !important;
  border: 1px solid rgba(180,130,40,0.4) !important;
  color: #3a2a18 !important;
}
.entry-content td {
  border: 1px solid rgba(180,130,40,0.18) !important;
  color: #2a2418 !important;
  background: #ffffff !important;
}
.entry-content tr:nth-child(even) td { background: #fdfaf4 !important; }
.entry-content tr:hover td { background: #fff8e8 !important; }

/* インラインコード */
.entry-content code {
  background: #f5f2eb !important;
  border: 1px solid rgba(180,130,40,0.25) !important;
  color: #8a3a10 !important;
}

/* 本文内リンク */
.entry-content a {
  color: #1a4a6e !important;
  border-bottom-color: rgba(26,110,160,0.4) !important;
}
.entry-content a:hover {
  color: #8a6010 !important;
  border-bottom-color: #8a6010 !important;
}

/* リストマーカー */
.entry-content ul li::marker,
.entry-content ol li::marker { color: #8a6010 !important; }

/* hr の ✦ */
.entry-content hr {
  border-top: 1px solid rgba(180,130,40,0.4) !important;
}
.entry-content hr::after {
  color: #8a6010 !important;
  background: transparent !important;
}

/* 日付・time */
.entry-date, .date, time { color: #6a4020 !important; }

/* ================================================================
   Phase5: メインカラムに羊皮紙＋魔法陣背景
   - ページ背景（body）は本棚ホール画像（固定）
   - #main / .main-inner に羊皮紙テクスチャ
   ================================================================ */
/* メインカラム：羊皮紙＋魔法陣（body本棚は左右余白で見える） */
#main, .main-inner, #content-inner {
  background-image:
    linear-gradient(180deg, rgba(253,246,227,0.30) 0%, transparent 30%, rgba(253,246,227,0.35) 100%),
    url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260519/20260519233059.jpg') !important;
  background-repeat: no-repeat, repeat-y !important;
  background-position: center top !important;
  background-size: cover, 100% auto !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(240,214,142,0.4) !important;
  padding: 20px !important;
}

/* container類は透明にして body の本棚背景を見せる */
#wrapper, #container, #content {
  background: transparent !important;
}

/* サイドバー（#box2）も透明に（その中のhatena-moduleが個別に紺装飾を持つ） */
#box2, #box2-inner {
  background: transparent !important;
}

/* スマホ：#main の羊皮紙背景を弱める（記事カード羊皮紙との2重感解消） */
@media (max-width: 768px) {
  #main, .main-inner, #content-inner {
    background-image: linear-gradient(180deg, rgba(253,246,227,0.10) 0%, transparent 30%, rgba(253,246,227,0.10) 100%) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 100% !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important;
  }
  /* スマホ：白基調 */
  body {
    background: linear-gradient(180deg, #fafafa 0%, #f5f2eb 100%) !important;
    background-attachment: scroll !important;
  }
}

/* ヘッダー画像：ぬいぐるみ部屋＋ララフェル2人 */
#blog-title.with-bg-image, .site-header.with-bg-image {
  background:
    linear-gradient(180deg, rgba(13,21,64,0.45) 0%, rgba(7,13,40,0.25) 50%, rgba(13,21,64,0.60) 100%),
    url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260519/20260519220013.jpg') center 35% / cover no-repeat,
    linear-gradient(180deg, #2a1f15 0%, #1a1208 100%) !important;
  background-color: #1a1208 !important;
  min-height: 240px;
}

/* スマホ：ヘッダー画像 contain */
@media (max-width: 768px) {
  #blog-title.with-bg-image, .site-header.with-bg-image {
    background:
      linear-gradient(180deg, rgba(13,21,64,0.40) 0%, rgba(7,13,40,0.20) 50%, rgba(13,21,64,0.60) 100%),
      url('https://cdn-ak.f.st-hatena.com/images/fotolife/E/EorzeaLog/20260519/20260519220013.jpg') center top / contain no-repeat,
      #1a1208 !important;
    background-color: #1a1208 !important;
    min-height: 200px;
  }
}

/* 記事カード：シンプル白（羊皮紙オーバーライド） */
.entry {
  background: #ffffff !important;
}

/* ================================================================
   Phase4: サイドバーを紺背景＋金枠化（Eorzea Chronicle 風）
   - PROFILE / CATEGORIES / TAG CLOUD / SEARCH / RECENT POSTS / CALENDAR
   - ダークパネル風UI
   ================================================================ */

/* サイドバーモジュール全体：紺グラデ＋金枠 */
.hatena-module, .widget, .module {
  background: linear-gradient(180deg, rgba(13,21,64,0.97) 0%, rgba(7,13,40,0.95) 100%) !important;
  border: 1px solid rgba(240,214,142,0.55) !important;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 4px 16px rgba(0,0,0,0.4) !important;
  overflow: hidden !important;
  position: relative !important;
  margin-bottom: 24px !important;
}

/* 四隅の金角飾り */
.hatena-module::before, .widget::before, .module::before {
  background:
    linear-gradient(to right,  #f5d878 6px, transparent 6px) top left    / 10px 1px no-repeat,
    linear-gradient(to bottom, #f5d878 6px, transparent 6px) top left    / 1px 10px no-repeat,
    linear-gradient(to left,   #7eb8d4 6px, transparent 6px) top right   / 10px 1px no-repeat,
    linear-gradient(to bottom, #7eb8d4 6px, transparent 6px) top right   / 1px 10px no-repeat,
    linear-gradient(to right,  #7eb8d4 6px, transparent 6px) bottom left / 10px 1px no-repeat,
    linear-gradient(to top,    #7eb8d4 6px, transparent 6px) bottom left / 1px 10px no-repeat,
    linear-gradient(to left,   #f5d878 6px, transparent 6px) bottom right/ 10px 1px no-repeat,
    linear-gradient(to top,    #f5d878 6px, transparent 6px) bottom right/ 1px 10px no-repeat !important;
  opacity: 0.9 !important;
}

/* タイトル：金グラデ＋クリスタル装飾 */
.hatena-module-title, .widget-title, .module-title {
  background: linear-gradient(180deg, rgba(245,216,120,0.18) 0%, rgba(245,216,120,0.05) 100%) !important;
  border-bottom: 1px solid rgba(240,214,142,0.55) !important;
  color: #f0d68e !important;
  font-family: 'Noto Sans JP', 'Noto Sans JP', serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.15em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
  padding: 12px 16px 10px 32px !important;
  position: relative !important;
}

/* タイトル左に小さなクリスタルアイコン */
.hatena-module-title::before,
.widget-title::before,
.module-title::before {
  content: '◆' !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #7eb8d4 !important;
  font-size: 0.7rem !important;
  text-shadow: 0 0 6px rgba(126,184,212,0.6) !important;
}

.hatena-module-body, .widget-content, .module-body {
  padding: 14px 16px !important;
  color: #d8c5a0 !important;
}

/* リンク：薄金（読みやすさ） */
.hatena-module a, .widget a, .module a {
  color: #d8c5a0 !important;
  font-size: 0.86rem !important;
  text-decoration: none !important;
  transition: color 0.2s, text-shadow 0.2s !important;
}
.hatena-module a:hover, .widget a:hover, .module a:hover {
  color: #fff5d1 !important;
  text-shadow: 0 0 6px rgba(240,214,142,0.5) !important;
}

/* リスト内のテキスト */
.hatena-module li,
.hatena-module-urllist-section-body li,
.hatena-module-urllist-section-body {
  color: #c8b890 !important;
  border-color: rgba(240,214,142,0.2) !important;
}

/* カテゴリ・最新記事のリスト境界 */
.hatena-module ul li,
.hatena-module ol li {
  border-bottom: 1px dotted rgba(240,214,142,0.2) !important;
  padding: 6px 0 !important;
}
.hatena-module ul li:last-child,
.hatena-module ol li:last-child {
  border-bottom: none !important;
}

/* 検索ボックス */
.hatena-module-search-box .search-form input,
.hatena-module-search-box input[type="text"],
.search-form input {
  background: rgba(20,32,68,0.7) !important;
  border: 1px solid rgba(240,214,142,0.4) !important;
  color: #fff5d1 !important;
  padding: 6px 10px !important;
  border-radius: 3px !important;
}

.hatena-module-search-box .search-form input::placeholder,
.search-form input::placeholder {
  color: rgba(216,197,160,0.5) !important;
}

/* プロフィールモジュール画像枠 */
.hatena-module-profile .hatena-module-body img,
.profile-icon {
  border: 2px solid #f5d878 !important;
  box-shadow: 0 0 8px rgba(240,214,142,0.3) !important;
}

/* カレンダー */
.hatena-module-calendar table,
.module-calendar table {
  background: rgba(20,32,68,0.5) !important;
}
.hatena-module-calendar th,
.module-calendar th {
  color: #f0d68e !important;
  background: rgba(245,216,120,0.1) !important;
  border: 1px solid rgba(240,214,142,0.2) !important;
}
.hatena-module-calendar td,
.module-calendar td {
  color: #d8c5a0 !important;
  border: 1px solid rgba(240,214,142,0.15) !important;
}
.hatena-module-calendar td a,
.module-calendar td a {
  color: #f5d878 !important;
}

/* 著者プロフィールカードもサイドバー紺化に合わせる */
.author-card {
  background: linear-gradient(180deg, rgba(13,21,64,0.95) 0%, rgba(7,13,40,0.93) 100%) !important;
  border-color: rgba(240,214,142,0.55) !important;
}
.author-card::before {
  background: linear-gradient(90deg, #8a6010, #f5d878, #7eb8d4, #f5d878, #8a6010) !important;
}
.author-card .author-label {
  color: #f0d68e !important;
}
.author-card .author-stats {
  color: #d8c5a0 !important;
}
.author-card .author-stats dt {
  color: rgba(216,197,160,0.7) !important;
}
.author-card .author-stats dd {
  color: #fff5d1 !important;
}
.author-card .author-message {
  color: rgba(216,197,160,0.85) !important;
  border-top-color: rgba(240,214,142,0.25) !important;
}
.author-card .author-icon {
  border-color: #f5d878 !important;
}

/* ================================================================
   2026-05-22 最終仕上げ（カスケード末尾で強制上書き）
   ================================================================ */

/* グローバルヘッダー：白 */
#globalheader-container,
.globalheader,
header.globalHeader,
#globalheader {
  background: #ffffff !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* メインコンテンツコンテナ：透明・装飾なし */
#main, .main-inner, #content-inner, #content {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 記事カード：完全白＋細い枠 */
.entry, .archive-entry {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
  padding: 28px 32px !important;
}
.entry:hover, .archive-entry:hover {
  border-color: #c8900a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* 記事カードの::before/::after を完全無効化（金縁角飾り削除） */
.entry::before,
.entry::after,
.archive-entry::before,
.archive-entry::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* ジョブガイドボタン：紺背景＋金文字を強制（リンク色上書きを防ぐ） */
.entry-content a[href*="jp.finalfantasyxiv.com/jobguide"],
.entry-content a[href*="/jobguide/"] {
  color: #f0d68e !important;
  -webkit-text-fill-color: #f0d68e !important;
  border-bottom: none !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
.entry-content a[href*="jp.finalfantasyxiv.com/jobguide"]:hover,
.entry-content a[href*="/jobguide/"]:hover {
  color: #ffeac8 !important;
  -webkit-text-fill-color: #ffeac8 !important;
}


/* ================================================================
   2026-05-23 記事カードv3（FF14公式 Lodestone Topics 準拠）
   ----------------------------------------------------------------
   v2のグリッド画像左/本文右レイアウトを廃止。
   Figma MCP 経由で FF14 公式（jp.finalfantasyxiv.com）の
   実カードを抽出し設計に反映:
   - 薄グレー #eee 背景・上部クリーム#f8f5ed ストリップ
   - ヒーロー画像16:9 フル幅
   - 下部に抜粋＋『記事を読む』リンク
   - ホバー: 金リボン左端6px＋暖色背景＋金枠
   - 角丸なし・シャドウなし（FF14 公式準拠）
   ※ このセクションは末尾に置いてカスケードで全先行ルールに勝つ
   ================================================================ */

/* --- アイキャッチ表示（旧display:none上書き解除） --- */
.entry-thumb-link,
.archive-entry-image-link,
.entry .entry-thumb,
.archive-entry .entry-thumb,
.archive-entry-image,
.entry-thumb {
  display: block !important;
}

/* --- カードコンテナ：縦flex（FF14公式準拠） --- */
body.page-index .entry,
body.page-archive .archive-entry,
body.archive .archive-entry,
.archive-entries .archive-entry,
.entries .entry {
  background: #eeeeee !important;
  background-image: none !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  box-shadow: none !important;

  display: flex !important;
  flex-direction: column !important;

  position: relative !important;
  overflow: hidden !important;
  transition: background-color .25s ease, border-color .25s ease !important;
}

/* --- 上部ストリップ（タイトル＋日付＋◆装飾） --- */
.archive-entry-header,
body.page-index .entry > .entry-header {
  background: #f8f5ed !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  min-height: 36px !important;
}

/* ストリップ左端の◆クリスタル装飾 */
.archive-entry-header::before,
body.page-index .entry > .entry-header::before {
  content: '◆' !important;
  color: #c8900a !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  margin-right: 2px !important;
  line-height: 1 !important;
}

/* ストリップ内のタイトル（1行省略） */
.archive-entry-title,
body.page-index .entry .entry-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #2a2418 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.archive-entry-title a,
body.page-index .entry .entry-title a {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
}
.archive-entry-title a:hover,
body.page-index .entry .entry-title a:hover {
  color: #c8900a !important;
}

/* ストリップ内の日付 */
.archive-entry .archive-date,
.archive-entry time,
body.page-index .entry .date,
body.page-index .entry time {
  font-size: 0.72rem !important;
  color: #999 !important;
  font-family: Arial, 'Noto Sans JP', sans-serif !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* --- ヒーロー画像：16:9フル幅 --- */
.archive-entry-image-link,
.entry-thumb-link {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 144, 10, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(42, 138, 184, 0.25) 0%, transparent 55%),
    linear-gradient(135deg, #1a3a5c 0%, #0a1230 100%) !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 画像なし時のプレースホルダー◆クリスタル */
.archive-entry-image-link::before,
.entry-thumb-link::before {
  content: '◆' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: rgba(240, 184, 48, 0.4) !important;
  font-size: 64px !important;
  text-shadow: 0 0 20px rgba(240, 184, 48, 0.5) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.archive-entry-image-link::after,
.entry-thumb-link::after {
  content: '画像準備中' !important;
  position: absolute !important;
  top: calc(50% + 38px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* 実画像がある場合はプレースホルダーを隠す */
.archive-entry-image-link:has(.archive-entry-image[style*="background-image"])::before,
.archive-entry-image-link:has(.archive-entry-image[style*="background-image"])::after,
.archive-entry-image-link:has(img)::before,
.archive-entry-image-link:has(img)::after,
.entry-thumb-link:has(.entry-thumb[style*="background-image"])::before,
.entry-thumb-link:has(.entry-thumb[style*="background-image"])::after,
.entry-thumb-link:has(img)::before,
.entry-thumb-link:has(img)::after {
  display: none !important;
}

.archive-entry-image,
.entry-thumb {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.archive-entry-image-link img,
.entry-thumb-link img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

/* --- 本文抜粋（2行クランプ） --- */
.archive-entry-body,
.archive-entry > .archive-entry-body,
body.page-index .entry .entry-description {
  font-size: 0.82rem !important;
  line-height: 1.65 !important;
  color: #3a3228 !important;
  margin: 0 !important;
  padding: 12px 16px 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* --- カテゴリチップ（本文下） --- */
.archive-entry .categories,
body.page-index .entry .categories {
  margin: 0 !important;
  padding: 2px 16px 8px !important;
  background: transparent !important;
}

/* --- フッター：「記事を読む」リンク --- */
.archive-entry-footer {
  padding: 8px 16px 12px !important;
  background: transparent !important;
  border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
}
.archive-entry-link {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #2556b8 !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
}
.archive-entry-link::before {
  content: '詳しくは『' !important;
  color: #3a3228 !important;
  font-weight: 400 !important;
}
.archive-entry-link::after {
  content: '』をご覧ください ▸' !important;
  color: #3a3228 !important;
  font-weight: 400 !important;
}
.archive-entry-link:hover {
  color: #c8900a !important;
}

/* --- ホバー: 暖色背景＋金枠＋左端金リボン --- */
body.page-index .entry:hover,
body.page-archive .archive-entry:hover,
body.archive .archive-entry:hover,
.archive-entries .archive-entry:hover,
.entries .entry:hover {
  background: #faf6ec !important;
  border-color: #c8900a !important;
}

/* 左端の金リボン（通常時は非表示・ホバー時に出る） */
body.page-index .entry::before,
body.page-archive .archive-entry::before,
body.archive .archive-entry::before,
.archive-entries .archive-entry::before,
.entries .entry::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  right: auto !important;
  width: 6px !important;
  height: auto !important;
  background: linear-gradient(180deg, #f0b830 0%, #c8900a 50%, #8a6010 100%) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  z-index: 20 !important;
  pointer-events: none !important;
  inset: 0 auto 0 0 !important;
  border-radius: 0 !important;
}
body.page-index .entry::after,
body.page-archive .archive-entry::after,
body.archive .archive-entry::after,
.archive-entries .archive-entry::after,
.entries .entry::after {
  display: none !important;
  content: none !important;
}

body.page-index .entry:hover::before,
body.page-archive .archive-entry:hover::before,
body.archive .archive-entry:hover::before,
.archive-entries .archive-entry:hover::before,
.entries .entry:hover::before {
  opacity: 1 !important;
}

/* ホバー時はヘッダーストリップも warm */
body.page-index .entry:hover > .entry-header,
body.page-archive .archive-entry:hover .archive-entry-header,
body.archive .archive-entry:hover .archive-entry-header,
.archive-entries .archive-entry:hover .archive-entry-header,
.entries .entry:hover > .entry-header {
  background: #fef3d8 !important;
}

/* --- モバイル（<768px） --- */
@media (max-width: 768px) {
  .archive-entry-header,
  body.page-index .entry > .entry-header {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  .archive-entry-title,
  body.page-index .entry .entry-title {
    font-size: 0.88rem !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
  }
  .archive-entry-body,
  body.page-index .entry .entry-description {
    font-size: 0.8rem !important;
    padding: 10px 12px 6px !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  .archive-entry .categories,
  body.page-index .entry .categories {
    padding: 2px 12px 8px !important;
  }
  .archive-entry-footer {
    padding: 6px 12px 10px !important;
  }
  .archive-entry .archive-date,
  body.page-index .entry time {
    font-size: 0.7rem !important;
  }
  .archive-entry-image-link::before,
  .entry-thumb-link::before {
    font-size: 48px !important;
  }
  .archive-entry-image-link::after,
  .entry-thumb-link::after {
    top: calc(50% + 30px) !important;
    font-size: 11px !important;
  }
}
/* ================ 記事カードv3 ここまで ================ */

/* ================================================================
   2026-05-23 記事カードv3 ホットフィックス
   ----------------------------------------------------------------
   実本番DOM（https://www.eorzea-guide.com/archive を curl で取得）と
   セレクタが不一致だった箇所を修正。スマホ崩れの原因：
   - タイトルは .archive-entry-title ではなく .entry-title
   - 抜粋本体は .archive-entry-body ではなく .entry-description
   - .archive-entry-footer / .archive-entry-link は存在しない（死コード化）
   - DOM順: header → categories → entry-thumb-link → archive-entry-body
   ================================================================ */

/* --- カード内全要素の transparent 化（はてなデフォルト白bg対策） --- */
body.page-archive .archive-entry > *,
body.archive .archive-entry > *,
.archive-entries .archive-entry > * {
  background: transparent !important;
}

/* --- タイトル（.entry-title に修正・2行折返し許可） --- */
body.page-archive .archive-entry .entry-title,
body.archive .archive-entry .entry-title,
.archive-entries .archive-entry .entry-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: #2a2418 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: break-word !important;
}

/* ヘッダー：タイトル2行折返し時に日付を上端固定 */
.archive-entry-header,
body.page-index .entry > .entry-header {
  align-items: flex-start !important;
}
.archive-entry .archive-date,
.archive-entry time {
  margin-top: 2px !important;
}
body.page-archive .archive-entry .entry-title a,
body.archive .archive-entry .entry-title a,
.archive-entries .archive-entry .entry-title a,
body.page-archive .archive-entry .entry-title-link,
.archive-entries .archive-entry .entry-title-link {
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}
body.page-archive .archive-entry .entry-title a:hover,
body.archive .archive-entry .entry-title a:hover,
.archive-entries .archive-entry .entry-title a:hover {
  color: #c8900a !important;
}

/* --- 抜粋（.entry-description に line-clamp） --- */
body.page-archive .archive-entry .entry-description,
body.archive .archive-entry .entry-description,
.archive-entries .archive-entry .entry-description {
  font-size: 0.82rem !important;
  line-height: 1.65 !important;
  color: #3a3228 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* --- .archive-entry-body は単なるコンテナ：パディングのみ --- */
body.page-archive .archive-entry .archive-entry-body,
body.archive .archive-entry .archive-entry-body,
.archive-entries .archive-entry .archive-entry-body {
  padding: 12px 16px 10px !important;
  margin: 0 !important;
  background: transparent !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}

/* --- 空のタグラッパーを非表示（縦余白を稼がない） --- */
.archive-entry .archive-entry-tags-wrapper {
  display: none !important;
}

/* --- はてブ＋スターのソーシャルボタン --- */
.archive-entry .social-buttons {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(0, 0, 0, 0.08) !important;
  font-size: 0.72rem !important;
}
.archive-entry .social-buttons img {
  max-height: 20px !important;
  width: auto !important;
}

/* --- カテゴリ（控えめ・ラベル程度の主張に） --- */
body.page-archive .archive-entry > .categories,
body.archive .archive-entry > .categories,
.archive-entries .archive-entry > .categories {
  padding: 4px 14px 2px !important;
  margin: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
}

/* チップ自体を弱める（既存の .categories a を強制上書き） */
body.page-archive .archive-entry .categories a,
body.archive .archive-entry .categories a,
.archive-entries .archive-entry .categories a {
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  padding: 1px 6px !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  line-height: 1.5 !important;
  opacity: 0.85 !important;
}
body.page-archive .archive-entry .categories a:hover,
body.archive .archive-entry .categories a:hover,
.archive-entries .archive-entry .categories a:hover {
  opacity: 1 !important;
}

/* --- モバイル（<768px）— タイトル折返し許可・抜粋3行 --- */
@media (max-width: 768px) {
  body.page-archive .archive-entry .entry-title,
  body.archive .archive-entry .entry-title,
  .archive-entries .archive-entry .entry-title {
    font-size: 0.92rem !important;
    white-space: normal !important;
    text-overflow: clip !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.page-archive .archive-entry .entry-description,
  body.archive .archive-entry .entry-description,
  .archive-entries .archive-entry .entry-description {
    font-size: 0.8rem !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
  body.page-archive .archive-entry .archive-entry-body,
  body.archive .archive-entry .archive-entry-body {
    padding: 10px 12px 8px !important;
  }
  body.page-archive .archive-entry > .categories,
  body.archive .archive-entry > .categories {
    padding: 6px 12px !important;
  }
  /* スマホでヘッダー内の date を改行させない・小さく */
  .archive-entry-header .archive-date {
    flex-shrink: 0 !important;
    font-size: 0.7rem !important;
  }
}
/* ================ v3 ホットフィックス ここまで ================ */

/* ================================================================
   2026-05-24 D2: monica141030.com 風ベージュテイスト
   ----------------------------------------------------------------
   個人運営者の温度感を出すための warm beige サイトトーン。
   AdSense独自性シグナル強化用。
   ================================================================ */

/* body 背景：白→薄ベージュ（紙の質感） */
html { background-color: #2a2418 !important; }
body {
  background:
    radial-gradient(circle at 50% 0%, #faf6ed 0%, #f5efe0 100%) !important;
  background-attachment: scroll !important;
}

/* 個別記事ページの本文エリア背景を更にベージュ寄りに */
body.page-entry #main,
body.page-entry .main-inner {
  background-color: #fdfaf2 !important;
}

/* 段落の line-height を 2.0 に（読書感UP） */
.entry-content p,
.entry-content li {
  line-height: 2.0 !important;
}

/* blockquote：羊皮紙風（薄ベージュ＋金細工二重枠） */
.entry-content blockquote {
  background:
    linear-gradient(135deg, #fdfaf2 0%, #f5edda 100%) !important;
  border-left: 4px solid #c8900a !important;
  border-right: 1px solid rgba(200, 144, 10, 0.25) !important;
  border-top: 1px solid rgba(200, 144, 10, 0.18) !important;
  border-bottom: 1px solid rgba(200, 144, 10, 0.25) !important;
  padding: 16px 20px 14px !important;
  margin: 18px 0 !important;
  border-radius: 0 3px 3px 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 220, 0.5),
    0 1px 4px rgba(200, 144, 10, 0.08) !important;
  position: relative !important;
}
/* blockquote 左上に小さな◆装飾 */
.entry-content blockquote::before {
  content: '◆' !important;
  position: absolute !important;
  top: -8px !important;
  left: -8px !important;
  background: #faf6ed !important;
  color: #c8900a !important;
  font-size: 12px !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  text-align: center !important;
  border: 1px solid rgba(200, 144, 10, 0.5) !important;
}

/* hr：金色細工＋中央◆ */
.entry-content hr {
  border: none !important;
  height: 18px !important;
  margin: 32px auto !important;
  position: relative !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}
.entry-content hr::before {
  content: '' !important;
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  top: 50% !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 144, 10, 0.5) 30%,
    rgba(200, 144, 10, 0.7) 50%,
    rgba(200, 144, 10, 0.5) 70%,
    transparent 100%) !important;
}
.entry-content hr::after {
  content: '◆' !important;
  position: relative !important;
  display: inline-block !important;
  background: #faf6ed !important;
  color: #c8900a !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* ================================================================
   2026-05-24 D4: コンテンツサポーター風 紺色見出しバナー（h2）
   ----------------------------------------------------------------
   FF14公式ゲームマニュアルの紺色グラデ見出しを記事内 h2 に適用。
   ゲームUI感を強めて独自性UP。
   ================================================================ */
.entry-content h2 {
  background: linear-gradient(180deg, #1a3a5c 0%, #0a1230 100%) !important;
  color: #ffffff !important;
  border-left: 4px solid #c8900a !important;
  border-bottom: 1px solid #c8900a !important;
  border-top: none !important;
  border-right: none !important;
  padding: 12px 18px 12px 16px !important;
  margin: 36px 0 18px !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  position: relative !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 180, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.15) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  border-radius: 0 3px 3px 0 !important;
}

/* h2 左端の◆クリスタル装飾 */
.entry-content h2::before {
  content: '◆' !important;
  display: inline-block !important;
  color: #f0b830 !important;
  margin-right: 10px !important;
  font-size: 0.85em !important;
  text-shadow: 0 0 8px rgba(240, 184, 48, 0.5) !important;
  vertical-align: 1px !important;
}

/* h2 リンク色（紺バナー内のリンク）— 金色に */
.entry-content h2 a,
.entry-content h2 a:link,
.entry-content h2 a:visited {
  color: #f0b830 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.entry-content h2 a:hover { color: #ffe9b5 !important; }

/* モバイル h2 調整 */
@media (max-width: 768px) {
  .entry-content h2 {
    font-size: 1.08rem !important;
    padding: 10px 14px 10px 12px !important;
    margin: 28px 0 14px !important;
  }
  .entry-content blockquote {
    padding: 12px 14px 10px !important;
    margin: 14px 0 !important;
  }
  .entry-content hr { margin: 24px auto !important; }
}
/* ================ D2/D4 ここまで ================ */

/* ================================================================
   2026-05-24 D3: トップページ「特集カテゴリタイル」3カラムグリッド
   ----------------------------------------------------------------
   FF14公式TOPの3カラムグリッドカードを参考に、ホーム限定で
   主要カテゴリへのナビゲーションタイルを配置。
   HTML は design/featured_tiles.html に書き、はてなヘッダに貼る。
   トップページ以外では非表示。
   ================================================================ */

.featured-tiles {
  display: none !important; /* 既定は非表示 */
  margin: 28px auto !important;
  max-width: 1100px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  gap: 14px !important;
}

/* トップページのみ表示（複数の hatena page-index系セレクタを網羅） */
body.page-index .featured-tiles,
body.page-top .featured-tiles,
body[class*="page-index"] .featured-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

.featured-tile {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px 18px 16px !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 150px !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.15) !important;
}
.featured-tile:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 22px rgba(0, 0, 0, 0.22) !important;
}

/* タイル右下に大きな◆装飾 */
.featured-tile::after {
  content: '◆' !important;
  position: absolute !important;
  right: -10px !important;
  bottom: -16px !important;
  font-size: 80px !important;
  color: rgba(255, 255, 255, 0.08) !important;
  pointer-events: none !important;
  line-height: 1 !important;
}

.featured-tile-eyebrow {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  opacity: 0.75 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
}

.featured-tile-title {
  font-size: 1.18rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  /* D4 で h2 が紺色バナーになるが、ここは独立スタイルで上書き */
  box-shadow: none !important;
}
.featured-tile-title::before { content: none !important; }

.featured-tile-desc {
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 14px !important;
  flex: 1 1 auto !important;
}

.featured-tile-cta {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  z-index: 2 !important;
}
.featured-tile-cta::after {
  content: ' →' !important;
  margin-left: 4px !important;
  transition: margin-left .2s !important;
}
.featured-tile:hover .featured-tile-cta::after { margin-left: 8px !important; }

/* === カテゴリ別の色（既存ナビ・カードカテゴリ色に合わせる） === */
.featured-tile--beginner {
  background: linear-gradient(135deg, #2e8b40 0%, #1a5a28 100%) !important;
}
.featured-tile--job {
  background: linear-gradient(135deg, #c0392b 0%, #7a1a10 100%) !important;
}
.featured-tile--news {
  background: linear-gradient(135deg, #1976d2 0%, #0d4a8a 100%) !important;
}
.featured-tile--mirapuri {
  background: linear-gradient(135deg, #d04080 0%, #8a1a4a 100%) !important;
}
.featured-tile--guide {
  background: linear-gradient(135deg, #1a3a5c 0%, #0a1230 100%) !important;
}
.featured-tile--gil {
  background: linear-gradient(135deg, #c8900a 0%, #8a6010 100%) !important;
  color: #1a1408 !important;
}
.featured-tile--gil .featured-tile-title,
.featured-tile--gil .featured-tile-cta { color: #1a1408 !important; text-shadow: none !important; }
.featured-tile--gil .featured-tile-desc { color: rgba(26, 20, 8, 0.85) !important; }
.featured-tile--gil .featured-tile-eyebrow { opacity: 0.6 !important; }
.featured-tile--gil .featured-tile-cta { border-top-color: rgba(26, 20, 8, 0.25) !important; }

/* === レスポンシブ === */
@media (max-width: 1024px) and (min-width: 769px) {
  body.page-index .featured-tiles,
  body.page-top .featured-tiles,
  body[class*="page-index"] .featured-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  body.page-index .featured-tiles,
  body.page-top .featured-tiles,
  body[class*="page-index"] .featured-tiles {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 20px auto !important;
    padding: 0 12px !important;
  }
  .featured-tile {
    min-height: 110px !important;
    padding: 16px 14px 14px !important;
  }
  .featured-tile-title { font-size: 1.05rem !important; }
  .featured-tile-desc { font-size: 0.78rem !important; }
  .featured-tile::after { font-size: 60px !important; bottom: -12px !important; right: -6px !important; }
}
/* ================ D3 ここまで ================ */