@charset "UTF-8";
/*
Theme Name: 資格のミカタ
Theme URI: https://www.shikaku-mikata.site/
Description: 資格のミカタ専用テーマ（Cocoon子テーマ）。コンセプト「夜の勉強机」＝藍 × 琥珀。トップページは the_content フィルタで parts/front-top.php に差し替える。
Author: 資格のミカタ編集部
Template: cocoon-master
Version: 1.4.0
*/

/* --------------------------------------------------------------------------
   このファイルは旧 theme.css（カスタマイザーの「追加CSS」に入れていたもの）を
   そのまま取り込んだもの。子テーマ有効化後は追加CSS欄は空でよい。
   -------------------------------------------------------------------------- */

/* Google Fonts は functions.php から enqueue する（@import はレンダリングを止めるため使わない） */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  --sm-indigo:#1B3A6B;        /* 藍：ヘッダー・見出し・リンク */
  --sm-indigo-deep:#12294D;   /* 深藍：ヒーロー・収益ハブ */
  --sm-indigo-tint:#E9EFF8;   /* 藍の淡色：背景・タグ */
  --sm-amber:#D98A0B;         /* 琥珀：CTA専用 */
  --sm-amber-dark:#A76A08;    /* 琥珀の影（ボタンの立体感） */
  --sm-amber-tint:#FDF3DF;    /* 灯り：ポイント枠 */
  --sm-amber-line:#E8CC8A;
  --sm-paper:#FBFAF7;         /* 紙：ページ地色 */
  --sm-white:#FFFFFF;
  --sm-ink:#16202E;           /* 墨：本文 */
  --sm-ink-soft:#3C4553;
  --sm-slate:#77726A;         /* 補助テキスト */
  --sm-line:#E5E4DF;
  --sm-sunk:#F3F2ED;

  --sm-f-display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Meiryo",sans-serif;
  --sm-f-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --sm-f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --sm-radius:6px;
  --sm-wrap:1080px;
}

/* --------------------------------------------------------------------------
   2. ベース
   Cocoonの body.fz-18px / body.ff-hiragino を上書きするため、
   body に .fz-18px を重ねて詳細度を上げている。
   -------------------------------------------------------------------------- */
body.fz-18px,
body.ff-hiragino{
  font-family:var(--sm-f-body);
  font-size:16px;
  line-height:1.9;
  color:var(--sm-ink);
  background:var(--sm-paper);
  -webkit-font-smoothing:antialiased;
}
.main,.sidebar{ background:transparent; border:0; box-shadow:none; }
#container .wrap,
.content-in.wrap{ max-width:var(--sm-wrap); }

