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

   落葉 / RAKUYOU  ―  Layout  (Header / Navigation / Footer / Mobile)

   仕様書 §16（ヘッダー）§24（フッター）に対応。

   このファイルは、既存サイトの実際のHTML構造を確認したうえで書いています。
   Cocoonが出力する下記のマークアップが前提です。

     ヘッダー   #header-container > #header-container-in.hlt-top-menu
                  ├ header#header > #header-in > .logo-header
                  └ nav#navi > #navi-in > ul.menu-pc > li > a
                       └ .caption-wrap > .item-label + .item-description

     フッター   footer#footer > #footer-in
                  ├ .footer-widgets (left / center / right)
                  └ .footer-bottom > .footer-bottom-logo + .footer-bottom-content

     モバイル   ul.mobile-footer-menu-buttons（画面下の固定バー）
                #navi-menu-content > ul.menu-drawer（スライドメニュー）

   --------------------------------------------------------------------------
   L-1   Header Container    ヘッダーの器
   L-2   Logo                ロゴ
   L-3   Global Navigation   PCナビゲーション（2段表示）
   L-4   Dropdown            好奇心の棚（サブメニュー）
   L-5   Search              検索
   L-6   Mobile Header       スマホのヘッダー
   L-7   Mobile Drawer       スライドメニュー
   L-8   Mobile Bottom Bar   画面下の固定バー
   L-9   Footer              フッター
   L-10  Sidebar Off         1カラム化
   L-11  Cleanup             不要な既定表示を消す
   --------------------------------------------------------------------------

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


/* ==========================================================================
   L-1   Header Container   ―  §16「PCでは比較的細く上品に」
   ========================================================================== */

.header-container,
#header-container {
  background-color: var(--rakuyou-dark);
  color: var(--rk-text-inverse);
  border-bottom: 1px solid rgba(167, 131, 69, 0.28);   /* 真鍮の細い罫線 */
  position: relative;
}

/* ごく薄い木の質感。画像を使わず、光の当たり方だけで表現する。
   仕様書§16「強い木目背景にはしない」 */
.header-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(118, 84, 64, 0.20) 0%,
    rgba(118, 84, 64, 0) 42%,
    rgba(0, 0, 0, 0.10) 100%
  );
}

/* ロゴとメニューを1行に並べる（Cocoonの「トップメニュー」レイアウト）

   ヘッダーだけは本文（1200px）より広い 1320px にしている。
   ナビ7項目を2段表示すると、実測で 1205px 必要になるため。
   本文の読みやすさとは無関係な部分なので、ここだけ広げてよい。 */
.header-container-in.hlt-top-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rk-space-md);
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--rk-gutter);
  position: relative;
  z-index: var(--rk-z-base);
}

.hlt-top-menu #header,
.hlt-top-menu .header {
  flex: 0 0 auto;
  background: transparent;
  padding: 0;
  min-height: 0;
}

.hlt-top-menu #header-in,
.hlt-top-menu .header-in {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  min-height: 0;
  text-align: left;
}

.hlt-top-menu #navi,
.hlt-top-menu .navi {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  min-height: 0;
}

.hlt-top-menu #navi-in,
.hlt-top-menu .navi-in {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}


/* ==========================================================================
   L-2   Logo
   ========================================================================== */

.logo-header {
  margin: 0;
  padding-block: 0.85rem;
}

/* Cocoonはロゴのリンクに左右16.8pxずつの余白を入れている。
   その34pxぶんナビを圧迫するので取り除く。
   （実測：ロゴ159px → 125px） */
.logo-header .site-name-text-link,
.logo-header > a {
  display: inline-block;
  padding-inline: 0;
}

/* 画像ロゴ（円形エンブレム）を使う場合 */
.logo-header .logo-image img,
.logo-header .site-name-text-link img {
  display: block;
  height: 46px;
  width: auto;
  border-radius: 0;
}

/* テキストロゴの場合。現在はこちらが使われている。

   サイトのタイトルを「落葉」にすると、下の ::after によって
   その下に小さく RAKUYOU が入り、2行組のロゴになる。
   画像を用意しなくても、仕様書§13の「落葉 / RAKUYOU」の見え方になる。

   将来ロゴ画像を入れたら、この ::after は自動的に使われなくなる。 */
.logo-header .site-name-text {
  display: inline-block;
  font-family: var(--rk-font-display);
  font-size: 1.375rem;
  font-weight: var(--rk-weight-bold);
  letter-spacing: 0.18em;
  color: var(--rakuyou-ivory);
  line-height: 1.25;
  text-align: center;
  transition: color var(--rk-transition);
}

