* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', 'Hiragino Sans', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    max-width: 980px;
    margin: 0 auto;
}
a {
    color: #0099cc;
}   

/* ヘッダー */
.header {
    background-color: #fff;
    padding: 0;
    margin: 0;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.seo-title {
  font-size: 6px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  line-height: 1;
}

.header-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    margin: 0 auto;
    height: 140px;
}

.header-left {
    background-color: #0099cc;
    color: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-left h1 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #ffffff;
    font-weight: bold;
}
.header-left h1.seo-title {
    font-size: 8px;       /* 好きなサイズに */
    line-height: 1.2;
    color: #ffffff;       /* 必要なら同じ色 */
    margin: 0 0 4px 0;    /* h1 と h1 の間隔調整 */
    font-weight: normal;  /* デザインに合わせて */
    opacity: 0.8;         /* 少し薄くするのもOK */
}
.header-left p {
    font-size: 11px;
    line-height: 1.4;
    color: #ffffff;
    margin-bottom: 5px;
}

.header-image {
    background-color: #999;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    overflow: hidden;
}

.header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ナビゲーション（スクショ準拠に調整） */
.navigation {
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6;
    padding: 0;
    /* ヘッダーに近づけるが重なりすぎない程度に */
    margin: -6px auto 12px;
    max-width: 980px;
    position: relative;
    z-index: 2;
}

.navigation ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 10px; /* ページ内の余白と揃える */
    padding: 6px 0; /* 上下の余白は小さめ */
    gap: 8px; /* ボタン間の隙間を控えめに */
    align-items: center;
    justify-content: flex-start;
}

.navigation li {
    flex: 0 0 auto; /* ボタンは内容幅に合わせる */
}

.navigation a {
    display: inline-block;
    padding: 6px 12px; /* スクショの細めのボタン高さ */
    text-decoration: none;
    color: #0099cc; /* 元の青色に合わせる */
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #dcdcdc; /* 細い外枠 */
    background-color: #ffffff; /* ボタンは白 */
    border-radius: 2px; /* 角はわずかに丸める */
}

.navigation a:hover,
.navigation a.active {
    background-color: #f7f7f7;
    border-color: #cfcfcf;
}

/* コンテンツラッパー（中央配置） */
.content-wrapper {
    max-width: 980px;


}

/* メインコンテンツ（980px、内部に左広告を配置） */
.main-content {
    width: 100%;
    margin: 0;
}

/* メイン内の 2 列レイアウト（コンテンツ | 広告） */
.main-inner {
    display: flex;
    gap: 10px;
}

.sidebar {
    display: none; /* デフォルトは非表示（モバイル） */
}

.sidebar-left {
    width: 300px;
    min-width: 300px;
    flex-shrink: 0;
    flex-basis: 300px;
    order: 2;  /* 右側に配置 */
}

.sidebar-right {
    display: none !important;  /* 右サイドバーは使用しない */
}

/* PC表示（1000px以上）：左広告を表示 */
@media (min-width: 1000px) {
    .sidebar-left {
        display: block;
    }
}

.main-body {
    flex: 1;
    min-width: 0;
    order: 1;  /* 左側に配置 */
}

/* コンテンツグリッド - 行ベース（各行は左画像 + 右説明） */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列でカードを配置 */
    gap: 15px;
    margin-bottom: 30px;
}

/* 各カード */
.card {
    display: flex;
    gap: 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 12px;
    align-items: flex-start;
    min-height: 110px;
}

.card .thumb {
    width: 150px;
    height: 150px;
    background-color: #e9e9e9;
    overflow: hidden;
    flex: 0 0 150px;
}

.card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card .meta {
    flex: 1 1 auto;
}

.card .meta h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: #0099cc;
}