h1,h2,h3,h4,h5,
.entry-title,.archive-title,
.card-title,.e-card-title{
  font-family:var(--sm-f-display);
  text-wrap:balance;
}
a{ color:var(--sm-indigo); }
a:hover{ color:var(--sm-indigo-deep); }
:focus-visible{ outline:2px solid var(--sm-amber); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* --------------------------------------------------------------------------
   3. ヘッダー・グローバルナビ
   -------------------------------------------------------------------------- */
.header-container{
  background:var(--sm-white);
  border-bottom:1px solid var(--sm-line);
  box-shadow:0 1px 0 rgba(22,32,46,.03);
}
.header-container-in.hlt-top-menu{ max-width:var(--sm-wrap); }
.header .site-name-text{
  font-family:var(--sm-f-display);
  font-weight:900;
  color:var(--sm-indigo);
  letter-spacing:-.01em;
}
.navi-in > ul > li > a{
  font-family:var(--sm-f-display);
  font-weight:500;
  font-size:14px;
  color:var(--sm-ink);
  height:auto;
  line-height:1.6;
  padding:14px 14px;
}
.navi-in > ul > li > a:hover{
  background:var(--sm-indigo-tint);
  color:var(--sm-indigo);
}
/* 現在地：琥珀は使わず藍の下線で示す（琥珀はCTA専用のため） */
.navi-in > ul > li.current-menu-item > a,
.navi-in > ul > li.current-post-parent > a{
  color:var(--sm-indigo);
  font-weight:700;
  box-shadow:inset 0 -3px 0 var(--sm-indigo);
}
.navi-in > ul > li ul.sub-menu li a{
  font-size:13px;
  background:var(--sm-white);
  border-bottom:1px solid var(--sm-line);
}

/* --------------------------------------------------------------------------
   4. パンくず
   -------------------------------------------------------------------------- */
.breadcrumb{
  font-family:var(--sm-f-mono);
  font-size:11px;
  letter-spacing:.02em;
  color:var(--sm-slate);
  padding:14px 0 6px;
}
.breadcrumb a{ color:var(--sm-slate); }
.breadcrumb a:hover{ color:var(--sm-indigo); }

/* --------------------------------------------------------------------------
   5. 記事本体
   -------------------------------------------------------------------------- */
.article{
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  padding:32px;
}
@media screen and (max-width:834px){ .article{ padding:20px 16px; } }

.entry-title{
  font-size:28px;
  font-weight:900;
  line-height:1.45;
  letter-spacing:-.012em;
  color:var(--sm-ink);
  margin-bottom:16px;
}
@media screen and (max-width:834px){ .entry-title{ font-size:21px; } }

/* 日付・カテゴリ */
.date-tags{
  font-family:var(--sm-f-mono);
  font-size:11px;
  color:var(--sm-slate);
}
.cat-label{
  background:var(--sm-indigo);
  border:0;
  border-radius:3px;
  font-family:var(--sm-f-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}
.entry-categories a,.entry-tags a{
  border-radius:3px;
  border-color:var(--sm-line);
  font-size:12px;
  color:var(--sm-slate);
}

/* 見出し */
.entry-content h2,
.article h2:not(.related-entry-heading):not(.comment-title){
  font-family:var(--sm-f-display);
  font-size:22px;
  font-weight:900;
  line-height:1.5;
  color:var(--sm-ink);
  background:none;
  border:0;
  border-left:5px solid var(--sm-indigo);
  border-radius:0;
  padding:4px 0 4px 14px;
  margin:44px 0 18px;
}
.entry-content h3{
  font-family:var(--sm-f-display);
  font-size:18px;
  font-weight:700;
  color:var(--sm-ink);
  border:0;
  border-bottom:2px solid var(--sm-indigo-tint);
  padding:0 0 8px;
  margin:32px 0 14px;
}
.entry-content h4{
  font-family:var(--sm-f-display);
  font-size:16px;
  font-weight:700;
  color:var(--sm-indigo);
  border:0;
  padding:0;
  margin:26px 0 10px;
}
@media screen and (max-width:834px){
  .entry-content h2,
  .article h2:not(.related-entry-heading):not(.comment-title){ font-size:18px; }
  .entry-content h3{ font-size:16px; }
}

/* 本文 */
.entry-content p{
  font-size:16px;
  line-height:1.95;
  color:var(--sm-ink-soft);
  margin:0 0 1.4em;
}
.entry-content strong{ font-weight:700; color:var(--sm-ink); }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }
.entry-content ul,.entry-content ol{ line-height:1.95; color:var(--sm-ink-soft); }
.entry-content ul li::marker,.entry-content ol li::marker{ color:var(--sm-indigo); }
.entry-content img{ border-radius:5px; }
.entry-content blockquote{
  background:var(--sm-sunk);
  border:0;
  border-left:4px solid var(--sm-line);
  border-radius:0 4px 4px 0;
  color:var(--sm-slate);
}
/* マーカーは藍の下線に統一（黄色マーカーはCTAと競合するため使わない） */
.entry-content .marker-under{
  background:linear-gradient(transparent 62%, var(--sm-indigo-tint) 62%);
}

/* アイキャッチ */
.eye-catch{ border-radius:var(--sm-radius); overflow:hidden; }
.eye-catch .eye-catch-image{ border-radius:var(--sm-radius); }

/* --------------------------------------------------------------------------
   6. 目次
   -------------------------------------------------------------------------- */
#toc.toc{
  width:100%;
  max-width:none;
  background:var(--sm-sunk);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  padding:18px 20px;
  margin:28px 0;
}
#toc .toc-title{
  font-family:var(--sm-f-display);
  font-size:15px;
  font-weight:700;
  color:var(--sm-ink);
  text-align:left;
  display:block;
  margin-bottom:10px;
}
#toc .toc-list > li{ font-size:14px; line-height:1.9; }
#toc .toc-list > li > a{ font-weight:500; color:var(--sm-ink); }
#toc .toc-list ul li{ font-size:13px; }
#toc .toc-list ul li a{ color:var(--sm-slate); }
#toc .toc-list a:hover{ color:var(--sm-indigo); }

/* --------------------------------------------------------------------------
   7. 吹き出し（既存の会話パーツを整える）
   -------------------------------------------------------------------------- */
.speech-balloon{
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-radius:10px;
  font-size:14px;
  line-height:1.8;
  color:var(--sm-ink-soft);
}
.speech-balloon::before{ border-right-color:var(--sm-line); }
.speech-balloon::after{ border-right-color:var(--sm-white); }
.speech-name{
  font-family:var(--sm-f-display);
  font-size:11px;
  color:var(--sm-slate);
}
.speech-icon-image{ border-color:var(--sm-line); }

/* --------------------------------------------------------------------------
   8. サイドバー
   Recent Posts / Archives / Categories はウィジェット画面から外す前提。
   残るウィジェットの見た目をここで整える。
   -------------------------------------------------------------------------- */
