@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.3
*/

/*==================================================================
  ふぁみもん Design System v1.0
  設計方針: 可愛さは「余白と角丸」で出す。信頼感は「色とコントラスト」で出す。
  ブランド色は猫の毛色(橙)の補色である深緑。純白背景は低解像度JPEGの粗が出るため不採用。
  注意: Cocoonのレイアウト構造(.wrap,#container,.main,.sidebar)に
        width/max-width/overflow を当てると2カラムが崩れる。構造には触れないこと。
==================================================================*/

:root{
  /* ---- Color ---- */
  --fm-brand:#1E4D3F;
  --fm-brand-deep:#163A30;
  --fm-primary:#2C6A54;
  --fm-secondary:#7A5A40;
  --fm-accent:#B4522F;
  --fm-accent-ink:#9E4526;

  --fm-bg:#F4F1EA;
  --fm-surface:#FFFDF8;
  --fm-surface-alt:#EBE5DA;

  --fm-text-primary:#23211E;
  --fm-text-secondary:#56514A;
  --fm-text-muted:#6B6459;
  --fm-text-on-brand:#FFFDF8;
  --fm-text-on-brand-sub:#B7C9BF;

  --fm-border:#E3DCD1;
  --fm-border-strong:#918878;

  --fm-success:#2E7355;
  --fm-warning:#8A5B0F;
  --fm-error:#B23A32;

  --fm-hover:#1B5541;
  --fm-hover-accent:#9A4325;
  --fm-focus-ring:#1F6F5C;

  --fm-tint-green:#E8EFE9;
  --fm-tint-accent:#F7EBE4;
  --fm-tint-warn:#F8EFDD;
  --fm-tint-error:#F9E9E7;

  --fm-link:var(--fm-primary);
  --fm-link-hover:var(--fm-hover);
  --fm-shadow-color:58 48 36;

  /* ---- Typography ---- */
  --fm-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","BIZ UDPGothic",Meiryo,"Noto Sans JP",sans-serif;
  --fm-font-num:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --fm-fs-h1:1.625rem;  --fm-lh-h1:1.45; --fm-ls-h1:.01em;
  --fm-fs-h2:1.4375rem; --fm-lh-h2:1.45; --fm-ls-h2:.01em;
  --fm-fs-h3:1.1875rem; --fm-lh-h3:1.6;  --fm-ls-h3:.01em;
  --fm-fs-h4:1.0625rem; --fm-lh-h4:1.7;  --fm-ls-h4:.02em;
  --fm-fs-body:1.0625rem; --fm-lh-body:1.9; --fm-ls-body:.02em;
  --fm-fs-lead:1.0625rem;
  --fm-fs-caption:.8125rem;
  --fm-fs-menu:.9375rem;
  --fm-fs-crumb:.75rem;
  --fm-fs-label:.6875rem;
  --fm-fs-cta:1.0625rem;
  --fm-fs-price:1.5rem;

  /* ---- Space ---- */
  --fm-space-1:.25rem; --fm-space-2:.5rem;  --fm-space-3:.75rem;
  --fm-space-4:1rem;   --fm-space-5:1.25rem; --fm-space-6:1.5rem;
  --fm-space-8:2rem;   --fm-space-10:2.5rem; --fm-space-12:3rem;
  --fm-space-16:4rem;
  --fm-gutter:var(--fm-space-5);

  /* ---- Radius ---- */
  --fm-radius-xs:4px; --fm-radius-sm:6px;  --fm-radius-md:10px;
  --fm-radius-lg:14px; --fm-radius-xl:20px; --fm-radius-pill:999px;

  /* ---- Shadow ---- */
  --fm-shadow-1:0 1px 2px rgba(var(--fm-shadow-color)/.05),0 1px 1px rgba(var(--fm-shadow-color)/.04);
  --fm-shadow-2:0 2px 4px rgba(var(--fm-shadow-color)/.05),0 8px 16px -6px rgba(var(--fm-shadow-color)/.10);
  --fm-shadow-3:0 4px 8px rgba(var(--fm-shadow-color)/.06),0 20px 36px -14px rgba(var(--fm-shadow-color)/.16);
  --fm-shadow-frame:inset 0 0 0 1px rgba(var(--fm-shadow-color)/.10);
  --fm-shadow-focus:0 0 0 2px var(--fm-surface),0 0 0 4px var(--fm-focus-ring);

  /* ---- Layout ---- */
  --fm-figure-max:560px;

  /* ---- Motion ---- */
  --fm-ease:cubic-bezier(.2,.6,.3,1);
  --fm-dur-fast:120ms;
  --fm-dur-base:200ms;
}

@media screen and (min-width:768px){ :root{ --fm-gutter:1.5rem; } }
@media screen and (min-width:1024px){
  :root{
    --fm-gutter:2rem;
    --fm-fs-h1:2.25rem;   --fm-lh-h1:1.4;  --fm-ls-h1:.005em;
    --fm-fs-h2:1.625rem;  --fm-lh-h2:1.4;
    --fm-fs-h3:1.375rem;  --fm-lh-h3:1.55;
    --fm-fs-h4:1.125rem;  --fm-lh-h4:1.65;
    --fm-fs-body:1.125rem; --fm-lh-body:1.95; --fm-ls-body:.03em;
    --fm-fs-lead:1.1875rem;
    --fm-fs-caption:.875rem;
    --fm-fs-crumb:.8125rem;
    --fm-fs-label:.75rem;
    --fm-fs-cta:1.125rem;
    --fm-fs-price:1.75rem;
  }
}
@media screen and (max-width:359px){ :root{ --fm-gutter:1rem; --fm-fs-h1:1.375rem; } }

/*==================================================================
  適用レイヤー
==================================================================*/

/* ---- 土台 ---- */
body{
  background:var(--fm-bg);
  color:var(--fm-text-primary);
  font-family:var(--fm-font-sans);
  line-break:strict;
}
a{ color:var(--fm-link); text-underline-offset:.18em; transition:color var(--fm-dur-fast) var(--fm-ease); }
a:hover{ color:var(--fm-link-hover); }

/* キーボード操作時のみフォーカスリングを出す（二重リングで緑地でも見失わない） */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none; box-shadow:var(--fm-shadow-focus); border-radius:var(--fm-radius-sm);
}

/* ---- ヘッダー ---- */
.header-container{ background:var(--fm-surface); border-bottom:1px solid var(--fm-border); }
.site-name-text{ font-weight:700; letter-spacing:.06em; font-feature-settings:"palt" 1; color:var(--fm-brand); }
.tagline{ color:var(--fm-text-muted); font-size:var(--fm-fs-caption); letter-spacing:.04em; }

/* ---- グローバルナビ ---- */
.navi-in>ul>li>a{
  font-size:var(--fm-fs-menu); font-weight:500; letter-spacing:.04em;
  color:var(--fm-text-primary);
}
.navi-in>ul>li>a:hover{ color:var(--fm-brand); background:transparent; }

/* ---- 記事一覧カード ---- */
.entry-card-wrap{
  background:var(--fm-surface);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-lg);
  box-shadow:var(--fm-shadow-1);
  transition:box-shadow var(--fm-dur-base) var(--fm-ease);
}
.entry-card-wrap:hover{ box-shadow:var(--fm-shadow-2); }
.entry-card-title,.e-card-title{
  font-size:1.0625rem; line-height:1.55; font-weight:700;
  color:var(--fm-text-primary); letter-spacing:.01em;
}
.entry-card-snippet{ color:var(--fm-text-secondary); font-size:.875rem; line-height:1.8; }
.entry-card-thumb img{ border-radius:var(--fm-radius-md); background:var(--fm-surface-alt); }
.cat-label{
  background:var(--fm-brand); color:var(--fm-text-on-brand);
  border:none; border-radius:var(--fm-radius-pill);
  font-size:var(--fm-fs-label); font-weight:700; letter-spacing:.06em;
  padding:.3em .85em;
}
.post-date,.post-update,.entry-card-info{ color:var(--fm-text-muted); font-size:var(--fm-fs-caption); }

/* 一覧のアクセスカウンターは訪問者に見せる情報ではない */
.entry-card-wrap .views,.entry-card-wrap .post-views{ display:none; }

/* ---- 本文タイポグラフィ ---- */
.entry-content{
  font-size:var(--fm-fs-body);
  line-height:var(--fm-lh-body);
  letter-spacing:var(--fm-ls-body);
  color:var(--fm-text-primary);
}
.entry-content p{ margin:0 0 1.75em; }
.entry-title,.article h1{
  font-size:var(--fm-fs-h1); line-height:var(--fm-lh-h1); letter-spacing:var(--fm-ls-h1);
  font-weight:700; font-feature-settings:"palt" 1; color:var(--fm-text-primary);
}
.entry-content h2{
  font-size:var(--fm-fs-h2); line-height:var(--fm-lh-h2); letter-spacing:var(--fm-ls-h2);
  font-weight:700; font-feature-settings:"palt" 1;
  margin:var(--fm-space-12) 0 var(--fm-space-5);
  padding:0 0 0 var(--fm-space-4);
  background:none; border:none; border-left:4px solid var(--fm-brand);
  color:var(--fm-text-primary);
}
.entry-content h3{
  font-size:var(--fm-fs-h3); line-height:var(--fm-lh-h3); letter-spacing:var(--fm-ls-h3);
  font-weight:700; font-feature-settings:"palt" 1;
  margin:var(--fm-space-8) 0 var(--fm-space-4);
  padding:0 0 var(--fm-space-2) 0;
  background:none; border:none; border-bottom:1px solid var(--fm-border);
  color:var(--fm-text-primary);
}
.entry-content h4{
  font-size:var(--fm-fs-h4); line-height:var(--fm-lh-h4); letter-spacing:var(--fm-ls-h4);
  font-weight:700; margin:var(--fm-space-6) 0 var(--fm-space-3);
}
.entry-content ul,.entry-content ol{ margin:0 0 1.75em; padding-left:1.5em; }
.entry-content li{ margin-bottom:.55em; line-height:1.85; }
.entry-content strong{ font-weight:700; }

