/* 基本スタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.container {
    max-width: 830px;
    margin: 50px auto;
    text-align: center;
}

.instruction-text {
    font-size: 16px;
    margin-bottom: 20px;
}

.image {
    width: 100%;
    margin-bottom: 30px;
}

a:hover {
    opacity: .8;
}


/* 画面横幅が830px以上の場合 */
@media (min-width: 830px) {
    .image1 {
        width: 830px;
        height: 230px;
    }
    .image2 {
        width: 830px;
        height: 230px;
    }
}

/* 画面横幅が830px以下・500px以上の場合 */
@media (max-width: 829px) and (min-width: 500px) {
    .image1, .image2 {
        width: 90%;
        height: auto;
    }
}

/* 画面横幅が500px以下の場合 */
@media (max-width: 499px) {
    .image1 {
        content: url('images/bnr-support-service_001-b.jpg');
        width: 90%;
        height: auto;
    }
    .image2 {
        content: url('images/bnr-support-service_002-b.jpg');
        width: 90%;
        height: auto;
    }
}