/* =============== BASE CSS ================= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,400&display=swap");

html,
body {
  width: 100%;
  height: 100%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  display: inline-block;
}

a:hover {
  text-decoration: none;
  display: inline-block;
}

th,
td {
  border: 1px solid #ddd;
  padding: 3px 5px;
}
th {
  text-align: center;
}
form,
table {
  color: #444;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  font-weight: 400;
  color: #707070;
}

/* html {
  scroll-behavior: smooth;
} */

/* --------------- common CSS  */
.section-space-top {
  margin-top: 42px;
}

.section-space-tb {
  padding-top: 30px;
  padding-bottom: 30px;
}

.section-desc,
.content {
  color: #444;
}

.content-title {
  font-size: 22px;
  font-weight: bold;
  color: #3f5fa8;
  margin-bottom: 10px;
}

.increase-height {
  padding: 19px 5px;
}

span.sn {
  margin-right: 8px;
}

.link-in-desc {
  display: inline-block;
  color: #007bff;
}
.ex-sign {
  font-weight: bold;
  color: red;
}

.up {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 10;
  transition: 0.5s;
  /* border: 3px solid transparent; */
  box-shadow: 0px 0px 8px 2px #2254ca;
  border-radius: 15px;
  animation: upBtnAnimation;
  animation: 1s linear 1s infinite alternate upBtnAnimation;
}
.up:hover {
  cursor: pointer;
}
.up span {
  display: block;
  background-color: #ffffff;
  border-radius: 15px;
  width: 50px;
  height: 50px;
  text-align: center;
  border: 3px solid #032f97;
}
.up span img {
  transform: rotate(-90deg);
  height: 18px;
  margin-top: 13px;
}

@keyframes upBtnAnimation {
  0% {
    /* border: 3px solid transparent; */
    box-shadow: 0px 0px 8px 2px #032f97;
  }
  100% {
    /* border: 3px solid #3f5fa8; */
    box-shadow: 0px 0px 8px 2px transparent;
  }
}

.foreigner .up {
  box-shadow: 0px 0px 8px 2px #ff8129;
  animation: foUpBtnAnimation;
  animation: 1s linear 1s infinite alternate upBtnAnimation;
  -webkit-animation: 1s linear 1s infinite alternate upBtnAnimation;
}

.foreigner .up span {
  border: 3px solid #ff8129;
}

@keyframes foUpBtnAnimation {
  0% {
    box-shadow: 0px 0px 8px 2px #ff8129;
  }
  100% {
    box-shadow: 0px 0px 8px 2px transparent;
  }
}

/* -------------------------------------------------- */
/* -------------- header area */
/* -------------------------------------------------- */

.header-area {
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.16);
}

.top-bar {
  color: #032f97;
  font-size: 16px;
  padding: 10px 0;
}

.top-bar .right-text img {
  margin-left: 8px;
}

.hero-area .container {
  height: 100%;
}

.hero-area {
  background: #707070 url("../img/hero-area-bg.jpg");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  height: 340px;
}

.hero-area.innerpage {
  height: 280px;
}

.main-text-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.site-text {
  display: inline-block;
  /* margin-left: 150px; */
  font-size: 80px;
  font-weight: 400;
  color: #13378b;
  text-shadow: 3px 3px 2px rgb(0 0 0 / 20%);
}

.sub-size {
  font-size: 64px;
}

.small-char {
  font-size: 32px;
  color: #3b3b3b;
  font-weight: 400;
  text-shadow: none;
}

.sm2 {
  font-weight: 500;
  font-size: 30px;
}

.sm-highlight {
  color: #13378b;
  text-shadow: none;
  font-weight: 500;
}
.img-wrap {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* ----------------------------------------- */
/* ------------ main menu area */
/* ----------------------------------------- */
.main-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.main-menu__item {
  width: 185px;
  position: relative;
}

.main-menu__item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 50px;
  background: #707070;
}