/* ---- 低解像度写真の額装（原本400px前後を1.4倍以上に拡大しない） ---- */
.entry-content img{
  height:auto; max-width:100%;
  border-radius:var(--fm-radius-md);
  background:var(--fm-surface-alt);
  box-shadow:var(--fm-shadow-frame);
}
.entry-content p>img,.entry-content figure img{
  display:block; margin-inline:auto; max-width:min(100%,var(--fm-figure-max));
}

/* ---- サイドバー ---- */
.sidebar h3,.widget-sidebar-title{
  font-size:.9375rem; font-weight:700; letter-spacing:.04em;
  background:none; border:none; border-left:4px solid var(--fm-brand);
  border-radius:0; padding:.1em 0 .1em .7em; color:var(--fm-text-primary);
}
.sidebar .widget{
  background:var(--fm-surface); border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-lg); padding:var(--fm-space-4);
}

/* ---- フッター・パンくず ---- */
.footer{ background:var(--fm-surface); border-top:1px solid var(--fm-border); color:var(--fm-text-secondary); }
.breadcrumb{ font-size:var(--fm-fs-crumb); color:var(--fm-text-muted); }

/* ---- 動きを減らす設定を尊重 ---- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/*==================================================================
  記事本文コンポーネント
  面の色は1つに統一し、区別は「左罫線の色」と「ラベル」だけで行う。
  cons に赤を使わない（赤＝危険＝この商品はダメ、に読めるため土色にする）。
==================================================================*/

/* ---- .fm-note 最も静か。囲まず左罫線だけ ---- */
.entry-content .fm-note{
  margin:var(--fm-space-8) 0;
  padding:.125rem 0 .125rem var(--fm-space-4);
  background:none; border:none;
  border-left:2px solid var(--fm-border-strong);
  border-radius:0;
  font-size:.9375em; line-height:1.85; color:var(--fm-text-secondary);
}
.entry-content .fm-note>*:last-child{ margin-bottom:0; }

/* ---- .fm-rel 文脈内部リンク（600本）
   リンクを青くしない。600個の青い塊は読書の視線を毎回止めるため、
   面＋ラベル＋下線でクリック性を作る ---- */
.entry-content .fm-rel{
  display:block;
  margin:var(--fm-space-8) 0;
  padding:.875rem 1rem .9375rem;
  background:var(--fm-surface);
  border:1px solid var(--fm-border);
  border-left:3px solid var(--fm-primary);
  border-radius:var(--fm-radius-sm);
  box-shadow:none;
}
.entry-content .fm-rel+.fm-rel{ margin-top:.75rem; }
.entry-content .fm-rel__label{
  display:inline-block; margin:0 0 .4rem;
  padding:.15em .7em;
  background:var(--fm-primary); color:#fff;
  font-size:.6875rem; font-weight:700; letter-spacing:.08em; line-height:1.6;
  border-radius:var(--fm-radius-pill);
}
.entry-content .fm-rel a{
  display:flex; align-items:center;
  min-height:44px; padding:.4rem 0;
  font-size:.9375em; font-weight:700; line-height:1.65;
  color:var(--fm-text-primary);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(44,106,84,.42);
  text-underline-offset:.22em;
}
.entry-content .fm-rel a:hover{ text-decoration-color:var(--fm-primary); }

/* ---- .fm-pros / .fm-cons 面を統一し左罫線の色だけで分ける ---- */
.entry-content .fm-pros,
.entry-content .fm-cons{
  margin:var(--fm-space-8) 0;
  padding:1rem 1.125rem;
  background:var(--fm-surface);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-md);
}
.entry-content .fm-pros{ border-left:3px solid var(--fm-success); }
.entry-content .fm-cons{ border-left:3px solid var(--fm-secondary); }
.entry-content .fm-pros ul,
.entry-content .fm-cons ul{ margin:0; padding:0; list-style:none; }
.entry-content .fm-pros li,
.entry-content .fm-cons li{
  position:relative; margin:0 0 .6em; padding-left:1.6em;
  font-size:.9375em; line-height:1.8;
}
.entry-content .fm-pros li:last-child,
.entry-content .fm-cons li:last-child{ margin-bottom:0; }
.entry-content .fm-pros li::before,
.entry-content .fm-cons li::before{
  content:""; position:absolute; left:.25em; top:.72em;
  width:6px; height:6px; border-radius:50%;
}
.entry-content .fm-pros li::before{ background:var(--fm-success); }
.entry-content .fm-cons li::before{ background:var(--fm-secondary); }

/* ---- .fm-box 負マージンでタイトル帯だけを全幅に抜く ---- */
.entry-content .fm-box{
  margin:var(--fm-space-8) 0;
  padding:0 1rem 1rem;
  background:var(--fm-surface);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-md);
  overflow:hidden;
}
.entry-content .fm-box__title{
  margin:0 -1rem 1rem; padding:.6rem 1rem;
  background:var(--fm-brand); color:var(--fm-text-on-brand);
  font-size:.875rem; font-weight:700; letter-spacing:.06em; line-height:1.6;
  border:0; border-radius:0;
}
.entry-content .fm-box>*:last-child{ margin-bottom:0; }

/* ---- .fm-cta 記事内で唯一の「明るい暖色面」 ---- */
.entry-content .fm-cta{
  margin:var(--fm-space-10) 0;
  padding:1.25rem 1rem;
  background:var(--fm-surface);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-md);
  text-align:center;
}
.entry-content .fm-cta__btn{
  display:flex; align-items:center; justify-content:center; gap:.4em;
  width:100%; max-width:22rem; min-height:56px;
  margin:0 auto; padding:1rem 1.25rem;
  background:var(--fm-accent); color:#fff;
  font-size:var(--fm-fs-cta); font-weight:700; letter-spacing:.02em; line-height:1.45;
  text-decoration:none; border:0;
  border-radius:var(--fm-radius-md);
  box-shadow:0 2px 0 #7d3a20;
  transition:background-color var(--fm-dur-base) var(--fm-ease),transform var(--fm-dur-fast) var(--fm-ease);
}
.entry-content .fm-cta__btn:hover{ background:var(--fm-hover-accent); color:#fff; }
.entry-content .fm-cta__btn:active{ transform:translateY(2px); box-shadow:0 0 0 #7d3a20; }
.entry-content .fm-cta__btn:focus-visible{ outline:3px solid var(--fm-focus-ring); outline-offset:2px; }
.entry-content .fm-cta__lead{ margin:0 0 .875rem; font-size:.875em; line-height:1.8; text-align:left; }
.entry-content .fm-cta__note{ margin:.625rem 0 0; font-size:.75rem; line-height:1.7; color:var(--fm-text-muted); }
.entry-content .fm-cta__hold{
  margin:.75rem 0 0; padding-top:.75rem;
  border-top:1px solid var(--fm-border);
  font-size:.8125rem; line-height:1.75; color:var(--fm-text-secondary); text-align:left;
}

/* ---- PR表記 法令上必須。消さず隠さず、濃度で明瞭性を担保して面積を減らす ---- */
.entry-content .famimon-pr{
  display:flex; align-items:flex-start; gap:8px;
  margin:0 0 1rem; padding:8px 10px;
  background:var(--fm-surface-alt);
  border:0; border-left:3px solid var(--fm-accent);
  border-radius:var(--fm-radius-xs);
  font-size:.8125rem; line-height:1.55;
  color:var(--fm-text-primary);
}
.entry-content .famimon-pr>*{ margin:0; }
.entry-content .famimon-pr__label{
  flex:0 0 auto; margin-top:1px; padding:2px 6px;
  background:var(--fm-accent); color:#fff;
  font-size:.6875rem; font-weight:700; letter-spacing:.06em;
  border-radius:3px;
}
.entry-content .famimon-pr__text{ flex:1 1 auto; font-size:.8125rem; line-height:1.55; }

/*==================================================================
  バッジ / カード / 404
==================================================================*/

/* ---- カテゴリーバッジ（サムネイル外に出したもの。max-widthは付けない） ---- */
.fm-badge{
  display:inline-flex; align-items:center;
  padding:.28em .8em;
  font-size:var(--fm-fs-label); font-weight:700; letter-spacing:.06em; line-height:1.5;
  border-radius:var(--fm-radius-pill);
  white-space:nowrap; vertical-align:middle;
  text-decoration:none;
}
.fm-badge--cat{
  background:var(--fm-tint-green);
  color:var(--fm-brand);
  border:1px solid var(--fm-border);
}
.fm-badge--cat:hover{ background:var(--fm-surface-alt); color:var(--fm-brand); }

/* サムネイル上のオーバーレイラベルは使わない（キャッシュ残存時の保険） */
.entry-card-thumb .cat-label{ display:none; }

/* ---- アクセスカウンター（管理者にのみ出るが一覧では不要） ---- */
.entry-card .admin-pv,.widget-entry-card-pv{ display:none; }

/* ---- 404 ---- */
.not-found .entry-title,.error404 .entry-title{
  font-size:var(--fm-fs-h2); line-height:1.5; font-weight:700;
  color:var(--fm-text-primary);
}
/* Cocoon既定の404画像は使わない（メディアが全て400px前後で拡大すると粗が出る） */
img.not-found-image,.not-found img{ display:none; }

/* ---- 記事案内図：カテゴリー単位で折りたたむ ---- */
.fm-map__group{
  margin-bottom:var(--fm-space-3);
  border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-md);
  background:var(--fm-surface);
}
.fm-map__group>summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--fm-space-2);
  min-height:52px; padding:var(--fm-space-3) var(--fm-space-4);
  font-size:1rem; font-weight:700; color:var(--fm-text-primary);
  cursor:pointer; list-style:none;
}
.fm-map__group>summary::-webkit-details-marker{ display:none; }
.fm-map__group>summary::after{
  content:""; width:.5em; height:.5em; flex:0 0 auto;
  border-right:2px solid var(--fm-primary); border-bottom:2px solid var(--fm-primary);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--fm-dur-base) var(--fm-ease);
}
.fm-map__group[open]>summary::after{ transform:rotate(-135deg) translateY(-2px); }
.fm-map__group[open]>summary{ border-bottom:1px solid var(--fm-border); }
.fm-map__group>summary:hover{ background:var(--fm-tint-green); }
.fm-map__group>summary:focus-visible{ outline:3px solid var(--fm-focus-ring); outline-offset:-3px; }
.fm-map__count{ font-size:var(--fm-fs-caption); font-weight:400; color:var(--fm-text-muted); }

