/************************************************
 共通設定（全体）
************************************************/

/*余白*/
.blank-space100 {
 margin-top: 100px;
}

.blank-space90 {
 margin-top: 90px;
}

.blank-space80 {
 margin-top: 80px;
}

.blank-space70 {
 margin-top: 70px;
}

.blank-space60 {
 margin-top: 60px;
}

.blank-space50 {
 margin-top: 50px;
}

.blank-space40 {
 margin-top: 40px;
}

.blank-space30 {
 margin-top: 30px;
}

.blank-space20 {
 margin-top: 20px;
}


body {
 margin: 0;
 font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-size: 15px;
}


/*ヘッダー(画像１つの場合)
#header-inner {
 height: 74px;
 display: flex;
 align-items: center;
}

h1.header-logo {
 width: 80%;
 padding-top: 8px;
 padding-bottom: 0;
 padding-left: 10px;
 margin: 8px 0 0 0;
}

h1.header-logo img {
 width: 360px;
 transition: .2s;
}

h1.header-logo img:hover {
 opacity: .86;
}*/

/*ヘッダー（画像２つの場合）*/
#header-inner {
 height: 70px;
 display: flex;
 align-items: center;
}

h1.header-logo {
 width: 80%;
 padding-bottom: 0;
 padding-left: 14px;
 margin: 0;
}

/*aタグバージョン（画像２つ／リンクする場合）
h1.header-logo a {
 display: flex;
 align-items: center;
 width: 360px;
 transition: .2s;
}

h1.header-logo a:hover {
 filter: brightness(1.08);
}*/

/*divタグバージョン（画像２つ／リンクしない場合））*/
h1.header-logo div {
 display: flex;
 align-items: center;
 width: 360px;
 transition: .2s;
}


h1.header-logo img.logo01 {
 width: 30%;
 padding-right: 10px;
}

h1.header-logo img.logo02 {
 width: 67%;
}



/*右上コンテンツエリア*/
.header_right {
 width: 20%;
 margin-right: 20px;
}

.accordion-btn p {
 display: none;
}

/*右上メニューボタン*/
.accordion-js_btn {
 color: #fff;
 /*ＰＣ幅ではボタン非表示*/
 display: none;
}





/*カラム横並び*/
#contents {
 display: flex;
}

#sub {
 width: 20%;
 min-height: 1000px;
 background: #e2e2e2;
 box-shadow: 1px 0 5px 1px #d3d6d9 inset;
}

#main {
 width: 80%;
 min-height: 1000px;
 background: #ececec;
 /*↓削除不可*/
 padding-bottom: 1px;
}





/******************レスポンシブ********************/
@media screen and (min-width:992px) {

 /*削除不可（右上ボタン押下後に画面幅を広げると非表示になるため）*/
 .menu-area {
  display: block !important;
 }


}

@media screen and (max-width:991px) {
 #contents {
  display: inherit;
 }

 #sub {
  width: 100%;
  min-height: auto;
  background: #eee;
 }

 #container-inner {
  display: inherit;
 }


 /*右上メニューボタン*/
 /*レスポンシブで表示*/
 .accordion-btn {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 1px;
  right: 1px;
 }

 .accordion-btn:hover {
  cursor: pointer;
 }

 .accordion-btn p {
  display: block;
  text-align: center;
  margin-top: 13px;
  font-size: 70%;
  font-weight: bold;
  color: #0e0e0e;
 }

 .accordion-btn .inn {
  margin: auto;
  position: absolute;
  width: 30px;
  height: 20px;
  top: 20px;
  bottom: 0;
  right: 0;
  left: 0;
 }

 .accordion-btn .inn .line {
  position: absolute;
  display: inline-block;
  background-color: #0e0e0e;
  height: 2px;
  left: 0;
  width: 100%;
  transition: 0.3s;
 }

 .accordion-btn .inn .line:nth-child(1) {
  top: 0;
 }

 .accordion-btn .inn .line:nth-child(2) {
  top: 48%;
 }

 .accordion-btn .inn .line:nth-child(3) {
  bottom: 0;
 }


 .accordion-btn.open .inn .line:nth-child(1) {
  top: 45%;
  transform: rotate(45deg);
 }

 .accordion-btn.open .inn .line:nth-child(2) {
  opacity: 0;
 }

 .accordion-btn.open .inn .line:nth-child(3) {
  top: 45%;
  transform: rotate(-45deg);
  bottom: auto;
 }


 /*右上メニューボタン開閉によるメニューエリア表示*/
 .menu-area {
  display: none;
 }

 .menu-area.open {
  display: block;
 }


}




@media screen and (max-width:781px) {
 #main {
  background: #fff;
 }
}


@media screen and (max-width:600px) {
 body {
  font-size: 14px;
 }

 h1.header-logo div {
  width: 300px;
 }


 .header_right {
  width: 24%;
  margin-right: 14px;
 }




}




@media screen and (max-width:400px) {
 h1.header-logo {
  padding-left: 8px;
 }

 h1.header-logo div {
  width: 260px;
 }

 h1.header-logo img.logo01 {
  padding-right: 4px;
 }

 .header_right {
  width: 16%;
  margin-right: 10px;
 }


}






/************************************************
 共通設定（subエリア／メニュー欄）
************************************************/
/*〇〇管理画面 表示欄*/
.system-title {
 background: #0e0e0e;
 text-align: center;
 padding: 10px;
 font-size: 22px;
 font-weight: bold;
 color: #fff;
}




/*メニュー一覧*/
.menu-area ul {
 padding-left: 0;
 margin: 0;
}

.menu-area a {
 color: #000;
 text-decoration: none;
}

.menu-area li {
 list-style: none;
 max-width: 100%;
 padding: 12px 0 12px 30px;
 font-weight: bold;
 cursor: pointer;
}

.menu-area li:hover {
 background: #d8d8d8;
}

.menu-area li.li-logout {
 background: #8ba8ce;
 color: #fff;
}

.menu-area li.li-logout i:before {
 color: #fff;
}

.menu-area li.li-logout:hover {
 background: #97b2d5;
}

.menu-area li.current {
 background: #d0d0d0;
}

.menu-area li i:before {
 color: #9a9a9a;
 padding-right: 6px;
}




/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 .menu-area ul {
  /*メニューを２列にする*/
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-columns: 1fr 1fr;
 }

 .menu-area a {
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  height: 60px;
  overflow: hidden;
 }

 .menu-area li {
  width: 100%;
  display: flex;
  align-items: center;
  height: 100%;
 }

 .menu-area a.logout {
  /*２列結合*/
  grid-row: 1;
  grid-column: 1/3;
 }

 .menu-area {
  background: #e2e2e2;
 }

 .system-title {
  text-align: left;
  padding-left: 20px;
  font-size: 20px;
 }

}


/******************レスポンシブ********************/
@media screen and (max-width:600px) {
 .menu-area li {
  padding-left: 20px;
 }

}


@media screen and (max-width:400px) {
 .menu-area li {
  padding-left: 10px;
 }


}




/************************************************
 共通設定（mainエリア）
************************************************/
/*見出し*/
h2 {
 background: #00aaff;
 padding: 10px 0 10px 16px;
 margin-top: 0;
 margin-bottom: 0;
 font-size: 22px;
 color: #fff;
}

h2 i:before {
 padding-right: 8px;
}

h3 {
 margin: 0;
 padding: 4px 0px 0px 8px;
 border-left: 6px solid #3f3a85;
 line-height: 1;
}

h4 {
 font-size: 19px;
 margin: 0 0 8px 0;
}

h4 i:before {
 padding-right: 6px;
 color: #3f3a85;
}

/*h2エリア右のヘルプボタン*/
.h2-area {
 display: flex;
 align-items: center;
 background: #00aaff;
 justify-content: space-between;
}

.h2-area a {
 text-decoration: none;
 padding: 6px 8px 4px;
 background: #fff;
 margin-right: 20px;
 border-radius: 3px;
 font-weight: bold;
 color: #00aaff;
 display: flex;
 transition: .3s;
}

.h2-area a:before {
 font: var(--fa-font-regular);
 content: '\f059';
 padding-right: 6px;
 font-size: 20px;
}

.h2-area a:hover {
 filter: contrast(1.3);
}







/*main内上部(upper-area)のカラム分け*/
.upper-area {
 display: flex;
 margin-bottom: 70px;
}

