/* -------------------------------------------
共通要素
---------------------------------------------- */
html {
  font-family: Helvetica, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
}

a {
  color: #07389c;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #003;
}

::-webkit-input-placeholder    {color: #777772}
::-moz-placeholder    {color: #777772}
:-ms-input-placeholder    {color: #777772}

pre {
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
}

.well {
  box-shadow: none;
  border: none;
  background: #f9f5f5;
}

@media (min-width: 768px) {
  .well .btn-lg {
    width: 450px;
    display: inline-block;
    margin: auto;
  }
}

.container {
  -webkit-tap-highlight-color: rgba(0,0,0,.25);
}

.container .btn,
.navbar-toggle,
.szbk-back-btn-area a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
}

#szbk-header {
  border-top: 2px solid /*#07389c*/ #b36662;
  background: #fff;
  margin-bottom: 23px;
  box-shadow: 0 1px 8px 1px rgba(0,0,0,.08);
}

@media (max-width: 767px) {
  .navbar-right {
    float: right !important;
    margin: 0;
    height: 50px;
  }
  .navbar-right>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

#szbk-header > .container > .navbar-header  {
  width: 100%;
}

.szbk-header-inner {
  width: 100%;
  display: table;
}

.szbk-header-inner .navbar-brand {
  padding-left: 0;
}

#szbk-header .szbk-header-nav {
  margin: 9px 0 0 20px;
}

#szbk-header .szbk-header-nav>li>a {
  color: #555;
  padding: 5px 0 3px;
  margin-right: 30px;
  border-radius: none;
}

#szbk-header .szbk-header-nav>li>a:focus,
#szbk-header .szbk-header-nav>li>a:hover {
  color: #0078d4;
  /* background: rgba(0,0,0,.2); */
}

#szbk-header .szbk-header-nav>.active>a,
#szbk-header .szbk-header-nav>.active>a:focus,
#szbk-header .szbk-header-nav>.active>a:hover {
  background: none;
  color: #0068b7;
  font-weight: bold;
  border-bottom: 2px solid #0068b7;
}

#szbk-header .navbar-right {
  margin-right: 0;
}

#szbk-header .navbar-right>li>a {
  color: #555;
}

#szbk-header .navbar-right>li>a:focus,
#szbk-header .navbar-right>li>a:hover {
  color: #0068b7;
  background: rgba(0,0,0,.02);
}

#szbk-header .navbar-right>.open>a,
#szbk-header .navbar-right>.open>a:focus,
#szbk-header .navbar-right>.open>a:hover {
  background: rgba(0,0,0,.04);
}

.szbk-logo {
  height: 31px;
  margin-top: -6px;
}

#szbk-footer {
  margin-top: 20px;
  padding: 20px;
  text-align: center;
  color: #aaa;
  background-color: #eee;
  border-top: 1px solid #c3c3c3;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 16px;
  font-weight: bold;
}

h1 {
  font-size: 22px;
  margin-bottom: 20px;
}

.szbk-title-id { /* 取引IO表示用h1 */
  font-size: 26px;
}

.szbk-title-id > small {
  font-size: 13px;
  display: block;
  margin-bottom: 3px;
}

@media (max-width: 767px) {
  .szbk-title-id {
    margin-bottom: 0;
  }
}

.panel-default {
  border-color: /*#999*/ #f3eeed;
}

.panel-default > .panel-heading {
  background-color: /*#f0f4fd*/ #f1eae9;
  border-bottom: 1px solid #fff;
}

.panel-danger {
  border-color: #d88;
}

.panel-group .panel-footer + .panel-footer {
  border-top: 1px solid #ddd;
}

h3, h4, h5, h6,
h3.panel-title ,
h4.panel-title ,
h5.panel-title ,
h6.panel-title  {
  font-size: 14px;
}

h3.panel-title ,
h4.panel-title ,
h5.panel-title ,
h6.panel-title {
  color: #222;
}

.panel-danger > .panel-heading {
  background-color: #ffebef;
}

.panel-danger > .panel-heading > h3.panel-title ,
.panel-danger > .panel-heading > h4.panel-title ,
.panel-danger > .panel-heading > h5.panel-title ,
.panel-danger > .panel-heading > h6.panel-title {
  color: #b22;
}

.panel-info {
  border-color: #aaa;
}

.panel-info>.panel-heading {
  background-color: #ddd;
  border-color: #ccc;
}

.panel-info > .panel-heading > h3.panel-title ,
.panel-info > .panel-heading > h4.panel-title ,
.panel-info > .panel-heading > h5.panel-title ,
.panel-info > .panel-heading > h6.panel-title {
  color: #222;
}

.panel-info > .table .fa-refresh {
  color: #999;
}

/* コンテンツエリアの最初に配置する見出しは上余白を省略 */
#szbk-main-content h1:first-child,
#szbk-main-content h2:first-child,
#szbk-main-content h3:first-child,
#szbk-main-content h4:first-child,
#szbk-main-content h5:first-child,
#szbk-main-content h6:first-child {
  margin-top: 0;
}

.label {
  font-weight: normal;
}

.label-danger {
  background-color: #c53700;
}

.label-default {
  background-color: #FFF;
  border: 1px solid #ddd;
  color: #777;
  font-weight: normal;
}

.label-success {
  background-color: #40a140;
}

