/* =========================================
   Relation List
   White Noir + Frosted Glass
   整理済み全文差し替え版
========================================= */

/* ---------- ページ共通 ---------- */
.c-pageTitle,
.p-pageTitle,
.c-postTitle,
.p-entryTitle {
  display: none !important;
}

/* ページ全体を白ノアール寄りに */
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.98) 0%, rgba(248,248,250,0.98) 34%, rgba(241,242,246,1) 72%),
    linear-gradient(180deg, #f8f8fa 0%, #f1f2f6 100%);
}

/* SWELL見出し線の残りを消す */
.post_content h2,
.post_content h3,
.p-entry__body h2,
.p-entry__body h3 {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.post_content h2::before,
.post_content h2::after,
.post_content h3::before,
.post_content h3::after,
.p-entry__body h2::before,
.p-entry__body h2::after,
.p-entry__body h3::before,
.p-entry__body h3::after {
  content: none !important;
  display: none !important;
}


/* =========================================
   セクション
========================================= */

.relation-list-sections {
  display: grid;
  gap: 34px;
}

.relation-list-section {
  display: grid;
  gap: 14px;
}

.relation-list-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
}

.relation-list-section-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 28px !important;
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: rgba(24,28,38,0.92) !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.relation-list-section-title::before,
.relation-list-section-title::after {
  content: none !important;
  display: none !important;
}

.relation-list-section-count {
  font-size: 12px;
  line-height: 1;
  color: rgba(70,78,96,0.46);
  letter-spacing: 0.08em;
}


/* =========================================
   一覧グリッド
========================================= */

.relation-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}


/* =========================================
   カード本体
========================================= */

.relation-list-card {
  --relation-accent-safe: var(--relation-accent, #8ea2b8);

  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 28px;
  cursor: pointer;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.44) 100%);
  border: 1px solid rgba(255,255,255,0.84);
  box-shadow:
    0 14px 34px rgba(120,130,150,0.12),
    0 2px 10px rgba(120,130,150,0.06),
    inset 0 1px 0 rgba(255,255,255,0.96);

  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);

  color: rgba(28,32,42,0.92);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.relation-list-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.96);
  box-shadow:
    0 18px 40px rgba(120,130,150,0.14),
    0 4px 12px rgba(120,130,150,0.08),
    inset 0 1px 0 rgba(255,255,255,0.98);
}

.relation-list-card.is-preparing {
  cursor: default;
}

/* ガラス反射 */
.relation-list-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.18) 18%,
      rgba(255,255,255,0.00) 42%
    );
}

/* 下のやわらかい影 */
.relation-list-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -10px;
  height: 24px;
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(120,130,155,0.14) 0%,
    rgba(120,130,155,0.06) 45%,
    rgba(120,130,155,0) 100%
  );
}


/* =========================================
   画像レイヤー
========================================= */

.relation-list-icon {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 0;
}

.relation-list-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  filter: saturate(0.94) contrast(0.98) brightness(0.98);
}

/* 画像の上の薄い白膜 */
.relation-list-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 45%,
      rgba(255,255,255,0.14) 100%
    );
  pointer-events: none;
}

/* 画像がない時の土台 */
.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-icon,
.relation-list-card .relation-list-icon:empty {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(242,244,248,0.20) 100%);
}


/* =========================================
   文字
========================================= */

/* 非表示にする要素 */
.relation-list-eyebrow,
.relation-list-desc,
.relation-list-characters,
.relation-list-characters-label,
.relation-list-characters-names {
  display: none !important;
}

/* タイトルを画像の上に置く */
.relation-list-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  z-index: 3;

  margin: 0;
  font-size: 22px !important;
  line-height: 1.28;
  letter-spacing: 0.02em;
  color: rgba(26,30,40,0.92) !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.56),
    0 0 12px rgba(255,255,255,0.24);

  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.relation-list-title::before,
.relation-list-title::after {
  content: none !important;
  display: none !important;
}

/* 準備中・制限あり */
.relation-list-status-note {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  z-index: 3;

  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgba(52,58,72,0.62);

  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}

/* タイトルと共存時は少し上に */
.relation-list-title + .relation-list-status-note {
  bottom: 14px;
}

.relation-list-card.is-preparing .relation-list-status-note,
.relation-list-card.is-locked .relation-list-status-note {
  color: rgba(52,58,72,0.70);
}


/* =========================================
   空データ
========================================= */

.relation-list-empty {
  padding: 24px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.74);
  color: rgba(52,58,72,0.62);
  box-shadow:
    0 10px 24px rgba(120,130,150,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* =========================================
   パスワードモーダル
========================================= */

.relation-password-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.relation-password-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(236,238,244,0.48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.relation-password-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  padding: 22px 18px 18px;
  border-radius: 20px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.58));
  border: 1px solid rgba(255,255,255,0.90);
  box-shadow:
    0 20px 48px rgba(120,130,150,0.14),
    inset 0 1px 0 rgba(255,255,255,0.98);

  color: rgba(28,32,42,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.relation-password-title {
  margin-bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(28,32,42,0.86);
}

.relation-password-warning {
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(52,58,72,0.78);
}

.relation-password-input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(120,130,150,0.20);
  background: rgba(255,255,255,0.66);
  color: rgba(28,32,42,0.92);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.relation-password-input:focus {
  border-color: rgba(120,130,150,0.34);
  background: rgba(255,255,255,0.84);
}

.relation-password-error {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(176,82,96,0.92);
}

.relation-password-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.relation-password-cancel,
.relation-password-ok {
  min-width: 88px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,130,150,0.16);
  background: rgba(255,255,255,0.58);
  color: rgba(28,32,42,0.88);
  font-size: 13px;
  cursor: pointer;
}

.relation-password-cancel:hover,
.relation-password-ok:hover {
  background: rgba(255,255,255,0.82);
}


/* =========================================
   詳細のパスワード入力画面
========================================= */

.relation-password-gate {
  width: min(720px, calc(100vw - 32px));
  margin: 40px auto;
}

.relation-password-gate-card {
  padding: 28px 22px 22px;
  border-radius: 22px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.58));
  border: 1px solid rgba(255,255,255,0.90);
  box-shadow:
    0 20px 48px rgba(120,130,150,0.14),
    inset 0 1px 0 rgba(255,255,255,0.98);

  color: rgba(28,32,42,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.relation-password-gate-eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(70,78,96,0.48);
}

.relation-password-gate-title {
  margin: 0 0 14px;
  font-size: 26px;
  line-height: 1.2;
  color: rgba(24,28,38,0.94);
}

.relation-password-gate-warning {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(52,58,72,0.78);
}

