@charset "UTF-8";
/* ====================================================
「あわせて読みたい」バナー（コラム本文の途中に置くショートコード）
2026-09-23 追加。single-column.php の本文だけで読み込む。
構造: label（RELATED ARTICLE の右に あわせて読みたい。カードの一番上、幅いっぱい）
      → row（サムネ + body（記事名・抜粋・READ MORE））
==================================================== */

.column-editor-output a.fiz-related-banner {
  display: flex;
  flex-direction: column;
  margin: 32px 0;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 400;
  transition: border-color 0.2s ease;
}

.column-editor-output a.fiz-related-banner:hover {
  border-color: #999999;
}

.column-editor-output a.fiz-related-banner:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 2px;
}

/* 2026-09-23 英語の小見出しの右に「あわせて読みたい」を並べる（縦に積むとカードの上が間延びするため・本人指示）。
   幅が足りないときは折り返して縦に積む */
.fiz-related-banner__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
  margin-bottom: 16px;
}

.fiz-related-banner__eyebrow {
  font-family: "Josefin Sans", sans-serif;
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-muted, #595959); /* 2026-09-24 本人決定: 赤→#595959（赤は1画面1〜2箇所にしぼる） */
}

.fiz-related-banner__heading {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1c;
}

.fiz-related-banner__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fiz-related-banner__thumb {
  flex: 0 0 200px;
  width: 200px;
  /* アイキャッチの元画像は 2400×1764（約1.36:1）。枠をこの比率に合わせ、
     文字入りサムネの上下が切れないようにする（2026-09-23 本人指摘）。 */
  aspect-ratio: 16 / 9; /* 2026-10-02 本人決定：サムネを 16:9 に（前は 2400 / 1764） */
  border-radius: 10px;
  overflow: hidden;
  background: #efefef;
}

.column-editor-output .fiz-related-banner__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

.fiz-related-banner__thumb--placeholder {
  display: block;
}

.fiz-related-banner__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fiz-related-banner__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1c;
  line-height: 1.5;
}

.fiz-related-banner__meta {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fiz-related-banner__excerpt {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #5a5a5a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fiz-related-banner__more {
  font-family: "Josefin Sans", sans-serif;
  font-size: var(--font-size-min, 14px); /* 2026-09-24 DADS対応: '12'px→14px */
  font-weight: 700;
  color: #212121;
}

/* スマホ（767px以下）:
   見出し2行はカードの一番上に幅いっぱい。その下にサムネ（小さく左）＋記事名（右）。
   抜粋・READ MORE はさらにその下に幅いっぱいで出す。 */
@media (max-width: 767px) {
  .column-editor-output a.fiz-related-banner {
    padding: 16px;
  }

  .fiz-related-banner__row {
    display: grid;
    grid-template-columns: 112px 1fr;
    grid-template-areas:
      "thumb title"
      "meta meta";
    align-items: center;
    column-gap: 12px;
    row-gap: 12px;
  }

  .fiz-related-banner__thumb {
    grid-area: thumb;
    flex-basis: auto;
    width: 100%;
  }

  .fiz-related-banner__body {
    display: contents;
  }

  .fiz-related-banner__title {
    grid-area: title;
    min-width: 0;
  }

  .fiz-related-banner__meta {
    grid-area: meta;
    margin-top: 0;
    min-width: 0;
  }

  .fiz-related-banner__title,
  .fiz-related-banner__excerpt {
    overflow-wrap: break-word;
  }
}