.label-info {
  background-color: #3baccd;
}

.alert-success {
  background-color: #D6F1E2;
  border-color: #bde9d1;
}

.alert-danger {
  background-color: #ffebef;
  border-color: #FADCE2;
}

.btn-default {
  color: #07389c;
  border-color: #07389C;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
  background-color: #ecf7ff;
  color: #002570;
  border-color: #07389C;
}

.btn-danger {
  color: #c00;
  border-color: #c00;
  background-color: #FFF;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
  background-color: #c00;
  color: #fff;
  border-color: #c00;
}

.btn-primary {
  background-color: #9c2f29;
  border-color: #9c2f29;
  font-weight: bold;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
  background-color: #7b1a15;
  border-color: #7b1a15;
}

.btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
  background-color: #91d8b0;
  border-color: #91d8b0;
}

.btn-link {
  color: #07389c;
}

.btn-link:hover {
  text-decoration: none;
}

.btn-link:active {
  background: rgba(0,0,0,.05);
}

/* フォームコントロールへのフォーカスで自動ズームしないよう、フォントサイズ拡大 */
/* 左右の余白が空き過ぎなので調整 */
.form-control {
  font-size: 16px;
  padding: 6px;
}

.form-inline select.form-control {
  margin-bottom: 5px;
}

.form-control.input-lg {
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
}

/* 複数ボタンを格納するWellとその中に配置するボタンは、ボタンが折り返してもレイアウトが崩れないよう余白調整 */
.well-sm {
  padding: 4px;
}

.table>tbody>tr.danger>th,
.table>tbody>tr>th.danger,
.table>tfoot>tr.danger>th,
.table>tfoot>tr>th.danger,
.table>thead>tr.danger>th,
.table>thead>tr>th.danger,
.szbk-table-form>.table>tbody>tr.danger>th {
  background-color: #f7dee3;
}

.table>tbody>tr.danger>td,
.table>tbody>tr>td.danger,
.table>tfoot>tr.danger>td,
.table>tfoot>tr>td.danger,
.table>thead>tr.danger>td,
.table>thead>tr>td.danger {
  background-color: #ffebef;
}

/* -------------------------------------------
データグリッド
---------------------------------------------- */
.table-striped > tbody > tr > th {
    background-color: #eaeaea;
}

.table-responsive .label {
  font-weight: normal;
  margin-top: 2px;
}

.table-responsive .btn-group {
  white-space: nowrap;
}

.table-responsive .btn-group > .btn {
  float: none;
  display: inline-block;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:focus > td,
.table-hover > tbody > tr:active > td {
  background-color: #ecf7ff;
  cursor: pointer;
}

/* table-responsive のスタイルを全画面サイズに適用 */
@media (min-width: 768px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}

/* -------------------------------------------
パネル
---------------------------------------------- */
.panel-heading,
.panel-body,
.panel-footer {
  padding: 10px;
}

/* メッセージパネル */
.szbk-panel-message.szbk-panel-message {
  margin-bottom: 45px;
}

/* パネルフッターに追加して、wellと同様の背景色を持つサブミットボタン配置エリアとして表現する */
.szbk-panel-submit-area {
  background-color: #ecf7ff;
  text-align: center;
}

@media (min-width: 768px) {
  .szbk-panel-submit-area .btn-lg {
    width: 450px;
    display: inline-block;
    margin: auto;
  }
}

/* Collapse Panel内にList-groupを入れたときの不要な余白とボーダーをなくす */
.panel-group .list-group {
  margin-bottom: 0;
}

.panel-group .list-group .list-group-item {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.panel-group .list-group .list-group-item:last-child {
  border-bottom: none;
}

/* Panel-headerの右端に表示したBadgeの上下方向配置調整（iOS向け） */
.panel-heading .badge {
  margin-top: -2px;
}

.panel > .table .fa-phone,
.panel > .table .fa-envelope-o {
  color: #999;
}

/* -------------------------------------------
タブ
---------------------------------------------- */
.tab-pane {
  margin: 10px 0 0;
}

/* -------------------------------------------
ドロワー（スライドメニュー）
---------------------------------------------- */
.navbar-toggle {
  /*float: left;*/
  padding: 2px;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: rgba(0,0,0,.04);
}

#szbk-btn-drawer-toggle {
  margin: 2px -5px 0 0;
}

.navbar-default .navbar-toggle {
  border: none;
}

/* ヘッダーのボタンが画面端に接触するのを回避 */
@media (max-width: 767px) {
  .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-left: 0;
    margin-right: 0;
  }
}

.panel-heading > .panel-title > a {
  display: block;
  padding: 10px;
  margin: -10px;
}

/* -------------------------------------------
追加要素（ID/class名には接頭辞"szbk-"を付けること）
---------------------------------------------- */
/* 余白調整 */
.szbk-m0 { margin: 0!important; }
.szbk-mt0 { margin-top: 0!important; }
.szbk-mb0 { margin-bottom: 0!important; }
.szbk-ml0 { margin-left: 0!important; }
.szbk-mr0 { margin-right: 0!important; }
.szbk-m5 { margin: 5px!important; }
.szbk-mt5 { margin-top: 5px!important; }
.szbk-mb5 { margin-bottom: 5px!important; }
.szbk-ml5 { margin-left: 5px!important; }
.szbk-mr5 { margin-right: 5px!important; }
.szbk-m10 { margin: 10px!important; }
.szbk-mt10 { margin-top: 10px!important; }
.szbk-mb10 { margin-bottom: 10px!important; }
.szbk-ml10 { margin-left: 10px!important; }
.szbk-mr10 { margin-right: 10px!important; }
.szbk-m20 { margin: 20px!important; }
.szbk-mt20 { margin-top: 20px!important; }
.szbk-mb20 { margin-bottom: 20px!important; }
.szbk-ml20 { margin-left: 20px!important; }
.szbk-mr20 { margin-right: 20px!important; }

