/* Specific CSS for recruit page to prevent overriding or affecting other pages */

.mainView,
.greetingView,
.aboutView,
.recommendedView,
.compensationView,
.salaryView,
.startView,
.treatmentsView,
.reqView,
.requirementsTableCont,
.lineRecruitView,
.webFromView {
  font-family: "Noto Serif JP", serif;
}

.sectionTitleLine::after {
  display: none !important;
}

.recruit-mv-title {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 42px;
  line-height: 1.4;
  letter-spacing: -0.08em;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
  margin-bottom: 16px;
}

.recruit-mv-desc-large {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.05em;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
}

.recruit-mv-desc-small {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-style: normal;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
  margin-top: 16px;
}

.greetingView,
.aboutView,
.recommendedView,
.compensationView,
.salaryView,
.startView,
.treatmentsView,
.reqView {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.greetingView,
.salaryView,
.startView {
  padding: 40px 20px;
}

.aboutView,
.recommendedView,
.compensationView,
.treatmentsView,
.reqView,
.lineRecruitView,
.webFromView {
  padding: 40px 0;
}

.greetingView .title-container,
.aboutView .title-container,
.recommendedView .title-container,
.compensationView .title-container,
.salaryView .title-container,
.startView .title-container,
.treatmentsView .title-container,
.reqView .title-container,
.lineRecruitView .title-container,
.webFromView .title-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.greetingView .title-container .title,
.aboutView .title-container .title,
.recommendedView .title-container .title,
.compensationView .title-container .title,
.salaryView .title-container .title,
.startView .title-container .title,
.treatmentsView .title-container .title,
.reqView .title-container .title,
.lineRecruitView .title-container .title,
.webFromView .title-container .title {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  text-transform: capitalize;
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.greetingView .title-container .title {
  line-height: 1.4;
}

.greetingView .title-container .subtitle,
.aboutView .title-container .subtitle,
.recommendedView .title-container .subtitle,
.compensationView .title-container .subtitle,
.salaryView .title-container .subtitle,
.startView .title-container .subtitle,
.treatmentsView .title-container .subtitle,
.reqView .title-container .subtitle,
.lineRecruitView .title-container .subtitle,
.webFromView .title-container .subtitle {
  font-family: Noto Serif JP;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  text-transform: capitalize;
  color: #ffffff;
}

.greetingView .description {
  font-family: Noto Serif JP;
  font-weight: 400;
  font-size: 14px;
  line-height: 200%;
  letter-spacing: 0px;
  text-align: center;
  color: #ffffff;
}

.aboutView .about-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px;
}

.aboutView .about-item .item-title {
  font-family: Noto Serif JP;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 10%;
  text-align: center;
  vertical-align: middle;
  text-transform: capitalize;
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.aboutView .about-item .item-desc {
  font-family: Noto Serif JP;
  font-weight: 400;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0px;
  color: #ffffff;
}

.recommendedView .recommended-container {
  padding: 10px 16px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.recommendedView .recommended-container .item-title {
  font-family: Noto Serif JP;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 10%;
  vertical-align: middle;
  text-transform: capitalize;
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.compensationView .compensation-container {
  padding: 10px 16px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}
.compensationView .compensation-content {
  font-family: Noto Serif JP;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.375;
  letter-spacing: 10%;
  text-align: center;
  vertical-align: middle;
  text-transform: capitalize;
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.compensationView .compensation-container .item-title {
  font-family: Noto Serif JP;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 10%;
  vertical-align: middle;
  text-transform: capitalize;
  color: #ffffff;
}

.compensationView .compensation-container .item-title .item-text {
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.salaryView .salary-item-container {
  padding: 20px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
}

.salaryView .salary-item-container .salary-item-name {
  font-family: Noto Serif JP;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.375;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #100f0d;
}

.salaryView .salary-item-container .salary-item-desc {
  padding: 10px;
  background: #fff;
  font-family: Noto Serif JP;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0px;
  vertical-align: middle;
}

.salaryView .salary-item-container .salary-item-img {
  width: 150px;
  height: 144px;
  object-fit: cover;
  align-self: center;
}

.salaryView .salary-item-container .salary-item-amount {
  padding: 10px;
  background: #fff;
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.salaryView
  .salary-item-container
  .salary-item-amount
  .salary-item-amount-text {
  font-family: Noto Serif JP;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #835c0e;
}

.salaryView
  .salary-item-container
  .salary-item-amount
  .salary-item-amount-banner {
  padding: 10px 5px;
  background: #835c0e;
  font-family: Noto Serif JP;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
}

.salaryView .salary-item-container .salary-item-amount .large {
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

.startView .start-item-container {
  padding: 20px 20px 0 20px;
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.startView .start-item-container .start-item-number {
  padding: 5px;
  background-color: #835c0e;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 10%;
  text-transform: capitalize;
  color: #ffffff;
  width: fit-content;
}

.startView .start-item-container .start-item-title {
  font-family: Noto Serif JP;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4375;
  letter-spacing: 10%;
  vertical-align: middle;
  text-transform: capitalize;
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.startView .start-item-container .start-item-desc {
  font-family: Noto Serif JP;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 10%;
  vertical-align: middle;
  text-transform: capitalize;
  color: #fff;
}

.treatmentsView .treatments-container .treatments-item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.treatmentsView .treatments-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.treatmentsView
  .treatments-container
  .treatments-item-container
  .treatments-item-img-container {
  height: 112px;
  width: 112px;
  background: linear-gradient(
    90deg,
    #f2d3a2 28.7%,
    #d4af73 49.92%,
    #b8925c 71.14%
  );
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
}

.treatmentsView
  .treatments-container
  .treatments-item-container
  .treatments-item-desc {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0px;
  text-align: center;
  color: #ffffff;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reqView .requirements-description {
  font-family: Noto Serif JP;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  text-transform: capitalize;
  color: #ffffff;
}

@media screen and (max-width: 740px) {
  .recruit-mv-title {
    font-size: 26px;
  }

  .recruit-mv-desc-large {
    font-size: 18px;
  }

  .recruit-mv-desc-small {
    font-size: 14px;
  }
}

@media screen and (min-width: 740px) {
  .greetingView,
  .salaryView,
  .startView {
    padding: 80px 20px;
  }

  .aboutView,
  .recommendedView,
  .compensationView,
  .treatmentsView,
  .reqView,
  .lineRecruitView,
  .webFromView {
    padding: 80px 0;
  }

  .greetingView .title-container .title,
  .aboutView .title-container .title,
  .recommendedView .title-container .title,
  .compensationView .title-container .title,
  .salaryView .title-container .title,
  .startView .title-container .title,
  .treatmentsView .title-container .title,
  .reqView .title-container .title,
  .lineRecruitView .title-container .title,
  .webFromView .title-container .title {
    font-size: 32px;
  }

  .greetingView .title-container .subtitle,
  .aboutView .title-container .subtitle,
  .recommendedView .title-container .subtitle,
  .compensationView .title-container .subtitle,
  .salaryView .title-container .subtitle,
  .startView .title-container .subtitle,
  .treatmentsView .title-container .subtitle,
  .reqView .title-container .subtitle,
  .lineRecruitView .title-container .subtitle,
  .webFromView .title-container .subtitle {
    font-size: 18px;
  }

  .greetingView .description {
    font-size: 20px;
  }

  .aboutView .about-item {
    margin: 0 auto;
    width: 100%;
    max-width: 820px;
    box-sizing: border-box;
  }

  .aboutView .about-item .item-title {
    font-size: 20px;
  }

  .aboutView .about-item .item-desc {
    font-size: 18px;
  }

  .recommendedView .recommended-container .item-title {
    font-size: 20px;
  }

  .recommendedView .recommended-container {
    margin: 0 auto;
    width: fit-content;
  }

  .compensationView .compensation-content {
    font-size: 24px;
  }

  .compensationView .compensation-container .item-title {
    font-size: 20px;
  }

  .compensationView .compensation-container {
    margin: 0 auto;
    width: fit-content;
  }

  .salaryView .salary-item-container {
    margin: 0 auto;
    width: 100%;
    max-width: 820px;
    padding: 30px;
    gap: 12px;
    box-sizing: border-box;
  }

  .salaryView .salary-item-container .salary-item-name {
    font-size: 20px;
  }

  .salaryView .salary-item-container .salary-item-desc {
    font-size: 16px;
    padding: 15px;
  }

  .salaryView .salary-item-container .salary-item-img {
    width: 180px;
    height: 173px;
  }

  .salaryView .salary-item-container .salary-item-amount {
    padding: 15px;
    gap: 12px;
  }

  .salaryView
    .salary-item-container
    .salary-item-amount
    .salary-item-amount-text {
    font-size: 20px;
  }

  .salaryView
    .salary-item-container
    .salary-item-amount
    .salary-item-amount-banner {
    font-size: 18px;
    padding: 12px 10px;
  }

  .salaryView .salary-item-container .salary-item-amount .large {
    font-size: 24px;
  }

  .startView .start-item-container {
    margin: 0 auto;
    width: 100%;
    max-width: 820px;
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
  }

  .startView .start-item-container .start-item-number {
    font-size: 20px;
  }

  .startView .start-item-container .start-item-title {
    font-size: 20px;
  }

  .startView .start-item-container .start-item-desc {
    font-size: 18px;
  }

  .treatmentsView .treatments-container {
    margin: 0 auto;
    width: 100%;
    max-width: 820px;
    box-sizing: border-box;
    gap: 20px;
  }

  .treatmentsView
    .treatments-container
    .treatments-item-container
    .treatments-item-desc {
    font-size: 20px;
    min-height: 60px;
  }

  .reqView .requirements-description {
    font-size: 20px;
  }

  .reqView .requirementsTableCont {
    margin: 30px auto 0;
    width: 100%;
    max-width: 820px;
    box-sizing: border-box;
  }
}