.main-menu__item:last-child::after {
  display: none;
}

.main-menu__link {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #3b3b3b;
  font-size: 18px;
  font-weight: 700;
}

.main-menu__link .text {
  line-height: 19px;
}

.main-menu__link .icon {
  margin-right: 15px;
}

.main-menu__link:hover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.main-menu__link--top {
  font-size: 24px;
  font-weight: 500;
  line-height: 20px;
}

.main-menu__item:hover .main-menu__link {
  color: #032f97;
}

.main-menu__item.active .main-menu__link {
  color: #032f97;
}

.foreigner .main-menu__item:hover .main-menu__link {
  color: #000;
}

.foreigner .main-menu__item.active .main-menu__link {
  color: #000;
}

/* -------------- section title --------------------*/
.section-title > img {
  margin-left: 10px;
  margin-right: 15px;
  margin-top: -10px;
}

.section-title {
  font-size: 40px;
  color: #13378b;
  font-weight: 500;
  -webkit-text-fill-color: #a5c1ff;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #13378b;
  text-shadow: 1.5px 1.5px 0px #002782;
  margin-bottom: 20px;
}

/* section item design */
.item {
  border: 5px solid #dde2ef;
  border-radius: 15px;
  padding: 20px;
  margin-top: 30px;
  min-height: 180px;
}

.item__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative;
  padding-left: 15px;
}

.item__title::before {
  position: absolute;
  content: "";
  width: 5px;
  height: 23px;
  background: #13378b;
  top: 8px;
  left: 0px;
}

.item__title h3 a {
  color: #707070;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
}

.highlight-blue {
  color: #13378b !important;
}

.item__desc {
  font-size: 16px;
  margin-top: 20px;
  font-weight: 300;
  line-height: 23px;
}

.item__desc li a {
  color: #13378b;
  /* color: #707070; */
}

.item__desc li a:hover {
  color: #13378b;
}

.right-btn {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 4px solid #dde2ef;
  border-radius: 12px;
  text-align: center;
  transition: 0.2s;
}

.right-btn:hover {
  border-color: #a5bfec;
}

.right-btn > i {
  font-size: 18px;
  font-weight: bold;
  color: #13378b;
  line-height: 1.7;
}

/* map-view */
.recruitment-map-view,
.recruitment-list-view {
  border: 5px solid #dde2ef;
  border-radius: 15px;
}

.recruitment-list-view {
  padding: 30px;
}

.recruitment-list-view ul li a {
  display: block;
  color: #13378b;
  line-height: 34px;
}

.recruitment-list-view ul li:hover a {
  color: #275cd6;
}

.recruitment-list-view ul li {
  position: relative;
  padding-left: 20px;
}

.recruitment-list-view ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #002782;
}

.recruitment-map-view {
  padding: 56px 0;
}

/* ----------------- footer ---------------*/
.list-box__items li a {
  font-size: 14px;
  color: #707070;
  font-weight: 300;
}

.list-box__items li a:hover {
  color: #13378b;
}

.list-box__items li i {
  margin-right: 15px;
  color: #13378b;
  font-size: 14px;
}

.list-box__title {
  font-size: 18px;
  font-weight: 500;
  color: #13378b;
  position: relative;
}

.list-box__title:after {
  position: absolute;
  content: "";
  height: 0.5px;
  bottom: -15px;
  margin: 0 auto;
  left: 10px;
  width: 80%;
  /* background: #707070; */
  background: #b5b5b5;
}

.list-box__title > img {
  margin-right: 10px;
}

.list-box__items {
  margin-top: 30px;
}

.list-box__title a {
  color: #13378b;
  display: inline-block;
}

.list-box__title a img {
  margin-right: 8px;
}

.footer-area {
  background-color: #f2f2f2;
}

.copyright {
  color: #fff;
  font-size: 18px;
  padding: 15px;
  text-align: center;
  background-color: #5670ad;
}

