/*
Theme Name: GeneratePress Child
Template: generatepress
*/

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

/* ================== Base ================== */
/* ルート変数（色・フォント） */
:root {
  --gp-accent: #0050b3; /* ナビ強調色（リンク色より少し濃い） */
  --gp-text: #111;
}

/* -------- ヘッダー & ナビゲーション基本余白 -------- */
.inside-header {
  /* 左右は 40px 固定、上下は 0.75rem 共通で管理 */
  padding-inline: 40px;
  padding-block: .75rem;
}

/* ナビゲーション本体の上下余白 */
.inside-navigation {
  padding-block: .75rem;
}

/* スクロール固定時はさらに絞る */
body.navigation-stick .inside-navigation {
  padding-block: .4rem;
}

/* -------------------------------------------------------
   シンプルなカテゴリボックスのスタイル
------------------------------------------------------- */
.post-category-box {
  border: 1px solid #ccc;
  padding: 10px;
  display: block; /* インラインブロックからブロックに変更 */
  margin: 0 auto 1em; /* 上:0, 左右:中央寄せ, 下:余白 */
  background-color: #f8f8f8; /* ボックスの背景色 */
  text-align: center; /* テキストも中央寄せ */
  width: 300px;
}

.post-category-box .category-label {
  font-weight: bold;
  margin-right: 5px;
}

.post-category-box a {
  text-decoration: none; /* 下線を消す */
  color: inherit; /* 親要素の色に合わせる場合 */
}

.post-category-box a:hover {
  text-decoration: underline; /* ホバーしたときの下線 */
}

/* =====================================================
   スマホ（幅 640px 以下）だけ横スクロール＆常時バー表示
===================================================== */
@media (max-width: 640px) {
  table {
    display: block; /* ブロック化してスクロール可能に */
    overflow-x: scroll; /* 常にバーを出す（auto だと非表示になる） */
    -webkit-overflow-scrolling: touch; /* iOS の慣性スクロール */
    white-space: nowrap; /* セル改行を防ぎ、縦方向の伸びを抑制 */
    scrollbar-width: thin; /* Firefox 用：細め & 常時表示 */
    scrollbar-color: rgba(0, 0, 0, .3) rgba(0, 0, 0, .05); /* バー装飾 */
  }
  table::-webkit-scrollbar {
    height: 8px; /* バーの太さ */
  }
  table::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05); /* トラック（背景） */
  }
  table::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .3); /* つまみ部分 */
    border-radius: 4px;
  }
}

/* ================== AI Notice Box ================== */
.ai-notice {
  border: 3px solid #ff4d4d; /* はっきり見える赤枠 */
  background: #fff5f5; /* ごく淡い赤背景 */
  box-sizing: border-box;
  width: 100%; /* 記事幅いっぱいに四角囲み */
  padding: 1.2em;
  margin: 0 0 1.5em; /* 下だけ余白 */
  text-align: center; /* 中央揃え */
  font-weight: 700; /* 全体をより太字に */
  border-radius: 4px; /* 角を少し丸めたい場合 */
}

/* ===========================================================
   GeneratePress – 洗練ナビゲーション 2025-06-22 修正版
=========================================================== */

/* ---------- 1. 第一階層メニュー ----------------------- */
.main-navigation .sf-menu > li {
  margin-inline: clamp(.6rem, 0vw, 1rem); /* 項目間をやや詰める */
}

.main-navigation .sf-menu > li > a {
  position: relative;
  display: inline-block;
  padding-block: .2rem; /* 項目のタテ余白を縮小 */
  font-family: var(--jp-font);
  font-weight: 500;
  font-size: 1rem;
  color: var(--gp-text);
  text-decoration: none;
  letter-spacing: .02em;
}

/* 英語ラベルは英字フォントに切替 */
.main-navigation .sf-menu > li > a:lang(en) {
  font-family: var(--en-font);
  letter-spacing: .05em;
}

/* ---------- 2. 下線アニメ（Hover / Current） ---------- */
.main-navigation .sf-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px; /* 下線が文字に被らないよう -4px へ */
  width: 0;
  height: 2px;
  background: var(--gp-accent);
  transition: width .25s ease;
}

.main-navigation .sf-menu > li:hover > a::after,
.main-navigation .sf-menu > li.current-menu-item > a::after {
  width: 100%;
}