/*==================================================================
  モバイル（834px以下）
  ヘッダー362px → 108px。グローバルナビ240pxの正体は、
  「ヘッダーモバイルメニュー」に11項目が割り当たり Cocoon の
  li{width:50%;height:40px} で 11項目÷2列=6行×40px=240px になっていたもの。
  これを消さず「横スクロールのカテゴリーレール」に作り替える。
==================================================================*/
@media screen and (max-width:834px){

  /* ---- ヘッダーバー 56px（タップ44pxを内包できる最小の実用高） ---- */
  #header .header-in{ height:56px; min-height:56px; flex-direction:row; align-items:center; justify-content:flex-start; }
  #header .logo-header{ text-align:left; margin:0; }
  #header .logo-text{ padding:0; }
  #header .site-name-text-link{ display:flex; align-items:center; height:56px; padding:0 16px; }
  #header .site-name-text{ font-size:20px; font-weight:700; letter-spacing:.06em; }
  /* キャッチフレーズは title と meta description に既にあり画面上の再掲は情報量ゼロ */
  #header .tagline{ display:none; }

  /* ---- カテゴリーレール 52px（2列6行 → 横1行） ---- */
  #navi .navi-in>.menu-mobile{
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    height:52px; padding:4px 12px; gap:8px;
    background:var(--fm-surface); border-bottom:1px solid var(--fm-border);
  }
  #navi .navi-in>.menu-mobile::-webkit-scrollbar{ display:none; }
  #navi .navi-in>.menu-mobile li{ width:auto; flex:0 0 auto; height:44px; line-height:1; border:0; margin:0; }
  #navi .navi-in>.menu-mobile li a{
    display:flex; align-items:center; height:44px; padding:0 16px;
    font-size:14px; font-weight:600; white-space:nowrap;
    color:var(--fm-brand-deep); background:var(--fm-tint-green);
    border-radius:var(--fm-radius-pill);
  }
  #navi .navi-in>.menu-mobile li a:after{ display:none; }
  #navi .navi-in>.menu-mobile .caption-wrap,
  #navi .navi-in>.menu-mobile .item-label{ height:auto; line-height:1; }
  #navi .navi-in>.menu-mobile li.current-menu-item a,
  #navi .navi-in>.menu-mobile li.current-category-ancestor a{ background:var(--fm-brand); color:#fff; }

  /* ---- 下部ドロワー（既存。タップ領域が28pxしかなかった） ---- */
  .menu-drawer a{ display:flex; align-items:center; min-height:48px; padding:0 16px; font-size:16px; line-height:1.4; }
  .menu-drawer li+li{ border-top:1px solid var(--fm-border); }
  .mobile-menu-buttons .menu-caption{ font-size:10px; opacity:1; }
  .mobile-menu-buttons .menu-icon{ font-size:20px; }

  /* ---- 記事カード 262px → 100px ---- */
  .entry-card-wrap.a-wrap{
    padding:0; margin:0 0 12px;
    border:1px solid var(--fm-border); border-radius:12px;
    box-shadow:var(--fm-shadow-1); background:var(--fm-surface);
  }
  .entry-card.e-card{ display:flex; gap:12px; align-items:flex-start; padding:14px; height:auto; }
  .entry-card-thumb.card-thumb{ float:none; width:124px; flex:0 0 124px; aspect-ratio:16/9; margin:0; position:relative; }
  .entry-card-thumb.card-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
  .entry-card-content.card-content{ margin:0; padding:0; min-width:0; flex:1 1 auto; }
  /* height固定＋line-clampで1行でも3行でもカード高100pxを厳密に揃える */
  .entry-card-title.e-card-title{
    font-size:16px; line-height:1.5; height:72px;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden; margin:0; font-weight:700; color:var(--fm-text-primary);
  }
  .entry-card-snippet.e-card-snippet{ display:none; }
  .entry-card-meta.e-card-meta{ display:none; }

  /* ---- 記事ページ ---- */
  main.main{ padding:16px 16px 24px; }
  .entry-title,.article h1{ font-size:22px; line-height:1.5; padding:0; margin:0 0 10px; font-weight:700; }
  .date-tags{ text-align:left; margin:0 0 12px; line-height:1.6; }
  .article .sns-share.ss-top{ display:none; }

  /* Cocoonが .entry-content>* を直接指定しているため同じセレクタで上書きする */
  .entry-content{ font-size:17px; overflow-wrap:anywhere; }
  .entry-content>*{ font-size:17px; line-height:1.9; }
  .entry-content p{ margin:0 0 1.6em; }
  .entry-content li{ line-height:1.9; margin-bottom:.55em; }
  .entry-content ul,.entry-content ol{ margin:0 0 1.6em; padding-left:1.35em; }

  /* h2は「大きさ」だけでなく「面」と「余白」で階層をつける */
  .entry-content h2{
    font-size:21px; line-height:1.5; font-weight:700;
    margin:2.6em 0 1.1em; padding:.65em .8em .65em .9em;
    background:var(--fm-tint-green); border:0;
    border-left:5px solid var(--fm-brand); border-radius:0 8px 8px 0;
  }
  .entry-content h3{
    font-size:18px; line-height:1.6; font-weight:700;
    margin:2em 0 .8em; padding:0 0 0 .7em;
    background:none; border:0; border-left:3px solid var(--fm-secondary);
  }
  .entry-content h4{ font-size:17px; font-weight:700; margin:1.6em 0 .6em; }

  /* ---- 目次・SNS ---- */
  .toc{ margin:1.8em 0; padding:0 12px 8px; }
  .toc-title{ display:flex; align-items:center; min-height:48px; font-size:16px; font-weight:700; }
  .toc-list a{ display:block; min-height:44px; padding:.55em 0; line-height:1.5; }
  .sns-share.ss-bottom .sns-buttons a{ min-height:48px; }
}

/* ---- 320〜359px（iPhone SE 1st） ---- */
@media screen and (max-width:359px){
  .entry-content,.entry-content>*{ font-size:16px; }
  .entry-content h2{ font-size:19px; padding:.6em .7em .6em .8em; }
  .entry-content h3{ font-size:17px; }
  .entry-title,.article h1{ font-size:20px; }
  .entry-card.e-card{ padding:12px; gap:10px; }
  .entry-card-thumb.card-thumb{ width:96px; flex:0 0 96px; }
  .entry-card-title.e-card-title{ font-size:15px; line-height:1.5; height:90px; -webkit-line-clamp:4; }
}

/*==================================================================
  アクセシビリティ
  Cocoonがハンバーガー・検索・サイドバー・目次のチェックボックスを
  display:none にしているため、これらがキーボードから100%操作不能だった。
  （WCAG 2.1.1 キーボード操作の違反）
  視覚的には隠したままフォーカス可能にする。
==================================================================*/
.toc-checkbox,
#navi-menu-input,
#search-menu-input,
#sidebar-menu-input{
  display:block; position:absolute;
  width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; opacity:0;
}
.toc-checkbox:focus-visible + .toc-title,
#navi-menu-input:focus-visible + #navi-menu-open,
#search-menu-input:focus-visible + #search-menu-open,
#sidebar-menu-input:focus-visible + #sidebar-menu-open{
  outline:3px solid var(--fm-focus-ring); outline-offset:-3px;
}

/* フォーカスリングはキーボード操作時のみ。offsetを付けないと背景色に埋もれる */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible,
label.menu-open:focus-visible,label.toc-title:focus-visible,
label.menu-close-button:focus-visible{
  outline:3px solid var(--fm-focus-ring); outline-offset:2px; border-radius:4px;
}

