@charset "UTF-8";

.up-d_is-hidden {
  display: none !important;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* ============================================================
   詳細ページ外側ラッパー（カスコン埋め込みターゲット周辺）
   ============================================================ */
.up-d_journal-main {
  /* 固定ヘッダー分を加算（40px は元の上余白） */
  padding: calc(40px + var(--up-d-header-h, 127px)) 0 60px;
}

.up-d_journal-inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (max-width: 800px) {
  .up-d_journal-main {
    padding: calc(24px + var(--up-d-header-h, 127px)) 0 40px;
  }
  .up-d_journal-inner {
    padding-inline: 16px;
  }
}
/* ============================================================
   詳細ページ
   ============================================================ */
.up-d_journal-detail {
  color: #333;
}

/* 実サイト(ishida-watch blog)の .section_main .headline は罫線なし＝罫線を付けない */
/* 実サイトは .headline + * { margin-top: 40px }。著者ブロックへその余白を踏襲 */
.up-d_journal-headline + .up-d_journal-author {
  margin-top: 40px;
}

.up-d_journal-author + .up-d_journal-thumb {
  margin-top: 20px;
}

/* サムネイル無しの記事用フォールバック */
.up-d_journal-author + .up-d_journal-body {
  margin-top: 30px;
}

.up-d_journal-thumb + .up-d_journal-body {
  margin-top: 30px;
}

/* サムネイル（記事ヒーロー画像） */
.up-d_journal-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* 公開日・更新日を横並び（更新日が非表示のときは公開日のみ） */
.up-d_journal-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  margin-top: 8px;
}

.up-d_journal-date,
.up-d_journal-updated {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  letter-spacing: 0;
  line-height: 1.6;
}

.up-d_journal-date-label {
  color: #999;
}

.up-d_journal-title {
  padding: 5px 0;
  font-size: 24px;
  font-weight: bold;
  color: #222;
  letter-spacing: 0;
  line-height: 30px;
}

/* ---- 本文（既存ブログ .mceContentBody 相当） ---- */
.up-d_journal-body {
  color: #333;
  padding-bottom: 40px;
  /* 要素間マージン（既存 * + * パターン踏襲） */
}
.up-d_journal-body > * + * {
  margin-top: 10px;
}
.up-d_journal-body .up-d_journal-paragraph + .up-d_journal-paragraph,
.up-d_journal-body .up-d_journal-paragraph + .up-d_journal-figure,
.up-d_journal-body .up-d_journal-figure + .up-d_journal-paragraph {
  margin-top: 20px;
}
.up-d_journal-body h1, .up-d_journal-body h2, .up-d_journal-body h3, .up-d_journal-body h4, .up-d_journal-body h5, .up-d_journal-body h6 {
  margin-top: 20px;
  font-weight: bold;
  text-align: left;
  line-height: 1.4;
  color: #333;
  letter-spacing: 0;
}
.up-d_journal-body h1 {
  font-size: 22px;
}
.up-d_journal-body h2 {
  font-size: 20px;
  font-family: "ヒラギノUD角ゴ W3 JIS2004", sans-serif;
}
.up-d_journal-body h3 {
  font-size: 18px;
}
.up-d_journal-body h4 {
  font-size: 16px;
}
.up-d_journal-body h5 {
  font-size: 14px;
}
.up-d_journal-body h6 {
  font-size: 12px;
}
.up-d_journal-body strong {
  font-weight: bold;
  color: #000;
}
.up-d_journal-body a {
  color: #948456;
}
.up-d_journal-body a:hover {
  color: #b0a278;
}
.up-d_journal-body ul, .up-d_journal-body ol {
  padding-left: 1.5em;
}
.up-d_journal-body img {
  max-width: 100%;
  height: auto;
}

/* 実サイトの「まわりこみ対策」踏襲: float は使わずブロック寄せ（テキスト回り込みなし） */
.up-d_align-center {
  display: block;
  text-align: center;
  margin-inline: auto;
}

.up-d_align-left {
  display: block;
  text-align: left;
  margin-right: auto;
  margin-left: 0;
}

