@charset "UTF-8";

/*!
Theme Name: SUBFUL
Description: SUBFUL独自テーマ（Cocoonから独立。デザインは2026-07リニューアル版を継承）
Author: SUBFUL
Version: 1.0.0
Text Domain: subful
*/

/************************************************************************
** ベースリセット・レイアウト（独自テーマ用の最小限。Cocoon本体が
** 提供していた共通レイアウトの代替。デザイントークンや配色は
** 下部の「SUBFUL リニューアル」ブロックに合わせている）
************************************************************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: none;
}

a {
  color: var(--sf-accent, #3b7dd8);
}

ul, ol {
  margin: 0;
  padding: 0;
}

/* 本文の標準リスト。全体リセットでマーカーとインデントまで消さない。 */
.article .entry-content > ul,
.article .entry-content > ol {
  margin: 1em 0 1.2em;
  padding-left: 1.7em;
}

.article .entry-content > ul {
  list-style: disc;
}

.article .entry-content > ol {
  list-style: decimal;
}

.article .entry-content > ul > li,
.article .entry-content > ol > li {
  margin: 0.35em 0;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 1em;
}

/* ===== 全体レイアウト（ヘッダー／メイン／サイドバー／フッター） ===== */
#content {
  display: block;
}

/* #content-in は常に .sf-inner の内側にあり、左右余白と最大幅は
   .sf-inner が持つ。ここで padding/max-width を重ねると
   ヘッダー・パンくずより 20px 内側にずれるため持たせない。 */
#content-in {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  box-sizing: border-box;
}

.container,
#content-in {
  width: 100%;
}

.main {
  flex: 1;
  min-width: 0;
}

/* メインとサイドバーの開始位置（上端）を揃える。
   パンくずは .main の外（#content-in の上）へ出すため、
   両カラムとも #content-in の上端＝コンテンツ開始位置から始まる。 */
#content-in {
  padding-top: 24px;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
}

body.no-sidebar #content-in,
body.front-top-page #content-in {
  display: block;
}

body.no-sidebar .main,
body.front-top-page .main {
  width: 100%;
}

body.no-sidebar .sidebar,
body.front-top-page .sidebar {
  display: none;
}

.article {
  background-color: var(--sf-white, #fff);
  border-radius: var(--sf-radius-l, 24px);
  padding: 32px;
  margin: 0 0 40px;
}


.article .article-eye-catch,
.article .eye-catch {
  margin-bottom: 24px;
}

.article p {
  line-height: 1.9;
}

/* Cocoon標準の記事カードグリッド（カテゴリ一覧・トップ人気カテゴリ等）
   最低限のレイアウトのみ提供。装飾は下部の.sf-*ブロックで上書きされる */
#list.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード系リンクの共通土台（entry-card-wrap / related-entry-card-wrap 等が
   共通で持つ .a-wrap クラス）。旧テーマでは46行目にあり、記事内のカード
   （関連記事・エントリーカード）のリンク色・下線をリセットしていた。
   これが無いとタイトルがブラウザデフォルトのリンク色のまま残る */
.a-wrap {
  text-decoration: none;
  display: block;
  color: var(--sf-text, #1f2d3d);
}

#list.list .entry-card-wrap {
  display: block;
  text-decoration: none;
}

.entry-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--sf-radius-m, 16px) var(--sf-radius-m, 16px) 0 0;
  position: relative;
}

.entry-card-thumb img,
.entry-card-thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.entry-card-title,
.related-entry-card-title {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 8px;
  font-weight: bold;
  color: var(--sf-text, #1f2d3d);
}

/* 関連記事カード（single.php下部）: entry-card-* と同じ見た目にする */
.related-entry-card-wrap {
  background-color: var(--sf-white, #fff);
  border: 1px solid var(--sf-border, #dce8f4);
  border-radius: var(--sf-radius-m, 16px);
  overflow: hidden;
}

.related-entry-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.related-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-entry-card-content {
  display: block;
  padding: 16px;
}

.entry-card-meta {
  font-size: 12px;
  color: var(--sf-text-sub, #5c6b7a);
}

.cat-label {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
}

/* パンくず（inc/breadcrumbs.php が出力する構造） */
#breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

#breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#breadcrumb li:not(:last-child)::after {
  content: "\203A";
  margin-left: 4px;
  color: var(--sf-text-sub, #5c6b7a);
}

#breadcrumb a {
  text-decoration: none;
}

/* 目次（inc/toc.php が出力する構造。Cocoon標準の .toc .toc-title .toc-content .toc-list を再現） */
.toc {
  display: block;
}

.toc .toc-list {
  margin: 0;
  padding: 0;
}

/* サイドバーウィジェット共通 */
.widget {
  margin-bottom: 20px;
}

.widget ul {
  list-style: none;
}

.search-box {
  display: flex;
}

.search-box .search-edit {
  flex: 1;
}

/* 関連記事見出し */
.related-entry-heading {
  padding: 12px 16px;
  margin-bottom: 16px;
}

.related-entry-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 関連記事カードの下端。フッター上の余白は .footer-container の
   margin-top が担うため、ここでは持たせない（二重余白の回避）。 */
.under-entry-content {
  margin-bottom: 0;
}

/* フッター最小レイアウト */
.footer-container {
  padding: 32px 0;
  margin-top: 60px;
}

.footer-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}

.navi-footer-in .menu-footer {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 0;
}

/* ヘッダー最小レイアウト（Cocoon標準の #header-container / .header-container-in を再現） */
#header-container {
  position: relative;
}

.header-container-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.hlt-top-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.logo-header {
  display: flex;
  align-items: center;
}

#navi {
  width: 100%;
}

#navi-in {
  display: flex;
}

#navi-in > ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

/* SPハンバーガーメニューボタン（PCでは非表示） */
#sf-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.sf-nav-toggle-bar,
.sf-nav-toggle-bar::before,
.sf-nav-toggle-bar::after {
  content: "";
  display: block;
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background-color: var(--sf-text, #1f2d3d);
  transition: transform 0.2s ease;
}

.sf-nav-toggle-bar {
  top: 19px;
}

.sf-nav-toggle-bar::before {
  top: -8px;
  left: 0;
  right: 0;
}

.sf-nav-toggle-bar::after {
  top: 8px;
  left: 0;
  right: 0;
}

body.sf-nav-open .sf-nav-toggle-bar {
  background-color: transparent;
}

body.sf-nav-open .sf-nav-toggle-bar::before {
  transform: translateY(8px) rotate(45deg);
}

body.sf-nav-open .sf-nav-toggle-bar::after {
  transform: translateY(-8px) rotate(-45deg);
}

@media screen and (max-width: 900px) {
  #content-in {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  #list.list,
  .related-entry-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .article {
    padding: 20px;
    border-radius: var(--sf-radius-m, 16px);
  }

  .hlt-top-menu {
    flex-wrap: wrap;
  }

  #sf-nav-toggle {
    display: block;
  }

  #navi {
    width: 100%;
    display: none;
  }

  body.sf-nav-open #navi {
    display: block;
  }

  #navi-in > ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0 16px;
  }

  #navi-in > ul > li {
    border-top: 1px solid var(--sf-border, #dce8f4);
  }

  #navi-in > ul > li > a {
    display: block;
    padding: 14px 4px;
  }
}

@media screen and (max-width: 480px) {
  #list.list,
  .related-entry-cards {
    grid-template-columns: 1fr;
  }
}

/************************************************************************
** SUBFUL リニューアル（2026-07 / Version 2.0.0）
** ここから下は新デザイン用の追記スタイル。
** 上部の既存ルールは記事内装飾クラス（simplebox/kuchikomi/meritbox等）
** の互換維持のため残し、カスケードで本ブロックの指定を優先させている。
************************************************************************/

/* ===== デザイントークン ===== */
:root {
  --sf-bg: #f0f6fb;
  --sf-white: #ffffff;
  --sf-accent: #3b7dd8;
  --sf-accent-dark: #2f66b3;
  --sf-accent-light: #eaf3fc;
  --sf-cream: #fdf6e3;
  --sf-text: #1f2d3d;
  --sf-text-sub: #5c6b7a;
  --sf-border: #dce8f4;
  --sf-radius-l: 24px;
  --sf-radius-m: 16px;
  --sf-radius-s: 10px;
}

/* ===== 全体共通 ===== */
body {
  background-color: var(--sf-bg);
  color: var(--sf-text);
}

#content {
  background-color: var(--sf-bg);
}

.sf-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 波モチーフ（見出し脇の装飾。SVGスプライトをbackgroundで表示） */
.sf-wave {
  display: inline-block;
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--sf-accent);
  vertical-align: middle;
}

/* ===== ヘッダー（グローバル：全ページ共通） ===== */
#header-container {
  background-color: var(--sf-white);
  border-bottom: 1px solid var(--sf-border);
  box-shadow: none;
}

.logo-image a,
.logo-header a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

/* ロゴ：SFマーク＋ワードマーク＋タグラインの一体型ロゴ画像。
   サイト名・サブキャッチは画像に含まれるためテキストは併記しない。
   縦横比 2148:731（約2.94:1）を高さ基準で保持する。 */
.logo-header .sf-logo-image {
  height: 48px;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
}

@media screen and (max-width: 900px) {
  .logo-header .sf-logo-image {
    height: 32px;
  }
}

@media screen and (max-width: 480px) {
  .logo-header .sf-logo-image {
    height: 26px;
  }
}

.site-name-link,
.site-name a {
  color: var(--sf-text);
  font-weight: bold;
  letter-spacing: 0.03em;
}

.header-in,
.navi-in {
  max-width: 1180px;
}

/* トップメニューレイアウト（親テーマ.hlt-top-menuのflexを踏襲）：
   横幅をカンプ準拠のコンテナ幅に揃え、左右余白を付け、
   ロゴ／ナビ／CTAボタンを横一列に並べる */
.header-container-in.hlt-top-menu {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-container-in.hlt-top-menu .navi {
  border-bottom: none;
  flex: 1;
  width: auto;
}

/* グローバルナビ（Cocoon標準メニュー） */
#navi {
  background-color: var(--sf-white);
  border-top: none;
  border-bottom: none;
}

#navi-in a {
  color: var(--sf-text);
  font-weight: 500;
}

#navi-in > ul > li.menu-item > a:hover,
#navi a:hover {
  color: var(--sf-accent);
}

/* ヘッダー右の黄色CTAボタン（カンプ準拠：トップPC.png ヘッダー右） */
.header-diagnosis-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background-color: #fdae04;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}

.header-diagnosis-btn:after {
  content: "\203a";
}

.header-diagnosis-btn:hover {
  background-color: #e69d00;
  color: #fff;
}

@media screen and (max-width: 900px) {
  .header-diagnosis-btn {
    display: none;
  }
}

/* ===== フッター ===== */
#footer.footer-container,
.footer-container {
  background-color: var(--sf-white);
  border-top: 1px solid var(--sf-border);
}

.footer-bottom-logo .logo-footer {
  height: 32px;
  width: auto;
  max-width: 100%;
}

.navi-footer-in .menu-footer a {
  color: var(--sf-text-sub);
}

.source-org.copyright {
  color: var(--sf-text-sub);
  font-size: 12px;
}