.relation-password-gate-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(120,130,150,0.20);
  background: rgba(255,255,255,0.66);
  color: rgba(28,32,42,0.92);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.relation-password-gate-input:focus {
  border-color: rgba(120,130,150,0.34);
  background: rgba(255,255,255,0.84);
}

.relation-password-gate-error {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(176,82,96,0.92);
}

.relation-password-gate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.relation-password-gate-back,
.relation-password-gate-open {
  min-width: 96px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(120,130,150,0.16);
  background: rgba(255,255,255,0.58);
  color: rgba(28,32,42,0.88);
  font-size: 13px;
  cursor: pointer;
}

.relation-password-gate-back:hover,
.relation-password-gate-open:hover {
  background: rgba(255,255,255,0.82);
}


/* =========================================
   レスポンシブ
========================================= */

@media (min-width: 769px) {
  .relation-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  .relation-list-sections {
    gap: 26px;
  }

  .relation-list-section-head {
    gap: 8px;
  }

  .relation-list-section-title {
    font-size: 18px !important;
  }

  .relation-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .relation-list-card {
    border-radius: 24px;
  }

  .relation-list-title {
    left: 14px;
    right: 14px;
    bottom: 16px;
    font-size: 18px !important;
    line-height: 1.3;
  }

  .relation-list-status-note {
    left: 14px;
    right: 14px;
    bottom: 10px;
    font-size: 10px;
  }
}



/* =========================================
   Relation List
   白ノアール強化 + 角丸強化 + タイトル可読性改善
   いちばん下に追加
========================================= */

/* ---------- カードをもう少し丸く ---------- */
.relation-list-card {
  border-radius: 34px !important;
}

@media (max-width: 768px) {
  .relation-list-card {
    border-radius: 30px !important;
  }
}

/* ---------- カード本体の透明感と立体感を強化 ---------- */
.relation-list-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.74) 0%,
      rgba(255,255,255,0.54) 52%,
      rgba(255,255,255,0.44) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,0.92) !important;
  box-shadow:
    0 18px 44px rgba(145,152,170,0.14),
    0 4px 14px rgba(145,152,170,0.08),
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(255,255,255,0.26) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
}

/* 上の反射を少し上品に */
.relation-list-card::before {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.56) 0%,
      rgba(255,255,255,0.22) 18%,
      rgba(255,255,255,0.00) 42%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.00) 32%
    ) !important;
  opacity: 1 !important;
}

/* 下影も少し柔らかく */
.relation-list-card::after {
  left: 18px !important;
  right: 18px !important;
  bottom: -12px !important;
  height: 30px !important;
  background: radial-gradient(
    ellipse at center,
    rgba(150,158,178,0.18) 0%,
    rgba(150,158,178,0.08) 45%,
    rgba(150,158,178,0) 100%
  ) !important;
}

/* ---------- 画像側にも少し空気感 ---------- */
.relation-list-icon::after {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 46%,
      rgba(255,255,255,0.16) 100%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.00) 40%
    ) !important;
}

/* 画像の質感を少しだけ柔らかく */
.relation-list-icon img {
  filter: saturate(0.94) contrast(0.98) brightness(0.99) !important;
}

/* ---------- タイトルをそのままベタ置きせず、ガラス帯に乗せる ---------- */
.relation-list-title {
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 4 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;

  min-height: 52px;
  padding: 12px 16px !important;
  border-radius: 18px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.52) 0%,
      rgba(255,255,255,0.34) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow:
    0 8px 20px rgba(150,158,178,0.10),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  color: rgba(34,39,50,0.92) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.72),
    0 0 10px rgba(255,255,255,0.16) !important;

  font-size: 17px !important;
  line-height: 1.32 !important;
  letter-spacing: 0.02em !important;
}

/* 画像がないカードでは帯を少し上へ */
.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-title,
.relation-list-card .relation-list-icon:empty ~ .relation-list-title {
  bottom: 18px !important;
}

/* ---------- 準備中などの補助文字も読みやすく ---------- */
.relation-list-status-note {
  left: 18px !important;
  right: 18px !important;
  bottom: 16px !important;
  z-index: 5 !important;

  color: rgba(78,84,98,0.72) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.68) !important;
}

/* タイトル帯がある場合は、補助文字を帯の下側に寄せる */
.relation-list-title + .relation-list-status-note {
  bottom: 18px !important;
}

/* ---------- 画像だけのカードでタイトルが埋もれにくいように ---------- */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title {
  max-width: calc(100% - 28px);
}

/* ---------- hoverも高級感寄りに ---------- */
.relation-list-card:hover {
  box-shadow:
    0 22px 52px rgba(145,152,170,0.16),
    0 6px 18px rgba(145,152,170,0.10),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,0.30) !important;
}

/* ---------- スマホ微調整 ---------- */
@media (max-width: 768px) {
  .relation-list-title {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;

    min-height: 46px;
    padding: 10px 14px !important;
    border-radius: 16px !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .relation-list-status-note {
    left: 16px !important;
    right: 16px !important;
    bottom: 14px !important;
    font-size: 10px !important;
  }
}


/* =========================================
   Relation List
   タイトル帯の改善
========================================= */

/* 画像ありカードだけ、タイトル帯を下に寄せる */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  top: auto !important;

  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  box-shadow:
    0 4px 12px rgba(140,150,170,0.08),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;

  backdrop-filter: blur(6px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;

  color: rgba(34,39,50,0.90) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.58) !important;

  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* 画像なしカードでは帯にしない */
.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-title,
.relation-list-card .relation-list-icon:empty ~ .relation-list-title {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;

  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: rgba(34,39,50,0.92) !important;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* 画像ありカードの補助文字は帯と重ならないように下に固定 */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-status-note {
  left: 16px !important;
  right: 16px !important;
  bottom: 10px !important;
  z-index: 5 !important;
  display: none !important; /* 画像ありでは一旦非表示で整理 */
}

/* 画像なしカードの補助文字 */
.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-status-note,
.relation-list-card .relation-list-icon:empty ~ .relation-list-status-note {
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  color: rgba(88,94,108,0.62) !important;
  text-shadow: none !important;
  display: block !important;
}

/* タイトル帯の濁りを減らす */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title::before,
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title::after {
  content: none !important;
  display: none !important;
}

/* 画像上の白膜を少し弱める */
.relation-list-icon::after {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.01) 46%,
      rgba(255,255,255,0.08) 100%
    ) !important;
}

