/*
Theme Name: my-jin-theme
Author: Jin
Description: 自作HTML完全移植＋WordPress修正（1行1指示・完全版）
Version: 2.0
*/

/* =================================================
   1. 基本設定
   ================================================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- サイト全体のスムーズスクロールを有効化 --- */
html {
    scroll-behavior: smooth; /* ★これだけで、リンク移動が滑らかになります */
    scroll-padding-top: 50px; /* ジャンプした時に、見出しがヘッダーに被らないよう隙間を作る */
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.8;
}

.container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =================================================
   2. ヘッダー & ナビゲーション
   ================================================= */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2100;
}

.header-top {
    padding: 20px 0;
}

.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 2rem;
    color: #007bff;
    font-weight: bold;
}

/* メインビジュアル */
.main-visual {
    width: 100%;
    height: 350px;
    overflow: hidden;
    background-color: #000;
}

.main-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ナビゲーションバー (PC) */
#nav {
    background-color: #4a90a2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2000;
}

#nav ul {
    display: flex;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav ul li {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.2);
}

#nav ul li:last-child {
    border-right: none;
}


/* --- 既存の a タグ設定をアップデート --- */
#nav ul li a {
    display: block;
    padding: 15px 0;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    position: relative;         /* ★下線の基準点として必要 */
    transition: all 0.3s ease;  /* ★変化を滑らかにする */
}

/* --- マウスを乗せた時の背景と文字色の変化 --- */
#nav ul li a:hover {
    background-color: #3b7382; /* 背景を少し濃い青緑にする */
    color: #ffc107;             /* 文字をカテゴリーバッジと同じ黄色にする */
}

/* --- おしゃれな下線アニメーション（中央から広がる） --- */
#nav ul li a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4px;                /* 下線の太さ */
    background-color: #ffc107;  /* 下線も黄色に合わせる */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

#nav ul li a:hover::after {
    width: 100%;                /* ホバー時に中央からパッと広がる */
}

/* --- 現在のページ（active）の装飾 --- */

/* 1. 背景色と文字色を固定する */
#nav ul li a.active {
    background-color: #3b7382 !important; /* ホバー時と同じ濃い青緑 */
    color: #ffc107 !important;            /* カテゴリーバッジと同じ黄色 */
}

/* 2. 下線を常に表示させておく */
#nav ul li a.active::after {
    width: 100% !important;               /* 線を最大幅で固定 */
    background-color: #ffc107 !important; /* 下線も黄色 */
}

/* =================================================
   3. メイン検索バー（高級キャッチコピー）
   ================================================= */
