@charset "utf-8";
/* CSS Document */
#app {
  margin-top: 0px;
}
div#teaching #grid_wrapper:not(.no-sidenavi) {
 display: inherit !important;
}
#teaching main#grid_container {
 margin: 0 auto;
 background: #f7f7f7;
 padding: 0;
}
#grid_container article.teaching {
 padding: 3vh 2.5%;
 width: 100%;
 box-sizing: border-box;
 background: #f7f7f7;
}
#teaching_head {
 display: flex;
 width: 100% !important;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 margin-bottom: 10px;
}
#teaching_head > div {
 line-height: 0;
}
#teaching_head > div select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 width: 190px;
 height: 50px;
 background-color: #fff;
 position: relative;
 z-index: 1;
 padding: 7px 40px 7px 20px;
 border: none;
 border-radius: 30px;
 outline: none;
 font-size: 2.5vh;
 color: #515d62;
 word-break: break-word;
 box-sizing: border-box;
 margin: 0;
}
#teaching_head > div.select_box {
 position: relative;
}
#teaching_head > div.select_box:after {
 position: absolute;
 content: '';
 width: 10px;
 height: 10px;
 border: 0px;
 border-bottom: solid 2px #5a676a;
 border-right: solid 2px #5a676a;
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 50%;
 right: 20px;
 margin-top: -8px;
 z-index: 10;
}

#teaching_head div.page_controller .from_teaching_date {
  font-size:11pt;
  display: flex;
  align-items: center;
}
#teaching_head > div.page_controller .from_teaching_date {
 color: #515d62;
 padding-top: 5px;
}
#teaching_head > div.page_controller .from_teaching_date .day_prev {
 margin-right: 0;
}
#teaching_head > div.page_controller .from_teaching_date .day_prev img, #teaching_head > div.page_controller .from_teaching_date .day_next img {
 width: 2.3vw;
 margin-right: 1em;
 margin-left: 1em;
}
#teaching_head > div.page_controller .from_teaching_date .calendar {
  width: 3.5vw;
  position: relative;
}
#teaching_head > div.page_controller .from_teaching_date .calendar label {
  left: -0.5vw;
  position: relative;
}
#teaching_head > div.page_controller .from_teaching_date .calendar label::after {
  position: absolute;
  top: calc(50% - 1.0vw);
  right: calc(50% - 2.0vw);
  content: "";
  display: block;
  width: 2.0vw;
  height: 2.0vw;
  background-image: url(../img/ic/calender.svg);
  background-repeat: no-repeat;
}

#teaching_head > div.page_controller .from_teaching_date .calendar label input[type="date"] {
  opacity: 0;
  width: 2.8vw;
  height: 2.8vw;
  position: relative;
  left: 1.0vw;
}

#teaching_head > div.page_controller .from_teaching_date .calendar input[type="date"]::-webkit-calendar-picker-indicator{
  position: absolute;
  right: 0px;
  top: calc(50% - 1.75vw);
  padding: 0;
  width: 3.5vw;
  height: 3.5vw;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

#teaching_head > div.page_controller .from_teaching_date .calendar label input[type="popup"] {
  opacity: 0;
  width: 2.8vw;
  height: 2.8vw;
  position: relative;
  left: 1.0vw;
  cursor: default;
}

#teaching_head > div.page_controller .from_teaching_date .calendar input[type="popup"]::-webkit-calendar-picker-indicator{
  position: absolute;
  right: 0px;
  top: calc(50% - 1.75vw);
  padding: 0;
  width: 3.5vw;
  height: 3.5vw;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

