@charset "UTF-8";
/* 記事ページ・一覧ページ */

body.hs-single,
body.category,
body.search,
body.archive{ background:var(--hs-cream-100); }

.hs-single #main.main,
.category #main.main,
.archive #main.main,
.search #main.main{
  background:var(--hs-cream-50);
  border:2px solid var(--hs-cream-300);
  border-radius:var(--hs-radius);
  box-shadow:var(--hs-shadow);
}

/* --------------------------------------------------------------------------
   記事の見出し画像（アイキャッチにタイトルを重ねたもの）
   -------------------------------------------------------------------------- */
.hs-article-banner{
  container-type:inline-size;
  position:relative;
  aspect-ratio:1200 / 675;
  background:var(--hs-banner) center/cover no-repeat;
  border-radius:var(--hs-radius);
  overflow:hidden;
  margin:0 0 1.6em;
}
/* 文字を置くのは、画像の中の「紙」の部分。
   はむ先生に重ならない範囲に収めている（inc/article.php のコメント参照）。 */
.hs-article-banner__title{
  position:absolute;
  left:6.5%; right:36%; top:12%; bottom:14%;
  margin:0;
  display:flex; align-items:center;
  overflow:hidden;
}
.hs-article-banner__title span{
  font-family:var(--hs-font-round); font-weight:900;
  /* 画像の横幅を基準に文字の大きさを決めるので、画面幅が変わっても崩れない。
     大きさはタイトルの文字数から計算した --hs-title-size（inc/article.php の hs_title_size） */
  /* 文字は大きめにして、紙の枠に余白が目立たないようにする。
     折り返しは言葉の切れ目（<wbr>）だけで行う（inc/article.php の hs_title_wbr） */
  font-size:clamp(.85rem, var(--hs-title-size, 8cqw), 4.4rem);
  line-height:1.45; color:var(--hs-ink);
  letter-spacing:.01em;
  word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance;
}
/* 見出し画像にタイトルが入っているページでは、その上の文字だけのタイトルは隠す。
   （HTML には残しているので、検索エンジンや読み上げソフトには伝わる） */
.hs-has-banner .entry-title{
  position:absolute;
  width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  border:0;
}

/* 記事タイトル */
.hs-single .entry-title,
.archive .archive-title,
.search .archive-title{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:clamp(1.4rem,1.05rem + 1.5vw,2rem);
  line-height:1.5; color:var(--hs-ink);
  border:0; padding:0 0 .6em; margin:0 0 .6em;
  border-bottom:4px solid var(--hs-yellow);
}

/* 本文 */
.hs-single .entry-content{ font-size:1.02rem; line-height:2.05; color:var(--hs-text); }
.hs-single .entry-content h2{
  font-family:var(--hs-font-round); font-weight:900; font-size:1.35rem;
  color:var(--hs-cream-50); background:var(--hs-green-700);
  border:0; border-radius:var(--hs-radius-sm);
  padding:.7em 1em; margin:2.6em 0 1.2em; line-height:1.5;
}
.hs-single .entry-content h3{
  font-family:var(--hs-font-round); font-weight:900; font-size:1.15rem;
  color:var(--hs-green-800); border:0; border-left:6px solid var(--hs-yellow);
  padding:.1em 0 .1em .7em; margin:2.2em 0 1em; line-height:1.5;
}
.hs-single .entry-content p{ margin:0 0 1.5em; }
.hs-single .entry-content a{ color:var(--hs-green-600); font-weight:700; }
.hs-single .entry-content ul,
.hs-single .entry-content ol{ margin:0 0 1.6em; padding-left:1.5em; }
.hs-single .entry-content li{ margin-bottom:.6em; }