.main-search-bar {
    max-width: 1150px;
    margin: 40px auto 20px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.search-area-left {
    display: flex;
    align-items: center;
    gap: 25px;
}

.catchphrase {
    color: #2c3e50 !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin: 0;
    white-space: nowrap; /* デスクトップでは改行させない */
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    font-size: 1.5rem;
    color: #4a90a2;
    transition: 0.3s;
}

.search-form {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 40px;
    width: 280px;
    padding: 4px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 10px;
    outline: none;
}

.search-submit {
    padding: 0;
    background-color: #4a90a2;
    color: #fff;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* スマホ（画面幅768px以下）の時のキャッチコピー調整 */
@media screen and (max-width: 768px) {
    .catchphrase {
        font-size: 1.0rem !important; /* 文字を少し小さくします。必要に応じて数値を調整してください */
        line-height: 1.5;             /* 行間を広げて読みやすくします */
        margin-bottom: 8px;           /* 下のアイコンとの間隔を少し空けます */
        text-align: center;           /* 中央寄せを強調したい場合に有効です */
    }
}


/* =================================================
   4. 記事一覧（グリッド & 高さ揃え）
   ================================================= */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 40px 0;
}

.post-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-card:hover {
    transform: translateY(-8px);
}

.post-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* --- 修正後：名前を変えて干渉を防ぐ --- */
/* --- 修正後：トップ画面のカテゴリータグ --- */
.cat-badge {
    display: inline-block;    /* 文字の長さに合わせて横に広がるようにする */
    white-space: nowrap;     /* ★重要：文字を絶対に縦に並ばせない設定 */
    background: #ffc107 !important;
    color: #333 !important;
    font-size: 0.7rem;
    padding: 4px 10px;       /* 上下左右の余白を少し広げて読みやすく */
    border-radius: 4px;
    font-weight: bold;
    /* 位置指定は親の <a> タグで行うので、ここでは absolute を外します */
}

/* 追加：タグのマウスホバー時の動き */
.cat-badge-link:hover .cat-badge {
    background: #e0a800 !important; /* 少し濃い黄色にする */
    transform: scale(1.05);          /* 少しだけ大きくして「押せる」感を出す */
    transition: 0.2s;
}

.post-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.date {
    font-size: 0.85rem;
    color: #999;
    text-align: right;
    margin-top: auto;
}

/* --- トップ画面：カードタイトルの文字サイズと行間の調整 --- */
.post-info h2 {
    font-size: 1.1rem !important; /* 文字を小さく調整 */
    line-height: 1.3 !important;  /* 行間を詰める（1.3〜1.4がおすすめ） */
    margin-top: 5px !important;    /* 画像との隙間 */
    margin-bottom: 5px !important; /* 日付との隙間 */
}

/* タイトルの中のリンク（aタグ）の色や装飾も整えます */
.post-info h2 a {
    text-decoration: none;
    color: #333; /* 落ち着いた黒 */
}

/* =================================================
   5. 記事本文 & 見出し装飾 (2P目 復活)
   ================================================= */
.main-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    margin: 40px auto;
    align-items: start;
}

/* 1. 記事全体のコンテナにゆとりを持たせる */
.article-container {
    padding: 40px;      /* ★内側の余白をしっかり取る */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    min-width: 0; /* ★重要：これが無いとグリッドが無限に横に伸びます */
}

/* 2. タイトルの下の間隔を空ける */
.entry-title {
    margin-bottom: 30px; /* タイトルと本文の距離を離す */
    line-height: 1.4;
    font-size: 1.8rem;
}

/* 3. 本文の行間を黄金比（1.8）に設定して読みやすくする */
.entry-content {
    line-height: 1.8;   /* ★これが最も重要！文字の重なりを解消します */
    color: #333;
    font-size: 16px;
}

/* 4. 段落(p)や箇条書き(ul)の下に余白を作る */
.entry-content p,
.entry-content ul {
    margin-bottom: 25px; /* 段落ごとの区切りをハッキリさせる */
}

/* 5. 箇条書き(li)のひとつひとつにも隙間を作る */
.entry-content li {
    margin-bottom: 12px; /* 箇条書きが密集するのを防ぐ */
    list-style-position: outside; /* ポッチを外側に出して文字を揃える */
    margin-left: 20px;
}

/* --- 確定版：インライン（改行なし）リスト --- */
.entry-content ul:not(.plain-list) {
    list-style: none;
    padding-left: 0;
    margin: 25px 0;
}

.entry-content ul:not(.plain-list) li {
    position: relative;
    padding: 15px 20px 15px 50px; /* 余白を15pxで統一 */
    background: #fff;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}

/* チェックアイコン：1行目の高さに固定 */
.entry-content ul:not(.plain-list) li::before {
    content: "\f00c"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 15px; /* padding-topと同じ数値にすることで1行目と揃います */
    width: 24px;
    height: 24px;
    background: #4a90a2; /* H2と同じ色 */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* 太字部分：強制的に「改行なし」で横に並べる */
.entry-content ul:not(.plain-list) li strong,
.entry-content ul:not(.plain-list) li b {
    display: inline-block !important; /* 絶対に改行させない最優先命令 */
    font-size: 1rem;            /* 本文と同じサイズにしてスッキリ */
    color: #4a90a2;             /* H2と同じ色 */
    margin-right: 8px;          /* 本文との間のわずかな隙間 */
    margin-bottom: 5px;
    font-weight: bold;
   
}

/* 本文部分：自動で付く余白を完全にシャットアウト */
.entry-content ul:not(.plain-list) li p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6;
}

/* ホバー時の動き */
.entry-content ul:not(.plain-list) li:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: #4a90a2;
}
/* --- 元のシンプルな形式に戻すためのクラス --- */
.entry-content ul.plain-list {
    list-style-type: disc !important;
    padding-left: 20px !important;
}