#teaching_head > div.page_controller .from_teaching_date label::before{
 right: 0%;
 left: 0%;
 top: 0%;
 bottom: 0%;
 margin: auto;
}
#teaching_head > div.page_controller .from_teaching_date .date {
 font-size: 2.3vw;
 color: #515d62;
 font-family: monospace, Calibri, Arial, Helvetica, sans-serif;
}
#teaching_head > div.btn_area > ul {
 display: flex;
 padding-top: 10px;
}
#teaching_head > div.btn_area > ul li {
 margin-right: 10px;
 box-sizing: border-box;
 text-align: right;
}
#teaching_head > div.btn_area > ul li:last-of-type {
 margin-right: 0;
}
#teaching_head > div.btn_area > ul li button {
 padding: 0.2em;
 background-color: #30c40c;
 position: relative;
 color: #fff;
 width: 100px;
 font-size: 16px;
 border-radius: 20px;
}
#teaching_head > div.btn_area > ul li button.shinsei {
 text-align: center;
}
#teaching_head > div.btn_area > ul li button.btn_print {
  padding: 0.2em 1em 0.2em 3em;
  position: relative;
}
@media screen and (max-width: 1024px) {
  #teaching_head > div.btn_area > ul li button.btn_print {
    padding: 0.4em 1em 0.4em 3em;
    position: relative;
  }
}
#teaching_head > div.btn_area > ul li button.btn_print::before {
 content: "";
 background-image: url(../img/ic/print.svg);
 width: 1.5em;
 height: 1.5em;
 position: absolute;
 top: 0.2em;
 left: 1em;
 transform: translate(0, 0);
 display: block;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 100%;
}
#teaching_head > div.btn_area > ul li button.btn_shinsei {
  position: relative;
}
@media screen and (max-width: 1024px) {
  #teaching_head > div.btn_area > ul li button.btn_shinsei {
    padding: 0.4em 1em 0.4em 1em;
    position: relative;
  }
}
#teaching_body .select_plan_head > ul {
 display: flex;
 color: #515d62;
}
#teaching_body .select_plan_head > ul li {
 width: calc(100% / 10);
 text-align: center;
 height: 50px;
}
#teaching_body .select_plan_head > ul li.onclick {
 position: relative;
}
#teaching_body .select_plan_head > ul li.onclick:after {
 position: absolute;
 content: "";
 bottom: 0;
 left: 0;
 width: 100%;
 height: 5px;
 background: #30c40c;
}
#teaching_body .select_plan_head > ul li.onclick:before {
 position: absolute;
 content: "";
 bottom: -20px;
 left: 0%;
 right: 0%;
 margin: auto;
 width: 20px;
 height: 20px;
 border-top: 10px solid #30c40c;
 border-bottom: 10px solid transparent;
 border-right: 10px solid transparent;
 border-left: 10px solid transparent;
}
#teaching_body .select_plan_head > ul li p {
 font-size: 11pt;
 font-weight: 600;
 position: relative;
 line-height: 50px;
 display: inline-block;
 letter-spacing: 0.06em;
}

@media screen and (max-width: 1024px) {
  #teaching_body .select_plan_head > ul li p {
    font-size: 10pt;
  }
}

#teaching_body .select_plan_head ul li p.shinsei, #teaching_body .select_plan_head ul li p.shinsei_off, #teaching_body .select_plan_head ul li p.syoninzumi, #teaching_body .select_plan_head ul li p.syoninzumi_off, #teaching_body .select_plan_head ul li p.shitagaki, #teaching_body .select_plan_head ul li p.shitagaki_off, #teaching_body .select_plan_head ul li p.syoninzumi-lock {
 padding-right: 30px;
}
#teaching_body .select_plan_head ul li p.shinsei:after {
 position: absolute;
 content: "";
 width: 24px;
 height: 24px;
 top: 10px;
 right: 0px;
 background: url("../img/ic/applying.svg")no-repeat;
 background-position: center;
 background-size: cover;
}
#teaching_body .select_plan_head ul li p.shinsei_off:after {
 position: absolute;
 content: "";
 width: 24px;
 height: 24px;
 top: 10px;
 right: 0px;
 background: url("../img/ic/select_plan1_off.svg")no-repeat;
 background-position: center;
 background-size: cover;
}
#teaching_body .select_plan_head ul li p.syoninzumi:after {
 position: absolute;
 content: "";
 width: 24px;
 height: 24px;
 top: 10px;
 right: 0px;
 background: url("../img/ic/approved.svg")no-repeat;
 background-position: center;
 background-size: cover;
}
#teaching_body .select_plan_head ul li p.syoninzumi_off:after {
 position: absolute;
 content: "";
 width: 24px;
 height: 24px;
 top: 10px;
 right: 0px;
 background: url("../img/ic/select_plan2_off.svg")no-repeat;
 background-position: center;
 background-size: cover;
}
#teaching_body .select_plan_head ul li p.shitagaki:after {
 position: absolute;
 content: "";
 width: 24px;
 height: 24px;
 top: 10px;
 right: 0px;
 background: url("../img/ic/inprogress.svg")no-repeat;
 background-position: center;
 background-size: cover;
}
#teaching_body .select_plan_head ul li p.shitagaki_off:after {
 position: absolute;
 content: "";
 width: 24px;
 height: 24px;
 top: 10px;
 right: 0px;
 background: url("../img/ic/select_plan3_off.svg")no-repeat;
 background-position: center;
 background-size: cover;
}
#teaching_body .select_plan_head ul li p.syoninzumi-lock:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  top: 10px;
  right: 0px;
  background: url("../img/ic/syonin_lock.svg")no-repeat;
  background-position: center;
  background-size: cover;
 }
