/* ============================================================
   Hatena Blog – Brugge Style / Right Sidebar (stable + wider main 4cm)
   - 右サイドバー固定幅 / 左本文 可変
   - 落下防止：flex + nowrap / min-width:0
   - サイドバー位置は維持（--side-gutterそのまま）
   - 本文を約4cm広げる：container +152px & main-shrink=0
   - 2025-10
   ============================================================ */

:root{
  --bg-dark:#333333;
  --bg-white:#ffffff;
  --text:#333333;
  --text-muted:#666666;
  --text-faint:#999999;
  --link:#555555;
  --link-hover:#222222;
  --accent:#666666;
  --rule:#e6e6e6;

  /* ★本文を約4cm広げる：960px + 152px ≒ 1112px */
  --container-max: 1112px;

  /* ←サイドバーは触らない */
  --sidebar-w: 200px;      /* 右サイドバー幅（据え置き） */
  --space:16px;            /* 本文とサイドバーの隙間（据え置き） */
  --side-gutter: 12px;     /* 右端の余白（据え置き） */

  /* 本文の安全マージンをゼロにしてさらに広く */
  --main-shrink: 0px;

  --radius:6px;
  --fs:15px;
  --lh:1.75;
}

/* ベース */
*,
*::before,
*::after { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body{
  background:var(--bg-dark);
  color:var(--text);
  font-size:var(--fs);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  font-family:"Hiragino Mincho ProN","游明朝","YuMincho",
              "Noto Serif JP","Times New Roman",Times,serif;
}
a{ color:var(--link); text-decoration:underline; }
a:hover{ color:var(--link-hover); }
a:visited{ color:var(--text-faint); }
a:focus{ outline:2px dashed var(--accent); outline-offset:2px; }

/* 中央キャンバス */
#container{
  max-width:var(--container-max);
  margin:0 auto;
  background:var(--bg-white);
  min-height:100vh;
  border-left:1px solid #2b2b2b;
  border-right:1px solid #2b2b2b;
  overflow:hidden;
}

/* ヘッダー */
#blog-title, header#blog-title, header.site-header, .site-header, #header{
  background:var(--bg-dark) !important;
  color:#fff !important;
  padding:28px var(--space) !important;
  border-bottom:1px solid #2b2b2b !important;
  text-align:center !important;
}
#blog-title a, header#blog-title a, .site-header a, #header a{
  color:#fff !important; text-decoration:none;
}
#blog-title-inner .entry-title, #title, .site-title, #header .bTitle{
  color:#fff !important; font-size:22px; font-weight:700; margin:0; letter-spacing:.02em;
}
#blog-description, .site-description, #header .bDesc{
  color:#e6e6e6 !important; font-size:12px; margin-top:6px;
}

/* ===== 2カラム（右サイドバー）：落下防止セット ===== */
#content-inner{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;      /* 折返し禁止 */
  align-items:flex-start !important;
  gap:var(--space) !important;
  padding:var(--space) !important;
}

/* 本文（左）：残余幅 − 安全マージン − 右端余白（広め） */
#main, .main, #content-inner > .hatena-main, #content-inner > .content,
#content-inner > .entries, #content-inner > .main-inner, main, .main-inner{
  order:1 !important;
  flex:1 1 auto !important;
  max-width: calc(100% - var(--sidebar-w) - var(--space) - var(--main-shrink) - var(--side-gutter)) !important;
  min-width: 0 !important;          /* ← これがないと押し出して落ちる */
  float:none !important;
  margin:0 !important;
  padding-right:var(--space);
  overflow-wrap:anywhere; word-break:break-word;
}

/* 右サイドバー：固定幅＋右端余白（据え置き） */
#box2, #sidebar, .sidebar, #secondary, aside{
  order:2 !important;
  flex:0 0 var(--sidebar-w) !important;
  width:var(--sidebar-w) !important;
  max-width:var(--sidebar-w) !important;
  align-self:flex-start !important;
  float:none !important;
  margin:0 var(--side-gutter) 0 0 !important; /* 右端から内側へ寄せる余白（据え置き） */
  padding:8px 0;
  background:var(--bg-white) !important;
  position:relative !important; left:auto !important; right:auto !important; top:auto !important;
}

/* サイドバー内のはみ出し対策 */
#box2 *, #sidebar *, .sidebar *{ max-width:100%; }
#box2 table, #sidebar table, .sidebar table{
  width:100% !important; table-layout:fixed; border-collapse:collapse;
}
#box2 img, #sidebar img, .sidebar img,
#box2 iframe, #sidebar iframe, .sidebar iframe{
  max-width:100% !important; height:auto !important; display:block;
}

/* サイドバー見出し（小丸アイコン） */
#box2 .hatena-module-title, #sidebar .hatena-module-title, .sidebar .hatena-module-title,
#box2 h2, #sidebar h2, .sidebar h2{
  color:var(--text-faint);
  font-size:12px; font-weight:700;
  text-align:left; padding-left:14px; margin:0 0 6px; position:relative;
}
#box2 .hatena-module-title::before, #sidebar .hatena-module-title::before, .sidebar .hatena-module-title::before,
#box2 h2::before, #sidebar h2::before, .sidebar h2::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:50%; background:var(--text-faint);
}
#box2 .hatena-module, #sidebar .hatena-module, .sidebar .hatena-module{
  padding:0 0 20px; border-bottom:1px solid var(--rule); margin-bottom:16px;
}