.entry-content ul.plain-list li {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    transform: none !important;
}

.entry-content ul.plain-list li::before {
    content: none !important;
}


/* ★H2見出しの装飾★ */
.entry-content h2 {
    position: relative;
    padding: 12px 15px;
    background: #f8f9fa;
    border-left: 6px solid #4a90a2;
    border-bottom: 1px solid #eee;
    font-size: 1.5rem;
    margin: 45px 0 20px;
    color: #333;
}

/* ★H3見出しの装飾★ */
.entry-content h3 {
    font-size: 1.25rem;
    padding-left: 10px;
    border-bottom: 2px solid #4a90a2;
    padding-bottom: 8px;
    margin: 35px 0 15px;
    color: #4a90a2;
}

/* 画像の中央寄せ */
.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-image.aligncenter {
    display: block;
    margin: 45px auto !important;
}

.entry-content img {
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    margin: 0 auto;
    /* ↓ 動きを滑らかにする設定 */
    transition-duration: 0.4s;
    transition-timing-function: ease;
    transition-property: transform, box-shadow;
}


/* =================================================
   6. サイドバー & ウィジェット (復活)
   ================================================= */
.widget {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.widget h3 {
    font-size: 1.1rem;
    border-bottom: 2px solid #4a90a2;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #4a90a2;
}

.profile-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f0f2f5;
}

/* プロフィール画像を枠にフィットさせる設定 */
.profile-icon img {
    width: 100%;      /* 枠の幅いっぱいに広げる */
    height: 100%;     /* 枠の高さいっぱいに広げる */
    object-fit: cover; /* 縦横比を保ったまま、隙間なく中央に配置する */
}

/* --- SNSアイコン装飾（ヘッダー＆プロフィール共通・微調整版） --- */

/* 1. アイコン共通の土台：間隔を18pxから「10px」に縮小 */
.profile-sns a,
.social-links a {
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-size: 24px;
    margin-right: 10px !important; /* ★18pxから10pxに縮めて、アイコン同士を近づけます */
}

/* 最後のアイコンだけ右余白を完全に消して、右端をビシッと揃える */
.profile-sns a:last-child,
.social-links a:last-child {
    margin-right: 0 !important;
}

/* 2. X（旧Twitter）のブランドカラー */
.profile-sns a .fa-x-twitter,
.social-links a .fa-x-twitter {
    color: #000 !important;
}

/* 3. Instagramのブランドカラー（タイポがあっても効くように指定） */
.profile-sns a [class*="fa-instagram"],
.social-links a [class*="fa-instagram"] {
    color: #E1306C !important;
}

/* 4. マウスを乗せた時の演出（ホバー） */
.profile-sns a:hover,
.social-links a:hover {
    transform: translateY(-4px) scale(1.1); /* 4px浮いて1.1倍に拡大 */
    opacity: 0.8;
}

/* 5. リンク未設定（準備中）の場合は動きを無効にする */
/* .profile-sns a[href^="javascript"]:hover,
.social-links a[href="#"]:hover {
    transform: none;
    cursor: default;
    opacity: 1;
} */

.recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 362行目からの既存の設定を微調整 --- */
.recent-list li {
    margin-bottom: 12px;
    border-bottom: 1px dotted #4b4444;
    padding-bottom: 8px;
    font-size: 0.9rem;
    list-style: none;
}

/* --- ここから追加：横並びの維持とアニメーション --- */
.recent-list li a {
    display: flex;         /* 画像とテキストを強制的に横並びにします */
    align-items: center;   /* 上下の中心をピタッと合わせます */
    text-decoration: none;
    color: inherit;
    /* transition の対象を transform に絞り、余計な広がりを抑えます */
    transition: transform 0.2s ease-in-out, color 0.2s ease;
}