.logo-header .site-name-text::after {
  content: "Solitaryleaflog";
  display: block;
  margin-top: 0.15em;
  font-family: var(--rk-font-script);
  /* 16px。筆記体はx-heightが低いので明朝より大きめに組む。
     Petit Formal Script は字幅が広いので、19pxだとナビと衝突する。
     実測でロゴ125px＋メニュー1078px＝1203px（使える幅1240px、余裕37px）。 */
  font-size: 1rem;
  font-weight: var(--rk-weight-normal);

  /* 筆記体に字間を空けると文字の繋がりが切れる。必ず 0 にする。
     親の letter-spacing: 0.18em を打ち消すため、明示的に指定している。 */
  letter-spacing: 0;

  line-height: 1.1;
  color: var(--rakuyou-brass);
}

.logo-header .site-name-text-link:hover .site-name-text {
  color: var(--rakuyou-brass-light);
}

.logo-header .site-name-text-link:hover .site-name-text::after {
  color: var(--rakuyou-brass-light);
}

/* ロゴ画像を設定した場合は、テキスト側の装飾は出さない */
.logo-header .logo-image ~ .site-name-text::after,
.logo-header.logo-image .site-name-text::after {
  content: none;
}

/* ロゴ画像の右に「落葉 / RAKUYOU」を添えるとき（blocks/header-logo.html）*/
.rakuyou-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rakuyou-logo__mark {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}

.rakuyou-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.rakuyou-logo__ja {
  font-family: var(--rk-font-display);
  font-size: 1.25rem;
  font-weight: var(--rk-weight-bold);
  letter-spacing: 0.2em;
  color: var(--rakuyou-ivory);
}

/* フッター等で使う横組みロゴの英字部分。
   ヘッダーと表記を揃えるため、こちらも筆記体。 */
.rakuyou-logo__en {
  font-family: var(--rk-font-script);
  font-size: 1rem;          /* 16px */
  letter-spacing: 0;        /* 筆記体は字間を空けない */
  line-height: 1.1;
  color: var(--rakuyou-brass);
  margin-top: 0.15em;
}

/* キャッチフレーズはヘッダーには出さない（トップのHEROで見せる） */
.tagline {
  display: none;
}


/* ==========================================================================
   L-3   Global Navigation   ―  2段表示

   Cocoonが出力する構造をそのまま使う：
     <a>
       <div class="caption-wrap">
         <div class="item-label">映画</div>            ← 一般名称（主）
         <div class="item-description">額縁の…</div>    ← 世界観タイトル（従）
       </div>
     </a>
   ========================================================================== */

.navi-in > ul.menu-pc {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cocoonはメニュー項目に固定幅（実測176px）を与えている。
   2段表示では文字数がまちまちなので、内容に合わせて伸縮させる。 */
.navi-in > ul.menu-pc > li {
  position: relative;
  margin: 0;
  padding: 0;
  width: auto;
  min-width: 0;
  list-style: none;
}

.navi-in > ul.menu-pc > li > a {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;

  /* 左右の余白は画面幅に応じて 7.2px〜11.2px の間で伸縮させる。
     狭い画面ではナビが詰まり、広い画面ではゆったりする。
     固定値にすると1320px前後で数pxはみ出すことがある。 */
  padding-block: 1.05rem;
  padding-inline: clamp(0.45rem, 0.2rem + 0.5vw, 0.7rem);

  background: transparent;
  color: var(--rakuyou-ivory);
  text-align: center;
  line-height: 1.4;
  border: 0;
  transition: color var(--rk-transition), background-color var(--rk-transition);
}

.navi-in > ul.menu-pc > li > a:hover {
  background-color: rgba(167, 131, 69, 0.12);
  color: var(--rakuyou-brass-light);
}

/* 一般名称 ― 視認性を高くする（仕様書§8） */
.navi-in > ul.menu-pc .item-label {
  display: block;
  font-family: var(--rk-font-ui);
  font-size: 0.9375rem;          /* 15px */
  font-weight: var(--rk-weight-medium);
  letter-spacing: 0.05em;        /* 7項目を1行に収めるため詰めている */
  line-height: 1.4;
  color: inherit;
  white-space: nowrap;
}

/* 世界観タイトル ― 小さく、真鍮で、控えめに */
.navi-in > ul.menu-pc .item-description,
.navi-in > ul.menu-pc .sub-caption {
  display: block;
  margin-top: 0.35em;
  font-family: var(--rk-font-ui);
  font-size: 0.625rem;           /* 10px */
  font-weight: var(--rk-weight-normal);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--rakuyou-brass);
  opacity: 0.82;
  white-space: nowrap;
  transition: opacity var(--rk-transition);
}