/* スマホ微調整 */
@media (max-width: 768px) {
  .relation-list-card:has(.relation-list-icon img[src]) .relation-list-title {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    min-height: 36px !important;
    padding: 7px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-title,
  .relation-list-card .relation-list-icon:empty ~ .relation-list-title {
    left: 16px !important;
    right: 16px !important;
    font-size: 16px !important;
  }
}

/* =========================================
   Relation List
   キャラを隠さない版
   くすみ白ノアール調整
========================================= */

/* ---------- カード全体を真っ白→くすみ白へ ---------- */
.relation-list-card {
  background:
    linear-gradient(
      180deg,
      rgba(244, 243, 246, 0.86) 0%,
      rgba(236, 236, 240, 0.76) 52%,
      rgba(230, 231, 236, 0.72) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow:
    0 18px 42px rgba(136, 141, 155, 0.10),
    0 4px 12px rgba(136, 141, 155, 0.05),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

/* 反射も少し落ち着かせる */
.relation-list-card::before {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.34) 0%,
      rgba(255,255,255,0.12) 18%,
      rgba(255,255,255,0.00) 42%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.00) 32%
    ) !important;
}

.relation-list-card::after {
  background: radial-gradient(
    ellipse at center,
    rgba(145, 150, 164, 0.12) 0%,
    rgba(145, 150, 164, 0.05) 45%,
    rgba(145, 150, 164, 0) 100%
  ) !important;
}

/* ---------- 画像側も少しだけくすませる ---------- */
.relation-list-icon::after {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03) 0%,
      rgba(244,244,248,0.02) 46%,
      rgba(228,230,236,0.08) 100%
    ) !important;
}

.relation-list-icon img {
  filter: saturate(0.92) contrast(0.99) brightness(0.99) !important;
}

/* =========================================
   画像ありカード
   タイトル帯を消して、キャラを隠さない位置へ
========================================= */

.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 14px !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 4 !important;

  display: block !important;
  min-height: 0 !important;
  max-width: calc(100% - 28px) !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: rgba(34,39,50,0.78) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 8px rgba(245,245,248,0.22) !important;

  font-size: 14px !important;
  line-height: 1.28 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
}

/* 画像ありカードでは補助文字はいったん非表示 */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-status-note {
  display: none !important;
}

/* =========================================
   画像なしカード
   こちらは中央寄せのまま少し上品に
========================================= */

.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-title,
.relation-list-card .relation-list-icon:empty ~ .relation-list-title {
  color: rgba(42,46,56,0.90) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
}

.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-status-note,
.relation-list-card .relation-list-icon:empty ~ .relation-list-status-note {
  color: rgba(96,100,112,0.62) !important;
}

/* =========================================
   見出しやカウントも少しくすみ寄りに
========================================= */

.relation-list-section-title {
  color: rgba(36, 40, 50, 0.88) !important;
}

.relation-list-section-count {
  color: rgba(108, 112, 124, 0.52) !important;
}

/* =========================================
   スマホ
========================================= */
@media (max-width: 768px) {
  .relation-list-card:has(.relation-list-icon img[src]) .relation-list-title {
    left: 12px !important;
    top: 12px !important;
    max-width: calc(100% - 24px) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-title,
  .relation-list-card .relation-list-icon:empty ~ .relation-list-title {
    font-size: 16px !important;
  }
}


/* =========================================
   Relation List
   位置修正 + 背景暗め + 準備中表示修正
========================================= */

/* ---------- ページ背景を少し暗くしてカードを浮かせる ---------- */
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(232,232,236,0.98) 0%, rgba(221,222,228,0.98) 34%, rgba(210,212,219,1) 72%),
    linear-gradient(180deg, #e7e8ed 0%, #d7d9e0 100%) !important;
}

/* メイン領域も透明にして背景を見せる */
#content,
.l-mainContent,
.post_content,
.p-entry__body {
  background: transparent !important;
}

/* ---------- カードは少しだけくっきり ---------- */
.relation-list-card {
  background:
    linear-gradient(
      180deg,
      rgba(244,243,246,0.80) 0%,
      rgba(234,235,240,0.74) 52%,
      rgba(226,228,234,0.72) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow:
    0 22px 44px rgba(108,114,128,0.16),
    0 6px 16px rgba(108,114,128,0.08),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

/* ---------- 画像ありカードのタイトルを左上固定 ---------- */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 14px !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: calc(100% - 28px) !important;
  width: auto !important;
  min-height: 0 !important;

  display: block !important;
  z-index: 5 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: rgba(44,48,60,0.78) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.58),
    0 0 8px rgba(245,245,248,0.22) !important;
}

/* 画像ありカードのタイトルに残る疑似要素を消す */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title::before,
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-title::after {
  content: none !important;
  display: none !important;
}

/* ---------- 画像なしカードはタイトルを下寄せ ---------- */
.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-title,
.relation-list-card .relation-list-icon:empty ~ .relation-list-title {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: auto !important;
  bottom: 18px !important;
  transform: none !important;
  margin: 0 !important;

  color: rgba(46,50,60,0.92) !important;
  font-size: 17px !important;
  line-height: 1.32 !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* ---------- 準備中をちゃんと見せる ---------- */
.relation-list-status-note {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 44px !important;
  margin: 0 !important;
  z-index: 5 !important;

  display: block !important;
  color: rgba(102,106,118,0.70) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.42) !important;
}

/* 画像ありカードでは準備中を出さない */
.relation-list-card:has(.relation-list-icon img[src]) .relation-list-status-note {
  display: none !important;
}

/* 画像なしカードはタイトルの上に準備中 */
.relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-status-note,
.relation-list-card .relation-list-icon:empty ~ .relation-list-status-note {
  bottom: 52px !important;
}

/* ---------- 画像側は少しだけ締める ---------- */
.relation-list-icon::after {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02) 0%,
      rgba(232,233,238,0.01) 46%,
      rgba(214,216,224,0.10) 100%
    ) !important;
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .relation-list-card:has(.relation-list-icon img[src]) .relation-list-title {
    left: 12px !important;
    top: 12px !important;
    max-width: calc(100% - 24px) !important;
    font-size: 12px !important;
  }

  .relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-title,
  .relation-list-card .relation-list-icon:empty ~ .relation-list-title {
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    font-size: 16px !important;
  }

  .relation-list-status-note {
    left: 16px !important;
    right: 16px !important;
    font-size: 10px !important;
  }

  .relation-list-card:not(:has(.relation-list-icon img[src])) .relation-list-status-note,
  .relation-list-card .relation-list-icon:empty ~ .relation-list-status-note {
    bottom: 46px !important;
  }
}


/* =========================================
   Relation List
   角丸強化 + ガラス質感アップ
========================================= */

/* ---------- 角丸をさらに強く ---------- */
.relation-list-card {
  border-radius: 42px !important;
}

@media (max-width: 768px) {
  .relation-list-card {
    border-radius: 34px !important;
  }
}

