@charset "utf-8";
/**********************************************************
インラインsvg設定
***********************************************************/
#spriteSvg {
  display: none !important;
}
/**********************************************************
Material Icons設定
***********************************************************/
.material-icons {
  display: inline-flex;
  vertical-align: middle;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* 推奨サイズ */
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  /* WebKitブラウザサポート */
  -webkit-font-smoothing: antialiased;
  /* Chrome、Safariサポート */
  text-rendering: optimizeLegibility;
  /* Firefoxサポート */
  -moz-osx-font-smoothing: grayscale;
  /* IEサポート */
  -ms-font-feature-settings: 'kern', 'liga', 'pnum';
}
/* メニューアイコンサイズ */
.materialIcons.-menu,
.materialIcons.-anchor {
  font-size: 16px;
  margin-top: -2px;
}
.materialIcons.-anchor {
  display: inline-block;
  color: #8e8e8e;
  margin: 0 4px;
}
.materialIcons.-previewLink {
  color: #8e8e8e;
  margin-left: 10px;
}

/**********************************************************
Grobal
***********************************************************/
html {
  scroll-behavior: smooth;
}
body {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  color: #434343;
  word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  position: relative;

  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: normal;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
h1, h2, h3, h4, h5, h6 {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
a {
  cursor: pointer;
}

/* contents設定 */
.skin-blue .wrapper,
.content-wrapper {
  background-color: #e4e4e4;
}
.wrapper.-sticky {
  overflow: visible;
}
.main-header {
  z-index: 1050;
}
.content-header {
  padding: 16px;
  z-index: 1030;
}
.content-header h1 {
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .content-header h1 {
    font-size: 14px;
  }
}

/* content・box設定 */
.content {
  min-height: 250px;
  padding: 0 16px 15px;
  margin-right: auto;
  margin-left: auto;
}
.content.edit {
  padding: 0 16px 112px;
}
.box {
  margin-bottom: 16px;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.box.-marginBottomMiddle {
  margin-bottom: 24px;
}
.box-body,
.boxBody {
  padding: 24px;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
}
.box-body.-disabled,
.boxBody.-disabled {
  background: #eeeeee;
}
.boxBody.-paddingBottomMiddle {
  padding-bottom: 32px;
}
.boxBody.-mailEdit {
  padding-bottom: 16px;
}
.boxBody.-mailEdit.-disabled .box-footer {
  background: #eeeeee;
}
.boxBody.-noBorder {
  border-bottom: none;
}

.box-footer {
  padding: 24px 0;
}

.boxBodyFooter {
  padding: 16px 24px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-radius: 0;
}
.boxBodyFooter.-disabled {
  background: #eeeeee;
}

/* chromeの黒枠対策 */
* {
  outline: none !important;
}

/* プリントエリア */
.printArea__box {
  display: none !important;
}

/**********************************************************
トップバー
***********************************************************/
.skin-blue .main-header .logo {
  background: #324e70;
}
.skin-blue .main-header .logo:hover {
  background: #324e70;
}
.skin-blue.enableHover .main-header .logo:hover {
  background: rgba(0, 0, 0, 0.4);
}
.skin-blue .main-header .navbar {
  background: #324e70;
}
@media screen and (max-width: 767px) {
  .skin-blue .main-header .navbar {
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
  }
}
/* logo */
.logo-mini img {
  height: 34px;
}
.logo-lg img {
  height: 35px;
}
@media screen and (max-width: 420px) {
  .logo-lg img {
    height: 24px;
  }
}
/* ハンバーガーメニュー */
.main-header .sidebar-toggle {
  font-family: "material icons";
  height: 50px;
  padding: 9px 8px;
}
.main-header .sidebar-toggle:before {
  content: "\e5d2";
  font-size: 23px;
}
/* ヘッダー右のID */
.skin-blue.enableHover .main-header .navbar .nav>li>a:hover,
.skin-blue .main-header .navbar .nav>li>a:active,
.skin-blue .main-header .navbar .nav>li>a:focus,
.skin-blue .main-header .navbar .nav .open>a,
.skin-blue.enableHover .main-header .navbar .nav .open>a:hover,
.skin-blue .main-header .navbar .nav .open>a:focus,
.skin-blue .main-header .navbar .nav>.active>a {
  background: none;
}
.skin-blue .main-header .navbar .nav>li>a.userToggle__icon {
  margin: 5px 8px 5px 0;
  padding: 8px;
  border-radius: 100%;
}
/* IEのみ */
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .skin-blue .main-header .navbar .nav>li>a.userToggle__icon {
    margin-right: 25px;
  }
}
.skin-blue.enableHover .main-header .navbar .nav>li>a.userToggle__icon:hover {
  background: rgba(0, 0, 0, 0.4);
}
.skin-blue .main-header .navbar .nav>.open>a.userToggle__icon,
.skin-blue.enableHover  .main-header .navbar .nav>.open>a.userToggle__icon:hover {
  background: rgba(0, 0, 0, 0.4);
}
.navbar-custom-menu>.navbar-nav>li>.dropdown-menu.userToggle__dropdownMenu {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
  top: 86%;
  right: 8px;
}
.userToggle__userInfo {
  padding: 16px;
  background: #eff3f6;
  border-bottom: 1px solid #cccccc;
}
.userToggle__userName {
  font-size: 16px;
}
.userToggle__userName.-honor {
  font-size: 12px;
  padding-left: 4px;
}
.userToggle__userMail {
  font-size: 12px;
  color: #999999;
  margin-bottom: 14px;
}
.userToggle__userIdBox {
  color: #999999;
}

.userToggle__utility {
  font-size: 16px;
  padding: 8px 0;
  list-style: none;
}

.userToggle__list {
  display: flex;
  align-items: center;
  color: #434343;
  height: 40px;
  padding: 0 16px;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .userToggle__list {
    color: inherit !important;
  }
}
.userToggle__list:hover {
  color: #434343;
  background: #f7f7f7;
}

/**********************************************************
サイドバー
***********************************************************/
@media screen and (max-width: 767px) {
  .sidebar-mini.-sticky {
    overflow: hidden;
  }
}

/* 表示を小さくした時のマウスオーバーのコンテンツ幅 */
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span {
  display: block;
  padding-left: 4px;
  padding-right: 9px;
}
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span:not(.pull-right),
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>.treeview-menu {
  width: 190px;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background: rgba(0, 0, 0, 0.4);
}
.skin-blue .main-sidebar {
  background: #274364;
  z-index: 1040 !important;
}
.sidebar {
  padding-bottom: 86px;
  position: sticky;
  top: 10px;
}

.skin-blue .sidebar a {
  color: #879bb2;
}
.skin-blue .sidebar-menu>li:hover>a {
  background: #18283b;
}
.skin-blue .sidebar-menu>li.menu-open>a {
  background: #18283b;
}

/* 入れ子メニュー */
li.treeview {
  position: relative;
}
li.treeview a.parents:before {
  content: "expand_more";
  font-family: "material Icons";
  font-size: 22px;
  padding: 7px 15px;
  position: absolute;
  top: 0;
  right: 0;
  transition: 0.2s;
}
li.treeview.menu-open a.parents:before {
  content: "expand_less";
}
.sidebar-collapse li.treeview a.parents:before,
.sidebar-collapse li.treeview.menu-open a.parents:before {
  content: none;
}
.skin-blue .sidebar-menu>li.active>a {
  background-color: #0b1f36;
  border-left-color: transparent;
}
.skin-blue .sidebar-menu>li>.treeview-menu {
  padding-left: 22px;
  padding-bottom: 2px;
  background: #324e70;
}
.skin-blue.sidebar-collapse .sidebar-menu>li>.treeview-menu {
  padding-left: 0;
}
/* 基本設定の子メニュー */
ul.treeviewGrandchild {
  color: #879bb2;
  padding-inline-start: 40px;
}
.sidebar-collapse ul.treeviewGrandchild {
  padding-inline-start: 32px;
}
.treeviewGrandchild__menu {
  list-style-type: disc;
  cursor: pointer;
}
.treeviewGrandchild__menuInner {
  display: flex;
  align-items: center;
  height: 31px;
  margin-left: -5px;
}
.treeviewGrandchild__menu.-select,
.treeviewGrandchild__menu.-select .treeviewGrandchild__menuInner,
.enableHover .treeviewGrandchild__menu:hover,
.enableHover .treeviewGrandchild__menu:hover .treeviewGrandchild__menuInner {
  color: #ffffff;
}
.treeviewGrandchild__menu.-select .treeviewGrandchild__menuInner {
  text-decoration: underline;
}

/**********************************************************
フッター
***********************************************************/
.sidebar-collapse .mainFooter {
  display: none !important;
  overflow: hidden;
}
.mainFooter {
  display: block !important;
  color: #ffffff;
  margin: 0;
  padding: 16px 18px 24px;
  position: absolute;
  bottom: 0;
}

/**********************************************************
下固定フッター 更新ボタンボックス
***********************************************************/
.boxFooter {
  width: calc(100% - 230px);
  height: 80px;
  background: #ffffff !important;
  padding: 16px !important;
  position: fixed;
  bottom: 0;
  z-index: 100000;
  box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.16);
  transition: 0.6s;
}
.sidebar-collapse .boxFooter {
  width: calc(100% - 50px);
  transition: 0.3s;
}
@media screen and (max-width:767px) {
  .boxFooter {
    width: 100%;
  }
}
@media screen and (max-width:420px) {
  .boxFooter {
    width: 100%;
    height: 160px;
  }
  .sidebar-collapse .boxFooter {
    width: 100%;
  }
  .boxFooter.btnBox.-flex .btnBox__layout.-spNoMargin {
    margin: 0;
  }
}

/**********************************************************
Button
***********************************************************/
/* Element */
.manageBtn,
.manageBtn:focus,
.manageBtn:active {
  display: block;
  text-align: center;
  color: #ffffff;
  min-width: 100px;
  min-height: 40px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  transition: .3s;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.16);
  outline: none !important;
}
.enableHover .manageBtn:hover {
  color: #ffffff;
  background: #4488ee;
}

/* Modifier */
.manageBtn.-main {
  font-size: 16px;
  width: 152px;
  height: 48px;
  padding: 10px 8px;
  background-color: #3377cc;
}
.manageBtn.-main:hover {
  color: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
}

.manageBtn.-allWidth {
  width: 100%;
  height: 40px;
}
.manageBtn.-withIcon {
  display: flex;
  align-items: center;
  box-shadow: none;
  padding: 9px 16px 9px 8px;
  background-color: #3377cc;
  position: relative;
}
.manageBtn.-withIcon::before {
  font-family: "Material Icons";
  font-size: 24px;
  padding-left: 8px;
  line-height: 40px;
  position: absolute;
  top: 0;
  left: 0;
}
.manageBtn.-withIcon.-newCreate::before {
  content: "\e145";
}
.manageBtn.-withIcon.-copy::before {
  content: "\e14d";
  font-size: 22px;
  color: #8e8e8e;
}
.manageBtn.-withIcon.-download::before {
  content: "\e258";
  font-size: 24px;
  color: #8e8e8e;
}
.manageBtn.-withIcon.-statusDownload::before {
  content: "\e258";
  font-family: "Material Icons";
  font-size: 24px;
  color: #ffffff;
  padding-left: 12px;
  line-height: 48px;
}
.manageBtn.-withIcon.-statusDownload[disabled]::before {
  color: #cccccc;
}
.manageBtn.-withIcon.-bulkPrint::before {
  content: "\e8ad";
  font-size: 24px;
  color: #8e8e8e;
}
.manageBtn.-withIcon.-copy {
  padding-left: 36px;
}

.manageBtn.-withIcons {
  display: flex;
  align-items: center;
  box-shadow: none;
  padding: 8px 16px 8px 8px;
  background-color: #3377cc;
  position: relative;
}
.manageBtn__icon {
  display: inline-block;
  margin-right: 4px;
}
.manageBtn__icon.-edit,
.manageBtn__icon.-add {
  color: #8e8e8e;
  margin-right: 4px;
}

.manageBtn.-withIconRight {
  display: flex;
  align-items: center;
  box-shadow: none;
  padding: 6px 4px 6px 8px;
}
.manageBtn.-withIconRight .manageBtn__icon {
  margin-right: 0;
}

.manageBtn.-inputAssistance .manageBtn__icon,
.manageBtn.-randomGenerate .manageBtn__icon {
  color: #8e8e8e;
}
.manageBtn.-qrDisplay {
  min-width: 124px;
  padding-left: 36px;
}
.manageBtn.-qrDisplay::before {
  content: "\ef6b";
  font-size: 24px;
  color: #8e8e8e;
}
.manageBtn.-createQr {
  padding-left: 36px;
}
.manageBtn.-createQr::before {
  content: "\e258";
  font-size: 24px;
}
.manageBtn.-change,
.manageBtn.-otherSub,
.manageBtn.-fileChoice,
.manageBtn.-frameOnly,
.manageBtn.-delete,
.manageBtn.-categoryEdit,
.manageBtn.-withIconRight,
.edit .imageUpBtn,
.manageBtn.-withIcon.-copy,
.manageBtn.-changeDate,
.manageBtn.-mailPreview,
.manageBtn.-mailTestSend,
.manageBtn.-download,
.manageBtn.-bulkPrint,
.manageBtn.-inputAssistance,
.manageBtn.-randomGenerate,
.manageBtn.-qrDisplay,
.manageBtn.-icon,
.manageBtn.-previewLink,
.manageBtn.-dayStockSetting,
.manageBtn.-edit,
.manageBtn.-add {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  color: #3377cc;
  box-shadow: none;
}
.enableHover .manageBtn.-change:hover,
.enableHover .manageBtn.-otherSub:hover,
.enableHover .manageBtn.-fileChoice:hover,
.manageBtn.-frameOnly:hover,
.manageBtn.-categoryEdit:hover,
.manageBtn.-withIconRight:hover,
.manageBtn.-delete:hover,
.manageBtn.-download:hover,
.manageBtn.-bulkPrint:hover,
.manageBtn.-print:hover,
.manageBtn.-withIcon.-copy:hover,
.manageBtn.-changeDate:hover,
.manageBtn.-mailPreview:hover,
.manageBtn.-mailTestSend:hover,
.manageBtn.-inputAssistance:hover,
.manageBtn.-randomGenerate:hover,
.manageBtn.-qrDisplay:hover,
.manageBtn.-icon:hover,
.manageBtn.-previewLink:hover,
.manageBtn.-dayStockSetting:hover,
.manageBtn.-edit:hover,
.manageBtn.-add:hover {
  background: #f7f7f7;
  color: #3377cc;
}
.manageBtn.-changeDate {
  min-width: 60px;
  width: 60px;
}
.manageBtn.-previewItems {
  display: inline-block;
}
.manageBtn.-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  width: 40px;
  padding: 0;
}
.manageBtn.-saleStateCsv {
  width: 166px;
}
.manageBtn.-readTimeCsv {
  width: 197px;
}
.manageBtn.-manageLog {
  width: 182px;
}

/* アイコンがSVGの場合 */
.manageBtn.-withSvg {
  color: #3377cc;
  padding: 9px 16px 9px 36px;
  position: relative;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: none;
}
.manageBtn.-withSvg:hover,
.manageBtn.-withSvg:focus {
  color: #3377cc;
  background-color: #f7f7f7;
}

.manageBtn.-withSvg::before {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
}
.manageBtn.-withSvg.-csv::before {
  content: url(/assets/manage/images/icon_csv.svg);
}
.manageBtn.-withSvg.-pdf::before {
  content: url(/assets/manage/images/icon_pdf.svg);
}

/* 更新中 */
.manageBtn.-mailTestSend,
.manageBtn.-mailTestSend:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 102px;
}
.manageBtn.-mailTestSend.-nowprocessing,
.manageBtn.-mailTestSend.-nowprocessing:focus {
  color: #434343;
  padding: 8px 16px;
  background-color: #eeeeee;
  border: #eeeeee;
  cursor: default;
}

.manageBtn.-search {
  font-size: 16px;
  background-color: #3377cc;
  box-shadow: none;
}
body.enableHover .manageBtn.-search:hover {
  background-color: #4488ee;
  box-shadow: none;
}
.manageBtn.-cancel,
.manageBtn.-orderCancel,
.manageBtn.-contentDelete {
  background-color: #cc2222;
  box-shadow: none;
  border-radius: 4px;
}
.manageBtn.-cancel:hover,
.manageBtn.-cancel:active,
.manageBtn.-orderCancel:hover,
.manageBtn.-orderCancel:active,
.manageBtn.-contentDelete:hover,
.manageBtn.-contentDelete:active {
  color: #ffffff;
  background: #dd4444;
}
@media screen and (max-width:420px) {
  .manageBtn.-cancel {
    font-size: 16px;
    height: 50px;
  }
}
.manageBtn.-return,
.manageBtn.-orderReturn {
  font-size: 16px;
  color: #434343;
  width: 152px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: none;
}
.enableHover .manageBtn.-return:hover,
.enableHover .manageBtn.-orderReturn:hover {
  color: #434343;
  background-color: #f7f7f7;
  border: 1px solid #cccccc;
}
.manageBtn.-sameMain {
  height: 48px;
}

.edit .imageUpBtn {
  display: inline-block;
  min-width: 80px;
  min-height: 40px;
  padding: 10px 16px;
}
body.enableHover .edit .imageUpBtn:hover {
  cursor: pointer;
}

