/*
Theme Name: GeneratePress Child
Theme URI: https://www.itnewcomer.com/
Description: Ocean Slate theme for itnewcomer.com
Author: yoshrkoi
Template: generatepress
Version: 2.1.0
Text Domain: generatepress-child
*/

/* =========================================================
   Ocean Slate カラースキーム
   ========================================================= */
:root {
    --os-accent:      #2563eb;   /* メイン青 */
    --os-accent-hov:  #1d4ed8;   /* hover */
    --os-accent-soft: #dbeafe;   /* 淡い青 (引用・枠) */
    --os-heading:     #1e293b;   /* 見出し濃紺 */
    --os-text:        #334155;   /* 本文グレーブルー */
    --os-muted:       #64748b;   /* メタ情報 */
    --os-bg:          #f8fafc;   /* ページ背景 */
    --os-surface:     #ffffff;   /* カード/サイドバー */
    --os-border:      #e2e8f0;   /* 薄い罫線 */
    --os-code-bg:     #f1f5f9;   /* コード背景 */
    --os-code-text:   #0f172a;
}

/* =========================================================
   Base
   ========================================================= */
body,
button,
input,
select,
textarea {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", sans-serif;
    color: var(--os-text);
    background-color: var(--os-bg);
    font-feature-settings: "palt";
    line-height: 1.8;
}

/* サイドバーや記事カードなどの表面 */
.site-content .inside-article,
.widget-area .widget,
.sidebar .widget {
    background: var(--os-surface);
}

/* =========================================================
   Header & Nav
   ========================================================= */
.site-header {
    background-color: var(--os-surface) !important;
    border-bottom: 1px solid var(--os-border);
}
.site-header .site-branding a,
.main-title a,
.site-description {
    color: var(--os-heading) !important;
}
.main-navigation,
.main-navigation ul ul {
    background-color: var(--os-surface);
    border-top: 1px solid var(--os-border);
}
.main-navigation .main-nav ul li > a {
    color: var(--os-heading);
    font-weight: 500;
    transition: color .15s;
}
.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
    color: var(--os-accent);
    background-color: transparent;
}

/* =========================================================
   見出し
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title,
.sidebar .widget-title {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    color: var(--os-heading);
    font-weight: 700;
    line-height: 1.5;
}

/* 記事タイトル */
.entry-title,
.entry-title a {
    color: var(--os-heading) !important;
    font-size: 1.6em;
}
.entry-title a:hover {
    color: var(--os-accent) !important;
}

/* 本文 h2: 左ボーダー */
.entry-content h2 {
    border-left: 5px solid var(--os-accent);
    padding-left: 14px;
    margin-top: 2em;
    font-size: 1.5em;
}
/* 本文 h3: 下線のみ */
.entry-content h3 {
    border-bottom: 2px solid var(--os-border);
    padding-bottom: 6px;
    margin-top: 1.8em;
    font-size: 1.25em;
}
.entry-content h4 {
    color: var(--os-accent);
    font-size: 1.1em;
    margin-top: 1.5em;
}

/* サイドバーウィジェット見出し */
.sidebar .widget .widget-title,
.widget-area .widget .widget-title {
    border-bottom: 2px solid var(--os-accent);
    padding-bottom: 8px;
    margin-bottom: 16px;
    font-size: 1em;
}

/* =========================================================
   リンク
   ========================================================= */
a { color: var(--os-accent); text-decoration: none; }
a:hover,
a:focus { color: var(--os-accent-hov); text-decoration: underline; }

/* =========================================================
   アイキャッチ (600x400 強制)
   ========================================================= */
.wp-post-image,
.post-image img,
.post-image-aligned img,
.inside-article .post-image img,
article .featured-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 6px;
    display: block;
    background: #f5f5f5;
}

.post-image,
.post-image-aligned {
    width: 100%;
    overflow: hidden;
    margin-bottom: 12px;
}

/* =========================================================
   記事カード
   ========================================================= */
