/* =========================================
   暇NEWS！CSS（Ver.040）
========================================= */

/* =========================================
   0. 【コメント削除しない！】 AdSense手動
========================================= */
/* 手苦で挿入したGoogle AdSense広告の上下の余白（隙間）を設定 */
.googleAD {
    padding-top: 10px;    /* 上の余白 */
    padding-bottom: 10px; /* 下の余白 */
}

/* =========================================
   1. はてな特有のテキストタイトル・不要要素を【完全非表示】
========================================= */
/* ブログのデフォルトタイトルや、ヘッダーの不要な隙間、システム通知などを完全に消し去る設定 */
#blog-title, 
#title-editarea, 
h1#title, 
.header-title-inner,
.header-image-enable h1#title,
.hatena-notify, 
.hatena-system-notice, 
.system-notice-container, 
.hatena-message-frame {
    display: none !important;      /* 要素を見えなくする */
    font-size: 0 !important;       /* 文字サイズを0にする */
    opacity: 0 !important;         /* 透明にする */
    height: 0 !important;          /* 高さを0にする */
    margin: 0 !important;          /* 外側の余白を0にする */
    padding: 0 !important;         /* 内側の余白を0にする */
    overflow: hidden !important;   /* はみ出た部分を隠す */
}

/* コメント欄、はてなスター、SNSシェアボタン、プロフィールなど、不要なパーツを非表示（※パンくずリストはSEOのため表示） */
body .leave-comment-title, body .comment-box, body .hatena-star-container,
body .hatena-star-star-container, body .social-buttons, body .hatena-module-profile,
body #globalheader-container, body .entry-footer .author, body .entry-footer-time,
body .entry-footer .date, body.page-index #main-inner, body .entry-thumb,
body .entry-thumb-link, body .urllist-image, body .page-archive .entry-feature-wrapper,
body .entry-content img {
    display: none !important;
}

/* ★ PC画面の時には、スマホ専用の要素（検索窓、スマホメニューなど）を絶対に隠す */
.mobile-only-search, .sp-only { 
    display: none !important; 
}

/* =========================================
   2. ベースリセット ＆ Sticky（追尾）有効化
========================================= */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 全ての要素の初期余白をリセットして、デザインのズレを防ぐ */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; /* 枠線や余白を含めてサイズを計算させる */
}

/* サイト全体の基本的な文字色、フォント、背景色を設定 */
body {
    color: #000000; /* 基本の文字色（黒） */
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; /* 読みやすいフォントの優先順位 */
    line-height: 1.6; /* 行間（文字の上下のすき間） */
    background-color: #f5f5f5; /* サイト全体の背景色（薄いグレー） */
}

/* リンク（クリックできる文字）の設定 */
a { 
    color: #000000; /* リンクの色（黒） */
    text-decoration: none; /* リンクの下線を消す */
    transition: all 0.3s ease; /* ふんわりと色が変わるアニメーション効果 */
}

/* =========================================
   3. PCレイアウト構成 ＆ AdSense自動広告への配慮
========================================= */
/* AdSenseの自動広告が途中で途切れないようにする魔法のコード */
body #container, body #content, body #content-inner, body #wrapper, body #main, body #box2 {
    overflow: visible !important;
}

/* 記事と記事の間の余白 */
.entry { margin-bottom: 40px; }

/* PC画面の全体の幅と配置の設定 */
body #container { width: 100% !important; max-width: 100% !important; }
body #content { width: 92% !important; max-width: none !important; margin: 40px auto; }

/* 横並び（左に記事、右にサイドバー）にする設定 */
body #content-inner { 
    display: flex !important; 
    flex-direction: row-reverse !important; /* サイドバーを右側に配置 */
    justify-content: space-between !important; 
    align-items: flex-start !important; 
    width: 100% !important; 
}

/* 左側の記事エリア（メイン）の幅と背景色 */
body #wrapper { 
    width: 74% !important; /* 記事エリアの幅 */
    background-color: #ffffff; /* 背景色（白） */
    padding: 30px; /* 内側の余白 */
    float: none !important; 
    margin-top: 0 !important; 
}

/* 右側のサイドバーエリアの幅 */
body #box2 { 
    width: 24% !important; /* サイドバーの幅 */
    float: none !important; 
    margin-top: 0 !important; 
}

/* =========================================
   4. ヘッダーロゴ
========================================= */
/* PC用ロゴのエリア設定 */
.custom-header {
    text-align: center; /* ロゴを中央に配置 */
    padding: 0 0 20px 0; /* 下の余白 */
    margin-bottom: 20px; /* 外側の余白 */
    position: relative; /* 基準位置にする（線などを引くため） */
}