#teaching_body .select_plan_head > .syounin_btn_area {
 width: 100%;
 height: 70px;
 display: flex;
 justify-content: space-between;
 padding-top: 20px;
 border-top: 1px solid #d9d9d9;
 box-sizing: border-box;
}
#teaching_body .select_plan_head > .syounin_btn_area ul {
 display: flex;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li {
 margin-right: 20px;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li:last-of-type {
 margin-right: 0;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button {
 height: 30px;
 min-width: 100px;
 padding: 0 15px;
 background: #686f82;
 border-radius: 15px;
 color: #fff;
 font-size: 16px;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_print {
 padding: 0.2em;
 background-color: #30c40c;
 position: relative;
 color: #fff;
 width: 100px;
 font-size: 16px;
 border-radius: 20px;
 padding-left: 1.8em;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_print::before {
 content: "";
 background-image: url(../img/ic/print.svg);
 width: 1.5em;
 height: 1.5em;
 position: absolute;
 top: 0.2em;
 left: 1em;
 transform: translate(0, 0);
 display: block;
 background-repeat: no-repeat;
 background-position: center;
 background-size: 100%;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_lock {
  height: 30px;
  min-width: 70px;
  padding: 0 20px;
  background: #30c40c;
  border-radius: 6px;
 }
 #teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_unlock {
  height: 30px;
  min-width: 70px;
  padding: 0 20px;
  background: #686f82;
  border-radius: 6px;
 }
 #teaching_body .select_plan_head > .syounin_btn_area ul li button .img_lock {
  height: 20px;
 }
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_draft {
 height: 30px;
 width: 90px;
 padding: 0 20px;
 background: #686f82;
 border-radius: 15px;
 color: #fff;
 font-size: 16px;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click {
 position: relative;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup {
 position: absolute;
 left: -100px;
 bottom: -300px;
 width: 300px;
 height: 300px;
 background: #fff;
 padding: 20px;
 box-sizing: border-box;
 box-shadow: 0px 0px 8px #bdbdbd;
 border-radius: 5px;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup::after {
 content: url(../img/ic/nap_controller_balloon.svg);
 position: absolute;
 width: 20px;
 height: 20px;
 top: -15px;
 left: 50%;
 transform: translate(-50%, 0);
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_head {
 height: 60px;
 display: flex;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_head p {
 font-size: 14px;
 font-weight: 600;
 position: relative;
 width: calc(100% / 4);
 display: block;
 text-align: center;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_head p:before {
 position: absolute;
 content: "";
 width: 14px;
 height: 14px;
 border-radius: 7px;
 background: #cccccc;
 bottom: 16px;
 left: 0%;
 right: 0%;
 margin: auto;
 z-index: 1;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_head p.clear:before {
 background: #30c40c;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_head p:after {
 position: absolute;
 content: "";
 width: 60px;
 height: 3px;
 background: #cccccc;
 bottom: 22px;
 right: 37px;
 margin: auto;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_head p.clear:after {
 background: #30c40c;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_head p:first-of-type::after {
 display: none;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_body {
 height: 200px;
 overflow-y: scroll;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_body dl {
 margin-bottom: 10px;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_body dl:last-of-type {
 margin-bottom: 0;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_body dl dt {
 font-size: 16px;
 font-weight: 600;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_body dl dd {
 font-size: 14px;
 margin-left: 15px;
 margin-top: 5px;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_body dl dd p {
 display: inline-block;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li.misakusei_click .misakusei_popup .popup_body dl dd p.not_clear{
  color: #cccccc;
}
.readmore {
 position: relative;
 box-sizing: border-box;
}
.readmore-content {
 position: relative;
 overflow: hidden;
 /*以下お好み*/
 /*高さの初期値*/
 height: 4em;
}
.readmore-content::before {
 display: block;
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 content: "";
 /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
 height: 50px;
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
 background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 50%, #fff 100%);
}
/* 続きを読むボタン */
.readmore-label {
 display: table;
 bottom: 5px;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 margin: 5px auto 0;
 z-index: 2;
 padding: 0 10px;
 background-color: #fff;
 border: 1px solid #cccccc;
 border-radius: 12px;
 width: 50px;
 height: 24px;
 box-sizing: border-box;
 line-height: 1em;
}
.readmore-label:before {
 position: absolute;
 left: 0%;
 right: 0%;
 margin: auto;
 top: 8px;
 content: '';
 background: url("../img/ic/arrow_down.svg")no-repeat;
 background-size: contain;
 width: 14px;
 height: 8px;
}
.readmore-check {
 display: none;
}
/*チェック時にボタンを非表示*/
.readmore-check:checked ~ .readmore-label {
  position: static;
 transform: translateX(0);
 -webkit-transform: translateX(0);
 /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
 /*display: none;*/
}
.readmore-check:checked ~ .readmore-label:before {
 position: absolute;
 left: 0%;
 right: 0%;
 margin: auto;
 top: 6px;
 content: '';
 background: url("../img/ic/arrow_down.svg")no-repeat;
 background-size: contain;
  transform: rotate(180deg);
 width: 14px;
 height: 8px;
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content {
 height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
 display: none;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_error, #teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_sashimodoshi {
 background: #FF0000;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_error img {
 width: 20px;
 height: 20px;
 display: block;
 margin: 0 auto;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_syounin {
 background: #30c40c;
}

/* ファイル選択 */
.teaching_popup_form {
  margin-top: 15px;
}
.teaching_popup_form_header {
  display: flex;
  height: 35px;
  line-height: 35px;
  margin-bottom: 5px;
}
.teaching_popup_form_title {
  font-size: 16px;
}
.teaching_popup_files .teaching_details_files_button {
  width: 35vw;
}
.teaching_popup_files {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.teaching_popup_files button img {
  width: 1.5vw;
  vertical-align: middle;
  margin-left: 10px;
}
.teaching_details_files_button {
  display: flex;
  align-items: center;
  width: 490px;
  height: 2.5vw;
  text-align: left;
  font-size: 17px;
  padding-left: 15px;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  word-break: keep-all;
  color: #565e73;
  border-color: rgb(230,230,230);
  background-image: -webkit-linear-gradient(90deg, rgb(221, 221, 221) 0%, rgb(252, 252, 252) 100%);
  box-shadow: 0px 4px 8px 0px rgb(230 230 230 / 40%), 2px -3px 2px 0px rgb(255 255 255 / 40%) inset;
}
@media screen and (max-width: 1024px) {
  .teaching_details_files_button {
    width: 450px;
    height: 3vw;
  }
}
.teaching_details_files_button span:last-of-type {
  color: #999999;
}
.teaching_detail_file_select_area {
  margin: 1vw 0;
  padding: 10px 0;
  font-size: 16px;
  align-items: center;
}
.teaching_details_files_select_button {
  width: 140px;
  text-align: center;
  border-radius: 15px;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  padding: inherit;
  border-color: rgb(204,204,204);
  background-image: -webkit-linear-gradient(90deg, rgb(221, 221, 221) 0%, rgb(252, 252, 252) 100%);
  box-shadow: 0px 4px 8px 0px rgb(230 230 230 / 40%), 2px -3px 2px 0px rgb(255 255 255 / 40%) inset;
}

.teaching #tyohyou_area {
 background:  #f7f7f7;
 border-radius: 10px;
 min-height: 40vh;/*帳票を入れてテストしたら消してOK*/
 margin-bottom: 20px;
}
.teaching #tyohyou_area td{
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !Important;
  padding: 10px;
  letter-spacing:0.05em;
  line-height:17px;
}

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .teaching #tyohyou_area td {
      font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !Important;
      padding: 1vw;
      letter-spacing: 0.05em;
      line-height: 17px;
      /* word-break: break-all !important; */
      white-space: normal !important;
      overflow-wrap: break-word !important;
      line-height: 1.5 !important;
      width: auto !important;
    }
  }

.teaching #tyohyou_area td span{
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !Important;
  padding: 10px;
  letter-spacing:0.05em;
  line-height:17px;
}
.teaching #tyohyou_area td.vertical{
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  direction: rtl;
  width: 3.5vw;
}

@media screen and (max-width:1280px) {
  .teaching #tyohyou_area td.vertical {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    width: 5vw;
  }
  .teaching #tyohyou_area td.month_hyouka {
    width: 9vw;
  }
  .teaching #tyohyou_area td.month_renkei {
    text-orientation: upright;
    word-break: break-all;
  }
}

.teaching #tyohyou_area td.vertical p{
	writing-mode: vertical-rl;
	white-space: pre;
  display: inline-block;
}
.teaching #tyohyou_area td.vertical span{
  writing-mode: vertical-rl;
  padding: 0;
}
.teaching #tyohyou_area td.vertical span p{
  writing-mode: vertical-rl;
  padding: 0px;
}

.teaching #tyohyou_area div.short_disp_1{
  overflow: hidden;
  max-height: 0%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
}

.teaching #tyohyou_area div.short_disp_3{
  overflow: hidden;
  max-height: 0%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
}

#teaching_body .plan_bottom section {
 margin-bottom: 40px;
}
#teaching_body .plan_bottom section:last-of-type {
 margin-bottom: 0;
}
#teaching_body .plan_bottom h2 {
 width: 100%;
 padding: 5px 0;
 height: 6vh;
 margin-bottom: 3vh;
 border-bottom: 3px solid #515d62;
 font-size: 1.5vw;
 color: #4c556e;
}
#teaching_body .plan_bottom .file_btn > div {
 margin-bottom: 20px;
 display: flex;
}
#teaching_body .plan_bottom button.inform_details_files_button {
 display: flex;
 align-items: center;
 width: 490px;
 height: 2.5vw;
 text-align: left;
 font-size: 17px;
 padding-left: 15px;
 border-radius: 5px;
 border-style: solid;
 border-width: 1px;
 word-break: keep-all;
 color: #565e73;
 border-color: rgb(230, 230, 230);
 background-image: -webkit-linear-gradient(90deg, rgb(221, 221, 221) 0%, rgb(252, 252, 252) 100%);
 box-shadow: 0px 4px 8px 0px rgb(230 230 230 / 40%), 2px -3px 2px 0px rgb(255 255 255 / 40%) inset;
}
#teaching_body .plan_bottom button.inform_details_files_button span:last-of-type {
 color: #999999;
 margin-left: 0.5em;
}
#teaching_body .plan_bottom button.trash {
 width: auto;
 height: 2.5vw;
 display: block;
 margin-left: 10px;
}
#teaching_body .plan_bottom button.trash img {
 display: block;
 height: 100%;
}
#teaching_body .plan_bottom .files_select_button {
 width: 140px;
 text-align: center;
 border-radius: 15px;
 border-style: solid;
 border-width: 1px;
 font-size: 16px;
 display: inline-block;
 padding: 6px 0;
 border-color: rgb(204, 204, 204);
 background-image: -webkit-linear-gradient(90deg, rgb(221, 221, 221) 0%, rgb(252, 252, 252) 100%);
 box-shadow: 0px 4px 8px 0px rgb(230 230 230 / 40%), 2px -3px 2px 0px rgb(255 255 255 / 40%) inset;
}
#teaching_body .plan_bottom ul.comments li {
 width: 100%;
 background: #fff;
 border-radius: 8px;
 box-shadow: 0px 3px 5px #d9d9d9;
 margin-bottom: 20px;
}
#teaching_body .plan_bottom ul.comments li:last-of-type {
 margin-bottom: 0;
}
#teaching_body .plan_bottom ul.comments li dl {
 padding: 20px;
 display: table;
 min-height: 100px;
}
#teaching_body .plan_bottom ul.comments li dl dt {
 width: 30%;
 display: table-cell;
 vertical-align: middle;
 font-size: 17px;
}
#teaching_body .plan_bottom ul.comments li dl dd {
 width: 70%;
 display: table-cell;
 padding-left: 20px;
 box-sizing: border-box;
 font-size: 17px;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_torikeshi {
  background: #30c40c;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.status_default {
  background: #686f82;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.status_applying {
  background: #ee93bb;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.status_approved {
  background: #30c40c;
}
#teaching_body .select_plan_head > .syounin_btn_area ul li button.btn_fukusei {
  height: 30px;
  border-radius: 15px;
}