/* ポイントボックス */
.hs-point-box{
  background:var(--hs-cream-100);
  border:3px solid var(--hs-green-600);
  border-radius:var(--hs-radius);
  padding:24px 26px; margin:0 0 2em;
}
.hs-point-box__title{
  display:inline-block; font-family:var(--hs-font-round); font-weight:900;
  background:var(--hs-green-600); color:#fff; font-size:1rem;
  border-radius:999px; padding:.3em 1.4em; margin:-40px 0 .9em;
}
.hs-point-box ul{ margin:0!important; padding-left:1.3em!important; }
.hs-point-box li{ line-height:1.9; }
.hs-point-box--summary{ border-color:var(--hs-yellow); background:#FFF8E2; }
.hs-point-box--summary .hs-point-box__title{ background:var(--hs-yellow); color:var(--hs-ink); }

/* 計算式 */
.hs-formula{
  font-family:var(--hs-font-round); font-weight:700;
  font-size:clamp(1rem,.92rem + .4vw,1.15rem); text-align:center;
  /* 見出し（緑）と見分けやすいよう、計算式はピンクにしている */
  background:var(--hs-pink); color:var(--hs-ink);
  border:2px solid var(--hs-pink-600);
  border-radius:var(--hs-radius-sm); padding:1em 1.2em; margin:0 0 1.6em!important;
  line-height:1.7;
}

/* 図版（ブロックエディターの画像ブロック） */
.hs-single .entry-content .wp-block-image{ margin:0 0 1.8em; text-align:center; }
.hs-single .entry-content .wp-block-image img{
  max-width:100%; height:auto; border-radius:var(--hs-radius-sm);
  border:2px solid var(--hs-cream-300); background:#fff;
}
.hs-single .entry-content .wp-block-image figcaption{
  margin-top:.7em; font-size:.85rem; color:var(--hs-muted); text-align:center;
}
.hs-single .entry-content .wp-block-columns{ gap:20px; margin-bottom:1.8em; }

/* 図版（旧・HTML直書き用。残しておくと手書きの figure でも同じ見た目になる） */
.hs-figure{ margin:0 0 1.8em; text-align:center; }
.hs-figure img{
  max-width:100%; height:auto; border-radius:var(--hs-radius-sm);
  border:2px solid var(--hs-cream-300); background:#fff;
}
.hs-figure figcaption{ margin-top:.7em; font-size:.85rem; color:var(--hs-muted); }
.hs-figure-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:0 0 1.8em; }
.hs-figure-row .hs-figure{ margin:0; }
@media screen and (max-width:600px){
  .hs-figure-row{ grid-template-columns:1fr; }
  .hs-point-box{ padding:20px; }
  .hs-point-box__title{ margin-top:-34px; font-size:.92rem; }
}

/* Cocoonの目次 */
.hs-single .toc{
  background:var(--hs-cream-100); border:2px solid var(--hs-cream-300);
  border-radius:var(--hs-radius); padding:22px 26px;
}
.hs-single .toc-title{
  font-family:var(--hs-font-round); font-weight:900;
  color:var(--hs-green-800); font-size:1.05rem;
}
.hs-single .toc-content a{ color:var(--hs-text); font-weight:500; }
.hs-single .toc-content a:hover{ color:var(--hs-green-600); }
/* 見出しが折り返したら、2行目を番号の下ではなく本文の頭にそろえる */
.hs-single .toc-content a.hs-toc-item{ display:inline-flex; align-items:baseline; }
.hs-single .toc-content .hs-toc-num{ flex:none; white-space:pre; }

/* 記事一覧カード */
.entry-card-title{ font-family:var(--hs-font-round); font-weight:700; }
.entry-card-wrap{ border-radius:var(--hs-radius-sm); }

/* アイキャッチ未設定の「NO IMAGE」枠を、サイトの色に合わせる */
.entry-card-thumb .no-image,
.related-entry-card-thumb .no-image,
.no-image img{
  background:repeating-linear-gradient(45deg,var(--hs-cream-100) 0 10px,var(--hs-cream-200) 10px 20px);
}
.entry-card-thumb img[src*="no-image"],
.related-entry-card-thumb img[src*="no-image"]{
  opacity:.35;
}

/* ==========================================================================
   記事一覧・検索結果・カテゴリーページ
   ========================================================================== */

/* ヒーローで見出しを出すので、Cocoon標準の見出しは隠す */
#archive-title.archive-title{ display:none; }

.hs-hero__suffix{ font-size:.55em; margin-left:.4em; font-weight:700; }

/* 一覧ページの外枠 */
.archive #main.main,
.search #main.main,
.blog #main.main{
  background:transparent; border:0; box-shadow:none;
  max-width:1100px; margin-inline:auto; padding:32px 20px 48px;
}
body.archive, body.search, body.blog{ background:var(--hs-cream-100); }

/* 検索ボックス */
.search-box.input-box{
  display:flex; align-items:stretch; gap:0;
  max-width:560px; margin:0 auto 36px; min-height:58px;
  background:var(--hs-cream-50);
  border:2px solid var(--hs-green-600);
  border-radius:999px; overflow:hidden;
  box-shadow:var(--hs-shadow);
}
.search-box .search-edit{
  flex:1 1 auto; min-width:0; min-height:0; height:auto;
  border:0; outline:0; background:transparent;
  padding:0 1.4em; font-size:1rem; line-height:1.4; color:var(--hs-ink);
}
.search-box .search-submit{
  /* Cocoon標準は position:absolute。そのままだと flex に並ばないので戻す */
  position:static;
  flex:0 0 60px; align-self:stretch; border:0; cursor:pointer;
  width:60px; min-height:0; padding:0; border-radius:0;
  background:var(--hs-green-600); color:#fff; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
}
.search-box .search-submit:hover{ background:var(--hs-green-500); }