.up-d_align-right {
  display: block;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

/* 本文中の画像枠。実サイト .mceContentBody img と同じく原寸（最大100%・拡大しない）。
   サイズ違いは画像の width 属性 or 中/小の併記クラスで */
.up-d_journal-figure img {
  max-width: 100%;
  height: auto;
}

.up-d_journal-figure.up-d_journal-figure--md {
  max-width: 600px;
  margin-inline: auto;
}

.up-d_journal-figure.up-d_journal-figure--sm {
  max-width: 360px;
  margin-inline: auto;
}

/* ---- 著者ブロック（Image #3 仕様: 薄グレーボックス＋リングアバター＋担当者バッジ） ---- */
.up-d_journal-author {
  display: flex;
  align-items: center;
  padding: 24px 30px;
  background: #f5f5f5;
}

.up-d_journal-author .up-d_author-img {
  position: relative;
  flex: 0 0 72px;
  width: 72px;
}
.up-d_journal-author {
  /* img を単独 div で内包（A-BiSU仕様）。円形クリップはこのラッパーが担う */
}
.up-d_journal-author .up-d_author-photo {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #ddd;
  overflow: hidden;
}
.up-d_journal-author .up-d_author-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.up-d_journal-author .up-d_author-badge {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0;
  line-height: 1.4;
  white-space: nowrap;
}
.up-d_journal-author .up-d_author-body {
  margin-left: 24px;
}
.up-d_journal-author .up-d_author-name {
  font-size: 15px;
  font-weight: bold;
  color: #222;
  letter-spacing: 0;
  line-height: 1.6;
}
.up-d_journal-author .up-d_author-profile {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  letter-spacing: 0;
  line-height: 1.6;
}

/* ============================================================
   一覧へ戻るボタン（詳細ページ下部）
   ============================================================ */
.up-d_journal-back {
  margin-top: 40px;
  text-align: center;
}

.up-d_journal-back a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 44px;
  border: 1px solid #ada27d;
  background: #fff;
  color: #948456;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.up-d_journal-back a:hover {
  background: #ada27d;
  color: #fff;
}

/* 左向きシェブロン（currentColor でテキスト色に追従） */
.up-d_journal-back a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

/* 埋め込みセクション（.up-d_journal-section / .up-d_journal-list / .up-d_journal-more 等）
   は別ファイルへ分離: sass/_embed.scss → assets/css/embed.css
   埋め込み配置先ページには dokodemo-ishida.css + embed.css の両方を登録する。 */
/* ============================================================
   一覧ページ（ISHIDA JOURNAL アーカイブ）
   カード: サムネ → 公開日 → タイトル → 著者画像+名前
   グリッド: PC 4カラム / TAB(≤1070) 3カラム / SP(≤800) 2カラム
   1ページ 12件（4×3）想定。ページネーションはサイト調（ゴールド #ada27d）
   ============================================================ */
/* 外側ラッパー（一覧は本文より広い） */
.up-d_journal-archive {
  /* 固定ヘッダー分を加算（48px は元の上余白） */
  padding: calc(48px + var(--up-d-header-h, 127px)) 0 72px;
}

.up-d_journal-archive-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* 一覧ページ見出し */
.up-d_journal-archive-head {
  text-align: center;
}

.up-d_journal-archive-title {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.up-d_journal-archive-lead {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  color: #888;
  letter-spacing: 0.04em;
  line-height: 1.8;
}

/* カードグリッド（4カラム / gap 行50px・列30px） */
.up-d_journal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px 30px;
  margin-top: 40px;
}

/* --- 見たまま編集画面（A-BiSU管理画面）対応 ---
   カスコンで grid を埋め込むと、grid 直下に条件用の
   div[data-collection-list-content] が1つ入り、その中に <article> が並ぶ。
   本番表示ではこの div は除かれ article が grid 直下に来るが、
   見たまま編集画面では div が残るため grid の子が div 1つだけになり崩れる。
   → 編集画面（ガワ要素に [data-element-id] が付く）では grid を内側の div へ移す。
   ※ 詳細: a-bisu/_knowledge/case-studies/2026-05_cascon-grid-editor.md */
[data-element-id] .up-d_journal-grid {
  display: contents;
}

[data-element-id] .up-d_journal-grid > div[data-collection-list-content] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px 30px;
}

/* ---- カード ---- */
.up-d_journal-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.up-d_journal-card a:hover .up-d_journal-card-title {
  color: #948456;
}

/* サムネ（CLS対策: aspect-ratio で枠確保） */
.up-d_journal-card-thumb {
  overflow: hidden;
  background: #f2f1ed;
}
.up-d_journal-card-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.up-d_journal-card a:hover .up-d_journal-card-thumb img {
  transform: scale(1.05);
}

