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

   落葉 / RAKUYOU  ―  Components

   記事ページ独自のパーツ。仕様書 §17〜§22 に対応する。
   すべて .rakuyou-* の名前で作ってあるので、Cocoonの既定スタイルと衝突しない。

   --------------------------------------------------------------------------
   C-1   Article Header       記事タイトルまわり          §18
   C-2   Lead                 リード文
   C-3   Work Info            カテゴリー別情報BOX          §19
   C-4   Preface              「この記事について」         §20
   C-5   Pull Quote           プルクオート                §21
   C-6   Note                 注釈
   C-7   Afterwords           余韻                       §22
   C-8   Author Profile       落葉プロフィール             §17
   C-9   Button               ボタン
   --------------------------------------------------------------------------

   ■ 使い方

   Gutenbergの「カスタムHTML」ブロックに、
   blocks/ フォルダのHTMLを貼り付けて使います。

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


/* ==========================================================================
   C-1   Article Header  ―  §18
   ========================================================================== */

.rakuyou-article-header {
  max-width: var(--rk-width-article);
  margin: 0 auto var(--rk-space-xl);
  text-align: center;
}

/* カテゴリーラベル（一般名称のみ・1段） */
.rakuyou-article-header__category {
  display: inline-block;
  margin-bottom: var(--rk-space-md);
  padding: 0.3em 1.1em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-brass-deep);
  border: 1px solid var(--rakuyou-brass-light);
  border-radius: 999px;
  line-height: 1.8;
}

.rakuyou-article-header__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.02em;
  color: var(--rk-text);
}

/* 副題（連載の号数や、タイトルを補う一行） */
.rakuyou-article-header__subtitle {
  margin-top: var(--rk-space-md);
  font-family: var(--rk-font-body);
  font-size: var(--rk-text-lead);
  font-weight: var(--rk-weight-normal);
  line-height: 1.8;
  color: var(--rakuyou-wood);
}

/* メタ情報 ― 2026.08.01 / 更新 2026.08.05 / 読了時間 8分 / 執筆：落葉 */
.rakuyou-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em 1.25em;
  margin-top: var(--rk-space-lg);
  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;
}

/* 項目のあいだに真鍮の小さな点を打つ */
.rakuyou-article-header__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: 1.25em;
  border-radius: 50%;
  background-color: var(--rakuyou-brass);
  vertical-align: 0.35em;
}

.rakuyou-article-header__meta time {
  font-family: var(--rk-font-latin);
  font-size: 1.05em;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   C-2   Lead  ―  リード文
   ========================================================================== */

.rakuyou-lead {
  max-width: var(--rk-width-article);
  margin: 0 auto var(--rk-space-xl);
  font-size: var(--rk-text-lead);
  line-height: 1.95;
  letter-spacing: var(--rk-tracking-normal);
  color: var(--rk-text);
}

.rakuyou-lead p {
  margin-bottom: 1.4em;
}

.rakuyou-lead p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   C-3   Work Info  ―  カテゴリー別情報BOX  §19
   映画なら作品名・監督・公開年、美術なら作者・技法・所蔵先、
   旅なら場所・訪問時期・費用、というように中身を入れ替えて使う。
   ========================================================================== */

.rakuyou-workinfo {
  margin-block: var(--rk-space-lg);
  padding: var(--rk-space-md) var(--rk-space-lg);
  background-color: var(--rk-bg-subtle);
  border-left: 2px solid var(--rakuyou-brass);
  border-radius: 0 var(--rk-radius-md) var(--rk-radius-md) 0;
}

.rakuyou-workinfo__label {
  display: block;
  margin-bottom: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-widest);
  color: var(--rakuyou-brass-deep);
  line-height: 1;
}

/* 定義リスト。項目名と内容を2列に並べる */
.rakuyou-workinfo__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65em 1.5em;
  margin: 0;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  line-height: 1.75;
}

.rakuyou-workinfo__list dt {
  margin: 0;
  color: var(--rk-text-muted);
  font-weight: var(--rk-weight-normal);
  letter-spacing: var(--rk-tracking-wide);
  white-space: nowrap;
}