/* 記事カード */
#list.list{ display:grid; gap:18px; }
.entry-card-wrap.a-wrap{
  display:block; margin:0; padding:20px;
  background:var(--hs-cream-50);
  border:2px solid var(--hs-cream-300);
  border-radius:var(--hs-radius);
  box-shadow:var(--hs-shadow);
  transition:transform .15s ease, border-color .15s ease;
}
.entry-card-wrap.a-wrap:hover{
  transform:translateY(-3px); border-color:var(--hs-green-500); background:var(--hs-cream-50);
}
.entry-card.e-card{ display:flex; gap:20px; align-items:flex-start; }
.entry-card-thumb.e-card-thumb{
  flex:0 0 240px; width:240px; margin:0; position:relative;
}
.entry-card-thumb img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--hs-radius-sm); display:block;
}
.entry-card-content.e-card-content{ flex:1 1 auto; min-width:0; margin:0; }
.entry-card-title.e-card-title{
  font-family:var(--hs-font-round); font-weight:700;
  font-size:1.15rem; line-height:1.5; color:var(--hs-green-800);
  margin:0 0 .5em;
}
.entry-card-snippet.e-card-snippet{
  font-size:.93rem; line-height:1.85; color:var(--hs-text);
  height:auto; max-height:none; margin:0 0 .8em;
}
.entry-card-meta.e-card-meta{ font-size:.8rem; color:var(--hs-muted); }
.entry-card-meta .post-date{ color:var(--hs-muted); }
.entry-card-categorys .entry-category{
  background:var(--hs-green-700); color:var(--hs-cream-50);
  border-radius:4px; padding:.15em .7em; font-size:.75rem;
}
.cat-label{
  background:var(--hs-green-700); color:var(--hs-cream-50);
  border:0; border-radius:0 0 8px 0; font-size:.72rem; font-weight:700;
}

/* 結果なしのとき */
.posts-not-found{
  background:var(--hs-cream-50); border:2px dashed var(--hs-cream-300);
  border-radius:var(--hs-radius); padding:44px 28px; text-align:center;
}
.posts-not-found h2{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:1.2rem; color:var(--hs-green-800);
  border:0; background:none; padding:0; margin:0 0 .6em;
}
.posts-not-found h2::before{ content:"🔍 "; }
.posts-not-found p{ margin:0; color:var(--hs-muted); }

/* ページ送り */
.pagination .page-numbers{
  border-radius:8px; border-color:var(--hs-cream-300);
  color:var(--hs-green-800); font-weight:700;
}
.pagination .current{
  background:var(--hs-green-700); color:var(--hs-cream-50); border-color:var(--hs-green-700);
}

@media screen and (max-width:700px){
  .entry-card.e-card{ flex-direction:column; gap:14px; }
  .entry-card-thumb.e-card-thumb{ flex-basis:auto; width:100%; }
  .entry-card-title.e-card-title{ font-size:1.05rem; }
}

/* 白いチョークの線画を載せる黒板パネル */
.hs-chalk-figure{
  background:
    var(--hs-chalk-texture,none) center/cover,
    linear-gradient(180deg,var(--hs-green-700),var(--hs-green-900));
  border:10px solid var(--hs-wood-600);
  border-radius:var(--hs-radius);
  padding:clamp(14px,2.5vw,26px);
  margin:0 0 1.8em;
  box-shadow:var(--hs-shadow);
}
.hs-chalk-figure .wp-block-image{ margin:0; }
/* 上の .wp-block-image img（白背景＋枠）より強く指定して打ち消す */
.hs-single .entry-content .hs-chalk-figure .wp-block-image img{
  border:0; background:transparent; border-radius:0;
}
.hs-single .entry-content .hs-chalk-figure figcaption{
  color:var(--hs-cream-200); margin-top:.9em;
}

/* --------------------------------------------------------------------------
   記事一覧・関連記事のサムネイル（紙の部分に記事タイトルを重ねる）
   置き場所の考え方は見出し画像と同じ（inc/article.php 参照）。
   左上にはカテゴリー名のラベルが乗るので、その分だけ下から始める。
   -------------------------------------------------------------------------- */
.hs-card-thumb{
  container-type:inline-size;
  position:relative; display:block; line-height:0;
}
.hs-card-thumb__title{
  position:absolute;
  left:7%; right:37%; top:20%; bottom:14%;
  display:flex; align-items:center;
  line-height:1.4; pointer-events:none;
}
.hs-card-thumb__title span{
  font-family:var(--hs-font-round); font-weight:900;
  font-size:clamp(.5rem, var(--hs-title-size, 8.5cqw), 1.5rem);
  color:var(--hs-ink); letter-spacing:.01em;
  word-break:keep-all; overflow-wrap:anywhere; text-wrap:balance;
}