@charset "UTF-8";

body {
  background-color: #F4F4F5 !important;
  font-size: 14px;
  margin-top: 0px;
}

h1,
h2 {
  color: #FFFFFF;
  font-weight: bold;
  padding-left: 150px;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 0px;
  margin-top: 42px;
}

h1 p {
  margin: 0px;
}

@media only screen and (min-width: 960px) {
  h1 p {
    display: inline-block;
    margin: 0px;
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 1199px) {
  h1 {
    font-size: 1.6rem;
    float: left;
    padding-left: 90px;
    margin-top: 24px;
  }
}

@media only screen and (max-width: 767px) {
  h1 {
    float: left;
    padding-left: 70px;
    margin-top: 16px;
  }
}

@media only screen and (max-width: 427px) {
  h1 {
    font-size: 1.2rem;
    padding-left: 50px;
  }
}

h2 {
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 20px;
  float: left;
  max-width: 680px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media only screen and (max-width: 1199px) {
  h2 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .navbar-header h2 {
    display: none;
  }
}

h5 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 20px;
}

ul {
  list-style: none;
  padding-left: 8px;
}

p {
  margin: 8px 16px;
}

.red {
  color: #FF3D00;
}

.text-danger {
  color: #FF3D00;
}

.has-error .control-label {
  color: #FF3D00;
}

.has-error .form-control {
  border-color: #FF3D00;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.has-error .input-group-addon {
  color: #333333;
  background-color: #FAD7DD;
  border-color: #FF3D00;
}

.alert-danger {
  color: #FF3D00;
  background-color: #FAD7DD;
  border-color: #FF3D00;
}

.panel-danger>.panel-heading {
  color: #FF3D00;
  background-color: #FAD7DD;
  border-color: #FAD7DD;
}

.k-state-error {
  border-color: #FF3D00;
  background-color: #FAD7DD;
  color: #FF3D00;
}

.k-restricted-size-vertical,
.k-restricted-size-horizontal {
  background-color: #FF3D00;
}

.has-error .help-block,
.has-error .control-label {
  color: #FF3D00;
}

.bold {
  font-weight: bold;
}

.thin {
  font-weight: lighter;
}

@media print {

  /* URL出力抑止 */
  a[href]:after {
    content: "" !important;
  }

  abbr[title]:after {
    content: "" !important;
  }

  /* レイアウト補正 */
  body {
    margin-top: 0px;
    width: 1280px;
  }

  #wrapper {
    padding-left: 0px;
  }

  [class*="col-lg-"] {
    float: left;
  }
}

/* レイアウト修正 */
/* Edit Below to Customize Widths > 768px */
/* Side Nav */
.side-nav {
  margin-top: 88px;
  font-size: 14px;
  background-color: #F4F4F5 !important;
}

.side-nav a:hover,
.side-nav a.active,
.side-nav a:focus {
  color: #73BCDC !important;
  background-color: #F4F4F5 !important;
}

@media only screen and (max-width: 1199px) {
  .side-nav {
    margin-top: 48px;
  }
}

@media only screen and (max-width: 1199px) {
  .display-none-tb {
    display: none;
  }
}

#page-wrapper {
  margin-top: 112px;
}

@media only screen and (max-width: 1199px) {
  #page-wrapper {
    margin-top: 104px;
  }
}

@media only screen and (max-width: 767px) {
  #page-wrapper {
    margin-top: 80px;
  }
}

.navbar-header .chatbot-switch-area {
  position: unset;
}

@media only screen and (max-width: 767px) {
  .side-nav {
    margin-top: 0px;
  }
}

.side-nav li a {
  padding: 10px 10px 10px 10px;
  background-color: #F4F4F5;
}

.side-nav li.dropdown ul.dropdown-menu li a {
  padding: 4px 5px 4px 15px;
  margin: 4px 0px 4px 18px;
}

.caret,
a:hover .caret {
  position: absolute;
  top: 34%;
  right: 20px;
  width: 6px;
  height: 6px;
  transform: translateY(-50%) rotate(135deg);
  -webkit-transform: rotate(135deg);
  border-right: 2px solid #245FB6;
  border-top: 2px solid #245FB6;
  border-left: 0px;
  content: "";
}

.dropdown a {
  white-space: normal !important;
}

.dropdown-account .caret {
  left: 15px;
}

@media only screen and (max-width: 767px) {
  .dropdown-account .caret {
    display: none;
  }
}

.open .caret,
.open a:hover .caret {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}

.caret-lr {
  position: absolute;
  top: 81px;
  right: 6px;
  width: 6px;
  height: 6px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
  border-right: 2px solid #245FB6;
  border-top: 2px solid #245FB6;
  border-left: 0px;
  content: "";
  z-index: 9999;
}

@media only screen and (max-width: 1199px) {
  .caret-lr {
    top: 61px;
    right: 3px;
  }
}

@media only screen and (max-width: 767px) {
  .caret-lr {
    top: 45px;
    right: 0px;
  }
}

@media only screen and (max-width: 427px) {
  .caret-lr {
    top: 38px;
    right: -1px;
  }
}

.open .caret-lr {
  transform: translateY(-50%) rotate(315deg);
  -webkit-transform: rotate(315deg);
}

/*レフトメニューのしましま回避*/
.side-nav>li.dropdown>ul.dropdown-menu {
  background-color: #F4F4F5;
}

.nav a,
.side-nav>li.dropdown>ul.dropdown-menu>li>a {
  color: #333333;
}

.nav li a:hover {
  background-color: #F4F4F5;
  color: #73BCDC;
}

.nav li a:focus {
  background-color: #F4F4F5;
  color: #245FB6;
}

.nav li a.btn {
  width: 200px;
  margin: 15px 10px;
  padding-right: 20px !important;
  line-height: 1.8;
}

.nav li a.btn:hover,
.nav li a.btn:focus {
  background-color: #73BCDC !important;
  color: #FFFFFF !important;
}

/* サイドメニューラベル */
.menu-site-label {
  background-color: #5cb85c !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
}

.menu-shop-label {
  background-color: #428bca !important;
  color: #FFFFFF !important;
  font-weight: bold !important;
}

/* インラインのcheckboxの2段目をそろえる */
/* 上書き */
.checkbox-inline+.checkbox-inline {
  margin-left: 0px;
  margin-right: 10px;
}

/* 追加 */
.checkbox-inline:first-child {
  margin-right: 10px;
}

/* list-inlineの頭ずれ補正 */
.list-inline>li {
  padding-left: 0px;
}

/* コントロールを密着 */
.pl-ziro {
  padding-left: 0px;
}

/* 行を密着 */
.hiddenRow {
  padding: 0 !important;
  width: 100%;
}

/* 左端レイアウト補正 */
.help-block {
  display: inline-block;
}

.graph-area {
  width: 100%;
  text-align: center;
}