/* disabled */
.btn[disabled],
.btn[disabled]:hover {
  color: #cccccc !important;
  background-color: #eeeeee !important;
  border: 1px solid #cccccc !important;
  box-shadow: none;
  opacity: 1;
  cursor: default;
}
.btn[disabled]::before {
  color: #cccccc !important;
}
.btn.manageBtn.-orderCancel[disabled],
.btn.manageBtn.-orderCancel[disabled]:hover {
  color: #ffffff;
  background-color: #b7b7b7;
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
  cursor: default;
}

/* 自動配信メール */
.btn-default {
  background-color: #ffffff;
  color: #333333;
  border-color: #cccccc;
}
.enableHover .btn-default:hover {
  background-color: #f7f7f7;
  border-color: #cccccc;
}

/**********************************************************
ButtonBox
***********************************************************/
.btnBox {
  margin: 0;
  padding: 0;
}
/* Modifier */
.btnBox.-flex {
  display: flex;
  flex-wrap: wrap;
}
.btnBox.-flex.-reminder {
  flex-wrap: nowrap;
}
.btnBox.-flexAlignCenter {
  align-items: center;
}
.btnBox.-flex .btnBox__layout + .btnBox__layout {
  margin-left: 16px;
}
.btnBox.-flex.-search  .btnBox__layout + .btnBox__layout {
  margin-left: 24px;
}
.btnBox.-reminder .btnBox__layout + .btnBox__layout {
  margin-left: 16px;
}
.btnBox.-editItems .btnBox__layout + .btnBox__layout {
  margin-left: 12px;
}
.btnBox.-left {
  justify-content: left;
}
.btnBox.-center {
  justify-content: center;
}
.btnBox.-right {
  justify-content: flex-end;
}
.btnBox.-rightContent {
  margin-left: auto;
}
.btnBox.-marginBottom {
  margin-bottom: 16px;
}
.btnBox.-marginBottom24 {
  margin-bottom: 24px;
}
.btnBox.-marginLeft {
  margin-left: 16px;
}
.btnBox.-marginLeftMiddle {
  margin-left: 24px;
}
.btnBox.-paddingRight {
  padding-right: 16px;
}
.btnBox.-paddingBottom {
  padding-bottom: 16px;
}
.btnBox.-search {
  padding-left: 120px;
}
.btnBox.-mailPreview,
.btnBox.-mailTestSend {
  margin: 0 0 0 auto;
}
.btnBox.-marginLeftAuto {
  margin-left: auto;
}
.btnBox.-hanging {
  margin-left: 16px;
  position: absolute;
  top: 0;
  right: 0;
}
.btnBox.-flex.-rightJustified {
  margin: 0 0 0 auto;
}
.btnBox.-withTooltip {
  position: relative;
}
.btnBox.-editItems {
  margin-left: 16px;
  padding: 0 16px;
  border-left: 1px solid #cccccc;
}
.btnBox.-withSelectedTable {
  margin-bottom: 12px;
}

.btnBox__layout.-column {
  display: block;
  width: 100%;
}
.btnBox__layout.-marginBottom {
  margin-bottom: 16px;
}
.btnBox__layout.-flex {
  display: flex;
}
.btnBox__layout.-alignCenter {
  align-items: center;
}
.btnBox__layout.-justifyCenter {
  justify-content: center;
}

.btnBox__layout.-withSaveTip,
.btnBox__layoutInner.-withSaveTip {
  position: relative;
}
.btnBox__layoutInner.-withSaveTip {
  display: inline-block;
}

/**********************************************************
Copy Button
***********************************************************/
.urlCopy {
  position: relative;
}
.urlCopy__tip,
.randomUrl__tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #ffffff;
  width: 126px;
  height: 30px;
  padding: 8px;
  position: absolute;
  top: -34px;
  background: rgba(51, 51, 51, 0.8);
  border-radius: 5px;
  opacity: 0;
}
.randomUrl__tip {
  left: 6px;
}

/**********************************************************
Icon Button
***********************************************************/
.iconBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 1;
}
.enableHover .iconBtn:hover {
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
}
.disableHover .iconBtn:hover {
  background: none;
}
.iconBtn.-inInput {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 4px;
  right: 4px;
}
.iconBtn.-trash {
  margin-left: auto;
}

.iconBtn.hidden-xxs {
  display: flex !important;
}

.iconBtn__icon {
  color: #8e8e8e;
}
.iconBtn__icon.-on {
  color: #4488ee;
}
.enableHover .iconBtn:hover .iconBtn__icon.-off {
  color: #8e8e8e;
}
.iconBtn__icon.-trash,
.iconBtn__icon.-copy {
  width: 24px;
  height: 24px;
}
.iconBtn__icon.-trash .cls-1 {
  fill: none;
}
.iconBtn__icon.-trash .cls-2 {
  fill: #4488ee;
}
.iconBtn__icon.-copy .cls-1 {
  fill: none;
}
.iconBtn__icon.-copy .cls-2 {
  fill: #4488ee;
}

/* disabled */
.iconBtn.-disabled {
  pointer-events: none !important;
  cursor: default;
}
.iconBtn.-disabled:hover {
  background: none;
}
.iconBtn.-disabled .iconBtn__icon,
.iconBtn.-disabled .iconBtn__icon:hover {
  color: #cccccc !important;
  cursor: default;
}
.iconBtn.-disabled .iconBtn__icon.-trash .cls-2,
.listTableUi__cell.-noAuthorization .iconBtn__icon.-trash .cls-2,
.listTableUi__cell.-noAuthorization .iconBtn__icon.-copy .cls-2,
.iconBtn.-trash.-noAuthorization .iconBtn__icon.-trash .cls-2 {
  fill: #cccccc;
}

/* 変更できない */
.iconBtn.-noHover {
  background: none !important;
  cursor: default;
}
.iconBtn.-noHover .iconBtn__icon.-on {
  color: #666666;
}
.iconBtn:hover.-noHover .iconBtn__icon.-off {
  color: #8e8e8e;
}

/**********************************************************
コンテクストメニュー
***********************************************************/
.contextMenu {
  width: 32px;
  height: 32px;
}
.contextMenu__listBox {
  top: 16px;
  left: auto;
  right: 0;
}
.contextMenu__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.contextMenu__listItem {
  display: flex;
  align-items: center;
  padding: 8px;
  position: relative;
}
.contextMenu__listItem:hover {
  background: #f7f7f7;
}
.contextMenu__listItem.-copy::after {
  content: "\e5cc";
  font-family: 'Material Icons';
  font-size: 24px;
  color: #8e8e8e;
  position: absolute;
  right: 4px;
}

/* アイコン */
.contextMenu__itemIcon {
  margin: 0 8px;
}
.contextMenu__itemIconImg {
  width: 24px;
  height: 24px;
}

/**********************************************************
ダウンロードボタン スピナー付き
**********************************************************/
.manageBtn.-withSpinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 24px 9px 12px;
  width: auto;
}

.download__iconText,
.nowprocessing__iconText {
  display: flex;
  align-items: center;
  justify-content: center;
}
.download__icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* 更新中 */
.manageBtn.-nowprocessing,
.manageBtn.-nowprocessing:hover,
.manageBtn.-nowprocessing:focus {
  color: #434343;
  padding: 8px 20px 8px 16px;
  background-color: #eeeeee !important;
  border: #eeeeee;
  box-shadow: none;
  cursor: default;
}
.nowprocessing__text {
  font-size: 14px;
}
.nowprocessing__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  position: relative;
  background-color: transparent;
  box-sizing: content-box;
}
.nowprocessing__spinner {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  background: transparent;
  box-sizing: border-box;
  border-top: 2px solid #3377cc;
  border-left: 2px solid #3377cc;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 100%;
  animation: spin 0.6s ease-out infinite;
}
@keyframes spin {
  100% {transform: rotate(360deg)}
}

/**********************************************************
リップル
***********************************************************/
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple .ripple-active {
  position: absolute;
  pointer-events: none;
  background: #ffffff;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple .2s;
  opacity: .3;
}
@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2.0);
  }
}

/**********************************************************
テキストリンク
***********************************************************/
.linkText,
.linkText:focus {
  text-decoration: underline;
  cursor: pointer;
}
.enableHover .linkText:hover {
  text-decoration: none;
}

.linkText.-regular {
  color: #666666;
}
.linkText.-transition,
.linkText.-transition:hover {
  color: #3377cc;
}
.linkText.-cancel,
.enableHover .linkText.-cancel:hover {
  color: #cc2222;
  text-decoration: none;
}
.linkText.-caution {
  color: #dd4400;
}

.linkText.-alertInfo {
  color: inherit;
}

.linkText.-noAuthorization {
  color: #cccccc !important;
  pointer-events: none;
}

/* リスト内 */
.linkText.-listOn,
.linkText.-listOn:focus {
  text-decoration: none;
  cursor: pointer;
}
.linkText.-listOn,
.linkText.-listOn:hover {
  color: #3377cc;
}
.linkText.-listOn:hover {
  color: #3377cc;
  text-decoration: underline;
}

/* レイアウト */
.linkText__layout {
  display: block;
}
.linkText__layout.-marginBottom {
  margin-bottom: 8px;
}
.linkText__layout.-center {
  text-align: center;
}

/**********************************************************
ユーザーページへの直リンク
***********************************************************/
/* 左メニュー */
.previewLink.-menu {
  text-align: right;
  padding-right: 16px;
}
.sidebar-mini.sidebar-collapse .previewLink.-menu {
  text-align: left;
}

/* 各ページリンク */
.previewLink__box {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}
.previewLink.-page {
  display: flex;
  align-items: center;
  color: #3377cc;
}
.previewLink.-page:hover .previewLink__text {
  text-decoration: underline;
}
.previewLink__icon {
  font-size: 16px !important;
  color: #8e8e8e;
  margin-left: 8px;
}
.previewLink.-page:hover .previewLink__icon {
  color: #666666;
}

/**********************************************************
フォーム部品
***********************************************************/
/* reset css */
label {
  margin: 0;
}
/* input[type="checkbox"] */
option,
select,
textarea,
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="text"],
input[type="select"],
input[type="option"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -ms-border-radius: 0;
  border-radius: 0;
  border: none;
  outline: 0;
  margin: 0;
  background: #ffffff;
  letter-spacing: 1px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Chrome、Safari */
input[type="number"] {
  -moz-appearance: textfield;
}
/* selectのリセットcss */
select {
  outline: none;
  text-indent: 0.01px;
  text-overflow: '';
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: none; /* ベンダープレフィックス(Google Chrome、Safari用) */
  -moz-appearance: none; /* ベンダープレフィックス(Firefox用) */
  appearance: none; /* 標準のスタイルを無効にする */
}
select option {
  background-color: #ffffff;
  color: #434343;
}
/* for ie10 ie11 ie系のプルダウンの矢印を消す ie9は非対応 */
select::-ms-expand {
  display: none;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #828c9a;
}
/* reset css ここまで */


.formGroup {
  text-align: left;
  margin-bottom: 16px;
}
/* Modifier */
.formGroup.-flex {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
}
.formGroup.-flex.visible-xs {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .formGroup.-flex.visible-xs {
    display: flex !important;
  }
}
.formGroup.-flex.-alignCenter {
  justify-content: center;
}
.formGroup.-noMargin {
  margin: 0;
}

.formGroup__label {
  margin-bottom: 8px;
}
/* Modifier */
.formGroup__label.-normalWeight {
  font-weight: normal;
}
.formGroup__label.-flexMargin {
  margin: 0 8px 0 0;
}
.formGroup__label.-flexNoMargin {
  margin: 0;
}
.formGroup__label.-flex {
  display: flex !important;
}
.formGroup__label.-flex.-alignCenter {
  align-items: center;
}

.formGroup__layout.-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 24px 24px 8px;
}
.formGroup__layout.-flex .formGroup {
  margin-right: 16px;
}

/* ラベルのテキストを12pxにしたい場合 */
.labelText.-small {
  font-size: 12px;
}

.form-control {
  color: #434343 !important;
}

.form__box.-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.form__box.-flex.-receiptableDayborderTime {
  height: 40px;
}

/* input[text] */
.form-control.inputText {
  word-break: break-all;
  font-size: 16px;
  font-weight: normal;
  height: 40px;
  border: 1px solid #8e8e8e;
  border-radius: 5px !important;
  padding: 8px 12px;
  position: relative;
}

.form-control.inputText:hover,
.form-control.textArea:hover {
  border: 1px solid #333333;
}

.form-control.inputText:focus,
.form-control:focus,
.form-control.textArea:focus {
  border: 2px solid #4488EE;
  box-sizing: border-box;
}

.form-control.inputText:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

.form-control.inputText:disabled,
.form-control.inputText.-disabled {
  padding: 8px 12px;
  background: #eeeeee !important;
  border: 1px solid #cccccc;
}

.form-control.inputText.-stock[readonly] {
  pointer-events: none;
}
/* Modifier */
.form-control.inputText.-fullSize {
  width: 100%;
}
.form-control.inputText.-largeSize {
  max-width: 640px;
}
@media screen and (max-width: 1200px) {
  .form-control.inputText.-largeSize {
    width: 100%;
  }
  .form-control.inputText.-largeSize.-title {
    max-width: 470px;
  }
}
.form-control.inputText.-halfSize {
  max-width: 312px;
}
.form-control.inputText.-middleSize {
  width: 190px;
}
.form-control.inputText.-smallSize {
  width: 120px;
}
.form-control.inputText.-xSmallSize {
  width: 80px;
}
.form-control.inputText.-xxSmallSize {
  width: 60px;
}
.form-control.inputText.-changeStock {
  font-weight: bold;
}
.inputText.-selectDateSize {
  width: 166px;
}
.inputText.-selectDateSize.-dashboard,
.inputText.-selectDateSize.-shop {
  font-weight: bold;
  width: 200px;
}
@media screen and (max-width: 360px) {
  .inputText.-selectDateSize.-dashboard {
    width: 184px;
  }
}
.inputText.-selectTimeSize {
  width: 104px !important;
}
.inputText.-selectDateTimeSize {
  width: 220px;
}
.inputText.-sendmailSize {
  width: 478px;
}
.inputText.-modalFullSize {
  width: 392px;
}
.inputText.-selectDateRangeSize {
  width: 306px;
  padding: 8px 32px 8px 12px;
}
.inputText.-selectDateRangeSize.-withTime {
  width: 420px;
}
@media screen and (max-width: 991px) {
  .inputText.-selectDateRangeSize.-withTime {
    width: 100%;
    min-width: 100%;
  }
}
.inputText.-productStockSize {
  width: 80px;
  padding: 8px;
}
.inputText.-productStockSize.-dayStock {
  width: 70px;
}
.form-control.inputText.-textRight {
  text-align: right;
}
.form-control.inputText.-textCenter {
  text-align: center;
}

.formGroup__selectDateRangeLayout.-flash {
  opacity: 0;
  animation: flash 1s 2 linear;
}
@keyframes flash {
  50% {
    opacity: 1;
  }
}

.formGroup__selectDateRangeLayout.-flash.-blue .form-control.inputText {
  border: 2px solid #4488ee;
}
.inputText.-textRight {
  text-align: right;
}

/* 特殊なreadonly */
.inputText.-paymentDetailed[readonly],
.inputText.-paymentDetailed[readonly]:hover {
  color: #cccccc !important;
  background: #eeeeee;
  border: 1px solid #cccccc;
  cursor: default;
}

.form-control.inputText.-withIcon {
  padding-right: 32px;
}

/* 1注文あたりの最低価格 */
.lowestPrice {
  position: relative;
}
.lowestPrice::before {
  display: block;
  content: "¥";
  width: 16px;
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
}
.lowestPrice.-disabled::before {
  color: #cccccc;
}
.lowestPrice .form-control.inputText {
  padding-left: 24px;
}

.inputText__box.-fullSize {
  width: 100%;
}
.inputText__box.-leftMargin {
  margin-left: 8px;
}
.inputText__box.-rightMargin {
  margin-right: 8px;
}
.inputText__box.-noBottomMargin {
  margin-bottom: 0;
}
.inputText__box.-disabled::before {
  color: #cccccc !important;
}

.inputText__box.-withIcon {
  position: relative;
}
.inputText__box.-withHanging {
  position: relative;
}

/* input[textarea] */
.form-control.textArea {
  font-size: 16px;
  border: 1px solid #8e8e8e;
  border-radius: 5px;
  resize: vertical;
}
.form-control.textArea:disabled,
.form-control.textArea:hover:disabled {
  padding: 8px 12px;
  background: #eeeeee !important;
  border: 1px solid #cccccc;
  resize: none;
}
/* Modifier */
.form-control.textArea.-largeSize {
  max-width: 640px;
}
@media screen and (max-width: 1200px) {
  .form-control.textArea.-largeSize {
    width: 100%;
  }
}
.form-control.textArea.-halfSize {
  width: 312px;
}

/* input[select] */
.inputSelect__box.-flex {
  display: flex;
  align-items: center;
}

