/**********************
 * bootstrap override
 **********************/
.form-control::placeholder {
  color: #bbb;
  opacity: 1;
}

.form-control {
  background-color: #fafafa;
  border-radius: 0.15rem;
}

/**********************
 * common
 **********************/
[role=button]:not([disabled]) {
  cursor: pointer;
}

.rounded-lg2 {
  border-radius: 0.6rem !important;
}

.bg-gray {
  background: #ccc !important;
}

.bg-lightOrange {
  background: #FFF5D2 !important;
}

.text-gray {
  color: #ccc !important;
}

.text-muted2 {
  color: #99a4ae !important;
}

.font-large {
  font-size: 1.1rem;
}

.font-large2 {
  font-size: 1.2rem;
}

.minw-200px {
  min-width: 200px !important;
}

.mw-360px {
  max-width: 360px !important;
}

.mw-480px {
  max-width: 480px !important;
}


.mw-640px {
  max-width: 640px !important;
}

.mw-1080px {
  max-width: 1080px !important;
}

.minw-480px {
  min-width: 480px !important;
}


[v-cloak] {
  display: none;
}

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

.flexColChgDir.reverse {
  flex-direction: column-reverse;
}

/**********************
 * google material icon
 **********************/
[class^=material-icons].md-14 {
  font-size: 14px;
}

[class^=material-icons].md-18 {
  font-size: 18px;
}

[class^=material-icons].md-24 {
  font-size: 24px;
}

[class^=material-icons].md-26 {
  font-size: 36px;
}

[class^=material-icons].md-48 {
  font-size: 48px;
}

/**********************
 * button element
 **********************/
.btn {
  border-radius: 0.15rem;
}

.btn.disabled, .btn:disabled {
  opacity: 0.5;
}

[class^=btn-],
[class*=" btn-"] {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 2px 2px 2px rgba(0, 0, 0, 0.15);
}