.upper-area .left-side {
 padding-right: 20px;
 padding-bottom: 10px;
 width: calc(100%/2);
}

.upper-area .right-side {
 padding-left: 20px;
 padding-bottom: 10px;
 border-left: 1px solid #ccc;
 width: calc(100%/2);
}

.upper-area .submitbtn-area {
 margin-top: 0;
 justify-content: left;
}



/*エラー*/
.error-list.center {
 text-align: center;
}

.error-list.center ul {
 padding-left: 0;
}

.error-list ul {
 padding-left: 10px;
}

.error-list ul li {
 color: red;
 list-style: none;
 font-size: 96%;
 line-height: 20px;
}





/*form*/
input,
select,
password,
textarea {
 font-size: 15px;
 /*横幅を揃える*/
 box-sizing: border-box;
 border: 1px solid #b5b5b5;
}

/*input例文の文字色*/
::placeholder {
 color: #bbb;
}

.required {
 color: #ff6666;
}

.wdh10 {
 width: calc(100%/10) !important;
}

.wdh20 {
 width: calc(100%/5) !important;
}

.wdh30 {
 width: calc(100%/3) !important;
}

.wdh40 {
 width: calc(100%/2.5) !important;
}

.wdh50 {
 width: calc(100%/2) !important;
}

.wdh70 {
 width: calc(100%/1.42) !important;
}




/*基本の中央寄せsubmitボタンエリア*/
.submitbtn-area {
 display: flex;
 justify-content: center;
 margin-top: 30px;
}

/*基本ボタン（OK／登録）*/
.basic-btn {
 cursor: pointer;
 height: 34px;
 line-height: 34px;
 margin-left: 10px;
 margin-right: 10px;
 padding: 0 14px;
 border: none;
 background: #0e0e0e;
 color: #fff;
 border-radius: 3px;
 transition: .2s;
 min-width: 70px
}

.basic-btn:hover {
 opacity: .8;
}








/*ログイン情報エリア*/
.user-info {
 background: #fff;
 width: 90%;
 margin: 30px auto 0;
 padding: 10px 20px 9px;
 border-radius: 10px;
 box-shadow: 0 0 8px #e4e4e4;
}

.user-info p {
 margin: 0;
}

.user-info .user-who {
 padding-left: 10px;
}

.user-info .br-control {
 display: none;
}

.user-info p:before {
 font: var(--fa-font-solid);
 content: '\f2bd';
 padding-right: 6px;
}




/*横幅*/
.main-contents {
 width: 90%;
 margin: 30px auto;
 background: #fff;
 padding: 0 20px 100px 20px;
 border-radius: 10px;
 box-shadow: 0 0 8px #e4e4e4;
}

.main-contents-inner {
 padding-top: 25px;
}






/*選択条件表示エリア(画面上部)*/
.condition {
 padding-top: 10px;
 padding-bottom: 8px;
 border-bottom: 1px solid #d3d4d5;
}

.condition ul {
 padding: 0;
 margin: 6px 0;
 display: flex;
}

.condition ul li {
 list-style: none;
}

.condition ul li:before {
 content: "＞";
 font-size: 70%;
 vertical-align: 2px;
 padding-right: 4px;
}

.condition ul li:first-child:before {
 content: none;
}

.condition ul li {
 padding-right: 10px;
}














/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 #main {
  width: 100%;
 }

 h2 {
  font-size: 20px;
 }


}



@media screen and (max-width:781px) {
 h2 {
  margin-bottom: 0;
 }

 .user-info {
  box-shadow: unset;
  border-radius: unset;
  margin-top: 0;
  padding: 4px 20px 2px;
  width: unset;
  background: #ebeff2;
 }

 .main-contents {
  padding-top: 0;
  margin-top: 0;
  box-shadow: unset;
 }

 .condition {
  padding-top: 10px;
 }

 .condition ul {
  display: block;
 }

 .condition ul li:before {
  content: "├";
  padding-left: 10px;
 }

 .condition ul li:last-child:before {
  content: "└";
 }

 .condition ul li:first-child:before {
  content: none;
 }

}





@media screen and (max-width:600px) {
 .main-contents {
  padding-bottom: 60px;
  width: unset;
 }

 .h2-area a {
  padding: 4px 6px 2px;
  align-items: center;
 }

 .h2-area a:before {
  padding-right: 4px;
  font-size: 18px;
 }

 h4 {
  font-size: 18px;
 }

 .upper-area {
  display: unset;
 }

 .upper-area .left-side {
  width: 100%;
  padding-right: 0;
 }

 .upper-area .right-side {
  padding-left: 0;
  margin-top: 40px;
  border-left: none;
  width: 100%;
 }


 input,
 select,
 password,
 textarea {
  font-size: 14px;
 }

 .error-list ul {
  padding-left: 0;
 }

 .user-info .user-who {
  padding-left: 20px;
 }

 .user-info .br-control {
  display: block;
 }

}























/************************************************
 部品1：ボタンエリア01（画面右上）
************************************************/
.btn-area01 .submitbtn-area {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 margin-top: 12px;
 margin-bottom: 20px;
}

/*MY予約ボタン（ＯＦＦ）*/
.myreserve-btn input.offbtn {
 border: 2px solid #0e0e0e;
 background: #fff;
 color: #0e0e0e;
 height: 34px;
 line-height: 31px;
}

/*MY予約ボタン（ＯＮ）
.myreserve-btn input.onbtn {
 background: #03439f;
}*/

.signup-btn input {
 background: #4600ff;
}

.csv-btn input {
 /*background: #f9ba00;*/
}

/*
.memory-btn input {
 background: #009249;
}*/

.myreserve-btn input,
.signup-btn input,
.csv-btn input,
.backbtn input,
.memory-btn input {
 width: 94px;
}

.backbtn input {
 background: #abb1b7;
}

.okbtn input {
 min-width: 100px;
}

.backbtn a {
 text-decoration: none;
 min-width: 100px;
 line-height: 34px;
 display: inline-block;
 text-align: center;
 padding: 0 10px;
 background: #aaa;
}
















/******************レスポンシブ********************/
@media screen and (max-width:600px) {
 /*.btn-area01 .submitbtn-area {
  justify-content: center;
 }*/

 .myreserve-btn input,
 .signup-btn input,
 .csv-btn input,
 .backbtn input,
 .memory-btn input {
  width: 90px;
 }

 .backbtn a {
  min-width: 94px;
 }

 .okbtn input {
  min-width: 94px;
 }




}

@media screen and (max-width:400px) {

 .myreserve-btn input,
 .signup-btn input,
 .csv-btn input,
 .backbtn input,
 .memory-btn input {
  margin-left: 6px;
  margin-right: 6px;
  font-size: 14px;
 }

 /*ボタンを縦並び１００％*/
 .submitbtn-area.resp {
  /*ボタンを縦に並べる*/
  flex-direction: column;
  text-align: center;
 }

 .submitbtn-area.resp .okbtn {
  order: 1;
  width: 100%;
 }

 .submitbtn-area.resp .okbtn input {
  width: 100%;
  margin: 10px 0;
 }


 .submitbtn-area.resp .backbtn {
  width: 100%;
  order: 2;
 }

 .submitbtn-area.resp .backbtn a {
  width: 100%;
  margin: 10px 0;
  padding: 0 !important;
 }


 /*okボタンを横並び、backボタンは縦並び*/
 /*１つのokbtn内にinputが２つとも入っている場合*/
 .submitbtn-area.resp .okbtn.flexcolumn {
  display: flex;
  justify-content: space-between;
 }

 .submitbtn-area.resp .okbtn.flexcolumn input {
  width: 46%;
 }


 /*okボタンを横並び、backボタンは縦並び*/
 /*各okbtn内にinputが１つずつ入り、かつokbtnが２つある場合*/
 .submitbtn-area.resp2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
 }

 .submitbtn-area.resp2 .okbtn input {
  width: 100%;
  margin: 0;
 }

 .submitbtn-area.resp2 .backbtn {
  order: 3;
  grid-area: 2 / 1 / 3 / 3;
 }

 .submitbtn-area.resp2 .backbtn a {
  width: 100%;
  margin: 0;
  padding: 0 !important;
 }

}







/************************************************
 部品2：検索窓エリア
************************************************/
.search-area input[type="text"] {
 width: 360px;
 height: 34px;
 padding: 0 8px;
}

