/*
Theme Name: My Custom Site
Author: Your Name
Description: ゼロから作る独自のテーマ
Version: 1.0
*/
/* --- ヘッダー全体のレイアウト --- */
.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    position: fixed; /* 画面上に固定 */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-logo a {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

/* --- ハンバーガーボタンのデザイン --- */
.menu-trigger {
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002; /* メニューより上に表示 */
}

.menu-trigger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background: #333; /* 三本線の色 */
    transition: all 0.4s;
}

/* 三本線の配置 */
.menu-trigger span:nth-child(1) { top: 0; }
.menu-trigger span:nth-child(2) { top: 11px; }
.menu-trigger span:nth-child(3) { bottom: 0; }

/* ボタンが押された時（×印になる） */
.menu-trigger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.menu-trigger.is-active span:nth-child(2) { opacity: 0; }
.menu-trigger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* --- ナビゲーションメニューの中身 --- */
.site-nav {
    position: fixed;
    top: 0;
    right: -100%; /* 最初は画面の外に隠す */
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    z-index: 1001;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ボタンが押された時（メニューが出る） */
.site-nav.is-active {
    right: 0;
}

.site-nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.site-nav ul li {
    margin: 20px 0;
}

.site-nav ul li a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-weight: bold;
}

/* メインコンテンツがヘッダーに被らないように調整 */
body {
    padding-top: 70px; /* ヘッダーの高さ分だけ下げる */
}
/* WordPressが書き出すulのスタイルを整える */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-list li {
    margin: 20px 0;
}

.nav-list li a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-weight: bold;
}
/* ロゴ画像のサイズを強制的に指定 */
.site-header .site-logo a img {
    width: 120px !important; /* 横幅を200pxに固定 */
    height: auto !important;  /* 高さは自動調整 */
    max-width: 100%;         /* スマホではみ出さないように */
}

/* ついでにロゴの周りの余白もリセット */
.custom-logo-link {
    padding: 0 !important;
    margin: 0 !important;
}
/* --- ①と②：左右の端に寄せる --- */
.header-inner {
    display: flex;
    justify-content: space-between; /* ロゴとボタンを両端に離す */
    align-items: center;
    padding: 10px 4%;       /* 左右に 4% の余白をあけて、端に寄せる */
    max-width: 100% !important; /* 横幅の制限（1200pxなど）を解除する */
    width: 100%;
    box-sizing: border-box;
}

/* --- ③：ヘッダーの下に隙間を作る --- */
body {
    /* 現在のヘッダーの高さに合わせて 120px ほど押し下げます */
    /* これで「最新記事一覧」が隠れなくなります */
    padding-top: 120px !important; 
}

/* ついでに：ロゴ画像を少し小さくしてヘッダーをスリムにする場合 */
.site-logo img {
    height: 60px !important; /* 高さを指定してスッキリさせます */
    width: auto !important;
}
/* 全体コンテナ */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.section-title {
    text-align: center;
    color: #8b4513; /* 茶色系 */
    font-size: 1.2rem;
    margin: 40px 0 20px;
}

/* スライダー部分 */
.splide__slide img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}
.slide-info {
    text-align: center;
    padding: 15px;
}

/* ② 2カラム記事リスト（CSS Grid） */
.post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列にする */
    gap: 20px;
}

.post-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.post-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-content {
    padding: 15px;
    text-align: center;
}

/* スライダー全体のコンテナを中央寄せにする */
.n2-section-smartslider {
    margin: 20px auto !important;
    max-width: 1100px; /* サイトの他のコンテンツと幅を合わせる */
    border-radius: 10px; /* 角を少し丸くすると今どきです */
    overflow: hidden;
}
/* 最新記事一覧のセクションに上の余白を作る */
.post-list-section {
    margin-top: 50px;
    padding: 0 20px;
}

/* --- C：全体デザインの調整 --- */
body {
    background-color: #f9f9f9; /* 薄いグレーで清潔感を */
    color: #333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.8;
}

/* メインカラー：信頼感のあるネイビー */
h2.section-title {
    font-size: 1.4rem;
    color: #2c3e50; 
    border-bottom: 2px solid #2c3e50;
    display: inline-block;
    margin-bottom: 20px;
    padding-bottom: 5px;
}

/* --- A：2カラム表示（スマホでも維持） --- */
.post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* スマホでもPCでも2列 */
    gap: 15px; /* アイテム間の隙間 */
    padding: 10px;
}

.post-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.2s;
}

.post-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.post-img img {
    width: 100%;
    height: 150px; /* 高さを揃える */
    object-fit: cover;
}

.post-content {
    padding: 10px;
}

.post-content h3 {
    font-size: 0.95rem;
    margin: 0;
    color: #333;
    /* 2行目以降を三点リーダーにする設定 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}