@charset "UTF-8";
/* ==========================================================================

   落葉 / RAKUYOU  ―  Single Post  (仕様書§17〜§23)

   Cocoonが出力する記事ページのマークアップに合わせて整えます。
   single.php を書き換えないので、テーマ更新の影響を受けません。

   実際のマークアップ（既存サイトで確認済み）:

     article.article
       header.article-header.entry-header
         h1.entry-title
         div.eye-catch-wrap > figure.eye-catch > img + span.cat-label
         div.sns-share.ss-top
       div.entry-content
       div.sns-share.ss-bottom
       div.under-entry-content
         div.author-info
         div.related-entries
     div#breadcrumb.sbp-main-bottom

   --------------------------------------------------------------------------
   S-1   Article Frame       記事全体の枠
   S-2   Article Header      タイトルまわり            §18
   S-3   Meta                日付・読了時間            §18
   S-4   Eye Catch           アイキャッチ
   S-5   Table of Contents   目次                     §17
   S-6   SNS Share           シェア                   §17
   S-7   Author              落葉プロフィール           §17
   S-8   Related             関連記事                  §23
   S-9   Pager               前後の記事
   --------------------------------------------------------------------------

   ========================================================================== */


/* ==========================================================================
   S-1   Article Frame
   ========================================================================== */

.article,
article.post {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-inline: auto;
  max-width: var(--rk-width-site);
}

/* 記事ページは上に余白をしっかり取る。§14「余白を恐れない」 */
#main .article {
  padding-top: var(--rk-space-xl);
}


/* ==========================================================================
   S-2   Article Header   ―  §18
   ========================================================================== */

.article-header,
.entry-header {
  max-width: var(--rk-width-article);
  margin: 0 auto var(--rk-space-xl);
  padding-inline: var(--rk-gutter);
  text-align: center;
}

.entry-title {
  margin: 0;
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-h1);
  font-weight: var(--rk-weight-bold);
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--rk-text);
  text-align: center;
  border: 0;
  padding: 0;
  background: transparent;
}


/* ==========================================================================
   S-3   Meta   ―  日付・更新日・読了時間
   ========================================================================== */

.date-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em 1.25em;
  margin: var(--rk-space-lg) 0 0;
  padding-top: var(--rk-space-md);
  border-top: 1px solid var(--rk-line);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
  line-height: 1.8;
}

.date-tags .post-date,
.date-tags .post-update,
.date-tags .entry-categories,
.date-tags .entry-tags {
  margin: 0;
  color: var(--rk-text-muted);
}

.date-tags .fa {
  margin-right: 0.35em;
  color: var(--rakuyou-brass);
}

.date-tags a {
  color: var(--rk-text-muted);
  border: 0;
}

.date-tags a:hover {
  color: var(--rakuyou-brass-deep);
}

/* 日付の数字だけ英字書体にすると、誌面らしさが出る */
.post-date .entry-date,
.post-update .entry-update {
  font-family: var(--rk-font-latin);
  font-size: 1.05em;
  letter-spacing: 0.08em;
}

/* Cocoonのタグ表示は、記事上部では出さない（下部にまとめる） */
.article-header .entry-tags {
  display: none;
}


/* ==========================================================================
   S-4   Eye Catch
   ========================================================================== */

.eye-catch-wrap {
  margin: var(--rk-space-lg) auto 0;
  max-width: var(--rk-width-wide);
  padding-inline: var(--rk-gutter);
}

.eye-catch {
  position: relative;
  margin: 0;
  border-radius: var(--rk-radius-md);
  overflow: hidden;
}

.eye-catch img,
.eye-catch-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* アイキャッチ上のカテゴリーラベル ― 派手にせず、静かに置く */
.eye-catch .cat-label {
  position: absolute;
  left: var(--rk-space-md);
  bottom: var(--rk-space-md);
  padding: 0.4em 1.1em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-normal);
  letter-spacing: var(--rk-tracking-wide);
  line-height: 1.6;
  color: var(--rakuyou-ivory);
  background-color: rgba(53, 39, 31, 0.88);
  border: 1px solid rgba(167, 131, 69, 0.5);
  border-radius: var(--rk-radius-sm);
}


