/*
Theme Name: cancer-center-hokuriku
Description: がん診療連携拠点病院のテーマです
Version: 1.0
*/

/* =========================================================
   1. 基本設定
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
    font-family: 'SystemSymbols';
    src: local('Meiryo'), local('Hiragino Sans'), local('sans-serif');
    unicode-range: 
        U+2000-2BFF, 
        U+2460-24FF, 
        U+3200-32FF, 
        U+3300-33FF; 
}
@font-face {
    font-family: 'CorporateLogo';
    src: url('./font/Corporate-Logo-Medium-ver3.woff2') format('woff2'),
         url('./font/Corporate-Logo-Medium-ver3.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'CorporateLogo';
    src: url('./font/Corporate-Logo-Bold-ver3.woff2') format('woff2'),
         url('./font/Corporate-Logo-Bold-ver3.woff') format('woff');
    font-weight: bold; font-style: normal; font-display: swap;
}

body {
    font-family: 'SystemSymbols','CorporateLogo', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: normal; color: #333; line-height: 1.6;
    display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1; }
ul { list-style: none; }
a { text-decoration: none; color: #4c4c4c; transition: color 0.3s ease; }
a:hover { color: #8dc21f; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
.is-bold { font-weight: bold !important; }
.pc-only { display: block; }
.mobile-only { display: none; }

/* =========================================================
   2. ヘッダー (PC基本)
   ========================================================= */
