html{
  touch-action: manipulation;
}

#classSetViewShowArea,#createClassShowArea,#editClassShowArea{
  width: calc(100% - 40px);
}

.accordion_calendar-date{
  border: none;
}
.accordion_calendar-date::-webkit-calendar-picker-indicator,.accordion_calendar-date::-webkit-datetime-edit{
  display: none;
}
dialog::backdrop {
  background: rgba(94, 94, 94, 0.5);
  backdrop-filter: blur(4px);
}
.pointer{
  cursor: pointer;
}

.show{
  display: block;
}
.hidden{
  display: none!important;
}
.flex{
  display: flex;
}

.flex-wrapper{
  flex-wrap: nowrap;
}

.wrapper__bookstore{
  line-height: 1.5;
  width: 100%;
  height: 90%;
  background-color: #eeeeee;
}

.main-contents__bookstore{
  display: block;
  width: 100%;
  height: 100%;
}
.container__bookstore{
  width: 100%;
  height: 100%;
  overflow: auto;
}

.c-wrapper{
  width: 100%;
  height: 32px;
  padding: 0 20px;
  margin-top: 20px;
  margin-left: 0;
  display: flex;
}
.c-period_box,.c-average_box,.c-subject_box,.c-book_box{
  padding: 7px 0;
  cursor: pointer;
}
.c-period_box.selected,.c-average_box.selected,.c-subject_box.selected,.c-book_box.selected,.c-checked_box.selected{
  background-color: #2593d2!important;
  color: white!important;
}
#yearSelect,#classSelect{
  height: 32px!important;
}
#yearSelect{
  width: 220px;
}
#classSelect{
  width: 140px;
}

.learning_status_display_area{
  margin-top: 130px;
}
.homework_accordion_area,.material_distribution_area{
  margin-top: 20px;
}
/*#homework_accordion table{
  table-layout: fixed;
}*/
#homework_accordion table thead th{
  font-size: 12px;
}

.learning_wrapper,.accordion_wrapper{
  padding: 0 20px;
  margin-top: 20px;
}
.learning_wrapper:last-child,.accordion_wrapper:last-child{
  margin-bottom: 20px;
}
.learning_box{
  width: 100%;
  height: 400px;
  padding: 7px 0;
  background-color: white;
  border: 1px solid gray;
}

.accordion__bookstore{
  /*width: 100%;
  height: 40px;*/
  padding: 7px 0;
  background-color: white;
  /*border: 1px solid gray;*/
  cursor: pointer;
}
.accordion-title-wrapper{
  border-left: 3px solid #2593d2;
}
.accordion_title-item{
  font-size: 16px;
  vertical-align: middle;
  padding: 0 10px;
}
.accordion_title-date{
  font-size: 12px;
}
.accordion_next-button{
  transform: scale(-1,1);
}
.accordion-img-wrapper{
  width: 25px;
  height: 25px;
}
.accordion_title-item-right{
  margin-left: 5px;
}
.accordion_title-item-right.arrow_up{
  background-image: url(../img/icon_arrow_up.webp);
}

.learning_box-materials-list > div:before{
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-image: url(../img/icon_close.webp);
}

.learning_box-materials-list thead tr{
  height: 24px;
}
.learning_box-materials-list tbody tr{
  height: 36px;
}
.learning_box-materials-list th{
  vertical-align: middle;
}
.learning_box-materials-list td{
  text-align: center;
}

.table-border{
  float: left;
}
.th-border{
  display: block;
}
.th-base-size{
  width: 10%;
}
.th-large3{
  width: 67%;
}
.th-small{
  width: 5%;
}

.th-border{
  border-left: 2px solid #dfdfdf;
}
.td-border{
  display: block;
  border-left: 2px solid #dfdfdf;
}
.th-border.first,.td-border.first{
  border: 0;
}
.td-reverse{
  transform: scale(-1,1);
  cursor: pointer;
}

#learning-bookmark .title{
  max-width: 674px;
}
#learning-homework tbody tr{
  height: 86px;
}

.page-item{
  width: 30px;
  height: 30px;
}
.page-item.selected{
  background-color: #2593d2;
}

