<style>
    /* --- 全体・ヘッダーの基本設定 --- */
    body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; margin: 0; background-color: #f9fbf9; color: #333; }
    
    header {
        background-color: #fff;
        padding: 20px;
        border-bottom: 1px solid #eee;
        display: flex; 
        flex-direction: column; /* PCでは縦に（タイトルとメニューを分ける） */
        justify-content: center;
        align-items: center;
        position: relative;
    }

    header h1 {
        margin: 0;
        font-size: 1.6rem;
        font-weight: normal;
        letter-spacing: 0.15em;
    }

    /* --- PCナビゲーション（横並び） --- */
    nav { margin-top: 15px; }
    nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 25px;
    }

    /* --- メインビジュアル --- */
    .main-visual { position: relative; width: 100%; overflow: hidden; }
    .mv-image img { width: 100%; height: auto; display: block; }
    .mv-content {
        position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);
        text-align: center; width: 85%; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .mv-title { font-size: 2.2rem; margin: 0; font-weight: normal; letter-spacing: 0.2em; }
    .mv-sub { font-size: 1rem; line-height: 1.8; margin-top: 15px; }

    /* --- スマホ用ハンバーガーボタン --- */
    .menu-btn {
        display: none; 
        position: fixed; top: 15px; right: 15px;
        width: 45px; height: 45px; background: rgba(255,255,255,0.9);
        border-radius: 50%; border: 1px solid #eee;
        cursor: pointer; z-index: 101;
        flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    }
    .menu-btn span { display: block; width: 20px; height: 2px; background: #556b2f; transition: 0.3s; }

    /* --- カードデザイン --- */
    .card-link { text-decoration: none; color: inherit; display: block; }
    .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 40px 20px; max-width: 1200px; margin: 0 auto; }
    .post-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    .post-thumb img { width: 100%; height: 200px; object-fit: cover; }
    .post-meta { padding: 15px; text-align: center; font-size: 0.9rem; color: #556b2f; }

    /* --- スマホ表示の切り替え (768px以下) --- */
    .sp-only { display: none; }

    @media (max-width: 768px) {
        .pc-only { display: none; }
        .sp-only { display: block; }
        
        /* タイトル左、ボタン右へ強制分離 */
        header, .site-header {
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-between !important; 
            align-items: center !important;
            padding: 10px 20px !important;
            height: 70px !important;
            text-align: left !important;
        }
        header h1, .logo {
            font-size: 1.1rem !important;
            margin: 0 !important;
            width: auto !important;
        }
        .menu-btn { 
            display: flex !important; 
            position: static !important; /* 文字との重なりを物理的に防ぐ */
            margin-left: auto !important; 
        }

        /* スマホ用メニューのスライド設定 */
        nav {
            position: fixed; top: 0; right: -100%;
            width: 75%; height: 100vh; background: rgba(255,255,255,0.98);
            margin: 0; z-index: 100; transition: 0.4s;
        }
        nav.open { right: 0; }
        nav ul { flex-direction: column; height: 100%; justify-content: center; align-items: center; gap: 35px; }
        
        .mv-title { font-size: 1.5rem; }
        .mv-sub { font-size: 0.85rem; }
    }
</style>