/* ---------- ガラスの“縁の光”を追加 ---------- */
.relation-list-card {
  border: 1px solid rgba(255,255,255,0.55) !important;

  box-shadow:
    0 24px 48px rgba(100,106,120,0.18),
    0 8px 20px rgba(100,106,120,0.10),

    /* ←これがガラスのコア */
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(255,255,255,0.25),
    inset 0 0 20px rgba(255,255,255,0.10) !important;
}

/* ---------- 上側の反射を強化 ---------- */
.relation-list-card::before {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.22) 18%,
      rgba(255,255,255,0.00) 42%
    ),
    radial-gradient(
      circle at 78% 12%,
      rgba(255,255,255,0.28) 0%,
      rgba(255,255,255,0.00) 36%
    ) !important;
}

/* ---------- 下の“接地影”を少しだけ強く ---------- */
.relation-list-card::after {
  bottom: -14px !important;
  height: 34px !important;
  background: radial-gradient(
    ellipse at center,
    rgba(120,126,140,0.22) 0%,
    rgba(120,126,140,0.10) 45%,
    rgba(120,126,140,0) 100%
  ) !important;
}

/* ---------- カード内にほんのり光のムラ ---------- */
.relation-list-card {
  background:
    radial-gradient(
      circle at 20% 18%,
      rgba(255,255,255,0.18),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(255,255,255,0.10),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(244,243,246,0.82) 0%,
      rgba(234,235,240,0.74) 52%,
      rgba(226,228,234,0.72) 100%
    ) !important;
}

/* ---------- hoverで少しだけ“光る” ---------- */
.relation-list-card:hover {
  box-shadow:
    0 28px 56px rgba(100,106,120,0.22),
    0 10px 24px rgba(100,106,120,0.12),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.35),
    inset 0 0 24px rgba(255,255,255,0.14) !important;
}

/* ---------- 画像とのなじみを少し良く ---------- */
.relation-list-icon img {
  filter: saturate(0.93) contrast(0.98) brightness(1.0) !important;
}

/* ---------- カードの縁にほんのりハイライト ---------- */
.relation-list-card::after {
  border-radius: inherit;
}   


/* =========================================
   Relation List
   角丸 修正版
========================================= */

.relation-list-card {
  border-radius: 60px !important;
  overflow: hidden !important;
}

.relation-list-card::before,
.relation-list-card::after,
.relation-list-icon,
.relation-list-icon::after,
.relation-list-icon img {
  border-radius: 60px !important;
}

@media (max-width: 768px) {
  .relation-list-card {
    border-radius: 60px !important;
  }

  .relation-list-card::before,
  .relation-list-card::after,
  .relation-list-icon,
  .relation-list-icon::after,
  .relation-list-icon img {
    border-radius: 60px !important;
  }
}


/* =========================================
   Relation List
   仕上げ
   ・カードごとの微妙な色差
   ・セクション見出し装飾
========================================= */

/* ---------- カードごとの微差カラー ---------- */
/* 6枚ごとにゆるく繰り返し */
.relation-list-card:nth-child(6n + 1) {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(
      180deg,
      rgba(243,242,246,0.82) 0%,
      rgba(233,234,239,0.74) 52%,
      rgba(225,227,233,0.72) 100%
    ) !important;
}

.relation-list-card:nth-child(6n + 2) {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(
      180deg,
      rgba(241,243,246,0.82) 0%,
      rgba(231,234,239,0.74) 52%,
      rgba(223,227,233,0.72) 100%
    ) !important;
}

.relation-list-card:nth-child(6n + 3) {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(
      180deg,
      rgba(244,242,245,0.82) 0%,
      rgba(235,232,237,0.74) 52%,
      rgba(228,225,231,0.72) 100%
    ) !important;
}

.relation-list-card:nth-child(6n + 4) {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(
      180deg,
      rgba(242,243,244,0.82) 0%,
      rgba(233,235,236,0.74) 52%,
      rgba(226,228,230,0.72) 100%
    ) !important;
}

.relation-list-card:nth-child(6n + 5) {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(
      180deg,
      rgba(243,241,244,0.82) 0%,
      rgba(234,231,236,0.74) 52%,
      rgba(227,224,230,0.72) 100%
    ) !important;
}

.relation-list-card:nth-child(6n + 6) {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.16), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(
      180deg,
      rgba(241,242,245,0.82) 0%,
      rgba(232,233,238,0.74) 52%,
      rgba(224,226,232,0.72) 100%
    ) !important;
}

/* ---------- セクション見出し装飾 ---------- */
.relation-list-section-head {
  position: relative;
  align-items: center;
  gap: 12px;
  padding: 0 0 10px;
}

.relation-list-section-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px !important;
  letter-spacing: 0.06em;
  color: rgba(38, 42, 54, 0.90) !important;
}

/* 左の小さな装飾 */
.relation-list-section-title::before {
  content: "";
  display: inline-block !important;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.85), rgba(255,255,255,0.18) 48%, rgba(255,255,255,0.04) 72%),
    linear-gradient(180deg, rgba(214,216,224,0.95), rgba(186,190,202,0.82));
  box-shadow:
    0 2px 8px rgba(120,126,140,0.14),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

/* 見出しの右に細いライン */
.relation-list-section-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(
    90deg,
    rgba(164,170,184,0.36) 0%,
    rgba(164,170,184,0.14) 36%,
    rgba(164,170,184,0.00) 100%
  );
}

/* 件数は控えめに */
.relation-list-section-count {
  font-size: 12px;
  color: rgba(108,112,124,0.58) !important;
  letter-spacing: 0.08em;
}

/* スマホ */
@media (max-width: 768px) {
  .relation-list-section-title {
    font-size: 20px !important;
    gap: 8px;
  }

  .relation-list-section-title::before {
    width: 14px;
    height: 14px;
  }
}


/* =========================================
   うちよそ一覧
   #relation-list-container を基点に背景＋ガラス化
   ========================================= */

/* 一覧全体をレイヤー基準にする */
#relation-list-container {
  position: relative;
  isolation: isolate;
  z-index: 0;
}

/* 一覧の中身を背景より前へ */
#relation-list-container > * {
  position: relative;
  z-index: 1;
}

/* セクション自体は透明にして背景を見せる */
#relation-list-container .relation-list-section,
#relation-list-container .relation-list-grid,
#relation-list-container .relation-list-sections {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* カードをガラス化 */
#relation-list-container .relation-list-card {
  position: relative;
  overflow: hidden;

  background: rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.34) !important;

  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);

  box-shadow:
    0 12px 32px rgba(115, 92, 104, 0.10),
    0 26px 54px rgba(115, 92, 104, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.52),
    inset 0 -1px 0 rgba(255,255,255,0.12);
}