.recent-list li img {
    width: 60px;           /* サイズを固定してレイアウトを安定させます */
    height: 60px;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;        /* 文字に押されて画像が細くなるのを防ぎます */
    border-radius: 4px;
}

/* --- マウスオーバー：高さは変えず、右に 6px だけ避ける --- */
.recent-list li a:hover {
    color: #2c7a7b;        /* 仁さんのお好みのアクセントカラーに */
    transform: translateX(6px); /* 周りを押し出さず、自分だけスライドします */
}

.sidebar {
    position: -webkit-sticky; /* Safari用の記述 */
    position: sticky;         /* これで追従します */
    top: 20px;                /* スクロール時に画面上端から空ける距離 */
}

/* --- サイドバーお勧めバナーの装飾（完全版） --- */

/* 1. 外側の枠線を消してスッキリさせる */
.recommend-banner {
    margin-top: 10px;
}

.banner-inner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* 2. 画像のサイズと動き */
.banner-inner img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* 3. 黄色のラベル装飾 */
.banner-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ffc107; /* サイト共通の黄色 */
    color: #333;
    padding: 3px 12px;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 4px;
    z-index: 2;
}

/* 4. 文字を読みやすくするための黒グラデーション */
.banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 15px 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    z-index: 1;
}

.banner-text {
    color: #fff;
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
}

/* 5. マウスホバー時のリッチな演出 */
.recommend-banner a:hover .banner-inner {
    transform: translateY(-5px);
}

.recommend-banner a:hover .banner-inner img {
    transform: scale(1.1);
}

/* --- ページネーション：本物のシステム出力に対応させる --- */
.pagination {
    margin: 60px 0;
    text-align: center;
}

/* ワードプレスが生成する「nav」タグの中身を横並びにする */
.pagination .nav-links {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* スクリーンリーダー用の非表示見出しを消す（縦並びの原因） */
.pagination .screen-reader-text {
    display: none !important;
}

/* 数字ボタンのデザイン（既存の流用） */
.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    background-color: #fff;
    color: #4a90a2;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

/* 現在のページ */
.page-numbers.current {
    background-color: #4a90a2;
    color: #fff;
}

/* 次へ・前へのカプセル形状 */
.page-numbers.next,
.page-numbers.prev {
    width: auto !important;
    padding: 0 20px !important;
    border-radius: 25px !important;
}

/* --- ページネーション：マウスを乗せた時の動き（復活版） --- */
.page-numbers:hover {
    background-color: #4a90a2 !important; /* 仁さんのテーマカラー */
    color: #fff !important;
    transform: translateY(-3px);          /* 3px上にふわっと浮く */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 浮いた時に影を少し強くする */
}

/* 現在のページ（current）は動かさない設定 */
.page-numbers.current:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}



/* =================================================
   8. フッター & 広告（幅と位置の微調整）
   ================================================= */
   footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    padding: 60px 0 40px;
    margin-top: 50px;
}

/* 広告エリア：幅を制限して中央に寄せる */
.sp-area.footer-sp {
    max-width: 728px; /* ★ここを制限することで、横幅いっぱいになりません */
    margin: 0 auto 40px;
    text-align: center;
}

.sp-box {
    background-color: #f5f5f5;
    border: 1px dashed #ccc;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    border-radius: 4px;
}

/* フッター下部：文字をピシッと中央に整列 */
.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.copyright {
    font-size: 0.85rem;
    color: #666;
}

.footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.footer-links li {
    list-style: none !important;
}

.footer-links li a {
    color: #666;
    font-size: 0.85rem;
    transition: 0.3s;
}

.footer-links li a:hover {
    color: #4a90a2;
}

/* =================================================
   8. レスポンシブ調整（メニュー位置 & 回り込み 修正版）
   ================================================= */