.generate-columns .inside-article,
.inside-article {
    background: var(--os-surface);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: box-shadow .2s, transform .2s;
    border: 1px solid var(--os-border);
}
.generate-columns .inside-article:hover {
    box-shadow: 0 4px 16px rgba(37, 99, 235, .12);
    transform: translateY(-2px);
}

/* 記事メタ情報 */
.entry-meta,
.posted-on,
.byline,
.cat-links,
.tags-links {
    color: var(--os-muted);
    font-size: .85em;
}
.entry-meta a { color: var(--os-muted); }
.entry-meta a:hover { color: var(--os-accent); }

/* =========================================================
   コード / 引用
   ========================================================= */
code, kbd, samp {
    background: var(--os-code-bg);
    color: var(--os-code-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "JetBrains Mono", "Fira Code", Consolas, Menlo, monospace;
    font-size: .9em;
}
pre {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
    line-height: 1.6;
    font-family: "JetBrains Mono", "Fira Code", Consolas, Menlo, monospace;
}
pre code { background: transparent; color: inherit; padding: 0; }

blockquote {
    border-left: 4px solid var(--os-accent);
    background: var(--os-accent-soft);
    padding: 14px 20px;
    margin: 1.5em 0;
    color: var(--os-heading);
    border-radius: 0 6px 6px 0;
}

/* =========================================================
   ボタン
   ========================================================= */
.button,
button,
input[type="submit"] {
    background: var(--os-accent);
    color: #fff;
    border-radius: 6px;
    transition: background .15s;
}
.button:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--os-accent-hov);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer,
.footer-widgets {
    background: var(--os-heading);
    color: #cbd5e1;
}
.site-footer a,
.footer-widgets a { color: #93c5fd; }
.site-footer a:hover { color: #dbeafe; }

/* =========================================================
   テーブル
   ========================================================= */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}
th, td {
    border: 1px solid var(--os-border);
    padding: 10px 14px;
}
th {
    background: var(--os-accent-soft);
    color: var(--os-heading);
    font-weight: 600;
}
tbody tr:nth-child(odd) {
    background: var(--os-bg);
}

/* =========================================================
   レスポンシブ微調整
   ========================================================= */
@media (max-width: 768px) {
    .entry-content h2 { font-size: 1.3em; }
    .entry-content h3 { font-size: 1.1em; }
    .entry-title { font-size: 1.3em; }
}

/* =========================================================
   Floating TOC (Zenn-like scroll spy)
   ========================================================= */
.gpc-toc {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 260px;
    max-height: calc(100vh - 140px);
    z-index: 50;
    font-size: 0.85em;
    pointer-events: none;  /* 親は素通し、内側だけ有効 */
}
.gpc-toc-inner {
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: 8px;
    padding: 16px 12px 16px 18px;
    max-height: inherit;
    overflow-y: auto;
    box-shadow: 0 2px 12px rgba(15,23,42,.06);
    pointer-events: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.gpc-toc-inner::-webkit-scrollbar {
    width: 6px;
}
.gpc-toc-inner::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.gpc-toc-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.85em;
    color: var(--os-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
    font-weight: 600;
    border-left: none;
    padding-left: 0;
}
.gpc-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--os-border);
}
.gpc-toc-item {
    margin: 0;
    padding: 0;
}
.gpc-toc-item a {
    display: block;
    color: var(--os-muted);
    text-decoration: none;
    padding: 6px 0 6px 14px;
    line-height: 1.45;
    border-left: 2px solid transparent;
    margin-left: -2px;  /* list の border-left と重ねる */
    transition: color .15s, border-color .15s, background .15s;
    /* 長い見出しは折り返して全文表示 (旧: 1行で ellipsis) */
    word-break: break-word;
    overflow-wrap: anywhere;
}
.gpc-toc-h3 a {
    padding-left: 26px;
    font-size: 0.93em;
}
.gpc-toc-item a:hover {
    color: var(--os-accent);
}
.gpc-toc-item a.is-active {
    color: var(--os-accent);
    border-left-color: var(--os-accent);
    font-weight: 600;
    background: var(--os-accent-soft);
    border-radius: 0 4px 4px 0;
}