.rakuyou-workinfo__list dd {
  margin: 0;
  color: var(--rk-text);
}


/* ==========================================================================
   C-4   Preface  ―  「この記事について」  §20
   本文の前に、この記事で何を書くのかを2〜4行で説明する。
   ========================================================================== */

.rakuyou-preface {
  margin-block: var(--rk-space-lg);
  padding: var(--rk-space-md) var(--rk-space-lg);
  border: 1px solid var(--rk-line);
  border-radius: var(--rk-radius-md);
  background-color: transparent;
}

.rakuyou-preface__label {
  display: block;
  margin-bottom: var(--rk-space-sm);
  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);
}

.rakuyou-preface__body {
  font-size: 0.96em;
  line-height: 1.85;
  color: var(--rk-text);
}

.rakuyou-preface__body p {
  margin-bottom: 0.9em;
}

.rakuyou-preface__body p:last-child {
  margin-bottom: 0;
}

/* ネタバレ注記 */
.rakuyou-preface__caution {
  display: block;
  margin-top: var(--rk-space-sm);
  padding-top: var(--rk-space-sm);
  border-top: 1px dashed var(--rk-line);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.75;
  color: var(--rakuyou-wood);
}


/* ==========================================================================
   C-5   Pull Quote  ―  §21
   記事の重要な一文を大きく見せ、雑誌的な誌面をつくる。
   囲みは作らない。文字そのものを見せる。
   ========================================================================== */

.rakuyou-pullquote {
  margin-block: var(--rk-space-xl);
  padding-block: var(--rk-space-md);
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
  text-align: center;
}

.rakuyou-pullquote p {
  margin: 0;
  font-family: var(--rk-font-display);
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem);
  font-weight: var(--rk-weight-bold);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--rakuyou-wood);
}

.rakuyou-pullquote cite {
  display: block;
  margin-top: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  font-style: normal;
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
}


/* ==========================================================================
   C-6   Note  ―  注釈
   ========================================================================== */

.rakuyou-note {
  margin-block: var(--rk-space-md);
  padding-left: var(--rk-space-md);
  border-left: 1px solid var(--rk-line);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.85;
  color: var(--rk-text-muted);
}


/* ==========================================================================
   C-7   Afterwords  ―  余韻  §22
   本文で論理的に整理したあと、
   「書き終えた今、自分の中に何が残っているか」を書く場所。
   RAKUYOU独自の要素なので、本文とは明確に空気を変える。
   ========================================================================== */

.rakuyou-afterwords {
  max-width: var(--rk-width-article);
  margin: var(--rk-space-2xl) auto 0;
  padding-top: var(--rk-space-xl);
  border-top: 1px solid var(--rk-line);
  position: relative;
}

/* 見出し「余韻」。中央に置き、上に真鍮の細い縦線を落とす */
.rakuyou-afterwords__label {
  display: block;
  margin-bottom: var(--rk-space-lg);
  text-align: center;
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-h3);
  font-weight: var(--rk-weight-bold);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-wood);
}

.rakuyou-afterwords__label::before {
  content: "";
  display: block;
  width: 1px;
  height: 2rem;
  margin: 0 auto var(--rk-space-md);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--rakuyou-brass)
  );
}

.rakuyou-afterwords__body {
  font-size: var(--rk-text-body);
  line-height: var(--rk-leading-loose);   /* 本文より行間を広く */
  letter-spacing: 0.05em;
  color: var(--rk-text);
}

.rakuyou-afterwords__body p {
  margin-bottom: 1.9em;
}

.rakuyou-afterwords__body p:last-child {
  margin-bottom: 0;
}

/* 署名 */
.rakuyou-afterwords__sign {
  display: block;
  margin-top: var(--rk-space-lg);
  text-align: right;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
}


/* ==========================================================================
   C-8   Author Profile  ―  §17 記事末尾の落葉プロフィール
   ========================================================================== */

.rakuyou-profile {
  display: flex;
  gap: var(--rk-space-md);
  align-items: flex-start;
  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);
}

