/* ステップA: 親要素（<p>）をコンテナとして定義 */
.wbr-container {
    /* これが、<p>要素に「schedule-box」という名前を付けている部分です */
    container-type: inline-size;

    /* 2. (オプション) コンテナに名前を付けると管理しやすい */
    container-name: schedule-box; 
}

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

}

/* ステップB: コンテナクエリを記述 */
/* ここで指定した名前を使って、どのコンテナの幅を参照するかを指定します */
/* container-name: schedule-box の幅が250px以下の場合に適用 */
@container schedule-box (max-width: 280px) {
    .wbr250 {
        display: block; /* <br>を表示（強制改行） */

    }
}


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

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


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

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


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

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

/* 注意: <p>要素の幅で制御したい場合 */
/* p {
  container-type: inline-size; /* 親要素の幅に応じてスタイルを適用するための設定 */
}

@container (max-width: 500px) {
    .break-on-narrow {
        display: block;
    }
}
/* ただし、@containerはモダンなCSS機能です */
*/

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

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