/* ==========================================
   【通常時】ヘッダー全体をスタイリッシュに引き締める
   ========================================== */
.header {
    position: relative;
    padding: 0 !important; /* 無駄な上下の隙間を排除 */
}

/* ドット絵の上の薄いスモークを均一に（重なり順を文字の「後ろ」に修正） */
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5) !important; /* スモークをほんの少しだけ濃く（0.45→0.5） */
    z-index: 1; /* 背景のすぐ上に配置 */
    display: block !important;
}

/* 文字やナビをスモークの「前面」に完全に出す */
.header-in, .navi {
    position: relative;
    z-index: 3 !important; /* z-indexを強めに指定してスモークより手前に引っ張り出す */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* タイトル周りの余白と、文字の視認性アップ（影を追加） */
.logo-header {
    padding: 30px 0 20px 0 !important; /* 上下に程よい余白を作ってスッキリ */
    background: transparent !important;
}

/* サイト名（ロゴ）の文字をクッキリ白くし、黒い影をつける */
.logo-header .site-name,
.logo-header .site-name a {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important; /* 文字の後ろに強い黒影を配置 */
    font-weight: bold !important;
}

/* キャッチフレーズ（上の小さい説明文）にも影をつけて読みやすく */
.logo-header .tagline {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* ==========================================
   【通常時＆追従時】メニューバーをスマートに配置
   ========================================== */
/* メニュー全体の高さを抑えてスマートな1本の帯にする */
.navi, 
.navi-fixed, 
.fixed-header {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

/* 通常時・追従時の中身の設定 */
.navi-in,
#navi-in,
.navi-fixed .navi-in {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* ボタンの塊：PCでは中央、スマホでは横スクロール */
.menu-header,
#menu-header,
.navi-fixed .menu-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    
    /* 【超重要】スマホで見切れないためのスクロール設定 */
    justify-content: flex-start !important; /* 左詰めに変更して見切れを防止 */
    overflow-x: auto !important;             /* はみ出た分を横スクロール可能に */
    white-space: nowrap !important;          /* 絶対に折り返さない */
    -webkit-overflow-scrolling: touch;       /* スマホでのスクロールを滑らかに */
}

/* 💻 PC画面（横幅が広いとき）だけ中央揃えにする */
@media screen and (min-width: 1024px) {
    .navi-in, #navi-in, .navi-fixed .navi-in,
    .menu-header, #menu-header, .navi-fixed .menu-header {
        justify-content: center !important; /* PCではど真ん中に配置 */
    }
}

/* ボタン1個ずつのデザイン（文字の上下余白を減らして帯を細くスマートに） */
.menu-header li,
.navi-fixed .menu-header li {
    float: none !important;
    display: inline-block !important;
    margin: 0 12px !important; /* ボタン同士の間隔 */
    flex-shrink: 0 !important;  /* スマホ画面でボタンが潰されるのを防ぐ */
}

.menu-header li a,
.navi-fixed .menu-header li a {
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 12px 10px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: block !important;
}


/* ==========================================
   📱 スマホ専用（画面幅480px以下）のレイアウト調整
   ========================================== */
@media screen and (max-width: 480px) {
    /* 【追加】新着記事リストの土台：回り込みをリセットして縦並びの準備 */
    .widget_recent_entries ul li,
    .widget_new_entries ul li,
    .new-entry-card-link {
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        padding-bottom: 12px !important;
        margin-bottom: 8px !important;
        clear: both !important;
        border-bottom: 1px dashed #e0e0e0; /* 記事ごとの区切り線（お好みで） */
    }

    /* 【追加】タイトル：右側の余白を潰し、横幅いっぱいに広げる */
    .widget_recent_entries ul li a,
    .widget_new_entries ul li a,
    .new-entry-card-title {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 4px !important;
        line-height: 1.4 !important;
    }

    /* 【追加】日付：右寄せの命令を破壊し、タイトルのすぐ下へ強制移動 */
    .widget_recent_entries ul li .post-date,
    .widget_new_entries ul li .post-date,
    .new-entry-card-info,
    .new-entry-date,
    .post-date {
        display: block !important;
        float: none !important;
        position: relative !important;
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        color: #888888 !important; /* 日付をスマートなグレーに */
    }
}
/* ==========================================
   【エントリーカード対応】日付を強制的にタイトルの下に配置
   ========================================== */
@media screen and (max-width: 480px) {
    /* 記事カードの中身（テキストエリア）を縦並びに強制固定 */
    .entry-card-content,
    .entry-recent-posts .entry-card-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* タイトルの順番を一番上に（右側の余白を消去） */
    .entry-card-title,
    .entry-recent-posts .entry-card-title {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    /* 日付やカテゴリーの塊を、タイトルのすぐ下に配置 */
    .entry-card-info,
    .entry-recent-posts .entry-card-info,
    .entry-card-meta {
        order: 2 !important;
        position: relative !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 日付の文字自体の右寄せ残像をリセット */
    .entry-card-info .post-date,
    .entry-card-info .post-update,
    .entry-card-meta .post-date {
        margin-right: 10px !important;
        float: none !important;
        display: inline-block !important;
    }
}
/* ==========================================
   【文字だけ新着リスト】右側の日付を強制的にタイトルの下へ移動
   ========================================== */
@media screen and (max-width: 480px) {
    /* リストの各行（土台）の高さ制限をなくし、中身を縦並びに強制変更 */
    .wp-block-latest-posts li,
    .widget_recent_entries ul li,
    .widget_new_entries ul li {
        display: flex !important;
        flex-direction: column !important; /* 上下に並べる */
        align-items: flex-start !important; /* 左揃えにする */
        height: auto !important;
        padding-bottom: 12px !important;
        position: relative !important;
    }

    /* タイトルの設定：右側の日付の進入を防ぎ、横幅いっぱいに広げる */
    .wp-block-latest-posts li a,
    .widget_recent_entries ul li a,
    .widget_new_entries ul li a {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 4px !important; /* タイトルと日付の間の隙間 */
        padding: 0 !important;
    }

    /* 右側に張り付いていた日付をリセットし、タイトルの真下に強制配置 */
    .wp-block-latest-posts li time,
    .wp-block-latest-posts li .wp-block-latest-posts__post-date,
    .widget_recent_entries ul li .post-date,
    .widget_new_entries ul li .post-date,
    .post-date {
        display: block !important;
        position: relative !important;
        float: none !important;
        text-align: left !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        color: #888888 !important; /* 読みやすいグレーに変更 */
    }
}