/* モバイルでは非表示 (記事本文中の通常TOCだけにする) */
@media (max-width: 1280px) {
    .gpc-toc { display: none; }
}

/* 見出しにスムーススクロール用 scroll-margin */
.entry-content h2,
.entry-content h3 {
    scroll-margin-top: 80px;
}

/* =========================================================
   Layout widths (Cocoon-like: Content 820 / Sidebar 340 / Gap 40)
   ========================================================= */
/* 大画面での Container と列幅調整 */
@media (min-width: 769px) {
    .site.grid-container {
        max-width: 1210px;
    }
    .site-content .content-area,
    body:not(.no-sidebar) .site-content .content-area {
        width: calc(820px);
    }
    .site-content .widget-area,
    .site-content #right-sidebar,
    .site-content .sidebar {
        width: 340px;
    }
    /* gap */
    .site-content {
        gap: 40px;
    }
}

/* TOC は本文+サイドバーの横に配置(右寄せ) */
@media (min-width: 1280px) {
    .gpc-toc {
        right: max(20px, calc((100vw - 1210px) / 2 - 20px));
    }
}

/* 1200px以下では比率ベースで可変 */
@media (min-width: 769px) and (max-width: 1209px) {
    .site.grid-container {
        max-width: calc(100% - 40px);
    }
    .site-content .content-area {
        width: calc(100% - 380px);  /* サイドバー340 + gap40 */
    }
    .site-content .widget-area {
        width: 340px;
    }
}

/* =========================================================
   個別記事ページ: 本文上のアイキャッチ非表示
   ========================================================= */
.single-post .inside-article > .post-image,
.single-post .inside-article > .post-image-aligned,
.single-post .featured-image,
.single-post .page-header-image,
.single-post article > .post-image,
.single-post article > .featured-image {
    display: none !important;
}

/* =========================================================
   フローティング TOC: z-index 引き上げ + transform で overflow 防止
   サイドバーと重ならないよう位置調整
   ========================================================= */
.gpc-toc {
    z-index: 100;  /* 上に重ねる */
}

/* 1280px 未満でもフル幅サイドバーなしの時はTOC出したい場合のフォールバック
   (no-sidebar レイアウトのとき) */
@media (min-width: 1024px) {
    body.no-sidebar .gpc-toc {
        display: block;
    }
}