.inputSelect__boxInner {
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  font-size: 16px;
  font-weight: bold;
}
/* Modifier */
.inputSelect__boxInner.-fullSize {
  width: 100%;
}
.inputSelect__boxInner.-largeSize {
  width: 640px;
}
@media screen and (max-width: 991px) {
  .inputSelect__boxInner.-largeSize {
    width: 100%;
  }
}
.inputSelect__boxInner.-halfSize {
  width: 312px;
}
.inputSelect__boxInner.-middleSize {
  width: 190px;
}
.inputSelect__boxInner.-smallSize {
  width: 120px;
}
.inputSelect__boxInner.-smallSize.-subSelect {
  min-width: 120px;
}
.inputSelect__boxInner.-xSmallSize {
  width: 80px;
}
.inputSelect__boxInner.-bulkStatusSize {
  width: 216px;
}
.inputSelect__boxInner.-authoritySize {
  width: 240px;
}
.inputSelect__boxInner.-dashboardSize {
  width: 216px;
}
@media screen and (max-width: 420px) {
  .inputSelect__boxInner.-dashboardSize {
    width: 200px;
  }
}
.inputSelect__boxInner.-dashboardSize + .inputSelect__boxInner {
  margin-left: 16px;
}
.inputSelect__boxInner.-shopSelectSize,
.inputSelect__boxInner.-serchShopSize,
.inputSelect__boxInner.-serchEventSize {
  width: 370px;
}
.inputSelect__boxInner.-selectShopSize {
  width: 380px;
}
.inputSelect__boxInner.-optionSelectSize {
  width:480px;
}
.inputSelect__boxInner.-selectPaymentSize {
  width: 432px;
}
@media screen and (max-width: 991px) {
  .inputSelect__boxInner.-selectPaymentSize {
    width: 100%;
  }
}
.inputSelect__boxInner::before {
  z-index: 2;
  content: '\e5cf';
  font-family: 'Material Icons';
  font-size: 18px;
  font-weight: normal;
  color: #626262;
  width: 18px;
  line-height: 40px;
  position: absolute;
  top: 0;
  right: 12px;
  pointer-events: none;
}
@media screen and (max-width: 420px) {
  .inputSelect__boxInner::before {
    line-height: 50px;
  }
}
.inputSelect__boxInner.-disabled::before {
  color: #cccccc;
}
.inputSelect__boxInner.-leftMargin {
  margin-left: 8px;
}
.inputSelect__boxInner.-rightMargin {
  margin-right: 8px;
}
.inputSelect {
  width: 100%;
  height: 40px;
  font-weight: normal;
  padding: 8px 30px 8px 12px;
  border: 1px solid #8e8e8e;
  border-radius: 5px;
  cursor: pointer;
}
@media screen and (max-width: 420px) {
  .inputSelect {
    height: 50px;
  }
}
.enableHover .inputSelect:hover {
  border: 1px solid #333333;
}
.inputSelect:focus,
.enableHover .inputSelect:focus:hover {
  border: 2px solid #4488ee;
  box-sizing: border-box;
}
.inputSelect:disabled,
.inputSelect:disabled:hover,
.inputSelect.-disabled,
.inputSelect.-disabled:hover {
  -webkit-text-fill-color: #cccccc !important;
  color: #cccccc !important;
  background: #eeeeee !important;
  border: 1px solid #cccccc;
  opacity: 1;
  cursor: default;
}

/* Radio */
.inputRadio,
.form-control.inputRadio.-disabled,
.form-control.inputRadio[disabled] {
  display: none;
}
.formGroup__radioLabel {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.formGroup__radioLabel.-normalWeight {
  font-weight: normal;
}
.formGroup__radioLabel.-marginRight {
  margin-right: 32px;
}
.formGroup__radioLabel.-marginRightMiddle {
  margin-right: 24px;
}
.formGroup__radioLabel.-noMarginBottom {
  margin-bottom: 0;
}
.formGroup__radioLabel.-flex {
  display: flex;
  align-items: center;
}
.formGroup__radioLabel.-column {
  margin-bottom: 8px;
}
.formGroup__radioLabel.-nowrap {
  white-space: nowrap;
}

/* disabled */
.formGroup__radioLabel.-disabled {
  color: #cccccc;
  cursor: default;
}
.inputRadio__icon {
  display: flex;
  align-items: center;
  height: 28px;
}
.inputRadio + .inputRadio__icon:before {
  display: flex;
  align-items: center;
  content: "\e836";
  font-family: "Material Icons";
  font-weight: normal;
  color: #8e8e8e;
  font-size: 24px;
  width: 24px;
  height: 24px;
  position: relative;
}
.formGroup__radioLabel.-withText .inputRadio + .inputRadio__icon:before {
  margin-right: 8px;
}
.inputRadio:checked + .inputRadio__icon:before {
  content: "\e837";
  color: #4488ee;
}

.inputRadio:disabled + .inputRadio__icon:before,
.inputRadio.-readOnly + .inputRadio__icon::before {
  color: #cccccc;
}

.input__iconHover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-right: 8px;
  border-radius: 100%;
}
.enableHover .input__iconHover:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* hoverつきRadio */
.inputRadio + .input__iconHover .inputRadio__icon:before {
  display: flex;
  align-items: center;
  content: "\e836";
  font-family: "Material Icons";
  font-weight: normal;
  color: #8e8e8e;
  font-size: 24px;
  width: 24px;
  height: 24px;
  position: relative;
}
.inputRadio:checked + .input__iconHover .inputRadio__icon:before {
  content: "\e837";
  color: #4488ee;
}

/* CheckBox */
.inputCheckbox {
  display: none;
}
.inputCheckbox + .inputCheckbox__icon,
.inputCheckbox__iconBack + .inputCheckbox__icon {
  display: flex;
  align-items: center;
  height: 24px;
  position: relative;
}
.inputCheckbox + .inputCheckbox__icon:before,
.inputCheckbox__iconBack + .inputCheckbox__icon:before {
  content: "\e835";
  font-family: "Material Icons";
  font-weight: normal;
  color: #8e8e8e;
  font-size: 24px;
  padding-right: 8px;
  position: relative;
}

.inputCheckbox + .inputCheckbox__iconBack {
  display: flex;
  align-items: center;
  height: 24px;
  position: absolute;
  left: 3px;
}
.inputCheckbox + .inputCheckbox__iconBack:before {
  content: "";
  width: 16px;
  height: 16px;
  background: #ffffff;
  position: relative;
}

.inputCheckbox__box.-flex {
  display: flex;
  align-items: center;
}
.inputCheckbox__box.-flex.-column {
  flex-direction: column;
  align-items: flex-start;
}
.inputCheckbox__box.-noMarginBottom {
  margin-bottom: 0;
}