/* ▼▼▼ PC版：ロゴ下の2本線 ▼▼▼ */
.custom-header::before {
    content: ""; display: block; position: absolute; 
    bottom: 6px; left: 0; right: 0; 
    height: 1px; 
    background-color: #dddddd; 
}
.custom-header::after {
    content: ""; display: block; position: absolute; 
    bottom: 0; left: 15px; right: 15px; 
    height: 1px; 
    background-color: #dddddd; 
}

/* ★完全修正：ヘッダーのロゴSVGは黒、フッターのロゴSVGは純白に確実に出力させる */
.custom-header .site-logo-svg path,
.sp-logo-area .site-logo-svg path {
    fill: #111111 !important;
}
#custom-footer .site-logo-svg path {
    fill: #ffffff !important;
}

.custom-header .site-logo-svg { 
    width: 100%; max-width: none; height: auto; display: block;
    transition: opacity 0.3s ease; 
}
/* ロゴにマウスを乗せた時に少し薄くする */
a.header-logo-link:hover .site-logo-svg { opacity: 0.7; }

/* =========================================
   4.5 グローバルナビゲーション（メニューバー）
========================================= */
/* 画面スクロール時も常に上部に張り付く（追従）設定 */
#global-nav {
    position: -webkit-sticky; /* iOS用追従指定 */
    position: sticky;
    top: 0;
    width: 92% !important; /* メインコンテンツと完全に幅を合わせる */
    margin: 20px auto 0 !important; /* margin-topを設け、中央寄せに設定 */
    background-color: rgba(255, 255, 255, 0.95); /* 背景と自然に馴染むよう少しだけ透過 */
    backdrop-filter: blur(5px); /* 背景をわずかにぼかす */
    border-bottom: 1px solid #dddddd;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.nav-inner {
    width: 100%;
    margin: 0 auto;
}
.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%; /* 全幅を使用 */
    align-items: center;
}
/* 各項目の設定（均等表示） */
.nav-item {
    position: relative;
    flex: 1; /* 全ての項目を均等な幅にする */
    display: flex;
}
.nav-item > a {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央揃え */
    width: 100%;
    padding: 15px 5px; /* 項目数増加に伴い左右余白を微調整 */
    font-size: 0.9rem; 
    font-weight: bold;
    color: #111111;
    text-decoration: none !important; /* 下線を削除 */
    transition: opacity 0.3s ease;
    height: 100%;
}
.nav-item > a:hover {
    opacity: 0.6; /* オンマウスで薄くする（下線は出さない） */
}

/* メニュー項目間の薄く短いグレー区切り線 */
.nav-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px; /* 線の長さを短く調整 */
    background-color: #dddddd; /* 薄いグレー */
}

/* メニューのアイコン設定 */
.nav-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}

/* プルダウン式の子メニュー（カテゴリーから探す） */
.nav-item.has-child > a::after {
    content: "▼";
    font-size: 0.6em;
    margin-left: 6px;
    color: #888888;
    transition: transform 0.3s ease;
}
.sub-menu {
    position: absolute;
    top: 100%;
    left: -1px;
    width: 240px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-top: 2px solid #111111; /* メニュー上部を黒にしてサイトデザインと統一 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
}
/* 親メニューにマウスが乗ったらプルダウンを表示 */
.nav-item.has-child:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sub-menu li {
    border-bottom: 1px solid #eeeeee;
    margin: 0;
}
.sub-menu li:last-child {
    border-bottom: none;
}
.sub-menu li a {
    display: block;
    padding: 12px 20px;
    color: #111111;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none !important;
    transition: background 0.3s ease;
    justify-content: flex-start; /* プルダウン内は左寄せ */
}
.sub-menu li a:hover {
    background: #f5f5f5; /* オンマウスで背景色を少しグレーに */
    opacity: 0.8;
}

/* スマホ用トグルボタン（PCでは非表示） */
#nav-toggle {
    display: none;
}


/* =========================================
   5. サイドバー・記事・各種デザイン
========================================= */
/* ★サイドバーの枠線と影を削除したクリーンな箱 */
.sidebar-box { 
    background-color: #ffffff; /* 背景色（白） */
    padding: 30px 25px; /* 内側の余白 */
    margin-bottom: 25px; /* 下の余白 */
    border: none; /* 枠線を消す */
    box-shadow: none; /* 影を消す */
    border-radius: 0; /* 角の丸みを消す */
}

/* ======== トップページ専用デザイン ======== */
#custom-top-page { width: 100%; }

