@charset "UTF-8";

/* システムカラー */
/*:root{
/*    --base-color:#f0f0ec;*/ /* 背景や余白の色（淡い色がよい） */
/*    --main-color:#216363;*/ /* システムのイメージカラー（低明度の色がよい） */
/*    --sub-color:#339999;*/ /* 部品によく使う色 */
/*    --text-color:#ffffff;*/ /* sub-color上で使う文字の色 */
/*    --highlight-color:#66bbbb;*/ /* ハイライト（main-colorと同系色で、高明度の色がよい） */
/*    --grayish-color:#e2e2de;*/ /* base-colorの補助をする色（グレーみのある色） */
/*    --dark-color:#555243;*/ /* 黒の代わりに使える色（やわらかい雰囲気になる） */
/*    --accent-color:#fa90b5;*/ /* 雰囲気を引き締める色（イメージカラーの補色がよい） */
/*    --line-color:#c5c5c5;*/ /* 表などの線の色 */
/*    --font-color:#5e5e5e;*/ /* 文字に使える色 */
/*}*/
.main_color{
    background:#216363;
}
.sub_color{
    background:#339999;
}
.color_white, a.color_white:hover{
    color:#fff;
    text-decoration:none;
}
/* ボタンのCSS */
.submit_btn{
    background:#339999;
    border-color:#66bbbb;
    color:#ffffff;
}
.row_btn{
    background:#c5c5c5;
    border-color:#c5c5c5;
    color:#555243;
    margin:3px 0px;
}
/* ボタンマウスオーバー時に透過 */
button:hover, input[type="button"]:hover, input[type="submit"]:hover{
    opacity:0.85;
}

/* ヘッダー Start */
header.header_main{
    background:#216363;
    height:60px;
    width:100%;
    display:block;
    position:sticky;/* header固定 */
    top:0;
    z-index:2;
    box-shadow:0 1px 10px #6c757d;
}
@media(max-width:640px){
    header.header_main{
        position:relative;/* header動く */
    }
}
header.header_main .header_inner{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
header.header_main .header_inner div{
    display:inline-block;
    padding:0 10px;
}
/* ヘッダー End */
/* コンテンツ中央揃え */
.cont_center{
    padding: 10px;
    display: -webkit-flex;
    -webkit-align-items: center;
    align-items: center;
  }
/* 一覧 Start */
/* 奇数行色付け */
table.list_form tbody tr:nth-child(odd){
    background:#f0f0ec;
}
table.list_form tbody tr td{
    border:solid #c5c5c5;
    border-width:0px 1px;
    padding:2px 5px;
}
/* 一覧表 */
table.list_form{
    width:100%;
    border:solid 1px #c5c5c5;
}
/* 一覧ヘッダー */
table.list_form thead tr th{
    border:solid 1px #c5c5c5;
    text-align: center;
    background: #c5c5c5;
}
/* 一覧ソート */
.vertical-scroll-table{
	color: #5e5e5e;
    max-height: 150px;
    width:80%;
	overflow: auto;
	overflow-x: hidden;
}
/* スマホサイズの時、一覧の形式を変える */
@media screen and (max-width: 640px) {
    table.list_form thead {
      display: none;
    }
    table.list_form tr {
      width: 100%;
    }
    table.list_form td {
      display: block;
      text-align: right;
      width: 100%;
      min-height:25px;
    }
    table.list_form td:first-child {
      border-top:solid 1px #c5c5c5;
    }
    table.list_form td:before {
      content: attr(data-label);
      float: left;
      font-size:smaller;
      color:#6c757d;
      margin-right: 10px;
      padding:2px 0;
    }
}
/* 一覧 End */
/* 警告の帯 */
div.warning_border{
    background:#fa90b5;
    color:#ffffff;
    margin:20px 0;
    padding:10px;
    border-radius:2px;
}
/* 入力欄（単一） Start */
/* エラーメッセージを赤くする */
.is-invalid{
    color:#e3342f;
}
/* 「必須」 */
.required{
    background: #db7093;
    color:#fff;
    font-size:xx-small;
    font-weight:normal;
    display:inline;
    padding:0 3px;
    margin-right: 7px;
}
/* 入力フォーム */
table.input_form{
    width:100%;
    margin: 10px 0;
}
table.input_form tr th{
    display:block;/* 項目名と入力欄を縦に並べる */
    padding:5px 10px 0px 10px;
}
table.input_form tr td{
    display:block;/* 項目名と入力欄を縦に並べる */
    padding:0px 10px 10px 10px;
}
select.form-control{
    width:auto;/* 横幅は文字数にあわせる */
}
/* 入力欄（単一） End */
/* 入力欄（テーブル型） Start */
table.input_table {
    border-collapse: separate;
}
table.input_table th {
    font-weight:normal;
    background:#e2e2de;
    color:#555243;
    padding:6px 10px;
}
table.input_table td {
    background:#f0f0ec;
    padding:6px 10px;
}
/* 入力欄（テーブル型） End */
/* ラジオボタン、チェックボックスのボタン化 Start */
.label-btn input[type="checkbox"],
.label-btn input[type="radio"]{
  display: none;
}
.label-btn{
  cursor: pointer;
  position: relative;
}
.label-btn .lever{
  display: block;
  color:#555243;
  font-weight: normal;
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #c5c5c5;
  border-radius:20px;
  min-width: 120px;
  text-align:center;
  background:#fff;
}
/* クリックされているとき */
.label-btn input[type="checkbox"]:checked + .lever,
.label-btn input[type="radio"]:checked + .lever{
   background: #339999;
   color: #fff;
   border-color:#339999;
}
.label-btn input[type="checkbox"]:disabled + .lever,
.label-btn input[type="radio"]:disabled + .lever{
   background: #6c757d;
   color: #fff;
   border-color:#6c757d;
}
/* ラジオボタン、チェックボックスのボタン化 End */
/* ドロワーメニュー Start */
nav.drawer {
    z-index: 110;
    position: fixed;
    top: 60px;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: #fff;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s;
}
nav.drawer ul {
      padding: 0;
      list-style-type: none;
}
nav.drawer ul li a {
      display: block;
      padding: 1em 2em;
      text-decoration: none;
      cursor: pointer;
      color: #555243;
}
nav.drawer ul li a:hover {
    background-color: #e2e2de;
    color: #5e5e5e;
}
#togglenav:checked ~ .drawer {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
/* トグルを押した際の全体背景 */
.togglenav-bg {
    cursor: pointer;
    position: fixed;
    top: 0px;
    right: 0px;
    pointer-events: none;
    z-index: 110;
    width: 100%;
    height: 100%;
    transition: background-color .6s;
}
/* メニュー表示中の全体背景色 */
#togglenav:checked ~ .togglenav-bg{
      pointer-events: auto;
      background-color: rgba(0, 0, 0, 0.3);
}

