@charset "utf-8";

/*
Theme Name: HOIKU system
Description: HOIKU system
Theme URI: 
Author: ifdesign.inc
Author URI: 
Version: 1.00
*/


/*--------------------------
基本設定
---------------------------*/

p {
  padding: 0;
  margin: 0;
}


/*端末別設定*/

.pc {
  display: block!important;
}

.sp {
  display: none!important;
}

@media screen and (max-width: 480px) {
  .pc {
    display: none!important;
  }
  .sp {
    display: block!important;
  }
}


/*a href 設定*/

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

a {
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}


/*--------------------------
基本設定
---------------------------*/

body, html {
  height: 100%;
  margin-top: 0px!important;
}

body {
  -webkit-print-color-adjust: exact;
  border: none;
  padding: 0px;
  margin: 0px;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  font-size: medium;
  color: #214C90;
  line-height: 1.6em;
  -webkit-text-size-adjust: 100%;
  background-color: #214C90;
}

.body_wrap {
  overflow-x: hidden;
  position: relative;
}


/*--------------------------
ボタン系
---------------------------*/

.btn_area {
  padding-bottom: 10px;
  padding-top: 10px;
  position: relative;
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.btn_area p {
  width: 100%;
  text-align: center;
}

.btn_area button {
  display: block;
  font-size: small;
  border-style: none;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 20px;
}


/*ボタン基本*/

.btn_area button[type="submit"] {
  border-radius: 5px;
  line-height: 3em;
  height: 3em;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 10px;
  margin-left: 10px;
  max-width: 400px;
  text-align: center;
  font-size: large;
  width: 100%;
}
.btn_area button[type="button"] {
  border-radius: 5px;
  line-height: 3em;
  height: 3em;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 10px;
  margin-left: 10px;
  max-width: 400px;
  text-align: center;
  font-size: large;
  width: 100%;
}

/*戻るボタン*/

.btn_back {
  position: fixed;
  bottom: 30px;
  left: 19%;
}

.btn_back a {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-image: url(/statics/images/icon/icn_back.svg);
  background-position: 10px center;
  background-size: 30px auto;
  background-color: #FFFFFF;
  filter: drop-shadow(4px 4px 6px rgb(0, 0, 0, 0.4));
  cursor: pointer;
  display: block;
}

.btn_back a:hover {
  background-color: #DEDEDE;
}


/*確定*/

.btn_submit {
  background-color: #FFB100;
  color: #FFFFFF;
}

.btn_submit:hover {
  background-color: #E29C00;
}


/*キャンセル*/

.btn_cancel {
  background-color: #868686;
  color: #FFFFFF;
}

.btn_cancel:hover {
  background-color: #6C6C6C;
}


/*------------------------------------
フォーム系
------------------------------------*/


/*レイアウト*/

.wrap.form-parts dl {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}

.wrap.form-parts dl:last-child {
  border-bottom-style: none;
}

.wrap.form-parts dl dt {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: #FFFFFF;
  font-size: medium;
}

.wrap.form-parts dl dd {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1.6em;
}

.wrap.form-parts dl dd p {
  width: 100%;
}

@media (min-width: 768px) {
  .wrap.form-parts dl {
    border-bottom: 1px solid #E2E2E2;
  }
  .wrap.form-parts dl dt {
    width: 25%;
  }
  .wrap.form-parts dl dd {
    width: 75%;
  }
}

@media (min-width: 1024px) {}


/*input系*/

input[type="text"] {
  background-color: #F7F7F7;
  padding-left: 10px;
  padding-right: 10px;
  height: 3em;
  line-height: 3em;
  border-radius: 5px;
  color: #214C90;
  border: solid 1px #ececec;
}
input[type="password"] {
  background-color: #F7F7F7;
  padding-left: 10px;
  padding-right: 10px;
  height: 3em;
  line-height: 3em;
  border-radius: 5px;
  color: #214C90;
  border: solid 1px #ececec;
}

textarea {
  background-color: #F7F7F7;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.6em;
  height: 7em;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  color: #214C90;
}

select {
  padding-left: 10px;
  padding-right: 30px;
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  line-height: 3em;
  height: 3em;
  margin-right: 5px;
  padding-top: 0px;
  padding-bottom: 0px;
  background-repeat: no-repeat;
  background-image: url(/statics/images/icon/icn_arrow_down_gy.svg);
  background-position: 92% center;
  background-size: 10px auto;
  border-radius: 5px;
  color: #214C90;
}

.popup-select {
  width: 100%;
}

.popup-select a {
  padding-left: 10px;
  padding-right: 30px;
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  line-height: 3em;
  height: 3em;
  padding-top: 0px;
  padding-bottom: 0px;
  background-repeat: no-repeat;
  background-image: url(/statics/images/icon/icn_arrow_down_gy.svg);
  background-position: 97% center;
  background-size: 10px auto;
  display: block;
  border-radius: 5px;
  color: #214C90;
}

.timepicker {
  background-repeat: no-repeat;
  background-image: url(/statics/images/icon/icn_calendar.svg);
  background-position: 97% center;
  background-size: 18px auto;
}


/*エラー時*/

input[type="text"].error {
  border: 1px solid #FF686B;
}

textarea.error {
  border: 1px solid #FF686B;
}

select.error {
  border: 1px solid #FF686B;
}

.popup-select a.error {
  border: 1px solid #FF686B;
}

input[type="file"].error {
  background-color: #ffe4e4;
}

.field {}

.field.w100 {
  width: 100%;
}

.field.w33 {
  width: 100%;
}

@media (min-width: 768px) {
  .field.w33 {
    width: 50%;
  }
}

@media (min-width: 1024px) {}


/*--------------------------
チェック・ラジオ
---------------------------*/


/* チェックボックス */

input[type=checkbox] {
  display: none;
}

.checkbox-parts {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding-top: 5px;
  padding-left: 30px;
  padding-bottom: 5px;
  position: relative;
  width: auto;
}

.checkbox-parts::before {
  background: #fff;
  border: 1px solid #bdbdbd;
  content: '';
  display: block;
  height: 25px;
  left: 1px;
  margin-top: -12px;
  position: absolute;
  top: 50%;
  width: 25px;
  border-radius: 5px;
}

.checkbox-parts::after {
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  content: '';
  display: block;
  height: 15px;
  left: 10px;
  margin-top: -9px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 9px;
}

input[type=checkbox]:checked+.checkbox-parts::before {
  background: #214C90;
}

input[type=checkbox]:checked+.checkbox-parts::after {
  opacity: 1;
}


/* ラジオボタン */

input[type=radio] {
  display: none;
}

.radio-parts {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-left: 30px;
  padding-bottom: 5px;
  position: relative;
  width: auto;
}

.radio-parts::before {
  background: #fff;
  border: 1px solid #bdbdbd;
  border-radius: 50%;
  content: '';
  display: block;
  height: 25px;
  left: 0px;
  margin-top: -13px;
  position: absolute;
  top: 50%;
  width: 25px;
}

.radio-parts::after {
  background: #214C90;
  border-radius: 50%;
  content: '';
  display: block;
  height: 17px;
  left: 4px;
  margin-top: -9px;
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 17px;
}

input[type=radio]:checked+.radio-parts::after {
  opacity: 1;
}


/*------------------------------------
アラート
------------------------------------*/

.help-inline {
  color: red;
  font-size: small;
}

.required {
  color: red;
}

.err_message {
  color: red;
}

.alert_area {
  margin-left: auto;
  margin-right: auto;
  width: 92%;
}

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.alert .index {
  padding-left: 20px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 15px auto;
  background-image: url("/statics/images/icon/icn_info.svg");
}

.alert-success .index {
  background-image: url("/statics/images/icon/icn_success.svg");
}

.alert-error .index {
  background-image: url("/statics/images/icon/icn_warning.svg");
}

.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .2;
  filter: alpha(opacity=20);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.alert strong {
  font-weight: bold;
}

.alert, .alert h4 {
  color: #c09853;
}

.alert {
  background-color: #5a9cff;
  color: #FFFFFF;
}

.alert-success {
  background-color: #2fd187;
}

.alert-error {
  background-color: #ff6451;
}


/*--------------------------
ヘッダー
---------------------------*/

header {
  width: 100%;
  background-color: #214C90;
  position: fixed;
  top: 0px;
}

header h1 {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}

header h1 a {
  display: block;
  width: 20%;
  max-width: 130px;
  margin-left: auto;
  margin-right: auto;
}

header h1 a img {
  width: 100%;
  height: auto;
}


/*--------------------------
メイン共通
---------------------------*/

main {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding-top: 65px;
  padding-bottom: 80px;
}

section {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 92%;
}

section.info_area {
  text-align: center;
}

section.info_area h2 {
  color: #FFFFFF;
  font-size: large;
  font-weight: bold;
  display: inline-block;
}

section.info_area .discription {
  color: #FFFFFF;
  font-size: small;
  line-height: 1.4em;
  padding-top: 10px;
}


/*戻る*/

.btn_back {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 105;
}

.btn_back a {
  background-image: url(/statics/images/icon/icn_back.svg);
  width: 60px;
  height: 60px;
  display: block;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  background-size: 25px auto;
  box-shadow: 0 5px 10px 0 rgb(0 0 0 / 15%)
}

@media (min-width: 768px) {
  main {
    padding-top: 100px;
  }
}

@media (min-width: 1024px) {}


/*--------------------------
メインメニュー
---------------------------*/


/*最近のお知らせ*/

section.recent_notification {
  border-radius: 10px;
  background-color: #FFFFFF;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

section.recent_notification h2 {
  font-weight: bold;
  font-size: large;
  padding-left: 28px;
  background-image: url(/statics/images/icon/icn_notification.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 23px auto;
  margin-bottom: 10px;
}

section.recent_notification ul {}

section.recent_notification ul li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 10px;
}

section.recent_notification ul li a {
  display: block;
}

section.recent_notification ul li a dl {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  line-height: 1.4em;
}

section.recent_notification ul li a dl dt {
  font-size: small;
  width: 100%;
}

section.recent_notification ul li a dl dd {
  width: 100%;
}

section.recent_notification ul li a dl dd.date {
  font-size: small;
}


/*添付あり*/

section.recent_notification ul li a dl dd.date .file.on::after {
  display: inline-block;
  content: "DL";
  text-align: center;
  color: #ffffff;
  background-color: #214C90;
  padding: 0px 5px 0px 5px;
  border-radius: 5px;
  line-height: 1.7em;
  font-size: small;
  font-weight: bold;
  margin-left: 10px;
  height: 1.5em;
  margin-right: 10px;
}


/*未読バッジ*/

section.recent_notification ul li a dl .unread {
  display: block;
  position: absolute;
  top: 7px;
  left: -5px;
  width: 8px;
  border-radius: 50%;
  height: 8px;
  background-color: #FF9D00;
}


/*noitem*/

section.recent_notification ul li.no_item {
  text-align: center;
  padding-left: 0px;
}

@media (min-width: 768px) {
  section.recent_notification ul li a dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  section.recent_notification ul li a dl dt {
    width: auto;
  }
  section.recent_notification ul li a dl dd {
    width: auto;
  }
}

@media (min-width: 1024px) {}


/*メニューアイコン*/

.menu_list ul {
  display: flex;
  flex-wrap: wrap;
}

.menu_list ul li {
  width: 30%;
  margin-bottom: 15px;
  position: relative;
}

.menu_list ul li:nth-child(3n-1) {
  margin-left: 5%;
  margin-right: 5%;
}

.menu_list ul li a {
  padding-top: 70px;
  padding-bottom: 10px;
  background-repeat: no-repeat;
  text-align: center;
  font-size: small;
  line-height: 1.4em;
  border-radius: 10px;
  background-color: #FFFFFF;
  color: #214C90;
  font-weight: bold;
  display: block;
}

a.icn_notification {
  /*お知らせ*/
  background-image: url(/statics/images/icon/icn_mail_bl.svg);
  background-size: 50px auto;
  background-position: center 20px;
}

a.icn_human_bl {
  /*遅刻・欠席連絡<*/
  background-image: url(/statics/images/icon/icn_human_bl.svg);
  background-size: 45px auto;
  background-position: center 15px;
}

a.icn_book_bl {
  /*WEB配信授業*/
  background-image: url(/statics/images/icon/icn_book_bl.svg);
  background-size: 50px auto;
  background-position: center 20px;
}

a.icn_sheet_bl {
  /*WEB配信授業*/
  background-image: url(/statics/images/icon/icn_sheet_bl.svg);
  background-size: 50px auto;
  background-position: center 15px;
}

a.icn_lecture_bl {
  /*講座申込*/
  background-image: url(/statics/images/icon/icn_lecture_bl.svg);
  background-size: 50px auto;
  background-position: center 15px;
}

/*未読数バッジ*/

.menu_list ul li .badge {
  position: absolute;
  right: -10px;
  top: -10px;
}

.menu_list ul li .badge .unread {
  color: #FFFFFF;
  border-radius: 50%;
  background-color: #FF9D00;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 30px;
  height: 30px;
  text-align: center;
  white-space: nowrap;
}


/*下部ボタン*/

.bottom_menu {
  width: 100%;
}

.bottom_menu ul {
  max-width: 800px;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.bottom_menu ul li {
  margin-bottom: 10px;
}

.bottom_menu ul li a {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  text-align: center;
  padding-top: 7px;
  padding-bottom: 7px;
  border-radius: 5px;
  background-color: #1C3A69;
  font-size: large;
}


/*--------------------------
お知らせ
---------------------------*/


/*一覧*/

section.info_area h2.icn_mail_wh {
  background-image: url(/statics/images/icon/icn_mail_wh.svg);
  background-position: 0% 3px;
  background-size: 25px auto;
  background-repeat: no-repeat;
  padding-left: 35px;
}

main.notification section.list ul {}

main.notification section.list ul li {
  margin-bottom: 10px;
  padding-left: 25px;
  border-radius: 5px;
  background-color: #FFFFFF;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
  position: relative;
}

main.notification section.list ul li a {
  display: block;
}

main.notification section.list ul li a dl {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  line-height: 1.4em;
  position: relative;
}

main.notification section.list ul li a dl dt {
  font-size: small;
  width: 100%;
}

main.notification section.list ul li a dl dd {
  width: 100%;
}

main.notification section.list ul li a dl dd.date {
  font-size: small;
}


/*添付あり*/

main.notification section.list ul li a dl dd.date .file.on::after {
  display: inline-block;
  content: "DL";
  text-align: center;
  color: #ffffff;
  background-color: #214C90;
  padding: 0px 5px 0px 5px;
  border-radius: 5px;
  line-height: 1.7em;
  font-size: small;
  font-weight: bold;
  margin-left: 10px;
  height: 1.5em;
  margin-right: 10px;
}


/*未読バッジ*/

main.notification section.list ul li a dl .unread {
  display: block;
  position: absolute;
  top: 40%;
  left: -15px;
  width: 8px;
  border-radius: 50%;
  height: 8px;
  background-color: #FF9D00;
}


/*noitem*/

main.notification section.list ul li.no_item {
  text-align: center;
  padding-left: 0px;
  background-color: transparent;
  color: #FFFFFF;
}


/*右矢印アイコン*/

main.notification section.list ul li a::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #214C90;
  border-right: solid 2px #214C90;
  transform: rotate(45deg);
}


/*詳細*/

main.notification section.detail {
  line-height: 1.6em;
  border-radius: 5px;
  background-color: #FFFFFF;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 15px;
  padding-bottom: 15px;
}

main.notification section.detail article dl {}

main.notification section.detail article dl .date {
  font-size: small;
}


/*添付あり*/

main.notification section.detail article dl .date .file.on::after {
  display: inline-block;
  content: "DL";
  text-align: center;
  color: #ffffff;
  background-color: #214C90;
  padding: 0px 5px 0px 5px;
  border-radius: 5px;
  line-height: 1.7em;
  font-size: small;
  font-weight: bold;
  margin-left: 10px;
  height: 1.5em;
  margin-right: 10px;
}

main.notification section.detail article dl dt {
  font-weight: bold;
  margin-bottom: 10px;
}

main.notification section.detail article dl dd {
  margin-bottom: 20px;
}


/*添付ファイルloop*/

main.notification section.detail dl .download {}

main.notification section.detail dl .download ul {}

main.notification section.detail dl .download ul li {
  margin-bottom: 10px;
}

main.notification section.detail dl .download ul li a {
  text-decoration: none;
  margin-bottom: 10px;
  padding-left: 20px;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 20px;
  border: 1px solid #214C90;
  display: block;
}


/*--------------------------
遅刻・欠席連絡
---------------------------*/

section.info_area h2.icn_human_wh {
  background-image: url(/statics/images/icon/icn_human_wh.svg);
  background-position: 0% 0px;
  background-size: 25px auto;
  background-repeat: no-repeat;
  padding-left: 35px;
}

main.absence_tardy section.edit {
  padding: 0;
}

main.absence_tardy section.edit article {
  line-height: 1.6em;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 1.00);
}

main.absence_tardy section.list {
  padding-top: 20px;
}

main.absence_tardy section.list h3 {
  color: #FFFFFF;
  font-size: large;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

main.absence_tardy section.list ul {}

main.absence_tardy section.list ul li {
  margin-bottom: 10px;
  padding-left: 45px;
  border-radius: 5px;
  background-color: #FFFFFF;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 30px;
  position: relative;
}

main.absence_tardy section.list ul li dl {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  line-height: 1.4em;
  position: relative;
}

main.absence_tardy section.list ul li dl dt {
  width: 100%;
}

main.absence_tardy section.list ul li dl dd {
  display: flex;
  font-size: small;
  width: 100%;
}

main.absence_tardy section.list ul li dl dd span {
  margin-right: 10px;
}


/*ステータスアイコン*/

main.absence_tardy section.list ul li .status {
  position: absolute;
  left: 10px;
  top: 10px;
}

main.absence_tardy section.list ul li .status p.sent {
  background-image: url(/statics/images/icon/icn_arrow_up_wh.svg);
  background-position: center center;
  border-radius: 50%;
  background-color: #FFCC22;
  width: 30px;
  height: 30px;
  background-size: 20px auto;
  background-repeat: no-repeat;
  color: #FFFFFF;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 30px;
  text-align: center;
  white-space: nowrap;
}

main.absence_tardy section.list ul li .status p.checked {
  background-image: url(/statics/images/icon/icn_check.svg);
  background-position: center center;
  border-radius: 50%;
  background-color: #214C90;
  width: 30px;
  height: 30px;
  background-size: 17px auto;
  background-repeat: no-repeat;
  color: #FFFFFF;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 30px;
  text-align: center;
}


/*コントロール*/

main.absence_tardy section.list ul li .control {
  position: absolute;
  right: 10px;
  top: 10px;
}

main.absence_tardy section.list ul li .control button.btn_edit {
  background-image: url(/statics/images/icon/icn_edit.svg);
  background-position: center center;
  border-radius: 50%;
  background-color: #FFA412;
  width: 30px;
  height: 30px;
  background-size: 50% auto;
  background-repeat: no-repeat;
  border-style: none;
  margin-right: 3px;
}

main.absence_tardy section.list ul li .control button.btn_delete {
  background-image: url(/statics/images/icon/icn_trush.svg);
  background-position: center center;
  border-radius: 50%;
  background-color: #FF0000;
  width: 30px;
  height: 30px;
  background-size: 50% auto;
  background-repeat: no-repeat;
  border-style: none;
}


/*申告者*/

main.absence_tardy section.list ul li .inputter {
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: #9F9F9F;
  font-size: small;
}


/*noitem*/

main.absence_tardy section.list ul li.no_item {
  text-align: center;
  padding-left: 0px;
  background-color: transparent;
  color: #FFFFFF;
}


/*--------------------------
ユーザー情報
---------------------------*/

main.user {}

main.user section.detail {
  line-height: 1.6em;
  border-radius: 5px;
  background-color: #FFFFFF;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 15px;
  padding-bottom: 15px;
}

main.user section.detail dl {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

main.user section.detail dl:last-child {
  border-bottom-style: none;
  margin-bottom: 0px;
}

main.user section.detail dl dt {}

main.user section.detail dl dd {}

main.user section.detail dl dd ul {}

main.user section.detail dl dd ul li {
  margin-bottom: 5px;
}

main.user section.detail dl dd ul.list_subject {}

main.user section.detail dl dd ul.list_subject li {
  display: flex;
}

main.user section.detail dl dd ul.list_subject li ul.list_class {
  padding-left: 10px;
}

main.user section.detail dl dd ul.list_subject li ul.list_class li {}


/*変更ボタン*/

main.user section.detail dl dd.edit_item {
  position: relative;
}

main.user section.detail dl dd.edit_item .popup_edit {}

main.user section.detail dl dd.edit_item .popup_edit a {
  position: absolute;
  right: 0px;
  top: -5px;
  background-image: url(/statics/images/icon/icn_edit.svg);
  background-position: center center;
  border-radius: 50%;
  background-color: #FFA412;
  width: 30px;
  height: 30px;
  background-size: 50% auto;
  background-repeat: no-repeat;
  border-style: none;
  display: block;
}


/*--------------------------
ポップアップ
---------------------------*/

.popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}

.popup.on {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s, visibility .4s;
}


/* オーバーレイ */

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  z-index: 200;
}

.popup-wrapper {
  z-index: 300;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  position: relative;
  border-radius: 10px;
  background-color: #FFFFFF;
  padding-top: 20px;
  width: 90%;
  max-width: 400px;
}

.popup button.close {
  position: absolute;
  top: -10px;
  right: -10px;
  color: #000000;
  font-size: 20px;
  transition: 0.3s;
  background-color: #ffffff;
  border-radius: 50%;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 3px;
  border-style: none;
  padding-top: 3px;
}

.popup-content .index {
  text-align: center;
  font-size: large;
  padding-bottom: 10px;
  font-weight: bold;
}

.popup-content .wrap {
  padding-left: 20px;
  padding-right: 20px;
  max-height: 70vh;
  overflow-y: scroll;
}


/*セレクト*/

.popup.single_select .wrap {
  padding-left: 0px;
  padding-right: 0px;
}

.popup.single_select .wrap ul {
  border-top: 1px solid #D6D6D6;
}

.popup.single_select .wrap ul li {
  border-bottom: 1px solid #D6D6D6;
  font-size: medium;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  cursor: pointer;
  cursor: hand;
  min-width: 200px;
}

.popup.single_select .wrap ul li:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-style: none;
}