.search-area input[type="submit"] {
 height: 34px;
 padding: 0 14px;
 vertical-align: bottom;
 border: none;
 margin: 0 4px;
 min-width: 56px;
}




/******************レスポンシブ********************/
@media screen and (max-width:600px) {
 .search-area input[type="text"] {
  width: 78%;
 }

 .search-area input[type="submit"] {
  margin-right: 0;
 }

}


@media screen and (max-width:400px) {
 .search-area input[type="text"] {
  width: 76%;
 }


}





/************************************************
 部品3：テーブルエリア01
************************************************/
.table-area01 {
 width: 100%;
 margin: 0 auto;
 /*スクロール用*/
 overflow-x: scroll;
}

.table-area01 table {
 border-collapse: collapse;
 width: 100%;
 table-layout: fixed;
 /*スクロール用*/
 min-width: 600px;
}

.table-area01 table th,
.table-area01 table td {
 border: 1px solid #b5b5b5;
 padding: 10px;
 background: #fff;
}

.table-area01 table th {
 font-weight: normal;
 text-align: left;
 width: 44%;
}

.table-area01 table td {
 text-align: center;
}

.table-area01 a {
 text-decoration: none;
}

.table-area01 a:hover {
 text-decoration: underline;
}



/******************レスポンシブ********************/
@media screen and (max-width:991px) {}








/************************************************
 部品4：〇〇情報登録・修正
************************************************/
.regist01 {
 margin-top: 20px;
}

.required-text {
 margin-top: 30px;
 margin-left: 20px;
 margin-bottom: 4px;
 font-size: 90%;
}

.regist01 dl {
 display: flex;
}

.regist01 dt,
.regist01 dd {
 padding: 6px 0;
}

.regist01 dt {
 width: 15%;
 text-align: right;
 padding-top: 16px;
}

.regist01 dd {
 width: 80%;
 margin-left: 12px;
}

.regist01 dd.margintop {
 margin-top: 11px;
}

.form-control {
 width: 100%;
 padding: 8px;
 background: #fff;
}

/*権限*/
.regist01 dd .authority {
 width: 200px;
}

/*バース数*/
.regist01 dd.berth-quantity {
 display: flex;
 align-items: center;
}

.regist01 dd.berth-quantity span {
 padding-left: 10px;
 padding-right: 10px;
}

.regist01 .berth-quantity .b-quantity {
 width: 200px;
}




/*予約猶予*/
.regist01 dd.reserve-deferment {
 display: flex;
 align-items: center;
}

.regist01 dd.reserve-deferment p {
 white-space: nowrap;
 margin: 0 0 0 10px;
 ;
}

.regist01 dd.reserve-deferment select.r-deferment {
 width: 200px;
}









/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 .regist01 dt {
  width: 16%;
 }

}


@media screen and (max-width:781px) {
 .regist01 dt {
  width: 20%;
 }



}


@media screen and (max-width:600px) {
 .required-text {
  margin-left: 0;
 }

 .regist01 dl {
  display: block;
  margin-bottom: 22px;
 }

 .regist01 dt,
 .regist01 dd {
  padding: 0;
 }

 .regist01 dt {
  width: 100%;
  text-align: left;
  margin-bottom: 4px;
 }

 .regist01 dt:before {
  content: "- ";
 }

 .regist01 dd {
  width: 100%;
  margin-left: 0;
 }

 .regist01 dd .authority {
  width: inherit;
 }

 .regist01 .berth-quantity .b-quantity {
  width: inherit;
 }

 .regist01 dd.reserve-deferment select.r-deferment {
  width: 100px;
 }



}






/************************************************
 部品5：ラジオボタン　〇〇選択
************************************************/
.radiobtn-list01 table {
 width: 100%;
 table-layout: fixed;
 display: grid;
 margin: 0 auto;
}

.radiobtn-list01 table tr {
 display: flex;
 flex-wrap: wrap;
}

.radiobtn-list01 table td {
 border: 1px solid #b5b5b5;
 width: calc(96% / 3);
 height: auto;
 min-height: 48px;
 /*borderの重なり対策*/
 margin: 0 0 -1px -1px;
 line-height: 1.1;
 padding: 4px;
 /*ラジオボタン位置調整用*/
 position: relative;
}

.radiobtn-list01 table td label {
 display: flex;
 overflow-wrap: anywhere;
 cursor: pointer;
}

.radiobtn-list01 table input {
 /*ラジオボタン位置調整用*/
 position: absolute;
 top: 4px;
 left: 2px;
}

.radiobtn-list01 table span {
 /*ラジオボタン位置調整用*/
 position: absolute;
 top: 6px;
 left: 26px;
}


/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 .radiobtn-list01 table td {
  width: calc(96% / 2);
 }

}


@media screen and (max-width:600px) {
 .radiobtn-list01 table td {
  width: calc(100% / 1);
 }

}

@media screen and (max-width:400px) {
 .radiobtn-list01 table input {
  top: 3px;
 }

}




/************************************************
 部品6：チェックボックス　〇〇一覧
************************************************/
.checkbox-list01 table {
 width: 100%;
 table-layout: fixed;
 display: grid;
 margin: 0 auto;
}

.checkbox-list01 table tr {
 display: flex;
 flex-wrap: wrap;
}

.checkbox-list01 table td {
 border: 1px solid #b5b5b5;
 width: calc(96% / 3);
 height: auto;
 min-height: 52px;
 /*borderの重なり対策*/
 margin: 0 0 -1px -1px;
 line-height: 1.1;
 padding: 4px;
 /*ラジオボタン位置調整用*/
 position: relative;
}

.checkbox-list01 table td label {
 display: flex;
 overflow-wrap: anywhere;
 cursor: pointer;
}

.checkbox-list01 table input {
 /*ラジオボタン位置調整用*/
 position: absolute;
 top: 4px;
 left: 2px;
}

.checkbox-list01 table span {
 /*ラジオボタン位置調整用*/
 position: absolute;
 top: 6px;
 left: 26px;
}


/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 .checkbox-list01 table td {
  width: calc(96% / 2);
 }

}


@media screen and (max-width:600px) {
 .checkbox-list01 table td {
  width: calc(100% / 1);
 }

}

@media screen and (max-width:400px) {
 .checkbox-list01 table input {
  top: 3px;
 }

}





/************************************************
  部品7：ボタンエリア02（左寄せボタン）
************************************************/
.btn-area02 {
 margin-top: 20px;
 margin-bottom: 16px;
}

.btn-area02 input[type="submit"] {
 background: #1b9000;
 margin-left: 0;
 padding: 6px 20px;
 border-radius: 10px;
 outline: 1px solid #FFFFFF;
 outline-offset: -3px;
}


/******************レスポンシブ********************/
@media screen and (max-width:600px) {
 .btn-area02 input[type="submit"] {
  padding: 6px 16px;
 }
}


@media screen and (max-width:400px) {
 .btn-area02 input[type="submit"] {
  padding: 6px 14px;
 }
}







/************************************************
 部品8：テーブルエリア02
************************************************/
.table-area02 {
 width: 100%;
 margin: 0 auto;
 /*スクロール用*/
 /*overflow-x: scroll;*/
}

.table-area02 table {
 border-collapse: collapse;
 width: 100%;
 table-layout: fixed;
 /*スクロール用*/
 /*min-width: 600px;*/
}

.table-area02 table th,
.table-area02 table td {
 border: 1px solid #b5b5b5;
 padding: 10px;
 background: #fff;
}

.table-area02 table th {
 font-weight: normal;
 text-align: left;
 width: 44%;
}

.table-area02 table td {
 text-align: center;
 width: 10%;
}

.table-area02 a {
 text-decoration: none;
}

.table-area02 a:hover {
 text-decoration: underline;
}



/******************レスポンシブ********************/
@media screen and (max-width:991px) {}









/************************************************
 部品9：テーブルエリア03
************************************************/
.table-area03 {
 width: 100%;
 margin: 0 auto;
 /*スクロール用*/
 overflow-x: scroll;

}

.table-area03 table {
 border-collapse: collapse;
 width: 100%;
 table-layout: fixed;
 /*スクロール用*/
 min-width: 600px;

}

.table-area03 table th,
.table-area03 table td {
 border: 1px solid #b5b5b5;
 padding: 6px 12px;
 background: #fff;
}

.table-area03 table th {
 text-align: center;
 background: #42649c;
 color: #fff;
}