/* 画面幅が1320pxに満たないPC・タブレット横向きでは、2段だとナビが溢れる。
   世界観タイトルを隠して1段にする。
   （初見の読者にとっては一般名称のほうが大事なので、そちらを残す） */
@media screen and (min-width: 1024px) and (max-width: 1319px) {

  .navi-in > ul.menu-pc .item-description,
  .navi-in > ul.menu-pc .sub-caption {
    display: none;
  }

  .navi-in > ul.menu-pc > li > a {
    padding-block: 1.4rem;
  }
}

.navi-in > ul.menu-pc > li > a:hover .item-description {
  opacity: 1;
}

/* 現在地 ― 下端に真鍮の線を引く */
.navi-in > ul.menu-pc > li.current-menu-item > a,
.navi-in > ul.menu-pc > li.current-menu-parent > a,
.navi-in > ul.menu-pc > li.current-menu-ancestor > a {
  position: relative;
  color: var(--rakuyou-brass-light);
}

.navi-in > ul.menu-pc > li.current-menu-item > a::after,
.navi-in > ul.menu-pc > li.current-menu-parent > a::after,
.navi-in > ul.menu-pc > li.current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  /* リンクの左右余白と同じ値。上の padding-inline を変えたらここも合わせる */
  left: clamp(0.45rem, 0.2rem + 0.5vw, 0.7rem);
  right: clamp(0.45rem, 0.2rem + 0.5vw, 0.7rem);
  bottom: 0.55rem;
  height: 1px;
  background-color: var(--rakuyou-brass);
}


/* ==========================================================================
   L-4   Dropdown   ―  「好奇心の棚 ▾」
   ========================================================================== */

/* 親項目に小さな下向き記号を付ける */
.navi-in > ul.menu-pc > li.menu-item-has-children > a .item-label::after {
  content: "▾";
  display: inline-block;
  margin-left: 0.45em;
  font-size: 0.85em;
  color: var(--rakuyou-brass);
  vertical-align: 0.05em;
}

.navi-in ul.menu-pc ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--rk-z-dropdown);
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background-color: var(--rakuyou-dark);
  border: 1px solid rgba(167, 131, 69, 0.3);
  border-radius: var(--rk-radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--rk-transition),
              transform var(--rk-transition),
              visibility var(--rk-transition);
}

.navi-in ul.menu-pc > li:hover > ul.sub-menu,
.navi-in ul.menu-pc > li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navi-in ul.menu-pc ul.sub-menu li {
  width: 100%;
}

.navi-in ul.menu-pc ul.sub-menu > li > a {
  display: block;
  width: 100%;
  padding: 0.7rem 1.25rem;
  text-align: left;
  color: var(--rakuyou-ivory);
  background: transparent;
  transition: background-color var(--rk-transition), color var(--rk-transition);
}

.navi-in ul.menu-pc ul.sub-menu > li > a:hover {
  background-color: rgba(167, 131, 69, 0.16);
  color: var(--rakuyou-brass-light);
}

.navi-in ul.menu-pc ul.sub-menu .item-label {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  white-space: normal;
}

.navi-in ul.menu-pc ul.sub-menu .item-description {
  margin-top: 0.25em;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  white-space: normal;
}

/* 最後の項目「すべての棚を見る」を区切る */
.navi-in ul.menu-pc ul.sub-menu > li.rakuyou-shelf-all {
  border-top: 1px solid rgba(216, 207, 192, 0.16);
  margin-top: 0.4rem;
  padding-top: 0.4rem;
}


/* ==========================================================================
   L-5   Search
   ========================================================================== */

/* 検索はメニュー項目（カスタムリンク）として置く。
   ラベルに <span class="fa fa-search"></span> を入れて使う。 */
.navi-in > ul.menu-pc > li.rakuyou-search > a {
  padding-inline: 0.9rem;
}

.navi-in > ul.menu-pc > li.rakuyou-search .item-label {
  font-size: 1rem;
  color: var(--rakuyou-brass-light);
}

.navi-in > ul.menu-pc > li.rakuyou-search .item-description {
  display: none;
}


