/* =========================================================
   かんだ整体院 ブログ記事のデザイン（assets/css/blog.css）
   投稿ページ（single.php）だけで読み込まれます。
   記事本文の .post-body に ks-article クラスが自動で付くので、
   投稿画面で何も設定しなくても、この装飾が効きます。
   色を変えるときは「色の設定」だけを書き換えてください。
   ========================================================= */


/* ---- 色の設定（ここを変えると全体の色が変わります） ---- */
.ks-article {
  --ks-green: #2E6B4C;
  --ks-green-dark: #25583E;
  --ks-green-pale: #F3F8F4;
  --ks-green-soft: #DCEBE1;
  --ks-line: #DCE5DF;
  --ks-gray: #F7F9F8;
  --ks-ink: #1F2A23;
  --ks-sub: #5B6B61;
  --ks-brown: #6B5B4B;
  --ks-brown-soft: #E7E2DA;
  --ks-brown-pale: #F7F7F5;
  --ks-accent: #FFE9A8;
  counter-reset: ks-h2;
}

/* ---- 本文の基本（テーマのリセットで段落の間隔や箇条書きの点が消えているのを戻す） ---- */
.ks-article > p,
.ks-article > .wp-block-paragraph { margin: 0 0 1.4em; }
.ks-article > ul,
.ks-article > .wp-block-list:not(ol) { list-style: disc; padding-left: 1.4em; margin: 0 0 1.4em; }
.ks-article > ol,
.ks-article > ol.wp-block-list { list-style: decimal; padding-left: 1.6em; margin: 0 0 1.4em; }
.ks-article > ul li,
.ks-article > ol li { margin: 0 0 0.4em; }
.ks-article > figure,
.ks-article > .wp-block-image { margin: 1.6em 0; }
.ks-article img { max-width: 100%; height: auto; }
.ks-article a { text-underline-offset: 3px; }

/* ---- 見出し H2：淡い緑の帯＋緑の番号バッジ（章の区切りをはっきり見せる） ---- */
.ks-article h2.wp-block-heading {
  counter-increment: ks-h2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #E8F2EC;
  color: var(--ks-ink);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 14px 18px;
  margin: 3.2em 0 1.2em;
  border: none;
  border-radius: 12px;
}
.ks-article h2.wp-block-heading::before {
  content: counter(ks-h2, decimal-leading-zero);
  flex: none;
  min-width: 2.2em;
  height: 2.2em;
  margin-top: 0.05em;
  border-radius: 8px;
  background: var(--ks-green);
  color: #fff;
  font-size: 0.8rem;
  line-height: 2.2em;
  text-align: center;
}

/* ---- 見出し H3：緑の丸つき ---- */
.ks-article h3.wp-block-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--ks-ink);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0;
  margin: 1.8em 0 0.8em;
}
.ks-article h3.wp-block-heading::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-green);
}

@media (max-width: 480px) {
  .ks-article h2.wp-block-heading { font-size: 1.15rem; gap: 10px; padding: 12px 14px; }
  .ks-article h3.wp-block-heading { font-size: 1rem; }
}

/* ---- 黄色マーカー ----
   投稿画面で文字を選んで「B（太字）」を押すだけで、太字＋黄色マーカーになります。
   （段落・箇条書きの中の太字が対象。部品の中の太字には付きません）
   ツールバーの「ハイライト」や <mark class="ks-marker"> でも同じ見た目になります。 */
.ks-article > p strong,
.ks-article > ul strong,
.ks-article > ol strong,
.ks-article mark,
.ks-article .ks-marker {
  background: linear-gradient(transparent 55%, var(--ks-accent) 55%) !important;
  color: inherit !important;
  font-weight: 700;
  padding: 0 1px;
}

/* ---- 表（テーブルブロック） ----
   1行目を見出し行（緑）、1列目を項目名（グレー）として表示。
   スマホでは横にスクロールできます。 */
