/*  ──────────────────────────────────────
    フッターバナー：通常＝文字＋画像
                 ホバー＝画像のみ
    ────────────────────────────────────── */

/* 1) まず画像ラッパーは前面＆常に可視 */
#footer_banner .image_wrap,
#footer_banner .image_wrap img,
#footer_banner .image_wrap picture {
  z-index: 2 !important;      /* 文字より前面に固定              */
  opacity: 1 !important;      /* 透過アニメの影響を受けない      */
  visibility: visible !important;
}

/* 2) 文字・オーバーレイ・矢印などをまとめて指定（通常は表示） */
#footer_banner .content,
#footer_banner .overlay,
#footer_banner .arrow,
#footer_banner .title,
#footer_banner .sub_title,
#footer_banner .catch,
#footer_banner .desc,
#footer_banner .link_text {
  transition: opacity .25s ease;
  opacity: 1;                 /* ← 通常時はそのまま見える */
}

/* 3) ホバー時だけ文字ブロックを透明化（＝見えなくする） */
#footer_banner a:hover .content,
#footer_banner a:hover .overlay,
#footer_banner a:hover .arrow,
#footer_banner a:hover .title,
#footer_banner a:hover .sub_title,
#footer_banner a:hover .catch,
#footer_banner a:hover .desc,
#footer_banner a:hover .link_text,
#footer_banner a:hover::before,    /* 擬似要素で出る場合に備えて */
#footer_banner a:hover::after {
  opacity: 0 !important;          /* 完全に透明                 */
  visibility: hidden !important;  /* フォーカスも受けない        */
}