/* SPの下部固定メニューボタン（ホーム/検索/トップ等）もトーンを合わせる */
.mobile-menu-buttons {
  background-color: var(--sf-white);
  border-top: 1px solid var(--sf-border);
}

.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-button > label {
  color: var(--sf-text);
}

/************************************************************************
** front-page.php 専用スタイル（トップページ）
************************************************************************/

/* カンプのトップは1カラム全幅。front-page.php独自マークアップのため
   get_sidebar()の出力を止められず、CSSでサイドバーを非表示にしてメインを
   全幅にする（Cocoon標準の.no-sidebar .content .mainと同じ考え方） */
body.front-top-page #sidebar {
  display: none;
}

body.front-top-page #content-in {
  display: block;
}

body.front-top-page .main {
  width: 100%;
  margin: 0;
  padding: 0;
}

.sf-front {
  background-color: var(--sf-bg);
}

/* 親テーマのデフォルトリンク色/下線がsf-*要素に漏れないよう明示的に解除 */
.sf-front a {
  text-decoration: none;
}

.sf-category-item,
.sf-popular-cat-card,
.sf-ranking-item {
  color: var(--sf-text);
}

.sf-category-item:hover,
.sf-popular-cat-card:hover,
.sf-ranking-item:hover {
  color: var(--sf-text);
}

/* --- ヒーロー --- */
.sf-hero {
  padding: 64px 0 72px;
  background-color: var(--sf-accent-light);
}

.sf-hero-inner {
  max-width: 1180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.sf-hero-text {
  max-width: 620px;
  flex: 1;
}

.sf-hero-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sf-accent);
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 16px;
}

.sf-hero-title {
  font-size: 44px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  color: var(--sf-text);
}

.sf-hero-title .sf-marker {
  background: linear-gradient(transparent 68%, var(--sf-cream) 68%);
}

.sf-hero-desc {
  font-size: 15px;
  line-height: 1.9;
  color: var(--sf-text-sub);
  margin-bottom: 28px;
}

.sf-hero-search {
  max-width: 480px;
}

.sf-hero-search form.search-box {
  display: flex;
  align-items: center;
  background: var(--sf-white);
  border-radius: 32px;
  border: 1px solid var(--sf-border);
  overflow: hidden;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 4px 12px rgba(59, 125, 216, 0.08);
}

.sf-hero-search .search-edit {
  flex: 1;
  border: none;
  padding: 12px 4px;
  font-size: 15px;
  background: transparent;
  width: auto;
}

.sf-hero-search .search-edit:focus {
  outline: none;
}

.sf-hero-search .search-submit {
  background-color: var(--sf-accent-dark);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.sf-hero-search .search-submit .fa,
.sidebar .search-box .search-submit .fa {
  margin: 0;
  line-height: 1;
}

/* ヒーロー右側イラスト：アセット未着手のため画像スロット（プレースホルダ） */
.sf-hero-visual {
  flex-shrink: 0;
  width: 420px;
  max-width: 45%;
}

.sf-hero-visual-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-l);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-accent);
  font-size: 13px;
  text-align: center;
  overflow: hidden;
}

.sf-hero-visual-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sf-hero-visual-slot .sf-slot-label {
  padding: 12px;
  line-height: 1.6;
}

/* --- 共通セクション枠 --- */
.sf-section {
  max-width: 1180px;
  margin: 0 auto 32px;
  padding: 32px 28px;
  background-color: var(--sf-white);
  border-radius: var(--sf-radius-l);
}

.sf-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
}

.sf-section-more {
  font-size: 14px;
  color: var(--sf-accent);
  font-weight: 500;
}

.sf-section-more:after {
  content: "\203A";
  margin-left: 4px;
}

/* --- カテゴリから探す ---
   カンプはPC6枠を程よい間隔で中央に詰めて配置（全幅を等分するグリッドでは
   間隔が間延びする）。アイテムを固定幅にしflexで中央寄せに詰めることで、
   実データが6件未満でも同じ間隔感を保つ。 */
.sf-category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 40px;
}

.sf-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 96px;
  color: var(--sf-text);
}

.sf-category-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--sf-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-category-icon img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  max-width: none;
}

.sf-category-name {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
}

.sf-category-name small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sf-text-sub);
  margin-top: 2px;
}

.sf-section-foot {
  text-align: center;
  margin-top: 24px;
}

/* --- 人気のカテゴリ ---
   カンプはPC4列グリッド固定。実データが4件未満でも列数は変えず、
   カード比率をカンプ通りに保つ（左詰めで配置し、余りは自然に空ける）。 */
.sf-popular-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.sf-popular-cat-card {
  display: block;
  color: var(--sf-text);
  border-radius: var(--sf-radius-m);
  overflow: hidden;
  background-color: var(--sf-white);
  border: 1px solid var(--sf-border);
}

.sf-popular-cat-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--sf-accent-light);
}

.sf-popular-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-popular-cat-body {
  display: block;
  padding: 14px 16px 18px;
}

.sf-popular-cat-name {
  display: block;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.sf-popular-cat-sub {
  display: block;
  font-size: 12px;
  color: var(--sf-text-sub);
  margin-bottom: 10px;
}

.sf-popular-cat-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.sf-popular-cat-count .sf-count-num {
  font-size: 26px;
  font-weight: bold;
  color: var(--sf-accent);
}

.sf-popular-cat-count .sf-count-unit {
  font-size: 14px;
  font-weight: bold;
  color: var(--sf-accent);
  margin-left: 2px;
}

.sf-popular-cat-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--sf-accent);
  color: var(--sf-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* --- 人気記事ランキング --- */
.sf-ranking-list {
  display: flex;
  flex-direction: column;
}

.sf-ranking-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--sf-border);
  color: var(--sf-text);
}

.sf-ranking-item:last-child {
  border-bottom: none;
}

.sf-ranking-num {
  width: 40px;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: bold;
  color: var(--sf-accent);
  text-align: center;
}

.sf-ranking-thumb {
  width: 80px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  border-radius: var(--sf-radius-s);
  overflow: hidden;
  background-color: var(--sf-accent-light);
}

.sf-ranking-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-ranking-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sf-ranking-cat {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: bold;
  color: var(--sf-accent);
  background-color: var(--sf-accent-light);
  border-radius: 999px;
  padding: 4px 12px;
}

.sf-ranking-date {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--sf-text-sub);
  width: 90px;
}

.sf-ranking-arrow {
  flex-shrink: 0;
  color: var(--sf-accent);
}

/* --- 診断CTA帯（トップ最下部／カテゴリトップ・運営者情報の共通パーツ末尾に配置） --- */
.sf-diag-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--sf-cream);
  border-radius: var(--sf-radius-l);
  padding: 24px 32px;
}

.sf-diag-cta-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--sf-white);
  color: var(--sf-accent);
  font-size: 22px;
}

.sf-diag-cta-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: var(--sf-text);
}

.sf-diag-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #fdae04;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
}

.sf-diag-cta-btn:hover {
  background-color: #e69d00;
  color: #fff;
}

@media screen and (max-width: 600px) {
  .sf-diag-cta {
    flex-wrap: wrap;
    padding: 20px;
  }

  .sf-diag-cta-text {
    flex: 1 1 100%;
    font-size: 16px;
  }

  .sf-diag-cta-btn {
    margin-left: 64px;
  }
}

/************************************************************************
** 記事ページ用スタイル（single.php・カンプ「記事PC/SP」準拠）
** 既存のCocoonマークアップ／既存の記事装飾クラスに当てる。
************************************************************************/

/* --- パンくず --- */
.breadcrumb,
#breadcrumb {
  background-color: transparent;
  font-size: 13px;
  color: var(--sf-text-sub);
  /* #content-in の外（.sf-inner 直下）に置かれるため、下側のみ余白を持つ。
     上側の余白は #content-in の padding-top と二重にならないよう 0 にする。 */
  padding: 16px 0 0;
}

.breadcrumb a {
  color: var(--sf-text-sub);
}

/* --- カテゴリバッジ（薄青ピル） ---
   タイトル上のカテゴリタグ（entry-categories-tags > entry-categories > cat-link、
   functions.phpで category_tag_display_position を title_top に固定済み）と、
   カード系サムネイル内バッジ（cat-label）の両方に適用する */
.entry-categories-tags .cat-link,
.cat-label {
  background-color: var(--sf-accent-light) !important;
  color: var(--sf-accent-dark) !important;
  border: none !important;
  border-radius: 999px;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: bold;
  /* .cat-link は <a> のため、指定しないとリンクの下線が出る */
  text-decoration: none;
  display: inline-block;
}

.entry-categories-tags .cat-link:hover {
  text-decoration: none;
}

.entry-categories-tags {
  margin-bottom: 12px;
}

.entry-categories-tags .cat-link .cat-icon {
  display: none;
}

.entry-categories-tags .entry-tags .tag-link {
  background-color: transparent;
  border: 1px solid var(--sf-border);
  border-radius: 999px;
  color: var(--sf-text-sub);
  font-size: 12px;
  padding: 4px 12px;
}

/* --- タイトル --- */
.article .entry-title,
.entry-title {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  color: var(--sf-text);
  margin: 0 0 12px;
}

/* --- 投稿日・更新日 --- */
.date-tags,
.post-date,
.post-update {
  color: var(--sf-text-sub);
  font-size: 13px;
}

/* 日付行はアイキャッチ直前に来るため、下余白を明示する
   （未指定だとアイキャッチと密着する） */
.date-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 20px;
}

/* --- アイキャッチ（角丸大） --- */
.eye-catch img,
.article .eye-catch img,
.article-eye-catch img {
  border-radius: var(--sf-radius-m);
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* --- 冒頭要点ボックス（薄青背景＋チェックリスト） ---
   seo-writer記事側の既存クラス（check-point 等）を壊さない範囲で
   トーンのみカンプ準拠に上書き */
.check-point {
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-m);
  padding: 20px 24px;
}

.check-point_ttl {
  color: var(--sf-text);
}

.check-point_item {
  background-color: transparent;
  padding: 0;
}

.check-point li {
  border-bottom: none;
  padding-left: 34px;
  padding-bottom: 10px;
  position: relative;
}

.check-point ul li:before {
  content: "\f00c";
  font-family: "FontAwesome";
  color: var(--sf-accent);
  font-size: 16px;
  left: 0;
  top: 2px;
  position: absolute;
}

/* --- 記事冒頭の要点チェックリスト枠（カンプ準拠：青チェックマーク付きリスト） ---
   inc/lead-points.php が本文中の最初の .simplebox から複製して出力する。 */
.sf-lead-points {
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-m);
  padding: 20px 24px;
  margin: 20px 0;
}

.sf-lead-points ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-lead-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-weight: 500;
  color: var(--sf-text);
}

.sf-lead-points li + li {
  border-top: 1px dashed var(--sf-border);
}

.sf-lead-points-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--sf-accent-dark);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* --- 目次：メインエリア内・クリーム色カード（カンプ準拠） --- */
.article .toc {
  background-color: var(--sf-cream);
  border: none;
  border-radius: var(--sf-radius-m);
  padding: 24px 28px;
  margin: 32px auto;
  min-width: 100%;
  box-shadow: none;
}

