/* =========================================================
  Notebook Rich Template v1.0
  使い回し前提の「ノートに書いた風」共通CSS
  - 手書きフォント前提（例：Yomogi / M PLUS Rounded 1c）
  - リッチな“マーカー / ペン / メモ”表現をユーティリティ化
  - 記事ごとに使い回せるように .note-theme をスコープに採用
  ---------------------------------------------------------
  〈推奨フォント読み込み例〉
  <link href="https://fonts.googleapis.com/css2?family=Yomogi&family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
  〈使い方〉
  - 記事本文のラッパーに .note-theme を付与（Gutenbergならグループブロックに）
  - 既存テンプレで <article> 直下の div があるなら class="note-theme" を追加
========================================================= */

/* ===============================
   TOC (目次) – Notebook Simple
   =============================== */
:root {
  --toc-ink: #2e2a28;
  --toc-sub: #6b6662;
  --toc-bg: #fffef9;
  --toc-border: #e4ddd6;
  --toc-marker: #fff6a7;     /* マーカー黄 */
  --toc-marker-alt: #ffd6e2; /* マーカーピンク */
  --toc-link: #3a70c7;       /* 青ペン風 */
  --toc-link-hover: #2957a5;
}

header.singular-header.entry-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 目次コンテナ */
.ys-toc {
  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: 12px;
  padding: .9rem 1rem;
  color: var(--toc-ink);
  max-width: 720px;
  margin: 1.5rem auto;
}

/* タイトル：マーカー下線 */
.ys-toc__title {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: 0 .25em .1em;
  font-weight: 700;
  letter-spacing: .02em;
  position: relative;
}
.ys-toc__title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .15em;
  height: .6em;
  background: var(--toc-marker-alt);
  z-index: -1;
  transform: rotate(-1.5deg);
  border-radius: 2px;
}

/* 目次のリストマーカーを消す */
.ys-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ys-toc__list > .ys-toc__item > .ys-toc__link::before {
  content: "★";
  margin-right: 4px; /* 星と文字の間隔調整 */
}

.ys-toc__item {
  margin: 8px 0 !important;
  border-bottom: 0 !important;
  padding-left: 0; /* 左余白もリセット */
}
.ys-toc__item::before {
  display: none; /* 擬似要素での「・」も消す */
}

a.ys-toc__link {
  border-bottom: none !important;
}
.ys-toc__link:hover,
.ys-toc__link:focus-visible {
  color: var(--toc-link-hover);
  border-bottom-color: var(--toc-link-hover); /* hover時に濃い色 */
  background: linear-gradient(transparent 60%, var(--toc-marker) 60%);
  border-radius: 2px;
}

.ys-toc__children {
  padding-left: 0 !important;
}


:root {
  /* Colors */
  --ink: #2e2a28;
  --ink-sub: #4a4643;
  --paper: #fffefd;
  --paper-alt: #fffcf5;
  --divider: #ded8d3;

  /* Marker colors */
  --mk-yellow: #fff6a7;
  --mk-pink:   #ffd6e2;
  --mk-mint:   #dff6e6;
  --mk-blue:   #cfe8ff;
  --mk-violet: #eadcff;

  /* Pen colors */
  --pen-red:   #e15b64;
  --pen-blue:  #3a70c7;
  --pen-green: #2e8b57;

  /* Layout */
  --w-max: 760px;
  --gap-x: 2.0rem;
  --gap-y: 1.2rem;

  /* Radius & shadow */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-note: 6px 6px 0 rgba(0,0,0,.06);
}

/* スコープ：ノートテーマ */
.note-theme {
  max-width: min(var(--w-max), 92vw);
  margin: 0 auto 0;
  padding: clamp(1.2rem, 3vw, 2rem);
  color: var(--ink);
  font-size: clamp(15.5px, 1.05rem, 18px);
}