.rakuyou-profile__avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--rk-bg-subtle);
}

.rakuyou-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.rakuyou-profile__body {
  flex: 1;
  min-width: 0;
}

.rakuyou-profile__name {
  margin: 0 0 0.15em;
  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);
}

.rakuyou-profile__tagline {
  margin: 0 0 var(--rk-space-sm);
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-sm);
  color: var(--rakuyou-brass-deep);
  letter-spacing: var(--rk-tracking-wide);
}

.rakuyou-profile__text {
  margin: 0;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  line-height: 1.9;
  color: var(--rk-text-muted);
}

.rakuyou-profile__link {
  display: inline-block;
  margin-top: var(--rk-space-sm);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-sm);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rakuyou-brass-deep);
  border-bottom: 1px solid var(--rakuyou-brass-light);
  padding-bottom: 0.15em;
}

.rakuyou-profile__link:hover {
  border-bottom-color: var(--rakuyou-brass);
}

.rakuyou-profile__link::after {
  content: " →";
}


/* ==========================================================================
   C-9   Button
   ========================================================================== */

.rakuyou-button {
  display: inline-block;
  padding: 0.85em 2.25em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  letter-spacing: var(--rk-tracking-wide);
  line-height: 1.6;
  color: var(--rakuyou-brass);
  background-color: transparent;
  border: 1px solid var(--rakuyou-brass);
  border-radius: var(--rk-radius-sm);
  cursor: pointer;
  transition: color var(--rk-transition),
              background-color var(--rk-transition),
              border-color var(--rk-transition);
}

.rakuyou-button:hover {
  color: var(--rakuyou-dark);
  background-color: var(--rakuyou-brass-light);
  border-color: var(--rakuyou-brass);
}

/* 濃い背景の上に置くとき */
.rakuyou-button--inverse {
  color: var(--rakuyou-ivory);
  border-color: rgba(244, 240, 230, 0.45);
}

.rakuyou-button--inverse:hover {
  color: var(--rakuyou-dark);
  background-color: var(--rakuyou-ivory);
  border-color: var(--rakuyou-ivory);
}

/* テキストリンク型 */
.rakuyou-button--text {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rakuyou-brass-light);
  border-radius: 0;
  padding-bottom: 0.2em;
}

.rakuyou-button--text:hover {
  background-color: transparent;
  color: var(--rakuyou-wood);
  border-bottom-color: var(--rakuyou-brass);
}


/* ==========================================================================
   C-10   Gutenberg 対応

   rakuyou-patterns.php で登録したパターンは、
   core/group と core/paragraph の組み合わせで作られています。
   HTMLを書かずに編集できる代わりに、要素が <p> や <div> になるため、
   .entry-content の既定スタイル（p の余白など）に負けないよう
   ここで打ち消しています。

   セレクタが長いのは、単に詳細度を上げるためです。
   ========================================================================== */

/* --- グループブロックの余計な余白を消す -------------------------------- */

.entry-content .rakuyou-workinfo,
.entry-content .rakuyou-preface,
.entry-content .rakuyou-pullquote,
.entry-content .rakuyou-afterwords {
  box-sizing: border-box;
}

.entry-content .rakuyou-afterwords__body.wp-block-group {
  margin-block: 0;
}

/* --- ラベルが <p> になる場合 -------------------------------------------- */

.entry-content p.rakuyou-workinfo__label {
  margin-top: 0;
  margin-bottom: var(--rk-space-sm);
  font-size: var(--rk-text-xs);
  line-height: 1;
}

.entry-content p.rakuyou-preface__label {
  margin-top: 0;
  margin-bottom: var(--rk-space-sm);
}

.entry-content p.rakuyou-afterwords__label {
  margin-top: 0;
  margin-bottom: var(--rk-space-lg);
}

.entry-content p.rakuyou-afterwords__sign {
  margin-top: var(--rk-space-lg);
  margin-bottom: 0;
}

.entry-content p.rakuyou-preface__caution {
  margin-bottom: 0;
}

/* --- 本文が <p> そのものになる場合 -------------------------------------- */

.entry-content p.rakuyou-preface__body {
  margin-bottom: 0;
}

.entry-content p.rakuyou-preface__body + p.rakuyou-preface__caution {
  margin-top: var(--rk-space-sm);
}

.entry-content p.rakuyou-note {
  margin-block: var(--rk-space-md);
}

/* --- 作品情報を <ul> で書く場合 ------------------------------------------
   dl より list ブロックのほうが編集しやすいため、
   パターンでは箇条書きを使っています。見た目は情報リストとして整えます。
   ------------------------------------------------------------------------ */

.entry-content .rakuyou-workinfo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  line-height: 1.9;
}

.entry-content .rakuyou-workinfo ul li {
  margin-bottom: 0.35em;
  padding-left: 1em;
  position: relative;
  list-style: none;
  color: var(--rk-text);
}

.entry-content .rakuyou-workinfo ul li:last-child {
  margin-bottom: 0;
}

.entry-content .rakuyou-workinfo ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 4px;
  height: 1px;
  background-color: var(--rakuyou-brass);
}

/* --- プルクオートが group + p になる場合 -------------------------------- */

.entry-content .rakuyou-pullquote p {
  margin-bottom: 0;
}

.entry-content .rakuyou-pullquote p + p {
  margin-top: 0.8em;
}

/* --- 余韻の中の段落 ------------------------------------------------------ */

.entry-content .rakuyou-afterwords__body p {
  margin-bottom: 1.9em;
  line-height: var(--rk-leading-loose);
  letter-spacing: 0.05em;
}

.entry-content .rakuyou-afterwords__body p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   C-11   About Page   ―  §25

   blocks/about-page.html を貼った固定ページのスタイル。
   「読み物」として、記事本文よりさらに静かに組む。
   ========================================================================== */

.rakuyou-about-page {
  max-width: var(--rk-width-article);
  margin-inline: auto;
}

/* Cocoonが出すページタイトル（「このブログについて」）を、このページでは隠す。

   理由は2つ。
     ① 扉「About ／ 自分を愛し、世界を面白がる。」と内容が重複して見える
     ② h1 が2つになる。display:none にすれば読み上げの対象から外れるので、
        スクリーンリーダーには見出しが1つだけ届く

   :has() は「中に .rakuyou-about-page を含む記事」という指定。
   これでAboutページだけを狙い撃ちでき、他の固定ページには影響しない。
   （日付・SNSシェアも article-header の中にあるので一緒に消える） */
.article:has(.rakuyou-about-page) .article-header,
.article:has(.rakuyou-about-page) .entry-title,
.article:has(.rakuyou-about-page) .date-tags {
  display: none;
}

/* --- 扉 ----------------------------------------------------------------- */

.rakuyou-about-page .rk-about-hero {
  margin-bottom: var(--rk-space-2xl);
  padding-bottom: var(--rk-space-xl);
  border-bottom: 1px solid var(--rk-line);
  text-align: center;
}

.rakuyou-about-page .rk-about-hero__en {
  margin-bottom: var(--rk-space-md);
  font-family: var(--rk-font-latin);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-widest);
  text-transform: uppercase;
  color: var(--rakuyou-brass);
  line-height: 1;
}

.entry-content .rakuyou-about-page .rk-about-hero__title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--rk-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  font-weight: var(--rk-weight-bold);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--rk-text);
}

.entry-content .rakuyou-about-page .rk-about-hero__title::after {
  display: none;   /* 記事H2の真鍮線は、ここでは出さない */
}

.rakuyou-about-page .rk-about-hero__sub {
  margin: var(--rk-space-md) 0 0;
  font-family: var(--rk-font-display);
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
  letter-spacing: 0.16em;
  color: var(--rakuyou-brass-deep);
}

/* --- 各節 --------------------------------------------------------------- */

.rakuyou-about-page .rk-about-section {
  margin-bottom: var(--rk-space-2xl);
}