/*教科の色*/
.subject-box{
  padding: 3px 8px;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 24px;
  margin: auto;
  font-size: 12px;
}
.subject-box.english{
  border-color: #8ad254;
}
.subject-box.language{
  border-color: #58bb72;
}
.subject-box.math{
  border-color: #54d2ce;
}
.subject-box.social{
  border-color: #47a3e1;
}
.subject-box.science{
  border-color: #7586f5;
}
.subject-box.other{
  border-color: #bbbbbb;
  font-size: 10px;
}
.subject-box.ios{
  width: 60px;
}

.learning_box-materials > div+div{
  margin-top: 20px;
}
.learning_box.learning_box-materials{
  width: 100%;
  height: 100%;
  padding: 7px 0;
  background-color: white;
  border: 1px solid gray;
}

.learning_box-materials-list td{
  vertical-align: middle;
}
.large-td{
  padding-left: 10px;
  text-align: left;
}

.learning_box canvas{
  padding: 20px;
}
.learning_graph-box{
  height: 100%;
}

.table__bookstore{
  margin: 0 10px 0 12px;
  width: 98%;
}
.table__bookstore tr{
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}
.col-material{
  width: 3%;
}

.table-separater{
  width: 1px;
  height: 25px;
  background-color: #e5e5e5;
  margin: 5px;
}
.scoreList_td.active{
  background-color: #e1f1fb;
}
#scoreList_accordion tbody tr{
  height: 52px;
}
#scoreList-tbody{
  font-size: 14px;
}
#scoreList-tbody tr td:nth-child(3) .m-auto,
#scoreList-tbody tr td:nth-child(4) .m-auto{
  max-width: 195px;
}

/* 正誤記録テーブル調整用 */
.table_box{
  max-width: 1000px;
  height: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.table_box table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.table_box th,.table_box td {
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
.sticky_row {
  position: sticky;
  top: 0;
  left: 0;
  width: 4rem;
  background: none;
  border-left: none;
  border-right: none;
}
.sticky_row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
  border: 1px solid var(--bs-border-color);
  box-sizing: content-box;
}
.sticky_row:nth-child(2){
  left: 5rem
}

.sticky_col {
  position: sticky;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
}
.table_box thead tr:nth-child(1) .sticky_col::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
  border-bottom: 1px solid var(--bs-border-color);
}
.table_box thead tr:nth-child(1) .sticky_col.last::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
  border-bottom: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
}
.table_box thead tr:nth-child(2) .sticky_col::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
  border-bottom: 1px solid var(--bs-border-color);
}
.table_box thead tr:nth-child(2) .sticky_col.last::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
  border-bottom: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
}
.table_box thead tr:nth-child(2) th{
  top: 21px;
}

.sticky_cross {
  position: sticky;
  top: 0;
  left: 0;
  width: 80px;
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  z-index: 1;
}
.sticky_cross::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -1;
  border-bottom: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  box-sizing: content-box;
}
.sticky_cross:nth-child(2){
  left: 80px;
}
.sticky_cross:nth-child(2)::before{
  border-left: 1px solid var(--bs-border-color);
}
.table_box td{
  width: 40px;
  height: 40px;
}

.c-book_box,.c-subject_box,.c-period_box,.c-checked_box,.c-wrapper_serach > input,#yearSelect,#classSelect{
  border-color: #AAAAAA!important;
}

#classSelectPullDown,#yearSelectPullDown{
  height: 32px;
}
#classSelectPullDownUl{
  width: 140px;
  /*overflow: scroll;*/
}
#yearSelectPullDown{
  width: 220px;
  margin-left: 10px;
}

#appSelectPullDownUl {
  overflow-y: auto;
  white-space: nowrap;
  max-height: 300px; 
}
#classSelectPullDown, #contentSelectPullDown, #appSelectPullDown{
  width: 140px;
  margin-left: 10px;
}
#classSelectPullDown span{
  width: 90px;
  overflow: hidden;
}
#bookshelfSortPullDown::after,#yearSelectPullDown::after,#classSelectPullDown::after,#studyDatePullDown::after,#appSelectPullDown::after,
#answerRatePullDown::after,#contentSelectPullDown::after,#yearSelectModalPullDownTitle::after{
  content: "▼";
}
#classSelectPullDownUl a{
  width: 130px;
  text-overflow: ellipsis;
  overflow: hidden;
}