/* ローディングアイコン */
.loader {
  height: 100%;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

.loader i {
  font-size: 300%;
}

.loader p {
  font-size: 70%;
}

/* サブメニュー変更(メニューと同じ見た目） */
.dropdown-menu .active a,
.dropdown-menu .active a:hover,
.dropdown-menu .active a:focus {
  text-decoration: none;
  outline: 0;
  background-color: #F4F4F5;
  color: #245FB6 !important;
  border-left: 2px solid #73BCDC;
}

.navbar-collapse {
  background: -webkit-gradient(linear, left top, right top, from(#245FB6), to(#73BCDC));
  background: linear-gradient(90deg, #245FB6 0%, #73BCDC 100%);
}

.shop-header {
  background: -webkit-gradient(linear, left top, right top, from(#245FB6), to(#73BCDC));
  background: linear-gradient(90deg, #245FB6 0%, #73BCDC 100%);
}

.site-header {
  background: -webkit-gradient(linear, left top, right top, from(#0AB5A3), to(#5FD1C5));
  background: linear-gradient(90deg, #0AB5A3 0%, #5FD1C5 100%);
}

@media only screen and (max-width: 767px) {
  .navbar-collapse {
    background: #F4F4F5;
  }
}

@media only screen and (max-width: 767px) {
  .navbar-header {
    background: -webkit-gradient(linear, left top, right top, from(#245FB6), to(#73BCDC));
    background: linear-gradient(90deg, #245FB6 0%, #73BCDC 100%);
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .navbar-shop-header {
    background: -webkit-gradient(linear, left top, right top, from(#245FB6), to(#73BCDC));
    background: linear-gradient(90deg, #245FB6 0%, #73BCDC 100%);
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .navbar-site-header {
    background: -webkit-gradient(linear, left top, right top, from(#0AB5A3), to(#5FD1C5));
    background: linear-gradient(90deg, #0AB5A3 0%, #5FD1C5 100%);
    width: 100%;
  }
}

.navbar-nav {
  background-color: none;
}

.navbar-nav li {
  background-color: none;
  font-weight: bold;
}

.navbar-nav .active a {
  color: #245FB6;
  font-weight: bold;
  background-color: #F4F4F5;
}

.navbar-nav .active a:hover {
  color: #73BCDC;
}

.navbar-nav .active a:focus {
  color: #73BCDC;
}

.dropdown-menu li a:hover,
.dropdown-menu li a.active,
.dropdown-menu li a:focus {
  color: #73BCDC !important;
}

.dropdown-menu li.indent-1 {
  padding-left: 4.5em !important;
  text-indent: -3.5em;
}

.navbar-right {
  background-color: transparent;
}

.navbar-right li {
  background-color: transparent;
}

@media only screen and (max-width: 767px) {
  .navbar-right li {
    float: left;
    width: 25%;
  }
}

.nav-tabs>li.active>a {
  background-color: #eee;
}

.nav-tabs>li>a {
  border-color: #eee;
}

.navbar-toggle {
  float: left;
  height: 40px;
  margin: 8px 0 0 0;
}

.navbar-toggle .icon-bar {
  background-color: #FFFFFF;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggle .icon-bar+.icon-bar {
  margin-top: 6px;
}

.fuelux .wizard ul li.active {
  font-weight: bold;
  font-size: 150%;
}

.popover {
  max-width: 1000px;
}

.page-head h3 {
  margin: 0px 0px 20px 0px;
  font-size: 28px;
  font-weight: bold;
}

.page-head h4 {
  margin: 5px 0px 5px 0px;
  font-size: 16px;
}

/* 文字列折り返し設定 */
.word-break-all {
  word-break: break-all !important;
}

p.word-break-all {
  white-space: normal;
}

/* mp-icon -----------------------------------------------------
----------------------------------------------------------- */
.mp-icon-dashboard {
  background: url(../../images/V2/icon_dashboard.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-multi {
  background: url(../../images/V2/icon_multi.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-tsudo {
  background: url(../../images/V2/icon_tsudo.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-keizoku {
  background: url(../../images/V2/icon_keizoku.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-jido {
  background: url(../../images/V2/icon_jido.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-ikkatsu {
  background: url(../../images/V2/icon_ikkatsu.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-sonota {
  background: url(../../images/V2/icon_sonota.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-taimen {
  background: url(../../images/V2/icon_taimen.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-preca {
  background: url(../../images/V2/icon_preca.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-shop {
  background: url(../../images/V2/icon_shop_ss.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-member {
  background: url(../../images/V2/icon_member.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-site {
  background: url(../../images/V2/icon_site_ss.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-link {
  background: url(../../images/V2/icon_link.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-account {
  background: url(../../images/V2/icon_account.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-ipaddress {
  background: url(../../images/V2/icon_ipaddress.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-time {
  background: url(../../images/V2/icon_time.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-calendar {
  background: url(../../images/V2/icon_calendar.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-ninsyo {
  background: url(../../images/V2/icon_ninsyo.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-pass {
  background: url(../../images/V2/icon_pass.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-change {
  background: url(../../images/V2/icon_change.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-logout {
  background: url(../../images/V2/icon_logout.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-edit {
  background: url(../../images/V2/icon_edit.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-download {
  background: url(../../images/V2/icon_download.svg) no-repeat left;
  background-size: 16px;
  padding-left: 24px;
}

.mp-icon-upload {
  background: url(../../images/V2/icon_upload.svg) no-repeat left;
  background-size: 16px;
  padding-left: 24px;
}

.mp-icon-history {
  background: url(../../images/V2/icon_history.svg) no-repeat left;
  /* background-size: 17px; */
  background-size: 19px;
  padding-left: 24px;
}

.mp-icon-default {
  background: url(../../images/V2/icon_default.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-pencil {
  background: url(../../images/V2/icon_pencil.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;
}

.mp-icon-pc-preview {
  background: url(../../images/V2/icon_pcpreview.svg) no-repeat left;
  background-size: 24px;
  padding-left: 24px;

  display: block;
  width: 100%;
  height: 100%;

}

.mp-icon-sp-preview {
  background: url(../../images/V2/icon_sppreview.svg) no-repeat left;
  background-size: 24px;
  padding-left: 24px;

  display: block;
  width: 100%;
  height: 100%;
}

.mp-icon-fullscreen-preview {
  background: url(../../images/V2/icon_fullscreenpreview.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;

  display: inline-block;
  width: 100%;
  height: 100%;
}

.mp-icon-fullscreen-preview-undo {
  background: url(../../images/V2/icon_fullscreenpreview_undo.svg) no-repeat left;
  background-size: 20px;
  padding-left: 24px;

  display: inline-block;
  width: 100%;
  height: 100%;
}

.mp-icon-pc-preview:hover,
.mp-icon-sp-preview:hover,
.mp-icon-fullscreen-preview:hover,
.mp-icon-fullscreen-preview:hover,
.mp-icon-caret-double-left:hover,
.mp-icon-caret-double-right:hover,
.mp-icon-fullscreen-preview-undo:hover {
  opacity: .5;
}

.mp-icon-caret-double-left {
  background: url(../../images/V2/icon_caret_double_left.svg) no-repeat left;
  background-size: 18px;
  padding-left: 18px;

  display: block;
  width: 100%;
  height: 100%;
}

.mp-icon-caret-double-right {
  background: url(../../images/V2/icon_caret_double_right.svg) no-repeat left;
  background-size: 18px;
  padding-left: 18px;

  display: block;
  width: 100%;
  height: 100%;
}

/* header -----------------------------------------------------
----------------------------------------------------------- */
.logo-area {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
}

@media only screen and (max-width: 1199px) {
  .logo-area {
    display: none;
  }
}

.logo-area--inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 209px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 3px 6px #00000029;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 0px 0px 30px 30px;
  padding: 0px 25px 0px 30px;
}

.navbar-header .logo-area {
  position: unset;
}

.target-icon-shop {
  padding: 15px 0px 15px 48px;
  background: url(../../images/V2/icon_shop_s.svg) no-repeat left;
  background-size: 40px;
}

.target-icon-site {
  padding: 15px 0px 15px 48px;
  background: url(../../images/V2/icon_site_s.svg) no-repeat left;
  background-size: 40px;
}

/*2022.03.30　加藤テスト　アイコン縦センター*/
.target-li-area {
  padding: 16px;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  background-color: #FFFFFF;
  overflow-wrap: break-word;
}

.target-li-area-icon {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  position: relative;
  background-size: contain;
}

@media only screen and (max-width: 427px) {
  .target-li-area-icon {
    width: 26px;
    height: 26px;
  }
}

.target-li-area-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.target-li-area-icon.shop-icon::before {
  background-image: url("../../images/V2/icon_shop_s.svg");
}

.target-li-area-icon.site-icon::before {
  background-image: url("../../images/V2/icon_site_s.svg");
}

.target-li-area-text {
  min-width: 0 !important;
}

/* admin-switching */
.admin-switching {
  position: absolute;
  top: 70px;
  left: 77px;
  width: 28px;
  height: 28px;
  background-color: #FFFFFF;
  border-radius: 30px;
}

@media only screen and (max-width: 1199px) {
  .admin-switching {
    left: 50px;
    top: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .admin-switching {
    top: 38px;
    left: 48px;
    width: 20px;
    height: 20px;
  }
}

@media only screen and (max-width: 427px) {
  .admin-switching {
    top: 32px;
    left: 38px;
  }
}

.site-shop-logo .dropdown-menu {
  position: fixed;
  top: 87px;
  left: 94px;
  right: 0;
  overflow-y: auto;
  z-index: 9997;
  padding: 21px 30px;
  border: none;
  border-radius: 17px;
  min-width: 500px;
  width: 500px;
  max-height: 50%;
  margin-bottom: 620px;
}

@media only screen and (max-width: 1199px) {
  .site-shop-logo .dropdown-menu {
    top: 66px;
    left: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .site-shop-logo .dropdown-menu {
    top: 58px;
    left: 0px;
  }
}

@media only screen and (max-width: 427px) {
  .site-shop-logo .dropdown-menu {
    top: 46px;
    left: 0px;
    width: calc(100vw - -10px);
    padding: 0px 16px 16px 16px;
    min-width: 250px;
    border-radius: 8px;
  }
}

.site-shop-logo .dropdown-menu li {
  width: 100%;
  word-wrap: break-word;
}

.site-shop-logo .dropdown-menu li a {
  background: #FFFFFF;
  margin: 0px 0px 16px 0px;
  padding: 0px;
}

@media only screen and (max-width: 427px) {
  .site-shop-logo .dropdown-menu li a {
    font-size: 1.1rem;
  }
}

.site-shop-logo .dropdown-menu .active a {
  border: none;
  background-color: #FFFFFF;
}

.site-shop-logo--inner {
  position: absolute;
  top: 24px;
  left: 20px;
  width: 100px;
  height: 100px;
}

@media only screen and (max-width: 1199px) {
  .site-shop-logo--inner {
    left: 10px;
    background-size: 70px !important;
    width: 70px;
    height: 70px;
    top: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .site-shop-logo--inner {
    background-size: 60px !important;
    width: 60px;
    height: 60px;
    left: 45px;
    top: 8px;
  }
}

@media only screen and (max-width: 427px) {
  .site-shop-logo--inner {
    background-size: 50px !important;
    width: 50px;
    height: 50px;
    left: 38px;
    top: 3px;
  }
}

.shop-logo {
  background: url(../../images/V2/icon_shop.svg) no-repeat left;
}

.site-logo {
  background: url(../../images/V2/icon_site.svg) no-repeat left;
}

.target-change {
  padding: 15px 15px 15px 50px !important;
  background: url(../../images/V2/icon_change.svg) no-repeat left !important;
}

@media only screen and (max-width: 427px) {
  .target-change {
    padding: 15px 15px 15px 36px !important;
  }
}

.nav-account {
  float: left;
  padding-left: 20px;
  word-break: break-all !important;
  /* 2022.05.23 加藤追記　No.19の対応 */
}

@media only screen and (max-width: 1199px) {
  .nav-account {
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .nav-account {
    padding-top: 10px;
    padding-right: 20px;
  }
}

@media only screen and (max-width: 427px) {
  .nav-account {
    padding: 8px 8px 0 0;
  }
}

.dropdown-account {
  position: relative;
  width: 220px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 44px;
}

@media only screen and (max-width: 1300px) {
  .dropdown-account {
    width: 60px;
    line-height: 2.0;
  }
}

@media only screen and (max-width: 1199px) {
  .dropdown-account {
    height: 40px;
    line-height: 2.0;
  }
}

@media only screen and (max-width: 767px) {
  .dropdown-account {
    width: 25px;
    background: url(../../images/V2/bento_menu.svg) no-repeat left;
    background-size: 22px;
    border-radius: 0px;
    line-height: 2.6;
  }
}

.dropdown-account:after {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  border-color: rgba(191, 191, 191, 0);
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 16px;
  border-right-width: 16px;
  margin-top: -5px;
  border-right-color: #FFFFFF;
  left: -30px;
  top: 49%;
}

@media only screen and (max-width: 767px) {
  .dropdown-account:after {
    display: none;
  }
}

.dropdown-account a {
  display: block;
  padding: 10px 10px 10px 30px;
  width: 100%;
  height: 100%;
  color: #333333;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.8;
}

@media only screen and (max-width: 767px) {
  .dropdown-account a {
    line-height: 2.2;
  }
}

@media only screen and (max-width: 767px) {
  .dropdown-account a.dropdown-toggle {
    padding: 0px;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
}

.dropdown-account a:hover,
.dropdown-account a:focus {
  text-decoration: none;
  color: #333333;
}

.dropdown-account.open .dropdown-toggle {
  background: transparent;
  position: absolute;
  z-index: 9999;
}

.dropdown-account .dropdown-menu {
  width: 500px;
  top: -2px;
  left: 0px;
  z-index: 9998;
  padding: 40px 0px 0px 0px;
  border: none;
  background-color: #F4F4F5;
  border-radius: 17px;
}

@media only screen and (max-width: 767px) {
  .dropdown-account .dropdown-menu {
    left: auto;
    right: -20px;
    top: 48px;
    padding: 17px 0px 0px 0px;
    width: calc(100vw - 20px);
  }
}

@media only screen and (max-width: 427px) {
  .dropdown-account .dropdown-menu {
    left: auto;
    right: 0px;
    top: 48px;
    padding: 17px 0px 0px 0px;
    width: calc(100vw - 20px);
  }
}

.dropdown-account .dropdown-menu .dropdown-header {
  padding: 15px 30px 20px 30px;
  font-size: 14px;
}

@media only screen and (max-width: 1199px) {
  .dropdown-account .dropdown-menu .dropdown-header {
    padding: 15px 15px 20px 15px;
  }
}

.dropdown-account .dropdown-menu .mp-icon-account,
.dropdown-account .dropdown-menu .mp-icon-ipaddress,
.dropdown-account .dropdown-menu .mp-icon-pass,
.dropdown-account .dropdown-menu .mp-icon-ninsyo,
.dropdown-account .dropdown-menu .mp-icon-logout {
  padding: 15px 0px 15px 48px;
  background-position: 40% 55%;
}

.dropdown-account .dropdown-menu .dropdown-menu--innner {
  background: #FFFFFF;
  padding: 0 0 17px 0;
  border-radius: 0px 0px 17px 17px;
  list-style: none;
}

@media only screen and (max-width: 767px) {
  .dropdown-account .dropdown-menu .dropdown-menu--innner {
    border-radius: 0px;
  }
}

.dropdown-account .dropdown-menu .dropdown-menu--innner a {
  background: #FFFFFF;
  font-weight: normal;
  padding: 20px 15px 10px 15px;
  font-size: 16px;
}

@media only screen and (max-width: 1199px) {
  .dropdown-account .dropdown-menu .dropdown-menu--innner a {
    padding: 20px 15px 10px 15px;
  }
}

.dropdown-account .dropdown-menu a:hover,
.dropdown-account .dropdown-menu a.active,
.dropdown-account .dropdown-menu a:focus {
  background-color: #FFFFFF !important;
}

.dropdown-account .dropdown-menu .navbar-right a:hover,
.dropdown-account .dropdown-menu .navbar-right a.active,
.dropdown-account .dropdown-menu .navbar-right a:focus {
  background-color: transparent !important;
}

.navbar-right {
  padding-top: 56px;
}

@media only screen and (max-width: 1199px) {
  .navbar-right {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media only screen and (max-width: 767px) {
  .navbar-right {
    background-color: none !important;
    padding-bottom: 10px;
    padding-top: 13px;
    border-radius: 0px 0px 10px 10px;
  }
}

.navbar-right a {
  color: #FFFFFF;
  font-size: 10px;
  padding: 38px 10px 0px 10px !important;
  font-weight: normal;
  line-height: 12px !important;
  text-align: center;
  width: 90px;
  height: 64px;
  margin: 0 auto;
}

@media only screen and (max-width: 767px) {
  .navbar-right a {
    color: #245FB6 !important;
  }
}

.navbar-right a span {
  display: block;
}

.navbar-right a:hover {
  background-color: transparent !important;
  color: #FFFFFF !important;
}

.header-icon-code {
  background: url(../../images/V2/icon_code.svg) no-repeat top center;
}

.header-icon-code:hover {
  background: url(../../images/V2/icon_code_on.svg) no-repeat top center;
}

.header-icon-document {
  background: url(../../images/V2/icon_document.svg) no-repeat top center;
}

.header-icon-document:hover {
  background: url(../../images/V2/icon_document_on.svg) no-repeat top center;
}

.header-icon-faq {
  background: url(../../images/V2/icon_faq.svg) no-repeat top center;
}

.header-icon-faq:hover {
  background: url(../../images/V2/icon_faq_on.svg) no-repeat top center;
}

.header-icon-inquiry {
  background: url(../../images/V2/icon_inquiry.svg) no-repeat top center;
}

.header-icon-inquiry:hover {
  background: url(../../images/V2/icon_inquiry_on.svg) no-repeat top center;
}

@media only screen and (min-width: 767px) {
  .display-sp {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .display-none-sp {
    display: none;
  }
}

/* faq -----------------------------------------------------
----------------------------------------------------------- */
.faqarea {
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 22px;
  border-radius: 4px;
  padding-bottom: 18px;
}

.faq_r {
  padding: 6px 30px 0px 10px;
  background: url(../../images/V2/icon_link.svg) no-repeat right;
  line-height: 2;
}

.faq_r a::after {
  content: "に関するFAQ";
}

/* dashboard -----------------------------------------------------
----------------------------------------------------------- */
.page-wrapper-dashboard {
  padding: 15px 25px !important;
  background: transparent !important;
}

.dashboard-box {
  padding: 16px 32px;
  word-wrap: break-word;
}

@media only screen and (max-width: 1199px) {
  .dashboard-box {
    padding: 16px;
  }
}

.panel {
  border: none;
}

.dashboard-box .panel-body {
  padding: 10px 0px;
}

@media only screen and (max-width: 1199px) {
  .dashboard-box .panel-body {
    padding: 10px;
  }
}

.dashboard-box .panel-body .nav-tabs {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.dashboard-box .panel-body ul {
  border-bottom: solid 1px #C8C8C8;
}

.dashboard-box .panel-body li {
  font-size: 1.4rem;
}

.dashboard-box .panel-body li a {
  border: none;
  background-color: transparent;
}

.dashboard-box .panel-body li.active a {
  color: #245FB6;
}

.dashboard-box .panel-body li:hover {
  border: none;
}

.dashboard-box .panel-body .active::after {
  background: -webkit-gradient(linear, left top, right top, from(#245FB6), to(#73BCDC));
  background: linear-gradient(to right, #245FB6 0%, #73BCDC 100%);
  border-radius: 5px;
  content: "";
  display: block;
  height: 6px;
}

.dashboard-box .panel-body .tab-content>.active::after {
  background: none !important;
}

.dashboard-box .panel-body::after {
  content: "";
  display: block;
  height: 6px;
}

.active {
  color: #245FB6;
}

.panel-primary,
.panel-info {
  border: none;
  border-radius: 10px;
}

.panel-primary .panel-heading,
.panel-info .panel-heading {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  background: #FFFFFF;
  border-radius: 10px;
  border: none;
  padding: 8px 0px;
}

.panel-info .panel-heading {
  display: inline-block;
  width: 100%;
  min-height: 60px;
  line-height: 60px;
  padding: 0px 32px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: 2px solid #245FB6;
}

.panel-footer {
  background-color: #FFFFFF;
  border-top: 1px solid #D9ECFF;
  font-size: 16px;
  padding: 8px 0px;
}

.panel-footer .announcement-text {
  padding-top: 8px;
}

#current_amount,
#current_count {
  font-size: 28px;
  word-wrap: break-word;
}

.panel-title {
  font-size: 20px;
}

.vs-success-bgc {
  background: #CCF6E4 !important;
  color: #388B4E !important;
  border: none;
}

.new {
  color: #FF3D00;
  padding-left: 10px;
  font-size: 14px;
  font-weight: bold;
}

/* jqplot setting  */
.jqplot-target {
  max-width: 1000px;
  min-height: 300px;
  position: relative;
  margin: 30px 0px 10px 0px;
}

.jqplot-table-legend {
  border: none !important;
}

.jqplot-table-legend-label {
  color: #245FB6;
}

.jqplot-table-legend-swatch-outline {
  border: none !important;
  padding-right: 5px !important;
  padding-left: 0px !important;
}

.jqplot-yaxis {
  color: #00CFA5;
}

.jqplot-y2axis {
  color: #508CD3;
}

#infolist tr:first-child td {
  border-top: none;
}

#infolist .label {
  width: 92px;
  height: 21px;
  border-radius: 12px;
  display: table-cell;
  line-height: 1.2;
  float: left;
  padding: 4px;
}

.btn-info-danger,
.btn-info-warning,
.btn-info-info,
.btn-info-maint {
  opacity: 0.4;
  min-width: 92px;
  height: 21px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6 !important;
  border-radius: 12px !important;
  padding-right: 0px !important;
  margin-left: 10px !important;
  border: none;
}

.btn-info-danger.active,
.btn-info-warning.active,
.btn-info-info.active,
.btn-info-maint.active {
  opacity: 1.0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.info-new {
  color: #FF3D00;
  font-weight: bold;
  float: left;
}

.info-wd-1 {
  width: 120px;
}

.info-wd-2 {
  width: 64px;
}

.info-wd-3 {
  width: 134px;
}

/* login -----------------------------------------------------
----------------------------------------------------------- */
.login-bg {
  background-color: #FFFFFF !important;
}

.login-bg .navbar-fixed-top {
  top: 60px !important;
  display: contents !important;
  /* 2022.05.24 加藤追記 No.44対応 */
}

.h1-login {
  font-size: 32px;
  color: #245FB6;
  padding: 50px 0px 20px 0px;
  text-align: center;
  float: none;
}

@media only screen and (max-width: 767px) {
  .h1-login {
    font-size: 24px;
  }
}

.login-box {
  max-width: 752px;
  margin: 0 auto;
}

.login-box .panel-heading {
  width: 45%;
  height: 100%;
  padding: 40px 18px;
  background: -webkit-gradient(linear, left top, left bottom, from(#245FB6), to(#73BCDC));
  background: linear-gradient(180deg, #245FB6 0%, #73BCDC 100%);
  float: left;
  border-radius: 6px 0px 0px 6px;
}

@media only screen and (max-width: 767px) {
  .login-box .panel-heading {
    width: 100%;
    height: 150px;
    padding: 24px 32px 0px 32px;
    background: -webkit-gradient(linear, left top, right top, from(#245FB6), to(#73BCDC));
    background: linear-gradient(90deg, #245FB6 0%, #73BCDC 100%);
    border-radius: 6px 6px 0px 0px;
  }
}

.login-box .panel-body {
  width: 55%;
  height: 100%;
  float: left;
  background: #FFFFFF;
  border-radius: 0px 6px 6px 0px;
  padding: 70px 31px 23px 42px;
}

@media only screen and (max-width: 767px) {
  .login-box .panel-body {
    width: 100%;
    height: auto;
    border-radius: 0px 0px 6px 6px;
    padding: 24px 32px 0px 32px;
  }
}

.login-box .panel-body .control-label {
  font-weight: normal;
}

.login-box .panel {
  border-color: transparent;
  background-color: transparent;
  width: 100%;
  height: 536px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 3px 15px #00000029;
  box-shadow: 0px 3px 15px #00000029;
}

.login-box .panel-title {
  font-size: 16px;
  text-align: center;
  padding: 10px 0px;
}

@media only screen and (max-width: 767px) {
  .login-box .panel-title {
    font-size: 14px;
    padding: 5px 0px;
    padding-left: 80px;
    text-align: left;
  }
}

@media only screen and (max-width: 375px) {
  .login-box .panel-title {
    padding-left: 0px;
  }
}

.login-box h2 {
  width: 100%;
  padding-left: 0px;
  font-size: 24px;
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .login-box h2 {
    margin-top: 10px;
    margin-bottom: 20px;
    padding-left: 80px;
    text-align: left;
  }
}

@media only screen and (max-width: 375px) {
  .login-box h2 {
    margin-top: 8px;
    padding-left: 72px;
  }
}

.login-box .site-shop-logo--inner {
  position: static;
  margin-top: 80px;
  margin-left: 96px;
  margin-bottom: 200px;
}

@media only screen and (max-width: 767px) {
  .login-box .site-shop-logo--inner {
    position: absolute;
    top: 30px;
    left: 50px;
    margin: 0px;
  }
}

@media only screen and (max-width: 375px) {
  .login-box .site-shop-logo--inner {
    top: 16px;
    left: 46px;
    background-size: 84% !important;
  }
}

.login-btn button {
  margin-top: 140px;
  margin-bottom: 24px;
}

@media only screen and (max-width: 767px) {
  .login-btn button {
    margin-top: 24px;
    margin-bottom: 16px;
  }
}

.login-link {
  text-align: right;
  font-size: 14px;
}

/* ikkatsu -----------------------------------------------------
----------------------------------------------------------- */
.panel-box.panel-default {
  border-radius: 10px;
  border: 1px solid #AFC8D6;
}

.panel-box.panel-heading {
  padding: 20px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.panel-box.panel-default .panel-heading {
  background-color: #F5F9FF;
  border: none;
  border-radius: 10px;
}

.panel-box.panel-default .panel-body {
  padding: 15px 0px;
  background-color: #FFFFFF;
}

.panel-box.panel-default .panel-footer {
  background: #F5F9FF;
  border: none;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 14px 0px;
}

.panel-box.panel-body blockquote {
  border-left: 0px;
  border-bottom: 1px solid #D9ECFF;
  font-size: 18px;
  font-weight: bold;
}

.btn-right {
  padding-right: 25px;
  float: right !important;
}

.page-sub-title {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0px 10px 20px;
}

.step-list {
  margin: 0px 0px 30px 20px;
}

.list-item {
  /*border-bottom: 1px solid $border-blue;*/
  width: 100%;
}

.list-item:nth-of-type(1) {
  /*border-top: 1px solid $border-blue;*/
}

.list-item-content {
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
  max-width: 1100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #C8C8C8;
}

@media only screen and (max-width: 767px) {
  .list-item-content {
    padding-top: 15px;
    padding-bottom: 15px;
    display: inline-block;
    width: 100%;
  }
}

.list-item-content-number {
  width: 8%;
  background-color: #245FB6;
  color: #FFFFFF;
  border-radius: 50%;
  padding: 4px;
  max-width: 32px;
  min-width: 24px;
  margin: 4px;
}

.list-item-content-number .inner {
  position: relative;
  padding-top: 100%;
  height: 0;
}

.list-item-content-number .inner p {
  position: absolute;
  top: calc((100% - 1em)/2);
  left: 0;
  right: 0;
  margin: 0 !important;
  text-align: center;
  line-height: 1;
}

.list-item-content-number-line {
  position: absolute;
  top: -90%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 2px;
  height: 170%;
  background: #C8C8C8;
}

.list-item-content-title {
  width: 24%;
  margin-right: 0;
  -ms-flex-preferred-size: 125px;
  flex-basis: 125px;
  font-size: 1.6rem;
  font-weight: bold;
  min-width: 140px;
}

@media only screen and (max-width: 767px) {
  .list-item-content-title {
    width: 100%;
    padding-bottom: 16px;
  }
}

.list-item-content-title .label {
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 12px;
  display: table-cell;
  line-height: 1.2;
  float: right;
  font-size: 1.0rem;
  background-color: #D5E5FA;
  color: #245FB6;
  /* width: 80%; */
  float: right;
}

.list-item-content-statas-description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.list-item-content-status {
  width: 38%;
}

@media only screen and (max-width: 767px) {
  .list-item-content-status {
    width: 50%;
  }
}

.list-item-content-description {
  width: 40%;
}

@media only screen and (max-width: 767px) {
  .list-item-content-description {
    width: 50%;
  }
}

.list-item-content-status,
.list-item-content-description {
  line-height: 1.5;
  font-size: 16px;
  width: 100%;
}

@media only screen and (max-width: 767px) {

  .list-item-content-status,
  .list-item-content-description {
    max-width: 260px;
    font-weight: normal;
    font-size: 13px;
  }
}

.list-item-content-status .status--inner {
  height: 24px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2px 16px 2px 10px;
  border-right: 1px solid #707070;
  font-size: 12px;
}

.list-item-content-status .status--inner .label {
  margin-right: 1rem;
  padding: 4px 8px !important;
  width: 90%;
  min-width: 146px;
}

.list-item-content-status .status--inner .label-default,
.list-item-content-status .status--inner .label-primary,
.list-item-content-status .status--inner .label-success,
.list-item-content-status .status--inner .label-info,
.list-item-content-status .status--inner .label-warning,
.list-item-content-status .status--inner .label-danger {
  background: #E3E6EA !important;
  color: #918D9D !important;
}

.list-item-content-status .status--inner .status--inner--text {
  width: 60%;
  min-width: 48px;
  text-align: right;
}

.list-item-content-description .description--inner {
  height: 24px;
  font-size: 12px;
  padding: 2px 10px 2px 16px;
  display: inline-block;
}

.list-item.active .list-item-content-number,
.list-item-content.active .list-item-content-number {
  background: #245FB6;
}

.list-item.active .list-item-content-title,
.list-item-content.active .list-item-content-title {
  color: #245FB6;
}

.list-item.active .list-item-content,
.list-item-content.active .list-item-content {
  background: #F5F9FF;
  color: #333333;
}

.list-item.active .list-item-content-status,
.list-item.active .list-item-content-description,
.list-item-content.active .list-item-content-status,
.list-item-content.active .list-item-content-description {
  color: #333333;
}

.list-item.active .label-danger,
.list-item-content.active .label-danger {
  background: #FAD7DD !important;
  color: #93365F !important;
}

.list-item.active .label-warning,
.list-item-content.active .label-warning {
  background: #FDE6D8 !important;
  color: #CE763F !important;
}

.list-item.active .label-maint,
.list-item-content.active .label-maint {
  background: #D5E5FA !important;
  color: #547CBD !important;
}

.list-item.active .label-info,
.list-item-content.active .label-info {
  background: #CCF6E4 !important;
  color: #388B4E !important;
}

.search-refine {
  position: relative;
  display: inline-block;
  width: 340px;
  padding: 0px 40px;
}

.search-refine label {
  float: left !important;
  margin-right: 10px;
  font-weight: normal;
}

.search-refine .form-control {
  width: 150px;
  float: left !important;
  border: none !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 34px;
  margin: 0px 16px;
  padding: 0px;
}

/* link-type -----------------------------------------------------
----------------------------------------------------------- */
.main-wrapper .navbar-nav .dropdown-toggle {
  height: 40px;
  border: 1px solid #D9ECFF;
  padding: 8px 36px 8px 16px;
  border-radius: 4px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.navbar-default .navbar-nav>li>a {
  color: #333333;
}

.navbar-default .navbar-nav .open a,
.navbar-default .navbar-nav .open a:hover,
.navbar-default .navbar-nav .open a:focus {
  background-color: #FFFFFF;
}

.btn-area {
  display: block;
}

.btn-area .btn-area--btn {
  float: left;
  padding-bottom: 28px;
  padding-top: 8px;
}

.btn-area .btn-area--info {
  padding-left: 20px;
  padding-top: 8px;
  display: table;
  height: 40px;
}

.btn-area .btn-area--info p {
  height: 40px;
  display: table-cell;
  vertical-align: middle;
}

/* table -----------------------------------------------------
----------------------------------------------------------- */
.table-blue thead>tr>th {
  border-bottom: 1px solid #D9ECFF !important;
  background: #F5F9FF !important;
}

.line-th,
.line-td {
  padding: 0px !important;
}

.line-th::before {
  content: "";
  background: url(../../images/V2/line_th.svg) no-repeat center;
  padding: 15px 2px 0px 2px;
  margin-right: 10px;
}

.line-td::before {
  content: "";
  background: url(../../images/V2/line_td.svg) no-repeat center;
  padding: 0px 2px;
  margin-right: 10px;
}

/* sb-admin -----------------------------------------------------
----------------------------------------------------------- */
.announcement-heading {
  font-size: 24px;
  padding-top: 30px;
}

@media only screen and (max-width: 1199px) {
  .announcement-heading {
    padding-top: 10px;
  }
}

/* component -----------------------------------------------------
----------------------------------------------------------- */
.contents-box {
  margin-bottom: 30px;
}

.chatbot-switch-area {
  margin: 0 auto;
  position: relative;
}

.chatbot-switch-area--inner {
  position: absolute;
  right: 24px;
  width: 192px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 0px 0px 20px 20px;
  padding: 0px 10px 0px 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media only screen and (min-width: 1200px) {
  .chatbot-switch-area--inner {
    position: fixed;
    top: 0;
  }
}

@media only screen and (max-width: 1199px) {
  .chatbot-switch-area--inner {
    width: 98px;
    height: 32px;
    padding: 0px 12px 0px 6px;
    gap: 3px;
    border-radius: 0px 0px 15px 15px;
  }
}

@media only screen and (max-width: 767px) {
  .chatbot-switch-area--inner {
    width: 98px;
    height: 32px;
    padding: 0px 12px 0px 6px;
    gap: 3px;
    border-radius: 0px 0px 15px 15px;
  }
}

.chatbot-switch-area--inner label {
  font-size: 11px;
  font-weight: bold;
}

.chatbot_kun img {
  height: 28px;
  width: auto;
}

/* toggle switch */
.chatbot-mode {
  float: left;
}

.cmn-toggle {
  visibility: hidden;
}

.cmn-toggle+label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

input.cmn-toggle-round {
  padding: 0 !important;
}

input.cmn-toggle-round+label {
  width: 56px;
  height: 24px;
  border-radius: 20px;
  top: -10px;
}

input.cmn-toggle-round+label:before,
input.cmn-toggle-round+label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.cmn-toggle-round+label:before {
  right: 1px;
  background-color: #AFC8D6;
  border-radius: 60px;
  transition: background 0.4s;
  z-index: 1;
}

input.cmn-toggle-round:checked+label:before {
  background-color: #00CFA5;
}

input.cmn-toggle-round+label:after {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 100%;
  transition: margin 0.4s;
  margin-top: 2px;
  margin-left: 3px;
  z-index: 3;
}

input.cmn-toggle-round:checked+label:after {
  margin-left: 33px !important;
}

input.cmn-toggle-round+label span:after,
input.cmn-toggle-round:checked+label span:after {
  font-size: 10px;
  line-height: 16px;
  color: #FFFFFF;
  position: absolute;
  z-index: 2;
  top: 4px;
}

input.cmn-toggle-round+label span:after {
  content: attr(data-off);
  right: 11px;
}

input.cmn-toggle-round:checked+label span:after {
  content: attr(data-on);
  left: 10px;
}


.deleted-card {
     color: #333 !important;
}

/* クレカ取引状態検索「こんなときは？」 ------------------------
----------------------------------------------------------- */

p.kon-na-tokiha {
  background-image: url( ../../images/V2/icon_info.svg);
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 24px;
  margin: 16px 0 8px 0;
}

/* リンクタイプ Plusオリジナルデザイン設定画面ここから */

/* 設定エリア */

.original-design-setting-page {
  min-width: 1280px;
  max-width: 1920px;
  height: 100%;
  display: flex;
}

.od-setting-area-closed {
  display: none;
  width: 56px;
  height: 100vh;
}

#od-setting-area-open-button {
  width: 24px;
  height: 24px;
  margin-top: 28px;
  margin-left: 24px;

}

.od-setting-area {
  display: block;
  width: 960px;
}

.od-setting-area-header {
  width: 960px;
  height: 80px;
  padding: 16px 8px 0 40px;
}

.od-setting-area-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#od-setting-area-close-button {
  width: 24px;
  height: 24px;
  margin-top: -30px;
  margin-right: 24px;
}

.od-tab-container {
  display: flex;
  height: 100%;

  position: absolute;
}

.od-setting-area-navi {
  width: 180px;
  /* 左メニューの幅　あとで検討 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 800px;

  position: fixed;
}

.od-tab-menu {
  /* 子孫要素の.parentにmargin-topを設定する為、こちらのmargin-topを調整 */
  margin-top: -4px;
  color: #333;
  margin-left: 16px;

}

.od-tab-menu ul {
  list-style: none;
  padding: 0;
}

.od-tab-menu li {
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.od-tab-menu li:hover,
.od-tab-menu li.active {
  color: #245FB6;
  background-color: #fff;
  border-radius: 8px 0 0 8px;
}

.od-tab-menu .category {
  cursor: default;
  font-size: 12px;
  font-weight: bold;
  color: #245FB6;
}

.od-tab-menu .parent {
  cursor: default;
  font-size: 12px;
  font-weight: bold;
  color: #707070;
  margin-top: 20px;
}

.od-tab-menu .category:hover {
  background: none;
}

.od-tab-menu .parent:hover {
  background: none;
  color: #707070;
}

.od-tab-menu .bold {
  font-weight: bold;
}

.od-tab-menu .parent ~ .category,
.od-tab-menu .parent ~ .child {
    padding-left:20px;
}
.od-tab-menu .category ~ .child {
    padding-left:40px;
}

.od_tab_content {
  padding: 20px;
  background: #ffffff;
  border-radius: 16px;

  position: fixed;
  left: 180px;
  /* レフトナビの幅分 */
  height: 100%;
  width: 770px;

}


.od_tab {
  display: none;
  width: 100%;
  height: 100%;
}

.od_tab.od_active {
  display: block;
}

.od-utility-area a {
  color: #245FB6;
  margin: 16px;
}

.od-utility-area a:hover {
  text-decoration: none;
}

.od-utility-area li {
  padding: 10px 0;
}

.od-utility-area li:hover {
  opacity: .6;
  cursor: pointer;
}

/* サブレフトナビ、コンテンツ */

.od-content-wrap {
  display: flex;
  width: 100%;
  height: 100%;
}

.od-content-wrap h2 {
  color: #245FB6;
}

/* 左側ナビゲーションのスタイル */
.od_nav {
  width: 200px;
  background-color: #ffffff;

  position: fixed;
  height: 80%;
  overflow-y: auto;
  border-right: 1px solid #E2E2E2;
}

.od_nav ul {
  list-style: none;
  padding: 0;
}

.od_nav li {
  padding: 10px;
  cursor: pointer;
  color: #245FB6;
  display: flex;
}

.od_nav li a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.od_nav li:hover,
.od_nav li.od_current {
  background: #F4F4F5;
  border-left: 1px solid #73BCDC;
}


/* 右側コンテンツのスタイル */
.od_content {
  width: 560px;
  overflow-y: scroll;
  padding: 20px;

  position: fixed;
  height: calc(100% - 178px);
  left: 380px;

  /* 最後のセクションの下にpaddingを設定し、見出しにジャンプできるように*/
  padding-bottom: 700px;


}

/* ハイライトスタイル */
.od_highlight {
  background-color: #555;
}

/* スクロールバーのスタイル */
.od_content::-webkit-scrollbar,
.od_nav::-webkit-scrollbar {
  width: 8px;
  padding: 4px;
}

.od_content::-webkit-scrollbar-track,
.od_nav::-webkit-scrollbar-track {
  margin-top: 4px;
  margin-bottom: 4px;
}

.od_content::-webkit-scrollbar-thumb,
.od_nav::-webkit-scrollbar-thumb {
  background: #E2E2E2;
  border-radius: 4px;
}

/* FireFox用のスクロールバー設定 */
.od_content,
.od_nav {
  scrollbar-width: thin;
  scrollbar-color: #E2E2E2 #fff;
}

/* 設定エリアを非表示にするためのスタイル */
.od-setting-area-hidden {
  display: none;
  width: 0px;
}
.od-setting-area-unhidden {
  display: block !important;
}
.od-preview-area-leftalign {
  left: 56px !important;
  transition-duration: .5s;
}
.od-preview-area-width100 {
  width: 100% !important;
}
.od-preview-area-width100-pcpreview {
  /* 設定エリアの幅とプレビューエリアのマージンぶん引く */
  width: calc(100% - 80px) !important;
}

/* 設定させる項目 */

.od_content section {
  margin-bottom: 64px;
}

.od-setting-h5 {
  border-bottom: 1px solid #245FB6;
  height: 32px;
  margin-left: 8px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.od-setting-h5 h5 {
  color: #245FB6;
  font-size: 16px;
  font-weight: bold;
  padding-left: 16px !important;
  margin-bottom: 8px !important;
}

.od-setting-child {
  margin-left: 96px;
  margin-bottom: 32px;
  margin-top: 32px;
}

.od-setting-h6 {
  border-bottom: 1px solid #245FB6;
  height: 32px;
  margin-top: 24px;
  width: 420px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.od-setting-h6 h6 {
  color: #245FB6;
  font-size: 16px;
  padding-left: 16px !important;
  margin-bottom: 8px !important;
}

.od-form-group {
  display: flex;
  margin-top: 16px;
  margin-left: 8px;
}

/* pxの文字にエラーの背景色が適用されないようにする */
.od-form-group.has-error span.input-group-addon {
  background-color: #ffffff;
}

.od-colorpicker {
  display: flex;
  gap: 8px;
}

.od-colorpicker input[type=color] {
  height: 40px;
  width: 44px;
}

.od-colorpicker input[type=color]:hover {
  cursor: pointer;
}

.od-notes {
  font-size: 11px;
  color: #707070;
  max-width: 270px;
  float: inline-end;
  margin-bottom: 16px;
}

.od-notes-child {
  font-size: 11px;
  color: #707070;
  max-width: 215px;
  float: inline-end;
  margin-bottom: 16px;
}



/* 表示ON・OFFのトグルボタン */
.od-accordion-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.od-display-switch {
  right: 24px;
  width: 130px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.od-display-switch label {
  font-size: 14px;
  font-weight: bold;
}

div.toggle-div input {
  visibility: hidden;
}

div.toggle-div+label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

div.toggle-div input {
  padding: 0 !important;
}

div.toggle-div+label {
  width: 56px;
  height: 24px;
  border-radius: 20px;
  top: -10px;
}

div.toggle-div+label:before,
div.toggle-div+label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

div.toggle-div+label:before {
  right: 1px;
  background-color: #AFC8D6;
  border-radius: 60px;
  transition: background 0.4s;
  z-index: 1;
}
div.toggle-div:has(label:first-child input:checked)+label:before {
  background-color: #245FB6;
}

div.toggle-div+label:after {
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 100%;
  transition: margin 0.4s;
  margin-top: 2px;
  margin-left: 3px;
  z-index: 3;
}

div.toggle-div:has(label:first-child input:checked)+label:after {
  margin-left: 33px !important;
}

div.toggle-div+label span:after,
div.toggle-div:has(label:first-child input:checked)+label span:after {
  font-size: 10px;
  line-height: 16px;
  color: #FFFFFF;
  position: absolute;
  z-index: 2;
  top: 4px;
}

div.toggle-div+label span:after {
  content: attr(data-off);
  right: 11px;
}

div.toggle-div:has(label:first-child input:checked)+label span:after {
  content: attr(data-on);
  left: 10px;
}

/* プログレスバー選択ラジオボタン */
.progressbar_wrap label {
  display: block;
}

.progressbar_wrap {
  display: flex;
  flex-direction: column;
}

.progressbar_design img {
  margin-left: 8px;
}

/* プレビューエリア */

.od-preview-area {
  position: fixed;
  left: 960px;
  border-left: 1px solid #C8C8C8;
  box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.20);
  height: 100%;
  width: 100%;
  overflow-x: scroll;
  background: #E2E2E2;
}


.od-preview-area-header {
  height: 80px;
  display: flex;
  align-items: center;
  background: #F4F4F5;
  justify-content: flex-start;

  position: fixed;
  top: 0;

  width: calc(100% - 960px);
  max-width: 100%;

  border-bottom: 1px solid #C8C8C8;

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);

}



.od-preview-device {
  display: flex;
  gap: 16px;
  padding: 32px;
  margin-left: 4px;
}

@media only screen and (max-width: 1919px) {
  .od-preview-device {
    padding: 16px;
  }
}


.od-preview-exe {
  display: flex;
  width:750px;
}

@media only screen and (max-width: 1919px) {
  .od-preview-exe {
    margin-left: 32px;
  }
}

/* プレビュー更新ボタン */
a.btn-info.mp-icon-reload {
  background: #fff url(../../images/V2/icon_reload.svg) no-repeat left center;
  background-size: 28px;
}

.btn-info.mp-icon-reload:hover {
  background: #73BCDC url(../../images/V2/icon_reload_white.svg) no-repeat left center;
  background-size: 28px;
  border: none;
  color: #FFFFFF !important;
}

.btn.mp-icon-reload {
  padding: 8px 16px 8px 32px;
}

.od_iframewrap {
  width: calc(100% - 960px);
  height: 100vh;

  position: fixed;
  left: 960px;
  top: 80px;
}

iframe#od-preview-iframe.od_fullpreview.od_pcpreview:not(.od-preview-area-width100) {
  width: calc(100% - 24px);
}

iframe#od-preview-iframe.od_fullpreview {
  left: 0px;
}
iframe#od-preview-iframe {
  overflow-x: scroll;
  min-height: 100vh;

  border: none;

  position: fixed;
  left: 960px;
  /* ヘッダの高さ分、上と下で調節 */
  top: 80px;
  padding-bottom: 80px;

  /* 余白をとってシャドウをつける */
  margin: 12px;
  box-shadow: -2px 4px 4px 0px rgba(0, 0, 0, 0.15),
    2px 4px 4px 0px rgba(0, 0, 0, 0.15)

}

/* PC版プレビューでは幅100% */
.od_pcpreview {
  width: calc(100% - 984px);
  min-width: 800px;
  transition-duration: .4s;
}

/* スマホ版プレビューでは幅440px（仮） */
.od_sppreview {
  width: 425px;
  transition-duration: .4s;

  /* スマホ版プレビューの幅が440pxの前提 */
  /* 画面幅 {100%-(960px+440px)}/2  */
  margin-left: calc((100% - 1400px)/2);
}

/* 全画面プレビュー */
.od-preview-area-header.od_fullpreview {
  min-width: 100%;
}
.od-preview-area.od_fullpreview {
  left: 0px;
}

/* ラジオボタンを改行させる */
.od-line-break-radio label {
	white-space: nowrap;
	display: block;
	font-weight: normal;
}
.od-line-break-radio input[type="radio"] {
	float: none;
}

/* プログレスバーのデザイン選択ラジオボタンに、プログレスバーの画像を表示 */
label:has(input[value="progressbar_01"]) {
  background: url(../../../../bundles/gmopggpeasylink/images/V2/progressbar_a.svg) no-repeat right;
}

label:has(input[value="progressbar_02"]) {
  background: url(../../../../bundles/gmopggpeasylink/images/V2/progressbar_b.svg) no-repeat right;
}

label:has(input[value="progressbar_03"]) {
  background: url(../../../../bundles/gmopggpeasylink/images/V2/progressbar_c.svg) no-repeat right;
}



/** ページ内コンテンツ全体ラッパー要素 */
#originaldesign {
	position: relative;
}
/** テスト環境メッセージがあれば上部60px空ける */
body:has(.test-wrapper) #originaldesign {
	top: 60px;
}

/** 編集画面とプレビュー画面で2カラムの構成にする */
.od-double-column {
	width: 100%;
	display: flex;
}
/** 編集画面 */
.original-design-setting-area {
	width: 50%;
	max-width: 960px;
	min-width: 950px;
}
/** 編集画面のタイトルや一時保存/公開ボタン保持エリア */
.od-setting-area {
	display: flex;
}
/** 設定エリアの設定 */
.od-setting-area, .od-setting-area-header, .od-setting-area-header-inner
	{
	width: 100%;
}
/** 編集エリアのサイドメニュー */
/** 編集ヘッダー分、上部80px空ける */
.od-setting-area-navi {
	width: 200px;
	overflow-y: scroll;
	height: calc(100% - 80px);
	max-height: 800px;
	min-height: calc(100% - 80px);
}
/** 編集ヘッダー分、上部80px + テスト環境メッセージがあれば上部60px空ける */
body:has(.test-wrapper) .od-setting-area-navi {
	height: calc(100% - 80px - 60px);
	min-height: calc(100% - 80px - 60px);
}
/** 編集ヘッダー分、上部80px + アラートメッセージがあれば上部66px空ける */
.original-design-setting-area:has(.alert) .od-setting-area-navi {
	height: calc(100% - 80px - 66px);
	min-height: calc(100% - 80px - 66px);
}
/** 編集ヘッダー分、上部80px + アラートメッセージがあれば上部66px空ける + テスト環境メッセージがあれば上部60px空ける */
body:has(.test-wrapper)
      .original-design-setting-area:has(.alert)
      .od-setting-area-navi {
	height: calc(100% - 80px - 66px - 60px);
	min-height: calc(100% - 80px - 66px - 60px);
}

.od-preview-area, .od-preview-area-header, .od-preview-area-header-inner
	{
	width: 100%;
}
/** プレビュー表示エリアのヘッダー */
.od-preview-area-header {
	display: block;
	top: auto;
}

.od-preview-area-header-inner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
/** プレビュー表示エリアの設定 */
.od-preview-area-wrap {
	position: relative;
	top: 70px;
}

.od_iframewrap, .od_iframewrap iframe#od-preview-iframe {
	top: auto;
}
/** プレビューヘッダー分、上部80px空ける */
iframe#od-preview-iframe {
	min-height: calc(100vh - 80px);
	padding-bottom: 10px;
}
/** プレビューヘッダー分、上部80px + テスト環境メッセージがあれば上部60px空ける */
body:has(.test-wrapper) iframe#od-preview-iframe {
	min-height: calc(100vh - 80px - 60px);
}

p.od-notes {
	margin-top: -16px;
}

div.od-link {
	padding: 10px;
}

div.od-link a {
	text-decoration: underline;
}

.od-new-line-parent label {
	white-space: nowrap;
	display: block;
}

.od-new-line-parent input {
	padding: 20px 10px 10px 35px;
}

@media only screen and (max-width: 1399px) {

  /* 1400px未満の画面幅の場合スマホ版プレビューが左にせり出してしまうのを防ぐ */
  .od_sppreview {
    margin-left: 0;
  }
}

/* CS調査バナーのアニメーション付与 */
.banner-animation {
  animation: zoomIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 背景色ハイライト */
.field-highlight {
  background: #fdf1e7;
  border-radius: 4px;
}