.ks-article .wp-block-table {
  margin: 1.6em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ks-article .wp-block-table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.6;
}
.ks-article .wp-block-table th,
.ks-article .wp-block-table td {
  border: 1px solid var(--ks-line);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.ks-article .wp-block-table thead th {
  background: var(--ks-green);
  color: #fff;
  font-weight: 700;
}
.ks-article .wp-block-table tbody td:first-child {
  background: var(--ks-gray);
  color: var(--ks-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   部品
   ========================================================= */

/* 共通：部品の上下の余白 */
.ks-article .ks-point,
.ks-article .ks-box,
.ks-article .ks-flow,
.ks-article .ks-steps,
.ks-article .ks-cards,
.ks-article .ks-bubble,
.ks-article .ks-check,
.ks-article .ks-links,
.ks-article .ks-faq,
.ks-article .ks-summary {
  margin: 1.6em 0;
}
/* 目次の上下にも余白 */
.ks-article #ez-toc-container { margin: 2em 0 !important; }

/* ---- この記事のポイント ---- */
.ks-article .ks-point {
  border: 2px solid var(--ks-green);
  border-radius: 12px;
  overflow: hidden;
}
.ks-article .ks-point__title {
  background: var(--ks-green);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 16px;
}
.ks-article .ks-point ul {
  list-style: none;
  margin: 0;
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.ks-article .ks-point li {
  position: relative;
  padding-left: 26px;
  margin: 0;
}
.ks-article .ks-point li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.35em;
  width: 12px;
  height: 7px;
  border-left: 3px solid var(--ks-green);
  border-bottom: 3px solid var(--ks-green);
  transform: rotate(-45deg);
}

/* ---- 囲み ----
   ks-box        ：箱にせず、緑の点つきの箇条書きとして見せる（箱を増やしすぎないため）
   ks-box--green ：記事で特に伝えたい一文。淡い緑の箱＋太字 */
.ks-article .ks-box ul { margin: 0; padding-left: 1.3em; list-style: none; }
.ks-article .ks-box li { position: relative; margin: 0 0 0.3em; }
.ks-article .ks-box li::before {
  content: "";
  position: absolute;
  left: -1em;
  top: 0.8em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ks-green);
}
.ks-article .ks-box p { margin: 0; }
.ks-article .ks-box--green {
  background: var(--ks-green-pale);
  border: 1px solid #B9D3C2;
  border-radius: 12px;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--ks-ink);
}

/* ---- 流れ図（カード＋矢印） ---- */
.ks-article .ks-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F3F7F4;
  border-radius: 14px;
  padding: 22px 16px;
}
.ks-article .ks-flow > * {
  width: 100%;
  max-width: 540px;
}
.ks-article .ks-flow__step {
  border: 1.5px solid #9DBFA9;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
  text-align: center;
  background: #fff;
  color: var(--ks-ink);
}
.ks-article .ks-flow__step.is-goal {
  border-color: var(--ks-green);
  background: var(--ks-green);
  color: #fff;
}
.ks-article .ks-flow__arrow {
  height: 28px;
  position: relative;
}
.ks-article .ks-flow__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 11px;
  height: 11px;
  border-right: 3px solid var(--ks-green);
  border-bottom: 3px solid var(--ks-green);
  transform: translateX(-50%) rotate(45deg);
}
.ks-article .ks-flow__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
}
.ks-article .ks-flow__pair .ks-flow__step {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 10px;
}
.ks-article .ks-flow__plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ks-green);
}

/* ---- 矢印でつなぐ流れ（よい流れ＝緑 / よくない流れ＝茶色 ks-steps--warn） ----
   <ol> の各項目を小さなカードにして、間に「∨」の矢印を自動で入れます。
   最後の項目（結果）は色を塗って強調します。 */