#sidebar .widget.widget-sidebar{
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  padding:16px 18px;
  margin-bottom:16px;
}
#sidebar .widget.widget-sidebar h2,
#sidebar .widget.widget-sidebar .widget-sidebar-title{
  font-family:var(--sm-f-display);
  font-size:15px;
  font-weight:700;
  color:var(--sm-ink);
  background:none;
  border:0;
  padding:0 0 0 12px;
  margin:0 0 14px;
  position:relative;
  text-align:left;
}
#sidebar .widget.widget-sidebar h2::before,
#sidebar .widget.widget-sidebar .widget-sidebar-title::before{
  content:"";
  position:absolute;
  left:0; top:.25em; bottom:.25em;
  width:4px;
  background:var(--sm-amber);
  border-radius:2px;
}
#sidebar .widget_search .wp-block-search__input{
  border:1px solid var(--sm-line);
  border-radius:4px 0 0 4px;
  font-size:14px;
  padding:9px 12px;
}
#sidebar .widget_search .wp-block-search__button{
  background:var(--sm-indigo);
  color:var(--sm-white);
  border:0;
  border-radius:0 4px 4px 0;
  font-family:var(--sm-f-display);
  font-weight:700;
  padding:9px 16px;
}
/* 追従（サイドバーCTAを画面内に留める） */
#sidebar .sm-sticky{ position:sticky; top:80px; }

/* --------------------------------------------------------------------------
   9. カード（新着・関連・一覧）
   -------------------------------------------------------------------------- */
.entry-card-wrap,.related-entry-card-wrap,.widget-entry-card-wrap,
.new-entry-card-link{
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  overflow:hidden;
}
.entry-card-wrap:hover,.related-entry-card-wrap:hover,.new-entry-card-link:hover{
  background:var(--sm-white);
  border-color:var(--sm-indigo);
  box-shadow:0 6px 18px -12px rgba(27,58,107,.5);
}
.card-title,.entry-card-title,.related-entry-card-title,.new-entry-card-title{
  font-family:var(--sm-f-display);
  font-weight:700;
  color:var(--sm-ink);
  line-height:1.6;
}
.card-snippet,.entry-card-snippet{ color:var(--sm-slate); font-size:13px; }
.card-thumb img,.entry-card-thumb img{ border-radius:4px; }
/* アイキャッチ未設定の「NO IMAGE」を灰色の空箱から、藍の紙質に置き換える */
.no-image{
  background:linear-gradient(135deg,#E3E9F4,#F5F1E8) !important;
  color:#9AA5B8 !important;
  font-family:var(--sm-f-mono);
  font-size:11px;
  letter-spacing:.08em;
  border:1px solid #DCDFE6;
  border-radius:4px;
}

/* 関連記事の見出し */
.related-entry-heading,.related-entry-main-heading{
  font-family:var(--sm-f-display);
  font-size:17px;
  font-weight:900;
  color:var(--sm-ink);
  border:0;
  border-top:2px solid var(--sm-ink);
  padding-top:16px;
}

/* 前後の記事 */
.pager-post-navi .prev-post,.pager-post-navi .next-post{
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  background:var(--sm-white);
}
.prev-post-title,.next-post-title{
  font-family:var(--sm-f-display);
  font-weight:500;
  font-size:13px;
}

/* --------------------------------------------------------------------------
   10. 著者表示を抑える
   運営者の個人名は「運営者情報」ページに集約し、記事面には出さない。
   WordPress側で「ブログ上の表示名」を “資格のミカタ編集部” に変更した上で使う。
   -------------------------------------------------------------------------- */
.author-box,
.article .sns-follow.sf-profile,
.article .post-author,
#sidebar .author-widget,
#sidebar .a-wrap .author-widget-name{
  display:none !important;
}
/* フッターのクレジット行はCSSで消し、自前フッターHTMLに差し替える */
.footer-bottom .source-org.copyright{ display:none; }

/* --------------------------------------------------------------------------
   11. フッター
   -------------------------------------------------------------------------- */
.footer{
  background:var(--sm-ink);
  color:#9FAABC;
  border-top:0;
  margin-top:48px;
}
.footer a{ color:#C6CFDC; }
.footer a:hover{ color:var(--sm-white); }
.footer .footer-in.wrap{ max-width:var(--sm-wrap); }
.navi-footer-in > .menu-footer li a{
  color:#9FAABC;
  font-size:13px;
  border:0;
}
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); }

/* ==========================================================================
   12. 追加コンポーネント（記事・固定ページで使う）
   クラス接頭辞は sm-（shikaku-mikata）。Cocoonのクラスとは衝突しない。
   ========================================================================== */