/*edit*/

.popup.edit {}

.popup.edit .btn_area {
  flex-wrap: nowrap;
}


/*--------------------------
ログイン
---------------------------*/

body.login {
  background-image: url(/statics/images/studylandbuilding.jpg);
  background-size: cover;
  background-position: center top;
  height: 100vh;
}

body.login .body_wrap {
  background-color: rgba(33, 76, 144, 0.9);
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

body.login main {
  padding: 0;
  margin: 0;
  background-color: transparent;
  max-width: 600px;
}

body.login main section {
  display: block;
}

body.login .alert_area {
  width: 100%;
}

body.login main section h1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  width: 30%;
}

body.login main h1 img {
  width: 100%;
  height: auto;
}

body.login main section p.title {
  text-align: center;
  color: #FFFFFF;
  font-size: x-large;
  margin-bottom: 30px;
}

body.login form.form-signin {}

body.login form .input-block-level {
  width: 100%;
  font-size: medium;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-radius: 5px;
  padding-right: 20px;
  border: 1px solid #DBDBDB;
  display: block;
  margin-bottom: 20px;
  background-color: #FFFFFF;
}

body.login form #loginID {
  background-position: 97% center;
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-image: url(/statics/images/icon/icn_human_gy.svg);
}

body.login form #password {
  background-position: 97% center;
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-image: url(/statics/images/icon/icn_password.svg);
}

