/*----------------------------------------------------------------------------*
 * リセッター
 *----------------------------------------------------------------------------*/
/*★★★*/
* {
  margin: 0;
  padding: 0;
  font-family: Verdata, Meiryo, Osaka, san-serif;
  box-sizing: border-box;
}

/*★★★*/
*::after,
*::before {
  box-sizing: border-box;
}

/*----------------------------------------------------------------------------*
 * 基本要素
 *----------------------------------------------------------------------------*/
/*★★★*/
html {
  width: 100%;
  overflow-y: scroll;
}

/*★★★*/
body {
  font-size: 14px;
  color: #000;
}

/*★★★*/
ul {
  list-style: none;
}

/*★★★*/
i {
  color: #fff;
}

h1 {
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
}

/*★★★*/
h2 {
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: solid 6px #ccc;
  font-size: 20px;
  font-weight: bold;
  line-height: 24px;
}

/**
 * ClearFix
 * ブロック要素の高さを正確に算出させるためのクラス
 */
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/**
 * div基本スタイル
 * divは原則としてclearfixと同じ効果を適用
 */
/*★★★*/
div:after {
  content: "";
  clear: both;
  display: block;
}

/**
 * ul基本スタイル
 * ulは原則としてclearfixと同じ効果を適用
 */
/*★★★*/
ul:after {
  content: "";
  clear: both;
  display: block;
}

/**
 * th, td基本スタイル
 */
th.t,
td.t {
  /* th, tdにclass="t"を入れたら縦並びを上にそろえる */
  vertical-align: top;
}

/*★★★*/
th.l,
td.l {
  /* th, tdにclass="l"を入れたら横並びを左にそろえる */
  text-align: left;
}

/*★★★*/
th.c,
td.c {
  /* th, tdにclass="c"を入れたら横並びを中央にそろえる */
  text-align: center;
}

/*★★★*/
th.r,
td.r {
  /* th, tdにclass="r"を入れたら横並びを右にそろえる */
  text-align: right;
}

th.c,
td.c {
  /* th, tdにclass="c"を入れたら横並びを中央にそろえる */
  text-align: center;
}

/*th.c_red, td.c_red {  th, tdにclass="c_red"を入れたら文字色は赤になり横並びを中央にそろえる。
    text-align: center;
    color: #f00;
} */

/**
 * .content
 * 画面中央に1200px幅でコンテンツを表示させるフレームクラス
 */
/*★★★*/
.f-content {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

/**
 * #main
 * メインフレーム
 */
/*★★★*/
#f-main {
  padding-top: 160px;
  /* 20px */
}

/*----------------------------------------------------------------------------*
 * 共通フォーム部品
 *----------------------------------------------------------------------------*/
/**
 * テキストボックス
 */
/*★★★*/
input[type=text] {
  padding: 5px;
  border: solid 1px #999;
  border-radius: 4px;
  /*  ime-mode: active;  IE,firefoxでの全角強制(chromeはCSSでは無理) */
}

/*★★★*/
input[type=text]:focus {
  /* フォーカス時 */
  background-color: #ffc;
}

/**
 * パスワードボックス
 */
/*★★★*/
input[type=password] {
  padding: 5px;
  border: solid 1px #999;
  border-radius: 4px;
}

/*★★★*/
input[type=password]:focus {
  /* フォーカス時 */
  background-color: #ffc;
}

/**
 * カレンダーボックス
 */
/*★★★*/
input[type=text].calendar {
  width: 100px;
  text-align: center;
  ime-mode: disabled;
  /* IE,firefoxでの半角強制(chromeはCSSでは無理) */
}

/**
 * テキストエリア
 */
textarea {
  padding: 10px;
}

/**
 * リストボックス
 */
/*★★★*/
select {
  padding: 5px 10px 5px 5px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
}

/**
 * ボタン類
 */