/* ガラス上面の光 */
#relation-list-container .relation-list-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.18) 20%,
      rgba(255,255,255,0.06) 40%,
      transparent 68%
    );
}

/* うっすら色の映り込み */
#relation-list-container .relation-list-card::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;

  background:
    radial-gradient(circle at 18% 20%, rgba(233,195,212,0.16), transparent 24%),
    radial-gradient(circle at 82% 24%, rgba(180,205,255,0.12), transparent 24%);
  filter: blur(18px);
  opacity: 0.9;
}

/* 文字や画像はちゃんと前へ */
#relation-list-container .relation-list-card > * {
  position: relative;
  z-index: 1;
}



/* =========================================
   うちよそ一覧
   統計ページと同じく、背景を画面いっぱいに敷く
   ※ このCSSはうちよそ一覧専用CSSにだけ入れる
   ========================================= */

/* body背景レイヤー */
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;

  top: -140px;
  left: -20vw;
  right: -20vw;
  bottom: -80vh;

  background-image: url("http://mame.wew.jp/wp/wp-content/uploads/2026/05/IMG_0837-2.jpeg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  opacity: 0.74;
}

/* 色膜と反射 */
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;

  top: -140px;
  left: -20vw;
  right: -20vw;
  bottom: -80vh;

  background:
    linear-gradient(rgba(244,239,243,0.22), rgba(236,231,236,0.25)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 25%),
    radial-gradient(circle at 80% 25%, rgba(210,225,255,0.14), transparent 25%);
}

/* 一覧の中身を背景より前へ */
#relation-list-container,
#relation-list-container * {
  position: relative;
  z-index: 1;
}



/* =========================================
   うちよそカード：ぷっくりガラス化（CSSのみ）
========================================= */

#relation-list-container .relation-list-card {
  position: relative;
  overflow: hidden;

  /* ガラスのベース */
  background: rgba(255,255,255,0.22) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;

  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);

  /* ぷっくり感（外影＋内影） */
  box-shadow:
    0 16px 32px rgba(110, 90, 100, 0.12),
    0 28px 60px rgba(110, 90, 100, 0.08),
    inset 0 2px 2px rgba(255,255,255,0.75),
    inset 0 -12px 20px rgba(255,255,255,0.10),
    inset 10px 10px 20px rgba(255,255,255,0.10),
    inset -10px -14px 24px rgba(200,180,190,0.15);
}

/* 上側の強いライト（ぷっくり感の主役） */
#relation-list-container .relation-list-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;

  background:
    /* ←メインの強い光（ここが重要） */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.75) 12%,
      rgba(255,255,255,0.35) 24%,
      rgba(255,255,255,0.10) 38%,
      rgba(255,255,255,0.00) 60%
    ),

    /* 角のツヤ（アクリル感） */
    radial-gradient(
      circle at 22% 10%,
      rgba(255,255,255,0.35),
      rgba(255,255,255,0.15) 30%,
      transparent 60%
    );
}

/* 色の写り込み（既存の雰囲気を維持） */
#relation-list-container .relation-list-card::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  border-radius: inherit;

  background:
    radial-gradient(circle at 20% 20%, rgba(233,195,212,0.15), transparent 25%),
    radial-gradient(circle at 80% 25%, rgba(180,205,255,0.12), transparent 25%);
  filter: blur(16px);
  opacity: 0.9;
}

/* 中身は前面に */
#relation-list-container .relation-list-card > * {
  position: relative;
  z-index: 1;
}


/* =========================
   名前を中央下に固定（強制版）
========================= */

/* カード基準を作る */
.relation-list-card {
  position: relative !important;
}

/* 名前 */
.relation-list-card .relation-list-title {
  position: absolute !important;

  left: 50% !important;
  bottom: 36px !important;
  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  margin: 0 !important;

  text-align: center !important;

  font-size: 14px !important;
  line-height: 1.5 !important;

  z-index: 10 !important;

  /* ガラス */
  padding: 8px 10px !important;
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  border-radius: 10px !important;

  /* 見切れ防止 */
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* 下線など完全削除 */
.relation-list-title::before,
.relation-list-title::after {
  content: none !important;
}

/* 準備中も固定（これもJSのinlineに勝つ） */
.relation-list-card .relation-list-status-note {
  position: absolute !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;

  width: calc(100% - 32px) !important;
  text-align: center !important;

  z-index: 11 !important;
}

/* =========================
   下中央ラベル（安定版）
========================= */

/* カード */
.relation-list-card {
  position: relative;
  overflow: hidden;
}

/* 画像 */
.relation-list-icon {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.relation-list-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* ↓ここが一番重要（前に出す） */
.relation-list-bottom-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 5; /* ← 画像より上にする */

  padding: 24px 14px 10px;
  text-align: center;

  pointer-events: none;

  /* グラデ弱め（自然に） */
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.15) 45%,
      transparent 100%
    );
}

/* 名前 */
.relation-list-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;

  color: #fff;

  text-shadow:
    0 1px 4px rgba(0,0,0,0.6),
    0 0 6px rgba(0,0,0,0.3);

  white-space: normal;
  overflow-wrap: anywhere;
}

/* 準備中 */
.relation-list-status-note {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);

  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 画像なしカードだけ調整 */
.relation-list-card:not(:has(.relation-list-icon)) .relation-list-bottom-overlay {
  background: none;
  padding-bottom: 16px;
}

/* 説明など消す */
.relation-list-desc,
.relation-list-characters {
  display: none !important;
}


/* =========================
   うちよそ一覧：画像ありでも名前を前面表示
   JS変更なし版
========================= */

/* カード基準 */
.relation-list-card {
  position: relative !important;
  overflow: hidden !important;
}

/* 画像は背面 */
.relation-list-card .relation-list-icon {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.relation-list-card .relation-list-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* RELATION は控えめに前面 */
.relation-list-card .relation-list-eyebrow {
  position: relative !important;
  z-index: 3 !important;
}

/* 名前を必ず画像より前に出す */
.relation-list-card > .relation-list-title {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 30px !important;
  top: auto !important;

  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.96) !important;

  text-shadow:
    0 1px 4px rgba(0,0,0,0.60),
    0 0 8px rgba(0,0,0,0.32) !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 名前の後ろにだけ薄いフェード */
.relation-list-card > .relation-list-title::before {
  content: "" !important;
  position: absolute !important;
  left: -10px !important;
  right: -10px !important;
  bottom: -8px !important;
  top: -20px !important;
  z-index: -1 !important;
  pointer-events: none !important;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.20) 48%,
    rgba(0,0,0,0.00) 100%
  ) !important;
  border-radius: 16px !important;
}

