/*
Theme Name: HI Voice
Theme URI: https://hivoice.org/
Description: HI Voice（異文化マネジメントインタビューメディア）用の子テーマ。Goimaru Theme をベースにカスタマイズ。
Author: HIクロスマネジメント
Version: 2.0.0
Template: wp-goimaru-theme
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-goimaru-theme-child
*/

/* ============================================================
   デザイントークン（ClaudeDesign 準拠）
   ============================================================ */
:root {
    --goimaru-color-main:      #1a1a1a;
    --goimaru-color-accent:    #1a3a5c;
    --goimaru-color-text:      #1a1a1a;
    --goimaru-color-bg:        #ffffff;
    --goimaru-color-header-bg: #ffffff;
    --goimaru-color-footer-bg: #fafafa;
    --font-sans:               'Noto Sans JP', system-ui, -apple-system, sans-serif;
    --font-serif:              'Noto Serif JP', serif;
    --goimaru-line-height:     1.95;
    --container-max:           1200px;
    /* 補助 */
    --color-ink:   #1a1a1a;
    --color-sub:   #3a3a3a;
    --color-mute:  #666666;
    --color-rule:  #e0e0e0;
    --color-band:  #fafafa;
    --color-quote: #f6f6f6;
    --color-accent:#1a3a5c;
}

/* ============================================================
   リセット・ベース
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
    font-family:'Noto Serif JP',serif;
    font-weight:500;
    font-size:17px;
    line-height:1.95;
    color:#1a1a1a;
    background:#ffffff;
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"palt";
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.skip-link{position:absolute;top:-100%;left:0;z-index:9999;padding:8px 16px;background:#1a3a5c;color:#fff}
.skip-link:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============================================================
   コンテナ
   ============================================================ */
.fb-container{width:100%;max-width:1200px;margin:0 auto;padding:0 32px}

/* ============================================================
   日付ストリップ
   ============================================================ */
.fb-date-strip{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 32px;
    background:#fafafa;border-bottom:1px solid #e0e0e0;
    color:#666;font-family:'Noto Sans JP',sans-serif;
    font-size:11px;letter-spacing:.12em;
}

/* ============================================================
   ヘッダー
   ============================================================ */