.up-d_journal-card-date {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  color: #999;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.up-d_journal-card-title {
  margin-top: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
  letter-spacing: 0;
  line-height: 1.6;
  transition: color 0.2s ease;
  /* 2行まで表示。3行目以降は省略して「…」を付与 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* 著者（画像 + 名前） */
.up-d_journal-card-author {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.up-d_journal-card-avatar {
  flex: 0 0 32px;
  width: 32px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid #e3e1da;
  overflow: hidden;
}
.up-d_journal-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.up-d_journal-card-author-name {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: #555;
  letter-spacing: 0;
  line-height: 1.5;
}

/* ============================================================
   ページネーション（A-BiSU collection ページネーション）
   構造（li は ul 直下に書く。data-collection-* の制御 div は A-BiSU 側で扱う）:
     div.up-d_pagination
       > ul.up-d_pagination-list
           > (div[data-collection-*-block])      ← A-BiSU が描画時に自動挿入
               > li.up-d_pagination-item > a / span
   ・自動挿入される -block の div は display:contents でレイアウト透過し、
     li を直接 flex アイテム化する（div が無くても有っても同じ表示）
   ・矢印は < > のテキスト（CSS描画ではない）
   サイト調のゴールド #ada27d
   ============================================================ */
.up-d_pagination {
  margin-top: 56px;
}

.up-d_pagination-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A-BiSU の data-collection-*-block ラッパー div を透過 → li を flex アイテム化 */
.up-d_pagination-list div {
  display: contents;
}

/* 数字 / 現在 / 矢印 共通の箱（li 内の a または span が箱になる） */
.up-d_pagination-item a,
.up-d_pagination-item.is-current > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
}

/* 数字ページ: 薄ベージュ地・ゴールド字 */
.up-d_pagination-item a {
  background: #f2f1ed;
  color: #948456;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.up-d_pagination-item a:hover {
  background: #ada27d;
  color: #fff;
}

/* 現在ページ: ゴールド地・白字 */
.up-d_pagination-item.is-current > span {
  background: #ada27d;
  color: #fff;
}

/* 前後の矢印（< >）は数字ページと同じ配色（薄ベージュ地・ゴールド字）。
   .up-d_pagination-item a のスタイルがそのまま適用される */
/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1070px) {
  /* 一覧グリッド: 3カラム */
  .up-d_journal-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 16px;
  }
  /* 埋め込みのレスポンシブは _embed.scss 側で定義 */
}
@media (max-width: 800px) {
  /* --- 詳細ページ --- */
  .up-d_journal-author + .up-d_journal-thumb {
    margin-top: 16px;
  }
  .up-d_journal-author + .up-d_journal-body {
    margin-top: 20px;
  }
  .up-d_journal-thumb + .up-d_journal-body {
    margin-top: 20px;
  }
  /* 実サイト SP: post_title は font-size:20px のみ（line-height は 30px のまま） */
  .up-d_journal-title {
    font-size: 20px;
  }
  .up-d_journal-body {
    padding-bottom: 20px;
  }
  .up-d_journal-body h1 {
    font-size: 18px;
  }
  .up-d_journal-body h2 {
    font-size: 16px;
  }
  .up-d_journal-body h3 {
    font-size: 15px;
  }
  .up-d_journal-body h4 {
    font-size: 14px;
  }
  .up-d_journal-body h5 {
    font-size: 12px;
  }
  .up-d_journal-body h6 {
    font-size: 10px;
  }
  .up-d_journal-back {
    margin-top: 24px;
  }
  .up-d_journal-back a {
    padding: 14px 32px;
  }
  /* --- 一覧ページ --- */
  .up-d_journal-archive {
    padding: calc(32px + var(--up-d-header-h, 127px)) 0 48px;
  }
  .up-d_journal-archive-inner {
    padding-inline: 16px;
  }
  .up-d_journal-archive-title {
    font-size: 22px;
  }
  .up-d_journal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 14px;
    margin-top: 28px;
  }
  .up-d_pagination {
    margin-top: 40px;
  }
  .up-d_pagination-list {
    gap: 6px;
  }
  .up-d_pagination-item a,
  .up-d_pagination-item.is-current > span {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
  /* 埋め込みのレスポンシブは _embed.scss 側で定義 */
}
/* ============================================================
   プレビュー専用の枠（A-BiSU標準コンテンツ幅を模擬）
   ※ A-BiSU 側ページにこのクラスは出現しないため登録CSSに含まれても無害。
     手元の preview-detail.html 確認用。後から調整可。
   ============================================================ */
