/* NutriMap Japan トップページ改修デザイン（デザイン案 nutrimap-japan.html 由来）
   CSPのためインラインCSSを外部化。ネイティブCSSネストで .home-v2 にスコープし
   他ページ・共通chromeへ影響させない。生成元=デザイン案。 */
.home-v2 {
        color-scheme: only light;
        & {
            --primary: #126735;
            --primary-light: #eaf4ed;
            --accent: #e67e22;
            --text-main: #333333;
            --text-sub: #666666;
            --bg-gray: #f8f9fa;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --border: #e0e0e0;
        }

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

        & {
            font-family: 'Noto Sans JP', sans-serif;
            color: var(--text-main);
            background-color: #ffffff;
            line-height: 1.6;
        }

        a {
            color: inherit;
            text-decoration: none;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- Header --- */
        header {
            border-bottom: 1px solid var(--border);
            padding: 15px 0;
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-svg {
            width: 36px;
            height: 36px;
        }
        .logo-leaf { font-size: 30px; line-height: 1; }

        /* トップは h1（サイト名が主題）、他ページは .logo-title（span）＝各ページの h1 を唯一にする
           SEO 対応（2026-07-13）。span は inline なので display:block を明示し、h1 と同一表示にする。 */
        .logo-text h1,
        .logo-text .logo-title {
            display: block;
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
            line-height: 1.2;
        }

        .logo-text p {
            font-size: 11px;
            color: var(--text-sub);
        }

        nav ul {
            display: flex;
            gap: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        nav ul li a:hover {
            color: var(--primary);
        }

        .header-actions {
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: var(--text-sub);
            font-weight: 500;
        }

        .action-item {
            text-align: center;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .action-svg {
            width: 22px;
            height: 22px;
            fill: var(--text-sub);
        }

        /* --- Hero Section (修正版：画像鮮明＋文字視認性UP) --- */
        /* 背景画像は CSS background でなく実 <img>（.hero-bg-img）で敷く：コンテンツ画像は
           描画優先度が高く LCP がフォント等に引きずられない（index.html の <picture> と対）。 */
        .hero {
            position: relative;
            height: 549px;   /* 全幅一定の帯高（広い画面で伸び続けるのを防ぐ）。画像は cover で表示 */
            overflow: hidden;
        }
        .hero .hero-bg-img {
            position: absolute; top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover; object-position: center top;
            z-index: 0;   /* ::after(z1)・.hero-overlay(z2) の下＝従来の背景と同じ重なり */
        }
        .hero::before { content:''; display:block; padding-top:31.25%; } /* 画像比2243:701。狭幅(≤992px)はこの比率で高さ決定／広幅はheight:426px固定が優先 */
        /* 両側下の円の切れ込み（白がページ色で下角から食い込む） */
        .hero::after {
            content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
            /* お手本実測の円を比率で再現：中心(50%, 画像上方)・半径248%。下端のみ薄く立ち上がる上からの円 */
            background: radial-gradient(ellipse 365% 1168% at 50% -1068%, rgba(255,255,255,0) 99.9%, #fff 99.94%);
        }
        .hero-overlay {
            position:absolute; inset:0;
            max-width:1200px; margin:0 auto;
            display:flex; flex-direction:column; justify-content:flex-start;
            padding:70px 60px 0; z-index:2;  /* 上余白は固定（%だと幅に比例して肥大しコンテンツが下にずれる） */
        }


        .hero-title {
            font-size: 52px;
            font-weight: 900;
            color: var(--primary);
            letter-spacing: 3px;
            text-shadow: 0 1px 0 rgba(255,255,255,.6);
        }

        .hero-subtitle {
            font-size: 16px;
            color: #2b3a30;
            margin-top: -2px;
            font-weight: 700;
        }

        .search-container {
            max-width: 660px;
            margin: 88px 0 0 0;
            display: flex;
            align-items: center;
            background: #fff;
            padding: 6px;
            border-radius: 50px;
            box-shadow: 0 12px 34px rgba(0,0,0,0.12);
        }

        .search-ico { margin-left: 20px; margin-right: 4px; flex-shrink: 0; }
        .search-input {
            flex: 1;
            border: none;
            padding: 14px 18px;
            font-size: 16px;
            border-radius: 30px;
            outline: none;
        }

        .search-btn {
            background: var(--primary);
            color: #fff;
            border: none;
            padding: 10px 32px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .search-btn:hover {
            background: #0d4f28;
        }

        /* 入力クリア「×」ボタン（検索ボタンの直ぐ左・PC/スマホ両方）。入力がある時だけ表示。 */
        .search-clear {
            flex-shrink: 0;
            border: none;
            background: transparent;
            color: #9aa5a0;
            font-size: 27px;
            line-height: 1;
            cursor: pointer;
            padding: 6px 8px;
            margin: 0 2px;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .search-clear.is-visible { display: inline-flex; }
        .search-clear:hover { color: #444; }

        .popular-search {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 8px;
            margin-top: 14px;
            font-size: 13px;
            font-weight: 700;
            text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
        }

        .ps-label { color:#3f8a4c; display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.92); padding:5px 16px; border-radius:20px; border:1px solid var(--border); box-shadow:0 2px 5px rgba(0,0,0,0.05); white-space:nowrap; }
        /* 人気検索タグを2行(各5個)で表示。ラベルの右に縦並びの行コンテナを置くことで、
           1行目も2行目も「じゃがいも」の位置（ラベル右端）から揃って始まる。 */
        .ps-tags { display:flex; flex-direction:column; gap:8px; }
        .ps-row  { display:flex; flex-wrap:wrap; gap:8px; }
        .tag {
            background: rgba(255,255,255,.92);
            padding: 5px 16px;
            border-radius: 20px;
            border: 1px solid var(--border);
            color: var(--text-sub);
            transition: all 0.2s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .tag:hover {
            background: var(--primary-light);
            color: var(--primary);
            border-color: var(--primary);
        }

        /* --- Stats Counter --- */
        .stats-wrapper {
            margin-top: -102px;
            position: relative;
            z-index: 10;
            margin-bottom: 34px;
        }

        .stats-card {
            background: #fff;
            border-radius: 14px;
            padding: 30px;
            box-shadow: var(--shadow);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 15px;
            border-right: 1px solid var(--border);
            padding-right: 10px;
        }

        .stat-item:last-child {
            border-right: none;
            padding-right: 0;
        }

        .stat-icon-circle {
            width: 48px;
            height: 48px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .stat-icon-circle svg {
            width: 24px;
            height: 24px;
            fill: var(--primary);
        }

        .stat-info p {
            font-size: 12px;
            color: var(--text-sub);
            font-weight: 500;
        }

        .stat-info .num {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
        }

        .stat-info .unit {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-main);
            margin-left: 2px;
        }

        /* --- Category Grid --- */
        .categories {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .cat-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .cat-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
            border-color: #ccc;
        }

        .cat-icon-circle {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .cat-icon-circle svg {
            width: 22px;
            height: 22px;
            fill: #fff;
        }

        .cat-text h3 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .cat-text p {
            font-size: 12px;
            color: var(--text-sub);
        }

        /* --- Main Content Section (Articles & Ranking) --- */
        .main-layout {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        /* 最新記事ヘッダー：PCは「記事一覧を見る」を右端（従来通り）＝タイトルを margin-right:auto で
           左へ寄せ、右へ。モバイルではNEWの隣に来る（下の576px参照）。 */
        .articles-section .section-header { gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
        .articles-section .section-header .section-title { margin-right: auto; }  /* PC:これで記事一覧を見るを右端へ */
        .articles-section .section-header .btn-article-list { order: 2; }

        /* ヘッダーとタブの間の固定高サブバー：案内文⇔カテゴリCTAを同じ場所で入れ替えるので、
           カテゴリを押しても高さが変わらず記事カードが下にずれない。 */
        .articles-subbar {
            display: none;           /* PC(広幅)では非表示＝タブは従来どおりヘッダー直下。表示はモバイルmediaでのみ */
            align-items: center;
            min-height: 1.7rem;      /* 案内文/CTAの有無に関わらず高さを確保 */
            margin: 2px 0 8px;
        }
        .articles-scroll-note {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary);
        }
        .articles-scroll-note.is-hidden,
        .articles-cat-cta.is-hidden { display: none; }
        .articles-cat-cta {   /* 従来の btn-cat-more と同じタブ形式（ピルボタン） */
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            white-space: nowrap;
            background: #fff;
            border: 1px solid var(--primary);
            border-radius: 8px;
            padding: 6px 14px;
            transition: background 0.2s;
        }
        .articles-cat-cta svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
        .articles-cat-cta:hover { background: var(--primary-light); }

        .section-title {
            /* style.css の .section-title{display:flex} が漏れると子の NEW バッジが
               flex アイテム化して block 化される。design 同様 block に固定する。 */
            display: block;
            font-size: 22px;
            font-weight: 700;
            position: relative;
            padding-left: 15px;
            color: #111;
        }
        /* 「最新記事」タイトル横の NEW バッジ（22pxタイトルに見合う大きさ） */
        .title-new-badge {
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
            background: #c0392b;   /* 白文字とのコントラストAA(5.4:1) */
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 2px 7px;
            border-radius: 4px;
            position: relative;
            top: -2px;
        }

        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.41em;
            width: 5px;
            height: 0.86em;
            background: var(--primary);
            border-radius: 2px;
        }

        .btn-more {
            font-size: 13px;
            color: var(--text-sub);
            border: 1px solid var(--border);
            padding: 5px 16px;
            border-radius: 20px;
            background: #fff;
            font-weight: 500;
            transition: background 0.2s;
        }
        .btn-more:hover {
            background: var(--bg-gray);
        }

        /* 最新記事 カテゴリタブ（見た目のみ・VM準拠） */
        .article-tabs {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }
        /* タブは常に1段（Firefoxはテキスト描画がChromeより僅かに広く flex-wrap:wrap だと
           5個目が折り返すため）。あふれる場合のみ横スクロール・スクロールバーは非表示。 */
        .tab-list { display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
        .tab-list::-webkit-scrollbar { display: none; }
        .article-tab { flex-shrink: 0; }
        .article-tab {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-sub);
            background: #fff;
            border: 1px solid var(--border);
            padding: 7px 16px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .article-tab svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
        .article-tab:hover { border-color: var(--primary); color: var(--primary); }
        .article-tab.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }
        /* 最新記事タブ：各カテゴリのアイコン・枠色を記事カードのカテゴリバッジ色に合わせる
           （文字色は既定のグレーのまま＝ユーザー要望で文字色だけ元に戻す。背景も白のまま。
            選択中 .active＝緑塗りは従来どおり優先されるよう :not(.active) に限定。
            アイコンは既定 fill:currentColor で文字色に追従するため、ここで各カテゴリ色を明示指定）。
            色は article_cards.html の cat_badge と一致。 */
        #article-cat-tabs .article-tab[data-category="data_driven"]:not(.active)     { border-color: #8e44ad; }
        #article-cat-tabs .article-tab[data-category="data_driven"]:not(.active) svg { fill: #8e44ad; }
        #article-cat-tabs .article-tab[data-category="seasonal"]:not(.active)        { border-color: #126735; }
        #article-cat-tabs .article-tab[data-category="seasonal"]:not(.active) svg    { fill: #126735; }
        #article-cat-tabs .article-tab[data-category="event"]:not(.active)           { border-color: #16a085; }
        #article-cat-tabs .article-tab[data-category="event"]:not(.active) svg       { fill: #16a085; }
        #article-cat-tabs .article-tab[data-category="dynamic"]:not(.active)         { border-color: #b8860b; }
        #article-cat-tabs .article-tab[data-category="dynamic"]:not(.active) svg     { fill: #b8860b; }
        .btn-article-list {
            font-size: 13px;
            font-weight: 700;
            color: #336699;
            background: #fff;
            border: 1px solid #336699;
            padding: 7px 18px;
            border-radius: 8px;
            white-space: nowrap;
            transition: background 0.2s;
        }
        .btn-article-list:hover { background: #eef4ff; }
        /* 見出し右側（○○の記事一覧を見る › ＋ 記事一覧を見る） */
        .section-header-right { display: flex; align-items: center; gap: 14px; }
        .btn-cat-more {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 13px; font-weight: 700; color: var(--primary);
            white-space: nowrap; background: #fff;
            border: 1px solid var(--primary); border-radius: 8px;
            padding: 7px 18px; transition: background 0.2s;
        }
        /* 「○○の記事一覧を見る」に、押されたカテゴリタブと同じアイコンをJSで複製表示する。 */
        .btn-cat-more svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
        .btn-cat-more:hover { background: var(--primary-light); }
        .is-hidden { display: none; }

        /* Article Cards */
        .article-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        /* 日本の食品安全・リコール情報＝左(最新記事スタイルのカード2列) ＋ 旬の食材カレンダー(右・不動) */
        .safety-row { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; margin: 40px auto; }
        /* 食品安全・リコール情報も枠で囲む（最新記事・ランキングと同じスタイル）。
           上の main-layout と同一幾何（gap40＋左を-20px）にして、カレンダー幅=ランキング幅・間=20pxに揃える */
        .safety-main {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            margin-right: -30px;   /* 最新記事と同じ＝枠幅も間(10px)も上段と一致 */
        }
        /* 「国内の食品安全・リコール情報」＝タイトルが長いので、右リンク（○○の記事一覧を見る／記事一覧を見る）の余白を詰めてヘッダーを1行に保つ */
        .safety-main .section-header-right { gap: 8px; }
        .safety-main .btn-cat-more, .safety-main .btn-article-list { padding: 6px 11px; }
        .article-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
        .research-below { margin: 0 auto 40px; }
        .research-below .info-col { max-width: 777px; }  /* 国内の食品安全・リコール情報(safety-main)の枠幅に合わせる */
        /* 食品安全タブ：5個を1列に収めるため余白を詰める。Chromeでちょうど収まる幅だと
           Firefox(描画が僅かに広い)で末尾タブがはみ出すため、padding/gapを詰めて余裕を作る。 */
        #safety-cat-tabs { gap: 6px; }
        #safety-cat-tabs .article-tab { padding: 7px 12px; justify-content: center; }

        .article-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid var(--border);
            display: flex;
            flex-direction: column;
        }

        .article-img-wrapper {
            width: 100%;
            height: 132px;
            overflow: hidden;
            background: #eee;
        }

        .article-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
        .article-card:hover .article-img {
            transform: scale(1.05);
        }

        .article-body {
            padding: 16px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .badge {
            align-self: flex-start;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .badge.green { background: #eaf4ed; color: var(--primary); }
        .badge.blue { background: #eaf2f8; color: #2980b9; }
        .badge.orange { background: #fdf2e9; color: #a4560e; }   /* コントラストAA(4.8:1) */
        .badge.purple { background: #f3eafa; color: #8e44ad; }
        .badge.teal { background: #e8f6f3; color: #0e7261; }   /* コントラストAA(5.2:1) */
        .badge.gold { background: #fbf3df; color: #8a6508; }   /* コントラストAA(4.8:1) */
        /* 最重要ソース用＝塗りつぶし・白文字（赤系で強調）。リコール=明るい赤／違反=濃いボルドー */
        .badge.red { background: #c0392b; color: #fff; }
        .badge.bordeaux { background: #7b241c; color: #fff; }

        .article-card h4 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            line-height: 1.5;
            min-height: 48px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #111;
        }

        .article-card p {
            font-size: 12px;
            color: var(--text-sub);
            margin-bottom: 12px;
            height: 36px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .article-date {
            font-size: 11px;
            color: #757575;   /* コントラストAA */
            margin-top: auto;
        }

        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 25px;
        }

        .dot {
            width: 8px;
            height: 8px;
            background: var(--border);
            border-radius: 50%;
        }

        .dot.active {
            background: var(--primary);
            width: 18px;
            border-radius: 4px;
        }

        /* Ranking List */
        /* 最新記事もカード枠で囲む（人気記事ランキングと同じスタイル） */
        .articles-section {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            align-self: start;
            margin-right: -30px;   /* 枠の間を詰める調整は最新記事側で（ランキングは動かさない）。40px→10px（半分） */
        }
        /* 枠は「人気記事ランキング」のタイトルも含めてセクション全体に付ける */
        .ranking-section {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 20px;
            align-self: start;   /* グリッドで縦に引き伸ばさず、コンテンツ高さに収める */
        }
        .ranking-section .section-header { margin-bottom: 14px; }

        .ranking-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 0;
            position: relative;
            font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;  /* カードと書体を揃える */
        }
        /* 区切り線はテキストの入る幅のみ（番号・画像の下には引かない）。124px=番号36+間12+画像64+間12 */
        .ranking-item:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 124px;
            right: 0;
            bottom: 0;
            border-bottom: 1px solid #f0f0f0;
        }

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

        .rank-num {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .ranking-item:nth-child(1) .rank-num { background: #f1c40f; color: #fff; }
        .ranking-item:nth-child(2) .rank-num { background: #b2babb; color: #fff; }
        .ranking-item:nth-child(3) .rank-num { background: #d35400; color: #fff; }

        .rank-text {
            flex: 1;
            order: 2;
        }

        .rank-text h4 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 4px;
            line-height: 1.3;
            color: #333;
            /* 件名は必ず2行に収める（長い件名は…で省略）。行高を揃え全項目を同じ高さに。 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .rank-text span {
            font-size: 11px;
            color: #757575;   /* コントラストAA */
        }

        .rank-img {
            width: 64px;
            height: 64px;
            object-fit: cover;
            border-radius: 6px;
            background: #eee;
            flex-shrink: 0;
            order: 1;
        }

        /* --- Info Columns (3 Columns) --- */
        .info-columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 40px;
        }

        .info-col {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 17px 18px;
            display: flex;
            flex-direction: column;
        }

        .col-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 11px;
            display: flex;
            align-items: center;
            gap: 6px;
            color: #222;
        }

        .col-title svg {
            width: 18px;
            height: 18px;
        }

        .badge-new {
            background: #c0392b;   /* 白文字とのコントラストAA(5.4:1) */
            color: #fff;
            font-size: 10px;
            padding: 1px 5px;
            border-radius: 3px;
            margin-left: auto;
            font-weight: 700;
        }

        .info-list li {
            padding: 7px 0;
            border-bottom: 1px dotted var(--border);
            font-size: 13px;
            color: #444;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .info-list .date {
            color: #999;
            margin-right: 10px;
            font-weight: 500;
        }

        .col-more {
            /* design はランキングで <div>(block)。live は <a>(inline) なので
               margin-top:auto / text-align:center が効くよう block 化する。 */
            display: block;
            margin-top: auto;
            text-align: center;
            padding-top: 13px;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-main);
        }
        .col-more a:hover {
            color: var(--primary);
        }

        /* Calendar Styles */
        .calendar-box {
            text-align: center;
        }

        /* 海外の食品安全・リコール情報（テキスト一覧） */
        /* 高さを左「食品安全・リコール情報」枠に厳密に合わせる（グリッド行の高さまでstretch） */
        .overseas-safety { align-self: stretch; }
        /* タイトル下の下線＝左「食品安全・リコール情報」のタブ上端の高さに合わせる（padding-bottomで線位置を調整） */
        .overseas-safety .section-header { margin-bottom: 6px; padding-bottom: 25px; border-bottom: 1px solid var(--border); }
        /* 「安全情報をもっと見る」の上に区切り線 */
        .overseas-safety .col-more { border-top: 1px solid var(--border); padding-top: 14px; }
        /* 高さは左「国内」枠までstretch。余った縦余白を各項目の下線間へ均等配分し、
           下部に大きな空白を作らず国内枠の高さに揃える。 */
        .overseas-list { list-style: none; margin: 0; padding: 0; flex: 1; text-align: left; display: flex; flex-direction: column; justify-content: space-between; }
        .overseas-list li { padding: 11px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; line-height: 1.7; }
        /* バッジ＋件名を2行でクランプ＋高さ確保。日付は独立行。＝各項目を均一の3行に揃える。 */
        .ov-head { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; height: 42px; margin-bottom: 4px; }
        .ov-head .ov-src { position: relative; top: -1px; }
        .overseas-list li:last-child { border-bottom: none; }
        /* ソース名バッジ＝ライブ /safety と同じ薄ブルー(#EEF4FF)＋濃ブルー(#1A5276)。件名と同行に繋げる */
        /* 件名＋取得日をまとめて1本のリンクに（同一URL）。通常は下線なし、ホバーで件名を強調 */
        .ov-link { display: block; text-decoration: none; }
        .ov-src { display: inline-block; background: #EEF4FF; color: #1A5276; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; margin-right: 5px; }
        .ov-title { font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.3; color: #333; text-decoration: none; }
        .ov-link:hover .ov-title { color: var(--primary); text-decoration: underline; }
        /* 日付＝件名の下（ブロック・小さめグレー）。件名と同じ1本のリンクなのでホバーで下線 */
        .ov-date { display: block; font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif; font-size: 11px; color: #757575; }   /* コントラストAA */
        .ov-link:hover .ov-date { color: var(--primary); text-decoration: underline; }

        .calendar-month {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 25px;
            font-weight: 700;
            margin-bottom: 13px;
            font-size: 15px;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }

        .cal-item {
            text-align: center;
        }

        .cal-img {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            margin: 0 auto 6px auto;
            border: 1px solid var(--border);
            object-fit: cover;
            background: #fafafa;
        }

        .cal-item p {
            font-size: 11px;
            font-weight: 500;
            color: #333;
        }

        /* --- Banner --- */
        .bottom-banner {
            background: #eaf4ed;
            border-radius: 12px;
            padding: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
        }

        .banner-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .banner-icon-container {
            width: 55px;
            height: 55px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .banner-icon-container svg {
            width: 32px;
            height: 32px;
            fill: var(--primary);
        }

        .banner-text h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
        }

        .banner-text p {
            font-size: 13px;
            color: var(--text-sub);
            font-weight: 500;
        }

        .banner-btn {
            background: var(--primary);
            color: #fff;
            padding: 12px 28px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 14px;
            transition: background 0.2s;
        }
        .banner-btn:hover {
            background: #0d4f28;
        }

        /* --- Footer --- */
        footer {
            background: #fafafa;
            border-top: 1px solid var(--border);
            padding: 60px 0 25px 0;
            font-size: 13px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 34px;
        }

        .footer-info h2 {
            font-size: 20px;
            color: var(--primary);
            margin-bottom: 12px;
            font-weight: 700;
        }

        .footer-info p {
            color: var(--text-sub);
            line-height: 1.8;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .footer-col h3 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 18px;
            color: #111;
            border-bottom: 2px solid var(--primary);
            padding-bottom: 4px;
            display: inline-block;
        }

        .footer-col li {
            margin-bottom: 10px;
            color: var(--text-sub);
            font-weight: 500;
        }
        .footer-col li:hover {
            color: var(--primary);
            cursor: pointer;
        }
        .footer-col a { color: inherit; text-decoration: none; }
        /* 未実装ページ＝（予定）・赤色・非リンク */
        .footer-col li.footer-soon, .footer-col li.footer-soon:hover { color: #cc3333; cursor: default; }
        .footer-links .footer-soon { color: #cc3333; cursor: default; }

        .footer-bottom {
            border-top: 1px solid var(--border);
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--text-sub);
            font-weight: 500;
        }

        .footer-links {
            display: flex;
            gap: 20px;
        }
        .footer-links a:hover {
            color: var(--primary);
        }

        /* --- Responsive Design --- */
        @media (max-width: 992px) {
            /* 狭幅では固定426pxの帯をやめ、画像比に応じた高さに戻す（コンテンツ切れ防止）。
               統計カードも縦積みで高くなるため重なりを浅く。 */
            .hero { height: auto; overflow: visible; }
            .hero-overlay { padding: 4% 24px 0; }
            .stats-wrapper { margin-top: -24px; }
            .stats-card { grid-template-columns: repeat(2, 1fr); gap: 20px; }
            .categories { grid-template-columns: repeat(2, 1fr); }
            .main-layout { grid-template-columns: 1fr; }
            .articles-section { margin-right: 0; }   /* 縦積み時は右拡張を解除（はみ出し防止） */
            .safety-main { margin-right: 0; }
            /* グリッド項目は既定 min-width:auto で内容の最小幅まで縮まず画面右へはみ出す。
               縦積み時は 0 にして親幅に収める（横スクロール発生を防止）。 */
            .articles-section, .ranking-section, .safety-main, .overseas-safety { min-width: 0; }
            .article-grid { grid-template-columns: repeat(2, 1fr); }
            .info-columns { grid-template-columns: 1fr; }
            .safety-row { grid-template-columns: 1fr; }
            .research-below .info-col { max-width: none; }
            .footer-grid { grid-template-columns: 1fr; gap: 20px; }
            .bottom-banner { flex-direction: column; gap: 20px; text-align: center; }
            .banner-left { flex-direction: column; }
            nav { display: none; }
        }

        @media (max-width: 576px) {
            /* スマホ専用ヒーロー画像（正方形：上/中央が白＝タイトル用、食材が下＆左右）に差し替え。
               PCは横長バナーのまま。食材が下に見え、タイトルは上の白地に来るよう下端寄せで表示。 */
            .hero { margin-top: 15px; }
            /* スマホは <picture> の source(max-width:576px) がモバイル画像を選択。位置は従来の center bottom を踏襲 */
            .hero .hero-bg-img { object-position: center bottom; }
            /* タイトル・サブタイトルは中央揃え。両端が野菜に重なっても読めるよう白いにじみ(ハロー)を付与。 */
            .hero-title, .hero-subtitle { text-align: center; text-shadow: 0 0 5px #fff, 0 0 9px #fff, 0 0 13px #fff; }
            /* タイトルの位置微調整：右へ9px・上へ8px（累積） */
            .hero-title { transform: translate(9px, -8px); }
            /* スマホ: 人気検索の結果タグを6個・中央揃え（「人気検索」ラベルは左上のまま動かさない）。
               ps-row を display:contents で潰し、両行のタグを ps-tags 直下の1グループとして
               中央寄せで折り返す。2行目(6〜10位)は先頭1個だけ表示して計6個にする。 */
            .popular-search .ps-tags { flex-direction: row; flex-wrap: wrap; justify-content: center; align-self: stretch; }
            .popular-search .ps-tags .ps-row { display: contents; }
            .popular-search .ps-tags .ps-row:nth-child(2) .tag:nth-child(n+2) { display: none; }
            .stats-card { grid-template-columns: 1fr; }
            .stat-item { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
            .stat-item:last-child { border-bottom: none; }
            .categories { grid-template-columns: 1fr; }
            .article-grid { grid-template-columns: 1fr; }
            .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
            /* 見出し行を折り返し可に：右側CTA(安全情報を見る/記事一覧へ)が畳めず見出しを圧迫し
               画面右へはみ出す不具合を解消。タイトルは1行目・CTA群は次行へ。 */
            .section-header { flex-wrap: wrap; row-gap: 8px; }
            .section-header-right { flex-wrap: wrap; justify-content: flex-start; }
            .section-title { min-width: 0; }
            /* モバイルは「記事一覧を見る」を NEW の隣（タイトル直後）に。PCの右寄せ(margin-right:auto)を解除。
               狭い端末(≈360px)でも1行に収まるよう、この見出しのタイトル・ボタン・gapを縮める。 */
            /* スマホ：「記事一覧を見る」は右揃え（PC同様＝タイトルの margin-right:auto が効く）。
               案内文/CTAのサブバーは中央揃え、最新記事との間隔を詰める。
               タイトル(最新記事)は縮めず、ボタンだけ小さく＋nowrapで狭い端末でも1行に収める。 */
            /* 最新記事・国内食品安全(スマホのみ)：見出し行は折り返さず(nowrap)、タイトルを縮小可にして
               右のボタン(記事一覧を見る/安全情報を見る)をタイトルの後ろ(右)へ置く。最新記事は短いので
               NEWの隣に、国内食品安全はタイトルが長いので2行折返しでOK。すべてmedia内＝PCは不変。 */
            /* 最新記事(スマホ)：タイトルが短いので nowrap の flex で「記事一覧を見る」を右(=NEWの隣)へ。 */
            .articles-section .section-header { gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
            .articles-section .section-header .section-title { flex-shrink: 1; min-width: 0; }
            .articles-section .section-header-right { flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
            .articles-section .section-header-right .btn-article-list,
            .articles-section .section-header-right .btn-cat-more { font-size: 12px; padding: 5px 8px; white-space: nowrap; }
            /* 最新記事(スマホ専用サブバー)：base では display:none（PC非表示）。ここでのみ表示する。
               案内文⇔CTAを同じ固定高で入れ替える＝タブ押下でカードが下にずれない。 */
            .articles-subbar { display: flex; justify-content: center; min-height: 36px; margin: 0 0 8px; }
            /* スマホではヘッダー右の動的CTA(article-cat-more)は使わずサブバー側に出すので隠す
               （wireCatTabs が is-hidden を外してもこの規則で非表示を維持）。PCのCTAには無影響。 */
            .articles-section .section-header-right .btn-cat-more { display: none; }
            /* 国内食品安全(スマホ)：タイトルは22pxのまま通常フローで2段に流し、その文字の後ろに
               「安全情報を見る」をインラインで続ける。右カラム化しない＝タイトルを圧迫せず3段化しない。 */
            .safety-main .section-header { display: block; margin-bottom: 6px; }
            .safety-main .section-header .section-title { display: inline; }
            .safety-main .section-header .section-header-right { display: inline; }
            /* btn-article-list は常時表示なので inline-block でインライン整形。 */
            .safety-main .section-header-right .btn-article-list { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 12px; padding: 5px 8px; white-space: nowrap; }
            /* スマホでは動的CTA(safety-cat-more)はヘッダーに出さずサブバー側に出すので隠す
               （wireCatTabs が is-hidden を外してもこの規則で非表示を維持）。PCのCTAには無影響。 */
            .safety-main .section-header-right .btn-cat-more { display: none; }
        }
}

/* ── デザイン案のインライン style="" をクラス化（非adminはCSPでインラインstyle不可）── */
.home-v2 .action-svg { width: 24px; height: 24px; }
.home-v2 .stat-ico { width: 50px; height: 50px; flex-shrink: 0; }
.home-v2 .stat-info .stat-caption { font-size: 10px; line-height: 1.6; color: #757575; margin-top: 0; }   /* コントラストAA */
.home-v2 .ps-label { font-size: 13px; line-height: 1.6; }
.home-v2 .ps-label svg { flex-shrink: 0; }
.home-v2 .footer-tagline { font-size: 12px; max-width: 300px; color: #888; }
.home-v2 .col-more { cursor: pointer; }
.home-v2 .empty-note { color: var(--text-sub); grid-column: 1 / -1; padding: 20px 0; }
/* 記事カードをリンク化した際の下線・色を無効化（デザインは div 前提） */
.home-v2 a.article-card, .home-v2 a.ranking-item { color: inherit; text-decoration: none; }

/* タブ（安全ソース／最新記事カテゴリ）が横スクロール可能なことを示す視覚ヒント。
   スクロール可能な端にだけフェード＋シェブロン(‹ ›)を出す（JSで can-scroll-* を付与）。
   pointer-events:none でタブのクリックは妨げない。 */
.home-v2 .article-tabs { position: relative; }
.home-v2 .article-tabs::before,
.home-v2 .article-tabs::after {
    position: absolute; top: 0; bottom: 0; width: 40px;
    pointer-events: none; z-index: 3; opacity: 0; transition: opacity .2s;
    display: flex; align-items: center;
    font-size: 22px; font-weight: 700; color: var(--primary);
}
.home-v2 .article-tabs::before {
    content: '‹'; left: 0; justify-content: flex-start; padding-left: 4px;
    background: linear-gradient(to right, #fff 45%, rgba(255,255,255,0));
}
.home-v2 .article-tabs::after {
    content: '›'; right: 0; justify-content: flex-end; padding-right: 4px;
    background: linear-gradient(to left, #fff 45%, rgba(255,255,255,0));
}
/* スクロール可能な端のヒントは、点滅＋横スライドで「その方向にスクロールできる」ことを示す。 */
.home-v2 .article-tabs.can-scroll-left::before { animation: tab-hint-left 1.5s ease-in-out infinite; }
.home-v2 .article-tabs.can-scroll-right::after { animation: tab-hint-right 1.5s ease-in-out infinite; }
@keyframes tab-hint-right {
    0%, 100% { opacity: .2; transform: translateX(0); }
    50%      { opacity: 1; transform: translateX(6px); }
}
@keyframes tab-hint-left {
    0%, 100% { opacity: .2; transform: translateX(0); }
    50%      { opacity: 1; transform: translateX(-6px); }
}
@keyframes tab-hint-blink {   /* 動きを減らす設定用：位置は動かさず点滅のみ */
    0%, 100% { opacity: .2; }
    50%      { opacity: 1; }
}

/* 最新記事＋国内の食品安全・リコール情報(スマホのみ)：「← タブは左右にスクロールできます →」
   (.articles-subbar .articles-scroll-note＝#article-subbar と #safety-subbar の両方)の背景を
   白⇔淡いピンクでゆっくり点滅(ピル状)。既存の端ヒント(‹ ›)は残す(消さない)。タブ自体はアニメ
   しない。@media(max-width:576px)内なのでPC(≥577px)は不変。 */
@keyframes note-pink-breathe {
    0%, 100% { background-color: #ffffff; }   /* 白（点滅の起点） */
    50%      { background-color: #ffd9e6; }   /* 淡いピンク */
}
@media (max-width: 576px) {
    /* :not(.is-hidden) 必須：この規則(.home-v2 .articles-subbar .articles-scroll-note＝クラス3個)
       は .articles-scroll-note.is-hidden{display:none}(クラス2個)より詳細度が高いため、付けないと
       JS がタブ押下で付ける is-hidden を上書きし、案内文が隠れず CTA と二重表示になって崩れる。 */
    .home-v2 .articles-subbar .articles-scroll-note:not(.is-hidden) {
        display: inline-block;          /* inline span でも背景/アニメが確実に描画されるよう箱にする */
        padding: 3px 12px;
        border-radius: 999px;
        background-color: #ffffff;      /* 静的フォールバック＝白（点滅の起点）。アニメが動く端末では
                                           白⇔淡いピンクで点滅する */
        animation: note-pink-breathe 2.6s ease-in-out infinite;
    }
}
/* 注記：この案内文の点滅は「2.6秒のゆっくりした色変化」で、動き・点滅（flashing）ではないため
   Reduce Motion 環境でも許容範囲としてあえて止めない（端末で Reduce Motion がONでもパルスさせる）。
   ※以前ここで animation:none にしていたため、Reduce Motion 端末でパルスが出ていなかった。 */

/* ヘッダー「検索/メニュー」＝div ベース（button/details は div より2px高くなるため、デザイン通り
   div にして高さを一致させる）。メニューは JS で .open をトグルして開閉する。 */
.home-v2 .action-item[role="button"] { cursor: pointer; }
.home-v2 .action-menu { position: relative; }
.home-v2 .action-menu-toggle { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.home-v2 .header-menu-nav { display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); flex-direction: column; min-width: 190px; padding: 6px 0; z-index: 200; }
.home-v2 .header-menu-nav.open { display: flex; }
.home-v2 .header-menu-nav a { padding: 10px 18px; font-size: 14px; color: var(--text-main); }
.home-v2 .header-menu-nav a:hover { background: var(--primary-light); color: var(--primary); }

/* 旧トップ用 style.css .hero（緑グラデ・白字・中央寄せ・padding:3rem）が共通クラス .hero 経由で
   漏れるのを打ち消す。デザインは背景画像＋左寄せ＋余白は .hero-overlay 側で持つ。 */
.home-v2 .hero { text-align: left; padding: 0; color: var(--text-main); }
.home-v2 .hero-subtitle { opacity: 1; }

/* style.css の見出し h1（border-bottom:2px＋padding-bottom）がロゴ NutriMap Japan に下線＋
   高さを付けて全体を下にずらすのを打ち消す（デザインのロゴ h1 は下線なし）。 */
.home-v2 .logo-text h1 { border-bottom: none; padding-bottom: 0; }

/* ヘッダー「検索」を button 化した際の、ブラウザ既定のボタン枠・背景・フォントを消す
   （デザインの .action-item は div 前提で枠なし・親のfont-size:12px を継承）。 */
.home-v2 button.action-item { border: none; background: none; padding: 0; font: inherit; color: var(--text-sub); }

/* ヒーロー検索：候補ドロップダウンを検索窓(.search-container)内に置き、position:relative を基準に
   検索バー直下へ絶対配置する（wrap は使わない＝余白/高さがデザインからずれないため）。 */
.home-v2 .search-container { position: relative; }
.home-v2 #hero-dropdown { display: none; z-index: 10; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); max-height: 360px; overflow-y: auto; }

/* 候補ドロップダウンの表示は .show クラスで（CSPが JS の style.display をブロックするため）。 */
.home-v2 #hero-dropdown.show { display: block; }

/* .search-container を position:relative にすると配置済み要素として静的な人気検索タグより
   前面に描画され、検索バーの影(0.12/34px)がタグに被ってグレーに沈む。タグを影より前面へ上げる。
   （ドロップダウンは z-index:10 でタグより前面を維持） */
.home-v2 .popular-search { position: relative; z-index: 2; }

/* style.css の .hero p { margin:0 0 1.5rem } が subtitle(<p>) に margin-bottom:24px を付け、
   検索バーを24px下げていたのを打ち消す（デザインの subtitle は margin-bottom なし）。 */
.home-v2 .hero-subtitle { margin-bottom: 0; }

/* 検索候補ドロップダウンが統計カード(.stats-wrapper z-index:10)の背後に隠れる問題の修正。
   候補は検索窓(hero-overlay 内)から下方へ伸び統計カードと重なるため、hero-overlay を統計より
   前面(z-index:11)にして候補を最前面に出す。ヒーロー文言と統計カードは元々重ならない配置。 */
.home-v2 .hero-overlay { z-index: 11; }

/* 検索候補がヒーローの overflow:hidden でクリップされ、ヒーロー下端より下の候補が切れて
   見えなくなる問題を解消（候補は検索窓から下方へ伸びるため overflow を visible に）。
   背景画像は background-clip で常に要素内に収まるため見た目は不変。 */
.home-v2 .hero { overflow: visible; }
/* 候補項目の左右余白を広げ、文言が左に寄りすぎないようにする（検索窓の内側余白に合わせる）。 */
.home-v2 #hero-dropdown .dropdown-food-item { padding: 5px 18px; }

/* 検索窓の高さをデザイン(58px)に一致させる。input が CJKフォントの line-height:normal(≈1.5)を
   継承し6px高くなっていたのを、行高を詰めてデザインの高さに合わせる（top位置は元々一致）。 */

/* 「〜をすべて検索 →」を中央寄せ・大きめ・薄緑背景の目立つ行にする（左寄り小文字で寂しい印象の解消）。 */
.home-v2 #hero-dropdown .dropdown-more-link {
  display: block; text-align: center; padding: 12px 18px; margin-top: 4px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: var(--primary); border-top: 1px solid var(--border);
}
.home-v2 #hero-dropdown .dropdown-more-link:hover { background: #0d4f28; text-decoration: none; }

/* 検索入力の高さをデザイン案(58px)に一致。デザインの input は font-family 未指定でブラウザ既定
   (Arial系)＝行高が低い。ライブは style.css の input{font-family:inherit} で Noto Sans JP を継承し
   行高が高く64pxになっていた。デザインと同じく Arial 系にして 58px・文字位置も一致させる。 */
.home-v2 .search-input { font-family: Arial, "Helvetica Neue", sans-serif; }

/* トップのカード抜粋：style.css .article-body p{line-height:1.8} が漏れて行高が高くなり、
   height:36px に2行(43px)が収まらず2行目が縦に切れていた。行高を1.5に詰め2行を36pxに収める。 */
.home-v2 .article-card p { line-height: 1.5; }

/* 消費者庁(お知らせ=caa_news)カードの画像枠：一覧ページ(.article-card-thumb[data-cat=safety])と
   同じ濃紺グラデ背景＋お知らせアイコン中央。商品画像が無いソースを青地で統一する。 */
.home-v2 .safety-news-thumb {
    background: linear-gradient(135deg, #1a2a4a, #2c3e6a);
    position: relative;
}
.home-v2 .safety-news-title {
    position: absolute;
    left: 0; right: 0; top: 0;
    padding: 0.7rem 0.8rem 0;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-v2 .safety-news-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.5rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
}
.home-v2 .safety-news-badge {
    display: inline-block;
    background: #C0392B;
    color: #fff;
    font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.14rem 0.26rem;
    border-radius: 3px;
}
.home-v2 .safety-news-note {
    color: #fff;
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    white-space: nowrap;   /* トップは幅が狭いので1行固定（折返し防止） */
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* 厚生労働省(監視=mhlw_topics)カード：一覧と同じレターヘッド表示。home-v2 の画像枠は
   overflow:hidden で position 指定が無く .mhlw-card-* オーバーレイが効かないため、relative 化＋
   一覧同様 top center クロップにして「輸入食品 監視・検査命令情報」＋件名＋重要バッジを重ねる。 */
.home-v2 .article-img-wrapper.mhlw-thumb { position: relative; background: #fff; }
.home-v2 .article-img-wrapper.mhlw-thumb .article-img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
}

/* タブ切替時：旧カードをフェードアウト（htmx swap:0.3s 遅延中に付く .htmx-swapping）→
   差し替え→新カードをフェードイン。opacity のみでレイアウト・位置は不変。
   @keyframes はネスト不可のため .home-v2 ブロック外(トップレベル)に置く。 */
.home-v2 #articles-grid.htmx-swapping,
.home-v2 #safety-grid.htmx-swapping { opacity: 0; transition: opacity 0.3s ease; }
@keyframes homeCardsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.home-v2 #articles-grid.cards-anim,
.home-v2 #safety-grid.cards-anim { animation: homeCardsFadeIn 0.5s ease both; }
@media (prefers-reduced-motion: reduce) {
    .home-v2 #articles-grid.htmx-swapping,
    .home-v2 #safety-grid.htmx-swapping { transition: none; }
    .home-v2 #articles-grid.cards-anim,
    .home-v2 #safety-grid.cards-anim { animation: none; }
    /* 動きを減らす設定でも、スクロール可能なことに気づけるよう点滅は残す（横スライドのみ止める）。 */
    .home-v2 .article-tabs.can-scroll-left::before,
    .home-v2 .article-tabs.can-scroll-right::after { animation-name: tab-hint-blink; }
}

/* ── モバイル是正（狭幅専用＝PC表示には一切適用されない） ──
   既存の 992/576 media が未対応だった箇所：.hero-overlay が position:absolute のままだと
   モバイルで hero 高さが潰れ、絶対配置の中身に統計カードが重なる。静的配置で流し、
   タイトル等も狭幅向けに縮小する。すべて @media 内なので広幅(PC)は不変。 */
@media (max-width: 992px) {
  .home-v2 .hero { height: auto; overflow: visible; }
  .home-v2 .hero::before { display: none; }               /* アスペクト比スペーサを撤去 */
  /* relative=レイアウトは静的と同じ（高さ潰れなし）だが z-index:11 が有効になり、検索候補が
     統計カード(z-index:10)の前面に出る（static だと z-index が無効で候補が背後に隠れる）。 */
  .home-v2 .hero-overlay { position: relative; max-width: 100%; padding: 28px 20px 24px; }
  .home-v2 .hero-title { font-size: 34px; letter-spacing: 1px; line-height: 1.25; }
  .home-v2 .hero-subtitle { font-size: 14px; }
  .home-v2 .search-container { margin-top: 20px; max-width: 100%; }
  .home-v2 .search-input { min-width: 0; }
  .home-v2 .stats-wrapper { margin-top: 16px; }            /* 重なり解消（下に流す） */
}
@media (max-width: 560px) {
  .home-v2 .hero-title { font-size: 29px; letter-spacing: 0.5px; }
  /* サブタイトルは幅を抑えて（読点あたりで）2行に折り返し、タイトルより広がらないよう中央に。 */
  .home-v2 .hero-subtitle { font-size: 13.5px; max-width: 250px; margin-left: auto; margin-right: auto; }
  .home-v2 .hero-overlay { padding: 30px 18px 34px; }   /* タイトル上の余白 */
  .home-v2 .search-container { margin-top: 35px; }       /* サブタイトル下の余白（検索＋人気検索を画像より+5px下げる） */
  .home-v2 .popular-search { flex-direction: column; align-items: flex-start; }
  .home-v2 .search-input { font-size: 15px; padding: 12px 6px; }
  .home-v2 .search-btn { padding: 10px 16px; font-size: 15px; }
}

/* トップの mhlw(輸入食品違反)/caa(商品リコール) 画像カード右上の「重要」バッジ */
.home-v2 .safety-photo-thumb { position: relative; }
.home-v2 .safety-important-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    background: #C0392B;
    color: #fff;
    font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.14rem 0.26rem;
    border-radius: 3px;
}
/* トップの安全カード重要バッジを3種で統一（お知らせ=safety-news / 監視=mhlw-card / 輸入食品違反=safety-important）*/
.home-v2 .mhlw-card-badge {
    font-family: "BIZ UDPGothic", "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.14rem 0.26rem;
}
.home-v2 .safety-important-badge .sib-ico,
.home-v2 .safety-news-badge .sib-ico,
.home-v2 .mhlw-card-badge .sib-ico { position: relative; top: -0.08em; margin-left: -0.12em; margin-right: 0.05em; }

/* トップ下部（利用案内バナー→フッター）の間隔をデザイン案に一致させる。
   base.html の #main-content{padding-bottom:4rem} が design モックに無い分の +64px を生む。
   ホーム限定で打ち消し、バナーの margin-bottom(40px)だけを間隔にする。 */
.home-v2 #main-content { padding-bottom: 0; }

/* ヘッダー「メニュー」はモバイル用ハンバーガー。PCでは横ナビと同じリンクで重複するため隠すが、
   display:none で箱ごと消すと右側 actions が縮み中央ナビが右へずれるため、visibility:hidden で
   幅（レイアウト）は保持したまま見た目だけ消す＝メニュー表示時と同一配置を維持。
   横ナビが隠れる ≤992px でのみ実体表示する（検索アイコンはPC/モバイルとも表示のまま）。 */
.home-v2 #header-menu { visibility: hidden; }
@media (max-width: 992px) {
  .home-v2 #header-menu { visibility: visible; }
}
/* PCでは非表示メニュー枠を左・検索を右端に並べ替える（枠幅は保持したままなので中央ナビは不動）。 */
@media (min-width: 993px) {
  .home-v2 #header-search-toggle { order: 2; }
}

/* 共通ヘッダーを他ページで使うときのラッパ。div の箱があると header の position:sticky が
   その箱(=ヘッダー高)の中でしか効かずスクロールで流れるため、display:contents で箱自体を
   消し、header の containing block を body にして sticky を全域で効かせる。
   トップページ(body.home-v2)はこのクラスを使わないため無影響。 */
.nm-header-scope { display: contents; }

/* ── 共通ヘッダー2：ヘッダー内ライブ検索バー（site_header_nm2.html 専用） ── */
/* パーシャル2は右端アイコンの代わりに検索バーを持つ。メニューはモバイル専用（PCでは display:none）。 */
@media (min-width: 993px) {
  .nm-header-v2 #header-menu { display: none; }
}
.home-v2 .nm-header-search { position: relative; display: flex; align-items: center; }
.home-v2 .nm-header-search-input {
  width: 240px; height: 40px; padding: 0 62px 0 16px;
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 14px; color: var(--text-main); background: #fff; outline: none;
  font-family: 'Noto Sans JP', sans-serif;
}
.home-v2 .nm-header-search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(18, 103, 53, .08); }
/* 入力クリア「×」：検索ボタン(right:5px)の直ぐ左。入力がある時だけ表示（バー自体が≤992pxで非表示＝PC専用）。 */
.home-v2 .nm-header-search-clear {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; cursor: pointer;
  color: #9aa5a0; font-size: 21px; line-height: 1; padding: 2px 4px;
  display: none; align-items: center; justify-content: center;
}
.home-v2 .nm-header-search-clear.is-visible { display: flex; }
.home-v2 .nm-header-search-clear:hover { color: #444; }
.home-v2 .nm-header-search-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0;
}
.home-v2 .nm-header-search-btn:hover { background: var(--primary-light); }
.home-v2 .nm-header-search-btn .action-svg { width: 18px; height: 18px; }
.home-v2 #nm-header-search-spinner { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--text-sub); }
.home-v2 #nm-header-dropdown {
  display: none; position: absolute; top: 48px; right: 0; width: 340px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); z-index: 200; max-height: 60vh; overflow-y: auto; padding: 6px;
}
.home-v2 #nm-header-dropdown.show { display: block; }
.home-v2 #nm-header-dropdown .dropdown-food-item {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: 8px 14px; border-radius: 6px; color: var(--text-main); text-decoration: none;
}
.home-v2 #nm-header-dropdown .dropdown-food-item:hover { background: var(--primary-light); }
.home-v2 #nm-header-dropdown .dropdown-nut-item { }
.home-v2 #nm-header-dropdown .dropdown-food-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-v2 #nm-header-dropdown .dropdown-nut-tag { background: var(--primary); color: #fff; font-size: 11px; border-radius: 3px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; }
.home-v2 #nm-header-dropdown .dropdown-more-link {
  display: block; text-align: center; padding: 10px 14px; margin-top: 4px;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--primary);
  border-radius: 6px; text-decoration: none;
}
.home-v2 #nm-header-dropdown .dropdown-more-link:hover { background: #0d4f28; }
.home-v2 #nm-header-dropdown .dropdown-empty { font-size: 13px; color: var(--text-sub); padding: 10px 14px; margin: 0; }
@media (max-width: 992px) {
  .home-v2 .nm-header-search { display: none; }
}

/* ナビ位置をパーシャル1/2で統一：PCではヘッダーを grid(1fr auto 1fr)にし、ロゴ=左・ナビ=中央・
   アクション=右に配置。side 要素（検索アイコン枠 or 検索バー）の幅に依存せずナビを常に中央固定し、
   両パーシャルでリンク位置を一致させる。モバイルは従来flex。 */
@media (min-width: 993px) {
  .home-v2 header .container { display: grid; grid-template-columns: 1fr auto 1fr; }
  .home-v2 header .logo-area { justify-self: start; }
  .home-v2 header nav { justify-self: center; }
  .home-v2 header .header-actions { justify-self: end; }
}

/* パーシャル1(検索アイコンの縦積み項目=47px)とパーシャル2(検索バー入力=40px)でヘッダー高が
   5px 食い違うため、ヘッダー内コンテンツに min-height を与え両パーシャルを同一高(78px)に揃える。 */
.home-v2 header .container { min-height: 48px; }