/* ==========================================================================
   S-5   Table of Contents   ―  §17
   Cocoon設定 → 目次 で有効にすると出ます。
   ========================================================================== */

.toc {
  max-width: var(--rk-width-article);
  margin: var(--rk-space-lg) auto;
  padding: var(--rk-space-md) var(--rk-space-lg);
  background-color: var(--rk-bg-content);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-md);
  font-family: var(--rk-font-ui);
}

.toc-title {
  margin: 0 0 var(--rk-space-sm);
  padding: 0;
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text);
  text-align: left;
  background: transparent;
  border: 0;
}

.toc-content,
.toc-list {
  font-size: var(--rk-text-base);
  line-height: 1.95;
}

.toc-list li {
  margin-bottom: 0.2em;
}

.toc-list li::marker {
  color: var(--rakuyou-brass);
  font-family: var(--rk-font-latin);
}

.toc a {
  color: var(--rk-text);
  border: 0;
}

.toc a:hover {
  color: var(--rakuyou-brass-deep);
}

/* 入れ子（H3）は一段控えめに */
.toc-list ul,
.toc-list ol {
  margin-top: 0.2em;
  font-size: 0.94em;
}

.toc-list ul a,
.toc-list ol ol a {
  color: var(--rk-text-muted);
}


/* ==========================================================================
   S-6   SNS Share   ―  §17
   ボタンを色とりどりにしない。線画で静かに並べる。
   ========================================================================== */

/* 記事上部のシェアは出さない。読み始める前に共有は求めない */
.sns-share.ss-top {
  display: none;
}

.sns-share {
  max-width: var(--rk-width-article);
  margin: var(--rk-space-2xl) auto 0;
  padding: 0 var(--rk-gutter);
  background: transparent;
}

.sns-share-message {
  margin-bottom: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
  text-align: center;
}

.sns-share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rk-space-sm);
}

.sns-share .sns-button,
.sns-share .share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-width: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background-color: transparent !important;
  color: var(--rakuyou-wood) !important;
  border: 1px solid var(--rk-line);
  border-radius: 50%;
  box-shadow: none;
  transition: color var(--rk-transition),
              border-color var(--rk-transition),
              background-color var(--rk-transition);
}

.sns-share .sns-button:hover,
.sns-share .share-button:hover {
  color: var(--rakuyou-dark) !important;
  background-color: var(--rakuyou-brass-light) !important;
  border-color: var(--rakuyou-brass);
}

/* ボタン内の文字とシェア数は隠し、アイコンだけにする */
.sns-share .button-caption,
.sns-share .share-count {
  display: none;
}

.sns-share .social-icon {
  font-size: 1rem;
}


/* ==========================================================================
   S-7   Author   ―  §17 落葉プロフィール
   ========================================================================== */

.author-info {
  max-width: var(--rk-width-article);
  margin: var(--rk-space-2xl) auto 0;
  padding: var(--rk-space-lg);
  background-color: var(--rk-bg-content);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-md);
}

.author-info .author-name,
.author-box .author-name {
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text);
}

.author-info .author-description,
.author-box .author-description {
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.9;
  color: var(--rk-text-muted);
}

.author-info img,
.author-box img {
  border-radius: 50%;
}


/* ==========================================================================
   S-8   Related   ―  §23 関連記事
   「落葉という人物の好奇心を辿る」導線にする。
   ========================================================================== */

.under-entry-content {
  max-width: var(--rk-width-site);
  margin-inline: auto;
  padding-inline: var(--rk-gutter);
}

.related-entries {
  margin-top: var(--rk-space-2xl);
}