/* ---------- 3. サブメニュー（ドロップダウン）----------- */
.main-navigation ul ul {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
  padding: .65rem 0;
  background: #fff;
  min-width: 11rem;
}

/* Superfish が付与する .sfHover でも可視化 */
.main-navigation li:hover > ul,
.main-navigation li.sfHover > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* サブメニュー内リンク */
.main-navigation ul ul a {
  display: block;
  padding: .45rem 1.25rem;
  white-space: nowrap;
  font-size: .95rem;
}

/* ---------- 4. モバイル（～600px） -------------------- */
@media (max-width: 600px) {
  .menu-toggle {
    order: -1; /* ハンバーガーをロゴの左側へ */
  }
  .main-navigation.toggled .main-nav {
    max-height: calc(100vh - 52px); /* ヘッダー高さを差し引き */
  }
  .main-navigation .sf-menu > li {
    margin-inline: 0;
  }
  .main-navigation .sf-menu > li > a {
    padding: .0.38rem 1.2rem;
    font-size: 1.05rem;
  }
  /* モバイルでは下線アニメ（青い河川）を完全にオフ */
  .main-navigation .sf-menu > li > a::after {
    content: none !important;
  }
}

/* ---------- 5. キーボード操作用フォーカスリング -------- */
.main-navigation a:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 4px;
}

/* =========================================================
   Post Card – subtle & elegant
   対象: GeneratePress の記事リスト (.inside-article)
   作成: 2025-06-25
========================================================= */

/* ---------- 1. ベース装飾 -------------------------------- */
.inside-article {
  position: relative;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  padding: 2.2rem 2rem 2.4rem; /* タイトルが大きめでも余裕 */
  margin-block: 2.2rem; /* カード間スペース */
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 6px 14px rgba(0,0,0,.05); /* ほんのり立体感 */
  transition: transform .25s ease, box-shadow .25s ease;
}

/* ---------- 2. Hover アニメ – 持ち上げ効果 -------------- */
@media (hover:hover) {
  .inside-article:hover {
    transform: translateY(-4px);
    box-shadow:
      0 6px 10px rgba(0,0,0,.06),
      0 14px 28px rgba(0,0,0,.08);
  }
}

