@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;
  /* 左右は auto のまま。0 にすると、上の中央寄せの指定を打ち消して左へ寄る */
  margin: clamp(48px, 6vw, 72px) auto 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; }
}

/*
 * 記事ページの地色。
 *
 * Cocoon の body は #f4f5f7 の薄いグレーで、白いのは .article の箱だけです。
 * リニューアルで箱の装飾を外したので、記事本文の下（関連記事・コメント）だけ
 * グレーが出てしまっていました。ページ全体を白に統一します。
 */
.wk-single,
.wk-single #content,
.wk-single #container,
.wk-list-body,
.wk-list-body #content,
.wk-list-body #container { background: var(--wk-white); }

/* -------------------------------------------------------------------------
 * 記事の下半分
 *
 * 関連記事・SNSボタン・コメント欄・スマホ下部の固定ボタンは、Cocoon が
 * 出すマークアップをそのまま使い、見た目だけこちらへ寄せています。
 * HTMLを置き換えないので、Cocoon の設定（表示件数や並び順）はそのまま効きます。
 *
 * Cocoon 側は `.body .xxx` の形で書かれているので、こちらも同じ深さか
 * それ以上にして、後から読み込まれる分で勝たせています。
 * ---------------------------------------------------------------------- */

/* ---- 見出しを、他のセクションと同じロックアップに ---- */
.wk-single .related-entry-heading,
.wk-single .comment-title,
.wk-single .comment-reply-title {
  margin: 0 0 26px;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--wk-ink);
  background: none;
  color: var(--wk-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
}
.wk-single .related-entry-heading::before,
.wk-single .comment-title::before,
.wk-single .comment-reply-title::before { content: none; }
.wk-single .related-entry-main-heading { font-size: inherit; letter-spacing: inherit; }

/* -------------------------------------------------------------------------
 * 関連記事 — トップページのカードに合わせる
 * ---------------------------------------------------------------------- */

.wk-single .related-entries {
  margin: clamp(56px, 8vw, 88px) auto 0;
  padding: clamp(36px, 5vw, 52px) 0 0;
  border-top: 1px solid var(--wk-border);
}
.wk-single .related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}
.wk-single .related-entry-card-wrap {
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  text-decoration: none;
}
.wk-single .related-entry-card-wrap:hover { background: none; }
.wk-single .related-entry-card {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.wk-single .related-entry-card-thumb {
  position: relative;
  display: block;
  width: auto;
  margin: 0 0 14px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--wk-paper);
  float: none;
}
.wk-single .related-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--wk-ease);
}
.wk-single .related-entry-card-wrap:hover .related-entry-card-thumb img { transform: scale(1.035); }

/*
 * カテゴリーラベル。
 *
 * Cocoon はこれをサムネイルの <figure> の中に入れるので、CSSだけでは
 * 画像の外へ出せません。16:9 に切った枠の中へ収めたいので、位置は
 * そのまま重ねたままにして、色だけ白黒に落とします。
 */