/* 横スクロールは原因側で潰す（コンテナに overflow を当てるとCocoonの2カラムが壊れる） */
.entry-content{ overflow-wrap:anywhere; word-break:normal; }
.entry-content img,.entry-content iframe,.entry-content video{ max-width:100%; height:auto; }
html{ -webkit-text-size-adjust:100%; }

/* Cocoonが行揃えのために出力する中身の無いカードを隠す。
   :not(:has(...)) は正常なカードまで巻き込む危険があるため、
   「中身が完全に空」のものだけを対象にする */
.entry-card-wrap:empty{ display:none; }
.entry-card-wrap:not(:has(*)){ display:none; }

/*==================================================================
  レールはカテゴリー専用にする
  外観>メニューで専用メニューを作るのが本筋だが、CSSでも同じ結果にできる。
  レール先頭を「ホーム／運営者情報／記事一覧」が占めていて、
  肝心のカテゴリーが画面外に押し出されていた。
==================================================================*/
@media screen and (max-width:834px){
  #navi .navi-in>.menu-mobile li:has(a[href="https://famimon.net/"]),
  #navi .navi-in>.menu-mobile li:has(a[href$="/policy/"]),
  #navi .navi-in>.menu-mobile li:has(a[href$="/contact/"]),
  #navi .navi-in>.menu-mobile li:has(a[href$="/tankyu-annai/"]){
    display:none;
  }

  /* カードの輪郭を視認できる濃さにする */
  .entry-card-wrap.a-wrap{ border-color:#D8CFC0; }
}


/* ==================== AAA r2 : critic fixes ==================== */

/* legacy inline white text inside converted note/box (was invisible on light bg) */
.entry-content .fm-note span[style*="#ffffff"],
.entry-content .fm-note span[style*="#fff"],
.entry-content .fm-box span[style*="#ffffff"]{ color:inherit !important; }

/* legacy yellow highlighter -> subtle brand underline */
.entry-content span[style*="#ffff99"]{
	  background-color:transparent !important;
	  background-image:linear-gradient(transparent 62%, rgba(180,82,47,.22) 62%);
}

/* unfilled ad slots collapse instead of leaving holes */
ins.adsbygoogle[data-ad-status="unfilled"]{ display:none !important; }
.ad-label{ font-size:11px; letter-spacing:.08em; color:var(--fm-text-muted); text-align:center; }

/* pagination */
.pagination .page-numbers{ border:1px solid var(--fm-border); border-radius:var(--fm-radius-md); background:var(--fm-surface); color:var(--fm-text-primary); }
.pagination .page-numbers.current{ background:var(--fm-primary); border-color:var(--fm-primary); color:#fff; }
.pagination-next .pagination-next-link{ border:1px solid var(--fm-border); border-radius:var(--fm-radius-lg); background:var(--fm-surface); color:var(--fm-text-primary); }

/* table of contents */
#toc.toc{ border:1px solid var(--fm-border); border-radius:var(--fm-radius-lg); background:var(--fm-surface); padding:14px 18px; }
#toc .toc-title{ font-weight:700; color:var(--fm-text-primary); }
#toc .toc-content a{ color:var(--fm-primary); text-decoration:none; min-height:32px; }
#toc .toc-content a:hover{ text-decoration:underline; }

/* comment form */
#comment-area .submit{ background:var(--fm-primary); color:#fff; border:none; border-radius:var(--fm-radius-md); min-height:44px; padding:10px 28px; cursor:pointer; }
#comment-area input[type="text"], #comment-area input[type="email"], #comment-area input[type="url"], #comment-area textarea{ border:1px solid var(--fm-border); border-radius:var(--fm-radius-sm); background:var(--fm-surface); }

/* share buttons: quiet outline style instead of full brand-color slabs */
.sns-share-buttons a{ background:transparent !important; border:1px solid var(--fm-border) !important; color:var(--fm-text-primary) !important; border-radius:var(--fm-radius-md) !important; }
.sns-share-buttons a .social-icon{ color:var(--fm-primary) !important; }

/* go to top button */
#go-to-top .go-to-top-button, #go-to-top{ background:var(--fm-brand); color:#fff; border-radius:50%; }

/* 404: hide Cocoon default image (correct selector) */
img.not-found{ display:none; }

/* static pages need no dates */
body.page .date-tags{ display:none; }

/* widget cards: hide bulk-resave update dates */
.widget-entry-card-update-date{ display:none; }

/* category pill rail: right edge fade as a scroll hint */
@media screen and (max-width:834px){
	#navi{ position:relative; }
	#navi::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:26px;
	    background:linear-gradient(to left, var(--fm-bg), rgba(244,241,234,0)); pointer-events:none; }
}

/* uniform 3-line clamp on index card titles */
.entry-card-title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }

/* legal pages live in the footer, not the global nav */
#navi .navi-in > ul > li:has(> a[href*="/policy"]),
#navi .navi-in > ul > li:has(> a[href*="/contact"]){ display:none; }


/* desktop: two-column card grid on index lists */
@media screen and (min-width:1023px){
  .list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
  .list > .entry-card-wrap{ margin:0; }
  .list .entry-card{ display:flex; align-items:flex-start; gap:14px; float:none; }
  .list .entry-card-thumb{ flex:0 0 190px; width:190px; max-width:190px; margin:0; float:none; }
  .list .entry-card-thumb img{ width:100%; height:auto; }
  .list .entry-card-content{ flex:1 1 auto; min-width:0; margin:0; width:auto; }
  .list .entry-card-title{ font-size:1.02rem; line-height:1.55; }
}

/* ==================== AAA r3 : critic round-2 fixes ==================== */

/* grid scope: non-card children (category description etc.) span the full row */
@media screen and (min-width:1023px){
  .list > *:not(.entry-card-wrap){ grid-column:1 / -1; }
}

/* tablet band gets the two-column grid too */
@media screen and (min-width:600px) and (max-width:1022px){
  .list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .list > *:not(.entry-card-wrap){ grid-column:1 / -1; }
  .list > .entry-card-wrap{ margin:0; }
}

/* comparison tables: keep header cells on one line */
.entry-content th{ white-space:nowrap; }

/* pill rail: left inset + left fade so the previous pill does not cut at the edge */
@media screen and (max-width:834px){
  #navi .navi-in>.menu-mobile{ scroll-snap-type:x proximity; scroll-padding-inline:16px; padding-left:16px; }
  #navi .navi-in>.menu-mobile>li{ scroll-snap-align:start; }
  #navi::before{ content:""; position:absolute; top:0; left:0; bottom:0; width:14px; z-index:1;
    background:linear-gradient(to right, var(--fm-bg), rgba(244,241,234,0)); pointer-events:none; }
}

/* toc: no phantom height, hide empty ad wrappers above content */
#toc.toc{ min-height:0; margin-top:16px; }
#toc .toc-content{ margin:0; }
.ad-wrap:has(ins.adsbygoogle[data-ad-status="unfilled"]){ display:none; }

/* single-row global nav on desktop */
@media screen and (min-width:1023px){
  #navi .navi-in>ul.menu-pc{ display:flex; flex-wrap:nowrap; justify-content:center; }
  #navi .navi-in>ul.menu-pc>li{ width:auto; flex:0 1 auto; }
  #navi .navi-in>ul.menu-pc>li>a{ padding:0 14px; font-size:.95rem; }
}

/* comment area: single heading */
#comment-area #reply-title{ display:none; }