.table-area03 table th:first-child,
.table-area03 table th:nth-child(2),
.table-area03 table td:first-child,
.table-area03 table td:nth-child(2) {
 width: 32%;
}

.table-area03 table th:nth-child(3),
.table-area03 table th:last-child,
.table-area03 table td:nth-child(3),
.table-area03 table td:last-child {
 width: 10%;
}

.table-area03 table td:nth-child(3),
.table-area03 table td:last-child {
 text-align: center;
}

.table-area03 a {
 text-decoration: none;
}

.table-area03 a:hover {
 text-decoration: underline;
}




/******************レスポンシブ********************/
@media screen and (max-width:991px) {}








/************************************************
 部品10：テーブルエリア04
************************************************/
.table-area04 {
 margin-bottom: 50px;
}

.table-area04 .date-celect-area {
 display: flex;
 align-items: center;
 margin-top: 20px;
 margin-bottom: 30px;
}

.table-area04 .date-celect-area .date-celect {
 white-space: nowrap;
}

.table-area04 .date-celect-area input[type="date"] {
 height: 34px;
 width: 220px;
 padding: 4px;
}

.table-area04 .date-celect-area input[type="submit"] {
 margin-left: 4px;
}

.table-area04 .before-after {
 margin-left: 20px;
}


.table-area04 .before-after input[type="submit"] {
 transition: .3s;
 min-width: 60px;
 padding-left: 0;
 padding-right: 0;
 margin-right: 4px;
}

/*
.table-area04 .before-after input[type="submit"]:hover {
 opacity: .7;
}*/


.table-area04 ul {
 display: flex;
 flex-wrap: wrap;
 padding: 0;
 margin-bottom: 30px;
}

.table-area04 ul li {
 list-style: none;
 padding: 10px 0;
}

.table-area04 ul li a {
 background: #dfdfdf;
 padding: 2px 6px;
 margin-right: 20px;
 text-decoration: none;
 border-radius: 3px;
 color: #333;
 transition: .3s;
 border: 1px solid #a5a1a1;
}

.table-area04 ul li a:hover {
 opacity: .9;
}


.table-area04 .explan {
 margin-bottom: 10px;
 padding-right: 20px;
}

.table-area04 .explan li {
 display: flex;
 align-items: center;
 width: 100%;
 padding: 0;
}

.table-area04 .explan .exabox01,
.table-area04 .explan .exabox02,
.table-area04 .explan .exabox03,
.table-area04 .explan .exabox04,
.table-area04 .explan .exabox05 {
 display: inline-block;
 width: 14px;
 height: 14px;
 border: 1px solid #b5b5b5;
}

.table-area04 .explan .exabox01 {
 background: #ddd;
}

.table-area04 .explan .exabox02 {
 background: #fffed0;
}

.table-area04 .explan .exabox03 {
 background: #d2f0ff;
}

.table-area04 .explan .exabox04 {
 background: #ffd6d1;
}

.table-area04 .explan .exabox05 {
 background: #d1ffd8;
}

.table-area04 .explan i {
 color: #0000ee;
}



.table-area04 .table-wrap {
 overflow-x: scroll;

 overflow-y: scroll;
 height: 500px;
}

.table-area04 table {
 border: 1px solid #b5b5b5;
 border-collapse: collapse;
 background: #fff;
 min-width: 260px;
 font-size: 96%;

}

/***お試し中**/
.table-area04 table tbody {
 position: relative;
 top: 0;
 left: 0;
}

.table-area04 table tr.first-line {
 z-index: 2;
 position: sticky;
}

.table-area04 table td {
 text-align: center;
 line-height: 16px;
 border: 0.8px solid #b5b5b5;
 border-right: 1.5px solid #b5b5b5;
 padding: 4px 6px;

 /*列幅固定*/
 max-width: 180px;
 min-width: 180px;
}

.table-area04 table td:first-child {
 /*タイトル列固定*/
 position: sticky;
 top: 0;
 left: 0;
 background: #e3e1f7;
 min-width: 80px;
 z-index: 1;
}

.table-area04 table td:first-child::before {
 /*横スクロールでborderが消えるため設定*/
 content: "";
 position: absolute;
 top: -1px;
 left: -1px;
 width: 100%;
 height: 100%;
 border: 1px solid #b5b5b5;
 /*横スクロールすると線が薄くなるため対策*/
 border-left: 1.5px solid #b5b5b5;
}

.table-area04 tr:first-child td {
 /*タイトル行*/
 position: sticky;
 top: 0;
 left: 0;
 background: #3f3a85;
 color: #fff;
 height: 20px;
}

.table-area04 tr:first-child td::before {
 /*縦スクロールでborderが消えるため設定*/
 content: "";
 position: absolute;
 top: -1px;
 left: -1px;
 width: 100%;
 height: 100%;
 border: 1px solid #b5b5b5;
 /*縦スクロールすると線が薄くなるため対策*/
 border-top: 1.5px solid #b5b5b5;
}

/*データ有で背景に色*/
.table-area04 table td.booking {
 background: #fffed0;
 vertical-align: top;
}

.table-area04 table td .td-wrapper {
 /*文字横並び*/
 display: flex;
 justify-content: space-between;
}

.table-area04 table td i {
 padding-left: 2px;
 padding-right: 2px;
 transition: .3s;
}

.table-area04 table td i:hover {
 opacity: .6;
}

/*00セルの重なり*/
.table-area04 .berth-cell {
 z-index: 9999;
}















/*モーダルを開くボタン*/
.table-area04 .booking2 {
 background: #fffed0;
 vertical-align: top;
 padding: 5px 4px 0 4px;
 transition: .3s;
 position: relative;
 font-size: 14px;
 white-space: nowrap;
}

.table-area04 .booking2:hover {
 background: #fbfaae;
 box-shadow: 0 0 0 2px #eeedb6 inset;
}