.article .toc .toc-title {
  background-color: transparent;
  color: var(--sf-text);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  position: relative;
  margin-bottom: 16px;
}

.article .toc .toc-content {
  display: block;
}

.article .toc .toc-list {
  counter-reset: sf-toc;
  column-count: 1;
}

.article .toc .toc-list > li {
  counter-increment: sf-toc;
  position: relative;
  border-bottom: 1px dashed #e8dfc0;
  padding: 12px 0 12px 40px;
  list-style: none;
  break-inside: avoid;
}

.article .toc .toc-list > li:before {
  content: counter(sf-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--sf-accent);
  font-weight: bold;
  font-size: 15px;
}

/* カンプは各項目の右端に開閉シェブロン（下向き山形）を持つ */
.article .toc .toc-list > li {
  padding-right: 28px;
}

.article .toc .toc-list > li:after {
  content: "";
  position: absolute;
  right: 4px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--sf-text-sub);
  border-bottom: 2px solid var(--sf-text-sub);
  transform: rotate(45deg);
}

.article .toc a {
  color: var(--sf-text);
  text-decoration: none;
  font-weight: 500;
}

.article .toc a:before {
  display: none;
}

/* --- H2見出し：番号＋波モチーフ下線（CSSカウンター使用） --- */
.article {
  counter-reset: sf-h2;
}

.article h2 {
  counter-increment: sf-h2;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 16px;
  margin-top: 60px;
  color: var(--sf-text);
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
}

/* 番号(:before)自体に下線を持たせ、下線幅を番号の文字幅に一致させる。
   （固定幅の :after だと番号より右にはみ出すため） */
.article h2:before {
  content: counter(sf-h2, decimal-leading-zero);
  display: inline-block;
  flex-shrink: 0;
  font-size: 30px;
  font-weight: bold;
  color: var(--sf-accent);
  border: none;
  position: static;
  width: auto;
  height: auto;
  border-bottom: 4px solid var(--sf-accent);
  padding-bottom: 8px;
}

.article h2:after {
  content: none;
}

.article h2:first-of-type {
  margin-top: 40px;
}

/* --- H3見出し（カンプ準拠：背景なし・青文字・下に細い波線） --- */
.article h3 {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--sf-accent);
  font-size: 17px;
  font-weight: bold;
  padding: 0 0 10px;
  margin-top: 32px;
  position: relative;
}

.article h3:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--sf-accent);
  border: none;
  display: block;
}

/* --- テーブル ---
   カンプ（記事PC.png）のヘッダー行は薄い水色背景・濃色文字（濃い青背景・
   白文字ではない）。 */
.table-one .tablehead {
  background-color: var(--sf-accent-light);
  color: var(--sf-text);
  border-color: var(--sf-border);
}

.table-one .tableside,
.table-one td {
  background-color: #fff;
  border-color: var(--sf-border);
}

/* --- ポイントボックス（電球アイコン） --- */
.simplebox,
.pointhead {
  border-color: var(--sf-border);
}

.simplebox {
  background-color: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-s);
}

.pointhead:before {
  background-color: var(--sf-accent-dark);
}

.im-box,
.n-point {
  border-color: var(--sf-border);
  border-radius: var(--sf-radius-m);
  overflow: hidden;
}

.im-box-inner,
.n-point-inner {
  background-color: var(--sf-accent-light);
}

/* --- 記事下：関連記事見出し ---
   薄青(--sf-accent-light #eaf3fc)はサイト背景(--sf-bg #f0f6fb)との
   コントラスト比が1.03:1しかなく帯が背景に埋もれるため、
   アクセント色の帯＋白文字にして区切りを明確にする。 */
.related-entry-heading,
.comment-title {
  background-color: var(--sf-accent-dark);
  color: var(--sf-white);
  border-radius: var(--sf-radius-s);
  border-bottom: none;
  font-size: 18px;
}

/************************************************************************
** サイドバー（この記事のまとめ／検索／人気のカテゴリ／人気記事ランキング）
** カンプ（記事PC.png・カテトップPC.png 右列）準拠。
** 「この記事のまとめ」は記事詳細のみ sidebar.php が出力する（sf_get_toc_items
** を再利用したH2見出し一覧。カテゴリトップ等では出力されないため常時0件）。
** ウィジェットの並び順（まとめ→検索→カテゴリ→人気記事）は
** 管理画面のウィジェット設定を変えず、flexboxのorderで見た目のみ制御する。
************************************************************************/

.sidebar {
  background-color: transparent;
  display: flex;
  flex-direction: column;
}

.sidebar .widget {
  background-color: var(--sf-white);
  border-radius: var(--sf-radius-m);
  padding: 20px;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px rgba(31, 45, 61, 0.05);
}

/* ウィジェット表示順：この記事のまとめ(0) → 検索(1) → カテゴリ(2) → 人気記事(3) */
.sidebar .sf-summary-widget {
  order: 0;
}

.sidebar .widget_search {
  order: 1;
}

.sidebar .widget_categories {
  order: 2;
}

.sidebar .widget_popular_entries {
  order: 3;
}

/* --- この記事のまとめ（記事詳細のみ・カンプ準拠：01〜06番号付きカード） --- */
.sf-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-summary-list li + li {
  margin-top: 4px;
}

.sf-summary-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--sf-radius-s);
  color: var(--sf-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

.sf-summary-list a:hover {
  background-color: var(--sf-accent-light);
}

.sf-summary-num {
  flex-shrink: 0;
  color: var(--sf-accent);
  font-weight: bold;
  font-size: 16px;
  min-width: 24px;
}

.sf-summary-text {
  flex: 1;
  min-width: 0;
}

.sidebar h3,
.sidebar .widget-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--sf-text);
  padding: 0 0 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--sf-accent-light);
  position: relative;
  text-align: left;
  background: none;
}

.sidebar h3:before,
.sidebar h3:after {
  display: none;
}

.sidebar h3:after,
.sidebar .widget-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 40px;
  height: 2px;
  background-color: var(--sf-accent-dark);
}

/* --- 検索ウィジェット --- */
.sidebar .search-box {
  display: flex;
  gap: 8px;
}

.sidebar .search-box .search-edit {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--sf-border);
  background-color: var(--sf-bg);
  padding: 10px 16px;
  height: auto;
}

.sidebar .search-box .search-submit {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--sf-accent-dark);
  color: var(--sf-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

/* --- 人気のカテゴリ（widget_categories をアイコン付き行アイテムのトーンで） --- */
.sidebar .widget_categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar .widget_categories ul li {
  margin: 0;
}

.sidebar .widget_categories ul li a,
.sidebar .cat-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--sf-border);
  box-shadow: none;
  padding: 12px 4px;
  color: var(--sf-text);
  text-decoration: none;
  font-size: 14px;
}

.sidebar .widget_categories ul li:last-child a {
  border-bottom: none;
}

.sidebar .cat-item a:before {
  display: none;
}

/* functions.php（sf_inject_sidebar_category_icons）が注入するカテゴリアイコン */
.sf-sidebar-cat-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--sf-accent-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sf-sidebar-cat-icon img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* カテゴリ名テキストがアイコンと矢印の間で残りの幅を取るように */
.sidebar .widget_categories ul li a {
  flex-wrap: nowrap;
}

.sf-sidebar-cat-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- カテゴリトップ（is_category）専用の追加要素 ---
   カンプ（カテトップPC.png）だけに存在する件数バッジ・閲覧中カテゴリの
   ハイライト・「すべてのカテゴリを見る」リンク。 */
.sf-sidebar-cat-count {
  flex-shrink: 0;
  background-color: var(--sf-accent-light);
  color: var(--sf-accent-dark);
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 4px;
}

.sidebar .cat-item.is-current a {
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-s);
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 -8px;
}

.sf-sidebar-cat-more {
  text-align: right;
  margin-top: 12px;
}

/* 右矢印（カンプ準拠の行末シェブロン。HTML変更なしで疑似要素のみ） */
.sidebar .widget_categories ul li a:after {
  content: "\f105";
  font-family: "Font Awesome 5 Free", FontAwesome, sans-serif;
  font-weight: 900;
  color: var(--sf-text-sub);
  font-size: 13px;
  flex-shrink: 0;
  margin-left: 4px;
}

/* --- 人気記事ランキング（popular-entry-cards：01/02/03の番号＋サムネ） --- */
.sidebar .popular-entry-cards.widget-entry-cards {
  counter-reset: sf-rank;
}

.sidebar .popular-entry-cards.widget-entry-cards .a-wrap {
  counter-increment: sf-rank;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background-color: transparent;
  padding: 14px 0 14px 34px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--sf-border);
}

.sidebar .popular-entry-cards.widget-entry-cards .a-wrap:last-child {
  border-bottom: none;
}

.sidebar .popular-entry-cards.widget-entry-cards .a-wrap:before {
  content: counter(sf-rank, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: bold;
  color: var(--sf-accent);
  font-family: inherit;
  width: 28px;
}

.sidebar .widget-entry-card-thumb,
.sidebar .popular-entry-card-thumb {
  flex-shrink: 0;
  width: 72px;
  float: none;
  margin: 0;
}

.sidebar .widget-entry-cards .entry-card-thumb,
.sidebar .widget-entry-cards .popular-entry-card-thumb {
  border-radius: var(--sf-radius-s);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.sidebar .widget-entry-card-thumb img,
.sidebar .popular-entry-card-thumb img,
.sidebar .widget-entry-cards .entry-card-thumb img,
.sidebar .widget-entry-cards .popular-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar .popular-entry-card-content,
.sidebar .widget-entry-card-content {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.sidebar .entry-card-title,
.sidebar .related-entry-card-title,
.sidebar .popular-entry-card-title,
.sidebar .widget-entry-card-title {
  color: var(--sf-text);
  font-size: 13px;
  line-height: 1.5;
  font-weight: bold;
}

.sidebar .popular-entry-card-date {
  display: none;
}

/************************************************************************
** カテゴリトップ用スタイル（tmp/category-content.php・カンプ「カテトップPC」準拠）
** タブ切替・並び替え/フィルタ・診断バナーは今回実装しない（対象外）
************************************************************************/

.sf-cat-hero {
  position: relative;
  background-color: var(--sf-accent-light);
  padding: 40px 0 64px;
  margin-bottom: 32px;
  overflow: hidden;
}

.sf-cat-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.sf-cat-hero-text {
  max-width: 640px;
}

.sf-cat-hero-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.sf-cat-hero-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--sf-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-cat-hero-icon img {
  width: 34px;
  height: 34px;
}

.sf-cat-hero-title.archive-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  color: var(--sf-text);
}

.sf-cat-hero-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--sf-text-sub);
  margin-bottom: 20px;
}

.sf-cat-hero-desc p {
  margin: 0;
}

.sf-cat-hero-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background-color: var(--sf-white);
  border-radius: 999px;
  padding: 10px 20px;
}

.sf-cat-hero-count-label {
  font-size: 13px;
  color: var(--sf-text-sub);
}

.sf-cat-hero-count-num {
  font-size: 24px;
  font-weight: bold;
  color: var(--sf-accent);
}

.sf-cat-hero-count-unit {
  font-size: 13px;
  font-weight: bold;
  color: var(--sf-accent);
}