.up-d_preview-frame {
  max-width: 800px;
  margin-inline: auto;
  margin-top: 40px;
  padding: 40px;
  background: #fff;
}

/* preview-embed.html 用のプレビュー専用CSSは _embed.scss 側へ移動済み */
/* ============================================================
   ISHIDA JOURNAL - 店舗名（任意項目）
   記事に紐づく店舗名を、詳細ページ／一覧カードの「日付の下」に表示する。
   見た目は詳細・一覧とも共通の「枠線タグ」。
   ※ 店舗名は選択式（ラジオ）、店舗URLは「リンクURL」型で登録する想定。
   ※ 任意項目のため、登録状況に応じた表示整形は dokodemo-ishida.js が行う:
       店舗名なし→枠ごと非表示(up-d_is-hidden)／店舗名あり・URLなし→href除去でテキスト化。
     CSSの :empty / :has と a:not([href]) は、その JS と二重で安全側に倒すための保険。

   詳細ページ: 店舗ページへの「リンク」で出す（カードの囲みリンクが無いのでOK）
     <div class="up-d_journal-shop"><a href='{# 店舗URL #}'>{# 店舗名 #}</a></div>
   一覧カード: カード全体が <a href='詳細リンク'> で囲まれており、中に <a> を
     入れるとアンカーのネスト（不正HTML）になるため、店舗名は「テキスト表示」にする
     <div class="up-d_journal-card-shop">{# 店舗名 #}</div>
   ============================================================ */
/* ---- 配置（日付の下）---- */
.up-d_journal-shop {
  margin-top: 8px;
}

.up-d_journal-card-shop {
  margin-top: 6px;
}

/* ---- 店舗未登録（任意）時は出さない ---- */
.up-d_journal-shop:has(a:empty) {
  display: none;
}

.up-d_journal-shop a:empty {
  display: none;
}

.up-d_journal-card-shop:empty {
  display: none;
}

/* ---- 詳細リンク・一覧テキスト共通の枠線タグ ---- */
.up-d_journal-shop a,
.up-d_journal-card-shop {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: #8a6d3b;
  letter-spacing: 0.04em;
  line-height: 1.6;
  border: 1px solid #8a6d3b;
  padding: 2px 4px;
  transition: opacity 0.2s ease;
}

/* ---- ホバー：詳細リンクのみ（カーソルポインター＋薄く）。
   一覧はカード全体のホバーに任せ、店舗名タグ単体にはホバー効果を付けない。 ---- */
.up-d_journal-shop a:hover {
  cursor: pointer;
  opacity: 0.3;
}

/* 店舗名あり・URL未登録のとき、クリック不可のただのタグにする。
   - a[href=""]          : 空 href を A-BiSU がそのまま出したケース
   - a[href$="?path="]   : 店舗URL未入力 → A-BiSU が空 href を headless リンク扱いして
                            「…/f/headless.html?path=」(path空＝行き先なし) に書き換えたケース
   - a:not([href])       : dokodemo-ishida.js が空/不正 href を外したケース
   いずれも非クリック化（JSに依存せずCSS単体でも成立）。 */
.up-d_journal-shop a[href=""],
.up-d_journal-shop a[href$="?path="],
.up-d_journal-shop a:not([href]) {
  cursor: default;
  pointer-events: none;
}

/* ============================================================
   ISHIDA JOURNAL - 本文の動画枠（up-d_video-container）
   ベース: ランクアップ案件 dokodemo-topics.css を移植。
   連動JS: assets/js/dokodemo-video.js（枠を iframe/video に変換し
           成功時に .up-d_is-converted を付与する）
   ============================================================ */
/* 公開ページ：未変換の枠（貼り忘れ・JS未実行）は表示しない */
.up-d_video-container {
  display: none;
}

/* カスコン入力画面：エディタ内にも登録CSSが読み込まれて枠が消えるため表示を戻す。
   枠線・背景などの装飾は付けない（Enterで枠クラスが次の行に引き継がれても
   公開側JSが無害化するので、エディタで枠を意識させる必要がない）。
   ※ .sig-wysiwyg-text-area は A-BiSU エディタの本文枠クラス。
     ISHIDA の見たまま編集でも同クラスか要実機確認（違えば差し替え）。 */
