body{
    margin: 0px;
}

/* 親要素 */
.main {
    position: relative; /* 基準点 */
    width: 100%;

}

/* 背景画像コンテナ (特に変更なし) */
/* .image-container { */
    /* 必要ならスタイル追加 */
/* } */

/* 背景画像 (特に変更なし) */
.image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* ★追加: ボタン画像のサイズ (imgタグ) */
.btn img {
    display: block; /* 親(a)に合わせる、余白対策 */
    width: 100%;   /* ← ★ここで希望のボタン幅を指定してください */
    height: auto;   /* 高さは自動調整 */
}

/* ボタンの位置 (aタグ) */
.btn_01 {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block; /* ★追加: サイズやtransformのため */
    line-height: 0; /* ★追加: 画像下の余白を防ぐ場合 */
    /* aタグ自体にサイズ指定したい場合はここに記述 */
    /* width: 150px; */ /* 例えば */
}

/* ボタンの位置 (aタグ) */
.btn_02 {
    position: absolute;
    top: 53.8%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block; /* ★追加: サイズやtransformのため */
    line-height: 0; /* ★追加: 画像下の余白を防ぐ場合 */
    /* aタグ自体にサイズ指定したい場合はここに記述 */
    /* width: 150px; */ /* 例えば */
}
/* ボタンの位置 (aタグ) */
.btn_03 {
    position: absolute;
    top: 76.2%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block; /* ★追加: サイズやtransformのため */
    line-height: 0; /* ★追加: 画像下の余白を防ぐ場合 */
    /* aタグ自体にサイズ指定したい場合はここに記述 */
    /* width: 150px; */ /* 例えば */
}
/* ボタンの位置 (aタグ) */
.btn_04 {
    position: absolute;
    top: 97.8%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block; /* ★追加: サイズやtransformのため */
    line-height: 0; /* ★追加: 画像下の余白を防ぐ場合 */
    /* aタグ自体にサイズ指定したい場合はここに記述 */
    /* width: 150px; */ /* 例えば */
}

.sp-only{
    display: none;
  }

@media screen and (max-width: 575px) {

    .pc-only{
        display: none;
    }
    .sp-only {
        display: block; /* または display: inline; など状況に応じて */
        display: flex;
        align-items: center;
        text-align: center;
    }

    /* ★追加: ボタン画像のサイズ (imgタグ) */
    .btn img {
        width: 150%;   /* ← ★ここで希望のボタン幅を指定してください */
    }

    .btn_01 {
        display: flex;
        justify-content: center;
        top: 11.5%;
        left: 50%;
    }

    .btn_02 {
        display: flex;
        justify-content: center;
        top: 52.4%;
        left: 50%;
    }
    .btn_03 {
        display: flex;
        justify-content: center;
        top: 73.8%;
        left: 50%;
    }
    .btn_04 {
        display: flex;
        justify-content: center;
        top: 98%;
        left: 50%;
    }
  }