body.login form .btn_area {}

body.login form .btn_area .btn_submit {
  background-color: #FFB100;
  color: #FFFFFF;
  border-radius: 5px;
  border-style: none;
  text-align: center;
  width: 100%;
  font-size: large;
}

body.login form .btn_area .btn_submit:hover {
  background-color: #DB9E13;
}




/*20230920講習申込み*/
header {
    z-index: 100;
}

.lecture article.form-parts {
line-height: 1.6em;
border-radius: 5px;
background-color: #FFFFFF;
padding-left: 5%;
padding-right: 5%;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 10px;
color: #000000;
}

.lecture section.form .submit_text {
padding-top: 10px;
padding-bottom: 10px;
}

.lecture .subject_wrap {
margin-bottom: 40px;
}

.lecture .subject_wrap h3 {
background-color: #214C90;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
text-align: left;
color: #FFFFFF;
font-weight: bold;
border-radius: 5px;
font-size: large;
margin-bottom: 20px;
}

.lecture .lecture_wrap {
margin-bottom: 30px;
}

.lecture .lecture_wrap h4 {
margin-bottom: 10px;
}

.lecture .lecture_wrap ul {
}

.lecture .lecture_wrap ul li {
display: flex;
margin-bottom: 10px;
font-size: 10pt;
}