/* --- 1024px以下: 検索バーを下へ回り込ませる --- */
@media (max-width: 1024px) {
    .main-search-bar {
        flex-direction: column;
        gap: 25px;
    }
    .catchphrase {
        white-space: normal; /* 折り返しを許可 */
        text-align: center;
    }
}

/* --- 768px以下: モバイル対応 --- */
@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: 1fr;
    }
    .main-wrapper {
        grid-template-columns: 1fr;
    }

    /* 三本線ボタン：位置を固定 */
    .menu-toggle {
        display: block !important;
        cursor: pointer;
        z-index: 3000;
        padding: 10px;
        position: relative;
    }

    /* 三本線の中身（描画） */
    .menu-toggle span {
        display: block;
        width: 28px;
        height: 2px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }

    /* ★「×」に変形するアニメーション★ */
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* メニュー本体：位置を「三本線バー」の直後に固定 */
    #nav {
        display: none;
        position: absolute;
        /* ↓ここを「100%」ではなく「固定値」にすることで画像の上に被せます */
        top: 80px; 
        left: 0;
        width: 100%;
        background-color: #4a90a2;
        z-index: 2500;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    #nav.active {
        display: block !important;
    }

    #nav ul {
        flex-direction: column;
        padding: 10px 0;
    }

    #nav ul li {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}

/* スクロールトップ */
.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4a90a2;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    opacity: 0;
    visibility: hidden;
    z-index: 1100;
}
.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

/* --- サブページ：カテゴリーバッジの装飾 --- */
.category-badge ul {
    list-style: none !important;
    padding: 0 !important;
    margin-bottom: 15px;
}

.category-badge li {
    display: inline-block;
}

.category-badge li a {
    background-color: #ffc107; /* トップページと同じ黄色 */
    color: #333;
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    text-decoration: none;
}

/* --- サイドバー：検索バーのはみ出しを強制修正 --- */
.sidebar .search-form {
    width: 100% !important; /* 親要素の幅に合わせる */
    max-width: 100%;
    box-sizing: border-box; /* 枠線分も計算に含める */
}

.sidebar .search-input {
    width: 100% !important;
    min-width: 0; /* 強制的に縮むように設定 */
}

/* サブページ：カテゴリーバッジの「詰まり」を解消 */
.sub-category-badge {
    display: inline-block;
    background-color: #ffc107; /* 仁さんお馴染みの黄色 */
    color: #333;
    font-size: 0.75rem;
    padding: 4px 14px; /* ← 左右の余白をたっぷり確保 */
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* ついでに：サイドバーの検索バーはみ出し修正 */
.sidebar .search-form {
    width: 100% !important;
    box-sizing: border-box;
}

.sidebar .search-input {
    width: 100% !important;
}

/* --- サイドバー：最新記事リストの横並び設定 --- */
.recent-list {
    list-style: none !important;
    padding: 0 !important;
}

.recent-list li {
    margin-bottom: 15px;
    border-bottom: 1px dotted #ddd;
    padding-bottom: 12px;
}

.recent-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.recent-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #eee;
}

.recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-title {
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.4;
}

.recent-date {
    font-size: 0.75rem;
    color: #999;
}



/* =================================================
   制作中の一時的な全画像ボカシ設定
   ================================================= */
/* 画像タグ、およびサムネイル用のクラスを一括でボカす */
img, 
.nsfw-blur, 
[class*="thumb"], 
[class*="thumbnail"] { 
    filter: blur(0px) !important;
    transition: filter 0.3s ease;
}

/* マウスを乗せた時だけ解除（確認用） */
img:hover, 
.nsfw-blur:hover, 
[class*="thumb"]:hover, 
[class*="thumbnail"]:hover {
    filter: blur(0) !important;
}