[class^="modal-open"] {
 /* ↑ classの前方一致の書き方（連番のため）*/
 width: 100%;
 height: 100%;
 cursor: pointer;
 /*↓ 親要素tdに対してこのposition設定をしないと
 firefoxではセルの全体選択が効かなくなる*/
 position: absolute;
 top: 0;
 left: 0;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
[class^="modal-container"] {
 /* ↑ classの前方一致の書き方（連番のため）*/
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 background: rgba(0, 0, 0, 50%);
 padding: 100px 20px 40px;
 overflow: auto;
 opacity: 0;
 visibility: hidden;
 transition: .3s;
 box-sizing: border-box;
}

/*モーダル本体の擬似要素の指定
.table-area04 td.booking2 .modal-container:before {
 content: "";
 display: inline-block;
 vertical-align: middle;
 height: 100%;
}*/

/*モーダル本体に「active」クラス付与した時のスタイル*/
[class^="modal-container"].active {
 /* ↑ classの前方一致の書き方（連番のため）*/
 opacity: 1;
 visibility: visible;
 z-index: 2;
}

/*モーダル枠の指定*/
.booking2 .modal-body {
 position: relative;
 display: inline-block;
 vertical-align: middle;
 min-width: 260px;
 max-width: 600px;
}

/*モーダルを閉じるボタンの指定*/
[class^="modal-close"] {
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
 top: -12px;
 right: -4px;
 width: 26px;
 height: 26px;
 font-size: 20px;
 color: #ffffff;
 cursor: pointer;
 background: #000000;
 border-radius: 50%;
}

/*以下、モーダル内のコンテンツの指定*/
.booking2 .modal-content {
 background: #fff;
 text-align: left;
 padding: 14px;
 margin: 0 10px;
}

.booking2 .modal-content ul {
 display: block;
 margin: 0;
}

.booking2 .modal-content ul li {
 padding: 4px 0;
 display: flex;
 white-space: normal;
}

.booking2 .modal-content ul li span:first-child {
 white-space: nowrap;
}

.booking2 .modal-content .submitbtn-area {
 margin-top: 20px;
 margin-bottom: 10px;
}







.booking3 {
 color: #555;
 vertical-align: top;

 /*aタグ全体をクリックさせるための記述*/
 overflow: hidden;

 outline: .9px solid #b5b5b5;
 outline-offset: 0px;
}

.booking3 a {
 background: #fffed0;
 white-space: nowrap;
 text-decoration: none;
 color: #000;

 /*aタグ全体をクリックさせるための記述*/
 /*marginとpadding左右をtdの幅に合わせて±抜きで同じにする*/
 /*親要素でoverflow:hiddenではみ出したところを非表示*/
 margin: -300px;
 padding: 2000px 300px;
}

.modaal-container {
 max-width: 500px;
 min-width: 270px;
}

.modaal-content-container ul {
 padding: 0;
 margin: 0;
}

.modaal-content-container ul li {
 list-style: none;
 padding-bottom: 6px;
}

.modaal-content-container {
 padding: 24px;
}

.modaal-content-container .submitbtn-area.permit {
 margin: 0 0 10px 0;
 justify-content: right;
}

.modaal-content-container .submitbtn-area.permit input {
 margin-right: 0;
 background: #4600ff;
}

.modaal-content-container table {
 width: 100%;
 border-collapse: collapse;
}

.modaal-content-container table th,
.modaal-content-container table td {
 padding: 2px 6px;
 border: 1px solid #555;

}

.modaal-content-container table th {
 width: 28%;
 font-weight: normal;
 text-align: center;
 background: #eee;
}

.modaal-content-container table td {
 line-height: 16px;
}

.modaal-content-container span {
 padding-left: 4px;
 padding-right: 4px;
}

.modaal-content-container .submitbtn-area.command {
 margin-top: 10px;
 justify-content: right;
}

.modaal-content-container .submitbtn-area.command input {
 margin-right: 0;
 margin-left: 20px;
}

.modaal-close:before,
.modaal-close:after {
 background: #cbcbcb;
}

.modaal-content-container .extend {
 display: flex;
 align-items: center;
 justify-content: space-around;
 margin: 8px;
}

.modaal-content-container .extend .submitbtn-area {
 margin-top: 0;
}

.modaal-content-container .extend .submitbtn-area input {
 min-width: 70px;
 margin: 0;
}

.modaal-content-container .extend span {
 padding: 0 10px 0 4px;
 ;
}

.modaal-content-container p {
 color: red;
 font-size: small;
 margin-bottom: 6px;
}


/*
.modaal-overlay {
 opacity: 0.6 !important;
}
*/


.booking3.category01,
.booking3.category01 a {
 background: #ddd;
}

.booking3.category02,
.booking3.category02 a {
 background: #fffed0;
}

.booking3.category03,
.booking3.category03 a {
 background: #d2f0ff;
}

.booking3.category04,
.booking3.category04 a {
 background: #ffd6d1;
}

.booking3.category05,
.booking3.category05 a {
 background: #d1ffd8;
}

.booking3.category02 a:hover,
.booking3.category03 a:hover,
.booking3.category04 a:hover,
.booking3.category05 a:hover {
 filter: saturate(180%);
}

.booking3.category01 a:hover {
 filter: contrast(90%);
}

/******************レスポンシブ********************/
@media screen and (max-width:600px) {
 .table-area04 .date-celect-area input[type="date"] {
  width: 80%;
 }

 .table-area04 .date-celect-area {
  display: block;
  text-align: center;
 }

 .table-area04 .before-after {
  margin-top: 20px;
  margin-left: 0;
 }

 .table-area04 .explan {
  justify-content: center;
  padding-right: 0;
 }

 .table-area04 .table-wrap {
  height: 300px;
 }


}



@media screen and (max-width:400px) {
 .table-area04 .date-celect-area input[type="date"] {
  width: 70%;
 }

 .table-area04 table td.berth-cell {
  font-size: 80%;
 }

 .table-area04 table td:first-child {
  min-width: 60px;
 }


 /*.table-area04 table td {
    width: 160px;
  min-width: 160px;
 }
*/

 .table-area04 td.booking2 {
  font-size: 13px;
 }

 .table-area04 td.booking2 .modal-content ul li {
  font-size: 90%;
 }

 .table-area04 td.booking2 .modal-content .submitbtn-area input {
  font-size: 90%;
  width: 80%;
 }

 /*booking3のモーダル*/
 .modaal-content-container {
  padding: 20px;
 }


}




/************************************************
 部品11：テーブルエリア05
************************************************/
.table-area05 .table-wrap {
 overflow-x: scroll;
 overflow-y: scroll;
}

.table-area05 table {
 border: 1px solid #b5b5b5;
 border-collapse: collapse;
 background: #fff;
 min-width: 260px;
}

.table-area05 table th {
 /*タイトル列固定*/
 position: sticky;
 top: 0;
 left: 0;
 background: #e3e1f7;
 min-width: 90px;
 z-index: 1;
}

.table-area05 table th::before {
 /*横スクロールでborderが消えるため設定*/
 content: "";
 position: absolute;
 top: -1px;
 left: -1px;
 width: 100%;
 height: 100%;
 border: 1px solid #b5b5b5;
 /*横スクロールすると線が薄くなるため対策*/
 border-left: 1.5px solid #b5b5b5;
}



.table-area05 table td {
 text-align: center;
 line-height: 20px;
 border: 0.8px solid #b5b5b5;
 border-right: 1.5px solid #b5b5b5;
 padding: 4px 6px;

 /*列幅固定*/
 width: 180px;
 min-width: 180px;
}

.table-area05 tr:first-child td::before {
 /*横スクロールでborderが消えるため設定*/
 content: "";
 position: absolute;
 top: -1px;
 left: -1px;
 width: 100%;
 height: 100%;
 border: 1px solid #b5b5b5;
 /*横スクロールすると線が薄くなるため対策*/
 border-top: 1.5px solid #b5b5b5;
}

.table-area05 tr:first-child td {
 /*タイトル行*/
 position: sticky;
 top: 0;
 left: 0;
 background: #3f3a85;
 color: #fff;
 height: 20px;
}

.table-area05 table td.in-car {
 background: #ffe9dc;
}

/*太い下線*/
.table-area05 .boldline {
 border-bottom: 1.5px solid #b5b5b5;
}

.table-area05 table td.boldline:before {
 border-bottom: 1.5px solid #b5b5b5;
}




/******************レスポンシブ********************/
@media screen and (max-width:400px) {
 .table-area05 table th {
  min-width: 70px;
 }

 .table-area05 table td {
  width: 180px;
  min-width: 180px;
 }


}






/************************************************
 部品12：ステータスチェック
************************************************/
.outer-frame {
 border: 1px solid #333;
 padding: 10px;
 margin-bottom: 30px;
}

.status-check-area .submitbtn-area {
 margin-top: 40px;
 margin-bottom: 40px;
}

.status-check-area .submitbtn-area input {
 margin-left: 30px;
 margin-right: 30px;
 width: 300px;
}

.status-check01 table {
 width: 100%;
 margin: 30px auto;
}

.status-check01 table td {
 padding: 10px;
 display: table-cell;
 font-size: 18px;
 font-weight: bold;
 vertical-align: top;
}

.status-check01 table td span {
 font-size: 15px;
}

.status-check01 .warning-mark {
 padding-right: 6px;
}

.status-check01 table td:first-child {
 width: 45%;
 text-align: right;
}

.status-check01 table td:nth-child(2) {
 width: 10%;
 text-align: center;
}

.status-check01 table td:last-child {
 width: 45%;
}

.status-check01 .abnormal {
 color: red;
}

.status-check01 .resume {
 justify-content: right;
}

.status-check01 .resume input {
 background: #4600ff;
 /*padding: 6px 20px;
 border-radius: 10px;
 outline: 1px solid #FFFFFF;
 outline-offset: -3px;*/
 width: inherit;
 /* text-shadow: 0 0 1px #e59400,
 0 0 2px #e59400,
 1px 2px 6px #e59400,
 1px 2px 6px #e59400;
 */
 letter-spacing: 1.2px;
}

.status-check03 .table-area05 {
 margin: 0 20px 30px 20px;
}




/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 .status-check01 table td {
  padding-left: 0;
  padding-right: 0;
 }

 .status-check03 .table-area05 {
  margin: 0 10px 30px 10px;
 }


}


/******************レスポンシブ********************/
@media screen and (max-width:781px) {
 .status-check01 table td {
  font-size: 16px;
 }

 .status-check01 table td span {
  font-size: 14px;
 }

 .status-check-area .submitbtn-area input {
  margin-left: 20px;
  margin-right: 20px;
  width: 220px;
 }

 .status-check01 .resume input {
  width: inherit;
 }



}