.lecture .lecture_wrap ul li.disabled {
color: #d3d2d2;
}

.lecture .lecture_wrap ul li .check {
}

.lecture .lecture_wrap ul li .check input[type="checkbox"]:disabled {
}

.checkbox-parts.disabled::before {
background-color: #ececec;
border: 1px solid #d6d6d6;
}
    
.lecture .lecture_wrap ul li .text {
display: flex;
flex-wrap: wrap;
}

.lecture .lecture_wrap ul li p.period {
padding-right: 10px;
    padding-left: 5px;
}

.lecture .lecture_wrap ul li p.time {
}

.lecture .lecture_wrap ul li p.code {
}

.lecture .lecture_wrap ul li p.code span {
    font-size: 12pt;
    padding-left: 3px;
    font-weight: bold;
}

.lecture .lecture_wrap ul li p.overwrap {
display: none;
}

.lecture .lecture_wrap ul li p.overwrap.on {
display: inline-block;
padding-left: 10px;
color: #2b5ad8;
}

.lecture .lecture_wrap ul li p.close {
display: none;
}

.lecture .lecture_wrap ul li p.close.on {
display: inline-block;
padding-left: 10px;
color: #FF0004;
}

.lecture .lecture_wrap ul li p.applied {
display: none;
}

.lecture .lecture_wrap ul li p.applied.on {
display: inline-block;
padding-left: 10px;
color: #2b5ad8;
}

.lecture .lecture_wrap ul li p.irregular {
display: none;
}

.lecture .lecture_wrap ul li p.irregular.on {
    display: block;
    padding-left: 5px;
    line-height: 1em;
    font-size: 9pt;
}

ul.note {
color: #FFFFFF;
font-size: 10pt;
text-align: center;
line-height: 1.4em;
}

ul.note li {
padding-bottom: 10px;
}