.related-entry-heading,
.related-entries .related-entry-heading {
  margin: 0 0 var(--rk-space-lg);
  padding: 0 0 var(--rk-space-sm);
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-h3);
  font-weight: var(--rk-weight-bold);
  letter-spacing: 0.1em;
  color: var(--rk-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rk-line);
  position: relative;
}

.related-entry-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 2.25rem;
  height: 1px;
  background-color: var(--rakuyou-brass);
}

.related-list,
.related-entry-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rk-space-lg) var(--rk-space-md);
}

.related-entry-card {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.related-entry-card-wrap,
.related-entry-card .a-wrap {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  border: 0;
}

.related-entry-card-wrap:hover,
.related-entry-card .a-wrap:hover {
  background: transparent;
}

.related-entry-card-thumb {
  display: block;
  width: 100%;
  float: none;
  margin: 0 0 var(--rk-space-sm);
  border-radius: var(--rk-radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.related-entry-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 600ms var(--rk-ease);
}

.related-entry-card-wrap:hover .related-entry-card-thumb img {
  transform: scale(1.035);
}

.related-entry-card-content {
  margin: 0;
  padding: 0;
}

.related-entry-card-title {
  font-family: var(--rk-font-display);
  font-size: 0.9375rem;
  font-weight: var(--rk-weight-bold);
  line-height: var(--rk-leading-snug);
  letter-spacing: 0.04em;
  color: var(--rk-text);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.related-entry-card-wrap:hover .related-entry-card-title {
  color: var(--rakuyou-wood);
}

.related-entry-card-date,
.related-entry-card-meta {
  margin-top: 0.4em;
  font-family: var(--rk-font-latin);
  font-size: var(--rk-text-sm);
  letter-spacing: 0.1em;
  color: var(--rk-text-muted);
}

/* Cocoonのカテゴリーラベルは関連記事では消す（情報量を減らす） */
.related-entry-card .cat-label {
  display: none;
}


/* ==========================================================================
   S-9   Pager   ―  前後の記事
   ========================================================================== */

.pager-post-navi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rk-space-md);
  max-width: var(--rk-width-site);
  margin: var(--rk-space-2xl) auto 0;
  padding-inline: var(--rk-gutter);
  border-top: 1px solid var(--rk-line);
  padding-top: var(--rk-space-lg);
}

.pager-post-navi .a-wrap {
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

.pager-post-navi .a-wrap:hover {
  background: transparent;
}

.pager-post-navi figure {
  margin: 0 0 var(--rk-space-sm);
  border-radius: var(--rk-radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.pager-post-navi figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.prev-post-title,
.next-post-title {
  font-family: var(--rk-font-display);
  font-size: 0.9375rem;
  font-weight: var(--rk-weight-bold);
  line-height: var(--rk-leading-snug);
  letter-spacing: 0.04em;
  color: var(--rk-text);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.pager-post-navi .a-wrap:hover .prev-post-title,
.pager-post-navi .a-wrap:hover .next-post-title {
  color: var(--rakuyou-wood);
}

.next-post .a-wrap {
  text-align: right;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 834px) {

  #main .article {
    padding-top: var(--rk-space-lg);
  }

  .article-header,
  .entry-header {
    margin-bottom: var(--rk-space-lg);
    text-align: left;
  }

  .entry-title {
    text-align: left;
  }

  .date-tags {
    justify-content: flex-start;
  }

  .eye-catch-wrap {
    padding-inline: 0;
  }

  .eye-catch {
    border-radius: 0;
  }

  .related-list,
  .related-entry-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .toc {
    padding: var(--rk-space-md);
  }
}

@media screen and (max-width: 560px) {

  .related-list,
  .related-entry-cards {
    grid-template-columns: 1fr;
  }

  /* スマホの関連記事は横並びリストに */
  .related-entry-card-wrap,
  .related-entry-card .a-wrap {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--rk-space-sm);
    align-items: start;
  }

  .related-entry-card-thumb {
    margin-bottom: 0;
  }

  .pager-post-navi {
    grid-template-columns: 1fr;
  }
}