.bg_body{
    background:url(../images/bg.svg);
    background-size:cover;
}
body{
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color:#000;
}
input:focus{
    outline:none;
}
.btn_pass .txt_fugi{
    padding-top: 13px;
}
.td_table.checked {
    background-color: #ededed;
}
.btn_on{
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.name_system{
    text-align:center;
    font-size:18px;
    padding:15px 0;
}
.name_scholl{
    text-align:center;
    font-size:28px;
    font-weight:bold;
}
.tit_chose{
    text-align:center;
    margin-top:30px;
}
.tit_chose .txt_fugi{
    font-size: 30px;
}
.tit_chose .txt_fugi sup{
    font-size: 15px;
    top: -3.2em;
}
.txt_fugi{
    display:inline-flex;
    font-size:18px;
    flex-direction:column;
    text-align:center;
}
.txt_fugi sup{
    font-size:10px;
}
.txt_line_menu .txt_fugi{
    font-size: 30px;
}
.txt_line_menu .txt_fugi sup{
    font-size:15px;
}
th .txt_fugi{
    font-size: 14px;
    padding-top: 12px;
}
th  .txt_fugi sup{
    font-size: 8px;
}
.list_student{
    width:670px;
    margin:0 auto;
    height:475px;
    overflow-x:auto;
    padding:10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-bottom: 0;
    align-items: center;
    padding-top: 0;
    margin-bottom: 10px;
}
.student_sex{
    width:55px;
    height:55px;
    display:inline-block;
    position:absolute;
    left:20px;
    bottom:0;
}
.male{
    background:url(../images/boy.svg) no-repeat;
    background-size:100%;
}
.female{
    background:url(../images/girl.svg) no-repeat;
    background-size:100%;
}
.number_student{
    display:inline-block;
    border-radius:50%;
    border:1px solid #000;
    width:36px;
    height:36px;
    text-align:center;
    line-height:34px;
    font-size:22px;
    position:absolute;
    left:15px;
    top:50%;
    margin-top:-18px;
}
.box_chosepass{
    width:600px;
    margin:0 auto;
    margin-top:40px;
    padding:20px;
    background:#fff;
    border-radius:10px;
    box-shadow:-10px 10px 0px #f0b831;
    padding-bottom:40px;
    position: relative;
    margin-bottom: 30px;
}

.student_active{
    height:86px;
    background:#fff;
    border-radius:10px;
    box-shadow:-5px 5px 5px rgba(0,0,0,0.1);
    position:relative;
    width:350px;
    margin:0 auto;
}
.student_active .student_sex{
    width:70px;
    height:70px;
}
.student_active .number_student{
    width:50px;
    height:50px;
    left:108px;
    font-size:35px;
    line-height:50px;
    margin-top:-25px;
}
.student_active .name_student{
    line-height:86px;
    padding-left:170px;
    font-size:35px;
}
.tit_sup{
    top: -3.2em!important;
}
.tit_sup_err{
    top: -2.5em!important;
}
.tit_chosepass{
    text-align:center;
    margin-top:30px;
}
.form_pass{
    width:410px;
    margin:0 auto;
    margin-top:30px;
}
.form_pass label{
    font-weight:normal;
    font-size:20px;
    color:#999;
    margin-bottom:0;
}
.input_pass{
    width:100%;
    border:none;
    border-bottom:2px solid #000;
    padding:10px;
    font-size:40px;
}
a.btn_pass{
    color:#fff;
    font-size:20px;
    width:178px;
    margin:0 auto;
    padding:10px 0;
    text-align:center;
    display:block;
    background:#EDCC29;
    border-radius:5px;
    margin-top:30px;
}
a.btn_pass:focus,a.btn_pass:hover{
    text-decoration: none;
    box-shadow:-5px 5px 5px rgba(0,0,0,0.1);
}
.content_body{
    padding:20px 2rem;
    background: none !important;
}
.box_body{
    box-shadow:-10px 10px 0px #f0b831;
    background: #fff;
    padding: 0 2rem;
    border-radius: 10px;
    padding-bottom: 80px;
    height: calc(100vh - 40px);
    position: relative;
    overflow-y: auto;
}
.line_tt_left{
    padding-bottom: 20px;
}
.list_tt{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.list_box {
    display: flex;
    align-content: center;
    justify-content: center;
}
.box_graph {
    padding: 0 10px;
}
.gold_bar{
    background-color: yellow;
}
.sliver_bar{
    background-color: darkgray;
}
.brown_bar{
    background-color: burlywood;
}
.ico_crown1 {
    background: url(../images/crowns.svg) center no-repeat;
    background-size: 100%;
    width: 60px;
    height: 100%;
    display: block;
}
.center_btn{
    justify-content: space-between;
    padding: 15px;
    display: flex;
}
.btn-primary{
    color: #fff !important;
    text-shadow: none !important;
}
.ico_cup2{
    background: url(../images/cup2.svg);
    background-size: 100%;
    width: 60px;
    height: 60px;
    display: inline-block;
}
.progress{
    margin-bottom: 0;
}
.ico_mail{
    background: url(../images/mail.svg);
    background-size: 100%;
    width: 25px;
    height: 18px;
    display: inline-block;
    position: relative;
}
th {
    text-align: center;
}
.noti::before{
    content: "";
    background-color: red;
    width: 6px;
    height: 6px;
    position: absolute;
    bottom: -3px;
    border-radius: 50%;
    right: 0;
}
.tit_table{
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    align-items: flex-end;
}
.btn_table{
    background-color: #EDCC29;
    display: block;
    color: #fff !important;
    border-radius: 5px;
    width: 178px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    font-size: 20px;
    font-weight: bold;
}
.right_tit_table .txt_fugi{
    color: red;

}
.btn_modal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: .75rem;
    border-top: 1px solid #e3e6f0;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
}
.modal-dialog-centered{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: calc(100% - 1rem);
    width: 500px;
}
.modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
}
.modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    display: block;
    content: "";
}
.modal-dialog-centered .modal-content{
    width: 100%;
}
.ico_menu{
    background: url(../images/menu.svg) no-repeat;
    background-size: 100%;
    width: 20px;
    height: 15px;
    display: block;
}
.humber_menu{
    position: absolute;
    left: 20px;
    top: 20px;
}
.sign_out{
    position: absolute;
    right: 20px;
    top: 20px;
    color: #EDCC29;
    font-size: 15px;
}

