/* ==========================================================================
   Post Prose Template
   Scope : .single-post .entry-content, .post-prose
   Goal  : 読みやすいタイポグラフィ・表/画像/コード/引用の統一
   --------------------------------------------------------------------------
   カスタム変数をいじれば全体トーンを一括変更できる
   ========================================================================== */

:root{
  --post-font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN",
                    "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --post-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;

  --post-text: #111;
  --post-muted: #667085;
  --post-bg: #ffffff;

  --post-link: #0b57d0;
  --post-link-visited: #5e4bd8;
  --post-link-hover: #0846a6;

  --post-border: #e5e7eb;
  --post-soft: #f6f7f9;

  --post-code-bg: #0f172a;       /* 濃紺 */
  --post-code-fg: #e2e8f0;

  --post-accent: #16a34a;        /* 見出し下線などのアクセント */

  --post-maxw: min(1200px, 90vw);
  --post-pad: clamp(16px, 2vw, 24px);
  --post-frame-pad: 40px;

  /* タイポサイズ（clampで流体） */
  --fs-body: clamp(15.5px, 1.2vw, 18px);
  --fs-h1: clamp(28px, 4vw, 38px);
  --fs-h2: clamp(24px, 3vw, 30px);
  --fs-h3: clamp(20px, 2.5vw, 24px);
  --fs-h4: clamp(18px, 1.8vw, 20px);

  /* 行間・余白スケール */
  --lh-body: 1.8;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 2rem;
  --space-4: 2rem;
  --space-5: 1.5rem;
  --space-6: 1rem;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);

  
}

/* prefers-color-scheme: dark の簡易対応 */
@media (prefers-color-scheme: dark){
  :root{
    --post-text: #e6e6e6;
    --post-muted: #a1a1aa;
    --post-bg: #0b0b0c;
    --post-border: #2a2a2a;
    --post-soft: #121214;
    --post-link: #8ab4ff;
    --post-link-visited: #c4b5fd;
    --post-link-hover: #b3d1ff;
    --post-code-bg: #0a0f1a;
    --post-code-fg: #e7eef9;
  }
}

/* ====== スコープ ========================================================= */
.single-post .entry-content,
.post-prose,
.single-post .post-header,
.single-post .post-nav,
.post-wrap{
  box-sizing: border-box; /* padding を max-width に内包してはみ出し防止 */
  max-width: calc(var(--post-maxw) + 2 * var(--post-frame-pad));
  margin-inline: auto;
}

.post-header .post-meta{


}

/* 本文は上下の余白は既存のまま、左右だけ40pxで上書き */
.single-post .entry-content,
.post-prose{
  
  /* padding-inline は上の共通ルールで40pxが効く */
}

/* PC: Post本文のベース文字サイズを拡大（SPはそのまま） */
@media (min-width: 900px){
  .single-post .entry-content,
  .post-prose{
    font-size: clamp(17px, 1.1vw, 20px) !important;
  }
}


