/* ======================================================================
   福山NOTE — main.css
   コンセプト: 瀬戸内の港町×現代の暮らし
   ====================================================================== */

:root {
    --color-primary: #0E1F47;      /* 福山NOTE ブランド紺（ロゴカラー） */
    --color-primary-dark: #061230;
    --color-primary-bright: #15275E;
    --color-accent: #C67351;       /* 落ち着いた夕陽 */
    --color-rose: #A8334A;         /* 深いばら（福山市の花） */
    --color-rose-soft: #EFE2E4;
    --color-ink: #1A1A1A;
    --color-text: #1A1A1A;
    --color-text-soft: #5C5C5C;
    --color-text-mute: #8A8A8A;
    --color-bg: #F5F2EC;           /* クリーム */
    --color-bg-deep: #ECE7DC;      /* 深いクリーム */
    --color-surface: #FFFFFF;
    --color-border: #DDD6C6;       /* ヘアライン用 */
    --color-line: #EAE5D9;

    --cat-gourmet: #E63946;
    --cat-living:  #52B788;
    --cat-work:    #3A86FF;
    --cat-event:   #FF6B35;
    --cat-spot:    #0B7BA0;
    --cat-news:    #2D3047;

    --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', serif;
    --font-display: 'EB Garamond', 'Noto Serif JP', serif;

    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.06);

    --container: 1180px;
    --container-narrow: 760px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-text);
    background: var(--color-bg);
    font-feature-settings: "palt";
}
img, video, picture, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .7; }
ul, ol { padding-left: 1.4em; }
button { font: inherit; cursor: pointer; }

/* ---------- Layout ---------- */
.fn-container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.fn-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 20px; }

.fn-grid-main {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
    .fn-grid-main { grid-template-columns: 1fr 320px; gap: 48px; }
}

/* ---------- Header ---------- */
.fn-header {
    background: rgba(245,242,236,0.94);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.fn-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    max-width: var(--container);
    margin: 0 auto;
}

/* ヘッダー常設検索 */
.fn-header-search {
    display: none;
    align-items: center;
    margin-left: auto;
    background: rgba(0,0,0,0.04);
    border-radius: 999px;
    padding: 2px 4px 2px 12px;
    max-width: 240px;
    flex: 1;
    transition: background .2s;
}
.fn-header-search:focus-within {
    background: rgba(168,51,74,0.08);
    box-shadow: 0 0 0 2px rgba(168,51,74,0.15);
}
.fn-header-search input[type="search"] {
    border: 0;
    background: transparent;
    padding: 6px 8px;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    outline: none;
    font-family: inherit;
}
.fn-header-search button {
    background: transparent;
    border: 0;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--color-text-soft);
    display: flex;
    align-items: center;
    border-radius: 999px;
}
.fn-header-search button:hover { color: var(--color-rose); }

@media (min-width: 900px) {
    .fn-header-search { display: flex; }
}
.fn-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.fn-logo-mark {
    display: inline-block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.fn-logo-text {
    line-height: 1;
}
.fn-logo-text span {
    color: var(--color-ink);
    border-bottom: 2px solid var(--color-rose);
    padding-bottom: 1px;
}
.fn-logo:hover { opacity: 0.8; }

@media (max-width: 600px) {
    .fn-logo-mark { width: 32px; height: 32px; }
    .fn-logo { font-size: 17px; gap: 8px; }
}

.fn-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: 0;
    padding: 8px;
}
.fn-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: transform .2s, opacity .2s;
}
.fn-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fn-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fn-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.fn-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
}
.fn-nav.is-open { display: block; }
.fn-nav ul { list-style: none; padding: 0; margin: 0; }
.fn-nav li { border-bottom: 1px solid var(--color-line); }
.fn-nav li:last-child { border-bottom: 0; }
.fn-nav a {
    display: block;
    padding: 14px 8px;
    color: var(--color-text);
    font-weight: 500;
}

@media (min-width: 768px) {
    .fn-nav-toggle { display: none; }
    .fn-nav { display: block; position: static; border: 0; padding: 0; box-shadow: none; background: transparent; }
    .fn-nav ul { display: flex; gap: 4px; }
    .fn-nav li { border: 0; }
    .fn-nav a {
        padding: 8px 14px;
        font-size: 12px;
        letter-spacing: 0.12em;
        font-weight: 500;
        color: var(--color-text-soft);
    }
    .fn-nav a:hover { color: var(--color-ink); opacity: 1; }
}

/* ---------- Hero / Page Title ---------- */
.fn-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1395B8 100%);
    color: #fff;
    padding: 56px 20px 48px;
    text-align: center;
}
.fn-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: 0.03em;
}
.fn-hero-lead {
    font-size: 16px;
    max-width: 640px;
    margin: 0 auto;
    opacity: .9;
}

.fn-page-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 3vw, 30px);
    margin: 24px 0 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-primary);
}

/* ---------- Breadcrumbs ---------- */
.fn-breadcrumbs { padding: 16px 0 8px; font-size: 13px; color: var(--color-text-mute); }
.fn-breadcrumbs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.fn-breadcrumbs-item:not(:last-child)::after { content: " ›"; margin: 0 6px; color: var(--color-text-mute); }
.fn-breadcrumbs-item a { color: var(--color-text-soft); }

/* ---------- Main content area ---------- */
.fn-main { padding: 32px 0 64px; }

/* ---------- Card / Post item ---------- */
.fn-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 600px) { .fn-card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fn-card-grid { grid-template-columns: 1fr 1fr 1fr; } }

.fn-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}
.fn-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.fn-card-thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, #E0EEF4, #C5DEEA);
    overflow: hidden;
}
.fn-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fn-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
    letter-spacing: 0.05em;
}
.fn-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.fn-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 8px;
}
.fn-card-title a { color: var(--color-text); }
.fn-card-excerpt {
    font-size: 13px;
    color: var(--color-text-soft);
    margin: 0 0 12px;
    flex: 1;
}
.fn-card-meta {
    font-size: 12px;
    color: var(--color-text-mute);
    display: flex;
    gap: 12px;
}

/* ---------- Category sections (front page) ---------- */
.fn-cat-section { margin-bottom: 56px; }
.fn-cat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-border);
}
.fn-cat-heading h2 {
    font-family: var(--font-serif);
    font-size: 22px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fn-cat-heading h2 .fn-cat-icon { font-size: 26px; }
.fn-cat-heading .fn-cat-more {
    font-size: 13px;
    color: var(--color-text-soft);
    font-weight: 500;
}
.fn-cat-section[data-cat="gourmet"] .fn-cat-heading { border-bottom-color: var(--cat-gourmet); }
.fn-cat-section[data-cat="living"]  .fn-cat-heading { border-bottom-color: var(--cat-living); }
.fn-cat-section[data-cat="work"]    .fn-cat-heading { border-bottom-color: var(--cat-work); }
.fn-cat-section[data-cat="event"]   .fn-cat-heading { border-bottom-color: var(--cat-event); }
.fn-cat-section[data-cat="spot"]    .fn-cat-heading { border-bottom-color: var(--cat-spot); }
.fn-cat-section[data-cat="news"]    .fn-cat-heading { border-bottom-color: var(--cat-news); }

/* ---------- Single article ---------- */
.fn-article {
    background: var(--color-surface);
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}
@media (max-width: 600px) {
    .fn-article { padding: 20px; border-radius: 0; border-left: 0; border-right: 0; }
}

.fn-article-header { margin-bottom: 28px; }
.fn-article-cat-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
}
.fn-article-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 3.2vw, 32px);
    line-height: 1.45;
    margin: 0 0 16px;
    color: var(--color-text);
}
.fn-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
    color: var(--color-text-mute);
}

.fn-article-content {
    font-size: 16px;
    line-height: 1.95;
    color: var(--color-text);
}
.fn-article-content h2 {
    font-family: var(--font-serif);
    font-size: 24px;
    margin: 48px 0 20px;
    padding: 12px 0 12px 16px;
    border-left: 5px solid var(--color-primary);
    background: linear-gradient(90deg, rgba(11,123,160,0.06), transparent);
}
.fn-article-content h3 {
    font-size: 20px;
    margin: 36px 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--color-border);
}
.fn-article-content p { margin: 0 0 1.4em; }
.fn-article-content a { text-decoration: underline; text-underline-offset: 3px; }
.fn-article-content img { border-radius: var(--radius-md); margin: 24px auto; }
.fn-article-content blockquote {
    margin: 24px 0;
    padding: 18px 22px;
    background: #F4F6F8;
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
}
.fn-article-content ul, .fn-article-content ol {
    margin: 0 0 1.4em;
    padding-left: 1.6em;
}
.fn-article-content li { margin-bottom: 0.4em; }

