/* 親コンテナ */
.image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

/* ベースの画像（PC & スマホ） */
.responsive-img {
    width: 100%;
    height: auto;
    display: block;
}

/* GIFアニメーション（共通設定） */
.gif-animation {
    position: absolute;
    width: 50%; /* サイズ調整 */
    max-width: 280px;
}

/* PC用GIF */
.pc-gif {
    top: 10%;  /* 上から30%の位置 */
    left: 10%; /* 左から20%の位置 */
    display: block;
}

/* スマホ用GIF */
.sp-gif {
    top: 25%;  /* 上から30%の位置 */
    left: 5%; /* 左から10%の位置 */
    display: none;
}

/* iPad（768px～1024px）の場合 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .pc-gif {
        width: 15%;  /* iPad用に少し小さめ */
        max-width: 120px;
    }
}

/* PC用画像 */
.pc-img {
    display: block;
}

.sp-img {
    display: none;
}

/* スマホ用設定 */
@media screen and (max-width: 768px) {
    .pc-img {
        display: none;
    }

    .sp-img {
        display: block;
    }

    /* GIFの表示設定 */
    .pc-gif {
        display: none; /* PC用GIFを非表示 */
    }

    .sp-gif {
        display: block; /* スマホ用GIFを表示 */
        width: 50%; /* スマホ用のサイズ */
        max-width: 200px;
    }
}