@media screen and (max-width: 3000px) {

    h1 {
        font-size: 24px;
    }

    .page-header{
        font-size: 25px;
    }

    p {
        font-size: 16px;
    }

    .table{
        text-align: center;
    }

    .table-black {
        background-color: rgb(93, 84, 84);
        color: white;
    }

    textarea{
        font-weight: bold;
        color: black;
    }

    label {
        float: left;
    }

    body {
        font-family: 'Helvetica', sans-serif;
    }

    .help-block{
        color: red;
        text-align: center;
    }

    #パンクズりすと {
        font-size: 13px;
        font-weight: bold;
    }
    

    #scrollToTopBtn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        display: flex; /* アイコンの位置を調整するために flexbox を使用 */
        align-items: center; /* 垂直方向の中央に配置 */
        justify-content: center; /* 水平方向の中央に配置 */
        background-color: rgb(27, 237, 223);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 9999;
    }
    
    
    #scrollToTopBtn.show {
        opacity: 1;
    }
    

    /*scroll-box*/
    .scroll-box {
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    /*scrollbar*/
    /*スクロールバー全体の高さ*/
    .scroll-box::-webkit-scrollbar {
        height: 4px;
    }

    /*スクロールバー全体の背景*/
    .scroll-box::-webkit-scrollbar-track {
        background: #eee;
    }

    /*スクロールバーの動く部分*/
    .scroll-box::-webkit-scrollbar-thumb {
        background: #aaa;
        border: none;
    }

    /*スクロールバーの動く部分のホバー（マウスオーバー）*/
    .scroll-box::-webkit-scrollbar-thumb:hover {
        background: #999;
    }



    .br-携帯短 {
        display: none;
    }

    .管理者_テーブル_ボタン列{
        width: 10%;
    }
    
    #テーブル_左寄せの列 {
        text-align: left;
    }

    #週から選択ボタン {
        border-color: black;
    }

    ol {
        font-size: 16px;
    }

    /*テーブル列の幅*/
    .列_5パーセント {
        width: 5%;
    }
    
    .列_6パーセント {
        width: 6%;
    }
    
    .列_7パーセント {
        width: 7%;
    }
    
    .列_8パーセント {
        width: 8%;
    }
    
    .列_9パーセント {
        width: 9%;
    }
    
    .列_10パーセント {
        width: 10%;
    }
    
    .列_11パーセント {
        width: 11%;
    }
    
    .列_12パーセント {
        width: 12%;
    }
    
    .列_13パーセント {
        width: 13%;
    }
    
    .列_14パーセント {
        width: 14%;
    }
    
    .列_15パーセント {
        width: 15%;
    }
    
    .列_16パーセント {
        width: 16%;
    }
    
    .列_17パーセント {
        width: 17%;
    }
    
    .列_18パーセント {
        width: 18%;
    }
    
    .列_19パーセント {
        width: 19%;
    }
    
    .列_20パーセント {
        width: 20%;
    }
    
    .列_30パーセント{
        width: 30%;
    }
    .列_40パーセント{
        width: 40%;
    }
    .列_50パーセント{
        width: 50%;
    }
    .列_60パーセント{
        width: 60%;
    }
    .列_70パーセント{
        width: 70%;
    }
    .列_80パーセント{
        width: 80%;
    }
    .列_90パーセント{
        width: 90%;
    }
    .列_100パーセント{
        width: 100%;
    }

    .step_title{
        text-align: center;
    }

    .alert {
        margin-top: 10px;
        text-align: center;
    }

    #label_for_textarea{
        text-align: left;
        margin-bottom: 0px;
    }

    .badge{
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
      
    }

    .news_area {
        text-align: left;
    }

    .header .dropdown-menu .dropdown-item {
        color: black;
        padding: 10px 15px;
    }

    #完了 {
        background-color:rgb(87, 226, 92);
        color: white;
        font-weight: bold;
    }

    #未完了 {
        background-color: orange;
        color: white;
        font-weight: bold;
    }

    #生徒キャンセル {
        background-color: red;
        color: white;
        font-weight: bold;
    }

    #講師キャンセル {
        background-color: red;
        color: white;
        font-weight: bold;
    }



}

 /*ipad 横幅*/
 @media screen and (max-width: 1024px) {

    .br-携帯短 {
        display: none;
    }
 }

 /*ipad 縦幅*/
 @media screen and (max-width: 768px) {

    .br-携帯短 {
        display: none;
    }

    .dropdown-menu{
        text-align: center;
    }

    .col-md-4 {
        margin-bottom: 10px;
    }

}

 /*iphone 縦幅(横)*/
 @media screen and (max-width: 736px) {

    h1 {
        font-size: 15px;
    }


    .br-携帯短 {
        display: block;
    }

    #パンクズりすと {
        font-size: 10px;
    }

    .page-header{
        font-size: 16px;
        text-align: center;
    }

    .btn-group {
        width: 100%;
    }

    p {
        font-size: 14px;
    }

   


    .dataTables_length {
        padding-bottom: 30px;
    }

 }

/*iphone 横幅(短)*/
@media screen and (max-width: 414px) {
    h4{
        font-size: 18px;
    }

    #名前＆ポイント {
        font-size: 17px;
    }

    label {
        font-size: 15px;
        float: left;
    }

    .br-携帯短 {
        display: block;
    }

}