.formGroup__checkboxLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.formGroup__checkboxLabel.-fileDelete,
.formGroup__checkboxLabel.-pwdReset {
  justify-content: flex-start;
}
.formGroup__checkboxLabel.-normalWeight {
  font-weight: normal;
}
.formGroup__checkboxLabel.-largeFont {
  font-size: 16px;
}
.formGroup__checkboxLabel.-marginRightMiddle {
  margin-right: 8px;
}
.formGroup__checkboxLabel.-marginRight {
  margin-right: 16px;
}
.formGroup__checkboxLabel.-marginRightLarge {
  margin-right: 24px;
}
.formGroup__checkboxLabel.-marginRightXlarge {
  margin-right: 32px;
}
.formGroup__checkboxLabel.-noText {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
.formGroup__checkboxLabel.-noText:hover {
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.formGroup__checkboxLabel.-noText.-disabled:hover {
  background: none;
  cursor: default;
}
.formGroup__checkboxLabel.-noText .inputCheckbox + .inputCheckbox__icon:before {
  padding-right: 0px;
}
.formGroup__checkboxLabel.-forcedCancel .inputCheckbox + .inputCheckbox__icon:before {
  color: #666666;
}
.inputCheckbox:checked + .inputCheckbox__icon:before,
.inputCheckbox:checked + .inputCheckbox__iconBack + .inputCheckbox__icon:before,
.formGroup__checkboxLabel.-forcedCancel .inputCheckbox:checked + .inputCheckbox__icon:before {
  content: "\e834";
  font-family: "Material Icons";
  color: #4488ee;
}
.formGroup__checkboxLabel.-flex {
  display: flex;
}
.formGroup__checkboxLabel.-column {
  margin-bottom: 8px;
}
.inputCheckbox:disabled + .inputCheckbox__icon:before,
.inputCheckbox:checked:disabled + .inputCheckbox__icon:before {
  color: #cccccc;
}
table>thead>tr>th.choose_checkbox {
  padding-bottom: 0px;
}
/* disabled */
input[type=number] {
  ime-mode: disable;
}

/* 終日checkbox */
.inputCheckbox__layout.-allDay {
  display: inline-flex;
  align-items: center;
  margin-left: 24px;
}

/* hoverつきCheckBox */
.inputCheckbox + .input__iconHover .inputCheckbox__icon:before {
  content: "\e835";
  font-family: "Material Icons";
  font-weight: normal;
  color: #8e8e8e;
  font-size: 24px;
  position: relative;
}
.inputCheckbox:checked + .input__iconHover .inputCheckbox__icon:before {
  content: "\e834";
  font-family: "Material Icons";
  color: #4488ee;
}

.form-control.-disabled,
.form-control[disabled] {
  -webkit-text-fill-color: #cccccc !important;
  color: #cccccc !important;
  background-color: inherit !important;
  border: none;
  cursor: inherit;
  opacity: inherit;
  padding: 0px;
  display: flex;
  align-items: center;
}

/* カラーピッカーの四角 */
.minicolors-theme-bootstrap .minicolors-swatch {
  top: 6px !important;
  left: 6px !important;
  cursor: pointer;
}

/**********************************************************
Select2
***********************************************************/
.select2-selection__arrow {
  display: none;
}
.select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single {
  font-weight: normal;
  min-height: 40px;
  padding: 8px 30px 8px 12px;
  border: 1px solid #8e8e8e;
  border-radius: 5px;
}
.enableHover .select2-container--default .select2-selection--single:hover {
  border-color: #333333;
}
.select2-container--default .select2-selection--single:focus {
  border: 2px solid #4488ee;
  box-sizing: border-box;
}
.select2-container--default .select2-selection--single:focus:hover {
  border-color: #4488ee;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-radius: 5px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  margin: 0;
  padding: 0;
}

/* 必須項目 */
.inputSelect.-required + .select2-container--default .select2-selection--single {
  background-color: #ffe5e5 !important;
  border: 1px solid #dd4444 !important;
}
.inputSelect.-required + .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #dd4444 !important;
}

.select2-dropdown {
  max-height: 270px;
  overflow-x: hidden;
  overflow-y: auto;
  border-color: #cccccc;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 18%);
}
.select2-container--open .select2-dropdown--below {
  border-color: #cccccc;
  border-radius: 5px;
}
.select2-search--dropdown .select2-search__field {
  word-break: break-all;
  font-size: 16px;
  height: 40px;
  border-radius: 4px;
  padding: 8px 12px 8px 34px;
  position: relative;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #8e8e8e !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border: 2px solid #3377cc !important;
}
.select2-container--default .select2-results>.select2-results__options {
  max-height: 220px;
}
.select2-search--dropdown {
  position: relative;
}
.select2-search--dropdown::before {
  content: "\e8b6";
  font-family: "Material Icons";
  font-size: 24px;
  color: #b3b3b3;
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 1;
}

/* option */
.select2-results__option {
  display: flex;
  align-items: center;
  font-size: 16px;
  min-height: 40px;
  padding: 12px 48px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  color: #434343;
  background-color: #ffffff;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:hover {
  background: #f7f7f7;
}
/* 選択されている option */
.select2-container--default .select2-results__option--selected {
  color: #434343;
  background-color: #ffffff;
  position: relative;
}
.select2-container--default .select2-results__option--selectable.select2-results__option--selected::after {
  content: "\e5ca";
  font-family: "material Icons";
  font-size: 24px;
  font-weight: normal;
  color: #3377cc;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

/* disabled */
.select2-container--default.select2-container--disabled .select2-selection--single {
  border-color: #eeeeee;
  cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection--single:hover {
  border-color: #eeeeee;
}
.select2-container--default.select2-container--disabled .select2-selection__rendered {
  color: #cccccc;
}

/**********************************************************
必須項目ラベル
***********************************************************/
.requiredItem {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: normal;
  color: #ffffff;
  line-height: 1em;
  width: 40px;
  height: 16px;
  margin-top: 2px;
  background: #c82527;
  border-radius: 8px;
}

/**********************************************************
アラート
***********************************************************/
.manageError__block {
  color: #c82527;
  margin: 8px 0 0;
}

/* 大事な文言用 */
.attention {
  color: #ff0000;
}
.alert-info {
  color: #31708f !important;
  width: 100%;
  padding: 8px 12px;
  background: #d9edf7 !important;
  border-color: #bcdff1 !important;
}
.alert-info .alertLink {
  color: #31708f;
  text-decoration: underline;
  cursor: pointer;
}
.enableHover .alert-info .alertLink:hover {
  opacity: 0.7;
}

.universalAlert {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  color: #ffffff;
  margin: 0;
  padding: 0 0 0 16px;
  position: relative;
}
@media screen and (max-width: 420px) {
  .universalAlert {
    padding: 0 12px;
  }
}

/* Modifier */
.universalAlert.-error {
  background: #cc0f00;
}
.universalAlert.-caution {
  background: #dd4400;
}
.universalAlert.-information {
  background: #3377cc;
}
.universalAlert.-isDemo {
  text-align: center;
  background: #333333;
}
.universalAlert.-isDemo::before {
  content: none;
}
.universalAlert.-flashMessage {
  background: #74acee;
}
.universalAlert.-flashMessage::before {
  content: none;
}

.universalAlert__message {
  display: inline-block;
  font-size: 16px;
  width: 100%;
  padding: 4px 0;
}
@media screen and (max-width: 868px) {
  .universalAlert__message {
    line-height: 1.3em;
  }
}
@media screen and (max-width: 420px) {
  .universalAlert__message {
    font-size: 14px;
    width: 100%;
  }
}
.universalAlert__link {
  color: #ffffff;
  text-decoration: underline;
}
.enableHover .universalAlert__link:hover {
  color: #ffffff;
  text-decoration: none;
}
.universalAlert__icon {
  display: inline-flex;
  align-items: center;
  height: 50px;
  margin: 0 8px 0 0;
  position: relative;
  top: 0;
}
.universalAlert__icon.-closed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 8px 0 auto;
  border-radius: 50%;
  cursor: pointer;
}
@media screen and (max-width: 420px) {
  .universalAlert__icon.-closed {
    margin: 0 0 0 auto;
  }
}
.enableHover .universalAlert__icon.-closed:hover {
  background: rgba(0, 0, 0, 0.1);
}

.universalAlert__icon .material-icons {
  color: #ffffff;
}
.universalAlert.-modal.-unsettled {
  display: flex;
  align-items: center;
  font-size: 16px;
  height: auto;
  padding: 8px 16px;
  background: #cc0f00;
}
.universalAlert.-modal.-unsettled .unsettleOrder__icon {
  display: flex;
  margin-right: 8px;
}
.universalAlert.-modal.-unsettled.visible-xxs {
  display: none;
}
@media screen and (max-width: 420px) {
  .universalAlert.-modal.-unsettled.visible-xxs {
    display: flex;
  }
}

/**********************************************************
フラッシュメッセージ
***********************************************************/
.universalAlert.-flashMessage .flash_message {
  font-size: 16px;
  color: #ffffff;
  margin: auto;
}

.manageFlashAlert {
  width: calc(100% - 230px);
  height: 50px;
  margin: 0;
  position: fixed;
  top: 50px;
  right: 0;
  background: #70a9e2;
  z-index: 1040;
}
.sidebar-collapse .manageFlashAlert {
  width: calc(100% - 50px);
}
.manageFlashAlert.-top {
  top: 0;
}
.manageFlashAlert.-foreground {
  z-index: calc(infinity);
}

/**********************************************************
Contents
***********************************************************/
/**********************************************************
pagenation
***********************************************************/
div.dataTables_wrapper {
  position: relative;
}
div.dataTables_wrapper div.dataTables_paginate {
  text-align: center;
  margin: 16px 0 40px;
}
div.dataTables_wrapper .listTableUi__paginateArea  div.dataTables_paginate {
  margin: 0;
}
.dataTables_paginate {
  height: 32px;
}
ul.pagination {
  margin: 0 !important;
}
.pagination>li>a,
.pagination>li>span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  background-color: #ffffff;
  min-width: 32px;
  height: 32px;
  margin-left: 8px;
  padding: 0 4px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  z-index: 3;
}
.pagination>li>a:focus,
.enableHover .pagination>li>a:hover,
.pagination>li>span:focus,
.enableHover .pagination>li>span:hover {
  color: #333333;
  background-color: #f7f7f7;
  border: 1px solid #cccccc;
  z-index: 2;
}
.pagination>.active>a,
.pagination>.active>a:focus,
.enableHover .pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.enableHover .pagination>.active>span:hover {
  font-weight: bold;
  color: #ffffff;
  background-color: #3377cc;
  border: none;
  cursor: default;
}
.pagination>li.previous>a,
.pagination>li.previous>span,
.pagination>li.next>a,
.pagination>li.next>span {
  color: #3377cc;
  width: 32px;
  padding: 5px;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
.pagination>li.previous>a,
.pagination>li.previous>span {
  margin-left: 0;
}
.enableHover .pagination>li.previous>a:hover,
.enableHover .pagination>li.previous>span:hover,
.enableHover .pagination>li.next>a:hover,
.enableHover .pagination>li.next>span:hover {
  color: #3377cc;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
}
.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.enableHover .pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.enableHover .pagination>.disabled>span:hover {
  font-size: 14px;
  color: #434343;
  min-width: auto;
  background-color: transparent !important;
  padding: 0;
  border: none;
  opacity: 1 !important;
  cursor: default;
}
.pagination>li.previous.disabled>a,
.pagination>li.previou.disabled>a:focus,
.enableHover .pagination>li.previou.disabled>a:hover,
.pagination>li.previous.disabled>span,
.pagination>li.previou.disabled>span:focus,
.enableHover .pagination>li.previou.disabled>span:hover,
.pagination>li.next.disabled>a,
.pagination>li.next.disabled>a:focus,
.enableHover .pagination>li.next.disabled>a:hover,
.pagination>li.next.disabled>span,
.pagination>li.next.disabled>span:focus,
.enableHover .pagination>li.next.disabled>span:hover {
  color: #cccccc !important;
}

/**********************************************************
サブナビゲーション
***********************************************************/
.subNavigation__box .box {
  margin-bottom: 0;
  background-color: #eff3f6;
}
.subNavigation__box .boxBody {
  display: flex;
  align-items: center;
  padding: 0;
  padding-left: 15px;
}
.subNavigation {
  display: flex;
  align-items: center;
}
.subNavigation a {
  color: #333333;
  display: block;
  width: 140px;
  padding: 15px;
  text-align: center;
  font-weight: normal;
  border-bottom: 3px solid transparent;
}
.subNavigation__box .previewLink__box {
  margin: 0 16px 0 auto;
}
.enableHover .subNavigation a:hover {
  color: #434343;
  border-bottom: 3px solid #cccccc;
}
.subNavigation a.active,
.subNavigation a.disabled {
  color: #434343;
  font-weight: bold;
  border-bottom: 3px solid #4488ee;
  background-color: transparent;
}
.subNavigation a.disabled {
  pointer-events: none;
}

/**********************************************************
パンくず風ナビゲーション
***********************************************************/
.breadNav__information {
  font-size: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #cdd4dc;
}
.breadNav__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 16px;
  background-color: #eff3f6;
}
.breadNav {
  text-align: center;
  font-weight: bold;
  line-height: 33px;
  width: 148px;
  height: 35px;
  border: 1px solid #b3c1d1;
  border-radius: 17px;
}
.breadNav a {
  color: #434343;
}
.enableHover .breadNav a:hover {
  opacity: 0.7;
}
.breadNav.-active {
  color: #ffffff;
  background-color: #708298;
}
.breadNav.-disabled {
  background-color: #e4e4e4;
}
.breadNav.-pageLink {
  background-color: #ffffff;
}
.breadNav__arrow {
  padding: 0 8px;
}

/**********************************************************
タブ機能
***********************************************************/
.productTab__box {
  display: flex;
  align-items: center;
  flex-wrap: wrap-reverse;
}
.productTab__inner {
  order: 1;
}

.productTab__box .btnBox {
  order: 2;
  margin-left: auto;
  min-height: 54px;
  padding: 7px 0;
}

.editPageTab__box {
  display: flex;
  flex-wrap: nowrap;
  border: none;
}

.tabs li a {
  min-width:150px;
  text-align: center;
  font-size: 14px;
  color: #434343;
  margin-right: 16px;
  padding: 16px;
  background-color: #eff3f6;
  border: 1px solid #8e8e8e;
  border-bottom-color: transparent;
  border-radius: 0;
}
@media screen and (max-width: 1200px) {
  .tabs li a {
    min-width: auto;
    text-align: left;
    margin-right: 8px;
    padding-right: 35px;
  }
}
@media screen and (max-width: 991px) {
  .tabs li a {
    margin-right: 0px;
    padding: 10px 5px;
    padding-right: 30px;
  }
}
.tabs li.active a,
.tabs li.active a:focus,
.enableHover .tabs li.active a:hover,
.enableHover .tabs li a:hover {
  background-color: #ffffff;
}
.tabs.-disabled li.active a,
.tabs.-disabled li.active a:focus,
.enableHover .tabs.-disabled li.active a:hover,
.enableHover .tabs.-disabled li a:hover {
  background-color: #eeeeee;
}

/**********************************************************
テーブル
***********************************************************/
table {
  width: 100%;
}
/* ソートしない場合のcss */
.tableSort thead tr .-sortIconHidden {
  pointer-events: none;
}
.tableSort thead tr .-sortIconHidden:after {
  display:none;
}

/*Datatable*/
/*FFのみthの縦scrollを消す
div.DTFC_LeftBodyLiner[style],
div.DTFC_RightBodyLiner[style] {
  overflow-y: hidden !important;
}*/
table.dataTable {
  margin-top: 0;
}
/* 0件中0件表示 */
.dataTables_info {
  padding: 2px 0 0 0 !important;
}
.dataTables_empty {
  color: #666666;
}
.dataTables_scrollBody {
  overflow: inherit !important
}
.dataTables_scrollBody table.listTableUi.table>thead {
  height: 0px !important;
  border: none;
}

body .dataTables_wrapper table.table>tbody>tr>td {
  vertical-align: middle !important;
}

/* datatableのthead trが100%に伸びない時がある不具合解消 */
.dataTables_scrollHeadInner {
  width: 100% !important;
}

/**********************************************************
並び替えTable UI
***********************************************************/
.sortTableUi__scroll {
  width: 660px;
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
}
@media screen and (max-width:991px) {
  .sortTableUi__scroll {
    width: 100%;
  }
}
table.sortTableUi,
table.selectedTable {
  width: 100% !important;
  max-width: 640px !important;
  border-collapse: collapse;
  margin: 0 0 16px 1px !important;
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  border-top: 1px solid #cccccc;
}
table.sortTableUi th,
table.selectedTable th {
  color: #999999;
}
table.sortTableUi tbody {
  border-right: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
  border-left: 1px solid #cccccc !important;
}
.ui-sortable-handle {
  background: rgba(255, 255, 255, 0.7);
}
table.sortTableUi tbody td {
  font-size:16px;
  background: rgba(255, 255, 255, 0.7);
}
table.sortTableUi thead th.sortTableUi__cell.-dragHandle,
table.sortTableUi tbody td.sortTableUi__cell.-dragHandle {
  color: #999999;
  width: 40px !important;
  position: relative;
}
table.sortTableUi tbody td.sortTableUi__cell.-dragHandle .iconBtn {
  cursor: move;
}
table.sortTableUi thead th.sortTableUi__cell.-rank,
table.sortTableUi tbody td.sortTableUi__cell.-rank {
  width: 64px !important;
}
table.sortTableUi thead th.sortTableUi__cell.-code,
table.sortTableUi tbody td.sortTableUi__cell.-code {
  width: 140px !important;
  vertical-align: middle;
}
table.sortTableUi thead th.sortTableUi__cell.-state,
table.sortTableUi tbody td.sortTableUi__cell.-state {
  width: 40px !important;
  text-align: center;
  padding-left: 0 !important;
}
table.sortTableUi tbody td.sortTableUi__cell.-rank,
table.sortTableUi tbody td.sortTableUi__cell.-dragHandle,
table.sortTableUi tbody td.sortTableUi__cell.-name,
table.sortTableUi tbody td.sortTableUi__cell.-manage_name,
table.sortTableUi tbody td.sortTableUi__cell.-state {
  cursor: move;
  vertical-align: middle;
}
table.sortTableUi thead th.sortTableUi__cell.-trash,
table.sortTableUi tbody td.sortTableUi__cell.-trash {
  text-align: center;
  vertical-align: middle;
  width: 58px;
  cursor: default;
}

/**********************************************************
オプション 紐づいているテーブル
***********************************************************/
.associateTable>thead>tr>th {
  border: none;
}
.boxBody.-disabled .associateTable>tbody>tr>td {
  border-top: 1px solid #cccccc;
}
.edit table.dataTable {
  border-collapse: collapse !important;
}
table.dataTable.associateTable {
  max-width: 640px !important;
  margin: 0 !important;
}
.associateTable tbody tr {
  cursor: move;
}
.associate_Id {
  width: 1px;
  border-top: 2px solid #f4f4f4;
  border-bottom: 2px solid #f4f4f4;
  border-left: 2px solid #f4f4f4;
}
.associateTable tbody tr>td.current_g_name,
.associateTable tbody tr>td.current_dp_name {
  border-top: 1px solid #f4f4f4;
  border-bottom: 2px solid #f4f4f4;
  text-align: left;
}
.associate_sort_key {
  width: 1px;
  border-top: 2px solid #f4f4f4;
  border-bottom: 2px solid #f4f4f4;
  cursor: default;
}
.no_associate_list span {
  display: block;
  font-size: 18px;
  color: #8e8e8e;
  padding: 40px;
}

/**********************************************************
紐付け済みTable
***********************************************************/
.table.selectedTable>thead>tr>th {
  color: #999999;
  white-space: nowrap;
  border-bottom: 2px solid #cccccc;
}
.selectedTable__cell.-state {
  width: 40px !important;
}
th.selectedTable__cell.-state {
  text-align: center;
}
.selectedTable__cell.-id {
  width: 64px !important;
}
.selectedTable__cell.-code {
  width: 160px !important;
}
.selectedTable__cell.-name {
  width: auto !important;
}
.selectedTable__cell.-trash {
  width: 40px !important;
}

.selectedTable.-categorySelect .selectedTable__cell.-id {
  padding-left: 18px;
}

td.selectedTable__cell.-noAuthorization{
  cursor: default;
  pointer-events: none;
}

/**********************************************************
 一覧テーブルUI
***********************************************************/
@media screen and (max-width:768px) {
  .listTable__box table {
    font-size: 12px;
  }
}
.listTable__box .box-body {
  padding: 0;
}

.listTableUi__box {
  margin-bottom: 72px;
  border-bottom: 1px solid #cccccc;
}
.listTableUi__box.-marginTop {
  margin-top:  72px;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
  color: #434343;
  opacity: 1;
  font-size: 16px;
  font-family: "Material Icons";
  font-weight: normal;
  display: inline-block;
  padding-left: 8px;
  bottom: 14px;
  right: auto;
}
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc,
table.dataTable thead>tr>td.sorting {
  padding-right: 8px;
}
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc {
  color: #434343 !important;
  font-weight: bold !important;
}
table.dataTable thead .sorting_asc:after {
  content: "\e5d8";
}
table.dataTable thead .sorting_desc:after {
  content: "\e5db";
}
table.dataTable thead .sorting:after {
  color: #cccccc;
  content: "\e5db";
}

table.listTableUi {
  width: 100% !important;
  margin-top: 0 !important;
  position: relative;
  z-index: 0;
  border-collapse: collapse !important;
}
table.listTableUi.table>thead {
  border-bottom: 1px solid #cccccc;
}
table.listTableUi.table>tbody>tr {
  border-top: solid 1px #cccccc;
}
table.listTableUi.table>tbody>tr:first-child {
  border-top: none;
}
table.listTableUi.table>thead>tr>th {
  font-size: 14px;
  font-weight: normal;
  color: #999999;
  border-top: none;
  padding: 24px 32px 16px 0;
  white-space: nowrap;
  border-bottom: 2px solid #cccccc;
  box-sizing: content-box;
}
@media screen and (max-width:  1200px) {
  table.listTableUi.table>thead>tr>th {
    padding: 16px 24px 16px 0;
  }
}
@media screen and (max-width: 991px) {
  table.listTableUi.table>thead>tr>th {
    padding: 24px 16px 16px 0;
  }
}
table.listTableUi.table>tbody>tr>td {
  font-size: 14px;
  font-weight: normal;
  height: 64px;
  padding: 12px 32px 12px 0;
  border-top: none;
  vertical-align: middle;
}
@media screen and (max-width:  1200px) {
  table.listTableUi.table>tbody>tr>td {
    padding: 16px 24px 16px 0;
  }
}
@media screen and (max-width: 991px) {
  table.listTableUi.table>tbody>tr>td {
    padding: 16px 16px 16px 0;
  }
}
table.listTableUi.table>thead>tr>th:first-child,
table.listTableUi.table>tbody>tr>td:first-child {
  padding-left: 24px !important;
}
table.listTableUi.table>thead>tr>th:last-child,
table.listTableUi.table>tbody>tr>td:last-child {
  padding-right: 24px !important;
}
table.listTableUi .clickable,
table.mappingTableUi .clickable {
  cursor: pointer;
  transition: .3s;
}
.listTableUi .clickable.-over {
  background: #f7f7f7;
}
.enableHover table.listTableUi .clickable:hover,
.enableHover table.mappingTableUi .clickable:hover {
  background-color: #f0f8ff;
}
.enableHover table.listTableUi .clickable.-disabled:hover,
.enableHover table.mappingTableUi .clickable.-disabled:hover {
  cursor: default;
}

.enableHover table.listTableUi .clickable.-checkOnly:hover,
.enableHover table.mappingTableUi .clickable.-checkOnly:hover {
  background-color: transparent;
}
.enableHover table.listTableUi .clickable.-checkOnly:hover .formGroup__checkboxLabel.-noText,
.enableHover table.mappingTableUi .clickable.-checkOnly:hover .formGroup__checkboxLabel.-noText,
.enableHover table.listTableUi .clickable.-checkOnly:hover .formGroup__radioLabel.-noText,
.enableHover table.mappingTableUi .clickable.-checkOnly:hover .formGroup__radioLabel.-noText {
  background: rgba(0, 0, 0, 0.1);
}
.enableHover table.listTableUi .clickable.-checkOnly:hover .formGroup__checkboxLabel.-noText.-disabled,
.enableHover table.mappingTableUi .clickable.-checkOnly:hover .formGroup__checkboxLabel.-noText.-disabled,
.enableHover table.listTableUi .clickable.-checkOnly:hover .formGroup__radioLabel.-noText.-disabled,
.enableHover table.mappingTableUi .clickable.-checkOnly:hover .formGroup__radioLabel.-noText.-disabled {
  background: none !important;
  cursor: default;
}

.listTableUi .clickable.-over .listTableUi__cellInner {
  position: relative;
}
.listTableUi .clickable.-over .listTableUi__cellInner.-eventTerm::before,
.listTableUi .clickable.-over .listTableUi__cellInner.-term::before {
  display: flex;
  align-items: center;
  content: "\e88f";
  font-family: "Material Icons";
  font-size: 20px;
  font-weight: normal;
  color: #cccccc;
  height: 100%;
  position: absolute;
  left: -26px;
}

.nolink {
  cursor: default;
}
.listTableUi .clickable.-unauthorized {
  cursor: default !important;
  pointer-events: none;
}

.listTableUi .clickable.-unsettled .listTableUi__cellInner {
  position: relative;
}
.listTableUi .clickable.-unsettled .listTableUi__cellInner::before {
  content: "\e160";
  font-family: "Material Icons Outlined";
  font-size: 20px;
  font-weight: normal;
  color: #cc2222;
  position: absolute;
  top: -3px;
  left: -26px;
}
.mappingTableUi .clickable.-notClick {
  background: #f7f7f7;
  cursor: default !important;
}
.enableHover table.mappingTableUi .clickable.-notClick:hover {
  background: #f7f7f7;
}

.listTableUi .listTableUi__cellInner.-caution {
  position: relative;
}
.listTableUi .listTableUi__cellInner.-caution::before {
  display: flex;
  align-items: center;
  content: "\f083";
  font-family: "Material Icons Outlined";
  font-size: 20px;
  font-weight: normal;
  color: #dd4400;
  height: 100%;
  position: absolute;
  left: -26px;
}

.listTableUi__statusBlock {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .listTableUi__statusBlock {
    width: 100%;
    justify-content: center;
  }
}
.listTableUi__statusBlock.-pagenate {
  margin-bottom: 0;
  position: absolute;
}
.listTableUi__statusBlock.-pagenate.-top {
  top: -52px;
}
.listTableUi__statusBlock.-pagenate.-bottom {
  bottom: -50px;
}
.listTableUi__statusBlockLayout {
  display: flex;
  align-items: center;
}
.listTableUi__statusBlockLayout.-csvPrint {
  margin-left: auto;
}
.listTableUi__totalNumArea {
  padding-left: 8px;
}
.listTableUi__totalNum {
  font-size: 18px;
}
.listTableUi__totalNum.-honorificTitle {
  font-size: 14px;
}
.listTableUi__paginateArea {
  display: flex;
  align-items: center;
}
.listTableUi__totalNumArea + .listTableUi__paginateArea {
  margin-left: 16px;
}
@media screen and (max-width: 767px) {
  .listTableUi__totalNumArea + .listTableUi__paginateArea {
    margin-left: 0;
  }
}
.listTableUi__csvPrintArea {
  display: flex;
  align-items: center;
}

/* 一覧共通列幅 */
/* 公開・非公開 */
.listTableUi th.listTableUi__cell.-state,
.listTableUi td.listTableUi__cell.-state {
  text-align: center;
  width: 40px !important;
  min-width: 40px;
  padding-left: 24px;
}
.listTableUi th.listTableUi__cell.-deleteCol,
.listTableUi td.listTableUi__cell.-deleteCol {
  text-align: center;
  width: 40px;
  min-width: 40px;
}
.listTableUi th.listTableUi__cell.-copy,
.listTableUi td.listTableUi__cell.-copy {
  text-align: center;
  width: 40px !important;
  min-width: 40px;
  padding-right: 8px;
}
th.listTableUi__cell.-id + th.listTableUi__cell.-state,
td.listTableUi__cell.-id + td.listTableUi__cell.-state,
th.listTableUi__cell.-checkbox + th.listTableUi__cell.-state,
td.listTableUi__cell.-checkbox + td.listTableUi__cell.-state {
  padding-left: 0;
}

/* チェックボックス */
th.listTableUi__cell.-checkbox,
td.listTableUi__cell.-checkbox {
  text-align: center;
  width: 40px !important;
}
th.listTableUi__cell.-checkbox {
  padding-bottom: 8px !important;
}

td.listTableUi__cell.-id a,
td.listTableUi__cell.-code a,
td.listTableUi__cell.-codeManageCode .listTableUi__cellInner.-code a {
  color: #3377cc;
}
td.listTableUi__cell.-id a:hover,
td.listTableUi__cell.-code a:hover,
td.listTableUi__cell.-codeManageCode .listTableUi__cellInner.-code a:hover {
  color: #3377cc;
  text-decoration: underline;
}

/**********************************************************
紐付けページテーブルUI
***********************************************************/
table.listTableUi.table.-linkTable thead {
  border: none;
}
table.listTableUi.-linkTable.table>thead>tr>th {
  font-weight: bold;
  color: #999999;
  box-sizing: content-box;
}
table.listTableUi.-linkTable.table>tbody>tr>td {
  font-size: 16px;
  font-weight: normal;
}
.listTableUi.-linkTable th.listTableUi__cell.-name,
.listTableUi.-linkTable td.listTableUi__cell.-name {
  width: auto !important;
  word-break : break-all;
}
.listTableUi.-linkTable th.listTableUi__cell.-state,
.listTableUi.-linkTable td.listTableUi__cell.-state {
  text-align: center;
  width: 40px !important;
}
.listTableUi.-linkTable th.listTableUi__cell.-code,
.listTableUi.-linkTable td.listTableUi__cell.-code {
  width: 130px !important;
  word-break : break-all;
}
.listTableUi.-linkTable th.listTableUi__cell.-deleteCol,
.listTableUi.-linkTable td.listTableUi__cell.-deleteCol {
  text-align: center;
  width: 40px;
}
.listTableUi.-linkTable th.listTableUi__cell.-price,
.listTableUi.-linkTable td.listTableUi__cell.-price {
  width: 100px;
  text-align: right;
}
.listTableUi.-linkTable th.listTableUi__cell.-eventName,
.listTableUi.-linkTable td.listTableUi__cell.-eventName {
  width: 120px;
  word-break : break-all;
}

/**********************************************************
CSV・印刷ドロップダウン
***********************************************************/
.dropdownNarrowDown__btn {
  display: flex;
  align-items: center;
  color: #3377cc;
  width: 134px;
  height: 40px;
  position: relative;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  cursor: pointer;
}
.dropdownNarrowDown__icon.-btn {
  z-index: 2;
  font-size: 18px !important;
  color: #626262;
  width: 18px;
  position: absolute;
  top: 3px;
  right: 5px;
  pointer-events: none;
}

.dropdownNarrowDown__btn.-disabled {
  color: #cccccc !important;
  background: #eeeeee !important;
  border: none !important;
  cursor: default;
  pointer-events: none;
}
.dropdownNarrowDown__btn.-disabled::before {
  color: #cccccc !important;
}
.dropdownNarrowDown__btn.-csvPrint {
  width: 120px;
}
.dropdownNarrowDown__btn.-csvPrint:hover {
  color: #3377cc;
  background: #f7f7f7;
  opacity: 1;
}
.dropdownNarrowDown__btnText {
  display: inline-block;
  margin-left: 16px;
}

/* ドロップダウン内 */
.dropdownNarrowDown__menu {
  margin: 0;
  padding: 0;
}
.dropdownNarrowDown__menu.-csvPrint {
  width: 242px;
  top: 8px;
  left: auto;
  right: 0;
}
.csvPrint {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}
.dropdownNarrowDown__li {
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 40px;
  padding: 0 16px 0;
  position: relative;
  cursor: pointer;
}
.dropdownNarrowDown__li:hover {
  background: #f7f7f7;
}
.dropdownNarrowDown__li.-disabled {
  color: #cccccc;
  cursor: default;
  pointer-events: none;
}
.dropdownNarrowDown__li.-disabled:hover {
  background: #ffffff;
}
.dropdownNarrowDown__icon.-csvPrint {
  margin: 0 12px 0 0;
}

/* 廃止予定ラベル */
.deprecated {
  font-size: 12px;
}

/**********************************************************
メールプレビュー
***********************************************************/
.dropdownNarrowDown.-right {
  display: flex;
  justify-content: flex-end;
}
.dropdownNarrowDown__btn.-previewItems {
  width: 150px;
}
.enableHover .dropdownNarrowDown__btn.-previewItems:hover {
  background: #f7f7f7;
  color: #3377cc;
}
.dropdownNarrowDown__btnText.-previewItems {
  margin: 0;
}

.dropdownNarrowDown.open .dropdownNarrowDown__btn.-previewItems,
.dropdownNarrowDown.-narrowing .dropdownNarrowDown__btn.-previewItems {
  background: #3377cc;
  border-color: #3377cc;
}
.dropdownNarrowDown.open .dropdownNarrowDown__btnText.-previewItems,
.dropdownNarrowDown.open .dropdownNarrowDown__btnText.-previewItems:hover {
  color: #ffffff;
}

/**********************************************************
検索窓
***********************************************************/
.dropdownNarrowDown__btn.-dashboard {
  width: 108px;
}
.dropdownNarrowDown__btn.-dashboard:hover {
  color: #3377cc;
  background: #f7f7f7;
  opacity: 1;
}
.dropdownNarrowDown__icon {
  font-weight: normal;
  margin: 8px 4px 8px 8px;
}
.dropdownNarrowDown__icon.-on {
  color: #ffffff;
}
.dropdownNarrowDown__icon.-off {
  color: #8e8e8e;
}

.dropdownNarrowDown__icon.-filter {
  font-weight: normal;
  margin: 8px;
}
.dropdownNarrowDown__icon.-filter.-filterOn {
  color: #4488ee;
}
.dropdownNarrowDown__icon.-filter.-filterOff {
  color: #8e8e8e;
}

.dropdownNarrowDown__btnText.-dashboard {
  margin-left: 0;
}

.dropdownNarrowDown.-dashboard {
  margin-left: 16px;
}

.dropdownNarrowDown.open .dropdownNarrowDown__btn.-dashboard,
.dropdownNarrowDown.-narrowing .dropdownNarrowDown__btn.-dashboard {
  background: #3377cc;
  border-color: #3377cc;
}
.dropdownNarrowDown.open .dropdownNarrowDown__btnText.-dashboard,
.dropdownNarrowDown.-narrowing .dropdownNarrowDown__btnText.-dashboard {
  color: #ffffff;
}
body.enableHover .dropdownNarrowDown.open .dropdownNarrowDown__btn.-dashboard:hover,
body.enableHover .dropdownNarrowDown.-narrowing .dropdownNarrowDown__btn.-dashboard:hover {
  background-color: #4488ee;
  border-color: #4488ee;
}
body.enableHover .dropdownNarrowDown.open .dropdownNarrowDown__btnText.-dashboard:hover,
body.enableHover .dropdownNarrowDown.-narrowing .dropdownNarrowDown__btnText.-dashboard:hover {
  color: #ffffff;
}

.form-control[readonly].inputText.-searchDropdownInput {
  background: #ffffff;
  cursor: pointer;
}

/* 検索窓の中のドロップダウン */
.inSearchDropdown__menu {
  width: 370px;
  height: 320px;
  padding: 0;
}
.searchWrapper__group.-inSearchDropdown {
  margin: 4px;
  position: relative;
}
.searchWrapper__group.-inSearchDropdown::before {
  content: "\e8b6";
  font-family: "Material Icons";
  font-size: 24px;
  color: #b3b3b3;
  position: absolute;
  top: 3px;
  left: 10px;
  z-index: 2;
}
.inputText.-inSearchDropdown {
  padding: 12px 12px 12px 42px;
}

.inSearchDropdown__listScroll {
  height: 265px;
  margin-top: 8px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.inSearchDropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.inSearchDropdown__listItemName {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333333;
  min-height: 48px;
  padding: 8px 16px 8px 50px;
  position: relative;
}

.enableHover .inSearchDropdown__listItemName:hover {
  background: #f7f7f7;
  cursor: pointer;
}
.inSearchDropdown__listItem.-selected .inSearchDropdown__listItemName::after {
  content: "\e5ca";
  font-family: "material Icons";
  font-size: 24px;
  font-weight: normal;
  color: #3377cc;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

/* 検索結果がない時 */
.inSearchDropdown__noList {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 225px;
  margin: 24px auto;
}
@media screen and (max-width: 767px) {
  .inSearchDropdown__noList {
    height: calc(100vh - 300px);
  }
}

.inSearchDropdown__noListIcon {
  color: #cccccc;
}
.inSearchDropdown__noListText {
  display: inline-block;
  color: #bcbcbc;
  margin-left: 4px;
}

/**********************************************************
一覧画面 検索部分
***********************************************************/
.searchWrapper__box {
  background-color: #eff3f6;
}

.searchWrapper__box .box-footer {
  padding: 0 24px 32px;
  background-color: transparent;
  border: none;
}
.searchWrapper {
  vertical-align: middle;
  margin-bottom: 16px;
}
.searchWrapper.-noMarginBottom {
  margin-bottom: 0;
}
.searchWrapper__group {
  display: table;
}
.searchWrapper__group.-marginRight {
  margin-right: 16px;
}
.searchWrapper__group .formGroup__label {
  display: table-cell;
  width: 120px;
  height: 40px;
  font-weight: normal;
  padding-right: 16px;
  vertical-align: middle;
}
.searchWrapper__group .formGroup__label.-top {
  vertical-align: top;
}
.searchWrapper__group .formGroup__label.-withInput {
  padding-top: 12px;
}
.searchWrapper__group .formGroup__label.-autoWidth {
  width: auto;
}
.searchWrapper__group .formGroup__label.-withButton {
  margin-top: 8px;
}
.formGroup__tilde {
  margin: 0 8px;
}
.formGroup__tilde.-leftPaddingOnly {
  margin: 0 0 0 8px;
}

/**********************************************************
新検索窓
***********************************************************/
.searchDropdown__box.-order {
  display: flex;
}
@media screen and (max-width: 991px) {
  .searchDropdown__box.-order {
    flex-wrap: wrap;
  }
}
.searchDropdown__box.-order .btnBox__title + .btnBox__layout,
.searchDropdown__box.-order .btnBox__layout + .btnBox__layout {
  margin-left: 8px;
}
.searchDropdown__box.-order .searchWrapper + .btnBox {
  margin-left: 16px;
}
.inputText__box.-search {
  margin: 0;
  position: relative;
}
.inputText__box.-search.-dropdown {
  width: 470px;
}
@media screen and (max-width: 991px) {
  .inputText__box.-search.-dropdown {
    width: 440px;
  }
}
.inputText.-searchSize {
  width: 470px;
  padding: 8px 42px;
}
@media screen and (max-width: 991px) {
  .inputText__box.-searchSize,
  .inputText.-searchSize {
    width: 440px;
  }
}
.searchDropdown__searchIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #8e8e8e;
  text-align: center;
  width: 34px;
  height: 34px;
  position: absolute;
  top: 3px;
  left: 3px;
  cursor: pointer;
}
.enableHover .searchDropdown__searchIcon:hover {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}
.searchDropdown__searchIcon.-noHover,
.enableHover .searchDropdown__searchIcon.-noHover:hover {
  background: none;
  cursor: default;
}
.searchDropdown__dropdownIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #8e8e8e;
  text-align: center;
  width: 34px;
  height: 34px;
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
}
.enableHover .searchDropdown__dropdownIcon:hover {
  color: #8e8e8e;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
}

/* アイコンツールチップ */
.withTooltip:hover::before {
  content: attr(data-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1em;
  color: #ffffff;
  padding: 8px 12px;
  position: absolute;
  bottom: -38px;
  background: rgba(51, 51, 51, 0.8);
  border-radius: 4px;
  z-index: 1;
  /* アイコンツールチップ 時間差アニメーション */
  animation-name: fadeUp;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
  animation-delay: 0.4s;
  opacity:0;
}
.withTooltip.-em2:hover::before {
  width: 54px;
}
.withTooltip.-em3:hover::before {
  width: 68px;
}
.withTooltip.-em4:hover::before {
  width: 82px;
}
.withTooltip.-em5:hover::before {
  width: 94px;
}
.withTooltip.-em7:hover::before {
  width: 124px;
}

/* 公開・非公開用 */
.withTooltip.-stateOn:hover::before {
  content: "公開";
}
.withTooltip.-stateOff:hover::before {
  content: "非公開";
}

/* アイコンツールチップ 時間差アニメーション設定 */
@keyframes fadeUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* アイコンツールチップ popupオープン時 */
.searchWrapper.open .withTooltip:hover::before {
  content: "";
}

.dropdown-menu {
  border-color: #cccccc;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}

.form-inline .input-group.timepicker .form-control,
.form-inline .input-group.timepicker .input-group-addon,
.form-inline .input-group.timepicker .input-group-btn {
  width: 100%;
}

.dropdown-menu.searchDropdown__menu,
.dropdown-menu.previewDropdown__menu {
  min-width: 680px;
  margin: 0;
  padding: 24px;
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
}
@media screen and (max-width:768px) {
  .dropdown-menu.searchDropdown__menu {
    left: -24px;
  }
}
@media screen and (max-width:991px) {
  .dropdown-menu.searchDropdown__menu.-dashboard {
    left: -60px;
  }
}
.dropdown-menu.previewDropdown__menu {
  top: auto;
}
.previewDropdown__menu.-previewItems {
  top: 100%;
  left: auto;
  right: 0;
}

/* ドロップダウンメニュー内 */
.searchDropdown__menu .searchWrapper {
  margin-bottom: 16px;
}
.searchDropdown__menu .searchWrapper.-marginBottom24 {
  margin-bottom: 24px;
}
.previewDropdown__menu .searchWrapper + .searchWrapper {
  margin-top: 16px !important;
}
.searchDropdown__menu .searchWrapper__group,
.previewDropdown__menu .searchWrapper__group {
  display: flex;
  align-items: center;
}
.searchDropdown__menu .searchWrapper__group.-alignTop {
  align-items: flex-start;
}
.searchDropdown__menu .searchWrapper__group.-orderState {
  margin-top: 24px;
}
.searchDropdown__menu .formGroup__label,
.previewDropdown__menu .formGroup__label {
  display: block;
  width: 96px;
  height: auto;
  margin-bottom: 0;
}
.previewDropdown__menu .inputSelect__box + .inputSelect__box {
  margin-top: 16px;
}
.searchDropdown__menu .formGroup__label.-event {
  width: 100px;
}
.searchDropdown__menu .searchWrapper__group.-orderState .formGroup__label {
  min-width: 96px;
}
.searchDropdown__menu .searchWrapper__group.-orderState .formGroup__checkboxLabel {
  justify-content: flex-start;
  min-width: 3em;
  margin: 0 16px 0 0;
}
.searchDropdown__menu .inputText.-fullSize {
  width: 326px;
}
.searchDropdown__menu .inputText.-smallSize {
  width: 120px;
}
.searchDropdown__menu .inputSelect__boxInner.-regularSize {
  width: 248px;
}
.searchDropdown__menu .inputSelect__boxInner.-smallSize {
  width: 120px;
}
.searchDropdown__menu .inputSelect__boxInner.-marginLeft {
  margin-left: 8px;
}
.searchWrapper .inputText::placeholder {
  color: #bcbcbc;
}
/* 注文状況 */
.searchDropdown__menu .inputCheckbox__layout.-orderState {
  display: flex;
  flex-wrap: wrap;
}
/* datetimepicker timepicker */
.formGroup__selectDateLayout,
.formGroup__selectTimeLayout {
  position: relative;
}
.formGroup__selectDateLayout.-selectDateTimeSize {
  width: 220px;
}
.formGroup__selectDateLayout::after,
.formGroup__selectTimeLayout::after,
.formGroup__selectDateRangeLayout::after,
.formGroup__receiptAtTime::after {
  font-family: "Material Icons";
  font-size: 20px;
  font-weight: normal;
  color: #666666;
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 10;
}
.formGroup__selectDateLayout::after,
.formGroup__selectTimeLayout::after {
  cursor: pointer;
}
.formGroup__selectDateLayout::after,
.formGroup__selectDateRangeLayout::after,
.formGroup__receiptAtTime::after {
  content: "\e935";
}
.formGroup__selectTimeLayout::after {
  content: "\e192";
}
.formGroup__selectDateLayout.-disabled:after,
.formGroup__selectTimeLayout.-disabled:after,
.formGroup__selectDateRangeLayout.-disabled:after {
  color: #cccccc;
  cursor: default;
}
.formGroup__selectTimeLayout .dropdown-menu {
  display: block !important;
}
.formGroup__selectTimeBox {
  margin-left: 8px;
}
.formGroup__selectTimeBox.-noLeftMargin {
  margin-left: 0;
}

.inputText.-searchMiddleSize {
  width: 370px;
  padding: 12px 42px 12px 12px;
}
.inputText__box.-dropdown {
  position: relative;
}
.inputText__box.-dropdown::before {
  z-index: 2;
  content: '\e5cf';
  font-family: 'Material Icons';
  font-size: 18px;
  color: #626262;
  width: 18px;
  line-height: 40px;
  position: absolute;
  top: 0;
  right: 12px;
  pointer-events: none;
}
.inputText__box.-search.-dropdown::before {
  content: '';
}

/* ドロップダウンメニュー内 ボタンボックス */
.searchDropdown__menu .btnBox.-search {
  margin: 0 !important;
  padding: 0;
  align-items: center;
}
.searchDropdown__menu .btnBox.-flexBitween {
  justify-content: space-between;
}
.searchDropdown__menu .btnBox.-flex .btnBox__layout + .btnBox__layout {
  margin-left: 8px;
}

/* 検索エリア データなし */
.search__noData {
  font-size: 16px;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
}
.search__noData.-noList {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666666;
  height: 88px;
}

/* 検索項目 */
.narrowCondition__box {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 -8px;
}
.narrowCondition__boxInner.-item {
  margin-left: 16px;
}
.narrowCondition__head {
  color: #555555;
}
.narrowCondition__item {
  display: inline-flex;
  align-items: center;
  color: #8e8e8e;
  margin: 4px 8px 4px 0;
  padding: 2px 4px 2px 8px;
  background: #ffffff;
  border-radius: 4px;
}
.narrowCondition__item.-settleState {
  padding-right: 8px;
}
.narrowCondition__item:last-child {
  margin-right: 0;
}
.narrowCondition__deleteIconBox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height:20px;
  margin-left: 4px;
  cursor: pointer;
}
.enableHover .narrowCondition__deleteIconBox:hover {
  background: #eeeeee;
  border-radius: 50%;
}

.narrowCondition__deleteIconBox .material-icons {
  font-size: 16px;
  color: #3377cc;
}

/* 注文一覧 受取日時 */
.receiptedAt__btn {
  margin-bottom: 12px;
}
.receiptedAt {
  display: flex;
  align-items: center;
}

/**********************************************************
datetimepicker
***********************************************************/
/* 吹き出し部分 */
.bootstrap-datetimepicker-widget.dropdown-menu.bottom {
  top: 44px !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  top: -12px;
  left: 16px;
  right: auto;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid white;
  top: -11px;
  left: 17px;
  right: auto;
}

.bootstrap-datetimepicker-widget td.day {
  font-size: 18px;
}
/* 土日 */
.datepicker-days th.dow:first-child,
.datepicker-days td:first-child,
.datepicker-days td:first-child:hover {
color: #ee5656 !important;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child,
.datepicker-days td:last-child:hover {
color: #365f8a !important;
}
.datepicker-days td:first-child.active.active,
.datepicker-days td:last-child.active.active {
color: #ffffff !important;
}

.datepicker-days .glyphicon-chevron-left {
  color: #4488ee !important;
}

.datepicker-days .glyphicon-chevron-right {
  color: #4488ee !important;
}

.datepicker-days table tr {
  display: flex;
  align-items: center;
    justify-content: center;
}

.datepicker-days table tr th,
.datepicker-days table tr td.day {
  font-size: 12px;
  display: block;
  width: 35px;
  height: 35px;
  box-sizing: border-box;
  border: 2px solid #fff;
}

.datepicker-days table tr td.active.active:hover,
.datepicker-days table tr td.day:hover {
  border: 2px solid #4488ee;
  border-radius: 50%;
  background-color: inherit;
  box-sizing: border-box;
  color: #434343;
}

.datepicker-days table tr td.today {
  position: relative;
  background: none;
  background-image:inherit;
  border-left: 0px;
  border-right: 0px;
}

.datepicker-days table tr td.today:after {
  content:"";
  width: 33px;
  height: 35px;
  position: absolute;
  top: 0;
  left: 0px;
  border-bottom: 2px solid #324E70;
  border-radius: none;
  border-left: 0px;
  border-right: 0px;
  z-index:10;
}

.datepicker-days table tr td.today:hover,
.datepicker .datepicker-days table tr td.today:active {
  background-color: #fff!important;
  background-image: inherit;
  text-shadow: none;
}

.datepicker-days table tr td.today:before {
  display: none;
}

.datepicker-days table tr td.active.active {
  border: 2px solid #3377cc;
  text-shadow: none;
  background-color: #3377cc;
  border-radius: 50%;
  background-image: none;
  box-sizing: border-box;
}

body .bootstrap-datetimepicker-widget table thead th.picker-switch {
  pointer-events:none;
}

body .bootstrap-datetimepicker-widget table thead th.picker-switch:hover {
  cursor: inherit;
  background: inherit;
}

.datepicker table tr td.new,
.datepicker table tr td.new:hover,
.datepicker table tr td.old,
.datepicker table tr td.old:hover {
color: #999999 !important;
}

/* 時間選択UI */
.bootstrap-datetimepicker-widget .timepicker table {
  margin: auto;
}
.bootstrap-datetimepicker-widget .timepicker table td,
.bootstrap-datetimepicker-widget .timepicker table td span {
  font-size: 14px;
  font-weight: normal;
  width: auto;
  line-height: unset;
}
.bootstrap-datetimepicker-widget .timepicker table td {
  height: 30px;
}
.bootstrap-datetimepicker-widget .timepicker table td span {
  height: auto;
}
.bootstrap-datetimepicker-widget .timepicker table td span:hover {
  background: none;
}
.bootstrap-datetimepicker-widget .timepicker table td.separator {
  width: 9px;
}
.picker-switch a, .timepicker-picker a {
  color: #333333;
  padding: 0 !important;
}
.picker-switch a .glyphicon-time,
.picker-switch a .glyphicon-calendar {
  color: #ffb540;
}
.formGroup__selectTimeBox .bootstrap-datetimepicker-widget {
  width: 160px;
}

/**********************************************************
登録・編集画面
***********************************************************/
/* 見出し */
.boxHeader {
  color: #434343;
  padding: 16px;
  border-bottom: 2px solid #3377cc;
  position: relative;
}
.box-header.boxHeader .box-title {
  font-size: 18px;
  font-weight: bold;
  position: relative;
  top: 1px;
}

.flexHeader__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 40px;
  padding: 0;
}
.flexHeader__title h1 {
  margin-right: 16px;
}
a.arrowBack {
  width: 32px;
  height: 32px;
  margin: 4px 8px 4px 0;
}
.arrowBack .material-icons {
  font-size: 32px;
  color: #8e8e8e;
}
.arrowBack:hover .material-icons {
  color: #666666;
}

/* レイアウト */
.settingArea__box.-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.overText {
  display: flex;
  align-items: center;
  color: #8e8e8e;
  letter-spacing: 1px;
  margin: 0 8px 0 auto;
}
.overText::before {
  display: flex;
  align-items: center;
  content: "\e88f";
  font-family: "Material Icons";
  font-size: 24px;
  font-weight: normal;
  color: #8e8e8e;
  height: 24px;
  margin-right: 4px;
}
.settingArea__boxInner {
  display: flex;
  padding: 16px 0 16px 8px;
  border-bottom: 1px solid #cccccc;
  position: relative;
}
.settingArea__boxInner.-alignCenter {
  align-items: center;
}
.settingArea__boxInner.-disabled {
  color: #cccccc;
}
.settingArea__boxInner.-largeMargin {
  padding: 24px 0;
}
.settingArea__boxInner.-status {
  align-items: center;
  padding: 0 !important;
  border: none;
}
.settingArea__boxInner.-status.-withDiscription {
  align-items: flex-start;
}
.settingArea__boxInner:last-child {
  padding-bottom: 0;
  border: none;
}
.settingArea__boxInner.-withLayout {
  flex-direction: column;
}
.settingArea__boxInner.-firstChild {
  padding-top: 0;
}
.settingArea__boxInner.-lastChild {
  padding-bottom: 0;
  border: none;
}
.settingArea__boxInner.-noBorder {
  border: none;
}
.settingArea__boxInner.-noPaddingBottom {
  padding-bottom: 0;
}
.settingArea__boxInnerLayout {
  display: flex;
}
.settingArea__boxInnerLayout.-disabled {
  color: #cccccc;
}
.settingArea__boxInnerLayout.-flexColumn {
  flex-direction: column
}
.settingArea__boxInnerLayout.-firstChild .settingArea__heading,
.settingArea__boxInnerLayout.-firstChild .settingArea__content {
  padding-bottom: 16px;
}
.settingArea__boxInnerLayout.-firstChild .settingArea__heading.-noMargin,
.settingArea__boxInnerLayout.-firstChild .settingArea__content.-noMargin {
  padding-bottom: 0;
}
.settingArea__boxInnerLayout.-insideChild .settingArea__heading,
.settingArea__boxInnerLayout.-insideChild .settingArea__content {
  padding: 16px 0;
}
.settingArea__boxInnerLayout.-lastChild .settingArea__heading,
.settingArea__boxInnerLayout.-lastChild .settingArea__content {
  padding-top: 16px;
}
.settingArea__boxInnerLayout.-noTopMargin .settingArea__heading,
.settingArea__boxInnerLayout.-noTopMargin .settingArea__content {
  padding-top: 0;
}

.settingArea__boxInnerLayoutInner {
  display: flex;
}
.settingArea__boxInnerLayoutInner.-firstChild .settingArea__heading,
.settingArea__boxInnerLayoutInner.-firstChild .settingArea__content {
  padding-bottom: 16px;
}
.settingArea__boxInnerLayoutInner.-insideChild .settingArea__heading,
.settingArea__boxInnerLayoutInner.-insideChild .settingArea__content {
  padding: 16px 0;
}
.settingArea__boxInnerLayoutInner.-lastChild .settingArea__heading,
.settingArea__boxInnerLayoutInner.-lastChild .settingArea__content {
  padding-top: 16px;
}
.settingArea__boxInnerLayoutInner.-noTopMargin .settingArea__heading,
.settingArea__boxInnerLayoutInner.-noTopMargin .settingArea__content {
  padding-top: 0;
}
.settingArea__boxInnerLayoutInner.-disabled {
  color: #cccccc;
}

/* 行見出し */
.settingArea__heading {
  display: flex;
  align-items: center;
  font-weight: bold;
  min-width: 185px;
  margin-right: 24px;
}
.settingArea__heading.-top {
  align-items: flex-start;
}
.settingArea__heading.-withSelectBox {
  margin-top: 8px;
}
.settingArea__heading.-withRadioButton {
  margin-top: 4px;
}

/* disabled */
.settingArea__heading.-disabled {
  color: #cccccc;
}
.settingArea__headingInner {
  display: flex;
  align-items: center;
}

/* コンテンツブロック */
.settingArea__content {
  width: 100%;
  padding-left: 16px !important;
  position: relative;
}
.settingArea__content.-flex {
  display: flex;
  align-items: center;
}
.settingArea__content.-flex.-top {
  display: flex;
  align-items: flex-start;
}
.settingArea__content.-salesType {
  display: flex;
  align-items: center;
  height: 40px;
}
.settingArea__content.-noMargin {
  margin: 0;
}
.settingArea__content.-dashedBorderBottom {
  border-bottom:1px dashed #cccccc;
}
.settingArea__contentLayout.-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.settingArea__contentLayout.-flex.-alignTop {
  align-items: flex-start;
}
.settingArea__contentLayout.-bottomMarginLarge {
  margin-bottom: 16px;
}
.settingArea__contentLayout.-bottomMarginMiddle {
  margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
  .form-inline + .form-inline {
    margin-top: 8px;
  }
}

.settingArea__contentDescription {
  display: flex;
  align-items: center;
  min-height: 24px;
}
.settingArea__contentDescription.-tinyBitBigger {
  font-size: 16px;
}

/* 改行のチェックボックス */
.isAutoBr__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 640px;
  max-height: 24px;
  margin-top: 8px;
}
.formGroup__checkboxLabel.-isAutoBr {
  display: inline-flex;
}
.isAutoBr__box .functionDescription {
  margin: 0;
}
.isAutoBr__box.-twoLines {
  align-items: flex-start;
  max-height: none;
}
.settingRadio__header {
  margin-bottom: 8px;
}
.settingRadio__box + .settingRadio__box {
  margin-left: 16px;
}

/* 画像登録レイアウト */
.edit .formGroup__layout {
  padding: 0 0 0 15px;
}

.edit .settingImage {
  max-width: 640px;
  margin-bottom: 8px;
}
.edit .label-file-delete {
  margin-bottom: 16px;
}

.edit input.imageChoice,
.edit input.imageChoice__fileName {
  background: none;
  box-shadow: none;
  border: none;
}
.edit input.imageChoice__fileName {
  width: 300px;
  font-size: 12px;
  padding-left: 8px;
  pointer-events : none;
}

/* canvasを使用した画像登録レイアウト */
.settingImage__header {
  margin-bottom: 8px;
}

.formGroup__canvas {
  display: flex;
  flex-wrap: wrap;
  max-width: 640px;
}
.formGroup__canvas.-shop {
  justify-content: unset;
}
.settingImage__box {
  margin: 4px 12px 4px 0;
}
.settingImage__box:last-child {
  margin-right: 0;
}
.formGroup__canvas .canvas__box {
  width: 150px;
  height: 100px;
  position: relative;
}
.formGroup__canvas .canvas__box label {
  cursor: pointer;
}
.formGroup__canvas .dropArea {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cccccc;
  text-align: center;
  width: 150px;
  height: 100px;
  position: relative;
  background: #f7f7f7;
  border: 2px dashed #cccccc;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1;
}
.enableHover .formGroup__canvas .canvas__box:hover .dropArea {
  border-color: #363636;
}
.formGroup__canvas .dropArea .material-icons {
  font-size: 40px;
  pointer-events: none;
}
.enableHover .formGroup__canvas .canvas__box:hover .dropArea .material-icons {
  color: #363636;
}
.formGroup__canvas .canvas__box canvas {
  width: 150px;
  height: 100px;
  object-fit: cover;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  cursor: pointer;
  position: absolute;
  z-index: 2;
}
.enableHover .formGroup__canvas .canvas__box:hover canvas {
  opacity: 0.7;
}
.canvasIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 3;
}
.canvasIcon.-delete,
.canvasIcon.-undo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  top: -10px;
  right: -10px;
}
.canvasIcon.-delete .material-icons {
  font-size: 32px;
  color: #cc2222;
  background: #ffffff;
  border-radius: 50%;
}
.canvasIcon.-undo {
  background: #8e8e8e;
}
.canvasIcon.-undo .material-icons {
  font-size: 20px;
  color: #ffffff;
}
.canvasIcon.-zoom {
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}
.canvasIcon.-zoom .canvasIcon__icon {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.8);
  transform: rotate(-180deg);
}
.enableHover .canvasIcon.-zoom:hover {
  background: rgba(0, 0, 0, 0.6);
}
.enableHover .canvasIcon.-zoom:hover .material-icons {
  color: rgba(255, 255, 255, 0.8);
}

