/* ============================================
   すっきりノート カスタムCSS（Cocoon用）
   Figmaカンプ: https://www.figma.com/design/yGstDQuQbfm1V9LF1eyH68
   適用先: 子テーマ style.css（全文をテーマエディターに貼り付けて同期）
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Klee+One:wght@600&display=swap');

:root {
  --sn-cream: #FAF6F0;
  --sn-beige: #EDE4D8;
  --sn-img-beige: #E8DCCB;
  --sn-brown: #5C4F43;
  --sn-accent: #A98E71;
  --sn-green: #9CAF97;
  --sn-terracotta: #C97B60;
  --sn-rakuten: #BF4444;
}

/* ---- 全体 ---- */
body {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  background: var(--sn-cream);
  color: var(--sn-brown);
}
a { color: var(--sn-accent); }

/* ---- ヘッダー ---- */
.header-container, .header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(92, 79, 67, 0.06);
}
.site-name-text {
  color: var(--sn-brown);
  font-weight: 700;
}
.tagline { color: var(--sn-accent); }
.navi-in > ul li a {
  color: var(--sn-brown);
  font-weight: 500;
}
.navi-in > ul li a:hover {
  background: var(--sn-cream);
  color: var(--sn-accent);
}

/* ---- 記事一覧カード ---- */
.entry-card-wrap {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(92, 79, 67, 0.08);
  padding: 0;
  margin-bottom: 24px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.entry-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(92, 79, 67, 0.12);
}
.entry-card { padding: 0 0 16px; }
.entry-card-thumb { margin: 0 0 12px; }
.entry-card-thumb img { border-radius: 0; }
.entry-card-title {
  color: var(--sn-brown);
  font-weight: 700;
  padding: 0 20px;
}
.entry-card-snippet, .entry-card-meta { padding: 0 20px; color: var(--sn-accent); }

/* カテゴリラベル（ピル型・色分け）
   Cocoonは .cat-label-{カテゴリID} で出力される（3=収納 4=インテリア 5=愛用品） */
.cat-label {
  background: var(--sn-green);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 5px 16px !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.entry-card-thumb .cat-label {
  top: 12px;
  left: 12px;
}
.cat-label-3 { background: var(--sn-green); }
.cat-label-4 { background: var(--sn-terracotta); }
.cat-label-5 { background: var(--sn-accent); }

/* ---- 記事本文 ---- */
.article h2 {
  background: var(--sn-cream);
  color: var(--sn-brown);
  border-radius: 12px;
  border-left: 6px solid var(--sn-green);
  padding: 14px 18px;
  font-weight: 700;
}
.article h3 {
  border-left: 4px solid var(--sn-accent);
  border-bottom: none;
  padding: 6px 14px;
  color: var(--sn-brown);
}
.article blockquote {
  background: #fff;
  border-left: 4px solid var(--sn-beige);
  border-radius: 12px;
}
.article img { border-radius: 16px; }

/* ---- サイドバー ---- */
.sidebar .widget, .sidebar > div {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(92, 79, 67, 0.08);
  padding: 24px;
  margin-bottom: 32px;
}
.sidebar h3 {
  background: none;
  color: var(--sn-brown);
  font-weight: 700;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--sn-beige);
}

/* ---- ボタン・ページネーション ---- */
.pagination .current, .pagination a:hover {
  background: var(--sn-brown);
  color: #fff;
  border-radius: 100px;
}
.go-to-top-button { background: var(--sn-accent); border-radius: 50%; }

/* 楽天・商品リンクボタン（かんたんリンク/Rinker想定） */
.rakuten-btn a, .easyLink-r-btn a, div.easyLink-info-btn-rakuten a {
  background: var(--sn-rakuten) !important;
  border-radius: 100px !important;
  font-weight: 500;
}

/* 商品カード（かんたんリンク） */
div.easyLink-box {
  background: var(--sn-cream);
  border: 1.5px solid rgba(169, 142, 113, 0.4);
  border-radius: 16px;
}

/* ---- フッター ---- */
.footer {
  background: var(--sn-brown);
  color: #fff;
}
.footer a, .footer .footer-bottom-content { color: rgba(255, 255, 255, 0.85); }

/* ---- 汎用パーツ ---- */
/* PR表記（記事冒頭で <p class="sn-pr">…</p> として使用） */
.sn-pr {
  font-size: 12px;
  color: var(--sn-accent);
}
/* 商品リンク挿入位置の目印（公開前に置換する） */
.sn-product-placeholder {
  background: #fff;
  border: 2px dashed var(--sn-terracotta);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  color: var(--sn-terracotta);
  font-weight: 500;
}

