/* style.css - ナブテスコ健康保険組合 Webマガジン */

/* 基本的なリセットと設定 */
body {
    margin: 0;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 900;
    font-size: 18px;
    background-color: #e0e0e0; /* PC表示時のコンテナ外の背景色 */
    position: relative; /* パララックス背景の基準点 */
    padding-bottom: 20px; /* コンテナの下余白 */
}

/* 左側固定ナビゲーションエリア */
.fixed-sidebar {
    position: fixed; /* 画面に固定 */
    left: 0;
    top: 0;
    width: 300px; /* 固定の幅 */
    height: 100vh; /* 画面の高さいっぱい */
    padding: 20px;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
    z-index: 100; /* ハンバーガーメニューより手前に */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 縦方向の中央揃え */
    overflow-y: auto; /* 内容が多い場合にスクロール可能に */
}
.sidebar-inner-wrap {
    /* justify-content: center により自動的に上下センターに配置 */
}

/* ハンバーガーメニューボタン (スマホ時) */
.hamburger-menu {
    display: none; /* PCでは非表示 */
    position: fixed; /* スマホ時も画面右上に固定 */
    top: 15px;
    right: 15px;
    z-index: 101; /* ナビゲーションより手前 */
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
}
.hamburger-menu-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger-menu[aria-expanded="true"] .hamburger-menu-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu[aria-expanded="true"] .hamburger-menu-bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu[aria-expanded="true"] .hamburger-menu-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ナビ＋ロゴをまとめる白いボックス */
.sidebar-box {
    margin-left: -20px; /* サイドバーのpaddingを打ち消して左端に揃える */
    padding: 40px 24px 24px 20px;
    background: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    border-radius: 0 60px 60px 0; /* 右上・右下だけ角丸 */
}

/* ナビゲーションエリア */
.main-navigation {
    margin-bottom: 20px;
}
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.main-navigation li a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    position: relative; /* 疑似要素の基準 */
    transition: color 0.3s ease;
}
/* mark.svg をアイコンとして表示 */
.main-navigation li a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../images/mark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.5em;
    vertical-align: middle;
}
/* アイコンバウンスアニメーション */
@keyframes iconBounce {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(-6px); }
    40%  { transform: translateY(0); }
    60%  { transform: translateY(-3px); }
    80%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}
.main-navigation li a:hover {
    color: #0087cf;
}
.main-navigation li a:hover::before {
    animation: iconBounce 0.6s ease;
}

/* ==========================================
   メインビジュアル（ロゴ + 雲）
   ========================================== */
.kenpo-letter-header.main-visual {
    text-align: center;
    padding: 32px 20px 0;
    background-color: #f8f2f2;
}

/* ロゴ + 号バッジのラッパー */
.main-visual-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* けんぽたよりロゴ */
.logo-kenpodayori {
    display: block;
    width: 50%;
    max-width: 300px;
    height: auto;
}

/* 「2026-春号」バッジ */
.issue-badge {
    display: inline-block;
    font-size: 0.85em;
    font-weight: 500;
    color: #444;
    background-color: #fff;
    border: 1.5px solid #aaa;
    border-radius: 20px;
    padding: 4px 18px;
    letter-spacing: 0.05em;
}

/* 雲エリア */
.main-visual-cloud {
    line-height: 0;
    margin-top: 4px;
    margin-left: -20px;
    margin-right: -20px;
}
.cloud-image {
    display: block;
    width: calc(100% + 40px);
    height: auto;
}

/* 健康保険組合 紹介 */
.kenpo-introduction {
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.15); /* ナビとの区切りライン */
    margin-left: -20px;  /* sidebar-boxの左paddingを打ち消してボックス端まで伸ばす */
    margin-right: -24px; /* sidebar-boxの右paddingを打ち消してボックス端まで伸ばす */
    padding-top: 24px;
    padding-left: 20px;  /* コンテンツの左余白を復元 */
    padding-right: 24px; /* コンテンツの右余白を復元 */
    margin-top: 12px;
}
.kenpo-introduction .kenpo-intro-image {
    display: block;
    width: 75%; /* ロゴを少し小さく */
    height: auto;
    margin-bottom: 12px;
}
.kenpo-introduction .description {
    font-size: 0.78em;
    font-weight: 400;
    color: #000;
    line-height: 1.6;
}

