/* === Reset & Basic Styles === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 汎用クラス
------------------------------------------------------------------- */
.mt_00 {margin-top: 0 !important; }
.mt_10 {margin-top: 1em !important; }
.mt_20 {margin-top: 2em !important; }
.mt_30 {margin-top: 3em !important; }
.mr_00 {margin-right: 0 !important; }
.mr_10 {margin-right: 1em !important; }
.mr_20 {margin-right: 2em !important; }
.mr_30 {margin-right: 3em !important; }
.mb_00 {margin-bottom: 0em !important; }
.mb_10 {margin-bottom: 1em !important; }
.mb_20 {margin-bottom: 2em !important; }
.mb_30 {margin-bottom: 3em !important; }
.ml_00 {margin-left: 0 !important; }
.ml_10 {margin-left: 1em !important; }
.ml_20 {margin-left: 2em !important; }
.ml_30 {margin-left: 3em !important; }

._14 {font-size:1.4em!important;}
._15{font-size:1.5em!important;}
._16{font-size:1.6em!important;}
._x2{font-size:200%!important;}

.red {color: red!important;}
.blue{color:#009cdc!important;}
.black{color:#000!important;}
.underLine{text-decoration: underline;}
.fz_100 {font-size: 100% !important;}
.fz_p {font-size: 1.6em !important;}
.left {text-align: left !important;}
.right {text-align: right !important;}
.center {text-align: center !important;}
.indent_00 {text-indent: 0 !important;}
.indmn_00 {text-indent: 0!important;margin-left: 0!important;}
.dot{font-feature-settings: normal!important;}
._bl{display:block!important;}

table.td_left td{text-align: left !important;}
table.td_right td{text-align: right !important;}
table.td_center td{text-align: center !important;}
table.td_w2 td{width : calc(100% / 2)!important;}
table.td_w3 td{width : calc(100% / 3)!important;}
table.td_w4 td{width : calc(100% / 4)!important;}
table.td_w5 td{width : calc(100% / 5)!important;}

table.th_left th{text-align: left !important;}
table.th_right th{text-align: right !important;}
table.th_center th{text-align: center !important;}
table.th_w2 th{width : calc(100% / 2)!important;}
table.th_w3 th{width : calc(100% / 3)!important;}
table.th_w4 th{width : calc(100% / 4)!important;}
table.th_w5 th{width : calc(100% / 5)!important;}

@media screen and (min-width: 768px) {
.pc-none {display: none!important}
}
@media screen and (max-width: 767px) {
.sp-none {display: none!important;}
}

/* Body
------------------------------------------------------------------ */
body {
    font-family: 'Zen Maru Gothic', serif;
    font-weight: 400;
    line-height: 1.7;
    color: #333; /* 基本テキスト色 */
    margin: 0;
    display: flex;
    flex-direction: column; /* ヘッダーとメインエリアを縦に並べる */
    height: 100vh; /* 画面の高さいっぱいに広げる */
    overflow: hidden; /* body自体はスクロールさせない */
    background-color: #FFFFFF;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit; /* 基本は親の色を継承 */
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px; /* ☆★デザインカンプに合わせて調整★☆ */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* === Section Title General Style === */
.section-title {
    font-size: 2.0rem; /* ☆★調整★☆ */
    font-weight: 700;
    color: #4A4A4A; /* ☆★調整★☆ */
    text-align: center;
    margin-bottom: 40px; /* ☆★調整★☆ */
    position: relative; /* アクセント用 */
    padding: 0 10px; /* 左右に少しスペース */
    display: block; /* 中央寄せのため */
    font-weight: 400;
    font-style: normal;

}

.title-text {
    display: inline-block; /* テキストの幅に合わせる */
    position: relative; /* アクセントの基準位置 */
    padding: 20px; /* ☆★アクセント用の左右パディング調整 (以前の10pxより少し広げる)★☆ */

}

.title-text::before,
.title-text::after {
    content: '';
    display: inline-block;
    width: 10px; /* ☆★アクセントのサイズ調整★☆ */
    height: 10px; /* ☆★アクセントのサイズ調整★☆ */
    background-color: #fdcf2b; /* ☆★アクセントの色調整★☆ */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px; /* ☆★アクセントの角丸調整★☆ */
}
.title-text::before { left: 0; }
.title-text::after { right: 0; }


/* === Header === */
.site-header {
    padding: 0; /* パディングはヘッダーコンテナで設定 */
    color: #333; /* テキスト色は黒系に */
    margin: 20px auto; /* 上に20px、左右にautoで中央寄せ */
    flex-shrink: 0; /* ヘッダーが高さを維持し、縮まないようにする */
    width: 100%;
    max-width: 1100px; /* ☆★.container と同じ最大幅に合わせる★☆ */
    border-radius: 50px; /* ☆★非常に大きな角丸でカプセル型に★☆ */
    background-color: #fff79a;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* ★★★初期の影★★★ */
}
/* ヘッダー内のコンテナ (ヘッダー専用のパディングとスタイル) */
.header-container-floating {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px; /* ☆★ヘッダー内部の上下左右パディング調整★☆ */
    width: 100%; /* 親の幅に合わせる */
    max-width: 100%; /* 親の幅に合わせる */
    margin: 0; /* 中央寄せは親の .site-header が担当 */
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* ハンバーガーボタンの絶対位置基準用 */
}
.header-logo {
    display: flex;
    align-items: center;
}
.header-logo-text a {
    font-size: 1.5rem; /* ☆★ロゴテキストのサイズ調整★☆ */
    font-weight: 900; /* ☆★太字★☆ */
    color: #333; /* ☆★ロゴテキストの色調整★☆ */
    text-decoration: none;
    letter-spacing: 1px; /* 文字間 */
}
.header-logo img {
    max-height: 60px; /* ☆★ロゴ高さ調整★☆ */
    margin-right: 10px;
}
.site-titles .union-name {
    font-size: 0.9rem; /* ☆★調整★☆ */
    font-weight: 500;
}
.site-titles .publication-name {
    font-size: 1.5rem; /* ☆★調整★☆ */
    font-weight: 700;
}

/* === Global Navigation (Desktop) === */
.global-nav {
    display: block; /* ★★★PC表示ではデフォルトで非表示★★★ */
}
.global-nav ul {
    display: flex;
    gap: 20px; /* ☆★ナビリンク間の隙間調整★☆ */
}
.global-nav li a {
    color: #555; /* ☆★ナビリンクの色調整★☆ */
    font-size: 0.9rem; /* ☆★調整★☆ */
    font-weight: 500;
    padding-bottom: 0; /* 下線は不要に */
    border-bottom: none; /* 下線は不要に */
}
.global-nav li a:hover {
    color: #000; /* ☆★ホバー時の色調整★☆ */
    border-bottom-color: transparent; /* 下線は不要 */
}

/* === Hamburger Button (Initially Hidden for Desktop) === */
.hamburger-button {
    display: none; /* ★★★PC表示ではデフォルトで非表示★★★ */
    background: none; border: none; cursor: pointer; padding: 0;
    width: 30px; height: 22px;
    position: absolute; /* ★★★ヘッダーコンテナの右端に配置★★★ */
    right: 20px; /* ☆★右からの位置調整★☆ */
    top: 50%;   /* ☆★上下中央揃え★☆ */
    transform: translateY(-50%); /* ☆★上下中央揃え★☆ */
    z-index: 1100;
}
.hamburger-button span {
    display: block;
    width: 100%;
    height: 3px; /* ☆★線の太さ調整★☆ */
    background-color: #333; /* ☆★線の色調整★☆ */
    border-radius: 3px;
    position: absolute;
    left: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.hamburger-button span:nth-child(1) { top: 0; }
.hamburger-button span:nth-child(2) { top: calc(50% - 1.5px); /* 線の中央 */ }
.hamburger-button span:nth-child(3) { bottom: 0; /* top: 100%; transform: translateY(-100%); だと隙間調整が難しいのでbottomで */ }

/* Hamburger Active State (X shape) - when header has .menu-open */
.site-header.menu-open .hamburger-button span:nth-child(1) {
    top: calc(50% - 1.5px); /* 線の中央に移動 */
    transform: rotate(45deg);
}
.site-header.menu-open .hamburger-button span:nth-child(2) {
    opacity: 0; /* 中央の線を非表示 */
}
.site-header.menu-open .hamburger-button span:nth-child(3) {
    top: calc(50% - 1.5px); /* 線の中央に移動 */
    transform: rotate(-45deg);
}

/* === Main Content === */
.main-content-area {
    flex-grow: 1; /* 残りの高さをすべて埋める */
    overflow-y: auto; /* ★このエリアだけを縦方向にスクロールさせる */
    padding-top: 20px; /* スクロール開始位置の調整 */
    border-top: 1px solid #E0E0E0;
}

.site-main {
    padding-top: 0;
}

/* === Tag Section === */
.tag-section {
    background-color: #FFFFFF;
    padding: 20px 0; /* ☆★調整★☆ */
    border-bottom: 1px solid #E0E0E0; /* 区切り線 */
}
.tag-section ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* ☆★タグ間の隙間調整★☆ */
}
.tag-section li a {
    display: inline-block;
    padding: 8px 18px; /* ☆★タグのパディング調整★☆ */
    border: 1px solid #75B7D1; /* ☆★枠線色調整★☆ */
    color: #75B7D1; /* ☆★文字色調整★☆ */
    border-radius: 20px; /* ☆★角丸調整★☆ */
    font-size: 0.9rem; /* ☆★調整★☆ */
    transition: background-color 0.3s, color 0.3s;
}
.tag-section li a:hover {
    background-color: #75B7D1;
    color: #FFFFFF;
}

/* === Main Visual === */
.main-visual {
    padding: 60px 0; /* ☆★調整★☆ */
}
.main-visual .container {
    position: relative;
    text-align: center;
}
.main-visual picture img {
    border-radius: 10px; /* ☆★画像角丸調整★☆ */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* ☆★画像影調整★☆ */
    max-width: 100%;
}
.main-visual .issue-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem; /* ☆★調整★☆ */
    font-weight: 700;
    color: #555;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* ☆★テキスト影調整★☆ */
    width: 100%;
}
.main-visual .issue-title { font-size: 4.8rem; /* ☆★調整★☆ */ }

/* === Message From Kenpo === */
.message-from-kenpo {
    padding: 60px 0; /* ☆★調整★☆ */
    background: repeating-linear-gradient(
        90deg, /* ストライプの方向を縦にする (90deg = 左から右へ) */
        #ffefa7, /* 1色目の薄い黄色 */
        #ffefa7 15px, /* 15pxの幅まで薄い黄色 */
        #FFFFFF 15px, /* 15pxから白色を開始 */
        #FFFFFF 30px /* 30pxで白色を終了 (ここで1パターンが完成) */
    );
}
.message-from-kenpo .container {
    /* ... 既存の .container スタイル (max-width, margin, padding-left/right) は共通で適用される ... */
    position: relative; /* ★★★::after擬似要素の基準位置とするために追加★★★ */
    padding: 50px 50px; /* ☆★線と次のセクションの間のスペースを確保（margin-bottomと合わせて調整）★☆ */
    background-color: #FFFFFF;
    border-radius: 10px;
}
.message-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}
.message-image {
    flex: 0 0 40%; /* ☆★画像の幅調整★☆ */
    max-width: 40%;
}
.message-image img {
    border-radius: 8px;
}
.message-text {
    flex: 1;
    min-width: 280px;
}

.message-text p {
    font-size: 1.3rem;
}

.message-text h3.animate-underline {
    position: relative;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.8;
    z-index: 1;
}

.message-text h3.animate-underline span {
    color: #4A4A4A;
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" preserveAspectRatio="none"%3E%3Crect width="100" height="20" fill="%23fedc66"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 11px; /* 初期状態は幅0% */
    transition: background-size 0.8s ease-out;
}
.message-text h3.animate-underline.is-visible span {
    background-size: 100% 11px;
}
.message-text .read-more {
    display: inline-block; /* 必要に応じてブロック要素やインラインブロックに */
    margin-top: 20px; /* ☆★上のテキストとの間隔調整★☆ */
    color: #fdcf2b; /* ☆★リンクの色調整 (アクセントカラーなど)★☆ */
    font-weight: 500; /* ☆★文字の太さ調整★☆ */
    font-size: 1.3rem; /* ☆★文字サイズ調整★☆ */
    text-decoration: none; /* 下線はなし (ホバーで表示など) */
    transition: color 0.3s ease, transform 0.3s ease;
    border: 1px solid #fdcf2b;
    background-color: #fdcf2b;
    padding: 8px 30px;
    color: #333333;
    border-radius: 20px;
}

.message-text .read-more:hover {
    border: 1px solid #fdcf2b;
    background-color: #FFFFFF;
    color: #fdcf2b;
    text-decoration: none; /* ホバーで下線を表示 */
    transform: translateY(-3px);
}

/* === Pickup Articles & Information Section (Common Card Styles) === */
.section-title-wrapper {
    display: inline-block; /* 中身の幅に合わせる */
    background-color: #f8f4d4;
    padding: 10px 30px; /* 内側の余白 */
    border-radius: 50px; /* 角を丸くする */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 軽い影 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 40px; /* 下の記事一覧との余白 */
}
/*.pickup-articles .section-title {
    background-color: #f8f4d4;
    border-radius: 10px 10px 0 0;
    padding: 20px 30px 30px;
}*/

.pickup-articles-title .section-title {
    margin: 40px auto 0;
}

.pickup-articles-title .section-title .title-text {
    background-color: #f8f4d4;
    border-radius: 10px 10px 0 0;
    padding: 20px 30px 30px;
    font-weight: 400;
    font-style: normal;
}
.pickup-grid-area {
    /* 飾り付けのある背景 */
    background-color: #FFFBEA; /* ベースの黄色 */
}


.pickup-articles {
    padding: 30px 0 60px 0; /* ☆★調整★☆ */
    background-color: #f9f5d5; /* ベースの黄色 */
    position: relative;
}
.pickup-articles .container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/pattern.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 550px;
}

