@charset "UTF-8";
/* ============================================================
   fp1-hiro.com Finasee風スキン v1（2026-09-02 社長承認デザイン）
   モック: https://claude.ai/code/artifact/34600089-cde8-4e76-ba3b-513f4297c6a5
   静的化パイプラインの inject_design.py が全ページに読み込ませる
   ============================================================ */
:root{
  --fs-ink:#08343E;
  --fs-sub:#5A7A83;
  --fs-band:#F1F5F8;
  --fs-accent:#D6323E;
  --fs-line:#D8E2E6;
  --fs-link:#1668A8;
}

/* ---------- 全体 ---------- */
body{
  font-family:"Yu Gothic Medium","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--fs-ink);
  background:#fff;
}
.article,.entry-content{line-height:1.9}
a{color:var(--fs-link)}

/* ---------- ヘッダー ---------- */
.header{background:#fff}
.tagline{color:var(--fs-sub);font-size:12px;letter-spacing:.06em}
.logo-text .site-name-text,
.logo-header a{color:var(--fs-ink)!important;font-weight:700;letter-spacing:.04em}

/* ---------- ナビ（タブ型） ---------- */
#navi{background:#fff;border-top:1px solid var(--fs-line);border-bottom:1px solid var(--fs-line)}
#navi .navi-in>ul li{border:none}
#navi .navi-in a{color:var(--fs-ink);border-bottom:3px solid transparent;transition:border-color .2s,color .2s}
#navi .item-label{font-weight:700;font-size:14px}
#navi .navi-in a:hover{background:var(--fs-band);border-bottom-color:var(--fs-accent);color:var(--fs-accent);opacity:1}

/* ---------- トップ：完全ガイド3枚を非表示 ---------- */
.widget-index-top{display:none!important}

/* ---------- 記事カード一覧 ---------- */
.entry-card-wrap{border:none;border-bottom:1px solid var(--fs-line);padding:22px 4px;transition:background .2s}
.entry-card-wrap:hover{background:var(--fs-band);opacity:1}
.entry-card-title{color:var(--fs-ink);font-weight:700;line-height:1.6}
.entry-card-snippet{color:var(--fs-sub);font-size:13px;line-height:1.7}
.entry-card-thumb{border-radius:6px;overflow:hidden}
.cat-label{background:var(--fs-ink);color:#fff;border:none;border-radius:3px;font-weight:700}
.post-date,.entry-date{color:var(--fs-sub)}

/* ---------- 記事ページ ---------- */
.entry-title{color:var(--fs-ink);line-height:1.55;font-weight:700}
.article h2{
  background:var(--fs-band)!important;
  border:none!important;
  border-left:5px solid var(--fs-ink)!important;
  border-radius:0 4px 4px 0!important;
  color:var(--fs-ink)!important;
  padding:12px 18px!important;
  line-height:1.6;
}
.article h3{
  background:none;
  border:none;
  border-left:4px solid var(--fs-accent);
  color:var(--fs-ink);
  padding:4px 14px;
}
.article h4{color:var(--fs-ink);border-bottom:2px solid var(--fs-line);padding-bottom:4px}

/* 目次 */
.toc{background:#fff;border:1px solid var(--fs-line);border-radius:6px}
.toc-title{color:var(--fs-ink);font-weight:700}

/* ---------- サイドバー ---------- */
.sidebar h2,.sidebar h3,.sidebar .widget h2{
  background:none;
  border-top:2px solid var(--fs-ink);
  border-bottom:2px solid var(--fs-ink);
  color:var(--fs-ink);
  text-align:center;
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  padding:9px 0;
  margin-bottom:12px;
}
.sidebar .widget{margin-bottom:2.2em}
.wp-block-search__button{background:var(--fs-ink);color:#fff;border:none;border-radius:3px}
.wp-block-search__input{border:1px solid var(--fs-line);border-radius:3px}

/* ---------- 週間ランキング（inject_design.pyが挿入） ---------- */
.fs-ranking{margin-bottom:2.2em}
.fs-ranking-title{
  border-top:2px solid var(--fs-ink);
  border-bottom:2px solid var(--fs-ink);
  color:var(--fs-ink);
  text-align:center;
  font-size:15px;
  font-weight:700;
  letter-spacing:.06em;
  padding:9px 0;
  margin:0 0 8px;
}
.fs-ranking-sub{
  display:block;text-align:center;font-size:11px;color:var(--fs-sub);margin:0 0 12px;
}
.fs-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:fsr}
.fs-rank li{counter-increment:fsr;display:flex;border:1px solid var(--fs-line);border-radius:4px;overflow:hidden;background:#fff;align-items:stretch}
.fs-rank li a{display:flex;flex:1;text-decoration:none;color:var(--fs-ink);align-items:stretch}
.fs-rank .fs-rankno{flex:0 0 42px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:700}
.fs-rank .fs-rankno::before{content:"Rank";font-size:9px;line-height:1.2}
.fs-rank .fs-rankno::after{content:counter(fsr);font-size:18px;line-height:1.2}
.fs-rank li:nth-child(1) .fs-rankno{background:#BFA93A}
.fs-rank li:nth-child(2) .fs-rankno{background:#9AA2A6}
.fs-rank li:nth-child(3) .fs-rankno{background:#A9812E}
.fs-rank li:nth-child(4) .fs-rankno{background:#08343E}
.fs-rank li:nth-child(n+5) .fs-rankno{background:#8E9BA0}
.fs-rank .fs-rankbody{flex:1;padding:10px 12px;font-size:12.5px;line-height:1.6}
.fs-rank li a:hover{background:var(--fs-band)}

/* ---------- 著者ボックス・関連記事 ---------- */
.author-box{border:1px solid var(--fs-line);background:var(--fs-band);border-radius:6px}
.author-box .author-name a{color:var(--fs-ink);font-weight:700}
.related-entry-heading,.comment-title,.pager-post-navi-heading{color:var(--fs-ink)}
.related-entry-card-wrap{border-color:var(--fs-line)}

/* ---------- ページネーション ---------- */
.pagination .current{background:var(--fs-ink);color:#fff}
.page-numbers{color:var(--fs-ink)}
/* 全番号表示（inject_design.pyが展開）。ページ数が増えても折り返して収める */
.pagination{flex-wrap:wrap;gap:6px 4px}
.pagination .page-numbers{margin:0}
@media screen and (max-width:480px){
  .pagination .page-numbers{height:38px;width:38px;line-height:36px;font-size:0.95em}
}

/* ---------- フッター ---------- */
.footer{background:var(--fs-ink)}
.footer,.footer a,.footer .site-name-text{color:#EAF2F4}

/* ---------- スマホ読みやすさ最適化 ---------- */
@media screen and (max-width:480px){
  /* PC幅向けの「読点改行」を解除して自然な折返しに（inject_design.pyがspan化） */
  .pcbr{display:none}
  /* タイトルの強制改行もスマホでは自然折返し */
  .entry-title br,.entry-card-title br{display:none}
  /* 見出し・本文の余白をスマホ向けに調整 */
  .article h2{padding:10px 14px!important;font-size:1.15em}
  .article h3{padding:3px 12px;font-size:1.05em}
  .article,.entry-content{line-height:2.0}
  /* 幅広の表は横スクロールで収める */
  .entry-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- モバイルメニュー（色だけ合わせる） ---------- */
.mobile-menu-buttons{background:#fff;border-top:1px solid var(--fs-line)}
.mobile-menu-buttons .menu-button a,.mobile-menu-buttons .menu-icon,.mobile-menu-buttons .menu-caption{color:var(--fs-ink)}