/* TOC が長くて本文とかぶる問題への対策 */
.gpc-toc-inner {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* =========================================================
   no-sidebar (個別記事) のときの本文を中央寄せ
   ========================================================= */
@media (min-width: 769px) {
    body.no-sidebar .site-content .content-area {
        width: 820px !important;
        max-width: 820px;
        margin: 0 auto;
    }
    body.no-sidebar .site-content {
        justify-content: center;
    }
}

/* フローティング TOC: no-sidebar のときは画面右端寄せ */
@media (min-width: 1280px) {
    body.no-sidebar .gpc-toc {
        right: max(20px, calc((100vw - 820px) / 2 - 280px - 20px));
    }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    body.no-sidebar .gpc-toc {
        /* 本文右に 20px マージン取って表示 */
        display: block;
        right: 20px;
        width: 220px;
    }
}

/* アイキャッチ非表示をもっと広く (main loop以外にも対応) */
.single-post .inside-article > figure,
.single-post .inside-article > .post-image,
.single-post .entry-content > .post-image,
.single-post > .site-content .post-image,
body.single-post img.wp-post-image:not(.gpc-keep) {
    display: none !important;
}
/* ただし entry-content 内部に本文として貼られた画像は残す (class で区別) */
.single-post .entry-content img.wp-post-image:not(.attachment-card) {
    display: initial !important;  /* 本文内画像は表示 */
}

/* =========================================================
   記事一覧 AWS Blog 風
   ========================================================= */
/* 一覧ページ全体を no-sidebar 時と同じく中央寄せ、少し広めに */
@media (min-width: 769px) {
    body.blog .site-content .content-area,
    body.archive .site-content .content-area,
    body.search-results .site-content .content-area {
        max-width: 820px;
        width: 820px !important;
        margin: 0 auto;
    }
}

/* 記事カードからデザインを抜く (シンプルなリストに) */
body.blog .inside-article,
body.archive .inside-article,
body.search-results .inside-article {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 28px 0 !important;
    border-bottom: 1px solid var(--os-border) !important;
}
body.blog .inside-article:hover,
body.archive .inside-article:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* アーカイブのサムネを完全に削除 (念押し) */
body.blog .post-image,
body.archive .post-image,
body.search-results .post-image,
body.blog .post-image-aligned,
body.archive .post-image-aligned,
body.blog .inside-article > figure {
    display: none !important;
}

/* 記事タイトル: AWS風に大きめ、リンクのみ */
body.blog .entry-title,
body.archive .entry-title,
body.search-results .entry-title {
    margin: 0 0 8px !important;
    font-size: 1.4em !important;
    line-height: 1.4;
}
body.blog .entry-title a,
body.archive .entry-title a {
    color: var(--os-heading) !important;
    text-decoration: none;
}
body.blog .entry-title a:hover,
body.archive .entry-title a:hover {
    color: var(--os-accent) !important;
    text-decoration: underline;
}

/* メタ情報 (著者・日付・カテゴリ) を1行で表示 */
body.blog .entry-meta,
body.archive .entry-meta {
    font-size: 0.82em !important;
    color: var(--os-muted);
    margin-bottom: 10px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
}
body.blog .entry-meta a,
body.archive .entry-meta a {
    color: var(--os-muted);
}
body.blog .entry-meta a:hover,
body.archive .entry-meta a:hover {
    color: var(--os-accent);
}

/* カテゴリリンクを目立たせる (AWS風のタグ表示) */
body.blog .cat-links a,
body.archive .cat-links a {
    background: var(--os-accent-soft);
    color: var(--os-accent) !important;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    transition: background .15s, color .15s;
}
body.blog .cat-links a:hover,
body.archive .cat-links a:hover {
    background: var(--os-accent);
    color: #fff !important;
    text-decoration: none;
}

/* 抜粋 (AWS風の本文テキスト) */
body.blog .entry-summary,
body.archive .entry-summary {
    color: var(--os-text);
    line-height: 1.7;
    margin: 0;
}
body.blog .entry-summary p,
body.archive .entry-summary p {
    margin: 0;
}

/* Read more リンク */
body.blog .read-more,
body.archive .read-more {
    display: inline-block;
    margin-top: 12px;
    color: var(--os-accent);
    font-size: 0.9em;
}
body.blog .read-more::after,
body.archive .read-more::after {
    content: ' →';
}

/* ページネーション */
.paging-navigation,
.nav-below {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--os-border);
}

/* ページ上部の "最近の投稿" アーカイブタイトルをスッキリ */
.page-title,
.archive-title {
    font-size: 1.6em;
    color: var(--os-heading);
    border-bottom: 2px solid var(--os-border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

/* =========================================================
   記事一覧 (AWS Blog風・横並びカード)
   サムネ左 + テキスト右の横組みレイアウト
   ========================================================= */
body.blog .inside-article,
body.archive .inside-article,
body.search-results .inside-article {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    align-items: start;
    padding: 24px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--os-border) !important;
}
body.blog .inside-article:hover,
body.archive .inside-article:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* サムネコンテナ (左側) */
body.blog .post-image,
body.archive .post-image,
body.search-results .post-image,
body.blog .post-image-aligned,
body.archive .post-image-aligned {
    display: block !important;
    width: 100% !important;
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0 !important;
}
body.blog .post-image a,
body.archive .post-image a {
    display: block;
}
/* サムネ画像そのもの: 3:2 固定クロップ */
body.blog .post-image img,
body.archive .post-image img,
body.search-results .post-image img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 6px !important;
    display: block !important;
    background: #f5f5f5;
}