/**********************************************************
登録・編集画面  機能説明
***********************************************************/
.functionDescription {
  line-height: 1.5;
  color: #999999;
  margin-top: 8px;
}
.functionDescription.-noMargin {
  margin-top: 0;
}
.functionDescription.-topMarginLarge {
  margin-top: 16px;
}
.functionDescription.-bottomMarginMiddle {
  margin-bottom: 8px;
}
.functionDescription.-qrDescription {
  font-size: 10px;
}
.functionDescription.-previewItems {
  margin: 16px 0 0 104px;
}

.functionDescription.-info {
  display: flex;
  margin-top: 12px;
}
.functionDescription.-info.-alignCenter {
  align-items: center;
}
.functionDescription.-info .functionDescription__icon {
  margin: -2px 8px 0 0;
  color: #666666;
}
.functionDescription.-info .functionDescription__icon.-caution {
  color: #dd4400;
}
.functionDescription.-info .functionDescription__text {
  color: #434343;
}
.functionDescription.-caution,
.functionDescription.-caution .functionDescription__text {
  color: #dd4400;
}

/* 機能説明 トグル */
.toggleDescription__btn {
  display: inline-block;
  color: #888888;
  text-decoration: underline;
  height: 24px;
  margin-top: 6px;
  padding-right: 28px;
  position: relative;
  cursor: pointer;
}
.toggleDescription__btn:hover {
  text-decoration: none;
}
.toggleDescription__btn::before {
  display: flex;
  align-items: center;
  font-family: "Material Icons";
  font-size: 24px;
  color: #434343;
  height: 24px;
  position: absolute;
  top: -1px;
  right: 0;
}
.toggleDescription__btn[aria-expanded="false"]::before {
  content: "\e5cf";
}
.toggleDescription__btn[aria-expanded="true"]::before {
  content: "\e5ce";
}
.toggleDescription__btn.-crowdedIcon {
  margin-top: 12px;
}
.toggleDescription {
  margin-top: 4px;
  padding: 16px;
  background: #f7f7f7;
  border-radius: 5px;
}
.toggleDescription__layout {
  display: flex;
  line-height: 1.8em;
}
.toggleDescription__header {
  font-weight: bold;
  text-align: right;
  min-width: 115px;
}