.fn-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
}
.fn-article-content th,
.fn-article-content td {
    border: 1px solid var(--color-border);
    padding: 10px 14px;
    text-align: left;
}
.fn-article-content th { background: #F4F6F8; font-weight: 700; }

/* ---------- TikTok embed wrapper ---------- */
.fn-tiktok-embed {
    margin: 0 0 32px;
    display: flex;
    justify-content: center;
}

/* ---------- AdSense slot ---------- */
.fn-adsense-slot {
    margin: 32px auto;
    text-align: center;
    min-height: 100px;
}
.fn-adsense-slot::before {
    content: "広告";
    display: block;
    font-size: 11px;
    color: var(--color-text-mute);
    margin-bottom: 4px;
    letter-spacing: 0.1em;
}

/* ---------- Sidebar ---------- */
.fn-sidebar { display: flex; flex-direction: column; gap: 32px; }
.widget {
    background: var(--color-surface);
    padding: 22px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.widget-title {
    font-family: var(--font-serif);
    font-size: 16px;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primary);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 8px 0; border-bottom: 1px solid var(--color-line); font-size: 14px; }
.widget li:last-child { border-bottom: 0; }

/* ---------- Related posts ---------- */
.fn-related {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}
.fn-related-title {
    font-family: var(--font-serif);
    font-size: 20px;
    margin: 0 0 20px;
}

/* ---------- Footer ---------- */
.fn-footer {
    background: #1F2937;
    color: #D1D5DB;
    margin-top: 64px;
    padding: 48px 0 24px;
}
.fn-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
}
@media (min-width: 768px) {
    .fn-footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
.fn-footer-brand .fn-logo { color: #fff; font-size: 24px; }
.fn-footer-brand .fn-logo span { color: var(--color-accent); }
.fn-footer-desc { font-size: 13px; margin-top: 12px; max-width: 480px; color: #9CA3AF; }
.fn-footer-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: 0.05em;
}
.fn-footer-widget ul { list-style: none; padding: 0; margin: 0; }
.fn-footer-widget li { padding: 6px 0; font-size: 13px; }
.fn-footer-widget a { color: #D1D5DB; }
.fn-footer-widget a:hover { color: var(--color-accent); opacity: 1; }
.fn-footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #9CA3AF;
}

/* ---------- Search form ---------- */
.search-form {
    display: flex;
    gap: 6px;
}
.search-form input[type="search"] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}
.search-form button {
    padding: 9px 14px;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
}

/* ---------- Pagination ---------- */
.fn-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.fn-pagination a,
.fn-pagination span {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 14px;
}
.fn-pagination .current {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ---------- 404 / search-no-results ---------- */
.fn-empty {
    text-align: center;
    padding: 64px 20px;
}
.fn-empty h1 {
    font-family: var(--font-serif);
    font-size: 28px;
    margin: 0 0 16px;
}
.fn-empty p { color: var(--color-text-soft); margin-bottom: 24px; }
.fn-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
}
.fn-btn:hover { background: var(--color-primary-dark); opacity: 1; }

/* ---------- Utility ---------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ======================================================================
   MOBILE OPTIMIZATIONS — 全コンポーネント
   ====================================================================== */

@media (max-width: 768px) {
    /* 基本サイズ調整 */
    body { font-size: 15px; }
    .fn-container { padding: 0 16px; }
    .fn-main { padding: 32px 0 48px; }

    /* ヘッダー */
    .fn-header-inner { padding: 12px 16px; }
    .fn-logo { font-size: 19px; }

    /* ヒーロー（トップ） */
    .fn-hero-v2 { padding: 56px 16px 110px; }
    .fn-hero-v2-eyebrow { font-size: 10px; letter-spacing: 0.28em; padding: 0 28px; }
    .fn-hero-v2-eyebrow::before, .fn-hero-v2-eyebrow::after { width: 18px; }
    .fn-hero-tagline { font-size: 13px; padding: 0 20px; margin-bottom: 18px; }
    .fn-hero-tagline::before, .fn-hero-tagline::after { width: 12px; }
    .fn-hero-v2-lead { font-size: 13px; line-height: 1.8; margin-bottom: 24px; }
    .fn-hero-v2-badge { font-size: 11px; padding: 5px 12px 5px 8px; }
    .fn-hero-rose { width: 40px; height: 40px; top: 18px; left: 16px; }
    .fn-hero-sun { width: 60px; height: 60px; top: 36px; right: 8%; }
    .fn-hero-skyline { bottom: 56px; height: 60px; }

    /* カテゴリヒーロー */
    .fn-cat-hero { padding: 56px 16px 100px; }
    .fn-cat-hero-eyebrow { font-size: 10px; letter-spacing: 0.28em; padding: 0 28px; }
    .fn-cat-hero-skyline { height: 50px; bottom: 56px; }

    /* セクション間隔 */
    .fn-section { margin-bottom: 56px; }
    .fn-section-heading { margin-bottom: 24px; }
    .fn-section-heading-no { font-size: 10px; letter-spacing: 0.28em; }
    .fn-section-heading h2 { font-size: 19px; }
    .fn-section-heading .fn-more { font-size: 10px; letter-spacing: 0.14em; }

    /* チップ：小さめ・改行しやすく */
    .fn-section-chips { gap: 5px; margin-bottom: 20px; }
    .fn-section-chips .fn-chip { font-size: 11px; padding: 4px 10px; }
    .fn-chips { gap: 5px; }
    .fn-chip { font-size: 11px; padding: 5px 10px; }
    .fn-chip-tag { font-size: 10px; padding: 4px 8px; }

    /* フィルター */
    .fn-filters { padding: 16px 0; margin: 24px 0 32px; }
    .fn-filters-row { padding: 8px 0; }
    .fn-filters-label { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 4px; }

    /* カード */
    .fn-card-grid { gap: 20px; }
    .fn-card-title { font-size: 16px; }
    .fn-card-excerpt { font-size: 12px; }

    /* 記事ページ */
    .fn-article { padding: 18px; border-radius: 0; margin: 0 -16px; border-left: 0; border-right: 0; }
    .fn-article-header { margin-bottom: 20px; }
    .fn-article-title { font-size: 22px; line-height: 1.4; }
    .fn-article-meta { gap: 8px; font-size: 11px; }
    .fn-article-meta span { white-space: nowrap; }
    .fn-article-content { font-size: 15px; line-height: 1.9; }
    .fn-article-content h2 {
        font-size: 20px;
        margin: 36px 0 16px;
        padding: 8px 0 8px 12px;
        border-left-width: 4px;
    }
    .fn-article-content h3 { font-size: 17px; margin: 24px 0 12px; }
    .fn-article-content blockquote { padding: 14px 16px; font-size: 14px; }
    .fn-article-content ul, .fn-article-content ol { padding-left: 1.4em; }

    /* 要約ボックス・キーポイント・編集部メモ */
    .fn-summary-box { padding: 16px 18px; font-size: 13px; }
    .fn-keypoints { padding: 16px 18px; }
    .fn-keypoints-head { font-size: 14px; }
    .fn-keypoints li { font-size: 13px; padding: 6px 0 6px 22px; }
    .fn-editor-aside { padding: 14px 16px; font-size: 13px; }
    .fn-editor-aside-head { font-size: 12px; }

    /* CTA */
    .fn-article-cta { padding: 22px 18px; }
    .fn-article-cta-eyebrow { font-size: 10px; letter-spacing: 0.18em; }
    .fn-article-cta-title { font-size: 17px; margin-bottom: 12px; }
    .fn-article-cta ul { font-size: 12px; gap: 12px; margin-bottom: 14px; }
    .fn-article-cta .btn { font-size: 13px; padding: 11px 22px; }

    /* TIP / 警告 */
    .fn-tip, .fn-warn { padding: 12px 14px 12px 38px; font-size: 13px; }
    .fn-tip::before, .fn-warn::before { left: 12px; top: 12px; font-size: 15px; }

    /* テーブル：横スクロール + 文字小さく */
    .fn-table-wrap table { font-size: 12px; min-width: 480px; }
    .fn-table-wrap table thead th { padding: 8px 10px; font-size: 11px; }
    .fn-table-wrap table tbody td { padding: 8px 10px; font-size: 12px; }
    .fn-article-content table { font-size: 13px; }
    .fn-article-content th, .fn-article-content td { padding: 8px 10px; }

    /* 店舗カード：1カラム＋番号を見出し風に */
    .fn-shop-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px;
        margin: 12px 0;
    }
    .fn-shop-row-no {
        text-align: left;
        font-size: 26px;
        margin-bottom: 2px;
    }
    .fn-shop-row h3 { font-size: 16px; }
    .fn-shop-row-badge { font-size: 9px; padding: 2px 6px; }
    .fn-shop-row table { font-size: 12px; }
    .fn-shop-row table th { width: 80px; padding: 6px 10px; font-size: 10px; }
    .fn-shop-row table td { padding: 6px 10px; }
    .fn-shop-row-comment { font-size: 12px; padding: 10px 12px; }

    /* スタットカード */
    .fn-stat-cards { gap: 8px; }
    .fn-stat-card { padding: 12px 10px; }
    .fn-stat-card-num { font-size: 22px; }
    .fn-stat-card-label { font-size: 10px; }

    /* FAQ */
    .fn-faq summary { padding: 14px 16px; font-size: 14px; gap: 8px; }
    .fn-faq summary::after { font-size: 18px; }
    .fn-faq .faq-q-mark { width: 20px; height: 20px; font-size: 11px; }
    .fn-faq .faq-tag { font-size: 9px; padding: 2px 6px; margin-left: 0; display: block; margin-top: 4px; }
    .fn-faq-answer { padding: 14px 16px; font-size: 13px; line-height: 1.85; }
    .fn-faq-answer .faq-a-mark { width: 20px; height: 20px; font-size: 11px; }

    /* 関連記事リスト：縦並びに */
    .fn-related-list h2 { font-size: 18px; }
    .fn-related-list a { padding: 12px 4px; }
    .fn-related-list .related-cat { justify-self: start; font-size: 9px; padding: 2px 8px; }
    .fn-related-list .related-title { font-size: 14px; }
    .fn-related-list .related-date { font-size: 10px; text-align: left; }

    /* 著者ブロック */
    .fn-author-block {
        grid-template-columns: 44px 1fr;
        gap: 14px;
        padding: 18px;
    }
    .fn-author-avatar { width: 44px; height: 44px; font-size: 18px; }
    .fn-author-info-name { font-size: 14px; }
    .fn-author-info-org { font-size: 11px; }
    .fn-author-info-meta { font-size: 10px; line-height: 1.7; }

    /* TikTokブリッジ */
    .fn-tiktok-bridge { padding: 36px 16px; margin: 0 -16px 56px; }
    .fn-tiktok-bridge-header { margin-bottom: 20px; }
    .fn-tiktok-bridge-title { font-size: 18px; }
    .fn-tiktok-bridge-title .tt-icon { width: 28px; height: 28px; font-size: 16px; }
    .fn-tiktok-bridge-link { font-size: 10px; padding: 6px 14px; }
    .fn-tiktok-cards { gap: 10px; }

    /* Featured grid */
    .fn-featured-grid { gap: 16px; }
    .fn-card-hero-body { padding: 18px 20px; }
    .fn-card-hero-title { font-size: 17px; }
    .fn-card-hero-cat { font-size: 9px; padding: 3px 10px; }

    /* Ranking */
    .fn-ranking-item {
        grid-template-columns: 40px 80px 1fr;
        gap: 12px;
        padding: 12px 0;
    }
    .fn-ranking-num { font-size: 32px; }
    .fn-ranking-title { font-size: 13px; }
    .fn-ranking-cat { font-size: 8px; padding: 2px 6px; }

    /* Editor's Letter */
    .fn-letter { margin-top: 64px; }
    .fn-letter-inner { padding: 0 16px; }
    .fn-letter-title { font-size: 22px; margin-bottom: 24px; }
    .fn-letter-body { font-size: 14px; line-height: 2; }
    .fn-letter-body p::first-letter { font-size: 3em; }
    .fn-letter-quote { font-size: 15px; padding: 8px 0 8px 16px; margin: 24px 0; }

    /* CTA（最下部） */
    .fn-cta { padding: 48px 20px; margin-top: 56px; }
    .fn-cta-title { font-size: 22px; }
    .fn-cta-lead { font-size: 13px; }
    .fn-cta-actions { flex-direction: column; }
    .fn-cta-btn { width: 100%; justify-content: center; font-size: 13px; }

    /* フッター */
    .fn-footer { padding: 40px 0 24px; }
    .fn-footer-grid { gap: 24px; }
    .fn-footer-desc { font-size: 12px; }
    .fn-footer-widget-title { font-size: 12px; margin-bottom: 10px; }
    .fn-footer-widget li { font-size: 12px; padding: 4px 0; }
    .fn-footer-bottom { font-size: 11px; }

    /* パンくず：折り返しさせる */
    .fn-breadcrumbs { font-size: 11px; padding: 12px 0; }
    .fn-breadcrumbs-list { gap: 0; }
    .fn-breadcrumbs-item:last-child {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-width: 100%;
    }

    /* 広告（モバイル広告枠を整える） */
    .fn-adsense-mock, .fn-adsense-slot { margin: 24px 0; padding: 22px 12px; }

    /* tableのoverflow強制 */
    .fn-article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .fn-article-content table thead, .fn-article-content table tbody,
    .fn-article-content table tr { display: table-row-group; }
    .fn-article-content table thead { display: table-header-group; }
    .fn-article-content table tr { display: table-row; }
    .fn-article-content table th, .fn-article-content table td { white-space: normal; }
}

/* ─── 600px以下（小さめスマホ） ─── */
@media (max-width: 600px) {
    /* 記事タイトル更に縮小 */
    .fn-article-title { font-size: 19px; }
    .fn-article-content h2 { font-size: 18px; }
    .fn-article-content h3 { font-size: 16px; }

    /* ヒーローの装飾を控えめに */
    .fn-hero-v2-title { letter-spacing: 0.01em; }
    .fn-hero-rose { width: 32px; height: 32px; }
    .fn-hero-sun { width: 48px; height: 48px; }

    /* TikTok cards: 1カラムも許容 */
    .fn-tiktok-cards { grid-template-columns: repeat(2, 1fr); }

    /* Ranking: 番号を控えめ */
    .fn-ranking-item {
        grid-template-columns: 32px 70px 1fr;
        gap: 10px;
    }
    .fn-ranking-num { font-size: 26px; }

    /* Editor's letter: ドロップキャップを控えめ */
    .fn-letter-body p::first-letter { font-size: 2.6em; }

    /* CTA */
    .fn-article-cta { padding: 18px 14px; }
    .fn-article-cta-title { font-size: 15px; }
}

/* ─── 横長table のスクロール案内（モバイル）─── */
@media (max-width: 768px) {
    .fn-table-wrap {
        position: relative;
    }
    .fn-table-wrap::after {
        content: "← スワイプ →";
        display: block;
        text-align: center;
        font-size: 10px;
        color: var(--color-text-mute);
        letter-spacing: 0.08em;
        padding: 4px 0 0;
    }
}

/* ======================================================================
   TOP PAGE — Enhanced sections
   ====================================================================== */