/* メインコンテンツエリア (スクロールする部分) */
.main-content-area {
    margin-left: 300px; /* PC表示時: 固定サイドバーの幅分だけ左にマージン */
    padding: 0;
    position: relative; /* z-indexの基準など */
    z-index: 1; /* パララックス背景より手前 */
}
.content-wrapper { /* スマホ幅に制限するための内側ラッパー */
    max-width: 480px; /* スマホファーストのコンテンツ幅 */
    margin: 0 auto;   /* 中央揃え */
    box-shadow: 0 0 15px rgba(0,0,0,0.05); /* 軽い影 */
    overflow: hidden; /* フォールバック（clip 非対応の旧ブラウザ向け） */
    overflow-x: clip; /* 横はみ出しのみ切り取り・縦は制限しない（Android Chrome の合成レイヤークリップバグ対策） */
    background-color: rgba(255, 255, 255, 0.3); /* 白っぽい半透明 */
    display: flex;
    flex-direction: column;
    min-height: 100svh; /* 画面の高さいっぱいを最低限確保 */
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .content-wrapper {
        background-color: rgba(255, 255, 255, 0.15); /* より透明度を上げる */
        -webkit-backdrop-filter: blur(10px) saturate(120%); /* Safari用プレフィックス */
        backdrop-filter: blur(10px) saturate(120%); /* ぼかし具合と彩度を調整 */
    }
}

/* ==========================================
   トップページ お知らせセクション
   ========================================== */
.top-notice-section {
    padding: 24px 20px 0;
    background-color: #fff;
}

.top-notice-box {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%);
    border-radius: 20px;
    padding: 24px 20px;
    margin-bottom: 8px;
}

.top-notice-title {
    font-size: 1.15em;
    font-weight: 900;
    color: #0087cf;
    margin: 0 0 16px 0;
    line-height: 1.4;
    text-align: left;
}

.top-notice-2col {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-notice-content {
    flex: 1;
}

.top-notice-text {
    font-size: 0.78em;
    font-weight: 400;
    color: #333;
    line-height: 1.75;
    margin: 0;
}

.top-notice-illust {
    flex-shrink: 0;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-notice-illust img {
    width: 100%;
    height: auto;
    display: block;
}

/* スマホ時のお知らせボックス調整 */
@media (max-width: 767px) {
    .top-notice-section {
        padding: 20px 16px 0;
    }
    
    .top-notice-box {
        padding: 20px 16px;
    }
    
    .top-notice-illust {
        width: 80px;
    }
}

/* ==========================================
   記事リスト
   ========================================== */
.article-list {
    padding: 0;
    background-color: #fff;
    flex: 1; /* 余った縦スペースをすべて埋める */
}

.article-item {
    border-bottom: 1px solid #e0e0e0;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* カードリンク：横並びレイアウト */
.article-item-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 16px;
    gap: 12px;
    transition: background-color 0.2s ease;
}

.article-item-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}
.article-item-link:hover {
    background-color: rgba(0, 135, 207, 0.04);
}

/* サムネイル */
.thumbnail-wrap {
    width: 140px;
    min-width: 140px;
    height: 105px;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
}

.article-item .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.article-item-link:hover .thumbnail {
    transform: scale(1.08);
}

/* 右側コンテンツ */
.article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* カテゴリラベル */
.article-category {
    font-size: 0.72em;
    color: #888;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

/* タイトル */
.article-title {
    font-size: 1em;
    font-weight: 700;
    color: #0087cf;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

/* 本文テキスト */
.article-body {
    font-size: 0.78em;
    color: #000;
    line-height: 1.6;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 「詳しくみる」ボタン */
.btn-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #0087cf;
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    padding: 6px 34px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 120px;
}
.article-item-link:hover .btn-detail,
.btn-detail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 135, 207, 0.35);
}
.article-item-link:hover .btn-arrow,
.btn-detail:hover .btn-arrow {
    transform: translateX(3px);
}
.btn-arrow {
    position: absolute;
    right: 8px;
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* ==========================================
   フッター
   ========================================== */
.site-footer {
    background-color: #fff;
    text-align: center;
    padding: 20px 0 0;
    position: relative;
    overflow: hidden;
}

/* ページトップボタン */
.page-top-wrap {
    position: relative;
    z-index: 2;
    margin-bottom: -50px; /* アーチに重なる分だけ下にずらす */
}
.page-top-btn {
    display: inline-block;
}
.page-top-btn:hover {
    animation: pageTopJump 0.6s ease;
}
@keyframes pageTopJump {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(-20px); }
    40%  { transform: translateY(0); }
    60%  { transform: translateY(-10px); }
    80%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}
.page-top-btn img {
    width: 130px;
    height: auto;
    display: block;
}

/* アーチ型の青い背景エリア */
.footer-arch {
    position: relative;
    z-index: 1;
    /* 透明にして arch.png の透明な角から白を透過させる */
}

/* arch.png を絶対配置で全体に敷く */
.arch-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* フッターロゴ（アーチの上に重ねる） */
.footer-logo-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 70px 20px 48px;
}
.footer-logo {
    width: 230px;
    height: auto;
    display: block;
}

/* ==========================================
   SP専用メインビジュアル
   基準キャンバス: 960 × 1350 px (背景画像の自然サイズ)
   座標メモ: デザイン上の "top" → CSS left (X軸)
             デザイン上の "left" → CSS top  (Y軸)
   ========================================== */