/* --- 画像キャプションを中央に寄せる --- */
.entry-content .wp-block-image figcaption {
    display: block !important;      /* 縦に潰れる性質を解除 */
    width: 100% !important;        /* 横幅を記事の幅いっぱいに広げる */
    max-width: 100% !important;    /* 制限を完全に撤廃 */
    text-align: center !important; /* 中央に寄せる */
    margin-top: 10px;
    margin-bottom: 25px;
    font-size: 0.9em;
    color: #666;
    writing-mode: horizontal-tb !important; /* 強制的に横書きに固定 */
}

/* --- エディタの中央寄せ設定も有効にする --- */
.has-text-align-center {
    text-align: center !important;
}

/* 管理画面で設定した「アクセントカラー」を赤色として定義する */
.has-accent-color {
    color: #f11515 !important;
}

/* 他の色（例：赤）を使いたい場合も同様に定義が必要です */
.has-vivid-red-color {
    color: #cf2e2e !important;
}


/* 2. 背景の色 */
.has-accent-background-color { 
    background-color: #f11515 !important; 
}

/* 4. テキストの配置 */
.has-text-align-center { 
    text-align: center !important; 
}
.has-text-align-right { 
    text-align: right !important;
 }

/* --- WordPressのサイズプリセットを有効にする --- */

.has-small-font-size {
    font-size: 13px !important;
}

.has-medium-font-size {
    font-size: 20px !important;
}

.has-large-font-size {
    font-size: 36px !important;
}

.has-x-large-font-size {
    font-size: 42px !important;
}

/* 青色（シアンブルー）：下線あり */
.has-vivid-cyan-blue-color {
    color: #0693e3 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* 水色（ペールシアンブルー）：下線なし */
.has-pale-cyan-blue-color {
    color: #8ed1fc !important;
    font-weight: bold !important;
    text-decoration: none !important; /* 下線なし */
}

/* --- 「追加CSSクラス」欄に add-line と書いた時だけ下線を引く設定 --- */
.add-line {
    text-decoration: underline !important;
}

/* --- 記事内の表（テーブル）の基本デザイン --- */
.entry-content table {
    width: 100%;
    margin-bottom: 25px;
    border-collapse: collapse; /* 隣り合う枠線を一本にする */
    font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
    padding: 12px 15px;
    border: 1px solid #ddd; /* 薄いグレーの枠線 */
    text-align: left;
}

/* 表のヘッダー（一番上の行）を強調する */
.entry-content th {
    background-color: #d1e7ec;
    font-weight: bold;
    text-align: center;      /* 中央寄せ */
}

/* 2. 一番左の列（1列目）の設定 */
.entry-content table tbody td:first-child {
    font-weight: bold !important;
    text-align: left !important;    /* ★centerからleftに変更して左寄せを強制 */
    padding-left: 15px !important;  /* 左側に少し余白を作る */
    width: 28% !important; 
    background-color: #d1e7ec;      /* 基本の色（ハイライトがない時用） */
}

/* 1行おきに色をつけて読みやすくする（ストライプ） */
.entry-content tr:nth-child(even) {
    background-color: #fafafa;
}

/* --- 1列目だけを広くし、残りを均等にする設定 --- */
.table-first-wide {
    table-layout: fixed !important;
    width: 100% !important;
}

/* 1列目（ヘッダーラベル）を35%の幅にする */
.table-first-wide th:first-child,
.table-first-wide td:first-child {
    width: 28% !important; /* ★この数字を大きくすればもっと広くなります */
    background-color: #d1e7ec;
}
/* 2列目以降は、残りの65%を自動で均等に分け合います */



/* 2. 外側の枠（窓）：ここを絶対に画面幅（100%）に固定する */
.table-scroll-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;    /* ★堤防。これ以上は絶対に突き抜けさせない */
    overflow-x: auto !important;   /* ★はみ出したら「中だけ」でスクロールさせる */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 30px;
    border: 1px solid #eee;       /* 境界線を分かりやすくする（任意） */
}

/* 3. 中のテーブル：縮まない「芯」を作る */
.table-scroll-container table {
    width: 100% !important;
    min-width: 680px !important;  /* ★PCでバーを出さないための絶妙なサイズ */
    max-width: none !important;
    table-layout: fixed !important;
}