/* ---- 12-1. CTAカード（本文中／サイドバー） ------------------------------- */
.sm-cta{
  border:1px solid var(--sm-amber-line);
  border-radius:var(--sm-radius);
  overflow:hidden;
  background:var(--sm-amber-tint);
  margin:28px 0;
}
.sm-cta__label{
  background:var(--sm-amber);
  color:var(--sm-white);
  font-family:var(--sm-f-display);
  font-weight:700;
  font-size:12px;
  letter-spacing:.04em;
  padding:7px 16px;
}
.sm-cta__body{
  padding:18px 20px;
  display:grid;
  grid-template-columns:1fr 200px;
  gap:18px;
  align-items:center;
}
.sm-cta__body h4{
  font-family:var(--sm-f-display);
  font-size:17px;
  font-weight:900;
  color:var(--sm-ink);
  margin:0 0 7px;
  line-height:1.5;
}
.sm-cta__body p{ margin:0 !important; font-size:13.5px; color:var(--sm-slate); line-height:1.75; }
@media screen and (max-width:600px){
  .sm-cta__body{ grid-template-columns:1fr; }
}

.sm-btn{
  display:block;
  text-align:center;
  background:var(--sm-amber);
  color:var(--sm-white) !important;
  font-family:var(--sm-f-display);
  font-weight:900;
  font-size:15px;
  line-height:1.4;
  padding:14px 16px;
  border-radius:5px;
  text-decoration:none !important;
  box-shadow:0 3px 0 var(--sm-amber-dark);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sm-btn:hover{ transform:translateY(1px); box-shadow:0 2px 0 var(--sm-amber-dark); color:var(--sm-white) !important; }
.sm-btn small{ display:block; font-size:11px; font-weight:500; opacity:.92; margin-top:3px; }
.sm-btn--ghost{
  background:var(--sm-white);
  color:var(--sm-indigo) !important;
  border:1px solid #C3D0E4;
  box-shadow:none;
}
.sm-btn--ghost:hover{ background:var(--sm-indigo-tint); color:var(--sm-indigo) !important; }

/* ---- 12-2. この記事でわかること -------------------------------------- */
.sm-know{
  border:1px solid var(--sm-amber-line);
  background:#FFFCF3;
  border-radius:var(--sm-radius);
  padding:18px 22px;
  margin:24px 0;
}
.sm-know h4{
  font-family:var(--sm-f-display);
  font-size:15px;
  font-weight:700;
  color:#8A5A06;
  margin:0 0 10px;
}
.sm-know ul{ margin:0 !important; padding-left:20px; }
.sm-know li{ font-size:14.5px; line-height:1.9; color:var(--sm-ink-soft); }

/* ---- 12-3. 要点BOX（各H2の末尾） ------------------------------------- */
.sm-recap{
  border:1px dashed #A8BBD8;
  background:#F4F7FC;
  border-radius:var(--sm-radius);
  padding:16px 20px;
  margin:22px 0;
}
.sm-recap__label{
  display:block;
  font-family:var(--sm-f-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--sm-indigo);
  margin-bottom:8px;
}
.sm-recap p{ margin:0 !important; font-size:14px; line-height:1.85; color:var(--sm-ink-soft); }

/* ---- 12-4. 比較表 ------------------------------------------------------ */
.sm-tablewrap{ overflow-x:auto; margin:26px 0; -webkit-overflow-scrolling:touch; }
.sm-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  overflow:hidden;
  font-size:14px;
}
.sm-table th,.sm-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid #EDECE7;
  vertical-align:middle;
}
.sm-table thead th{
  background:var(--sm-sunk);
  font-family:var(--sm-f-display);
  font-weight:700;
  font-size:13px;
  color:#4C5563;
  white-space:nowrap;
}
.sm-table tbody tr:last-child td{ border-bottom:0; }
.sm-table .sm-num{
  font-family:var(--sm-f-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.sm-table tr.is-best td{ background:#FFFCF3; }
.sm-table .sm-btn{ font-size:13px; padding:9px 14px; white-space:nowrap; }
.sm-badge{
  display:inline-block;
  background:var(--sm-amber);
  color:var(--sm-white);
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:3px;
  margin-left:6px;
  vertical-align:1px;
  font-family:var(--sm-f-display);
}

/* ---- 12-5. 難易度メーター --------------------------------------------- */
.sm-stat{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--sm-slate);
  margin:0 0 7px;
}
.sm-stat__label{ width:5.5em; flex:none; }
.sm-meter{
  flex:1;
  min-width:60px;
  height:6px;
  background:#E9E7E1;
  border-radius:3px;
  overflow:hidden;
}
.sm-meter > i{ display:block; height:100%; background:var(--sm-indigo); border-radius:3px; }
.sm-meter--amber > i{ background:var(--sm-amber); }
.sm-stat__value{
  font-family:var(--sm-f-mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  color:var(--sm-ink);
  white-space:nowrap;
}

/* ---- 12-6. 次に読む3本 -------------------------------------------------- */
.sm-next{ margin:36px 0 8px; padding-top:20px; border-top:2px solid var(--sm-ink); }
.sm-next > h4{
  font-family:var(--sm-f-display);
  font-size:17px;
  font-weight:900;
  color:var(--sm-ink);
  margin:0 0 14px;
}
.sm-next__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sm-next__item{
  display:block;
  border:1px solid var(--sm-line);
  border-radius:5px;
  background:var(--sm-white);
  padding:13px 15px;
  text-decoration:none !important;
}
.sm-next__item:hover{ border-color:var(--sm-indigo); box-shadow:0 6px 18px -12px rgba(27,58,107,.5); }
.sm-next__kind{
  display:block;
  font-family:var(--sm-f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--sm-amber);
  margin-bottom:6px;
}
.sm-next__title{
  display:block;
  font-family:var(--sm-f-display);
  font-size:14px;
  font-weight:500;
  line-height:1.6;
  color:var(--sm-ink);
}
@media screen and (max-width:600px){ .sm-next__grid{ grid-template-columns:1fr; } }

/* ---- 12-7. 目的から探す タイル ----------------------------------------- */
.sm-goals{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.sm-goal{
  display:block;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--sm-radius);
  padding:16px 16px;
  text-decoration:none !important;
  transition:background .15s ease;
}
.sm-goal:hover{ background:rgba(255,255,255,.13); }
.sm-goal__no{
  display:block;
  font-family:var(--sm-f-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:#F4B740;
  margin-bottom:8px;
}
.sm-goal__name{
  display:block;
  font-family:var(--sm-f-display);
  font-size:15px;
  font-weight:700;
  color:var(--sm-white);
}
.sm-goal__desc{ display:block; font-size:12px; color:#A9BBD5; margin-top:5px; line-height:1.6; }
@media screen and (max-width:834px){ .sm-goals{ grid-template-columns:1fr 1fr; } }

/* ---- 12-8. ヒーロー（トップ固定ページ） -------------------------------- */
.sm-hero{
  background:
    radial-gradient(120% 130% at 88% -10%, rgba(217,138,11,.18) 0%, rgba(217,138,11,0) 52%),
    linear-gradient(168deg,#1B3A6B 0%,#12294D 100%);
  color:#F4F7FC;
  border-radius:var(--sm-radius);
  padding:40px 36px;
  margin:0 0 36px;
}
.sm-hero__in{ display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center; }
.sm-hero h1{
  font-family:var(--sm-f-display);
  font-size:34px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--sm-white);
  margin:0;
}
.sm-hero h1 em{ font-style:normal; color:#F4B740; }
.sm-hero__lede{ margin:14px 0 0 !important; font-size:14px; color:#BCCBE2; line-height:1.85; }
.sm-hero__search{
  margin-top:20px;
  display:flex;
  background:var(--sm-white);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.55);
}
.sm-hero__search input[type="search"],
.sm-hero__search input[type="text"]{
  flex:1;
  border:0;
  padding:13px 16px;
  font-size:14px;
  font-family:var(--sm-f-body);
  color:var(--sm-ink);
  min-width:0;
}
.sm-hero__search button{
  background:var(--sm-amber);
  color:var(--sm-white);
  border:0;
  font-family:var(--sm-f-display);
  font-weight:700;
  font-size:14px;
  padding:13px 26px;
  cursor:pointer;
  white-space:nowrap;
}
.sm-hero__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.sm-hero__chips a{
  font-size:12px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:20px;
  padding:4px 12px;
  color:#D5E0F0 !important;
  text-decoration:none !important;
}
.sm-hero__chips a:hover{ background:rgba(255,255,255,.12); }
@media screen and (max-width:834px){
  .sm-hero{ padding:28px 20px; }
  .sm-hero__in{ grid-template-columns:1fr; gap:26px; }
  .sm-hero h1{ font-size:24px; }
}

/* ---- 12-9. セクション見出し（固定ページ用） ---------------------------- */
.sm-sec{ margin:0 0 40px; }
.sm-sec__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.sm-sec__head h2{
  font-family:var(--sm-f-display);
  font-size:22px;
  font-weight:900;
  color:var(--sm-ink);
  margin:0;
  border:0;
  padding:0;
  background:none;
}
.sm-sec__head h2::before{
  content:"";
  display:inline-block;
  width:5px; height:20px;
  background:var(--sm-amber);
  border-radius:2px;
  margin-right:10px;
  vertical-align:-2px;
}
.sm-sec__note{ margin:6px 0 0 15px !important; font-size:13px; color:var(--sm-slate); }
.sm-sec__more{ font-size:13px; font-weight:700; white-space:nowrap; }

/* ---- 12-10. ランキング -------------------------------------------------- */
.sm-rank{ display:flex; flex-direction:column; gap:10px; }
.sm-rankcard{
  display:grid;
  grid-template-columns:44px 120px 1fr 190px;
  gap:16px;
  align-items:center;
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  padding:14px 18px;
  text-decoration:none !important;
}
.sm-rankcard:hover{ border-color:var(--sm-indigo); box-shadow:0 6px 18px -12px rgba(27,58,107,.5); }
.sm-rankcard__no{
  font-family:var(--sm-f-mono);
  font-size:24px;
  color:#C4C1B9;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.sm-rankcard.is-top .sm-rankcard__no{ color:var(--sm-amber); }
.sm-rankcard.is-top{ border-color:var(--sm-amber-line); background:linear-gradient(90deg,#FFFDF6,#fff 40%); }
.sm-rankcard__thumb{ border-radius:4px; width:100%; height:auto; display:block; }
.sm-rankcard__name{
  font-family:var(--sm-f-display);
  font-size:17px;
  font-weight:700;
  color:var(--sm-ink);
  margin:0 0 8px;
}
.sm-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.sm-tags span{
  font-size:11px;
  padding:3px 8px;
  border-radius:3px;
  background:var(--sm-sunk);
  color:#6E6960;
}
.sm-tags span.is-key{ background:var(--sm-indigo-tint); color:var(--sm-indigo); }
@media screen and (max-width:834px){
  .sm-rankcard{ grid-template-columns:34px 1fr; gap:12px; }
  .sm-rankcard__thumb,.sm-rankcard__stats{ display:none; }
}

/* ---- 12-11. 収益ハブ（比較への導線ブロック） --------------------------- */
.sm-hub{
  background:var(--sm-indigo-deep);
  border-radius:var(--sm-radius);
  padding:28px;
  color:#E8EEF7;
  margin:0 0 40px;
}
.sm-hub h2{
  font-family:var(--sm-f-display);
  font-size:21px;
  font-weight:900;
  color:var(--sm-white);
  margin:0 0 8px;
  border:0; padding:0; background:none;
}
.sm-hub > p{ margin:0 0 18px !important; font-size:13.5px; color:#A9BBD5; line-height:1.8; }
@media screen and (max-width:834px){ .sm-hub{ padding:20px 16px; } }

/* ---- 12-12. 記事カードのグリッド（固定ページ用） ----------------------- */
.sm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media screen and (max-width:834px){ .sm-grid{ grid-template-columns:1fr 1fr; } }

/* ---- 12-13. コンセプト（短縮版） --------------------------------------- */
.sm-concept{
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  padding:26px 30px;
  margin:0 0 40px;
}
.sm-concept h2{
  font-family:var(--sm-f-display);
  font-size:19px;
  font-weight:900;
  color:var(--sm-ink);
  margin:0 0 10px;
  border:0; padding:0; background:none;
}
.sm-concept p{ margin:0 !important; font-size:14.5px; line-height:1.9; color:var(--sm-ink-soft); }

/* ==========================================================================
   13. モバイル追従バー（記事ページのみ）
   HTMLは footer.html の <!-- 追従バー --> をCocoonのフッター用コードに貼る。
   ========================================================================== */
.sm-fixbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:900;
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(251,250,247,.97);
  border-top:1px solid #E0DED7;
  backdrop-filter:blur(8px);
  transform:translateY(0);
  transition:transform .22s ease;
}
.sm-fixbar.is-hidden{ transform:translateY(120%); }
.sm-fixbar__toc{
  font-family:var(--sm-f-display);
  font-weight:700;
  font-size:13px;
  color:var(--sm-indigo) !important;
  border:1px solid #C3D0E4;
  border-radius:5px;
  padding:11px 14px;
  background:var(--sm-white);
  white-space:nowrap;
  text-decoration:none !important;
}
.sm-fixbar__cta{
  flex:1;
  text-align:center;
  background:var(--sm-amber);
  color:var(--sm-white) !important;
  font-family:var(--sm-f-display);
  font-weight:900;
  font-size:14px;
  padding:12px 10px;
  border-radius:5px;
  box-shadow:0 2px 0 var(--sm-amber-dark);
  text-decoration:none !important;
}
/* 記事ページ以外・PCでは出さない */
body:not(.single) .sm-fixbar{ display:none; }
@media screen and (min-width:835px){ .sm-fixbar{ display:none; } }
/* 追従バーの高さぶん、フッターに余白を足す */
@media screen and (max-width:834px){
  body.single .footer{ padding-bottom:72px; }
  .go-to-top-button{ bottom:76px; }
}

/* ==========================================================================
   14. 印刷
   ========================================================================== */
@media print{
  .sm-fixbar,.sm-cta,.sm-hub,#sidebar,.navi,.footer{ display:none !important; }
  .article{ border:0; padding:0; }
}

/* ==========================================================================
   15. 固定ページ内での色の上書き対策（2026-08-25 追加）
   .entry-content p / .article h2:not(...) の方が詳細度が高く、
   トップページの白文字が本文色に上書きされていたため、セレクタを強める。
   ========================================================================== */
.entry-content .sm-hero h1{ color:var(--sm-white); }
.entry-content .sm-hero h1 em{ color:#F4B740; }
.entry-content .sm-hero__lede{ color:#BCCBE2; }
.entry-content .sm-hub h2{ color:var(--sm-white) !important; }
.entry-content .sm-sec__note{ color:var(--sm-slate); }
.entry-content .sm-goal__name{ color:var(--sm-white); }
.entry-content .sm-goal__desc{ color:#A9BBD5; }

/* ==========================================================================
   16. 記事の信頼性まわり（2026-08-25 追加）
   「誰が・いつ・何をもとに書いたか」が読み手に見えるようにする。
   派手な装飾を足すのではなく、情報の輪郭をはっきりさせる方向で整える。
   ========================================================================== */

/* ---- 16-1. 記事ヘッダーのメタ情報 --------------------------------------
   日付が小さなアイコンの列になっていて読み取れないので、
   「最終更新／公開」を言葉で示す。 */
.article .date-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin:0 0 20px;
  padding:11px 0;
  border-top:1px solid var(--sm-line);
  border-bottom:1px solid var(--sm-line);
  font-family:var(--sm-f-mono);
  font-size:11.5px;
  color:var(--sm-slate);
}
.article .date-tags .post-date,
.article .date-tags .post-update{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-variant-numeric:tabular-nums;
}
.article .date-tags .post-update{ color:var(--sm-indigo); font-weight:500; }
.article .date-tags .fa,
.article .date-tags .far,
.article .date-tags .fas{ opacity:.55; }

/* 編集部の署名。記事ごとに人が変わらないので、肩書きではなく責任の所在を出す。 */
.sm-byline{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 26px;
  font-size:12.5px;
  color:var(--sm-slate);
}
.sm-byline__mark{
  display:inline-grid;
  place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--sm-indigo);
  color:var(--sm-white);
  font-family:var(--sm-f-display);
  font-size:11px;
  font-weight:900;
  flex:none;
}
.sm-byline__name{ font-family:var(--sm-f-display); font-weight:700; color:var(--sm-ink); }

/* ---- 16-2. 本文の表 ------------------------------------------------------
   縦罫を落として横罫だけにすると、数字が並んだときに視線が横へ流れる。
   数値は等幅にして桁を揃える。 */
.entry-content table{
  width:100%;
  border-collapse:collapse;
  margin:22px 0;
  font-size:14.5px;
  background:var(--sm-white);
  border:0;
  border-top:2px solid var(--sm-indigo);
}
.entry-content table th,
.entry-content table td{
  padding:12px 14px;
  border:0;
  border-bottom:1px solid #E9E7E1;
  text-align:left;
  vertical-align:top;
  line-height:1.75;
}
.entry-content table thead th{
  background:var(--sm-indigo-tint);
  font-family:var(--sm-f-display);
  font-size:13px;
  font-weight:700;
  color:var(--sm-indigo);
  white-space:nowrap;
  border-bottom:1px solid #C9D6E9;
}
/* 1列目が項目名になっている表が多いので、そこだけ少し強くする */
.entry-content table tbody th,
.entry-content table tbody tr > td:first-child{
  font-weight:700;
  color:var(--sm-ink);
  white-space:nowrap;
}
.entry-content table tbody tr:hover td{ background:#FAFAF7; }
.entry-content table tbody tr:last-child td{ border-bottom:0; }
/* 数字・記号だけのセルは等幅で桁を揃える */
.entry-content table td{ font-variant-numeric:tabular-nums; }

.entry-content .scrollable-table,
.entry-content .wp-block-table{ margin:22px 0; }
.entry-content figure.wp-block-table table{ margin:0; }
.entry-content figure.wp-block-table figcaption{
  margin-top:9px;
  font-size:12px;
  color:var(--sm-slate);
  line-height:1.7;
}

@media screen and (max-width:834px){
  .entry-content table{ font-size:13.5px; }
  .entry-content table th,
  .entry-content table td{ padding:9px 10px; }
}

/* ---- 16-3. 出典・注記 ----------------------------------------------------
   数字を出したあとに、その出どころを添えるための書式。 */
.sm-source{
  margin:-12px 0 24px !important;
  font-size:12px !important;
  color:var(--sm-slate) !important;
  line-height:1.75;
  padding-left:1.1em;
  text-indent:-1.1em;
}
.sm-source::before{ content:"※ "; }
.sm-source a{ color:var(--sm-slate); }

/* ---- 16-4. 記事末尾「この記事について」 --------------------------------- */
.sm-about{
  margin:48px 0 8px;
  padding:22px 24px;
  background:var(--sm-white);
  border:1px solid var(--sm-line);
  border-left:4px solid var(--sm-indigo);
  border-radius:0 var(--sm-radius) var(--sm-radius) 0;
}
.sm-about__title{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--sm-f-display);
  font-size:14px;
  font-weight:700;
  color:var(--sm-ink);
  margin:0 0 12px;
}
.sm-about__title::before{
  content:"";
  width:15px; height:15px;
  border-radius:50%;
  border:2px solid var(--sm-indigo);
  flex:none;
}
.sm-about dl{ margin:0; }
.sm-about__row{
  display:grid;
  grid-template-columns:6.5em 1fr;
  gap:4px 14px;
  padding:7px 0;
  border-top:1px dotted #DEDCD5;
  font-size:13px;
  line-height:1.8;
}
.sm-about__row:first-of-type{ border-top:0; padding-top:0; }
.sm-about__row dt{
  font-family:var(--sm-f-display);
  font-weight:700;
  color:var(--sm-slate);
  font-size:12px;
  padding-top:2px;
}
.sm-about__row dd{ margin:0; color:var(--sm-ink-soft); }
.sm-about__row dd time{ font-family:var(--sm-f-mono); font-variant-numeric:tabular-nums; }
.sm-about__note{
  margin:14px 0 0 !important;
  padding-top:13px;
  border-top:1px dotted #DEDCD5;
  font-size:12px !important;
  color:var(--sm-slate) !important;
  line-height:1.85;
}

@media screen and (max-width:834px){
  .sm-about{ padding:18px 16px; }
  .sm-about__row{ grid-template-columns:1fr; gap:2px; }
}

/* ---- 16-5. 目次 ----------------------------------------------------------
   読み飛ばすためのものなので、本文より一段静かに置く。 */
#toc.toc{
  background:#FAFAF7;
  border:1px solid var(--sm-line);
  border-radius:var(--sm-radius);
  padding:20px 24px;
  margin:28px 0 36px;
  width:100%;
}
#toc .toc-title{
  font-family:var(--sm-f-display);
  font-size:13px;
  font-weight:700;
  color:var(--sm-slate);
  letter-spacing:.04em;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--sm-line);
  text-align:left;
}
#toc .toc-list > li > a{ font-weight:700; }
#toc .toc-list a{ text-decoration:none; }
#toc .toc-list a:hover{ text-decoration:underline; }

/* ---- 16-6. 本文の読みやすさ ---------------------------------------------
   行間が広すぎると視線が迷うので、少しだけ詰める。 */
.entry-content p{ line-height:1.9; }
.entry-content h2,
.article h2:not(.related-entry-heading):not(.comment-title){ margin-top:52px; }
.entry-content h2 + p,
.entry-content h3 + p{ margin-top:0; }

/* =========================================================================
   17. 法務ページとフッターの導線
   プライバシーポリシー・免責事項・お問い合わせ・運営者情報。
   読み物ではないので、装飾より読みやすさと探しやすさを優先する。
   ========================================================================= */

/* ---- 17-1. 記事末尾から免責事項へ --------------------------------------- */
.sm-about__link{
  margin:10px 0 0 !important;
  font-size:12px !important;
  line-height:1.7;
}
.sm-about__link a{
  color:var(--sm-slate);
  text-decoration:underline;
  text-underline-offset:3px;
}
.sm-about__link a:hover{ color:var(--sm-indigo); }

/* ---- 17-2. 法務ページ本文 -------------------------------------------------
   条文が続くページなので、見出しの間隔を広めに取って区切りを見せる。 */
.page .entry-content h2{
  margin-top:48px;
  font-size:20px;
}
.page .entry-content h3{
  margin-top:32px;
  font-size:16.5px;
}
.page .entry-content li{ line-height:1.9; }

/* 運営者情報の概要テーブル。項目名の列を固定幅にして視線を揃える。 */
.page .entry-content table th{
  width:34%;
  white-space:nowrap;
  vertical-align:top;
}
@media screen and (max-width:560px){
  .page .entry-content table th{ width:38%; white-space:normal; }
}

/* ---- 17-3. フッターナビ ---------------------------------------------------
   Cocoon の navi-footer に法務ページを並べている。
   主役ではないので、色と大きさを一段落とす。 */
#navi-footer .menu-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 0;
  margin:0 0 10px;
  padding:0;
  list-style:none;
}
#navi-footer .menu-footer li{
  margin:0;
  padding:0 14px;
  border-left:0;
  border-right:1px solid rgba(255,255,255,.22);
  line-height:1.4;
}
#navi-footer .menu-footer li:last-child{ border-right:0; }
#navi-footer .menu-footer li a{
  padding:0;
  font-size:13px;
  text-decoration:none;
  opacity:.82;
  transition:opacity .2s ease;
}
#navi-footer .menu-footer li a:hover{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:3px;
  background:transparent;
}
@media screen and (max-width:560px){
  #navi-footer .menu-footer li{
    padding:0 10px;
    font-size:12px;
  }
}