.site-header {
    background: #fff; width: 100%; border-top: 5px solid #8dc21f; padding-bottom: 5px;
}
.header-inner {
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 12px 20px 10px 0; max-width: 1200px; margin: 0 auto; width: 100%;
}
.site-title { font-size: 30px; color: #4c4c4c; line-height: 1.2; font-weight: normal; }
.site-title span { font-size: 12px; color: #8cc024; display: block; line-height: 1; }

.header-right { display: flex; flex-direction: column; align-items: flex-end; }
.header-search { margin-bottom: 8px; }
.header-search form { display: flex; }
.search-input {
    padding: 4px 12px; border: 1px solid #ccc; border-radius: 4px 0 0 4px;
    font-size: 13px; width: 200px; outline: none; font-family: inherit;
}
.search-submit {
    background-color: #8cc024; color: #fff; border: none; 
    padding: 6px 15px 2px; 
    border-radius: 0 4px 4px 0; cursor: pointer; font-size: 13px; font-family: inherit;
    transition: background-color 0.3s;
}
.search-submit:hover { background-color: #7ab01e; color: #fff; }

.header-sub-nav { display: flex; align-items: center; margin-bottom: -15px; }
.header-sub-nav a { 
    font-size: 18px; font-weight: normal; color: #333; display: inline-block; 
    padding: 3px 5px; margin-left: 15px; transition: color 0.3s;
}
.header-sub-nav a:hover { color: #8cc024; }

@media screen and (max-width: 1062px) {
    .header-sub-nav a { font-size: 14px; padding: 0 8px; }
}
@media screen and (max-width: 850px) {
    .header-sub-nav a { font-size: 12px; padding: 0 4px; }
}

/* =========================================================
   3. メインナビゲーション
   ========================================================= */
.main-nav { background: #fff; border-top: 1px solid #8dc21f; border-bottom: 1px solid #8dc21f; }
.main-nav-inner { display: flex; max-width: 1200px; margin: 0 auto; width: 100%; padding: 5px 0; }

.icon-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 10px 5px 8px;
    text-align: center; color: #333; background-color: #f4fae1; border-right: 5px solid #fff;
    transition: background-color 0.3s, transform 0.2s;
}
.icon-nav-item:last-child { border-right: none; }
.icon-nav-item:hover { background-color: #eaf5ce; transform: translateY(-2px); color: #333; }
.icon-nav-item span { font-size: 16px; line-height: 1.2; white-space: nowrap; }
.nav-icon { height: 60px; width: auto; margin-bottom: 8px; display: block; }

/* =========================================================
   4. ヒーローエリア
   ========================================================= */
.hero {
    background: #f6ffe4 url('img/top_hero_bg.png') no-repeat center center / cover; 
    max-width: 1200px; width: 100%; margin: 0 auto; 
    padding: 20px 100px; overflow: hidden;
}
.hero-inner { display: flex; justify-content: space-between; align-items: flex-end; }
.hero-content { flex: 0 1 auto; padding-bottom: 40px; }
.hero-catchphrase { font-size: 34px; color: #4c4c4c; line-height: 1.4; margin-bottom: 15px; }
.hero-subphrase { font-size: 13px; color: #8cc024; font-weight: bold; margin-bottom: 30px; line-height: 1.4; }

.btn-green { 
    display: inline-block; background: #8cc024; color: #fff; 
    padding: 17px 45px 11px; font-size: 18px; 
    border-radius: 3px; transition: 0.3s; 
}
.btn-green:hover { opacity: 0.8; color: #fff; }

.hero-image { flex: 1; text-align: right; line-height: 0; }
.hero-image img { width: auto; max-width: 100%; height: auto; display: inline-block; vertical-align: bottom; }

/* =========================================================
   5. お知らせ (トップページ用)
   ========================================================= */
.news-section { max-width: 800px; margin: 50px auto; padding: 0 20px; }
.news-section h2 { font-size: 24px; border-bottom: 2px solid #8cc024; padding-bottom: 10px; margin-bottom: 20px; }

.news-section ul { list-style: none; padding: 0; margin: 0; }
.news-section li { border-bottom: 1px dotted #ccc; }

.news-link {
    display: flex; align-items: flex-start; 
    padding: 10px 10px 5px; gap: 15px; 
    color: #4c4c4c; transition: 0.3s; border-radius: 4px;
}
.news-link:hover { background-color: #f4fae1; transform: translateX(5px); }

.news-date { 
    color: #666; font-size: 14px; display: flex; 
    align-items: center; flex-shrink: 0; margin-top: 5px;  
}
.news-date::after { 
    content: "｜"; color: #ccc; margin-left: 9px; margin-right: -6px; font-size: 12px; 
}

.news-category { 
    background: #8cc024; color: #fff; font-size: 15px; line-height: 1;
    padding: 6px 4px 0px; border-radius: 0; flex-shrink: 0; margin-top: 2px;  
}
.news-title { flex: 1; font-size: 16px; line-height: 1.6; margin-top: 2px; }

.btn-more { 
    display: block; width: 180px; text-align: center; margin: 30px auto; 
    background: #8cc024; color: #fff; padding: 10px 10px 14px; 
    font-size: 18px; border-radius: 3px; transition: 0.3s; 
}
.btn-more:hover { opacity: 0.8; color: #fff; }

/* =========================================================
   6. フッター
   ========================================================= */
.site-footer { width: 100%; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; text-align: left; }

.footer-nav { 
    background: #fff; border-top: 1px solid #8dc21f; margin-top: 70px; padding: 10px 0; width: 100%;
}
.home .footer-nav { margin-top: 0 !important; }

.footer-nav-list { display: flex; flex-wrap: wrap; justify-content: flex-start; font-size: 16px; }
.footer-nav-list + .footer-nav-list { margin-top: 4px; }
.footer-nav-list li { display: flex; align-items: center; }
.footer-nav-list li:not(:last-child)::after { content: "｜"; margin: 0 5px; color: #666; }
.footer-nav-list a { display: inline-block; padding: 2px 3px; transition: 0.3s; }

.footer-info-wrapper { background: #f6ffe4; width: 100%; }
.footer-info { padding-top: 25px; padding-bottom: 20px; }
.footer-info h3 { font-size: 30px; color: #8dc21f; margin-bottom: 5px; font-weight: normal; }
.footer-info p { line-height: 1.6; color: #4c4c4c; }
.footer-info h3 a { color: #8dc21f; text-decoration: none; transition: opacity 0.3s ease; }
.footer-info h3 a:hover { color: #8dc21f; opacity: 0.7; }

.copyright { background: #8cc024; color: #fff; text-align: center; padding: 12px 20px; font-size: 12px; }

.back-to-top {
    display: block; position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px;
    background-color: #8cc024; color: #fff; border: none; border-radius: 50%;
    font-size: 20px; line-height: 50px; text-align: center; cursor: pointer; z-index: 999;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: 0.3s; 
}
.back-to-top.show { opacity: 1 !important; visibility: visible !important; }

/* =========================================================
   7. 全体・ヘッダー メディアクエリ (1200px, 1024px, 768px)
   ========================================================= */
@media screen and (max-width: 1200px) {
    .header-inner { padding: 12px 20px 10px 20px; }
}

@media screen and (max-width: 1024px) {
    .site-title { font-size: 24px; } 
    .header-search { margin-bottom: 15px; }
    .header-sub-nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; margin-bottom: 0; }
    .header-sub-nav a { font-size: 16px; padding: 3px 5px; margin-left: 15px; white-space: nowrap; }
    .icon-nav-item { padding: 10px 2px 8px; }
    .nav-icon { height: 44px; margin-bottom: 7px; }
    .icon-nav-item span { font-size: 12px; white-space: normal; word-break: keep-all; line-height: 1.3; }
    .hero { padding: 20px 40px; }
}

@media screen and (max-width: 768px) {
    .pc-only { display: none !important; }
    .mobile-only { display: block !important; }
    .header-right { display: none !important; }
    body:not(.home) .site-header { border-bottom: 1px solid #8dc21f; }
    
    .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 997; opacity: 0; visibility: hidden; transition: 0.3s; }
    .drawer-overlay.is-open { opacity: 1; visibility: visible; }
    
    .header-inner { padding: 15px 20px 10px; align-items: flex-start; }
    .hamburger { 
        display: block; background: none; border: none; width: 30px; height: 24px; 
        position: relative; z-index: 1000; margin-top: 2px;
    }
    .hamburger span { display: block; position: absolute; width: 100%; height: 3px; background: #4c4c4c; transition: 0.3s; }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 10px; }
    .hamburger span:nth-child(3) { bottom: 0; }
    .hamburger.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    .main-nav {
        position: fixed; top: 0; right: 0; transform: translateX(100%); width: 85%; max-width: 320px; height: 100vh;
        background: #fff; padding: 60px 15px 20px; z-index: 998; border: none; overflow-y: auto; transition: transform 0.3s ease;
    }
    .main-nav.is-open { transform: translateX(0); }
    .main-nav-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .icon-nav-item { border-radius: 8px; border: none; padding: 15px 5px 13px; }
    .icon-nav-item span { font-size: 14px; white-space: normal; line-height: 1.3; }
    .nav-icon { height: 35px; margin-bottom: 7px; }

    .drawer-search form { display: flex; width: 100%; max-width: 150px; margin: 7px auto 20px 10px; }
    .drawer-search .search-submit { flex-shrink: 0; white-space: nowrap; padding-bottom: 4px; }
    
    .drawer-sub-nav { margin-top: 0 !important; margin-bottom: 20px !important; }
    .drawer-sub-nav a { display: block; padding: 12px 10px; font-size: 16px; border-bottom: 1px solid #eee; margin: 0 !important; }
    .header-search { margin-bottom: 0 !important; }

    .hero { padding: 30px 20px 20px; } 
    .hero-inner { flex-direction: column; align-items: center; } 
    .hero-content { padding-bottom: 25px; order: 1; text-align: center; } 
    .hero-catchphrase { font-size: 22px; margin-bottom: 5px; line-height: 1.3; }
    .hero-subphrase { margin-bottom: 20px; } 
    .hero-image { order: 2; width: 100%; max-width: 400px; margin-bottom: 0; text-align: center; } 
    
    .footer-nav { margin-top: 40px; } 
    .footer-info h3 { font-size: 24px; }
    .footer-nav-list { font-size: 14px; }

    .news-link { flex-wrap: wrap; gap: 8px 12px; }
    .news-title { flex: 0 0 100%; margin-top: 0; }
    .news-category { padding-bottom: 5px; }
    .btn-more { padding-bottom: 10px; }
}

/* =========================================================
   8. 下層ページ共通コンテナ（固定ページ・投稿ページ・個別記事）
   ========================================================= */
.page-container,
.post-container,
.single-container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.page-container,
.single-container {
    max-width: 1000px;
    margin: 40px auto 60px;
}

.post-container {
    max-width: 800px;
    margin: 50px auto;
}

/* ▼ 共通タイトル帯（固定ページ・個別カテゴリ帯） ▼ */
.page-title,
.single-page-header {
    background-color: #8cc024;
    color: #fff;
    font-size: 32px; 
    line-height: 1;
    padding: 20px 20px 14px;
    margin-bottom: 40px;
}

/* ▼ 記事タイトル ▼ */
.post-title {
    font-size: 26px;
    color: #4c4c4c;
    border-bottom: 2px solid #8cc024;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.single-title {
    color: #8cc024;
    font-size: 26px; 
    line-height: 1.4; 
    padding: 0 0 10px; 
    border-bottom: 1px solid #8cc024;
    margin-bottom: 30px;
    font-weight: normal; 
}

/* ▼ 投稿メタ情報 ▼ */
.post-meta {
    display: flex; gap: 15px; align-items: center; margin-bottom: 30px;
}
.post-date { color: #666; font-size: 14px; }
.post-category { background: #8cc024; color: #fff; font-size: 12px; padding: 4px 10px 2px; }

/* =========================================================
   9. 記事本文のデザイン
   ========================================================= */
.single-article,
.page-content,
.post-content,
.single-content {
    padding: 0 25px; 
}

.page-content,
.post-content,
.single-content {
    color: #4c4c4c;
    font-size: 18px; 
    line-height: 1.8;
}

.page-content p,
.post-content p,
.single-content p { 
    margin-bottom: 2em; 
}

/* 本文内の見出し */
.page-content h3,
.post-content h3,
.single-content h3 {
    color: #8cc024;
    font-size: 26px; 
    line-height: 1.4; 
    padding: 0 0 10px; 
    border-bottom: 1px solid #8cc024;
    margin-top: 60px; 
    margin-bottom: 30px;
    font-weight: normal; 
}
.page-content > h3:first-child,
.post-content > h3:first-child,
.single-content > h3:first-child {
    margin-top: 0; 
}

.page-content h4,
.post-content h4,
.single-content h4 {
    color: #8cc024;
    font-size: 22px; 
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 15px;
}

/* リスト・リンク */
.page-content ol,
.post-content ol,
.single-content ol { margin-bottom: 30px; padding-left: 1.5em; }
.page-content li,
.post-content li,
.single-content li { margin-bottom: 8px; }

.page-content ul:not([class]),
.post-content ul:not([class]),
.single-content ul:not([class]) { list-style: none; padding: 0; margin-bottom: 2em; }
.page-content ul:not([class]) > li,
.post-content ul:not([class]) > li,
.single-content ul:not([class]) > li { position: relative; padding-left: 1.2em; margin-bottom: 8px; }
.page-content ul:not([class]) > li::before,
.post-content ul:not([class]) > li::before,
.single-content ul:not([class]) > li::before { content: "・"; position: absolute; left: 0; top: 0; color: #4c4c4c; }

.page-content a,
.post-content a,
.single-content a { color: #4c4c4c; text-decoration: underline; text-decoration-color: #aaa; text-underline-offset: 3px; transition: color 0.3s, text-decoration-color 0.3s; }
body.category .page-content a{
    text-decoration: none !important;
}
.page-content a:hover,
.post-content a:hover,
.single-content a:hover { color: #8cc024; text-decoration-color: #8cc024; }

/* 画像 */
.page-content img,
.post-content img,
.single-content img { max-width: 100%; height: auto; display: block; margin-bottom: 30px; }
.page-content img:last-child,
.post-content img:last-child,
.single-content img:last-child { margin-bottom: 0; }

img.aligncenter, .aligncenter img, figure.aligncenter, .aligncenter, .wp-caption.aligncenter {
    display: block !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important;
}

/* =========================================================
   10. 下層ページ・記事本文用メディアクエリ
   ========================================================= */
@media screen and (max-width: 1024px) {
    .page-title,
    .single-page-header {
        font-size: 20px;
        padding: 14px 20px 10px;
    }
    .post-title,
    .single-title {
        font-size: 20px; 
    }
    .single-article, .single-nav {
        padding: 0 20px;
    }
}

@media screen and (max-width: 768px) {
    .page-content,
    .post-content,
    .single-content { padding: 0; font-size: 16px; }
    
    .page-content img,
    .post-content img,
    .single-content img { margin-bottom: 20px; }
    
    .page-title,
    .single-page-header { font-size: 24px; padding: 18px 15px 14px; margin-bottom: 30px; }
    
    .post-title,
    .single-title { font-size: 20px; line-height: 1.5; }
    
    .single-article, .single-nav { padding: 0 15px; }
    
    .page-content h3,
    .post-content h3,
    .single-content h3 { font-size: 20px; margin-top: 40px; }
    
    .page-content h4,
    .post-content h4,
    .single-content h4 { font-size: 18px; font-weight: normal; }
}

/* =========================================================
   11. 画像の特殊レイアウト（アピアランスケア等）
   ========================================================= */
.img-center { display: flex !important; justify-content: center !important; margin: 20px 0 40px !important; }
.img-center img { max-width: 600px !important; width: 100% !important; height: auto !important; }

.img-grid-3 { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; margin-bottom: 40px !important; width: 100% !important; }
.img-grid-3 > a, .img-grid-3 > p, .img-grid-3 > div, .img-grid-3 br { display: block !important; margin: 0 !important; flex: 0 0 calc(33.333% - 14px) !important; max-width: calc(33.333% - 14px) !important; }
.img-grid-3 br { display: none !important; }
.img-grid-3 img { width: 100% !important; height: auto !important; margin-bottom: 0 !important; display: block !important; }

.img-grid-2 { display: flex !important; flex-wrap: wrap !important; gap: 20px !important; margin-bottom: 40px !important; width: 100% !important; justify-content: center; }
.img-grid-2 > img, .img-grid-2 > a, .img-grid-2 > p { display: block !important; margin: 0 !important; flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; height: auto !important; }
.img-grid-2 br { display: none !important; }

@media screen and (max-width: 768px) {
    .img-grid-3 > a, .img-grid-3 > p, .img-grid-3 > div { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
    .img-grid-3 { gap: 15px !important; }
    
    .img-grid-2 { flex-direction: column !important; align-items: center !important; gap: 30px !important; }
    .img-grid-2 > img, .img-grid-2 > a, .img-grid-2 > p { flex: 0 0 100% !important; max-width: 400px !important; width: 100% !important; }
}

/* =========================================================
   12. 各種テーブル設定
   ========================================================= */
/* ▼ 緑枠の基本テーブル ▼ */
.table-green-info { width: 100%; border-collapse: collapse; margin-bottom: 40px; font-size: 18px; }
.table-green-info th, .table-green-info td { border: 1px solid #8cc024; padding: 20px 25px; vertical-align: middle; color: #4c4c4c; line-height: 1.6; }
.table-green-info th { background-color: #f6fceb; text-align: center; width: 25%; font-weight: normal; }
.table-green-info td { background-color: #fff; text-align: left; }

/* ▼ スケジュール用テーブル ▼ */
.table-scroll-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 40px; }
.table-schedule-green { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 16px; text-align: center; }
.table-schedule-green th, .table-schedule-green td { border: 1px solid #8cc024; padding: 15px 10px; vertical-align: middle; color: #4c4c4c; line-height: 1.5; }
.table-schedule-green th { background-color: #eef7d2; font-weight: normal; width: 16%; }
.table-schedule-green tr:first-child th:first-child { width: 10%; }
.table-schedule-green td { background-color: #fff; }

/* ▼ 項目一覧テーブル ▼ */
.table-green-category { width: 100%; border-collapse: collapse; margin-bottom: 40px; font-size: 18px; }
.table-green-category th, .table-green-category td { border: 1px solid #8cc024; padding: 20px 25px; vertical-align: middle; color: #4c4c4c; line-height: 1.6; }
.table-green-category thead th { background-color: #eef7d2; text-align: center; font-weight: normal; }
.table-green-category tbody th { background-color: #f6fceb; text-align: center; width: 25%; font-weight: normal; }
.table-green-category tbody td { background-color: #fff; text-align: left; }

@media screen and (max-width: 768px) {
    .table-green-info { font-size: 16px; }
    .table-green-info th, .table-green-info td { display: block; width: 100% !important; box-sizing: border-box; padding: 15px; }
    .table-green-info th { border-bottom: none; text-align: left; background-color: #f6fceb; }
    
    .table-green-category { font-size: 16px; }
    .table-green-category thead { display: none; }
    .table-green-category tbody th, .table-green-category tbody td { display: block; width: 100% !important; box-sizing: border-box; padding: 15px; }
    .table-green-category tbody th { border-bottom: none; text-align: left; }
}

/* =========================================================
   13. Q&A セクション
   ========================================================= */
.qa-wrapper { margin-top: 30px; margin-bottom: 50px; }
.qa-item { margin-bottom: 45px; }
.qa-box { display: flex; align-items: flex-start; gap: 18px; }
.qa-q { margin-bottom: 12px; }
.qa-icon { width: 40px !important; height: 40px !important; flex-shrink: 0; margin-bottom: 0 !important; }
.qa-text-q { color: #8cc024; font-size: 22px; font-weight: normal; line-height: 1.5; padding-top: 3px; }
.qa-text-a { color: #4c4c4c; font-size: 18px; line-height: 1.8; }
.qa-text-a p { margin-bottom: 1em; }
.qa-text-a p:last-child { margin-bottom: 0; }

@media screen and (max-width: 768px) {
    .qa-item { margin-bottom: 35px; }
    .qa-box { gap: 12px; }
    .qa-icon { width: 32px !important; height: 32px !important; }
    .qa-text-q { font-size: 18px; padding-top: 2px; }
    .qa-text-a { font-size: 16px; }
}

/* =========================================================
   14. お知らせカテゴリページ用 (category-news.php)
   ========================================================= */
.news-category-section { margin-bottom: 70px; }
.news-category-title { color: #8cc024; font-size: 24px; font-weight: normal; border-bottom: 2px solid #8cc024; padding-bottom: 10px; margin-bottom: 20px; margin-top: 0; }
.news-category-section ul { list-style: none; padding: 0; margin: 0; }
.news-category-section li { border-bottom: 1px dotted #ccc; }

@media screen and (max-width: 768px) {
    .news-category-title { font-size: 20px; }
    .news-category-section { margin-bottom: 50px; }
    .news-category-section .btn-more { width: 100%; box-sizing: border-box; }
}

/* =========================================================
   15. ページネーション・個別記事前後リンク
   ========================================================= */
.pagination-wrapper { margin: 60px auto 40px; text-align: center; }
.pagination-wrapper .screen-reader-text { display: none; }
.pagination-wrapper .nav-links { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagination-wrapper .page-numbers { display: inline-block; min-width: 44px; padding: 14px 15px 6px; background-color: #8cc024; color: #fff; font-size: 16px; font-weight: normal; text-decoration: none; border: 1px solid #8cc024; border-radius: 0; transition: all 0.3s ease; box-sizing: border-box; line-height: 1.2; }
.pagination-wrapper .page-numbers.dots { border: none; background: transparent; color: #4c4c4c; min-width: auto; padding: 10px 5px; }
a.page-numbers:hover { background-color: #fff; color: #8cc024; }
.pagination-wrapper .page-numbers.current { background-color: #fff; color: #8cc024; border: 1px solid #8cc024; cursor: default; }
.pagination-wrapper .prev, .pagination-wrapper .next { min-width: 80px; }

.single-nav { display: flex; justify-content: space-between; gap: 30px; margin-top: 60px; padding: 30px 25px 0; border-top: 1px dotted #ccc; font-size: 14px; }
.nav-previous, .nav-next { width: 50%; }
.nav-previous { text-align: left; }
.nav-next { text-align: right; }
.single-nav a { display: inline-block; color: #4c4c4c; text-decoration: none; line-height: 1.6; transition: color 0.3s ease; }
.single-nav a:hover { color: #8cc024; }

@media screen and (max-width: 1024px) {
    .single-nav { padding: 30px 20px 0; }
}
@media screen and (max-width: 768px) {
    .pagination-wrapper .nav-links { gap: 6px; }
    .pagination-wrapper .page-numbers { min-width: 40px; padding: 12px 10px 4px; font-size: 14px; border-radius: 0; }
    .pagination-wrapper .prev, .pagination-wrapper .next { min-width: 60px; }
    
    .single-nav { flex-direction: column; gap: 20px; padding: 30px 15px 0; }
    .nav-previous, .nav-next { width: 100%; text-align: left; }
}

/* =========================================================
   16. 関連リンクバナーセクション
   ========================================================= */
.news-section, .btn-more, #main-content { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.banner-section { max-width: 800px !important; width: 100% !important; margin: 60px auto 40px !important; padding: 0 !important; line-height: 0 !important; }
.banner-wrapper { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
.banner-item { width: 32% !important; flex: 0 0 32% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; }
.banner-item a { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; font-size: 0 !important; transition: opacity 0.3s ease !important; }
.banner-item a:hover { opacity: 0.7 !important; }
.banner-item img { display: block !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; vertical-align: bottom !important; }

@media screen and (max-width: 768px) {
    .banner-section { margin: 30px auto 40px !important; padding: 0 20px !important; }
    .banner-wrapper { flex-direction: column !important; gap: 15px !important; align-items: center !important; }
    .banner-item { width: 100% !important; max-width: 280px !important; }
.btn-more { padding-bottom: 7px !important; }
}