.main-visual--sp {
    display: none; /* PCでは非表示 */
    position: relative;
    width: 100%;
    aspect-ratio: 961 / 601; /* 背景画像の縦横比をそのまま維持 */
    background-image: url('../images/background/sp_top_bk.webp');
    background-size: 100% 100%; /* コンテナにぴったり合わせる */
    background-repeat: no-repeat;
    overflow: hidden;
}

/* ロゴ + バッジ */
.sp-hero-logo {
    position: absolute;
    top: 6%;
    left: 5%;
    transform: none;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    z-index: 5; /* モンスター(z-index:3)より前面に */
    white-space: nowrap;
}
.sp-logo-img {
    display: block;
    width: 100%;
    height: auto;
}

/* モンスター共通 */
.sp-monster {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    animation: spMonsterFloat 3.5s ease-in-out infinite;
}

/*
 * 各モンスター・雲の位置 (961×601 横長画像基準)
 */
.sp-monster--green {
    width: 25%;
    left: 70%;
    top: 15%;

    animation-duration: 3.8s;
    animation-delay: 0.2s;
}

.sp-monster--pink {
    width: 20%;
    top: 45%;
    left: 5%;
    animation-duration: 3.2s;
    animation-delay: 0.5s;
}

.sp-monster--brown {
    width: 50%;
    left: 24%;
    top: 25%;
    animation-duration: 4s;
    animation-delay: 0s;
}

.sp-cloud-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 0;
    z-index: 10;
}
.sp-cloud-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

/* モンスター浮遊アニメーション */
@keyframes spMonsterFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* スマホ時 (767px以下) のスタイル */
@media (max-width: 767px) {
    /* PC用メインビジュアルを非表示、SP用を表示 */
    .main-visual--pc {
        display: none;
    }
    .main-visual--sp {
        display: block;
    }

    .fixed-sidebar {
        transform: translateX(-100%); /* 初期状態では画面外（左）に隠す */
        transition: transform 0.3s ease-in-out;
        width: 80%; /* スマホ時のメニュー幅 */
        background-image: url('../images/bk_rainbow.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: transparent;
    }
    .fixed-sidebar.is-open {
        transform: translateX(0); /* ハンバーガーが開いた時の位置 */
    }
    .hamburger-menu {
        display: block; /* ハンバーガー表示 */
    }
    .main-content-area {
        margin-left: 0; /* 左マージンをリセット */
        padding: 0; /* 余白調整 */
    }
    .content-wrapper {
        max-width: 100%; /* スマホ画面いっぱいにコンテンツを表示 */
        margin: 0;
        box-shadow: none; /* スマホでは影を消しても良い */
    }
    .kenpo-introduction {
        text-align: left;
    }
    .kenpo-introduction .kenpo-intro-image {
        width: 50%; /* スマホでは小さく表示 */
    }
    .kenpo-introduction .description {
        text-align: left;
    }
    .logo-kenpodayori {
        width: 70%;
    }
    .thumbnail-wrap {
        width: 120px;
        min-width: 120px;
        height: 90px;
    }
}

/* ==========================================
   記事詳細ページ専用スタイル
   （旧 article.css を統合）
   ========================================== */

/* ==========================================
   ページトップエリア
   ─ article-sp-top-area は PC/SP 共に常時表示
   ─ 白ヘッダー帯 / キャラクターは SP のみ表示
   ─ ヒーロー写真は PC/SP 共に表示
   ========================================== */

/* トップエリア */
.article-sp-top-area {
    display: block;
}

/* ── 白いヘッダー帯（PC/SP 共に表示） ── */
.article-sp-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background-color: #fff;
    padding: 12px 60px 0 28px;
    overflow: hidden;
}

/* カテゴリーページ専用：下部にグレーライン */
.article-sp-header--category {
    border-bottom: 1px solid #e0e0e0;
}

/* PC: ハンバーガー不要のため右paddingを縮小しキャラを右寄せ */
@media (min-width: 768px) {
    .article-sp-header {
        padding-right: 16px;
    }
}

/* <a>をレイアウトに影響させず、imgを直接フレックスアイテムとして機能させる */
.article-sp-logo-link {
    display: contents;
}

.article-sp-logo {
    display: block;
    flex-shrink: 1;
    width: auto;
    max-width: 50%;
    height: auto;
    align-self: center;
}

/* ── キャラクター（ヘッダー下端にぴったり合わせる） ── */
.article-sp-chara {
    display: block;
    flex-shrink: 0;
    width: auto;
    max-height: 90px;
    height: auto;
    object-fit: contain;
}

/* ── ヒーロー写真：PC/SP 共に表示 ── */
.article-hero {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    line-height: 0;
}
.article-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 雲：写真下端に重ねる */
.article-hero-cloud {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
    pointer-events: none;
    z-index: 2;
}
.article-hero-cloud img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .article-hero {
        height: 200px;
    }
}

/* ==========================================
   記事詳細 共通ラッパー
   ========================================== */
.article-detail {
    background-color: #fff;
    flex: 1;
}

/* ==========================================
   記事ヘッダー（カテゴリ・タイトル）
   ========================================== */