.toggleDescription__box.-uaInfo {
  padding: 16px 24px;
  background: #eff3f6;
  border-bottom: 1px solid #cccccc;
  cursor: pointer;
}
.toggleDescription__box.-uaInfo::before {
  display: flex;
  align-items: center;
  font-family: "Material Icons";
  font-size: 24px;
  color: #434343;
  height:24px;
  position: absolute;
  top: 16px;
  right: 16px;
}
.toggleDescription__box.-uaInfo[aria-expanded="false"]::before {
  content: "\e5cf";
}
.toggleDescription__box.-uaInfo[aria-expanded="true"]::before {
  content: "\e5ce";
}

.toggleDescription__box.-disabled .toggleDescription__btn,
.toggleDescription__box.-disabled .toggleDescription__btn::before {
  color: #cccccc;
  cursor: default;
}

.toggleDescription__box.-receiptTimeCaution {
  margin-top: 12px;
}

.toggleDescription__text.-emphasis {
  font-weight: bold;
}

/**********************************************************
登録・編集画面 更新確認メッセージ
***********************************************************/
.updateMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  width: 100%;
  padding: 8px 16px;
  background: #3377cc;
  z-index: 5;
}
.updateMessage .updateMessage__text {
  text-align: left;
}
.updateMessage .material-icons-outlined {
  font-size: 24px;
  margin-right: 8px;
}
@media screen and (max-width:420px) {
  .updateMessage .material-icons-outlined {
    font-size: 32px;
    margin-right: 12px;
  }
}