/* ==========================================================================
   L-6   Mobile Header
   ========================================================================== */

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

  .header-container-in.hlt-top-menu {
    flex-direction: column;
    gap: 0;
    padding-block: 0;
  }

  .logo-header {
    padding-block: 0.9rem;
    text-align: center;
    width: 100%;
  }

  .logo-header .site-name-text {
    font-size: 1.1875rem;
    letter-spacing: 0.16em;
  }

  .rakuyou-logo {
    justify-content: center;
  }

  /* PCメニューはスマホでは出さない */
  .navi-in > ul.menu-pc {
    display: none;
  }

  /* Cocoonはスマホ用に ul.menu-mobile という別のメニューを出力する。
     これには既定で濃いグレー（#333）の文字色が付いており、
     Dark Walnut のヘッダーに乗ると読めなくなる。

     加えて2段表示のまま縦に並ぶため、HEROの前に200px近く場所を取る。
     ナビゲーションは画面下の「メニュー」ボタン（スライドメニュー）が
     担当しているので、こちらは出さない。

     もし上部にもメニューを出したい場合は、下の display:none を消して
     色（--rakuyou-ivory）を当て直してください。

     ⚠ セレクタに #navi を含めているのは、詳細度を上げるため。
        Cocoon側が #navi .navi-in > .menu-mobile { display:flex } と
        IDセレクタで指定しており（詳細度 1,2,0）、
        クラスだけでは何個重ねても勝てない。 */
  #navi .navi-in > ul.menu-mobile,
  #navi-in > ul.menu-mobile {
    display: none;
  }
}


/* ==========================================================================
   L-7   Mobile Drawer   ―  スライドメニュー
   仕様書§8「スマホでは世界観タイトルを非表示にし、一般名称のみ」
   ========================================================================== */

#navi-menu-content,
.navi-menu-content {
  background-color: var(--rakuyou-dark);
  color: var(--rakuyou-ivory);
}

.menu-drawer {
  padding: 1rem 0 4rem;
  margin: 0;
  list-style: none;
}

.menu-drawer li {
  border-bottom: 1px solid rgba(216, 207, 192, 0.12);
  list-style: none;
}

.menu-drawer li a {
  display: block;
  padding: 1.05rem 1.5rem;
  font-family: var(--rk-font-ui);
  font-size: 0.9375rem;
  font-weight: var(--rk-weight-medium);
  letter-spacing: 0.09em;
  color: var(--rakuyou-ivory);
  background: transparent;
  transition: background-color var(--rk-transition), color var(--rk-transition);
}

.menu-drawer li a:hover,
.menu-drawer li a:active {
  background-color: rgba(167, 131, 69, 0.14);
  color: var(--rakuyou-brass-light);
}

/* 子項目（好奇心の棚の中身）は一段下げる */
.menu-drawer .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: rgba(0, 0, 0, 0.18);
}

.menu-drawer .sub-menu li a {
  padding-left: 2.75rem;
  font-size: 0.875rem;
  color: rgba(244, 240, 230, 0.85);
}

/* ドロワー内では説明文（世界観タイトル）を出さない */
.menu-drawer .item-description,
.menu-drawer .sub-caption {
  display: none;
}

.menu-close-button,
.navi-menu-close-button {
  color: var(--rakuyou-brass-light);
}


/* ==========================================================================
   L-8   Mobile Bottom Bar   ―  画面下の固定バー
   ========================================================================== */

.mobile-footer-menu-buttons {
  background-color: var(--rakuyou-dark);
  border-top: 1px solid rgba(167, 131, 69, 0.3);
}

.mobile-menu-buttons .menu-button,
.mobile-menu-buttons .menu-button-in {
  background-color: transparent;
  color: var(--rakuyou-ivory);
  border: 0;
}

.mobile-menu-buttons .menu-caption {
  font-family: var(--rk-font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}

.mobile-menu-buttons .menu-icon {
  color: var(--rakuyou-brass-light);
}


/* ==========================================================================
   L-9   Footer   ―  §24
   ========================================================================== */

#footer,
.footer,
.footer-container {
  background-color: var(--rakuyou-dark);
  color: var(--rakuyou-ivory);
  border-top: 0;
  margin-top: var(--rk-section-gap);
}

#footer-in,
.footer-in {
  width: 100%;
  max-width: var(--rk-width-site);
  margin-inline: auto;
  padding: var(--rk-space-xl) var(--rk-gutter) var(--rk-space-md);
}

/* Cocoonのフッターウィジェットは3分割だが、RAKUYOUでは
   「フッター左」1か所にすべてを入れて、こちらで4列に組む。
   （blocks/footer-widget.html を貼る） */
.footer-widgets {
  display: block;
  margin-bottom: var(--rk-space-xl);
}

.footer-widgets .footer-left {
  width: 100%;
  float: none;
  padding: 0;
}

.footer-widgets .footer-center,
.footer-widgets .footer-right {
  display: none;
}

.footer-widgets .widget {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

/* --- フッター内のRAKUYOUレイアウト --------------------------------------- */

.rakuyou-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--rk-space-lg) var(--rk-space-md);
  align-items: start;
}

