* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    max-width: 2000px;  /* 最大幅を設定 */
    margin: 0 auto;  /* 中央に配置 */
}

.container {
    width: 100%;  /* コンテナ全体を100%に設定 */
    overflow: hidden;  /* コンテナ内の要素がはみ出さないようにする */
}

header, section, footer {
    width: 100%;  /* 各セクションを100%に設定 */
    margin: 0;    /* 上下の隙間をなくすためにマージンを0に */
}

img {
    width: 100%;  /* 画像を親要素に合わせて100%に設定 */
    height: auto;  /* 高さは自動調整 */
    display: block;  /* 画像の下に隙間ができないように */
}

/* デフォルトでは両方の画像を非表示にする */
.desktop-image,
.mobile-image {
    display: none;
    max-width: 100%;
    height: auto;
}

/* デスクトップ版（画面幅が768px以上）の場合 */
@media screen and (min-width: 768px) {
    .desktop-image {
        display: block;
    }
}

/* スマートフォン版（画面幅が768px未満）の場合 */
@media screen and (max-width: 767px) {
    .mobile-image {
        display: block;
    }
}