.fb-header{
    position:sticky;top:0;z-index:100;
    background:#fff;border-bottom:1px solid #eee;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.fb-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.fb-header__brand{display:flex;flex-direction:column;gap:0}
.fb-header__site-name{
    font-family:'Noto Sans JP',sans-serif;font-weight:900;
    font-size:18px;color:#1a1a1a;letter-spacing:-.01em;white-space:nowrap;
}
.fb-header__site-name a{color:#1a1a1a}
.fb-header__tagline{font-size:7.5px;color:#666;letter-spacing:.18em;line-height:1.2;margin-top:5px}

.fb-header__menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.fb-hamburger{display:flex;flex-direction:column;gap:5px;width:22px}
.fb-hamburger span{display:block;height:1px;background:#1a1a1a;border-radius:0;transition:transform .3s,opacity .3s}

.fb-nav{display:flex;gap:4px;align-items:center}
.fb-nav .menu-item a{
    display:block;padding:8px 14px;
    font-family:'Noto Sans JP',sans-serif;font-size:13px;color:#666;
    border-radius:0;transition:color .15s;
}
.fb-nav .menu-item a:hover,.fb-nav .menu-item.current-menu-item a{color:#1a1a1a}

/* ============================================================
   メインラッパー
   ============================================================ */
.fb-main{min-height:60vh}

/* ============================================================
   記事ページグリッド（2カラム）
   ============================================================ */
.fb-article-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:56px;
    padding:36px 32px 0;
    align-items:start;
    max-width:1200px;
    margin:0 auto;
}

/* ============================================================
   汎用レイアウト（home / archive）
   ============================================================ */
.fb-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;padding:40px 0}
.fb-layout--page{grid-template-columns:1fr}
.fb-layout__content{min-width:0}
.fb-layout__content--wide{max-width:800px;margin:0 auto}

/* ============================================================
   記事ヘッドブロック
   ============================================================ */
.fb-article-head{
    padding-bottom:28px;
    border-bottom:1px solid #e0e0e0;
    margin-bottom:32px;
}

/* パンくず */
.fb-breadcrumb{padding:0 0 0}
.fb-breadcrumb__list{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:#666;font-family:'Noto Sans JP',sans-serif;letter-spacing:.08em}
.fb-breadcrumb__list li:not(:last-child)::after{content:"›";margin-left:4px;color:#e0e0e0}
.fb-breadcrumb__list a{color:#666;transition:color .15s}
.fb-breadcrumb__list a:hover,.fb-breadcrumb__list li:last-child a{color:#1a3a5c}

/* カテゴリラベル */
.fb-article-head__label{margin-top:18px}
.fb-category-label{
    font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:11px;
    letter-spacing:.24em;color:#1a3a5c;
    padding:4px 10px;border:1px solid #1a3a5c;
    display:inline-block;text-decoration:none;
    transition:background .15s,color .15s;
}
.fb-category-label:hover{background:#1a3a5c;color:#fff}

/* H1 */
.fb-article-title,
.fb-interview-single h1{
    font-family:'Noto Serif JP',serif;font-weight:700;
    font-size:38px;line-height:1.45;color:#1a1a1a;
    margin:18px 0 0;letter-spacing:.005em;text-wrap:pretty;
}

/* メタストリップ */
.fb-interview-meta{
    margin-top:22px;
    display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;
    font-family:'Noto Sans JP',sans-serif;font-size:12px;
    color:#666;letter-spacing:.08em;
}
.fb-interview-meta__divider{display:inline-block;width:1px;height:10px;background:#e0e0e0}
.fb-interview-meta__date-label{font-size:.75rem;opacity:.8;margin-right:4px}

/* ============================================================
   記事本文
   ============================================================ */
.fb-interview-body{font-size:17px;line-height:1.95;color:#1a1a1a}

.fb-interview-body p{
    margin:0 0 22px;max-width:38em;
    text-indent:1em;font-weight:500;
    font-family:'Noto Serif JP',serif;
}
.fb-interview-body h2{
    font-family:'Noto Sans JP',sans-serif;font-weight:700;
    font-size:24px;line-height:1.55;color:#1a1a1a;
    margin:56px 0 24px;
    padding-left:14px;
    border-left:3px solid #1a3a5c;
    letter-spacing:0;
}
.fb-interview-body h3{
    font-family:'Noto Sans JP',sans-serif;font-weight:700;
    font-size:18px;color:#1a1a1a;margin:36px 0 16px;
}
.fb-interview-body ul,.fb-interview-body ol{margin:16px 0 22px 24px;font-family:'Noto Serif JP',serif}
.fb-interview-body li{margin-bottom:8px;font-weight:500}
.fb-interview-body ol{list-style:decimal}
.fb-interview-body ul{list-style:disc}
.fb-interview-body strong{font-weight:700;color:#1a1a1a}
.fb-interview-body a{color:#1a3a5c;text-decoration:underline;text-underline-offset:2px}

/* Blockquote: 罫線なし・極薄グレー */
.fb-interview-body blockquote{
    margin:22px 0;
    background:#f6f6f6;
    padding:18px 24px;
    border:none !important;
    font-style:normal;color:#1a1a1a;
}
.fb-interview-body blockquote p{text-indent:0;max-width:100%;font-weight:500}
.fb-interview-body figure:has(blockquote){
    margin:22px 0;
    background:#f6f6f6;
    padding:18px 24px;
}
.fb-interview-body figure:has(blockquote) blockquote{background:transparent;padding:0;margin:0}
.fb-interview-body figcaption{
    margin-top:6px;
    font-family:'Noto Sans JP',sans-serif;font-size:12px;
    color:#666;text-align:right;line-height:1.6;
}

/* ============================================================
   記事フッター（タグ・シェア）
   ============================================================ */
.fb-interview-footer{margin-top:48px;padding-top:32px;border-top:1px solid #e0e0e0}
.fb-tag-group{margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fb-tag-group__label{font-size:.8rem;font-weight:700;color:#666;font-family:'Noto Sans JP',sans-serif}
.fb-tag{
    display:inline-block;padding:3px 8px;
    font-size:.78rem;background:transparent;
    border:1px solid #e0e0e0;color:#3a3a3a;
    font-family:'Noto Sans JP',sans-serif;
    transition:border-color .15s,color .15s;
}
.fb-tag:hover{border-color:#1a3a5c;color:#1a3a5c}

.fb-share{display:flex;align-items:center;gap:10px;margin-top:20px}
.fb-share__label{font-size:.8rem;font-weight:700;color:#666;font-family:'Noto Sans JP',sans-serif}
.fb-share__btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;font-size:.85rem;font-weight:700;transition:all .2s;
    font-family:'Noto Sans JP',sans-serif;
}
.fb-share__btn--x{background:#1a1a1a;color:#fff}
.fb-share__btn--x:hover{background:#333}
.fb-share__btn--facebook{background:#1877f2;color:#fff}
.fb-share__btn--facebook:hover{background:#1565c0}
.fb-share__btn--linkedin{background:#0077b5;color:#fff}
.fb-share__btn--linkedin:hover{background:#005f8d}

/* ============================================================
   関連記事（続けて読む）
   ============================================================ */
.fb-related{margin-top:80px;padding-top:36px;border-top:2px solid #1a1a1a}
.fb-related__header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
.fb-related__title{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:20px;color:#1a1a1a;margin:0}
.fb-related__more{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:12px;color:#1a3a5c;letter-spacing:.08em}
.fb-related__more:hover{text-decoration:underline}
.fb-related__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}

/* ============================================================
   記事カード（fb-card）
   ============================================================ */
.fb-card{background:#fff;overflow:hidden;transition:opacity .2s}
.fb-card:hover{opacity:.85}
.fb-card__link{display:block;color:inherit}
.fb-card__image{position:relative;aspect-ratio:3/2;overflow:hidden;background:#e8e8ef}
.fb-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.fb-card:hover .fb-card__image img{transform:scale(1.03)}
.fb-card__body{padding:14px 0 0}
.fb-card__meta-top{
    display:flex;align-items:center;gap:10px;
    margin-bottom:8px;
    font-family:'Noto Sans JP',sans-serif;
}
.fb-card__industry{font-weight:700;font-size:10px;letter-spacing:.24em;color:#1a3a5c}
.fb-card__date{font-size:10px;color:#666;letter-spacing:.06em}
.fb-card__title{
    font-family:'Noto Serif JP',serif;font-weight:600;
    font-size:16px;line-height:1.7;color:#1a1a1a;
    margin-bottom:6px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.fb-card__interviewee{font-size:.8rem;color:#666;margin-top:6px;line-height:1.6;font-family:'Noto Sans JP',sans-serif}
.fb-card__name{font-weight:700;color:#3a3a3a}
.fb-card__position{display:block;font-size:.75rem}
.fb-card__excerpt{font-size:.85rem;color:#3a3a3a;line-height:1.7;margin-bottom:12px}

/* フィーチャーカード */
.fb-card--featured{grid-column:1/-1}
.fb-card__link--featured{display:grid;grid-template-columns:1fr 1fr}
.fb-card__image--featured{aspect-ratio:auto;min-height:280px}
.fb-card__body--featured{padding:32px;display:flex;flex-direction:column;justify-content:center}
.fb-card__title--featured{font-family:'Noto Serif JP',serif;font-size:1.4rem}

/* ============================================================
   サイドバー
   ============================================================ */
.fb-layout__sidebar,.fb-sidebar{position:sticky;top:24px;min-width:0}

.fb-sidebar .fb-widget,.fb-widget{
    margin-bottom:36px;
    display:flex;flex-direction:column;gap:0;
}
.fb-widget__title{
    font-family:'Noto Sans JP',sans-serif;font-weight:700;
    font-size:11px;letter-spacing:.28em;color:#1a3a5c;
    margin-bottom:14px;padding-bottom:8px;
    border-bottom:1px solid #1a3a5c;
}
.fb-sidebar-nav__link{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 0;font-size:.85rem;color:#3a3a3a;
    border-bottom:1px dashed #e0e0e0;
    font-family:'Noto Sans JP',sans-serif;
    transition:color .15s;
}
.fb-sidebar-nav__link:hover,.fb-sidebar-nav__link.is-active{color:#1a3a5c}
.fb-sidebar-nav__count{font-size:.75rem;color:#999}

.fb-topic-cloud{display:flex;flex-wrap:wrap;gap:6px}
.fb-topic-tag{
    display:inline-block;padding:3px 8px;
    font-family:'Noto Sans JP',sans-serif;font-size:11px;
    color:#3a3a3a;border:1px solid #e0e0e0;background:transparent;
    transition:border-color .15s,color .15s;
}
.fb-topic-tag:hover,.fb-topic-tag.is-active{border-color:#1a3a5c;color:#1a3a5c}

/* ============================================================
   ヒーロー（home ページ用）
   ============================================================ */
.fb-hero{background:linear-gradient(135deg,#1a1a2e 0%,#1a3a5c 100%);color:#fff;padding:80px 0 72px;text-align:center}
.fb-hero__title{font-family:'Noto Serif JP',serif;font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;line-height:1.35;margin-bottom:20px;letter-spacing:.02em;color:#fff}
.fb-hero__lead{font-size:clamp(.9rem,1.6vw,1.1rem);color:hsla(0,0%,100%,.85);line-height:1.8;margin-bottom:32px}

/* ============================================================
   アーカイブヘッダー
   ============================================================ */
.fb-archive-header{padding:40px 0 24px;border-bottom:1px solid #e0e0e0;margin-bottom:32px}
.fb-archive-header__title{font-family:'Noto Serif JP',serif;font-size:1.75rem;font-weight:700;margin-bottom:8px;color:#1a1a1a}
.fb-archive-header__description{font-size:.95rem;color:#666;line-height:1.7}

/* ============================================================
   フィルターナビ（home / archive）
   ============================================================ */
.fb-filter-nav{margin-bottom:32px;display:flex;flex-direction:column;gap:12px}
.fb-filter-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fb-filter-group__label{font-size:.8rem;font-weight:700;color:#666;margin-right:4px;font-family:'Noto Sans JP',sans-serif}
.fb-filter-tag{display:inline-block;padding:6px 14px;font-size:.8rem;border:1px solid #e0e0e0;color:#3a3a3a;transition:all .15s;font-family:'Noto Sans JP',sans-serif}
.fb-filter-tag:hover,.fb-filter-tag.is-active{background:#1a3a5c;border-color:#1a3a5c;color:#fff}
.fb-filter-tag__count{font-size:.7rem;opacity:.7}

/* セクション（home） */
.fb-section{padding:56px 0}
.fb-section--alt{background:#fafafa}
.fb-section__header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px;gap:16px}
.fb-section__title{font-family:'Noto Serif JP',serif;font-size:1.5rem;font-weight:700;color:#1a1a1a;letter-spacing:.02em}
.fb-section__more{font-size:.875rem;font-weight:700;color:#1a3a5c;white-space:nowrap;font-family:'Noto Sans JP',sans-serif}
.fb-section__more:hover{text-decoration:underline}

.fb-interview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}

/* ============================================================
   ボタン
   ============================================================ */
.fb-btn{display:inline-block;padding:12px 28px;font-size:.9rem;font-weight:700;border:1px solid transparent;transition:all .2s;cursor:pointer;text-align:center;font-family:'Noto Sans JP',sans-serif;letter-spacing:.04em}
.fb-btn--primary{background:#1a3a5c;color:#fff;border-color:#1a3a5c}
.fb-btn--primary:hover{background:#0f2a45;border-color:#0f2a45}

/* ============================================================
   フッター（ライトテーマ）
   ============================================================ */
.fb-footer{
    background:#fafafa;border-top:1px solid #e0e0e0;
    color:#3a3a3a;padding:48px 56px 36px;
    font-family:'Noto Sans JP',sans-serif;
}
.fb-footer__widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid #e0e0e0}
.fb-footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.fb-footer__copyright{font-size:11px;color:#666;letter-spacing:.08em}
.fb-footer__credit{font-size:.75rem;color:#999}
.fb-footer-nav{display:flex;gap:16px}
.fb-footer-nav .menu-item a{font-size:.8rem;color:#3a3a3a;transition:color .15s}
.fb-footer-nav .menu-item a:hover{color:#1a3a5c}
.fb-footer-widget-col{}
.fb-footer-widget__title{font-size:11px;font-weight:700;letter-spacing:.24em;color:#666;margin-bottom:12px}

/* ============================================================
   ページネーション
   ============================================================ */
.fb-pagination{margin-top:40px;text-align:center}
.fb-pagination .page-numbers{display:inline-flex;gap:0;list-style:none}
.fb-pagination .page-numbers a,.fb-pagination .page-numbers span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;font-size:.85rem;border:1px solid #e0e0e0;margin:0 2px;color:#3a3a3a;transition:all .15s;font-family:'Noto Sans JP',sans-serif}
.fb-pagination .page-numbers a:hover{background:#fafafa}
.fb-pagination .page-numbers .current{background:#1a3a5c;border-color:#1a3a5c;color:#fff}

/* ============================================================
   空ページ
   ============================================================ */
.fb-empty{text-align:center;padding:80px 20px}
.fb-empty h1{font-size:4rem;font-weight:800;color:#e0e0e0;margin-bottom:8px;font-family:'Noto Sans JP',sans-serif}
.fb-empty h2{font-size:1.35rem;font-weight:700;margin-bottom:12px}
.fb-empty p{font-size:.95rem;color:#666;margin-bottom:24px}

/* ============================================================
   検索フォーム
   ============================================================ */
.search-form{display:flex;gap:8px;max-width:400px;margin:0 auto}
.search-form .search-field{flex:1;padding:10px 16px;border:1px solid #e0e0e0;font-size:.9rem;font-family:'Noto Sans JP',sans-serif}
.search-form .search-submit{padding:10px 20px;background:#1a3a5c;color:#fff;border:none;font-weight:700;cursor:pointer;font-family:'Noto Sans JP',sans-serif}
.search-form .search-submit:hover{background:#0f2a45}

/* ============================================================
   レスポンシブ ≤1024px
   ============================================================ */
@media(max-width:1024px){
    /* ヘッダー */
    .fb-header__menu-toggle{display:block}
    .fb-header__nav{
        position:fixed;top:0;left:0;right:0;bottom:0;
        background:hsla(0,0%,100%,.98);padding:80px 24px 24px;
        transform:translateX(100%);transition:transform .3s;z-index:99;
    }
    .fb-header__nav.is-open{transform:translateX(0)}
    .fb-nav{flex-direction:column;gap:0}
    .fb-nav .menu-item a{padding:14px 16px;font-size:1rem;border-bottom:1px solid #f3f4f6}

    /* 記事グリッド */
    .fb-article-grid{grid-template-columns:1fr;gap:0;padding:24px 18px 0;max-width:100%}
    .fb-layout{grid-template-columns:1fr;gap:24px;padding:24px 0}

    /* サイドバー */
    .fb-layout__sidebar,.fb-sidebar{position:static;top:auto;margin-top:40px}

    /* 日付ストリップ */
    .fb-date-strip{padding:6px 18px;font-size:10px}

    /* 記事ヘッド */
    .fb-article-head{padding-bottom:20px;margin-bottom:24px}
    .fb-article-head__label{margin-top:14px}
    .fb-article-title,.fb-interview-single h1{font-size:26px;line-height:1.55;margin-top:14px}
    .fb-interview-meta{margin-top:18px;font-size:11px}

    /* 本文 */
    .fb-interview-body{font-size:16px}
    .fb-interview-body p{margin-bottom:18px;max-width:100%}
    .fb-interview-body h2{font-size:20px;margin:40px 0 18px}
    .fb-interview-body blockquote,.fb-interview-body figure:has(blockquote){padding:14px 18px}

    /* 関連記事 */
    .fb-related{margin-top:56px;padding-top:28px}
    .fb-related__title{font-size:16px}
    .fb-related__grid{grid-template-columns:1fr;gap:20px}

    /* カード */
    .fb-card__link--featured{grid-template-columns:1fr}
    .fb-card__image--featured{min-height:200px}
    .fb-card__body--featured{padding:20px}

    /* フッター */
    .fb-footer{padding:32px 22px 28px}
    .fb-footer__bottom{flex-direction:column;text-align:center}

    /* ヒーロー */
    .fb-hero{padding:48px 0 40px}

    /* コンテナ */
    .fb-container{padding:0 18px}

    /* フィルター・セクション */
    .fb-section{padding:36px 0}
    .fb-filter-group{flex-wrap:wrap}
    .fb-interview-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
    .fb-container{padding:0 16px}
    .fb-card__body{padding:12px 0 0}
    .fb-card__title{font-size:.95rem}
}

/* ============================================================
   印刷
   ============================================================ */
@media print{
    .fb-header,.fb-footer,.fb-sidebar,.fb-breadcrumb,.fb-share,.fb-related,.fb-filter-nav,.fb-date-strip{display:none!important}
    .fb-article-grid,.fb-layout{display:block!important}
    body{color:#000;background:#fff;font-size:12pt}
    .fb-interview-body h2{border-left:none;padding-left:0;border-bottom:1px solid #999}
}


/* ==========================================================================
   HI Voice — Article Style
   インタビュー記事ページ用スタイルシート
   --------------------------------------------------------------------------
   single post と page_id=2 に適用される、シンプルな記事レイアウト。
   構成・トークンは固定ページ・記事ページ用に最適化されている。
   ========================================================================== */


/* ==========================================================================
   1. Design Tokens
   ========================================================================== */

:root {
  /* ----- color ----- */
  --paper:    #ffffff;   /* 純白 */
  --paper-2:  #f3f5f7;   /* カード地 / ニュートラル */
  --ink:      #14171c;
  --ink-2:    #2a2e35;
  --mute:     #6b7280;
  --rule:     #e5e7eb;
  --rule-2:   #9ca3af;
  --accent:   #1f3a5c;

  /* ----- typography ----- */
  --ff-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-serif: "Noto Serif JP", serif;

  /* ----- layout ----- */
  --container:  1200px;
  --article:    880px;
  --pad-x:      40px;
  --pad-x-sm:   24px;
}


/* ==========================================================================
   2. Base / Reset
   ========================================================================== */

html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.85;
}

a { color: inherit; }
::selection { background: var(--accent); color: var(--paper); }


/* ==========================================================================
   3. Layout — fb-container / fb-main / fb-layout*
   ========================================================================== */

.fb-container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.fb-main {
  padding-top: 0;
  padding-bottom: 0;
}

/* fb-layout : サイドバー有無で2カラム化される想定。
   このサンプルは noimage-visible / sidebar-right の単記事ページなので、
   本文だけを中央寄せに絞る。 */
.fb-layout--page {
  display: block;
}
.fb-layout__content {
  max-width: var(--article);
  margin: 0 auto;
  padding-top: 72px;
  padding-bottom: 96px;
}


/* ==========================================================================
   4. Site Header — fb-header*  (追従 + 縮小)
   ========================================================================== */

.fb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: background 0.25s ease;
}
.fb-header__inner {
  height: auto;
  padding-top: 28px;
  padding-bottom: 26px;
  transition: padding 0.25s ease;
}
.fb-header__brand {
  margin: 0;
}
.fb-header__site-name {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
  transition: font-size 0.25s ease;
}
.fb-header__site-name a { text-decoration: none; }

.fb-header__tagline {
  margin: 8px 0 0;
  font-family: var(--ff-sans);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.24em;
  line-height: 1;
  max-height: 16px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}

/* ----- shrunk state -----
   JS が 40px スクロールで .is-shrunk を付与する */
.fb-header.is-shrunk {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 var(--rule);
}
.fb-header.is-shrunk .fb-header__inner   { padding-top: 12px; padding-bottom: 11px; }
.fb-header.is-shrunk .fb-header__site-name { font-size: 16px; }
.fb-header.is-shrunk .fb-header__tagline { max-height: 0; margin-top: 0; opacity: 0; }


/* ==========================================================================
   5. Site Footer — fb-footer*
   ========================================================================== */

.fb-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  margin-top: 0;
  padding: 0;
}
.fb-footer .fb-container {
  padding-top: 40px;
  padding-bottom: 36px;
}
.fb-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

/* 元 markup が <p class="fb-footer__copyright"><p class="copy">...</p></p>
   という非妥当な入れ子なので、ブラウザの自動補正を踏まえて両方に効かせる。 */
.fb-footer__copyright,
.fb-footer .copy {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.04em;
}
.fb-footer .copy { display: inline; }

/* nav: WP の wp_nav_menu が <ul class="menu"><li class="menu-item">…</li></ul>
   を出力する */
.fb-footer-nav .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.fb-footer-nav .menu-item a {
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.08em;
}
.fb-footer-nav .menu-item a:hover { color: var(--accent); }


/* ==========================================================================
   6. Entry Header — entry-header / entry-title
   ========================================================================== */

.entry-header {
  margin: 0;
}
.entry-title {
  margin: 0 0 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
  position: relative;
}
.entry-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 96px; height: 3px;
  background: var(--accent);
}


/* ==========================================================================
   7. Entry Content
   ========================================================================== */

.entry-content {
  margin: 0;
}
.entry-content > * + * {
  /* WP のブロック間は標準で 24px 程度。各ブロックの margin を尊重するので
     ここでは何もしない。 */
}


/* ----- 7.1 Figure ─ wp-block-image -------------------------------------
   WP は二通りの構造を吐く:
     (a) <div class="wp-block-image"><figure>...<img/><figcaption/></figure></div>
     (b) <figure class="wp-block-image"><img/><figcaption/></figure>
   どちらにも当たる selectors を書く。
   先頭の (a) は hero として横にはみ出させる。
   ----------------------------------------------------------------------- */

.entry-content .wp-block-image {
  margin: 56px 0;
}
.entry-content .wp-block-image figure { margin: 0; }

/* 画像本体 */
.entry-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background:
    linear-gradient(135deg, rgba(31, 58, 92, 0.04), rgba(20, 23, 28, 0.06)),
    repeating-linear-gradient(45deg, #eef0f3 0 22px, #e1e4e9 22px 44px);
}

/* キャプション : WP は <figcaption class="wp-element-caption"> を出力 */
.entry-content .wp-block-image figcaption,
.entry-content .wp-element-caption {
  margin-top: 12px;
  font-family: var(--ff-sans);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.04em;
  text-align: right;
}

/* hero — entry-content の先頭画像 (div.wp-block-image) を横にはみ出させる */
.entry-content > div.wp-block-image:first-child {
  margin-top: 0;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
  margin-bottom: 56px;
}


/* ----- 7.2 Lead ─ hivoice-lead ----------------------------------------- */

.hivoice-lead {
  margin: 0 0 56px;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 2.05;
  letter-spacing: 0.01em;
  color: var(--ink);
}


/* ----- 7.3 Guest Card ─ hivoice-guest-card* ---------------------------- */

.hivoice-guest-card {
  margin: 0 0 40px;
  padding: 32px 32px 30px;
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.hivoice-guest-card__label {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent);
}
.hivoice-guest-card__name {
  margin: 0 0 6px;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.hivoice-guest-card__attribute {
  margin: 0 0 18px;
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mute);
}
.hivoice-guest-card__bio {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
}


/* ----- 7.4 Summary ─ hivoice-summary* ---------------------------------- */

/* 「この記事のポイント」は記事の要なので強めに。
   黒は重すぎるが、淡すぎても印象が弱まる。
   →紺(--accent)を地色に使う。色相がある分、黒より柔らかい強さが出る。 */
.hivoice-summary {
  margin: 0 0 80px;
  padding: 28px 32px 30px;
  background: var(--accent);          /* 紺地 */
  color: var(--paper);
  border-top: none;
}
.hivoice-summary__label {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 2px solid var(--paper);  /* 縦罫も白へ */
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--paper);
  opacity: 0.85;
}
.hivoice-summary__list { margin: 0; padding: 0; list-style: none; }
.hivoice-summary__list li {
  padding: 14px 0 14px 1.2em;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--paper);
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.85;
  text-indent: -1.2em;
}
.hivoice-summary__list li:first-child { border-top: none; }
.hivoice-summary__list li::before {
  content: "—\00a0";
  color: var(--paper);
  opacity: 0.7;
}


/* ----- 7.5 Heading (H2) ─ wp-block-heading ----------------------------- */

.entry-content h2.wp-block-heading {
  margin: 88px 0 28px;
  padding-top: 28px;
  padding-bottom: 0;
  border-top: 1px solid var(--ink);
  border-bottom: none;
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-wrap: pretty;
  position: relative;
}
.entry-content h2.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 64px; height: 3px;
  background: var(--accent);
}


/* ----- 7.6 Paragraph ─ wp-block-paragraph ------------------------------ */

.entry-content p.wp-block-paragraph {
  margin: 0 0 26px;
  font-family: var(--ff-serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 2.1;
  letter-spacing: 0.015em;
  color: var(--ink);
}


/* ----- 7.7 Separator ─ wp-block-separator ------------------------------ */

.entry-content hr.wp-block-separator {
  width: 64px;
  height: 0;
  margin: 80px auto;
  border: none;
  border-top: 2px solid var(--accent);
  overflow: visible;
  background: none;
}


/* ----- 7.8 Postscript ─ hivoice-postscript* ---------------------------- */

.hivoice-postscript {
  margin: 0;
  padding: 32px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
}
.hivoice-postscript__label {
  margin: 0 0 16px;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--accent);
}
.hivoice-postscript__content {
  font-family: var(--ff-serif);
  font-size: 15px;
  line-height: 2;
  color: var(--ink-2);
}


/* ==========================================================================
   8. Responsive — 720px 以下
   ========================================================================== */

@media (max-width: 720px) {
  .fb-container                  { padding-left: var(--pad-x-sm);
                                   padding-right: var(--pad-x-sm); }

  .fb-header__inner              { padding-top: 22px; padding-bottom: 20px; }
  .fb-header.is-shrunk
    .fb-header__inner            { padding-top: 10px; padding-bottom: 9px; }

  .fb-layout__content            { padding-top: 48px; padding-bottom: 64px; }

  .entry-title                   { font-size: 22px;
                                   margin-bottom: 36px;
                                   padding-bottom: 22px; }

  .entry-content > div.wp-block-image:first-child {
    margin-left: calc(-1 * var(--pad-x-sm));
    margin-right: calc(-1 * var(--pad-x-sm));
  }

  .hivoice-lead                  { font-size: 17px; line-height: 1.95; }
  .entry-content h2.wp-block-heading { font-size: 22px; margin-top: 64px; }
  .entry-content p.wp-block-paragraph { font-size: 16px; line-height: 2; }

  .hivoice-guest-card,
  .hivoice-summary,
  .hivoice-postscript            { padding: 24px 22px; }
  .hivoice-guest-card__name      { font-size: 22px; }

  .fb-footer .fb-container       { padding-top: 32px; padding-bottom: 28px; }
  .fb-footer__bottom             { flex-direction: column; gap: 18px; }
}


/* ==========================================================================
   HOME / ARCHIVE — ClaudeDesign トップページ
   --------------------------------------------------------------------------
   トップ(.home)・アーカイブ(.archive)専用レイヤー。
   共有クラス(.fb-layout / .fb-card / .fb-sidebar / .fb-widget / .fb-hero)は
   single 記事・固定ページ(page_id=2)と衝突するため、必ず .home / .archive
   スコープ下でのみ上書きする。トークンは Article Style と共有。
   ========================================================================== */

/* ----- 2カラムレイアウト ------------------------------------------------- */
.home .fb-layout,
.archive .fb-layout {
  display: grid;
  grid-template-columns: 1fr 312px;
  gap: 72px;
  align-items: start;
  padding: 84px 0 104px;
}
.home .fb-layout__content,
.archive .fb-layout__content {
  max-width: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */
.home .fb-hero {
  position: relative;
  overflow: hidden;
  padding: 116px 0 124px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 80% -10%, rgba(31,58,92,0.55) 0%, rgba(31,58,92,0) 60%),
    linear-gradient(150deg, #0d1626 0%, #16243a 46%, #1f3a5c 100%);
}
/* 斜め45°の薄いストライプテクスチャ */
.home .fb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.035) 0 2px,
    rgba(255,255,255,0) 2px 9px);
  pointer-events: none;
}
/* 最下部 4px のアクセント帯 */
.home .fb-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.4));
}
.home .fb-hero__inner { position: relative; z-index: 1; }

.home .fb-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.42em;
  color: rgba(255,255,255,0.72);
}
.home .fb-hero__eyebrow::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: rgba(255,255,255,0.6);
}
.home .fb-hero__title {
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.42;
  letter-spacing: 0.03em;
  color: #fff;
}
.home .fb-hero__nowrap { white-space: nowrap; }
.home .fb-hero__lead {
  margin: 32px 0 0;
  max-width: 40em;
  font-family: var(--ff-sans);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 2;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.82);
}

/* ==========================================================================
   セクション見出し
   ========================================================================== */
.fb-section-head {
  position: relative;
  margin: 0 0 32px;
  padding-top: 22px;
  border-top: 1px solid var(--ink);
}
.fb-section-head::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 64px; height: 3px;
  background: var(--accent);
}
.fb-section-head__ja {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.3;
}
.fb-section-head__en {
  margin: 4px 0 0;
  font-family: var(--ff-serif);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ==========================================================================
   業界フィルター
   ========================================================================== */
.home .fb-filter-nav,
.archive .fb-filter-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 40px;
}
.home .fb-filter-nav__label,
.archive .fb-filter-nav__label {
  margin-right: 6px;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.home .fb-filter-tag,
.archive .fb-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--rule);
  background: transparent;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--ink-2);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.home .fb-filter-tag:hover,
.archive .fb-filter-tag:hover {
  border-color: var(--rule-2);
  color: var(--ink);
}
.home .fb-filter-tag.is-active,
.archive .fb-filter-tag.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.home .fb-filter-tag__count,
.archive .fb-filter-tag__count {
  font-size: 11px;
  opacity: 0.7;
}

/* ==========================================================================
   記事グリッド
   ========================================================================== */
.home .fb-interview-grid,
.archive .fb-interview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 40px;
}

/* 共通カード初期化（.home/.archive スコープ） */
.home .fb-card,
.archive .fb-card {
  background: transparent;
  overflow: visible;
}
.home .fb-card:hover,
.archive .fb-card:hover { opacity: 1; }
.home .fb-card__link,
.archive .fb-card__link { display: block; color: inherit; }

/* メディア（プレースホルダー = 斜めストライプ） */
.home .fb-card__media,
.archive .fb-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #eef0f3 0 22px, #e1e4e9 22px 44px);
}
.home .fb-card__media img,
.archive .fb-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.home .fb-card__link:hover .fb-card__media img,
.archive .fb-card__link:hover .fb-card__media img { transform: scale(1.05); }

/* カード本文 */
.home .fb-card__cat,
.archive .fb-card__cat {
  margin: 22px 0 0;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--accent);
}
.home .fb-card__title,
.archive .fb-card__title {
  margin: 8px 0 0;
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
  /* 旧 .fb-card__title の line-clamp を解除 */
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

/* タイトル下の罫線（40% アクセント → ホバーで 100%） */
.home .fb-card__rule,
.archive .fb-card__rule {
  position: relative;
  display: block;
  height: 2px;
  margin: 16px 0 0;
  background: var(--rule);
}
.home .fb-card__rule::before,
.archive .fb-card__rule::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 40%;
  height: 100%;
  background: var(--accent);
  transition: width 0.35s ease;
}
.home .fb-card__link:hover .fb-card__rule::before,
.archive .fb-card__link:hover .fb-card__rule::before { width: 100%; }

/* カードメタ行 */
.home .fb-card__meta,
.archive .fb-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.home .fb-card__date,
.archive .fb-card__date {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
.home .fb-card__more,
.archive .fb-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.home .fb-card__arrow,
.archive .fb-card__arrow { transition: transform 0.25s ease; }
.home .fb-card__link:hover .fb-card__arrow,
.archive .fb-card__link:hover .fb-card__arrow { transform: translateX(4px); }

/* ==========================================================================
   注目記事（フィーチャーカード）
   ========================================================================== */
.home .fb-card--featured,
.archive .fb-card--featured {
  grid-column: 1 / -1;
  border-top: 2px solid var(--ink);
  padding-top: 0;
}
.home .fb-card__link--featured,
.archive .fb-card__link--featured {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.home .fb-card__media--featured,
.archive .fb-card__media--featured {
  aspect-ratio: 4 / 3;
}
.home .fb-card__badge,
.archive .fb-card__badge {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  padding: 8px 16px;
  background: var(--accent);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #fff;
}
.home .fb-card__media--featured img,
.archive .fb-card__media--featured img { transition: transform 0.4s ease; }
.home .fb-card__link--featured:hover .fb-card__media img,
.archive .fb-card__link--featured:hover .fb-card__media img { transform: scale(1.04); }

.home .fb-card__body--featured,
.archive .fb-card__body--featured {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home .fb-card__body--featured .fb-card__cat,
.archive .fb-card__body--featured .fb-card__cat {
  margin-top: 0;
  font-size: 11px;
}
.home .fb-card__title--featured,
.archive .fb-card__title--featured {
  margin-top: 14px;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.55;
}
.home .fb-card__excerpt,
.archive .fb-card__excerpt {
  margin: 16px 0 0;
  font-family: var(--ff-serif);
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
}
.home .fb-card__body--featured .fb-card__more,
.archive .fb-card__body--featured .fb-card__more {
  margin-top: 24px;
  letter-spacing: 0.2em;
}

/* ==========================================================================
   サイドバー（トップ / アーカイブ）
   ========================================================================== */
.home .fb-sidebar,
.archive .fb-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  min-width: 0;
}
.home .fb-widget,
.archive .fb-widget { margin-bottom: 40px; }

.fb-widget__head {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
.fb-widget__head::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 48px; height: 2px;
  background: var(--accent);
}
.fb-widget__ja {
  margin: 0;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--ink);
}
.fb-widget__en {
  margin: 3px 0 0;
  font-family: var(--ff-serif);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* 業界カテゴリ一覧 */
.fb-widget__catlist { margin: 0; padding: 0; list-style: none; }
.fb-widget__catlist li { border-bottom: 1px dotted var(--rule); }
.fb-catlink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  font-family: var(--ff-sans);
  font-size: 14px;
  color: var(--ink-2);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.fb-catlink:hover,
.fb-catlink.is-active {
  color: var(--accent);
  padding-left: 8px;
}
.fb-catlink__count {
  font-family: var(--ff-serif);
  font-size: 12px;
  color: var(--mute);
}

/* 検索 */
.fb-search {
  display: flex;
  border: 1px solid var(--rule);
}
.fb-search__field {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  background: transparent;
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--ink);
}
.fb-search__field:focus { outline: none; }
.fb-search__btn {
  flex: 0 0 auto;
  padding: 0 20px;
  border: none;
  background: var(--ink);
  color: #fff;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.fb-search__btn:hover { background: var(--accent); }

/* 最新の記事 */
.fb-recent { margin: 0; padding: 0; list-style: none; }
.fb-recent__item { border-bottom: 1px dotted var(--rule); }
.fb-recent__item:last-child { border-bottom: none; }
.fb-recent__link {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  color: inherit;
}
.fb-recent__thumb {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #eef0f3 0 14px, #e1e4e9 14px 28px);
}
.fb-recent__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fb-recent__text { min-width: 0; }
.fb-recent__cat {
  display: block;
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.fb-recent__title {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  transition: color 0.15s ease;
}
.fb-recent__link:hover .fb-recent__title { color: var(--accent); }

/* ABOUT 紹介ブロック */
.fb-about {
  position: relative;
  padding: 28px 28px 30px;
  background: var(--accent);
  color: #fff;
}
.fb-about__label {
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid rgba(255,255,255,0.7);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.92);
}
.fb-about__body {
  margin: 0;
  font-family: var(--ff-serif);
  font-size: 13px;
  line-height: 1.95;
  color: rgba(255,255,255,0.92);
}

/* ==========================================================================
   レスポンシブ — 980px / 720px
   ========================================================================== */
@media (max-width: 980px) {
  .home .fb-layout,
  .archive .fb-layout {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 64px 0 80px;
  }
  .home .fb-sidebar,
  .archive .fb-sidebar { position: static; top: auto; }

  .home .fb-card__link--featured,
  .archive .fb-card__link--featured { grid-template-columns: 1fr; }
  .home .fb-card__media--featured,
  .archive .fb-card__media--featured { aspect-ratio: 16 / 9; }
  .home .fb-card__body--featured,
  .archive .fb-card__body--featured { padding: 32px 28px; }
}

@media (max-width: 720px) {
  .home .fb-hero { padding: 72px 0 80px; }
  .home .fb-hero__eyebrow { margin-bottom: 20px; }

  .home .fb-interview-grid,
  .archive .fb-interview-grid { grid-template-columns: 1fr; gap: 40px; }

  .fb-section-head__ja { font-size: 21px; }
}