a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
  font-weight: bold;
}

/* 全体設定 */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html, div {
  -webkit-overflow-scrolling: touch;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

/* フッターの高さに合わせてマージンを取る */
body {
  margin-bottom: 40px;
  background-color: white;
  font-family: "Lucida Grande", "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}

/* フッター */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  height: 42px;
  line-height: 20px;
  font-size:12px;
}

.footer div.container {
  text-align: left;
}

/* ピンクカラー */
header nav {
  background: -moz-linear-gradient(top, pink, white);
  background: -webkit-linear-gradient(top, pink, white);
  background: linear-gradient(to bottom, pink, white);
}

@media (max-width: 768px) {
  header nav {
    font-size: 12px;
  }
}

/* dropdown Safari click */
.nav-atag {
  position: relative;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  color: rgba(0, 0, 0, 0.5);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* 追加設定 */
table.table th {
  background: lightgray;
}

table td.num {
  text-align: right;
}

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

.bth-circle {
  width: 2.2em !important;
  height: 2.2em !important;
  text-align: center;
  vertical-align: middle;
  outline: none !important;
}

/* ボタン2段表示 */
.btn-height {
  width: 108px;
  height: 60px;
  align-items: center;
  text-align: center;
  font-weight: bolder;
}

.common-input-minus.disabled, .common-input-minus:disabled,
.common-input-plus.disabled, .common-input-plus:disabled {
  pointer-events:none !important;
  background-image: none !important;
  color: #343a40 !important;
  background-color: #e9ecef !important;
  border-color: lightGray !important;
}

/* .btn-secondaryの書き換え */
.btn-secondary {
  background-color:#cc528f;
  border-color: #cc528f;
}

.btn-secondary.outline {
  border: 3px solid #cc528f;
}

.btn-secondary:hover, .btn-secondary:focus, 
.btn-secondary:active, .btn-secondary:active:focus, .btn-secondary:active:hover, .btn-secondary:active.focus,
.btn-secondary.active, .btn-secondary.active:focus, .btn-secondary.active:hover, .btn-secondary.active.focus,
.open > .dropdown-toggle.btn-secondary, 
.open > .dropdown-toggle.btn-secondary:hover,
.open > .dropdown-toggle.btn-secondary:focus, 
.open > .dropdown-toggle.btn-secondary.focus,
.btn-secondary.disabled:hover, .btn-secondary[disabled]:hover, fieldset[disabled] .btn-secondary:hover,
.btn-secondary.disabled:focus, .btn-secondary[disabled]:focus, fieldset[disabled] .btn-secondary:focus,
.btn-secondary.disabled.focus, .btn-secondary[disabled].focus, fieldset[disabled] .btn-secondary.focus {
    background-color: #cc0066;
}

/* bootstrap btn-secondary override */
/*
.btn-secondary {
  color: #fff;
  background-color: #cc0066;
  border-color: #cc0066;
}
.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #cc0066;
  border-color: #cc0066;
}
*/
.btn-secondary:hover {
  color: #fff;
  background-color: #cc0066;
  border-color: #cc0066;
}
.btn-secondary:focus, .btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(180, 11, 96, 0.5);
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #cc0066;
  border-color: #cc0066;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(180, 11, 96, 0.5);
}
/* bootstrap btn-secondary override */




/* bootstrap override pink */
.btn-primary {
  /*
    color: #fff;
    background-color:  #f3dfe9;
    border-color: #b7055e;
    background-image: linear-gradient(180deg, #fbb2d6, #b7055e);
  */
  color: black;
  border-color: #ffdefb;
  border-bottom: 2px solid #cac8c8;
  border-right: 2px solid #cac8c8;
  background:  #ffdefb;
  background-image: linear-gradient(#fef3fb, #fee7fb 60%, #ffdefb);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary:active.focus,
.btn-primary.active, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary, 
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus, 
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle
{
  /*
    color: #fff;
    border-color: #b7055e;
    background:  #cc528f;
  */
  color: black;
  border-color: #ffaacc;
  border-bottom: 2px solid #cac8c8;
  border-right: 2px solid #cac8c8;
  background:  #ffaacc;
  background-image: linear-gradient(#ffddff, #ffccee 60%, #ffaacc);
}
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus
{
  /*
    box-shadow: 0 0 0 0.2rem rgba(180, 11, 96, 0.5);
  */
  box-shadow: 0 0 0 0.2rem rgba(189, 94, 141, 0.5);
}
/*------------------------ secondary ------------------------*/
.btn-secondary {
  color: black;
  border-color: #ffdefb;
  border-bottom: 2px solid #cac8c8;
  border-right: 2px solid #cac8c8;
  background:  #ffdefb;
  background-image: linear-gradient(#fef3fb, #fee7fb 60%, #ffdefb);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:active, .btn-secondary:active:focus, .btn-secondary:active:hover, .btn-secondary:active.focus,
.btn-secondary.active, .btn-secondary.active:focus, .btn-secondary.active:hover, .btn-secondary.active.focus,
.open > .dropdown-toggle.btn-secondary, 
.open > .dropdown-toggle.btn-secondary:hover,
.open > .dropdown-toggle.btn-secondary:focus, 
.open > .dropdown-toggle.btn-secondary.focus,
.btn-secondary.disabled:hover, .btn-secondary[disabled]:hover, fieldset[disabled] .btn-secondary:hover,
.btn-secondary.disabled:focus, .btn-secondary[disabled]:focus, fieldset[disabled] .btn-secondary:focus,
.btn-secondary.disabled.focus, .btn-secondary[disabled].focus, fieldset[disabled] .btn-secondary.focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle
{
  color: black;
  border-color: #ffaacc;
  border-bottom: 2px solid #cac8c8;
  border-right: 2px solid #cac8c8;
  background:  #ffaacc;
  background-image: linear-gradient(#ffddff, #ffccee 60%, #ffaacc);
}
.btn-secondary:focus, .btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus
{
  box-shadow: 0 0 0 0.2rem rgba(189, 94, 141, 0.5);
}
/*------------------------ info ------------------------*/
.btn-info {
  color: #555555;
  border-color: rgba(0,0,0,0.1);
  border-bottom: 2px solid #cac8c8;
  border-right: 2px solid #cac8c8;
  background:  #e6e6e6;
  background-image: linear-gradient(#fff, #fff 60%, #e6e6e6);
  /* 店舗管理Webはこっち background-image: linear-gradient(#fff, #fff 60%, #f5f5f5); */
}
.btn-info:hover, .btn-info:focus,
.btn-info:active, .btn-info:active:focus, .btn-info:active:hover, .btn-info:active.focus,
.btn-info.active, .btn-info.active:focus, .btn-info.active:hover, .btn-info.active.focus,
.open > .dropdown-toggle.btn-info, 
.open > .dropdown-toggle.btn-info:hover,
.open > .dropdown-toggle.btn-info:focus, 
.open > .dropdown-toggle.btn-info.focus,
.btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus,
.btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus,
.btn-info.focus,
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle
{
  color: #555555;
  border-color: rgba(0,0,0,0.1);
  border-bottom: 2px solid #cac8c8;
  border-right: 2px solid #cac8c8;
  background:  #fff;
  background-image: linear-gradient(#fff, #fff 60%, #e6e6e6);
  /* 店舗管理Webはこっち background-image: linear-gradient(#fff, #fff 60%, #f5f5f5); */
}
.btn-info:focus, .btn-info.focus,
.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus
{
  box-shadow: 0 0 0 0.2rem rgba(160, 160, 160, 0.5);
}

/*------------------------ .btn-info-menu(bootstrap 標準の.btn-info)  ------------------------*/
.btn-info-menu {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}
.btn-info-menu:hover, .btn-info-menu:focus,
.btn-info-menu:active, .btn-info-menu:active:focus, .btn-info-menu:active:hover, .btn-info-menu:active.focus,
.btn-info-menu.active, .btn-info-menu.active:focus, .btn-info-menu.active:hover, .btn-info-menu.active.focus,
.open > .dropdown-toggle.btn-info-menu, 
.open > .dropdown-toggle.btn-info-menu:hover,
.open > .dropdown-toggle.btn-info-menu:focus, 
.open > .dropdown-toggle.btn-info-menu.focus,
.btn-info-menu.disabled:hover, .btn-info-menu[disabled]:hover, fieldset[disabled] .btn-info-menu:hover,
.btn-info-menu.disabled:focus, .btn-info-menu[disabled]:focus, fieldset[disabled] .btn-info-menu:focus,
.btn-info-menu.disabled.focus, .btn-info-menu[disabled].focus, fieldset[disabled] .btn-info-menu.focus,
.btn-info-menu.focus,
.btn-info-menu:not(:disabled):not(.disabled):active, .btn-info-menu:not(:disabled):not(.disabled).active,
.show > .btn-info-menu.dropdown-toggle
{
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}
.btn-info-menu:focus, .btn-info-menu.focus,
.btn-info-menu:not(:disabled):not(.disabled):active:focus, .btn-info-menu:not(:disabled):not(.disabled).active:focus,
.show > .btn-info-menu.dropdown-toggle:focus
{
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
/*------------------------ info gradient ------------------------*/
.btn-info-gradient {
  /*  
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
   */
  color: black;
  background-color: #17a2b8;
  border-color: #17a2b8;
  background-image: linear-gradient(180deg, #e6f9ff, #17a2b8);
}
.btn-info-gradient:hover, .btn-info-gradient:focus,
.btn-info-gradient:active, .btn-info-gradient:active:focus, .btn-info-gradient:active:hover, .btn-info-gradient:active.focus,
.btn-info-gradient.active, .btn-info-gradient.active:focus, .btn-info-gradient.active:hover, .btn-info-gradient.active.focus,
.open > .dropdown-toggle.btn-info-gradient, 
.open > .dropdown-toggle.btn-info-gradient:hover,
.open > .dropdown-toggle.btn-info-gradient:focus, 
.open > .dropdown-toggle.btn-info-gradient.focus,
.btn-info-gradient.disabled:hover, .btn-info-gradient[disabled]:hover, fieldset[disabled] .btn-info-gradient:hover,
.btn-info-gradient.disabled:focus, .btn-info-gradient[disabled]:focus, fieldset[disabled] .btn-info-gradient:focus,
.btn-info-gradient.disabled.focus, .btn-info-gradient[disabled].focus, fieldset[disabled] .btn-info-gradient.focus,
.btn-info-gradient.focus,
.btn-info-gradient:not(:disabled):not(.disabled):active, .btn-info-gradient:not(:disabled):not(.disabled).active,
.show > .btn-info-gradient.dropdown-toggle
{
  color: black;
  background: #138496;
  border-color: #117a8b;
}
.btn-info-gradient:focus, .btn-info-gradient.focus,
.btn-info-gradient:not(:disabled):not(.disabled):active:focus, .btn-info-gradient:not(:disabled):not(.disabled).active:focus,
.show > .btn-info-gradient.dropdown-toggle:focus
{
  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
}
/* bootstrap btn-primary pink */

.btn-primary:disabled, .btn-primary.disabled,
.btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus
 {
    color: #fff;
    background-color: #6c757d;
    background: #6c757d;
    border-color: #6c757d;
}



.btn-menu {
  width: 270px;
  font-size: 1.3rem;
  line-height: 2;
  max-width: 100%;
  font-weight: bolder;
}

.title-font{
  font-size: 1.6rem;
}

/* チェックボックス大きくする */
input[type=checkbox] {
  transform: scale(1.5);
}

input[type=radio] {
  transform: scale(1.5);
}

/* ページングの小さくする */
@media (max-width: 768px) {
  nav ul.pagination {
    font-size: 12px;
  }
}
/* PCとスマホで表示を変える */
@media (min-width: 992px) {
    .outerselectbox {
        height: 200px;
    }
    .selectbox {
        height: 32px;
    }
}

/* fixed Page Settings
-------------------------------------------------- */
/* page */
div.pagefixed {
  top:72px;
  left:0;
  position:fixed;
  width:100%;
  z-index:24;
  background-color: white;
}
/* padding-top each page setting */
div.pagescroll {
  margin-bottom: 20px;
}
/* bootstrap と同じ定義で作成。Pixel指定しな方式で使用 */
div.pagefixedTop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: white;
}

.zw-fixed-top {
  position: fixed !important;
}

/* fixed Page Settings
-------------------------------------------------- */

/* div table */
div.tableheader {
  background: lightgray;
  font-weight: bold;
  flex-wrap:wrap;
  display: flex;
  align-items: center;
  text-align: center;
}

/* ローディング設定 */
.spinner-border {
  position: fixed;
  display: none;
  width: 6rem;
  height: 6rem;
  top: 100px;
}

/* モーダル表示時ずれる修正 */
.modal-open {
  padding-right: 0px !important;
  overflow: auto;
}
.modal {
  padding-right: 0px !important;
}
.navbar {
  padding-right: 0 !important;
}

span.sr-only {
  margin: auto;
  display: flex;
}

.site-loading-spinner {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.0);
  display: none;
  z-index: 2000
}

@media (min-width: 992px) {
    .outeraddress {
        height: 350px;
    }
}

.error {
  padding-top: 5px;
  color:red!important;
}

/* Text Color Append
-------------------------------------------------- */
.text-linq {
  color: hotpink!important;
}

/* カレンダー土日色*/
.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {
    color: #f00;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
    color: #00f;
}

ul.navbar-side {
  width: 200px;
}


/* Text body Append
-------------------------------------------------- */
.inv-num-enough {
  background-color: #c6ffff;
}

.inv-num-few {
  background-color: #ffffc6;
}

.inv-num-lack {
  background-color: #ffc6e2;
}

/* jQuery-UI Widget
-------------------------------------------------- */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: "Lucida Grande", "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1em;
}

input[type="text"].barcode {
  width: 140px;
}

/* 商品選択モーダルの商品スクロール高さ */
#productChoiceModal #posscroll {
  display: block;
  overflow-y: scroll;
  height: 210px;
}
#productChoiceModal #nbbascroll {
  display: block;
  overflow-y: scroll;
  height: 210px;
}

#AddressChoiceModal #scroll {
  display: block;
  overflow-y: scroll;
  height: 210px;
}

/* 折り畳みで「＋」「－」を表示切替 */
[aria-expanded="false"] button.btn-modal-minus {
  display: none;
}
[aria-expanded="true"] button.btn-modal-plus {
  display: none;
}

/* divテーブル セルの垂直中央指定 */
.tablebody-center {
  display: flex;
  /* 水平方向 */
  -ms-flex-align: center !important;
  align-items: center !important;
  /* 垂直方向 */
  justify-content: center;
}
.tablebody-right {
  display: flex;
  /* 水平方向 */
  -ms-flex-align: center;
  align-items: center;
  /* 垂直方向 */
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.tablebody-left {
  display: flex;
  /* 水平方向 */
  -ms-flex-align: center;
  align-items: center;
  /* 垂直方向 */
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.text-pre-wrap {
  white-space:pre-wrap;
}

.text-word-break-all {
  word-break: break-all;
}

input.num-w8 {
  width: 120px; 
}
input.num-w4 {
  width: 80px; 
}

.p-r1{
  padding-right: 1.95rem;
}

.p-r3{
  padding-right: 3.95rem;
}

.p-r4{
  padding-right: 4.95rem;
}

.m-r1{
  margin-right: 10%;
}

.m-l1{
  margin-left: 10%;
}

div.pr-8{
  padding-right: 8rem;
}

div.width-6 {
  width: 65px;
}

div.width-7 {
  width: 70px;
}

div.width-9 {
  width: 90px;
}

div.width-10 {
  width: 100px;
}

div.width-p10 {
  width: 10%;
}

div.width-p6{
  width:6.6%;
}

.display-flex{
  display:flex;
}

.align-self-center{
  align-self: center;
}
.pm-y1{
  padding-top: 1px; 
  padding-bottom: 1px; 
}
.col-ml{
  margin-left: 15px;
}

/* バーコードスキャンボタン */
.btn-scan {
  width: 48px;
  height: 32px;
  font-size: 12px;
  /* margin-top: 5px; */
  padding: 0 0 0 0;
}
.scan-front-w{
  padding-right: 0px;
  padding-left: 20px;
}
.scan-front-flexw{
  flex: 0 0 43%;
  max-width: 43%;
}
.scan-back-w{
  padding-right: 0px;
  padding-left: 15px;
}
.scan-back-flexw{
  flex: 0 0 37%;
  max-width: 37%;
}
/*
.modal-scan {
  max-width: 648px;
  max-height: 488px;
  margin: 1.75rem auto;
}
*/
.modal-scan-h {
  max-width: 648px;
  max-height: 488px;
  margin: 1.75rem auto;
}

.modal-scan-v {
  max-width: 488px;
  max-height: 648px;
  margin: 1.75rem auto;
}

/* #photo-area.viewport canvas{
  height: 20px;
} */

/*
#photo-area.viewport {
  height: 480px;
  width: 640px;
  margin-left: 2px;
}
*/

#photo-area.view-horizon {
  height: 480px;
  width: 640px;
  margin-left: 2px;
}

#photo-area.view-vertical {
  height: 640px;
  width: 480px;
  margin-left: 2px;
}

/*
#photo-area.viewport canvas, video {
  float: left;
   width:640px;
  height: 460px;
}
#photo-area.viewport canvas.drawingBuffer, video.drawingBuffer {
  margin-left: -640px;
} */
.vetical-align{
  display:flex;
  align-items: center;
}