@media screen and (max-width:600px) {
 .status-check-area .submitbtn-area {
  margin-top: 30px;
  margin-bottom: 30px;
 }

 .status-check-area .submitbtn-area input {
  width: inherit;
 }

 .status-check01 .resume input {
  width: inherit;
 }


 .status-check01 table td {
  font-weight: normal;
 }


}



@media screen and (max-width:400px) {
 .status-check-area .stock {
  display: block;
  text-align: center;
 }

 .status-check-area .submitbtn-area input {
  width: 220px;
 }

 .status-check01 .resume input {
  width: inherit;
 }


 .status-check-area .stock input {
  margin-bottom: 20px;
 }

}






/************************************************
 部品13：テーブルエリア06
************************************************/
.car-number-area p.text {
 margin-bottom: 0;
}

.car-number-area p.att-text {
 font-size: 90%;
 margin: 4px 0 30px 14px;
}

.car-number-area p.att-text br {
 display: none;
}

.car-number-area .car-number {
 display: flex;
 justify-content: center;
}

.car-number-area dl {
 margin: 0 10px 0 10px;
 width: 100%;
}

.car-number-area dl:first-child {
 margin-left: 0;
}

.car-number-area dl:last-child {
 margin-right: 0;
}

.car-number-area dt {
 /* text-align: center;*/
 font-weight: bold;
}

.car-number-area dd {
 margin: 0;
}

.car-number-area dd input {
 /* text-align: center;
 */
}

.car-number-area .submitbtn-area {
 margin-top: 40px;
}

.car-number-area .regist-car-area {
 margin-top: 50px;
}

.car-number-area .regist-car-area .outer-frame {
 padding: 20px 10px 20px 30px;
 overflow-y: scroll;
 height: 400px;
}

.car-number-area .regist-car-area ul {
 display: flex;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
}

.car-number-area .regist-car-area li {
 list-style: none;
 padding: 8px 30px 8px 0;
}

.unsou-select {
 margin: 40px 0 60px 0;
}

.unsou-select p {
 font-weight: bold;
}

.unsou-select div {
 margin: 2px 20px 0 0;
}




/******************レスポンシブ********************/
@media screen and (max-width:781px) {
 .car-number-area p.att-text .br-control01 {
  display: block;
 }

 .car-number-area dl {
  margin: 0 5px 0 5px;
 }

 .car-number-area dd input {
  padding-left: 2px;
  padding-right: 2px;
 }

 .unsou-select div {
  margin-right: 10px;
 }



}


@media screen and (max-width:600px) {
 .car-number-area p.att-text {
  margin-left: 6px;
 }

 .car-number-area p.att-text .br-control02 {
  display: block;
 }

 .car-number-area p.att-text span {
  padding-left: 13px;
 }

 .car-number-area dl {
  margin: 0 3px 0 3px;
 }

 .unsou-select div {
  margin-right: 0;
 }

 .unsou-select select {
  width: 100% !important;
 }



}



@media screen and (max-width:400px) {
 .car-number-area dl {
  margin: 0 -1px 0 0;
 }

}










/************************************************
 部品14：ログ情報確認
************************************************/
.log-info-area .day-select {
 display: flex;
 width: 70%;
 margin: 20px auto;
}

.log-info-area .day-select span {
 padding: 8px 10px 0;
}

.log-info-area ul {
 display: flex;
 flex-wrap: wrap;
 padding: 0;
 justify-content: center;
}

.log-info-area li {
 list-style: none;
 padding: 10px 30px;
}

.log-info-area .facility {
 width: 70%;
 margin: 20px auto;
}

.log-info-area .log-list {
 margin-top: 50px;
}

.log-info-area .log-list .outer-frame {
 min-height: 200px;
 padding: 20px;
}


#loginfo-02 .page-turn {
 text-align: center;
 text-decoration: none;
}





/******************レスポンシブ********************/
@media screen and (max-width:600px) {
 .log-info-area .day-select {
  width: 100%;
 }

 .log-info-area ul {
  justify-content: space-around;
 }

 .log-info-area li {
  padding: 0;
 }

 .log-info-area .facility {
  width: 100%;
 }


}



@media screen and (max-width:400px) {
 .log-info-area ul {
  display: block;
 }

 .log-info-area li {
  padding: 4px 0 4px 4px;
 }




}









/************************************************
 部品15：table-area06
************************************************/
.table-area06 table {
 border-collapse: collapse;
 width: 100%;
 margin: 0 auto;
}

.table-area06 table tr {
 border-top: 1px dotted #b5b5b5;
}

/*.table-area06 table tr:last-child {
 border-bottom: 1px dotted #b5b5b5;
}*/


.table-area06 table th,
.table-area06 table td {
 padding: 16px;
 text-align: left;
}

.table-area06 table th {
 white-space: nowrap;
 width: 20%;
}

.table-area06 table td span {
 padding: 8px 10px 0;
 display: inline-block;
 font-size: 90%;
}

/*２つのセレクトボックスを折り返しさせない*/
.table-area06 table td.nowrap-td {
 display: flex;
 align-items: baseline;
}

.table-area06 table tr:last-child td {
 padding-bottom: 0;
}


/*営業時間*/
.table-area06 input[type="checkbox"] {
 margin-right: 8px;
}

.table-area06 .ope-time-area {
 display: flex;
 align-items: center;
 margin-top: 10px;
}

.table-area06 .ope-time-area span {
 padding-left: 10px;
 padding-right: 10px;
}

.table-area06 .ope-time-area .disabled-bg {
 background: #eee;
 color: gray;
}





/*予約猶予*/
.table-area06 .reserve-deferment {
 display: flex;
 align-items: center;
}

.table-area06 .reserve-deferment p {
 white-space: nowrap;
 margin: 0 0 0 10px;
}


/*管理番号*/
.table-area06 .ctrl-number {
 display: flex;
}

.table-area06 .ctrl-number input {
 margin-right: 10px;
}



/*車両ナンバー２（テキストボックスでの入力バージョン）*/
.table-area06 .carnumber-text {
 display: flex;
}

.table-area06 .carnumber-text div {
 margin-right: 10px;
}

.table-area06 .carnumber-text div:last-child {
 margin-right: 0;
}

.table-area06 .carnumber-text div p {
 /* text-align: center;*/
 margin: 0;
 font-weight: bold;
}

.table-area06 .carnumber-text div input {
 /* text-align: center;*/
}

/*（確認画面　jqueryでclass付与）*/
.table-area06 .carnumber-text.inspect {
 justify-content: center;
}

.table-area06 .carnumber-text.inspect div {
 width: 100%;
}

.table-area06 .carnumber-text.inspect .inspect-item {
 font-weight: normal;
 border: 1px solid #ddd;
 padding: 6px;
 background: #eee;
 color: #888;
}



/*注意点*/
.table-area06 span.att {
 padding-right: 0;
}

.table-area06 span.att .br-control {
 display: none;
}



/******************レスポンシブ********************/
@media screen and (max-width:781px) {
 .table-area06 span.att .br-control {
  display: block;
 }

}



@media screen and (max-width:600px) {

 .table-area06 table th,
 .table-area06 table td {
  display: block;
  padding: 10px 0 16px;
 }

 .table-area06 table th {
  padding-bottom: 4px;
 }

 .table-area06 table td {
  padding-top: 0;
 }

 .table-area06 .wdh30,
 .table-area06 .wdh40,
 .table-area06 .wdh50,
 .table-area06 .wdh70 {
  width: 100% !important;
 }

 .table-area06 .ope-time-area input.ope-time {
  width: 100%;
 }

 .table-area06 .ctrl-number input {
  width: 70% !important;
 }

 .table-area06 .ctrl-number select {
  width: 30% !important;
 }

}


@media screen and (max-width:400px) {
 .table-area06 .carnumber-text div {
  margin-right: -1px;
 }

 .table-area06 .carnumber-text div input {
  padding-left: 2px;
  padding-right: 0;
 }

}











/************************************************
 部品16：table-area07
************************************************/
.table-area07 {
 width: 100%;
 margin: 0 auto;
 /*スクロール用*/
 overflow-x: scroll;

}

.table-area07 table {
 border-collapse: collapse;
 /*スクロール用*/
 white-space: nowrap;
 width: 100%;
}

.table-area07 table th,
.table-area07 table td {
 border: 1px solid #b5b5b5;
 padding: 4px 10px;
}

.table-area07 table th {
 background: #e4e4e4;
 font-weight: normal;
 padding: 2px 10px;
}