#approval_record_box .row_inner .dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 1.4vw;
}

#approval_record_box .record_row_approval_comment_row_exist .row_inner{
  background-color: #fff;
  box-shadow:0px 4px 8px 0px rgb(230 230 230 / 75%), 2px -3px 2px 0px rgb(255 255 255 / 75%) inset;
  border-radius: 10px;
}

#approval_record_box .record_row_approval_comment_row_exist .row_inner dl{
  padding: 1.5vw 2vw 1.5vw 1.6vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 1.3vw;
}

#approval_record_box .row_inner .approve_date{
  font-size: 1.3vw;
  color: #969ea2;
  width: 14vw;
}

#approval_record_box .row_inner .approval_name{
  font-size: 1.3vw;
  color: #515d62;
  width:7vw; /*5文字は7vwで10文字は14vw*/
  vertical-align: middle;
  margin-left: 1.3vw;
}

#approval_record_box .row_inner .approval_comment_content{
  font-size: 1.3vw;
  width: 62vw;
  margin-left: 5vw; /*5文字は5vwで10文字は0vw 反映されていない*/
  white-space: pre-wrap;
}

#approval_record_box .row_inner .btn_more{
  vertical-align: middle;
}

/*** 承認者コメント***/
#approval_record_box .approval_record_title{
  font-size:18pt ;
  color:#515D62;
  border-bottom-width:1px;
  border-bottom-color:#515D62;
  border-bottom-style:solid;
  text-align: left;
  margin:1.5vw 0;
  padding:0.5vw;
}