.article-detail-header {
    padding: 28px 24px 24px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.article-detail-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    font-size: 0.8em;
    color: #333333;
    letter-spacing: 0.05em;
}

.article-detail-category,
.article-detail-issue {
    display: inline;
}

.article-detail-sep {
    color: #ccc;
}

.article-detail-title {
    font-size: 1.7em;
    font-weight: 700;
    color: #0087cf;
    line-height: 1.45;
    margin: 0 0 12px;
}

.article-detail-subtitle {
    font-size: 0.95em;
    font-weight: 700;
    color: #333;
    line-height: 1.7;
    margin: 0;
    text-align: center;
}

/* ==========================================
   記事本文エリア
   ========================================== */
.article-detail-body {
    padding: 20px 20px 4px;
}

/* リード文 */
.article-intro {
    font-size: 0.88em;
    color: #000;
    line-height: 1.85;
    margin: 0 0 20px 0;
}

/* ==========================================
   レシピ名ブロック（cube + タイトル + 情報）
   ========================================== */
.recipe-title-block {
    background-color: #fff7db;
    padding: 28px 20px 160px;
    margin: 0 -20px 0;
    text-align: center;
}

.recipe-cube-icon {
    display: block;
    width: 72px;
    height: auto;
    margin: 0 auto 18px;
}

.recipe-main-title {
    font-size: 1.35em;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px 0;
    line-height: 1.5;
    text-align: center;
}

.recipe-title-block p {
    font-size: 0.8em;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0;
}
.recipe-title-block p span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ==========================================
   レシピメイン写真
   ========================================== */
.recipe-main-photo-wrap {
    position: relative;
    z-index: 1;
    margin-top: -140px;
    margin-bottom: 28px;
    padding: 10px;
    background-color: #fff;
    line-height: 0;
}
.recipe-main-photo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================
   材料リスト
   ========================================== */
.recipe-ingredients {
    margin-bottom: 28px;
    border-top: 2px solid #85bf23;
    padding-top: 0;
}

/* 材料・作り方 共通セクション見出し */
.recipe-section-label {
    font-size: 1.05em;
    font-weight: 700;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 材料の見出し：緑■アイコン＋点線セパレーター */
.recipe-ingredients .recipe-section-label {
    padding: 14px 0;
    border-bottom: 2px dotted #85bf23;
    margin-bottom: 0;
}
.recipe-ingredients .recipe-section-label::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #85bf23;
    border-radius: 0;
    flex-shrink: 0;
}

/* 作り方の見出し：材料と同じデザイン */
.recipe-steps .recipe-section-label {
    padding: 14px 0;
    border-bottom: 2px dotted #85bf23;
    margin-bottom: 0;
}
.recipe-steps .recipe-section-label::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #85bf23;
    border-radius: 0;
    flex-shrink: 0;
}

.ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ingredients-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #eee;
    font-size: 0.92em;
    color: #333;
    gap: 12px;
}

.ingredient-name {
    flex: 1;
}
.ingredient-amount {
    flex-shrink: 0;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
}

/* ==========================================
   作り方ステップ
   ========================================== */
.recipe-steps {
    margin-bottom: 20px;
    border-top: 2px solid #85bf23;
    padding-top: 0;
}

.recipe-step-item {
    display: block;
    padding: 24px 0 0;
    border-bottom: none;
}

/* "Step.X" ラベル：角丸バッジ */
.recipe-step-label {
    display: table;
    margin: 0 auto 14px;
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    background-color: #0087cf;
    padding: 10px 36px;
    border-radius: 50px;
    letter-spacing: 0.05em;
}

.recipe-step-text {
    font-size: 0.9em;
    color: #000;
    line-height: 1.85;
    margin: 0 0 16px 0;
}

.recipe-step-img-wrap {
    width: 100%;
    line-height: 0;
    margin-bottom: 8px;
}
.recipe-step-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================
   栄養ポイント
   ========================================== */
.recipe-point {
    background-color: #f0f7fc;
    border-left: 3px solid #0087cf;
    border-radius: 0 8px 8px 0;
    padding: 14px 16px;
    margin-top: 8px;
}
.recipe-point-title {
    font-size: 0.88em;
    font-weight: 700;
    color: #0087cf;
    margin: 0 0 8px 0;
}
.recipe-point p:last-child {
    font-size: 0.85em;
    color: #000;
    line-height: 1.85;
    margin: 0;
}

/* ==========================================
   記事下部：「一覧に戻る」ボタン
   ========================================== */