.sig-wysiwyg-text-area .up-d_video-container {
  display: block;
}

/* 変換成功時のみJSがこのクラスを付けて表示される */
.up-d_video-container.up-d_is-converted {
  display: block;
  margin-top: 24px;
}

.up-d_video-container iframe,
.up-d_video-container video {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin-inline: auto;
  border: 0;
}

.up-d_video-container--youtube iframe {
  aspect-ratio: 16/9;
}

/* ============================================
   ISHIDA JOURNAL - フィルタリング一覧＋著者ブロック最下部
   Backlog: DOKODEMO_ABISU-456 追加依頼（2026/06/23）
   - .up-d_journal-filter: カテゴリ/タグのリンク一覧（一覧・詳細 共用）
       カテゴリ = 塗りチップ / タグ = 枠線チップ（#付きテキスト）
       up-d_is-active = 現在絞り込み中の値（JSが付与）
   - .up-d_journal-author--bottom: JSで記事最下部へ移動した著者ブロックの余白
   ============================================ */

.up-d_journal-filter {
  max-width: 1070px;
  margin-top: 40px;
  margin-inline: auto;
}

.up-d_journal-filter-group {
  margin-top: 24px;
}

.up-d_journal-filter-group:first-child {
  margin-top: 0;
}

.up-d_journal-filter-label {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.up-d_journal-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-left: 0;
  list-style: none;
}

/* --- 見たまま編集画面（A-BiSU管理画面）対応 ---
   動的リンクを埋め込むと ul 直下に条件用の div[data-collection-filtered-content] が
   1つ入り、その中に li が並ぶ。本番ではこの div は除かれ li が ul 直下に来るが、
   編集画面では div が残るため flex の子が div 1つだけになり縦積みに崩れる。
   → 編集画面（ガワ要素に [data-element-id] が付く）では flex を内側の div へ移す。
   ※ .up-d_journal-grid の data-collection-list-content 対応と同じパターン */
[data-element-id] .up-d_journal-filter-list {
  display: block;
}

[data-element-id] .up-d_journal-filter-list > div[data-collection-filtered-content] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.up-d_journal-filter-item a {
  display: block;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.3s;
}

.up-d_journal-filter-item a:hover {
  opacity: 0.6;
}

/* カテゴリ: 塗りチップ */
.up-d_journal-filter-list--cat .up-d_journal-filter-item a {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* タグ: 枠線チップ */
.up-d_journal-filter-list--tag .up-d_journal-filter-item a {
  border: 1px solid #999999;
  color: #333333;
}

/* 現在絞り込み中（JSが付与） */
.up-d_journal-filter-item a.up-d_is-active {
  background-color: #b09355; /* サイトのゴールド系アクセント */
  border-color: #b09355;
  color: #ffffff;
}

/* 絞り込み解除（全件へ戻る）: 「一覧へ戻る」と同じゴールドボタン
   ※詳細ページには「一覧へ戻る」ボタンがあり重複するため、
     詳細側のフィルタブロックからは .up-d_journal-filter-all ごと削除して使う */
.up-d_journal-filter-all {
  margin-top: 32px;
  text-align: center;
}

.up-d_journal-filter-all a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 44px;
  border: 1px solid #ada27d;
  background: #fff;
  color: #948456;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.up-d_journal-filter-all a:hover {
  background: #ada27d;
  color: #fff;
}

/* ---- 絞り込み結果が0件のときの空メッセージ ----
   カテゴリ/タグで絞り込んで該当記事がない場合、記事グリッドは
   完全に空（子要素なし）で残る（2026-07-09 本番で確認済み）。
   :empty を利用して CSS だけでメッセージを表示する。
   ローディング中はグリッド自体が未注入のため誤表示しない */
.up-d_journal-grid:not(:has(*))::before {
  content: "該当する記事はまだありません。";
  grid-column: 1 / -1;
  padding: 60px 0;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  letter-spacing: 0.04em;
  line-height: 1.8;
  text-align: center;
}

/* ---- 著者ブロック（JSで記事最下部へ移動後の余白調整） ---- */
.up-d_journal-author--bottom {
  margin-top: 48px;
}

/* ---- SP ---- */
@media (max-width: 800px) {
  .up-d_journal-filter {
    margin-top: 24px;
  }

  .up-d_journal-filter-item a {
    padding: 6px 12px;
    font-size: 11px;
  }
}