.table-area07 table th:first-child {
 /*ラジオボタンセルの幅固定*/
 width: 22px;
}

.table-area07 table td {
 height: 30px;
}






/************************************************
 部品17：ラジオボタン
************************************************/
.radiobtn-list02 .outer-frame {
 overflow-y: scroll;
 height: 300px;
 padding: 20px 0 20px 10px;
 margin: 14px auto;
}

.radiobtn-list02 table {
 width: 100%;
 table-layout: fixed;
 display: grid;
 margin: 0 auto;
}

.radiobtn-list02 table tr {
 display: flex;
 flex-wrap: wrap;
}

.radiobtn-list02 table td {
 width: calc(96% / 3);
 height: auto;
 min-height: 30px;
 white-space: nowrap;
 font-size: 98%;
 letter-spacing: -1.4px;
 /*borderの重なり対策*/
 margin: 0 0 -1px -1px;
 line-height: 1.1;
 padding: 4px;
 /*ラジオボタン位置調整用*/
 position: relative;
}

.radiobtn-list02 table td label {
 display: flex;
 overflow-wrap: anywhere;
 cursor: pointer;
}

.radiobtn-list02 table input {
 /*ラジオボタン位置調整用*/
 position: absolute;
 top: 4px;
 left: 0;
}

.radiobtn-list02 table span {
 /*ラジオボタン位置調整用*/
 position: absolute;
 top: 6px;
 left: 20px;
}


/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 .radiobtn-list02 table td {
  width: calc(96% / 2);
 }

}


@media screen and (max-width:500px) {
 .radiobtn-list02 table td {
  width: calc(100% / 1);
 }

}

@media screen and (max-width:400px) {
 .radiobtn-list02 table input {
  top: 3px;
 }

}








/************************************************
 ヘルプページ
************************************************/
#help-page .main-contents {
 width: 70%;
 margin: 30px auto;
 padding: 0 30px;
}

#help-page .main-contents:last-child {
 margin-bottom: 100px;
}


#help-page article {
 padding-bottom: 40px;
 padding-top: 20px;
}

#help-page section {
 margin-bottom: 40px;
}

#help-page section section,
#help-page section section section {
 margin-left: 1em;
}


#help-page article section:last-child,
#help-page article section section:last-child {
 margin-bottom: 0;
}

#help-page h3 {
 font-size: 22px;
 margin-bottom: 24px;
 margin-top: 20px;
 /* background: #e5e5e5;
 */
 padding: 10px 10px 8px 8px;
}

#help-page h4 {
 font-size: 20px;
 font-weight: bold;
 margin-bottom: 2px;
 margin-top: 30px;
}

#help-page h4:before {
 font: var(--fa-font-solid);
 content: '\f0da';
 padding-right: 6px;
 color: #3f3a85;
}

#help-page h5 {
 font-size: 17px;
 margin-top: 16px;
 margin-bottom: 4px;
}

#help-page h5:before {
 font: var(--fa-font-regular);
 content: '\f111';
 padding-right: 4px;
 color: #3f3a85;
 font-size: 9px;
 vertical-align: 3px;
 font-weight: bold;
}

#help-page p {
 margin-top: 10px;
 margin-bottom: 10px;
}

#help-page .red {
 color: red;
}

#help-page .blue {
 color: blue;
}

#help-page .bold {
 font-weight: bold;
}

#help-page .line {
 text-decoration: underline;
 text-underline-offset: 4px;
 text-decoration-thickness: .8px;
}

#help-page .wavy {
 text-decoration: underline;
 text-decoration-style: wavy;
 text-underline-offset: 4px;
 text-decoration-thickness: 1px;
}

#help-page .double {
 text-decoration: underline;
 text-decoration-style: double;
 text-underline-offset: 4px;
 text-decoration-thickness: 1px;
}

#help-page .b-marker {
 background-color: rgba(181, 218, 255, 0.5);
 padding-left: 3px;
 padding-right: 3px;
}

#help-page .p-marker {
 background-color: rgba(255, 200, 181, 0.5);
 padding-left: 3px;
 padding-right: 3px;
}

#help-page .y-marker {
 background-color: rgba(250, 255, 181, 0.9);
 padding-left: 3px;
 padding-right: 3px;
}

#help-page .g-marker {
 background-color: rgba(185, 255, 181, 0.5);
 padding-left: 3px;
 padding-right: 3px;
}

#help-page .small {
 font-size: small;
 margin: 8px 0;
}

#help-page span.annotation {
 font-size: 0.8em;
 vertical-align: super;
 font-weight: bold;
 background: #ddd;
 padding: 0 2px;
 border-radius: 4px;
 margin-left: 2px;
 margin-right: 2px;
}

#help-page .help-table02,
#help-page .help-table03 {
 overflow-x: scroll;
 margin: 10px 0;
}

#help-page .help-table01 table,
#help-page .help-table02 table,
#help-page .help-table03 table {
 border-collapse: collapse;
}

#help-page .help-table01 th,
#help-page .help-table01 td,
#help-page .help-table02 th,
#help-page .help-table02 td,
#help-page .help-table03 th,
#help-page .help-table03 td {
 border: 1px solid #bbb;
}


#help-page .help-table01 th {
 min-width: 100px;
 max-width: 200px;
 background: #eee;
 padding: 6px 10px;
}

#help-page .help-table01 td {
 line-height: 20px;
 background: #fff;
 padding: 6px 10px;
}

#help-page .help-table02 th {
 min-width: 100px;
 max-width: 300px;
 background: #eee;
 padding: 4px 6px 2px;
}

#help-page .help-table02 td {
 background: #fff;
 min-width: 100px;
 max-width: 300px;
 text-align: center;
 padding: 4px 6px 2px;
}

#help-page .help-table03 th {
 min-width: 100px;
 max-width: 300px;
 background: #eee;
 padding: 4px 8px 2px;
}

#help-page .help-table03 td {
 background: #fff;
 min-width: 100px;
 max-width: 300px;
 text-align: center;
 padding: 4px 6px 2px;
}

#help-page .help-table03 td:first-child {
 min-width: 50px;
 max-width: 200px;
 background: #f8f8f8;
 font-weight: bold;
 text-align: center;
}

#help-page ul {
 padding-left: 20px;
 margin: 10px;
 list-style-type: square;
}

#help-page ol {
 padding-left: 20px;
 margin: 10px 0;
}

#help-page ul li,
#help-page ol li {
 padding: 4px 0;
 line-height: 20px;
}

#help-page ul li::marker,
#help-page ol li::marker {
 color: #3f3a85;
 font-weight: bold;
}

#help-page ul ul {
 padding-left: 20px;
 margin: 10px 0;
 list-style-type: circle;
}

#help-page ul ul ul {
 padding-left: 20px;
 margin: 10px 0;
 list-style-type: disc;
}

#help-page dl {
 margin: 10px 0;
}

#help-page dt {
 font-weight: bold;
 margin-top: 20px;
}

#help-page dd {
 margin-bottom: 10px;
 margin-left: 1em;
 margin-top: 2px;
}

#help-page dd img {
 margin-top: 10px;
 margin-bottom: 10px;
}


#help-page dl.q-a {
 margin-left: 20px;
 margin-right: 20px;
}

#help-page dl.q-a dt {
 margin: 14px;
}

#help-page dl.q-a dt:before {
 font: var(--fa-font-solid);
 content: '\51';
 padding: 5px 7px;
 margin-right: 2px;
 color: #fff;
 background: #3f3a85;
 border-radius: 50%;
 display: inline-block;
 border: 1px solid #3f3a85;
}

#help-page dl.q-a dd {
 margin: 14px;
}

#help-page dl.q-a dd:before {
 font: var(--fa-font-solid);
 content: '\41';
 padding: 5px 7px;
 margin-right: 6px;
 color: #3f3a85;
 background: #fff;
 border-radius: 50%;
 display: inline-block;
 border: 2px solid #3f3a85;
}

#help-page dl.q-a img {
 margin-top: 10px;
 margin-bottom: 10px;
}



#help-page img {
 width: 100%;
}

#help-page .calc-flex {
 display: flex;
}

#help-page .calc50 {
 width: calc(100% / 2);
}

#help-page .calc33 {
 width: calc(100% / 3);
}

#help-page .calc66 {
 width: calc(100% / 3 *2);
}

#help-page .calc-flex [class^="calc"] {
 margin-top: 6px;
 margin-bottom: 6px;
 height: auto;
}