/* 見出し：手書き＋マーカー（下地にマーカーが走る） */
.note-theme h2,
.note-theme h3 {
  position: relative;
  display: inline-block;
  margin: 2.2rem 0 1rem;
  padding: 0 .25em .1em;
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 2px solid rgba(0,0,0,.25);
}

/* h2の直後のh3が横並びにならないように */
.note-theme h2 + h3 {
  display: table;  /* tableは内容に合わせて幅が決まり、かつブロック要素として振る舞う */
}

.note-theme h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
.note-theme h3 { font-size: clamp(1.15rem, 2.0vw, 1.35rem); }

.note-theme h2::after,
.note-theme h3::after {
  content: "";
  position: absolute;
  inset: auto 0 .2em 0;
  height: .7em;
  background: var(--mk-pink);
  z-index: -1;
  /* transform: rotate(-1.4deg); */
  opacity: .95;
  border-radius: 2px;
}

.note-theme h2::before {
  content: "★";
  font-size: 1.1em;
  margin-right: .2em;
}

/* 見出し 色バリエーション（クラス追加で切替） */
.note-theme .mk-yellow::after { background: var(--mk-yellow); }
.note-theme .mk-mint::after   { background: var(--mk-mint); }
.note-theme .mk-blue::after   { background: var(--mk-blue); }
.note-theme .mk-violet::after { background: var(--mk-violet); }

/* 段落 */
.note-theme p.lead, .note-theme div.lead {
  background: linear-gradient(180deg,#fff, var(--paper-alt));
  border: 1px dashed var(--divider);
  border-radius: var(--r-md);
  padding: .9rem 1rem;
  text-indent: 0;
}

/* 強調：マーカー（インライン） */
.note-theme strong {
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--mk-yellow) 58%);
  padding: 0 .12em;
  border-radius: 2px;
}
.note-theme .hl-pink  { background: linear-gradient(transparent 58%, var(--mk-pink) 58%); }
.note-theme .hl-mint  { background: linear-gradient(transparent 58%, var(--mk-mint) 58%); }
.note-theme .hl-blue  { background: linear-gradient(transparent 58%, var(--mk-blue) 58%); }
.note-theme .hl-violet{ background: linear-gradient(transparent 58%, var(--mk-violet) 58%); }

/* 手描き下線（ペン） */
.note-theme .u-pen-red   { text-decoration: underline wavy var(--pen-red) 1.5px; text-underline-offset: 3px; }
.note-theme .u-pen-blue  { text-decoration: underline wavy var(--pen-blue) 1.5px; text-underline-offset: 3px; }
.note-theme .u-pen-green { text-decoration: underline wavy var(--pen-green) 1.5px; text-underline-offset: 3px; }

/* リスト：ノート箇条書き風 */
.note-theme ul { list-style: none; margin: .8rem 0 1.4rem 1.6rem; padding: 0; }
.note-theme ul li {
  position: relative;
  margin: .45rem 0;
  padding-left: 1.3rem;
}
.note-theme ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: .05rem;
  color: var(--ink-sub);
  font-size: 1.1rem;
  transform: translateX(-.2rem);
}

/* チェックリスト（✓） */
.note-theme .list-check li::before {
  content: "✓";
  color: var(--pen-green);
  font-weight: 700;
}

/* 引用：手描き枠＋付箋風ヘッダ */
.note-theme blockquote {
  position: relative;
  margin: 1.4rem 0;
  padding: 1rem 1.1rem 1rem 1.1rem;
  border: 2px dashed rgba(0,0,0,.35);
  border-radius: var(--r-sm);
  background: #fffdf2;
}

.note-theme blockquote::before {
  display: none;
}

/* 罫線（区切り線） */
.note-theme .divider {
  height: 1px;
  margin: 2rem 0;
  background: var(--divider);
  opacity: .5;
  border: none;
}