/* 記事カード */
.entry, .hentry, article.entry{
  background:#fff; border:1px solid #d6d6d6; border-radius:var(--radius);
  padding:16px; margin:0 0 24px;
}
.entry-title, .entry-header h1, .entry-header h2, .entry .entry-title{
  color:var(--text-muted); font-size:22px; font-weight:700; margin:0 0 8px;
}
.entry-title a{ text-decoration:none; color:inherit; }
.entry-header::after{ content:""; display:block; height:2px; background:var(--accent); margin:8px 0 16px; }

.entry-content, .entry-body{
  color:var(--text);
  font-size:var(--fs);
  line-height:var(--lh);
  overflow-wrap:anywhere; word-break:break-word;
}
.entry-content img, .entry-body img{ max-width:100%; height:auto; border-radius:4px; }

.entry-content .thumbnail, .entry-body .thumbnail{
  float:left; margin:0 12px 8px 0; max-width:40%; height:auto; border-radius:4px;
}

.entry-footer, .entry-meta, .date, .categories, .hatena-urllist{
  font-size:12px; color:var(--text-faint); margin-top:8px;
}
hr{ border:0; height:1px; background:var(--rule); margin:20px 0; }

/* 日付リンクを無効化 */
.entryHead a:first-child,
.entry-meta .date a,
.date a,
.published a,
.post-date a,
.time a,
.entry .date a,
.entry .published a{
  pointer-events:none !important;
  cursor:default !important;
  text-decoration:none !important;
  color:inherit !important;
}

/* バナーを本文幅にフィット */
#main .entry-content .banner,
#main .entry-content .banner img,
.main .entry-content .banner,
.main .entry-content .banner img{
  display:block; width:100% !important; max-width:100% !important;
  height:auto !important; float:none !important; margin-left:0; margin-right:0;
}
#main .entry-content a > img[alt*="banner" i],
#main .entry-content a > img[title*="banner" i],
#main .entry-content a > img[alt*="バナー"],
#main .entry-content a > img[title*="バナー"],
.main .entry-content a > img[alt*="banner" i],
.main .entry-content a > img[title*="banner" i],
.main .entry-content a > img[alt*="バナー"],
.main .entry-content a > img[title*="バナー"]{
  display:block; width:100% !important; max-width:100% !important; height:auto !important; float:none !important;
}
#main .entry-content figure,
#main .entry-content .figure,
#main .entry-content figure.hatena-fotolife,
.main .entry-content figure,
.main .entry-content .figure,
.main .entry-content figure.hatena-fotolife{
  margin-left:0; margin-right:0;
}
#main .hatena-ads, #main .hatena-ads iframe,
#main .adsbygoogle, #main .adsbygoogle iframe,
.main .hatena-ads, .main .hatena-ads iframe,
.main .adsbygoogle, .main .adsbygoogle iframe{
  display:block; width:100% !important; max-width:100% !important; height:auto !important;
}

/* 旧float無効化の保険 */
#main:before, #main:after, #box2:before, #box2:after{ content:none !important; }
#main, #box2, #sidebar, .sidebar{ float:none !important; }

/* フッター */
#footer, .site-footer{
  padding:var(--space);
  color:var(--text-faint);
  font-size:12px;
  border-top:1px solid var(--rule);
}

/* スマホ：縦積み（本文→サイドバー） */
@media (max-width: 900px){
  #container{ border-left:0; border-right:0; }
  #content-inner{ flex-direction:column !重要; gap:var(--space); }
  #main, .main{
    order:1 !important; width:auto !important; padding-right:0 !important;
    flex: 1 1 auto !important; max-width: 100% !important;
  }
  #box2, #sidebar, .sidebar{
    order:2 !important; width:auto !important; flex:0 0 auto !important;
    margin:0 !important; /* 右端余白はモバイルで無効化 */
  }
  .entry-content .thumbnail, .entry-body .thumbnail{
    float:none; max-width:100%; margin:0 0 12px;
  }
}

/* ============================================================
   WIDTH OVERRIDE PACK（はてな幅の“支配者”退治）
   - 本文だけ広がらない問題を解消
   - 4cm増やしたい設定：--container-max: 1112px; --main-shrink: 0px;
   - 右サイドバーの位置/幅/余白（--sidebar-w, --side-gutter）は変更しない
   ============================================================ */

/* 1) 目標幅（必要ならここで増減：1cm ≒ 38px） */
:root{
  --container-max: 1112px; /* 960 + 152 ≒ 4cm拡張 */
  --main-shrink: 0px;      /* 本文の安全マージンをゼロにしてさらに広く */
}