/* ------------------------------------------ */
/* ----------- breadcrumb */
/* ------------------------------------------ */
.breadcrumb-area li {
  display: inline-block;
  font-size: 16px;
  color: #000;
}

.breadcrumb-area li a {
  display: block;
  color: #13378b;
}

.breadcrumb-area {
  font-size: 14px;
  margin: 30px 0;
  border: 0.5px solid #b3c6f3;
  border-radius: 3px;
  padding: 3px 5px;
  background: #e4eaf761;
}

.pr-box {
  border: 1px solid #b4c8f7;
}

/* ------------------------------------------ */
/* -------------client screening page */
/* ------------------------------------------ */
.section-content-wrap {
  margin-top: 30px;
}
.section-content-wrap ul {
  color: #444;
}
.content p,
.content > ul {
  margin-top: 15px;
}

/* ------------------------------------------- */
/* ----------- client posting page */
/* ------------------------------------------- */
.web-content {
  margin-top: 30px;
}
.web-content__name {
  font-weight: normal;
}
.web-content__name a {
  display: inline-block;
  font-size: 16px;
  background-color: #016cbe;
  color: #fff;
  padding: 2px 5px;
  border-radius: 5px;
  margin-bottom: 8px;
}

.web-content__name a:hover {
  color: #ffffff;
}

.web-content__desc {
  margin-bottom: 8px;
}

.web-content__desc a {
  display: block;
  color: #707b9a;
  font-size: 12px;
  margin-top: 8px;
}

.web-content__img {
  display: block;
  margin: 0 auto;
  position: relative;
}

.web-content__img img {
  width: 100%;
  height: auto;
  border: 1px solid #016cbe;
  border-radius: 5px;
}

.web-content__img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: 0.7s;
}

.web-content__img:hover::before {
  visibility: visible;
  opacity: 0.2;
}

.web-content__img:hover {
  display: block;
  width: 100%;
}

.jd-img img {
  display: block;
  margin: 0 auto;
}

.price-table-area th,
.price-table-area td {
  min-width: 85px;
}

.price-tables {
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  flex-wrap: wrap;
}

.price-tbl {
  width: 50%;
  padding-left: 15px;
  padding-right: 15px;
}

.tbl-footer-desc {
  margin-top: 15px;
}

.content__chart-img {
  margin-top: 15px;
}

.chart-tbl-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -15px;
  margin-right: -15px;
}

.chart-tbl-wrap .chart-tbl {
  flex: 50%;
  padding: 15px;
}
.tbl-h-second,
.price-table-area thead {
  background-color: #cae5eb;
}

.tbl-h-second:hover,
.price-table-area thead tr:hover {
  background-color: #cae5eb;
}

.price-tbl--left table tr td:last-child {
  text-align: right;
}

.price-tbl--left table tr th:last-child {
  padding-left: 10px;
  padding-right: 10px;
}
.price-tbl--right tbody tr td:nth-child(even) {
  text-align: right;
}

.price-tbl th,
.price-tbl td {
  color: #333;
}

.price-tbl tr:nth-child(even) {
  background-color: #f1f1f1;
}
.price-tbl tr:hover {
  background-color: #eef9fc;
  transition: 0.2s;
}
.tbl-h-second {
  font-size: 16px;
}

/* ---------------------------------------------- */
/* ------------ unemployment page */
/* ---------------------------------------------- */
.content__rank-img {
  display: inline-block;
  position: relative;
}

.content__rank-img::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: 0.3s;
}

.content__rank-img:hover::before {
  opacity: 0.4;
}

.tbl__row {
  display: flex;
  margin-top: 15px;
}

.tbl-col:first-child {
  font-weight: bold;
  flex-shrink: 0;
  margin-right: 15px;
}

.tbl-col:first-child a {
  display: block;
  color: #13378b;
}