.article-back {
    padding: 20px 20px 36px;
    background-color: #fff;
    text-align: center;
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88em;
    color: #0087cf;
    text-decoration: none;
    padding: 9px 22px;
    border: 1.5px solid #0087cf;
    border-radius: 20px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-back:hover {
    background-color: #0087cf;
    color: #fff;
}

/* ==========================================
   記事詳細ページ：スマホ補正
   ========================================== */
@media (max-width: 767px) {
    .article-detail-title {
        font-size: 1.4em;
    }
    .zf-sec-title {
        font-size: 1.35em;
    }
    .article-detail-body {
        padding: 18px 16px 4px;
    }
    .recipe-title-block {
        margin: 0 -16px 0;
        padding-left: 16px;
        padding-right: 16px;
    }
    .article-sp-header {
        padding: 12px 60px 0 24px;
    }
    .article-sp-logo {
        max-width: 48%;
    }
    .article-sp-chara {
        max-height: 72px;
        align-self: flex-end;
    }
}

/* ==========================================
   健保のお財布 記事専用スタイル
   ========================================== */

/* ── イントロ ── */
.zf-intro {
    padding: 4px 0 24px;
}

.zf-body-text {
    font-size: 0.88em;
    font-weight: 400;
    color: #000;
    line-height: 1.85;
    margin: 0 0 14px;
}

.zf-body-text a {
    color: #0087cf;
    text-decoration: underline;
    display: inline-block;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.zf-body-text a:hover {
    transform: translateY(-5px);
    text-decoration: underline;
}

/* ── 波形セパレーター ── */
.zf-wave-sep {
    position: relative;
    overflow: hidden;
    height: 80px;
    margin: 0 -20px;
    line-height: 0;
}

.zf-wave-sep--a { background: #fff; }
.zf-wave-sep--b { background: #f3f7ff; }

.zf-wave-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    animation: zfWaveFlow 20s linear infinite;
}

.zf-wave-svg--rev {
    animation-duration: 28s;
    animation-direction: reverse;
}

@keyframes zfWaveFlow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── 予算案内訳セクション ── */
.zf-budget-sec {
    margin: 0 -20px;
}

.zf-sec-header {
    padding: 24px 24px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.zf-sec-title {
    font-size: 1.6em;
    font-weight: 900;
    color: #0087cf;
    margin: 0;
    letter-spacing: 0;
    line-height: 1.5;
    text-align: center;
}

.zf-sec-title > span {
    background: linear-gradient(transparent 55%, #faff00 55%);
    display: inline;
    padding: 0 0.4em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.zf-sec-unit {
    font-size: 0.8em;
    color: #666;
    font-weight: 400;
}

.zf-budget-inner {
    padding: 24px 20px 28px;
}

/* チャートカード */
.zf-card {
    padding: 20px 16px 24px;
    margin-bottom: 24px;
}

.zf-canvas-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

canvas.zf-donut {
    max-width: 300px;
    width: 100%;
    display: block;
}

/* 凡例 */
.zf-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zf-legend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88em;
    color: #000;
    background: #f3f7ff;
    border-radius: 12px;
    padding: 10px 14px;
}

.zf-legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

.zf-legend-name {
    flex: 1;
}

.zf-legend-val {
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    font-size: 0.95em;
}

/* ── 納付金推移セクション ── */
.zf-trend-sec {
    margin: 0 -20px;
    background: #f3f7ff;
}

.zf-trend-inner {
    padding: 20px 20px 28px;
}

.zf-figure-img {
    display: block;
    width: calc(100% + 40px);
    height: auto;
    margin: 5px -20px 16px;
}

.zf-trend-text {
    font-size: 0.88em;
    font-weight: 400;
    color: #000;
    line-height: 1.85;
    margin: 14px 0 0;
}

/* ==========================================
   介護保険予算セクション
   ========================================== */
.zf-kaigo-sec {
    margin: 0 -20px;
}

.zf-kaigo-sec .zf-sec-header,
.zf-rate-sec .zf-sec-header,
.kn-main-sec .zf-sec-header,
.kn-ended-sec .zf-sec-header {
    padding-bottom: 50px;
}

.zf-kaigo-inner {
    padding: 8px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.zf-kaigo-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zf-kaigo-block-title {
    font-size: 1.1em;
    font-weight: 900;
    color: #1a3d6e;
    margin: 0 0 4px;
    padding-left: 12px;
    border-left: 7px solid #0087cf;
}

.zf-kaigo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
    font-weight: 500;
}

.zf-kaigo-table tr {
    border-bottom: 1px dashed #c0d4ee;
}

.zf-kaigo-table tr:first-child {
    border-top: 1px dashed #c0d4ee;
}

.zf-kaigo-table td {
    padding: 11px 4px;
    color: #444;
    line-height: 1.5;
}

.zf-kaigo-table td:last-child {
    text-align: right;
    white-space: nowrap;
    font-weight: 900;
    color: #1a3d6e;
    padding-left: 12px;
}

.zf-kaigo-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 80, 160, 0.08);
    gap: 0 !important;
}

.zf-kaigo-inout-header {
    background: #0087cf;
    color: #fff;
    font-size: 0.95em;
    font-weight: 900;
    text-align: center;
    padding: 11px 16px;
    letter-spacing: 0.12em;
}

.zf-kaigo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #e8f0fa;
    gap: 12px;
}

.zf-kaigo-label {
    font-size: 0.88em;
    font-weight: 900;
    color: #1a3d6e;
}

.zf-kaigo-value {
    font-size: 0.92em;
    font-weight: 900;
    color: #1a3d6e;
    white-space: nowrap;
}

.zf-kaigo-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f7ff;
    padding: 13px 16px;
    gap: 12px;
}

.zf-kaigo-total-label {
    font-size: 0.85em;
    font-weight: 900;
    color: #1a3d6e;
    letter-spacing: 0.05em;
}

.zf-kaigo-total-value {
    font-size: 0.95em;
    font-weight: 900;
    color: #1a3d6e;
    white-space: nowrap;
}

/* ==========================================
   2026年度保険料率セクション
   ========================================== */
.zf-rate-sec {
    background: #f3f7ff;
    margin: 0 -20px;
}

.zf-rate-inner {
    padding: 4px 20px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 予算の基礎数値ブロック */
.zf-rate-base {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zf-rate-base-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.zf-rate-base-group .zf-kaigo-inout-header {
    align-self: center;
    margin-bottom: 14px;
    min-width: 120px;
    border-radius: 999px;
    padding: 10px 32px;
}

.zf-rate-base-table {
    background: #fff;
}

/* 任意継続被保険者カード */
.zf-ninui-card {
    background: #f3f7ff;
    border-radius: 16px;
    padding: 24px 20px 22px;
    margin: 48px 20px 0;
}

.zf-ninui-title {
    font-size: 1em;
    font-weight: 900;
    color: #0087cf;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

.zf-ninui-divider {
    border: none;
    border-top: 1.5px solid #c0d4ee;
    margin: 16px 0;
}

.zf-ninui-body {
    font-size: 0.88em;
    font-weight: 400;
    color: #000;
    line-height: 1.85;
    margin: 0;
}

/* ==========================================
   健康づくり（保健事業） 記事専用スタイル
   ========================================== */

/* メインセクション背景 */
.kn-main-sec {
    margin: 0 -20px;
    background: #f3f7ff;
}

/* セクション内パディング */
.kn-sec-inner {
    padding: 8px 20px 36px;
    display: flex;
    flex-direction: column;
}

/* 各事業アイテム */
.kn-item {
    padding: 24px 0;
    border-bottom: 1px solid #d0e0f5;
}

.kn-item--last {
    border-bottom: none;
    padding-bottom: 0;
}

/* 事業タイトル */
.kn-item-title {
    font-size: 1.05em;
    font-weight: 900;
    color: #1a3d6e;
    margin: 0 0 10px;
    padding-left: 14px;
    border-left: 6px solid #0087cf;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* サブタイトル */
.kn-item-sub {
    font-size: 0.85em;
    font-weight: 400;
    color: #000;
    margin: 0 0 12px;
    line-height: 1.6;
}

/* 本文テキスト */
.kn-item-body {
    font-size: 0.88em;
    font-weight: 400;
    color: #000;
    line-height: 1.85;
    margin: 0 0 12px;
}

/* 変更点ボックス */
.kn-change-box {
    background: #fff;
    border: 1.5px solid #0087cf;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.kn-change-title {
    font-size: 0.88em;
    font-weight: 900;
    color: #0087cf;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kn-change-title .fa-triangle-exclamation {
    font-size: 1.4em;
}

.kn-change-list {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kn-change-list li {
    font-size: 0.85em;
    font-weight: 400;
    color: #000;
    line-height: 1.7;
}

/* 詳しくはこちらボタン ラッパー */
.kn-link-btn-wrap {
    text-align: center;
    margin-top: 4px;
}

/* 詳しくはこちらボタン */
.kn-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85em;
    font-weight: 700;
    color: #fff;
    background-color: #0087cf;
    padding: 8px 20px;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.kn-link-btn:hover {
    background-color: #006faa;
    transform: translateY(-1px);
}

/* New バッジ */
.kn-new-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 900;
    color: #fff;
    background-color: #e63b3b;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 本文リスト（箇条書き） */
.kn-body-list {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kn-body-list li {
    font-size: 0.88em;
    font-weight: 400;
    color: #000;
    line-height: 1.8;
    padding-left: 18px;
    position: relative;
}

.kn-body-list li::before {
    content: "◎";
    position: absolute;
    left: 0;
    color: #0087cf;
    font-size: 0.85em;
    line-height: 1.8;
}

/* サブ箇条書き */
.kn-sub-list {
    margin: 8px 0 0;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.kn-sub-list li {
    font-size: 0.85em;
    font-weight: 400;
    color: #000;
    padding-left: 14px;
    position: relative;
}

.kn-sub-list li::before {
    content: "・";
    position: absolute;
    left: 0;
}

/* 注意書き */
.kn-note {
    font-size: 0.8em;
    font-weight: 400;
    color: #000;
    line-height: 1.7;
    text-decoration: underline;
    padding-left: 1em;
    text-indent: -1em;
    margin: 4px 0 12px;
}

/* 記事内画像：全幅 */
.kn-img-full {
    display: block;
    max-width: 80%;
    height: auto;
    border-radius: 8px;
    margin: 10px auto;
}

/* 記事内画像：ロゴ */
.kn-img-logo {
    display: block;
    max-width: 160px;
    height: auto;
    margin: 10px auto;
}

/* 見出し内インラインロゴ */
.kn-img-inline-logo {
    display: inline-block;
    height: 1.1em;
    width: auto;
    vertical-align: middle;
    margin: 0 2px;
}

/* 記事内画像：スマホ画面 */
.kn-img-sp {
    display: block;
    max-width: 60%;
    height: auto;
    border-radius: 8px;
    margin: 10px auto;
}

/* 画像プレースホルダー */
.kn-img-placeholder {
    background: #e8eff8;
    border: 2px dashed #a0b8d8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    margin: 10px 0;
    color: #7a99bb;
    font-size: 0.82em;
    font-weight: 400;
    text-align: center;
}

.kn-img-placeholder--wide {
    min-height: 140px;
}

/* ── Pep Up 年間スケジュール表 ── */
.kn-pepup-wrap {
    overflow-x: auto;
    margin: 8px 0 16px;
    -webkit-overflow-scrolling: touch;
}

.kn-pepup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68em;
    line-height: 1.4;
}

.kn-pepup-table th,
.kn-pepup-table td {
    border: 1px solid #aac4dc;
    padding: 4px 5px;
    vertical-align: middle;
    color: #333;
    font-weight: 400;
    background: #fff;
}

.kn-pepup-table thead th {
    background: #ddeef8;
    color: #1a3d6e;
    font-weight: 700;
    text-align: center;
}

.kn-pepup-table tbody td.kn-month-cell {
    text-align: center;
    background: #f3f7ff !important;
    font-weight: 700;
    white-space: nowrap;
    color: #1a3d6e;
}


.kn-pepup-table tbody td:last-child {
    text-align: right;
    white-space: nowrap;
}

.kn-pepup-total-label {
    font-weight: 700 !important;
    text-align: right !important;
    color: #1a3d6e;
}

.kn-pepup-total-value {
    background: #ffd4aa !important;
    font-weight: 700;
    color: #c04000;
}

.kn-pepup-note {
    font-size: 0.82em;
    color: #555;
    margin: 6px 0 0;
    line-height: 1.6;
    text-align: center;
}

/* 終了した事業セクション */
.kn-ended-sec {
    margin: 0 -20px;
    background: #fff;
    padding-bottom: 40px;
}

.kn-ended-list {
    list-style: none;
    margin: 0 20px 36px;
    padding: 16px 20px;
    background: #f8f8f8;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kn-ended-list li {
    font-size: 0.88em;
    font-weight: 400;
    color: #000000;
    line-height: 1.7;
    padding-left: 22px;
    position: relative;
}

.kn-ended-list li::before {
    content: "✕";
    position: absolute;
    left: 0;
    color: #cc6666;
    font-size: 0.85em;
    text-decoration: none;
}

/* ==========================================
   印刷スタイル
   ─ PC からプリントしてもスマホレイアウトで出力する
   ========================================== */
@media print {

    /* 背景色・背景画像を忠実に印刷 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* アニメーション・トランジション停止 */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    /* ページ余白 */
    @page {
        margin: 10mm 8mm;
    }

    /* ボディの背景色をリセット */
    body {
        background-color: #fff;
        font-size: 14px;
        padding-bottom: 0;
    }

    /* サイドバー・ハンバーガー・背景コンポーネントを非表示 */
    .fixed-sidebar,
    .hamburger-menu,
    #bg-placeholder {
        display: none !important;
    }

    /* サイドバー分のマージンをリセット → スマホレイアウト相当に */
    .main-content-area {
        margin-left: 0;
    }

    /* コンテンツをスマホ幅（480px）で中央揃え */
    .content-wrapper {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: #fff;
        min-height: auto;
    }

    /* 波形アニメーション用の幅指定をリセット */
    .zf-wave-svg {
        width: 100%;
        animation: none !important;
    }

    /* 途中で改ページしない要素 */
    .zf-card,
    .zf-kaigo-block,
    .zf-kaigo-card,
    .zf-ninui-card,
    .article-detail-header,
    .zf-rate-base-group,
    .kn-item,
    .kn-change-box,
    .kn-ended-list {
        break-inside: avoid;
    }

    /* 「記事一覧に戻る」ボタンは印刷不要 */
    .article-back {
        display: none;
    }
}

/* ════════════════════════════════════════
   2026-spring-03 記事専用スタイル
   ════════════════════════════════════════ */

/* タイトル内サブテキスト（申込締切） */
.s03-title-sub {
    font-size: 0.65em;
}

/* 下線テキスト */
.s03-underline {
    text-decoration: underline;
}

/* ボタンラップ 下余白 */
.s03-btn-wrap-mb {
    margin-bottom: 1.5em;
}

/* 申込コードテキスト */
.s03-code-text {
    margin: 0;
    text-align: center;
}

/* 体験談ボックス */
.s03-case-box {
    margin-top: 1.5em;
}

/* 体験談タイトル */
.s03-case-title {
    font-size: 1.15em;
}

/* kn-item 上余白・下線なし（最初のアイテム） */
.s03-item-first {
    margin-top: 2em;
    border-bottom: none;
    padding-bottom: 8px;
}

/* kn-item 下線なし */
.s03-item-no-border {
    border-bottom: none;
}

/* kn-item 下線なし・下パディング小 */
.s03-item-no-border-sm {
    border-bottom: none;
    padding-bottom: 8px;
}

/* リスク要因ラッパー */
.s03-risk-wrap {
    padding-bottom: 10px;
    border-bottom: 1px solid #d0e0f5;
    margin-top: 0.4em;
    display: flex;
    justify-content: center;
}

.s03-risk-wrap .s03-risk-box {
    width: 60%;
}

/* リスク要因ボックス */
.s03-risk-box {
    border: 2px solid #0087cf;
    border-radius: 10px;
    padding: 14px 18px;
}

/* リスク要因タイトル */
.s03-risk-title {
    font-weight: 900;
    color: #0087cf;
    font-size: 1em;
    margin: 0 0 8px;
}

/* 画像 全幅 */
.s03-img-wide {
    max-width: 100%;
}

/* ポイントリスト（縦並びボックス群） */
.s03-point-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 1.2em;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* ポイントアイテム */
.s03-point-item {
    border: 2px solid #0087cf;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}

/* ポイントテキスト */
.s03-point-text {
    margin: 0;
    font-weight: 400;
    color: #1a6b9e;
}

/* 検査方法ボックス */
.s03-method-box {
    background: #e8f4fb;
    border-left: 4px solid #0087cf;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 1em 0;
}

/* 検査方法タイトル */
.s03-method-title {
    font-weight: 700;
    color: #0087cf;
    margin: 0 0 6px;
}

/* 注意フレックスラッパー */
.s03-caution-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* 注意アイコン */
.s03-caution-icon {
    font-size: 2.8em;
    color: #e05a00;
    flex-shrink: 0;
    margin-top: 2px;
}

/* 注意タイトル */
.s03-caution-title {
    margin-bottom: 0.3em;
}

/* ボックス 上余白 */
.s03-box-mt {
    margin-top: 1em;
}

/* margin: 0 */
.s03-p-m0 {
    margin: 0;
}

/* ==========================================
   本文内の強調テキスト（strongタグ）
   太字をやめ、落ち着いたブルーで目立たせる
   ========================================== */
.article-detail-body strong,
.zf-body-text strong,
.kn-item-body strong,
.kn-change-list strong,
.kn-body-list strong,
.kn-sub-list strong,
.kn-note strong,
.article-intro strong,
.zf-trend-text strong,
.zf-ninui-body strong,
.recipe-step-text strong,
.recipe-point strong {
    font-weight: 400;
    color: #1a6b9e;
}

/* margin-bottom: 0 */
.s03-p-mb0 {
    margin-bottom: 0;
}

/* ==========================================
   健康づくり カテゴリーインデックスページ
   ========================================== */
.category-page-header {
    background-color: #fff;
    padding: 28px 24px 24px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.category-page-eyebrow {
    font-size: 0.72em;
    color: #888;
    letter-spacing: 0.12em;
    margin: 0 0 8px;
}

.category-page-title {
    font-size: 1.7em;
    font-weight: 900;
    color: #0087cf;
    line-height: 1.45;
    margin: 0 0 12px;
}

.category-page-desc {
    font-size: 0.88em;
    font-weight: 400;
    color: #000;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 767px) {
    .category-page-title {
        font-size: 1.4em;
    }
}

/* ── メンバー写真 ── */
.kn-member-fig {
    margin: 16px 0 0;
    padding: 0;
}

.kn-member-img {
    width: 100%;
    height: auto;
    display: block;
}

.kn-member-caption {
    font-size: 0.78em;
    color: #000;
    font-weight: 400 !important;
    line-height: 1.6;
    margin-top: 8px;
    text-align: left;
}

/* ── PR LINE ── */
.pr-line-wrap {
    padding: 0 20px;
    margin: 32px 0 8px;
    line-height: 0;
}

.pr-line-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Blancnet+ ── */
.kn-blancnet-btn-wrap {
    margin-top: 1.25rem;
}

.kn-blancnet-box {
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding: 14px 18px;
    border: 2px solid #4a90d9;
    border-radius: 10px;
    background: #fff;
}

.kn-blancnet-dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 0.9em;
}

.kn-blancnet-dl dt {
    font-weight: 400;
    white-space: nowrap;
    color: #4a90d9;
}

.kn-blancnet-dl dd {
    margin: 0;
    font-weight: 400;
}