/*★★★*/
button,
a.button {
  padding: 10px 15px;
  background-color: #a51111;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

/*★★★*/
button:hover,
a.button.hover {
  /* ボタン選択時 */
  background-color: #eb182d;
}

/*★★★*/
button span,
a.button span {
  /* ボタンの文字列 */
  padding: 10px;
}

button.disabled,
a.button.disabled {
  /* 無効ボタン */
  background-color: #999;
}

/*★★★*/
button.search {
  /* 検索ボタン */
  width: 200px;
  padding: 10px;
  background-color: #82000d;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

/**
 * 幅指定クラス
 */
.len10 {
  width: 10px;
}

.len20 {
  width: 20px;
}

.len30 {
  width: 30px;
}

.len40 {
  width: 40px;
}

.len50 {
  width: 50px;
}

/*★★★*/
.len60 {
  width: 60px;
}

.len70 {
  width: 70px;
}

.len80 {
  width: 80px;
}

.len90 {
  width: 90px;
}

/*★★★*/
.len100 {
  width: 100px;
}

/*★★★*/
.len120 {
  width: 120px;
}

.len150 {
  width: 150px;
}

.len180 {
  width: 180px;
}

/*★★★*/
.len200 {
  width: 200px;
}

/*★★★*/
.len250 {
  width: 250px;
}

/*★★★*/
.len300 {
  width: 300px;
}

.len350 {
  width: 350px;
}

.len400 {
  width: 400px;
}

.len450 {
  width: 450px;
}

/*★★★*/
.len500 {
  width: 500px;
}

.len600 {
  width: 600px;
}

.len700 {
  width: 700px;
}

.len800 {
  width: 800px;
}

/*----------------------------------------------------------------------------*
 * ヘッダー
 *----------------------------------------------------------------------------*/
/**
 * #header
 * 画面最上部の青色ヘッダー部分の最上位フレーム
 * ※IE8対策でHTML5のheaderを使わない
 */
/*★★★*/
#f-header {
  height: 85px;
  background-color: #4d1a1f;
  background-image: url(../images/bg_header.png);
  background-repeat: no-repeat;
  background-position: right center;
  box-shadow: 0 0 5px 3px rgba(223, 223, 223, .5);
  width: 100%;
}

/*★★★*/
#noscr {
  position: fixed;
  z-index: 9999;
  width: 100%
}

/**
 * #logo
 * ロゴ用のフレーム
 */
/*★★★*/
#f-logo {
  float: left;
  width: 200px;
  height: 85px;
  margin-right: 30px;
}

/**
 * #f-title
 * タイトルフレーム

#f-title {
    float: left;
    height: 30px;
    margin-top: 24px;
    padding: 0 10px;
    background-color: #0c4273;
    border-radius: 4px;
}*/

/**
 * 画面上部メニュー
 */
/*★★★*/
#f-menus {
  float: left;
}

/*★★★*/
#f-menus div.name {
  /* メニュー名 */
  line-height: 28px;
  text-align: left;
  color: #fff;
}

/*★★★*/
#f-menus>ul>li {
  /* メニュー項目 */
  float: left;
  box-sizing: border-box;
  width: 120px;
  margin-left: 10px;
  border: solid 1px #fff;
  border-radius: 3px;
  text-align: center;
}

/*★★★*/
#f-menus>ul>li>a:hover {
  /* マウスオーバー時 */
  background-color: rgba(161, 0, 16, .5);
}

/*★★★*/
#f-menus>ul li a {
  /* メニューリンク */
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  padding: 8px 0;
}

/*★★★*/
#f-menus ul li a span {
  /* メニュー文字列 */
  display: block;
  margin-top: 4px;
}

/*#f-menus > ul li {*/
/*height: 50px;*/
/*}*/
#f-menus>ul>li li {
  height: 0;
  overflow: hidden;
  transition: .2s;
}

#f-menus>ul>li li a {
  border-top: 1px solid #fff;
}

#f-menus>ul>li:hover>ul>li {
  height: 50px;
  overflow: visible;
  background-color: #3b1218;
}

#f-menus>ul>li:hover>ul>li:hover {
  height: 50px;
  overflow: visible;
  background-color: rgba(161, 0, 16, 1);
}

/**
 * 操作枠の基底
 */
div.header-box {
  box-sizing: border-box;
  width: 100%;
  padding: 15px 30px;
  border: solid 1px #ccc;
  box-shadow: 0 0 5px 3px rgb(223 223 223 / 50%);
  position: absolute;
  top: 85px;
}

/*★★★*/
div.box {
  box-sizing: border-box;
  padding: 30px;
  border: solid 1px #ccc;
  box-shadow: 0 0 5px 3px rgba(223, 223, 223, .5);
  /* 外枠の影 */
}

/**
 * 左寄せ
 */
div.left {
  float: left;
}

/**
 * 右寄せ
 */
div.right {
  float: right;
}

/*★★★*/
th span.must:after {
  content: '*';
  color: red;
  margin-left: 4px;
}

/**
 * 編集テーブル

table.edit {

}*/