#approval_record_box .record_row.approval_comment_row.exist .row_inner .approve_date{
  width: 95vw;
  padding:1.5vw;
}

#approval_record_box .record_row.approval_comment_row.exist .row_inner .dl{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

#approval_record_box .approval_comment_row .row_inner dl .date{
  font-size: 1.3vw;
  color: #969ea2;
  margin-left: 1.5em;
}

#approval_record_box .gray_ber .add_comment{
  width: 2.6vw;
  height: 2.6vw;
}

/*** 承認者コメントポップアップ ***/
#teaching-modal .modal_contents_inner .modal_approval_comment.fixtures_form{
  border-top: 0.2vw dotted #515d62;
  /*border-bottom: 0.2vw dotted #515d62;*/
  padding-top:0.5vw;
  padding-bottom:0.1vw;
}

#teaching-modal .modal_contents_inner .modal_approval_comment_record{
  border-top: 0.2vw dotted #515d62;
  overflow-y: scroll;
  max-height: 8vw;
}

.disabled-element {
  pointer-events: none;
  opacity: 0.5; /* 半透明にすることで無効化を視覚的に表現 */
}

#teaching-moda .modal_row_modal_row_wrap{
  padding: 0.3vw;
  letter-spacing: 0.1em;
  color:#515d62;
}