/* 404 tools */
.fm-404-tools{ margin-top:18px; }
.fm-404-tools .search-box{ max-width:420px; margin:0 0 14px; }
ul.fm-404-cats{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
ul.fm-404-cats li{ margin:0; padding:0; }
ul.fm-404-cats .fm-badge--cat{ min-height:40px; display:inline-flex; align-items:center; padding:6px 14px; }


/* ==================== AAA r4 : brand mark / front page editorial ==================== */

/* ---- ブランドマーク ---- */
.fm-mark{ display:inline-flex; align-items:center; flex:0 0 auto; line-height:0; }
.fm-mark svg{ display:block; }
#header .site-name-text-link{ display:flex; align-items:center; gap:10px; }
#header .site-name-text{ line-height:1.1; }

/* ---- Hero ---- */
.fm-hero{
  margin:0 0 var(--fm-space-6); padding:26px 22px 22px;
  border-radius:var(--fm-radius-xl);
  background:linear-gradient(160deg, #1E4D3F 0%, #163A30 100%);
  color:var(--fm-text-on-brand); overflow:hidden;
}
.fm-hero__eyebrow{
  margin:0 0 10px; font-size:.78rem; letter-spacing:.14em; font-weight:700;
  color:rgba(244,241,234,.72);
}
.fm-hero__title{
  margin:0 0 12px; font-size:1.5rem; line-height:1.5; font-weight:700;
  letter-spacing:.01em; font-feature-settings:'palt'; color:#FFFDF8;
}
.fm-hero__lead{
  margin:0 0 18px; font-size:.95rem; line-height:1.85;
  color:rgba(244,241,234,.86); max-width:34em;
}
ul.fm-hero__tasks{ list-style:none; margin:0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(2, minmax(0,1fr)); }
ul.fm-hero__tasks li{ margin:0; padding:0; }
.fm-hero__tasks a{
  display:flex; flex-direction:column; gap:2px; min-height:56px; justify-content:center;
  padding:10px 14px; border-radius:var(--fm-radius-md); text-decoration:none;
  background:rgba(255,253,248,.1); border:1px solid rgba(244,241,234,.28);
  transition:background var(--fm-dur-base) var(--fm-ease);
}
.fm-hero__tasks a:hover{ background:rgba(255,253,248,.2); }
.fm-hero__tasks a:focus-visible{ outline:3px solid #9FD8C4; outline-offset:2px; }
.fm-hero__tasklabel{ font-size:.95rem; font-weight:700; color:#FFFDF8; }
.fm-hero__taskcat{ font-size:.72rem; color:rgba(244,241,234,.7); }

/* ---- セクション見出し ---- */
.fm-sec{ margin:0 0 var(--fm-space-6); }
.fm-sec__h{
  margin:0 0 6px; font-size:1.15rem; line-height:1.5; font-weight:700;
  color:var(--fm-text-primary); display:flex; align-items:center; gap:9px;
  background:none; padding:0; border:0;
}
.fm-sec__h::before{ content:""; width:5px; height:1.1em; border-radius:3px; background:var(--fm-brand); flex:0 0 auto; }
.fm-sec__note{ margin:0 0 14px; font-size:.85rem; line-height:1.8; color:var(--fm-text-secondary); }
.fm-sec__h--list{ margin-top:var(--fm-space-8); margin-bottom:14px; }

/* ---- まず読みたい3記事 ---- */
ul.fm-picks__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
ul.fm-picks__list li{ margin:0; padding:0; }
.fm-picks__list a{
  display:flex; gap:14px; align-items:center; text-decoration:none;
  background:var(--fm-surface); border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-lg); padding:12px; min-height:44px;
  transition:border-color var(--fm-dur-base) var(--fm-ease);
}
.fm-picks__list a:hover{ border-color:var(--fm-primary); }
.fm-picks__thumb{
  flex:0 0 108px; width:108px; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--fm-radius-sm); background:var(--fm-tint-green);
  display:flex; align-items:center; justify-content:center;
}
.fm-picks__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fm-picks__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fm-picks__title{ font-size:.98rem; line-height:1.55; font-weight:700; color:var(--fm-text-primary); }

/* ---- カテゴリーから探す ---- */
ul.fm-cats__grid{ list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0,1fr)); }
ul.fm-cats__grid li{ margin:0; padding:0; }
.fm-cats__grid a{
  display:flex; flex-direction:column; gap:4px; height:100%; min-height:76px;
  padding:12px 14px; text-decoration:none;
  background:var(--fm-surface); border:1px solid var(--fm-border);
  border-radius:var(--fm-radius-md); transition:border-color var(--fm-dur-base) var(--fm-ease);
}
.fm-cats__grid a:hover{ border-color:var(--fm-primary); }
.fm-cats__name{ font-size:.92rem; font-weight:700; color:var(--fm-text-primary); display:flex; align-items:baseline; gap:6px; }
.fm-cats__n{ font-size:.72rem; font-weight:400; color:var(--fm-text-muted); font-family:var(--fm-font-num); }
.fm-cats__d{ font-size:.75rem; line-height:1.7; color:var(--fm-text-muted); }

/* ---- フッターのブランドブロック ---- */
.fm-foot-brand{ background:var(--fm-surface); border-top:1px solid var(--fm-border); padding:24px 16px 20px; }
.fm-foot-brand__in{ display:flex; gap:14px; align-items:flex-start; max-width:820px; margin:0 auto; }
.fm-foot-brand__name{ margin:0 0 6px; font-size:1.05rem; font-weight:700; color:var(--fm-brand); }
.fm-foot-brand__desc{ margin:0 0 4px; font-size:.82rem; line-height:1.8; color:var(--fm-text-secondary); }
.fm-foot-brand__org{ margin:0; font-size:.75rem; color:var(--fm-text-muted); }

/* ---- サムネイルを共通フレームで統一（低解像度・画風混在の吸収） ---- */
.entry-card-thumb, .widget-entry-card-thumb, .related-entry-card-thumb{
  background:var(--fm-tint-green); border-radius:var(--fm-radius-sm); overflow:hidden;
}
.entry-card-thumb img, .widget-entry-card-thumb img, .related-entry-card-thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
}

/* ---- 人気記事ウィジェット: 旧Cocoonの黒グラデ/金バッジをやめる ---- */
.widget-entry-cards.ranking-visible .widget-entry-card-link::before,
.popular-entry-cards .no-1::before, .popular-entry-cards .no-2::before, .popular-entry-cards .no-3::before{
  background:var(--fm-brand) !important; color:#FFFDF8 !important;
  border-radius:var(--fm-radius-pill); font-family:var(--fm-font-num); font-weight:700;
  box-shadow:none; text-shadow:none; border:0;
}
.widget-entry-cards .card-large-image .widget-entry-card-title,
.popular-entry-cards.card-large-image .popular-entry-card-title{
  position:static; background:none; color:var(--fm-text-primary); text-shadow:none; padding:8px 0 0;
}
.widget-entry-cards .card-large-image .widget-entry-card-thumb::after{ content:none; }