/**********************************************************
要注意フラグ
***********************************************************/
.iconBtn__icon.-attentionFlg.-large {
  font-size: 32px;
}
.iconBtn__icon.-attentionFlg.-on {
  color: #ffb540;
}
td.attentionFlg__layout.-noHover .iconBtn__icon.-attentionFlg.-on {
  color: #666666;
}
.iconBtn__icon.-attentionFlg.-off,
.enableHover .iconBtn:hover .iconBtn__icon.-attentionFlg.-off {
  color: #cccccc;
}

/* 一覧テーブル内 */
table>thead>tr>th.attentionFlg__layout,
table>tbody>tr>td.attentionFlg__layout {
  width: 40px !important;
  min-width: 40px !important;
  padding: 16px;
}
table.dataTable>thead>tr>th.attentionFlg__layout::after {
  padding-left: 10px;
}
td.attentionFlg__layout div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 20px;
  position: relative;
  z-index: 100000000000;
}
td.attentionFlg__layout div:hover {
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
td.attentionFlg__layout.-noHover div:hover {
  background: none;
  cursor: default;
}
td.attentionFlag__layout .attentionFlag {
  font-size: 20px;
}
/* checkbox */
.searchWrapper .formGroup__checkboxLabel.-withText.-attentionFlg {
  margin: 0 0 0 24px;
}

/**********************************************************
ログイン画面
***********************************************************/
.loginLogo {
  width: 90%;
  height: 47.72px;
  margin-bottom: 50px;
}

.login-page h4 {
  text-align: center;
  margin: 0;
}
.loginBox__body h4.loginBox__title {
  line-height: 1.4;
  margin: 4px 0 24px;
}

.login-page .alert {
  margin-bottom: 14px;
}
.login-page .btn_box {
  margin: 0 auto;
  float: none;
}
.login-page .form-control {
  width: 100%;
}
.glyphiconForm {
  position: relative;
}
.glyphiconForm .glyphicon {
  top: 2px;
}
.login-page .login-box .sendmsg--textLeft {
  text-align: left;
  line-height: 1.4;
}
.login-page .login-box .sendmsg__btn {
  margin-top: 10px;
  text-align: center;
}
.loginBox__msg {
  margin-bottom: 24px;
}

.failLimitMessage {
  text-align: center;
}

/**********************************************************
管理者設定
***********************************************************/
/* ID */
.listTableUi.-loginUser th.Id,
.listTableUi.-loginUser td.Id {
  width: 50px;
}
/* 表示ステータス */
.listTableUi.-loginUser th.name,
.listTableUi.-loginUser td.name {
  width: 200px;
}

/**********************************************************
受取日時設定・受取日時テンプレ・受取日設定 一括変更モード
***********************************************************/
.batch_mode_box.batch_mode_on {
  background-color: #f0f8ff;
}

/**********************************************************
受取日時設定  タイトル・テンプレートドロップダウン・仮適用ボタン
***********************************************************/
/*titleHeadは以降が終わり次第消去*/
.titleHead {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #cccccc;
}
@media screen and (max-width:1430px) {
  .titleHead {
    flex-direction: column;
    align-items: stretch;
  }
}
@media screen and (max-width:1430px) {
  .titleHead .btnBox {
    width: 100%;
  }
}
.selectBox {
  padding: 0 0 8px 8px;
}
.selectBox.-timeTemplate {
  padding-bottom: 0;
}

/**********************************************************
PC・スマホ表示制御class
***********************************************************/
.hidden-sp {
  display: none !important;
}
@media screen and (min-width:421px) {
  .hidden-sp {
      display: block !important;
  }
  table.hidden-sp {
      display: table !important;
  }
  tr.hidden-sp {
      display: table-row !important;
  }
  th.hidden-sp,
  td.hidden-sp {
      display: table-cell !important;
  }
}
.visible-sp {
 display: none !important;
}
@media screen and (max-width:420px) {
  .visible-sp {
      display: block !important;
  }
  table.visible-sp {
      display: table !important;
  }
  tr.visible-sp {
      display: table-row !important;
  }
  th.visible-sp,
  td.visible-sp {
      display: table-cell !important;
  }
}
/* formが空の場合・日時指定で過去日を表示した時 */
.alert-warning {
  color: #dd4444 !important;
  background-color: #ffe5e5 !important;
  border: 1px solid #dd4444 !important;
}

/**********************************************************
ダッシュボード・注文詳細 注文状況アイコン
***********************************************************/
/* PC一覧 */
.statusIcon__layout {
  display: flex;
  align-items: center;
}
.statusIcon__list.statusIcon {
  text-align: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0 16px 0 0;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
}
.statusIcon__list.statusIcon.-accepted {
  background: url("/assets/images/manage/status_icons/accepted_list.svg") no-repeat center center;
}
.statusIcon__list.statusIcon.-preparation {
  background: url("/assets/images/manage/status_icons/preparation_list.svg") no-repeat center center;
}
.statusIcon__list.statusIcon.-waiting {
  background: url("/assets/images/manage/status_icons/waiting_list.svg") no-repeat center center;
}
.statusIcon__list.statusIcon.-received {
  background: url("/assets/images/manage/status_icons/received_list.svg") no-repeat center center;
}
.statusIcon__list.statusIcon.-canceled {
  background: url("/assets/images/manage/status_icons/canceled_list.svg") no-repeat center center;
}
.statusIcon__list.statusIcon .statusIcon__inner {
  display: none;
}

/* スマホビュー・商品詳細 */
.statusIcon {
  text-align: center;
  width: 104px;
  min-width: 104px;
  height: 104px;
  margin-right: 24px;
  position: relative;
  background-size: cover !important;
  overflow: hidden;
  z-index: 1;
}
@media screen and (max-width: 420px){
  .statusIcon {
    width: 88px;
    min-width: 88px;
    height: 88px;
    margin-right: 16px;
  }
}
.statusIcon.-accepted {
  background: url("/assets/images/manage/status_icons/accepted_exlarge.svg") no-repeat center center;
}
@media screen and (max-width: 420px){
  .statusIcon.-accepted {
    background: url("/assets/images/manage/status_icons/accepted_large.svg") no-repeat center center;
  }
}
.statusIcon.-preparation {
  background: url("/assets/images/manage/status_icons/preparation_exlarge.svg") no-repeat center center;
}
@media screen and (max-width: 420px){
  .statusIcon.-preparation {
    background: url("/assets/images/manage/status_icons/preparation_large.svg") no-repeat center center;
  }
}
.statusIcon.-waiting {
  background: url("/assets/images/manage/status_icons/waiting_exlarge.svg") no-repeat center center;
}
@media screen and (max-width: 420px){
  .statusIcon.-waiting {
    background: url("/assets/images/manage/status_icons/waiting_large.svg") no-repeat center center;
  }
}
.statusIcon .statusIcon__inner {
  color: #db7500;
  font-size: 16px;
  font-weight: bold;
  width: 92px;
  height: 92px;
  line-height: 92px;
  position: absolute;
  top: 6px;
  left: 6px;
  background: none;
  border-radius: 50%;
  z-index: 4;
}
@media screen and (max-width: 420px){
  .statusIcon .statusIcon__inner {
    font-size: 14px;
    width: 76px;
    height: 76px;
    line-height: 76px;
  }
}
.statusIcon.-canceled {
  background: url("/assets/images/manage/status_icons/canceled_exlarge.svg") no-repeat center center;
}
@media screen and (max-width: 420px){
  .statusIcon.-canceled {
    background: url("/assets/images/manage/status_icons/canceled_large.svg") no-repeat center center;
  }
}
.statusIcon.-canceled .statusIcon__inner {
  color: #8e8e8e;
}
.statusIcon.-received {
  background: url("/assets/images/manage/status_icons/received_exlarge.svg") no-repeat center center;
}
@media screen and (max-width: 420px){
  .statusIcon.-received {
    background: url("/assets/images/manage/status_icons/received_large.svg") no-repeat center center;
  }
}
.statusIcon.-received .statusIcon__inner {
  display: none;
}

/* 残り時間表示・超過表示 */
.cautionTime {
  display: flex !important;
  align-items: baseline;
  font-size: 14px;
  color: #ffffff;
  height: 24px;
  margin-left: 12px;
  padding: 2px 8px;
  background-color: #de5858;
  border-radius: 12px;
  position: relative;
  bottom: 2px;
}
@media screen and (max-width: 420px){
  .cautionTime {
    line-height: 1.5em;
    bottom: 0;
  }
}
.ordersTable .cautionTime {
  font-size: 12px;
  line-height: 1.2em;
  height: 20px;
  margin-left: 12px;
  bottom: 3px;
}
.cautionTime.hidden {
  display: none !important;
}
.cautionTime.-pcList {
  display: inline-block !important;
  color: #de5858;
  padding: 0;
  background: none;
  bottom: 0;
}
.timeNotation {
  font-size: 10px;
}
.cautionTime.-pcList .timeNotation {
  font-size: 12px;
}
.cautionTime__layout {
  display: flex !important;
  align-items: baseline;
}

/**********************************************************
すべての受取場所に紐づく商品・紐づく受取場所非公開ラベル
***********************************************************/
.flexHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.shopMapped__stateBox,
.shopMapped__boxInner {
  display: flex;
  align-items: center;
}
.shopMapped__state {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #ffffff;
  padding: 4px 8px;
  background: #434343;
  border-radius: 3px;
}
.shopMapped__state .shopMapped__icon {
  font-size: 18px;
  font-weight: normal;
  margin-right: 4px;
}

/**********************************************************
ツールチップ
***********************************************************/
.tooltip__layout {
  margin-left: 8px;
  position: relative;
  top: 0;
}
.tooltip__layout.-top,
.settingArea__heading.-top .tooltip__layout {
  top: -2px;
}

.tooltip__layout.-twoLines,
.tooltip__layout.-top.-twoLines {
  top: 8px;
}
.tooltip__layout.-statusRefineUi {
  left: -16px;
}
@media screen and (max-width: 767px) {
  .tooltip__layout.-statusRefineUi {
    display: none;
  }
}
.tooltip__layout.-bulk {
  left: 8px;
}
.tooltip__layout.-csv {
  margin: 0 16px 0;
}
.tooltip__layout.-usageState {
  margin-left: 0;
}
.tooltip__btn {
  cursor: pointer;
}
.tooltip__btn .material-icons {
  color: #8e8e8e;
}
.tooltip__btn .material-icons:hover {
  color: #666666;
}
.tooltip {
  font-size: 14px;
}
.tooltip.top,
.tooltip.bottom {
  padding: 16px 0;
  left: -16px !important;
}
.tooltip.top {
  margin-top: -3px;
}
.tooltip.bottom {
  margin-top: 4px;
}
.tooltip.top .tooltip-arrow {
  border-top-color: rgba(51, 51, 51, 0.8);
  border-width: 16px 8px 0;
  left: 25px !important;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: rgba(51, 51, 51, 0.8);
  border-width: 0 8px 16px;
  left: 25px !important;
}
.tooltip-inner {
  width: 100%;
  max-width: 500px;
  min-width: 245px;
  text-align: left;
  padding: 8px;
  background: rgba(51, 51, 51, 0.8);
  border-radius: 5px;
}
.tooltip__layout.-statusRefineUi .tooltip-inner {
  width: 240px;
  min-width: 240px;
}
@media screen and (max-width: 1200px) {
  .tooltip__layout.-statusRefineUi .tooltip.top {
    left: -198px !important;
  }
  .sidebar-collapse .tooltip__layout.-statusRefineUi .tooltip.top {
    left: -16px !important;
  }
  .tooltip__layout.-statusRefineUi .tooltip.top .tooltip-arrow {
    left: 207px !important;
  }
  .sidebar-collapse .tooltip__layout.-statusRefineUi .tooltip.top .tooltip-arrow {
    left: 25px !important;
  }
}
@media screen and (max-width: 991px) {
  .tooltip__layout.-statusRefineUi .tooltip.top,
  .sidebar-collapse .tooltip__layout.-statusRefineUi .tooltip.top {
    left: -198px !important;
  }
  .tooltip__layout.-statusRefineUi .tooltip.top .tooltip-arrow,
  .sidebar-collapse .tooltip__layout.-statusRefineUi .tooltip.top .tooltip-arrow {
    left: 207px !important;
  }
}
.tooltip__layout.-csv .tooltip.top {
  left: -72px !important;
}
.tooltip__layout.-csv .tooltip.top .tooltip-arrow {
  left: 81px !important;
}
.tooltip__layout.-inputAssistance .tooltip {
  left: auto !important;
  right: -32px;
}
.tooltip__layout.-inputAssistance .tooltip .tooltip-arrow {
  left: auto !important;
  right:36px;
}

/* tooltip内link */
.tooltip__layout a {
  color: #ffffff;
  text-decoration: underline;
}
.tooltip__layout a:hover {
  text-decoration: none;
}

/* 仮tooltip内ヘルプアイコン */
.tooltip__helpCenterBox {
  display: flex;
  justify-content: flex-end;
}
.tooltip__helpCenterIcon {
  font-size: 12px;
  line-height: 1em;
  text-align: center;
  color: #3377cc;
  margin-top: 4px;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 12px;
}
.tooltip__helpCenterIcon:hover {
  background: #f7f7f7;
  color: #3377cc;
}

/**********************************************************
空白ユーティリティ (今後なくす)
***********************************************************/
.pl_0 {
  padding-left: 0;
}
.listColumnW3c {
  width: 3em!important;
  text-align: center;
}
.canvasArea__image {
  width: 100%;
}

/**********************************************************
QRコードリーダー ボタン
***********************************************************/
/* スマホ */
@media screen and (max-width: 420px) {
  .skin-blue .main-header .qrcodeReader__btn.-sp {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .skin-blue .main-header .qrcodeReader__btn.-sp .material-icons-outlined {
    font-size: 24px;
    color: #ffffff;
  }
}
/* pc */
.qrcodeReader__btn.-pc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 40px;
  margin: 5px 8px 5px 0;
  border-radius: 20px;
  cursor: pointer;
}
.qrcodeReader__btn.-pc:hover {
  background: rgba(0, 0, 0, 0.4);
}
.qrcodeReader__btn.-pc .material-icons-outlined {
  font-size: 24px;
  color: #ffffff;
}
.qrcodeReader__btn.-pc .qrcodeReader__btnText {
  color: #ffffff;
  margin-left: 4px;
}

.hidden-xxs {
  display: block;
}
.visible-xxs {
  display: none;
}
@media screen and (max-width: 420px) {
  .hidden-xxs {
    display: none !important;
  }
  .visible-xxs {
    display: block;
  }
}
@media screen and (max-width:420px){
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
}

/**********************************************************
ダッシュボード検索 SP
***********************************************************/
.dropdownNarrowDown__btnSp {
  display: flex;
  align-items: center;
  max-width: 250px;
  position: relative;
  cursor: pointer;
}
.dropdownNarrowDown__btnSp::before {
  content: '\e5cf';
  font-family: 'Material Icons';
  font-size: 18px;
  font-weight: normal;
  color: #626262;
  width: 18px;
  line-height: 30px;
  position: absolute;
  right: -24px;
  border: none;
  pointer-events: none;
}
.dropdownNarrowDown__btnSp.-selected {
  font-weight: bold;
  color: #3377cc;
}
.dropdownNarrowDown__iconSp {
  color: #b3b3b3;
  margin-right: 4px;
}
.dropdownNarrowDown__btnSp.-selected .dropdownNarrowDown__iconSp {
  color: #3377cc;
}

/**********************************************************
更新ツールチップ
***********************************************************/
.saveTip__box.-large {
  position: absolute;
  top: 0;
  left: 166px;
}
.saveTip__box.-large.-show {
  left: 156px;
  opacity: 1;
  transition: 0.3s ease-out;
  transition-delay: 0.8s;
}
.saveTip__box.-large.-hide {
  opacity: 0;
  transition: 0.2s ease-out;
  transition-delay: 0.1s;
}
@media screen and (max-width: 991px) {
  .saveTip__box.-mini {
    position: absolute;
    top: -37px;
    left: 3px;
  }
  .saveTip__box.-mini.-show {
    top: -27px;
    opacity: 1;
    transition: 0.3s ease-out;
    transition-delay: 0.8s;
  }
  .saveTip__box.-mini.-hide {
    opacity: 0;
    transition: 0.2s ease-out;
    transition-delay: 0.1s;
  }
}
.saveTip {
  display: flex;
  align-items: center;
  color: #3377cc;
  position: relative;
  background-color: #ffffff;
  border: solid 2px #3377cc;
  border-radius: 6px;
}
.saveTip.-large {
  width: 216px;
  height: 48px;
  padding: 8px;
}
.saveTip::before,
.saveTip::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: auto;
  position: absolute;
  right: 0;
  left: 0;
  overflow: visible;
}
.saveTip::before {
  top: 14px;
  left: -228px;
  border-style: solid;
  border-color: transparent #3377cc transparent transparent;
  border-width: 8px 12px 8px 0;
}
@media screen and (max-width: 991px) {
  .saveTip::before {
    left: 0;
    bottom: -30px;
    border-color: #3377cc transparent transparent transparent;
    border-width: 12px 8px 0 8px;
  }
}
.saveTip::after {
  top: 14px;
  left: -220px;
  border-style: solid;
  border-color: transparent #ffffff transparent transparent;
  border-width: 8px 12px 8px 0;
}
@media screen and (max-width: 991px) {
  .saveTip::after {
    left: 0;
    bottom: -22px;
    border-color: #ffffff transparent transparent transparent;
    border-width: 12px 8px 0 8px;
  }
}
.saveTip.-mini {
  width: 146px;
  height: 34px;
  padding: 10px 6px;
}
.saveTip__icon {
  margin-right: 4px;
}
@media screen and (max-width: 991px) {
  .saveTip__icon {
    font-size: 16px !important;
    margin-right: 2px;
  }
}
.saveTip__text {
  text-align: left;
  line-height: 1.3em;
}
/* ボタン横のアラート */
.saveTip.-alert {
  color: #cc0f00;
  border-color: #cc0f00;
}
.saveTip.-alert::before {
  border-color: transparent #cc0f00 transparent transparent;
}
@media screen and (max-width: 991px) {
  .saveTip.-alert::before {
    border-color: #cc0f00 transparent transparent transparent;
  }
}