#teaching-moda .modal_checkbox{
 font-size: 1.2vw;
 letter-spacing: 0.1em;
 color: #515d62;
}

#teaching-modal .modal_contents_inner .modal_approval_comment.fixtures_form .modal_row textarea{
 border: 1px solid #30c40c;
 border-radius: 3px;
 padding: 0.5em;
 font-size: 1.2vw;
 width:100%;
 height:4vw;
}

@media screen and (max-width: 1280px) {
  #teaching-modal .modal_contents_inner .modal_approval_comment.fixtures_form .modal_row textarea{
    font-size: 1.2vw;
  }
}

#teaching-modal .modal_contents_inner .modal_approval_comment.fixtures_form .modal_row textarea::placeholder{
  text-align: left;
}

#teaching-modal .modal_contents_inner .modal_approval_comment_record .approval_comment_record_title{
  color: #4c556e;
  font-size: 1.2vw;
  padding : 1vw 0vw 0.25vw 0vw;
}

#teaching-modal .modal_contents_inner .modal_approval_comment_record dl{
  margin-bottom: 10px;
  margin-top: 1vw;
  border-bottom: #c4c4c4 1px solid;
}
#teaching-modal .modal_contents_inner .modal_approval_comment_record dl:last-of-type{
  border-bottom: none;
}
#teaching-modal .modal_contents_inner .modal_approval_comment_record .approval_comment_record {
    height: 150px;
}

#teaching-modal .approval_comment_record_date{
  font-size: 1.2vw;
  padding-left: 1.5vw;
  float: left;
}

#teaching-modal .approval_comment_record_name{
  font-size: 1.2vw;
  float: left;
  padding-left: 1vw;
  padding-right: 4vw;
}

#teaching-modal .approval_comment_record_content{
  font-size: 1.2vw;
  padding-bottom: 0.25vw;
  display: flex;
}