.information-section {
    padding: 60px 0; /* ☆★調整★☆ */
    background-color: #F7F7F7;
}

.article-grid, .info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr)); /* ☆★カード幅調整★☆ */
    gap: 30px; /* ☆★カード間の隙間調整★☆ */
}

.article-card, .info-card {
    background-color: #FFFFFF;
    border-radius: 10px; /* ☆★カード角丸調整★☆ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ☆★カード影調整★☆ */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 3px solid transparent;
    z-index: 2;
    max-width: 350px;
}

.article-card.category-money {
    border-color: #e2da92;
}
.article-card.category-fine {
    border-color: #A8E6CF;
}
.article-card.category-recipe {
    border-color: #FFDDAA;
}
.article-card.category-present {
    border-color: #D8BFD8;
}
.article-card.category-health {
    border-color: #92c788;
}
.article-card.category-structure {
    border-color: #a7d8f5;
}
.article-card:hover, .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.card-link-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Pickup Article Card Specifics */
.article-card .article-tag {
    display: inline-block;
    background-color: #fdcf2b; /* ☆★タグ背景色調整★☆ */
    color: #333333; /* ☆★タグ文字色調整★☆ */
    font-size: 0.8rem; /* ☆★調整★☆ */
    padding: 4px 10px;
    border-radius: 15px;
    margin: 15px 15px 0;
    align-self: flex-start;
}
.article-card .article-image img {
    width: 100%;
    height: 180px; /* ☆★画像高さ調整★☆ */
    object-fit: cover;
}
.article-card .article-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.article-card .article-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    flex-grow: 1;
}
.article-card .article-content p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.6;
}
.article-card .read-more {
    font-size: 0.9rem;
    font-weight: 500;
    color: #67C1C4;
    margin-top: auto;
    align-self: flex-end;
}