#help-page .calc-flex [class^="calc"]:first-child {
 margin-right: 20px;
}

#help-page .frame01 {
 border: 2px solid #bbb;
 background: #fff;
 padding: 10px 14px;
 margin: 10px 0;
}

#help-page .frame02 {
 border: 2px solid #89cdff;
 background: #fff;
 padding: 10px 14px;
 margin: 10px 0;
}

#help-page .frame03 {
 border: 2px solid #ff8484;
 background: #fff;
 padding: 10px 14px;
 margin: 10px 0;
}

#help-page .frame04 {
 background: #efefef;
 padding: 10px 14px;
 margin: 10px 0;
}

#help-page .frame05 {
 background: #ffffd8;
 border: 1px solid #f5f5d4;
 padding: 10px 14px;
 margin: 10px 0;
}

#help-page .frame06 {
 background: #eaffe2;
 padding: 10px 14px;
 margin: 10px 0;
}

#help-page .frame07 {
 background: #daefff;
 padding: 10px 14px;
 margin: 10px 0;
}

#help-page [class^="frame"] p,
#help-page [class^="frame"] h4 {
 margin: 6px;
}

#help-page hr {
 border: 1px dashed #bbb;
 margin-top: 50px;
 margin-bottom: 30px;
}







/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 #help-page .main-contents {
  width: 80%;
 }
}



@media screen and (max-width:781px) {
 #help-page .calc-flex {
  display: block;
 }

 #help-page .calc-flex [class^="calc"]:first-child {
  margin-right: 0;
 }

 #help-page [class^="calc"] {
  /*  width: calc(100% - 8px);*/
  width: calc(100%);
 }



}



@media screen and (max-width:600px) {
 #help-page .main-contents {
  padding: 0 20px;
 }

 #help-page h3 {
  font-size: 20px;
 }

 #help-page h4 {
  font-size: 18px;
 }

 #help-page h5 {
  font-size: 15px;
 }

 #help-page h5:before {
  font-size: 8px;
 }

 #help-page ul {
  margin: 10px 0;
 }

 #help-page .help-table01 table,
 #help-page .help-table02 tabile {
  width: 100%;
 }

 #help-page .help-table01 th,
 #help-page .help-table01 td {
  display: block;
  border-bottom: none;
 }

 #help-page .help-table01 th {
  text-align: left;
  padding-top: 2px;
  padding-bottom: 2px;
  max-width: none;
 }

 #help-page .help-table01 tr:last-child td {
  border: 1px solid #bbb;
 }



 #help-page .help-table02 th {
  max-width: none;
 }

 #help-page dl.q-a {
  margin-left: 0;
  margin-right: 0;
 }

 #help-page dl.q-a dt {
  margin: 10px 0;
 }

 #help-page dl.q-a dd {
  margin: 10px 0;
 }

 #help-page img {
  width: 100% !important;
 }




}









/************************************************
 ホーム画面
************************************************/
#top h3 {
 padding-bottom: 4px;
}

.news-area {
 margin: 14px auto;
 padding: 30px;
 border: 3px solid #0e0e0e;
 border-radius: 20px;
 background: #f4f4f4;
}

.news-area-inner {
 overflow-y: scroll;
 width: 100%;
 height: 300px;
 padding-right: 6px;
}

.news-area i:before {
 padding-right: 6px;
 color: #3f3a85;
}

.news-area a {
 text-decoration: none;
 color: #000;
 transition: .3s;
}

.news-area a:hover {
 color: #838383;
}

.news-area dd {
 margin-left: 21px;
}













/************************************************
 ログイン画面
************************************************/
#login-page #main {
 width: 100%;
}

#main.login-page,
#main.help-page {
 width: 100%;
}

#login-page .main-contents {
 background: #ececec;
 box-shadow: unset;
}

#login-area {
 text-align: center;
 width: 60%;
 margin: 0 auto;
 padding: 60px 30px;
 border-radius: 6px;
 box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.3);
 border-radius: 20px;
 background: #fefefe;
}

#login-page h2 i:before {
 padding-right: 6px;
}

#login-page .br-control {
 display: none;
}

#login-page .submitbtn-area input {
 background: #0e0e0e;
}


#login-area table {
 margin: 20px auto;
}

#login-area table tr {
 line-height: 54px;
}

#login-area table th {
 text-align: right;
 padding-right: 10px;
}

#login-area table input[type="text"],
#login-area table input[type="password"] {
 height: 30px;
 width: 300px;
 font-size: 20px;
}

#login-area .submitbtn-area {
 text-align: center;
 margin-top: 20px;
}




/******************レスポンシブ********************/
@media screen and (max-width:991px) {
 #login-area {
  width: 80%;
 }

 #login-page h2 {
  background: #00aaff;
  color: #fff;
 }


}


@media screen and (max-width:781px) {
 #login-page #main {
  background: #ececec;
 }

 #main.login-page,
 #main.help-page {
  background: #ececec;
 }

 #login-area {
  width: 94%;
  padding: 30px 20px 40px;
 }

 #login-area .submitbtn-area {
  margin-top: 20px;
 }


}


@media screen and (max-width:600px) {
 #login-area {
  width: 94%;
  padding: 30px 10px;
  margin: 0 auto;
 }

 #login-page .br-control {
  display: block;
 }

 #login-area table {
  width: 84%;
 }

 #login-area table tr {
  line-height: 24px;
 }

 #login-area table th,
 #login-area table td {
  display: block;
 }

 #login-area table th {
  text-align: left;
  margin-top: 10px;
 }

 #login-area table td {
  margin-bottom: 10px;
 }

 #login-area table input {
  width: 100% !important;
 }


}

@media screen and (max-width:400px) {
 #login-area {
  width: 90%;
 }

 #login-area table {
  width: 90%;
 }

 #login-area .submitbtn-area {
  margin-top: 20px;
 }


}
































/************************************************
 フッター
************************************************/
#footer-wrapper {
 /*footer固定用*/
 margin-top: auto;
}

#footer-inner {
 background: #000;
 /*border-top: 6px solid #1a75ed;*/
 padding: 10px 30px 4px 30px;
}

/*フッターメニュー*/
.footer-nav {
 width: 100%;
 margin: 0 auto;
}

.footer-nav ul {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 0;
}

.footer-nav ul li {
 list-style: none;
 /* ↓ 均等割り付けしたい場合*/
 /*flex: 1;*/

 border-left: 1px dotted #fff;
 padding-right: 10px;
 padding-left: 10px;
}

.footer-nav ul li:first-child {
 border-left: none;
}

.footer-nav ul li a {
 text-decoration: none;
 display: block;
 text-align: center;
 color: #fff;
 transition: .3s;
}

.footer-nav ul li a:hover {
 color: #e4e3ff;
 text-decoration: underline;
}


/*フッターロゴ*/
.footer-logo {
 text-align: center;
 margin: 30px;
}

.footer-logo img {
 width: 350px;
 transition: .2s;
}

.footer-logo img:hover {
 opacity: .8;
}



/*コピーライト*/
.footer-copyright {
 text-align: center;
 margin-top: 40px;
}

.footer-copyright p {
 margin: 0 auto 6px;
 color: #fff;
 font-size: 12px;
}

/*トップへ戻るボタン*/
.pagetop {
 display: none;
 position: fixed;
 bottom: 4px;
 right: 20px;
}

.pagetop a {
 display: block;
 background-color: #d5d5d5;
 text-align: center;
 color: #333;
 font-size: 20px;
 text-decoration: none;
 padding: 7px 12px;
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 border-radius: 4px;
 transition: .2s;
 filter: drop-shadow(0px 0px 2px rgba(160, 160, 160, 0.7));
 opacity: .9;
}

.pagetop a:hover {
 background-color: #dcdcdc;
}





/******************レスポンシブ********************/
@media screen and (max-width:768px) {
 .footer-logo img {
  width: 60%;
 }

}

@media screen and (max-width:600px) {
 .footer-logo {
  margin: 10px 10px 30px;
 }

 .footer-logo img {
  width: 70%;
 }

 .footer-nav ul li a {
  font-size: 14px;
 }


}



@media screen and (max-width:400px) {
 #footer-inner {
  padding: 10px 0 4px 0;
 }

 .footer-logo img {
  width: 80%;
 }

 .footer-copyright p {
  font-size: 11px;
 }




}