.card .meta p {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

.grid-item {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    padding: 15px;
    min-height: 80px;
    overflow: hidden;
}

.item-image { /* 旧来の画像要素は非表示にしてレイアウト崩れを防ぐ */
    display: block;
}

.grid-item .item-image {
    background-color: #e9e9e9;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 120px;
}

.grid-item .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grid-item .item-text {
    background-color: #f4f4f4;
    padding: 12px;
    min-height: 120px; /* 画像と高さを揃えて左右で揃う見た目に */
}

/* シンプルなカテゴリラベル */
.item-label {
    display: inline-block;
    background-color: #0099cc;
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.item-text {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #f9f9f9;
}

.item-text h3 {
    font-size: 13px;
    margin-bottom: 8px;
    color: #333;
    font-weight: bold;
}

.item-text a {
    color: #0099cc;
    text-decoration: none;
}

.item-text a:hover {
    text-decoration: underline;
}

.item-text p {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* 情報セクション */
.info-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 15px;
    margin-bottom: 30px;
}

.info-left {
    background-color: white;
    border: 1px solid #ddd;
    overflow: hidden;
}

.info-left h3 {
    background-color: #ffff00;
    color: #000;
    padding: 10px 15px;
    margin: 0;
    font-size: 13px;
    font-weight: bold;
}

.info-left ul {
    list-style: none;
    padding: 15px;
    margin: 0;
}

.info-left li {
    margin-bottom: 8px;
    font-size: 12px;
}

.info-left a {
    color: #0099cc;
    text-decoration: none;
}

.info-left a:hover {
    text-decoration: underline;
}

.info-right {
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
}

.info-right h3 {
    color: #0099cc;
    font-size: 13px;
    margin-bottom: 12px;
    text-align: center;
    font-weight: bold;
}

.info-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-right li {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 8px;
    color: #666;
}

.info-right li:last-child {
    margin-bottom: 0;
}

.info-right a {
    color: #0099cc;
    text-decoration: none;
}

.info-right a:hover {
    text-decoration: underline;
}

/* ニュースセクション（info-right 内に統合） */
.news-section h3 {
    color: #0099cc;
    font-size: 13px;
    margin: 0 0 12px 0;
    text-align: center;
    font-weight: bold;
}

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

.news-item {
    padding: 8px 6px;
    border-bottom: 1px solid #f4f4f4;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.news-item:last-child {
    border-bottom: none;
}

.news-date {
    color: #999;
    font-size: 12px;
    min-width: 90px;
    flex: 0 0 90px;
}

.news-title {
    color: #0099cc;
    text-decoration: none;
}

.news-title:hover {
    text-decoration: underline;
}

/* バナーセクション */
.banner-section {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* フッター */
.footer {
    background-color: #f0f0f0;
    border-top: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    font-size: 11px;
    color: #666;
    margin-top: 30px;
}

.footer-links {
    margin-bottom: 10px;
    font-size: 12px;
    color: #0099cc;
}

.footer-small {
    margin-bottom: 15px;
    font-size: 11px;
}

.footer a {
    color: #0099cc;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.return-to-top {
    display: inline-block;
    background-color: #0099cc;
    color: white;
    padding: 8px 15px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
}

.return-to-top:hover {
    background-color: #006699;
}

/* レスポンシブ */
@media (max-width: 999px) {
    /* タブレット・モバイル：左広告を非表示、コンテンツのみ */
    .main-inner {
        flex-direction: column;
    }
    
    .sidebar-left {
        display: none !important;
    }
    
    .main-body {
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* ヘッダー：スマホはテキストと画像が重なり、画像は半透明オーバーレイ */
    .header-content {
        grid-template-columns: 1fr;
        height: auto;
        position: relative;
    }

    .header-left {
        background-color: rgba(0, 153, 204, 0.8);
        color: white;
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 120px;
        position: relative;
        z-index: 2;
    }

    .header-left h1 {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .header-left p {
        font-size: 10px;
        line-height: 1.3;
        margin-bottom: 3px;
    }

    .header-image {
        /* 画像をテキストの背後にオーバーレイ */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 120px;
        z-index: 1;
        overflow: hidden;
        opacity: 0.9;
    }

    .header-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* ナビ：縦画面でもできるだけ横並びを保ち、足りなければ折り返す */
    .navigation ul {
        display: flex;
        flex-direction: row; /* 横並びを基本に */
        flex-wrap: wrap; /* 足りない分は次の行へ */
        gap: 8px;
        justify-content: center; /* 中央に寄せるとスマホで見やすい */
        padding: 8px 10px;
        margin: 0 8px;
    }

    .navigation li {
        border-right: none;
        border-bottom: none;
        flex: 0 0 auto; /* ボタンは内容幅に合わせる */
    }

    .navigation a {
        padding: 6px 10px; /* モバイルでは少し小さめ */
        font-size: 13px;
        display: inline-block;
    }

    /* メイン列の幅を1列にしてカード等を縦積みに */
    .content-grid {
        grid-template-columns: 1fr; /* スマホでは1列 */
        gap: 12px;
    }

    .card {
        flex-direction: row; /* 画像は左、説明は右で横並びを維持 */
        min-height: auto;
    }

    .card .thumb {
        width: 80px;
        height: 80px;
        flex: 0 0 80px;
    }

    .info-section {
        grid-template-columns: 1fr;
    }

    .banner-section {
        flex-direction: column;
    }

    /* スマホ：バナーを縦並びにして中央寄せにする */
    .banner-section {
        flex-direction: column;
        align-items: center; /* 横方向に中央寄せ */
        justify-content: center; /* 必要に応じて縦方向も中央寄せ */
        gap: 12px;
    }

    .banner {
        width: auto; /* コンテンツ幅に合わせる */
        max-width: 92%; /* 画面幅に対して余白を残す */
        display: flex;
        justify-content: center; /* 中のリンク/画像を中央寄せ */
        align-items: center;
    }

    /* バナー内の画像は画面幅に合わせて縮小、中央寄せ */
    .banner img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}