/* 下線は消す */
.relation-list-card > .relation-list-title::after {
  content: none !important;
}

/* 準備中も同じく前面 */
.relation-list-card > .relation-list-status-note {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 10px !important;
  top: auto !important;

  z-index: 11 !important;
  margin: 0 !important;

  text-align: center !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.76) !important;

  text-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;
}

/* 不要欄は消す */
.relation-list-card .relation-list-desc,
.relation-list-card .relation-list-characters {
  display: none !important;
}

/* 画像なしカードではフェードを消す */
.relation-list-card:not(:has(.relation-list-icon)) > .relation-list-title::before {
  background: none !important;
}

@media (max-width: 640px) {
  .relation-list-card > .relation-list-title {
    left: 12px !important;
    right: 12px !important;
    bottom: 28px !important;
    font-size: 13px !important;
  }

  .relation-list-card > .relation-list-status-note {
    left: 12px !important;
    right: 12px !important;
    bottom: 9px !important;
  }
}



/* =========================
   うちよそ一覧：下中央・切れない版
========================= */

.relation-list-card {
  position: relative !important;
  overflow: hidden !important;
}

.relation-list-icon {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.relation-list-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* RELATION */
.relation-list-eyebrow {
  position: relative !important;
  z-index: 3 !important;
}

/* 下中央ラベル全体 */
.relation-list-bottom-overlay {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 14px !important;   /* ← ここを上げて切れ防止 */
  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;

  text-align: center !important;
  background: none !important;
  pointer-events: none !important;
}

/* 名前 */
.relation-list-bottom-overlay .relation-list-title {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;

  font-family:
    "Hiragino Sans",
    "Yu Gothic",
    "Noto Sans JP",
    sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;

  /* 白背景でも見える濃色 */
  color: rgba(48, 52, 62, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 6px rgba(255,255,255,0.22) !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.relation-list-bottom-overlay .relation-list-title::before,
.relation-list-bottom-overlay .relation-list-title::after {
  content: none !important;
  display: none !important;
}

/* 準備中 */
.relation-list-bottom-overlay .relation-list-status-note {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  color: rgba(92, 96, 108, 0.82) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
}

/* 不要欄 */
.relation-list-desc,
.relation-list-characters {
  display: none !important;
}

@media (max-width: 640px) {
  .relation-list-bottom-overlay {
    left: 10px !important;
    right: 10px !important;
    bottom: 12px !important;
    gap: 3px !important;
  }

  .relation-list-bottom-overlay .relation-list-title {
    font-size: 13px !important;
  }
}


/* =========================
   うちよそ一覧：中央揃え最終調整
========================= */

/* 下部ラベル領域をカード幅いっぱいにする */
.relation-list-bottom-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 12px !important;
  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;

  width: 100% !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;

  text-align: center !important;
  background: none !important;
  pointer-events: none !important;
}

/* タイトルは画像あり・なし両方で同じサイズ */
.relation-list-bottom-overlay .relation-list-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;

  color: rgba(48, 52, 62, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 6px rgba(255,255,255,0.22) !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
}

/* 準備中など小さい文字も中央・前面 */
.relation-list-bottom-overlay .relation-list-status-note {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;

  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;

  color: rgba(92, 96, 108, 0.88) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 4px rgba(255,255,255,0.18) !important;

  position: relative !important;
  z-index: 11 !important;
}

/* 画像ありのときだけ、小さい文字の後ろにごく薄く読ませ補助 */
.relation-list-card:has(.relation-list-icon) .relation-list-bottom-overlay .relation-list-status-note {
  background: rgba(255,255,255,0.20) !important;
  border-radius: 999px !important;
  padding: 1px 8px !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
}

/* タイトルの疑似要素は消す */
.relation-list-bottom-overlay .relation-list-title::before,
.relation-list-bottom-overlay .relation-list-title::after {
  content: none !important;
  display: none !important;
}


/* =========================
   うちよそ一覧：旧absolute指定を完全解除
========================= */

/* 下部ラベル箱 */
.relation-list-bottom-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 12px !important;
  z-index: 20 !important;

  width: 100% !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;

  display: block !important;
  text-align: center !important;
  background: none !important;
  pointer-events: none !important;
}

/* タイトル：昔の absolute / transform を全部無効化 */
.relation-list-bottom-overlay .relation-list-title {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;

  color: rgba(48, 52, 62, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 6px rgba(255,255,255,0.22) !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
}

/* 準備中も同じく旧absoluteを解除 */
.relation-list-bottom-overlay .relation-list-status-note {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  display: block !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;

  text-align: center !important;

  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  color: rgba(92, 96, 108, 0.88) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 4px rgba(255,255,255,0.18) !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 疑似要素も全部消す */
.relation-list-bottom-overlay .relation-list-title::before,
.relation-list-bottom-overlay .relation-list-title::after,
.relation-list-bottom-overlay .relation-list-status-note::before,
.relation-list-bottom-overlay .relation-list-status-note::after {
  content: none !important;
  display: none !important;
}


/* =========================
   うちよそ一覧：文字を画像から完全分離
========================= */

/* カード */
.relation-list-card {
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 64px !important; /* ← 文字帯ぶん下に確保 */
  box-sizing: border-box !important;
}

/* 画像は上側だけを使う */
.relation-list-icon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 64px !important; /* ← 下の文字帯に入らせない */
  z-index: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.relation-list-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* RELATIONは不要なら消してOK。残すなら前面 */
.relation-list-eyebrow {
  position: relative !important;
  z-index: 3 !important;
}

/* 下部の文字帯 */
.relation-list-bottom-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 64px !important;
  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  padding: 8px 12px 10px !important;
  box-sizing: border-box !important;
  text-align: center !important;

  background: rgba(255,255,255,0.00) !important;
  pointer-events: none !important;
}

/* タイトル */
.relation-list-bottom-overlay .relation-list-title {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;

  color: rgba(48, 52, 62, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 4px rgba(255,255,255,0.18) !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
}

/* 小さい文字 */
.relation-list-bottom-overlay .relation-list-status-note {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;

  font-size: 10px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;

  color: rgba(96, 100, 112, 0.88) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.45),
    0 0 3px rgba(255,255,255,0.14) !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 余計な疑似要素を消す */
.relation-list-bottom-overlay .relation-list-title::before,
.relation-list-bottom-overlay .relation-list-title::after,
.relation-list-bottom-overlay .relation-list-status-note::before,
.relation-list-bottom-overlay .relation-list-status-note::after {
  content: none !important;
  display: none !important;
}

/* 不要欄 */
.relation-list-desc,
.relation-list-characters {
  display: none !important;
}


/* =========================
   うちよそ一覧：下中央・重なり解消版
========================= */

/* カード */
.relation-list-card {
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 76px !important; /* 下帯を少し広げる */
  box-sizing: border-box !important;
}

/* 画像は下帯に入れない */
.relation-list-icon {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 76px !important;
  z-index: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.relation-list-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* 下部文字帯 */
.relation-list-bottom-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 8px !important; /* 帯全体を少し下へ */
  height: 60px !important;
  z-index: 20 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;

  padding: 0 12px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  pointer-events: none !important;
  background: none !important;
}

/* 準備中はタイトルの上 */
.relation-list-bottom-overlay .relation-list-status-note {
  order: 1 !important;
  position: static !important;
  transform: none !important;

  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;

  text-align: center !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;

  color: rgba(96, 100, 112, 0.88) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.45),
    0 0 3px rgba(255,255,255,0.14) !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* タイトルは中央下 */
.relation-list-bottom-overlay .relation-list-title {
  order: 2 !important;
  position: static !important;
  transform: none !important;

  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;

  /* 画像あり・なしで同じくらいのサイズ */
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.03em !important;

  color: rgba(48, 52, 62, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 0 4px rgba(255,255,255,0.18) !important;

  background: none !important;
  border: none !important;
  box-shadow: none !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
}

/* 余計な疑似要素を消す */
.relation-list-bottom-overlay .relation-list-title::before,
.relation-list-bottom-overlay .relation-list-title::after,
.relation-list-bottom-overlay .relation-list-status-note::before,
.relation-list-bottom-overlay .relation-list-status-note::after {
  content: none !important;
  display: none !important;
}

/* 不要欄 */
.relation-list-desc,
.relation-list-characters {
  display: none !important;
}


/* =========================
   うちよそ一覧 3列化
========================= */

/* グリッド */
.relation-list-grid {
  display: grid !important;

  /* PC */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;

  gap: 14px !important;
}


/* カード */
.relation-list-card {
  border-radius: 18px !important;
  overflow: hidden !important;

  min-height: 240px !important;
  aspect-ratio: 0.8 / 1 !important;
}


/* 画像 */
.relation-list-icon {
  width: 100% !important;
  height: 100% !important;
}

.relation-list-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* 下テキスト */
.relation-list-bottom-overlay {
  padding: 10px 10px 12px !important;
}

.relation-list-title {
  font-size: 14px !important;
  line-height: 1.35 !important;
}


/* RELATION */
.relation-list-eyebrow {
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
}


/* スマホ：3列固定 */
@media (max-width: 768px) {

  .relation-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .relation-list-card {
    min-height: 170px !important;
    border-radius: 14px !important;
  }

  .relation-list-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .relation-list-eyebrow {
    font-size: 8px !important;
  }

  .relation-list-status-note {
    font-size: 9px !important;
  }
}


/* PC大画面：さらに多列 */
@media (min-width: 1400px) {

  .relation-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }

}


/* ===== うちよそ一覧：3列時にはみ出し防止 ===== */

.relation-list-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.relation-list-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1.25 !important;
  min-height: 0 !important;
}

/* 中身もカード幅から出さない */
.relation-list-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* タイトルをカード内で折り返す */
.relation-list-title {
  width: 100% !important;
  min-width: 0 !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;

  font-size: 11px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* 下の文字エリア */
.relation-list-bottom-overlay {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 8px 6px 10px !important;
  box-sizing: border-box !important;
}

/* 準備中など */
.relation-list-status-note {
  white-space: normal !important;
  font-size: 9px !important;
}


/* ===== うちよそ一覧：3列・正方形・はみ出し防止 ===== */

@media (max-width: 768px) {

  .relation-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .relation-list-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;

    border-radius: 24px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .relation-list-card::before,
  .relation-list-card::after {
    border-radius: inherit !important;
  }

  .relation-list-icon {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }

  .relation-list-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: inherit !important;
  }

  .relation-list-bottom-overlay {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;

    width: 100% !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
    text-align: center !important;
  }

  .relation-list-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;

    font-size: 10.5px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .relation-list-status-note {
    margin-top: 2px !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }

  .relation-list-eyebrow {
    display: none !important;
  }
}


/* ===== うちよそ一覧：下部白プレート固定型 ===== */

#relation-list-container .relation-list-card {
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: rgba(245, 247, 250, 0.62) !important;
}

/* 既存の黒グラデーションを消す */
#relation-list-container .relation-list-card::after {
  content: none !important;
}