/* 重要メモ（赤ペン囲い） */
.note-theme .callout {
  border: 2px solid var(--pen-red);
  background: #fff6f6;
  border-radius: var(--r-md);
  padding: .9rem 1rem;
  margin: 1.2rem 0;
}
.note-theme .callout .title {
  font-weight: 700;
  color: var(--pen-red);
  margin-bottom: .4rem;
}

/* 情報メモ（青ペン囲い） */
.note-theme .callout.info {
  border-color: var(--pen-blue);
  background: #f4f8ff;
}
.note-theme .callout.info .title { color: var(--pen-blue); }

/* サイド注釈（余白メモ：スマホでは本文下に落ちる） */
.note-theme .aside {
  margin: .4rem 0 .8rem 1rem;
  border: 2px dashed var(--pen-blue);
  background: #f7fbff;
  border-radius: var(--r-sm);
  padding: .6rem .7rem;
  font-size: .95em;
}
@media (max-width: 760px) {
  .note-theme .aside { float: none; width: 100%; margin: .8rem 0; }
}

/* リンク：下線を手描きっぽく */
.note-theme a {
  color: var(--pen-blue);
  text-decoration: none;
  border-bottom: 2px solid rgba(58,112,199,.35);
  padding-bottom: .05em;
  transition: border-color .2s ease, color .2s ease;
}
.note-theme a:hover {
  color: #2957a5;
  border-bottom-color: #2957a5;
}

/* 画像：ポラロイド風（任意で .polaroid を付ける） */
.note-theme img { max-width: 100%; height: auto; }
.note-theme .polaroid {
  display: inline-block;
  background: #fff;
  padding: .6rem .6rem 1.3rem;
  border: 1px solid var(--divider);
  box-shadow: 4px 4px 0 rgba(0,0,0,.08);
  border-radius: 4px;
}

/* トップ導入に“付箋見出し”を付けたいとき */

/* テーブル：ノート罫線風 */
.note-theme table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: .97em;
}
.note-theme th, .note-theme td {
  border-bottom: 1px dashed var(--divider);
  padding: .55rem .6rem;
  text-align: left;
}
.note-theme th {
  background: #faf7ef;
  font-weight: 700;
}


/* 余白最適化（モバイル） */
@media (max-width: 560px) {
  .note-theme { padding: 1.1rem 1rem; }
  .note-theme p { text-indent: .5em; }
}

/* ===== 便利ユーティリティ（HTMLから付け足して使う） ===== */
/* 行間・文字サイズ微調整 */
.note-theme .tight   { line-height: 1.75; }
.note-theme .loose   { line-height: 2.05; }
.note-theme .small   { font-size: .95em; }
.note-theme .large   { font-size: 1.12em; }

/* 余白 */
.note-theme .mt-0 { margin-top: 0 !important; }
.note-theme .mb-0 { margin-bottom: 0 !important; }
.note-theme .mt-1 { margin-top: .5rem !important; }
.note-theme .mb-1 { margin-bottom: .5rem !important; }
.note-theme .mt-2 { margin-top: 1rem !important; }
.note-theme .mb-2 { margin-bottom: 1rem !important; }
.note-theme .mt-3 { margin-top: 1.5rem !important; }
.note-theme .mb-3 { margin-bottom: 1.5rem !important; }

/* アフィリエイト広告の中央配置 */
.note-theme .affiliate {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem auto 2.5rem;
  padding: 2rem 8px 1.2rem 8px;
  text-align: center;
  background: linear-gradient(to bottom, #ffffff, #fffef9);
  border: 2px solid var(--mk-yellow);
  border-radius: var(--r-lg);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  position: relative;
  transition: box-shadow 0.2s ease;
}

.note-theme .affiliate:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

/* CHECK!ラベル */
.note-theme .affiliate::before {
  content: "CHECK!";
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--mk-yellow);
  padding: 0.25rem 0.9rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  z-index: 1;
}

.note-theme .affiliate a{
  border-bottom: none;
}