/* トップの一番上にあるランダム記事（今日のまずはこの記事）の設定 */
.top-random-box { margin-bottom: 50px; text-align: center; }
.top-random-box a { font-size: 1.15rem; font-weight: bold; text-decoration: none; }
.top-random-box a:hover { opacity: 0.7; }

/* 記事一覧を並べる行（2列など）の設定 */
.top-row { margin-bottom: 60px; display: flex; justify-content: space-between; gap: 30px; }
.top-row.two-columns .top-col { width: calc(50% - 15px); } /* 2列の場合の幅 */
.top-row.one-column .top-col { width: 100%; } /* 1列の場合の幅 */

/* 「新着NEWS！」などの各カテゴリー見出しの設定 */
.top-cat-heading { 
    background-color: #000000; /* 背景色（黒） */
    color: #ffffff; /* 文字色（白） */
    font-size: 1.05rem; line-height: 1.4; padding: 8px 15px 8px 24px; 
    margin-bottom: 15px; letter-spacing: 1px; position: relative; 
    display: flex; align-items: center; height: 40px; box-sizing: border-box; 
}
/* 見出しの左側にある白い縦線の装飾 */
.top-cat-heading::before { 
    content: ""; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); 
    width: 4px; height: 50%; background-color: #ffffff; 
}