/* Info Card Specifics */
.info-card .card-link-wrapper { padding: 20px; }
.info-card .info-date { font-size: 0.9rem; color: #555; margin-bottom: 8px; }
.info-card h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; flex-grow: 1; }
.info-card .info-location { font-size: 0.85rem; color: #777; margin-bottom: 15px; }
.info-card .read-more-btn {
    display: inline-block;
    background-color: #A5D8D9; /* ☆★ボタン背景色調整★☆ */
    color: #333333; /* ☆★ボタン文字色調整★☆ */
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: auto;
    align-self: flex-end;
    transition: background-color 0.3s;
}
.info-card .read-more-btn:hover { background-color: #8BC9CA; }

/* === Footer === */
.site-footer {
    background-color: #fff79a; /* ☆★フッター背景色調整★☆ */
    color: #4A4A4A;
    padding: 40px 0;
    font-size: 0.9rem;
}
.site-footer a { color: #4A4A4A; }
.site-footer a:hover { text-decoration: underline; }

.footer-columns { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.footer-col { flex: 1; min-width: 200px; }
.footer-col h4 { font-size: 1rem; font-weight: 700; margin-bottom: 15px; }
.footer-col ul li { margin-bottom: 8px; }
.footer-info img { max-height: 40px; margin-bottom: 15px; }
.copyright { text-align: center; font-size: 0.8rem; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.3); }

/* === Responsive Styles === */
@media (max-width: 768px) { /* ☆★ブレークポイント調整★☆ */
    .container { padding-left: 15px; padding-right: 15px; }
    .section-title { font-size: 1.5rem; margin-bottom: 30px; }
    /* .site-main { padding-top: 70px; /* JSで調整 */ 

    /* Header Responsive */
    .site-header .container {
        /* justify-content: space-between; /* ハンバーガーボタンの配置で調整 */
    }
    .site-header {
        /* モバイルでは左右いっぱいに広がるように調整 */
        max-width: calc(100% - 40px); /* 左右に20pxずつの余白 */
        /* top: 10px; /* モバイルでは上からの距離を減らすなど */
    }
    .header-container-floating {
        padding: 10px 20px; /* モバイル時のヘッダー内部パディング */
    }
    .header-logo { /* 必要に応じてモバイル時のロゴサイズ調整 */
        justify-content: space-between; /* ★★★ロゴを左、ハンバーガーを右に★★★ */ /* flex-grow: 1; /* ロゴを左に、ボタンを右にするため */
    }
    .site-titles .publication-name { font-size: 1.3rem; }

    .global-nav { /* ★★★グローバルナビゲーション (モバイルメニューとして表示)★★★ */
        display: none; /* 初期状態は非表示 (JSで表示/非表示を制御) */
        position: fixed;
        top: 0; /* ヘッダーの高さに合わせる場合はJSで調整 */
        right: -280px; /* 初期状態では画面外 (幅に合わせて調整) ☆★ */
        width: 280px; /* ☆★メニュー幅調整★☆ */
        height: 100vh;
        background-color: #fdcf2b;
        background-size: cover;
        background-repeat: no-repeat;
        /*box-shadow: -5px 0 15px rgba(0,0,0,0.1);*/
        padding: 30px; /* ☆★内側パディング調整★☆ */
        padding-top: 80px; /* ヘッダーの高さ分を考慮 ☆★ */
        transition: right 0.4s ease-in-out;
        z-index: 1050; /* ボタンより奥 */
        flex-direction: column; /* JavaScriptで表示時にflexにする */
        align-items: flex-start;
    }
    .site-header.menu-open .global-nav {
        display: flex; /* ★★★メニューが開いたら表示★★★ */
        right: 0; /* メニュー表示 */
    }
    .global-nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    .global-nav li {
        width: 100%;
    }
    .global-nav li a {
        display: block;
        padding: 15px 10px;
        font-size: 1.1rem;
        border-bottom: 1px solid #E0E0E0;;
        color: #FFFFFF; /* モバイルメニューのリンク色 */
        /*text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* テキスト影調整 */
    }
    .global-nav li a:hover {
        background-color: #f0f0f0;
        border-bottom-color: transparent;
    }

    .hamburger-button {
        display: block; /* モバイルで表示 */
        /* position: absolute; top: 50%; right: 20px; transform: translateY(-50%); /* 右端に配置 */
        /* または、header-right の兄弟として配置し、flexのorderで調整 */
    }

    /* Other Sections Responsive */
    .tag-section ul { gap: 10px; justify-content: flex-start; }
    .tag-section li a { padding: 6px 12px; font-size: 0.8rem; }
    .main-visual { padding: 50px 0; }
    .main-visual .issue-title { font-size: 2.8rem; /* スマホでは少し小さく */ }
    .message-content  { flex-direction: column; text-align: left; }
    .message-content .read-more { text-align: center; width: 100%;}
    .message-image { max-width: 250px; margin: 0 auto 20px; }
    .message-text h3.animate-underline { font-size: 1.3rem; display: block; }
    .article-grid, .info-grid { grid-template-columns: 1fr; gap: 20px; }
    .article-card, .info-card { max-width: none; }
    .article-card .article-image img { height: 160px; }
    .footer-columns { flex-direction: column; text-align: center; }
    .footer-col { min-width: auto; }
    .footer-info img { margin-left: auto; margin-right: auto; }
    .pickup-articles .container::after { background-size: 215px; }
}