@media screen and (min-width:600px){
  .fm-hero{ padding:34px 30px 30px; }
  .fm-hero__title{ font-size:1.85rem; }
  ul.fm-hero__tasks{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  ul.fm-picks__list{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .fm-picks__list a{ flex-direction:column; align-items:stretch; gap:10px; }
  .fm-picks__thumb{ flex:0 0 auto; width:100%; }
  ul.fm-cats__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}


/* ==================== AAA r5 : 比率とタイポの追い込み ==================== */

/* picks のサムネを確実に16:9で額装（flex+aspect-ratioだと画像の実寸に負ける） */
.fm-picks__thumb{ display:block; position:relative; aspect-ratio:16/9; padding:0; }
.fm-picks__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6px; }

/* Hero: モバイルは行が折れない字送りに */
@media screen and (max-width:599px){
  .fm-hero__title{ font-size:1.3rem; line-height:1.55; }
  .fm-hero__lead{ font-size:.9rem; }
  .fm-hero{ padding:22px 18px 20px; }
}

/* 記事一覧のサムネは既にトリミング済みなので枠内に収める */
.entry-card-thumb img{ object-fit:contain; }


/* ---- 下部固定バー: 「サイドバー」は「メニュー」と役割が重なるので外す4ボタンに ---- */
.mobile-menu-buttons{ display:flex; }
.mobile-menu-buttons > li.menu-button{ flex:1 1 0; width:auto; }
.mobile-menu-buttons > li.sidebar-menu-button{ display:none; }


/* ==================== AAA r6 ==================== */
/* picks: バッジの横伸びを止める */
.fm-picks__body{ align-items:flex-start; }
.fm-picks__body .fm-badge--cat{ flex:0 0 auto; }

/* 画像の地色（白）と額の地色を揃えて白箱を消す */
.fm-picks__thumb{ background:#FFFFFF; border:1px solid var(--fm-border); }
.fm-picks__thumb img{ padding:4px; }
.entry-card-thumb, .widget-entry-card-thumb, .related-entry-card-thumb{ background:var(--fm-surface); }

/* カテゴリータイル: 名前と件数の採り付け */
.fm-cats__name{ justify-content:space-between; gap:8px; font-size:.88rem; }
.fm-cats__name > .fm-cats__n{ flex:0 0 auto; }


/* ==================== AAA r7 ==================== */
/* レールの左切れの真因: Cocoonの justify-content:center を継承していたため
   こと。overflow分が左にもはみ出し、先頭2項目（left:-239px/-53px）が
   スクロールでも到達できない状態になっていた。 */
@media screen and (max-width:834px){
  #navi .navi-in>.menu-mobile{ justify-content:flex-start; scroll-snap-type:none; }
  #navi::before{ content:none; }
}


/* ==================== AAA r8 : critic round-3 fixes ==================== */

/* 【退行修正】.mobile-menu-buttons に素で display:flex を当てたため
   Cocoonのモバイル限定表示を上書きしてPCにも出ていた。834px以下に限定する。 */
.mobile-menu-buttons{ display:none; }
@media screen and (max-width:834px){
  .mobile-menu-buttons{ display:flex; }
  .mobile-menu-buttons > li.menu-button{ flex:1 1 0; width:auto; }
  .mobile-menu-buttons > li.sidebar-menu-button{ display:none; }
}

/* 本文面をトークンの surface に（仕様外の純白をやめる） */
main.main, .main{ background:var(--fm-surface); }

/* 日本語の語中折りを抑える（文節単位で改行） */
h1,h2,h3,h4,.fm-hero__title,.fm-sec__h,.fm-picks__title,.fm-cats__name,.entry-card-title,.widget-title{
  word-break:auto-phrase; line-break:strict;
}

/* カテゴリータイル: 空セルを作らない / 件数は別行+単位付き */
ul.fm-cats__grid{ display:flex; flex-wrap:wrap; gap:10px; }
ul.fm-cats__grid > li{ flex:1 1 168px; }
.fm-cats__name{ display:block; justify-content:flex-start; }
.fm-cats__n{ display:block; margin-top:3px; }
.fm-cats__n::after{ content:"記事"; margin-left:2px; }

/* 生成アイキャッチがカード面に溶けるのを防ぐ額線 */
.entry-card-thumb, .widget-entry-card-thumb, .related-entry-card-thumb{
  border:1px solid var(--fm-border);
}

/* h3バーとプージナーションの緑をブランドに揃える */
.entry-content h3{ border-left-color:var(--fm-brand); }
.pagination .page-numbers.current{ background:var(--fm-brand); border-color:var(--fm-brand); }

/* 前後記事ナビをカード化 */
.pager-post-navi{ display:flex; gap:12px; flex-wrap:wrap; }
.pager-post-navi a{
  flex:1 1 260px; align-items:center; gap:10px;
  border:1px solid var(--fm-border); border-radius:var(--fm-radius-md);
  background:var(--fm-surface); padding:10px 12px; text-decoration:none;
}
.pager-post-navi a:hover{ border-color:var(--fm-primary); }
.pager-post-navi .iconfont{ color:var(--fm-primary); }

/* コメント欄の赤い※をブランド内の色に */
#comment-area .required, #comment-area .must{ color:var(--fm-accent); }
#comment-area textarea{ resize:vertical; }
#comment-area .comment-reply-title, #comment-area h2{ font-size:1.1rem; }

/* 404: 検索アイコンの縦位置とバタン形状 */
.fm-404-tools .search-box{ position:relative; }
.fm-404-tools .search-box .search-submit{ top:50%; transform:translateY(-50%); right:8px; }

/* カテゴリー見出しとパンくずの黒いアイコンをブランド色に */
.archive-title .fa, .breadcrumb .fa, .entry-title .fa{ color:var(--fm-primary); }

/* デスクトップの本文行長を抑える + サイドバー追従 */
@media screen and (min-width:1023px){
  .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3{ max-width:44em; }
  #sidebar{ position:sticky; top:16px; align-self:flex-start; }
}


/* ==================== AAA r9 ==================== */
/* Hero: 猫のラインアート（写真は使えないので描き起こし） */
.fm-hero{ position:relative; }
.fm-hero__cat{ position:absolute; right:-6px; bottom:-8px; line-height:0; pointer-events:none; }
.fm-hero__cat svg{ width:118px; height:118px; }
.fm-hero__eyebrow, .fm-hero__title, .fm-hero__lead, .fm-hero__tasks{ position:relative; z-index:1; }
@media screen and (max-width:599px){
  .fm-hero__cat{ right:-10px; bottom:auto; top:6px; }
  .fm-hero__cat svg{ width:86px; height:86px; }
  .fm-hero__title, .fm-hero__lead{ max-width:calc(100% - 66px); }
}
@media screen and (min-width:1023px){
  .fm-hero__cat svg{ width:170px; height:170px; }
  .fm-hero__title, .fm-hero__lead{ max-width:32em; }
}

/* 404: トップへ戻る導線を主CTAとして見せる */
p.fm-404-home{ margin:18px 0 0; }
p.fm-404-home a{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:12px 26px; border-radius:var(--fm-radius-md);
  background:var(--fm-accent); color:#fff; font-weight:700; text-decoration:none;
}
p.fm-404-home a:hover{ background:var(--fm-accent-ink); }
p.fm-404-home a:focus-visible{ outline:3px solid var(--fm-focus-ring); outline-offset:2px; }


/* ==================== AAA r10 ==================== */
/* auto-phrase はカードの狭い桁では行長が痩せすぎるので見出し限定に戻す */
.entry-card-title, .fm-picks__title{ word-break:normal; }

/* トップへ戻るボタン: モバイルは下部バーの「トップ」と重複するので出さない。
   PCでは指差しアイコン（Cocoon既定）をやめてシェブロンにする。 */
@media screen and (max-width:834px){
  #go-to-top{ display:none !important; }
}
#go-to-top .go-to-top-button{ position:relative; }
#go-to-top .go-to-top-button .fa, #go-to-top .go-to-top-button span[class*="fa-"]{ visibility:hidden; }
#go-to-top .go-to-top-button::after{
  content:""; position:absolute; top:50%; left:50%; width:.5em; height:.5em;
  border-left:2px solid #FFFDF8; border-top:2px solid #FFFDF8;
  transform:translate(-50%,-30%) rotate(45deg);
}


/* ==================== AAA r11 : 人気記事ウィジェットとカテゴリラベル ==================== */
/* Cocoonの実セレクタは .ranking-visible .card-thumb::before （金#cca11f/灰#b1b1b3/銅#b37036） */
.widget-entry-cards.ranking-visible .card-thumb::before,
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before,
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before{
  background:var(--fm-brand); background-color:var(--fm-brand); color:#FFFDF8;
  width:24px; height:24px; line-height:24px; padding:0; margin:6px;
  border-radius:var(--fm-radius-pill); opacity:1; font-size:12px; font-weight:700;
  font-family:var(--fm-font-num);
}

/* タイトルを画像に黒グラデで被せるのをやめ、画像の下に置く */
.widget-entry-cards.large-thumb-on .card-content{
  position:static; width:auto; background:none; color:var(--fm-text-primary);
  padding:8px 2px 0; margin:0; text-shadow:none; transition:none;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover .card-content{ margin-bottom:0; opacity:1; }
.widget-entry-cards.large-thumb-on .a-wrap{ overflow:visible; }
.widget-entry-cards.large-thumb-on .a-wrap:hover{ opacity:1; }
.widget-entry-cards.large-thumb-on .card-title{ -webkit-line-clamp:3; font-size:.9rem; line-height:1.55; }

/* カテゴリーラベル（.cat-link）は本文色の黒箱だった */
.cat-link{
  background-color:var(--fm-tint-green); color:var(--fm-brand);
  border:1px solid var(--fm-border); border-radius:var(--fm-radius-pill);
  padding:4px 12px; font-weight:700; text-decoration:none;
}
.cat-link:hover{ opacity:1; background-color:var(--fm-surface-alt); }


/* ==================== AAA r12 : レガシー表のピンク地＋赤文字をブランド内に ==================== */
/* 旧エディタのインライン background-color:#fae8f9 / color:#ff0000 が残っていた */
.entry-content td[style*="background-color: #fae8f9"],
.entry-content th[style*="background-color: #fae8f9"]{
  background-color:var(--fm-tint-green) !important;
  vertical-align:middle; white-space:nowrap; width:1%; padding:10px 14px;
}
.entry-content table span[style*="color: #ff0000"],
.entry-content table span[style*="color:#ff0000"]{ color:var(--fm-brand) !important; }
.entry-content table td > p:first-child{ margin-top:0; }
.entry-content table td{ vertical-align:top; }

/* 本文中の赤文字全般もブランド内の強調色に（薬機法上も過剰な強調は避ける） */
.entry-content span[style*="color: #ff0000"],
.entry-content span[style*="color:#ff0000"]{ color:var(--fm-accent-ink) !important; }


/* ==================== AAA r13 : critic round-4 致命的項目 ==================== */

/* 猫のラインアート: すべての幅で右上に固定し、タスクタイルと衝突させない */
.fm-hero__cat{ top:12px; right:14px; bottom:auto; }
.fm-hero__cat svg{ width:92px; height:92px; }
@media screen and (max-width:599px){
  .fm-hero__cat{ top:8px; right:8px; }
  .fm-hero__cat svg{ width:74px; height:74px; }
  .fm-hero__title, .fm-hero__lead{ max-width:calc(100% - 78px); }
}
@media screen and (min-width:600px){
  .fm-hero__title, .fm-hero__lead{ max-width:min(32em, calc(100% - 120px)); }
}
@media screen and (min-width:1023px){
  .fm-hero__cat svg{ width:118px; height:118px; }
}

/* サムネに重なるCocoonのカテゴリーラベルは全廃止（猫の顔を覚っていた） */
.cat-label, .widget-entry-card-thumb .cat-label, .related-entry-card-thumb .cat-label,
.popular-entry-card-thumb .cat-label, .card-thumb .cat-label{ display:none !important; }

/* 前後記事ナビ: 継承された高さで200pxの空白ができていた */
.pager-post-navi a{ min-height:0; height:auto; }
.pager-post-navi a figure, .pager-post-navi .card-thumb{ min-height:0; }
.pager-post-navi .prev-post-title, .pager-post-navi .next-post-title{ font-size:.9rem; line-height:1.55; }
.pager-post-navi .iconfont{ font-size:1.1rem; color:var(--fm-primary); }

/* レガシー表の本文セルに寒色(#FAFBFD等)が混じっていた */
.entry-content table td{ background-color:var(--fm-surface); padding:10px 14px; }
.entry-content td[style*="background-color: #fae8f9"],
.entry-content th[style*="background-color: #fae8f9"]{ background-color:var(--fm-tint-green) !important; }

/* 一覧のサムネをやめ、タイポ主体のカードにする。
   素材494枚が全て400px級の低解像度フリー素材（肉球・ピンク・広告写真・
   いらすとや風が同一画面に並ぶ）で、額装では不統一を隠せないと判断。
   → 1行で戻せる。キュレーションした「まず読みたい3記事」と関連記事は画像を残す。 */
#list .entry-card-thumb{ display:none; }
#list .entry-card-content{ margin-left:0; width:auto; }
#list .entry-card{ display:block; }
#list .entry-card-title{ font-size:1.02rem; line-height:1.6; -webkit-line-clamp:3; }
@media screen and (min-width:1023px){
  .list .entry-card{ display:block; }
  .list .entry-card-content{ margin:0; width:auto; }
}


/* ==================== AAA r14 : critic round-5 致命的項目 ==================== */

/* C1/C2/C4: サムネ廃止を全モジュールに拡張。
   【判断】低解像度・いらすとや風・ピンク・広告写真が混在する494枚を部分的に残すと
   「最悪の数枚だけが拡大表示される」逆効果になるため、一覧系は全面でテキスト主体にする。 */
.widget-entry-cards .card-thumb,
.related-entry-card-thumb, .related-entry-cards .card-thumb,
.pager-post-navi .card-thumb, .pager-post-navi figure,
.fm-picks__thumb{ display:none !important; }
.widget-entry-cards.card-large-image .a-wrap{ max-width:none; }
.widget-entry-card-content, .related-entry-card-content{ margin-left:0 !important; width:auto !important; }

/* 人気記事: 順位を番号バッジとしてテキストの左に置く（画像に重ならない） */
.widget-entry-cards.ranking-visible .a-wrap{ display:flex; align-items:baseline; gap:10px; }
.widget-entry-cards.ranking-visible .a-wrap::before{
  content:counter(p-rank); counter-increment:none; flex:0 0 auto;
  width:22px; height:22px; line-height:22px; text-align:center;
  background:var(--fm-brand); color:#FFFDF8; border-radius:var(--fm-radius-pill);
  font-size:12px; font-weight:700; font-family:var(--fm-font-num);
}

/* picks: 画像なしのカードとして成立させる */
.fm-picks__list a{ flex-direction:column; align-items:flex-start; gap:8px; }
.fm-picks__title{ font-size:1.05rem; }

/* C3: 前後記事ナビの空白。箱の高さ自体が259pxで固定されていた */
.pager-post-navi a{ min-height:0 !important; height:auto !important; padding:14px 16px; }
.pager-post-navi a .card-content, .pager-post-navi a .card-title{ min-height:0 !important; height:auto !important; }
.pager-post-navi{ align-items:stretch; }

/* C5: カテゴリー説明内のリンクが未スタイルの青(#2D50B4)だった */
.famimon-pillar a, .archive-title + * a, .category-content a, .entry-content a:not(.fm-cta):not(.fm-badge){
  color:var(--fm-primary); text-decoration:underline; text-underline-offset:2px;
}
.famimon-pillar a:hover, .entry-content a:hover{ color:var(--fm-brand); }

/* C6: カテゴリー一覧で自分のカテゴリー名バッジを10回反復していた */
body.category #list .fm-badge--cat{ display:none; }

/* 404: 本文に検索+カテゴリーがあるのにサイドバーでも重複し、下に400pxの空白がでていた */
body.error404 #sidebar{ display:none; }
body.error404 #main, body.error404 .main{ width:100%; max-width:100%; float:none; }
p.fm-404-home a{ width:100%; max-width:340px; }


/* ==================== AAA r15 ==================== */
/* 前後記事ナビの200px空白の真因: Cocoonの .pager-post-navi は flex-direction:column なので
   私が入れた flex:1 1 260px が「高さ260px」として効いていた。row にする。 */
.pager-post-navi{ flex-direction:row; flex-wrap:wrap; align-items:stretch; }
.pager-post-navi a{ flex:1 1 240px; }
@media screen and (max-width:599px){
  .pager-post-navi{ flex-direction:column; }
  .pager-post-navi a{ flex:0 0 auto; }
}


/* ==================== AAA r16 : 一覧カードの選択材料 ==================== */
/* サムネを廃止したので、代わりに1行抽粋を見せる（タイトルだけでは選べない） */
.entry-card-snippet.e-card-snippet{ display:block; }
#list .entry-card-snippet{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  margin:6px 0 0; font-size:.85rem; line-height:1.75; color:var(--fm-text-secondary);
}
#list .entry-card-title{ font-size:1.08rem; }
/* バッジ位置を全モジュールでタイトルの上に揃える */
#list .entry-card-content{ display:flex; flex-direction:column; align-items:flex-start; }
#list .fm-badge--cat{ order:-1; margin:0 0 8px; }
#list .entry-card-title{ order:0; }
#list .entry-card-snippet{ order:1; }


/* ==================== AAA r17 : critic round-6 致命的項目 ==================== */

/* 致1: カテゴリ一覧のカードでタイトル・抽粋に下線が継承されていた（抽粋は緑の下線） */
.entry-card-wrap, .entry-card-wrap:hover,
#list a.entry-card-wrap, #list a.entry-card-wrap *{ text-decoration:none !important; }
#list .entry-card-title, #list .entry-card-snippet{ text-decoration:none !important; }

/* 致2: 関連記事が1行のタイトルに対し約79pxの箱になっていた。
   サムネと抽粋を消したあとの高さを残さない。同時にリンクだと分かる手がかりを与える。 */
.related-list{ display:grid; gap:8px; }
.related-entry-card-wrap, .related-list .a-wrap{
  min-height:0 !important; height:auto !important; margin:0 !important; padding:12px 14px !important;
  border:1px solid var(--fm-border); border-radius:var(--fm-radius-md); background:var(--fm-surface);
  display:block;
}
.related-entry-card-wrap:hover{ border-color:var(--fm-primary); }
.related-entry-card, .related-entry-card-content{ min-height:0 !important; height:auto !important; margin:0 !important; }
.related-entry-card-title{ color:var(--fm-primary); font-size:.95rem; line-height:1.55; margin:0; }
.related-entry-card-wrap:hover .related-entry-card-title{ color:var(--fm-brand); }

/* 致5隣接: コメント欄を閉じるまでの間、送信ボタンがサイト最大のCTAにならないように */
#comment-area .submit{ background:var(--fm-surface-alt); color:var(--fm-text-primary); border:1px solid var(--fm-border-strong); font-weight:400; }

/* 更新日は全記事一括再保存の日付(2026.08.13)になっているので表示しない。 */
/* 実際の執筆日でない日付を出すのはYMYL隣接領域での信頼を損なう。 */
.post-update, .entry-date + .post-update, .date-tags .post-update{ display:none !important; }

/* しやすい改善: picks の下端揃え / レールの右フェード強化 / フッター区切り線 / 404検索アイコン */
ul.fm-picks__list{ align-items:stretch; }
ul.fm-picks__list > li{ display:flex; }
.fm-picks__list a{ width:100%; }
@media screen and (max-width:834px){
  #navi::after{ width:34px; background:linear-gradient(to left, var(--fm-bg) 40%, rgba(244,241,234,0)); }
}
.menu-footer li:first-child a, .menu-footer li:first-child{ border-left:0 !important; }
.menu-footer li:last-child a, .menu-footer li:last-child{ border-right:0 !important; }
.search-box .search-submit{ top:50% !important; transform:translateY(-50%) !important; bottom:auto !important; }

/* レガシー表: 全太字を解除し、箱をシステムの角丸に揃える */
.entry-content table{ border-radius:var(--fm-radius-md); overflow:hidden; }
.entry-content table td strong, .entry-content table td b{ font-weight:400; }
.entry-content table td span strong{ font-weight:700; }


/* ==================== AAA r18 : critic round-7 致命的項目 ==================== */

/* 致A: 関連記事カード内に Cocoon 由来の未リセット余白(21.6px)が残っていた */
.related-entry-card-wrap, .related-list .a-wrap{ padding:10px 14px !important; }
.related-entry-card-content, .related-list .card-content{ padding:0 !important; margin:0 !important; min-height:0 !important; }
.related-entry-card, .related-list .e-card{ padding:0 !important; margin:0 !important; min-height:0 !important; }
.related-entry-card-thumb{ margin:0 !important; }
.related-entry-card-title{ margin:0 !important; }

/* 致B: カテゴリー説明を折りたたみ、記事一覧へのアンカーを先頭に置く */
p.fm-pillar-jump{ margin:0 0 16px; }
p.fm-pillar-jump a{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:10px 20px;
  background:var(--fm-brand); color:#FFFDF8 !important; border-radius:var(--fm-radius-md);
  font-weight:700; text-decoration:none !important;
}
p.fm-pillar-jump a::after{ content:""; width:.42em; height:.42em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
details.fm-pillar-details{ margin:0 0 var(--fm-space-6); border:1px solid var(--fm-border); border-radius:var(--fm-radius-lg); background:var(--fm-surface); padding:0 18px; }
details.fm-pillar-details > summary{
  list-style:none; cursor:pointer; min-height:52px; display:flex; align-items:center;
  justify-content:space-between; gap:10px; margin:0 -18px; padding:14px 18px;
  font-weight:700; color:var(--fm-text-primary);
}
details.fm-pillar-details > summary::-webkit-details-marker{ display:none; }
details.fm-pillar-details > summary::after{ content:""; width:.5em; height:.5em; flex:0 0 auto; border-right:2px solid var(--fm-primary); border-bottom:2px solid var(--fm-primary); transform:rotate(45deg) translateY(-2px); }
details.fm-pillar-details[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); }
details.fm-pillar-details[open] > summary{ border-bottom:1px solid var(--fm-border); }
details.fm-pillar-details > *:last-child{ margin-bottom:18px; }

/* 致C: カテゴリー説明の見出しが本文の1.08倍しかなく階層がなかった */
.famimon-pillar h2{ font-size:1.5rem; line-height:1.5; margin:1.8em 0 .7em; }
.famimon-pillar h3{ font-size:1.2rem; line-height:1.55; margin:1.6em 0 .6em; }

/* 致D: 致4の副作用でモバイルに人気記事・カテゴリー・検索・編集部情報が消えていた */
@media screen and (max-width:834px){
  #sidebar{ display:block !important; float:none; width:100%; margin:var(--fm-space-8) 0 0; padding:0; }
  #sidebar .widget{ margin:0 0 var(--fm-space-5); }
}

/* 主張と実態の乖離を潰す */
/* 比較表の1文字改行は th でなく td だった */
.entry-content table td:first-child{ white-space:nowrap; }
/* 404 の検索アイコンと行長 */
.fm-404-tools .search-box, .fm-404-tools .search-edit{ max-width:44em; }
body.error404 .entry-content > p{ max-width:44em; }
body.error404 .search-submit{ top:50% !important; transform:translateY(-50%) !important; bottom:auto !important; }
/* 関連記事見出しが h1 を超えていた（24px > 22px） */
.related-entry-heading, .related-list-title{ font-size:1.2rem; display:flex; align-items:center; gap:9px; }
.related-entry-heading::before, .related-list-title::before{ content:""; width:5px; height:1.1em; border-radius:3px; background:var(--fm-brand); flex:0 0 auto; }
/* 目次の空箱と「開く」のボタン化 */
#toc.toc{ padding:10px 14px; }
#toc .toc-title{ display:flex; align-items:center; gap:10px; }
#toc .toc-title::after{ content:""; }
#toc .toc-checkbox + .toc-title .toc-center{ margin:0; }
/* 人気記事タイトルもリンク色に（黒/緑無下線/緑下線の三重基準を解消） */
.widget-entry-card-title, .popular-entry-card-title{ color:var(--fm-primary); }
/* go-to-top がサイドバー本文に重なっていた */
@media screen and (min-width:1023px){ #go-to-top{ right:8px; bottom:8px; } }
/* モバイルメニューにも policy/contact を出さない */
#navi .navi-in>ul.menu-mobile>li:has(> a[href*="/policy"]),
#navi .navi-in>ul.menu-mobile>li:has(> a[href*="/contact"]){ display:none; }
/* 768 のカテゴリータイルは2列に */
@media screen and (min-width:600px) and (max-width:900px){ ul.fm-cats__grid > li{ flex:1 1 44%; } }


/* ==================== AAA r19 : critic round-8 ==================== */

/* 新致E【自分が作った退行】#sidebar 全体を sticky にしたため、高1,525px がビューポート800pxに
   固着し、下半の「よく読まれている記事」がスクロール範囲の96%で画面に入らなくなっていた。
   ビューポートを超える高さの要素を固着させない。同時に人気記事を上位に並べ直して
   読者の目に入る位置に移す。 */
@media screen and (min-width:1023px){
  #sidebar{ position:static; top:auto; }
  #sidebar{ display:flex; flex-direction:column; }
  #sidebar .widget_search{ order:0; }
  #sidebar .widget_popular_entries{ order:1; }
  #sidebar .widget_categories{ order:2; }
  #sidebar .widget_text{ order:3; }
}

/* 関連記事をデスクトップで2列に（1列8ばで横の充填率59%だった） */
@media screen and (min-width:1023px){
  .related-list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* 404 の検索ボタン: absolute の top が Cocoon 側で固定されていたので高さ100%で中心を揃える */
.fm-404-tools .search-box .search-submit{
  top:0 !important; bottom:0 !important; height:100% !important;
  display:flex !important; align-items:center; justify-content:center;
}

/* ドロワーメニュー（下部バーの「メニュー」）にも規約系を出さない */
.menu-drawer li:has(> a[href*="/policy"]),
.menu-drawer li:has(> a[href*="/contact"]){ display:none; }

/* 目次に開閉の手がかりを与える（::after が0pxの残骸だった） */
#toc .toc-title{ justify-content:space-between; cursor:pointer; }
#toc .toc-title::after{
  content:"" !important; width:.5em; height:.5em; flex:0 0 auto;
  border-right:2px solid var(--fm-primary); border-bottom:2px solid var(--fm-primary);
  transform:rotate(45deg) translateY(-2px); transition:transform var(--fm-dur-base) var(--fm-ease);
}
#toc .toc-checkbox:checked + .toc-title::after{ transform:rotate(-135deg) translateY(-2px); }

/* 前後記事: タイトル色をブランドに、左端を揃える */
.pager-post-navi .prev-post-title, .pager-post-navi .next-post-title{ color:var(--fm-primary); }
.pager-post-navi a.next-post{ flex-direction:row; }
.pager-post-navi a.next-post .next-post-title{ margin-left:10px; margin-right:0; }
.pager-post-navi a{ justify-content:flex-start; }

/* カテゴリータイルの寸法を揃える（1グリッド内2種の寸法になっていた） */
ul.fm-cats__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); }
ul.fm-cats__grid > li{ flex:none; }
@media screen and (min-width:1023px){ ul.fm-cats__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
ul.fm-cats__grid > li:last-child:nth-child(odd){ grid-column:1 / -1; }
@media screen and (min-width:1023px){ ul.fm-cats__grid > li:last-child:nth-child(odd){ grid-column:auto; } }


/* ==================== AAA r20 ==================== */
/* 404の検索ボタン: 包含ブロック(77px)でなく入力欄(48px)に揃える */
.fm-404-tools .search-box .search-submit{
  top:0 !important; bottom:auto !important; height:48px !important;
  display:flex !important; align-items:center; justify-content:center;
}


/* r20 修正: 以前の transform:translateY(-50%) が残り24px上にずれていたので打ち消す */
.fm-404-tools .search-box .search-submit{ transform:none !important; }


/* ==================== AAA r22 : イラストを一覧サムネとして復活 ==================== */
/* 旧素材（低解像度・画風深在）を非表示にし、代わりにカテゴリー別SVGを背景で当てる。
   SVGなのでどの倍率でも輪郭が崩れず、追加の画像リクエストも0件。 */
#list .entry-card-thumb{
  display:block; width:112px; flex:0 0 112px; aspect-ratio:16/9;
  background-repeat:no-repeat; background-position:center; background-size:cover;
  border:1px solid var(--fm-border); border-radius:var(--fm-radius-sm); overflow:hidden;
  margin:0 14px 0 0;
}
#list .entry-card-thumb img{ display:none; }
#list .entry-card{ display:flex; align-items:flex-start; }
#list .entry-card-content{ flex:1 1 auto; min-width:0; }
@media screen and (min-width:600px){
  #list .entry-card-thumb{ width:150px; flex:0 0 150px; }
}