/* ---------- Vivid Hero（鮮やかパターン） ---------- */
.fn-hero-v2 {
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 85% 15%, rgba(255,107,53,0.40), transparent 60%),
        radial-gradient(ellipse 60% 40% at 30% 25%, rgba(233,30,99,0.16), transparent 60%),
        radial-gradient(ellipse 70% 50% at 20% 90%, rgba(11,123,160,0.50), transparent 60%),
        linear-gradient(180deg, #0B7BA0 0%, #1395B8 45%, #FFB088 100%);
    color: #fff;
    padding: 84px 20px 140px;
    text-align: center;
    overflow: hidden;
}
.fn-hero-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}

/* 右上：夕陽（はっきり） */
.fn-hero-sun {
    position: absolute;
    top: 60px; right: 12%;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,235,180,0.95) 0%, rgba(255,200,140,0.7) 40%, rgba(255,107,53,0) 75%);
    pointer-events: none;
    filter: blur(0.5px);
    animation: fn-sun-glow 8s ease-in-out infinite;
}
@keyframes fn-sun-glow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.92; }
}

/* 左：ばらモチーフ */
.fn-hero-rose {
    position: absolute;
    top: 28px; left: 32px;
    width: 60px; height: 60px;
    opacity: 0.55;
    pointer-events: none;
}

/* 福山スカイライン */
.fn-hero-skyline {
    position: absolute;
    left: 0; right: 0;
    bottom: 56px;
    width: 100%;
    height: 90px;
    pointer-events: none;
    opacity: 0.85;
    display: block;
}

/* 波形区切り */
.fn-hero-wave {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    width: 100%; height: 60px;
    pointer-events: none;
    display: block;
}
.fn-hero-v2-inner {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    z-index: 2;
    text-align: center;
}
.fn-hero-v2-eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #FFE0CC;
    margin-bottom: 18px;
    font-weight: 600;
    position: relative;
    padding: 0 36px;
}
.fn-hero-v2-eyebrow::before,
.fn-hero-v2-eyebrow::after {
    content: "";
    position: absolute;
    top: 50%; width: 24px; height: 1px;
    background: rgba(255,224,204,0.7);
}
.fn-hero-v2-eyebrow::before { left: 0; }
.fn-hero-v2-eyebrow::after { right: 0; }

.fn-hero-v2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px 6px 12px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
    margin-bottom: 24px;
    text-decoration: none;
    transition: background .2s;
}
.fn-hero-v2-badge:hover { background: rgba(255,255,255,0.28); opacity: 1; }
.fn-hero-v2-badge .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #FF6B35;
    box-shadow: 0 0 0 4px rgba(255,107,53,0.3);
    animation: fn-pulse 2s ease-in-out infinite;
}
@keyframes fn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}

.fn-hero-v2-title {
    font-family: var(--font-serif);
    font-size: clamp(34px, 6vw, 60px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 16px;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,0.15);
}
.fn-hero-v2-title em {
    font-style: normal;
    color: #FFD9B8;
    background: linear-gradient(180deg, transparent 78%, rgba(255,107,53,0.55) 78%);
    padding: 0 4px;
}

/* 福山弁タグライン */
.fn-hero-tagline {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 24px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(14px, 1.4vw, 16px);
    color: #FFD9B8;
    letter-spacing: 0.06em;
    position: relative;
    padding: 0 28px;
}
.fn-hero-tagline::before,
.fn-hero-tagline::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 1px;
    background: rgba(255,217,184,0.6);
}
.fn-hero-tagline::before { left: 0; }
.fn-hero-tagline::after  { right: 0; }

.fn-hero-v2-lead {
    font-size: clamp(14px, 1.5vw, 16px);
    max-width: 620px;
    margin: 0 auto 32px;
    color: #fff;
    opacity: 0.95;
    line-height: 1.9;
}

/* カテゴリ：白透過ピル + 絵文字対応 */
.fn-hero-v2-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    border: 0;
}
.fn-hero-v2-cats a {
    display: inline-block;
    padding: 8px 18px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.02em;
    font-weight: 500;
    transition: background .2s, transform .2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.fn-hero-v2-cats a:hover {
    background: rgba(255,255,255,0.28);
    transform: translateY(-1px);
    opacity: 1;
}

@media (max-width: 600px) {
    .fn-hero-v2-cats a { padding: 6px 14px; font-size: 12px; }
}

/* ---------- Featured (1 large + 3 small asymmetric) ---------- */
.fn-section {
    margin: 0 0 64px;
}
.fn-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-border);
}
.fn-section-heading h2 {
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.6vw, 26px);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fn-section-heading h2 .fn-icon { font-size: 1.1em; }
.fn-section-heading .fn-more {
    font-size: 13px;
    color: var(--color-text-soft);
    font-weight: 500;
    white-space: nowrap;
}

.fn-featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 900px) {
    .fn-featured-grid {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: repeat(3, 1fr);
        gap: 12px 28px;
        min-height: 520px;
    }
    .fn-featured-grid > .fn-card-hero {
        grid-row: 1 / span 3;
        grid-column: 1;
    }
    .fn-featured-grid > .fn-card-mini {
        grid-column: 2;
    }
}

.fn-card-hero {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: transform .25s ease, box-shadow .25s ease;
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 320px;
}
.fn-card-hero:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    opacity: 1;
}
.fn-card-hero-thumb {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #E0EEF4, #C5DEEA);
}
.fn-card-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fn-card-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.6) 90%);
}
.fn-card-hero-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 24px 28px;
    color: #fff;
    z-index: 2;
}
.fn-card-hero-cat {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}
.fn-card-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px;
}
.fn-card-hero-meta {
    font-size: 12px;
    opacity: 0.85;
}

.fn-card-mini {
    position: relative;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    padding: 14px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: transform .2s ease, box-shadow .2s ease;
}
.fn-card-mini:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.fn-card-mini-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #E0EEF4, #C5DEEA);
}
.fn-card-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fn-card-mini-cat {
    position: absolute; top: 6px; left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
.fn-card-mini-body { display: flex; flex-direction: column; justify-content: center; }
.fn-card-mini-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 6px;
}
.fn-card-mini-title a { color: var(--color-text); }
.fn-card-mini-meta {
    font-size: 11px;
    color: var(--color-text-mute);
}

/* ---------- TikTok Bridge Section ---------- */
.fn-tiktok-bridge {
    position: relative;
    margin: 0 -20px 64px;
    padding: 48px 20px;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(255,107,53,0.12), transparent 60%),
        radial-gradient(ellipse 60% 80% at 0% 100%, rgba(11,123,160,0.10), transparent 60%),
        linear-gradient(135deg, #FAFAF7 0%, #F0F0EB 100%);
}
.fn-tiktok-bridge::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(135deg, transparent 49%, rgba(255,255,255,0.4) 50%, transparent 51%);
    background-size: 30px 30px;
    pointer-events: none;
    opacity: 0.3;
}
.fn-tiktok-bridge-inner {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    z-index: 1;
}
.fn-tiktok-bridge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.fn-tiktok-bridge-title {
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.6vw, 26px);
    margin: 0;
    display: flex; align-items: center; gap: 10px;
}
.fn-tiktok-bridge-title .tt-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: #000; color: #fff;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
}
.fn-tiktok-bridge-sub { font-size: 13px; color: var(--color-text-soft); margin-top: 4px; }
.fn-tiktok-bridge-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
    background: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
}
.fn-tiktok-bridge-link:hover { background: var(--color-text); color: #fff; opacity: 1; }

.fn-tiktok-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 768px) { .fn-tiktok-cards { grid-template-columns: repeat(4, 1fr); } }

.fn-tiktok-card {
    position: relative;
    aspect-ratio: 9 / 14;
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
    color: #fff;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.fn-tiktok-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); opacity: 1; }
.fn-tiktok-card-bg {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
    z-index: 2;
}
.fn-tiktok-card-thumb {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #3A86FF, #FF006E);
}
.fn-tiktok-card-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 3;
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.9);
    color: #000;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    padding-left: 4px;
}
.fn-tiktok-card-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px 14px 14px;
    z-index: 4;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.fn-tiktok-card-views {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 4px;
    display: flex; align-items: center; gap: 4px;
}

/* ---------- Ranking ---------- */
.fn-ranking-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 768px) { .fn-ranking-list { grid-template-columns: 1fr 1fr; } }

.fn-ranking-item {
    display: grid;
    grid-template-columns: 56px 110px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
    color: inherit;
}
.fn-ranking-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); opacity: 1; }
.fn-ranking-num {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    text-align: center;
    font-style: italic;
    letter-spacing: -0.03em;
}
.fn-ranking-item[data-rank="1"] .fn-ranking-num { color: #D4A437; }
.fn-ranking-item[data-rank="2"] .fn-ranking-num { color: #9AA0A6; }
.fn-ranking-item[data-rank="3"] .fn-ranking-num { color: #B87333; }
.fn-ranking-thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: linear-gradient(135deg, #E0EEF4, #C5DEEA);
    position: relative;
}
.fn-ranking-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fn-ranking-thumb-emoji {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; opacity: 0.45;
}
.fn-ranking-body { min-width: 0; }
.fn-ranking-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    margin-bottom: 6px;
}
.fn-ranking-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
    color: var(--color-text);
}

/* ---------- CTA Follow Banner ---------- */
.fn-cta {
    margin: 64px 0 0;
    padding: 48px 24px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 100% 0%, rgba(255,107,53,0.25), transparent 60%),
        linear-gradient(135deg, #0B7BA0 0%, #075975 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.fn-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.06) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
}
.fn-cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.fn-cta-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFD9B8;
    margin-bottom: 10px;
}
.fn-cta-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 3vw, 30px);
    margin: 0 0 12px;
}
.fn-cta-lead {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.8;
    margin: 0 0 24px;
}
.fn-cta-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.fn-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform .15s ease, opacity .15s;
}
.fn-cta-btn-primary {
    background: #fff;
    color: #0B7BA0;
}
.fn-cta-btn-primary:hover { transform: translateY(-2px); opacity: 1; }
.fn-cta-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.4);
}
.fn-cta-btn-secondary:hover { background: rgba(255,255,255,0.1); opacity: 1; transform: translateY(-2px); }

/* ---------- Section divider with category accent ---------- */
.fn-cat-section .fn-section-heading h2::before {
    display: none; /* fallback */
}
.fn-cat-section .fn-section-heading { border-bottom-color: var(--color-border); }

/* ---------- Editorial section heading (numbered) ---------- */
.fn-section-heading {
    display: block;
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    position: relative;
}
.fn-section-heading::after { display: none; }
.fn-section-heading-no {
    display: block;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--color-rose);
    font-weight: 600;
    margin-bottom: 6px;
}
.fn-section-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}
.fn-section-heading h2 {
    font-family: var(--font-serif);
    font-size: clamp(22px, 3.2vw, 32px);
    margin: 0;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-ink);
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.fn-section-heading h2 .fn-icon { font-size: 0.8em; opacity: 0.7; }
.fn-section-heading .fn-more {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}
.fn-section-heading .fn-more:hover {
    color: var(--color-rose);
    border-bottom-color: var(--color-rose);
    opacity: 1;
}

/* ---------- Refined Card ---------- */
.fn-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    transition: opacity .2s;
}
.fn-card:hover { transform: none; box-shadow: none; }
.fn-card:hover .fn-card-title a { color: var(--color-rose); }
.fn-card-thumb {
    border-radius: var(--radius-sm);
    aspect-ratio: 4 / 3;
}
.fn-card-cat {
    background: var(--color-ink);
    color: #fff;
    padding: 3px 10px;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 0;
    top: 12px;
    left: 12px;
}
.fn-card-body { padding: 18px 0 0; }
.fn-card-title {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}
.fn-card-title a { color: var(--color-ink); transition: color .2s; }
.fn-card-excerpt {
    font-size: 13px;
    color: var(--color-text-soft);
    line-height: 1.8;
}
.fn-card-meta {
    font-size: 11px;
    color: var(--color-text-mute);
    letter-spacing: 0.1em;
    margin-top: 12px;
}

/* ---------- ばらアクセント（リファイン版） ---------- */
.fn-rose-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    color: var(--color-rose);
}