.sf-cat-hero-visual {
  flex-shrink: 0;
  width: 360px;
  max-width: 40%;
  border-radius: var(--sf-radius-l);
  overflow: hidden;
}

.sf-cat-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ヒーロー帯下端の波形の切り替え */
.sf-cat-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 32px;
  background: var(--sf-bg);
  -webkit-mask: url('images/wave.svg') repeat-x bottom / 64px 32px;
  mask: url('images/wave.svg') repeat-x bottom / 64px 32px;
}

/* カテゴリアーカイブの記事一覧（Cocoon標準 #list.ect-vertical-card-2 を
   カンプのカード見た目に。既存トップページ用カードトーンと統一） */
.list-wrap #list.list .entry-card-wrap,
#list.list .entry-card-wrap {
  background-color: var(--sf-white);
  border: none;
  border-radius: var(--sf-radius-m);
}

#list.list .entry-card-title {
  color: var(--sf-text);
}

/* サイドバー「人気のカテゴリ」（widget_categories）
   カンプは件数バッジを持たないため post-count は出力していない（sidebar.php
   側でHTML自体を削除済み）。行のレイアウトのみここで定義。 */
.sidebar .widget_categories ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/************************************************************************
** 固定ページ用スタイル（運営者情報・お問い合わせ）
** page-templates-snippets/unei-contact.html を固定ページ本文に貼った際に
** 当たるスタイル。専用PHPテンプレは増やさず、このCSS＋HTMLひな形で完結させる。
************************************************************************/

.sf-page-hero {
  padding: 40px 0;
}

.sf-page-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.sf-page-hero-title {
  font-size: 28px;
  font-weight: bold;
  color: var(--sf-text);
  margin-bottom: 8px;
}

.sf-page-hero-desc {
  font-size: 14px;
  color: var(--sf-text-sub);
}

.sf-page-hero-visual {
  flex-shrink: 0;
  width: 280px;
  max-width: 35%;
  aspect-ratio: 4 / 3;
  border-radius: var(--sf-radius-l);
  background-color: var(--sf-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sf-page-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-unei-block {
  background-color: var(--sf-white);
  border-radius: var(--sf-radius-l);
  padding: 32px 28px;
  margin-bottom: 32px;
}

.sf-unei-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.sf-unei-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--sf-accent-light);
  color: var(--sf-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sf-unei-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
  color: var(--sf-text);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* .article h2 の連番カウンター（01/02...）と波モチーフ下線は記事本文用。
   運営者情報ページの見出しは対象外にする（本文が.sf-unei-heading付きh2として
   マークアップされているため、.article内カウンターが誤って当たり、見出し内の
   .sf-wave と二重に波線が表示されてしまうのを打ち消す）。
   詳細度を .article h2:before/:after（要素セレクタ2つ分）より確実に上回らせる
   ため、.article を前置して同等以上の詳細度にする。 */
.article h2.sf-unei-heading:before,
.article h2.sf-unei-heading:after {
  content: none;
}

.sf-unei-body {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.sf-unei-lead {
  flex: 1;
  min-width: 0;
}

.sf-unei-lead p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--sf-text-sub);
  margin: 0 0 20px;
}

/* 左リード文の1行目と右テーブル1行目のテキスト上端を揃える。
   テーブルセルは padding:12px + line-height:1.7、リード文は line-height:1.9 で
   1行目のテキスト位置がずれるため、セルのパディング分に加えて
   行高差の半分((1.9-1.7)*14px/2 = 1.4px)を差し引いた値を上余白にする。 */
.sf-unei-body .sf-unei-lead > p:first-child {
  margin-top: 11px;
}

.sf-unei-illust {
  aspect-ratio: 4 / 3;
  max-width: 320px;
  border-radius: var(--sf-radius-m);
  background-color: var(--sf-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-accent);
  font-size: 13px;
  text-align: center;
  overflow: hidden;
}

.sf-unei-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-unei-table.table-one {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.sf-unei-table .tablehead {
  background-color: var(--sf-accent-light);
  color: var(--sf-text);
  border-color: var(--sf-border);
  white-space: nowrap;
  text-align: left;
}

.sf-unei-table td {
  background-color: #fff;
  border-color: var(--sf-border);
  text-align: left;
}

/* お問い合わせ */
.sf-contact-body {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.sf-contact-notes {
  flex: 1;
  min-width: 0;
  max-width: 320px;
}

.sf-contact-notes > p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--sf-text-sub);
  margin: 0 0 20px;
}

.sf-contact-note-card {
  display: flex;
  gap: 12px;
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-s);
  padding: 16px;
  margin-bottom: 12px;
}

.sf-contact-note-icon {
  flex-shrink: 0;
  color: var(--sf-accent);
  font-size: 18px;
}

.sf-contact-note-ttl {
  font-size: 14px;
  font-weight: bold;
  color: var(--sf-text);
  margin: 0 0 4px;
}

.sf-contact-note-txt {
  font-size: 13px;
  color: var(--sf-text-sub);
  margin: 0;
  line-height: 1.7;
}

.sf-contact-form {
  flex: 1.4;
  min-width: 0;
}

/* Contact Form 7 標準マークアップへのスタイル当て */
.sf-contact-form .wpcf7-form p {
  margin-bottom: 16px;
}

.sf-contact-form .wpcf7-form label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: var(--sf-text);
  margin-bottom: 6px;
}

.sf-contact-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 4px;
}

.sf-contact-form input[type="text"],
.sf-contact-form input[type="email"],
.sf-contact-form input[type="tel"],
.sf-contact-form textarea,
.sf-contact-form select {
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-s);
  background-color: var(--sf-bg);
  padding: 12px 14px;
}

.sf-contact-form textarea {
  min-height: 140px;
}

/* カンプ（運営者情報と問い合わせPC.png）の送信ボタンは診断CTA・記事内ボタンと
   同じ黄色（#fdae04）。旧指定は --sf-accent（青）で他ボタンと色味が揃って
   いなかった。 */
.sf-contact-form input[type="submit"] {
  background-color: #fdae04;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 40px;
  font-weight: bold;
  font-size: 15px;
}

.sf-contact-form input[type="submit"]:hover {
  background-color: #e69d00;
  opacity: 1;
}

.sf-contact-form .wpcf7-list-item {
  margin: 0 8px 0 0;
}

@media screen and (max-width: 900px) {
  .sf-page-hero-inner,
  .sf-unei-body,
  .sf-contact-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .sf-page-hero-visual,
  .sf-unei-illust,
  .sf-contact-notes {
    width: 100%;
    max-width: 100%;
  }
}

/************************************************************************
** レスポンシブ（SP：カンプ「トップSP/記事SP」準拠）
************************************************************************/
@media screen and (max-width: 900px) {
  .sf-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* SPはカンプ準拠でキャッチコピー・検索を先に見せる。イラストスロットは
     本文の後ろに控えめなサイズで配置（アセット未着手のプレースホルダのため
     先頭に大きく出すと空白ばかりが目立つ） */
  .sf-hero-visual {
    width: 60%;
    max-width: 260px;
    margin: 24px auto 0;
  }

  .sf-hero-visual-slot {
    aspect-ratio: 1 / 1;
  }

  .sf-hero-title {
    font-size: 30px;
  }

  .sf-category-grid {
    gap: 20px 12px;
  }

  .sf-category-item {
    width: 30%;
  }

  .sf-popular-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sf-section {
    padding: 24px 16px;
    border-radius: var(--sf-radius-m);
  }

  .sf-cat-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .sf-cat-hero-visual {
    width: 100%;
    max-width: 100%;
    order: -1;
  }

  .sf-cat-hero-title.archive-title {
    font-size: 22px;
  }

  .article .toc .toc-list {
    column-count: 1;
  }

  .article h2 {
    font-size: 19px;
  }

  .article h2:before {
    font-size: 22px;
  }

  .sf-ranking-item {
    gap: 12px;
  }

  .sf-ranking-cat {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .sf-hero-title {
    font-size: 26px;
  }

  .sf-hero-search {
    max-width: 100%;
  }

  .sf-section-title {
    font-size: 17px;
  }
}

/************************************************************************
** フェーズ3: 記事装飾パーツの新デザイン化（/parts/ 見本市準拠）
** クラス名・HTML構造・functions.phpの機能は一切変更しない。CSSのみで
** 新デザイントーン（青アクセント・角丸・薄水色・クリーム）に更新する。
** 対象: 文字装飾/マーカー/ボタン/リスト/ボックス（simplebox・box1・
** pointhead・pick-box・memo-box等）/引用/kuchikomi_good（口コミ）/
** table-one（tablehead・tableside）
************************************************************************/

/* --- マーカー（黄色/赤色/青色のアンダーラインマーカー） ---
   旧指定は linear-gradient(transparent 70%, color 55%) で開始位置(70%)が
   終了位置(55%)より手前になると色の帯が出ないため、開始位置を後ろにする。
   下40%だけに色を敷く形に修正（文字の下半分に太めの下線が乗る定番の
   マーカー表現）。 */
.marker-under {
  background: linear-gradient(transparent 60%, var(--sf-accent-light) 60%);
}

.marker-under-red {
  background: linear-gradient(transparent 60%, #fbe1e5 60%);
}

.marker-under-blue {
  background: linear-gradient(transparent 60%, var(--sf-accent-light) 60%);
}

/* --- ボタン（btn-orange/btn-cyan、btn-m/btn-l） --- */
/* 記事本文の実HTMLは <div class="btn btn-orange btn-l"><a>...</a></div>
   （Cocoon標準のリンクボタンショートコード出力）。旧CSSは色指定のみで
   .btn/.btn-l 自体の箱型（幅・パディング・角丸・中央寄せ）をここで定義する。ここで.btn（外側div）を中央寄せの角丸ボックスとして定義し、内側の
   a要素はクリック領域を確保するためブロック化する。 */
.btn {
  margin: 20px auto;
  max-width: 420px;
  border-radius: var(--sf-radius-m);
  overflow: hidden;
  text-align: center;
}

.btn a {
  display: block;
  padding: 16px 24px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  position: relative;
}

.btn-l a {
  padding: 16px 40px 16px 24px;
  font-size: 16px;
}

.btn-l a::after {
  content: "\203a";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

.btn-m a {
  padding: 12px 32px 12px 18px;
  font-size: 14px;
}

/* CTAアンバーはカンプの診断ボタンから採色（#fdae04） */
.btn-orange,
.btn-wrap.btn-wrap-orange > a {
  background-color: #fdae04;
  border: none;
  border-radius: var(--sf-radius-m);
}

.btn-orange a,
.btn-wrap.btn-wrap-orange > a {
  color: #fff;
  font-weight: bold;
}

.btn-orange:hover,
.btn-wrap.btn-wrap-orange > a:hover {
  background-color: #e69d00;
  opacity: 1;
}

.btn-orange .btn-l::after,
.btn-l.btn-orange::after,
.btn-orange a::after {
  color: #fff;
}

.btn-cyan,
.btn-wrap.btn-wrap-cyan > a {
  background-color: var(--sf-accent-dark);
  border-radius: var(--sf-radius-m);
}

.btn-cyan:hover,
.btn-wrap.btn-wrap-cyan > a:hover {
  background-color: var(--sf-accent-dark);
}

/* --- リスト（list-1〜list-6・list-box-1/2の見出し帯／マーカー色） --- */
.list-box-1,
.list-box-2 {
  background-color: var(--sf-accent-light);
  color: var(--sf-text);
  border-radius: var(--sf-radius-s);
}

.list-1 li:before,
.list-2 li:before,
.list-3 li:before,
.list-4 li:before {
  background-color: var(--sf-accent-dark);
}

.list-5 li:before,
.list-6 li:before {
  color: var(--sf-accent);
}

/* --- simplebox（タイトル＋区切り線＋本文/リスト） --- */
.simplebox {
  background-color: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-m);
}

.simplebox .simplebox_ttl {
  color: var(--sf-text);
}

.simplebox .border {
  background-color: var(--sf-accent-dark);
}

.simplebox ul li:before {
  color: var(--sf-accent);
}

.simplebox ol li:before {
  background-color: var(--sf-accent-dark);
}

/* --- box1（見出し＋リストのボックス） --- */
.box1 {
  background-color: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-m);
}

.box1 .box-title {
  background-color: var(--sf-accent-light);
  color: var(--sf-text);
  border-radius: var(--sf-radius-s);
}

/* --- pick-box（強調ボックス） --- */
.pick-box {
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-m);
}