/**
 * 編集テーブルのタイトルセル

table.edit th {
    padding: 5px;
    text-align: left;
}*/

/**
 * 編集テーブルのデータセル

table.edit td {
    padding: 5px;
}*/

/**
 * 一覧テーブル

table.list {
    width: 100%;
}*/

/**
 * 一覧テーブルのタイトルセル

table.list th {
    padding: 10px;
}*/

/**
 * 一覧テーブルのデータセル

table.list td {
    padding: 10px;
}*/

/**
 * 一覧テーブルのデータセル上のボタン
*/
/*table.list td button {
    padding: 10px;  少し小さく
}*/

table.dataTable thead th,
table.dataTable thead td {
  padding: 5px !important;
  background-color: white;
}

/**
 * 通知メッセージ枠
 */
/*★★★*/
#f-notice-box {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #51a057;
  border-top: solid 3px #256b2b;
  border-bottom: solid 3px #256b2b;
}

/*★★★*/
#f-notice-box div.f-content {
  position: relative;
}

/*★★★*/
#f-notice-box div.icon {
  box-sizing: border-box;
  display: block;
  float: left;
  height: 100%;
  margin-right: 10px;
}

/*★★★*/
#f-notice-box div.icon i {
  font-size: 3em;
  color: #fff;
}

/*★★★*/
#f-notice-box div.data {
  display: block;
  float: left;
  color: #fff;
}

/*★★★*/
#f-notice-box .close {
  /* ×アイコン */
  position: absolute;
  top: 0;
  right: 100px;
  width: 100px;
  color: #fff;
  font-size: 20px;
  text-align: right;
  cursor: pointer;
}

/*★★★*/
#f-notice-box .close:hover {
  opacity: .80;
}

/*★★★*/
#f-notice-box .close span {
  /* 閉じる */
  padding-left: 4px;
  line-height: 20px;
  font-size: 14px;
  vertical-align: middle;
}

/**
 * エラーメッセージ枠
 */
#f-error-box {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #e98072;
  border-top: solid 3px #c33;
  border-bottom: solid 3px #c33;
}

#f-error-box div.f-content {
  position: relative;
}

#f-error-box div.icon {
  box-sizing: border-box;
  display: block;
  float: left;
  height: 100%;
  margin-right: 10px;
}

#f-error-box div.icon i {
  font-size: 3em;
  color: #fff;
}

#f-error-box div.data {
  display: block;
  float: left;
  color: #fff;
}

#f-error-box .close {
  /* ×アイコン */
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  color: #fff;
  font-size: 20px;
  text-align: right;
  cursor: pointer;
}

#f-error-box .close:hover {
  opacity: .80;
}

#f-error-box .close span {
  /* 閉じる */
  padding-left: 4px;
  line-height: 20px;
  font-size: 14px;
  vertical-align: middle;
}

/*----------------------------------------------------------------------------*
 * ログインページ
 *----------------------------------------------------------------------------*/
/**
 * ログイン枠
 */
/*★★★*/
#f-login-box {
  width: 640px;
  height: 240px;
  margin: 0 auto 30px auto;
  padding: 40px 80px;
}

/**
 * ログインフォームのテーブル構造
 */
/*★★★*/
#f-login-box table {
  border-collapse: collapse;
}

/*★★★*/
#f-login-box table th {
  padding: 10px;
  font-size: 16px;
}

/*★★★*/
#f-login-box table td {
  padding: 10px;
  font-size: 16px;
}

/**
 * お知らせ
 */
/*★★★*/
#f-info-box {
  overflow-y: scroll;
  height: 200px;
}

/*#f-info-box li {
    display: block;
    margin-bottom: 10px;
}*/
/*#f-info-box li span.date {
    display: block;
}*/

/*----------------------------------------------------------------------------*
 * TOPページ
 *----------------------------------------------------------------------------*/
/**
 * お知らせ
 */
/*★★★*/
#f-info-box.noscroll {
  overflow: auto;
  /* スクロールを消す */
  height: auto;
  /* 固定高さを自動調整にする */
}

/*----------------------------------------------------------------------------*
 * 管理者ページ
 *----------------------------------------------------------------------------*/
#f-admin {
  clear: both;
}

#f-admin div.edit {
  width: 50%;
}

#f-admin div.list {
  width: 50%;
  padding-left: 30px;
  border-radius: 4px;
}

#f-admin div.list table {
  width: 100%;
  border-collapse: collapse;
}