/* ---------- Sidebar カテゴリツリー ---------- */
.fn-cat-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fn-cat-nav-parent {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-line);
}
.fn-cat-nav-parent:last-child { border-bottom: 0; }
.fn-cat-nav-main {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-ink);
    padding: 4px 0;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color .2s;
}
.fn-cat-nav-main:hover { color: var(--color-rose); opacity: 1; }

/* カテゴリ別アクセント（左罫線） */
.fn-cat-nav-parent[data-cat="gourmet"] { border-left: 2px solid #8B2635; padding-left: 10px; }
.fn-cat-nav-parent[data-cat="spot"]    { border-left: 2px solid #1A4A5A; padding-left: 10px; }
.fn-cat-nav-parent[data-cat="living"]  { border-left: 2px solid #4F6F52; padding-left: 10px; }
.fn-cat-nav-parent[data-cat="event"]   { border-left: 2px solid #C67351; padding-left: 10px; }
.fn-cat-nav-parent[data-cat="kids"]    { border-left: 2px solid #C49A3F; padding-left: 10px; }
.fn-cat-nav-parent[data-cat="work"]    { border-left: 2px solid #2D3047; padding-left: 10px; }
.fn-cat-nav-parent[data-cat="biz"]     { border-left: 2px solid #1B3A4B; padding-left: 10px; }

.fn-cat-nav-children {
    list-style: none;
    padding: 6px 0 4px 14px;
    margin: 4px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.fn-cat-nav-children li {
    padding: 0 !important;
    border: 0 !important;
    margin: 0;
}
.fn-cat-nav-children a {
    display: block;
    font-size: 11.5px;
    color: var(--color-text-soft);
    padding: 4px 4px 4px 12px;
    position: relative;
    text-decoration: none;
    line-height: 1.5;
    letter-spacing: 0.01em;
    transition: color .2s;
}
.fn-cat-nav-children a::before {
    content: "·";
    position: absolute;
    left: 2px;
    color: var(--color-text-mute);
    font-weight: 700;
}
.fn-cat-nav-children a:hover {
    color: var(--color-rose);
    opacity: 1;
}

@media (max-width: 600px) {
    .fn-cat-nav-children { grid-template-columns: 1fr 1fr; gap: 0; }
    .fn-cat-nav-children a { font-size: 11px; }
}

/* ---------- Sidebar タグクラウド ---------- */
.fn-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.fn-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--color-text-soft);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.fn-tag-chip::before { content: "#"; color: var(--color-text-mute); }
.fn-tag-chip:hover {
    background: var(--color-rose);
    color: #fff;
    border-color: var(--color-rose);
    opacity: 1;
}
.fn-tag-chip:hover::before { color: rgba(255,255,255,0.7); }
.fn-tag-chip .count {
    font-size: 9px;
    color: var(--color-text-mute);
    margin-left: 2px;
}
.fn-tag-chip:hover .count { color: rgba(255,255,255,0.6); }

/* ---------- Sidebar Ranking ウィジェット ---------- */
.widget-ranking .widget-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.widget-ranking .widget-title-eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    color: var(--color-rose);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
}
.fn-sidebar-ranking {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fn-sidebar-ranking li {
    padding: 0;
    border-bottom: 1px dashed var(--color-line);
}
.fn-sidebar-ranking li:last-child { border-bottom: 0; }
.fn-sidebar-ranking a {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 10px 0;
    align-items: start;
    text-decoration: none;
    color: inherit;
    transition: opacity .2s;
}
.fn-sidebar-ranking a:hover { opacity: 1; }
.fn-sidebar-ranking a:hover .rank-title { color: var(--color-rose); }
.fn-sidebar-ranking .rank-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-mute);
    line-height: 1;
    text-align: center;
}
.fn-sidebar-ranking li:nth-child(1) .rank-num { color: #D4A437; }
.fn-sidebar-ranking li:nth-child(2) .rank-num { color: #9AA0A6; }
.fn-sidebar-ranking li:nth-child(3) .rank-num { color: #B87333; }
.fn-sidebar-ranking .rank-body { min-width: 0; }
.fn-sidebar-ranking .rank-cat {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-ink);
    padding: 2px 6px;
    border-radius: 0;
    margin-bottom: 4px;
}
.fn-sidebar-ranking .rank-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-ink);
    transition: color .2s;
}

/* ---------- CTA（鮮やかパターン） ---------- */
.fn-cta {
    margin: 80px 0 0;
    padding: 64px 24px;
    border-radius: 0;
    background:
        radial-gradient(ellipse at 0% 100%, rgba(233,30,99,0.18), transparent 55%),
        radial-gradient(ellipse at 100% 0%, rgba(255,107,53,0.25), transparent 60%),
        linear-gradient(135deg, #0B7BA0 0%, #075975 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 0;
}
.fn-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.06) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
}
.fn-cta-inner { position: relative; max-width: 640px; margin: 0 auto; }
.fn-cta-eyebrow {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFD9B8;
    margin-bottom: 10px;
    font-weight: 500;
}
.fn-cta-title {
    font-family: var(--font-serif);
    font-size: clamp(22px, 3vw, 30px);
    margin: 0 0 12px;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.4;
    font-weight: 700;
}
.fn-cta-lead {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    line-height: 1.8;
    margin: 0 0 24px;
    letter-spacing: 0.02em;
}
.fn-cta-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fn-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    transition: background .2s, color .2s, transform .15s;
}
.fn-cta-btn-primary {
    background: #fff;
    color: #0B7BA0;
}
.fn-cta-btn-primary:hover { transform: translateY(-2px); opacity: 1; }
.fn-cta-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.4);
}
.fn-cta-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; opacity: 1; transform: translateY(-2px); }