/* ============================================
   追補：アピールエリア（ヒーロー帯）の仕上げ
   ============================================ */
.appeal {
  background: var(--sn-beige);
  position: relative;
  padding: 56px 0 72px;
}
.appeal-in { background: none; }
.appeal-content,
.appeal-message {
  color: var(--sn-brown);
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: none;
}
/* 波型（スカラップ）の下縁 */
.appeal::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 30px;
  background: radial-gradient(circle at 50% 100%, var(--sn-cream) 28px, transparent 29px);
  background-size: 62px 60px;
  background-position: 50% 100%;
  background-repeat: repeat-x;
}
@media screen and (max-width: 480px) {
  .appeal { padding: 36px 0 52px; }
  .appeal-content, .appeal-message { font-size: 19px; }
}
.ect-vertical-card-2-wrap .a-wrap { margin-bottom: 8px; }

/* ============================================
   追補2：ヘッダーの微調整
   ============================================ */
.header .tagline { display: none; }
.header-container-in.hlt-top-menu { align-items: center; }
.hlt-top-menu .header { padding: 14px 0; }
.site-name-text { font-size: 26px; }
.hlt-top-menu .navi { background: transparent; }
.navi-in > ul li a {
  font-size: 15px;
  font-weight: 500;
  color: var(--sn-brown);
  border-radius: 100px;
  padding: 0 18px;
}
.navi-in > ul li a:hover {
  background: var(--sn-cream);
  color: var(--sn-accent);
}

/* ============================================
   追補3：ヒーロー白箱の除去とサイドバー調整
   ============================================ */