/* トップページの記事リスト（タイトル箇条書き）の設定 */
.top-col ul { list-style: none; padding: 0; }
.top-col ul li { border-bottom: 1px solid #eeeeee; padding: 6px 0; } /* 各記事の区切り線 */
.top-col ul li:last-child { border-bottom: none; } /* 最後の記事だけ線を消す */
.top-col ul li a { display: block; font-size: 0.95rem; color: #000000; line-height: 1.5; font-weight: 600; }
.top-col ul li a:hover { opacity: 0.6; }
.two-col-list { display: flex; flex-wrap: wrap; justify-content: space-between; }
.two-col-list li { width: calc(50% - 15px); }

/* ======== 記事ページ（詳細画面）のデザイン ======== */
/* 投稿日時の設定 */
.entry-date { display: block; margin-bottom: 15px; }
.entry-date a { display: inline-block; font-size: 0.8rem; color: #888888; letter-spacing: 1.5px; padding-bottom: 2px; border-bottom: 1px solid #dddddd; }
.entry-date a:hover { color: #111111; border-color: #111111; }
.entry-date a::before { content: "DATE: "; font-size: 0.75rem; color: #aaaaaa; }

/* 記事タイトルの設定 */
header.entry-header .entry-title { margin-bottom: 15px; }

/* 記事に付けられたカテゴリータグ（黒いボタンのようなもの）の設定 */
.entry-categories { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; margin-bottom: 20px; }
.hatena-module-category .hatena-module-body ul { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; }
.hatena-module-category .hatena-module-body li { margin: 0; }
.hatena-module-category .hatena-module-body li a, .entry-categories a { 
    display: block; 
    background-color: #111111; /* 背景色（黒） */
    color: #ffffff; /* 文字色（白） */
    padding: 4px 14px; border-radius: 4px; font-size: 0.8rem; 
    border: 1px solid #111111; margin: 0; 
}
.hatena-module-category .hatena-module-body li a:hover, .entry-categories a:hover { 
    background-color: #ffffff; color: #111111; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

/* 記事の本文（段落）の設定 */
.entry-content p { line-height: 1.8; margin-bottom: 1.5em; font-size: 16px; }

/* 記事内の箇条書きの余白調整（「・」や「１．」が左に張り付くのを修正） */
.entry-content ul:not(.table-of-contents), 
.entry-content ol {
    padding-left: 1.5em;
    margin-left: 0.5em;
    margin-bottom: 1.5em;
}
.entry-content ul:not(.table-of-contents) li, 
.entry-content ol li {
    line-height: 1.8;
    margin-bottom: 0.5em;
    font-size: 16px;
}

/* 記事内の見出し（h2, h3など）の設定 */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { color: #000000; margin: 2em 0 1em; line-height: 1.4; font-weight: bold; }
.entry-content h2 { font-size: 1.5rem; border-bottom: 2px solid #000000; padding-bottom: 0.5em; } /* 下線の見出し */
.entry-content h3 { font-size: 1.3rem; border-left: 4px solid #111111; padding-left: 10px; } /* 左に線の見出し */
.entry-content h4 { font-size: 1.1rem; border-bottom: 1px solid #252525; }

/* 画面はみ出し・レイアウト崩れの修正 */
.entry-content {
    word-break: break-word; /* 長いURLなどのはみ出し防止 */
    overflow-wrap: break-word;
}
.entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* スマホでの横スクロールを滑らかに */
}
.entry-content img, 
.entry-content iframe, 
.entry-content pre {
    max-width: 100%;
    height: auto;
}
.entry-content pre {
    white-space: pre-wrap;
    overflow-x: auto;
}

/* ======== 記事ページ内の目次（[:contents]）デザイン ======== */
.entry-content .table-of-contents {
    background-color: #f9f9f9; /* 背景色（薄いグレー） */
    border: 1px solid #dddddd; /* 薄いグレーの枠線 */
    border-radius: 4px; /* 角を少し丸く */
    padding: 20px 25px; /* 内側の余白 */
    margin: 10px 0 10px 0; 
    list-style-type: none; /* デフォルトの黒丸リストを消す */
}
/* 目次の「目次」というタイトルを追加 */
.entry-content .table-of-contents::before {
    content: "目次";
    display: block;
    font-size: 1.1rem;
    font-weight: bold;
    color: #111111;
    border-bottom: 2px solid #111111;
    padding-bottom: 5px;
    margin-bottom: 15px;
}
/* 目次の各項目 */
.entry-content .table-of-contents li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.5;
}
.entry-content .table-of-contents li:last-child {
    margin-bottom: 0;
}
/* 目次のリンク */
.entry-content .table-of-contents li a {
    color: #111111;
    text-decoration: none;
    position: relative;
    padding-left: 1.2em; /* 矢印の分のスペース */
    display: inline-block;
}
.entry-content .table-of-contents li a:hover {
    opacity: 0.6; /* ホバー時は少し薄くするだけで下線は出さない設定 */
}
/* リンクの左の矢印 */
.entry-content .table-of-contents li a::before {
    content: "＞";
    position: absolute;
    left: 0;
    top: 0;
    color: #aaaaaa; /* 矢印の色 */
    font-size: 0.8em;
}
/* 子階層（h3, h4など）のインデント */
.entry-content .table-of-contents ul {
    list-style-type: none;
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 0;
}
.entry-content .table-of-contents ul li {
    font-weight: normal; /* 子階層は細字にする */
    font-size: 0.9rem;
    margin-bottom: 8px;
}

/* ======== サイドバーモジュール全般 ======== */
/* サイドバーの見出しデザイン */
.sidebar-bottom-box .hatena-module-title { font-size: 1.3rem; border-left: 4px solid #111111; padding-left: 10px; font-weight: bold; color: #000000; margin-top: 10px; margin-bottom: 25px; }
.hatena-module-search-box .hatena-module-title { display: none !important; } /* 検索モジュールの「検索」という文字は消す */

/* サイドバーのリストデザイン */
.hatena-module .hatena-module-body ul { list-style: none; padding-left: 0; }
.hatena-module .hatena-module-body li { margin-bottom: 15px; line-height: 1.4; }
.hatena-module .hatena-module-body a:hover { opacity: 0.6; }
.hatena-module .urllist-date-link a { display: block; font-size: 0.75rem; color: #999999; margin-bottom: 4px; } /* 日付の文字設定 */

/* 注目NEWS！デザイン（地域トピックなどのグレー背景のタグ） */
.sidebar-cat-link { display: inline-block; font-size: 11px; color: #666; background: #f1f1f1; padding: 3px 8px; margin: 3px 5px 3px 0; border-radius: 4px; }
.sidebar-cat-link:hover { background: #e5e5e5; opacity: 0.8; }
#random-today-news a.sidebar-news-title { font-weight: bold; color: #333; display: block; }
#random-today-news a.sidebar-news-title:hover { opacity: 0.7; }

/* PCサイドバー検索デザイン（入力欄とボタンの合体） */
.hatena-module-search-box .search-form { width: 100%; display: flex; align-items: stretch; margin-bottom: 0; }
.hatena-module-search-box .search-module-input { 
    flex: 1 1 auto; 
    width: calc(100% - 80px) !important; /* ボタン幅を引いて100%に収める完璧な計算 */
    min-width: 0 !important; /* flexの暴走をストップ */
    padding: 10px 12px; border: 1px solid #111111; border-radius: 4px 0 0 4px; font-size: 1rem; outline: none; 
}
.hatena-module-search-box .search-module-button { 
    flex: 0 0 80px !important; 
    width: 80px !important; 
    background-color: #111111; color: #ffffff; border: none; padding: 0; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 1rem; 
}
.hatena-module-search-box .search-module-button:hover { opacity: 0.8; }

/* ======== 記事要約（ズバリ！枠）デザイン ======== */
/* 要約を囲む外側の枠 */
.article-summary-box { background-color: #f9f9f9; border: 2px solid #111111; border-radius: 4px; margin: 10px 0 40px 0; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
/* 「ズバリ！簡潔にまとめると」を囲む黒い帯 */
.article-summary-box .summary-header { background-color: #111111; color: #ffffff; padding: 10px 15px; display: flex; align-items: center; margin: 0; }
/* 手のアイコン設定 */
.article-summary-box .summary-icon { width: 26px; height: 26px; margin-right: 8px; }
/* 目次に確実に認識させるための純粋なテキスト用H2タグ設定 */
.article-summary-box .summary-heading {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    border-bottom: none; /* 余計な下線を消す */
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
}
/* 要約の文章が入る部分 */
.article-summary-box .summary-body { padding: 20px 25px; font-size: 1.05rem; color: #111111; font-weight: 600; line-height: 1.7; }

/* ======== 記事下部のページャー（次の記事・前の記事） ======== */
body.page-entry .pager {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 50px 0 30px;
    padding: 30px 0 0 0;
    border-top: 2px dashed #dddddd; /* 関連記事と合わせた点線 */
}
body.page-entry .pager .pager-prev,
body.page-entry .pager .pager-next {
    flex: 1;
    display: flex;
    width: 50%;
}
/* ボタン風の美しいカードデザイン */
body.page-entry .pager a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    background-color: #f9f9f9; /* 薄いグレー背景 */
    border: 1px solid #eeeeee;
    border-radius: 6px;
    padding: 20px;
    text-decoration: none !important;
    color: #111111;
    transition: all 0.3s ease;
    
    font-size: 0.95rem !important;
    font-weight: bold;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-word !important;
}
/* マウスを乗せた時のアニメーション（白く光って少し浮く） */
body.page-entry .pager a:hover {
    background-color: #ffffff;
    border-color: #111111;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}
/* デフォルトの素っ気ない矢印アイコンを消去 */
body.page-entry .pager .pager-arrow {
    display: none !important;
}
/* カスタムの「前の記事」「次の記事」ラベルを追加 */
body.page-entry .pager .pager-prev a::before {
    content: "« 前の記事";
    display: block;
    font-size: 0.75rem;
    color: #888888;
    margin-bottom: 8px;
    font-weight: bold;
    line-height: 1.5;
}
body.page-entry .pager .pager-next a::before {
    content: "次の記事 »";
    display: block;
    font-size: 0.75rem;
    color: #888888;
    margin-bottom: 8px;
    font-weight: bold;
    text-align: right;
    line-height: 1.5;
}
body.page-entry .pager .pager-next a {
    text-align: right; /* 「次の記事」は右寄せ */
}

/* ======== 関連記事エリア（フッタHTMLのJS自動生成版）のデザイン ======== */
/* カスタム関連記事用大枠 */
.custom-related-entries {
    margin-top: 50px; /* 記事本文との間をしっかり空ける */
    padding-top: 25px;
    border-top: 2px dashed #dddddd; /* 記事終わりを示すさりげない点線 */
}
/* 「こちらもチェック！」の見出し（h3と全く同じデザインに） */
.custom-related-entries .hatena-module-title {
    font-size: 1.3rem;
    border-left: 4px solid #111111;
    padding-left: 10px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
}
.custom-related-entries .related-entries-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* 関連記事の各項目（リスト）の枠線と余白 */
.custom-related-entries .related-entries-item {
    border-bottom: 1px solid #eeeeee; /* 薄い区切り線 */
    padding: 14px 0; /* ★サムネイルがないため、パディングを少し縮めてスタイリッシュに */
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
.custom-related-entries .related-entries-item:last-child {
    border-bottom: none; /* 最後の線は消す */
}
/* 日付とカテゴリー名の横並び設定 */
.custom-related-entries .related-entries-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
/* 日付のデザイン */
.custom-related-entries .related-entries-date {
    font-size: 0.8rem;
    color: #888888;
    margin-right: 12px; /* カテゴリーとの間に少し隙間 */
}
/* ★カテゴリー名（サイドバー「注目NEWS！」と完全に同じデザインに統一） */
.custom-related-entries .related-entries-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.custom-related-entries .related-cat-link {
    display: inline-block;
    font-size: 11px;
    color: #666666 !important; /* 文字色はグレー */
    background: #f1f1f1; /* 背景は薄いグレー */
    padding: 3px 8px;
    border-radius: 4px; /* 角を少し丸く */
    text-decoration: none !important;
    line-height: 1.5;
    margin: 0 5px 0 0; /* 横に少し隙間を空ける */
    font-weight: normal;
}
.custom-related-entries .related-cat-link:hover {
    background: #e5e5e5; /* オンマウスで少し濃く */
    opacity: 0.8;
}
/* 記事タイトル（太字・オンマウス下線なし） */
.custom-related-entries .urllist-title-link {
    font-size: 1.05rem;
    font-weight: bold; /* 太字 */
    color: #111111;
    text-decoration: none !important; /* 下線を強制的に消す */
    line-height: 1.5;
    transition: opacity 0.3s ease;
}
.custom-related-entries .urllist-title-link:hover {
    opacity: 0.6; /* オンマウスで少し薄くする */
    text-decoration: none !important; /* ホバー時も下線を消す */
}

/* 既存のはてな標準関連記事は完全に非表示（JS生成前後のチラつき防止とダブり防止） */
.hatena-module-related-entries:not(.custom-related-entries) {
    display: none !important;
}


/* 固定ページ（お問い合わせなど）の不要なタイトルを非表示 */
.page-page .entry-title { display: none !important; }

/* ======== フッターエリア ======== */
/* フッター全体の大枠 */
#custom-footer { background-color: #252525; color: #ffffff; padding-top: 50px; margin-top: 60px; }
#custom-footer a { color: #ffffff; transition: opacity 0.3s ease; }
#custom-footer a:hover { opacity: 0.6; }

/* フッター上部の説明文 */
.footer-desc-wrapper { border-bottom: 1px solid #444444; margin-bottom: 50px; padding-bottom: 40px; }
.footer-desc-top { text-align: center; font-size: 1.2rem; font-weight: bold; letter-spacing: 1.5px; }

/* フッターの中身（ロゴやリンク集）を横並びにする設定 */
.footer-inner { display: flex; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 0 20px 50px; gap: 30px; justify-content: space-between; }
.footer-col { flex: 1; min-width: 220px; }
.col-info { flex: 1.2; }

/* フッターロゴの設定 */
.footer-logo-wrapper { margin-bottom: 55px; }
/* ★フッタのSVGロゴの色をコントロール */
.col-info .site-logo-svg { width: 100%; max-width: 240px; }

/* フッター内のリストや見出しの設定 */
.footer-about-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 15px; }
.footer-about ul { list-style: none; }
.footer-about li { margin-bottom: 10px; font-size: 0.85rem; }
.footer-cat-group { margin-bottom: 40px; }
.footer-cat-title { font-weight: bold; font-size: 1.1rem; margin-bottom: 20px; }
.footer-cat-list { list-style: none; font-size: 0.85rem; padding: 0; margin: 0; }
.footer-cat-list li { margin-bottom: 15px; }

/* コピーライト（一番下の黒い帯） */
.footer-copyright { background-color: #111111; color: #ffffff; border-top: 1px solid #444444; text-align: center; padding: 15px 10px; font-size: 0.8rem; }


/* ==========================================
   6. スマホ用レスポンシブデザイン（強制1カラム化・縮小防止）
========================================== */
/* スマホ（画面幅768px以下）の時だけ適用されるデザイン */
@media screen and (max-width: 768px), screen and (max-device-width: 768px) {
    
    /* ------------------------------
       表示・非表示の切り替え
    ------------------------------ */
    .pc-only { display: none !important; } 
    .sp-only { display: block !important; }
    
    /* 白い四角の正体や、PC用検索窓をスマホで非表示にする */
    .sidebar-top-box { display: none !important; }
    
    /* ------------------------------
       ★完全修正：スマホ表示のヘッダーロゴと2本線（白背景化）
    ------------------------------ */
    .sp-logo-area {
        display: block !important;
        position: relative !important;
        padding: 15px 15px 25px 15px !important;
        text-align: center !important;
        margin-bottom: 0 !important; 
        background-color: #ffffff !important; /* 白背景を復活 */
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .sp-logo-area .site-logo-svg { 
        width: 75% !important; 
        max-width: 240px !important; 
        margin: 0 auto !important; 
        display: block !important; 
    }
    /* 2本線：上の線は画面幅いっぱい、下の線は左右短め（PC同様の美しいバランス） */
    .sp-logo-area::before { 
        content: "" !important; display: block !important; position: absolute !important;
        left: 0 !important; right: 0 !important; bottom: 8px !important; 
        height: 1px !important; background-color: #dddddd !important; 
    }
    .sp-logo-area::after { 
        content: "" !important; display: block !important; position: absolute !important;
        left: 15px !important; right: 15px !important; bottom: 0 !important; 
        height: 1px !important; background-color: #dddddd !important; 
    }

    /* ------------------------------
       ★完全修正：スマホ検索窓の縮小＆中央揃え（白背景の箱化）
    ------------------------------ */
    .hatena-module-search-box { 
        display: block !important; 
        width: 100% !important; 
        margin: 0 0 20px 0 !important; /* メニューバーとの隙間 */
        padding: 10px 0 25px 0 !important; /* 白背景の余白 */
        background-color: #ffffff !important; /* 白背景を復活 */
        box-sizing: border-box !important;
    }
    .hatena-module-search-box .hatena-module-body {
        padding: 0 !important;
        width: 100% !important;
    }
    /* ★検索フォーム全体を85%に縮めて中央に配置 */
    .hatena-module-search-box .search-form { 
        display: flex !important; 
        width: 85% !important; 
        max-width: 400px !important;
        margin: 0 auto !important; 
        padding: 0 !important; 
    }
    .hatena-module-search-box .search-module-input { 
        flex: 1 !important; 
        width: 100% !important;
        min-width: 0 !important; 
        height: 42px !important; 
        padding: 10px 12px !important; 
        border: 1px solid #111111 !important; 
        border-radius: 4px 0 0 4px !important; 
        font-size: 15px !important; box-sizing: border-box !important; margin: 0 !important; outline: none !important;
    }
    .hatena-module-search-box .search-module-button { 
        flex: 0 0 60px !important; 
        width: 60px !important; 
        height: 42px !important; 
        padding: 0 !important; 
        background-color: #111111 !important; 
        color: #ffffff !important; border: none !important; 
        border-radius: 0 4px 4px 0 !important; font-weight: normal !important; 
        font-size: 15px !important; box-sizing: border-box !important; margin: 0 !important; 
        appearance: none; -webkit-appearance: none; cursor: pointer;
    }
    .hatena-module-search-box .hatena-module-title { display: none !important; }

    /* ------------------------------
       スマホ用グローバルナビ（メニューバー）＆ アコーディオン
    ------------------------------ */
    #global-nav {
        height: 54px !important; 
        border-bottom: 1px solid #dddddd !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        display: flex !important;
        justify-content: flex-end !important; /* トグルボタン領域確保 */
        align-items: center !important;
        padding: 0 15px !important;
        margin: 0 !important; 
        width: 100% !important; 
    }
    
    /* トグルボタン（画面右側に絶対配置で固定） */
    #nav-toggle.sp-only {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        box-shadow: none !important;
        padding: 0;
        z-index: 2000;
    }
    #nav-toggle span {
        display: block;
        width: 24px;
        height: 2px;
        background: #111111;
        transition: all 0.3s ease;
    }
    #nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #nav-toggle.is-active span:nth-child(2) { opacity: 0; }
    #nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* メニュートグル展開時の「真下へ縦一列（アコーディオン）」構造 */
    .nav-list {
        position: absolute !important;
        top: 54px !important; /* メニューバーのすぐ下 */
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 60px) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        border-top: 1px solid #dddddd !important;
        flex-direction: column !important; /* 完全な縦並びに固定 */
        padding: 0 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
        display: none !important; /* 初期は非表示 */
        right: auto !important;
        transition: none !important;
        z-index: 1999;
        overflow-y: auto; 
    }
    .nav-list.is-active {
        display: flex !important; /* toggle時に表示 */
    }
    /* スマホ時は各項目をブロック要素にして縦に積む */
    .nav-item {
        display: flex !important;
        flex-direction: column !important; /* リンクとサブメニューを縦に並べる */
        align-items: stretch !important;
        border-right: none !important;
        border-left: none !important;
        border-bottom: 1px solid #eeeeee !important;
        width: 100% !important;
        margin: 0 !important; 
    }
    .nav-item:last-child { border-bottom: none !important; }
    .nav-item:not(:last-child)::after { display: none !important; }
    
    .nav-item > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* 全て左寄せ */
        padding: 16px 20px !important;
        font-size: 1rem !important;
        width: 100% !important;
    }
    .nav-item.has-child > a { 
        justify-content: flex-start !important; 
    } 
    .nav-item.has-child > a::after {
        margin-left: auto !important; /* 矢印を右端に */
    }
    .nav-item.has-child.is-open > a::after { 
        transform: rotate(180deg); 
    }
    
    /* サブメニュー（大カテゴリー）の真下アコーディオン展開 */
    .sub-menu {
        position: static !important; /* 絶対配置を解除して下に積む */
        width: 100% !important;
        display: none !important; /* 初期は非表示 */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px dashed #dddddd !important;
        background: #f9f9f9 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .sub-menu.is-active { display: block !important; }
    .sub-menu li { width: 100% !important; }
    .sub-menu li a {
        padding: 12px 20px 12px 30px !important; /* インデントをつける */
        font-size: 0.95rem !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    /* ------------------------------
       記事エリア・余白の最適化
    ------------------------------ */
    /* スマホの各コンテンツの表示順序（上から下へ） */
    body #container { display: flex !important; flex-direction: column !important; width: 100% !important; overflow: visible !important; }
    body #top-editarea { order: 1 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    #global-nav { order: 2 !important; }
    body #content { order: 3 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    body #content-inner { display: flex !important; flex-direction: column !important; width: 100% !important; overflow: visible !important; }
    
    body #wrapper { order: 1 !important; width: 100% !important; margin: 0 0 20px 0 !important; padding: 25px 15px !important; border-radius: 0 !important; overflow: visible !important; }
    body #box2 { order: 2 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }

    /* ------------------------------
       各要素の白背景・箱のデザイン統一
    ------------------------------ */
    .sp-header-wrapper, 
    .sidebar-box {
        width: 100% !important;
        background-color: #ffffff !important; 
        margin: 0 0 20px 0 !important; 
        padding: 25px 15px 16px 15px !important; 
        box-sizing: border-box !important; 
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* ------------------------------
       その他 記事・モジュールの微調整
    ------------------------------ */
    .top-random-box { margin-top: 25px !important; margin-bottom: 40px !important; } 
    .top-row { flex-direction: column !important; gap: 40px !important; } 
    .top-row.two-columns .top-col { width: 100% !important; }
    .two-col-list { flex-direction: column !important; }
    .two-col-list li { width: 100% !important; }
    .hatena-module { margin-bottom: 45px !important; width: 100% !important; overflow: visible !important; }
    .article-summary-box { overflow: visible !important; }
    .article-summary-box .summary-header { font-size: 1rem !important; padding: 8px 12px !important; }
    .article-summary-box .summary-body { padding: 15px !important; font-size: 0.95rem !important; }
    .archive-entry { margin-bottom: 40px !important; padding-bottom: 30px !important; border-bottom: 1px solid #ddd !important; }
    .entry-title { font-size: 22px !important; line-height: 1.4 !important; margin-bottom: 15px !important; }
    .entry-content p, .summary-body { font-size: 16px !important; line-height: 1.8 !important; margin-bottom: 1.5em !important; }
    .entry-content .table-of-contents { padding: 15px !important; }
    
    /* ------------------------------
       ページャー（次の記事・前の記事）
    ------------------------------ */
    body.page-entry .pager { flex-direction: column !important; display: flex !important; gap: 15px !important; margin: 40px 0 20px !important; padding-top: 20px !important; }
    body.page-entry .pager .pager-prev, body.page-entry .pager .pager-next { width: 100% !important; display: flex !important; }
    body.page-entry .pager .pager-prev a, body.page-entry .pager .pager-next a { padding: 15px !important; }
    body.page-entry .pager a::after { font-size: 0.9rem !important; }
    
    /* ------------------------------
       フッターのスマホ用1カラム化
    ------------------------------ */
    body #footer { 
        width: 100% !important; 
        padding: 40px 0 50px 0 !important; 
        margin: 0 !important; 
        box-sizing: border-box !important; 
        text-align: center !important; 
        background-color: #252525 !important; 
    }
    .footer-desc-top { font-size: 0.95rem !important; }
    .footer-inner { display: flex !important; flex-direction: column !important; padding: 0 15px 30px 15px !important; gap: 30px !important; }
    .footer-col { width: 100% !important; min-width: 0 !important; }
    .footer-logo-wrapper { margin-bottom: 30px !important; text-align: center !important; }
    .col-info .site-logo-svg { width: 50% !important; max-width: 150px !important; margin: 0 auto !important; }
    .footer-about-title, .footer-cat-title, .footer-cat-list { text-align: center !important; }
    
    /* ------------------------------
       パンくずリスト（スマホ用調整）
    ------------------------------ */
    #breadcrumb, .breadcrumb, .page-archive #breadcrumb {
        font-size: 0.8rem !important;
        margin-bottom: 15px !important;
        padding: 0 2px !important;
    }
}

/* =========================================
   7. パンくずリスト（SEO対策用）
========================================= */
#breadcrumb, .breadcrumb, .page-archive #breadcrumb {
    font-size: 0.85rem;
    color: #888888;
    margin-top: 15px !important; 
    margin-bottom: 20px !important;
    margin-left: 15px !important; 
    padding: 0 !important;
    line-height: 1.5;
    letter-spacing: 0.5px;
}
#breadcrumb a, .breadcrumb a, .page-archive #breadcrumb a {
    color: #333333;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s ease;
}
#breadcrumb a:hover, .breadcrumb a:hover, .page-archive #breadcrumb a:hover { opacity: 0.6; }
.breadcrumb-child { margin: 0 4px; color: #aaaaaa; }