/* ---------- Featured grid refinements ---------- */
.fn-card-hero {
    border-radius: var(--radius-sm);
}
.fn-card-hero:hover { transform: none; box-shadow: none; opacity: 0.95; }
.fn-card-hero-cat {
    background: rgba(255,255,255,0.95);
    color: var(--color-ink);
    padding: 4px 12px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 0;
}
.fn-card-hero-title {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.fn-card-hero-meta {
    font-size: 11px;
    letter-spacing: 0.1em;
    opacity: 0.85;
}

.fn-card-mini {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: 14px 0;
    align-items: center;
    min-height: 0;
}
/* ヒーロー直後の最初のミニカードのみ上罫線を消す */
.fn-card-hero + .fn-card-mini { border-top: 0; padding-top: 0; }
.fn-card-mini:hover { transform: none; box-shadow: none; }
.fn-card-mini:hover .fn-card-mini-title { color: var(--color-rose); }
.fn-card-mini-thumb { border-radius: var(--radius-sm); }
.fn-card-mini-cat {
    background: var(--color-ink);
    color: #fff;
    border-radius: 0;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
}
.fn-card-mini-title {
    font-family: var(--font-serif);
    transition: color .2s;
}
.fn-card-mini-meta {
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* ---------- TikTok Bridge refinements ---------- */
.fn-tiktok-bridge {
    background: var(--color-bg-deep);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: 0 -20px 80px;
    padding: 56px 20px;
}
.fn-tiktok-bridge::after { display: none; }
.fn-tiktok-bridge-title {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.fn-tiktok-bridge-title .tt-icon {
    background: var(--color-ink);
    border-radius: 2px;
    font-family: var(--font-sans);
}
.fn-tiktok-bridge-sub {
    font-size: 12px;
    letter-spacing: 0.06em;
}
.fn-tiktok-bridge-link {
    background: transparent;
    border-radius: 0;
    border: 1px solid var(--color-ink);
    padding: 8px 18px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}
.fn-tiktok-bridge-link:hover { background: var(--color-ink); color: #fff; }

.fn-tiktok-card { border-radius: var(--radius-sm); }

/* ---------- Ranking refinements ---------- */
.fn-ranking-item {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: 16px 0;
}
.fn-ranking-item:hover { transform: none; box-shadow: none; }
.fn-ranking-item:hover .fn-ranking-title { color: var(--color-rose); }
.fn-ranking-num {
    font-family: var(--font-display);
    font-size: 44px;
    font-style: italic;
    color: var(--color-ink);
    font-weight: 400;
}
.fn-ranking-item[data-rank="1"] .fn-ranking-num,
.fn-ranking-item[data-rank="2"] .fn-ranking-num,
.fn-ranking-item[data-rank="3"] .fn-ranking-num { color: var(--color-rose); }
.fn-ranking-thumb { border-radius: var(--radius-sm); }
.fn-ranking-cat {
    background: var(--color-ink);
    border-radius: 0;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
}
.fn-ranking-title {
    font-family: var(--font-serif);
    transition: color .2s;
    letter-spacing: 0.01em;
}

/* ---------- Section spacing ---------- */
.fn-section { margin: 0 0 80px; }
.fn-main { padding: 64px 0 96px; }

/* ---------- Footer refinements ---------- */
.fn-footer {
    background: var(--color-ink);
    color: rgba(255,255,255,0.7);
    margin-top: 0;
    padding: 64px 0 32px;
}
.fn-footer-brand .fn-logo { color: #fff; }
.fn-footer-brand .fn-logo span { color: #fff; border-bottom-color: var(--color-rose); }

/* ======================================================================
   Editorial — Atmospheric placeholders + Letter + Vertical Issue
   ====================================================================== */

/* ---------- 写真風プレースホルダ（絵文字撤廃） ---------- */
.fn-thumb-art {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
}
.fn-thumb-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 0.5px 0.5px, rgba(0,0,0,0.08) 0.5px, transparent 0);
    background-size: 3px 3px;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.55;
}
.fn-thumb-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
}

/* カテゴリ別の雰囲気グラデ（写真の代わり） */
.fn-thumb-art[data-cat="gourmet"] { background: linear-gradient(135deg, #E8D1C4 0%, #B07566 60%, #6E3030 100%); }
.fn-thumb-art[data-cat="spot"]    { background: linear-gradient(135deg, #B8D6DD 0%, #5C8FA1 60%, #1F4E5C 100%); }
.fn-thumb-art[data-cat="living"]  { background: linear-gradient(135deg, #D7DDC9 0%, #7B9476 60%, #3C5743 100%); }
.fn-thumb-art[data-cat="event"]   { background: linear-gradient(135deg, #F3CFB8 0%, #D58A6A 60%, #8E4D38 100%); }
.fn-thumb-art[data-cat="kids"]    { background: linear-gradient(135deg, #EFE2C1 0%, #C7A86A 60%, #84662E 100%); }
.fn-thumb-art[data-cat="work"]    { background: linear-gradient(135deg, #C8C9D3 0%, #6E7385 60%, #2D3047 100%); }
.fn-thumb-art[data-cat="biz"]     { background: linear-gradient(135deg, #BCC8D1 0%, #5C7185 60%, #1B3A4B 100%); }
.fn-thumb-art[data-cat="featured"] { background: linear-gradient(135deg, #E2D8C9 0%, #A8334A 60%, #4E1A22 100%); }

/* オーバーレイの文字（カテゴリ英字をうっすら配置） */
.fn-thumb-art-label {
    position: absolute;
    right: 14px; bottom: 12px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ---------- 編集後記セクション ---------- */
.fn-letter {
    margin: 96px 0 0;
    padding: 0;
    position: relative;
}
.fn-letter-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}
.fn-letter-eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--color-rose);
    font-weight: 600;
    margin-bottom: 18px;
    text-align: center;
}
.fn-letter-eyebrow::before,
.fn-letter-eyebrow::after {
    content: "—";
    margin: 0 12px;
    color: var(--color-rose);
    opacity: 0.7;
}
.fn-letter-title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 600;
    text-align: center;
    margin: 0 0 36px;
    color: var(--color-ink);
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.fn-letter-body {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 2.15;
    color: var(--color-text-soft);
    letter-spacing: 0.05em;
}
.fn-letter-body p { margin: 0 0 1.4em; }
.fn-letter-body p::first-letter {
    /* ドロップキャップ */
    font-size: 3.6em;
    line-height: 1;
    float: left;
    margin: 0.06em 0.1em 0 -0.05em;
    color: var(--color-rose);
    font-weight: 600;
}
.fn-letter-quote {
    border-left: 2px solid var(--color-rose);
    padding: 8px 0 8px 24px;
    margin: 36px 0;
    font-style: italic;
    font-size: 18px;
    color: var(--color-ink);
    line-height: 1.7;
}
.fn-letter-sign {
    margin-top: 40px;
    text-align: right;
    font-family: var(--font-serif);
    font-size: 13px;
    color: var(--color-text-soft);
    letter-spacing: 0.08em;
}
.fn-letter-sign-name {
    display: block;
    font-style: italic;
    font-size: 17px;
    color: var(--color-ink);
    margin-bottom: 4px;
    letter-spacing: 0.04em;
}

/* ---------- 縦組「Issue」 ---------- */
.fn-issue-vertical {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--color-text-mute);
    opacity: 0.85;
    pointer-events: none;
    z-index: 3;
}
.fn-issue-vertical strong {
    color: var(--color-rose);
    font-weight: 600;
}

@media (max-width: 900px) {
    .fn-issue-vertical { display: none; }
}

/* 7番目のカテゴリ色トークン互換用 */
.fn-cat-section[data-cat="kids"] .fn-section-heading,
.fn-cat-section[data-cat="biz"] .fn-section-heading {
    border-bottom-color: var(--color-border);
}

/* ======================================================================
   ARTICLE EXTRAS — TOC, Share, Progress, Back to top
   ====================================================================== */

/* ---------- 目次（Table of Contents） ---------- */
.fn-toc {
    margin: 32px 0;
    padding: 22px 26px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    border-left: 3px solid var(--color-primary);
}
.fn-toc-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--color-border);
}
.fn-toc-eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--color-rose);
    font-weight: 700;
}
.fn-toc-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink);
}
.fn-toc-toggle {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 14px;
    font-size: 11px;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background .2s;
}
.fn-toc-toggle:hover { background: var(--color-bg-deep); }

.fn-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}
.fn-toc-item-h2 {
    padding: 6px 0;
    border-bottom: 1px dotted var(--color-line);
}
.fn-toc-item-h2:last-child { border-bottom: 0; }
.fn-toc-item-h2 > a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    color: var(--color-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    padding: 4px 0;
    transition: color .2s;
}
.fn-toc-item-h2 > a:hover { color: var(--color-rose); opacity: 1; }
.fn-toc-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--color-rose);
    line-height: 1;
    flex-shrink: 0;
}
.fn-toc-text { flex: 1; }

.fn-toc-list-h3 {
    list-style: none;
    padding: 6px 0 6px 32px;
    margin: 4px 0 8px;
}
.fn-toc-item-h3 {
    padding: 3px 0;
    font-size: 13px;
}
.fn-toc-item-h3 a {
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color .2s;
    position: relative;
    padding-left: 16px;
    display: block;
}
.fn-toc-item-h3 a::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--color-text-mute);
}
.fn-toc-item-h3 a:hover { color: var(--color-rose); opacity: 1; }

/* ---------- SNS シェアボタン ---------- */
.fn-share {
    margin: 36px 0;
    padding: 18px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.fn-share-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}
.fn-share-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.fn-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    transition: transform .15s, opacity .15s;
}
.fn-share-btn:hover { transform: translateY(-2px); opacity: 0.9; }
.fn-share-x       { background: #000000; }
.fn-share-line    { background: #06C755; }
.fn-share-fb      { background: #1877F2; }
.fn-share-hatena  { background: #00A4DE; }
.fn-share-pocket  { background: #EF4056; }

/* ---------- 読了プログレスバー ---------- */
.fn-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(168,51,74,0.15);
    z-index: 999;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.fn-reading-progress.is-visible { opacity: 1; }
.fn-reading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-rose), var(--color-accent));
    transition: width .1s linear;
}

/* ---------- 上部に戻るボタン ---------- */
.fn-back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s, visibility .25s;
    z-index: 90;
}
.fn-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fn-back-to-top:hover {
    background: var(--color-rose);
}

@media (max-width: 600px) {
    .fn-back-to-top { right: 12px; bottom: 12px; width: 40px; height: 40px; }
    .fn-share { padding: 14px 0; }
    .fn-share-label { font-size: 11px; flex-basis: 100%; }
    .fn-share-btn { width: 34px; height: 34px; }
}

/* ======================================================================
   ARTICLE — Premium long-form components（資金繰り総研レベル）
   ====================================================================== */

/* ---------- 記事要約ボックス ---------- */
.fn-summary-box {
    background: #F4F6F4;
    border-left: 4px solid var(--color-primary);
    padding: 20px 24px;
    margin: 0 0 32px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.9;
}
.fn-summary-box-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.fn-summary-box p { margin: 0; color: var(--color-text-soft); }
.fn-summary-box strong { color: var(--color-ink); }

/* ---------- このセクションで分かること ---------- */
.fn-keypoints {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 22px 26px;
    margin: 0 0 32px;
    border-radius: 4px;
}
.fn-keypoints-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-border);
    font-weight: 700;
    font-size: 15px;
}
.fn-keypoints-head .read-time {
    font-size: 12px;
    color: var(--color-text-mute);
    font-weight: 500;
}
.fn-keypoints ul {
    margin: 0; padding: 0;
    list-style: none;
}
.fn-keypoints li {
    padding: 8px 0 8px 24px;
    font-size: 14px;
    line-height: 1.9;
    position: relative;
    border-bottom: 1px dotted var(--color-line);
}
.fn-keypoints li:last-child { border-bottom: 0; }
.fn-keypoints li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-rose);
    font-weight: 700;
}
.fn-keypoints strong { color: var(--color-ink); }

/* ---------- 編集部メモ ---------- */
.fn-editor-aside {
    background: #FFF8EE;
    border-left: 3px solid var(--color-accent);
    padding: 18px 22px;
    margin: 28px 0;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.85;
}
.fn-editor-aside-head {
    font-weight: 700;
    font-size: 13px;
    color: #8B5E2B;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fn-editor-aside p { margin: 0 0 0.6em; }
.fn-editor-aside p:last-child { margin-bottom: 0; }

/* ---------- CTAボックス（メイン） ---------- */
.fn-article-cta {
    background: linear-gradient(135deg, #F0F8FF 0%, #E6F2FF 100%);
    border-left: 4px solid var(--color-primary);
    padding: 28px;
    margin: 36px 0;
    border-radius: 4px;
    text-align: center;
}
.fn-article-cta-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.fn-article-cta-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--color-ink);
    line-height: 1.5;
}
.fn-article-cta-title mark {
    background: linear-gradient(180deg, transparent 80%, rgba(168,51,74,0.4) 80%);
    color: var(--color-ink);
    padding: 0 2px;
}
.fn-article-cta ul {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: var(--color-text-soft);
}
.fn-article-cta ul li::before { content: "✓ "; color: var(--color-rose); font-weight: 700; }
.fn-article-cta .btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform .15s, background .2s;
}
.fn-article-cta .btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); opacity: 1; }

