@charset "UTF-8";
/**
 * わかったブログ — 記事ページ
 *
 * 4,000本超の過去記事が読まれる場所なので、ここが最優先です。
 * 本文は 18px / 行間 1.9 / 幅 720px（1行 約38〜40字）を維持し、
 * 装飾を減らして長文が読み進められる状態にします。
 */

/* -------------------------------------------------------------------------
 * 読書カラム
 * ---------------------------------------------------------------------- */

/*
 * 左右の余白は、いちばん外側の入れ物にだけ持たせます。
 *
 * 記事まわりの箱は入れ子になっていて（.sns-share は .article の中、
 * .related-entries と .comment-area は .under-entry-content の中）、
 * それぞれに余白を付けると、内側だけ二重に空いてしまいます。
 * #main に一度だけ付ければ、中身は全部同じ位置で揃います。
 *
 * ウィジェットエリア（記事上・記事下）は #main の外にあるので、
 * 別途同じ余白を与えます。ここを忘れると、記事は揃っているのに
 * ウィジェットだけ画面の端まで広がります。
 */
.wk-single #main,
.wk-single .content .main,
.wk-single #content-top-in,
.wk-single #content-bottom-in {
  width: 100%;
  max-width: none;
  padding: 0 var(--wk-gutter);
  border: 0;
  background: none;
}
.wk-single .article,
.wk-single .breadcrumb,
.wk-single .under-entry-content,
.wk-single .sns-share,
.wk-single .related-entries,
.wk-single .comment-area,
.wk-single .entry-end,
.wk-single .wk-entry-end,
.wk-single .widget-content-top,
.wk-single .widget-content-bottom {
  width: 100%;
  max-width: var(--wk-measure);
  margin-right: auto;
  margin-left: auto;
}

.wk-single .breadcrumb {
  margin-bottom: 26px;
  color: var(--wk-muted);
  font: 500 11px/1.7 var(--wk-font-mono);
  letter-spacing: 0.06em;
}
.wk-single .breadcrumb a { color: var(--wk-muted); }

.wk-single .entry-title {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wk-ink);
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.wk-single .date-tags,
.wk-single .entry-categories-tags {
  color: var(--wk-muted);
  font: 500 12px/1.8 var(--wk-font-mono);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
 * 本文
 * ---------------------------------------------------------------------- */

.wk-single .entry-content {
  max-width: var(--wk-measure);
  color: var(--wk-text);
  font-size: 18px;
  line-height: 1.9;
}
.wk-single .entry-content > * { line-height: 1.9; }
.wk-single .entry-content p { margin: 1.6em 0; }

.wk-single .entry-content h2 {
  margin: 2.6em 0 0.9em;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--wk-border-strong);
  border-radius: 0;
  background: none;
  color: var(--wk-ink);
  font-size: clamp(23px, 3.4vw, 29px);
  font-weight: 700;
  line-height: 1.55;
}
.wk-single .entry-content h2::before,
.wk-single .entry-content h2::after { content: none; }

.wk-single .entry-content h3 {
  margin: 2.2em 0 0.7em;
  padding: 0 0 0 16px;
  border: 0;
  border-left: 4px solid var(--wk-ink);
  border-radius: 0;
  background: none;
  color: var(--wk-ink);
  font-size: clamp(20px, 2.8vw, 24px);
  font-weight: 700;
  line-height: 1.6;
}
.wk-single .entry-content h3::before,
.wk-single .entry-content h3::after { content: none; }

.wk-single .entry-content h4 {
  margin: 2em 0 0.6em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wk-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.65;
}