/**********************************************************
SweetAlert2
***********************************************************/
/*OK*/
.swal2-popup .swal2-styled.swal2-confirm {
  color: #ffffff;
  font-size: 1.3em;
  width: 6em;
  padding: 10px;
  background: initial;
  background-color: #d9a241;
  border: none;
  border-radius: 0.5em;
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  transition: .2s;
}
.swal2-popup .swal2-styled.swal2-confirm:hover {
  color: #ffffff;
  border: none;
  opacity: 0.7;
}
.swal2-popup .swal2-styled.swal2-confirm:active {
  border: none;
}
/*Cancel*/
.swal2-popup .swal2-styled.swal2-cancel {
  color: #ffffff;
  font-size: 1.3em;
  width: 6em;
  padding: 10px;
  background: initial;
  background-color: #b7b7b7;
  border: none;
  border-radius: 0.5em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.16);
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
  transition: .2s;
}
.swal2-popup .swal2-styled.swal2-cancel:hover {
  color: #ffffff;
  border: none;
  opacity: 0.7;
}
.swal2-popup .swal2-styled.swal2-cancel:active {
  border: none;
}

.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 0, 0.3) !important;
  z-index: 900001;
}

.sweetAlert {
  width: 400px;
  min-height: 208px;
  padding: 32px 24px 24px;
}
.sweetAlert .swal2-title {
  font-size: 16px;
  margin-bottom: 24px;
}
.sweetAlert #swal2-content {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  min-height: 44px;
  margin-bottom: 24px;
}
.sweetAlert.-alignLeft #swal2-content {
  justify-content: flex-start;
  text-align: left;
}
.sweetAlert .swal2-actions {
  margin: 0;
}

.sweetAlert.-noHeader .swal2-header {
  display: none;
}
.sweetAlert.-noHeader #swal2-content {
  margin-bottom: 36px;
}

/* ボタン */
.swal2-popup .swal2-confirm.sweetAlert__btn,
.swal2-popup .swal2-cancel.sweetAlert__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: auto !important;
  min-width: 120px;
  min-height:40px;
  margin: 0;
  padding: 4px 16px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-confirm.sweetAlert__btn:hover,
.swal2-popup .swal2-cancel.sweetAlert__btn:hover {
  background-image: none !important;
  opacity: 1;
}
.swal2-popup .sweetAlert__btn.-confirm {
  background: #3377cc;
}
.swal2-popup .sweetAlert__btn.-confirm:hover {
  background: #4488ee;
}
.swal2-popup .sweetAlert__btn.-cancel,
.sweetAlert.-delete .sweetAlert__btn.-confirm {
  background: #cc2222;
}
.swal2-popup .sweetAlert__btn.-cancel:hover,
.sweetAlert.-delete .sweetAlert__btn.-confirm:hover {
  background: #dd4444;
}
.swal2-popup .sweetAlert__btn.-close {
  color: #666666;
  background: #f1f1f1;
  border: 1px solid #cccccc !important;
}
.swal2-popup .sweetAlert__btn.-close:hover {
  color: #666666 !important;
  background: #ebebeb !important;
  border: 1px solid #cccccc !important;
  opacity: 1;
}


.swal2-popup.sweetAlert.-confirm  .swal2-confirm.sweetAlert__btn,
.swal2-popup.sweetAlert.-confirm  .swal2-cancel.sweetAlert__btn {
  min-width: 120px;
}
.swal2-popup.sweetAlert.-confirm .sweetAlert__btn + .sweetAlert__btn,
.swal2-popup.sweetAlert.-copyOrEdit .sweetAlert__btn + .sweetAlert__btn {
  margin-left: 16px;
}

.sweetAlert.-copyOrEdit .sweetAlert__btn.-confirm {
  color: #666666;
  background: #f1f1f1;
  border: 1px solid #cccccc !important;
}
.sweetAlert.-copyOrEdit .sweetAlert__btn.-confirm:hover {
  color: #666666 !important;
  background: #ebebeb !important;
  border: 1px solid #cccccc !important;
  opacity: 1;
}
.sweetAlert.-copyOrEdit .sweetAlert__btn.-close {
  color: #ffffff;
  background: #3377cc;
  border: none !important;
}
.sweetAlert.-copyOrEdit .sweetAlert__btn.-close:hover {
  color: #ffffff !important;
  background: #4488ee !important;
  border: none !important;
}
.sweetAlert__textBox {
  margin-bottom: 24px;
}
.sweetAlert.-add .sweetAlert__textBox {
  margin-bottom: 0;
}
.sweetAlert__text {
  display: block;
}
.sweetAlert__text .functionDescription.-caution .functionDescription__text {
  font-size: 13px;
  text-align: left;
}
.sweetAlert__codeAndNameBox {
  display : block;
  margin-bottom : 16px;
}

/* 登録・編集用 */
.sweetAlert__checkboxArea {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin-top: 16px;
  border: 1px solid #cccccc;
  border-radius: 5px;
}

/* processing spinner */
.sweetAlert__spinner {
  width: 48px;
  height: 48px;
  animation: spin 0.6s ease-out infinite;
}
.sweetAlert__spinnerBox {
  margin-bottom: 24px;
}
.sweetAlert__spinnerText {
  display: block;
}

/**********************************************************
権限がない時
***********************************************************/
/* 閲覧モードタグ */
.unAuthTag {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-weight: bold;
  width: 112px;
  margin-right: 8px;
  padding: 4px 8px;
  position: relative;
  background: #3377cc;
  border-radius: 3px;
}
.unAuthTag.-leftMargin {
  margin-left: 16px;
}
.unAuthTag.-tagHide {
  display: none;
}
.unAuthTag:hover::after {
  content: "閲覧のみ権限が設定されています";
  display: block;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  width: 226px;
  padding: 8px;
  position: absolute;
  top: -40px;
  left: 50%;
  background: rgba(51, 51, 51, 0.8);
  border-radius: 5px;
  transform: translateX(-50%);
}
.unAuthTag.-bottom:hover::after {
  top: auto;
  bottom: -40px;
}
.unAuthTag__icon {
  display: flex;
  align-items: center;
  margin-right: 4px;
}

/* メッセージの非表示 */
.messageHidden {
  display:none !important;
}

/* ボタンの表示 */
.manageBtn.-noAuthorization,
.dropdownNarrowDown__btn.-noAuthorization {
  position: relative;
  overflow: visible;
}
.manageBtn.-noAuthorization::before,
.dropdownNarrowDown__btn.-noAuthorization::before,
.modal-body .manageBtn.-main.-noAuthorization::before,
.modal__footer .manageBtn.-main.-noAuthorization::before {
  content: url("/assets/manage/images/unauth_icons/unauth_lock_24px.svg") !important;
  position: absolute;
  top: 8px !important;
  left: 6px !important;
}
.manageBtn.-withSvg.-noAuthorization::before {
  top: 20px !important;
}
.manageBtn.-withIcon.-noAuthorization::before {
  top: 1px !important;
  left: 0px !important;
}
.dropdownNarrowDown__btn.-noAuthorization::before {
  width: auto;
  line-height: inherit;
}
.manageBtn.-main.-noAuthorization::before,
.manageBtn.-sameMain.-noAuthorization::before {
  content: url("/assets/manage/images/unauth_icons/unauth_lock_32px.svg") !important;
}
.manageBtn.-noAuthorization:hover::after,
.dropdownNarrowDown.-csvPrint.-noAuthorization:hover::after,
.editPageTab__noAuthorizationHover:hover::after {
  content: "権限がありません";
  display: block;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  width: 128px;
  padding: 8px;
  position: absolute;
  top: -40px;
  left: 50%;
  background: rgba(51, 51, 51, 0.8);
  border-radius: 5px;
  transform: translateX(-50%);
}
.manageBtn.-noAuthorization.-bottom:hover::after {
  top: auto;
  bottom: -42px;
}

.attentionFlg__layout.-noAuthorization {
  pointer-events: none !important;
}
.stateFlg__layout.-noAuthorization {
  pointer-events: none !important;
}
.stateFlg__layout.-noAuthorization .iconBtn__icon.-on {
  color: #666666;
}
.stateFlg__layout.-noAuthorization .iconBtn__icon.-off {
  color: #8e8e8e;
}

/* 削除ボタン・コピーボタン */
td.listTableUi__cell.-deleteCol.-noAuthorization,
td.listTableUi__cell.-copy.-noAuthorization {
  cursor: default;
}
td.listTableUi__cell.-noAuthorization .iconBtn.-trash,
td.listTableUi__cell.-noAuthorization .iconBtn.-copy {
  cursor: default;
  pointer-events: none;
}
td.listTableUi__cell.-deleteCol.-noAuthorization .iconBtn.-trash .iconBtn__icon.-trash,
td.listTableUi__cell.-noAuthorization .iconBtn.-trash,
td.listTableUi__cell.-noAuthorization .iconBtn.-copy {
  color: #cccccc;
  cursor: default;
}

/* カード未決済時の表示 */
.settleState.-unsettled {
  color: #cc2222;
}

/* 編集ページタブ */
.editPageTab.-noAuthorization,
.editPageTab.-noAuthorization:hover {
  color: #cccccc;
  background: #eeeeee;
  position: relative;
  pointer-events: none;
}
.editPageTab.-noAuthorization::before {
  content: url("/assets/manage/images/unauth_icons/unauth_lock_24px.svg") !important;
  position: absolute;
  top: 14px !important;
  left: 6px !important;
}
.editPageTab__noAuthorizationHover {
  width: calc(100% - 16px);
  height: 100%;
  margin-right: 16px;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 1200px) {
  .editPageTab__noAuthorizationHover {
    width: calc(100% - 8px);
    margin-right: 8px;
  }
}

/* カード未決済時の表示 */
.settleState.-unsettled {
  color: #cc2222;
}

/* 編集ページタブ */
.editPageTab.-noAuthorization,
.editPageTab.-noAuthorization:hover {
  color: #cccccc;
  background: #eeeeee;
  position: relative;
  pointer-events: none;
}
.editPageTab.-noAuthorization::before {
  content: url("/assets/manage/images/unauth_icons/unauth_lock_24px.svg") !important;
  position: absolute;
  top: 14px !important;
  left: 6px !important;
}
.editPageTab__noAuthorizationHover {
  width: calc(100% - 16px);
  height: 100%;
  margin-right: 16px;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 1200px) {
  .editPageTab__noAuthorizationHover {
    width: calc(100% - 8px);
    margin-right: 8px;
  }
}

/**********************************************************
date range picker
***********************************************************/
.daterangepicker {
  font-family: inherit;
  width: auto;
  margin-top: 12px;
  border-color: #cccccc;
  box-shadow: 0 3px 6px rgb(0, 0,0, 0.18);
  z-index: 500;
}
@media screen and (max-width: 991px) {
  .daterangepicker {
    width: 590px;
    left: 0 !important;
    right: 0 !important;
    margin: 12px auto 0;
  }
}

/* 吹き出し部分 */
.daterangepicker:before {
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  top: -12px;
  left: 16px !important;
  right: auto;
}
@media screen and (max-width: 991px) {
  .daterangepicker:before {
    left:  calc(50% - 8px) !important;
  }
}
.daterangepicker:after {
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid white;
  top: -11px;
  left: 17px !important;
  right: auto;
}
@media screen and (max-width: 991px) {
  .daterangepicker:after {
    left: calc(50% - 7px) !important;
  }
}

.daterangepicker .drp-calendar {
  max-width: 350px;
}
.daterangepicker .drp-calendar.left {
  padding: 24px 0 16px 32px;
}
.daterangepicker .drp-calendar.right {
  padding: 24px 32px 16px 24px;
}
.daterangepicker .calendar-table .next,
.daterangepicker .calendar-table .prev {
  position: relative;
  border-radius: 100%;
  cursor: pointer;
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
  position: absolute;
  top: 13px;
  border-color: #3377cc;
}
.daterangepicker .calendar-table .next span {
  right: 15px;
}
.daterangepicker .calendar-table .prev span {
  left: 15px;
}

/* 土・日 */
.daterangepicker th:first-child,
.daterangepicker td:first-child {
  color: #ee5656;
}
.daterangepicker th:last-child,
.daterangepicker td:last-child {
  color: #365f8a;
}

/* 日付 */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
  min-width: 35px;
  width: 35px;
  position: relative;
  border: none;
  border-radius: 0;
}
.daterangepicker .calendar-table th {
  font-size: 12px;
  font-weight: normal;
  cursor: default;
}
.daterangepicker .calendar-table th.month {
  font-size: 14px;
  cursor: default;
}
.daterangepicker .calendar-table td {
  font-size: 14px;
  font-weight: bold;
}

.daterangepicker th.available:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.daterangepicker td.available:hover {
  background-color: rgba(51, 119, 204, 0.4);
}

/* 今日の日付 */
.today::after {
  content: "";
  width: 100%;
  height :100%;
  border-bottom: 2px solid #000000;
  position: absolute;
  top: 0;
  left: 0;
}
.today.off::after {
  content: none;
}

.daterangepicker td.in-range {
  background-color: rgba(51, 119, 204, 0.2);
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: #ffffff;
  border-color: transparent;
  color: #999;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  color: #ffffff;
  background-color: #3377cc;
  border-radius: 100%;
}
.daterangepicker td.active.start-date {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.daterangepicker td.active.end-date {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.daterangepicker td.start-date.end-date {
  border-radius: 100%;
}
.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: #cccccc;
  text-decoration: none;
  background-color: #eeeeee;
  cursor: default;
}

/* ボタングループ */
.daterangepicker.show-calendar .drp-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  font-size: 16px;
  padding: 0 24px 24px;
  border-top: none;
}
.daterangepicker .drp-buttons .manageBtn {
  cursor: pointer;
}
.daterangepicker .drp-buttons .manageBtn.-returnText {
  font-size: inherit;
  color: #434343;
  text-decoration: underline;
  width: auto;
  min-height: auto;
  background: none;
  box-shadow: none;
}
.daterangepicker .drp-buttons .manageBtn.-returnText:hover {
  opacity: 0.7;
}
.daterangepicker.show-calendar .drp-buttons .manageBtn + .manageBtn {
  margin-left: 16px;
}

/* 時間セレクト */
.daterangepicker .calendar-time {
  margin: 12px auto 0 auto;
}
.daterangepicker .calendar-time .hourselect,
.daterangepicker .calendar-time .minuteselect {
  word-break: break-all;
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  height: 40px;
  background: #ffffff;
  border: 1px solid #8e8e8e;
  border-radius: 5px !important;
  padding: 0 12px;
  position: relative;
  cursor: pointer;
}
.enableHover .daterangepicker .calendar-time .hourselect:hover,
.enableHover .daterangepicker .calendar-time .minuteselect:hover {
  border: 1px solid #333333;
}
.daterangepicker .calendar-time .hourselect:focus,
.daterangepicker .calendar-time .minuteselect:focus {
  border: 2px solid #4488ee;
  box-sizing: border-box;
}
.daterangepicker .drp-selected {
  display: none;
}

/* 管理者権限数 */
.authorizedUsers__box {
  display: flex;
  align-items: center;
  height: 40px;
  padding-top: 1px;
}
.authorizedUsers__box +  .manageBtn {
  margin-left: 16px;
}
.authorizedUsers {
  text-align:right;
  margin: 0;
  clear: both;
}
.authorizedUsers__title {
  font-weight: normal;
  text-align: right;
  width: 98px;
  float: left;
}
.authorizedUsers__user {
  font-size: 16px;
  text-align: left;
  margin-left: 98px;
}
.authorizedUsers__num {
  display: inline-block;
  margin-right: 4px;
}


/**********************************************************
管理者一覧仮置き
***********************************************************/
.listTableUi.-loginUser th.listTableUi__cell.-loginLog,
.listTableUi.-loginUser td.listTableUi__cell.-loginLog {
  width: 110px !important;
}
.modal__footer {
  padding: 16px;
  border-top: 1px solid #cccccc;
}