/* ---------- TIP（編集部のコツ） ---------- */
.fn-tip {
    background: #FFFACD;
    border: 1px solid #F0DA8C;
    border-radius: 2px;
    padding: 14px 18px;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.8;
    position: relative;
    padding-left: 44px;
}
.fn-tip::before {
    content: "💡";
    position: absolute;
    left: 14px;
    top: 14px;
    font-size: 18px;
}
.fn-tip strong { color: #8B5E2B; }

/* ---------- 警告ボックス ---------- */
.fn-warn {
    background: #FFF5F5;
    border: 1px solid #F0C8C8;
    border-radius: 2px;
    padding: 14px 18px;
    margin: 24px 0;
    font-size: 14px;
    line-height: 1.8;
    position: relative;
    padding-left: 44px;
}
.fn-warn::before {
    content: "⚠";
    position: absolute;
    left: 14px;
    top: 12px;
    font-size: 18px;
    color: #C84A57;
}
.fn-warn strong { color: #8B2635; }

/* ---------- 比較テーブル（拡張） ---------- */
.fn-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
}
.fn-table-wrap table {
    margin: 0;
    min-width: 600px;
}
.fn-table-wrap table thead th {
    background: var(--color-ink);
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.04em;
    padding: 12px 14px;
}
.fn-table-wrap table tbody tr:nth-child(even) { background: #F9F8F4; }
.fn-table-wrap table tbody tr:nth-child(odd) { background: #fff; }
.fn-table-wrap table tbody td {
    padding: 10px 14px;
    font-size: 13.5px;
    border-color: var(--color-line);
}
.fn-table-wrap table tbody td strong { color: var(--color-ink); }

/* スコア表示用 */
.fn-score {
    color: var(--color-accent);
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* ---------- FAQ（折りたたみ式） ---------- */
.fn-faq {
    margin: 32px 0;
}
.fn-faq details {
    border: 1px solid var(--color-border);
    border-radius: 2px;
    margin-bottom: 10px;
    background: var(--color-surface);
    transition: box-shadow .2s;
}
.fn-faq details[open] {
    box-shadow: var(--shadow-sm);
}
.fn-faq summary {
    cursor: pointer;
    padding: 16px 22px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.fn-faq summary::-webkit-details-marker { display: none; }
.fn-faq summary::after {
    content: "+";
    margin-left: auto;
    font-size: 20px;
    color: var(--color-text-mute);
    font-weight: 400;
    transition: transform .2s;
}
.fn-faq details[open] summary::after {
    content: "−";
    color: var(--color-rose);
}
.fn-faq summary:hover { background: #FAFAF7; }
.fn-faq .faq-q-mark {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: var(--color-rose);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.fn-faq .faq-tag {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    background: var(--color-rose-soft);
    color: #C2185B;
    border-radius: 999px;
    font-weight: 600;
    margin-left: 6px;
    letter-spacing: 0.04em;
}
.fn-faq-answer {
    padding: 0 22px 18px;
    font-size: 14px;
    line-height: 2;
    color: var(--color-text-soft);
    border-top: 1px dashed var(--color-line);
    padding-top: 16px;
    margin-top: 0;
}
.fn-faq-answer p { margin: 0 0 0.8em; }
.fn-faq-answer p:last-child { margin-bottom: 0; }
.fn-faq-answer strong { color: var(--color-ink); }
.fn-faq-answer .faq-a-mark {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
}

/* ---------- 関連記事リスト（記事末用、誌面型） ---------- */
.fn-related-list {
    margin: 40px 0;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}
.fn-related-list h2 {
    font-family: var(--font-serif);
    font-size: 22px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    background: none;
}
.fn-related-list ul { list-style: none; padding: 0; margin: 0; }
.fn-related-list li {
    border-bottom: 1px solid var(--color-line);
    transition: background .2s;
}
.fn-related-list li:hover { background: #FAFAF7; }
.fn-related-list a {
    display: grid;
    grid-template-columns: 100px 1fr 80px;
    gap: 16px;
    align-items: center;
    padding: 14px 8px;
    color: inherit;
    text-decoration: none;
}
@media (max-width: 600px) {
    .fn-related-list a { grid-template-columns: 1fr; gap: 4px; }
    .fn-related-list a .related-date { text-align: left; font-size: 11px; }
}
.fn-related-list .related-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-ink);
    padding: 3px 10px;
    text-align: center;
    border-radius: 0;
    align-self: center;
}
.fn-related-list .related-title {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-ink);
}
.fn-related-list a:hover .related-title { color: var(--color-rose); }
.fn-related-list .related-date {
    font-size: 11px;
    color: var(--color-text-mute);
    letter-spacing: 0.08em;
    text-align: right;
}

/* ---------- マーカー・アンダーライン（誌面型・過剰めに） ---------- */

/* 黄色マーカー（標準）— 太い黄色ライン下半分 */
.fn-article-content mark,
.fn-mark-yellow {
    background: linear-gradient(180deg, transparent 78%, #FFE873 78%);
    color: var(--color-ink);
    padding: 0 2px;
    font-weight: 700;
}

/* ピンクマーカー（重要度高） */
.fn-mark-pink {
    background: linear-gradient(180deg, transparent 78%, #FFB6C1 78%);
    color: var(--color-ink);
    padding: 0 2px;
    font-weight: 700;
}

/* 青マーカー（編集部見解） */
.fn-mark-blue {
    background: linear-gradient(180deg, transparent 78%, #B7E4F4 78%);
    color: var(--color-ink);
    padding: 0 2px;
    font-weight: 600;
}

/* 緑マーカー（メリット系） */
.fn-mark-green {
    background: linear-gradient(180deg, transparent 78%, #C9F0C9 78%);
    color: var(--color-ink);
    padding: 0 2px;
    font-weight: 600;
}

/* 赤線下線（警告・注意） */
.fn-underline-red {
    text-decoration: underline wavy #E63946;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    font-weight: 700;
    color: #C84A57;
}

/* 黒太字 + ばらアンダー（編集部結論） */
.fn-conclusion {
    font-weight: 700;
    color: var(--color-ink);
    background: linear-gradient(180deg, transparent 80%, rgba(168,51,74,0.35) 80%);
    padding: 0 2px;
}

/* 番号付きキーワード強調 */
.fn-keyword {
    display: inline-block;
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 1px;
}

/* 強調枠（記事内インライン） */
.fn-emphasis {
    background: #FFF9E6;
    color: #8B5E2B;
    padding: 2px 8px;
    font-weight: 700;
    border-radius: 2px;
}

/* 重要数字 — 大きく明朝で */
.fn-num {
    font-family: var(--font-display);
    font-size: 1.25em;
    font-style: italic;
    font-weight: 700;
    color: var(--color-rose);
    margin: 0 2px;
}

/* 強調本文（編集部の主張） */
.fn-article-content p strong,
.fn-article-content li strong {
    color: var(--color-ink);
    background: linear-gradient(180deg, transparent 78%, #FFE873 78%);
    padding: 0 2px;
}

/* 編集部メモ内の strong は別マーカー（オレンジ） */
.fn-editor-aside strong {
    background: linear-gradient(180deg, transparent 78%, #FFD89B 78%);
    padding: 0 2px;
}

/* TIPボックス内の strong */
.fn-tip strong {
    background: none;
    color: #8B5E2B;
}

/* FAQ回答内の strong は青マーカー */
.fn-faq-answer strong {
    background: linear-gradient(180deg, transparent 78%, #B7E4F4 78%);
    padding: 0 2px;
    color: var(--color-ink);
}

/* テーブル内の strong は背景なしの太字のみ */
.fn-table-wrap table strong {
    background: none;
    padding: 0;
}

/* ---------- 著者情報フッター ---------- */
.fn-author-block {
    margin: 48px 0 0;
    padding: 28px;
    background: #FAFAF7;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
}
.fn-author-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-rose));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 22px;
}
.fn-author-info-name {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 4px;
}
.fn-author-info-org {
    font-size: 12px;
    color: var(--color-text-soft);
    margin: 0 0 12px;
    font-style: italic;
}
.fn-author-info-meta {
    font-size: 11px;
    color: var(--color-text-mute);
    letter-spacing: 0.08em;
    line-height: 1.8;
}

/* ---------- Section sub-category chips（トップページ用） ---------- */
.fn-section-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -8px 0 28px;
}
.fn-section-chips .fn-chip {
    font-size: 12px;
    padding: 5px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-soft);
    transition: background .2s, color .2s, border-color .2s;
}
.fn-section-chips .fn-chip:hover {
    background: var(--color-ink);
    color: #fff;
    border-color: var(--color-ink);
    opacity: 1;
}

/* カテゴリ別ホバーカラー（セクションごとに自然に切り替わる） */
.fn-cat-section[data-cat="gourmet"] .fn-section-chips .fn-chip:hover { background: #C84A57; border-color: #C84A57; }
.fn-cat-section[data-cat="spot"]    .fn-section-chips .fn-chip:hover { background: #1A4A5A; border-color: #1A4A5A; }
.fn-cat-section[data-cat="living"]  .fn-section-chips .fn-chip:hover { background: #3C8C5E; border-color: #3C8C5E; }
.fn-cat-section[data-cat="event"]   .fn-section-chips .fn-chip:hover { background: #C67351; border-color: #C67351; }
.fn-cat-section[data-cat="kids"]    .fn-section-chips .fn-chip:hover { background: #C49A3F; border-color: #C49A3F; }
.fn-cat-section[data-cat="work"]    .fn-section-chips .fn-chip:hover { background: #3A86FF; border-color: #3A86FF; }
.fn-cat-section[data-cat="biz"]     .fn-section-chips .fn-chip:hover { background: #1B3A4B; border-color: #1B3A4B; }

/* ---------- Category Hero（鮮やかパターン・カテゴリ別アクセント） ---------- */
.fn-cat-hero {
    position: relative;
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(255,107,53,0.35), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(11,123,160,0.45), transparent 60%),
        linear-gradient(180deg, #0B7BA0 0%, #1395B8 60%, #FFB088 100%);
    color: #fff;
    padding: 84px 20px 120px;
    text-align: center;
    overflow: hidden;
    border: 0;
}
.fn-cat-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
}

/* カテゴリ別の色アクセント（overlayでテーマカラーを混ぜる） */
.fn-cat-hero[data-cat="gourmet"] {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(230,57,70,0.45), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(11,123,160,0.40), transparent 60%),
        linear-gradient(180deg, #0B7BA0 0%, #C84A57 100%);
}
.fn-cat-hero[data-cat="spot"] {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(11,123,160,0.50), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(82,183,136,0.30), transparent 60%),
        linear-gradient(180deg, #0B7BA0 0%, #1395B8 60%, #7CC9DE 100%);
}
.fn-cat-hero[data-cat="living"] {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(82,183,136,0.45), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(11,123,160,0.40), transparent 60%),
        linear-gradient(180deg, #0B7BA0 0%, #3C8C5E 100%);
}
.fn-cat-hero[data-cat="event"] {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(255,107,53,0.55), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(233,30,99,0.30), transparent 60%),
        linear-gradient(180deg, #0B7BA0 0%, #FF6B35 100%);
}
.fn-cat-hero[data-cat="kids"] {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(244,162,97,0.55), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(11,123,160,0.30), transparent 60%),
        linear-gradient(180deg, #0B7BA0 0%, #E6A45A 100%);
}
.fn-cat-hero[data-cat="work"] {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(58,134,255,0.40), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(45,48,71,0.55), transparent 60%),
        linear-gradient(180deg, #1E2D5C 0%, #3A86FF 100%);
}
.fn-cat-hero[data-cat="biz"] {
    background:
        radial-gradient(ellipse 70% 50% at 85% 15%, rgba(11,123,160,0.50), transparent 60%),
        radial-gradient(ellipse 60% 40% at 15% 85%, rgba(45,48,71,0.55), transparent 60%),
        linear-gradient(180deg, #0F2F3A 0%, #1A4A5A 100%);
}

.fn-cat-hero-inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    z-index: 2;
}
.fn-cat-hero-eyebrow {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: #FFE0CC;
    margin-bottom: 18px;
    font-weight: 600;
    padding: 0 36px;
    position: relative;
}
.fn-cat-hero-eyebrow::before,
.fn-cat-hero-eyebrow::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 24px;
    height: 1px;
    background: rgba(255,224,204,0.7);
}
.fn-cat-hero-eyebrow::before { left: 0; }
.fn-cat-hero-eyebrow::after  { right: 0; }

.fn-cat-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: 700;
    margin: 0 0 20px;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-shadow: 0 2px 24px rgba(0,0,0,0.15);
}
.fn-cat-hero-lead {
    font-size: clamp(14px, 1.5vw, 16px);
    color: rgba(255,255,255,0.92);
    line-height: 1.9;
    margin: 0;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* カテゴリヒーロー用スカイライン（控えめ） */
.fn-cat-hero-skyline {
    position: absolute;
    left: 0; right: 0;
    bottom: 56px;
    width: 100%;
    height: 70px;
    pointer-events: none;
    opacity: 0.6;
    display: block;
}

/* カテゴリヒーロー底部の波形 */
.fn-cat-hero-wave {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    width: 100%; height: 60px;
    pointer-events: none;
    display: block;
}

/* ---------- Filters (sub-category chips + tag chips) ---------- */
.fn-filters {
    margin: 36px 0 48px;
    padding: 24px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.fn-filters-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 10px 0;
}
.fn-filters-row + .fn-filters-row {
    border-top: 1px dashed var(--color-border);
}
@media (max-width: 600px) {
    .fn-filters-row { grid-template-columns: 1fr; gap: 8px; }
}
.fn-filters-label {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-rose);
    font-weight: 600;
}
.fn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fn-chip {
    display: inline-block;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--color-text-soft);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background .2s, color .2s, border-color .2s;
    font-weight: 500;
}
.fn-chip:hover {
    background: var(--color-ink);
    color: #fff;
    border-color: var(--color-ink);
    opacity: 1;
}
.fn-chip.is-active {
    background: var(--color-ink);
    color: #fff;
    border-color: var(--color-ink);
}
.fn-chip-tag {
    font-size: 11px;
    padding: 5px 12px;
    color: var(--color-text-soft);
    border-color: var(--color-line);
    background: var(--color-surface);
}
.fn-chip-tag::before {
    content: "#";
    color: var(--color-text-mute);
    margin-right: 2px;
}
.fn-chip-tag:hover {
    background: var(--color-rose);
    color: #fff;
    border-color: var(--color-rose);
}
.fn-chip-tag:hover::before { color: rgba(255,255,255,0.7); }

/* ---------- ばらアクセント ---------- */
.fn-rose-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    color: var(--color-rose);
}

/* セクション見出しの下線をばらドットでアクセント */
.fn-section-heading {
    position: relative;
}
.fn-section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-rose) 0%, var(--color-accent) 100%);
    border-radius: 2px;
}

/* CTAにばら装飾 */
.fn-cta {
    background:
        radial-gradient(ellipse at 0% 100%, rgba(233,30,99,0.2), transparent 55%),
        radial-gradient(ellipse at 100% 0%, rgba(255,107,53,0.25), transparent 60%),
        linear-gradient(135deg, #0B7BA0 0%, #075975 100%);
}
.fn-cta-rose {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.15;
    pointer-events: none;
}
.fn-cta-rose-tl { top: -20px; left: -20px; }
.fn-cta-rose-br { bottom: -20px; right: -20px; transform: rotate(180deg); }

/* フッターブランドにばら */
.fn-footer-rose {
    display: inline-block;
    width: 14px; height: 14px;
    margin-left: 6px;
    color: var(--color-accent);
    vertical-align: middle;
}

/* 福山ピンクのバッジ系（市の花アピール用） */
.fn-badge-rose {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--color-rose-soft);
    color: #C2185B;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ============================================
   動画セクション（トップページ＋ /videos/ アーカイブ）
   ============================================ */
.fn-video-section {
    margin-top: 40px;
}
.fn-video-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: 24px 0;
}
.fn-video-grid-archive {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fn-video-card {
    border: 1px solid var(--color-border, #E7DDD2);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}
.fn-video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.fn-video-card-frame {
    display: block;
    position: relative;
    aspect-ratio: 9 / 16;
    background: #111;
    overflow: hidden;
    text-decoration: none;
}
.fn-video-card-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.fn-video-card-caption {
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-ink, #0E1F47);
    font-weight: 600;
    background: #FAF8F4;
    border-top: 1px solid var(--color-border, #E7DDD2);
}
.fn-video-section-footer {
    text-align: center;
    margin-top: 18px;
}
.fn-video-more-btn {
    display: inline-block;
    padding: 11px 26px;
    background: #0E1F47;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    transition: background 0.2s, transform 0.2s;
}
.fn-video-more-btn:hover {
    background: #A8334A;
    transform: translateY(-1px);
}

/* TikTok Creator Profile Embed フォールバック */
.fn-video-profile-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.fn-video-profile-embed iframe {
    width: 100%;
    min-height: 600px;
    border: 0;
    display: block;
}

/* 動画アーカイブのリード文 */
.fn-video-archive-section {
    margin-top: 30px;
}
.fn-video-archive-lead {
    color: var(--color-text-soft, #5A4A40);
    font-size: 15px;
    line-height: 1.75;
    margin: 12px 0 24px;
}
.fn-video-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-soft, #5A4A40);
    background: #FAF8F4;
    border-radius: 12px;
    margin: 24px 0;
}

/* ヘッダーの「動画」タブをアクセント化 */
.fn-menu .fn-nav-videos > a {
    color: #A8334A;
    font-weight: 700;
}

/* レスポンシブ：スマホは縦スクロール + 横スクロール */
@media (max-width: 900px) {
    .fn-video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .fn-video-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px;
    }
    .fn-video-grid-archive {
        grid-template-columns: repeat(2, 1fr);
    }
    .fn-video-card-caption {
        font-size: 11.5px;
        padding: 8px 10px;
    }
    .fn-video-more-btn {
        padding: 10px 22px;
        font-size: 13px;
    }
    .fn-video-profile-embed iframe {
        min-height: 480px;
    }
}

/* ===========================================
 * v2: 2段ヘッダー + サイトマップ型フッター
 * =========================================== */

/* ---- ヘッダー（2段構造） ---- */
.fn-header { padding: 0; }
.fn-header-top {
    background: rgba(245,242,236,0.96);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fn-header-nav {
    background: linear-gradient(180deg, #0E1F47 0%, #1A2B5C 100%);
    color: #fff;
    border-bottom: 2px solid #A8334A;
}
.fn-header-inner { padding: 14px 20px; }
.fn-logo-tagline {
    display: none;
    font-size: 11px;
    color: var(--color-text-soft);
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(0,0,0,0.12);
    line-height: 1.4;
}
@media (min-width: 900px) {
    .fn-logo-tagline { display: inline-block; }
}

/* SNSアイコン（ヘッダー） */
.fn-header-sns {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}
@media (min-width: 768px) {
    .fn-header-sns { display: inline-flex; }
}
.fn-sns-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--color-text-soft);
    text-decoration: none;
    background: rgba(0,0,0,0.04);
    transition: all .15s;
}
.fn-sns-link:hover {
    background: var(--color-rose);
    color: #fff;
    transform: translateY(-1px);
}

/* 下段ナビ（カテゴリメニュー） */
.fn-header-nav .fn-nav {
    display: none;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.fn-header-nav .fn-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: var(--container);
    margin: 0 auto;
}
.fn-header-nav .fn-nav li {
    border: 0;
}
.fn-header-nav .fn-nav a {
    display: block;
    padding: 14px 16px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity .15s, background .15s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.fn-header-nav .fn-nav a:hover {
    opacity: 1;
    background: rgba(255,255,255,0.06);
}
.fn-header-nav .fn-nav .current-cat > a,
.fn-header-nav .fn-nav li.current_page_item > a {
    border-bottom-color: #FCE8B7;
}

/* ハンバーガーメニュー時（スマホ） */
@media (max-width: 767px) {
    .fn-header-nav .fn-nav {
        display: none;
        background: linear-gradient(180deg, #0E1F47 0%, #1A2B5C 100%);
    }
    .fn-header-nav .fn-nav.is-open {
        display: block;
        padding: 8px 0 14px;
    }
    .fn-header-nav .fn-nav ul {
        flex-direction: column;
        gap: 0;
    }
    .fn-header-nav .fn-nav li {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .fn-header-nav .fn-nav li:last-child {
        border-bottom: 0;
    }
    .fn-header-nav .fn-nav a {
        padding: 14px 20px;
        font-size: 14px;
    }
}

/* ヘッダー下段の「企業・ビジネス → 記事一覧/DB」サブメニューの暗色背景対応 */
.fn-header-nav .fnc-submenu {
    background: #fff !important;
    color: #0E1F47 !important;
}
.fn-header-nav .fnc-submenu a {
    color: #0E1F47 !important;
    padding: 12px 20px !important;
}
.fn-header-nav .fnc-has-submenu > a::after {
    content: " ▾";
    font-size: 10px;
    opacity: 0.8;
}

/* ---- フッター（サイトマップ型） ---- */
.fn-footer {
    background: linear-gradient(180deg, #1A2B5C 0%, #0E1F47 100%);
    color: #E5E7EB;
    padding: 56px 0 32px;
}
.fn-footer .fn-container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* 上部：ブランド + SNS */
.fn-footer-brand-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.fn-footer-brand { max-width: 520px; }
.fn-footer-brand .fn-logo { color: #fff; }
.fn-footer-brand .fn-logo span { color: #FCE8B7; border-bottom-color: #FCE8B7; }
.fn-footer-desc {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    line-height: 1.85;
    margin: 14px 0 0;
}

.fn-footer-sns {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.fn-sns-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: all .15s;
    border: 1px solid rgba(255,255,255,0.12);
}
.fn-sns-btn:hover {
    background: #FCE8B7;
    color: #0E1F47;
    border-color: #FCE8B7;
}

/* 5カラムサイトマップ */
.fn-footer-sitemap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 36px;
}
@media (min-width: 600px) {
    .fn-footer-sitemap { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .fn-footer-sitemap { grid-template-columns: repeat(5, 1fr); }
}
.fn-footer-col h4.fn-footer-col-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #FCE8B7;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(252,232,183,0.2);
    text-transform: uppercase;
}
.fn-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fn-footer-col li {
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.5;
}
.fn-footer-col a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color .15s;
}
.fn-footer-col a:hover {
    color: #FCE8B7;
}

/* フッターボトム */
.fn-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}
.fn-footer-bottom a { color: rgba(255,255,255,0.75); text-decoration: none; }
.fn-footer-bottom a:hover { color: #FCE8B7; }
.fn-footer-meta { font-size: 11px; }

/* スマホ調整 */
@media (max-width: 600px) {
    .fn-footer { padding: 36px 0 24px; }
    .fn-footer-brand-row { flex-direction: column; gap: 18px; padding-bottom: 24px; margin-bottom: 28px; }
    .fn-footer-sns { width: 100%; justify-content: flex-start; }
    .fn-footer-bottom { flex-direction: column; align-items: flex-start; }
    .fn-footer-col h4.fn-footer-col-title { font-size: 11px; }
    .fn-footer-col li { font-size: 12px; }
}

/* ===== Latest articles index (internal-link hub) ===== */
.fn-latest-index { margin-top: 64px; }
.fn-latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--color-line, #e3e3e3);
}
.fn-latest-list-item {
    border-bottom: 1px solid var(--color-line, #e3e3e3);
}
.fn-latest-list-item:nth-child(odd) {
    border-right: 1px solid var(--color-line, #e3e3e3);
}
.fn-latest-link {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 12px;
    text-decoration: none;
    color: inherit;
    line-height: 1.5;
    transition: background 0.15s ease;
}
.fn-latest-link:hover {
    background: #f8f6f1;
}
.fn-latest-cat {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--color-rose, #b04a4a);
    background: #fff;
    border: 1px solid var(--color-rose, #b04a4a);
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
}
.fn-latest-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text, #1a1a1a);
}
.fn-latest-date {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--color-muted, #888);
    font-feature-settings: "tnum";
}
@media (max-width: 720px) {
    .fn-latest-list { grid-template-columns: 1fr; }
    .fn-latest-list-item:nth-child(odd) { border-right: none; }
    .fn-latest-link { padding: 12px 8px; gap: 8px; flex-wrap: wrap; }
    .fn-latest-cat { font-size: 9px; }
    .fn-latest-title { font-size: 13px; flex-basis: 100%; order: 2; }
    .fn-latest-date { order: 1; font-size: 10px; }
    .fn-latest-cat { order: 0; }
}

/* ===== HOME 福山ぜんぶ図鑑 ===== */
.fn-home-zukan { margin: 48px 0; }
.fn-home-zukan-lead { font-size: 14px; color: #5a4a30; line-height: 1.8; margin: 0 0 24px; }
.fn-home-zukan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .fn-home-zukan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .fn-home-zukan-grid { grid-template-columns: 1fr; } }
.fn-home-zukan-card {
    display: block;
    padding: 22px 18px;
    background: #fff;
    border: 1px solid var(--color-line, #e3ddd0);
    border-radius: 12px;
    text-align: center;
    text-decoration: none !important;
    color: var(--color-text, #1a1a1a) !important;
    transition: all 0.2s;
    position: relative;
}
.fn-home-zukan-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-color: var(--color-rose, #b04a4a);
}
.fn-home-zukan-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-rose, #b04a4a) 0%, #1a1a1a 100%);
    border-radius: 12px 12px 0 0;
}
.fn-home-zukan-icon { font-size: 36px; margin-bottom: 8px; line-height: 1; }
.fn-home-zukan-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.fn-home-zukan-sub { font-size: 9px; letter-spacing: 0.18em; color: var(--color-rose, #b04a4a); font-weight: 600; margin-bottom: 10px; }
.fn-home-zukan-desc { font-size: 12px; color: #666; line-height: 1.5; margin-bottom: 12px; min-height: 2.5em; }
.fn-home-zukan-count { font-size: 13px; font-weight: 700; color: var(--color-rose, #b04a4a); }

/* ======================================================
   雑誌風 TOP v3 (2026-06-01)
   ====================================================== */

/* 共通コンテナ（v3 専用） */
.fn-hero-v3 + *, .fn-dls-banner + *, .fn-v3-section, .fn-v3-bottom { box-sizing: border-box; }
.fn-hero-v3 .fn-container, .fn-dls-banner .fn-container, .fn-v3-section .fn-container, .fn-v3-tiktok-section .fn-container, .fn-v3-bottom .fn-container {
    max-width: 1100px; margin: 0 auto; padding: 0 64px; box-sizing: border-box; width: 100%;
}
@media (max-width: 1024px) { .fn-hero-v3 .fn-container, .fn-dls-banner .fn-container, .fn-v3-section .fn-container, .fn-v3-tiktok-section .fn-container, .fn-v3-bottom .fn-container { padding: 0 40px; } }
@media (max-width: 720px) { .fn-hero-v3 .fn-container, .fn-dls-banner .fn-container, .fn-v3-section .fn-container, .fn-v3-tiktok-section .fn-container, .fn-v3-bottom .fn-container { padding: 0 24px; } }
@media (max-width: 500px) { .fn-hero-v3 .fn-container, .fn-dls-banner .fn-container, .fn-v3-section .fn-container, .fn-v3-tiktok-section .fn-container, .fn-v3-bottom .fn-container { padding: 0 18px; } }

/* ===== HERO ===== */
.fn-hero-v3 {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 0;
}
.fn-hero-v3-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #6a8fb0 0%, #d5a7b8 40%, #f5e0b5 100%);
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.fn-hero-v3-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.25), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.15), transparent 50%);
}
.fn-hero-v3-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(14,31,71,0.45) 50%, rgba(14,31,71,0.78) 100%);
    z-index: 2;
}
.fn-hero-v3-content { position: relative; z-index: 3; width: 100%; padding: 100px 0 80px; }
.fn-hero-v3-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
}
.fn-hero-v3-main { color: #fff; }
.fn-hero-v3-cover-label {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: 0.3em; color: #ffe3a8; font-weight: 700;
    margin-bottom: 24px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.fn-hero-v3-cover-label::before { content: ""; width: 36px; height: 1px; background: #ffe3a8; }
.fn-hero-v3-title {
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "游明朝", YuMincho, serif;
    font-size: clamp(32px, 5vw, 60px);
    line-height: 1.3; font-weight: 700; color: #fff;
    margin: 0 0 22px; letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.fn-hero-v3-title a { color: inherit; text-decoration: none; }
.fn-hero-v3-excerpt {
    font-size: 15px; line-height: 1.95; color: rgba(255,255,255,0.92);
    margin-bottom: 28px; max-width: 560px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.fn-hero-v3-meta {
    display: flex; gap: 18px; font-size: 12px; color: rgba(255,255,255,0.85);
    align-items: center; margin-bottom: 28px; flex-wrap: wrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.fn-hero-v3-meta strong { color: #fff; }
.fn-hero-v3-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px; background: #fff; color: #0E1F47 !important;
    font-size: 13px; letter-spacing: 0.1em; font-weight: 700;
    border-radius: 2px; text-decoration: none; transition: all .2s;
}
.fn-hero-v3-cta:hover { background: #ffe3a8; }
.fn-hero-v3-side { display: flex; flex-direction: column; gap: 10px; }
.fn-hero-v3-side-title-bar {
    font-size: 11px; letter-spacing: 0.25em; color: #ffe3a8;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.45);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.fn-hero-v3-side-card {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 14px 18px;
    display: flex; gap: 14px; align-items: flex-start;
    transition: all .2s; color: #fff; text-decoration: none;
}
.fn-hero-v3-side-card:hover { background: rgba(255,255,255,0.28); border-color: #ffe3a8; }
.fn-hero-v3-side-num {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 22px; color: #ffe3a8; line-height: 1; min-width: 28px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.fn-hero-v3-side-body { flex: 1; }
.fn-hero-v3-side-cat {
    font-size: 10px; color: #ffe3a8; letter-spacing: 0.15em;
    margin-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.fn-hero-v3-side-title {
    font-size: 13px; line-height: 1.55; color: #fff; font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ===== 備後起業家創塾 ===== */
.fn-dls-banner {
    background: linear-gradient(135deg, #0E1F47 0%, #1a3866 50%, #2a4d8b 100%);
    color: #fff;
    padding: 56px 0;
    position: relative;
    overflow: hidden;
}
.fn-dls-banner::before {
    content: ""; position: absolute; top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(201,168,117,0.25), transparent 70%);
    z-index: 1;
}
.fn-dls-banner-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr auto;
    align-items: center; gap: 40px;
}
.fn-dls-label {
    display: inline-block;
    font-size: 10px; letter-spacing: 0.25em; color: #c9a875;
    border: 1px solid #c9a875; padding: 4px 12px;
    margin-bottom: 14px; font-weight: 700;
}
.fn-dls-title {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.4;
}
.fn-dls-title em { font-style: normal; color: #c9a875; }
.fn-dls-sub { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.75; margin: 0; }
.fn-dls-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px; background: #c9a875; color: #0E1F47 !important;
    font-size: 13px; letter-spacing: 0.1em; font-weight: 700;
    border-radius: 2px; white-space: nowrap; transition: all .2s;
    text-decoration: none;
}
.fn-dls-cta:hover { background: #fff; transform: translateY(-2px); }

/* ===== セクション共通 ===== */
.fn-v3-section { padding: 64px 0; background: #fefdf9; }
.fn-v3-section-alt { background: #faf6ee; }
.fn-v3-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 32px; padding-bottom: 16px;
    border-bottom: 2px solid #0E1F47;
    flex-wrap: wrap; gap: 12px;
}
.fn-v3-section-title-wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fn-v3-section-no {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 22px; color: #b04a4a; font-weight: 700;
}
.fn-v3-section-title {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 26px; color: #0E1F47; font-weight: 700; margin: 0;
}
.fn-v3-section-sub {
    font-size: 11px; letter-spacing: 0.18em; color: #b04a4a;
}
.fn-v3-section-more {
    font-size: 12px; letter-spacing: 0.08em; color: #b04a4a;
    font-weight: 600; text-decoration: none;
}

/* ===== TODAY'S READS ===== */
.fn-v3-reads-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.fn-v3-read-card {
    background: #fff; border: 1px solid #e3ddd0; overflow: hidden;
    transition: all .25s; display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
}
.fn-v3-read-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    border-color: #b04a4a;
}
.fn-v3-read-thumb {
    height: 160px; background-size: cover; background-position: center;
    background-color: #faf6ee; position: relative;
}
.fn-v3-read-thumb-cat {
    position: absolute; bottom: 0; left: 0;
    background: #0E1F47; color: #fff;
    font-size: 10px; letter-spacing: 0.12em; padding: 4px 10px;
}
.fn-v3-read-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }
.fn-v3-read-title {
    font-size: 14px; line-height: 1.55; color: #1a1a1a;
    font-weight: 600; margin-bottom: 10px; flex: 1;
}
.fn-v3-read-meta { font-size: 11px; color: #666; display: flex; gap: 10px; }

/* ===== CATEGORY HUB ===== */
.fn-v3-cat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.fn-v3-cat-card {
    background: #fff; border: 1px solid #e3ddd0; padding: 24px 22px;
    transition: all .25s; position: relative;
    text-decoration: none; color: inherit; display: block;
}
.fn-v3-cat-card:hover { border-color: #b04a4a; transform: translateY(-3px); }
.fn-v3-cat-card::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 40px; height: 3px; background: #b04a4a;
}
.fn-v3-cat-card-icon { font-size: 32px; margin-bottom: 8px; line-height: 1; }
.fn-v3-cat-card-title {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 18px; font-weight: 700; color: #0E1F47; margin-bottom: 4px;
}
.fn-v3-cat-card-en {
    font-size: 10px; letter-spacing: 0.18em; color: #b04a4a; margin-bottom: 14px;
}
.fn-v3-cat-card-list { list-style: none; padding: 0; margin: 0; }
.fn-v3-cat-card-list li {
    font-size: 12px; padding: 6px 0;
    border-bottom: 1px dashed #e3ddd0; color: #1a1a1a; transition: color .15s;
}
.fn-v3-cat-card-list li:last-child { border-bottom: none; }
.fn-v3-cat-card-link {
    display: block; margin-top: 12px;
    font-size: 11px; color: #b04a4a; text-align: right;
}

/* ===== 図鑑 ===== */
.fn-v3-zukan-lead {
    font-size: 14px; color: #666; margin: 0 0 24px; line-height: 1.8;
}
.fn-v3-zukan-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.fn-v3-zukan-card {
    background: #fff; border: 1px solid #e3ddd0; padding: 22px 18px;
    text-align: center; transition: all .2s; position: relative;
    text-decoration: none; color: inherit; display: block;
}
.fn-v3-zukan-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #b04a4a 0%, #0E1F47 100%);
}
.fn-v3-zukan-card:hover {
    transform: translateY(-3px); border-color: #b04a4a;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.fn-v3-zukan-icon { font-size: 36px; margin-bottom: 8px; }
.fn-v3-zukan-title {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 16px; font-weight: 700; color: #0E1F47;
}
.fn-v3-zukan-sub {
    font-size: 9px; letter-spacing: 0.18em; color: #b04a4a; margin: 4px 0 10px;
}
.fn-v3-zukan-desc {
    font-size: 12px; color: #666; margin-bottom: 12px; min-height: 2.4em;
}
.fn-v3-zukan-count { font-size: 13px; font-weight: 700; color: #b04a4a; }

/* ===== TikTok ===== */
.fn-v3-tiktok-section { background: #1a1a1a; color: #fff; padding: 56px 0; }
.fn-v3-tiktok-section .fn-v3-section-title { color: #fff; }
.fn-v3-tiktok-section .fn-v3-section-no { color: #c9a875; }
.fn-v3-tiktok-section .fn-v3-section-sub { color: #c9a875; }
.fn-v3-tiktok-section .fn-v3-section-more { color: #c9a875; }
.fn-v3-tiktok-section .fn-v3-section-head { border-color: #c9a875; }
.fn-v3-tiktok-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.fn-v3-tiktok-card {
    aspect-ratio: 9/16; background: #333; border-radius: 8px;
    position: relative; overflow: hidden; transition: transform .25s;
    background-size: cover; background-position: center;
    text-decoration: none; display: block;
}
.fn-v3-tiktok-card:hover { transform: scale(1.02); }
.fn-v3-tiktok-card-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7); font-size: 40px;
}
.fn-v3-tiktok-cta { text-align: center; margin-top: 32px; }
.fn-v3-tiktok-cta a {
    display: inline-block; padding: 14px 36px;
    background: linear-gradient(90deg, #ff0050, #00f2ea);
    color: #fff !important; font-size: 13px; letter-spacing: 0.08em;
    font-weight: 700; border-radius: 100px; text-decoration: none;
}

/* ===== LATEST + LETTER ===== */
.fn-v3-bottom { padding: 64px 0; border-top: 1px solid #e3ddd0; background: #fefdf9; }
.fn-v3-bottom-grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px;
}
.fn-v3-latest-list { list-style: none; padding: 0; margin: 0; }
.fn-v3-latest-item { border-bottom: 1px solid #e3ddd0; }
.fn-v3-latest-link {
    display: flex; align-items: baseline; gap: 14px;
    padding: 14px 0; color: #1a1a1a; transition: color .15s;
    text-decoration: none;
}
.fn-v3-latest-link:hover { color: #b04a4a; }
.fn-v3-latest-cat {
    font-size: 10px; color: #b04a4a; letter-spacing: 0.12em;
    flex-shrink: 0; min-width: 50px;
}
.fn-v3-latest-title { flex: 1; font-size: 14px; line-height: 1.5; }
.fn-v3-latest-date {
    font-size: 11px; color: #666; flex-shrink: 0;
    font-feature-settings: "tnum";
}
.fn-v3-letter-card {
    background: #faf6ee; padding: 36px 32px;
    border-left: 4px solid #b04a4a; border-radius: 0 4px 4px 0;
}
.fn-v3-letter-eyebrow {
    font-size: 10px; letter-spacing: 0.2em; color: #b04a4a; margin-bottom: 10px;
}
.fn-v3-letter-title {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 22px; line-height: 1.5; color: #0E1F47;
    margin-bottom: 18px; font-weight: 700;
}
.fn-v3-letter-title em { color: #b04a4a; font-style: italic; }
.fn-v3-letter-body {
    font-size: 14px; line-height: 1.95; color: #1a1a1a; margin-bottom: 16px;
}
.fn-v3-letter-sign {
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 13px; color: #666; margin: 0;
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px) {
    .fn-hero-v3 { min-height: 540px; }
    .fn-hero-v3-content { padding: 80px 0 60px; }
    .fn-hero-v3-grid { grid-template-columns: 1fr; gap: 32px; }
    .fn-hero-v3-title { font-size: clamp(28px, 7vw, 42px); }
    .fn-dls-banner-inner { grid-template-columns: 1fr; gap: 24px; }
    .fn-v3-reads-grid { grid-template-columns: repeat(2, 1fr); }
    .fn-v3-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .fn-v3-zukan-grid { grid-template-columns: repeat(2, 1fr); }
    .fn-v3-tiktok-grid { grid-template-columns: repeat(2, 1fr); }
    .fn-v3-bottom-grid { grid-template-columns: 1fr; gap: 32px; }
    .fn-v3-section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    .fn-hero-v3 { min-height: 480px; }
    .fn-hero-v3-content { padding: 60px 0 40px; }
    .fn-hero-v3-grid { gap: 24px; }
    .fn-hero-v3-meta { gap: 10px; font-size: 11px; }
    .fn-hero-v3-cta { padding: 12px 24px; font-size: 12px; }
    .fn-dls-banner { padding: 40px 0; }
    .fn-dls-cta { width: 100%; justify-content: center; }
    .fn-v3-section { padding: 48px 0; }
    .fn-v3-section-title { font-size: 22px; }
    .fn-v3-reads-grid { grid-template-columns: 1fr; }
    .fn-v3-cat-grid { grid-template-columns: 1fr; }
    .fn-v3-zukan-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .fn-v3-tiktok-grid { grid-template-columns: repeat(2, 1fr); }
    .fn-v3-letter-card { padding: 24px 20px; }
    .fn-v3-latest-link { flex-wrap: wrap; }
    .fn-v3-latest-date { width: 100%; padding-top: 4px; }
}

/* TikTok セクション内 video card 調整 (v3) */
.fn-v3-tiktok-section .fn-v3-tiktok-grid .fn-video-card {
    border-color: rgba(255,255,255,0.15);
}
.fn-v3-tiktok-section .fn-v3-tiktok-grid .fn-video-card-caption {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.9);
    border-top-color: rgba(255,255,255,0.1);
}