.appeal-content {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.sidebar h2, .sidebar h3, .sidebar .widgettitle {
  background: none;
  padding: 0 0 8px;
  color: var(--sn-brown);
  font-weight: 700;
  font-size: 18px;
  border-bottom: 2px solid var(--sn-beige);
}
.search-submit, .sidebar input[type="submit"] {
  background: var(--sn-brown);
  border: none;
  border-radius: 100px;
}

/* ============================================
   追補5：モバイルの使い勝手改善
   ============================================ */
@media screen and (max-width: 834px) {
  /* ヒーロー帯：文字サイズと余白 */
  .appeal { padding: 32px 0 48px; }
  .appeal-content, .appeal-message,
  .appeal-content h1, .appeal-message-title {
    font-size: 19px !important;
    line-height: 1.8;
    padding: 0 24px;
  }

  /* スライドインメニュー（ハンバーガー） */
  .menu-content, .sidebar-menu-content {
    background: var(--sn-cream);
  }
  .menu-content {
    width: 82%;
    max-width: 320px;
  }
  .menu-caption, .sidebar-menu-caption {
    color: var(--sn-accent);
    font-weight: 700;
    border-bottom: 2px solid var(--sn-beige);
  }
  .menu-close-button { color: var(--sn-accent); }
  .menu-content a, .menu-drawer a {
    color: var(--sn-brown);
    font-weight: 500;
    padding: 14px 18px;
    border-radius: 12px;
  }
  .menu-content a:hover, .menu-content a:active { background: #fff; }

  /* 下部の固定メニュー */
  .mobile-menu-buttons {
    background: #fff;
    border-top: 1px solid var(--sn-beige);
    box-shadow: 0 -2px 10px rgba(92, 79, 67, 0.08);
  }
  .mobile-menu-buttons .menu-button > a,
  .mobile-menu-buttons .menu-icon,
  .mobile-menu-buttons .menu-caption {
    color: var(--sn-accent);
    border: none;
  }

  /* 記事カードの文字バランス */
  .entry-card-title { font-size: 17px; }
  .entry-card-snippet { font-size: 13px; }
}

/* ============================================
   追補6：記事カードのサイズ・間隔調整
   ============================================ */
/* 2列グリッドの間隔を広く（横32px） */
.ect-2-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.ect-2-columns > .a-wrap {
  width: calc(50% - 16px);
  margin: 0;
}
.entry-card-wrap { margin-bottom: 0; }

/* カードの高さを抑える：タイトル2行・抜粋2行で省略 */
.entry-card-title {
  font-size: 16px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-card-snippet {
  font-size: 13px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* スマホは1列・間隔20px */
@media screen and (max-width: 834px) {
  .ect-2-columns { gap: 20px; }
  .ect-2-columns > .a-wrap { width: 100%; }
}

/* ============================================
   追補7：モバイルの横はみ出し修正
   ============================================ */
/* ページ全体の横スクロール・はみ出しを防ぐ */
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; }

/* SNSシェアボタン：画面幅に収める＋角丸 */
.sns-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sns-share-buttons a {
  flex: 1 1 calc(33.333% - 6px);
  min-width: 0;
  margin: 0;
  border-radius: 100px;
}

/* かんたんリンク（商品カード）のはみ出し防止 */
div[id^="msmaflink"], .easyLink-box {
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* ============================================
   追補8：トップページKVリニューアル（案B・手書きドゥードル）
   HTML: assets/kv-widget.html（ウィジェット「インデックスリストトップ」）
   ============================================ */
/* 旧ヒーロー帯（アピールエリア）はKVに置き換えたため非表示 */
.appeal { display: none; }
/* KVはトップページ限定（index-topウィジェットはカテゴリ一覧にも出るため） */
body:not(.home) .sn-kv { display: none; }

.sn-kv {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  margin: 0 0 40px;
  box-shadow: 0 4px 16px rgba(92, 79, 67, 0.08);
  min-height: 440px;
}
/* スカラップ下縁 */
.sn-kv::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 26px;
  background: radial-gradient(circle at 50% 100%, var(--sn-beige) 24px, transparent 25px);
  background-size: 54px 52px;
  background-position: 50% 100%;
  background-repeat: repeat-x;
  z-index: 4;
  pointer-events: none;
}

/* --- コピー側 --- */
.sn-kv-copy {
  position: relative;
  z-index: 3;
  flex: 1 1 56%;
  padding: 60px 16px 96px 48px;
}
.sn-kv-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--sn-brown);
  margin: 0 0 16px;
  white-space: nowrap;
}
.sn-kv-wavy { position: relative; display: inline-block; }
.sn-kv-wavy::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14' preserveAspectRatio='none'><path d='M0 10 Q12 2 24 10 T48 10' fill='none' stroke='%23C97B60' stroke-width='4'/></svg>") repeat-x 0 100% / 48px 10px;
  animation: sn-wave-in 0.7s ease-out 0.5s both;
}
.sn-kv-sub {
  font-family: 'Klee One', 'Zen Maru Gothic', sans-serif;
  font-weight: 600;
  color: var(--sn-accent);
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 28px;
}
.sn-br-sp { display: none; }
.sn-kv-cta {
  display: inline-block;
  background: var(--sn-brown);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 32px;
  border-radius: 100px;
  text-decoration: none;
  transform: rotate(-1deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sn-kv-cta:hover {
  transform: rotate(-1deg) translateY(-3px);
  box-shadow: 0 8px 18px rgba(92, 79, 67, 0.25);
}

/* --- ビジュアル側（棚イラスト＋装飾） --- */
.sn-kv-visual {
  position: relative;
  z-index: 1;
  flex: 1 1 44%;
  min-height: 380px;
  animation: sn-rise 0.8s ease-out both;
}
/* 装飾ステージ：560×480の固定座標系。画面幅に応じて丸ごとscaleする */
.sn-kv-stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 560px;
  height: 480px;
  transform: translateX(-50%) scale(1);
  transform-origin: bottom center;
}
.sn-kv-shelf {
  position: absolute;
  width: 330px;
  left: 115px;
  bottom: 50px;
}
.sn-kv-ground {
  position: absolute;
  left: 105px;
  bottom: 42px;
  width: 350px;
  height: 24px;
  border-radius: 50%;
  background: rgba(169, 142, 113, 0.25);
  filter: blur(1px);
}
/* 葉っぱはゆっくり揺れる */
.sn-kv-leaf {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sn-sway 3.6s ease-in-out infinite alternate;
}

/* ブロブ（背景の有機形） */
.sn-kv-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sn-kv-blob--pink {
  width: 220px;
  height: 200px;
  left: -70px;
  top: -70px;
  background: rgba(201, 123, 96, 0.12);
  animation: sn-drift 16s ease-in-out infinite alternate;
}
.sn-kv-blob--green {
  width: 520px;
  height: 450px;
  left: 15px;
  top: 12px;
  background: rgba(156, 175, 151, 0.16);
  animation: sn-drift 13s ease-in-out infinite alternate;
}
.sn-kv-blob--beige {
  width: 150px;
  height: 140px;
  right: 15px;
  bottom: 35px;
  background: var(--sn-beige);
  animation: sn-drift 11s ease-in-out 2s infinite alternate-reverse;
}

/* 吹き出しバッジ（ふわふわ浮遊） */
.sn-kv-badge {
  position: absolute;
  z-index: 3;
  font-family: 'Klee One', 'Zen Maru Gothic', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--sn-brown);
  background: #fff;
  border: 2px dashed var(--sn-green);
  border-radius: 100px;
  padding: 8px 20px;
  white-space: nowrap;
  transform: rotate(var(--tilt, 0deg));
  animation: sn-float 3.4s ease-in-out infinite alternate;
}
.sn-kv-badge--1 { left: 0; top: 85px; --tilt: -6deg; border-color: var(--sn-green); }
.sn-kv-badge--2 { right: 5px; top: 15px; --tilt: 4deg; border-color: var(--sn-terracotta); animation-duration: 3.9s; animation-delay: 0.7s; }
.sn-kv-badge--3 { left: -15px; bottom: 130px; --tilt: -3deg; border-color: var(--sn-accent); animation-delay: 1.3s; }

