/* 使い方注意：br は max-width:768pxが一番先に機能する */
/* 文字数(巾)関係なく最初に改行させたい処から768→650→500→350で使う */
/* max-width:350pxは500よりも狭い画面巾前提だからbr優先度は最後 */

/* 1. デフォルトでは改行（<br>）を非表示にする */
.wbr350 {
    display: none;
}

/* 2. 画面幅が350px以下になったら改行（<br>）を表示する */
/* max-width: 350px はビューポート（画面）の幅のこと */
@media (max-width: 350px) {
    .wbr350 {
        display: block; /* <br>を強制的に表示し、改行させる */
    }
}

/* 1. デフォルトでは改行（<br>）を非表示にする */
.wbr500 {
    display: none;
}

/* 2. 画面幅が500px以下になったら改行（<br>）を表示する */
/* max-width: 500px はビューポート（画面）の幅のこと */
@media (max-width: 500px) {
    .wbr500 {
        display: block; /* <br>を強制的に表示し、改行させる */
    }
}

/* 1. デフォルトでは改行（<br>）を非表示にする */
.wbr650 {
    display: none;
}

/* 2. 画面幅が650px以下になったら改行（<br>）を表示する */
/* max-width: 650px はビューポート（画面）の幅のこと */
@media (max-width: 650px) {
    .wbr650 {
        display: block; /* <br>を強制的に表示し、改行させる */
    }
}

/* 1. デフォルトでは改行（<br>）を非表示にする */
.wbr768 {
    display: none;
}

/* 2. 画面幅が768px以下になったら改行（<br>）を表示する */
/* max-width: 768px はビューポート（画面）の幅のこと */
@media (max-width: 768px) {
    .wbr768 {
        display: block; /* <br>を強制的に表示し、改行させる */
    }
}