#f-admin div.list table th {
  padding: 5px;
  background-color: #ececec;
  border: solid 1px #999;
}

#f-admin div.list table td {
  padding: 5px;
  background-color: #fff;
  border: solid 1px #999;
}

/*----------------------------------------------------------------------------*
 * 一覧ページ
 *----------------------------------------------------------------------------*/

/**
 * 検索ボックス
 */
/*★★★*/
#f-search-box {
  box-sizing: border-box;
  margin-bottom: 30px;
  width: 1400px;
}

/*★★★*/
#f-search-box table {
  border-collapse: collapse;
}

/*★★★*/
#f-search-box th {
  padding: 5px;
  text-align: left;
}

/*★★★*/
#f-search-box td {
  padding: 5px;
  white-space: nowrap;
}

/*★★★*/
#f-search-box i {
  /* 検索枠内部のアイコン */
  color: #0c4273;
  cursor: pointer;
}

/*★★★*/
#f-search-box .btn-search {
  /* 検索ボタン枠 */
  padding-top: 30px;
  text-align: center;
}

/* 追記20180918 */

/*装飾パターン1*/
/*#f-search-box table span.tit{
  background: #4d1a1f;
  color: #fff;
  border-radius: 2px;
  padding:4px;
  }*/

/*装飾パターン2
  #f-search-box table span.tit{
  color: #4d1a1f;
  border-left:6px solid #4d1a1f;
  border-radius: 3px;
  padding:5px;
  }*/

/**
 * 一覧
 */
/*★★★*/
div.f-list {
  /* 一覧枠 */
  margin-bottom: 30px;
}

/* 一覧上部メニューdiv.f-list-menu {
    margin-bottom: 10px;
    text-align: right;
} */
/* 一覧上のボタンdiv.f-list-menu button {
    background-color: #ccc;
    color: #333;
} */
/*★★★*/
div.f-list table {
  /* 一覧 */
  border-collapse: collapse;
}

/*div.w100 table {  一覧
    width: 100%;
}*/

/*★★★*/
div.f-list table th {
  /* 列タイトル */
  padding: 5px;
  background-color: #ca8f10;
  border: solid 1px #ccc;
  font-weight: normal;
  color: #fff;
  vertical-align: middle;
}

/* 列タイトルノーマル */
.normal {
  cursor: pointer !important;
}

.normal span {
  color: #fff;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: underline;
}

/* 列タイトル昇順 */
.asc {
  cursor: pointer !important;
}

.asc span {
  color: #fff;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: underline;
}

div.f-list table th.asc span:after {
  content: "\f0de";
}

/* 列タイトル降順 */
.desc {
  cursor: pointer !important;
}

.desc span {
  color: #fff;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  -webkit-font-smoothing: antialiased;
  text-decoration: underline;
}

div.f-list table th.desc span:after {
  content: "\f0dd";
}

/*★★★*/
div.f-list table td {
  padding: 5px;
  border: solid 1px #ccc;
}

/*★★★*/
div.deliver-list table tr:nth-child(2n-1) {
  background-color: #ececec;
}

div.m-list table td,
div.m-list table th {
  padding: 8px 12px;
}

div.m-list table th {
  background-color: #6495ed;
}

