@charset "UTF-8";

/* --- カタログボタン共通の設定 --- */
.catalog-hover-btn {
    display: block; /* 画像を囲むブロックにする */
    transition: 0.3s; /* 動きをスムーズにする */
    line-height: 0; /* 画像の下の隙間を消す */
}

/* --- 【ここがポイント】カーソルを当てた時（ホバー） --- */
.catalog-hover-btn:hover {
    filter: brightness(0.8); /* 明るさを90%にする（少し暗くなる） */
}

/* --- 【ここがポイント】クリックした瞬間（アクティブ） --- */
.catalog-hover-btn:active {
    filter: brightness(0.7); /* 明るさを80%にする（もっと暗くなる） */
    transform: translateY(1px); /* 1px下に沈ませる（押した感を出す） */
}

/* PC用の設定：スマホ（767px以下）ではPC用画像を隠す */
@media screen and (max-width: 767px) {
    .pc-only-images {
        display: none !important;
    }
}

/* SP用の設定：PC（768px以上）ではSP用画像を隠す */
@media screen and (min-width: 768px) {
    .sp-only-images {
        display: none !important;
    }
}

/* スマホ表示時の画像レイアウト調整（必要に応じて） */
.sp-only-images {
    flex-direction: column; /* 縦並びにする場合 */
    align-items: center;
}

/* @media screen and (max-width: 768px) {
    p.caption_right {
      font-size: 0.4rem !important;
    }
} */