/* ---------- 3. タイトル ---------------------------------- */
.inside-article .entry-title a {
  color: var(--gp-text, #111);
  text-decoration: none;
}
.inside-article .entry-title a:hover {
  color: var(--gp-accent, #0050b3);
}

/* ---------- 4. メタ情報 (日付・作者) ---------------------- */
.posted-on,
.byline {
  font-size: .85rem;
  opacity: .7;
}

/* ---------- 5. 抜粋 -------------------------------------- */
.inside-article .entry-summary {
  margin-top: .6rem;
  font-size: .95rem;
  line-height: 1.65;
}

/* ---------- 6. カテゴリ表示（アイコン行） ------------------ */
.entry-meta-bottom {
  margin-top: 1.4rem;
  border-top: 1px solid rgba(0,0,0,.07);
  padding-top: .9rem;
  font-size: .85rem;
}

/* ---------- 7. モバイル微調整 --------------------------- */
@media (max-width: 600px) {
  .inside-article {
    padding: 1.5rem 1.25rem;
    border-radius: 10px;
  }
  .inside-article .entry-summary {
    font-size: .92rem;
  }
}

/* ==========================================================
   Archive Header – Slim & Modern  (2025-06-25 rev2)
   .page-header をリデザイン
========================================================== */
.page-header{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:140px;
  padding:0 1.5rem;
  margin:0 0 2.4rem;
  background:#fafbfd;
  border:1px solid rgba(0,0,0,.04);
  border-radius:10px;
  position:relative;
  overflow:hidden;
}

/* 見出し文字 */
.page-header .page-title{
  font-weight:700;
  font-size:clamp(1.3rem,1rem+1vw,2rem);
  letter-spacing:.04em;
  margin:0;
  text-align:center;
  color:var(--gp-text,#111);
}

/* 説明文がある場合 */
.term-description{
  display:block;
  font-size:.9rem;
  opacity:.8;
  margin-top:.4rem;
  max-width:55ch;
  text-align:center;
}

/* モバイル調整 */
@media(max-width:600px){
  .page-header{min-height:110px;padding:0 1rem;}
  .page-header::before{width:4px;}
  .page-header::after{right:-100px;top:-100px;width:200px;height:200px;}
}

/* =======================================================
   Page Header – Simple Accent (2025-06-25 rev5)
======================================================= */

/* 1. 余計な装飾をゼロに */
body.page .page-header,
body.page .entry-header{
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 2rem 0 1.5rem;
  margin: 0 0 2rem;
  text-align: center;
}

/* 2. 見出しフォント & 配置 */
body.page .page-title,
body.page .entry-title{
  font-family: var(--gp-sans, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  line-height: 1.3;
  letter-spacing: .04em;
  margin: 0;
  position: relative;
  display: inline-block;
  color: var(--gp-text, #111);
}

/* 3. アクセントライン（下線） */
body.page .page-title::after,
body.page .entry-title::after{
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin: .6rem auto 0;
  background: var(--gp-accent, #0050b3);
  border-radius: 1.5px;
}

/* 4. モバイル微調整 */
@media (max-width: 600px){
  body.page .page-title,
  body.page .entry-title{
    font-size: 1.8rem;
  }
}

/* =======================================================
   Single Post Header – Simple Accent (match fixed pages)
   2025-06-25
======================================================= */

/* 1. 余白と装飾をリセット */
body.single .entry-header{
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 2rem 0 1.5rem;
  margin: 0 0 2rem;
  text-align: center;
}

/* 2. タイトル文字 */
body.single .entry-title{
  font-family: var(--gp-sans, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  line-height: 1.3;
  letter-spacing: .04em;
  margin: 0;
  position: relative;
  display: inline-block;
  color: var(--gp-text, #111);
}

/* 3. アクセント下線 */
body.single .entry-title::after{
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin: .6rem auto 0;
  background: var(--gp-accent, #0050b3);
  border-radius: 1.5px;
}

/* 4. モバイル微調整 */
@media (max-width: 600px){
  body.single .entry-title{ font-size: 1.8rem; }
}

/* =========================================================
   Responsive Grid Card Layout for Post Lists
   一覧ページ（blog / archive / home の記事ループ）
   2025-06-25 consolidated
========================================================= */

/* 0. 共通変数（必要に応じて変更） */
:root{
  --gp-accent: #0050b3;
  --gp-sans: "Noto Sans JP", sans-serif;
  --gp-text: #111;
}

/* 1. グリッド化 & ギャップ設定 */
body.blog   .site-main,
body.archive .site-main,
body.home   .site-main{
  display: grid;
  gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* 2. 各記事カードのベース */
body.blog   .inside-article,
body.archive .inside-article,
body.home   .inside-article{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.04);
  padding:1.8rem 1.6rem 2.2rem;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
@media (hover:hover){
  body.blog   .inside-article:hover,
  body.archive .inside-article:hover,
  body.home   .inside-article:hover{
    transform:translateY(-4px);
    box-shadow:0 6px 14px rgba(0,0,0,.06);
  }
}

/* 3. タイトル */
body.blog   .inside-article .entry-title,
body.archive .inside-article .entry-title,
body.home   .inside-article .entry-title{
  font-family:var(--gp-sans);
  font-size:1.1rem;
  line-height:1.35;
  font-weight:700;
  margin:0 0 .6rem;
}
body.blog   .inside-article .entry-title a,
body.archive .inside-article .entry-title a,
body.home   .inside-article .entry-title a{
  color:var(--gp-text);
  text-decoration:none;
}
body.blog   .inside-article .entry-title a:hover,
body.archive .inside-article .entry-title a:hover,
body.home   .inside-article .entry-title a:hover{
  color:var(--gp-accent);
}

/* 4. 抜粋 */
body.blog   .inside-article .entry-summary,
body.archive .inside-article .entry-summary,
body.home   .inside-article .entry-summary{
  flex:1 1 auto;
  font-size:.95rem;
  line-height:1.65;
  margin-bottom:0;
}

/* 5. Read-More ボタン */
body.blog   .read-more,
body.archive .read-more,
body.home   .read-more{
  display:block;
  width:fit-content;
  margin:1rem 0 0 auto;
  padding:.55rem 1.15rem;
  background:var(--gp-accent);
  color:#fff!important;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  border-radius:4px;
  transition:background .2s ease,transform .15s ease;
}
body.blog   .read-more:hover,
body.archive .read-more:hover,
body.home   .read-more:hover{
  background:#003f8c;
  transform:translateY(-1px);
}

/* 6. メタ情報（投稿日・カテゴリなど） */
body.blog   .entry-meta,
body.archive .entry-meta,
body.home   .entry-meta{
  font-size:.8rem;
  opacity:.75;
  margin-bottom:.8rem;
}

/* 7. 見出し（ページタイトル）をフル幅 */
body.blog   .page-header,
body.archive .page-header,
body.home   .page-header,
body.blog   .entry-header,
body.archive .entry-header,
body.home   .entry-header{
  grid-column:1/-1;
  text-align:center;
  padding:2rem 0 1.5rem;
  margin:0 0 2rem;
  background:none;
  border:none;
}
body.blog   .page-title,
body.archive .page-title,
body.home   .page-title,
body.blog   .entry-header .entry-title,
body.archive .entry-header .entry-title,
body.home   .entry-header .entry-title{
  font-family:var(--gp-sans);
  font-size:clamp(1.6rem,1.2rem+1vw,2.4rem);
  font-weight:700;
  letter-spacing:.04em;
  margin:0;
  position:relative;
  display:inline-block;
  color:var(--gp-text);
}
body.blog   .page-title::after,
body.archive .page-title::after,
body.home   .page-title::after,
body.blog   .entry-header .entry-title::after,
body.archive .entry-header .entry-title::after,
body.home   .entry-header .entry-title::after{
  content:"";
  display:block;
  width:68px;
  height:3px;
  margin:.6rem auto 0;
  background:var(--gp-accent);
  border-radius:1.5px;
}

/* 8. ページネーションをフル幅中央寄せ */
body.blog   nav.navigation.pagination,
body.archive nav.navigation.pagination,
body.home   nav.navigation.pagination{
  grid-column:1/-1;
  margin-top:2.5rem;
}
body.blog   nav.navigation.pagination .nav-links,
body.archive nav.navigation.pagination .nav-links,
body.home   nav.navigation.pagination .nav-links{
  display:flex;
  justify-content:center;
  gap:.5rem;
}
body.blog   .nav-links a,
body.archive .nav-links a,
body.home   .nav-links a{
  padding:.45rem .85rem;
  background:#f2f4f8;
  color:var(--gp-text);
  text-decoration:none;
  border-radius:4px;
  font-size:.9rem;
  transition:background .2s ease;
}
body.blog   .nav-links a:hover,
body.archive .nav-links a:hover,
body.home   .nav-links a:hover{
  background:#e1e5ee;
}
body.blog   .nav-links .current,
body.archive .nav-links .current,
body.home   .nav-links .current{
  background:var(--gp-accent);
  color:#fff;
}

/* 9. モバイル調整 */
@media(max-width:479px){
  body.blog   .site-main,
  body.archive .site-main,
  body.home   .site-main{
    grid-template-columns:1fr;
  }
  body.blog   .inside-article,
  body.archive .inside-article,
  body.home   .inside-article{
    padding:1.6rem 1.3rem 2rem;
  }
}

/* =========================================================
   Pagination FINAL fix  (2025-06-25)
   1) 白いカード枠/影を完全リセット
   2) 全幅中央寄せを維持
   3) 現在ページ番号を白字に
========================================================= */

/* ① ラッパー .paging-navigation をカード化させない */
body.blog   .paging-navigation,
body.archive .paging-navigation,
body.home   .paging-navigation{
  grid-column: 1 / -1;
  margin-top: 2.5rem;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
}

/* ② 中身 .nav-links をフレックス中央 */
body.blog   .paging-navigation .nav-links,
body.archive .paging-navigation .nav-links,
body.home   .paging-navigation .nav-links{
  display: flex;
  justify-content: center;
  gap: .5rem;
}

/* ③ ページ番号ボタンのフラットデザイン */
body.blog   .nav-links a,
body.archive .nav-links a,
body.home   .nav-links a,
body.blog   .nav-links span.page-numbers,
body.archive .nav-links span.page-numbers,
body.home   .nav-links span.page-numbers{
  padding: .45rem .85rem;
  background: #f2f4f8;
  color: var(--gp-text, #111);
  text-decoration: none;
  border-radius: 4px;
  font-size: .9rem;
  transition: background .2s ease;
}

/* ホバー時 */
body.blog   .nav-links a:hover,
body.archive .nav-links a:hover,
body.home   .nav-links a:hover{
  background:#e1e5ee;
}

/* 現在ページ (spans) を強調 : 白字＋ブランド色背景 */
body.blog   .nav-links .current,
body.archive .nav-links .current,
body.home   .nav-links .current{
  background: var(--gp-accent, #0050b3);
  color:#0000ff !important;
}

/* ===============================
   一覧ページ：カードを同一高さに揃える
   =============================== */
.blog .inside-article,
.archive .inside-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid #e0e4e9;
  border-radius: 6px;
  padding: 24px 32px;
  box-sizing: border-box;
}

.blog .inside-article .entry-summary,
.archive .inside-article .entry-summary {
  flex: 1 1 auto;
  margin-bottom: 24px;
}

/* 「続きを読む」ボタンを最下部に固定する */
.blog .inside-article .read-more,
.archive .inside-article .read-more {
  margin-top: auto;
  align-self: flex-start;
}

/* ===============================
   カードをグリッドで等間隔に配置
   =============================== */
.generatepress-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}

/* ===============================
   カテゴリラベル（カード下部）
   =============================== */
.archive .inside-article .cat-links a,
.blog .inside-article .cat-links a {
  display: inline-block;
  background: #ffffff;
  padding: 4px 10px;
  border: 1px solid #d3d8de;
  border-radius: 4px;
  font-size: 13px;
  text-decoration: none;
  color: #0060df;
}

.archive .inside-article .cat-links a:hover,
.blog .inside-article .cat-links a:hover {
  background: #f1f4f8;
}

/* カード内：抜粋と「続きを読む」の間隔を 2 rem に */
body.blog   .inside-article .entry-summary,
body.archive .inside-article .entry-summary,
body.home   .inside-article .entry-summary{
    margin-bottom: 2rem;
}

/* さらにボタン側にも少し足したい場合は追加で */
body.blog   .inside-article .read-more,
body.archive .inside-article .read-more,
body.home   .inside-article .read-more{
    margin-top: 1.5rem;
}

/* スマホ幅だけ .site-main の左右に 16px の余白を確保 */
@media (max-width: 479px){
  body.blog   .site-main,
  body.archive .site-main,
  body.home   .site-main{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── シングル投稿：スマホだけ左右 16px パディング ───────────── */
@media (max-width: 479px){
  body.single .site-main{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== 固定ページ：スマホだけ左右 16px 余白 ===== */
@media (max-width: 479px){
  body.page .site-main{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== 固定ページ：スマホだけ左右 16px 余白（1309 を除外）===== */
@media (max-width: 479px){
  /* 1) まず “すべての固定ページ” に余白を付けるが… */
  body.page .site-main{
    padding-inline: 16px;
  }
  /* 2) page-id-1309 が付くページでは 0 に上書き */
  body.page.page-id-1309 .site-main{
    padding-inline: 0 !important;
  }
  /* 逆に「他の固定ページ全部に効かない」場合は… */
  /* body.page:not(.page-id-1309) .site-main{ … } */
}

/* 右サイドのウィジェット全体をカード風に */
.sidebar .widget, .right-sidebar .widget, .widget-area .widget {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 24px 20px;
    margin-bottom: 32px;
    border: 1px solid #eee;
}

/* リンクリストのスタイル調整 */
.sidebar .widget ul,
.right-sidebar .widget ul,
.widget-area .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar .widget ul li,
.right-sidebar .widget ul li,
.widget-area .widget ul li {
    margin-bottom: 14px;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.sidebar .widget ul li a,
.right-sidebar .widget ul li a,
.widget-area .widget ul li a {
    color: #111;
    text-decoration: none;
    transition: opacity 0.2s;
    padding-left: 8px;
    font-weight: 500;
    position: relative;
}

.sidebar .widget ul li a:hover,
.right-sidebar .widget ul li a:hover,
.widget-area .widget ul li a:hover {
    opacity: 0.7;
}

/* ▶アイコンを左側に（ただし custom-recent-posts だけ除外） */
.sidebar .widget ul li::before,
.right-sidebar .widget ul li::before,
.widget-area .widget ul li::before {
    content: "▶";
    font-size: 0.9em;
    color: #aaa;
    margin-right: 7px;
    display: inline-block;
}

/* 「最近の投稿」のリストだけ ▶ を消す */
.sidebar .widget ul.custom-recent-posts li::before,
.right-sidebar .widget ul.custom-recent-posts li::before,
.widget-area .widget ul.custom-recent-posts li::before {
    content: none !important;
    display: none !important;
}

/* サイドバーウィジェットの上余白 */
.sidebar .widget,
.right-sidebar .widget,
.widget-area .widget {
    margin-top: 34px;
}

.custom-recent-posts li {
    display: block !important;
    margin-bottom: 16px;
    line-height: 1.4;
}

.custom-recent-posts .recent-post-head {
    display: flex;
    align-items: center;
    gap: 7px;
}

.custom-recent-posts .post-arrow {
    font-size: 0.95em;
    color: #aaa;
    margin-right: 3px;
    flex-shrink: 0;
}

.custom-recent-posts .badge-row {
    margin-top: 6px;
    display: flex;
    gap: 6px;
}

.custom-recent-posts .cat-badge,
.custom-recent-posts .date-badge {
    display: inline-block;
    background: #222;
    color: #fff;
    font-size: 0.68em;
    border-radius: 4px;
    padding: 2px 10px;
    font-weight: 600;
    white-space: nowrap;
}

.custom-recent-posts .date-badge {
    background: #555;
}

.custom-recent-posts li {
    position: relative;
    padding-bottom: 14px;
}

.custom-recent-posts li:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(0,0,0,0.07);
}

/* ショートタイムライン用リストはサイドバーの他ウィジェットCSSをリセット */
.custom-short-timeline li {
    display: block !important;
    position: relative;
    margin-bottom: 18px;
    font-size: 1em;
    color: #111;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    background: none;
    align-items: unset !important;
    flex-direction: unset !important;
    justify-content: unset !important;
}

/* 最後のliだけ線を消す */
.custom-short-timeline li:last-child {
    border-bottom: none;
}

/* ショートタイムライン内のli::beforeを消す */
.custom-short-timeline li::before {
    content: none !important;
    display: none !important;
}

/* 本文内の画像やテキストの整形を優先、画像はmax幅を親リスト内に合わせる */
.custom-short-timeline li img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
}

/* 本文の段落や改行も自然に */
.custom-short-timeline li p {
    margin: 0 0 6px 0;
    line-height: 1.7;
    word-break: break-word;
}

/* 日付は本文のすぐ後ろにグレーで自然に */
.custom-short-timeline .timeline-date {
    color: #888;
    font-size: 0.87em;
    margin-left: 0.7em;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: baseline;
}

/* アーカイブ/カテゴリページのタイトル下余白を短く */
.page-header,
.archive .page-header,
.category .page-header,
.tag .page-header {
    margin-bottom: -3rem !important;
    padding-bottom: 0 !important;
}

/* さらに .site-main に上余白がある場合も補正 */
.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 600px) {
  .sidebar .widget,
  .right-sidebar .widget,
  .widget-area .widget {
    margin-left: 18px;
    margin-right: 18px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* タブレット幅（480px〜959px程度）にも左右余白を入れる */
@media (min-width: 480px) and (max-width: 959px) {
  body.blog   .site-main,
  body.archive .site-main,
  body.home   .site-main {
    padding-left: 24px;
    padding-right: 24px;
  }
  body.single .site-main,
  body.page .site-main {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* タブレット時にもウィジェット全体に余白をつける */
@media (min-width: 600px) and (max-width: 1023px) {
  .sidebar .widget,
  .right-sidebar .widget,
  .widget-area .widget {
    margin-left: 24px;
    margin-right: 24px;
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* --- 最近の投稿ウィジェットを「ショートタイムライン」と完全統一 --- */
.custom-recent-posts li {
  font-size: 1em;
  color: #111;
  line-height: 1.7;
}
.custom-recent-posts .recent-post-head {
  font-size: 1em;    /* 本文と同じ */
  font-weight: 600;
  margin-bottom: 3px;
  letter-spacing: 0.01em;
}

.custom-recent-posts .badge-row {
  margin-top: 2px;
  margin-bottom: 0;
  text-align: left;
  font-size: 1em;   /* タイムラインと揃える */
  color: #bbb;      /* カテゴリ・日付の薄グレー */
  letter-spacing: .02em;
}

.custom-recent-posts .cat-badge {
  display: inline;
  background: none;
  color: #bbb;
  font-size: 1em;
  margin-right: 10px;
  padding: 0;
  border: none;
  border-radius: 0;
  font-weight: normal;
}

.custom-recent-posts .date-badge {
  display: inline;
  background: none;
  color: #888;            /* タイムラインと同じグレー */
  font-size: 0.87em;      /* 完全に合わせる場合 */
  padding: 0;
  margin: 0;
  letter-spacing: 0.02em;
  vertical-align: baseline;
}

/* モバイル */
@media (max-width: 600px) {
  .custom-recent-posts li,
  .custom-recent-posts .recent-post-head,
  .custom-recent-posts .badge-row,
  .custom-recent-posts .cat-badge {
    font-size: 1em;
  }
  .custom-recent-posts .date-badge {
    font-size: 0.87em;
  }
}

.custom-recent-posts li,
.custom-short-timeline li {
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  font-size: 1em;
}

.custom-recent-posts li:last-child,
.custom-short-timeline li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* タイトル下カテゴリだけ中央揃え */
.post-categories--top {
    text-align: center;
    margin-top: 0;
    margin-bottom: 0.6em;
    font-weight: bold;
    font-size: 1.07em;
    line-height: 1.3;
}

/* 記事上部メタ（著者・日付）だけ中央揃え */
.entry-meta--top {
    text-align: center !important;
    width: 100%;
    display: block;
    margin: 0 auto 1em auto;
    opacity: 0.78;
    font-size: 1em;
}

/* その他のカテゴリ（下部等）は左寄せ */
.post-categories:not(.post-categories--top),
.cat-links {
    text-align: left !important;
    margin-left: 0;
}

/* 投稿ページ(.single)の中にある特定の画像要素だけに適用 */
.single .size-auto, 
.single .size-full, 
.single .size-large, 
.single .size-medium, 
.single .size-thumbnail {
    max-width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 一覧ページ：タイトルの修正 */
body.blog .inside-article .entry-title,
body.archive .inside-article .entry-title,
body.home .inside-article .entry-title {
    display: block !important; /* flexを解除してブロックに戻す（これで線が下に行きます） */
    text-align: center;
    /* タイトルの高さを固定して著者情報の位置を揃える（3行分程度） */
    min-height: 4em; 
    margin-bottom: 1rem !important; /* 著者情報（日付）との間隔を約1行分に */
    position: relative;
}

/* タイトル下の青い線の調整 */
body.blog .inside-article .entry-title::after,
body.archive .inside-article .entry-title::after,
body.home .inside-article .entry-title::after {
    content: "";
    display: block; /* 必ず改行して下に配置 */
    width: 60px;
    height: 3px;
    background: var(--gp-accent);
    margin: 0.6rem auto 0; /* 文字との隙間を0.6行分、左右中央に */
    border-radius: 2px;
}

/* 著者・日付（メタ情報）の余白微調整 */
body.blog .entry-meta,
body.archive .entry-meta,
body.home .entry-meta {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 1. 著者情報（日付・名前）の下側の余白を狭める */
body.blog .entry-meta,
body.archive .entry-meta,
body.home .entry-meta {
    margin-bottom: 0.1rem !important; /* 1.2rem程度あったものを0.5rem（約半行分）に縮小 */
}

/* 2. サムネイル画像の上側の余白をゼロにする */
body.blog .post-image,
body.archive .post-image,
body.home .post-image {
    margin-top: 0 !important;
    line-height: 0; /* 画像の下にわずかに生じる隙間も防止 */
}

/* 3. 画像自体の余白設定（念のため） */
body.blog .post-image img,
body.archive .post-image img,
body.home .post-image img {
    margin-top: 0 !important;
    vertical-align: bottom;
}

/* 記事一覧（ホームページ・アーカイブ・カテゴリー等）でサムネイルを非表示にする */
body.blog .post-image,
body.archive .post-image,
body.home .post-image {
    display: none !important;
}

/* 画像が消えたあとの抜粋文との間隔を調整 */
body.blog .inside-article .entry-summary,
body.archive .inside-article .entry-summary,
body.home .inside-article .entry-summary {
    margin-top: 0rem; /* 著者情報のすぐ下に適度な隙間を作る */
}

/* 1. タイトル（青い線）から著者情報の間隔をせばめる */
body.blog .inside-article .entry-title,
body.archive .inside-article .entry-title,
body.home .inside-article .entry-title {
    margin-bottom: 0.1rem !important; /* タイトル下の余白を最小限に */
}

/* 2. 著者情報から本文抜粋の間隔を「1行分」にする */
body.blog .inside-article .entry-summary,
body.archive .inside-article .entry-summary,
body.home .inside-article .entry-summary {
    margin-top: 0rem !important; /* 1行分(1rem)の空きを確保 */
}

/* 3. 本文抜粋から「続きを読む」ボタンの間隔をせばめる */
body.blog .inside-article .entry-summary,
body.archive .inside-article .entry-summary,
body.home .inside-article .entry-summary {
    margin-bottom: 0.1rem !important; /* 以前の2remから大幅に縮小 */
}

/* ボタン側の上の余白もリセット */
body.blog .read-more,
body.archive .read-more,
body.home .read-more {
    margin-top: 0 !important;
}

/* ── 投稿ページ：画像のレスポンシブ調整 ── */

/* 1. PC・タブレット（基本設定）：サイズを70%に抑える */
.single .size-auto, 
.single .size-full, 
.single .size-large, 
.single .size-medium, 
.single .size-thumbnail {
    max-width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* 2. スマホ（画面幅600px以下）の場合：100%表示にする */
@media (max-width: 600px) {
    .single .size-auto, 
    .single .size-full, 
    .single .size-large, 
    .single .size-medium, 
    .single .size-thumbnail {
        max-width: 100% !important;
    }
}


/* =========================================================
   ID 13 (日記ページ) 専用のスマホ余白修正
   ========================================================= */

@media (max-width: 600px) {
  /* 1. ID 13のページ（固定ページ・カテゴリー両方に対応）に左右余白を強制適用 */
  body.page-id-13 .site-main,
  body.category-13 .site-main,
  body.category-diary .site-main { /* スラッグがdiaryの場合を想定 */
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    display: block !important; /* グリッドが干渉している場合の保険 */
  }

  /* 2. 記事カード自体が画面を突き抜けないように調整 */
  body.page-id-13 .inside-article,
  body.category-13 .inside-article {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 3. グリッドレイアウトの最小幅がスマホで悪さをしないように修正 */
@media (max-width: 479px) {
  body.blog .site-main,
  body.archive .site-main,
  body.home .site-main,
  body.page-id-13 .site-main {
    /* minmax(320px, 1fr) だと、パディングを含めた時に320pxを下回れず右に突き出すことがあるため */
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* =========================================
   Short Time Line（STL）
   - 未ログイン時：タイムラインを中央寄せ
   - 日付：左寄せ & 余白確保
   - 吹き出し：しっぽ追加
========================================= */

/* 2カラム（ログイン時） */
.stl-board.stl-board--withform{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
}

/* 1カラム（未ログイン時） */
.stl-board.stl-board--solo{
  display: grid;
  grid-template-columns: 1fr;
}

/* 未ログイン時だけタイムライン全体を中央へ（右フォームが無い前提） */
.stl-board--solo .stl-left{
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* タブレット以下は常に1カラム（フォームは下へ） */
@media (max-width: 1023px){
  .stl-board{ grid-template-columns: 1fr !important; }
  .stl-right{ margin-top: 18px; }
  .stl-board--solo .stl-left{ max-width: none; }
}

/* リストのデフォルト装飾を無効化 */
.stl-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各投稿カード（吹き出し） */
.stl-item{
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  padding: 26px 28px 22px;
  margin: 0 0 28px;
}

/* 吹き出しのしっぽ */
.stl-item::after{
  content: "";
  position: absolute;
  left: 46px;
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transform: rotate(45deg);
}

/* 本文 */
.stl-item-body{
  line-height: 1.75;
}

/* フッター：日付(左) / 操作(右) */
.stl-item-footer{
  margin-top: 18px;          /* 本文との距離 */
  padding-top: 14px;         /* 線と文字の距離（窮屈対策） */
  border-top: 1px solid rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 日付は左固定 */
.stl-item-date{
  font-size: .9rem;
  opacity: .7;
  white-space: nowrap;
}

/* 操作ボタン群（ログイン時だけ出る） */
.stl-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}

.stl-btn{
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: 10px;
  text-decoration: none;
  font-size: .85rem;
  line-height: 1;
}

.stl-edit{
  background: var(--gp-accent, #0050b3);
  color: #fff !important;
}

.stl-del{
  background: #f2f4f8;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.12);
}

/* フォーム枠（右カラム） */
.stl-form-widget{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  padding: 18px;
}

/* ゲスト誘導 */
.stl-guest,
.stl-empty{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 14px 16px;
}

/* STLカードの“吹き出ししっぽ”を無効化 */
.stl-item::before,
.stl-item::after{
  content: none !important;
  display: none !important;
}

@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");

body.home .site-content {
  padding-top: 55px;
}

/* 全ページ共通：フッター手前に 50px の余白 */
.site-content{
  padding-bottom: 50px;
}