.rakuyou-footer-brand .rakuyou-logo__ja {
  font-size: 1.375rem;
}

.rakuyou-footer-message {
  margin-top: var(--rk-space-md);
  font-family: var(--rk-font-display);
  font-size: 0.9375rem;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: rgba(244, 240, 230, 0.78);
}

.rakuyou-footer-col__title {
  margin: 0 0 var(--rk-space-sm);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(167, 131, 69, 0.35);
  font-family: var(--rk-font-ui);
  font-size: 0.6875rem;
  font-weight: var(--rk-weight-medium);
  letter-spacing: var(--rk-tracking-widest);
  color: var(--rakuyou-brass);
}

.rakuyou-footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rakuyou-footer-col li {
  margin-bottom: 0.55em;
  list-style: none;
}

.rakuyou-footer-col a {
  font-family: var(--rk-font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.82);
  border: 0;
  transition: color var(--rk-transition);
}

.rakuyou-footer-col a:hover {
  color: var(--rakuyou-brass-light);
}

/* 世界観タイトルを小さく添える */
.rakuyou-footer-col a .sub {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: rgba(167, 131, 69, 0.85);
  margin-top: 0.15em;
}

/* SNS */
.rakuyou-footer-sns {
  display: flex;
  gap: var(--rk-space-md);
  margin-top: var(--rk-space-md);
}

.rakuyou-footer-sns a {
  color: rgba(244, 240, 230, 0.7);
  font-size: 1.0625rem;
  transition: color var(--rk-transition);
}

.rakuyou-footer-sns a:hover {
  color: var(--rakuyou-brass);
}

/* --- フッター最下部 ------------------------------------------------------ */

/* Cocoonは .footer-bottom.fdt-logo を横並び（ロゴ｜内容）で組む。
   ロゴ側を非表示にしているため、そのままだと内容が右へ寄ってしまう。
   block に戻して中央揃えにする。 */
.footer-bottom,
.footer-bottom.fdt-logo {
  display: block;
  padding-top: var(--rk-space-md);
  border-top: 1px solid rgba(216, 207, 192, 0.14);
  text-align: center;
}

.footer-bottom-content {
  width: 100%;
  float: none;
  margin: 0;
  text-align: center;
}

.footer-bottom-logo {
  display: none;   /* ロゴはグリッド側に出しているので重複を消す */
}

/* ブランドメッセージを最後に置く（§24） */
.footer-bottom::before {
  content: "自分を愛し、世界を面白がる。";
  display: block;
  margin-bottom: var(--rk-space-md);
  font-family: var(--rk-font-display);
  font-size: 1rem;
  letter-spacing: 0.22em;
  color: var(--rakuyou-brass-light);
  line-height: 1.8;
}

/* 透明度0.5だとコントラスト比 4.35:1 で、
   アクセシビリティ基準（本文4.5:1）にわずかに届かない。
   0.62 にすると 5.8:1 になり、控えめな見え方は保ったまま基準を満たす。 */
.copyright,
.source-org.copyright {
  display: block;
  width: 100%;
  font-family: var(--rk-font-latin);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  line-height: 1.8;
  color: rgba(244, 240, 230, 0.62);
  text-align: center;
}

#navi-footer,
.navi-footer {
  background: transparent;
  border: 0;
}


/* ==========================================================================
   L-10  Sidebar Off   ―  1カラム化
   仕様書のデザイン案にサイドバーは無い。
   Cocoon設定でも切れるが、CSS側でも保険をかけておく。
   ========================================================================== */

.no-sidebar #main,
.no-sidebar .main {
  width: 100%;
  max-width: var(--rk-width-site);
  margin-inline: auto;
  float: none;
  padding-inline: var(--rk-gutter);
  background: transparent;
  border: 0;
}

.no-sidebar #sidebar,
.no-sidebar .sidebar {
  display: none;
}