.wk-single .entry-content a {
  color: var(--wk-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wk-single .entry-content a:hover { text-decoration-thickness: 2px; }

.wk-single .entry-content strong { font-weight: 700; }
.wk-single .entry-content ul,
.wk-single .entry-content ol { margin: 1.6em 0; padding-left: 1.6em; }
.wk-single .entry-content li { margin: 0.5em 0; }

.wk-single .entry-content blockquote {
  margin: 2em 0;
  padding: 20px 24px;
  border: 0;
  border-left: 4px solid var(--wk-border-strong);
  border-radius: 0;
  background: var(--wk-paper);
  color: var(--wk-copy);
  font-size: 16px;
}
.wk-single .entry-content blockquote::before,
.wk-single .entry-content blockquote::after { content: none; }

.wk-single .entry-content img { height: auto; }
.wk-single .entry-content figcaption,
.wk-single .entry-content .caption {
  margin-top: 10px;
  color: var(--wk-muted);
  font: 500 12px/1.7 var(--wk-font-mono);
  letter-spacing: 0.04em;
}

/* 表とコードは本文幅を超えたら中でスクロールさせる。ページ全体を横に伸ばさない。 */
.wk-single .entry-content table { border-collapse: collapse; font-size: 15px; }
.wk-single .entry-content th,
.wk-single .entry-content td { padding: 10px 12px; border: 1px solid var(--wk-border); }
.wk-single .entry-content .scrollable-table,
.wk-single .entry-content .table-wrap { overflow-x: auto; }
.wk-single .entry-content pre,
.wk-single .entry-content .urvanov-syntax-highlighter-syntax { max-width: 100%; overflow-x: auto; }

/* -------------------------------------------------------------------------
 * 目次
 * ---------------------------------------------------------------------- */

.wk-single .toc {
  max-width: var(--wk-measure);
  padding: 22px 24px;
  border: 1px solid var(--wk-border);
  border-radius: 0;
  background: var(--wk-white);
}
.wk-single .toc-title {
  color: var(--wk-ink);
  font: 500 12px/1 var(--wk-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wk-single .toc-content { font-size: 15px; }
.wk-single .toc a { color: var(--wk-copy); text-decoration: none; }
.wk-single .toc a:hover { color: var(--wk-ink); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
 * 今日のわかった
 *
 * 既存マークアップ（h2.wkmidashimiddle + div.wakatta）は一切変えずに、
 * CSS だけで記事の結論ブロックとして作り替えます。
 * これで 4,000本超の過去記事すべてに一括で適用されます。
 * ---------------------------------------------------------------------- */

.wk-single .entry-content h2.wkmidashimiddle {
  margin: 3em 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--wk-ink);
  border-bottom: 0;
  background: none;   /* 旧: url(wh.gif) のアイコン */
  color: var(--wk-ink);
  font-size: clamp(21px, 3vw, 26px);
  line-height: 1.4;
}
.wk-single .entry-content h2.wkmidashimiddle::before {
  display: block;
  margin-bottom: 12px;
  color: var(--wk-muted);
  content: "TODAY'S WAKATTA";
  font: 500 12px/1 var(--wk-font-mono);
  letter-spacing: 0.14em;
}
.wk-single .entry-content h2.wkmidashimiddle::after {
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 18px;
  background: var(--wk-ink);
  content: "";
}

.wk-single .entry-content .wakatta {
  margin: 0 0 2.4em;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--wk-ink);
  background: none;   /* 旧: #eee のベタ塗り */
  color: var(--wk-text);
  font-size: 17px;
  line-height: 1.95;
}
.wk-single .entry-content .wakatta > :first-child { margin-top: 0; }
.wk-single .entry-content .wakatta > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
 * 記事末尾のブロック（サイドバーから移設）
 * ---------------------------------------------------------------------- */

.wk .wk-entry-end {
  display: grid;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: clamp(30px, 4vw, 40px) 0 0;
  border-top: 1px solid var(--wk-border-strong);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 48px);
}
.wk .wk-author-name {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wk-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.wk .wk-author-text {
  margin: 14px 0 18px;
  color: var(--wk-copy);
  font-size: 15px;
  line-height: 1.9;
}
.wk .wk-book-list { margin: 0; padding: 0; border-top: 1px solid var(--wk-border); list-style: none; }
.wk .wk-book-list li { margin: 0; border-bottom: 1px solid var(--wk-border); }
.wk .wk-book-list a {
  display: block;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
}
.wk .wk-book-list strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.6; }
.wk .wk-book-list a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.wk .wk-book-list span {
  display: block;
  margin-top: 5px;
  color: var(--wk-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * 記事下（シェア・関連記事）
 * ---------------------------------------------------------------------- */

.wk-single .sns-share-message,
.wk-single .related-entry-heading {
  color: var(--wk-muted);
  font: 500 12px/1 var(--wk-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * レスポンシブ
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 900px) {
  .wk .wk-entry-end { grid-template-columns: 1fr; }
}

@media screen and (max-width: 719px) {
  .wk-single .entry-content { font-size: 17px; }
  .wk-single .entry-content h2 { margin-top: 2.2em; }
  .wk-single .toc { padding: 18px 18px; }
}