/* キラキラ（＋印の明滅） */
.sn-kv-spark {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  background:
    linear-gradient(currentColor, currentColor) center / 3.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 3.5px no-repeat;
  animation: sn-twinkle 2.6s ease-in-out infinite;
}
.sn-kv-spark--1 { left: -5px; top: 10px; color: var(--sn-green); }
.sn-kv-spark--2 { right: -8px; top: 200px; color: var(--sn-terracotta); animation-delay: 0.9s; }
.sn-kv-spark--3 { right: 60px; bottom: 12px; color: var(--sn-accent); animation-delay: 1.7s; }

/* 丸ドット */
.sn-kv-dot { position: absolute; z-index: 2; border-radius: 50%; }
.sn-kv-dot--1 { width: 12px; height: 12px; right: 12px; top: 265px; background: rgba(201, 123, 96, 0.85); }
.sn-kv-dot--2 { width: 10px; height: 10px; left: 38px; top: 240px; background: rgba(156, 175, 151, 0.85); }

/* ステージの段階スケール（装飾の相対位置は常に固定） */
@media screen and (max-width: 1240px) {
  .sn-kv-stage { transform: translateX(-50%) scale(0.9); }
}
@media screen and (max-width: 1080px) {
  .sn-kv-stage { transform: translateX(-50%) scale(0.8); }
  .sn-kv-visual { min-height: 340px; }
}
@media screen and (max-width: 940px) {
  .sn-kv-stage { transform: translateX(-50%) scale(0.7); }
}

/* --- アニメーション定義 --- */
@keyframes sn-float {
  from { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  to   { transform: translateY(-9px) rotate(calc(var(--tilt, 0deg) + 2.5deg)); }
}
@keyframes sn-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(14deg); }
  50%      { opacity: 1; transform: scale(1.1) rotate(28deg); }
}
@keyframes sn-sway {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3.5deg); }
}
@keyframes sn-drift {
  to { transform: translate(8px, 12px) scale(1.04); }
}
@keyframes sn-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sn-wave-in {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0); }
}

/* --- スマホ（縦積み） --- */
@media screen and (max-width: 834px) {
  .sn-kv { flex-direction: column; min-height: 0; margin-bottom: 28px; }
  .sn-kv-copy { padding: 36px 24px 8px; }
  .sn-kv-title { font-size: min(26px, 6.9vw); }
  .sn-kv-sub { font-size: 14px; }
  .sn-br-sp { display: inline; }
  .sn-kv-visual { min-height: 350px; margin-top: 4px; }
  .sn-kv-stage { transform: translateX(-50%) scale(0.72); }
}
@media screen and (max-width: 390px) {
  .sn-kv-visual { min-height: 310px; }
  .sn-kv-stage { transform: translateX(-50%) scale(0.62); }
  .sn-kv-blob--pink { width: 140px; height: 130px; left: -50px; top: -50px; }
  .sn-kv-wavy::after { height: 8px; background-size: 38px 8px; bottom: -1px; }
  .sn-kv::after { height: 20px; background-size: 44px 42px; background-image: radial-gradient(circle at 50% 100%, var(--sn-beige) 19px, transparent 20px); }
}