.pick-box_ttl {
  color: var(--sf-text);
  border-bottom-color: var(--sf-accent);
}

.pick-box_inner {
  background-color: var(--sf-white);
  border: 1px dotted var(--sf-accent);
  border-radius: var(--sf-radius-s);
  outline: none;
}

/* --- pointhead（ポイント見出し・電球アイコン） --- */
.pointhead {
  background-color: var(--sf-accent-light);
  color: var(--sf-text);
  border-radius: var(--sf-radius-s);
}

/* --- memo-box/alert-box/information-box（Cocoon標準の色味は維持し角丸のみ調整） --- */
.memo-box,
.alert-box,
.information-box,
.question-box {
  border-radius: var(--sf-radius-m);
}

/* --- kuchikomi（口コミ良い/悪い） --- */
.kuchikomi_ttl {
  background-color: var(--sf-accent-light);
  color: var(--sf-text);
  border-radius: var(--sf-radius-s) var(--sf-radius-s) 0 0;
}

.kuchikomi {
  background-color: var(--sf-accent-light); /* 旧#BAE5C7/#ACD9D4の緑枠(外周3px)を新トーンに */
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-m);
  overflow: hidden;
}

.kuchikomi .kuchikomi_good:before {
  color: var(--sf-accent);
}

/* --- 引用（blockquote） --- */
blockquote {
  background-color: var(--sf-white);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-m);
}

blockquote:before {
  color: var(--sf-accent);
}

/* --- meritbox/demeritbox（メリット=青系・デメリット=赤系で対比を明確化）
   旧: デメリットの背景が --sf-accent-light とほぼ同じ色味で見分けがつかず、
   チェックマークの色も同系色で区別しにくい。
   デメリット側は背景・アイコン共に赤系に変更し、意味的な対比を持たせる。 */
.meritbox {
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-m);
}

.meritbox_inner {
  border-radius: var(--sf-radius-s);
}

.meritbox:before,
.meritbox ul li:before {
  color: var(--sf-accent);
}

.demeritbox {
  background-color: #fbe9ea;
  border-radius: var(--sf-radius-m);
}

.demeritbox_inner {
  border-radius: var(--sf-radius-s);
}

.demeritbox:before {
  color: #d9534f;
}

.demeritbox ul li:before {
  font-family: FontAwesome;
  content: "\f00d";
  color: #d9534f;
}

/* --- txtbox（コーナー枠ボックス: 黒枠→青） --- */
.txtbox:before {
  border-left-color: var(--sf-accent);
  border-top-color: var(--sf-accent);
}

.txtbox:after {
  border-right-color: var(--sf-accent);
  border-bottom-color: var(--sf-accent);
}

/* --- rightlink（矢印リンク: 緑→青） --- */
.rightlink:before {
  color: var(--sf-accent);
}

/* --- kuchikomi_bad（悪い口コミアイコン: トークンのグレーに） --- */
.kuchikomi .kuchikomi_bad:before {
  color: var(--sf-text-sub);
}

/************************************************************************
** 記事装飾パーツ 構造ルール（移植漏れ分の追加・2026-08）
** 上の「フェーズ3」ブロックは色調のみの上書きで、枠の余白・タイトルの
** 太字/中央寄せ/下線・リストのアイコン等「構造そのもの」を作っていたのは
** 記事本文パーツの構造ルール。
** 出典: 旧テーマの該当行 = cocoon-child-master/style.css 233-372行目付近
************************************************************************/

/* --- simplebox: タイトル・区切り線・リストのアイコン --- */
.simplebox {
  padding: 0.5em 1em;
  margin-top: 20px;
}

.simplebox p {
  margin: 0;
  padding: 0;
}

.simplebox .simplebox_ttl {
  text-align: center;
  margin: 0;
  padding: 5px;
  font-size: 18px;
  font-weight: 500;
}

.simplebox .border {
  display: block;
  width: 50px;
  height: 1px;
  margin: 0.5em auto;
}

.simplebox ul {
  position: relative;
}

.simplebox ul li {
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 35px;
  list-style-type: none !important;
}

.simplebox ul li:before {
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  left: 0em;
  font-size: 22px;
  line-height: 22px;
  padding-left: 4px;
}

.simplebox ol {
  counter-reset: number;
}

.simplebox ol li {
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 35px;
  list-style-type: none !important;
}

.simplebox ol li:before {
  position: absolute;
  counter-increment: number 1;
  content: counter(number);
  display: inline-block;
  color: white;
  font-weight: bold;
  font-size: 14px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

/* --- pick-box: タイトル・内枠の余白 --- */
.pick-box_ttl {
  text-align: center;
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sf-accent);
  margin-bottom: 10px;
  font-weight: bold;
}

.pick-box_inner {
  padding: 10px;
}

.pick-box_inner p {
  margin-bottom: 10px;
}

.pick-box_inner p:last-of-type {
  margin-bottom: 0;
}

.pick-box_content {
  padding: 10px;
}

.pick-box_txt {
  font-size: 1.4rem;
  line-height: 1.6;
}

/* --- pointhead: 丸アイコン --- */
.pointhead {
  position: relative;
  padding-left: 20px;
  margin-top: 20px;
  font-weight: 500;
}

.pointhead:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 100px;
  position: absolute;
  left: 0;
  top: 8px;
}

.table-one .pointhead {
  margin-bottom: 10px;
}

/* --- kuchikomi: 枠の余白・タイトル・良い/悪いアイコン --- */
.kuchikomi {
  margin-top: 20px;
  position: relative;
  padding: 3px;
}

.kuchikomi_ttl {
  padding: 5px 5px 8px 50px;
  font-size: 18px;
  font-weight: 500;
}

.kuchikomi_inner {
  position: relative;
  padding: 0.5em 1em;
  border-radius: 2px;
  background-color: var(--sf-white);
}

.kuchikomi ul {
  position: relative;
  margin-bottom: 0;
}

.kuchikomi ul li {
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 35px;
  list-style-type: none !important;
}

.kuchikomi .kuchikomi_good:before {
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  left: 0em;
  font-size: 22px;
  line-height: 22px;
  padding-left: 4px;
}

.kuchikomi .kuchikomi_bad:before {
  font-family: FontAwesome;
  content: "\f00d";
  position: absolute;
  left: 0em;
  font-size: 22px;
  line-height: 22px;
  padding-left: 4px;
}

/* --- meritbox / demeritbox: 枠の余白・タイトル・リストアイコン --- */
.meritbox,
.demeritbox {
  margin-top: 20px;
  position: relative;
  padding: 3px;
}

.meritbox_ttl,
.demeritbox_ttl {
  padding: 5px 5px 8px 50px;
  font-size: 18px;
  font-weight: 500;
}

.meritbox ul,
.demeritbox ul {
  position: relative;
  margin-bottom: 0;
}

.meritbox ul li,
.demeritbox ul li {
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 32px;
  list-style-type: none !important;
}

.meritbox ul li:before,
.demeritbox ul li:before {
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  left: 0em;
  font-size: 15px;
  line-height: 22px;
  padding-left: 6px;
}

/* デメリット側だけチェック(\f00c)をバツ(\f00d)で上書き
   （上の共通ブロックより後に読み込まれるよう、このファイル末尾側に配置） */
.demeritbox ul li:before {
  content: "\f00d";
}

/* --- txtbox: コーナー枠の太さ・位置（色は上のフェーズ3ブロックで指定済み） --- */
.txtbox {
  margin-top: 20px;
  position: relative;
  padding: 0.5em 1em;
  background: var(--sf-bg);
}

.txtbox:before,
.txtbox:after {
  content: "";
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

.txtbox:before {
  border-left: 1px solid;
  border-top: 1px solid;
  top: 0;
  left: 0;
}

.txtbox:after {
  border-right: 1px solid;
  border-bottom: 1px solid;
  bottom: 0;
  right: 0;
}

.txtbox p {
  margin: 0;
  padding: 0;
}

/* --- rightlink: 外部リンクアイコン（色は上のフェーズ3ブロックで指定済み）
   content は "\f08e"（外部リンクアイコン）を使う --- */
.rightlink {
  margin-top: 5px;
  text-align: right;
  font-weight: 500;
}

.rightlink:before {
  content: "\f08e";
  font-family: FontAwesome;
  display: inline-block;
  margin-right: 10px;
}

/* --- table-one: 上余白 --- */
.table-one {
  margin-top: 20px;
}

/* --- im-box / n-point --- */
.im-box {
  padding: 4px 0;
  border-top: 1px double;
  border-bottom: 1px double;
  background: var(--sf-white);
  margin-top: 20px;
}

.im-box_ttl {
  text-align: center;
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 2px dotted var(--sf-white);
  margin-bottom: 10px;
  font-weight: 500;
}

.n-point {
  margin-top: 20px;
  border: 1px solid var(--sf-border);
}

.n-point ul {
  margin-top: 20px;
}

.n-point ul li {
  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 35px;
  list-style-type: none !important;
}

.n-point ul li:before {
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  font-size: 22px;
  line-height: 22px;
  padding-left: 4px;
  left: 30px;
  color: var(--sf-accent);
}

/* --- wide: 画像を記事幅いっぱいに表示（9記事全てで使用中） --- */
.wide {
  margin-top: 20px;
}

.wide img {
  width: 100%;
  vertical-align: bottom;
}

/* --- right: テキスト右寄せの汎用ユーティリティ --- */
.right {
  text-align: right;
}

/* ============================================================
   移植漏れの補完
   旧 cocoon-child-master/style.css からセレクタ単位で差分を検出し、
   記事本文で使われるパーツのうち新テーマに欠けていた7件を追加。
   ※ .kuchikomi_ttl は padding-left:50px を持つが、そのスペースに
     アイコンを描く :before が欠落しており、見出しが浮いて見えていた。
   ============================================================ */

/* 口コミ枠のタイトル横アイコン（FontAwesome 4系 \f0e6 = comments） */
.kuchikomi:before {
  font-family: "FontAwesome";
  content: "\f0e6";
  position: absolute;
  left: 15px;
  font-size: 22px;
  line-height: 36px;
  padding-left: 6px;
}

/* 表の偶数行の背景（ゼブラの打ち消し） */
.table-one table tr:nth-of-type(2n+1) {
  background-color: #fff;
}

/* 表エリア内に置かれた場合の上マージン詰め */
.table-back .table-one {
  margin-top: 0px;
}

.table-back .pointhead {
  margin-top: 0px;
}

/* 引用（blockquote）の独自装飾 */
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}

blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

/* ============================================================
   記事装飾パーツの不具合修正
   Cocoonから独立した際に、親テーマが提供していた table/th/td の
   ベース指定が移植されず、以下4点が壊れていた。
     ① 表がコンテンツ幅より狭くなる（width指定が無い）
     ② 表のセルに余白がない（padding指定が無い）
     ③ パーツ下マージンが消えた（margin-topのみで下は後続要素頼み）
     ④ 口コミパーツの外枠の角が丸すぎる（16px＝二重枠に対して過剰）
   クラス名・HTML構造・functions.phpは変更しない。CSSのみで是正する。
   ============================================================ */

/* --- ① 表の幅：コンテンツ幅いっぱいまで使わせる --- */
.article .table-one {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article table,
.article .table-one > table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

/* --- ② 表のセル余白：独立時に落ちた padding を補う --- */
.article table th,
.article table td,
.article .table-one .tablehead,
.article .table-one .tableside,
.article .table-one td {
  padding: 12px 14px;
  border: 1px solid var(--sf-border);
  vertical-align: middle;
  line-height: 1.7;
  text-align: left;
}

/* 見出しセルは折り返さずに読ませる（狭い列で1文字ずつ折れるのを防ぐ） */
.article .table-one .tablehead {
  white-space: nowrap;
}

/* 表の外周だけ角丸にする（セル境界は直角のまま） */
.article .table-one > table {
  border-radius: var(--sf-radius-s);
  overflow: hidden;
}

/* --- ③ パーツの下マージン：固定pxで復帰 --- */
.article .table-one,
.article .table-back,
.article .simplebox,
.article .box1,
.article .pick-box,
.article .kuchikomi,
.article .meritbox,
.article .demeritbox,
.article .txtbox,
.article .im-box,
.article .n-point,
.article .memo-box,
.article .alert-box,
.article .information-box,
.article .question-box,
.article blockquote,
.article .wide,
.article .list-box-1,
.article .list-box-2 {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* .table-back の中身は二重余白にしない（旧仕様を踏襲） */
.article .table-back .table-one,
.article .table-back .pointhead {
  margin-top: 0;
  margin-bottom: 0;
}

/* pointhead は見出しなので下は詰め、次の本文と密着させる */
.article .pointhead {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* --- ④ 口コミパーツ：外枠の角丸を落とす ---
   外枠(padding:3px)＋内側白の二重構造なので、外側16pxだと内側との差で
   丸みが過剰に見える。外枠は小トークン(10px)、内側は6pxで同心円を揃える。 */
.article .kuchikomi {
  border-radius: var(--sf-radius-s);
}

.article .kuchikomi_inner {
  border-radius: 6px;
}

.article .kuchikomi_ttl {
  border-radius: var(--sf-radius-s) var(--sf-radius-s) 0 0;
}

/* --- SP：表の余白は詰めつつ、潰さない --- */
@media screen and (max-width: 834px) {
  .article table th,
  .article table td,
  .article .table-one .tablehead,
  .article .table-one .tableside,
  .article .table-one td {
    padding: 10px 12px;
  }
}

/* ===== パーツ置き場 =====
   現行テーマで確認済みの本文パーツを見本として並べるLocal専用ページ。 */
.sf-parts-catalog .sf-parts-lead {
  font-size: 17px;
  line-height: 1.9;
}

.sf-parts-catalog .sf-parts-notice {
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--sf-accent-light);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-s);
}

.sf-parts-catalog .sf-parts-notice strong {
  display: block;
  margin-bottom: 8px;
}

.sf-parts-catalog .sf-parts-notice ul {
  margin: 0;
}

.sf-parts-catalog .sf-parts-notice li {
  margin: 0.35em 0;
}

.sf-parts-catalog .sf-parts-notice-muted {
  background: var(--sf-white);
}

.sf-parts-catalog .sf-parts-notice-muted p {
  margin: 0;
}

.sf-parts-catalog .sf-parts-inventory {
  overflow-x: auto;
}

.sf-parts-catalog .sf-parts-inventory table {
  min-width: 720px;
}

.sf-parts-catalog code {
  padding: 0.1em 0.35em;
  background: var(--sf-white);
  border-radius: 4px;
  font-size: 0.9em;
}

@media screen and (max-width: 834px) {
  .sf-parts-catalog .sf-parts-lead {
    font-size: 16px;
  }

  .sf-parts-catalog .sf-parts-notice {
    padding: 16px;
  }
}

/************************************************************************
** SP表示の調整
** 対象: 運営者情報(/unei/)・プライバシーポリシー(/privacy-policy/)・
**       トップページ・ヘッダー（全ページ共通）
** 方針: HTML構造・クラス名・PHPロジックは変えず、CSSのカスケードで是正する。
************************************************************************/

/* --- ① ヘッダーロゴ：縦位置と表示サイズ ---
   ロゴ画像 logo.webp は 2149x732 だが、実際に絵が描かれているのは
   y=152〜585 の434pxだけで、上152px・下146pxが透明余白。
   そのため height:26px 指定では絵の高さが実質15.4pxまで縮み、
   「小さいのに枠だけ縦に伸びている」ように見えていた。
   絵の部分が意図した高さになるよう、枠の高さを余白込みで逆算して指定する
   （画像自体は改変しない）。732/434 ≒ 1.687 倍。 */
.logo-header .sf-logo-image {
  height: 54px; /* 絵の実高 ≒ 32px */
}

@media screen and (max-width: 900px) {
  .logo-header .sf-logo-image {
    height: 47px; /* 絵の実高 ≒ 28px */
  }
}

@media screen and (max-width: 480px) {
  .logo-header .sf-logo-image {
    height: 42px; /* 絵の実高 ≒ 25px */
  }
}

/* --- ② ヘッダー行：ロゴの縦位置を固定し、メニュー開閉で動かさない ---
   .hlt-top-menu は flex-wrap:wrap + align-items:center のため、
   SPでメニューを開くと #navi(width:100%) が2行目に折り返り、
   1行目のロゴが「行全体の中央」へ再計算されて上に動いていた。
   ロゴとトグルを持つ1行目を高さ固定の行として独立させ、
   ナビが増えても1行目の高さが変わらないようにする。 */
@media screen and (max-width: 900px) {
  .header-container-in.hlt-top-menu {
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ロゴとトグルは1行目を等分し、常に64pxの行の中央に置く */
  .header-container-in.hlt-top-menu > .logo-header,
  .header-container-in.hlt-top-menu > #sf-nav-toggle {
    min-height: 64px;
    display: flex;
    align-items: center;
    margin: 0;
  }

  .header-container-in.hlt-top-menu > .logo-header {
    flex: 1 1 auto;
  }

  /* ナビは常に2行目（開いた時だけ表示）。1行目の高さに影響させない */
  .header-container-in.hlt-top-menu > #navi {
    flex: 0 0 100%;
    min-height: 0;
  }
}

/* --- 固定ページ（運営者情報・プライバシーポリシー）のSP余白 ---
   SPでは .sf-unei-block の左右paddingを外し、白背景と余白は .article に委ねる
   （.sf-inner / .article / .sf-unei-block で余白が三重にかかるため）。
   プライバシーポリシーは .article のみで構成されるので、
   そちらの左右paddingも同じ値にして2ページの見え方を揃える。 */
@media screen and (max-width: 900px) {
  body.page .article {
    padding: 20px 16px;
  }

  .sf-unei-block {
    padding: 20px 0;
    margin-bottom: 20px;
    border-radius: 0;
  }

  /* ブロック間の区切りは背景色ではなく罫線で示す（白背景が重なるため） */
  .sf-unei-block + .sf-unei-block {
    border-top: 1px solid var(--sf-border);
    padding-top: 24px;
  }

  .sf-page-hero {
    padding: 24px 0 16px;
  }

  .sf-page-hero-title {
    font-size: 22px;
  }
}

/* --- ④ 見出し：アイコン横の波モチーフを消し、アイコンと文字の高さを揃える ---
   .sf-unei-heading の中に置かれた .sf-wave は、アイコン(丸)と見出し文字の
   あいだに短い横棒として出てしまい、装飾ではなく「余計な線」に見えていた。
   アイコン自体が既に見出しの目印になっているため、この見出しでは非表示にする。
   あわせて、アイコンの丸(44px)と文字(20px)の中心が揃うよう align-items を
   center で明示し、行高由来のズレを止める。 */
.sf-unei-heading .sf-wave {
  display: none;
}

.sf-unei-head {
  align-items: center;
}

.sf-unei-heading {
  align-items: center;
  line-height: 1.4;
}

/* アイコンの中の Font Awesome グリフを丸の中央に置く
   （font-awesomeの行送りで下寄りに見えるのを止める） */
.sf-unei-icon .fa {
  line-height: 1;
  display: block;
}

@media screen and (max-width: 900px) {
  .sf-unei-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .sf-unei-heading {
    font-size: 18px;
  }
}

/* --- ⑤ 運営者情報の表：横スクロールをやめて折り返す ---
   原因は .article .table-one .tablehead の white-space:nowrap。
   「プライバシーポリシー」が折り返せず項目名列が174pxを占め、
   表全体が359px＞枠254pxになって横スクロールが発生していた。
   記事本文の表では nowrap が有効なので全体からは外さず、
   このページの表に限って解除する。 */
.article .sf-unei-table.table-one {
  overflow-x: visible;
}

.article .sf-unei-table .tablehead {
  white-space: normal;
}

/* SPでは項目名を上・値を下に積み、2列を横に詰めない */
@media screen and (max-width: 900px) {
  .sf-unei-table.table-one > table,
  .sf-unei-table.table-one > table tbody,
  .sf-unei-table.table-one > table tr {
    display: block;
    width: 100%;
  }

  .article .sf-unei-table .tablehead,
  .article .sf-unei-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .article .sf-unei-table .tablehead {
    border-bottom: none;
    font-size: 13px;
    padding: 8px 12px;
  }

  .article .sf-unei-table td {
    padding: 10px 12px 14px;
    word-break: break-word;
  }

  /* 行の区切りを保つため、行ごとの下罫線だけ残す */
  .sf-unei-table.table-one > table tr + tr .tablehead {
    border-top: none;
  }
}

/* --- ⑥ トップページSP：ヒーローのイラストをコンセプト文より上に出す ---
   SPではイラストをファーストビューの先頭に出す。 */
@media screen and (max-width: 900px) {
  .sf-hero-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .sf-hero-visual {
    order: -1;
    width: 70%;
    max-width: 280px;
    margin: 0 auto 20px;
  }

  .sf-hero-text {
    max-width: 100%;
  }

  .sf-hero {
    padding: 24px 0 32px;
  }
}