/* テキスト側 (右側) */
body.blog .entry-header,
body.archive .entry-header,
body.search-results .entry-header {
    grid-column: 2;
}
body.blog .entry-summary,
body.archive .entry-summary,
body.search-results .entry-summary {
    grid-column: 2;
}
body.blog footer.entry-meta,
body.archive footer.entry-meta,
body.search-results footer.entry-meta {
    grid-column: 2;
}

/* モバイル(768以下)は縦組みに */
@media (max-width: 768px) {
    body.blog .inside-article,
    body.archive .inside-article,
    body.search-results .inside-article {
        grid-template-columns: 1fr;
    }
    body.blog .post-image,
    body.archive .post-image {
        grid-column: 1;
        grid-row: auto;
    }
    body.blog .entry-header,
    body.archive .entry-header,
    body.blog .entry-summary,
    body.archive .entry-summary,
    body.blog footer.entry-meta,
    body.archive footer.entry-meta {
        grid-column: 1;
    }
}

/* =========================================================
   コンテナ幅拡大 (AWS Blog相当)
   ========================================================= */
@media (min-width: 769px) {
    .site.grid-container {
        max-width: 1280px !important;
    }
    /* 個別記事: 本文をさらに広く(最大960pxぐらい) */
    body.single-post.no-sidebar .site-content .content-area {
        width: 960px !important;
        max-width: 960px;
    }
    /* アーカイブ/トップ: 1200px 固定で中央寄せ */
    body.blog .site-content .content-area,
    body.archive .site-content .content-area,
    body.search-results .site-content .content-area {
        width: 1200px !important;
        max-width: 1200px;
    }
}

/* 一覧のサムネをやや大きめに */
@media (min-width: 1024px) {
    body.blog .inside-article,
    body.archive .inside-article,
    body.search-results .inside-article {
        grid-template-columns: 300px 1fr;  /* サムネ300px */
        gap: 28px;
    }
}

/* TOC (個別記事) の位置も本文広がるので再調整 */
@media (min-width: 1280px) {
    body.no-sidebar .gpc-toc {
        right: max(20px, calc((100vw - 960px) / 2 - 280px));
    }
}

/* =========================================================
   フォントサイズ調整 (一覧ページ、適度にコンパクト)
   ========================================================= */
body.blog .entry-title,
body.archive .entry-title,
body.search-results .entry-title {
    font-size: 1.2em !important;
    line-height: 1.45 !important;
}
body.blog .entry-summary,
body.archive .entry-summary,
body.search-results .entry-summary {
    font-size: 0.93em !important;
    line-height: 1.65 !important;
}
body.blog .entry-meta,
body.archive .entry-meta {
    font-size: 0.78em !important;
}
body.blog .cat-links a,
body.archive .cat-links a {
    font-size: 0.78em;
    padding: 1px 9px;
}

/* サムネを少しコンパクト */
@media (min-width: 1024px) {
    body.blog .inside-article,
    body.archive .inside-article,
    body.search-results .inside-article {
        grid-template-columns: 260px 1fr;  /* 300 → 260 */
        gap: 24px;
        padding: 20px 0 !important;
    }
}
@media (min-width: 769px) and (max-width: 1023px) {
    body.blog .inside-article,
    body.archive .inside-article,
    body.search-results .inside-article {
        grid-template-columns: 220px 1fr;
        gap: 20px;
        padding: 18px 0 !important;
    }
}

/* 画像切れが気になる場合、以下のコメントアウトを外すと contain になる
   (余白が出るが画像全体が見える)
   ---
   body.blog .post-image img,
   body.archive .post-image img {
       object-fit: contain !important;
       background: #f8fafc !important;
   }
*/

/* =========================================================
   Hard block: ヘッダー領域への AdSense 広告挿入を禁止
   ========================================================= */