#contentSelectPullDown{
  width: 200px;
  margin-left: 10px;

}

#contentSelectPullDown span{
  width: 150px;
  overflow: hidden;

}
#contentSelectPullDownUI a{
  /*▼の文字が25pxなので
  appSelectPullDownのwidthに合わせる。
  */
  width: 175px;
  text-overflow: ellipsis;
  overflow: hidden;
}



#appSelectPullDown{
  width: 200px;
  margin-left: 10px;

}

#appSelectPullDown span{
  width: 150px;
  overflow: hidden;

}
#appSelectPullDownUl a{
  /*▼の文字が25pxなので
  appSelectPullDownのwidthに合わせる。
  */
  width: 175px;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* プルダウン */
.dropdown-toggle{
  border-color: #AAAAAA;
}
.dropdown-toggle:hover{
  color: #0071B2;
  border-color: #0071B2;
  background-color: #E1F1FB;
}
.dropdown-toggle::after{
  border: none;
}
.dropdown-item:focus, .dropdown-item:hover{
  background-color: #E1F1FB!important;
}
.dropdown-menu li.checked{
  background-color: #E1F1FB;
}
.dropdown-menu li.checked a{
  color: #0071B2;
}
.dropdown-menu li img{
  display: none;
}
.dropdown-menu li.checked img{
  display: block;
  height: 20px;
}

.accordion__bookstore.checked,.table__bookstore tr.checked,.page-accordion.checked,.page-accordion-body tbody tr.checked{
  background-color: #E1F1FB;
}

.tooltip-arrow{
  display: none!important;
}
.tooltip-inner{
  background-color: white;
  color: black;
  border: 1px solid lightgrey;
  border-radius: 4px;
  max-width: 400px !important;
  width: 300px;
}

/*暫定タブレット縦サイズ*/
@media screen and (max-width:1020px){
  .otherMaterialMaxSize{
    max-width: 490px;
  }
  .flex-wrapper{
    flex-wrap: wrap;
  }
  .c-period_box,.c-subject_box,.c-book_box {
    padding: 0;
    font-size: 16px!important;
  }
  .learning_status_display_area{
    margin-top: 180px;
  }
  #scoreList-tbody tr td:nth-child(3) .m-auto,
  #scoreList-tbody tr td:nth-child(4) .m-auto{
    max-width: 72px;
  }
}
/*スマホサイズ*/
@media screen and (max-width:767px){
  .c-wrapper{
    height: 20px;
    margin-top: 10px!important;
  }
  .c-wrapper:first-child{
    margin-top: 20px;
  }
  #yearSelect,#classSelect{
    height: 20px!important;
    width: 150px;
  }
  #yearSelect,#classSelect,#studyDateSelect,#answerRateSelect{
    font-size: 10px!important;
  }
  #bookshelf-searchBtn{
    width: 15%;
  }
  .bookshelf-select{
    font-size: 10px;
    padding: 0;
  }
  .c-period_box, .c-average_box, .c-subject_box, .c-book_box {
    padding: 0;
    font-size: 10px!important;
  }
  .accordion_title-item {
    padding: 0 1px;
  }
  .table__bookstore {
    width: 94%;
  }
  .material-item{
    width: 170px;
  }
  .flex-wrapper{
    font-size: 10px!important;
  }
  .flex-wrapper select{
    width: 100px;
  }
  .learning_wrapper{
    font-size: 9px;
  }
  .learning_status_display_area{
    margin-top: 110px;
  }
  #learning-homework,#learning-bookmark{
    font-size: calc(((100vw - 480px) * 4 / 288) + 10px);
  }
  .table__bookstore thead,.subject-box{
    font-size: calc(((100vw - 480px) * 4 / 288) + 8px);
  }
  #homework_accordion table thead th{
    font-size: calc(((100vw - 480px) * 4 / 288) + 8px);
  }
  .page_move_btn{
    margin-top: 9px!important;
  }
  #classSelectPullDown,#yearSelectPullDown{
    height: 20px;
    font-size: 10px;
  }
}

@media screen and (max-width:480px){
  #yearSelect,#classSelect{
    width: 120px;
  }
  #learning-homework,.learning-bookmark{
    font-size: 10px;
  }
  #homework_accordion table thead th,.subject-box{
    font-size: 8px
  }
}