.link-right {
  display: block;
  margin-left: auto;
  width: 150px;
  text-align: right;
}

.link-right a {
  font-weight: bold;
  color: #13378b;
}

.tbl__row .tbl-col {
  margin-top: 5px;
}

/* ---------------------------------------------------- */
/* --------------- ranking page */
/* ---------------------------------------------------- */
.ranking-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.ranking-wrap__tbl {
  margin-right: 15px;
  flex-shrink: 0;
}

.ranking-wrap__img img {
  border-radius: 3px;
}

.ranking-wrap__img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px;
}

.ranking-wrap__tbl:last-child {
  margin-right: 0;
}

/* -------------------------------------------------------- */
/* ------------------ notification page */
/* -------------------------------------------------------- */
.id-card-ex {
  margin-top: 15px;
  background-color: #ffffce;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.id-card-ex img {
  padding: 15px;
}

/* -------------------------------------------------------- */
/* ---------- Price_Index page */
/* -------------------------------------------------------- */
.price-index-table table {
  width: 85%;
  margin: 0 auto;
}

.price-index-table {
  margin-top: 15px;
}

.price-index-table tr:not(:first-child) td:not(:first-child) {
  text-align: right;
}

/* -------------------------------------------------------- */
/* ---------- company overview page */
/* -------------------------------------------------------- */
.company-overview {
  padding: 15px;
  /* background-color: #fafbff; */
  border-radius: 15px;
  box-shadow: 0px 0px 2px #b3c6f3;
  /* border: 1px solid #b3c6f3; */
}

.info {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 5px;
}

.info__label {
  width: 246px;
}

.info__desc > a {
  display: block;
}

.info:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}

.company-overview {
  color: #444;
}

/* -------------------------------------------------------- */
/* ---------- contact page */
/* -------------------------------------------------------- */
.contact {
  padding: 15px;
  background-color: #fafbff;
  border-radius: 5px;
  /* box-shadow: 0px 0px 1px #b3c6f3; */
  border: 1px solid #b3c6f3;
  width: 70%;
  margin: 0 auto;
}

.contact__check-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.contact__check-wrap > label {
  flex: 50%;
}

.contact__check-wrap label > input {
  margin-right: 8px;
}

.contact__point {
  line-height: 1.7;
  margin-bottom: 15px;
}

.input-wrap {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}

.input-wrap > p:first-child {
  min-width: 205px;
}

.input-wrap.required > p > span {
  color: red;
}

.input-wrap > .input-sm {
  width: 35%;
}

.btn-wrap {
  text-align: center;
}

.btn-wrap button {
  margin-right: 10px;
}

.btn-wrap button:last-child {
  margin-right: 0;
}

.input-wrap > textarea::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 0.6; /* Firefox */
}

.input-wrap > textarea::-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: red;
}

.input-wrap > textarea::-ms-input-placeholder {
  /* Microsoft Edge */
  color: red;
}

/* -------------------------------------------------------- */
/* ---------- client-agent page */
/* -------------------------------------------------------- */
.tbl-content__detail {
  margin-bottom: 10px;
}