/* --- ⑦ SP：サイト全体の左右余白を1つの値に統一する ---
   SPの左右余白は --sf-gutter-sp に一本化する。
   .sf-section は padding が .sf-inner を上書きしてしまうため、
   外余白は margin 側で持たせて同じ位置に揃える。 */
@media screen and (max-width: 900px) {
  :root {
    --sf-gutter-sp: 12px;
  }

  .sf-inner {
    padding-left: var(--sf-gutter-sp);
    padding-right: var(--sf-gutter-sp);
  }

  /* .sf-section は白カード自体。外余白は .sf-inner と同じ値を margin で持ち、
     内側の padding はカード内の余白として別に持つ。 */
  .sf-section {
    margin-left: var(--sf-gutter-sp);
    margin-right: var(--sf-gutter-sp);
    padding: 20px 16px;
  }

  /* .sf-section.sf-inner は両方付いている要素。padding が二重にならないよう、
     外余白は margin 側に任せて padding は内側の値だけにする。 */
  .sf-section.sf-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 記事カードも同じ外余白に揃える（.sf-inner の内側にあるので
     .article 自身は左右paddingのみ持てばよい） */
  body.page .article,
  .article {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- ⑧ ハンバーガーボタン：3本線を枠の中央に置く ---
   ⑦でボタン枠を min-height:64px にした結果、
   .sf-nav-toggle-bar の top:19px（40pxボタン前提の絶対値）が
   中央からずれ、線だけ12px上に寄っていた。
   絶対値をやめて中央基準（top:50% + translateY）にする。 */
.sf-nav-toggle-bar {
  top: 50%;
  transform: translateY(-50%);
}

/* ::before / ::after は親barからの相対位置なので、
   親にtransformが付いた分を打ち消さずそのまま上下8pxに置く */
body.sf-nav-open .sf-nav-toggle-bar {
  transform: translateY(-50%);
}

body.sf-nav-open .sf-nav-toggle-bar::before {
  transform: translateY(8px) rotate(45deg);
}

body.sf-nav-open .sf-nav-toggle-bar::after {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- ⑨ 運営者情報SP：縦積み時の余白の二重取りをなくす ---
   .sf-unei-body / .sf-contact-body は gap:32px を持つが、
   SPで flex-direction:column になると、その gap に加えて
   中の .table-one が持つ margin(20px) や、WordPressの自動整形が生む
   空の <p>（margin-bottom:15px）が積み上がり、
   表の下に67pxの空白ができていた。
   SPでは gap を詰め、内側パーツの縦マージンと空段落を打ち消す。 */
@media screen and (max-width: 900px) {
  .sf-unei-body,
  .sf-contact-body {
    gap: 16px;
  }

  /* 縦積みでは表の上下マージンは gap に任せる */
  .article .sf-unei-table.table-one {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 中身が空の段落は高さも余白も持たせない */
  .sf-unei-body > p:empty,
  .sf-contact-body > p:empty,
  .sf-unei-lead > p:empty {
    display: none;
  }

  /* リード文の最後の段落は下マージンを詰める（gapと二重になるため） */
  .sf-unei-lead > p:last-child {
    margin-bottom: 0;
  }

  /* PC用に入れていた「1行目をテーブルに揃える」上余白は、
     縦積みでは不要（横に並んでいないため） */
  .sf-unei-body .sf-unei-lead > p:first-child {
    margin-top: 0;
  }
}

/* --- SP：人気記事ランキング ---
   番号・サムネ・日付・矢印の固定幅でタイトルの幅が足りなくなるため、
   SPでは各要素を縮め、狭い画面では日付を隠してタイトルに幅を回す。 */
@media screen and (max-width: 900px) {
  .sf-ranking-item {
    gap: 10px;
    align-items: flex-start;
  }

  .sf-ranking-num {
    width: 24px;
    font-size: 18px;
    text-align: left;
  }

  .sf-ranking-thumb {
    width: 64px;
  }

  /* タイトルと日付を縦に積むラッパがないため、
     タイトル自身を伸ばし、日付は幅指定を外して自然幅にする */
  .sf-ranking-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    -webkit-line-clamp: 3;
  }

  .sf-ranking-date {
    width: auto;
    font-size: 12px;
    align-self: center;
  }

  .sf-ranking-arrow {
    align-self: center;
  }
}

/* さらに狭い端末では日付を隠してタイトルに幅を回す
   （日付は記事ページ側で読めるため、一覧では優先度が低い） */
@media screen and (max-width: 480px) {
  .sf-ranking-date {
    display: none;
  }
}

/* --- ヘッダーロゴの比率 ---
   width/height 属性と実画像の寸法がずれると描画比が狂うため、
   CSS側でも aspect-ratio を明示して固定する。 */
.logo-header .sf-logo-image {
  aspect-ratio: 2149 / 732;
  width: auto;
  object-fit: contain;
}

/* ロゴの親 p.logo-header が flex:0 1 auto で縮むと、
   max-width:100% のロゴもそれに合わせて縮んでしまう。
   ロゴの箱は縮ませず、高さ基準の自然幅を保たせる。 */
.logo-header {
  flex-shrink: 0;
}

.logo-header a {
  flex-shrink: 0;
}

/* --- PR表記バッジ ---
   記事タイトル下、更新日と同じ行の右端に置く。
   ステマ規制対応の表示なので、装飾しすぎず・見落とされない程度の
   コントラストにする（グレー地＋濃いグレー文字）。 */
.date-tags {
  align-items: center;
}

.sf-pr-badge {
  margin-left: auto; /* 同じ行の右端へ押し出す */
  flex-shrink: 0;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--sf-text-sub);
  background-color: #eef2f6;
  border: 1px solid var(--sf-border);
  border-radius: 4px;
  padding: 4px 8px;
}

/* --- ⑬ パンくず：折り返さず、細い横スクロールにする ---
   1行に固定し、溢れた分だけ横スクロールさせる。 */
#breadcrumb {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

#breadcrumb ol {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
}

#breadcrumb li {
  white-space: nowrap;
  flex-shrink: 0;
}

/* スクロールバーを細くする（Firefox） */
#breadcrumb {
  scrollbar-width: thin;
  scrollbar-color: var(--sf-border) transparent;
}

/* スクロールバーを細くする（Chrome / Safari / Edge） */
#breadcrumb::-webkit-scrollbar {
  height: 4px;
}

#breadcrumb::-webkit-scrollbar-track {
  background: transparent;
}

#breadcrumb::-webkit-scrollbar-thumb {
  background-color: var(--sf-border);
  border-radius: 2px;
}

/* --- h3見出し（冒頭に縦棒） ---
   文字の左に縦棒を立てる形にする（行数に依存しないため）。 */
.article h3 {
  line-height: 1.6;
  padding: 0 0 0 14px;
  border-left: 4px solid var(--sf-accent);
  border-radius: 0;
}

/* 旧スタイルの下線は使わない */
.article h3:after {
  content: none;
}

/* --- SP：記事タイトルのサイズ ---
   h2 よりわずかに大きい程度に収める。 */
@media screen and (max-width: 900px) {
  .article .entry-title,
  .entry-title {
    font-size: 22px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 480px) {
  .article .entry-title,
  .entry-title {
    font-size: 21px;
  }
}

/* --- 目次の余白 ---
   外枠24/28px＋各項目の上下12px＋番号のための左40px＋
   シェブロンのための右28pxが積み上がり、中身に対して枠が間延びしていた。
   番号とシェブロンの位置も、詰めた余白に合わせて寄せ直す。 */
.article .toc {
  padding: 16px 16px;
  margin: 24px auto;
}

.article .toc .toc-title {
  font-size: 16px;
  margin-bottom: 8px;
}

.article .toc .toc-list > li {
  padding: 8px 22px 8px 30px;
}

.article .toc .toc-list > li:before {
  top: 7px;
  font-size: 14px;
}

.article .toc .toc-list > li:after {
  top: 13px;
  right: 2px;
}

/* 最後の項目の点線は不要（枠の下辺と近接して二重線に見える） */
.article .toc .toc-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media screen and (max-width: 900px) {
  .article .toc {
    padding: 14px 12px;
    margin: 20px auto;
  }

  .article .toc .toc-list > li {
    padding: 7px 20px 7px 28px;
    line-height: 1.6;
  }
}

/* --- 関連記事・サイドバー・一覧カードの見出し（div） ---
   記事本文と関係ないナビ要素がh2/h3で出ていて、
   見出し階層（H1>H2>H3）にナビが混ざっていた。
   タグをdivに変えたぶん、hタグのブラウザ既定（block・太字）が
   失われるため、ここで明示する。クラス名・レイアウトは変えていない。 */
.related-entry-heading,
.comment-title,
.widget-title,
.entry-card-title,
.related-entry-card-title {
  display: block;
  font-weight: bold;
}

/* 目次は本文パーツなので、divのまま見出しらしい太さを保つ */
.article .toc .toc-title {
  font-weight: bold;
}

/* --- 目次の余白 ---
   外枠24/28px＋各項目の上下12px＋左40pxが積み上がり、
   項目数が多い記事で目次だけが縦に伸びていた。
   番号の幅に合わせて左インデントを詰め、行間も詰める。 */
.article .toc {
  padding: 18px 20px;
  margin: 24px auto;
}

.article .toc .toc-title {
  margin-bottom: 10px;
}

.article .toc .toc-list > li {
  padding: 7px 24px 7px 30px;
  line-height: 1.6;
}

.article .toc .toc-list > li:before {
  top: 6px;
  font-size: 14px;
}

.article .toc .toc-list > li:after {
  top: 12px;
}

/* 最後の項目の点線は不要（枠の内側で線が浮く） */
.article .toc .toc-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media screen and (max-width: 900px) {
  .article .toc {
    padding: 16px;
  }

  .article .toc .toc-list > li {
    padding: 6px 22px 6px 28px;
    font-size: 14px;
  }
}

/* --- パンくずの右端処理 ---
   ⑬で横スクロール化したとき、ol に width:max-content を持たせたため、
   溢れた分がコンテンツエリアの右余白を越えて画面端まで届き、
   「コンテンツエリアからはみ出している」ように見えていた。
   スクロールの終端に余白を作り、最後の項目が右端に貼りつかないようにする。
   （溢れた要素には margin-right が効かないため、擬似要素で幅を作る） */
#breadcrumb ol::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
}

/* 端が切れていることが分かるよう、右側にフェードをかける。
   スクロールできる合図になり、文字が唐突に途切れて見えなくなる。 */
#breadcrumb {
  position: relative;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