/* トップのカテゴリータイルに小さく添える */
.fm-cats__ic{ display:block; flex:0 0 auto; border-radius:6px; background:var(--fm-tint-green); }
.fm-cats__grid a{ position:relative; }
.fm-cats__head{ display:flex; align-items:center; gap:10px; }

/* 404 のイラスト */
.fm-404-art{ display:block; margin:0 0 6px; }

/* 記事ヘッダー画像（生成カード） */
.eye-catch-wrap, .entry-content > .eye-catch{ margin:0 0 var(--fm-space-6); }
.eye-catch img, .eye-catch-wrap img{ border-radius:var(--fm-radius-md); display:block; width:100%; height:auto; }


/* ==================== AAA r23 : インラインSVGサムネの仕上げ ==================== */
#list .entry-card-thumb{ background-image:none !important; }
#list .entry-card-thumb svg.fm-thumb-svg{ display:block; width:100%; height:100%; }
#list .entry-card-thumb{ display:block; overflow:hidden; }
.fm-thumb-svg{ display:block; width:100%; height:auto; }

/* 関連記事・人気記事・前後記事は引き続きテキスト主体（SVGも出さない） */
.widget-entry-cards .card-thumb svg, .related-entry-card-thumb svg,
.pager-post-navi .card-thumb svg{ display:none !important; }