.ks-article .ks-steps {
  --ks-step-color: var(--ks-green);
  --ks-step-line: #9DBFA9;
  border-radius: 12px;
  padding: 16px 16px 18px;
  background: var(--ks-green-pale);
}
.ks-article .ks-steps--warn {
  --ks-step-color: var(--ks-brown);
  --ks-step-line: #C9B9A4;
  background: var(--ks-brown-pale);
}
.ks-article .ks-steps__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ks-step-color);
  margin-bottom: 12px;
  text-align: center;
}
.ks-article .ks-steps ol {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 480px;
}
.ks-article .ks-steps li {
  position: relative;
  margin: 0 0 26px;
  padding: 9px 14px;
  background: #fff;
  border: 1.5px solid var(--ks-step-line);
  border-radius: 10px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ks-ink);
}
/* 項目のあいだの矢印 */
.ks-article .ks-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--ks-step-color);
  border-bottom: 3px solid var(--ks-step-color);
  transform: translateX(-50%) rotate(45deg);
}
/* 最後の項目（結果）を強調 */
.ks-article .ks-steps li:last-child {
  margin-bottom: 0;
  background: var(--ks-step-color);
  border-color: var(--ks-step-color);
  color: #fff;
}

/* ---- 補足（Tips）：本筋から一歩引いた情報を、控えめなグレーの枠に ----
   <div class="ks-tips"><div class="ks-tips__title">補足</div> … </div> */
