/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/


@charset "UTF-8";

@font-face {
  font-family: "NotoSansCJKjp-Black";
  /*01*/
  src: url("../f_font/NotoSansCJKjp-Black.woff");
}

@font-face {
  font-family: "NotoSansCJKjp-Bold";
  /*02*/
  src: url("../f_font/NotoSansCJKjp-Bold.woff");
}

@font-face {
  font-family: "NotoSansCJKjp-DemiLight";
  /*03*/
  src: url("../f_font/NotoSansCJKjp-DemiLight.woff");
}

@font-face {
  font-family: "NotoSansCJKjp-Light";
  /*04*/
  src: url("../f_font/NotoSansCJKjp-Light.woff");
}

@font-face {
  font-family: "NotoSansCJKjp-Medium";
  /*05*/
  src: url("../f_font/NotoSansCJKjp-Medium.woff");
}

@font-face {
  font-family: "NotoSansCJKjp-Regular";
  /*06*/
  src: url("../f_font/NotoSansCJKjp-Regular.woff");
}

@font-face {
  font-family: "NotoSansCJKjp-Thin";
  /*07*/
  src: url("../f_font/NotoSansCJKjp-Thin.woff");
}

.font_noto {
  font-family: "NotoSansCJKjp-Regular";
}

.font_noto_b {
  font-family: "NotoSansCJKjp-Bold";
}

.font_noto_bl {
  font-family: "NotoSansCJKjp-Black";
}

.fonts_1rem {
	font-size: 1rem;
}

.font_color_red {
	color: #e82e31 !important;
}
.font_color_blue {
	color: #0d6efd !important;
}

.font_color_white {
	color: #ffffff;
}
.back_color_red {
	background-color: #e82e31 !important;
  border-color: #e82e31 !important;
}

.back_color_blue {
	background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

.users-icon span {
  display: block;
  width: 40px;
  height: 40px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}

.mt--135 {
  margin-top: -135px;
}

.d-f-just-sb {
  justify-content: space-between;
}

.d-f-just-center {
  justify-content: center;
}

.d-f-item {
  align-items: center;
}

.shop_transaction_add_box .widget-steps > .step > .step-dot {
  border: 1px solid #0d6efd;
}
.shop_transaction_add_box .widget-steps > .step.active > .step-dot:after {
  background: #0d6efd;
}

.shop_transaction_add_box .widget-steps > .step.complete > .step-dot {
  background: #0D6EF8;
}

.avatar {
  border-radius: 50%;
  display: block;
  width: 60px;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 10px;
  left: 0;
}
.avatar_right {
  padding-left: 60px;
  box-sizing: border-box;
}


/* vue ローディング */
/*
<div class="loading-box">
  <div class="inner">
    <div class="loader">Loading...</div>
  </div>
</div>
*/
.loading-box {
  display: none;
  transition: opacity 0.15s linear;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 2000;
}

.is-loading {
  display: block !important;
}

.loading-box .inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.loading-box .inner::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
}
.loader {
  z-index: 102;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto !important;

  color: #ffffff;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.line-height15 {
  line-height: 1.5;
}

.line-height18 {
  line-height: 1.8;
}

.anime-rotate180 {
  -webkit-animation: rotate180 .8s forwards cubic-bezier(0.19, 1, 0.22, 1) ;
  animation: rotate180 .8s forwards cubic-bezier(0.19, 1, 0.22, 1) ;
}


@-webkit-keyframes rotate180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes rotate180 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}