/* 溢れていない時（PC等）はフェード不要 */
@media screen and (min-width: 901px) {
  #breadcrumb {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* --- ランキング「もっと見る」ボタン ---
   その場で4件目以降を開くボタン。
   a 前提の .sf-section-more の見た目を button にも当てる。 */
button.sf-section-more {
  border: 1px solid var(--sf-border);
  background-color: var(--sf-white);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.4;
  transition: background-color 0.15s ease;
}

button.sf-section-more:hover {
  background-color: var(--sf-accent-light);
}

/* 開いている時は「閉じる」なので、開くを示す「›」は出さない */
button.sf-section-more[aria-expanded="true"]:after {
  content: "";
  margin-left: 0;
}

.sf-section-foot {
  display: flex;
  justify-content: center;
}

/* --- SPハンバーガーメニューの中身 ---
   PCサイドバーと同じ検索・カテゴリ・人気記事を入れる。
   PCではサイドバーが担うため、このパネルは出さない。 */
.sf-nav-panel {
  display: none;
}

@media screen and (max-width: 900px) {
  .sf-nav-panel {
    display: block;
    padding: 8px 0 24px;
  }

  .sf-nav-block {
    padding: 18px 0;
    border-top: 1px solid var(--sf-border);
  }

  .sf-nav-block:first-child {
    border-top: none;
    padding-top: 8px;
  }

  .sf-nav-block-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--sf-text);
    margin-bottom: 12px;
  }

  /* --- 検索 --- */
  .sf-nav-search form.search-box {
    display: flex;
    align-items: center;
    background: var(--sf-white);
    border: 1px solid var(--sf-border);
    border-radius: 999px;
    overflow: hidden;
    padding: 4px 4px 4px 16px;
  }

  .sf-nav-search .search-edit {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 4px;
    font-size: 15px;
  }

  .sf-nav-search .search-edit:focus {
    outline: none;
  }

  .sf-nav-search .search-submit {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: var(--sf-accent);
    color: var(--sf-white);
    cursor: pointer;
  }

  /* --- カテゴリ --- */
  .sf-nav-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sf-nav-cat-list > li + li {
    border-top: 1px solid var(--sf-border);
  }

  .sf-nav-cat-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    text-decoration: none;
    color: var(--sf-text);
    font-size: 14px;
  }

  .sf-nav-cat-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--sf-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sf-nav-cat-icon img {
    width: 18px;
    height: 18px;
    max-width: none;
  }

  .sf-nav-cat-name {
    flex: 1;
    min-width: 0;
  }

  .sf-nav-cat-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--sf-accent);
  }

  /* --- 人気記事 --- */
  .sf-nav-rank-list {
    display: flex;
    flex-direction: column;
  }

  .sf-nav-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    text-decoration: none;
    color: var(--sf-text);
  }

  .sf-nav-rank-item + .sf-nav-rank-item {
    border-top: 1px solid var(--sf-border);
  }

  .sf-nav-rank-num {
    flex-shrink: 0;
    width: 22px;
    font-size: 15px;
    font-weight: bold;
    color: var(--sf-accent);
  }

  .sf-nav-rank-thumb {
    flex-shrink: 0;
    width: 56px;
    aspect-ratio: 16 / 9;
    border-radius: var(--sf-radius-s);
    overflow: hidden;
    background-color: var(--sf-accent-light);
  }

  .sf-nav-rank-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sf-nav-rank-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* --- 運営者情報などの固定リンク --- */
  .sf-nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  .sf-nav-links a {
    font-size: 13px;
    color: var(--sf-text-sub);
    text-decoration: none;
  }

  /* 元からある一列メニュー（カテゴリ）は、パネル側と重複するので隠す */
  #navi-in > ul {
    display: none;
  }

  /* メニューを開いている間は背面のスクロールを止める */
  body.sf-nav-open {
    overflow: hidden;
  }

  /* パネルが長いので、ヘッダー下から画面下端までスクロールできるようにする */
  body.sf-nav-open #navi {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ハンバーガー内のカテゴリ件数が右端で切れないよう、
   パネル全体に右余白を持たせる（#naviのスクロールバー分も考慮） */
@media screen and (max-width: 900px) {
  .sf-nav-panel {
    padding-right: 4px;
  }

  .sf-nav-cat-list a,
  .sf-nav-rank-item {
    padding-right: 8px;
  }
}

/* hidden属性より .sf-ranking-item の display:flex が強く、
   4件目以降が初期状態から見えてしまっていた。
   属性で隠したものは必ず隠れるようにする。 */
.sf-ranking-item[hidden] {
  display: none;
}

/* --- 本文画像のレイアウトシフト対策 ---
   当初はCSSで最低領域を確保していたが、本文画像を uploads へ移行し
   inc/content-images.php で width/height を実寸から補うようにしたため、
   応急処置は不要になった。
   それでも寸法が取れない画像（外部URL等）のための保険だけ残す。 */
.entry-content img:not([width]):not([height]) {
  min-height: 80px;
  background-color: var(--sf-accent-light);
  border-radius: var(--sf-radius-s);
}

/* --- ヒーローイラスト ---
   スロットは「画像が未配置のときプレースホルダを見せる箱」として
   aspect-ratio:4/3 ＋ 薄青背景 ＋ 角丸で作られていた。
   実画像は 543x724 の縦長・背景透過なので、そのままだと
   横長の青い箱の中に縦長の絵が小さく収まり、左右に青が余る。

   画像が入っている時だけ、箱をやめて画像そのものを見せる：
   ・背景色と角丸を外す（透過PNGなのでヒーローの薄青地に溶け込む）
   ・aspect-ratio を画像の比率に合わせる
   ・object-fit は contain のまま（絵を切らない） */
.sf-hero-visual-slot:has(img) {
  /* 画像は透明余白を切り落とした 541x588。スロットもその比率に合わせる。 */
  aspect-ratio: 541 / 588;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
}

/* :has() が使えないブラウザ向けの保険。
   画像自体に背景を透かせておけば、箱の青が見えても違和感は小さい。 */
.sf-hero-visual-slot img {
  object-fit: contain;
}

/* イラストのサイズ
   コンテナ幅に対してテキストとイラストの間に空きが出過ぎないよう、
   イラスト幅とヒーローの上下余白を調整する。 */
.sf-hero-visual {
  width: 440px;
  max-width: 42%;
}

/* ヒーロー全体の上下余白。イラストが大きくなったぶん詰める
   （元は 64px 0 72px で、イラスト上下に80px前後の空きが出ていた） */
.sf-hero {
  padding: 40px 0 48px;
}

@media screen and (max-width: 900px) {
  /* SPは縦積みで先頭に出る。幅を取りすぎるとファーストビューが
     イラストで埋まるが、小さすぎても弱いので7割程度にする */
  /* SPはイラストをメインコピーの右に小さく添える。
     縦長イラストをFVに大きく出すと、肝心のコピーと検索窓が
     画面下へ押し出されてしまうため。
     HTMLは変えず、grid で「コピー＋イラスト」を横並びにし、
     説明文と検索窓はその下に全幅で置く。 */
  .sf-hero-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "lead    visual"
      "title   visual"
      "desc    desc"
      "search  search";
    align-items: start;
    column-gap: 12px;
    row-gap: 0;
  }

  /* .sf-hero-text の中身を grid の各エリアへ直接置く
     （text自体はラッパーとして display:contents で透過させる） */
  .sf-hero-text {
    display: contents;
  }

  .sf-hero-lead   { grid-area: lead; }
  .sf-hero-title  { grid-area: title; }
  .sf-hero-desc   { grid-area: desc; }
  .sf-hero-search { grid-area: search; }

  /* リード文はイラストと同じ行にあるぶん幅が狭く、
     文字サイズと余白を詰めて1行に収める。 */
  .sf-hero-lead {
    font-size: 13px;
    gap: 6px;
  }

  .sf-hero-lead .sf-wave {
    width: 16px;
  }

  .sf-hero-visual {
    grid-area: visual;
    order: 0;
    width: 96px;
    max-width: 28vw;
    margin: 0;
    align-self: center;
  }

  .sf-hero-visual-slot:has(img) {
    aspect-ratio: 541 / 588;
  }

  .sf-hero-lead {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .sf-hero-title {
    font-size: 26px;
    margin-bottom: 16px;
  }

  .sf-hero-desc {
    margin-bottom: 20px;
  }

  .sf-hero {
    padding: 20px 0 28px;
  }
}

@media screen and (max-width: 480px) {
  .sf-hero-visual {
    width: 96px;
    max-width: 30vw;
  }

  .sf-hero-title {
    font-size: 24px;
  }
}

/* --- カテゴリ一覧（比較・選び方 / サービス別） ---
   ヒーローで「掲載サービス数：◯サービス」と数を出しているのに、
   一覧は比較記事と個別サービス記事が混ざっていて対応していなかった。
   分類は sf_flag「商標記事」タグで、◯サービスの数え方と同じ基準。

   既存のカード見た目は #list.list（ID+クラス）で定義されているが、
   IDは1ページに1つしか使えない。2つ目のリストにも同じ見た目を当てるため、
   .list-wrap 配下の .list に対しても同じ指定を効かせる。 */
.list-wrap .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-wrap .list .entry-card-wrap {
  display: block;
  text-decoration: none;
  background-color: var(--sf-white);
  border: none;
  border-radius: var(--sf-radius-m);
}

.list-wrap .list .entry-card-title {
  color: var(--sf-text);
}

/* --- セクションの見出し --- */
.sf-cat-list-block + .sf-cat-list-block {
  margin-top: 48px;
}

.sf-cat-list-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}

.sf-cat-list-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
  color: var(--sf-text);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* 記事本文用のh2装飾（連番カウンター・波下線）はここでは使わない */
.sf-cat-list-title:before,
.sf-cat-list-title:after {
  content: none;
}

.sf-cat-list-count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: bold;
  color: var(--sf-accent);
  background-color: var(--sf-accent-light);
  border-radius: 999px;
  padding: 3px 12px;
}

.sf-cat-list-lead {
  font-size: 14px;
  color: var(--sf-text-sub);
  margin: 0 0 20px;
}

@media screen and (max-width: 900px) {
  .sf-cat-list-block + .sf-cat-list-block {
    margin-top: 36px;
  }

  .sf-cat-list-title {
    font-size: 18px;
  }

  .sf-cat-list-lead {
    font-size: 13px;
    margin-bottom: 16px;
  }
}


/* カードが列幅を超えて伸びないようにする（中身の最小幅対策） */
.list-wrap .list > li {
  min-width: 0;
}

/* SPの列数。既存の #list.list 用メディアクエリはIDが要るため、
   2つ目のリスト（IDなし）には効かない。
   このブロックを .list-wrap .list の3カラム指定より後ろに置いて、
   両方のリストに同じ列数が当たるようにする。 */
@media screen and (max-width: 900px) {
  .list-wrap .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media screen and (max-width: 480px) {
  .list-wrap .list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- カテゴリFV画像の枠 ---
   どんな比率の画像を入れても見た目が変わらないよう 16:9 に固定する。
   はみ出た部分は object-fit:cover で中央トリミングされる。 */
.sf-cat-hero-visual {
  aspect-ratio: 16 / 9;
}

/* SPは全幅になるぶん高さが出過ぎないよう、やや横長にする */
@media screen and (max-width: 900px) {
  .sf-cat-hero-visual {
    aspect-ratio: 2 / 1;
  }
}

/* --- 運営者情報の見出しとアイコンの位置揃え ---
   .sf-unei-heading 単体では .article h2（要素セレクタ2つ分）に
   詳細度で負け、記事本文用の margin/padding が残ってしまう。
   .article を前置して確実に打ち消す。 */
.article h2.sf-unei-heading,
.sf-unei-heading {
  margin: 0;
  padding: 0;
}