/* 画像・埋め込みははみ出さない */
.single-post .entry-content img,
.post-prose img,
.single-post .entry-content video,
.post-prose video,
.single-post .entry-content iframe,
.post-prose iframe{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ====== 見出し ========================================================== */
.single-post .entry-content h1,
.post-prose h1{
  font-size: var(--fs-h1);
  line-height: 1.25;
  letter-spacing: .02em;
}

.single-post .entry-content h1,
.post-prose h1,
.single-post .post-title{
  
}
.single-post .entry-content h2,
.post-prose h2{
  font-size: var(--fs-h2);
  line-height: 1.3;
  margin-top: var(--h1-mt) !important;
  margin-bottom: var(--space-3);
  padding-bottom: .25rem;
  border-bottom: 2px solid #000000;
}
.single-post .entry-content h3,
.post-prose h3{
  font-size: var(--fs-h3);
  line-height: 1.35;
  margin: var(--space-5) 0 var(--space-5);
}
.single-post .entry-content h4,
.post-prose h4{
  font-size: var(--fs-h4);
  margin: var(--space-5) 0 var(--space-5);
  color: var(--post-text);
}

.single-post .entry-content p,
.post-prose p{
  font-size: var(--fs-h4);
  margin: var(--space-3) 0 var(--space-6);
  color: var(--post-text);
}

/* 見出しにアンカー(#)が付く場合の距離感 */
.single-post .entry-content h2 a.anchor,
.post-prose h2 a.anchor,
.single-post .entry-content h3 a.anchor,
.post-prose h3 a.anchor{
  margin-left: .4em;
  text-decoration: none;
  color: var(--post-text);
  opacity: .8;
}

/* タイトルの体裁（インラインstyleを撤去してCSSに集約） */
.single-post .post-title{
  font-size: var(--fs-h1);
  line-height: 1.25;
  margin: var(--space-6) 0 var(--space-3);
  text-align: left; /* 中央寄せのままにしたい場合 */
  color: #000;
}

/* シングル時の背景色はCSSに（!important不要） */
body.single-post{ background:#f2f2f2; }

/* ====== 段落・リンク ==================================================== */
.single-post .entry-content p,
.post-prose p{
  margin: 0 0 var(--space-4);
}
.single-post .entry-content a,
.post-prose a{
  color: var(--post-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-post .entry-content a:hover,
.post-prose a:hover{
  color: var(--post-link-hover);
  text-decoration-thickness: 2px;
}
.single-post .entry-content a:visited,
.post-prose a:visited{
  color: var(--post-link-visited);
}

/* ====== リスト ========================================================== */
.single-post .entry-content ul,
.post-prose ul,
.single-post .entry-content ol,
.post-prose ol{
  margin: 0 0 var(--space-4) 1.25rem;
  padding: 0;
}
.single-post .entry-content li,
.post-prose li{ margin: .25rem 0; }
.single-post .entry-content li::marker,
.post-prose li::marker{ color: var(--post-muted); }

/* チェックリスト風 */
.post-prose ul.checklist{ list-style: none; margin-left: 0; }
.post-prose ul.checklist li{
  padding-left: 1.75rem;
  position: relative;
}
.post-prose ul.checklist li::before{
  content: "✓";
  position: absolute; left: 0; top: .1rem;
  font-weight: 700;
  color: var(--post-accent);
}

/* ====== 引用 ============================================================ */
.single-post .entry-content blockquote,
.post-prose blockquote{
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-left: 4px solid var(--post-accent);
  background: var(--post-soft);
  border-radius: 10px;
  color: inherit;
}
.post-prose blockquote cite{
  display: block;
  margin-top: .5rem;
  color: var(--post-muted);
  font-style: normal;
  font-size: .9em;
}

/* ====== コード ========================================================== */
.single-post .entry-content code,
.post-prose code{
  font-family: var(--post-font-mono);
  font-size: .95em;
  background: color-mix(in oklab, var(--post-code-bg), #fff 85%);
  padding: .1rem .35rem;
  border-radius: 6px;
}
.single-post .entry-content pre,
.post-prose pre{
  font-family: var(--post-font-mono);
  font-size: .92em;
  line-height: 1.6;
  background: var(--post-code-bg);
  color: var(--post-code-fg);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  overflow: auto;
  box-shadow: var(--shadow);
  margin: var(--space-5) 0;
}
.post-prose pre code{
  background: transparent;
  padding: 0;
  border: 0;
  color: inherit;
}

/* ====== 画像・図版 ====================================================== */

.single-post .entry-content figure,
.post-prose figure{
  margin: var(--space-5) 0;
  text-align: center;
}

/* キャプション共通スタイル */
.single-post .entry-content figcaption,
.post-prose figcaption,
.single-post .entry-content .wp-caption-text,
.post-prose .wp-caption-text,
.single-post .entry-content .blocks-gallery-caption,
.post-prose .blocks-gallery-caption,
.single-post .entry-content .gallery-caption,
.post-prose .gallery-caption,
.single-post .entry-content .wp-element-caption,
.post-prose .wp-element-caption{
  margin-top: .4rem;
  text-align: center;        /* 中央揃え */
  font-style: italic;        /* 斜体 */
  color: var(--post-muted);  /* ちょいグレー（変えたければ変数側いじる） */
  font-size: .9em;
}


/* alignwide はコンテンツ幅(=post-maxw)に据え置きでOK */
.post-prose .alignwide{
  width: var(--post-maxw);
  margin-left: auto;
  margin-right: auto;
}
/* alignfull はそのまま全幅 */
.post-prose .alignfull{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.post-wrap{
  max-width: var(--post-maxw);
  margin-inline: auto;
  padding-inline: var(--post-pad);
}

/* ====== 表（テーブル） ================================================== */
.post-prose .table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.single-post .entry-content table,
.post-prose table{
  width: 100%;
  border-collapse: collapse;
  font-size: .95em;
  margin: var(--space-4) 0 var(--space-5);
  border: 1px solid var(--post-border);
  border-radius: 12px;
  overflow: hidden;
}
.post-prose table th,
.post-prose table td{
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--post-border);
}
.post-prose table thead th{
  text-align: left;
  background: var(--post-soft);
  font-weight: 700;
}
.post-prose table tbody tr:nth-child(even){
  background: color-mix(in oklab, var(--post-soft), transparent 60%);
}

/* ====== 埋め込み（YouTube 等） ========================================= */
.post-prose .embed,
.post-prose .wp-block-embed__wrapper{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  margin: var(--space-5) 0;
}
.post-prose .embed > iframe,
.post-prose .wp-block-embed__wrapper > iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

.twitter-tweet {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.twitter-tweet iframe{
  positon:static;
  visibility: visible;
  width: 100% !important;
  height: 760px !important;
  display: block;

}

/* Gutenbergのショートコードブロック対策 */
.wp-block-shortcode,
.wp-block-shortcode > div {
    text-align: center !important;
}

.wp-block-shortcode iframe {
    display: block !important;
    margin: 0 auto !important;
}

.ggz-inner{max-width:900px;margin:0 auto;padding:0px}
    .ggz-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .8rem}
    .ggz-tag{display:inline-block;background:var(--chip);border-radius:999px;padding:.25rem .7rem;font-size:.85rem;color:#555}

/* ====== 区切り ========================================================== */
.single-post .entry-content hr,
.post-prose hr{
  height: 1px;
  border: 0;
  background: var(--post-border);
  margin: var(--space-6) 0;
}

/* ====== 注意・補足ボックス（任意） ===================================== */
.post-prose .callout{
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--post-soft);
  border: 1px solid var(--post-border);
  margin: var(--space-5) 0;
}
.post-prose .callout.note{ border-left: 4px solid #0284c7; }
.post-prose .callout.warn{ border-left: 4px solid #f59e0b; }
.post-prose .callout.crit{ border-left: 4px solid #ef4444; }

/* ====== 目次（任意） ==================================================== */
.post-prose .toc{
  border: 1px solid var(--post-border);
  border-radius: 12px;
  background: var(--post-soft);
  padding: .9rem 1rem;
  margin: var(--space-5) 0;
}
.post-prose .toc > .toc-title{
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--post-muted);
  font-size: .95em;
}
.post-prose .toc ol{ margin: .4rem 0 0 1.1rem; }

/* ====== Gutenberg 特有ブロックの軽い整え =============================== */
.post-prose .wp-block-quote{ /* 既存blockquoteと重複しない軽め調整 */
  margin: var(--space-5) 0;
}
.post-prose .wp-block-pullquote{
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--post-soft);
  border-left: 4px solid var(--post-accent);
  border-radius: 12px;
}
.post-prose .wp-block-image{ margin: var(--space-5) 0; }
.post-prose .wp-block-gallery{ gap: .5rem; }

/* ====== ラッパ（任意） ================================================== */
.post-wrap{
  max-width: calc(var(--post-maxw) + 2 * var(--post-pad));
  margin-inline: auto;
}

/* ====== スモールスクリーン・プリント =================================== */
@media (max-width: 600px){
  .post-prose{ padding: 16px; }
  .post-prose table{ font-size: .9em; }
  :root{ --post-frame-pad: 16px; }
}
@media print{
  .post-prose{
    max-width: 100%;
    padding: 0;
    color: #000;
  }
  a[href^="http"]:after{ content: " (" attr(href) ")"; font-size: 1em; color: #555; }
}

.post-tags a { color:#000; text-decoration:none; }
.post-tags a:hover { text-decoration: underline; }
  body{ background:#f2f2f2 !important; }


/* nola-case の内側パディングをゼロに */
section.nola-case{ padding:0 !important; }

/* もしGutenbergの内側コンテナが余白を入れてる場合もゼロ化 */
section.nola-case > .wp-block-group__inner-container,
section.nola-case .wp-block-group__inner-container{ padding:0 !important; }

/* ブロック間ギャップもカットしたいとき */
section.nola-case{ --wp--style--block-gap:0; }

/* 外側の緑(=margin)も消したいなら一緒に */
 /* section.nola-case{ margin:0 !important; } */

/* --- Caseページ: タグ列の左余白を削除して丸囲いに --- */
section.nola-case ul.tags{
  margin: 0 0 16px 0 !important;   /* ← 左のオレンジ(=margin-left:20px)を0に */
  padding-left: 0 !important;      /* ブラウザ既定のULインデントも無効化 */
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;                         /* タグ間の隙間 */
}

/* 余計な li マージン/パディングを殺す */
section.nola-case ul.tags > li{
  margin: 0 !important;
  padding: 0 !important;
}




/* 小さめ端末での詰まり対策 */
@media (max-width: 600px){
  section.nola-case ul.tags{
    gap: 6px;
  }
  section.nola-case ul.tags > li > a,
  section.nola-case ul.tags > li > span{
    padding: 5px 10px;
    border-width: 1.5px;
    font-weight: 600;
  }
}

/* === Post prev/next を左右に分割（PCは横並び、SPは縦） === */
/* ← 好みで微調整（5語目安 ≒ 38–42ch） */
/* 折り返しの基準幅（px/em/rem で調整可）*/
:root{ --post-nav-wrap: clamp(12rem, 25vw, 20rem); }

/* PC幅：左右に配置し、基準幅で自動改行 */
@media (min-width: 900px){
  nav.post-nav{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 12px;
  }
  nav.post-nav .prev,
  nav.post-nav .next{
    float: none !important;
    display: block !important;
    margin: .4rem 0;
  }
  nav.post-nav .prev{ justify-self: start; text-align: left; }
  nav.post-nav .next{ justify-self: end;   text-align: right; }

  /* 幅で折り返す：アンカーの最大行幅を制限 */
  nav.post-nav .prev a,
  nav.post-nav .next a{
    display: inline-block !important;
    
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* 色は黒、通常は下線なし／ホバーで下線 */
nav.post-nav a{
  color: #000 !important;
  text-decoration: none !important;
}
nav.post-nav a:hover{
  text-decoration: underline !important;
}
/* 訪問済みも黒のまま */
nav.post-nav a:visited{ color:#000 !important; }


/* モバイル：縦積み（今の挙動キープ） */
@media (max-width: 899.98px){
  nav.post-nav{
    display: block !important;
  }
}

/* モバイル時の縦積みギャップ（8〜16pxで自動可変） */
:root{ --nav-stack-gap: clamp(8px, 2.8vw, 16px); }

@media (max-width: 899.98px){
  /* 縦積み化（既にやっているなら重複OK） */
  nav.post-nav,
  nav.post-navigation{ display:block !important; }

  /* コンテナが .nav-links のテーマにも対応 */
  .single-post .post-nav .nav-links,
  nav.post-navigation .nav-links{ display:block !important; }

  /* 2つの項目の“間”を作る：prev の下だけ余白 */
  nav.post-nav .prev,
  nav.post-navigation .nav-previous{
    margin: 0 0 var(--nav-stack-gap) 0 !important;
  }
  nav.post-nav .next,
  nav.post-navigation .nav-next{
    margin: 0 !important;
  }

  /* ついでにタップしやすいように少しパディング（任意） */
  nav.post-nav a,
  nav.post-navigation a{
    display:inline-block;
    padding: 6px 0;
  }
}


/* === SP: H1を小さく === */
@media (max-width: 600px){
  /* Post Prose の見出しサイズ変数を縮小 */
  :root{
    --fs-h1: clamp(30px,7vw, 30px);
  }

  /* 変数を使っていない見出し(CTAなど)を個別に */
  .home-contact__title{
    font-size: clamp(24px, 7vw, 30px);
  }

  /* 念のため：テーマの固定指定を上書き */
  .single-post .post-title,
  .single-post .entry-content h1,
  .post-prose h1{
    font-size: var(--fs-h1) !important;
   
  }
  .container {
   padding-top: 0rem;
   padding-left: 0.7rem;
   padding-right: 0.7rem;
  }
}