body {
    background-color: #fff0f1;
    /*背景色*/
}

a {
    text-decoration: none;
    /*aタグのデフォルトデザインなし*/
}

.contents {
    text-align: center;
    /*contentsの中身を中央寄せ*/
}

.headerlogo {
    text-align: center;
    margin-top: 28px;
    /*ヘッダーロゴの位置*/
}

.logoimg {
    width: 150px;
    height: auto;
    /*ロゴの大きさ*/
}

.footer {
    font-size: 10px;
    color: #6f3c1d;
    margin-top: 60px;
    margin-bottom: 10px;
    text-align: center;
    /*フッターの文字*/
}

img.sp1 {
    display: none;
    /*デフォルトでsp1を非表示*/
}

img.sp2 {
    display: none;
    /*デフォルトでsp2を非表示*/
}

@media (min-width: 500px) {
    /*表示領域が500px以上の場合*/
    img.sp1 {
        display: none;
        /*sp1を非表示*/
    }
    img.sp2 {
        display: none;
        /*sp2を非表示*/
    }
    img.pc {
        display: block;
    }
    /*pcを表示*/
}

@media (max-width: 500px) {
    /*表示領域が500px未満の場合 */
    img.sp1 {
        display: block;
        /*sp1を表示 */
    }
    img.pc {
        display: none;
        /*pcを非表示*/
    }
    img.sp2 {
        display: none;
        /*sp2を非表示*/
    }
}

@media (max-width: 319px) {
    /*表示領域が319px未満の場合 */
    img.sp1 {
        display: none;
        /*sp1を非表示*/
    }
    img.pc {
        display: none;
        /*pcを非表示*/
    }
    img.sp2 {
        display: block;
        /*sp2を表示*/
    }
}


/*ここからPC用コード*/

.bandm {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 30px;
}

.mandr {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
}

.btn1 {
    margin-right: 15px;
}

.btn3 {
    margin-right: 15px;
}

.igcandleodr {
    margin-top: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn5 {
    text-align: center;
}

.btn6 {
    text-align: center;
    margin-top: 1px;
}


/*ここからSP用コード*/

@media (max-width: 319px) {
    /*表示領域が319px未満の場合 */
    .bandm {
        margin-top: 20px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*btn1とbtn2の縦並び設定*/
    }
    .btn2 {
        margin-top: 10px;
    }
    .btn3 {
        margin-top: 2px;
    }
    .btn4 {
        margin-top: 10px;
    }
    .btn5 {
        margin-top: -5px;
    }
    .btn6 {
        margin-top: -5px;
    }
    .bandm a {
        width: 200px;
        /*aタグの範囲が広かったので200に合わせた*/
    }
    .mandr {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*btn3とbtn4の縦並び設定*/
    }
    .mandr a {
        width: 200px;
        /*aタグの範囲が広かったので200に合わせた*/
    }
}

@media (max-width: 500px) {
    /*表示領域が500px未満の場合 */
    .mandr {
        margin-top: 10px;
    }
}