@charset "UTF-8";
/* ! Frame Work Style ----------------------------------------------------------------------------------------------------

　■ フォーム
　　　-基本パーツ
　　　-ユニット
　　　-フォームラップ
　■ フォームリスト
  ■ ボタンエリア
  ■ ドラッグ&ドロップアップロード
　■ ボタン
　■ リンク

---------------------------------------------------------------------------------------------------- */
/* ! ====================================================================================================
　■ フォーム
==================================================================================================== */
/* ! フォームリセット ============================== */
input,select,button,textarea{ -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none;}
input.right {
  text-align: right;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
input[type="number"] { -moz-appearance:textfield;}
button { outline: none;}
select::-ms-expand { display: none;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fafafa inset;}
input[type="checkbox"],input[type="radio"],input[type="file"]{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* ! プレイスホルダー ============================== */
input::-webkit-input-placeholder { color: #A2ADC1;}
input:-ms-input-placeholder { color: #A2ADC1;}
input::-moz-placeholder { color: #A2ADC1;}
textarea::-webkit-input-placeholder { color: #A2ADC1;}
textarea:-ms-input-placeholder { color: #A2ADC1;}
textarea::-moz-placeholder { color: #A2ADC1;}

/* ! ディスエイブルド ============================== */
input:disabled,
select:disabled,
textarea:disabled {
  background: #e1e7ef;
  border-color: #d2d8e2;
  border: 1px solid #0F286C;
}
/* readonly */
input[readonly] {
  border: 1px solid #CCC;
  background: #e1e7ef;
  border-color: #d2d8e2;
  pointer-events: none;
}
.area_table_calc input[readonly]:not([disabled]) {
    background: none;
}
/* ! ==================================================
　基本パーツ
================================================== */
input,
select,
textarea {
  font: 400 14px/1em 'helvetica','noto sans japanese',sans-serif;
  padding: 0 5px;
  background: #fff;
  width: 100%;
  height: 30px;
  border: 1px solid #0F286C;
  border-radius: 0;
  flex: 1 1 auto;
  min-width: 10px;
}
textarea{
  padding: 8px 6px;
  min-height: 100px;
  resize: none;
}
select + select {
  margin: 0 0 0 4px;
}

/* ! ==================================================
　テキストボックス
================================================== */
.list_form.min input[type="text"] + input[type="text"]{
  margin: 0 0 0 -1px;
}
.list_form.min input:disabled{
  border-color: #0F286C;
}
.list_form.min .numberfmt,
.list_form .numberfmt {
  text-align: right;
}
/* ! ==================================================
　チェックボックス・ラジオ
================================================== */
/* ! 共通項目 ============================== */
.wrap_checkbox,
.wrap_radio {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px 0;
  position: relative;
}
.wrap_checkbox label,
.wrap_radio label {
  font: 400 12px/1.5em 'noto sans japanese',sans-serif;
  padding: 0 0 0 16px;
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  user-select: none;
  cursor: pointer;
  position: relative;
}
.wrap_checkbox label:before,
.wrap_checkbox label:after,
.wrap_radio label:before,
.wrap_radio label:after {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 1px solid #0F286C;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* ! カレント —————————————————————————————— */
input[type=checkbox]:checked + label::after,
input[type=radio]:checked + label::after {
  display: block;
}

/* ! チェックボックス個別指定 ============================== */
.wrap_checkbox label:after {
  border-color: blue;
  background: blue;
  display: none;
}


/* ! ラジオ個別指定 ============================== */
.wrap_radio label:before,
.wrap_radio label:after {
  border-radius: 50%;
}
.wrap_radio label:after {
  border-color: blue;
  background: blue;
  border-radius: 50%;
  display: none;
  transform:scale(.6) translateY(-50%);
  transform-origin: top center;
}


/* ! 選択デザイン ============================== */
/* 横並び時用 */
input[type="checkbox"] + label,
input[type="radio"] + label{
  margin-right: 1em;
}


/* ! ラジオタブデザイン ============================== */
.wrap_radio.tab {
  background: #F2F4F7;
  border-radius: 3px;
  padding: 4px;
}
.wrap_radio.tab label,
.wrap_radio.tab label:before,
.wrap_radio.tab label:after {
  color: #8E919E;
  font: 700 14px/1em 'helvetica','noto sans japanese',sans-serif;
  border: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: transparent;
  min-width: 50px;
  padding: 0 2px;
  height: 24px;
  border-radius: 3px;
  z-index: 1;
}
.wrap_radio.tab label:before,
.wrap_radio.tab label:after {
  transform:scale(1) translateY(-50%);
}

.wrap_radio.tab input[type="radio"] + label {
  margin-right: 0;
}
.wrap_radio.tab input[type="radio"]:checked + label {
  color: #0F286C;
}
.wrap_radio.tab input[type="radio"]:checked + label:after {
  background: #fff;
  border-color: #fff;
  z-index: -1;
}

/* 長さ(auto) */
.wrap_radio.tab.fill label{
  flex: auto;
  min-width: 1px;
}
.wrap_radio.tab.fill label:before,
.wrap_radio.tab.fill label:after{
  width: 100%;
}

/* サイズ */
.wrap_radio.tab.large label,
.wrap_radio.tab.large label:before,
.wrap_radio.tab.large label:after{
  height: 36px;
  font: 700 18px/1em 'helvetica','noto sans japanese',sans-serif;
}


/* ! ==================================================
　画像アップロード
================================================== */
.wrap_img label{
  display: block;
  width: 120px;
  overflow: hidden;
  background-size: 100% auto !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 0px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.wrap_img.full,
.wrap_img.full label{
  width: 100%;
}
.wrap_img label:before {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  padding-top: 100%;
  background: rgba(23,40,88,.2) url(../img/logo/logo.svg) no-repeat center center;
  background-size: 35px 35px !important;
  border: 1px solid #0F286C;
  border-radius: 0px;
}
.wrap_img label:after{
  content: '画像を変更';
  font: 600 11px/1.3em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 100%; height: 100%;
  display: flex;
  align-items: center; justify-content: center;
  color: white;
  pointer-events: none;
  opacity: 0;
  background: rgba(23,40,88,.4);
}
.wrap_img label:hover:after{
  opacity: 1;
}

/* ! ==================================================
　デイトピッカー
================================================== */
.wrap_datepick{
  position: relative;
  width: 100%;
}
.wrap_datepick:before {
  content: '';
  background: url(../img/ico/ico_calendar.svg) no-repeat center center !important;
  background-size: contain !important;
  font: normal 15px/1em 'fontawesome';
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.wrap_datepick input {
  cursor: pointer;
}


/* ! ==================================================
　フォームラップ
================================================== */
[class*="wrap_input"],
[class*="wrap_input"] > .input {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 0;
}
[class*="wrap_input"][class*="right"] {
  justify-content: flex-end;
}
[class*="wrap_input"][class*="height"] {
  min-height: 30px;
}
[class*="wrap_input"][class*="center"] {
  align-items: center;
}

/* 住所などインプット要素を縦に並べる場合に仕様 */
[class*="wrap_input"][class*="col"] {
  flex-direction: column;
}
[class*="wrap_input"] + [class*="wrap_input"] {
  margin: 4px 0 0;
}
[class*="wrap_input"][class*="row"] {
  z-index: 0;
}
[class*="wrap_input"][class*="row"] [class*="wrap_input"] + [class*="wrap_input"]{
  margin: 0;
}

.list_form [class*="wrap_input"][class*="row"] > [class*="wrap_input"] + [class*="wrap_input"] {
  margin-left: -1px;
}
.list_form.min [class*="wrap_input"] + [class*="wrap_input"] {
  margin: 2px 0 0;
}
.list_form.min [class*="wrap_input"][class*="row"] > [class*="wrap_input"] + [class*="wrap_input"],
.list_form.min [class*="wrap_input"][class*="row"] > [class*="unit_"] + [class*="wrap_input"],
.list_form.min [class*="wrap_input"][class*="row"] > [class*="wrap_input"] + [class*="unit_"] {
  margin: 0;
  margin-left: -1px;
}
.list_form.min [class*="wrap_input"][class*="col"] > [class*="wrap_input"] + [class*="wrap_input"] {
  margin: -1px 0 0;
}

/* unit */
.list_form.min [class*="unit_"] + [class*="wrap_input"],
.list_form.min [class*="wrap_input"] + [class*="unit_"] {
  margin-left: -1px;
}


/* 横幅 */
[class*="wrap_input"][class*="_40"] {
  max-width: 40px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_50"] {
  max-width: 50px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_60"] {
  max-width: 60px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_65"] {
  max-width: 65px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_70"] {
  max-width: 70px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_80"] {
  max-width: 80px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_90"] {
  max-width: 90px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_100"] {
  max-width: 100px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_120"] {
  max-width: 120px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_130"] {
  max-width: 130px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_140"] {
  max-width: 140px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_150"] {
  max-width: 150px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_160"] {
  max-width: 160px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_170"] {
  max-width: 170px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_180"] {
  max-width: 180px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_190"] {
  max-width: 190px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_200"] {
  max-width: 200px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_240"] {
  max-width: 240px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_300"] {
  max-width: 300px; flex: 0 0 auto;
}
[class*="wrap_input"][class*="_400"] {
  max-width: 400px; flex: 0 0 auto;
}

/* フィルター箇所の指定 */
[class*="wrap_input_min"][class*="_200"] {
  flex: 0 0 200px;
}
[class*="wrap_input_min"][class*="_300"] {
  flex: 0 0 300px;
}

/* 縦表示位置 */
[class*="wrap_input"][class*="vertical_"]{
  align-items: center;
}
[class*="wrap_input"][class*="vertical_"][class*="bottom"]{
  align-items: flex-end;
}


/* ! ==================================================
　セレクトボックス
================================================== */
select {
  width: 100%;
  padding-right: 28px;
  cursor: pointer;
}
.wrap_select {
  width: 100%;
  position: relative;
}
.wrap_select:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/ico/ico_form/ico_form_down.svg);
  background-size: 18px 18px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events:none;
  z-index: 1;
}
.wrap_select.disabled:before{
  display: none;
}
.list_form.min select + select{
  margin: 0 0 0 -1px;
}

/* ! ==================================================
　ファイル選択
================================================== */
.wrap_file{
  display: flex;
  flex-direction: column;
  flex: auto;
  min-width: 1px;
  position: relative;
}
wrap_file_purchase {
  position: relative;
}
.wrap_file_purchase.active{
  position: relative;
}
.wrap_file label,
.wrap_file_purchase .label{
  flex: auto;
  min-width: 1px;
  font: 300 15px/1.3em 'noto sans japanese',sans-serif;
  padding: 0 5px;
  height: 30px;
  border: solid 1px #0F286C;
  width: 100%;
  display: flex;
  align-items: center;
  color: #a2adc1;
  position: relative;
  cursor: pointer;
}
.wrap_file_purchase .label span{
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.wrap_file label span.active{
  color: #0F286C;
}
.wrap_file label + [class*="btn_"] {
  flex: 0 0 auto;
  margin: 0 0 0 6px;
  border-radius: 0;
}
.wrap_img{
  position: relative;
}


/* お買い上げ表の登録 ----------------------------- */
.wrap_file_purchase {
}
.wrap_file_purchase label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.wrap_file_purchase .label {
  height: 24px;
  background: #fff;
  margin: 5px 0;
}
.wrap_file_purchase .img {
  width: 100%;
  height: auto;
  border: 1px solid #0F286C;
  position: relative;
}
.wrap_file_purchase .img:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 150%;
  background: url(../img/img/img_kaiage.png);
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.wrap_file_purchase .img:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5) url(../img/ico/ico_upload_white.svg) ;
  background-size: 50px 50px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all 0.1s ease;
}
.wrap_file_purchase:hover .img:after {
  background: rgba(0,0,0,.4) url(../img/ico/ico_upload_white.svg) ;
}

/* アップ済み表示 */
.wrap_file_purchase .img.active:after {
  background: rgba(54,174,227,.75) url(../img/ico/ico_uploaded_white.svg) ;
  background-size: 150px 100px !important;
}

/* ファイル名 */
.wrap_file_purchase .img .name {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  height: 24px;
  display: block;
  width: calc((100% - 10px));
  background: #fff;
  padding: 5px 24px 5px 8px;
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wrap_file_purchase [class*="button"] {
  display: none;
}

/* アクティブの場合 */
.wrap_file_purchase .active .img:after {
  opacity: 0;
}
.wrap_file_purchase .active [class*="button"],
.wrap_file_purchase.active [class*="button"]{
  display: block;
  z-index: 3;
}
.wrap_file_purchase.active [class*="button"]{
  top: auto;
  bottom: 3px;
  right: 0;
  transform: translate(0,0);
}

/* ! ==================================================
　ユニット
================================================== */
[class*="unit_"] {
  color: #000;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  letter-spacing: -.04em;
  padding: 0 .2em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 0 auto;
}
[class*="unit_min"] { flex: 0 0 .5em; padding: 0; }
[class*="unit_half"] { flex: 0 0 1.2em; padding: 0; }
[class*="unit_1"] { flex: 0 0 2.5em; }
[class*="unit_2"] { flex: 0 0 3.5em; }
[class*="unit_3"] { flex: 0 0 4.5em; }
[class*="unit_4"] { flex: 0 0 5.5em; }
[class*="unit_5"] { flex: 0 0 6.5em; }
[class*="unit"][class*="left"] { justify-content: flex-start;}
[class*="unit"][class*="right"] { justify-content: flex-end;}
[class *="unit"][class*="center"] { justify-content: center;}

.list_form.min [class*="unit_min"] { flex: 0 0 .2em; padding: 0; }


/* ! ====================================================================================================
　■ フォームリスト
==================================================================================================== */
.list_form > li {
  display: flex;
  align-items: flex-start;
}
.list_form > li + li {
  margin: 8px 0 0;
}
.list_form .form_head {
  padding: 6px 0 0;
  flex: 0 0 110px;
}
.list_form .form_head > .ttl {
  font: 300 12px/1.2em 'noto sans japanese',sans-serif;
}
.list_form .form_head > .ttl.bold {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
}
.list_form .form_data {
  flex: 1 1 auto;
  min-width: 10px;
  min-height: 30px;
}
.list_form [class*="line_data"],
.list_form [class*="line_data"][class*="min"]{
  border: 1px solid #d2d8e2;
  border-left: none;
  padding: 2px 4px;
}
.list_form [class*="line_data"][class*="min"]{
  padding: 0;
}
.list_form [class*="line_data"][class*="right"],
.list_form [class*="line_data"][class*="bottom"]{
  border: none;
}
.list_form [class*="line_data"][class*="right"]{
  border-right: 1px solid #d2d8e2;
}
.list_form [class*="line_data"][class*="bottom"]{
  border-bottom: 1px solid #d2d8e2;
}

/* たて並び */
.list_form.col > li {
  flex-wrap: wrap;
}
.list_form.col > li > .form_head {
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 5px;
}


/* 個別 */
.head_60 .form_head {
  flex: 0 0 60px;
}
.head_70 .form_head {
  flex: 0 0 70px;
}
.head_80 .form_head {
  flex: 0 0 80px;
}
.head_100 .form_head {
  flex: 0 0 100px;
}
.head_120 .form_head {
  flex: 0 0 120px;
}
.head_150 .form_head {
  flex: 0 0 150px;
}
.head_180 .form_head {
  flex: 0 0 180px;
}
.list_form [class*="btn_"] {
  min-width: auto;
}
.split_2 .list_form,
.split_3 .list_form{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.split_2 .list_form li,
.split_3 .list_form li{
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width: calc(50% - 10px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 5px;
}
.split_3 .list_form li{
  width: calc(33.33%);
  flex: 0 0 auto;
}
.split_2  .list_form > li + li {
}
@media screen and (max-width: 1300px){
  .area_order_add .split_3 .list_form li {
    width: 50%;
  }
}

/* ! ミニファイ ============================== */
.list_form.min + .list_form.min{
  margin: 12px 0 0;
}
.list_form.min > li{
  margin: 0px 0 -1px;
  display: flex;
  align-items: stretch;
}
.list_form.min.double > li {
  height: 47px;
}
@media screen and (max-width: 1200px){
  .list_form.min.double > li {
    height: 67px;
  }
  .list_form.min.col_2_1200 {
    display: flex;
    flex-wrap: wrap;
  }
  .list_form.min.col_2_1200 > li {
    width: 50%;
  }
}
/* フォームヘッド */
.list_form.min .form_head {
  border: 1px solid #d2d8e2;
  background: #e1e7ef;
  padding: 3px;
  min-height: 24px;
}
.list_form.min .form_head > .ttl{
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: -.02em;
  min-height: 16px;
}
.list_form.min .form_head > .ttl + .ttl {
  margin: 5px 0 0;
}
.list_form.min > .required > .form_head > .ttl:before{
  position: initial;
  margin: 0 4px 0 0;
}
.list_form.min .form_data {
  display: flex;
  flex-direction: column;
  margin-left: -1px;
  min-height: 24px;
  background: #e1e7ef;
}
.list_form.min .form_data .wrap_input {
  flex: auto;
  z-index: 2;
}
.list_form.min .form_data [class*="wrap_input"][class*="row"] {
  z-index: 1;
}
.list_form.min .form_data.line,
.list_form.min .form_data .wrap_input.line {
  border: 1px solid #0F286C;
}
.list_form.min .form_data.line_bottom {
  border-bottom: 1px solid #d2d8e2;
}
.list_form.min .form_data.line_right {
  border-right: 1px solid #d2d8e2;  
}
.list_form.min .form_data > p {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  padding: 4px;
  border: 1px solid #A2ADC1;
  min-height: 24px;
}
.list_form.min input[type="radio"] + label {
  margin-right: .2em;
}
.list_form.min input,
.list_form.min .wrap_select2 .select2-container--default .select2-selection--multiple,
.list_form.min .select2-container--default .select2-selection--single,
.list_form.min select{
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
  border-radius: 0;
  min-height: 24px;
  height: auto;
}
.list_form.min [class*="unit_"] {
  border: 1px solid #0F286C;
}

.list_form.min textarea{
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
  border-radius: 0;
  min-height: 64px;
}
.list_form.min textarea.min {
  min-height: 30px;
}
.list_form.min textarea.min.xs {
  min-height: 23px;
}
.list_form.min .wrap_checkbox,
.list_form.min .wrap_radio {
  padding: 1px 3px;
  border: 1px solid #0F286C;
  background: #fff;
}
.list_form.min input[readonly]{
  border-color: #0F286C;
}

/* セレクトボックス */
.list_form.min .wrap_select:before {
  width: 16px;
  height: 24px;
  border-left: 1px solid #0F286C;
  background-size: 13px 13px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-right: 20px;
}
.list_form.min select,
.list_form.min .select2-container .select2-selection--single .select2-selection__rendered {
  padding-right: 16px;
  height: 22px;
}


/* ファイル */
.list_form.min .wrap_file label {
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
  height: 24px;
  background: #fff;
  align-items: flex-start;
  overflow: hidden;
  padding: 5px 5px 0;
}
.list_form.min .wrap_file label [class*="button_ico"][class*="reset"] {
  display: none;
}
.list_form.min .wrap_file label .active + [class*="button_ico"][class*="reset"] {
  display: block;
}

/* セレクト2 */
.list_form.min .select2-container--default .select2-selection--single .select2-selection__rendered {
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
  line-height: 23px;
}

/* ボタンエリア */
.list_form.min [class*="btnarea"] {
  margin: 0;
  width: 100%;
}

/* 画像フォーム箇所 */
.list_form.min .wrap_img {
  margin-top: -1px;
  padding: 5px 2px 2px;
}

/* ! 必須項目 ============================== */
.list_form > .required > .form_head > .ttl{
  position: relative;
}
.list_form > .required > .form_head > .ttl:before {
  content: "*";
  color: #E60012;
  font: 700 15px/1em 'helvetica','noto sans japanese',sans-serif;
  display: block;
  position: absolute !important;
  top: -4px;
  left: -4px;
}


/* ! ====================================================================================================
　■ ドラッグ&ドロップアップロード
==================================================================================================== */
.wrap_dd {
}
.area_dd {
  border: 2px dashed #0F286C;
  border-radius: 3px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height:  160px;
}
.area_dd .area_paragraph {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.wrap_dd .btnarea {
  margin: 40px 0 0;
  display: flex;
  justify-content: center;
}
.wrap_dd .btnarea [class*="btn_"] {
  max-width: 200px;
}




/* ! ====================================================================================================
　■ ボタンエリア
==================================================================================================== */
[class*="btnarea"] {
  display: flex;
  flex-wrap: wrap;
  margin: -2px;
}
[class*="btnarea_"][class*="right"] {
  justify-content: flex-end;
}
[class*="btnarea_"][class*="center"] {
  justify-content: center;
}
[class*="btnarea"] > [class*="btn_"]  {
  margin: 2px;
}
[class*="btnarea_"][class*="full"] {
  width: calc((100% + 4px));
}
[class*="btnarea"][class*="col"]{
  flex-direction: column;
}
[class*="btnarea"][class*="col"][class*="center"] {
  align-items: center;
}
/* クローンボタン */
[class*="btnarea_"][class*="clone"]{
  margin: 10px 0 0;
}
/* 削除ボタン */
[class*="btnarea_"][class*="remove"]{
  width: 100%;
  justify-content: flex-end;
  margin: 4px 0 0;
}
[class*="btnarea_"][class*="line_right"] {
  border-right: 1px solid #A2ADC1;
}

/* ! ==================================================
　フォームボタンエリア
================================================== */
.btnarea_form {
  width: 100%;
  margin: 40px 0 0;
  padding: 0 0 30px;
  justify-content: center;
}
.btnarea_form > [class*="btn_"] {
  margin: 2px;
  font: 500 .88rem/1em 'helvetica','noto sans japanese',sans-serif;
}
.btnarea_form > [class*="btn_"][class*="back"]{
  font: 300 .88rem/1em 'helvetica','noto sans japanese',sans-serif
}
.btnarea_form > .btnarea {
  margin: 30px 0 0;
}


/* ! ==================================================
　書類管理
================================================== */
.area_car_document .layout_list > article > .head{
  color: #fff;
  background: #333;
  padding: 10px;
  border-color: #333;
  margin: 0 0 5px;
}


/* ! ====================================================================================================
　■ ボタン
==================================================================================================== */
[class*="btn_"] {
  color: #fff;
  font: 500 .85rem/1em 'helvetica','noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 30px;
  padding: 0 .5em;
  background: #36AEE3;
  border: 1px solid #36AEE3;
  border-radius: 3px;
  user-select: none;
  cursor: pointer;
  position: relative;
}
[class*="btn_"]:hover {
  color: #36AEE3;;
  background: #fff;
}

[class*="btn_"][class*="gray"] {
  color: #fff;
  background: #aaa;
  border-color: #aaa;
}
[class*="btn_"][class*="gray"]:hover {
  color: #aaa;
  background: #fff;
  border-color: #aaa;
}

/* ! ボタン_ネイビー ============================== */
[class*="btn_"][class*="navy"] {
  color: #fff;
  background: #0F286C;
  border-color: #0F286C;
}
[class*="btn_"][class*="navy"]:hover {
  color: #0F286C;
  background: #fff;
}

/* ! ボタン_ライン ============================== */
[class*="btn_"][class*="line"] {
  color: #0F286C;
  border-color: #0F286C;
  background: #fff;
}
[class*="btn_"][class*="line"]:hover {
  color: #fff;
  background: #0F286C;
  border-color: #0F286C;
}

/* ! ボタン_ライン_赤 ============================== */
[class*="btn_"][class*="line"][class*="red"] {
  color: #E60012;
  border-color: #E60012;
  background: #fff;
}
[class*="btn_"][class*="line"][class*="red"]:hover {
  color: #fff;
  background: #E60012;
  border-color: #E60012;
}


/* ! ボタン_ゴースト ============================== */
[class*="btn_"][class*="goast"] {
  color: #fff;
  border-color: #fff;
  background: transparent;
}
[class*="btn_"][class*="goast"]:hover {
  color: #36AEE3;
  border-color: #36AEE3;
}

/* ! ボタン_ゴースト_ネイビー ============================== */
[class*="btn_"][class*="goast"][class*="navy"] {
  color: #0F286C;
  border-color: #0F286C;
  background: transparent;
}
[class*="btn_"][class*="goast"][class*="navy"]:hover {
  color: #fff;
  background: #0F286C;
}


/* ! ボタン_ゴースト_赤 ============================== */
[class*="btn_"][class*="goast"][class*="red"] {
  color: #E60012;
  border-color: #E60012;
  background: transparent;
}
[class*="btn_"][class*="goast"][class*="red"]:hover {
  color: #fff;
  background: #E60012;
}


/* ! 透明ボタン 赤 ============================== */
[class*="btn_"][class*="transparent"] {
  color: #8E919E;
  border-color: #f2f4f7;
  background: transparent;
}
[class*="btn_"][class*="transparent"]:hover{
  color: #fff;
  background: #8E919E;
  border-color: #8E919E;
}
[class*="btn_"][class*="transparent"][class*="red"] {
  color: #E60012;
  border-color: transparent;
  background: transparent;
}
[class*="btn_"][class*="transparent"][class*="red"]:hover {
  color: #E60012;
  background: transparent;
  border-color: #E60012;
}


/* ! ボタン_高さ ============================== */
[class*="btn_"][class*="large"]{
  height: 40px;
}
/* ! ボタン_狭く ============================== */
[class*="btn_"][class*="narrow"] {
  min-width: 0;
}

/* ! フルサイズ ============================== */
[class*="btn_"][class*="full"] {
  max-width: none;
  min-width: auto;
  width: 100%;
}

/* ! 自動で広げる ============================== */
[class*="btn_"][class*="auto"] {
  flex: auto;
  min-width: 10px;
}

/* ! 小さく ============================== */
[class*="btn_"][class*="min"] {
  font-size: 12px;
  height: 24px;
}
[class*="btn_"][class*="minimum"] {
  font-size: 11px;
  height: 20px;
}

/* ! アイコン ============================== */
[class*="btn_"][class*="ico"] {
  padding-left: 30px;
  position: relative;
}
[class*="btn_"][class*="ico"][class*="min"] {
  padding-left: 24px;
}
[class*="btn_"][class*="ico"][class*="large"] {
  padding-left: 35px;
}
[class*="btn_"][class*="ico"]:hover {
  color: #0F286C;
  border-color: #0F286C;
}
[class*="btn_"][class*="ico"]:before{
  content: "";
  background: #fff;
  width: 30px;
  height: 30px;
  background-size: 24px 24px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: -1px;
  left: -1px;
}
[class*="btn_"][class*="ico"][class*="min"]:before {
  width: 24px;
  height: 24px;
  background-size: 20px 20px !important;
}
[class*="btn_"][class*="ico"][class*="large"]:before {
  width: 40px;
  height: 40px;
  left: 5px;
}
[class*="btn_"][class*="ico"][class*="plus"]:before {
  background: url(../img/ico/ico_form/ico_form_plus_white.svg);
}
[class*="btn_"][class*="ico"][class*="plus"]:hover:before {
  background: url(../img/ico/ico_form/ico_form_plus.svg);
}
[class*="btn_"][class*="ico"][class*="minus"]:before {
  background: url(../img/ico/ico_form/ico_form_minus_white.svg);
}
[class*="btn_"][class*="ico"][class*="minus"]:hover:before {
  background: url(../img/ico/ico_form/ico_form_minus.svg);
}
[class*="btn_"][class*="ico"][class*="print"]:before {
  background: url(../img/ico/ico_print_white.svg);
}
[class*="btn_"][class*="ico"][class*="print"]:hover:before {
  background: url(../img/ico/ico_print.svg);
}

/* ! ボタン_キャンセル ============================== */
[class*="btn_"][class*="back"] {
  border-color: #A2ADC1;
  min-width: 120px;
  background-color: white;
  color: #0D225A;
}


/* ! ==================================================
　テキストボタン
================================================== */
[class*="button"] {
  color: #0F286C;
  font: 400 .85rem/1em 'helvetica','noto sans japanese',sans-serif;
  user-select: none;
  cursor: pointer;
}

[class*="button"][class*="red"] {
  color: #E60012;
}


[class*="button_ico"]{
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: absolute;
  right: 0px; top: 50%;
  transform: translate(0,-50%);
  z-index: 1;
}
[class*="button_ico"][class*="reset"]{
  background: url(../img/ico/ico_reset.svg)no-repeat center;
  background-size: 10px 10px;
}

/* ! ====================================================================================================
　■ リンク
==================================================================================================== */
/* ! ==================================================
　フロートさせるリンク
================================================== */
.link_float {
  position: relative;
}
.link_float > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}



/* ! ====================================================================================================
　■ アラート表示
==================================================================================================== */
.area_alert {
  padding: 20px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
/* ! ==================================================
　リスト
================================================== */
.list_alert {
  width: 320px;
}
.list_alert > li {
  opacity: 0;
  pointer-events: all;
}
.list_alert > li + li {
  margin: 4px 0 0;
}
.list_alert article {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 10px 0 60px;
  border-radius: 3px;
  border: 2px solid #0F286C;
  background: rgba(255,255,255,.9);
  box-shadow: 0px 6px 6px 0px rgba(0,0,0,.05);
  position: relative;
}
.list_alert article:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: url(../img/ico/ico_ttl_home.svg);
  background-size: 30px 30px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  left: 0;
}
.list_alert p {
  font: 400 14px/1.4em 'noto sans japanese',sans-serif;
  max-height: 2.8em;
  overflow: hidden;
}


/* 個別 */
.list_alert .alert_info article{ border-color: #152C58;}
.list_alert .alert_info article:before { background: url(../img/ico/ico_alert/ico_alert_info.svg);}
.list_alert .alert_success article{ border-color: #42C1FF;}
.list_alert .alert_success article:before { background: url(../img/ico/ico_alert/ico_alert_success.svg);}
.list_alert .alert_warning article{ border-color: #F29938;}
.list_alert .alert_warning article:before { background: url(../img/ico/ico_alert/ico_alert_warning.svg);}
.list_alert .alert_error article{ border-color: #E60012;}
.list_alert .alert_error article:before { background: url(../img/ico/ico_alert/ico_alert_error.svg);}


/* ! キーフレーム ============================== */
.list_alert > li{
  animation: alert 4s ease forwards;
}
.list_alert > li:nth-of-type(2){ animation-delay: .1s;}
.list_alert > li:nth-of-type(3){ animation-delay: .2s;}
.list_alert > li:nth-of-type(4){ animation-delay: .3s;}
.list_alert > li:nth-of-type(5){ animation-delay: .4s;}
.list_alert > li:nth-of-type(6){ animation-delay: .5s;}
.list_alert > li:nth-of-type(7){ animation-delay: .6s;}
@keyframes alert {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  10% {
    opacity: 1;
    transform: translateX(0);
  }
  89% {
    opacity: 1;
    transform: translateX(0);
  }
  90% {
    height: 60px;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0;
    height: 0;
  }
}

/* 自動で消えないように */
.list_alert > .alert_info {
  animation: alert_info .5s ease forwards;
}
.alert_info a{
  color: #e61310;
}
@keyframes alert_info {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* クリックして消す場合。 */
.list_alert > .alert_remove {
  animation: alert_remove .5s ease forwards;
  pointer-events: none;
  cursor: default;
}
@keyframes alert_remove {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  90% {
    height: 60px;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0;
    height: 0;
  }
}
/* datepicker */
.ui-datepicker {
  z-index: 100005 !important;
}
.ui-datepicker-title:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/ico/ico_form/ico_form_down.svg);
  background-size: 18px 18px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  margin: auto;
  left: 98px;
}
.ui-datepicker-title:after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/ico/ico_form/ico_form_down.svg);
  background-size: 18px 18px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  margin: auto;
  right: 34px;
}



/* ! フォームアド ============================== */
/*
.list_add_input{
  margin: 12px 0 0;
}
.list_add_input + [class*="btnarea"] [class*="btn_"] {
  min-width: auto;
}
*/
/* 削除ボタンエリア */
.list_add_input > li > [class*="btnarea"] {
  width: 40px;
}
.list_add_input + [class*="btnarea"] {
  margin-top: 5px;
}
.list_add_input > li{
  padding: 0;
  border-left: solid 4px #0F286C;
  display: flex;
  align-items: flex-start;
}
.list_add_input .wrap_input + .wrap_input{
  margin: 0 0 0 -1px !important;
}
.list_add_input .col > .wrap_input + .wrap_input {
 margin: -1px 0 0 !important;
}
.list_add_input input,
.list_add_input select,
.list_add_input .select2-container--default .select2-selection--single{
  border-radius: 0;
  height: 30px;
}
.list_add_input input[readonly]{
  border-color: #0F286C;
}
.button_ico_minus{
  width: 20px;
  height: 20px;
  background: #0F286C;
  padding: 4px;
  flex: 0 0 20px;
  margin: 2px;
  display: flex;
  align-items: center;
}
.list_add_input .btnarea{
  padding: 0 0 0 10px;
}
.list_add_input .btnarea .button_ico_minus{
  position: inherit;
  right: auto; top: auto;
  transform: translate(0,0);
  flex: 0 0 auto;
}
.button_ico_minus:before{
  content: '';
  width: 100%; height: 2px;
  background: white;
  display: block;
}
.list_add_input .btn_navy_ico_plus{
  border-radius: 0;
}



/* ! 装備品 ============================== */
.list_form_equipment {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #0F286C;
}
.list_form_equipment > li{
  width: 20%;
  border: 1px solid #0F286C;
  background: #fff;
}
.list_form_equipment > li.double {
  width: 40%;
}
.list_form_equipment .ttl {
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
  background: #e1e7ef;
  border-bottom: 1px solid #d2d8e2;
  padding: 4px;
}
.list_form_equipment .ttl:nth-of-type(n + 2) {
  margin-top: 8px;
}
.list_form_equipment .data {
  padding: 4px;
}
.list_form_equipment .data .wrap_radio {
  padding: 0;
}
@media screen and (max-width: 1280px){
  .list_form_equipment > li,
  .list_form_equipment > li.double {
    width: 100%;
  }
}


.list_form_equipment input,
.list_form_equipment textarea {
  font: 400 13px/1em 'helvetica','noto sans japanese',sans-serif;
  border-radius: 0;
  height: 24px;
}
.list_form_equipment textarea {
  padding: 5px;
  min-height: 40px;
}
.list_form_equipment .double textarea {
  min-height: 100px;
}

/* ! ミニファイ ============================== */
.list_form_equipment.min > li{
  border-color: #A2ADC1;
  margin: -1px;
  width: auto;
  flex: 1 1 20%;
}
.spotlight .list_form_equipment.min > li{
  border-color: #0F286C;
  margin: 0;
}
.list_form_equipment.min > li.double{
  flex: 1 1 40%;
}
.list_form_equipment.min.quarter > li{
  flex: 1 1 25%;
}

/* ! ====================================================================================================
　テキスト
==================================================================================================== */
/* 注釈 */
.list_form.min .text_attention{
  padding: 4px;
  font: 300 .73rem/1.3em 'helvetica','noto sans japanese',sans-serif
}








/* ! ====================================================================================================
　エラ〜メッセージ
==================================================================================================== */
.error-message {
  color: #E60012;
  font: 500 12px/1.3em 'noto sans japanese',sans-serif;
}