.wk-single .related-entry-card-thumb .cat-label {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  padding: 5px 9px;
  border: 0;
  border-radius: 0;
  background: var(--wk-white);
  color: var(--wk-ink);
  font: 500 10px/1.4 var(--wk-font-mono);
  letter-spacing: 0.1em;
  max-width: 84%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-single .related-entry-card-content {
  margin: 0;
  padding: 0;
}
.wk-single .related-entry-card-title {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
}
.wk-single .related-entry-card-wrap:hover .related-entry-card-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 抜粋は出さない。トップのカードと揃え、3列でも高さを揃えるため */
.wk-single .related-entry-card-snippet { display: none; }

@media screen and (max-width: 900px) {
  .wk-single .related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 519px) {
  .wk-single .related-list { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
 * SNSシェアボタン — 白黒に
 *
 * 各社のブランド色を使うと、白黒の紙面でそこだけが騒がしくなります。
 * アイコンの形は残し、色だけ落として枠線のボタンにしています。
 * ---------------------------------------------------------------------- */

.wk-single .sns-share {
  margin: clamp(34px, 4vw, 46px) auto 0;
  padding: 0;
  border: 0;
  background: none;
}
.wk-single .sns-share-message {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wk-copy);
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
}
.wk-single .sns-share-message::before,
.wk-single .sns-share-message::after { content: none; }

.wk-single .sns-share-buttons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.wk-single .sns-share-buttons a.sns-button {
  display: inline-flex;
  width: auto;
  height: 46px;
  margin: 0;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wk-border-strong);
  border-radius: 0;
  background: none;
  color: var(--wk-ink);
  gap: 7px;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.wk-single .sns-share-buttons a.sns-button:hover,
.wk-single .sns-share-buttons a.sns-button:focus-visible {
  border-color: var(--wk-ink);
  background: var(--wk-ink);
  color: #fff;
  opacity: 1;
}
.wk-single .sns-share-buttons a.sns-button .social-icon {
  color: inherit;
  font-size: 15px;
}
.wk-single .sns-share-buttons a.sns-button .button-caption {
  color: inherit;
  font: 500 11px/1 var(--wk-font-mono);
  letter-spacing: 0.06em;
}
.wk-single .sns-share-buttons a.sns-button .share-count {
  color: var(--wk-muted);
  font: 500 11px/1 var(--wk-font-mono);
}
.wk-single .sns-share-buttons a.sns-button:hover .share-count { color: rgba(255, 255, 255, 0.72); }

@media screen and (max-width: 719px) {
  .wk-single .sns-share-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wk-single .sns-share-buttons a.sns-button .button-caption { display: none; }
}

/* 記事末尾の著者リンク。既定の青いリンクのままだと、ここだけ色が浮きます。 */
.wk-single .footer-meta { margin-top: 22px; }
.wk-single .footer-meta .author-info { justify-content: flex-start; }
.wk-single .footer-meta .author-link,
.wk-single .footer-meta .author-name {
  color: var(--wk-muted);
  font: 500 12px/1.7 var(--wk-font-mono);
  letter-spacing: 0.06em;
  text-decoration: none;
}
.wk-single .footer-meta .author-link:hover .author-name {
  color: var(--wk-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * フォローボタン — こちらも白黒に
 *
 * シェアボタンとは別のブロック（.sns-follow）で、こちらは各社の色で
 * 塗り潰された四角が8個並びます。白黒の紙面ではここがいちばん目立って
 * しまうので、同じく枠線のボタンに揃えます。
 * ---------------------------------------------------------------------- */

.wk-single .sns-follow {
  margin: clamp(30px, 4vw, 40px) auto 0;
  padding: 0;
  border: 0;
  background: none;
}
.wk-single .sns-follow-message {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wk-copy);
  font-size: 14px;
  line-height: 1.9;
  text-align: left;
}
.wk-single .sns-follow-message::before,
.wk-single .sns-follow-message::after { content: none; }

.wk-single .sns-follow-buttons {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.wk-single .sns-follow-buttons a.sns-button {
  display: inline-flex;
  width: auto;
  height: 46px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--wk-border-strong);
  border-radius: 0;
  background: none;
  color: var(--wk-ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.wk-single .sns-follow-buttons a.sns-button:hover,
.wk-single .sns-follow-buttons a.sns-button:focus-visible {
  border-color: var(--wk-ink);
  background: var(--wk-ink);
  color: #fff;
  opacity: 1;
}
.wk-single .sns-follow-buttons a.sns-button [class^="icon-"],
.wk-single .sns-follow-buttons a.sns-button [class*=" icon-"] {
  color: inherit;
  font-size: 16px;
}

@media screen and (max-width: 719px) {
  .wk-single .sns-follow-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
 * コメント欄
 * ---------------------------------------------------------------------- */

.wk-single .comment-area {
  margin: clamp(56px, 8vw, 88px) auto 0;
  padding: clamp(36px, 5vw, 52px) 0 0;
  border-top: 1px solid var(--wk-border);
}
.wk-single .comment-btn,
.wk-single .comment-form .submit {
  display: inline-flex;
  width: auto;        /* Cocoon は 100% にしている。文章の幅いっぱいに伸びると重い */
  max-width: 100%;
  height: 52px;
  padding: 0 26px;
  align-items: center;
  border: 1px solid var(--wk-ink);
  border-radius: 0;
  background: var(--wk-ink);
  color: #fff;
  cursor: pointer;
  font: 500 14px/1 inherit;
  transition: opacity 200ms ease;
}
.wk-single .comment-btn:hover,
.wk-single .comment-form .submit:hover { opacity: 0.84; }

.wk-single .comment-notes,
.wk-single .comment-form label {
  color: var(--wk-muted);
  font-size: 13px;
  line-height: 1.8;
}
.wk-single .comment-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}
.wk-single .comment-form input[type="text"],
.wk-single .comment-form input[type="email"],
.wk-single .comment-form input[type="url"],
.wk-single .comment-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--wk-border-strong);
  border-radius: 0;
  background: var(--wk-white);
  color: inherit;
  font-size: 16px;   /* iOSで拡大されないよう16px以上 */
  line-height: 1.8;
  -webkit-appearance: none;
  appearance: none;
}
.wk-single .comment-form input:focus-visible,
.wk-single .comment-form textarea:focus-visible {
  border-color: var(--wk-ink);
  outline: none;
}

/* -------------------------------------------------------------------------
 * スマホ下部の固定ボタン
 * ---------------------------------------------------------------------- */

.wk .mobile-footer-menu-buttons {
  border-top: 1px solid var(--wk-border);
  background: var(--wk-white);
  box-shadow: none;
}
.wk .mobile-footer-menu-buttons .menu-button { border: 0; }
.wk .mobile-footer-menu-buttons .menu-button-in,
.wk .mobile-footer-menu-buttons .menu-button > a {
  background: none;
  color: var(--wk-ink);
}
.wk .mobile-footer-menu-buttons .menu-caption {
  font: 500 10px/1.4 var(--wk-font-mono);
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------
 * 固定ページ
 *
 * 読み書きの作りは記事ページと同じものを使います（body に wk-single が
 * 付くので、上のスタイルがそのまま効きます）。
 *
 * ここで消しているのは「記事のための部品」です。プロフィールや NOW /
 * PROJECTS のようなページに、投稿日や共有ボタンが並んでいると、
 * 読み物ではなく記事の1本に見えてしまいます。
 *
 * 戻したいときは、この節を消すか、該当の行を消してください。
 * ---------------------------------------------------------------------- */

/* 投稿日・更新日。固定ページには日付の意味がありません。 */
.wk-page .date-tags,
.wk-page .footer-meta { display: none; }

/* 共有ボタンとフォローボタン。記事の furniture なので、ページからは外します。 */
.wk-page .sns-share,
.wk-page .sns-follow { display: none; }

/* 上の余白。共有ボタンが消えたぶん、タイトルと本文が近づきすぎないように。 */
.wk-page .entry-content { margin-top: clamp(26px, 3.5vw, 40px); }

/* アイキャッチ。ページでは本文の一部として扱い、記事より控えめに。 */
.wk-page .eye-catch { margin-bottom: clamp(26px, 3.5vw, 40px); }
.wk-page .eye-catch img { width: 100%; height: auto; }