/* 下部の白プレート */
#relation-list-container .relation-list-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  z-index: 3;
  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(255,255,255,0.82) 0%,
      rgba(255,255,255,0.64) 52%,
      rgba(255,255,255,0.22) 82%,
      rgba(255,255,255,0) 100%
    );

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* 画像 */
#relation-list-container .relation-list-icon {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 1 !important;
}

#relation-list-container .relation-list-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* タイトル：画像ありなしで完全統一 */
#relation-list-container .relation-list-title {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 18px !important;
  z-index: 5 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(15px, 4vw, 21px) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;

  color: rgba(38, 43, 50, 0.92) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.88),
    0 0 10px rgba(255,255,255,0.72) !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 準備中 / 制限あり があるカードだけ、タイトルを上げる */
#relation-list-container .relation-list-card:has(.relation-list-status-note) .relation-list-title {
  bottom: 36px !important;
  font-size: clamp(14px, 3.7vw, 20px) !important;
}

/* 準備中 / 制限あり */
#relation-list-container .relation-list-status-note {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 14px !important;
  z-index: 6 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;

  color: rgba(92, 96, 104, 0.72) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85) !important;
}

/* 使わない文字要素は確実に隠す */
#relation-list-container .relation-list-eyebrow,
#relation-list-container .relation-list-desc,
#relation-list-container .relation-list-characters {
  display: none !important;
}

/* スマホ3列用 */
@media (max-width: 768px) {
  #relation-list-container .relation-list-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #relation-list-container .relation-list-card {
    border-radius: 22px !important;
  }

  #relation-list-container .relation-list-title {
    left: 8px !important;
    right: 8px !important;
    bottom: 17px !important;
  }

  #relation-list-container .relation-list-card:has(.relation-list-status-note) .relation-list-title {
    bottom: 34px !important;
  }

  #relation-list-container .relation-list-status-note {
    bottom: 13px !important;
    font-size: 10px !important;
  }
}



/* =========================================
   うちよそ一覧：案① 下部プレート固定型 修正版
   1:1カード維持・画像を邪魔しにくい薄白帯
========================================= */