/* ==================== AAA r24 : タイルアイコン / 404 / 額の比率 ==================== */
/* イラストはviewBox 4:3なので額も 4:3 にして余白をなくす */
#list .entry-card-thumb{ aspect-ratio:4/3; }

/* カテゴリータイル: アイコンと名前を横に並べる */
.fm-cats__grid a{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:10px; row-gap:2px; align-items:center; }
.fm-cats__ic{ grid-row:1 / span 2; align-self:center; }
.fm-cats__name{ grid-column:2; align-self:end; }
.fm-cats__d{ grid-column:2; align-self:start; }

/* 404 のイラスト */
svg.fm-404-art{ display:block; margin:0 0 10px -6px; }


/* ==================== AAA r25 : タイルは縦積みに戻す ==================== */
.fm-cats__grid a{ display:flex !important; flex-direction:column; align-items:flex-start; gap:4px; }
.fm-cats__ic{ margin:0 0 4px; }
.fm-cats__name, .fm-cats__d{ grid-column:auto; align-self:auto; }


/* ==================== AAA r26 : 記事のヘッダー帯 ==================== */
.fm-arthero{
  display:flex; align-items:center; justify-content:center;
  background:var(--fm-tint-green); border-radius:var(--fm-radius-lg);
  margin:0 0 var(--fm-space-6); padding:14px 0; overflow:hidden;
}
.fm-arthero__art{ display:block; width:auto; height:132px; }
@media screen and (min-width:600px){ .fm-arthero__art{ height:168px; } }