div.m-list .button {
  padding: 4px 16px;
  background-color: #a51111;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

div.m-list .link-sort,
.list .link-sort {
  cursor: pointer;
  margin-left: 4px;
}

/* ページャーのスタイル */
.pager .btn-move {
  padding-right: 25px;
  padding-left: 25px;
  /*padding: 0 10px;*/
}

.pager th {
  font-size: x-large;
  padding: 5px 15px 0 0;
}

/* 受注一覧用
div.f-list table.order-list tr {
    background-color: #ffffff;
}
*/

/* 背景個別指定 */
.bg-white {
  background-color: #ffffff;
}

.bg-yellow {
  background-color: #fff100 !important;
}

.bg-red {
  background-color: #ff0000 !important;
}

.bg-black {
  background-color: #000000 !important;
}

.bg-blue {
  background-color: #0000ff !important;
}

.bg-lightblue {
  background-color: #ccffff !important;
}

.bg-lightgreen {
  background-color: #fff100 !important;
}

.bg-gray {
  background-color: #dbdbdb !important;
}

.bg-pink {
  background-color: #ffc0cb !important;
}

.bg-darkviolet {
  color: #ffffff;
  background-color: #9400d3 !important;
}

/* フォントカラー個別指定 */
.font-white {
  color: #ffffff;
}

.font-yellow {
  color: #fff100;
}

.font-red {
  color: #ff0000;
}

.font-black {
  color: #000000;
}

.font-blue {
  color: #0000ff;
}

.font-lightblue {
  color: #ccffff;
}

.font-gray {
  color: #dbdbdb;
}

.font-pink {
  color: #ffc0cb;
}

.font-darkviolet {
  color: #9400d3;
}


/**
 * 一覧
 */
/* 一覧枠 div.p-list {
    margin-bottom: 10px;
}*/
/* 一覧上部メニューdiv.p-list-menu {
    margin-bottom: 10px;
    text-align: right;
} */
/* 一覧上のボタンdiv.p-list-menu button {
    background-color: #ccc;
    color: #333;
}*/
/* 一覧div.p-list table {
    width: 30%;
    border-collapse: collapse;
} */
/* 列タイトルdiv.p-list table th {
    padding: 5px;
    background-color: #636363;
    border: solid 1px #ccc;
    font-weight: normal;
    color: #fff;
    vertical-align: middle;
} */
/* 列タイトルノーマル */
div.p-list table th.normal {
  cursor: pointer;
}

div.p-list table th.normal span {
  color: #fff;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: underline;
}




/*----------------------------------------------------------------------------*
 * 詳細ページ
 *----------------------------------------------------------------------------*/

/**
 * 登録フォーム

div.f-edit {
    margin-bottom: 30px;
}
div.f-edit table {
    width: 100%;
}
div.f-edit table th {
    padding: 5px;
    text-align: left;
}
div.f-edit table td {
    padding: 5px;
}
 */
/*----------------------------------------------------------------------------*
 * 画面下部ボタン
 *----------------------------------------------------------------------------*/
/* 表下部のボタン枠div.bottom-button {
    padding: 30px 0 0 0;
    text-align: center;
} */
/* 表下部のボタンdiv.bottom-button button {
    width: auto;
    min-width: 150px; 最小幅
    padding: 15px 20px;
} */
/* 表下部のボタンの文字列div.bottom-button button span {
    font-size: 16px;
    font-weight: bold;
}*/

/* 非表示用クラス
.notDisp {
    display:none;
}*/

/*----------------------------------------------------------------------------*
 * 掲示板
 *----------------------------------------------------------------------------*/
.order-boards-form table td,
.order-boards-form table th {
  padding: 2px 4px;
  vertical-align: top !important;
}

.order-board-input {
  margin-bottom: 4px;
}

.order-board-input label {
  width: 54px;
  display: inline-block;
}

/*----------------------------------------------------------------------------*
 * 商社マスタ
 *----------------------------------------------------------------------------*/
.fm-company hr {
  margin-bottom: 20px;
}

.fm-company h3.sub-title {
  margin-bottom: 12px;
}

.fm-company table td,
.fm-company table th {
  padding-bottom: 8px;
}


.builder_person_cd1,
.builder_person_cd2 {
  width: 250px;
}

#fm .error {
  color: red;
}

.w-100 {
  width: 100%;
}

table.dataTable.stripe tbody tr.odd.selected,
table.dataTable.display tbody tr.odd.selected {
  background-color: #f5acac !important;
}

table.dataTable.stripe tbody tr.even.selected,
table.dataTable.display tbody tr.even.selected {
  background-color: #f5acac !important;
}

table.deliver tbody td.selected {
  background-color: #f5acac;
  font-weight: bold;
}

table.custom_table {
  margin-top: 10px;
  background-color: white;
  border: solid 1px #ccc;
}

table.custom_table th {
  background-color: #ca8f10;
  color: white;
  border: solid 1px #ccc;
  font-weight: normal;
}

table.custom_table td {
  border: solid 1px #ccc;
}

/* カレンダーカスタマイズ */
.calendar-saturday a.ui-state-default {
  background-color: #c1e0ff;
}

.calendar-sunday a.ui-state-default {
  background-color: #ffc1c1;
}

.calendar-holiday a.ui-state-default {
  background-color: #FFD07F;
}

.ui-datepicker-buttonpane .ui-priority-secondary {
  opacity: 1;
}

/* 一覧で入力表示チェック用のカラー */
.check {
  background-color: yellow;
}

/*----------------------------------------------------------------------------*
 * 共通パーツ追加
 *----------------------------------------------------------------------------*/
.container {
  width: 1400px;
}

/* 配送テーブル縦書きヘッダー */
.vertical-header {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: right !important;
}