/* テーブル内の文字を少し凝縮して、680pxでも余裕を持たせる */
.table-scroll-container td,
.table-scroll-container th {
    font-size: 0.85rem !important; /* 文字を少しだけ小さく */
    padding: 8px 5px !important;   /* 左右の余白を詰める */
    text-align: center !important;  /* ★中身を中央寄せにする */
}

/* 1列目（国名）だけは左寄せで見やすく維持 */
.table-scroll-container td:first-child,
.table-scroll-container th:first-child {
    text-align: left !important;
    padding-left: 15px !important;
}

/* --- 特定の行をハイライト（薄い黄色）する設定 --- */
.table-focus-1 tbody tr:nth-child(1) {
    background-color: #fff9c4 !important; /* 薄い黄色 */
    font-weight: bold; /* 文字も少し太くして強調 */
}


/* --- 検索結果表示エリア専用の装飾 --- */
/* --- 修正後：!important を消して、none（非表示）に変えます --- */
.jin-search-info {
    display: none; /* ★初期状態は隠しておきます。!important は消してください */
    align-items: center;
    gap: 15px;
    margin: 20px 0 30px;
    padding: 15px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    color: #4a90a2;
}

.jin-search-info i {
    font-size: 1.5rem;
}

.jin-search-title {
    font-size: 1.2rem !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    font-weight: bold;
}

p.profile-name {
    font-weight: bold;
    font-size: larger;
    color: #4a90a2;
}

/* アーカイブページの見出し装飾 */
.archive-header {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-left: 8px solid #4a90a2; /* 仁さんサイトのテーマカラー */
}

.archive-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 10px;
}

.archive-title i {
    color: #4a90a2;
    margin-right: 10px;
}

.archive-description {
    color: #666;
    font-size: 0.95rem;
}

/* --- 前後記事ナビゲーションの装飾 --- */
.post-navigation {
    margin: 40px 0;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap; /* スマホで縦並びにする */
}

.nav-box {
    flex: 1;
    min-width: 280px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-box:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.nav-label {
    display: block;
    background: #f8f9fa;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #888;
    border-bottom: 1px solid #eee;
}

.nav-inner {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 12px;
}

.nav-thumbnail {
    width: 70px;
    height: 50px;
    flex-shrink: 0;
}

.nav-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.nav-title {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.next-box .nav-label { text-align: right; }
.next-box .nav-inner { flex-direction: row-reverse; text-align: right; }

/* --- 記事下WRITERボックスの装飾（サイト調和版） --- */
.writer-box {
    background-color: #4a8e9c; /* ヘッダーに近い落ち着いた青緑色に変更 */
    color: #fff;
    padding: 30px;
    margin-bottom: 30px; /* ナビゲーションとの間隔を少し広めに調整 */
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* ほんのり影をつけて立体感を出す */
}

.writer-box-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 25px;
    color: #fff !important;
    letter-spacing: 1px; /* 文字間を少し広げて洗練された印象に */
}

.writer-box-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.writer-box-left {
    flex-shrink: 0;
    text-align: center;
    width: 140px;
}

.writer-icon img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.8); /* 枠線を少し半透明にして馴染ませる */
    background: #fff;
    object-fit: cover;
}

.writer-name {
    margin-top: 12px;
    font-weight: bold;
    font-size: 1.1rem;
}

.writer-box-right {
    flex-grow: 1;
}

.writer-sns {
    margin-bottom: 15px;
}