.entry-content .rakuyou-about-page .rk-about-section__title {
  margin: 0 0 var(--rk-space-lg);
  padding: 0 0 var(--rk-space-sm);
  font-size: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  letter-spacing: 0.09em;
  border-bottom: 0;
}

.entry-content .rakuyou-about-page .rk-about-section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 1px;
  background-color: var(--rakuyou-brass);
}

.rakuyou-about-page .rk-about-section p {
  line-height: 2;
  letter-spacing: 0.05em;
}

/* Love yourself. の節だけ、地色を変えて息を変える */
.rakuyou-about-page .rk-about-section--quiet {
  padding: var(--rk-space-lg);
  background-color: var(--rk-bg-content);
  border-radius: var(--rk-radius-md);
}

/* --- 好奇心の棚（リンク一覧） -------------------------------------------- */

.entry-content .rakuyou-about-page .rk-about-shelf {
  margin-top: var(--rk-space-lg);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rk-line);
}

.entry-content .rakuyou-about-page .rk-about-shelf li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rk-line);
}

.entry-content .rakuyou-about-page .rk-about-shelf li::marker {
  content: none;
}

.entry-content .rakuyou-about-page .rk-about-shelf a {
  display: block;
  padding: 0.9em 0.25em;
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-base);
  letter-spacing: 0.06em;
  color: var(--rk-text-muted);
  border: 0;
  transition: color var(--rk-transition), padding-left var(--rk-transition);
}

.entry-content .rakuyou-about-page .rk-about-shelf a:hover {
  color: var(--rakuyou-brass-deep);
  padding-left: 0.75em;
  border: 0;
}

.entry-content .rakuyou-about-page .rk-about-shelf strong {
  font-family: var(--rk-font-display);
  font-size: 1.0625em;
  font-weight: var(--rk-weight-bold);
  color: var(--rk-text);
  margin-right: 0.2em;
}

/* --- 挨拶 --------------------------------------------------------------- */

.rakuyou-about-page .rk-about-greeting {
  margin-top: var(--rk-space-2xl);
  padding: var(--rk-space-xl) var(--rk-space-lg);
  border-top: 1px solid var(--rk-line);
  border-bottom: 1px solid var(--rk-line);
  text-align: center;
}

.rakuyou-about-page .rk-about-greeting p {
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-lead);
  line-height: 2.1;
  letter-spacing: 0.09em;
  color: var(--rk-text);
}

.rakuyou-about-page .rk-about-greeting__sign {
  margin-top: var(--rk-space-lg);
  font-family: var(--rk-font-latin) !important;
  font-size: var(--rk-text-sm) !important;
  letter-spacing: 0.2em !important;
  color: var(--rk-text-muted);
}


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

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

  .rakuyou-about-page .rk-about-hero {
    margin-bottom: var(--rk-space-xl);
    padding-bottom: var(--rk-space-lg);
  }

  .rakuyou-about-page .rk-about-section {
    margin-bottom: var(--rk-space-xl);
  }

  .rakuyou-about-page .rk-about-section--quiet {
    padding: var(--rk-space-md);
  }

  .rakuyou-about-page .rk-about-greeting {
    padding: var(--rk-space-lg) 0;
  }

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

  .rakuyou-article-header__meta {
    justify-content: flex-start;
  }

  .rakuyou-workinfo,
  .rakuyou-preface {
    padding: var(--rk-space-md);
  }

  .rakuyou-afterwords {
    margin-top: var(--rk-space-xl);
    padding-top: var(--rk-space-lg);
  }

  .rakuyou-profile {
    padding: var(--rk-space-md);
    gap: var(--rk-space-sm);
  }

  .rakuyou-profile__avatar {
    width: 56px;
    height: 56px;
  }
}

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

  /* 情報BOXの2列を1列に折る。項目名が長いと窮屈になるため */
  .rakuyou-workinfo__list {
    grid-template-columns: 1fr;
    gap: 0.15em;
  }

  .rakuyou-workinfo__list dt {
    margin-top: 0.75em;
    font-size: var(--rk-text-sm);
  }

  .rakuyou-workinfo__list dt:first-child {
    margin-top: 0;
  }

  .rakuyou-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}