.szbk-p0 { padding: 0!important; }
.szbk-pt0 { padding-top: 0!important; }
.szbk-pb0 { padding-bottom: 0!important; }
.szbk-pl0 { padding-left: 0!important; }
.szbk-pr0 { padding-right: 0!important; }
.szbk-p5 { padding: 5px!important; }
.szbk-pt5 { padding-top: 5px!important; }
.szbk-pb5 { padding-bottom: 5px!important; }
.szbk-pl5 { padding-left: 5px!important; }
.szbk-pr5 { padding-right: 5px!important; }
.szbk-p10 { padding: 10px!important; }
.szbk-pt10 { padding-top: 10px!important; }
.szbk-pb10 { padding-bottom: 10px!important; }
.szbk-pl10 { padding-left: 10px!important; }
.szbk-pr10 { padding-right: 10px!important; }
.szbk-p20 { padding: 20px!important; }
.szbk-pt20 { padding-top: 20px!important; }
.szbk-pb20 { padding-bottom: 20px!important; }
.szbk-pl20 { padding-left: 20px!important; }
.szbk-pr20 { padding-right: 20px!important; }

/* Vertical align */
.szbk-vat { vertical-align: top !important; }
.szbk-vam { vertical-align: middle !important; }
.szbk-vab { vertical-align: bottom !important; }

.szbn-val-middle{
    height: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: auto !important;
}
/* 小さい文字 */
.szbk-text-sub {
  margin-top: 2px;
  margin-bottom: 0;
  font-size: 12px;
}

/* 前の画面に戻るバー */
.szbk-back-btn-area {
  margin-top: -23px;
  margin-bottom: 23px;
  background: #0068b7;
  box-shadow: 0 1px 6px 3px rgba(0,0,0,.1);
}

.szbk-back-btn-area a {
  color: #fff;
  font-size: 12px;
  display: inline-block;
  width: auto;
  padding: 7px 10px 7px 0;
}

.szbk-back-btn-area a:hover {
  color: #eee;
  text-decoration: none;
}

.szbk-back-btn-area .fa {
  /*color: #ccc;*/
}

/* ドロワー付きページでは、ドロワーとコンテンツエリア間の白い余白を無くすため、body背景を黒くする */
.szbk-with-drawer {
  background: #333;
}

/* グリッド内のチェックボックス列の幅指定 */
.table-responsive > .table > tbody > tr > th.szbk-row-selector,
.table-responsive > .table > tbody > tr > td.szbk-row-selector  {
  width: 30px;
}

/* グリッド内の詳細／編集ボタン列の幅指定 */
.table-responsive > .table > thead > tr > th.szbk-col-btn-group,
.table-responsive > .table > tbody > tr > th.szbk-col-btn-group,
.table-responsive > .table > tbody > tr > td.szbk-col-btn-group  {
  width: 84px;
}

/* 状況表示列内のlabelを幅いっぱいに表示 */
.table-responsive > .table .text-center .label {
  display: block;
}

/* 画面サイズが小さいときに.btn-groupが改行されてしまうのを防止 */
@media (max-width: 767px) {
  .table-responsive > .table > tbody > tr > td.szbk-col-btn-group > .btn-group  {
    display: table;
    width: 84px;
    table-layout: fixed;
  }
}


.szbk-wid35p { width: 35%; display: inline; }

@media (min-width: 768px) {
  .table-responsive > .table > tbody > tr > td.szbk-col-btn-group > .btn-group  {
    display: table;
    width: 84px;
    table-layout: fixed;
  }
}

/* 注文一覧内簡易検索フォーム */
.szbk-btn-adv-search {
  margin-top: 3px;
}

/* 注文一覧データグリッドの件数表示 */
.szbk-result-count {
  color: #666;
  margin: 10px 0 0;
  display: inline-block;
  font-size: 12px;
}

@media (max-width: 767px) {
  .szbk-result-count {
    /*margin-top: 5px;*/
    /*margin-bottom: 15px;*/
    margin-top: 10px;
    margin-bottom: 0;
  }
}

/* 注文一覧データグリッドのCSV関連リンク */
.szbk-csv-links {
  display: inline-block;
  margin-left: 30px;
  font-size: 12px;
}

/* ファイル選択ダイアログを表示するためのリンク */
.szbk-btn-file-chooser {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 450px;
  margin: 10px auto -6px;
}

.szbk-btn-file-chooser input[type=file] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.szbk-upload-value {
  display: none;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  padding: 3px;
  color: #fff;
}

/* 注文一覧の絞り込み検索フォーム */
@media (max-width: 768px) {
  .szbk-order-searcharea input,
  .szbk-order-searcharea .input-group {
    margin-bottom: 5px;
  }
}