/* 2) テーマ側が幅を握っている“主要ラッパ”を一括で上書き */
#container, #content, #content-inner,
#wrapper, .wrapper,
.container, .container-inner,
#page, .page, .page-inner,
#blog, .blog,
.hatena-body, .hatena-body,
.hatenablog, .hatenablog-body {
  max-width: var(--container-max) !important;
  width: min(100%, var(--container-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 3) 本文やエントリー自体に付いている“個別のmax-width”を解除 */
#main, .main, .hatena-main, main,
.entries, .entries, .main-inner,
.entry, article.entry, .entry-inner,
.entry-content, .entry-body {
  max-width: none !important;
  width: auto !important;
}

/* 4) 2カラム親も同じ幅を使用させる（paddingで詰まらないよう保険） */
#content-inner{
  max-width: var(--container-max) !important;
  box-sizing: border-box !important;
}

/* ── 仕上げの微調整（任意） */

/* 1) 右サイドバーを軽く追従（長文でも見失わない） */
#box2, #sidebar, .sidebar{
  position: sticky;          /* 追従 */
  top: calc(var(--space) + 8px);
  align-self: flex-start;
}

/* 2) 長いURLやコードで横に溢れない */
.entry-content pre, .entry-body pre{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
.entry-content code, .entry-body code{
  word-break: break-word;
}
.entry-content a[href^="http"]{
  word-break: break-all;     /* 日本語本文は壊さずURLだけ折り返す */
}

/* 3) 横に広い表はスクロールで逃がす（スマホでも崩れない） */
.entry-content table, .entry-body table{
  display:block;
  overflow-x:auto;
}

/* 4) 下線の視認性を少し改善（お好みで） */
a{
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}


/* ============================================================
   Pager Navigation – 「前のページ」「次のページ」間隔調整
   ============================================================ */

.blog-pager,
.pager{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;              /* ←リンク同士の間隔を確保（任意で3remなど） */
  margin-top: 3rem;         /* 本文との距離 */
  margin-bottom: 3rem;
  padding-inline: var(--space); /* 本文幅に揃える（Method B撤去に伴い修正） */
  font-size: 0.95em;
}

/* リンクの見た目を安定化 */
.blog-pager a,
.pager a{
  display: inline-block;
  padding: 0.6em 1.2em;
  text-decoration: none;
  border: 1px solid var(--rule, #ddd);
  border-radius: 6px;
  background: var(--bg-white, #fff);
  color: var(--link, #333);
  transition: all 0.2s ease;
}

.blog-pager a:hover,
.pager a:hover{
  background: var(--accent, #f2f2f2);
  color: var(--link-hover, #000);
}

/* スマホでは縦並びにして間隔を確保 */
@media (max-width: 600px){
  .blog-pager,
  .pager{
    flex-direction: column;
    gap: 1.2rem;
  }
  .blog-pager a,
  .pager a{
    width: 100%;
    text-align: center;
  }
}

/* ── 中央キャンバスだけ左右合計4cm狭める（最小パッチ） */
:root{ --container-max: calc(1112px - 4cm); }

#content-inner{
  max-width: var(--container-max);
  margin-inline: auto;
}



/* ============================================================
   PC専用パッチ（方向互換）：Pagerを強制表示し、
   「前（過去）の記事」／「次（未来）の記事」に統一
   ============================================================ */
@media (min-width: 601px){

  /* コンテナは常に見せる */
  .blog-pager,
  .pager,
  .page-nav,
  .pagination,
  .archive-pager,
  .entry-pager{
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
  }

  /* 片側がspan/liでも出るように箱を可視化 */
  .pager-prev,
  .nav-previous,
  .older-posts,
  .previous-page{ display: block !important; }
  .pager-next,
  .nav-next,
  .newer-posts,
  .next-page{ display: block !important; }

  /* ── ラベル置換：まず視覚テキストを隠す ── */
  /* 未来側（newer / prev / pager-prev） */
  .newer-posts a,
  .nav-previous a,
  .pager a[rel="prev"],
  .page-nav a[rel="prev"],
  .pagination a[rel="prev"],
  .pager-prev a{
    font-size: 0 !important;
    position: relative;
  }
  .newer-posts a::before,
  .nav-previous a::before,
  .pager a[rel="prev"]::before,
  .page-nav a[rel="prev"]::before,
  .pagination a[rel="prev"]::before,
  .pager-prev a::before{
    content: "次（未来）の記事";
    font-size: 1rem;
  }

  /* 過去側（older / next / pager-next） */
  .older-posts a,
  .nav-next a,
  .pager a[rel="next"],
  .page-nav a[rel="next"],
  .pagination a[rel="next"],
  .pager-next a{
    font-size: 0 !important;
    position: relative;
  }
  .older-posts a::before,
  .nav-next a::before,
  .pager a[rel="next"]::before,
  .page-nav a[rel="next"]::before,
  .pagination a[rel="next"]::before,
  .pager-next a::before{
    content: "前（過去）の記事";
    font-size: 1rem;
  }
}





/* 記事本文を明朝体に統一 */
.entry-content, 
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
body {
  font-family: "游明朝体", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", "MS 明朝", serif;
  font-weight: 400;
  line-height: 1.8;
}