/* 動きを減らす設定のユーザーには静止表示 */
@media (prefers-reduced-motion: reduce) {
  .sn-kv *, .sn-kv::after, .sn-kv-wavy::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   追補9：トップページレイアウトのカンプ準拠化
   （KV全幅帯・新着記事見出し・もっと見るボタン・
     サイドバー＝プロフィール/人気の記事/カテゴリ）
   ============================================ */
/* KVをコンテンツ上部（content-top）で全幅帯に */
.sn-kv {
  width: 100vw;
  margin: 0 0 8px calc(50% - 50vw);
  border-radius: 0;
  box-shadow: none;
  min-height: 480px;
  padding: 0 max(24px, calc(50vw - 620px));
}
.sn-kv-title { font-size: clamp(30px, 2.8vw, 40px); }
.content-top { margin-top: 0; margin-bottom: 32px; }
.widget-content-top { margin: 0; }
/* トップページ（1ページ目）以外ではKV関連パーツを出さない
   ※ /page/2/ 以降も body.home が付くので .paged も除外する */
body:not(.home) .content-top,
body:not(.home) .sn-section-title,
body:not(.home) .sn-more-wrap,
body.paged .content-top,
body.paged .sn-section-title,
body.paged .sn-more-wrap { display: none; }

/* 一覧系ページは左右カラムの白背景を消してクリーム地にカードを浮かせる
   （記事・固定ページは本文の読みやすさのため白のまま） */
.home .main, .home .sidebar,
.archive .main, .archive .sidebar,
.search .main, .search .sidebar {
  background: transparent;
}

/* 「新着記事」セクション見出し（緑バー付き） */
.sn-section-title {
  position: relative;
  font-size: 26px;
  font-weight: 700;
  color: var(--sn-brown);
  padding-left: 20px;
  margin: 8px 0 4px;
}
.sn-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 32px;
  border-radius: 6px;
  background: var(--sn-green);
}

/* 「記事一覧を見る」ボタン（トップはページネーションの代わり） */
.sn-more-wrap { text-align: center; margin: 40px 0 16px; }
.sn-more {
  display: inline-block;
  background: #fff;
  border: 2px solid var(--sn-brown);
  color: var(--sn-brown) !important;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 44px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sn-more:hover {
  background: var(--sn-brown);
  color: #fff !important;
  transform: translateY(-2px);
}
/* 1ページ目だけボタンに置き換え。2ページ目以降は通常のページネーション */
.home:not(.paged) .pagination { display: none; }

/* サイドバー：プロフィール */
.sn-profile { text-align: center; }
.sn-profile-icon {
  width: 96px;
  height: 96px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background: var(--sn-beige);
  font-size: 44px;
  line-height: 96px;
}
.sn-profile-name { font-weight: 700; font-size: 17px; margin: 0 0 10px; color: var(--sn-brown); }
.sn-profile-desc { font-size: 13px; line-height: 1.9; color: var(--sn-accent); margin: 0 0 12px; text-align: left; }
.sn-profile-link { font-size: 13px; font-weight: 700; }

/* サイドバー：人気の記事（手動リスト） */
.sn-popular { list-style: none; margin: 0; padding: 0; }
.sn-popular li { border-bottom: 1px dashed var(--sn-beige); }
.sn-popular li:last-child { border-bottom: none; }
.sn-popular a {
  display: block;
  padding: 12px 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sn-brown);
  text-decoration: none;
}
.sn-popular a:hover { color: var(--sn-accent); }

/* サイドバー：カテゴリ（色ドット付き） */
.sidebar .widget_categories ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget_categories li {
  position: relative;
  padding: 10px 2px 10px 22px;
  border-bottom: 1px dashed var(--sn-beige);
  font-size: 14px;
}
.sidebar .widget_categories li:last-child { border-bottom: none; }
.sidebar .widget_categories li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sn-green);
}
.sidebar .widget_categories li:nth-child(2)::before { background: var(--sn-terracotta); }
.sidebar .widget_categories li:nth-child(3)::before { background: var(--sn-accent); }
.sidebar .widget_categories li a { color: var(--sn-brown); text-decoration: none; }
.sidebar .widget_categories li a:hover { color: var(--sn-accent); }

/* スマホ：全幅帯の余白リセット */
@media screen and (max-width: 834px) {
  .sn-kv { min-height: 0; padding: 0; }
  .sn-section-title { font-size: 21px; margin: 4px 0 0; }
  .sn-section-title::before { height: 26px; }
}