@media (min-width: 767px) {
  .szbk-order-searcharea select.form-control {
    margin-bottom: 0;
  }
  .szbk-order-searcharea .form-control {
    width: 200px;
  }
  .szbk-order-searcharea .input-group > .form-control {
    width: 220px;
  }
  .szbk-order-searcharea > .btn {
    margin-top: 5px;
  }
  .szbk-order-searcharea > .btn-sm {
    margin-top: 9px;
  }
}

@media (min-width: 768px) {
  .szbk-order-searcharea .form-control {
    width: 200px;
  }
  .szbk-order-searcharea .input-group > .form-control {
    width: 220px;
  }
  #szbk-order-searchbox {
    width: 250px;
  }
  .szbk-order-searcharea > .btn {
    margin-top: 0;
  }
  .szbk-order-searcharea > .btn-sm {
    margin-top: 2px;
  }
}

/* 注文一覧上部の詳細検索条件表示エリア */
.szbk-order-searchcriteria .well {
  margin-bottom: 0;
  background-color: #FFF;
  border: 1px solid #ddd;
  padding: 10px;
}

.szbk-order-searchcriteria .szbk-text-sub {
  font-size: 11px;
}

@media (max-width: 767px) {
  .szbk-order-searchcriteria .btn {
    margin-top: 10px;
  }
}

/* ソート列の表現 */
.szbk-col-sort.szbk-col-sort:hover,
.szbk-col-sort.szbk-col-sort:focus {
  background-color: #f3f3f3;
  color: #e5007d;
  cursor: pointer;
}

.szbk-col-sorted {
  color: #c0105d;
}

/* フォーム用テーブル */
.szbk-table-form > .table {
  margin-bottom: 0;
  border-bottom: 1px solid #ddd;
}

.szbk-table-form > .table > tbody > tr > th {
  background: #f9f9f9;
  font-weight: normal;
  border-left: 1px solid #ddd;
  width: 200px;
}

.szbk-table-form > .table > tbody > tr > th > label {
  font-weight: normal;
  font-size: 12px;
}

@media (min-width: 768px) {
  .szbk-table-form > .table > tbody > tr > th {
    position: relative;
  }
  .szbk-table-form > .table > tbody > tr > th > label {
    padding-right: 35px;
  }
  .szbk-table-form > .table > tbody > tr > th > .label {
    position: absolute;
    right: 8px;
    top: 10px;
  }
}

.szbk-table-form > .table > tbody > tr > td {
  border-right: 1px solid #ddd;
}

/* 画像がテーブル外にはみ出ないよう調整 */
.szbk-table-form > .table > tbody > tr > td >img {
  max-width: 100%;
}

/* 汎用の実行ボタン配置エリア */
.szbk-btn-area {
  background: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
}

/* 汎用の実行ボタン配置エリア：フォーム内にある場合は上ボーダーを省略 */
.szbk-table-form > .szbk-btn-area {
  border-top: none;
}

/* 画面サイズが小さいときはラベルとコントロールを縦に並べる */
@media (max-width: 767px) {
  .szbk-table-form > .table,
  .szbk-table-form > .table > tbody,
  .szbk-table-form > .table > tbody > tr,
  .szbk-table-form > .table > tbody > tr > th,
  .szbk-table-form > .table > tbody > tr > td {
    display: block;
    width: 100%;
  }
  .szbk-table-form > .table > tbody > tr > th {
    padding: 2px 4px 0;
    border-right: 1px solid #ddd;
    text-indent: 2px;
  }
  .szbk-table-form > .table > tbody > tr > th .label {
    margin-top: 4px;
    margin-right: 3px;
  }
  .szbk-table-form > .table > tbody > tr > th .label-default { /* ボーダー付加分の余白調整 */
    margin-top: 3px;
  }
  .szbk-table-form > .table > tbody > tr > td {
    border-left: 1px solid #ddd;
  }
}

/* 画面サイズに関わらず強制的に縦並びにする */
.szbk-table-form-vertical > .table,
.szbk-table-form-vertical > .table > tbody,
.szbk-table-form-vertical > .table > tbody > tr,
.szbk-table-form-vertical > .table > tbody > tr > th,
.szbk-table-form-vertical > .table > tbody > tr > td {
  display: block;
  width: 100%;
}
.szbk-table-form-vertical > .table > tbody > tr > th {
  padding: 2px 4px 0;
  border-right: 1px solid #ddd;
  text-indent: 2px;
}
.szbk-table-form-vertical > .table > tbody > tr > th .label {
  margin-top: 4px;
  margin-right: 3px;
}
.szbk-table-form-vertical > .table > tbody > tr > th .label-default { /* ボーダー付加分の余白調整 */
  margin-top: 3px;
}
.szbk-table-form-vertical > .table > tbody > tr > td {
  border-left: 1px solid #ddd;
}