header.site-header ins,
header.site-header ins.adsbygoogle,
header.site-header iframe[id*="aswift"],
header.site-header iframe[id*="google_ads"],
header.site-header iframe[src*="googleads"],
header.site-header iframe[src*="googlesyndication"],
header.site-header iframe[name*="aswift"],
header.site-header .adsbygoogle,
.site-header ins,
.site-header ins.adsbygoogle,
.site-header iframe[id*="aswift"],
.site-header iframe[id*="google_ads"],
.site-header iframe[src*="googleads"],
.site-header iframe[src*="googlesyndication"],
.site-header .adsbygoogle,
.main-navigation ins,
.main-navigation iframe[id*="aswift"],
.main-navigation iframe[src*="googleads"],
.main-navigation .adsbygoogle,
.inside-header ins,
.inside-header iframe[id*="aswift"],
.inside-header .adsbygoogle,
.top-bar ins,
.top-bar iframe[id*="aswift"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Auto ads が header 内に作る空 div (min-height だけ確保するやつ) も潰す */
header.site-header > div[style*="min-height"]:empty,
header.site-header > div[style*="height:"]:empty,
.site-header > div[id^="google_ads_iframe_"],
.site-header > [data-google-query-id] {
    display: none !important;
}

/* =========================================================
   Header 広告ブロック v2 (更に強力に)
   header, inside-header, site-branding, main-navigation 配下の
   あらゆる広告要素を完全に殺す
   ========================================================= */
header.site-header *,
.site-header *,
.inside-header *,
.site-branding ~ * {
    /* 広告要素だけ対象にするため次のセレクタで絞る */
}

/* 広告コンテナを全部非表示 */
.site-header ins,
.site-header iframe,
.site-header .adsbygoogle,
.site-header [id^="google_ads"],
.site-header [id^="aswift"],
.site-header [id^="div-gpt"],
.site-header [data-google-query-id],
.site-header [data-ad-client],
.site-header [data-ad-slot],
.inside-header ins,
.inside-header iframe,
.inside-header .adsbygoogle,
.inside-header [id^="google_ads"],
.inside-header [id^="aswift"],
.inside-header [data-google-query-id],
.inside-header [data-ad-client] {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* Google が header に入れる空 div も潰す */
.site-header > div:empty,
.inside-header > div:empty,
.site-header div[style*="min-height"]:empty,
.inside-header div[style*="min-height"]:empty,
.site-header div[style*="height:"]:empty,
.inside-header div[style*="height:"]:empty {
    display: none !important;
}

/* 念のため navigation 前後の広告要素 */
.main-navigation + div:empty,
.main-navigation + ins,
.main-navigation + iframe {
    display: none !important;
}

/* =========================================================
   Header final: GeneratePress デフォルト動作に任せ、
   サイトタイトルの幅だけ確保する
   ========================================================= */
.site-branding .main-title {
    white-space: nowrap;        /* 改行させない */
}
.site-branding {
    min-width: max-content;     /* タイトルが縦に折れない最小幅 */
}

/* ナビゲーションとの間に適度な余白 */
@media (min-width: 769px) {
    body.nav-float-right .inside-header {
        /* GP のデフォルト設定に任せる (flex、inline) */
    }
}

/* =========================================================
   グリッドコンテナを 1280px で中央寄せ (全域)
   ========================================================= */
@media (min-width: 769px) {
    .grid-container,
    .site-header .inside-header,
    .main-navigation .inside-navigation,
    .site-content,
    .site-main,
    .site-footer .inside-footer-widgets,
    .site-footer .inside-site-info {
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 40px;
        padding-right: 40px;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    .grid-container,
    .site-header .inside-header,
    .main-navigation .inside-navigation,
    .site-content,
    .site-main {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================================
   個別記事 (単投稿): 本文を 820px に絞って中央寄せ
   ========================================================= */
@media (min-width: 769px) {
    /* single-post での content-area 幅 */
    body.single-post.no-sidebar .site-content .content-area,
    body.no-sidebar.single-post .site-content .content-area,
    body.single-post .site-content .content-area {
        width: 820px !important;
        max-width: 820px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* 念のため site-content の max-width も効かせる */
    body.single-post .site-content {
        max-width: 100%;
    }
    /* inside-article を中央配置 */
    body.single-post.no-sidebar .inside-article {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* =========================================================
   ブログ一覧 / アーカイブ: 900px くらいで中央寄せ (カード見やすく)
   ========================================================= */
@media (min-width: 769px) {
    body.blog .site-content .content-area,
    body.archive .site-content .content-area,
    body.search-results .site-content .content-area {
        width: 900px !important;
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   Header navigation inline: タイトルとメニューを同じ行に
   ========================================================= */
@media (min-width: 769px) {
    /* header 全体を flex にして site-branding と site-navigation を横並び */
    header.site-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 40px;
        gap: 40px;
        box-sizing: border-box;
    }
    header.site-header .inside-header {
        flex: 0 0 auto;
        padding: 20px 0 !important;
        background: transparent;
    }
    header.site-header > nav.main-navigation#site-navigation {
        flex: 1 1 auto;
        background: transparent;
        border: none;
    }
    header.site-header > nav.main-navigation#site-navigation .inside-navigation {
        padding: 0;
        justify-content: flex-end;
    }
    /* モバイル切り替え用の navigation は非表示 */
    header.site-header > nav.mobile-menu-control-wrapper {
        display: none;
    }
}
@media (max-width: 768px) {
    header.site-header {
        display: block;
    }
}

/* =========================================================
   Header を完全にロック: Auto ads が子要素を追加しても崩れない
   ========================================================= */
@media (min-width: 769px) {
    header.site-header {
        /* 固定高さ */
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        overflow: hidden !important;  /* はみ出し禁止 (広告が入っても見えない) */
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 1280px;
        margin: 0 auto !important;
        padding: 0 40px !important;
        gap: 40px !important;
        box-sizing: border-box !important;
    }

    /* inside-header (タイトル) を固定幅で左側に */
    header.site-header .inside-header {
        flex: 0 0 auto !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        max-width: none !important;
    }

    /* メインナビを右側に */
    header.site-header > nav#site-navigation.main-navigation {
        flex: 1 1 auto !important;
        height: 80px !important;
        max-height: 80px !important;
        background: transparent !important;
        border: none !important;
        overflow: visible !important; /* ドロップダウンが見えるように */
    }
    header.site-header > nav#site-navigation .inside-navigation {
        padding: 0 !important;
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        max-width: none !important;
    }
    header.site-header > nav#site-navigation .main-nav {
        height: auto !important;
    }

    /* Auto ads がヘッダー内に入れる直接の子要素で .site-branding, .main-navigation 以外は非表示 */
    header.site-header > :not(.inside-header):not(nav):not(script):not(style) {
        display: none !important;
    }
    header.site-header .inside-header > :not(.site-branding):not(nav):not(script):not(style) {
        display: none !important;
    }

    /* モバイル用ボタンは非表示 */
    header.site-header > nav.mobile-menu-control-wrapper,
    header.site-header .mobile-menu-control-wrapper {
        display: none !important;
    }
}

/* =========================================================
   ドロップダウンメニューが overflow で切られないよう修正
   ========================================================= */
@media (min-width: 769px) {
    header.site-header {
        overflow: visible !important;  /* 広告の侵入はあるかも、でもメニュー優先 */
    }
    header.site-header > nav#site-navigation.main-navigation,
    header.site-header > nav#site-navigation .inside-navigation,
    header.site-header > nav#site-navigation .main-nav,
    header.site-header > nav#site-navigation .main-nav ul {
        overflow: visible !important;
    }
    /* ドロップダウンメニュー (sub-menu) が上に出てくる */
    .main-navigation .main-nav ul li.menu-item-has-children > ul.sub-menu {
        z-index: 1000 !important;
    }
}