/* ============================================================
   テーマ: hoikuen（保育園事務）— 「横罫ノート・やわらか」
   横罫ノート / コーラル / インデックス付箋ハイライト / 手書き調
   書体: Klee One ＋ Noto Sans Mono
   ============================================================ */
:root {
  --paper:    #FCF8F4;
  --ink:      #2A211C;
  --ink-soft: #6E5E55;
  --grid:     #F0E3DA;
  --rule:     #E8DAD0;
  --pen:      #E0685B;  /* コーラル */
  --pen-deep: #C24F42;
  --marker:   #FBDDD4;
  --disp: "Klee One", "Noto Sans JP", cursive;
  --mono: "Noto Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
/* 地：横罫ノート */
body {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px);
  background-size: 100% 30px;
  background-position: 0 12px;
  line-height: 1.95;
}
.masthead, .site-header { border-bottom: 2px solid var(--pen); border-top: none; background: var(--paper); }
.site-footer { border-top: 2px solid var(--pen); }
/* 蛍光一筆 → 付箋タブ（角丸・わずかに傾く）*/
.swipe::before {
  top: 8%; bottom: 6%; left: -.12em; right: -.12em;
  background: var(--marker); transform: rotate(-1.2deg); border-radius: 5px; mix-blend-mode: multiply;
}
/* 見出し：インデックス付箋（角丸の塗りタブ）*/
h2 { border-left: none; padding-left: 0; }
.article-body h2 { border-left: none; padding-left: 0; }
.article-body h2::before {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em;
  background: var(--pen); border-radius: 3px; vertical-align: middle;
}
h3::before { content: "● "; color: var(--pen); font-size: .8em; }

/* ── 変数化されていない黄/赤tintを媒体色へ ── */
blockquote { background: color-mix(in srgb, var(--marker) 45%, transparent); border-left-color: var(--pen); }
.toc__list a:hover, .toc__list a:focus-visible { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.topicnav__item:hover, .topicnav__item.is-active { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.tokushu-cta__link { background: color-mix(in srgb, var(--marker) 35%, transparent); }
.tokushu-cta__link:hover { background: color-mix(in srgb, var(--marker) 55%, transparent); }
a.tk-item:hover { background: color-mix(in srgb, var(--marker) 28%, transparent); }
.thumb__mark { background: color-mix(in srgb, var(--marker) 85%, transparent); }
.calc-tab:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }
.calc-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 14%, transparent); }
.cta__btn--ghost:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }