@charset "UTF-8";

/* 汎用: JS表示切替前の初期非表示（更新日など） */
.up-d_is-hidden {
  display: none;
}

/* ============================================================
   clearfix（A-BiSU 案件共通 utility）
   ============================================================ */
.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;
}

.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;
}

iframe {
    width: 100%;
}

/* ---- 著者ブロック（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);
}

/* ============================================================
   一覧ページ（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管理画面）対応 ---　*/
[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 ページネーション）
   ============================================================ */
.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;
  }
}
@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;
  }
}
/* ============================================================
   プレビュー専用の枠（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;
}