/* カード本体 */
.relation-card,
.relation-list-card,
.uchiyoso-card {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

/* 以前の上側ぼかし・濁りレイヤーを消す */
.relation-card::before,
.relation-list-card::before,
.uchiyoso-card::before {
  content: none !important;
}

/* 画像はカード全体に表示 */
.relation-card img,
.relation-list-card img,
.uchiyoso-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 下部の白プレート */
.relation-card::after,
.relation-list-card::after,
.uchiyoso-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 34% !important;
  z-index: 2 !important;
  pointer-events: none !important;

  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.68) 58%,
    rgba(255, 255, 255, 0.00) 100%
  ) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* タイトル＋ラベルを必ず下部に固定 */
.relation-card-title,
.relation-title,
.uchiyoso-title,
.relation-card .title,
.relation-list-card .title,
.uchiyoso-card .title {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 24px !important;
  z-index: 3 !important;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(38, 42, 48, 0.94) !important;
  font-size: clamp(13px, 3.6vw, 18px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,0.78),
    0 0 10px rgba(255,255,255,0.65) !important;
}

/* 準備中・制限ありラベル */
.relation-card-label,
.relation-label,
.uchiyoso-label,
.relation-card .label,
.relation-list-card .label,
.uchiyoso-card .label,
.relation-card .badge,
.relation-list-card .badge,
.uchiyoso-card .badge {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 7px !important;
  z-index: 3 !important;

  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;

  color: rgba(80, 84, 92, 0.62) !important;
  font-size: clamp(10px, 2.8vw, 12px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* タイトルとラベルが同じ要素内にある場合の保険 */
.relation-card *,
.relation-list-card *,
.uchiyoso-card * {
  box-sizing: border-box !important;
}

/* スマホ3列用：文字をさらに安定 */
@media (max-width: 640px) {
  .relation-card,
  .relation-list-card,
  .uchiyoso-card {
    border-radius: 22px !important;
  }

  .relation-card::after,
  .relation-list-card::after,
  .uchiyoso-card::after {
    height: 36% !important;
  }
}


/* ===== うちよそ一覧：下部プレート固定型 修正版 ===== */

/* カード本体：1:1維持 */
.relation-card,
.uchiyoso-card,
.pair-card {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* 前回の上側ぼかし・黒い影を無効化 */
.relation-card::before,
.uchiyoso-card::before,
.pair-card::before {
  content: none !important;
}

/* 画像は邪魔しない */
.relation-card img,
.uchiyoso-card img,
.pair-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  z-index: 1 !important;
}

/* 下部の白プレート */
.relation-card::after,
.uchiyoso-card::after,
.pair-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 42% !important;
  z-index: 2 !important;
  pointer-events: none !important;

  background: linear-gradient(
    to top,
    rgba(255,255,255,0.88) 0%,
    rgba(255,255,255,0.72) 48%,
    rgba(255,255,255,0.36) 78%,
    rgba(255,255,255,0) 100%
  ) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ===== うちよそ一覧：下部白フェード修正版 ===== */

#relation-list-container .relation-list-card {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* 前回の擬似要素フェードは使わない */
#relation-list-container .relation-list-card::before,
#relation-list-container .relation-list-card::after {
  content: none !important;
}

/* 画像 */
#relation-list-container .relation-list-icon {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

#relation-list-container .relation-list-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* 下部白フェード本体 */
#relation-list-container .relation-list-bottom-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 43% !important;
  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;

  padding: 0 8px 12px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;

  background: linear-gradient(
    to top,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.76) 36%,
    rgba(255,255,255,0.38) 68%,
    rgba(255,255,255,0) 100%
  ) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* タイトル */
#relation-list-container .relation-list-title {
  position: static !important;

  margin: 0 !important;
  padding: 0 !important;

  width: 100% !important;
  text-align: center !important;

  font-size: clamp(14px, 3.7vw, 20px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;

  color: rgba(36, 41, 50, 0.96) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.85),
    0 0 8px rgba(255,255,255,0.75) !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 準備中・制限あり */
#relation-list-container .relation-list-status-note {
  position: static !important;

  margin: 5px 0 0 !important;
  padding: 0 !important;

  width: 100% !important;
  text-align: center !important;

  font-size: 10.5px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  color: rgba(82, 88, 98, 0.72) !important;

  text-shadow: 0 1px 0 rgba(255,255,255,0.85) !important;
}

/* 不要なRELATION文字は非表示 */
#relation-list-container .relation-list-eyebrow {
  display: none !important;
}




/* ===== うちよそ一覧：ラベル上・タイトル下 安定版 ===== */

#relation-list-container .relation-list-bottom-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 46% !important;
  z-index: 10 !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 5px !important;

  padding: 0 8px 15px !important;
  box-sizing: border-box !important;

  background: linear-gradient(
    to top,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.76) 40%,
    rgba(255,255,255,0.34) 72%,
    rgba(255,255,255,0) 100%
  ) !important;

  pointer-events: none !important;
}

/* 以前のabsolute指定を解除 */
#relation-list-container .relation-list-title,
#relation-list-container .relation-list-status-note {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
}

/* ラベルを上 */
#relation-list-container .relation-list-status-note {
  order: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 10.5px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.1em !important;
  color: rgba(82, 88, 98, 0.72) !important;
}

/* タイトルを下 */
#relation-list-container .relation-list-title {
  order: 2 !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
  font-size: clamp(14px, 3.7vw, 20px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;

  color: rgba(36, 41, 50, 0.96) !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}


/* ===== うちよそ一覧：横長画像をカードにフィット ===== */

#relation-list-container .relation-list-icon img {
  width: 112% !important;
  height: 112% !important;

  object-fit: cover !important;
  object-position: center center !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* 画像コンテナ */
#relation-list-container .relation-list-icon {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
}


/* ===== うちよそ一覧：画像ありカードでも準備中/制限ありを表示 ===== */
/* 画像・カード・タイトル位置は変えず、noteだけを前面に戻す */

.relation-list-card:has(.relation-list-icon img[src]) .relation-list-status-note {
  display: inline-flex !important;

  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 14px !important;
  bottom: auto !important;

  z-index: 6 !important;
  margin: 0 !important;

  width: auto !important;
  max-width: calc(100% - 28px) !important;

  padding: 4px 8px !important;
  border-radius: 999px !important;

  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;

  color: rgba(38, 42, 52, 0.78) !important;
  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;

  text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  pointer-events: none !important;
}


/* ===== うちよそ一覧：準備中ラベルを文字だけにする ===== */

.relation-list-card:has(.relation-list-icon img[src]) .relation-list-status-note {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  padding: 0 !important;
  border-radius: 0 !important;

  color: rgba(70, 74, 82, 0.72) !important;
  text-shadow:
    0 1px 2px rgba(255,255,255,0.85),
    0 0 6px rgba(255,255,255,0.65) !important;
}