[class^=btn-].disabled,
[class*=" btn-"].disabled,
[class^=btn-]:disabled,
[class*=" btn-"]:disabled {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.btn--tp1 {
  border-color: #cc7800;
  color: #fff;
  background: #FEC400;
  background: linear-gradient(to bottom, #FEC400, #FCAF00, #FA9600);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.btn--tp1:not(:disabled):not(.disabled):hover {
  color: #fff;
  background: #fe8000;
  background: linear-gradient(to bottom, #fe8400, #f14d00, #FA9600);
}

.btn--tp2 {
  border-color: #696764;
  color: #fff;
  background: #676562;
  background: linear-gradient(to bottom, #837F7C, #6B6966, #4E4C4A);
}

.btn--tp2:not(:disabled):not(.disabled):hover {
  color: #fff;
  background: #474542;
  background: linear-gradient(to bottom, #615d5a, #44423f, #4E4C4A);
}

.btn--tp3 {
  border-color: #ccc;
  color: #333;
  background: #FBFBFB;
  background: linear-gradient(to bottom, #FDFDFD, #FAFAFA, #F8F8F8);
}

.btn--tp4 {
  padding: 0.5rem 0.75rem;
  border-color: #ddd;
  color: #a5a5a5;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}

.btn--tp5 {
  padding: 0.5rem 0.75rem;
  border-color: #c8c8c8;
  color: #333;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}

.btn--tp6 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70px;
  padding: 0.5rem 0.75rem;
  border-color: #c8c8c8;
  color: #333;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}

.btn--circle {
  display: inline-block;
  border-radius: 100%;
  padding: 0;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: linear-gradient(to bottom, #FDC000, #FB9C00);
  /*border: 1px solid #c17b00; */
  box-shadow: 0 0 0 1px #ffe8ba, 0 0 0 2px #c17b00;
  font-family: "Helvetica", "arial";
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/**********************
 * breadcrumb element
 **********************/
.breadcrumbSp {
  padding: 0;
}

.breadcrumbSp__item {
  position: relative;
  text-align: center;
  color: #ccc;
  margin: 0;
  list-style: none;
  font-weight: bold;
}

.breadcrumbSp__itemNum {
  content: "";
  display: block;
  height: 26px;
  text-align: center;
  font-size: 1.4em;
  font-family: "arial";
  line-height: 0;
}

.breadcrumbSp__itemNum span {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid #ccc;
  border-radius: 100%;
  text-align: center;
  line-height: 1.05em;
}

.breadcrumbSp__item:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  height: 2px;
  width: 94%;
  background: #ccc;
  font-size: 1.8em;
  transform: translateX(-50%) scaleX(0.75);
}

.breadcrumbSp__item.active {
  color: #FCB516;
}

.breadcrumbSp__item.active .breadcrumbSp__itemNum span {
  border-color: #FCB516;
}

.breadcrumbSp__item.active:not(:first-child)::after {
  background: #FCB516;
}

.breadcrumbSp__item--done {
  color: #888;
}

.breadcrumbSp__item--done .breadcrumbSp__itemNum span {
  border-color: #888;
  color: #fff;
  background: #888;
}

.breadcrumbSp__item--done:not(:first-child)::after {
  background: #888;
}

/**********************
 * other element
 **********************/
.d-ib {
  display: inline-block !important;
}

/**********************
 * special
 **********************/
.allContent {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.headerBar {
  padding: 8px 10px;
  flex-grow: 0;
  flex-shrink: 0;
  background: #000;
  color: #fff;
  display: flex;
}

.headerBar__logo {
  display: block;
}

.contentArea {
  flex-shrink: 0;
  flex-grow: 1;
}

/* not !important */
.d-none-light {
  display: none;
}

.contentCage {
  position: relative;
  max-width: 640px;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

.boxTitle {
  margin-bottom: 0;
  background: #fdad00;
  color: #fff;
  text-align: center;
  padding: 0.5em;
  font-size: 1.6rem;
}

.header {
  text-align: center;
}

.header--tp1__inner {
  display: inline-block;
  padding: 0.4em 1em;
  background: #F5F5F5;
  border-radius: 100px;
  color: #333;
  font-weight: bold;
}

.contentArea a {
  text-decoration: underline;
}

.contentArea a.btn {
  text-decoration: none;
}

.ncsoft_logoImg {
  width: 130px;
  transform: translateY(-2px);
}

.kazariCancel {
  position: absolute;
  bottom: 15px;
  right: -15px;
  width: 197px;
  height: 113px;
  background: url(https://static.ncsoft.jp/renew/account/kazariCancel.png);
  pointer-events: none;
}

.recaptchaArea {
  width: 304px;
  height: 78px;
  background-color: rgba(0, 0, 0, 0.05);
}

/**********************
 * footer
 **********************/
.footer {
  padding: 20px;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border-top: 1px solid #eee;
  z-index: 10;
}

.footer__copyright {
  margin-top: 0.5rem;
  color: #999;
  font-size: 11px;
  text-align: right;
}

.footer__linkSet {
  padding-top: 4px;
  font-size: 14px;
}

.footer__link {
  color: #818181;
  text-decoration: none;
}

.footer__linkSeparater {
  color: #818181;
  margin: 0 5px;
}

@media screen and (max-width: 576px) {
  .footer__linkSet {
    text-align: center;
    font-size: 12px;
  }

  .footer__copyright {
    font-size: 10px;
    text-align: center;
  }
}
/**********************
 * loading layer
 **********************/
.loadingLayer {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}

.loadingLayer::after {
  content: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='60px' height='60px' viewBox='0 0 60 60' fill='white'><path d='M49.58,40.41c-3.7,6.82-10.92,11.45-19.22,11.45C18.29,51.86,8.5,42.07,8.5,30S18.29,8.14,30.36,8.14c7.82,0,14.65,4.12,18.52,10.28l4.36-2.72C48.46,8.08,40.02,3,30.36,3c-14.91,0-27,12.09-27,27c0,14.91,12.09,27,27,27c10.25,0,19.17-5.72,23.74-14.14L49.58,40.41z'/></svg>");
  animation: 1s loadingLayer linear infinite;
  width: 60px;
  height: 60px;
  transform-origin: center;
  color: #fff;
  opacity: 0.7;
}

.loadingLayer.show {
  visibility: visible;
  opacity: 1;
}

@keyframes loadingLayer {
  0% {
    transform: rotate(0);
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.7;
  }
}
/**********************
 * pop answer layer
 **********************/
.fancybox-content.popAnswer {
  padding: 0;
  width: 500px;
  text-align: center;
}

.popAnswer__header {
  margin: 0;
  height: 44px;
  background: #888;
  color: #fff;
  line-height: 44px;
  font-size: 20px;
}

.popAnswer__body {
  padding: 20px;
}

.fancybox-slide--html .popAnswer .fancybox-close-small {
  color: #fff;
}

/*# sourceMappingURL=common.css.map */