.tbl-content__caption {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tbl-content-wrap {
  margin-top: 80px;
  color: #444;
}

.tbl-view {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.tbl-view__row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tbl-view__row:last-child {
  border-bottom: none;
}

.tbl-view__th {
  min-width: 150px;
  border-right: 1px solid #ddd;
  padding: 10px;
  background-color: #f2f6fe;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.tbl-view__th.bdr-left {
  border-left: 1px solid #ddd;
}

.tbl-view__td {
  padding: 10px;
}

.tbl-merge__left-part,
.tbl-merge__right-part {
  width: 50%;
}

.tbl-merge__row {
  display: flex;
  height: 100%;
  align-items: center;
}

.tbl-merge__row .tbl-view__th {
  height: 100%;
}

/* -------------- fail to pay page */
.section-detail {
  color: #444;
  display: flex;
}

.section-detail__left > p {
  margin-bottom: 15px;
}

/* ------ Visa page */
.working-visa-tbl {
  min-width: 690px;
}
.working-visa-tbl tr th {
  background-color: #e8efff;
}

.working-visa-tbl tr:nth-child(odd) {
  background-color: #f4f4f4;
}
/* -------------------------------------------------------------------- */
/* ----- foreigner side css*/
/* -------------------------------------------------------------------- */

.foreigner .link-in-desc,
.foreigner .link-in-desc:hover,
.foreigner .top-bar {
  color: #f88e42;
}

.foreigner .link-in-desc {
  font-weight: bold;
}

/* ----------------------------------------- */
.foreigner .breadcrumb-area {
  border-color: #f88e42;
  background: #ffffff;
}

.foreigner .breadcrumb-area li a {
  color: #ff8129;
}

.foreigner .hero-area {
  background: #707070 url("../img/fo-hero-area-bg.jpg");
  background-position: right;
}

.foreigner .item {
  min-height: 243px;
}

.foreigner .site-text {
  color: #2a2a2a;
  font-weight: bold;
  line-height: 1;
}

.foreigner .sub-size {
  font-weight: normal;
  font-size: 80px;
}

.foreigner .medium-size {
  font-size: 40px;
  letter-spacing: 50px;
  font-weight: normal;
}

.foreigner .main-menu__item {
  width: 222px;
}

.foreigner .main-menu__link {
  color: #686868;
}

.foreigner .main-menu__link:hover {
  color: #2a2a2a;
}

.fo-section-title {
  text-align: center;
  color: #2d2d2d;
  margin-top: 15px;
  margin-bottom: 30px;
  font-size: 36px;
}

.fo-section-title .text {
  text-align: left;
  display: inline-block;
}

.fo-section-title .text .en {
  color: #ff8129;
  font-size: 12px;
  margin-left: 5px;
}

.fo-section-title img {
  display: inline-block;
  margin-top: -16px;
}

/* ------------ fo home content */
.section-content-container {
  background-color: #ecf2fc;
  padding: 30px;
}

.items-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-right: -30px;
  margin-bottom: -15px;
}

.fo-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 3px;
  width: 48%;
  margin-right: 15px;
  margin-bottom: 15px;
}

.fo-item__title {
  font-size: 20px;
  font-weight: 400;
  color: #000;
  border-bottom: 1px solid #ffa261;
}

.fo-item__title:hover {
  color: #707070;
}

.fo-item__title img {
  margin-right: 10px;
}

.fo-item__content {
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
}

.fo-item__content .right-link {
  display: block;
  margin-top: 15px;
  text-align: right;
  color: #ffa261;
}

.fo-item__content .right-link:hover {
  color: #ff8129;
}

.fo-item--pr-decre {
  padding-right: 14px;
}

.fo-item > a {
  display: block;
}

/* ----------- fo footer */
.fo-footer-area {
  background-color: #f2f2f2;
}

.fo-footer-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.fo-footer-item.item-3 {
  grid-area: 1 / 3 / span 2 / 3;
}

.fo-footer-item__title {
  font-size: 20px;
  font-weight: 500;
  color: #f88e42;
}

.fo-footer-item__title > img {
  margin-right: 5px;
}

.fo-footer-item__menu li a {
  font-size: 14px;
  font-weight: 300;
  color: #878787;
}

.fo-footer-item__menu {
  margin-left: 18px;
}

.fo-footer-item__menu.without-dot {
  margin-left: 34px;
}

.fo-footer-item__menu li a:hover {
  color: #2d2d2d;
}