.modal-dialog-bottom{
    display: flex;
    align-items:flex-end;
    min-height: 100%;
    width: 580px;
    margin: 0 auto;
}

.modal-dialog-bottom .modal-content{
    width: 100%;
    border-radius: 6px 6px 0 0 ;
}
.modal-dialog-bottom .modal-body{
    padding: 0;
}
a.line_menu{
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 30px;
    align-items: center;
    font-size: 30px;
    color: #000;
}
a.line_menu:focus,a.line_menu:hover{
    text-decoration: none;
    background-color: #f1f1f1;
}
.img_line_menu{
    width: 97px;
    text-align: center;
}
.txt_line_menu{
    padding-left: 20px;
}
a.line_menu:last-child{
    border-bottom: none;
}
.tit_menu{
    border-bottom: 1px solid #ccc;
    padding-top: 30px;
    padding-bottom: 10px;
    background-color: #f1f1f1;
    border-radius: 6px 6px 0 0 ;
}
.btn_modal .btn_pass{
    margin-top: 0;
}
.back{
    position: fixed;
    bottom: 40px;
    left: 40px;
    z-index: 2;
}
.next{
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 2;
}
.back_page_ico{
    background: url(../images/back_page_ico.svg) no-repeat;
    background-size: 100%;
    width: 58px;
    height: 58px;
    display: block;
}
.ico_back{
    background: url(../images/back.svg) no-repeat;
    background-size: 100%;
    width: 58px;
    height: 58px;
    display: block;
}
.ico_next{
    background: url(../images/next.svg) no-repeat;
    background-size: 100%;
    width: 58px;
    height: 58px;
    display: block;
}
.logo_bot img{
    height: 45px !important;
}
.box_login{
    position: relative;
}
.back_page{
    position: absolute;
    left: 30px;
    top: 30px;
}
.on_ico{
    width: 50px;
    height: 20px;
    background: url(../images/on_ico.svg) no-repeat;
    background-size: 100%;
    display: inline-block;
}
.off_ico{
    width: 50px;
    height: 20px;
    background: url(../images/off_ico.svg) no-repeat;
    background-size: 100%;
    display:  inline-block;
}
.table>thead>tr>th{
    font-weight: normal;
    background: #f1f1f1;
}

.ui-loader{
    display: none;
}
.btn-primary{
    background-color: #EDCC29;
    border-color: #EDCC29;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary{
    background-color: #e1c123;
    border-color: #e1c123;
}
.btn_action{
    color: #fff !important;
    font-size: 14px;
    width: 100px;
    text-align: center;
    display: block;
    background: #EDCC29;
    border-radius: 5px;
    text-shadow: none;
    margin: 0 10px;
    position: relative;
}
.btn_action span{
    display: flex;
    align-items: center;
    height: 100%;
}
.btn_action .txt_fugi{
    font-size: 14px;
}
.btn_action .txt_fugi sup{
    font-size: 9px;
}
.btn_action:hover{
    text-decoration: none;
    background-color: #debe1f;
}
.btn_action .txt_fugi{
    padding-top: 15px;
}
.like_ico{
    padding-left: 10px;
    text-align: left;
}
.backmedal_ico {
    text-align: left;
    padding-left: 10px;
}
.like_ico::before,.backmedal_ico::before{
    content: "";
    display: block;
    position: absolute;
    right: 5px;
    top: 10px;
    width: 20px;
    height: 20px;
}
.like_ico::before{
    background: url("../images/like.svg");
    background-size: 100%;
}
.backmedal_ico::before{
    background: url("../images/back_medal.svg");
    background-size: 100%;
}
@media only screen and (min-width: 960px) {
    .list_student{
        width: 960px;
    }
    .medium{
        width: 765px;
    }
    .min{
        width: 550px;
    }
}