/* トグルボタン */
#togglenav {
    display: none;
}
.togglenav-btn {
    cursor: pointer;
    z-index: 2;
    width: 50px;
    height: 50px;
    color: #fff;
    background-color: #339999;
    line-height: 50px;
    text-align: center;
    -webkit-transition: background-color .6s, -webkit-transform .4s;
    transition: background-color .6s, transform .4s;
    position: fixed;
    top: 60px;
    left: 0;
}
/* 押した後のボタン */
#togglenav:checked + .togglenav-btn {
      background-color: #495057;
      top: 60px;
      transform: translateX(300px);
      transition: .4s;
      -webkit-transition: .4s;
}
/* 押す前のアイコン */
.togglenav-btn:before {
      font-family: 'Font Awesome 5 Free';
      /*content: "\f0c9";*/
      content: "\f105";
      font-weight: 900;
      font-size: 2em;
}
/* 押した後のアイコン */
#togglenav:checked + .togglenav-btn:before {
      font-family: 'Font Awesome 5 Free';
      content: "\f00d";
      font-weight: 900;
      font-size: 2em;
}
@media(max-width:640px){
    .togglenav-btn {
        top:0;
        right:0;
        left:auto;
        margin:5px;
        position:absolute;
    }
    nav.drawer {
        width:200px;
    }
    #togglenav:checked + .togglenav-btn {
        transform: none;
        top: 0;
    }
}
/* ドロワーメニュー End */

/* 入力フォーム表の上のタイトル */
h2.input_table_title {
    background:#c5c5c5;
    padding:10px;
    margin-top: 30px !important;
    margin-bottom: 5px !important;
    font-size: 1.1em !important;
}

/* カレンダーのアイコン */
input.day, input.datetime {
    background: #fff url(/image/calender.png) no-repeat;
    background-position: right 8px top 8px;
}
.hide {
  display: none;
}
.loading {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.5);
  background-image: url(../image/loading.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;

}