#teaching-modal .approval_comment_record_content p button{
  margin-left: 0.5vw;
}

#teaching-modal .modal_contents_inner .fixtures_form .modal_row .comment-title{
  font-size: 1.0vw;
  color: #c4c4c4;
}

@media screen and (max-width: 1280px) {
  #teaching-modal .modal_contents_inner .fixtures_form .modal_row .comment-title{
    font-size: 1.2vw;
  }
}

#teaching-modal .modal_contents_inner .fixtures_form .modal_row .max-length{
  color: #5d686c;
  margin-left: auto;
  padding-top: initial;
  margin-right: 0;
}

#teaching-modal .modal_contents_inner .gray_ber{
  margin: 1vw 0;
}

#teaching-modal .modal_contents_inner .max-length {
  font-size: 1.0vw;
  letter-spacing: 0.1em;
  color: #5d686c;
  padding-top: 1vw;
  text-align: right;
}

@media screen and (max-width: 1280px) {
  #teaching-modal .modal_contents_inner .max-length {
    font-size: 1.2vw;
  }
}

#teaching-modal .modal_row .modal_row_center {
  padding-bottom: 0.5vw;
}

#teaching_body .select_plan_head .free_title {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5em;
  box-shadow: 0px 3px 5px 1px #d9d9d9;
  padding: 2em 0;
}

#teaching_body .select_plan_head .free_title .row_tit {
  width: 18%;
  padding:0 1.2em;
  border-radius: 8px;
  font-weight: bold;
}
@media screen and (max-width: 1280px) {
  #teaching_body .select_plan_head .free_title .row_tit {
    width: 25%;
    padding:0 1.2em;
    border-radius: 8px;
    font-weight: bold;
  }
}

#teaching_body .select_plan_head .free_title .row_edit {
  width: 9%;
  text-align: center;
}

#teaching_body .select_plan_head .free_title .row_tx {
  word-break: break-all;
}

#teaching_body .select_plan_head .row_table {
  display: table;
}

#teaching_body .select_plan_head .row_table ul{
  display: table;
  width: 100%;
  table-layout: fixed;
}

#teaching_body .select_plan_head .row_table ul li {
  display: table-cell;
  vertical-align: middle;
}

#teaching_body .select_plan_head .row_table ul li p {
  height: 2em;
  word-break: break-word;
}

.free_popup_contents div select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 19vw;
  height: 3.9vw;
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding: 7px 40px 7px 20px;
  border: none;
  border-radius: 30px;
  outline: none;
  font-size: 1.6vw;
  color: #515d62;
  word-break: break-word;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgb(48, 196, 12);
}
.free_popup_contents div.select_box {
  position: relative;
}
.free_popup_contents div.select_box:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-bottom: solid 2px #5a676a;
  border-right: solid 2px #5a676a;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 50%;
  right: 20px;
  margin-top: -8px;
  z-index: 10;
}

.free_popup_contents .photo_popup_form_header {
  display: flex;
  height: 20px;
  line-height: 35px;
}

.teaching #tyohyou_area td {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.5 !important;
}

.teaching #tyohyou_area td.vertical {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  direction: rtl;
  width: 40px !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.ipad-os185 .teaching #tyohyou_area td {
  width: auto !important;
}
body.ipad-os185 .teaching #tyohyou_area td.vertical {
  width: 91px !important;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .teaching #tyohyou_area td.month_hyouka {
    width: 91px !important;
  }

  /* 養護 */
  .teaching #tyohyou_area td.vertical.yougo {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  /* 教育（３つの視点）・教育 */
  .teaching #tyohyou_area td.vertical.kyouiku {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  /* 家庭・地域との連携 */
  .teaching #tyohyou_area td.vertical.katei_renkei,
  .teaching #tyohyou_area td.vertical.month_renkei {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
  }

  /* 評価・課題（月間指導計画） */
  .teaching #tyohyou_area td.vertical.month_hyouka {
    width: 91px !important;
    min-width: 91px !important;
    max-width: 91px !important;
  }

  /* 個々の留意点 */
  .teaching #tyohyou_area td.vertical.ryuuiten {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  .teaching #tyohyou_area td.vertical.month_ryuuiten_2 {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    padding: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 職員間の連携 */
  .teaching #tyohyou_area td.vertical.shokuin_renkei {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  /* チームワーク */
  .teaching #tyohyou_area td.vertical.teamwork {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}