/* 入力項目間に入れる区切り文字（?） */
.szbk-form-control-delimiter {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

/* input-groupのbtn-defaultのボーダーがデフォルト青だと不自然なため調整 */
.input-group .input-group-btn .btn-default {
  border-color: #ccc;
}

/* ステップ表示パネル */
.szbk-panel-step {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.szbk-panel-step > .panel-footer {
  background-color: #fcf8e3;
  border-top: 3px solid #fff;
  text-align: center;
}

.szbk-panel-footer-success.szbk-panel-footer-success {
  background-color: #c9d4ef;
}

.szbk-panel-step > .panel-footer > p {
  margin-bottom: 0;
  font-size: 12px;
}

.szbk-panel-step > .panel-footer > .text-success,
.alert-success > .text-success {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}

.szbk-panel-step > .panel-footer > .btn.btn {
  margin-top: 10px;
}

.szbk-panel-step > .panel-footer > .text-success > .btn
.alert-success > .text-success > .btn {
  vertical-align: 3px;
}

@media (min-width: 768px) {
  .szbk-panel-step > .panel-footer .btn,
  .alert-success > .text-success > .btn {
    width: 120px;
    margin-left: 20px;
  }
}

@media (max-width: 767px) {
  .szbk-panel-step > .panel-footer,
  .alert-success > .text-success {
    text-align: left;
  }
  .szbk-panel-step > .panel-footer > .text-success,
  .alert-success > .text-success {
    margin-top: 0;
    margin-bottom: 0;
  }
  .szbk-panel-step > .panel-footer > .text-success > .fa {
    display: block;
    font-size: 36px;
    margin: 5px auto 15px;
  }
}

.szbk-step-indicator { /* ステップインジケーター本体 */
  width: 100%;
}

.szbk-step-indicator td {
  width: 25%;
  text-align: center;
  background-color: #f3f3f3;
  height: 50px;
  font-size: 16px;
  color: #aaa;
  font-weight: bold;
  text-indent: -.7em;
}

.szbk-step-indicator td:first-child {
  -webkit-border-top-left-radius: 5px;
          border-top-left-radius: 5px;
}

.szbk-step-indicator td:last-child {
  -webkit-border-top-right-radius: 5px;
          border-top-right-radius: 5px;
}

.szbk-panel-step-standalone .szbk-step-indicator td:first-child {
  -webkit-border-bottom-left-radius: 5px;
          border-bottom-left-radius: 5px;
}

.szbk-panel-step-standalone .szbk-step-indicator td:last-child {
  -webkit-border-bottom-right-radius: 5px;
          border-bottom-right-radius: 5px;
}

.szbk-step-indicator .szbk-step-done {
  background-color: #c9d4ef;
  color: #98a8d0;
}

.szbk-step-indicator .szbk-step-active {
  background-color: #335599;
  color: #FFFFFF;
}

.szbk-step-indicator .szbk-step-danger {
  background-color: #FFB3B9;
  color: #900;
}

.szbk-step-bg-done-to-done {
  background: url("../assets/img/szbk-step-done-to-done.gif") right no-repeat;
  background-size: contain;
}

.szbk-step-bg-done-to-active {
  background: url("../assets/img/szbk-step-done-to-active.gif") right no-repeat;
  background-size: contain;
}

.szbk-step-bg-done-to-danger {
  background: url("../assets/img/szbk-step-done-to-danger.gif") right no-repeat;
  background-size: contain;
}

.szbk-step-bg-done-to-default {
  background: url("../assets/img/szbk-step-done-to-default.gif") right no-repeat;
  background-size: contain;
}

.szbk-step-bg-active-to-default {
  background: url("../assets/img/szbk-step-active-to-default.gif") right no-repeat;
  background-size: contain;
}

.szbk-step-bg-default-to-default {
  background: url("../assets/img/szbk-step-default-to-default.gif") right no-repeat;
  background-size: contain;
}

.szbk-step-bg-danger-to-default {
  background: url("../assets/img/szbk-step-danger-to-default.gif") right no-repeat;
  background-size: contain;
}

/* 注文登録日／加盟店取引ID表示エリア */
.szbk-order-property {
  text-align: right;
  margin-top: 22px;
}

.szbk-order-property dt,
.szbk-order-property dd {
  display: inline-block;
}

.szbk-order-property dt {
  font-weight: normal;
  font-size: 13px;
  color: #767676;
  margin-right: 5px;
}

.szbk-order-property dd {
  font-weight: bold;
}

.szbk-order-property dd + dt {
  margin-left: 35px;
}

.szbk-order-property .text-muted {
  font-size: 13px;
  font-weight: normal;
}

.szbk-status-label > .label {
  display: inline-block;
  width: 94px;
  font-size: 10.5px;
}

@media (max-width: 767px) {
  .szbk-order-property {
    float: right;
    margin-top: 10px;
  }
  .szbk-order-property dt,
  .szbk-order-property dd {
    float: left;
    padding-bottom: 2px;
  }
  .szbk-order-property dt {
    width: 100px;
  }
  .szbk-order-property dd {
    margin-top: -1px;
  }
  .szbk-order-property dd + dt {
    margin-left: 0;
    clear: both;
  }
  .szbk-order-property .szbk-status-label {
    float: right;
    padding-top: 5px;
    margin-right: 0;
  }
}

/* 明細ボックス（明細入力用フォーム） */
.szbk-order-item-box > .table {
  border: 1px solid #ccc;
  background: #f6f6f6;
  padding: 5px 5px 0;
  margin-bottom: 10px;
}

.szbk-order-item-box > .table > tbody > tr > th,
.szbk-order-item-box > .table > tbody > tr > td {
  border: none;
  background: none;
}

/* 「請求書の情報」パネル */
.szbk-panel-invoice-info > .table > tbody > tr> th {
  background-color: #f6f6f6;
  color: #666;
}

/* エラー時のパネル */
.szbk-panel-disabled {
  background-color: #f0f0f0;
  color: #aaa;
  border-color: #b22;
}

.szbk-panel-disabled > .panel-heading {
  background-color: #b22;
}

.szbk-panel-disabled .table > tbody > tr> th {
  background: #ddd;
  color: #999;
}

.szbk-panel-disabled .label-danger {
  background: #600;
}

.szbk-panel-disabled .text-danger {
  color: #aaa;
}

.szbk-panel-disabled .table-striped td {
  background: #eee;
}

.szbk-panel-disabled > .panel-heading > h3.panel-title ,
.szbk-panel-disabled > .panel-heading > h4.panel-title ,
.szbk-panel-disabled > .panel-heading > h5.panel-title ,
.szbk-panel-disabled > .panel-heading > h6.panel-title {
  color: #fff;
}

/* 注文内容ボックス */
.szbk-order-detail-box {
  margin: 5px;
  border: 3px solid #e4e4e4;
  border-right-width: 4px;
  border-left-width: 4px;
}

.szbk-order-detail-box > .table > tbody > tr > td {
  border-left: none;
  border-right: none;
}

/* 注文内容の「変更」ボタン */
 .szbk-btn-order-edit {
   margin: 5px;
 }

/* ログイン画面でも長いシステム名を「...」で省略 */
.szbk-header-login .navbar-brand {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ログイン画面のszbk-table-formはパネル内に格納するため角丸を追加 */
.szbk-container-login .szbk-table-form > .table > tbody > tr > td {
  border-right: none;
  border-left: none;
}

.szbk-container-login .szbk-table-form > .table > tbody > tr:first-child > td {
  border-top: none;
}

.szbk-container-login .szbk-btn-area {
  border: none;
  border-top-width: 1px;
  -webkit-border-bottom-left-radius: 5px;
          border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
          border-bottom-right-radius: 5px;
}

/* ログイン画面の著作権表示 */
.szbk-container-login small {
  display: block;
  margin-top: 40px;
  text-align: center;
  color: #bbb;
}

/* ログイン画面用幅調整 */
@media (max-width: 767px) {
  .szbk-header-login .navbar-brand {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
  }
  .szbk-container-login {
    width: 480px;
  }
}

@media (min-width: 768px) {
  .szbk-header-login .navbar-brand {
    width: 100%;
    text-align: center;
    margin: 0;
  }
  .szbk-container-login {
    width: 480px;
  }
  .navbar>.container .navbar-brand,
  .navbar>.container-fluid .navbar-brand {
    margin-left: 0;
  }
}

/* パネルのヘッダー右端に配置するボタン */
.panel-heading > .panel-title > .btn {
  display: inline-block;
  padding: 2px 4px;
  float: right;
  margin: 5px -5px 5px 5px;
  color: #07389c;
}

/* 手続き状況の行内ボタン */
.szbk-btn-aside {
  margin-left: 20px;
}

@media (max-width: 450px) {
  .szbk-btn-aside {
    margin: 10px 0 3px 1.9em;
  }
}

/* 問い合わせ先表示用テーブル */
.szbk-table-inquiry {
  margin-top: 10px;
  margin-bottom: 0;
  background-color: #FFF;
  border: 1px solid #aaa;
  outline: solid 3px #fff;
}

.szbk-table-inquiry > tbody > tr > th > h4 {
  margin: 0;
}

.szbk-table-inquiry > tbody > tr > th {
  font-weight: normal;
  font-size: 12px;
  background-color: #f9f9f9;
  width: 200px;
}

.szbk-table-inquiry > tbody > tr:first-child > th {
  border: none;
}

/* 一覧やフォームでエラー行が連続した場合の区切りをはっきりさせる */
.table > tbody > tr.danger + tr.danger > th,
.table > tbody > tr.danger + tr.danger > td {
  /* border-top-color: #fff; */
  border-top-color: #d3c6c6;
}

/* アコーディオン用リンク */
.panel-default .szbk-accordion-toggle:active { /* タップ時の背景色ハイライト */
  background: /*#dae6ff*/ #b9ddf5;
}

.szbk-accordion-toggle:hover,
.szbk-accordion-toggle:focus,
.szbk-accordion-toggle:active { /* テキストリンクの下線を削除 */
  text-decoration: none;
  cursor: pointer;
}

.panel-default .szbk-accordion-toggle:hover,
.panel-default .szbk-accordion-toggle:focus,
.panel-default .szbk-accordion-toggle:active { /* テキストリンクの下線を削除 */
  color: #555;
}

.panel-info .szbk-accordion-toggle:active { /* タップ時の背景色ハイライト */
  background: #ccc;
}

.panel-info .szbk-accordion-toggle:hover,
.panel-info .szbk-accordion-toggle:focus,
.panel-info .szbk-accordion-toggle:active { /* テキストリンクの下線を削除 */
  color: #666;
}

/* 赤いBadge */
.szbk-badge-danger,
.panel-default>.panel-heading .szbk-badge-danger {
  background-color: #d9534f;
}

/* Panel内の変更ボタン付きテーブルでは上ボーダーが省略されないようにする（加盟店情報画面等） */
.panel > .table > tbody:first-child > tr:first-child td .szbk-table-form .table > tbody:first-child > tr td,
.panel > .table > tbody:first-child > tr:first-child td .szbk-table-form .table > tbody:first-child > tr th {
  border-top: 1px solid #ddd;
}

/* Panelに直接配置したテーブルの左下／右下角の角丸が綺麗に表示されるようにする */
.panel > .table:last-child,
.panel > .panel-collapse > .table:last-child {
  border-radius: 3px;
}

.panel > .table:last-child tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child tbody:last-child > tr:last-child th:first-child,
.panel > .panel-collapse > .table:last-child tbody:last-child > tr:last-child td:first-child,
.panel > .panel-collapse > .table:last-child tbody:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: 3px;
}

.panel > .table:last-child tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child tbody:last-child > tr:last-child th:last-child,
.panel > .panel-collapse > .table:last-child tbody:last-child > tr:last-child td:last-child,
.panel > .panel-collapse > .table:last-child tbody:last-child > tr:last-child th:last-child  {
  border-bottom-right-radius: 3px;
}

/* お知らせ用表示列 */
.szbk-newscol.szbk-newscol {
  vertical-align: top;
  font-size: 12px;
  padding-top: 10px;
  width: 80px;
}

.szbk-newscol .label {
  display: block;
}

/* 入金＆稼働日カレンダー */
.szbk-business-calendar th {
  font-size: 12px;
  color: #767676;
}

.szbk-business-calendar td {
  font-size: 11px;
  text-align: center;
  padding: 3px!important;
}

.szbk-business-calendar td > p {
  font-size: 12px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 0;
}

.szbk-bc-highlight1.szbk-bc-highlight1 { /* サポートデスク休業日 */
  background-color: #f3f3f3;
  text-align: center;
}

.szbk-bc-highlight2.szbk-bc-highlight2 { /* 休業日 */
  background-color: #f8eded;/*#f2dede*/
  text-align: center;
}

.szbk-bc-highlight3.szbk-bc-highlight3 { /* 特別営業日 */
  background-color: #d9edf7;
  text-align: center;
}

.szbk-bc-highlight4.szbk-bc-highlight4 { /* 立替払い日 */
  background-color: #fff8d6;
  text-align: center;
}



/* Modal */
.modal-header {
  padding: 10px;
  background: #0068b7;
  color: #FFF;
  -webkit-border-top-left-radius: 5px;
          border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
          border-top-right-radius: 5px;
}

.modal-header .close {
  color: #fff;
  opacity: .3;
}

.modal-header .close:hover,
.modal-header .close:focus {
  opacity: 1;
}

.modal-footer {
  background-color: #ecf7ff;
  -webkit-border-bottom-left-radius: 5px;
          border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
          border-bottom-right-radius: 5px;
}

/* modal-footerにひとつだけ表示するプライマリーボタン */
.szbk-btn-modal-primary {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .szbk-btn-modal-primary {
    width: 450px;
  }
}

/* Youtube動画の埋め込み */
.szbk-movie-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.szbk-movie-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 詳細検索画面のリセットボタン下部の余白調整 */
@media (max-width: 991px) {
  .szbk-btn-reset-criteria {
    margin-bottom: 10px;
  }
}

/* 矢印 */
/* 下 */
.downArrow{
  position: relative;
  width: 51%;
  height: 20px;
  border-right: 35px solid #fff;
  box-sizing: border-box;
}
.downArrow::after{
  content: "";
  position: absolute;
  bottom: -17px;
  right: -270px;
  border-top: 35px solid #7d001a;
  border-left: 240px solid transparent;
  border-right: 240px solid transparent;
}
@media (max-width: 991px) {
  .downArrow::after{
    content: "";
    position: absolute;
    bottom: -15px;
    right: -190px;
    border-top: 30px solid #7d001a;
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
  }
}
/* -------------------------------------------
daterangepicker.cssのスタイルを上書き
---------------------------------------------- */
.date-picker-wrapper {
  font-size: 13px;
  border: 1px solid #aaa;
  padding: 5px;
  box-shadow: 0 5px 18px 1px rgba(0,0,0,0.2);
}

.date-picker-wrapper.no-topbar {
  padding-top: 5px;
}

.date-picker-wrapper.no-shortcuts {
  padding-bottom: 5px;
}

.date-picker-wrapper .month-wrapper table,
.date-picker-wrapper .month-wrapper table.month2 {
  width: 259px;
}

.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev
{
  display: block;
  padding: 12px 5px;
  font-size: 18px;
}

.date-picker-wrapper .month-name {
  color: #000;
  font-size: 16px;
}

.date-picker-wrapper .month-wrapper table .week-name th {
  font-weight: normal;
}

.date-picker-wrapper .month-wrapper table .week-name th:first-child {
  color: #e5007d;
}

.date-picker-wrapper .month-wrapper table .week-name th:last-child {
  color: #3baccd;
}

.date-picker-wrapper .month-wrapper table .day {
  font-size: 16px;
  padding: 8px 0;
  width: 37px;
}

.date-picker-wrapper .month-wrapper table .day:hover {
  background-color: #cdecfa;
}


/* コンテンツ埋め込み洋iframe */
.szbk-content-frame {
  width: 100%;
  margin-bottom: 20px;
  border: none;
  vertical-align: bottom;
  -webkit-border-bottom-left-radius: 5px;
          border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
          border-bottom-right-radius: 5px;
}
.szbk-table-embed {
  margin-bottom: 0;
}

.szbk-table-embed a .fa {
  margin-right: 5px;
}

.szbk-panel-embed {
  width: 99.9%;
}

/* バナー画像配置用パネル */
.szbk-panel-banner a {
  display: inline-block;
  margin: 5px;
}
.szbk-panel-banner a > img {
  width: auto;
  max-width: 100%;
}
.szbk-panel-banner a + a {
  margin-top: 5px;
}

@media (min-width: 1200px) {
  .szbk-panel-banner a {
    display: block;
    margin: auto;
  }

  .szbk-panel-banner a > img {
    max-width: 100%;
    display: block;
    margin: auto;
  }

  .szbk-panel-banner a + a {
    margin-top: 10px;
  }
}

/* グリッドシステムの溝幅調整用 */
@media (max-width: 767px) {
  .szb-gutter-xs-10 {
    margin-left: -5px;
    margin-right: -5px;
  }
  .szb-gutter-xs-10 > [class*='col-'] {
    padding-left: 5px;
    padding-right: 5px;
  }
  .szb-gutter-xs-10 .input-group-addon {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.szb-text-normal {
  white-space: normal;
}






.list_service,
.list_service_btns {
  overflow: hidden
}


.list_service_btn_login a:hover,
.list_service_btn_service a:hover {
  opacity: .4
}

.list_service {
  margin: 0 auto
}

@media (max-width:991px) {
  .list_service {width: 710px;}
  .list_service_title {
    width: 98%;
    margin: 10px auto;
  }
}
@media (min-width:992px) {
  .list_service {width: 880px;}
  .list_service_title {
    width: 880px;
    margin: 10px auto;
  }
}

.list_service_item {
  float: left;
  width: 25%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 10px solid #eee;
  margin-bottom: 40px;
  clear: right
}



.list_service_item_inner {
  padding: 23px 20px 22px
}

.list_service_name {
  font-size: 12px;
  text-align: center;
}

.list_service_banner {
  margin-bottom: 19px
}

.list_service_banner img {
  width: 100%
}

.list_service_btn {
  margin: 0 auto;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.list_service_btn a {
  border: 2px solid #7d001a;
  border-radius: 7px;
  width: 100%;
  display: block;
  text-align: left;
  text-decoration: none;
  color: #7d001a;
  font-size: 12px;
  line-height: 30px;
  background: 18px center no-repeat;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box
}

.list_service_btn_login a,
.list_service_btn_service a {
  background-size: 19px;
  -webkit-transition: all .4s cubic-bezier(.26, .06, 0, 1)
}



.list_service_btn_service a {
  background-image: url(../img/list/icon_info.png);
  transition: all .4s cubic-bezier(.26, .06, 0, 1);
  padding: 0px 20px;
}

.list_service_btn_login a {
  background-image: url(../img/list/icon_login.png);
  transition: all .4s cubic-bezier(.26, .06, 0, 1)
}

.list_service_btn_entry a {
  color: #fff;
  background-color: #7d001a;
  background-image: url(../img/list/icon_entry_off.png);
  background-size: 24px;
  -webkit-transition: all .4s cubic-bezier(.26, .06, 0, 1);
  transition: all .4s cubic-bezier(.26, .06, 0, 1)
}

.list_service_btn_entry a:hover {
  color: #7d001a;
  background-color: #fff;
  background-image: url(../img/list/icon_entry_on.png)
}

@media only screen and (max-width:766px) {
  .list_service {
    width: auto;
    padding: 21px 16px 6px
  }
  .list_service_item {
    width: 100%;
    margin-bottom: 18px
  }
  .list_service_banner,
  .list_service_name {
    margin-bottom: 13px
  }
  .list_service_item_inner {
    padding: 17px 9px 3px
  }
  .list_service_name {
    font-size: 15px;
    line-height: 1.4
  }
  .list_service_btn {
    width: 80%;
    float: none;
    height: 40px;
    margin-bottom: 10px;
    margin: auto;
  }
  .list_service_btn a {
    width: auto;
    font-size: 12px;
    background-position: 8px center;
    line-height: 25px;
    text-align: center;
    padding: 0
  }
  .list_service_btn:nth-child(2n) {
    float: none
  }
  .list_service_btn_entry a {
    background-size: 14px
  }
  .list_service_btn_service a {
    background-size: 16px
  }
  .list_service_btn_login a {
    background-size: 14px
  }
  .list_service_banner img {
  float: left;
  width: 50%
  }
}

.bx-wrapper {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
  margin: 10px auto;
}

.bxslider li {
  display: block;
  margin: 0 auto;
}

.flow_mobile{
  text-align: center;
}

@media (max-width:766px) {
  .list_service_pc { display: none !important; }
}


@media (max-width:766px) {
  .bxslider { display: none !important; }
  .bx-wrapper { display: none !important; }
  .bxslider li { display: none !important; }
  .flow_mobile { display: block !important; }
}
@media (min-width:767px) {
  .bxslider { display: block !important; }
  .bx-wrapper { display: block !important; }
  .bxslider li { display: block !important; }
  .flow_mobile { display: none !important; }
}
}