.writer-sns a {
    color: #fff !important;
    font-size: 24px;
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

.writer-sns a:hover {
    opacity: 0.8; /* ホバー時に少し薄くする */
}

.writer-description {
    font-size: 0.95rem;
    line-height: 1.7; /* 行間を少し広げて読みやすく */
    margin-bottom: 25px;
    opacity: 0.95; /* 白文字が眩しすぎないように少しだけ抑える */
}

/* --- ボタンのデザインを白抜きに変更 --- */
.writer-profile-btn {
    display: inline-block;
    background-color: #fff; /* 背景を白にする */
    color: #4a8e9c !important; /* 文字色をボックスの背景色と同じにする */
    padding: 12px 30px;
    border-radius: 30px; /* 丸みをつけて親しみやすく */
    text-decoration: none !important;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid #fff; /* 枠線を追加 */
}

.writer-profile-btn:hover {
    background-color: #f0f0f0; /* ホバー時は少しグレーがかった白に */
    color: #4a8e9c !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* --- スマホ表示（幅600px以下）の時の微調整 --- */
@media screen and (max-width: 600px) {
    .writer-box {
        padding: 25px 20px;
    }
    
    .writer-box-content {
        flex-direction: column; /* 縦並びにする */
        align-items: center;    /* 中身を中央に寄せる */
        text-align: center;
    }

    .writer-box-left {
        width: 100% !important; /* 横幅をいっぱいにする */
        margin-bottom: 15px;
        display: flex;         /* ★写真と名前を中央に配置するために追加 */
        flex-direction: column;
        align-items: center;
    }

    .writer-icon {
        display: flex;         /* ★写真を確実に中央へ固定する */
        justify-content: center;
        width: 100%;
    }

    .writer-icon img {
        margin: 0 auto;        /* 左右の余白を自動にして中央へ */
    }

    .writer-box-right {
        width: 100%;
    }

    .writer-profile-btn {
        width: 90%;            /* スマホではボタンを少し大きくして押しやすく */
    }

    /* 記事内の見出し(h2)の調整 */
/* 1. 記事タイトル(h1)を一番小さくする */
    h1.entry-title {
        font-size: 1.5rem !important; /* 以前より大幅に下げました */
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    /* 2. 記事内の見出し(h2)の調整 */
    .entry-content h2 {
        font-size: 1.25rem !important; /* 1.4remからさらに縮小 */
        line-height: 1.4 !important;
        margin-bottom: 18px !important;
        padding: 8px 12px !important; /* パディングもさらに追い込み */
    }

    /* 3. 記事内の小見出し(h3)の調整 */
    .entry-content h3 {
        font-size: 1.1rem !important; /* 本文より少し大きい程度に調整 */
        margin-bottom: 12px !important;
    }

    /* 4. ライターボックスのタイトル */
    .writer-box-title {
        font-size: 1.05rem !important;
        margin-bottom: 15px !important;
    }
}

/* --- 目次の装飾 --- */
.toc-container {
    background-color: #f9fbfc; /* ごく薄い青の背景 */
    border: 1px solid #e1e8ed;
    padding: 25px;
    margin: 30px 0;
    border-radius: 4px;
}

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.toc-title {
    font-size: 1.5rem;
    color: #4a8e9c; /* 仁さんのテーマカラー */
    font-weight: bold;
}

#toc-toggle {
    background: #eee;
    border: none;
    padding: 5px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    letter-spacing: 1px;
    color: #333;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.toc-list a {
    text-decoration: none !important;
    color: #444;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}

.toc-list a:hover {
    color: #4a8e9c;
}

.toc-number {
    color: #4a8e9c;
    font-weight: bold;
    margin-right: 15px;
    font-size: 0.9rem;
    border-right: 1px solid #4a8e9c;
    padding-right: 10px;
}

/* --- 【最終結論】リスト内の強力な青緑を力でねじ伏せる --- */
.entry-content ul:not(.plain-list) li .red_text,
.entry-content ul:not(.plain-list) li strong.red_text,
.entry-content ul:not(.plain-list) li b.red_text {
    color: #ca1a4f !important;    /* 仁さんが指定した赤色を最優先に */
    font-weight: bold !important; 
    display: inline-block !important; 
    margin-bottom: 5px !important; 
    margin-top: 5px;
}

/* 管理画面で「Bボタン」を先に押してからクラスを適用した場合も赤を維持 */
.entry-content ul:not(.plain-list) li strong .red_text,
.entry-content ul:not(.plain-list) li b .red_text {
    color: #ca1a4f !important;
}