.foreigner .copyright {
  background-image: linear-gradient(180deg, #ffc094, #fea362);
  padding: 7px 15px;
}

/* ---------------------- sub menu */
.sub-menu {
  position: absolute;
  left: 0;
  top: 145%;
  background-color: #fff;
  box-shadow: 0px 6px 10px rgb(0 0 0 / 20%);
  /* min-width: 360px; */
  min-width: 404px;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
  z-index: 555;
}

.foreigner .sub-menu {
  min-width: 360px;
}

.sub-menu__link {
  display: block;
  color: #686868;
  font-size: 16px;
  padding: 8px;
  width: 100%;
  border-left: 2px solid transparent;
}

.sub-menu__item.active .sub-menu__link,
.sub-menu__link:hover {
  color: #000;
  background-color: #f2f2f2;
  border-left: 2px solid #707070;
}
/* --------------------------------------------------------------------- */
/* ------------------ Client > Useful > Supervisor Page -----------------*/
/* --------------------------------------------------------------------- */
.pr-dec {
  padding-right: 5px;
}
.pl-dec {
  padding-left: 5px;
}
/* @ supervisor block */
.supervisor {
  overflow: hidden;
  background-color: #fafafa;
  padding: 8px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
  border: 1px solid #ddd;
}

.supervisor__photo {
  float: left;
}

.supervisor-info__name,
.supervisor-info__desig {
  font-weight: bold;
  font-size: 14px;
  color: #444;
}

.supervisor__photo img {
  border: 1px solid #ddd;
  margin-right: 8px;
}

.supervisor-info__desc {
  font-size: 11px;
}

/* -------------------------------------------------------- */
/* ---------- color changing */
/* -------------------------------------------------------- */
.daijob .web-content__name a {
  background-color: #006;
}
.daijob .web-content__img img {
  border-color: #006;
}

.careercross .web-content__name a {
  background-color: #658dab;
}
.careercross .web-content__img img {
  border-color: #658dab;
}

.nextinjapan .web-content__name a {
  background-color: #820000;
}
.nextinjapan .web-content__img img {
  border-color: #820000;
}

.gaijinpot .web-content__name a {
  background-color: #ff4c6e;
}
.gaijinpot .web-content__img img {
  border-color: #ff4c6e;
}

.bridgers .web-content__name a {
  background-color: #00a7e4;
}
.bridgers .web-content__img img {
  border-color: #00a7e4;
}

.originator .web-content__name a {
  background-color: #54798a;
}
.originator .web-content__img img {
  border-color: #54798a;
}

.gooojob .web-content__name a {
  background-color: #547792;
}
.gooojob .web-content__img img {
  border-color: #547792;
}

.nipponshigoto .web-content__name a {
  background-color: #e85b5b;
}
.nipponshigoto .web-content__img img {
  border-color: #e85b5b;
}

.globalsaiyou .web-content__name a {
  background-color: #244f77;
}
.globalsaiyou .web-content__img img {
  border-color: #244f77;
}

.connectiu .web-content__name a {
  background-color: #eb501e;
}
.connectiu .web-content__img img {
  border-color: #eb501e;
}

.graspagent .web-content__name a {
  background-color: #222222;
}
.graspagent .web-content__img img {
  border-color: #222222;
}

.chokutori .web-content__name a {
  background-color: #0070c0;
}
.chokutori .web-content__img img {
  border-color: #0070c0;
}

.yolojapan .web-content__name a {
  background-color: #ffa404;
}
.yolojapan .web-content__img img {
  border-color: #ffa404;
}

.workjapan .web-content__name a {
  background-color: #162030;
}
.workjapan .web-content__img img {
  border-color: #162030;
}

.nihondebaito .web-content__name a {
  background-color: #d22b46;
}
.nihondebaito .web-content__img img {
  border-color: #d22b46;
}

.jobgtn .web-content__name a {
  background-color: #eb2a73;
}
.jobgtn .web-content__img img {
  border-color: #eb2a73;
}

.hrcqi .web-content__name a {
  background-color: #2d82fd;
}
.hrcqi .web-content__img img {
  border-color: #2d82fd;
}

.spirecruit .web-content__name a {
  background-color: #1970ca;
}
.spirecruit .web-content__img img {
  border-color: #1970ca;
}

.jinji .web-content__name a {
  background-color: #17b1e6;
}
.jinji .web-content__img img {
  border-color: #17b1e6;
}

.internshipguide .web-content__name a {
  background-color: #00cc00;
}
.internshipguide .web-content__img img {
  border-color: #00cc00;
}

.careerbaito .web-content__name a {
  background-color: #152d4a;
}
.careerbaito .web-content__img img {
  border-color: #152d4a;
}

.jobcareertasu .web-content__name a {
  background-color: #0aa5b0;
}
.jobcareertasu .web-content__img img {
  border-color: #0aa5b0;
}

.jobmynavi .web-content__name a {
  background-color: #00aaff;
}
.jobmynavi .web-content__img img {
  border-color: #00aaff;
}

.intern .web-content__name a {
  background-color: #00a8b8;
}
.intern .web-content__img img {
  border-color: #00a8b8;
}

.infra .web-content__name a {
  background-color: #009688;
}
.infra .web-content__img img {
  border-color: #009688;
}

.jeekwebflow .web-content__name a {
  background-color: #ea4c4c;
}
.jeekwebflow .web-content__img img {
  border-color: #ea4c4c;
}

.interngate .web-content__name a {
  background-color: #02b1bf;
}
.interngate .web-content__img img {
  border-color: #02b1bf;
}

.rikeinavi .web-content__name a {
  background-color: #ea6117;
}
.rikeinavi .web-content__img img {
  border-color: #ea6117;
}

.b-kr-jp .web-content__name a {
  background-color: #3064af;
}
.b-kr-jp .web-content__img img {
  border-color: #3064af;
}

.kjcareer .web-content__name a {
  background-color: #b51a1a;
}
.kjcareer .web-content__img img {
  border-color: #b51a1a;
}

.career-in-ja .web-content__name a {
  background-color: #0fbdff;
}
.career-in-ja .web-content__img img {
  border-color: #0fbdff;
}

.b-cn-jp .web-content__name a {
  background-color: #019be2;
}
.b-cn-jp .web-content__img img {
  border-color: #019be2;
}

.mritmg .web-content__name a {
  background-color: #ff9a4a;
}
.mritmg .web-content__img img {
  border-color: #ff9a4a;
}

.global-agent .web-content__name a {
  background-color: #00abeb;
}
.global-agent .web-content__img img {
  border-color: #00abeb;
}

.neo-career .web-content__name a {
  background-color: #0098d8;
}
.neo-career .web-content__img img {
  border-color: #0098d8;
}

.hr-service .web-content__name a {
  background-color: #1f90db;
}
.hr-service .web-content__img img {
  border-color: #1f90db;
}

.causebd .web-content__name a {
  background-color: #3263af;
}
.causebd .web-content__img img {
  border-color: #3263af;
}

.bangla-linkstaff .web-content__name a {
  background-color: #3a847b;
}
.bangla-linkstaff .web-content__img img {
  border-color: #3a847b;
}

.springjapan .web-content__name a {
  background-color: #012269;
}
.springjapan .web-content__img img {
  border-color: #012269;
}

.smri-asia .web-content__name a {
  background-color: #0b539f;
}
.smri-asia .web-content__img img {
  border-color: #0b539f;
}

.peraichi .web-content__name a {
  background-color: #000;
}
.peraichi .web-content__img img {
  border-color: #000;
}

.bali-recruit .web-content__name a {
  background-color: #67b840;
}
.bali-recruit .web-content__img img {
  border-color: #67b840;
}

.r-vietnam .web-content__name a {
  background-color: #f16060;
}
.r-vietnam .web-content__img img {
  border-color: #f16060;
}

.crie-co .web-content__name a {
  background-color: #337499;
}
.crie-co .web-content__img img {
  border-color: #337499;
}

.asegonia .web-content__name a {
  background-color: #0066cc;
}
.asegonia .web-content__img img {
  border-color: #0066cc;
}

.pasona-global .web-content__name a {
  background-color: #ca0813;
}
.pasona-global .web-content__img img {
  border-color: #ca0813;
}

.global-cp .web-content__name a {
  background-color: #004f70;
}
.global-cp .web-content__img img {
  border-color: #004f70;
}

.wagaya-japan .web-content__name a {
  background-color: #93363d;
}
.wagaya-japan .web-content__img img {
  border-color: #93363d;
}

.hitorigurashi .web-content__name a {
  background-color: #0662b8;
}
.hitorigurashi .web-content__img img {
  border-color: #0662b8;
}

.yolo-japan .web-content__name a {
  background-color: #046dd9;
}
.yolo-japan .web-content__img img {
  border-color: #046dd9;
}

.best-estate .web-content__name a {
  background-color: #e7212c;
}
.best-estate .web-content__img img {
  border-color: #e7212c;
}

.unilife-apartment .web-content__name a {
  background-color: #fd912b;
}
.unilife-apartment .web-content__img img {
  border-color: #fd912b;
}

.j-lease .web-content__name a {
  background-color: #0353a4;
}
.j-lease .web-content__img img {
  border-color: #0353a4;
}

.gtn .web-content__name a {
  background-color: #d31c30;
}
.gtn .web-content__img img {
  border-color: #d31c30;
}

.zenhoren .web-content__name a {
  background-color: #00a33e;
}
.zenhoren .web-content__img img {
  border-color: #00a33e;
}

.casa-inc .web-content__name a {
  background-color: #009b87;
}
.casa-inc .web-content__img img {
  border-color: #009b87;
}

.fca-jp .web-content__name a {
  background-color: #ff0000;
}
.fca-jp .web-content__img img {
  border-color: #ff0000;
}

.menkyo-concierge .web-content__name a {
  background-color: #d32250;
}
.menkyo-concierge .web-content__img img {
  border-color: #d32250;
}

.kenseibu .web-content__name a {
  background-color: #063390;
}
.kenseibu .web-content__img img {
  border-color: #063390;
}

.wise .web-content__name a {
  background-color: #3e4f94;
}
.wise .web-content__img img {
  border-color: #3e4f94;
}

.smileswallet .web-content__name a {
  background-color: #2abc51;
}
.smileswallet .web-content__img img {
  border-color: #2abc51;
}

.westernunion .web-content__name a {
  background-color: #212a33;
}
.westernunion .web-content__img img {
  border-color: #212a33;
}

.halalgourmet .web-content__name a {
  background-color: #bf3600;
}
.halalgourmet .web-content__img img {
  border-color: #bf3600;
}

.happycow .web-content__name a {
  background-color: #7c4ec4;
}
.happycow .web-content__img img {
  border-color: #7c4ec4;
}

.tripadvisor .web-content__name a {
  background-color: #02ab6e;
}

.tripadvisor .web-content__img img {
  border-color: #02ab6e;
}

.tabunka .web-content__name a {
  background-color: #625226;
}

.tabunka .web-content__img img {
  border-color: #625226;
}

.meetup .web-content__name a {
  background-color: #f64060;
}

.meetup .web-content__img img {
  border-color: #f64060;
}

.tokyocheapo .web-content__name a {
  background-color: #ff0000;
}

.tokyocheapo .web-content__img img {
  border-color: #ff0000;
}

/* ------- error handel */
/*
if input wrap is flex
 * input filed should wrap
 ex:<p class="w-100"><input type="text" class="form-control" id="email"></p>
 * in js parent= parent + parent // for set error class

if input wrap without flex
 * input filed no wrap // no problem
 * in js parent: parent // no problem


*/
.vError {
  color: red;
}
.vError textarea,
.vError input {
  border-color: red;
}