.ks-article .ks-tips {
  margin: 1.6em 0;
  background: #F4F5F4;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #4A554E;
}
.ks-article .ks-tips__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4A554E;
}
.ks-article .ks-tips__title::before {
  content: "i";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8A968E;
  color: #fff;
  font-size: 0.7rem;
  font-style: italic;
  font-family: Georgia, serif;
  line-height: 18px;
  text-align: center;
}
.ks-article .ks-tips p { margin: 0 0 0.6em; }
.ks-article .ks-tips ul { list-style: none; margin: 0; padding: 0; }
.ks-article .ks-tips li { position: relative; padding-left: 1em; margin: 0 0 0.3em; }
.ks-article .ks-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8A968E;
}
.ks-article .ks-tips strong { color: #2F3A33; }
.ks-article .ks-tips small { color: #7A857E; }

/* ---- あわせて読みたい（関連記事カード） ---- */
.ks-article .ks-related {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 2.2em 0 1.8em;
  padding: 22px 46px 16px 16px;
  border: 2px solid #F0C29E;
  border-radius: 12px;
  background: #FFF5EC;
  text-decoration: none;
  color: var(--ks-ink);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ks-article .ks-related:hover {
  border-color: #E07B39;
  background: #FFEEDF;
  box-shadow: 0 6px 18px rgba(160,80,20,.12);
  color: var(--ks-ink);
}
.ks-article .ks-related::before {
  content: "あわせて読みたい";
  position: absolute;
  top: -12px;
  left: 14px;
  background: #E07B39;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
}
.ks-article .ks-related::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid #E07B39;
  border-right: 2.5px solid #E07B39;
  transform: translateY(-50%) rotate(45deg);
}
.ks-article .ks-related img {
  flex: none;
  width: 168px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0;
  object-fit: cover;
  border-radius: 8px;
}
.ks-article .ks-related__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
}
@media (max-width: 480px) {
  .ks-article .ks-related { gap: 12px; padding: 20px 36px 14px 12px; }
  .ks-article .ks-related::after { right: 14px; }
  .ks-article .ks-related img { width: 104px; }
  .ks-article .ks-related__title { font-size: 0.9rem; }
}

/* ---- 説明カード（2つのルートなど） ---- */
.ks-article .ks-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
.ks-article .ks-card {
  border: 1.5px solid #C9DCCF;
  border-radius: 10px;
  padding: 14px;
}
.ks-article .ks-card__title {
  font-weight: 700;
  color: var(--ks-green);
  margin-bottom: 4px;
}
.ks-article .ks-card__text { font-size: 0.95rem; line-height: 1.7; margin: 0; }
.ks-article .ks-card__note { font-size: 0.85rem; color: var(--ks-sub); margin: 4px 0 0; }
@media (min-width: 768px) {
  .ks-article .ks-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 吹き出し（院長） ----
   アイコンは テーマの assets/images/director.webp を自動で表示します（URLの入力は不要）。
   色は記事の緑と区別するため、やわらかいクリーム色にしています。 */
.ks-article .ks-bubble {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ks-article .ks-bubble__who {
  flex: none;
  width: 64px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #7A6A55;
  line-height: 1.4;
}
.ks-article .ks-bubble__icon,
.ks-article .ks-bubble__who img {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 4px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #EADFC8;
  background: #F4ECDD url("../images/director.webp") center 20% / cover no-repeat;
  object-fit: cover;
}
.ks-article .ks-bubble__text {
  position: relative;
  flex: 1;
  min-width: 0;
  background: #FBF6EC;
  border: 1px solid #EADFC8;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ks-ink);
  margin: 0;
}
/* 吹き出しのしっぽ */
.ks-article .ks-bubble__text::before,
.ks-article .ks-bubble__text::after {
  content: "";
  position: absolute;
  top: 20px;
  border-style: solid;
  border-color: transparent;
}
.ks-article .ks-bubble__text::before {
  left: -10px;
  border-width: 8px 10px 8px 0;
  border-right-color: #EADFC8;
}
.ks-article .ks-bubble__text::after {
  left: -8px;
  border-width: 8px 10px 8px 0;
  border-right-color: #FBF6EC;
}

/* ---- 院長コメント（ブロック版：ks-comment） ----
   「グループ」ブロック（追加CSSクラス ks-comment）の中に「段落」を入れて使います。
   段落なので、投稿画面で文字を選んで「B」を押すと太字にできます（マーカーは付きません）。
   院長の写真と「院長」の文字は自動で表示されます。 */
.ks-article .ks-comment {
  position: relative;
  min-height: 84px;
  padding-left: 80px;
  margin: 1.6em 0;
}
.ks-article .ks-comment::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #EADFC8;
  background: #F4ECDD url("../images/director.webp") center 20% / cover no-repeat;
}
.ks-article .ks-comment::after {
  content: "院長";
  position: absolute;
  left: 0;
  top: 66px;
  width: 64px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: #7A6A55;
}
.ks-article .ks-comment p {
  position: relative;
  background: #FBF6EC;
  border: 1px solid #EADFC8;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ks-ink);
}
.ks-article .ks-comment p + p { margin-top: 8px; }
.ks-article .ks-comment p:first-of-type::before,
.ks-article .ks-comment p:first-of-type::after {
  content: "";
  position: absolute;
  top: 20px;
  border-style: solid;
  border-color: transparent;
  border-width: 8px 10px 8px 0;
}
.ks-article .ks-comment p:first-of-type::before { left: -10px; border-right-color: #EADFC8; }
.ks-article .ks-comment p:first-of-type::after { left: -8px; border-right-color: #FBF6EC; }
/* コメントの中の太字：太くするだけ（マーカーなし） */
.ks-article .ks-comment strong,
.ks-article .ks-bubble__text strong {
  font-weight: 700;
  background: none !important;
  color: #1F2A23;
}

/* ---- チェックリスト（ラベルつき） ---- */
.ks-article .ks-check {
  background: var(--ks-gray);
  border-radius: 12px;
  padding: 14px 16px;
}
.ks-article .ks-check ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.65;
}
.ks-article .ks-check li {
  position: relative;
  padding-left: 30px;
  margin: 0;
}
.ks-article .ks-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ks-green);
  border-radius: 4px;
  box-sizing: border-box;
}
.ks-article .ks-check strong {
  color: var(--ks-ink);
  margin-right: 8px;
}
.ks-article .ks-tag {
  display: inline-block;
  vertical-align: 0.15em;
  line-height: 1.7;
  font-size: 0.7rem;
  background: var(--ks-green-soft);
  color: var(--ks-green);
  padding: 0 8px;
  border-radius: 999px;
}

/* ---- ページへのリンクボタン ---- */
.ks-article .ks-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ks-article .ks-links a {
  min-height: 48px;
  border: 1px solid var(--ks-green);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ks-green);
}
.ks-article .ks-links a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--ks-green);
  border-right: 2px solid var(--ks-green);
  transform: rotate(45deg);
}
.ks-article .ks-links a:hover { background: var(--ks-green-pale); }

