/* ================================================================
   トップページのカード（About の3枚 / Works の4枚）を
   画像を含むカード全体でクリックできるようにする。

   テキストだけがリンクだと、画像を押しても反応せず使いにくいため。

   マークアップは変えず、リンクの ::after をカード全体に広げて
   透明な当たり判定にしている（いわゆる stretched link）。
   既存のテーマ CSS・sameH の高さ揃えに手を入れずに済む。
   ================================================================ */

.topIMG_3_ul li .li_inr,
.topIMG_4_ul li .li_inr {
    position: relative;
    /* 画像の上でも指カーソルにして、押せることが分かるようにする */
    cursor: pointer;
}

.topIMG_3_ul li .li_inr .txt a::after,
.topIMG_4_ul li .li_inr .txt a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* カードのどこにマウスが乗っても画像を少し沈ませ、押せることを伝える。
   ::after がカード全体を覆うので、画像の上でも :hover が成立する */
.topIMG_3_ul li .li_inr .imgP img,
.topIMG_4_ul li .li_inr .imgP img {
    transition: opacity 0.3s ease-out;
}

.topIMG_3_ul li .li_inr:hover .imgP img,
.topIMG_4_ul li .li_inr:hover .imgP img {
    opacity: 0.78;
}

/* キーボード操作でリンクに来たとき、カード全体を枠で囲って位置を示す */
.topIMG_3_ul li .li_inr:focus-within,
.topIMG_4_ul li .li_inr:focus-within {
    outline: 2px solid #111;
    outline-offset: 4px;
}