/* ==========================================================================
   L-10b  Appeal Area  ―  更新のお知らせ

   Cocoon設定のアピールエリアに置いてある「更新のお知らせ」。
   もともと追加CSS（カスタマイザー）で装飾されていたものを、
   ここへ移してRAKUYOU仕様に作り直しています。

   追加CSSはデータベースに保存されるため、こちらで編集できません。
   テーマファイルに移すことで、あとから調整できるようにしてあります。
   ========================================================================== */

#appeal,
.appeal {
  background-color: var(--rk-bg-content);
  background-image: none;
  color: var(--rk-text);
  border-bottom: 1px solid var(--rk-line);
  padding-block: var(--rk-space-lg);
  min-height: 0;
}

#appeal-in,
.appeal-in {
  width: 100%;
  max-width: var(--rk-width-site);
  margin-inline: auto;
  padding-inline: var(--rk-gutter);
}

.appeal-content,
.appeal-message {
  text-align: left;
  max-width: none;
}

/* --- 更新のお知らせ ----------------------------------------------------- */

.update-log {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--rk-font-ui);
  color: var(--rk-text);
}

.update-log__title {
  margin: 0 0 var(--rk-space-sm);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rakuyou-brass);
  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;
}

.update-log__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.update-log__item {
  display: flex;
  gap: var(--rk-space-md);
  align-items: baseline;
  margin: 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rk-line);
  line-height: 1.7;
  list-style: none;
}

.update-log__item:first-child {
  border-top: 0;
}

.update-log__date {
  flex-shrink: 0;
  width: 5.75rem;
  font-family: var(--rk-font-latin);
  font-size: var(--rk-text-sm);
  letter-spacing: 0.1em;
  color: var(--rk-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.update-log__link {
  font-size: var(--rk-text-base);
  letter-spacing: 0.04em;
  color: var(--rk-text);
  border: 0;
  transition: color var(--rk-transition);
}

.update-log__link:hover {
  color: var(--rakuyou-brass-deep);
  text-decoration: none;
}

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

  .update-log__item {
    display: block;
    padding: 0.6rem 0;
  }

  .update-log__date {
    display: block;
    width: auto;
    margin-bottom: 0.2em;
  }
}


/* ==========================================================================
   L-11  Cleanup
   ========================================================================== */

/* 旧デザインの装飾要素。HTMLがどこかに残っていても表示しない。
   仕様書§26「秋の葉を大量に配置する」「過剰なアニメーション」を避けるため。
   復活させたくなったら、この指定を消してください。

   ⚠ #custom-icon は、以前 #custom-fixed-icon と書き間違えていて効いていなかった。
      実体は Cocoon設定 → アクセス解析・認証 → フッター用コード にある
      キャラクター画像＋吹き出し。本体もそちらから削除すること。
      （このCSSは、消し忘れたときの保険） */
.leaf-wrap,
.walk-wrap,
#custom-icon,
#speech-bubble {
  display: none !important;
}

/* GTranslateがナビゲーションに空の項目を差し込むので隠す。
   （プラグイン自体の停止を検討中。docs/01を参照） */
.menu-item-gtranslate {
  display: none !important;
}

/* Cocoonの「トップへ戻る」ボタン */
#go-to-top .go-to-top-button,
.go-to-top-button {
  background-color: var(--rakuyou-dark);
  color: var(--rakuyou-brass-light);
  border: 1px solid rgba(167, 131, 69, 0.4);
  border-radius: var(--rk-radius-sm);
}

/* パンくず ― §17 */
.breadcrumb,
#breadcrumb {
  max-width: var(--rk-width-site);
  margin: var(--rk-space-md) auto;
  padding-inline: var(--rk-gutter);
  font-family: var(--rk-font-ui);
  font-size: var(--rk-text-xs);
  letter-spacing: var(--rk-tracking-wide);
  color: var(--rk-text-muted);
  background: transparent;
  border: 0;
}

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

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

.breadcrumb .fa {
  color: var(--rakuyou-brass);
}


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

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

  .rakuyou-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--rk-space-lg) var(--rk-space-md);
  }

  .rakuyou-footer-brand {
    grid-column: 1 / -1;
  }

  #footer-in,
  .footer-in {
    padding-top: var(--rk-space-lg);
  }

  .footer-bottom::before {
    font-size: 0.875rem;
    letter-spacing: 0.16em;
  }
}

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

  .rakuyou-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--rk-space-md);
  }

  .rakuyou-footer-col__title {
    margin-bottom: var(--rk-space-xs);
  }
}