/* ---- よくある質問（開閉できる） ---- */
.ks-article .ks-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ks-article .ks-faq details {
  border: 1px solid var(--ks-line);
  border-radius: 10px;
  overflow: hidden;
}
.ks-article .ks-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  min-height: 48px;
  box-sizing: border-box;
  background: var(--ks-gray);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ks-ink);
}
.ks-article .ks-faq summary::-webkit-details-marker { display: none; }
.ks-article .ks-faq summary::before,
.ks-article .ks-faq .ks-faq__a::before {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ks-article .ks-faq summary::before {
  content: "Q";
  background: var(--ks-green);
  color: #fff;
}
.ks-article .ks-faq .ks-faq__a {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0;
}
.ks-article .ks-faq .ks-faq__a::before {
  content: "A";
  border: 2px solid var(--ks-green);
  color: var(--ks-green);
}

/* ---- まとめ ---- */
.ks-article .ks-summary {
  border: 2px solid var(--ks-green);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.85;
}
.ks-article .ks-summary p { margin: 0; }

/* =========================================================
   記事下の「関連記事」（single.php が自動で表示）
   ========================================================= */
.ks-related-posts {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #E3EAE5;
}
.ks-related-posts__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #26332B;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ks-related-posts__title::before {
  content: "";
  width: 6px;
  height: 1.2em;
  border-radius: 3px;
  background: #2E6B4C;
}
.ks-related-posts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* カードの抜粋は関連記事では長くなるので隠す */
.ks-related-posts__list time ~ p { display: none; }
.ks-related-posts__list h3 { font-size: 15px !important; }
@media (max-width: 767px) {
  .ks-related-posts__list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ks-related-posts__list li a { display: grid !important; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .ks-related-posts__list li a > img,
  .ks-related-posts__list li a > div { grid-row: span 3; }
  .ks-related-posts__list li a > p:first-of-type { margin-top: 0 !important; justify-self: start; }
}


/* =========================================================
   ブログ一覧・記事ページのレイアウト（v2.1）
   ========================================================= */
/* ===== ブログ（一覧・記事）v2.1 ===== */
.bl-cat{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#2E6B4C}
.bl-card__meta{display:flex;align-items:center;gap:14px;font-size:12px;color:#8A948D}
.bl-card__meta time{font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:.06em}
.bl-card__meta .bl-cat::after{content:"";display:inline-block;width:1px;height:10px;margin-left:14px;background:#D5DBD7;vertical-align:-1px}

/* 一覧の見出し */
.bl-hd{position:relative;overflow:hidden;padding:56px 0 64px;background:#F6F4EF}
.bl-hd .bigen{right:-20px;bottom:-30px;top:auto;color:#ECE8DF}
.bl-hd__lead{margin:18px 0 0;font-size:15px;line-height:2;color:#3D4A42}
.bl-list{padding:56px 0 100px}
.bl-tabs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:22px;border-bottom:1px solid #E3E6E2}
.bl-tabs a{padding:9px 18px;border-radius:999px;border:1px solid #D7DFDA;font-size:13.5px;font-weight:700;color:#1F2A24;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.bl-tabs a:hover{border-color:#1F2A24}
.bl-tabs a.on{background:#1F2A24;border-color:#1F2A24;color:#fff}

/* 最新記事を大きく */
.bl-feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;margin-top:44px;color:inherit;text-decoration:none}
.bl-feat__img{display:block;overflow:hidden;border-radius:8px;aspect-ratio:16/10}
.bl-feat__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.165,.84,.44,1)}
.bl-feat:hover .bl-feat__img img,.bl-card:hover .bl-card__img img{transform:scale(1.04)}
.bl-feat__body{display:flex;flex-direction:column;align-items:flex-start}
.bl-feat__new{margin-bottom:14px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.24em;color:#2E6B4C}
.bl-feat__t{margin-top:14px;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.6;color:#1F2A24}
.bl-feat__ex{margin-top:14px;font-size:14.5px;line-height:1.95;color:#5A665F}
.bl-feat:hover .k-more__arrow{border-color:#2E6B4C;background-size:100% 100%}
.bl-feat:hover .k-more__arrow::before{transform:translateX(34px)}
.bl-feat:hover .k-more__arrow::after{transform:translateX(0)}

/* カード */
.bl-grid{list-style:none;margin:56px 0 0;padding:56px 0 0;border-top:1px solid #E3E6E2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 32px}
.bl-card{display:block;color:inherit;text-decoration:none}
.bl-card__img{display:block;overflow:hidden;border-radius:8px;aspect-ratio:16/10;background:#F1EEE7}
.bl-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.165,.84,.44,1)}
.bl-card .bl-card__meta{margin-top:16px}
.bl-card__t{display:block;margin-top:8px;font-size:16px;font-weight:700;line-height:1.75;color:#1F2A24;transition:color .3s}
.bl-card:hover .bl-card__t{color:#2E6B4C}
.bl-pager{display:flex;justify-content:center;gap:8px;margin-top:64px}
.bl-pager a,.bl-pager span{display:flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 14px;border-radius:999px;border:1px solid #D7DFDA;font-size:14px;color:#1F2A24;text-decoration:none}
.bl-pager .on{background:#1F2A24;border-color:#1F2A24;color:#fff}

/* 記事 */
.bl-art__hd{max-width:860px;margin:44px auto 0;text-align:center}
.bl-art__hd .bl-card__meta{justify-content:center}
.bl-art__hd h1{margin:18px 0 0;font-size:clamp(24px,2.6vw,34px);line-height:1.6;font-weight:700;color:#1F2A24;letter-spacing:.02em}
.bl-sup{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:8px 20px 8px 8px;border:1px solid #E3E6E2;border-radius:999px;text-align:left}
.bl-sup img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.bl-sup p{margin:0;font-size:13px;line-height:1.4;color:#5A665F}
.bl-sup small{display:block;font-size:10.5px;letter-spacing:.1em;color:#2E6B4C;font-weight:700}
.bl-sup b{color:#1F2A24;margin-right:8px}
.bl-art__eye{max-width:1040px;margin:40px auto 0;border-radius:8px;overflow:hidden;aspect-ratio:16/8}
.bl-art__eye img{width:100%;height:100%;object-fit:cover}
.bl-art__grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;max-width:1040px;margin:56px auto 0;align-items:start}
.bl-toc{padding:26px 30px;border:1px solid #E3E6E2;border-radius:8px;background:#fff}
.bl-toc__t{margin:0;font-size:12px;font-weight:700;letter-spacing:.2em;color:#1F2A24}
.bl-toc ol{list-style:none;margin:14px 0 0;padding:0}
.bl-toc li a{display:flex;gap:14px;padding:10px 0;border-top:1px solid #EFF1EF;font-size:14.5px;line-height:1.6;color:#3D4A42;text-decoration:none}
.bl-toc li a:hover{color:#2E6B4C}
.bl-toc li b{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:12px;color:#2E6B4C;padding-top:2px}
.bl-art__main > .bl-toc{display:none}
.bl-side{position:sticky;top:110px}
.bl-side__in{display:grid;gap:20px}
.bl-toc--side{padding:22px 22px}
.bl-toc--side li a{font-size:13.5px}
.bl-side__rsv{padding:0 0 22px;border-radius:8px;overflow:hidden;background:#F2F8F4;text-align:center}
.bl-side__rsv img{width:100%;aspect-ratio:16/10;object-fit:cover}
.bl-side__rsv p{margin:16px 16px 0;font-size:14px;font-weight:700;line-height:1.7;color:#1F2A24}
.bl-side__btn{display:block;margin:14px 18px 0;padding:13px;border-radius:999px;background:#2E6B4C;color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.bl-side__tel{display:block;margin:10px 18px 0;padding:12px;border-radius:999px;border:1px solid #C9D3CD;background:#fff;color:#1F2A24;font-size:14px;font-weight:700;text-decoration:none}

/* 本文 */
/* あわせて読みたい：生成り×濃い文字 */

.bl-supbox{display:flex;gap:22px;margin-top:56px;padding:28px 30px;border-radius:8px;border:1px solid #E3E6E2}
.bl-supbox img{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 15%;flex:none}
.bl-supbox__en{margin:0;font-size:11px;font-weight:700;letter-spacing:.2em;color:#2E6B4C}
.bl-supbox__n{margin:6px 0 0;font-size:18px;font-weight:700;color:#1F2A24}
.bl-supbox__n span{margin-left:10px;font-size:12px;font-weight:400;color:#6B746E}
.bl-supbox__tx{margin:10px 0 0;font-size:14px;line-height:1.9;color:#3D4A42}
.bl-share{display:flex;align-items:center;gap:10px;margin-top:28px;font-size:13px;color:#6B746E}
.bl-share a{padding:8px 16px;border:1px solid #D7DFDA;border-radius:999px;color:#1F2A24;text-decoration:none;font-weight:700;font-size:12.5px}
.bl-rel{margin-top:100px;padding:90px 0 100px;background:#F6F4EF}
.bl-rel__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.bl-rel .bl-grid{margin-top:40px;padding-top:0;border-top:0}

@media(max-width:900px){
  .bl-feat{grid-template-columns:minmax(0,1fr);gap:22px}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 18px}
  .bl-art__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .bl-side{position:static}
  .bl-toc--side{display:none}
  .bl-art__main > .bl-toc{display:block;margin-bottom:10px}
  .bl-art__eye{aspect-ratio:16/10;border-radius:0;margin-left:-18px;margin-right:-18px}
  .bl-supbox{flex-direction:column;padding:22px}
}
@media(max-width:600px){
  .bl-grid{grid-template-columns:minmax(0,1fr)}
  .bl-tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px;padding:0 18px 18px}
  .bl-tabs a{white-space:nowrap}
}
/* v2: 見出しは左、アイキャッチから2カラム */
.bl-art__grid{max-width:1160px;margin:32px auto 0;grid-template-columns:minmax(0,1fr) 300px;gap:56px}
.bl-art__hd{max-width:none;margin:0;text-align:left}
.bl-art__hd .bl-card__meta{justify-content:flex-start}
.bl-art__eye{max-width:none;margin:32px 0 0;aspect-ratio:16/9}
.bl-art__main > .bl-toc{display:none}
.bl-side{position:sticky;top:110px;margin-top:0}
.bl-art__main .bl-body{margin-top:8px}
@media(max-width:900px){
  .bl-art__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .bl-art__main > .bl-toc{display:block;margin-top:28px}
  .bl-art__eye{margin-left:-18px;margin-right:-18px;border-radius:0}
}
/* v3：見出しを面で区切る／マーカーは文字の長さだけ */
/* v4：ポイント枠をはっきり */
/* 流れ（→）*/
.bl-side__sup{padding:22px 20px;border:1px solid #E3E6E2;border-radius:8px;text-align:center}
.bl-side__sup img{width:72px;height:72px;margin:0 auto;border-radius:50%;object-fit:cover;object-position:50% 15%}
.bl-side__supl{margin:12px 0 0;font-size:11px;font-weight:700;letter-spacing:.14em;color:#2E6B4C}
.bl-side__supn{margin:4px 0 0;font-size:17px;font-weight:700;letter-spacing:.1em;color:#1F2A24}
.bl-side__supr{margin:2px 0 0;font-size:12px;color:#6B746E}
.bl-art__eye{margin-top:24px}
@media(max-width:900px){.bl-side__sup{display:none}}

/* シェアボタン：アイコン＋色でわかりやすく */
.bl-share{flex-wrap:wrap;gap:10px;margin-top:32px;padding-top:24px;border-top:1px solid #E3E6E2}
.bl-share > span{width:100%;font-size:13px;font-weight:700;color:#1F2A24}
.bl-share a{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border:0;border-radius:999px;color:#fff;font-size:13.5px}
.bl-share a svg{width:18px;height:18px;fill:#fff}
.bl-share a.ln{background:#06C755}.bl-share a.x{background:#111}.bl-share a.fb{background:#1877F2}
.bl-share a.copy{background:#fff;color:#1F2A24;border:1px solid #C9D3CD}
.bl-share a.copy svg{fill:none;stroke:#1F2A24}

.bl-body{margin-top:24px}
.bl-art__eye{margin-bottom:36px}

/* ---- この記事のポイント（v2.1：白地＋緑の枠＋見出しタブ＋チェック） ---- */
.ks-article .ks-point{position:relative;overflow:visible;margin-top:2.2em;padding:30px 28px 24px;border:2px solid var(--ks-green);border-radius:8px;background:#fff}
.ks-article .ks-point__title{position:absolute;left:20px;top:-15px;padding:4px 16px;border-radius:999px;background:var(--ks-green);color:#fff;font-size:13px;letter-spacing:.06em}
.ks-article .ks-point ul{padding:0;gap:10px}
.ks-article .ks-point li{padding-left:32px;font-size:15.5px;font-weight:700;line-height:1.7;color:var(--ks-ink)}
.ks-article .ks-point li::before{left:0;top:3px;width:20px;height:20px;border:0;border-radius:50%;transform:none;background:var(--ks-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
/* 箇条書きの中の太字マーカーは文字の長さだけに */
.ks-article strong,.ks-article mark{-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bl-grid.is-top{margin-top:40px;padding-top:0;border-top:0}
.bl-hd__h1{font-size:clamp(28px,3vw,38px)!important}
.bl-empty{margin:40px 0 0;text-align:center;color:#66736B}
.bl-art__crumb{padding:0;margin:40px 0 0}
.bl-art__grid{margin-top:32px}
.bl-card__img img,.bl-feat__img img{display:block}
/* 目次は本文横（スマホは本文の上）に自動で出るので、プラグインの目次は隠す */
.bl-body #ez-toc-container{display:none!important}
.bl-share a{transition:opacity .3s}
.bl-share a:hover{opacity:.85}

/* ---- あわせて読みたい（v2.1：生成りのカード＋濃い色のラベル＋アイキャッチ） ---- */
.ks-article .ks-related{display:flex;align-items:center;gap:18px;margin:2.2em 0 1.8em;padding:16px 50px 16px 16px;border:1px solid #E3E6E2;border-radius:8px;background:#F6F4EF;color:#1F2A24;text-decoration:none;position:relative;box-shadow:none;transition:border-color .3s ease, background-color .3s ease}
.ks-article .ks-related::before{content:"あわせて読みたい";position:absolute;left:14px;top:-11px;padding:2px 12px;border-radius:999px;background:#1F2A24;color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1.8}
.ks-article .ks-related::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:1.6px solid #1F2A24;border-right:1.6px solid #1F2A24;border-bottom:0;border-left:0;transform:rotate(45deg);background:none;transition:transform .3s ease}
.ks-article .ks-related:hover{border-color:#1F2A24;background:#fff}
.ks-article .ks-related:hover::after{transform:translateX(4px) rotate(45deg)}
.ks-article .ks-related img{width:120px;height:76px;margin:0;border-radius:6px;object-fit:cover;flex:none}
.ks-article .ks-related .ks-related__title{font-size:15px;font-weight:700;line-height:1.7;color:#1F2A24}
@media (max-width:600px){.ks-article .ks-related img{width:86px;height:60px}.ks-article .ks-related{gap:12px;padding:14px 40px 14px 12px}}

/* ---- 本文の文字サイズ・行間（以前の記事ページと同じに戻す） ---- */
.bl-body{font-size:16px;line-height:2;color:#3D4A42}
.bl-body > p,.bl-body > ul,.bl-body > ol{line-height:2}
.bl-body li{line-height:1.9}

/* ---- アイキャッチ：16:9 の画像がぴったり収まるように ---- */
.bl-card__img,.bl-feat__img,.bl-art__eye{aspect-ratio:16/9 !important}
.bl-card__img img,.bl-feat__img img,.bl-art__eye img{width:100% !important;height:100% !important;max-width:none;object-fit:cover;display:block}

/* v2.5.12 スマホの余白 */
@media(max-width:767px){.bl-list{padding:36px 0 56px}}